[Frontend][系統監控] 電梯卡片內容訂閱

2022-11-24 16:27:00 +08:00 · 2022-11-24 16:27:00 +08:00 · 47c8140f06
commit 47c8140f06
parent 50488578fa
7 changed files with 316 additions and 40 deletions
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@ -126,7 +126,7 @@
                </label>
            </div>
            <div>
-                <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
+                <span id="emerReturn" class="circle-light"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
@ -141,7 +141,7 @@
                </label>
            </div>
            <div>
-                <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
+                <span id="groConFail" class="circle-light"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
@ -156,7 +156,7 @@
                </label>
            </div>
            <div>
-                <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
+                <span id="emerPower" class="circle-light"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
@ -171,7 +171,7 @@
                </label>
            </div>
            <div>
-                <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
+                <span id="fireReturn" class="circle-light"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
@ -186,7 +186,7 @@
                </label>
            </div>
            <div>
-                <input class="form-check-input mt-1" type="checkbox" id="radioNoLabel1" />
+                <span id="earQuaCon" class="circle-light"></span>
            </div>
        </div>
    </div>
@ -883,27 +883,43 @@
 <script>
    var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"]
    var allDevList = [];
+    var subSeviceData = [];
+    var subOrdPath = {
+        "building_tag": pageAct.buiTag,
+        "system_tag": pageAct.sysMainTag,
+        "name_tag": pageAct.sysSubTag,
+    };
+
    $(function () {
        setBuildFloor(floors.length, 3);
        setCards();
-        subDevice();
+        subDeviceSetStatus();
    })
    function getFloDevList() {

    }
+    //emerReturn
+    //groConFail
+    //emerPower
+    //fireReturn
+    //earQuaCon

    //baja 訂閱設備
-    function subDevice() {
+    function subDeviceSetStatus() {
+        
        myBaja = new subscriptionDevices();
-        var ordPath = {
-            "building_tag": pageAct.buiTag,
-            "system_tag": pageAct.sysMainTag,
-            "name_tag": pageAct.sysSubTag,
-        }
-        myBaja.setSubscribeDevicesByBql(ordPath);
+        myBaja.setSubscribeDevicesByBql(subOrdPath);
        myBaja.setSubscribeDevicesCallBack(function (data) {
-            console.log(data)
-            let matchDevice = allDevList.filter(x => x.device_number.split("_")[x.device_number.split("_").length - 1] == data.device_number)[0];
+
+            function getValueByName(pointName) {
+                return data.point_name == pointName ? data.value : null;
+            }
+
+            if (allDevList.length == 0) {
+                return false;
+            }
+
+            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;
@ -922,10 +938,57 @@
                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error");
            }
            setLightColor();
+
+            if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
+                let obj = {};
+                obj.device_number = matchDevice.device_number;
+                subSeviceData.push(obj)
+            } else {
+                let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
+                subData[data.point_name] = data.value
+            }
+            subDeviceSetTable(matchDevice.device_number)
+            /*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/
        });

    }

+    //baja 訂閱設備
+    function subDeviceSetTable(devNum) {
+        let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
+
+        if (!subData) {
+            return false;
+        }
+
+        function creLight(type = "trueText") {
+            let lightType = type == "trueText" ? "bg-success" : "bg-danger";
+            return creEle("span", null, null, null, [lightType, "circle-light"]).outerHtml();
+        }
+
+        let masterTag = devNum?.split("_")[5];
+        
+        let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
+
+
+        //即時狀態(左側Table)
+        $(`#imdStaTable_${devNum} #devNum`).text(devNum);
+        $(`#imdStaTable_${devNum} #status`).text(subData["ST"])
+        $(`#imdStaTable_${devNum} #group`).text(masterTag);
+        $(`#imdStaTable_${devNum} #weight`).text(subData["LOAD"])
+
+        //運轉模式(右側Table)
+        $(`#opeModTable_${devNum} #auto`).html(creLight(subData["DNO"]))
+        $(`#opeModTable_${devNum} #vip`).html(creLight(subData["MD"]))
+        $(`#opeModTable_${devNum} #onlyRun`).html(creLight(subData["IND"]))
+        $(`#opeModTable_${devNum} #manual`).html(creLight(subData["HAND"]))
+        $(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"]))
+        $(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"]))
+        $(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、"))
+        
+
+    }
+
    function setLightColor() {
        $("[data-light-type]").each((index, ele) => {
            let type = $(ele).data("light-type");
@ -1017,8 +1080,8 @@

                                <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
                                    <div class="row">
-                                        <div class="col-xl-6">${drawImdStaBlock()}</div>
-                                        <div class="col-xl-6">${drawOpeModBlock()}</div>
+                                        <div class="col-xl-6">${drawImdStaBlock(devNum)}</div>
+                                        <div class="col-xl-6">${drawOpeModBlock(devNum)}</div>
                                    </div>
                                </div>
                                <div id="info" data-tabname="cardTab" data-tabrole="child">
@ -1041,9 +1104,8 @@
                    //基本資料tab block
                    $("#info").html(drawInfoTabBlo(devGuid));
                    loadOpeRecTable(devGuid);
-                    //loadErrRecTable2($(oriEle).data("number"));
-                    //loadErrRecTable();
                    loadErr($(oriEle).data("number"));
+                    subDeviceSetTable($(oriEle).data("number"));
                }
            })
        })
@ -1106,8 +1168,8 @@
        return strHtml;
    }

-    function drawImdStaBlock() {
-        let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
+    function drawImdStaBlock(devNum) {
+        let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
        let tbody = tabEle.append("<tbody>");
        let rows =
            [
@ -1125,11 +1187,13 @@
            let tr = $("<tr></tr>");
            $.each(cols, (index2, col) => {
                let td = $("<td></td>");
-                td.prop("id", row.id)
                td.css("width", col.width)
                if (index2 == 0) {
                    td.text(row.text);
                }
+                if (index2 == 1) {
+                    td.prop("id", row.id)
+                }
                tr.append(td);
            })
            tbody.append(tr);
@ -1138,33 +1202,36 @@
        return tabEle.outerHtml();
    }

-    function drawOpeModBlock() {
-        let tabEle = $(`<table id="opeModTable" class="table table-bordered table-striped text-center m-0">`);
+    function drawOpeModBlock(devNum) {
+        let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
        let tbody = tabEle.append("<tbody>");
        let rows =
            [
-                { id: "imdStaTabDevNum", text: "自動" },
-                { id: "imdStaTabDevNumStatus", text: "VIP" },
-                { id: "imdStaTabDevNumGroup", text: "獨立運轉" },
-                { id: "imdStaTabDevNumWeight", text: "手動" },
-                { id: "imdStaTabDevNumWeight", text: "運轉保養" },
-                { id: "imdStaTabDevNumWeight", text: "回歸完了" },
-                { id: "imdStaTabDevNumWeight", text: "不服務樓層" },
+                { id: "auto", text: "自動" },
+                { id: "vip", text: "VIP" },
+                { id: "onlyRun", text: "獨立運轉" },
+                { id: "manual", text: "手動" },
+                { id: "runOpe", text: "運轉保養" },
+                { id: "returnFin", text: "回歸完了" },
+                { id: "notSerFloor", text: "不服務樓層" },
            ];
        let cols = [
-            { width: "30%" },
            { width: "40%" },
            { width: "30%" },
+            { width: "30%" },
        ]
        $.each(rows, (index, row) => {
            let tr = $("<tr></tr>");
            $.each(cols, (index2, col) => {
                let td = $("<td></td>");
-                td.prop("id", row.id)
+                
                td.css("width", col.width)
                if (index2 == 0) {
                    td.text(row.text);
                }
+                if (index2 == 1) {
+                    td.prop("id", row.id)
+                }
                tr.append(td);
            })
            tbody.append(tr);
--- a/Frontend/css/site.css
+++ b/Frontend/css/site.css
@ -24,7 +24,7 @@
    padding: 2px 19px;
 }

-.table.dataTable td {
+.table td {
    word-break: break-all;
 }

@ -33,10 +33,11 @@ label[id$='-error'].error {
 }

 [id^=yt_tooltip] {
-    width: 650px;
+    min-width: 650px !important;
 }

 .circle-light {
+    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50px;
--- a/Frontend/index.html
+++ b/Frontend/index.html
@ -2452,7 +2452,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 src='js/require.js'></script>
+    <!--<script src='js/require.js'></script>-->
    <script type='text/javascript'>
        define('niagaraSystemProperties', function () {
            return {
--- a/Frontend/js/bajascript/bscriptReq.js
+++ b/Frontend/js/bajascript/bscriptReq.js
@ -25,7 +25,7 @@ require.hbs.fetchText = function (uri, callback) {
    return href;
  }
  
-  require(['baja!'], function (baja) {
+    require(['baja!'], function (baja) {
    if (baja.isOffline()) {
      uri = /([^?]*)\??.*/.exec(uri)[1];
      uri = uri.replace('https://workbench/module/', 'module://');
--- a/Frontend/js/n4js/alarmbaja.js
+++ b/Frontend/js/n4js/alarmbaja.js
@ -88,6 +88,35 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
 * @param {any} devicePath
 * @param {any} callback
 */
+// function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
+//     var _result = "";
+//     var _ss = "";
+//     var _index = 0;
+//     //{ "count":2,"data": [{ "time": "2022/11/14 15:00:00", "errId": "0001", "ackCheck": "未確認", "errReason": "燈泡故障" }, { "time": "2022/11/14 15:00:00", "errId": "0002", "ackCheck": "未確認", "errReason": "燈泡故障" }]}
+//     require(['baja!'], function (baja) {
+//         baja.Ord.make("local:|foxs:|alarm:|bql:select top 10 timestamp, ackState, alarmData, alarmData.sourceName, sourceState, uuid, alarmData.msgText, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
+//             .then(function (table) {
+//                 return table.cursor({
+//                     each: function (record) {
+//                         if (_index == 0)
+//                             _ss += '{"uuid":"' + record.get('uuid') + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "timestamp":"' + record.get('timestamp') + '"}';
+//                         else
+//                             _ss += ',{"uuid":"' + record.get('uuid') + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "timestamp":"' + record.get('timestamp') + '"}';
+//                         _index++;
+//                     },
+//                     after: function () {
+//                         _result += '{' + '"count": ' + _index +', "data":[';
+
+//                         _result += _ss+']';
+//                         _result += '}';
+//                         if (typeof callback === 'function') {
+//                             callback(_result);
+//                         }
+//                     }
+//                 });
+//             });
+//     });
+// }
 function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
    var _result = "";
    var _ss = "";
@ -107,10 +136,11 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
                        var _timestampTemp = new Date(record.get('timestamp').toString());
                        _occurrenceTime += _timestampTemp.getFullYear().toString() + "-" + addzero(_timestampTemp.getMonth() + 1).toString() + "-" + addzero(_timestampTemp.getDate()).toString() + " " + addzero(_timestampTemp.getHours()).toString() + ":" + addzero(_timestampTemp.getMinutes()).toString() + ":" + addzero(_timestampTemp.getSeconds()).toString();

+                        //var _occurrenceTime = _timestamp.format("yyyy-MM-dd hh:mm:ss");//.toLocaleString();
                        var _normaltime = new Date(record.get('normalTime').toString());
                        _normalTime += _normaltime.getFullYear().toString() + "-" + addzero(_normaltime.getMonth() + 1).toString() + "-" + addzero(_normaltime.getDate()).toString() + " " + addzero(_normaltime.getHours()).toString() + ":" + addzero(_normaltime.getMinutes()).toString() + ":" + addzero(_normaltime.getSeconds()).toString();

-                        var _msgText = record.get('alarmData').get('msgText');
+                        var _msgText = record.get('alarmData').get('msgText');// == 1 ? _occurrenceTime : "未確認";
                        var _ackText = record.get('ackState') == 1 ? _occurrenceTime : "未確認";

                        if (_index == 0)
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@ -19,6 +19,8 @@ function subscriptionDevices() {
 * 使用者透過BQL指定路徑去訂閱設備點位
 */
 function BajaSubscribeDevicesByBql() {
+   
+    
    require(['baja!'], function (baja) {
        console.log("進入Function 準備執行BQL訂閱");
        var init_start = new Date(Date.now());
@ -57,6 +59,8 @@ function BajaSubscribeDevicesByBql() {
                    baja_subscribe_device_callback_func(modify_target_device, true); //第2參數用在平面圖，刷新畫面
                }
            }
+        }, function (err) {
+            console.log(err)
        });

        //使用bql語法
@ -189,3 +193,138 @@ function BajaSubscribeDevicesByBql() {
    });
 }

+function getElevatorInfoByBaja(path, callback) {
+    var _result = "";
+    var _ss = '{';
+    var _index = 0;
+    //
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ELEV/EL/R2F/NA/ELEV1/N1|bql:select name, displayName, out, out.value, slotPath, parent.name as 'device_number' from control:ControlPoint where name = 'CP' or name = 'RD' or name = 'DS' or name = 'ST' or name = 'LOAD' or name = 'MID' or name = 'HAND' or name = 'IND' or name = 'MD' or name = 'DNO'").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        var item = null;
+                        var value = null;
+                        if (record.get('name') == "CP") { 
+                            item = "floor";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "RD") { //UP or DOWN
+                            item = "direction";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "DS") {
+                            item = "door_state";
+                            value = record.get('out').get('value') == true ? "OPEN" : "CLOSE";;
+                        }
+                        else if (record.get('name') == "ST") {
+                            item = "running_status";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "LOAD") {
+                            item = "loading";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "MID") {
+                            item = "maintenance";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "HAND") {
+                            item = "manual";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "IND") {
+                            item = "independent";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "MD") {
+                            item = "vip";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "DNO") {
+                            item = "automatic";
+                            value = record.get('out').get('value');
+                        }
+                        
+                        if (item != null && item != "")
+                        {
+                            if (_index == 0)
+                                _ss += '{"item":"' + item + '", "value":"' + value + '"}';
+                            else
+                                _ss += ',{"item":"' + item + '", "value":"' + value + '"}';
+                            _index++;
+                        }
+
+                        
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    }
+                });
+            });
+    });
+}
+
+
+
+// baja.Ord.make('ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/H/F3|bql:select name, displayname, slotPath, out.value, out from control:ControlPoint')
+// // baja.Ord.make('ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/H/E1/B1F/TestData/H_E1_B1F_TestData_Data|bql:select slotPath,out.value from control:NumericWritable')
+//     .get(
+//         function (table) {
+//             var tableStart, tableFinish;
+//             var subStart, subFinish;
+//             var readBqlFinish = new Date(Date.now());
+//             $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
+//             $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+
+//             table.cursor({
+//                 before: function () {
+//                     tableStart = new Date(Date.now());
+//                     $("#table-start-timestamp").html(tableStart.toISOString());
+
+//                     subStart = new Date(Date.now());
+//                     $("#sub-start-timestamp").html(subStart.toISOString());
+
+//                     render_start = new Date(Date.now());
+//                 },
+//                 each: function (item, index) {
+
+//                     // console.log("local:|foxs:|station:|" + this.getDisplay("slotPath"));
+//                     baja.Ord.make("local:|foxs:|station:|" + this.getDisplay("slotPath"))
+//                         .get()
+//                         .then(function (component) {
+//                             //紀錄 未render前花費約5秒
+//                             $("#render-points").append(`
+//                                 <div>
+//                                     <label>${component.getDisplayName()}</label>
+//                                     <div id="${component.getDisplayName()}-value" style="text-align: center;">${component.getOutDisplay()}</div>
+//                                 </div>
+//                             `);
+
+//                             sub.subscribe({
+//                                 comps: component,
+//                             });
+
+//                             $("#sub-point-name").html(component.getDisplayName());
+
+//                             subFinish = new Date(Date.now());
+//                             $("#sub-finish-timestamp").html(subFinish.toISOString()); $("#sub-finish-timestamp").html(subFinish.toISOString());
+//                             $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+//                         });
+//                 },
+//                 after: function () {
+//                     tableFinish = new Date(Date.now());
+//                     $("#table-finish-timestamp").html(tableFinish.toISOString());
+//                     $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+//                 },
+//                 limit: -1,
+//                 offset: 0
+//             });
+//         })
+
+
--- a/Frontend/js/n4js/historybaja.js
+++ b/Frontend/js/n4js/historybaja.js
@ -40,6 +40,7 @@ function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millise
    var _index = 0;

    require(['baja!'], function (baja) {
+        console.log('local:|foxs:|history:/' + company + '/' + devicePath + '|bql:select * from control:ControlPoint where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond);
        baja.Ord.make('local:|foxs:|history:/' + company + '/' + devicePath + '|bql:select * from control:ControlPoint where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond).get()
            .then(function (table) {
                return table.cursor({
@ -57,8 +58,46 @@ function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millise
                        if (typeof callback === 'function') {
                            callback(_result);
                        }
-                    }
+                    },
+                    limit: -1,
+                    offset: 0
                });
            });
    });
 }
+
+
+
+function test3000p(devicePath, startDate_millisecond, endDate_millisecond, deviceName, company, callback) {
+    var _result = "";
+    var _ss = "";
+    var _index = 0;
+    require(['baja!'], function (baja) {
+        "use strict";
+        baja.Ord.make('local:|foxs:|history:/' + company + '/' + devicePath + '|bql:select * from control:ControlPoint where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond)
+            .get(
+                function (table) {
+    
+                    table.cursor({
+                        each: function (item) {
+                            console.log("item: " + item);
+                            if (_index == 0)
+                                _ss += '{"deviceName":"' + deviceName + '", "value":' + item.$map.$map.value.$display + ', "timestamp":"' + item.$map.$map.timestamp.$val.$cEncStr + '"}';
+                            else
+                                _ss += ',{"deviceName":"' + deviceName + '", "value":' + item.$map.$map.value.$display + ', "timestamp":"' + item.$map.$map.timestamp.$val.$cEncStr + '"}';
+                            _index++;
+                        },
+                        after: function () {
+                            _result += '{' + '"count": ' + _index + ', "data":[';
+                            _result += _ss;
+                            _result += ']}';
+                            if (typeof callback === 'function') {
+                                callback(_result);
+                            }
+                        },
+                        limit: -1,
+                        offset: 0
+                    });
+                })
+    });
+}