[Frontend][儀錶板] 昨日用電量、今日用電量、即時功率 baja 串接 | [系統監控] 電梯 3D 移動 第二次之後不動問題解決

Frontend/_dashboard.html

@@ -9,7 +9,7 @@
                     <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">
-                                560
+                                <span id="todayUseElec"></span>
                                 <small class="m-0 l-h-n">今日用電量 kWH</small>
                             </h3>
                         </div>
@@ -20,7 +20,7 @@
                     <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">
-                                6560
+                                <span id="yesUseElec"></span>
                                 <small class="m-0 l-h-n">昨日用電量</small>
                             </h3>
                         </div>
@@ -69,7 +69,7 @@
                     <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">
-                                9,218
+                                <span id="insPower"></span>
                                 <small class="m-0 l-h-n">即時功率</small>
                             </h3>
                         </div>
@@ -162,7 +162,7 @@
                             </h2>
                         </div>
                         <div class="panel-container show">
-                            <div class="panel-content poisition-relative">
+                            <div class="panel-content poisition-relative p-0">
                                 <!--<div class="pb-5 pt-3">
                                     <div class="d-flex mr-4">
                                         <div class="mr-2">
@@ -174,15 +174,15 @@
                                         </div>
                                     </div>
                                 </div>-->
-                                <div class="col-12 mb-2 position-relative">
+                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                    <span class="text-center position-absolute t-white" style="top:83px;left:45px;">異常數量<br>18</span>
+                                    <span class="text-center position-absolute t-white" style="top:25%;left:27%;">異常數量<br>18</span>
-                                    <img src="img/u110.png" class="w-100">
+                                    <img src="img/u110.png" class="w-50">
-                                    <span class="text-center position-absolute t-white" style="top:116px;left:142px;">賦歸數量<br>28</span>
+                                    <span class="text-center position-absolute t-white" style="top:42%;left:51%;">賦歸數量<br>28</span>
                                 </div>
-                                <div class="col-12 mb-2 position-relative">
+                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                    <span class="text-center position-absolute t-white" style="top:120px;left:37px;">已確認異常<br>8</span>
+                                    <span class="text-center position-absolute t-white" style="top:43%;left:24%;">已確認異常<br>8</span>
-                                    <img src="img/u106.png" class="w-100">
+                                    <img src="img/u106.png" class="w-50">
-                                    <span class="text-center position-absolute t-white" style="top:100px;left:140px;">未確認異常<br>6</span>
+                                    <span class="text-center position-absolute t-white" style="top:35%;left:52%;">未確認異常<br>6</span>
                                 </div>
                             </div>
                         </div>
@@ -196,7 +196,7 @@
                             </h2>
                         </div>
                         <div class="panel-container show">
-                            <div class="panel-content poisition-relative">
+                            <div class="panel-content poisition-relative p-0">
                                 <!--<div class="pb-5 pt-3">
         <div class="d-flex mr-0">
             <div class="mr-2">
@@ -208,15 +208,15 @@
             </div>
         </div>
     </div>-->
-                                <div class="col-12 mb-2 position-relative">
+                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                    <span class="text-center position-absolute t-white" style="top:27px;left:55px;">已完成<br>6</span>
+                                    <span class="text-center position-absolute t-white" style="top:25%;left:27%;">已完成<br>6</span>
-                                    <img src="img/u40.png" class="" style="width:312px;margin-left:-45px;left:-22px;">
+                                    <img src="img/u40.png" class="" style="width:75%;margin-left:0px;left:-22px;">
-                                    <span class="text-center position-absolute t-white" style="top:114px;left:162px;">未完成<br>8</span>
+                                    <span class="text-center position-absolute t-white" style="top:51%;left:58%;">未完成<br>8</span>
                                 </div>
-                                <div class="col-12 mb-2 position-relative">
+                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                    <span class="text-center position-absolute t-white" style="top:89px;left:27px;">未派工<br>5</span>
+                                    <span class="text-center position-absolute t-white" style="top:43%;left:26%;">未派工<br>5</span>
-                                    <img src="img/u43.png" class="w-100">
+                                    <img src="img/u43.png" class="mt-2 mb-1" style="width:51%;">
-                                    <span class="text-center position-absolute t-white" style="top:122px;left:177px;">派工中<br>9</span>
+                                    <span class="text-center position-absolute t-white" style="top:42%;left:58%;">派工中<br>9</span>
                                 </div>
                             </div>
                         </div>
@@ -699,8 +699,8 @@
                 let strHtml = ``;
                 $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
                     $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
-                        strHtml += `<div class="btn-group btn-group-lg col-lg-4 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
+                        strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
-                            <button type="button" class="btn btn-secondary col-4"><i class="fal fa-lightbulb-on fa-2x"></i></button>
+                            <button type="button" class="btn btn-secondary col-4"><i class="fal fa-lightbulb-on fa-2x py-2"></i></button>
                             <button type="button" class="btn btn-secondary">${subSysObj.full_name}</button>
                         </div>`;
                     })
@@ -736,13 +736,28 @@
     }
 
     function getElectricBaja() {
-        let devPath = tarElePath.split("_").slice(0, 8).join("_");
+        let devNum = tarElePath.split("_").slice(0, 8).join("_");
+        let devPath = tarElePath.split("_").slice(0, 8).join("/");
 
         let today = displayDate(new Date, "date").replaceAll("/", "-") + "T00:00:00";
+        let yesterday = displayDate(new Date(new Date(today).getTime() - (24 * 60 * 60 * 1000)), "date").replaceAll("/", "-") + "T00:00:00";
         let tomorrow = displayDate(new Date(new Date(today).getTime() + (24 * 60 * 60 * 1000)), "date").replaceAll("/", "-") + "T00:00:00";
 
-        getElectricMeterDayDataByBaja(devPath + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => {
+        //今日用電量
+        getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => {
+            data = JSON.parse(data);
+            $("#todayUseElec").text(data?.data[0]?.sum || "");
+        })
+        //昨日用電量
+        getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, today, (data) => {
+            data = JSON.parse(data);
+            $("#yesUseElec").text(data?.data[0]?.sum || "");
+        })
+        getElectricMeterNoweDataByBaja(devPath, (data) => {
             console.log(data)
+            
+            data = data.data;
+            $("#insPower").text(data.filter(x => x.name == "P")[0]?.value);
         })
     }
 

Frontend/_sysElevator.html

@@ -861,7 +861,7 @@
     var subSeviceData = [];    //每個設備訂閱點位值
     var floList = [];          //每個樓層
     var elevObj = null;        //左側 2D 電梯物件
-    var viewer3DNodeIds = [758, 753, 748];
+    var viewer3DNodeIds = [760, 754, 748];
     var elev3DBind = {};
     var elev3DOption = {};
     var elev3DObj = [];
@@ -897,7 +897,6 @@
         myBaja = new subscriptionDevices();
         myBaja.setSubscribeDevicesByBql(subOrdPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-            console.log(data)
             function getValueByName(pointName) {
                 return data.point_name == pointName ? data.value : null;
             }
@@ -1021,9 +1020,10 @@
                         elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
                         elevObj.obj.init(function () {
                             let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == elev3DBind[devNum]);
+                            debugger
                             frags.forEach((fragProxy) => {
                                 fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
-                                fragProxy.frag.updateAnimTransform()
+                                fragProxy.frag.updateAnimTransform();
                             })
                             elevObj.obj.viewer.impl.sceneUpdated(true);
                         });
@@ -1078,7 +1078,7 @@
                 })
             }
         })
-        console.log("result:", result)
+        /*console.log("result:", result)*/
         return result;
     }
 
@@ -1124,6 +1124,7 @@
         if (subData["CP"]) {
             $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"]);
         }
+        console.log("目標樓層:" + subData["CP"], "RD點位值:" + subData["RD"])
         //往上或往下
         if (subData["RD"] == "UP") {
             $(`#imdStaTable_${devNum} [name=downFloArrow]`).removeClass("light-flash-c");
@@ -1874,7 +1875,7 @@
             //myBaja.setSubscribeDevicesByBql(ordPath);
             //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
 
-            console.log(floChart)
+            /*console.log(floChart)*/
             floChart.getZr().on('click', function (params) {
                 console.log("click", params);
                 var pixelPoint = [params.offsetX, params.offsetY];
@@ -2422,6 +2423,7 @@
                     elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
                     elevObj.obj.init(function () {
                         let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
+                        debugger
                         frags.forEach((fragProxy) => {
                             fragProxy.frag.position.z = elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
                             fragProxy.frag.updateAnimTransform()

Frontend/index.html

@@ -2092,6 +2092,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         // 執行初步 Loading
         var loadEle = pageLoading();
+
+        /**
+        * 頁面 Loading 建立
+        * */
+        function pageLoading(text = null) {
+            let background = $(`<div class="loading-bg"></div>`);
+            let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+            $(background)[0]._aleObj = aleObj;
+            $("body").css("overflow", "hidden");
+            $("body .page-content-wrapper").append(background);
+            $(background).animate({ opacity: 1 }, 300);
+            return background;
+        }
+
+        try {
             $(function () {
                 // 二次引用 jquery.js
                 // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
@@ -2252,7 +2267,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         pageAct.sysMainTag = null;
                     }
                     $.each(tolSubList, (idx, sub) => {
-                    console.log("sub", sub, idx)
                         sub.unsubscribeAll();
                         sub.detach();
                     })
@@ -2289,19 +2303,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             }
 
-        /**
-        * 頁面 Loading 建立
-        * */
-        function pageLoading(text = null) {
-            let background = $(`<div class="loading-bg"></div>`);
-            let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
-            $(background)[0]._aleObj = aleObj;
-            $("body").css("overflow", "hidden");
-            $("body .page-content-wrapper").append(background);
-            $(background).animate({ opacity: 1 }, 300);
-            return background;
-        }
-
             // 登入驗證
             function Login(account) {
                 console.log(account)
@@ -2568,6 +2569,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             //==============================================================================
             //                       ↑  系統監控 - 共用 Function ↑
             //==============================================================================
+
+        } catch(e) {
+            $(loadEle).Loading("close");
+        }
+
+        
     </script>
 
 </body>

Frontend/js/forge/forgemodel.js

@@ -229,7 +229,7 @@ class elevator3D {
             else if (movStatus == 1) {
                 fragProxy.position.z += this.speed;
             }
-
+            this.fragProxys.filter(x => x.nodeId == nodeId && x.fragId == frag)[0].frag.position.z = fragProxy.position.z;
             fragProxyZ = fragProxy.position.z;
             fragProxy.updateAnimTransform()
 

Frontend/js/n4js/electricmeterbaja.js

@@ -42,8 +42,7 @@ function getElectricMeterTotalByBaja(devicePath, timeType, callback) {
  * @param {any} callback
  */
 function getElectricMeterNoweDataByBaja(devicePath, callback) {
-    var _result = "";
+    var _result = {count:0,data:[]};
-    var _ss = "";
     var _index = 0;
 
     require(['baja!'], function (baja) {//TPE/B1/EE/E4/R2F/NA/WHT/N1
@@ -52,16 +51,15 @@ function getElectricMeterNoweDataByBaja(devicePath, callback) {
             .then(function (table) {
                 return table.cursor({
                     each: function (record) {
-                        if (_index == 0)
+                        let main = {}
-                            _ss += '{"name":"' + record.get('name') + '", "value":' + record.get('out').get('value') + '"}';
+                        main.name = record.get('name');
-                        else
+                        main.value = record.get('out').get('value');
-                            _ss += ',{"name":"' + record.get('name') + '", "value":' + record.get('out').get('value') + '"}';
+                        _result.data.push(main);
                         _index++;
                     },
                     after: function () {
-                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result.count = _index;
-                        _result += _ss;
+                        
-                        _result += ']}';
                         if (typeof callback === 'function') {
                             callback(_result);
                         }
@@ -289,9 +287,9 @@ function getElectricMeterDayDataByBaja(devicePath, company, startDateTime, endDa
                 return table.cursor({
                     each: function (record) {
                         if (_index == 0)
-                            _ss += '{"timestamp":' + record.get('timestamp') + ', "endTimestamp":"' + record.get('endTimestamp') + ', "min":"' + record.get('min') + ', "max":"' + record.get('max') + ', "avg":"' + record.get('avg') + ', "sum":"' + record.get('sum') + '"}';
+                            _ss += '{"timestamp":"' + record.get('timestamp') + '", "endTimestamp":"' + record.get('endTimestamp') + '", "min":"' + record.get('min') + '", "max":"' + record.get('max') + '", "avg":"' + record.get('avg') + '", "sum":"' + record.get('sum') + '"}';
                         else
-                            _ss += ',{"timestamp":' + record.get('timestamp') + ', "endTimestamp":"' + record.get('endTimestamp') + ', "min":"' + record.get('min') + ', "max":"' + record.get('max') + ', "avg":"' + record.get('avg') + ', "sum":"' + record.get('sum') + '"}';
+                            _ss += ',{"timestamp":"' + record.get('timestamp') + '", "endTimestamp":"' + record.get('endTimestamp') + '", "min":"' + record.get('min') + '", "max":"' + record.get('max') + '", "avg":"' + record.get('avg') + '", "sum":"' + record.get('sum') + '"}';
                         _index++;
                     },
                     after: function () {