[Frontend] 紀錄切換頁面，重整時恢復到原本頁面 | [系統監控] 縮放 Card 列表寬高自適應 | [儀錶板] 左下角系統小類 Card 呈現四行 | 工單狀況圓環圖建置 | [系統監控] 卡片根據後台設置長寬 | [全域功能] baja 訂閱設備 物件化程序建置

Frontend/_dashboard.html

@@ -161,27 +161,16 @@
         </div>
 
         <div class="col-sm-12 col-lg-4">
-            <div class="row">
+            <div class="row h-100">
                 <div class="col-lg-6">
-                    <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close>
+                    <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem);">
                         <div class="panel-hdr">
                             <h2>
                                 異常狀態
                             </h2>
                         </div>
-                        <div class="panel-container show">
+                        <div class="panel-container h-100 show">
-                            <div class="panel-content poisition-relative p-0">
+                            <div class="panel-content poisition-relative p-0 row p-0 h-100">
-                                <!--<div class="pb-5 pt-3">
-                                    <div class="d-flex mr-4">
-                                        <div class="mr-2">
-                                            <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#967bbd&quot;, &quot;#ccbfdf&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">7/10</span>
-                                        </div>
-                                        <div>
-                                            <label class="fs-sm mb-0 mt-2 mt-md-0">New Sessions</label>
-                                            <h4 class="font-weight-bold mb-0">70.60%</h4>
-                                        </div>
-                                    </div>
-                                </div>-->
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
                                     <canvas class="chart" id="errRecChart"></canvas>
                                 </div>
@@ -193,34 +182,20 @@
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <div id="panel-3" class="panel" data-panel-sortable data-panel-collapsed data-panel-close>
+                    <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem);">
                         <div class="panel-hdr">
                             <h2>
                                 工單進度
                             </h2>
                         </div>
-                        <div class="panel-container show">
+                        <div class="panel-container h-100 show">
-                            <div class="panel-content poisition-relative p-0">
+                            <div class="panel-content poisition-relative row p-0 h-100 p-0">
-                                <!--<div class="pb-5 pt-3">
+                              
-                                    <div class="d-flex mr-0">
-                                        <div class="mr-2">
-                                            <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#2196F3&quot;, &quot;#9acffa&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">3/10</span>
-                                        </div>
-                                        <div>
-                                            <label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
-                                            <h4 class="font-weight-bold mb-0">14,134</h4>
-                                        </div>
-                                    </div>
-                                </div>-->
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                    <span class="text-center position-absolute t-white" style="top:25%;left:27%;">已完成<br>6</span>
+                                    <canvas class="chart" id="worOrdErrChart"></canvas>
-                                    <img src="img/u40.png" class="" style="width:75%;margin-left:0px;left:-22px;">
-                                    <span class="text-center position-absolute t-white" style="top:51%;left:58%;">未完成<br>8</span>
                                 </div>
                                 <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                    <span class="text-center position-absolute t-white" style="top:43%;left:26%;">未派工<br>5</span>
+                                    <canvas class="chart" id="worOrdFinChart"></canvas>
-                                    <img src="img/u43.png" class="mt-2 mb-1" style="width:51%;">
-                                    <span class="text-center position-absolute t-white" style="top:42%;left:58%;">派工中<br>9</span>
                                 </div>
                             </div>
                         </div>
@@ -244,6 +219,8 @@
     var timeOuters = [];
     var eveDayElecChart = null;
     var eveWeekElecChart = null;
+    var worOrdErrChart = null;
+    var worOrdFinChart = null;
     var errRecChart = null;
     var errChkChart = null;
     var loadedCnt = 0;
@@ -262,6 +239,11 @@
         { mainSys: "FE", subSys: "F2", iconClass: "fal fa-smog" },
         { mainSys: "WP", subSys: "W1", iconClass: "fal fa-stopwatch" },
         { mainSys: "S", subSys: "R", iconClass: "fal fa-user-shield" },
+        { mainSys: "LT", subSys: "L2", iconClass: "fal fa-sun"},
+        { mainSys: "ME", subSys: "M1", iconClass: "fal fa-icicles"},
+        { mainSys: "ME", subSys: "M8", iconClass: "fal fa-bong"},
+        { mainSys: "W3", subSys: "W1", iconClass: "fal fa-tint"},
+
     ];
 
     var tempSysSubText = [
@@ -270,12 +252,16 @@
         { text: "緊急發電機", mainSys: "EE", subSys: "E3", },
         { text: "電錶系統", mainSys: "EE", subSys: "E4", },
         { text: "二線式照明系統", mainSys: "LT", subSys: "L1", },
+        { text: "景觀照明系統", mainSys: "LT", subSys: "L2", },
+        { text: "儲冰系統", mainSys: "ME", subSys: "M1", },
         { text: "小型送風機", mainSys: "ME", subSys: "M10", },
+        { text: "排油煙設備", mainSys: "ME", subSys: "M8", },
         { text: "環境感測設備", mainSys: "ME", subSys: "M12", },
         { text: "電梯設備", mainSys: "ELEV", subSys: "EL", },
         { text: "消防設備", mainSys: "FE", subSys: "F1", },
         { text: "排煙系統", mainSys: "FE", subSys: "F2", },
         { text: "電子水錶", mainSys: "WP", subSys: "W1", },
+        { text: "熱水系統", mainSys: "W3", subSys: "W1", },
         { text: "門禁安全系統", mainSys: "S", subSys: "R", }
     ];
 
@@ -291,7 +277,7 @@
         let strHtml = ``;
 
         $.each(tempSysSubText, (idx, obj) => {
-            if (isExiNames.indexOf(obj.text) == -1 && $("#sysSubBtnList .dev-group").length < 12) {
+            if (isExiNames.indexOf(obj.text) == -1 && $("#sysSubBtnList .dev-group").length < 16) {
                 let iconObj = sysIconList.filter(x => x.mainSys == obj.mainSys && x.subSys == obj.subSys)[0];
                 strHtml = `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
                             <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"><i class="${iconObj.iconClass || "fal fa-hdd"} fa-2x py-2"></i></button>
@@ -408,14 +394,14 @@
         // 本週與上週用電量 (每天)
         getElectricMeterDayDataByBaja(devNum + "_KWH", n4Sup, prevTwoWeek, tomorrow, (data) => {
             let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
-            let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
+            let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 7) <= strToDate(x.timestamp.$cEncStr));
-            let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - 7 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 0 - 7) >= strToDate(x.timestamp.$cEncStr));
+            let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 14) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 1 - 7) >= strToDate(x.timestamp.$cEncStr));
-
+            debugger
             chartEveWeeksElec(curWeekData, prevWeekData)
             chkBajaLoaded();
         })
 
-        // 異常數量與賦歸數量
+        // 異常數量與復歸數量
         getAlarmCountByBaja((aData) => {
             chartDataCnt.alarmCnt = aData.count;
             chkBajaLoaded();
@@ -424,7 +410,7 @@
             chartDataCnt.recCnt = rData.count;
             chkBajaLoaded();
         })
-        // 異常數量與賦歸數量
+        // 異常數量與復歸數量
         getCheckedAckedCountByBaja((data) => {
             chartDataCnt.chkedErrCnt = data.count;
             chkBajaLoaded();
@@ -440,8 +426,10 @@
         loadedCnt++;
 
         if (loadedCnt == 9) {
-            chartErrRec(["異常數量", "賦歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
+            chartErrRec(["異常數量", "復歸數量"], [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
             chartErrChk(["已確認異常", "未確認異常"], [chartDataCnt.chkedErrCnt, chartDataCnt.unChkedErrCnt]);
+            chartWorOrdErr();
+            chartWorOrdFin();
 
             endPageLoading();
         }
@@ -628,7 +616,7 @@
         }
     }
 
-    // 圖表 - 異常與賦歸圖表 (圓餅圖)
+    // 圖表 - 異常與復歸圖表 (圓餅圖)
     function chartErrRec(labels, datas) {
 
         let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d');
@@ -720,6 +708,101 @@
 
     }
 
+    // 圖表 - 異常未派工與異常已派工 (圓環圖)
+    function chartWorOrdErr(labels, datas) {
+        labels = ["異常未派工", "異常已派工"]
+        datas = [5, 9]
+        let worOrdErrChartCanvas = ctx = $('#worOrdErrChart').get(0).getContext('2d');
+
+        let worOrdErrChartData = {
+            labels: labels,
+            datasets: [
+                {
+                    label: '數量',
+                    unit: '個',
+                    fill: true,
+                    backgroundColor: [color.danger._500, color.info._300],
+                    //data: worOrdErrArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
+                    data: datas,
+                }
+            ]
+        }
+
+        let worOrdErrChartOptions = {
+            //maintainAspectRatio: false,
+            responsive: true,
+            legend: {
+                display: true,
+            },
+            tooltips: {
+                enabled: true,
+            },
+
+
+        }
+
+        if (worOrdErrChart == null) {
+            worOrdErrChart = new Chart(worOrdErrChartCanvas, {
+                type: "doughnut",
+                data: worOrdErrChartData,
+                options: worOrdErrChartOptions
+            })
+        } else {
+            worOrdErrChart.data.datasets.forEach((dataset) => {
+                dataset.data = datas;
+            });
+        }
+
+    }
+
+    // 圖表 - 工單已完成與工單未完成 (圓環圖)
+    function chartWorOrdFin(labels, datas) {
+        labels = ["工單已完成","工單未完成"]
+        datas = [5,9]
+        let worOrdFinChartCanvas = ctx = $('#worOrdFinChart').get(0).getContext('2d');
+
+        let worOrdFinChartData = {
+            labels: labels,
+            datasets: [
+                {
+                    label: '數量',
+                    unit: '個',
+                    fill: true,
+                    backgroundColor: [color.danger._500, color.info._300],
+                    //data: worOrdFinArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
+                    data: datas,
+                }
+            ]
+        }
+
+        let worOrdFinChartOptions = {
+            //maintainAspectRatio: false,
+            responsive: true,
+            legend: {
+                display: true,
+            },
+            tooltips: {
+                enabled: true,
+            },
+
+
+        }
+
+        if (worOrdFinChart == null) {
+            worOrdFinChart = new Chart(worOrdFinChartCanvas, {
+                type: "doughnut",
+                data: worOrdFinChartData,
+                options: worOrdFinChartOptions
+            })
+        } else {
+            worOrdFinChart.data.datasets.forEach((dataset) => {
+                dataset.data = datas;
+            });
+        }
+
+    }
+
+
     // 從 baja 訂閱 左下角各系統小類異常狀態
     function getAlarmSub(data) {
         $.each(data.data, (idx, alaObj) => {

Frontend/_sysMonAll.html

@@ -38,11 +38,13 @@
     var allDevList = [];  //全設備清單
     var subDeviceData = [];
     var heatMap = null;
+    var buildMenuData = {};
 
     $(function () {
         getBuildMenu((arr, data) => {
+            buildMenuData = data;
             if (arr.indexOf(4) != -1) {
-                getFloDevList();
+                getFloDevList(arr[0] == 4 ? "left" :"right");
                 setLightColor();
             }
             if (arr.indexOf(3) != -1) {
@@ -90,11 +92,11 @@
         }
         myBaja.setSubscribeDevicesByBql(ordPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
+            
             let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
             if (!matchDevice) {
                 return false;
             }
-            
             //將訂閱值塞入 subDeviceData
             if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
@@ -130,6 +132,7 @@
             
             setLightColor();
             setForgeHotSpotColor(matchDevice);
+            lightDevForgeSpotLig(matchDevice)
             // 從設備訂閱更新每個設備卡片即時點位
             setDevItemPoiValBySub(data);
         });
@@ -139,6 +142,12 @@
         });
 
     }
+    function lightDevForgeSpotLig(devObj) {
+        
+        let position = isJSON(devObj.device_coordinate_3d) ? JSON.parse(devObj.device_coordinate_3d) : {};
+        newLight(position);
+    }
+
     // 從設備訂閱更新每個設備卡片即時點位
     function setDevItemPoiValBySub(data) { 
         
@@ -220,7 +229,7 @@
     }
 
     // 取得設備列表 並繪製卡片
-    function getFloDevList() {
+    function getFloDevList(position = "left") {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
         let sendData = {
             sub_system_tag: pageAct.sysSubTag,
@@ -240,7 +249,7 @@
                     $.each(floObj.device_list, (index2, devObj) => {
                         allDevList.push(devObj);
                         let devItem = getRiserPoiObj();
-                        strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}">
+                        strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}" data-position="${position}">
                                         <div class="card-body p-2">
                                             <div class="d-flex mb-2">
                                                 <div  class="mr-5 cur-poi">
@@ -314,8 +323,11 @@
     // Card 即時狀態
     function drawStateTabBlo(devNum) {
         let devPath = devNum.replaceAll("_", "/");
-        let strHtml = `<div style="height:100%">
+        let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position");
-                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:100%;height:100%;min-height:30vh"></iframe>
+        let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
+        let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
+        let strHtml = `<div style="height:100%;width:100%">
+                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};min-height:100px;"></iframe>
                        </div>`
         return strHtml;
     }

Frontend/_systemMonitor.html

@@ -1,8 +1,4 @@
-<style>
+
-    [id^=yt_tooltip] {
-        width: 650px;
-    }    
-</style>
 <div class="container-fluid">
     <div class="row bg-dark align-items-center">
         <label id="sysSubText" class=" mx-5 mb-0 fs-1-05"></label>

Frontend/css/site.css

@@ -10,7 +10,7 @@
 
 label[id$='-error'].error { color: var(--yt-red-2); }
 
-[id^=yt_tooltip] { min-width: 650px !important; }
+/*[id^=yt_tooltip] { min-width: 650px !important; }*/
 
 .circle-light { display: inline-block; width: 25px; height: 25px; border-radius: 50px; }
 
@@ -89,8 +89,11 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
 .yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-fusion-500); }
 
 .card-header.p-3.ui-draggable-handle:hover { cursor: move; }
-@media screen and (max-width: 576px) {
+
-    .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
+.device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
+.scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
+
+@media screen and (max-width: 576px) { .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
 }
 
 @keyframes lds-ring {

Frontend/index.html

@@ -726,9 +726,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         if (location.href.indexOf("ord") != -1) {
             location.href = "/file/index.html"
         }
+        var lastPage = sessionStorage.getItem("lastPage");
         // 執行初步 Loading
         var loadEle = pageLoading();
         var errRecTable = null, opeRecTable = null;
+        var tolSubList = [];
 
         /**
         * 頁面 Loading 建立
@@ -825,7 +827,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
              * 登入驗證完成 Callback
              * */
             function isValidLogin() {
-                $("#app").load("_dashboard.html", loadCallback);
               
                 getUserInfo();
                 iniFroList();
@@ -834,6 +835,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 getSysMonBtnList();
                 checkDevState();
 
+                if (lastPage) {
+                    let lastPageAct = {};
+                    if (isJSON(sessionStorage.getItem("pageAct"))) {
+                        lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
+                    }
+                    if (lastPageAct.sysSubTag) {
+                        $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
+                    } else {
+                        $(`[name=topFunBtn][data-page=${lastPage}]`).click();
+                    }
+                    
+                    /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
+                } else {
+                    $("#app").load("_dashboard.html", loadCallback);
+                }
+
+
                 function getBuiList() {
                     let url = baseApiUrl + "/api/Device/GetBuild";
                     ytAjax = new YourTeam.Ajax(url, null, function (res) {
@@ -897,6 +915,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (page != "systemMonitor") {
                         $("#sysMonBtnList .dropdown-item").removeClass("active");
                         pageAct.sysMainTag = null;
+                    } else {
+                        setSysTagForPageAct(this);
                     }
                     $.each(tolSubList, (idx, sub) => {
                         sub.unsubscribeAll();
@@ -914,6 +934,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     }
 
                     getUserInfo();
+                    sessionStorage.setItem("lastPage", page);
+                    sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
                     $("#app").load(`_${page}.html`, loadCallback);
 
                 })
@@ -923,13 +945,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     location.href = "/logout";
                 })
 
-                onEvent("click", "#sysMonBtnList a", function (e) {
-                    pageAct.sysMainTag = $(this).data("subSysObj").main_system_tag;
-                    pageAct.sysSubTag = $(this).data("subSysObj").sub_system_tag;
-                    pageAct.sysSubName = $(this).data("subSysObj").full_name;
-                    pageAct.sysSubObj = $(this).data("subSysObj");
-                    getDevItem();
-                })
 
                 onEvent("active:change", "#buiList", function (e, actEle) {
                     if (actEle) {
@@ -1081,7 +1096,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                                     </div>
                                                                 </div>
                                                                 <div class="card-body p-2 tab-content">
-                                                                    <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%">
+                                                                    <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
                                                                         ${drawStateTabBlo(devNum)}
                                                                     </div>
                                                                     <div id="info" data-tabname="cardTab" data-tabrole="child">
@@ -1107,18 +1122,27 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             }
                             $(tooltipEle).draggable({
                                 cursor: "move",
-                                handle: ".card-header"  // 只能通过卡片的标题栏拖拽
+                                handle: ".card-header",  // 只能通过卡片的标题栏拖拽
+                                containment: "document",
+                                scroll: true
                             });
                             $(tooltipEle).resizable({
                                 resize: function (event,ui) {
                                     let iframe = $(ui.element).find("iframe");
                                     if (iframe.length != 0) {
-                                        //let cardBodyHei = $(ui.element).find(".card-body").css("height");
+                                        if (ui.size.width != ui.originalSize.width) {
-                                        //if (cardBodyHei) { 
+                                            iframe.css("width", "100%");
-                                        //    $(iframe).css("height", cardBodyHei);
+                                        } else if (ui.size.height != ui.originalSize.height) {
-                                        //}
+                                            iframe.css("height", "100%");
                                         }
                                     }
+                                    let cardBodyHeight = $(ui.element).find(".card-body").css("height");
+                                    $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
+                                   
+                                    errRecTable.draw(false)
+                                },
+                                minWidth: 200,
+                                minHeight:150,
                             });
                             typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
                         },
@@ -1173,7 +1197,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 ];
 
-                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
+                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "<'scrolledTable'tpi>");
             }
 
             function loadLightSchTable(devGuid) {
@@ -1295,7 +1319,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 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");
+                errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "<'scrolledTable'tpi>");
 
             }
 
@@ -1351,6 +1375,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             $(loadEle).Loading("close");
         }
 
+        function setSysTagForPageAct(obj) {
+            pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
+            pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
+            pageAct.sysSubName = $(obj).data("subSysObj").full_name;
+            pageAct.sysSubObj = $(obj).data("subSysObj");
+            getDevItem();
+        }
+
         function getDevItem() {
             let url = baseApiUrl + "/api/Device/GetDeviceItem";
             
@@ -1481,7 +1513,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 } else {
                     $("#sysMonBtnList").html("")
-                    debugger
+                    
                     $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
                         $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
                             let page = "systemMonitor";

Frontend/js/forge/forgemodel.js

@@ -1106,6 +1106,7 @@ async function newLight(lightPosition) {
     //聚光燈
     var spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);
     spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
+    console.log(lightPosition.x, lightPosition.y, lightPosition.z)
     spotLight.castShadow = false;
     spotLight.visible = true;
     spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z-20);

Frontend/js/n4js/bajatest.js

@@ -21,84 +21,33 @@ var endPageLoading;  // 開始 loading
 window.tolSubList = [];
 
 var user_name = "";
-function subscriptionDevices() {
+
-    // 用BQL的方式去訂閱
+class subscriptionDevices {
-    this.setSubscribeDevicesByBql = function (tempOrdPath) {
+    constructor() {
-        ordPath = tempOrdPath;
+        this.ordPath = {};
-        BajaSubscribeDevicesByBql();
+        this.changeCallback = null;
+        this.changeEndCallback = null;
+    }
+
+    setSubscribeDevicesByBql = function (tempOrdPath) {
+        this.ordPath = tempOrdPath;
+        this.BajaSubscribeDevicesByBql();
     };
-    // BQL去訂閱回傳的Function
+
-    this.setSubscribeDevicesCallBack = function (callBackFunc) {
+    setSubscribeDevicesCallBack = function (callBackFunc) {
         if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_device_callback_func = callBackFunc;
+            this.changeCallback = callBackFunc;
         }
     }
     // BQL訂閱結束回傳的Function
-    this.setSubscribeDeviceEndCallBack = function (callBackFunc) {
+    setSubscribeDeviceEndCallBack = function (callBackFunc) {
         if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_end_device_callback_func = callBackFunc;
+            this.changeEndCallback = callBackFunc;
         }
     }
 
-}
+    BajaSubscribeDevicesByBql = function () {
-
+        let _this = this;
-function subscriptionAlarms() {
-    // 用BQL的方式去訂閱
-    this.setSubscribeAlarmsByBql = function (tempOrdPath) {
-        BajaSubscribeAlarmsByBql(tempOrdPath);
-    };
-    // BQL去訂閱回傳的Function
-    this.setSubscribeAlarmsCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_alarm_callback_func = callBackFunc;
-        }
-    }
-    // BQL訂閱結束回傳的Function
-    this.setSubscribeAlarmEndCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_end_alarm_callback_func = callBackFunc;
-        }
-    }
-
-}
-
-function subscriptionElectricmeter() {
-    // 用BQL的方式去訂閱
-    this.setSubscribeElectricmeterByBql = function (tempOrdPath) {
-        BajaSubscribeElectricmeterByBql(tempOrdPath);
-    };
-    // BQL去訂閱回傳的Function
-    this.setSubscribeElectricmeterCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_electricmeter_callback_func = callBackFunc;
-        }
-    }
-    // BQL訂閱結束回傳的Function
-    this.setSubscribeElectricmeterEndCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_end_electricmeter_callback_func = callBackFunc;
-        }
-    }
-}
-
-function MyBaja() {
-    // 取得使用者帳號
-    this.setMyUserAccount = function (callBackFunc = null) {
-        require(['baja!'], function (baja) {
-            console.log("baja", baja)
-            user_name = baja.getUserName();
-            callBackFunc ? callBackFunc(user_name) : "";
-        });
-
-    };
-}
-
-/**
- * 使用者透過BQL指定路徑去訂閱設備點位
- */
-function BajaSubscribeDevicesByBql() {
-
-
         require(['baja!'], function (baja) {
             console.log("進入Function 準備執行BQL訂閱");
             startPageLoading ? startPageLoading() : ""
@@ -135,8 +84,8 @@ function BajaSubscribeDevicesByBql() {
                         "value": key
                     }
 
-                if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                    baja_subscribe_device_callback_func(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                        _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
                     }
                 }
             }, function (err) {
@@ -147,8 +96,8 @@ function BajaSubscribeDevicesByBql() {
             // var building_tag = "H";
             // var system_tag = "M10";
             // baja.Ord.make(`ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/${building_tag}/${system_tag}|bql:select name, displayname, slotPath, out.value, out from control:ControlPoint`)
-        console.log(`local:|foxs:|station:|slot:/${ordPath.area_tag}/${ordPath.building_tag}/${ordPath.system_tag}/${ordPath.name_tag}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`);
+            console.log(`local:|foxs:|station:|slot:/TPE/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`);
-        baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath.area_tag}/${ordPath.building_tag}/${ordPath.system_tag}/${ordPath.name_tag}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`)
+            baja.Ord.make(`local:|foxs:|station:|slot:/TPE/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`)
                 .get(
                     function (table) {
                         var tableStart, tableFinish;
@@ -165,7 +114,7 @@ function BajaSubscribeDevicesByBql() {
                                 totalTargetDevice = [];
                                 tableStart = new Date(Date.now());
                                 $("#table-start-timestamp").html(tableStart.toISOString());
-                            render_start = new Date(Date.now());
+                                
 
                             },
                             each: function (item, index) {
@@ -209,8 +158,8 @@ function BajaSubscribeDevicesByBql() {
                                 }
                                 totalTargetDevice.push(modify_target_device);
                                 //取得component當下就更新設備點位
-                            if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+                                if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                baja_subscribe_device_callback_func(modify_target_device);
+                                    _this.changeCallback(modify_target_device);
                                 }
 
 
@@ -269,8 +218,8 @@ function BajaSubscribeDevicesByBql() {
                                 // $("#table-finish-timestamp").html(tableFinish.toISOString());
                                 // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
                                 //取得component當下就更新設備點位
-                            if (baja_subscribe_end_device_callback_func != undefined && baja_subscribe_end_device_callback_func != null) {
+                                if (_this.changeEndCallback != undefined && _this.changeEndCallback != null) {
-                                baja_subscribe_end_device_callback_func(totalTargetDevice);
+                                    _this.changeEndCallback(totalTargetDevice);
                                 }
                                 endPageLoading ? endPageLoading() : ""
                                 console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
@@ -280,8 +229,270 @@ function BajaSubscribeDevicesByBql() {
                         });
                     });
         })
+    }
 }
 
+//function subscriptionDevices() {
+//    // 用BQL的方式去訂閱
+//    this.setSubscribeDevicesByBql = function (tempOrdPath) {
+//        ordPath = tempOrdPath;
+//        BajaSubscribeDevicesByBql();
+//    };
+//    // BQL去訂閱回傳的Function
+//    this.setSubscribeDevicesCallBack = function (callBackFunc) {
+//        if (callBackFunc != undefined && callBackFunc != null) {
+//            baja_subscribe_device_callback_func = callBackFunc;
+//        }
+//    }
+//    // BQL訂閱結束回傳的Function
+//    this.setSubscribeDeviceEndCallBack = function (callBackFunc) {
+//        if (callBackFunc != undefined && callBackFunc != null) {
+//            baja_subscribe_end_device_callback_func = callBackFunc;
+//        }
+//    }
+
+//}
+
+function subscriptionAlarms() {
+    // 用BQL的方式去訂閱
+    this.setSubscribeAlarmsByBql = function (tempOrdPath) {
+        BajaSubscribeAlarmsByBql(tempOrdPath);
+    };
+    // BQL去訂閱回傳的Function
+    this.setSubscribeAlarmsCallBack = function (callBackFunc) {
+        if (callBackFunc != undefined && callBackFunc != null) {
+            baja_subscribe_alarm_callback_func = callBackFunc;
+        }
+    }
+    // BQL訂閱結束回傳的Function
+    this.setSubscribeAlarmEndCallBack = function (callBackFunc) {
+        if (callBackFunc != undefined && callBackFunc != null) {
+            baja_subscribe_end_alarm_callback_func = callBackFunc;
+        }
+    }
+
+}
+
+function subscriptionElectricmeter() {
+    // 用BQL的方式去訂閱
+    this.setSubscribeElectricmeterByBql = function (tempOrdPath) {
+        BajaSubscribeElectricmeterByBql(tempOrdPath);
+    };
+    // BQL去訂閱回傳的Function
+    this.setSubscribeElectricmeterCallBack = function (callBackFunc) {
+        if (callBackFunc != undefined && callBackFunc != null) {
+            baja_subscribe_electricmeter_callback_func = callBackFunc;
+        }
+    }
+    // BQL訂閱結束回傳的Function
+    this.setSubscribeElectricmeterEndCallBack = function (callBackFunc) {
+        if (callBackFunc != undefined && callBackFunc != null) {
+            baja_subscribe_end_electricmeter_callback_func = callBackFunc;
+        }
+    }
+}
+
+function MyBaja() {
+    // 取得使用者帳號
+    this.setMyUserAccount = function (callBackFunc = null) {
+        require(['baja!'], function (baja) {
+            console.log("baja", baja)
+            user_name = baja.getUserName();
+            callBackFunc ? callBackFunc(user_name) : "";
+        });
+
+    };
+}
+
+/**
+ * 使用者透過BQL指定路徑去訂閱設備點位
+ */
+//function BajaSubscribeDevicesByBql() {
+
+
+//    require(['baja!'], function (baja) {
+//        console.log("進入Function 準備執行BQL訂閱");
+//        startPageLoading ? startPageLoading() : ""
+//        var init_start = new Date(Date.now());
+//        var sub = new baja.Subscriber();
+
+//        sub.attach('changed', function (prop) {
+//            if (prop.getName() === 'out') {
+//                var out_value = this.getOutDisplay();
+//                var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+//                var point_name = this.getDisplayName();
+
+//                //依據Facets判斷回傳的內容值為何
+//                var facets_split = this.getFacets1().$cEncStr.split('|');
+//                var facets_arr = [];
+//                facets_split.forEach(function (item, index) {
+//                    facets_arr.push(item.split('=s:'));
+//                });
+
+//                var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+//                var point_out_split = this.getOutDisplay().split(' ');
+
+//                let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+//                if (key == undefined) {
+//                    key = point_out_split[0];
+//                }
+
+//                var modify_target_device = {
+//                    "device_number": target_device_number ? target_device_number : null,
+//                    "device_number_full": this.$parent.getSlotPath().$names.join("_"),
+//                    "point_name": point_name ? point_name : null,
+//                    "value": key
+//                }
+
+//                if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+//                    baja_subscribe_device_callback_func(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+//                }
+//            }
+//        }, function (err) {
+//            console.log(err)
+//        });
+
+//        //使用bql語法
+//        // var building_tag = "H";
+//        // var system_tag = "M10";
+//        // baja.Ord.make(`ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/${building_tag}/${system_tag}|bql:select name, displayname, slotPath, out.value, out from control:ControlPoint`)
+//        console.log(`local:|foxs:|station:|slot:/TPE/${ordPath.building_tag}/${ordPath.system_tag}/${ordPath.name_tag}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`);
+//        baja.Ord.make(`local:|foxs:|station:|slot:/TPE/${ordPath.building_tag}/${ordPath.system_tag}/${ordPath.name_tag}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`)
+//            .get(
+//                function (table) {
+//                    var tableStart, tableFinish;
+//                    var subStart, subFinish;
+//                    var component_index = 0;
+//                    var total_component_index = 0;
+//                    var totalTargetDevice = [];
+//                    var readBqlFinish = new Date(Date.now());
+//                    // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
+//                    // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+//                    console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+//                    table.cursor({
+//                        before: function () {
+//                            totalTargetDevice = [];
+//                            tableStart = new Date(Date.now());
+//                            $("#table-start-timestamp").html(tableStart.toISOString());
+//                            render_start = new Date(Date.now());
+
+//                        },
+//                        each: function (item, index) {
+//                            if (index < 1) {
+//                                subStart = new Date(Date.now());
+//                                $("#sub-start").html(subStart.toISOString());
+//                            }
+//                            $("#sub-number").html(index + 1);
+//                            total_component_index = index;
+
+
+
+//                            var target_device_number_split = this.getDisplay("slotPath").split('/');
+//                            var target_device_number = target_device_number_split[8];
+//                            //console.log(target_device_number);
+//                            var point_name = this.getDisplay("name");
+//                            var facets = this.getDisplay("facets");
+
+//                            //依據Facets判斷回傳的內容值為何
+//                            var facets_split = facets.split(',');
+//                            var facets_arr = [];
+//                            facets_split.forEach(function (item, index) {
+//                                facets_arr.push(item.split('='));
+//                            });
+
+//                            facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+//                            var point_out_split = this.getDisplay("out").split(' ');
+
+//                            let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+//                            if (key == undefined) {
+//                                key = point_out_split[0];
+//                            }
+
+//                            var modify_target_device = {
+//                                "device_number": target_device_number ? target_device_number : null,
+//                                "device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
+//                                "point_name": point_name ? point_name : null,
+//                                "value": key
+//                            }
+//                            totalTargetDevice.push(modify_target_device);
+//                            //取得component當下就更新設備點位
+//                            if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+//                                baja_subscribe_device_callback_func(modify_target_device);
+//                            }
+
+
+//                            baja.Ord.make("local:|foxs:|station:|" + this.getDisplay("slotPath"))
+//                                .get()
+//                                .then(function (component) {
+//                                    component_index++;
+//                                    var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+//                                    var point_name = component.getDisplayName();
+
+//                                    // //依據Facets判斷回傳的內容值為何
+//                                    // var facets_split = component.getFacets1().$cEncStr.split('|');
+//                                    // var facets_arr = [];
+//                                    // facets_split.forEach(function (item, index) {
+//                                    //   facets_arr.push(item.split('=s:'));
+//                                    // });
+
+//                                    // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+//                                    // var point_out_split = component.getOutDisplay().split(' ');
+
+//                                    // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+//                                    // if (key == undefined) {
+//                                    //   key = point_out_split[0];
+//                                    // }
+
+//                                    // var modify_target_device = {
+//                                    //   "device_number": target_device_number ? target_device_number : null,
+//                                    //   "point_name": point_name ? point_name : null,
+//                                    //   "value": key
+//                                    // }
+
+//                                    // //取得component當下就更新設備點位
+//                                    // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+//                                    //   if (component_index == total_component_index) {
+//                                    //     baja_subscribe_device_callback_func(modify_target_device, true);
+//                                    //   }
+//                                    //   else {
+//                                    //     baja_subscribe_device_callback_func(modify_target_device);
+//                                    //   }
+//                                    // }
+
+//                                    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");
+//                                    // console.log("訂閱完成時間", (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");
+//                            //取得component當下就更新設備點位
+//                            if (baja_subscribe_end_device_callback_func != undefined && baja_subscribe_end_device_callback_func != null) {
+//                                baja_subscribe_end_device_callback_func(totalTargetDevice);
+//                            }
+//                            endPageLoading ? endPageLoading() : ""
+//                            console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+//                        },
+//                        limit: -1,
+//                        offset: 0
+//                    });
+//                });
+//    })
+//}
+
 /**
  * 使用者透過BQL指定路徑去訂閱Alarm
  */
@@ -296,7 +507,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
                 var sourceState = (this.$map.$map.in10.$val.$map.$map.value.$display) == 'true' ? "Offnormal" : "Normal";
 
                 var modify_target_device = {
-                    "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
+                    "system": "TPE_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
                     "sourceState": sourceState ? sourceState : null
                 }
 
@@ -307,8 +518,8 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
         });
 
         //使用bql語法
-        console.log(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
+        console.log(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%TPE_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
-        baja.Ord.make(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
+        baja.Ord.make(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%TPE_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
             .get(
                 function (table) {
                     var tableStart, tableFinish;
@@ -338,7 +549,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
                             var normalTime = this.getDisplay("normalTime");
 
                             var modify_target_device = {
-                                "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
+                                "system": "TPE_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
                                 "sourceState": sourceState ? sourceState : null
                             }
                             totalTargetDevice.push(modify_target_device);