[Frontend][儀錶板] 即時功率佔比設置 | 即時功率訂閱串接 | 計時器移至 index.html | topbar上方即時告警閃爍程序建置

Frontend/_dashboard.html

@@ -85,7 +85,7 @@
                     <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">
-                                8,846
+                                <span id="insPowerPer">--</span>
                                 <small class="m-0 l-h-n">即時契約容量占比 kWH</small>
                             </h3>
                         </div>
@@ -252,6 +252,8 @@
     var eveWeekElecChart = null;
     var errRecChart = null;
     var errChkChart = null;
+    var loadedCnt = 0;
+    var chartDataCnt = { alarmCnt:0, recCnt:0, chkedErrCnt:0, unChkedErrCnt:0 };
 
     var sysIconList = [
         { mainSys: "EE", subSys: "E1", iconClass: "fal fa-grip-vertical" },
@@ -299,7 +301,6 @@
                     })
                 })
                 $("#sysSubBtnList").html(strHtml);
-                getAlarmSub();
                 
             }
         }, null, "POST").send();
@@ -323,12 +324,31 @@
                         tarElePath = devObj.device_number;
                     })
                 })
-                
+                startPageLoading();
+                getSubBaja();
                 getElectricBaja();
             }
         }, null, "POST").send();
     }
 
+    function getSubBaja() {
+        let devPath = tarElePath.split("_").slice(0, 8).join("/");
+        let tempOrdPath = { devicePath: devPath }
+        let myBaja = new subscriptionElectricmeter();
+
+        myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
+        myBaja.setSubscribeElectricmeterCallBack(function (data) {
+            if (data.point_name == "P") {
+                let value = parseFloat(data.value).roundDecimal(2);
+                $("#insPower").text(value);
+                $("#insPowerPer").text((value / 4).roundDecimal(2) + "%");
+            }
+        })
+        myBaja.setSubscribeElectricmeterEndCallBack(function () {
+            chkBajaLoaded();
+        })
+    }
+
     //從 baja 取得電表用電量
     function getElectricBaja() {
         let devNum = tarElePath.split("_").slice(0, 8).join("_");
@@ -338,9 +358,9 @@
         let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00";
         let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
         let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
-        let loadedCnt = 0;
+        
-       /* let batch = new baja.comm.Batch();*/
+      
-        startPageLoading();
+        
         // 今日用電量
         getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => {
             let result = data?.data[0]?.sum;
@@ -376,43 +396,35 @@
             chkBajaLoaded();
         })
 
-        // 電表即時功率
-        getElectricMeterNoweDataByBaja(devPath, (data) => {
-            data = data.data;
-            let result = data.filter(x => x.name == "P")[0]?.value;
-            result = result ? parseFloat(result).toFixed(2) : 0;
-            $("#insPower").text(result);
-            chkBajaLoaded();
-        })
-
-        let alarmCnt = 0,recCnt = 0;
-        let chkedErrCnt = 0, unChkedErrCnt = 0;
         // 異常數量與賦歸數量
         getAlarmCountByBaja((aData) => {
-            alarmCnt = aData.count;
+            chartDataCnt.alarmCnt = aData.count;
             chkBajaLoaded();
         })
         getRecoverCountByBaja((rData) => {
-            recCnt = rData.count;
+            chartDataCnt.recCnt = rData.count;
             chkBajaLoaded();
         })
         // 異常數量與賦歸數量
         getCheckedAckedCountByBaja((data) => {
-            chkedErrCnt = data.count;
+            chartDataCnt.chkedErrCnt = data.count;
-            chkBajaLoaded();
-        })
-        getUnCheckedAckedCountByBaja((uData) => {
-            unChkedErrCnt = uData.count;
             chkBajaLoaded();
         })
 
-        function chkBajaLoaded() {
+        getUnCheckedAckedCountByBaja((uData) => {
-            loadedCnt++;
+            chartDataCnt.unChkedErrCnt = uData.count;
-            if (loadedCnt == 9) {
+            chkBajaLoaded();
-                chartErrRec(["異常數量", "賦歸數量"], [alarmCnt, recCnt]);
+        })
-                chartErrChk(["已確認異常", "未確認異常"], [chkedErrCnt, unChkedErrCnt]);
+    }
-                endPageLoading();
+
-            }
+    function chkBajaLoaded() {
+        loadedCnt++;
+        
+        if (loadedCnt == 9) {
+            chartErrRec(["異常數量", "賦歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
+            chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]);
+
+            endPageLoading();
         }
     }
 
@@ -690,31 +702,21 @@
     }
 
     // 從 baja 訂閱 左下角各系統小類異常狀態
-    function getAlarmSub() {
+    function getAlarmSub(data) {
-        var tipEle = '';
+        $.each(data.data, (idx, alaObj) => {
-        //if (sysSubList.length != 0) {
+            if (alaObj.alarmClass.indexOf("_") != -1) {
-        //    tipEle = YT.Alert.Tip("資料讀取中...","show");
+                let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
-        //}
+                $(`.btn-group.dev-group[data-id*='${mainSubSys}'] i`).addClass("blink");
-        /*$(`.dev-group i.fa-lightbulb-on`)*/
+            }
-        
+        })
-        getSystemAlarmByBaja((data) => {
+        $(`.dev-group i.fa-lightbulb-on.blink`).each((idx, ele) => {
-            console.log(data)
+            let devPath = $(ele).parents(".dev-group").data("id");
-            $.each(data.data, (idx, alaObj) => {
+            let sysPath = devPath.split("/").slice(3, 5).join("/");
-                if (alaObj.alarmClass.indexOf("_") != -1) {
+            let alaDevPath = data.data.map(x => x.alarmClass?.split("_").slice(0, 2).join("/"));
-                    let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
+            if (alaDevPath.indexOf(sysPath) == -1) {
-                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] i`).addClass("blink");
+                $(ele).removeClass("blink");
-                }
+            }
-            })
-            $(`.dev-group i.fa-lightbulb-on.blink`).each((idx, ele) => {
-                let devPath = $(ele).parents(".dev-group").data("id");
-                let sysPath = devPath.split("/").slice(3, 5).join("/");
-                let alaDevPath = data.data.map(x => x.alarmClass?.split("_").slice(0, 2).join("/"));
-                if (alaDevPath.indexOf(sysPath) == -1) {
-                    $(ele).removeClass("blink");
-                }
-            })
         })
-        
     }
 
     // 取得電梯資料
@@ -743,15 +745,15 @@
         }, null, "POST").send();
     }
 
-    function timeOutGetData() {
+    //function timeOutGetData() {
-        let timeOut3s = setInterval(() => {
+    //    let timeOut3s = setInterval(() => {
-            getAlarmSub();
+    //        getAlarmSub();
-        }, 3000)
+    //    }, 3000)
-        let timeOut5m = setInterval(() => {
+    //    let timeOut5m = setInterval(() => {
-            getElectricBaja();
+    //        getElectricBaja();
-        }, 5 * 60 * 1000)
+    //    }, 5 * 60 * 1000)
-        timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
+    //    timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
-    }
+    //}
 
     function show3DModel() {
         launchViewerNoTools(pageAct.urn, (viewer, nodeIds) => {
@@ -904,6 +906,12 @@
         })
     }
 
+
+    $(window).on("timeout:5m", function () {
+        console.log("五分鐘更新")
+        getElectricBaja();
+    })
+    
     onEvent("click", "button[id^=sysSubCardBtn]", function () {
         let subSysTag = $(this).data("id");
         $(`#subSysBtn${subSysTag}`).click();

Frontend/_sysElevator.html

@@ -1044,7 +1044,6 @@
                     //地震管制
                     actLightByPoi("EER", "#earQuaCon");
                     if (data.point_name == "DNO" || data.point_name == "SP_RCS") { 
-                        debugger
                         //遠端休止
                         actLightByPoiEx("SP_RCS", "#disRes", "DNO", "trueText");
                     }

Frontend/index.html

@@ -1478,7 +1478,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <i class="fal fa-tv fa-2x"></i><br>系統監控
                             </a>
                             <div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
-                           
+
                             </div>
                         </div>
                         <div class="btn-group mx-4">
@@ -2116,7 +2116,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
                 // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
                 require(["jquery"], loadedBasePack);
-                
+
             })
 
             /**
@@ -2166,14 +2166,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 cookies = new YourTeam.Utility.Cookie();
                 jwt = cookies.get("JWT-Authorization");
                 loadEvent();
-                
+
                 if (!jwt) {
                     myBaja = new MyBaja();
                     myBaja.setMyUserAccount(Login);
                 } else {
                     isValidLogin();
                 }
-				
+
                 $(loadEle).Loading("close");
             }
 
@@ -2285,7 +2285,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     })
 
                     endPageLoading();
-                    
+
                     if (typeof timeOuters != "undefined") {
                         $.each(timeOuters, (idx, timeOut) => {
                             clearInterval(timeOut);
@@ -2319,13 +2319,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 })
 
+                $(window).on("timeout:3s", function () {
+                    getSystemAlarmByBaja((data) => {
+                        if (typeof getAlarmSub != "undefined" && getAlarmSub) {
+                            getAlarmSub(data);
+                        }
+                        alarmIconBlink();
+
+                    })
+                })
+
             }
 
             // 登入驗證
             function Login(account) {
                 console.log(account)
                 /*if ($("#login-form").valid()) {*/
-               
+
                 var url = baseApiUrl + "/api/Login/";
                 var send_data = {
                     account: account,
@@ -2399,7 +2409,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawErrRecTabBlo() {
                 let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                    </table>`
+                                            </table>`
                 return strHtml;
             }
 
@@ -2407,7 +2417,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawOpeRecTabBlo() {
                 let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                    </table>`
+                                            </table>`
                 return strHtml;
             }
 
@@ -2420,37 +2430,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     $(ele).YTTooltip({
                         html: `<div class="card m-1 border device-wrap">
 
-                                        <div class="card-header p-3">
+                                                <div class="card-header p-3">
-
-                                            <div class="position-absolute w-50" style="word-break: break-all;">
-                                                <label class="m-0 mt-2">${devName}</label>
-                                            </div>
-                                            <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
-                                                <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
-                                                <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
-                                                <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
-                                                <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
-                                                <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
-                                            </div>
-                                        </div>
-                                        <div class="card-body p-2 tab-content">
-
-                                            <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
-                                                ${drawStateTabBlo(devNum)}
-                                            </div>
-                                            <div id="info" data-tabname="cardTab" data-tabrole="child">
-                                                ${drawInfoTabBlo(devGuid)}
-                                            </div>
-                                            <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                                ${drawErrRecTabBlo()}
-                                            </div>
-                                            <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                                ${drawOpeRecTabBlo()}
-                                            </div>
-
 
+                                                    <div class="position-absolute w-50" style="word-break: break-all;">
+                                                        <label class="m-0 mt-2">${devName}</label>
+                                                    </div>
+                                                    <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                                        <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                                        <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
+                                                        <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
+                                                        <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
+                                                        <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                                                    </div>
                                                 </div>
-                                            </div>`,
+                                                <div class="card-body p-2 tab-content">
+
+                                                    <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
+                                                        ${drawStateTabBlo(devNum)}
+                                                    </div>
+                                                    <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                                        ${drawInfoTabBlo(devGuid)}
+                                                    </div>
+                                                    <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                                        ${drawErrRecTabBlo()}
+                                                    </div>
+                                                    <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                                        ${drawOpeRecTabBlo()}
+                                                    </div>
+
+
+                                                        </div>
+                                                    </div>`,
                         group: "device",
                         onShow: function (tooltipEle, oriEle) {
                             var tab = new YT.Tab({ tabName: "cardTab" })
@@ -2593,18 +2603,45 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             $(loadEle).Loading("close");
         }
 
+        function alarmIconBlink(data) {
+            if (data?.data.length != 0) {
+                $(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");
+            } else {
+                $(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
+            }
+        }
+
+        function timeOutGetData() {
+            let timeOut3s = null, timeOut5m = null;
+            let events = $._data($(window)[0], "events");
+            if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
+                timeOut3s = setInterval(() => {
+                    $(window).trigger("timeout:3s");
+                }, 3000)
+            }
+
+            if (Object.keys(events).findIndex(x => x == "timeout:5m") != -1) {
+                timeOut5m = setInterval(() => {
+                    $(window).trigger("timeout:5m");
+                }, 5 * 60 * 1000)
+            }
+
+            timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
+        }
+
         function showMainSys() {
-			let url = baseApiUrl + "/Utility/isShowMaiSys";
+            let url = baseApiUrl + "/Utility/isShowMaiSys";
-			
+
-			ytAjax = new YourTeam.Ajax(url, null, function (res) {
+            ytAjax = new YourTeam.Ajax(url, null, function (res) {
-				if (!res || res.code != "0000") {
+                if (!res || res.code != "0000") {
 
                 } else {
                     pageAct.mainStatus = res.data;
-				}
+                }
             }, null, "POST").send();
 
-		}
+        }
+
         function startPageLoading() {
             if (!loadingTip) {
                 loadingTip = YT.Alert.Tip("資料讀取中...", "show");