[Frontend][系統監控] niagara 訂閱串接

Frontend/_sysElevator.html

@@ -8,8 +8,8 @@
     }
     table.elevator-build td {
         padding: 0.2rem 0.5rem;
-        height: 40px;
+        height: 50px;
-        width: 55px;
+        width: 45px;
         border: 1px solid #000;
     }
     elevator .elevator-body, elevator .elevator-header {
@@ -27,10 +27,12 @@
 
                 </div>
                 <div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
+                    <div id="floorTable_wrapper" class="elevator-build-container">
                         <table id="floorTable" class="elevator-build m-auto">
-                        
                         </table>
                     </div>
+                   
+                </div>
             </div>
             <!--<div>
                 <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
@@ -892,15 +894,24 @@
             for (let e = 1; e <= eleCnt + 2; e++) {
                 let td = creEle("td");
                 if (e == 1) {
+                    td.addClass("t-black")
                     td.text(rfloors[f - 1]);
+                } else if (e == eleCnt + 2) { 
+                }
+                else {
+                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end","h-100"]);
+                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
+                    td.append(div)
                 }
                 tr.append(td);
             }
             tbody.append(tr);
+            $("#floorTable_wrapper").append(eleCircle)
         }
         
         $("#floorTable").html(tbody);
 
+
         $("#floorTable tbody tr").each((index, tr) => {
 
             $(tr).find("td:eq(0)").css("border-left", "0");
@@ -919,61 +930,4 @@
 
     }
 
-    function initYTTable(element) {
-        let obj = { init: null, SetContainer: null, Ele: element || $(".yt-table") };
-
-        obj.init = function () {
-            this.SetContainer();
-            this.SetBorder();
-            this.SetEndCellRightBorderRemove();
-            this.SetEndCellBottomBorderRemove();
-        }
-
-        obj.SetContainer = function () {
-            $(this.Ele).each(function (index, value) {
-                if ($(value).parent(".yt-table-container").length != 0) {
-                    $(value).unwrap(".yt-table-container");
-                }
-                let strHtml = $(`<div class="yt-table-container"></div>`);
-                $(value).wrap(strHtml);
-                $(value).parent(".yt-table-container").parent().addClass("table-div");
-            })
-        }
-
-        obj.SetBorder = function () {
-            console.log("123123", $(this.Ele))
-            $(`${$(this.Ele).selector}.th-td-br th,${$(this.Ele).selector}.th-td-br td`).css("border-right", "1px solid #adadad");
-            $(`${$(this.Ele).selector}.th-bd thead th`).css("border-bottom", "1px solid #adadad");
-            $(`${$(this.Ele).selector}.td-bd tbody td`).css("border-bottom", "1px solid #adadad");
-        }
-
-        obj.SetEndCellRightBorderRemove = function () {
-            let notBorder = 0;
-            $(`${$(this.Ele).selector} thead th:last-child,.yt-table tbody td:last-child`).each(function (index, value) {
-                if (index >= notBorder) {
-                    $(value).css("border-right", "0px");
-                }
-                if ($(value).attr("rowspan")) {
-                    let rowspan = parseInt($(value).attr("rowspan"));
-                    notBorder = index + rowspan;
-                }
-            })
-        }
-
-        obj.SetEndCellBottomBorderRemove = function () {
-            $(`${$(this.Ele).selector} tr:last-child td`).each(function (index, value) {
-                $(value).css("border-bottom", "0px");
-            })
-
-            $(`${$(this.Ele).selector} tr td[rowspan]`).each(function (index, value) {
-                let tr = $(value).closest("tr");
-                let oriTrInd = $(tr).index();
-                let lastTrInd = $(tr).parent("tbody").find("tr:last-child").index();
-                if (lastTrInd - oriTrInd == $(value).prop("rowspan") - 1) {
-                    $(value).css("border-bottom", "0px");
-                }
-            })
-        }
-        obj.init();
-    }
 </script>

Frontend/_sysMonAll.html

@@ -46,12 +46,43 @@
 
 
 <script>
-
+    var allDevList = [];
     $(function () {
         getFloDevList();
         setLightColor();
+        
+        initSub();
     })
 
+    function initSub() {
+        myBaja = new subscriptionDevices();
+        var ordPath = {
+            "building_tag": pageAct.buiTag,
+            "system_tag": pageAct.sysMainTag,
+            "name_tag": pageAct.sysSubTag,
+        }
+        myBaja.setSubscribeDevicesByBql(ordPath);
+        myBaja.setSubscribeDevicesCallBack(function (data) {
+            
+            let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0];
+            let norDevPoiName = matchDevice.device_normal_point_name;
+            let cloDevPoiName = matchDevice.device_close_point_name;
+            let errDevPoiName = matchDevice.device_error_point_name;
+
+            if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
+                //顯示正常燈號
+                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
+                
+            } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
+                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
+            } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
+                $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
+            }
+            setLightColor();
+        });
+        
+    }
+
     //function loadStaLight() {
     //    if (pageAct.sysSubObj.device_normal_color) {
     //        $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color);
@@ -108,7 +139,7 @@
 
                     $.each(floObj.device_list, (index2, devObj) => {
                         console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
-
+                        allDevList.push(devObj);
                         strHtml += `<div class="card m-1 border device-wrap" style="width:300px">
                                         <div class="card-body p-2">
                                             <div class="d-flex mb-2">
@@ -120,7 +151,7 @@
                                                 </div>
                                             </div>
                                         <div class="d-flex mb-0 mt-2 align-items-center">
-                                                <span id="${devObj.device_number}_status" class="circle-light" data-light-type="normal"></span>
+                                                <span id="${devObj.device_number}_status" class="circle-light"></span>
                                                 <span class="d-none">即時功率：</span>
                                                 <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
                                             </div>
@@ -195,7 +226,10 @@
             let devName = $(ele).data("name"); //full_name
             $(ele).YTTooltip({
                 html: `<div class="card m-1 border device-wrap">
-                            <div class="card-header p-3">
+                            <div class="col-12 p-0 row justify-content-end m-0">
+                                <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                            </div>
+                            <div class="card-header p-2 px-3">
                                 
                                 <div class="position-absolute w-50" style="word-break: break-all;">
                                     <label class="m-0 mt-2">${devName}</label>
@@ -205,7 +239,6 @@
                                     <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">
@@ -234,7 +267,8 @@
                     $("#info").html(drawInfoTabBlo(devGuid));
                     loadOpeRecTable(devGuid);
                     //loadErrRecTable2($(oriEle).data("number"));
-                    loadErrRecTable();
+                    //loadErrRecTable();
+                    loadErr($(oriEle).data("number"));
                 }
             })
         })
@@ -328,6 +362,58 @@
         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
+            let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
+            getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
+        }
+        else {
+            console.log("no device");
+        }
+    }
+
+    function callbackForErr(result) {
+        let tag = "#errRecTable";
+        let datas;
+
+        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": "normalTime",
+                "render": function (data, type, row) {
+                    return row.timestamp + "<br>" + data;
+                },
+            },
+
+        ];
+
+        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 loadErrRecTable2(allPath) {
         //    if (allPath != undefined && allPath != null) {
         //        let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1

Frontend/index.html

@@ -2459,6 +2459,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             };
         });
     </script>
+    <script src="js/n4js/bajatest.js"></script>
     <script src="js/bajascript/require.config.js"></script>
     <script src="js/FileSaver.js"></script>