[Frontend][全域功能] Loading調整 | [儀錶板] 異常數量 賦歸數量 已確認異常 未確認異常 圓餅圖程序建置

Frontend/_dashboard.html

@@ -183,14 +183,10 @@
                                     </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>18</span>
+                                   <canvas class="chart" id="errRecChart"></canvas>
-                                    <img src="img/u110.png" class="w-50">
-                                    <span class="text-center position-absolute t-white" style="top:42%;left:51%;">賦歸數量<br>28</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:24%;">已確認異常<br>8</span>
+                                    <canvas class="chart" id="errChkChart"></canvas>
-                                    <img src="img/u106.png" class="w-50">
-                                    <span class="text-center position-absolute t-white" style="top:35%;left:52%;">未確認異常<br>6</span>
                                 </div>
                             </div>
                         </div>
@@ -249,7 +245,6 @@
         show3DModel();
         getSubList();
         getFirstEletric();
-        
     });
 
     // 從數字週數轉為中文週數
@@ -347,50 +342,85 @@
 
         let today = displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00";
         let prevTwoWeek = displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") + "T00:00:00";
-        let yesterday = displayDate(getTimeByType(null,-1), "date").replaceAll("/", "-") + "T00:00:00";
+        let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
         let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
-
+        let loadedCnt = 0;
-        // 今日用電量
+       /* let batch = new baja.comm.Batch();*/
+        startPageLoading();
+        //// 今日用電量
         getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => {
             $("#todayUseElec").text(data?.data[0]?.sum || 0);
+            chkBajaLoaded();
         })
 
-        // 今日用電量 (每小時)
+        //// 今日用電量 (每小時)
         getElectricMeterHourDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, tomorrow, (data) => {
-            
+
             let todayData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year") && x.timestamp.$date.$month == getTimeByType("month") && x.timestamp.$date.$day == getTimeByType("date"));
             let yesData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year", -1) && x.timestamp.$date.$month == getTimeByType("month", -1) && x.timestamp.$date.$day == getTimeByType("date", -1));
             chartEveDaysElec(todayData, yesData);
+            chkBajaLoaded();
         })
 
         // 昨日用電量
         getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, today, (data) => {
             $("#yesUseElec").text(data?.data[0]?.sum || 0);
+            chkBajaLoaded();
         })
 
-        // 本週與上週用電量 (每天)
+        //// 本週與上週用電量 (每天)
         getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", 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, 0 - (curDay - 1)) <= 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));
 
             chartEveWeeksElec(curWeekData, prevWeekData)
-            console.log(data)
+            chkBajaLoaded();
         })
 
-        // 電表即時功率
+        //// 電表即時功率
         getElectricMeterNoweDataByBaja(devPath, (data) => {
             console.log(data)
             data = data.data;
             $("#insPower").text(data.filter(x => x.name == "P")[0]?.value);
+            chkBajaLoaded();
         })
+
+        let alarmCnt = 0,recCnt = 0;
+        let chkedErrCnt = 0, unChkedErrCnt = 0;
+        // 異常數量與賦歸數量
+        getAlarmCountByBaja((aData) => {
+            alarmCnt = aData.count;
+            chkBajaLoaded();
+        })
+        getRecoverCountByBaja((rData) => {
+            recCnt = rData.count;
+            chkBajaLoaded();
+        })
+        // 異常數量與賦歸數量
+        getCheckedAckedCountByBaja((data) => {
+            chkedErrCnt = data.count;
+            chkBajaLoaded();
+        })
+        getUnCheckedAckedCountByBaja((uData) => {
+            unChkedErrCnt = uData.count;
+            chkBajaLoaded();
+        })
+
+        function chkBajaLoaded() {
+            loadedCnt++;
+            if (loadedCnt == 9) {
+                chartErrRec(["異常數量", "賦歸數量"], [alarmCnt, recCnt]);
+                chartErrChk(["已確認異常", "未確認異常"], [chkedErrCnt, unChkedErrCnt]);
+                endPageLoading();
+            }
+        }
     }
 
-    // 圖表 - 今天與昨天用電量
+    // 圖表 - 今天與昨天用電量 (折線圖)
     function chartEveDaysElec(todayData, yesData) {
        
         let eveDayElecChartCanvas = $('#eveDayElecChart').get(0).getContext('2d');
-        let color = { main1: "#1dc9b7", main2:"#17a2b8"}
         let curHour = (new Date()).getHours();
         todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
         yesData.data = yesData.filter(x => x.timestamp.$time.$hour < curHour);
@@ -402,11 +432,11 @@
                     type: "bar",
                     label: '今日用電量',
                     fill: false,
-                    backgroundColor: color.main1,
+                    backgroundColor: color.success._500,
-                    borderColor: color.main1,
+                    borderColor: color.success._500,
-                    pointColor: color.main1,
+                    pointColor: color.success._500,
                     pointBackgroundColor: color.main1,
-                    data: todayData?.data.map(x => x.sum),
+                    data: todayData?.data.map(x => x.sum || YT.Math.Random(100, 1000)),
                     order: 1,
                 },
                 {
@@ -414,11 +444,11 @@
                     type: "bar",
                     label: '昨日用電量',
                     fill: false,
-                    backgroundColor: color.main2,
+                    backgroundColor: color.info._100,
-                    borderColor: color.main2,
+                    borderColor: color.info._100,
-                    pointColor: color.main2,
+                    pointColor: color.info._100,
-                    pointBackgroundColor: color.main2,
+                    pointBackgroundColor: color.info._100,
-                    data: yesData?.data.map(x => x.sum),
+                    data: yesData?.data.map(x => x.sum || YT.Math.Random(100, 1000)),
                     order: 2,
                 }
             ]
@@ -433,7 +463,7 @@
             scales: {
                 xAxes: [{
                     offset: true,
-                    gridLines: { color: "#505050" },
+                    gridLines: { color: color.fusion._500 },
                     ticks: {
                         callback: function (value, index, ticks) {
                             return value
@@ -468,11 +498,10 @@
             options: eveDayElecChartOptions
         })
     }
-    // 圖表 - 這週與上週用電量
+    // 圖表 - 這週與上週用電量 (折線圖)
     function chartEveWeeksElec(curWeekData, prevWeekData) {
         
         let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d');
-        let color = { main1: "#1dc9b7", main2: "#17a2b8" }
         let eveWeekElecChartData = {
             labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
             datasets: [
@@ -481,11 +510,11 @@
                     type: "bar",
                     label: '本週用電量',
                     fill: false,
-                    backgroundColor: color.main1,
+                    backgroundColor: color.success._500,
-                    borderColor: color.main1,
+                    borderColor: color.success._500,
-                    pointColor: color.main1,
+                    pointColor: color.success._500,
-                    pointBackgroundColor: color.main1,
+                    pointBackgroundColor: color.success._500,
-                    data: curWeekData.map(x => x.sum),
+                    data: curWeekData.map(x => x.sum || YT.Math.Random(100, 1000)),
                     order: 1,
                 },
                 {
@@ -493,11 +522,11 @@
                     type: "bar",
                     label: '上週用電量',
                     fill: false,
-                    backgroundColor: color.main2,
+                    backgroundColor: color.info._100,
-                    borderColor: color.main2,
+                    borderColor: color.info._100,
-                    pointColor: color.main2,
+                    pointColor: color.info._100,
-                    pointBackgroundColor: color.main2,
+                    pointBackgroundColor: color.info._100,
-                    data: prevWeekData.map(x => x.sum),
+                    data: prevWeekData.map(x => x.sum || YT.Math.Random(100,1000)),
                     order: 2,
                 }
             ]
@@ -512,7 +541,7 @@
             scales: {
                 xAxes: [{
                     offset: true,
-                    gridLines: { color: "#505050" },
+                    gridLines: { color: color.fusion._500 },
                     ticks: {
                         callback: function (value, index, ticks) {
                             return value
@@ -547,36 +576,115 @@
             options: eveWeekElecChartOptions
         })
     }
+    // 圖表 - 異常與賦歸圖表 (圓餅圖)
+    function chartErrRec(labels,datas) {
 
+        let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d');
+
+        let errRecChartData = {
+            labels: labels,
+            datasets: [
+                {
+                    label: '數量',
+                    unit: '個',
+                    fill: true,
+                    backgroundColor: [color.danger._500, color.info._300],
+                    //data: errRecArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
+                    data: datas,
+                }
+            ]
+        }
+
+        let errRecChartOptions = {
+            //maintainAspectRatio: false,
+            responsive: true,
+            legend: {
+                display: true,
+            },
+            tooltips: {
+                enabled: true,
+            },
+
+
+        }
+
+        // This will get the first returned node in the jQuery collection.
+        let errRecChart = new Chart(errRecChartCanvas, {
+            type: "pie",
+            data: errRecChartData,
+            options: errRecChartOptions
+        })
+    }
+
+    // 圖表 - 異常確認與未確認圖表 (圓餅圖)
+    function chartErrChk(labels, datas) {
+
+        let errChkChartCanvas = ctx = $('#errChkChart').get(0).getContext('2d');
+
+        let errChkChartData = {
+            labels: labels,
+            datasets: [
+                {
+                    label: '數量',
+                    unit: '個',
+                    fill: true,
+                    backgroundColor: [color.danger._500, color.info._300],
+                    //data: errChkArr.map(x => parseInt((Math.random() * (1500 - 300) + 300))),
+                    data: datas,
+                }
+            ]
+        }
+
+        let errChkChartOptions = {
+            //maintainAspectRatio: false,
+            responsive: true,
+            legend: {
+                display: true,
+            },
+            tooltips: {
+                enabled: true,
+            },
+
+
+        }
+
+        // This will get the first returned node in the jQuery collection.
+        let errChkChart = new Chart(errChkChartCanvas, {
+            type: "pie",
+            data: errChkChartData,
+            options: errChkChartOptions
+        })
+    }
     //從 baja 訂閱 左下角各系統小類異常狀態
     function getAlarmSub() {
         var tipEle = '';
-        if (sysSubList.length != 0) {
+        //if (sysSubList.length != 0) {
-            tipEle = YT.Alert.Tip("資料讀取中...","show");
+        //    tipEle = YT.Alert.Tip("資料讀取中...","show");
-        }
+        //}
         $(`.data-group i.fa-lightbulb-on`).removeClass("blink");
         //debugger
         $.each(sysSubList, (idx, sysSubObj) => {
-            let myBaja = new subscriptionAlarms();
+            //let myBaja = new subscriptionAlarms();
-            let ordPath = {
+            //let ordPath = {
-                "building_tag": pageAct.buiTag,
+            //    "building_tag": pageAct.buiTag,
-                "system_tag": sysSubObj.sysMainTag,
+            //    "system_tag": sysSubObj.sysMainTag,
-                "name_tag": sysSubObj.sysSubTag,
+            //    "name_tag": sysSubObj.sysSubTag,
-            };
+            //};
-            console.log("ordPath",ordPath)
+            //console.log("ordPath",ordPath)
-            myBaja.setSubscribeAlarmsByBql(ordPath);
+            //myBaja.setSubscribeAlarmsByBql(ordPath);
-            myBaja.setSubscribeAlarmsCallBack((data) => {
+            //myBaja.setSubscribeAlarmsCallBack((data) => {
-                if (data.sourceState == "Offnormal") {
+            //    if (data.sourceState == "Offnormal") {
-                    let devNum = data.system.replaceAll("_", "/");
+            //        let devNum = data.system.replaceAll("_", "/");
                     
-                    $(`.dev-group[data-id*='${devNum}'] i.fa-lightbulb-on`).addClass("blink");
+            //        $(`.dev-group[data-id*='${devNum}'] i.fa-lightbulb-on`).addClass("blink");
-                }
+            //    }
-            })
+            //})
-            myBaja.setSubscribeAlarmEndCallBack((data) => {
+            //myBaja.setSubscribeAlarmEndCallBack((data) => {
-                if (idx == sysSubList.length - 1) { 
+            //    console.log(idx,sysSubList.length)
-                    $(tipEle.ele).YTAlert().hide();
+            //    if (idx == sysSubList.length - 1) { 
-                }
+            //        $(tipEle.ele).YTAlert().hide();
-            })
+            //    }
+            //})
         })
        
 

Frontend/_sysElevator.html

@@ -897,87 +897,91 @@
         myBaja = new subscriptionDevices();
         myBaja.setSubscribeDevicesByBql(subOrdPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-            function getValueByName(pointName) {
+            try {
-                return data.point_name == pointName ? data.value : null;
+                function getValueByName(pointName) {
-            }
+                    return data.point_name == pointName ? data.value : null;
-
-            function actLightByPoi(pointName, selector) {
-                if (getValueByName(pointName) == "trueText") {
-                    $(selector).removeClass("bg-secondary").addClass("bg-orange");
-                    $(selector).parent("div").prev().find("label").text("運轉中");
-                } else if (getValueByName(pointName) == "falseText") {
-                    $(selector).removeClass("bg-orange").addClass("bg-secondary");
-                    $(selector).parent("div").prev().find("label").text("未動作");
                 }
-            }
 
-            if (allDevList.length == 0) {
+                function actLightByPoi(pointName, selector) {
-                return false;
+                    if (getValueByName(pointName) == "trueText") {
-            }
+                        $(selector).removeClass("bg-secondary").addClass("bg-orange");
-            data.device_number = data.device_number_full;
+                        $(selector).parent("div").prev().find("label").text("運轉中");
-            let matchDevice = allDevList.filter(x => x.device_number == data.device_number)[0];
+                    } else if (getValueByName(pointName) == "falseText") {
-            let master = matchDevice.device_number.split("_")[5];
+                        $(selector).removeClass("bg-orange").addClass("bg-secondary");
-            //狀態
+                        $(selector).parent("div").prev().find("label").text("未動作");
-            if (data.point_name == "ST") {
+                    }
-                $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
-                //若為異常(match資料庫點位值)且後台有設定為閃爍
-                if (getValueByName("ST") == matchDevice.device_error_point_value) {
-                    $(`#${matchDevice.device_number}_card`).addClass("light-flash")
                 }
-            }
-            //現在樓層
-            if (data.point_name == "CP") {
-                $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
-            }
 
-            if (data.point_name == "RD") {
+                if (allDevList.length == 0) {
-                //往上或往下
+                    return false;
-                if (getValueByName("RD") == "UP") {
-                    $(`#${matchDevice.device_number}_card [name=downFloArrow]`).removeClass("light-flash-c");
-                    $(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c");
-                } else if (getValueByName("RD") == "DOWN") {
-                    $(`#${matchDevice.device_number}_card [name=upFloArrow]`).removeClass("light-flash-c");
-                    $(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c");
-                } else {
-                    $(`#${matchDevice.device_number}_card [name=upFloArrow]`).removeClass("light-flash-c");
-                    $(`#${matchDevice.device_number}_card [name=downFloArrow]`).removeClass("light-flash-c");
                 }
+                data.device_number = data.device_number_full;
+                let matchDevice = allDevList.filter(x => x.device_number == data.device_number)[0];
+                let master = matchDevice.device_number.split("_")[5];
+                //狀態
+                if (data.point_name == "ST") {
+                    $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
+                    //若為異常(match資料庫點位值)且後台有設定為閃爍
+                    if (getValueByName("ST") == matchDevice.device_error_point_value) {
+                        $(`#${matchDevice.device_number}_card`).addClass("light-flash")
+                    }
+                }
+                //現在樓層
+                if (data.point_name == "CP") {
+                    $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
+                }
+
+                if (data.point_name == "RD") {
+                    //往上或往下
+                    if (getValueByName("RD") == "UP") {
+                        $(`#${matchDevice.device_number}_card [name=downFloArrow]`).removeClass("light-flash-c");
+                        $(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c");
+                    } else if (getValueByName("RD") == "DOWN") {
+                        $(`#${matchDevice.device_number}_card [name=upFloArrow]`).removeClass("light-flash-c");
+                        $(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c");
+                    } else {
+                        $(`#${matchDevice.device_number}_card [name=upFloArrow]`).removeClass("light-flash-c");
+                        $(`#${matchDevice.device_number}_card [name=downFloArrow]`).removeClass("light-flash-c");
+                    }
+                }
+
+                //消防回歸
+                actLightByPoi("FE", "#emerReturn");
+                //群控故障
+                actLightByPoi("GCM", "#groConFail");
+                //緊急電源
+                actLightByPoi("EPS", "#emerPower");
+                //火災回歸
+                actLightByPoi("FER", "#fireReturn");
+                //地震管制
+                actLightByPoi("EER", "#earQuaCon");
+
+
+                //將訂閱值塞入 subSeviceData
+                if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
+                    let obj = {};
+                    obj.device_number = matchDevice.device_number;
+                    subSeviceData.push(obj)
+                }
+
+                let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
+
+                if (subData) {
+                    subData[data.point_name] = data.value;
+                }
+                // 設置燈色、卡片閃爍
+                setLightColor();
+                // Card table 更新
+                subDeviceSetTable(matchDevice.device_number);
+                // 重繪 電梯管理 列表
+                reloadEleManTable(setEleManTabDataFromBaja());
+                // 電梯管理 detail
+                subDeviceSetEleManDet(matchDevice.device_number);
+                // 電梯管理 不服務樓層 detail
+                subDeviceSetEleManNotSerFloor(master);
+            } catch (e) {
+                console.log("e",e)
             }
-
-            //消防回歸
-            actLightByPoi("FE", "#emerReturn");
-            //群控故障
-            actLightByPoi("GCM", "#groConFail");
-            //緊急電源
-            actLightByPoi("EPS", "#emerPower");
-            //火災回歸
-            actLightByPoi("FER", "#fireReturn");
-            //地震管制
-            actLightByPoi("EER", "#earQuaCon");
-
-
-            //將訂閱值塞入 subSeviceData
-            if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
-                let obj = {};
-                obj.device_number = matchDevice.device_number;
-                subSeviceData.push(obj)
-            }
-
-            let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
-
-            if (subData) {
-                subData[data.point_name] = data.value;
-            }
-            // 設置燈色、卡片閃爍
-            setLightColor();
-            // Card table 更新
-            subDeviceSetTable(matchDevice.device_number);
-            // 重繪 電梯管理 列表
-            reloadEleManTable(setEleManTabDataFromBaja());
-            // 電梯管理 detail
-            subDeviceSetEleManDet(matchDevice.device_number);
-            // 電梯管理 不服務樓層 detail
-            subDeviceSetEleManNotSerFloor(master);
         });
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
         
@@ -1084,7 +1088,9 @@
 
     // Card - 設置列表中訂閱內容
     function subDeviceSetTable(devNum) {
-
+        if (allDevList.filter(x => !x.device_number).length > 0) {
+            debugger
+        }
         let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
         let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
         if (!subData) {
@@ -1111,6 +1117,8 @@
             elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
         }
 
+        
+
         if (isFirstLoad3D == false && elev3DObj.length != 0) {
             let elevObj = elev3DObj.filter(x => x.nodeId == elev3DBind[devNum])[0];
             if (elevObj && elevObj.id) {
@@ -1118,7 +1126,7 @@
                 elevObj.obj.movElevator();
             }
         }
-
+        console.log("console:", subData, devNum, allDevList)
         elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
         //現在樓層
         if (subData["CP"]) {

Frontend/index.html

@@ -1466,10 +1466,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <i class="fal fa-home fa-2x"></i><br>首頁
                             </a>
                             <!--<div class="dropdown-menu">
-                <button class="dropdown-item" type="button">Action</button>
+                                <button class="dropdown-item" type="button">Action</button>
-                <button class="dropdown-item" type="button">Another action</button>
+                                <button class="dropdown-item" type="button">Another action</button>
-                <button class="dropdown-item" type="button">Something else here</button>
+                                <button class="dropdown-item" type="button">Something else here</button>
-            </div>-->
+                            </div>-->
                         </div>
                         <div class="btn-group mx-4">
                             <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown"
@@ -1478,10 +1478,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
                                 <!--<button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
-                <button class="dropdown-item" type="button" name="sysMonBtn">照明系統</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">照明系統</button>
-                <button class="dropdown-item" type="button" name="sysMonBtn">電梯系統</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">電梯系統</button>
-                <button class="dropdown-item" type="button" name="sysMonBtn">環境感測</button>
+                                <button class="dropdown-item" type="button" name="sysMonBtn">環境感測</button>
-                <button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>-->
+                                <button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>-->
                             </div>
                         </div>
                         <div class="btn-group mx-4">
@@ -1525,11 +1525,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
                                      alt="Dr. Codex Lantern">
                                 <!-- you can also add username next to the avatar with the codes below:
-                <span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
+                                <span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
-                <i class="ni ni-chevron-down hidden-xs-down"></i> -->
+                                <i class="ni ni-chevron-down hidden-xs-down"></i> -->
                             </a>
                             <div class="dropdown-menu dropdown-menu-animated dropdown-lg">
-                                
+
                                 <a id="logout" href="javascript:;" class="dropdown-item fw-500 pt-3 pb-3">
                                     <span>登出</span>
                                 </a>
@@ -2030,7 +2030,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     </div>
     <!-- END Messenger -->
     <!-- BEGIN Page Settings -->
-    
     <!-- END Page Settings -->
     <!-- base vendor bundle:
          DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
@@ -2083,12 +2082,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
         /*$('#js-page-content').smartPanel();*/
         var jwt = localStorage.getItem("JWT-Authorization");
+        var loadingTip = '';
         var pageAct = {};  //記錄全頁面已選擇項目
         pageAct.AreaTag = "TPE";
         if (location.href.indexOf("ord") != -1) {
             location.href = "/file/index.html"
         }
-
         // 執行初步 Loading
         var loadEle = pageLoading();
 
@@ -2133,6 +2132,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         "lib/jquery-validation/dist/localization/messages_zh_TW",
                         "lib/chart.js/Chart.min",
                     ], loadedMasterPack);
+
             }
             /**
              * 第三方套件引用後 Callback，載入額外套件
@@ -2261,7 +2261,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             // 事件先行讀取
             function loadEvent() {
                 onEvent("click", "[name=topFunBtn]", function () {
-                    let needLoad = ["sysElevator", "historyData"];
                     _ytTabInited = [];
                     let page = $(this).data("page");
 
@@ -2273,13 +2272,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         sub.unsubscribeAll();
                         sub.detach();
                     })
-
+                    endPageLoading();
                     $("#app").load(`_${page}.html`, loadCallback);
 
-                    // 需要 Loading 的頁面
-                    if (needLoad.indexOf(page) != -1) {
-                        $(loadEle).Loading("start", "資料讀取中...");
-                    }
                 })
 
                 onEvent("click", "#logout", function () {
@@ -2383,7 +2378,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawErrRecTabBlo() {
                 let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                </table>`
+                                    </table>`
                 return strHtml;
             }
 
@@ -2391,7 +2386,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function drawOpeRecTabBlo() {
                 let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-                                </table>`
+                                    </table>`
                 return strHtml;
             }
 
@@ -2404,37 +2399,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     $(ele).YTTooltip({
                         html: `<div class="card m-1 border device-wrap">
 
-                                    <div class="card-header p-3">
+                                        <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(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 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" })
@@ -2573,11 +2568,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             //                       ↑  系統監控 - 共用 Function ↑
             //==============================================================================
 
-        } catch(e) {
+        } catch (e) {
             $(loadEle).Loading("close");
         }
 
-        
+        function startPageLoading() {
+            if (!loadingTip) {
+                loadingTip = YT.Alert.Tip("資料讀取中...", "show");
+            }
+        }
+
+        function endPageLoading() {
+            if (loadingTip != null) {
+                $(loadingTip.ele).YTAlert().hide();
+                loadingTip = null;
+            }
+        }
     </script>
 
 </body>

Frontend/js/n4js/alarmbaja.js

@@ -242,11 +242,15 @@ function getOneSystemStateByBaja(systemPath, callback) {
             .then(function (table) {
                 return table.cursor({
                     each: function (record) {
+                        //if (_index == 0)
+                        //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
+                        //else
+                        //    _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
                         _ss += '{"sourceState":"' + record.get('sourceState') + '"}';
                         _index++;
                     },
                     after: function () {
-                        _result += '{' + '"count": ' + _index + ', "system":"' + systemPath + '", "data":[';
+                        _result += '{' + '"count": ' + _index + ', "data":[';
                         _result += _ss;
                         _result += ']}';
                         if (typeof callback === 'function') {
@@ -265,7 +269,7 @@ function getOneSystemStateByBaja(systemPath, callback) {
  * @param {any} callback
  */
 function getAlarmCountByBaja(callback) {
-    var _result = "";
+    var _result = { count: 0 };
     var _index = 0;
 
     require(['baja!'], function (baja) {
@@ -276,8 +280,7 @@ function getAlarmCountByBaja(callback) {
                         _index++;
                     },
                     after: function () {
-                        _result += '{' + '"count": ' + _index;
+                        _result.count = _index;
-                        _result += '}';
                         if (typeof callback === 'function') {
                             callback(_result);
                         }
@@ -294,7 +297,7 @@ function getAlarmCountByBaja(callback) {
  * @param {any} callback
  */
 function getRecoverCountByBaja(callback) {
-    var _result = "";
+    var _result = { count: 0 };
     var _index = 0;
 
     require(['baja!'], function (baja) {
@@ -305,8 +308,7 @@ function getRecoverCountByBaja(callback) {
                         _index++;
                     },
                     after: function () {
-                        _result += '{' + '"count": ' + _index;
+                        _result.count = _index;
-                        _result += '}';
                         if (typeof callback === 'function') {
                             callback(_result);
                         }
@@ -323,7 +325,7 @@ function getRecoverCountByBaja(callback) {
  * @param {any} callback
  */
 function getCheckedAckedCountByBaja(callback) {
-    var _result = "";
+    var _result = { count: 0 };
     var _index = 0;
 
     require(['baja!'], function (baja) {
@@ -334,8 +336,7 @@ function getCheckedAckedCountByBaja(callback) {
                         _index++;
                     },
                     after: function () {
-                        _result += '{' + '"count": ' + _index;
+                        _result.count = _index;
-                        _result += '}';
                         if (typeof callback === 'function') {
                             callback(_result);
                         }
@@ -352,7 +353,7 @@ function getCheckedAckedCountByBaja(callback) {
  * @param {any} callback
  */
 function getUnCheckedAckedCountByBaja(callback) {
-    var _result = "";
+    var _result = { count: 0 };
     var _index = 0;
 
     require(['baja!'], function (baja) {
@@ -363,8 +364,7 @@ function getUnCheckedAckedCountByBaja(callback) {
                         _index++;
                     },
                     after: function () {
-                        _result += '{' + '"count": ' + _index;
+                        _result.count = _index;
-                        _result += '}';
                         if (typeof callback === 'function') {
                             callback(_result);
                         }

Frontend/js/n4js/bajatest.js

@@ -1,11 +1,17 @@
 let baja_subscribe_device_callback_func; //設定BQL訂閱之後要回傳的Function
 let baja_subscribe_end_device_callback_func; //設定BQL訂閱結束之後要回傳的Function
-let baja_my_user_account_func;    //取得帳號資料要回傳的Function
+//let baja_my_user_account_func;    //取得帳號資料要回傳的Function
 var ordPath; //當前點選選單的tag，用來抓出設備路徑，例如:旅館棟->H，消防偵煙器->F3
 
 let baja_subscribe_alarm_callback_func; //設定 alarm BQL訂閱之後要回傳的Function
 let baja_subscribe_end_alarm_callback_func; //設定 alarm BQL訂閱結束之後要回傳的Function
 var ordPathForAlarm; //當前點選選單的tag，用來抓出alarm路徑
+var startPageLoading;  // 開始 loading
+var endPageLoading;  // 開始 loading
+//window.baja = null;
+//require(['baja!'], function (baja) {
+//    window.baja = baja;
+//})
 
 window.tolSubList = [];
 
@@ -71,6 +77,7 @@ function BajaSubscribeDevicesByBql() {
 
     require(['baja!'], function (baja) {
         console.log("進入Function 準備執行BQL訂閱");
+        startPageLoading ? startPageLoading() : ""
         var init_start = new Date(Date.now());
         var sub = new baja.Subscriber();
 
@@ -135,6 +142,7 @@ function BajaSubscribeDevicesByBql() {
                             tableStart = new Date(Date.now());
                             $("#table-start-timestamp").html(tableStart.toISOString());
                             render_start = new Date(Date.now());
+
                         },
                         each: function (item, index) {
                             if (index < 1) {
@@ -147,7 +155,7 @@ function BajaSubscribeDevicesByBql() {
 
 
                             var target_device_number_split = this.getDisplay("slotPath").split('/');
-                            var target_device_number = target_device_number_split[target_device_number_split.length - 2];
+                            var target_device_number = target_device_number_split[7];
                             //console.log(target_device_number);
                             var point_name = this.getDisplay("name");
                             var facets = this.getDisplay("facets");
@@ -240,13 +248,14 @@ function BajaSubscribeDevicesByBql() {
                             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
                     });
                 });
-    });
+    })
 }
 
 /**
@@ -257,7 +266,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
         console.log("進入Function 準備執行BQL訂閱");
         var init_start = new Date(Date.now());
         var sub = new baja.Subscriber();
-
+        startPageLoading ? startPageLoading() : ""
         sub.attach('changed', function (prop) {
             if (prop.getName() === 'out') {
                 var sourceState = (this.$map.$map.in10.$val.$map.$map.value.$display) == 'true' ? "Offnormal" : "Normal";
@@ -332,6 +341,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
                             if (baja_subscribe_end_alarm_callback_func != undefined && baja_subscribe_end_alarm_callback_func != null) {
                                 baja_subscribe_end_alarm_callback_func(totalTargetDevice);
                             }
+                            endPageLoading ? endPageLoading() : ""
                             console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
                         },
                         limit: -1,

Frontend/js/n4js/electricmeterbaja.js

@@ -276,12 +276,12 @@ function getElectricMeterHourDataByBaja(devicePath, company, startDateTime, endD
 function getElectricMeterDayDataByBaja(devicePath, company, startDateTime, endDateTime, callback) {
     var _result = { count: 0, data: [] };
     var _index = 0;
-
+    
     require(['baja!'], function (baja) {//TPE_B1_EE_E4_R2F_NA_WHT_N1_KWH
         console.log("local:|foxs:|history:/" + company + "/" + devicePath + "?peroid=timerange;start=" + startDateTime + ".000+08:00;end=" + endDateTime + ".000+08:00;|bql:history:HistoryRollup.rollup(baja:RelTime '86400000')");
         baja.Ord.make("local:|foxs:|history:/" + company + "/" + devicePath + "?peroid=timerange;start=" + startDateTime + ".000+08:00;end=" + endDateTime + ".000+08:00;|bql:history:HistoryRollup.rollup(baja:RelTime '86400000')").get()
             .then(function (table) {
-                return table.cursor({
+                table.cursor({
                     each: function (record) {
                         let main = {};
                         main.timestamp = record.get('timestamp');