[Frontend][系統監控] forge Model 電梯物件化調整 | 電梯順序調整 | [儀錶板] 上方四個Card資料顯示 | [系統監控] 頁面跳閃問題解決 | bajatest callback object 調整 | 建置 訂閱完成 callback | [ForntendWebApi] GetDeviceList 補上 priority

Frontend/_dashboard.html

@@ -9,8 +9,8 @@
                     <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                21.5k
+                                560
-                                <small class="m-0 l-h-n">users signed up</small>
+                                <small class="m-0 l-h-n">今日用電量 kWH</small>
                             </h3>
                         </div>
                         <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
@@ -20,8 +20,8 @@
                     <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                $10,203
+                                6560
-                                <small class="m-0 l-h-n">Visual Index Figure</small>
+                                <small class="m-0 l-h-n">昨日用電量</small>
                             </h3>
                         </div>
                         <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
@@ -69,8 +69,8 @@
                     <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                - 103.72
+                                9,218
-                                <small class="m-0 l-h-n">Offset Balance Ratio</small>
+                                <small class="m-0 l-h-n">即時功率</small>
                             </h3>
                         </div>
                         <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
@@ -80,8 +80,8 @@
                     <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                +40%
+                                8,846
-                                <small class="m-0 l-h-n">Product level increase</small>
+                                <small class="m-0 l-h-n">即時契約容量占比 kWH</small>
                             </h3>
                         </div>
                         <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>

Frontend/_sysElevator.html

@@ -3,9 +3,11 @@
         background-color: #fff;
         min-height: 520px;
     }
+
     .elevator-table-wrapper {
-        padding:0.8rem;
+        padding: 0.8rem;
     }
+
     table.elevator-build {
         /*border: 1px double #000;*/
     }
@@ -51,10 +53,10 @@
             <div id="elevatorBlock" class="elevator">
                 <div class="elevator-header">
                     <div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
-                        <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#2dDiv">
+                        <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
                             2D
                         </button>
-                        <button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#3dDiv" onclick="show3D()">
+                        <button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv" onclick="show3D()">
                             3D
                         </button>
                     </div>
@@ -88,47 +90,7 @@
     <!-- 中間卡片區 -->
     <div class="col-7 my-3">
         <div id="eleCards" class="row">
-            <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
+       
-                <div type="button" class="card-body" data-toggle="modal" data-target="#card1">
-                    <span class="d-flex">
-                        <h5 class="card-title">號機別 : 1</h5>
-                        <i class="fas fa-caret-up fa-3x ml-auto"></i>
-                    </span>
-                    <h4 class="d-flex justify-content-end">10F</h4>
-                    <span class="d-flex">
-                        <p class="card-text">狀態 : 運行中</p>
-                        <i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
-                    </span>
-                </div>
-            </div>
-            <div class="card text-white bg-danger mx-1 mb-3 col-4" style="max-width: 18rem">
-                <div type="button" class="card-body">
-                    <span class="d-flex">
-                        <h5 class="card-title">號機別 : 2</h5>
-                        <i class="fas fa-caret-up fa-3x ml-auto"></i>
-                    </span>
-                    <h4 class="d-flex justify-content-end">5F</h4>
-                    <span class="d-flex">
-                        <p class="card-text animate__animated animate__flash animate__infinite animate__slower">
-                            狀態 : 維修
-                        </p>
-                        <i class="fas fa-caret-down fa-3x ml-auto"></i>
-                    </span>
-                </div>
-            </div>
-            <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
-                <div type="button" class="card-body">
-                    <span class="d-flex">
-                        <h5 class="card-title">號機別 : 3</h5>
-                        <i class="fas fa-caret-up fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
-                    </span>
-                    <h4 class="d-flex justify-content-end">3F</h4>
-                    <span class="d-flex">
-                        <p class="card-text">狀態 : 運行中</p>
-                        <i class="fas fa-caret-down fa-3x ml-auto"></i>
-                    </span>
-                </div>
-            </div>
         </div>
     </div>
     <!-- End-中間卡片區 -->
@@ -520,7 +482,7 @@
                                     <td>
                                         <div class="d-flex justify-content-center align-items-center">
                                             <div class="row mr-2">
-                                                <input name="preMea" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_DP" >
+                                                <input name="preMea" type="checkbox" class="toggle" data-toggle="toggle" data-point="SP_DP">
                                             </div>
                                             <i id="preMeaSche" data-point="DP" class="fas fa-calendar-alt fs-1-1 mr-2 cur-poi"></i>
                                         </div>
@@ -893,6 +855,7 @@
 </div>
 
 <script>
+
     var eleManTable = null;
     var allDevList = [];       //每個設備
     var subSeviceData = [];    //每個設備訂閱點位值
@@ -901,6 +864,7 @@
     var viewer3DNodeIds = [223, 228, 233];
     var elev3DBind = {};
     var elev3DOption = {};
+    var elev3DObj = [];
     var subOrdPath = {
         "building_tag": pageAct.buiTag,
         "system_tag": pageAct.sysMainTag,
@@ -913,14 +877,15 @@
     var global_emergency_alarm_device_number = [];
     var zoomToggle = 3;
     var isFirstLoad3D = true;
+    var isFirstLoadSub = true;
     $(function () {
         initChart();
-        
+
         setBuildFloor();
         setCards();
         subDeviceSetStatus();
         setEleManTable();
-        
+
     })
 
     function getFloDevList() {
@@ -950,8 +915,8 @@
             if (allDevList.length == 0) {
                 return false;
             }
-
+            data.device_number = data.device_number_full;
-            let matchDevice = allDevList.filter(x => x.device_number?.split("_")[x.device_number?.split("_").length - 1] == data.device_number)[0];
+            let matchDevice = allDevList.filter(x => x.device_number == data.device_number)[0];
             let master = matchDevice.device_number.split("_")[5];
             //狀態
             if (data.point_name == "ST") {
@@ -1007,40 +972,97 @@
             // 電梯管理 不服務樓層 detail
             subDeviceSetEleManNotSerFloor(master);
         });
+        myBaja.setSubscribeDeviceEndCallBack(function (data) {
+            let devNumArr = data.map(x => x.device_number_full).Distinct();
+            $.each(devNumArr, (idx, devNum) => {
+                
+                let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
 
+                if (subData) {
+                    // 左側 3D 電梯 nodeID 與 device_number match
+                    if (Object.keys(elev3DBind).indexOf(devNum) == -1) {
+                        elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
+                    }
+                    // 左側 3D 電梯 Viewer Option 設置
+                    /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
+                    elev3DOption.nodeId = elev3DBind[devNum];
+                    elev3DOption.floorHeight = floList.map((x) => { return { floor: x } });
+                    elev3DOption.floorHeight.forEach((floObj, idx) => {
+                        if (floObj.floor.startsWith("B")) {
+                            let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
+                            floObj.height = floor * -13;
+                        } else {
+                            let floor = parseInt(floObj.floor.split("F")[0]);
+                            if (floor == 1) {
+                                floObj.height = 0;
+                            } else if (floor == 2) {
+                                floObj.height = 14.75;
+                            } else {
+                                floObj.height = (14.75 + ((floor - 2) * 9.75));
+                            }
+                        }
+                    })
+
+                    if (isFirstLoad3D == false && elev3DObj.length != 0) {
+                        let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
+                        if (!elevObj.id) {
+                            elevObj.id = devNum;
+                        }
+                        elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
+                        elevObj.obj.init(function () {
+                            let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]);
+                            frags.forEach((fragProxy) => {
+                                fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
+                                fragProxy.frag.updateAnimTransform()
+                            })
+                            elevObj.obj.viewer.impl.sceneUpdated(true);
+                        });
+                    }
+                }
+            })
+
+            reloadEleManTable(setEleManTabDataFromBaja());
+        })
     }
 
     // baja 訂閱 變更 電梯管理 Table
     function setEleManTabDataFromBaja() {
+
         let result = [];
         let masterList = allDevList.map(x => x.device_number.split("_")[5]).Distinct();
         // Master(第六段) 區分
         $.each(masterList, (idx, master) => {
+            debugger
             let main = {};
             // 匯入 Master 名稱`
             main.devName = master;
             let subData = subSeviceData.filter(x => x.device_number.split("_")[5] == master)[0];
-            $.each(Object.keys(subData), (idx3, subKey) => {
+            if (subData) {
-                if (subKey.startsWith("SP_FLS_")) { 
+                $.each(Object.keys(subData), (idx3, subKey) => {
-                    main[subKey] = subData[subKey];
+                    if (subKey.startsWith("SP_FLS_")) {
-                }
+                        main[subKey] = subData[subKey];
-            })
+                    }
+                })
+            }
             main._rowType = "master";
             result.push(main);
             // 該 Master 底下的設備
             let devListByMaster = allDevList.filter(x => x.device_number.split("_")[5] == master);
+
             $.each(devListByMaster, (idx2, devObj) => {
                 let subData = subSeviceData.filter(x => x.device_number == devObj.device_number)[0];
-                main = {};
+                if (subData) {
-                main.devNum = devObj.device_number;
+                    main = {};
-                main.devName = devObj.full_name;
+                    main.devNum = devObj.device_number;
-                main._rowType = "device";
+                    main.devName = devObj.full_name;
-                // 該設備點位匯入
+                    main._rowType = "device";
-                $.each(Object.keys(subData), (idx3, subKey) => {
+                    // 該設備點位匯入
-                    main[subKey] = subData[subKey];
+                    $.each(Object.keys(subData), (idx3, subKey) => {
-                })
+                        main[subKey] = subData[subKey];
-                // 匯入設備資訊(訂閱點位)
+                    })
-                result.push(main);
+                    // 匯入設備資訊(訂閱點位)
+                    result.push(main);
+                }
             })
         })
         return result;
@@ -1057,7 +1079,7 @@
 
         function creLight(type = "trueText") {
             let lightType = type == "trueText" ? "bg-success" : "bg-danger";
-            
+
             return $(creEle("span", null, null, null, [lightType, "circle-light"])).outerHtml();
         }
 
@@ -1074,13 +1096,15 @@
         } else {
             elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
         }
-
+        
-        // 左側 3D 電梯 nodeID 與 device_number match
+        if (isFirstLoad3D == false && elev3DObj.length != 0) {
-        if (Object.keys(elev3DBind).indexOf(matchDevice.device_number) == -1) {
+            let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
-            elev3DBind[matchDevice.device_number] = viewer3DNodeIds[elev3DBind.length];
+            if (elevObj && elevObj.id) {
+                elevObj.obj.setElevatorFloor(subData["CP"])
+                elevObj.obj.movElevator();
+            }
         }
 
-
         elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
         //現在樓層
         if (subData["CP"]) {
@@ -1126,35 +1150,39 @@
             } else {
                 let strHtml = ``;
                 let masterArr = [];
-                let masDiv = "";
+                
+                $("#eleCards").html("");
+                
                 $.each(res.data, (index, floObj) => {
-                   
+                    let masters = floObj.device_list.map(x => x.device_number?.split("_")[5]).Distinct();
-                    $.each(floObj.device_list, (index2, devObj) => {
+                    
-                        allDevList.push(devObj);
+                    $.each(masters, (idx, master) => {
-                        if (masterArr.indexOf(devObj?.device_number?.split("_")[5]) == -1) {
+
-                            let master = devObj?.device_number?.split("_")[5];
+                        let masDiv = creDiv(["col-12","row","m-0","gap-5"]);
-                            masDiv = creDiv(["col-12"]);
+                        masDiv.append(creEle("h2", master, null, null,["col-12","p-0"]));
-                            masDiv.append(creEle("h2", master, null, null))
+                        strHtml = ``;
-                            masterArr.push(master);
+                        floObj.device_list.filter(x => x.device_number?.split("_")[5] == master).forEach((devObj) => {
-                        }
+                            allDevList.push(devObj);
-                        
+                            allDevList = allDevList.oSort("priority")
-                        strHtml += `<div id="${devObj.device_number}_card" class="card dev-card text-white mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
+                            masDiv.append($(`<div id="${devObj.device_number}_card" class="card dev-card text-white mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
-                                        <div type="button" class="card-body">
+                                            <div type="button" class="card-body">
-                                            <span class="d-flex">
+                                                <span class="d-flex">
-                                                <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
+                                                    <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
-                                                <i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
+                                                    <i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
-                                            </span>
+                                                </span>
-                                            <h4 name="curFloor" class="d-flex justify-content-end mb-0"></h4>
+                                                <h4 name="curFloor" class="d-flex justify-content-end mb-0"></h4>
-                                            <span class="d-flex">
+                                                <span class="d-flex">
-                                                <p class="card-text">狀態 : <span name="devStatus"></span></p>
+                                                    <p class="card-text">狀態 : <span name="devStatus"></span></p>
-                                                <i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
+                                                    <i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
-                                            </span>
+                                                </span>
-                                        </div>
+                                            </div>
-                                    </div>`;
+                                        </div>`));
-                        masDiv.append(strHtml)
+                        })
+                        $("#eleCards").append(masDiv);
+                       
                     })
+                   
                 })
-                $("#eleCards").html(masDiv);
                 initPopover();
                 //平面圖載入
                 chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`);
@@ -1272,7 +1300,6 @@
 
     // 電梯管理 Modal - 資料更新
     function reloadEleManTable(datas) {
-
         let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
         $.each(datas, (idx, data) => {
             $.each(tabCols, (idx2, value) => {
@@ -1401,7 +1428,7 @@
 
         $("#notSerFloTable").html(setNotSerFloTable(allSerFloors));
         let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
-        
+
         $(`[name^=notSerChk]`).prop("checked", false);
         $.each(notSerFloors, (idx, floor) => {
             $(`[name=notSerChk${floor}]`).prop("checked", true);
@@ -1642,7 +1669,7 @@
             }
             return item;
         });
-        
+
         if (currentData == null || currentData.length == 0) {
             this.currentData = [];
         }
@@ -1688,7 +1715,7 @@
                 // animationDurationUpdate: 1500,
                 tooltip: {
                     formatter: function (params) {
-                        
+
                         if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
                             return `名稱：${params.data.device_node_full_name}<br>
                                     Guid：${params.data.device_node_guid}`
@@ -2346,27 +2373,54 @@
 
     //載入3D模型
     function load3DModel() {
-        let option = {
+        debugger
-            nodes: [223, 228, 233],
-            element: "#forgeViewer",
-            floorHeight: [
-                { floor: 1, height: 15 },
-                { floor: 2, height: 24.5 },
-                { floor: 3, height: 34 },
-            ]
-        }
-        
 
-        launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA==', option, () => {
+        launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA==', (viewer) => {
-            console.log($("#forgeViewer"))
+            $.each(viewer3DNodeIds, function (idx, node) {
-            let elevator = $("#forgeViewer")[0]._elevator3D[0];
+                let options = {
-            elevator.obj.setElevatorFloor(3)
+                    element: $("#forgeViewer"),
-            elevator.obj.movElevator()
+                    viewer: viewer,
+                    nodeId: node,
+                    floorHeight: elev3DOption.floorHeight ?? [],
+                    inited: function () {
+
+                    }
+                }
+                let elevator3DObj = new elevator3D(options);
+                let devNum = Object.keys(elev3DBind).filter(x => elev3DBind[x] == node)[0];
+                let subData = subSeviceData.filter(x => x.device_number == devNum)[0];
+
+                if (elev3DObj.filter(x => x.nodeId == node).length == 0) {
+                    elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
+                }
+
+                if (subData) {
+                    let elevObj = elev3DObj.filter(x => x.nodeId == node)[0];
+                    if (!elevObj.id) {
+                        elevObj.id = devNum;
+                    }
+                    elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
+                    elevObj.obj.init(function () {
+                        let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
+                        frags.forEach((fragProxy) => {
+                            fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
+                            fragProxy.frag.updateAnimTransform()
+                        })
+                        elevObj.obj.viewer.impl.sceneUpdated(true);
+                    })
+
+
+                }
+            })
+
+            //let elevator = elev3DObj[0];
+            //elevator.obj.setElevatorFloor(3)
+            //elevator.obj.movElevator()
             //setElevatorSpeed(0.2)
             //setElevatorFloor(2)
             //requestAnimationFrame(movElevator);
         });
-        
+
     }
     function show3D() {
         if (isFirstLoad3D) {

Frontend/_sysMonAll.html

@@ -151,7 +151,7 @@
     // Card 即時狀態
     function drawStateTabBlo() {
         let strHtml = `<div style="height:15rem">
-                            <iframe src="http://localhost:8080/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
+                            <iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
                        </div>`
         return strHtml;
     }

Frontend/css/site.css

@@ -402,6 +402,18 @@ input.toggle:checked {
     gap: 5px;
 }
 
+.gap-6 {
+    gap: 6px;
+}
+
+.gap-7 {
+    gap: 7px;
+}
+
+.gap-8 {
+    gap: 8px;
+}
+
 /* vertical-align */
 .va-t {
     vertical-align: top;

Frontend/index.html

@@ -2587,9 +2587,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     "n4js/historybaja",
                     "lib/statistics/flot/flot.bundle",
                     "lib/statistics/peity/peity.bundle",
-					"lib/jquery-validation/dist/jquery.validate",
+                    "lib/jquery-validation/dist/jquery.validate",
-					"lib/jquery-validation/dist/additional-methods.min",
+                    "lib/jquery-validation/dist/additional-methods.min",
-					"lib/jquery-validation/dist/localization/messages_zh_TW",
+                    "lib/jquery-validation/dist/localization/messages_zh_TW",
                 ], loadedMasterPack);
         }
         /**
@@ -2708,7 +2708,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         //事件先行讀取
         function loadEvent() {
             onEvent("click", "[name=topFunBtn]", function () {
-
+                _ytTabInited = []
                 let page = $(this).data("page");
 
                 if (page != "systemMonitor") {
@@ -2720,6 +2720,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     sub.unsubscribeAll();
                     sub.detach();
                 })
+                
                 $("#app").load(`_${page}.html`, loadCallback);
             })
 
@@ -2761,6 +2762,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         // Card - 基本資料 Table
         function drawInfoTabBlo(devGuid) {
+            
             let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
             let tbody = tabEle.append("<tbody>");
             let columnNames = ["設備編號", "設備名稱"];
@@ -2861,6 +2863,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         // Card - 運維紀錄 Table
         function loadOpeRecTable(devGuid) {
+            
             let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
             let tag = "#opeRecTable";
 

Frontend/js/forge/forgemodel.js

@@ -49,7 +49,7 @@ var elevatorSpeed;
 //     sensorVals[i] = Math.random();
 // }
 
-function launchViewer(urn, eleOption ,callback) {
+function launchViewer(urn, callback) {
     var options = {
         env: 'AutodeskProduction',
         getAccessToken: getForgeToken
@@ -60,13 +60,11 @@ function launchViewer(urn, eleOption ,callback) {
         //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
         viewer.start();
         var documentId = 'urn:' + urn;
-        
+
-        Autodesk.Viewing.Document.load(documentId, function (doc) {
+        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
-            onDocumentLoadSuccess(doc, eleOption);
-        }, onDocumentLoadFailure);
 
         $("#forgeViewer").on("autodesk:loaded", function () {
-            callback ? callback() : "";
+            callback ? callback(viewer) : "";
         })
 
 
@@ -139,7 +137,7 @@ class elevator3D {
         this.init();
     }
 
-    setTreeFrag = function () {
+    setTreeFrag = function (callback) {
         let tree = this.viewer.model.getData().instanceTree;
         let nodeId = this.nodeId;
         //tree.enumNodeChildren(nodeId, (node) => {
@@ -155,34 +153,44 @@ class elevator3D {
         //    });
         //})
         
-        tree.enumNodeFragments(nodeId, (frag) => {
+        if (nodeId) {
-            let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
+            let childCnt = tree.getChildCount(nodeId);
-            this.fragProxy = fragProxy;
+            let curIdx = 1;
-            this.fragProxys.push({ nodeId: nodeId, frag: fragProxy });
+            this.fragProxys.filter(x => x.nodeId == nodeId).forEach((x) => {
+                let idx = this.fragProxys.indexOf(x);
+                this.fragProxys.splice(idx,1);
+            })
+            tree.enumNodeFragments(nodeId, (frag) => {
+                let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
 
-            this.fragProxy.getAnimTransform();
+                this.fragProxys.push({ nodeId: nodeId, fragId: frag, frag: fragProxy });
-            let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
 
-            this.fragProxy.position = fragPosition;
+                fragProxy.getAnimTransform();
+                let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
 
-            this.fragProxy.updateAnimTransform();
+                fragProxy.position = fragPosition;
-        },true);
 
+                fragProxy.updateAnimTransform();
+                if (childCnt == curIdx) {
+                    this.initCallback ? this.initCallback() : "";
+                    callback ? callback() : "";
+                }
+                curIdx++;
+            }, true);
+        }
         this.viewer.impl.sceneUpdated(true);
-        if (typeof $(this.ele)[0]._elevator3D == "undefined") { 
+        if (typeof $(this.ele)[0]._elevator3D == "undefined") {
             $(this.ele)[0]._elevator3D = [];
         }
         $(this.ele)[0]._elevator3D.push({ nodeId: nodeId, obj: this });
-        this.initCallback ? this.initCallback() : "";
-
     }
 
-    init = function () {
+    init = function (callback = null) {
-        this.setTreeFrag();
+        this.setTreeFrag(callback);
     }
 
     setElevatorFloor = function (floor) {
-        this.targetFloorZ = this.floorHeight.filter(x => x.floor == floor)[0].height;
+        this.targetFloorZ = this.floorHeight.filter(x => x.floor == floor)[0]?.height ?? 0;
     }
 
     setElevatorSpeed = function (speed) { //0.01 ~ 1
@@ -195,12 +203,15 @@ class elevator3D {
         let nodeId = this.nodeId;
         let fragProxyZ = 0;
         let movStatus = this.movStatus; // 0=no 1=up 2=down
+        let fragProxy = this.fragProxys.filter(x => x.nodeId == nodeId)[0]?.frag;
+        if (!fragProxy) {
+            return;
+        }
 
-
+        if (fragProxy.position.z > this.targetFloorZ) {
-        if (this.fragProxy.position.z > this.targetFloorZ) {
             movStatus = 2
         }
-        else if (this.fragProxy.position.z < this.targetFloorZ) {
+        else if (fragProxy.position.z < this.targetFloorZ) {
             movStatus = 1
         }
 
@@ -209,20 +220,20 @@ class elevator3D {
         }
 
         tree.enumNodeFragments(nodeId, (frag) => {
-            this.fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
+            let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, frag);
-            this.fragProxy.getAnimTransform();
+            fragProxy.getAnimTransform();
             //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
             if (movStatus == 2) {
-                this.fragProxy.position.z -= this.speed;
+                fragProxy.position.z -= this.speed;
             }
             else if (movStatus == 1) {
-                this.fragProxy.position.z += this.speed;
+                fragProxy.position.z += this.speed;
             }
 
-            fragProxyZ = this.fragProxy.position.z;
+            fragProxyZ = fragProxy.position.z;
-            this.fragProxy.updateAnimTransform()
+            fragProxy.updateAnimTransform()
 
-        },true);
+        }, true);
         this.viewer.impl.sceneUpdated(true);
 
         let movElevator = $(this.ele)[0]._elevator3D.filter(x => x.nodeId == this.nodeId)[0]?.obj.movElevator.bind(this);
@@ -252,7 +263,7 @@ class elevator3D {
     }
 }
 
-function onDocumentLoadSuccess(doc,eleOption) {
+function onDocumentLoadSuccess(doc, eleOption) {
     var viewables = doc.getRoot().getDefaultGeometry();
     viewer.loadDocumentNode(doc, viewables).then(i => {
         // documented loaded, any action?
@@ -269,25 +280,25 @@ function onDocumentLoadSuccess(doc,eleOption) {
         //var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
         //var domElem = document.getElementById('all_id');
         //domElem.innerText = allDbIdsStr;
-        let nodes = eleOption.nodes ?? [];
+        //let nodes = eleOption.nodes ?? [];
-        let element = eleOption.element ?? "";
+        //let element = eleOption.element ?? "";
-        $(element)[0]._elevator3D = [];
+        //$(element)[0]._elevator3D = [];
-        $.each(nodes, function (idx, node) {
+        //$.each(nodes, function (idx, node) {
-            let options = {
+        //    let options = {
-                element: $(element),
+        //        element: $(element),
-                viewer: viewer,
+        //        viewer: viewer,
-                nodeId: node,
+        //        nodeId: node,
-                floorHeight: eleOption.floorHeight ?? [],
+        //        floorHeight: eleOption.floorHeight ?? [],
-                inited: function () {
+        //        inited: function () {
-                    if (idx == nodes.length - 1) {
+        //            if (idx == nodes.length - 1) {
-                        $(element).trigger("autodesk:loaded");
+        //                $(element).trigger("autodesk:loaded");
-                    }
+        //            }
-                }
+        //        }
-            }
+        //    }
-            let elevator3DObj = new elevator3D(options);
+        //    let elevator3DObj = new elevator3D(options);
-
-        })
 
+        //})
+        $("#forgeViewer").trigger("autodesk:loaded");
         //let tree = viewer.model.getData().instanceTree;
         //let nodeId = 10952;
         //console.log("tree", tree)

Frontend/js/n4js/bajatest.js

@@ -1,4 +1,5 @@
 let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
+let baja_subscribe_end_device_callback_func; //設定BQL訂閱結束之後要回傳的Function
 let baja_my_user_account_func;    //取得帳號資料要回傳的Function
 var ordPath; //當前點選選單的tag，用來抓出設備路徑，例如:旅館棟->H，消防偵煙器->F3
 window.tolSubList = [];
@@ -16,6 +17,12 @@ function subscriptionDevices() {
             baja_subscribe_device_callback_func = callBackFunc;
         }
     }
+    // BQL訂閱結束回傳的Function
+    this.setSubscribeDeviceEndCallBack = function (callBackFunc) {
+        if (callBackFunc != undefined && callBackFunc != null) {
+            baja_subscribe_end_device_callback_func = callBackFunc;
+        }
+    }
    
 }
 
@@ -64,6 +71,7 @@ function BajaSubscribeDevicesByBql() {
 
                 var modify_target_device = {
                     "device_number": target_device_number ? target_device_number : null,
+                    "device_number_full": this.$parent.getSlotPath().$names.join("_"),
                     "point_name": point_name ? point_name : null,
                     "value": key
                 }
@@ -88,13 +96,14 @@ function BajaSubscribeDevicesByBql() {
                     var subStart, subFinish;
                     var component_index = 0;
                     var total_component_index = 0;
+                    var totalTargetDevice = [];
                     var readBqlFinish = new Date(Date.now());
                     // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
                     // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
                     console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-
                     table.cursor({
                         before: function () {
+                            totalTargetDevice = [];
                             tableStart = new Date(Date.now());
                             $("#table-start-timestamp").html(tableStart.toISOString());
                             render_start = new Date(Date.now());
@@ -107,6 +116,7 @@ function BajaSubscribeDevicesByBql() {
                             $("#sub-number").html(index + 1);
                             total_component_index = index;
 
+                            
 
                             var target_device_number_split = this.getDisplay("slotPath").split('/');
                             var target_device_number = target_device_number_split[target_device_number_split.length - 2];
@@ -122,7 +132,7 @@ function BajaSubscribeDevicesByBql() {
                             });
 
                             facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
+                            
                             var point_out_split = this.getDisplay("out").split(' ');
 
                             let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
@@ -133,10 +143,11 @@ function BajaSubscribeDevicesByBql() {
 
                             var modify_target_device = {
                                 "device_number": target_device_number ? target_device_number : null,
+                                "device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1,-1).join("_"),
                                 "point_name": point_name ? point_name : null,
                                 "value": key
                             }
-
+                            totalTargetDevice.push(modify_target_device);
                             //取得component當下就更新設備點位
                             if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
                                 baja_subscribe_device_callback_func(modify_target_device);
@@ -197,6 +208,10 @@ function BajaSubscribeDevicesByBql() {
                             tableFinish = new Date(Date.now());
                             // $("#table-finish-timestamp").html(tableFinish.toISOString());
                             // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+                            //取得component當下就更新設備點位
+                            if (baja_subscribe_end_device_callback_func != undefined && baja_subscribe_end_device_callback_func != null) {
+                                baja_subscribe_end_device_callback_func(totalTargetDevice);
+                            }
                             console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
                         },
                         limit: -1,
@@ -346,3 +361,159 @@ require(['baja!'], function (baja) {
 //         })
 
 
+//測試
+/**
+ * 取得電表即時資料 by baja
+ * @param {any} devicePath 
+ * @param {any} callback
+ */
+ function getElectricMeterNoweDataByBaja(devicePath, callback) {
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
+
+    require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
+        console.log('local:|foxs:|station:|slot:/' + devicePath + '|bql:select name, out, out.value from control:ControlPoint');
+        //baja.Ord.make('local:|foxs:|station:|slot:/' + devicePath + '|bql:select name, out, out.value from control:ControlPoint').get()
+        baja.Ord.make('local:|foxs:|station:|slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|bql:select name, out, out.value from control:ControlPoint').get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        if (_index == 0)
+                            _ss += '{"name":"' + record.get('name') + '", "value":' + record.get('out').get('value') + '"}';
+                        else
+                            _ss += ',{"name":"' + record.get('name') + '", "value":' + record.get('out').get('value') + '"}';
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
+}
+
+/**
+ * 取得電表 單日kwh by baja
+ * @param {any} devicePath 
+ * @param {any} date_millisecond
+ * @param {any} callback
+ */
+ function getElectricMeterOneDayKwhByBaja(devicePath, date_millisecond, callback) {
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
+
+    require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
+        console.log('transform:slot:/' + devicePath + '/History/TR_Month|bql: select * where timestamp.millis = ' + date_millisecond);
+        baja.Ord.make('transform:slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1/History/TR_Month|bql: select * where timestamp.millis <= 1667404799000').get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        if (_index == 0) {
+                            //_ss += '{"timestamp":"' + record.get('timestamp') + '", "kwh1":' + record.get('kwh1') + '"}';
+                            _ss += '{"timestamp":"' + record.get('timestamp') + '"}';
+                        }
+                        else {
+                            //_ss += ',{"timestamp":"' + record.get('timestamp') + '", "kwh1":' + record.get('kwh1') + '"}';
+                            _ss += ',{"timestamp":"' + record.get('timestamp') + '"}';
+                        }
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
+}
+
+/**
+ * 取得電表每小時資料 by baja
+ * @param {any} devicePath 
+ * @param {any} startDate_millisecond
+ * @param {any} endDate_millisecond 
+ * @param {any} callback
+ */
+ function getElectricMeterHourDataByBaja(devicePath, startDate_millisecond, endDate_millisecond, callback) {
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
+
+    require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
+        console.log('transform:slot:/' + devicePath + '/History/TR_Daily|bql: select * where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond);
+        baja.Ord.make('transform:slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1/History/TR_Daily|bql: select timestamp, kwh1 where timestamp.millis >= 1667232000000 and timestamp.millis <= 1667404799000').get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        if (_index == 0)
+                            _ss += '{"kwh1":' + record.get('kwh1') + ', "timestamp":"' + record.get('timestamp') + '"}';
+                        else
+                            _ss += ',{"kwh1":' + record.get('kwh1') + ', "timestamp":"' + record.get('timestamp') + '"}';
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
+}
+
+/**
+ * 在單一系統下，取得各個系統的狀態 異常與否
+ * @param {any} systemPath
+ * @param {any} callback
+ */
+ function getOneSystemStateByBaja(systemPath, callback) {
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
+
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|alarm:|bql:select top 1 alarmData, alarmData.sourceName, sourceState where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        //if (_index == 0)
+                        //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        //else
+                        //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        _index++;
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    },
+                    limit: -1,
+                    offset: 0
+                });
+            });
+    });
+}

Frontend/js/yourteam/plugins/yt-tab/yt-tab.js

@@ -19,13 +19,14 @@ $(function () {
  * 初始全頁面 yt tab
  * */
 function initTabsByEle() {
-    _ytTabInited = [];
+    /*_ytTabInited = [];*/
     $("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
         let tabName = $(value).data("tabname");
-        
+        if (_ytTabInited.indexOf(tabName) == -1) {
-        var ytTab = new YT.Tab({ tabName: tabName })
+            var ytTab = new YT.Tab({ tabName: tabName })
-        _ytTabInited.push(tabName);
+            _ytTabInited.push(tabName);
-        
+        }
+
     })
 }
 

FrontendWebApi/ApiControllers/DeviceManageController.cs

@@ -226,7 +226,7 @@ namespace FrontendWebApi.ApiControllers
                 foreach (var f in fl)
                 {
                     List<DeviceLists> dl = new List<DeviceLists>();
-                    sqlString = $@"select d.device_guid, d.full_name, d.device_coordinate, dk.device_image, d.device_number, CONCAT('{baseURL}', '{deviceKindFilePath}', dk.device_image) AS device_image_url,d.status,
+                    sqlString = $@"select d.device_guid, d.full_name, d.device_coordinate, d.priority, dk.device_image, d.device_number, CONCAT('{baseURL}', '{deviceKindFilePath}', dk.device_image) AS device_image_url,d.status,
 				                          dk.device_normal_point_id, dk.device_normal_point_guid, dk.device_normal_point_col, dk.device_normal_point_value, dk.device_normal_flashing, dk.device_normal_point_name,
 				                          dk.device_close_point_id, dk.device_close_point_guid, dk.device_close_point_col, dk.device_close_point_value, dk.device_close_flashing, dk.device_close_point_name,
 				                          dk.device_error_point_id, dk.device_error_point_guid, dk.device_error_point_col, dk.device_error_point_value, dk.device_error_flashing, dk.device_error_point_name

FrontendWebApi/Models/Device.cs

@@ -36,6 +36,7 @@ namespace FrontendWebApi.Models
         public string device_coordinate { get; set; }
         public string device_coordinate_3d { get; set; }
         public string status { get; set; }
+        public int priority { get; set; }
         public string device_status
         {
             get