Merge branch 'master' of https://gitea.mjm-staging.developers-homelab.net/BIMS/BIMS

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

@@ -2531,7 +2531,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <script src="js/bajascript/bscriptReq.js"></script>
     <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
     <script src='js/bajascript/require.js'></script>
-    
+
 
     <script type='text/javascript'>
         define('niagaraSystemProperties', function () {
@@ -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,20 +2761,23 @@ 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">
 
-                        </table>`
+                            </table>`
             return strHtml;
         }
 
+        // Card - 運維紀錄 block
         function drawOpeRecTabBlo() {
             let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                        </table>`
+                            </table>`
             return strHtml;
         }
 
+        // Card 呈現初始化
         function initPopover() {
             $("[name=devItem]").each((index, ele) => {
                 let devNum = $(ele).data("number"); //設備編號
@@ -2774,38 +2785,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 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="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()}
-                                </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="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>`,
+                                    <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>
+                                    </div>`,
                     group: "device",
                     onShow: function (tooltipEle, oriEle) {
                         var tab = new YT.Tab({ tabName: "cardTab" })
@@ -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");

Frontend/js/site.js

@@ -106,4 +106,104 @@ function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text
 function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
     attr = value != null ? attr.value = value : attr;
     return creEle("option", text, id, name, cls, data, attr);
+}
+
+class ElevatorHandler {
+    constructor(ele, option = {}) {
+        this.ele = ele;
+        this.eleId = "";
+        this.eleWra = $("<div></div>");
+        this.speed = 0;
+        this.monStatus = 0;  // 0=no 1=up 2=down
+        this.floorHeight = typeof option.fHeight == "undefined" ? 50 : option.fHeight;
+        this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
+        this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
+        this.eleCnt = typeof option.eleCnt == "undefined" ? 3 : option.eleCnt;
+        this.init();
+    }
+
+    init = function () {
+        this.setTabWra();
+        this.setTabFloor();
+    }
+
+    // 設置 wrapper
+    setTabWra = function () {
+        let id = $(this.ele).prop("id");
+        this.eleId = id;
+        if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
+            $(this.ele).unwrap(".elevator-table-wrapper");
+        }
+        let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
+        $(this.ele).wrap(wrapper);
+        this.eleWra = wrapper;
+    }
+
+    // 設置 table 樓層
+    setTabFloor = function () {
+        let _w = this.floorWidth, _h = this.floorHeight;
+        let thead = creEle("thead"), tbody = creEle("tbody");
+        let _floors = this.floors, _ele = this.ele, _eleCnt = this.eleCnt;
+        //樓層從小到大
+        _floors = _floors.oSort("sort").reverse().map(x => x.name);
+
+        let theadTr = creEle("tr");
+        for (let e = 1; e <= _eleCnt + 2; e++) {
+            let th = creEle("th");
+            th.css({ "width": `${_w}px`, "height": `${_h}px` });
+            if (e != 1 && e != _eleCnt + 2) {
+                // 電梯方框
+                let span = creEle("span", null, "elevator-item-" + (e - 1), null, ["elevator-item"]);
+                span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`})
+                th.append(span);
+            }
+            theadTr.append(th);
+        }
+        thead.css("position", "absolute");
+        thead.append(theadTr);
+
+        //樓層表格建置 tbody
+        for (let f = 1; f <= _floors.length; f++) {
+            let tr = creEle("tr");
+            for (let e = 1; e <= _eleCnt + 2; e++) {
+                let td = creEle("td");
+                td.css({ "width": `${_w}px`, "height": `${_h}px` });
+                if (e == 1) {
+                    td.addClass("t-black")
+                    td.text(_floors[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);
+        }
+
+        $(_ele).append(thead);
+        $(_ele).append(tbody);
+
+        //表格外圍無框線
+        $(_ele).find("tbody tr").each((index, tr) => {
+
+            $(tr).find("td:eq(0)").css("border-left", "0");
+            $(tr).find("td:eq(-1)").css("border-right", "0");
+
+            if (index == 0) {
+                $(tr).find("td").each((index, td) => {
+                    $(td).css("border-top", "0");
+                })
+            } else if (index == $("#floorTable tbody tr").length - 1) {
+                $(tr).find("td").each((index, td) => {
+                    $(td).css("border-bottom", "0");
+                })
+            }
+        })
+
+    }
+
+
 }

Frontend/js/style.js

@@ -51,6 +51,19 @@ Array.prototype.DistinctBy = function (...otherCol) {
 
     return result;
 }
+Array.prototype.nSort = function () {
+    function compareNumbers(a, b) {
+        return a - b;
+    }
+    return this.sort(compareNumbers);
+}
+
+Array.prototype.oSort = function (key) {
+    function compareNumbers(a, b) {
+        return a[key] - b[key];
+    }
+    return this.sort(compareNumbers);
+}
 BigInt.prototype.toJSON = function () { return this.toString() }
 
 $.fn.classList = function () { return this[0].className.split(/\s+/); };

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

@@ -71,7 +71,7 @@ $.fn.YTTooltip = function (option) {
                 obj.tooltipDiv = clone;
                 //顯示 tooltip
                 $(clone).css({ "display": display, "position": "absolute" });
-                obj.onShow ? obj.onShow(clone,obj.ele,obj) : "";
+                
                 //tooltip 高寬
                 let toolWidth = $(clone)[0].offsetWidth;
                 let toolHeight = $(clone)[0].offsetHeight;
@@ -95,7 +95,9 @@ $.fn.YTTooltip = function (option) {
                 } else if (obj.direction == "top" || obj.direction == "bottom"){
                     $(clone).css({ left: offset.left, top: top});
                 }
-
+                setTimeout(function () { 
+                    obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
+                }, 10)
                 event();
             } else {
                 obj.hideTooltipEvent(tooId);