系統監控下拉式選單點擊至 dashboard | dashboard 的契約容量為儀表板

Frontend/_dashboard.html

@@ -170,10 +170,40 @@
     <div class="col-sm-12 col-lg-4">
       <div class="row" id="sysSubBtnList"></div>
     </div>
-    <div class="col-sm-12 col-lg-4">
-      <div class="row"></div>
+    <div class="col-sm-12 col-lg-8">
+      <div class="row h-100">
+        <div class="col-8 h-100">
+          <div id="panel-3"
+               class="panel"
+               data-panel-sortable
+               data-panel-collapsed
+               data-panel-close
+               style="height: calc(100% - 1.5rem)">
+            <div class="panel-hdr">
+              <h2>本月／上月用電比較 (kWh)</h2>
             </div>
-    <div class="col-sm-12 col-lg-4">
+            <div class="panel-container show">
+              <div class="panel-content poisition-relative">
+                <div style="width: 100%; min-height: 270px">
+                  <canvas class="chart" id="eveMonElecChart"></canvas>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-4">
+          <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
+            <div class="panel-hdr">
+              <h2>契約容量</h2>
+            </div>
+            <div class="panel-container h-100 show">
+              <div class="h-100" id="contractValueChart"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="col-sm-12 col-lg-4">
       <div class="row h-100">
         <div class="col-lg-6">
           <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
@@ -182,12 +212,16 @@
             </div>
             <div class="panel-container h-100 show">
               <div class="panel-content poisition-relative p-0 row p-0 h-100">
-                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                     style="max-height: 150px">
+                <div
+                  class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                  style="max-height: 150px"
+                >
                   <canvas class="chart" id="errRecChart"></canvas>
                 </div>
-                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                     style="max-height: 150px">
+                <div
+                  class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                  style="max-height: 150px"
+                >
                   <canvas class="chart" id="errChkChart"></canvas>
                 </div>
               </div>
@@ -201,12 +235,16 @@
             </div>
             <div class="panel-container h-100 show">
               <div class="panel-content poisition-relative row p-0 h-100 p-0">
-                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                     style="max-height: 150px">
+                <div
+                  class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                  style="max-height: 150px"
+                >
                   <canvas class="chart" id="worOrdErrChart"></canvas>
                 </div>
-                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
-                     style="max-height: 150px">
+                <div
+                  class="col-12 mb-2 position-relative row m-0 justify-content-center"
+                  style="max-height: 150px"
+                >
                   <canvas class="chart" id="worOrdFinChart"></canvas>
                 </div>
               </div>
@@ -214,7 +252,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </main>
 <script>
@@ -224,10 +262,12 @@
 
   var eveDayElecChart = null;
   var eveWeekElecChart = null;
+  var eveMonElecChart = null;
   var worOrdErrChart = null;
   var worOrdFinChart = null;
   var errRecChart = null;
   var errChkChart = null;
+  var contractValueChart = null;
   var loadedCnt = 0;
   var chartDataCnt = {
     alarmCnt: 0,
@@ -260,10 +300,10 @@
           (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
         )[0];
         strHtml = `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group">
-                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
+                            <button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center disabled" disabled>
                                 <img src="${iconObj.iconClass}" class="w-100"></img>
                                 </button>
-                            <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
+                            <button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled" disabled data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
                         </div>`;
         $("#sysSubBtnList").append(strHtml);
       }
@@ -299,10 +339,10 @@
                   x.subSys == subSysObj.sub_system_tag
               )[0]?.iconClass;
               strHtml += `<div class="btn-group btn-group-lg col-lg-6 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
-                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4" >
+                            <button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4" >
                                 <img src="${iconClass}" class="w-100 "></img>
                                 </button>
-                            <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary"  data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
+                            <button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary"  data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
                         </div>`;
             });
           });
@@ -333,6 +373,7 @@
       "POST"
     ).send();
   }
+
   //取得第一筆電錶
   function getFirstEletric() {
     let url = baseApiUrl + "/api/Dashboard/GetTotalElec";
@@ -364,11 +405,13 @@
 
     myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
     myBaja.setSubscribeElectricmeterCallBack(function (data) {
+      console.log(data.point_name);
       if (data.point_name == "P") {
         let value = parseFloat(data.value).roundDecimal(2);
         $("#insPower").text(value);
         // $("#insPowerPer").text((value / 4).roundDecimal(2));
         $("#insPowerPer").text((value / contractCapacity).roundDecimal(2));
+        chartContractValue((value / contractCapacity).roundDecimal(2) * 100);
       }
     });
     myBaja.setSubscribeElectricmeterEndCallBack(function () {
@@ -465,78 +508,100 @@
       }
     );
 
-    // 異常數量與復歸數量
-    getAlarmCountByBaja((aData) => {
-      console.log("aData", aData);
-      chartDataCnt.alarmCnt = aData;
-      chkBajaLoaded();
-    });
-    getRecoverCountByBaja((rData) => {
-      chartDataCnt.recCnt = rData;
-      chkBajaLoaded();
-    });
-    // 異常數量與復歸數量
-    getCheckedAckedCountByBaja((data) => {
-      chartDataCnt.chkedErrCnt = data;
-      chkBajaLoaded();
-    });
+    // 本月及上月用電
+    const prevMonth = `${new Date().getFullYear()}-${new Date().getMonth() < 10 ? "0" : ""
+      }${new Date().getMonth()}-01T00:00:00`;
+    const thisMonth = `${new Date().getFullYear()}-${new Date().getMonth() < 10 ? "0" : ""
+      }${new Date().getMonth() + 2}-01T00:00:00`;
+    getElectricMeterDayDataByBaja(
+      devNum,
+      n4Sup,
+      prevMonth,
+      thisMonth,
+      (data) => {
+        const cur = new Date().getMonth();
+        const pre = new Date().getMonth() - 1;
+        console.log(data.data);
+        let curMonthData = data.data.filter(
+          (x) => x.timestamp.$date.$month === cur
+        );
+        let prevMonthData = data.data.filter(
+          (x) => x.timestamp.$date.$month === pre
+        );
+        chartEveMonsElec(curMonthData, prevMonthData);
+        // chkBajaLoaded();
+      }
+    );
 
-    getUnCheckedAckedCountByBaja((uData) => {
-      chartDataCnt.unChkedErrCnt = uData;
-      chkBajaLoaded();
-    });
+    // 異常數量與復歸數量
+    // getAlarmCountByBaja((aData) => {
+    //   chartDataCnt.alarmCnt = aData;
+    //   chkBajaLoaded();
+    // });
+    // getRecoverCountByBaja((rData) => {
+    //   chartDataCnt.recCnt = rData;
+    //   chkBajaLoaded();
+    // });
+    // // 異常數量與復歸數量
+    // getCheckedAckedCountByBaja((data) => {
+    //   chartDataCnt.chkedErrCnt = data;
+    //   chkBajaLoaded();
+    // });
+
+    // getUnCheckedAckedCountByBaja((uData) => {
+    //   chartDataCnt.unChkedErrCnt = uData;
+    //   chkBajaLoaded();
+    // });
 
     // 獲取所有異常數量
-    getAlarmForChartDataByBaja((allAlarmCount) => {
-      // 呼叫 api 找出所有有維修單的資料 (已派工)
-      // 所有異常數量 - 維修單數量(已派工) = 未派工
-      let url = baseApiUrl + "/operation/OpeRecListAllTime";
-      const token = cookies.get("JWT-Authorization");
-      fetch(url, {
-        method: "POST",
-        body: {
-          data: "{}",
-        },
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `bearer ${token}`,
-        },
-      })
-        .then((res) => res.json())
-        .then((data) => {
-          // console.log(allAlarmCount)
-          const { finish, notfinish } = data.data;
-          chartWorOrdFin([finish, notfinish]); // 已完成 未完成
-          chartWorOrdErr([
-            allAlarmCount - (finish + notfinish),
-            finish + notfinish,
-          ]);
-        });
-    });
+    // getAlarmForChartDataByBaja((allAlarmCount) => {
+    //   // 呼叫 api 找出所有有維修單的資料 (已派工)
+    //   // 所有異常數量 - 維修單數量(已派工) = 未派工
+    //   let url = baseApiUrl + "/operation/OpeRecListAllTime";
+    //   const token = cookies.get("JWT-Authorization");
+    //   fetch(url, {
+    //     method: "POST",
+    //     body: {
+    //       data: "{}",
+    //     },
+    //     headers: {
+    //       "Content-Type": "application/json",
+    //       Authorization: `bearer ${token}`,
+    //     },
+    //   })
+    //     .then((res) => res.json())
+    //     .then((data) => {
+    //       // console.log(allAlarmCount)
+    //       const { finish, notfinish } = data.data;
+    //       chartWorOrdFin([finish, notfinish]); // 已完成 未完成
+    //       chartWorOrdErr([
+    //         allAlarmCount - (finish + notfinish),
+    //         finish + notfinish,
+    //       ]);
+    //     });
+    // });
   }
 
   function chkBajaLoaded() {
-    loadedCnt++;
-
-    if (loadedCnt == 9) {
-      const ErrRecLabel = () => {
-        const normal = `異常 ${chartDataCnt.alarmCnt}`;
-        const offnormal = `復歸 ${chartDataCnt.recCnt}`;
-        return [normal, offnormal];
-      };
-
-      const ErrChkLabel = () => {
-        const acked = `已確認 ${chartDataCnt.chkedErrCnt}`;
-        const unacked = `未確認 ${chartDataCnt.unChkedErrCnt}`;
-        return [acked, unacked];
-      };
-      chartErrRec(ErrRecLabel, [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
-      chartErrChk(ErrChkLabel, [
-        chartDataCnt.chkedErrCnt,
-        chartDataCnt.unChkedErrCnt,
-      ]);
-      $(loadEle).Loading("close");
-    }
+    // loadedCnt++;
+    // if (loadedCnt == 9) {
+    //   const ErrRecLabel = () => {
+    //     const normal = `異常 ${chartDataCnt.alarmCnt}`;
+    //     const offnormal = `復歸 ${chartDataCnt.recCnt}`;
+    //     return [normal, offnormal];
+    //   };
+    //   const ErrChkLabel = () => {
+    //     const acked = `已確認 ${chartDataCnt.chkedErrCnt}`;
+    //     const unacked = `未確認 ${chartDataCnt.unChkedErrCnt}`;
+    //     return [acked, unacked];
+    //   };
+    //   chartErrRec(ErrRecLabel, [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
+    //   chartErrChk(ErrChkLabel, [
+    //     chartDataCnt.chkedErrCnt,
+    //     chartDataCnt.unChkedErrCnt,
+    //   ]);
+    //   $(loadEle).Loading("close");
+    // }
   }
 
   // 圖表 - 今天與昨天用電量 (長條圖)
@@ -713,6 +778,94 @@
     }
   }
 
+  // 圖表 - 本月即上月用電量
+  function chartEveMonsElec(curMonData, prevMonData) {
+    console.log(
+      curMonData.map((x) => x.sum),
+      prevMonData.map((x) => x.sum)
+    );
+    let eveMonElecChartCanvas = $("#eveMonElecChart").get(0).getContext("2d");
+
+    let eveMonElecChartData = {
+      labels: curMonData.map((x) => x.timestamp.$date.$day),
+      datasets: [
+        {
+          id: "curMon",
+          type: "bar",
+          label: "本月用電量",
+          fill: false,
+          backgroundColor: color.success._500,
+          borderColor: color.success._500,
+          pointColor: color.success._500,
+          pointBackgroundColor: color.success._500,
+          data: curMonData.map((x) => x.sum),
+          order: 2,
+        },
+        {
+          id: "preMon",
+          type: "bar",
+          label: "上月用電量",
+          fill: false,
+          backgroundColor: color.info._100,
+          borderColor: color.info._100,
+          pointColor: color.info._100,
+          pointBackgroundColor: color.info._100,
+          data: prevMonData.map((x) => x.sum),
+          order: 1,
+        },
+      ],
+    };
+    // console.log(eveWeekElecChartData)
+    let eveMonElecChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      legend: {
+        display: true,
+      },
+      scales: {
+        x: {
+          offset: true,
+          grid: { color: color.fusion._500 },
+        },
+        y: {
+          beginAtZero: true,
+          ticks: {
+            min: 0,
+          },
+        },
+      },
+      tooltips: {
+        callbacks: {
+          label: function (tooltipItem) {
+            let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上月" : "本月";
+            return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
+          },
+          title: function (tooltipItem) {
+            // console.log(tooltipItem)
+            let result = tooltipItem[0]?.xLabel.toString();
+            return result;
+          },
+        },
+      },
+    };
+    // console.log(eveWeekElecChartOptions)
+    if (eveMonElecChart == null) {
+      eveMonElecChart = new Chart(eveMonElecChartCanvas, {
+        data: eveMonElecChartData,
+        options: eveMonElecChartOptions,
+      });
+      // console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions)
+    } else {
+      eveMonElecChart.data.datasets.forEach((dataset) => {
+        if (dataset.order == 1) {
+          dataset.data = curMonData.map((x) => x.sum);
+        } else {
+          dataset.data = prevMonData.map((x) => x.sum);
+        }
+      });
+    }
+  }
+
   // 圖表 - 異常與復歸圖表 (圓餅圖)
   function chartErrRec(labelsFn, datas) {
     let errRecChartCanvas = (ctx = $("#errRecChart").get(0).getContext("2d"));
@@ -904,6 +1057,87 @@
     }
   }
 
+  // 圖表 - 取得契約容量
+  function chartContractValue(value) {
+    var chartDom = document.getElementById("contractValueChart");
+    contractValueChart = echarts.init(chartDom, null, {
+      renderer: "canvas",
+      useDirtyRect: false,
+    });
+
+    let option = {
+      series: [
+        {
+          type: "gauge",
+          axisLine: {
+            lineStyle: {
+              width: 30,
+              color: [
+                [0.3, "#008000"],
+                [0.7, "#FFA500"],
+                [1, "#FF0000"],
+              ],
+            },
+          },
+          pointer: {
+            width: 10,
+            itemStyle: {
+              color: "auto",
+            },
+          },
+          axisTick: {
+            distance: -30,
+            length: 8,
+            lineStyle: {
+              color: "#fff",
+              width: 2,
+            },
+          },
+          splitLine: {
+            distance: -30,
+            length: 30,
+            lineStyle: {
+              color: "#fff",
+              width: 4,
+            },
+          },
+          axisLabel: {
+            color: "inherit",
+            distance: -30,
+            fontSize: 20,
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: "{value} %",
+            color: "inherit",
+            fontSize: 28,
+          },
+          data: [
+            {
+              value,
+            },
+          ],
+        },
+      ],
+    };
+
+    option && contractValueChart.setOption(option);
+  }
+
+  function changeContractValueChart(value) {
+    contractValueChart.setOption({
+      series: [
+        {
+          data: [
+            {
+              value,
+            },
+          ],
+        },
+      ],
+    });
+  }
+
   // 從 baja 訂閱 左下角各系統小類異常狀態
   function getAlarmSub(data) {
     $.each(data.data, (idx, alaObj) => {

Frontend/index.html

@@ -1049,7 +1049,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 $.each(res.data, (index, buiObj) => {
                   // strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
 
-                  strHtml += `<a href="javascript:;" id="buiBtn${buiObj.building_tag}" data-target="#sysMonNavbar"  data-page="systemMonitor" class="text-center dropdown-item" name="topFunBtn">${buiObj.full_name}</a>`;
+                  strHtml += `<a href="javascript:;" id="buiBtn${buiObj.building_tag}" data-target="#sysMonNavbar"  data-page="dashboard" class="text-center dropdown-item" name="topFunBtn">${buiObj.full_name}</a>`;
                 });
                 pageAct.buildList = res.data;
                 pageAct.buiTag = res.data[0].building_tag;