[Frontend][系統監控] 電梯設備 電梯管理 列表建置| 電梯管理列表訂閱程序串接 | 電梯管理列表日曆串接 | 電梯管理 detail 畫面建置 | 電梯管理 Master Detail 畫面建置 | Modal Div 動畫換頁建置 | Checbox Switch Css 建置 | [全域功能] 換內頁訂閱釋放程序建置 | 電梯頁面右下角 平面圖程序串接

Frontend/_sysMonAll.html

@@ -25,9 +25,7 @@
         </div>
     </div>
     <div class="col-sm-12 col-xl-7">
-        <!--<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">-->
+       
-        <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
-        <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
     </div>
 </div>
 
@@ -38,7 +36,7 @@
 
 
 <script>
-    var allDevList = [];
+    var allDevList = [];  //全設備清單
     $(function () {
         getFloDevList();
         setLightColor();
@@ -74,7 +72,7 @@
         });
         
     }
-
+    //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
     function setLightColor() {
         $("[data-light-type]").each((index, ele) => {
             let type = $(ele).data("light-type");
@@ -83,24 +81,26 @@
             switch (type) {
                 case "normal":
                     color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
-                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
+                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
                     break;
                 case "close":
                     color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
-                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
+                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
                     break;
                 case "error":
                     color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
+                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
                     break;
             }
             $(ele).css("background-color", color);
+            //是否閃爍
             if (isFlashing) {
                 $(ele).parents(".card.device-wrap").addClass("light-flash");
             }
         })
     }
 
+    //取得設備列表 並繪製卡片
     function getFloDevList() {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
         let sendData = {
@@ -148,6 +148,7 @@
         }, null, "POST").send();
     }
 
+    // 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>

Frontend/css/site.css

@@ -55,6 +55,46 @@ label[id$='-error'].error {
     animation: flashing-c 0.5s linear infinite;
 }
 
+/* checkbox switch */
+input.toggle:checked::before {
+   content: '';
+   position: absolute;
+   top: 2px;
+   left: 24px;
+   display: block;
+   border-radius: 25px;
+   width: 20px;
+   height: 20px;
+   background: #3f8635;
+}
+input.toggle::before {
+   content: '';
+   position: absolute;
+   top: 2px;
+   left: 3px;
+   display: block;
+   border-radius: 25px;
+   width: 20px;
+   height: 20px;
+   background: #656565;
+   transition: 0.2s;
+}
+
+input.toggle {
+   cursor:pointer;
+   appearance: none;
+   position:relative;
+   width: 48px;
+   height: 24px;
+   background: #464646;
+   border-radius: 50px;
+   align-content: center;
+}
+input.toggle:checked {
+   background: #97c193;
+}
+
+
 @keyframes flashing-c {
     0% {
         color: var(--flash-color-1);

Frontend/index.html

@@ -2699,7 +2699,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     $("#sysMonBtnList .dropdown-item").removeClass("active");
                     pageAct.sysMainTag = null;
                 }
-
+                $.each(tolSubList, (idx, sub) => {
+                    console.log("sub",sub,idx)
+                    //sub.unsubscribeAll();
+                    //sub.detach();
+                })
                 $("#app").load(`_${page}.html`, loadCallback);
             })
 
@@ -2722,7 +2726,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         }
 
+        //==============================================================================
+        //                       ↓  系統監控 - 共用 Function ↓
+        //==============================================================================
 
+        // Card - 基本資料 Table
         function drawInfoTabBlo(devGuid) {
             let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
             let tbody = tabEle.append("<tbody>");
@@ -2753,6 +2761,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             return tabEle.prop("outerHTML");
         }
 
+        // Card - 異常紀錄 block
         function drawErrRecTabBlo() {
             let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
@@ -2760,6 +2769,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             return strHtml;
         }
 
+        // Card - 運維紀錄 block
         function drawOpeRecTabBlo() {
             let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
@@ -2767,6 +2777,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             return strHtml;
         }
 
+        // Card 呈現初始化
         function initPopover() {
             $("[name=devItem]").each((index, ele) => {
                 let devNum = $(ele).data("number"); //設備編號
@@ -2791,7 +2802,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <div class="card-body p-2 tab-content">
 
                                     <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
-                                    ${drawStateTabBlo()}
+                                        ${drawStateTabBlo(devNum)}
                                     </div>
                                     <div id="info" data-tabname="cardTab" data-tabrole="child">
                                         ${drawInfoTabBlo(devGuid)}
@@ -2813,10 +2824,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         //loadErrRecTable2($(oriEle).data("number"));
                         //loadErrRecTable();
                         loadErr($(oriEle).data("number"));
+                        subDeviceSetTable ? subDeviceSetTable($(oriEle).data("number")) : ""
                     }
                 })
             })
         }
+
+        // Card - 運維紀錄 Table
         function loadOpeRecTable(devGuid) {
             let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
             let tag = "#opeRecTable";
@@ -2851,60 +2865,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             ];
 
-
-
-            //let callback = function () {
-            //    $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
-            //    let api = this.api();
-            //    api.columns.adjust();
-            //}
-
             let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
         }
 
-        function loadErrRecTable() {
+        // Baja 取得異常紀錄
-            let tag = "#errRecTable";
-            let datas;
-            //getOneDeviceAlarmTop10ByBaja(_devicePath, callback);
-
-            let column_defs = [
-                { "targets": [0], "width": "15%", "sortable": true },
-                { "targets": [1], "width": "25%", "sortable": true },
-                { "targets": [2], "width": "25%", "sortable": true },
-                { "targets": [3], "width": "35%", "sortable": true },
-            ];
-
-            let columns = [
-                {
-                    "title": "異常ID",
-                    "data": "uuid",
-
-                },
-                {
-                    "title": "異常原因",
-                    "data": "msgText",
-                },
-                {
-                    "title": "ACK確認",
-                    "data": "ackState",
-                },
-                {
-                    "title": "發生/賦歸時間",
-                    "data": "timestamp",
-                    "width": "45%",
-                },
-
-            ];
-
-            //let callback = function (result) {
-            //    datas = result;
-            //}
-            let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}';
-            let json_object = JSON.parse(result);
-            datas = json_object['data'];
-            errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
-        }
-
         function loadErr(allPath) {
             if (allPath != undefined && allPath != null) {
                 let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
@@ -2916,6 +2880,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }
         }
 
+        // Card - 異常紀錄 Table
         function callbackForErr(result) {
             let tag = "#errRecTable";
             let datas;
@@ -2956,6 +2921,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
 
         }
+
+        //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
+        function setLightColor() {
+            $(".dev-card").each((index, ele) => {
+                let type = $(ele).find("[data-light-type]").data("light-type");
+                let isFlashing = false;
+                let color = "#000";
+                switch (type) {
+                    case "normal":
+                        color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
+                        isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
+                        break;
+                    case "close":
+                        color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
+                        isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
+                        break;
+                    case "error":
+                        color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+                        isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
+                        break;
+                }
+                $(ele).find("[data-light-type]").css("background-color", color);
+                //是否閃爍
+                if (isFlashing) {
+                    $(ele).addClass("light-flash");
+                }
+            })
+        }
+
+            //==============================================================================
+            //                       ↑  系統監控 - 共用 Function ↑
+            //==============================================================================
     </script>
 
 </body>

Frontend/js/n4js/bajatest.js

@@ -1,6 +1,6 @@
 let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
 var ordPath; //當前點選選單的tag，用來抓出設備路徑，例如:旅館棟->H，消防偵煙器->F3
-
+window.tolSubList = [];
 function subscriptionDevices() {
     // 用BQL的方式去訂閱
     this.setSubscribeDevicesByBql = function (tempOrdPath) {
@@ -173,7 +173,7 @@ function BajaSubscribeDevicesByBql() {
                                     sub.subscribe({
                                         comps: component,
                                     });
-
+                                    tolSubList.push(sub);
                                     subFinish = new Date(Date.now());
                                     $("#sub-end").html(subFinish.toISOString());
                                     $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");