dashbord 校區即時契約容量圖表 | 報表棟別改多選

Frontend/_dashboard.html

@@ -166,7 +166,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row h-100">
     <div class="col-sm-12 col-lg-4">
       <div class="row" id="sysSubBtnList"></div>
     </div>
@@ -182,9 +182,9 @@
             <div class="panel-hdr">
               <h2>本月／上月用電比較 (kWh)</h2>
             </div>
-            <div class="panel-container show">
-              <div class="panel-content poisition-relative">
-                <div style="width: 100%; min-height: 270px">
+            <div class="panel-container show h-100">
+              <div class="panel-content poisition-relative h-100">
+                <div style="width: 100%; min-height: 450px">
                   <canvas class="chart" id="eveMonElecChart"></canvas>
                 </div>
               </div>
@@ -192,12 +192,30 @@
           </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 class="row h-100">
+            <div class="col-12 h-50">
+              <div id="panel-3"
+                   class="panel"
+                   style="height: calc(100% - 1.5rem)">
+                <div class="panel-hdr">
+                  <h2>即時契約容量占比 - 第一校區</h2>
+                </div>
+                <div class="panel-container show h-100">
+                  <div class="h-100 py-2" id="contractValueChart"></div>
+                </div>
+              </div>
             </div>
-            <div class="panel-container h-100 show">
-              <div class="h-100" id="contractValueChart"></div>
+            <div class="col-12 h-50">
+              <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 py-2" id="contractValueChart2"></div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -268,6 +286,7 @@
   var errRecChart = null;
   var errChkChart = null;
   var contractValueChart = null;
+  var contractValueChart2 = null;
   var loadedCnt = 0;
   var chartDataCnt = {
     alarmCnt: 0,
@@ -283,6 +302,8 @@
     show3DModel();
     getSubList();
     getAutDemVal();
+    getContractValueChange("Arean1");
+    getContractValueChange("Arean2");
   });
 
   function demoSubList() {
@@ -405,19 +426,46 @@
 
     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 () {
       chkBajaLoaded();
     });
   }
+  let contractCapacityForchart1, contractCapacityForchart2;
+  function getContractValueChange(compus) {
+    let devPath = `Data/${compus}`;
+    BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
+      let value = data.find(({ point_name }) => point_name === "P")?.value;
+
+      if (compus === "Arean1") {
+        if (data.some(({ point_name }) => point_name === "Capacity")) {
+          contractCapacityForchart1 = data.find(
+            ({ point_name }) => point_name === "Capacity"
+          )?.value;
+        }
+        chartContractValue(
+          "contractValueChart",
+          (value / contractCapacityForchart1).roundDecimal(2) * 100
+        );
+      } else {
+        if (data.some(({ point_name }) => point_name === "Capacity")) {
+          contractCapacityForchart2 = data.find(
+            ({ point_name }) => point_name === "Capacity"
+          )?.value;
+        }
+        chartContractValue(
+          "contractValueChart2",
+          (value / contractCapacityForchart2).roundDecimal(2) * 100
+        );
+      }
+    });
+  }
 
   //從 baja 取得電表用電量
   function getElectricBaja() {
@@ -521,7 +569,6 @@
       (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
         );
@@ -780,10 +827,6 @@
 
   // 圖表 - 本月即上月用電量
   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 = {
@@ -1058,8 +1101,8 @@
   }
 
   // 圖表 - 取得契約容量
-  function chartContractValue(value) {
-    var chartDom = document.getElementById("contractValueChart");
+  function chartContractValue(ele, value) {
+    var chartDom = document.getElementById(ele);
     contractValueChart = echarts.init(chartDom, null, {
       renderer: "canvas",
       useDirtyRect: false,