[Frontend] 修改 dashbord 儀表版內容 | 歷史數據查詢月 input 應該只顯示到月

Frontend/_dashboard.html

@@ -199,7 +199,7 @@
                    class="panel"
                    style="height: calc(100% - 1.5rem)">
                 <div class="panel-hdr">
-                  <h2>即時契約容量占比 - 第一校區</h2>
+                  <h2>即時契約容量占比 - 第一校區 <span id="contractCapacityForArea1">--</span></h2>
                 </div>
                 <div class="panel-container show h-100">
                   <div id="contractValueChart" style="height: 240px"></div>
@@ -211,7 +211,7 @@
                    class="panel"
                    style="height: calc(100% - 1.5rem)">
                 <div class="panel-hdr">
-                  <h2>即時契約容量占比 - 第二校區</h2>
+                  <h2>即時契約容量占比 - 第二校區 <span id="contractCapacityForArea2">--</span></</h2>
                 </div>
                 <div class="panel-container h-100 show">
                   <div id="contractValueChart2" style="height: 240px"></div>
@@ -469,9 +469,11 @@
             ({ point_name }) => point_name === "Capacity"
           )?.value;
         }
+        $("#contractCapacityForArea1").text(` (${contractCapacityForchart1} kW)`);
         chartContractValue(
           "contractValueChart",
-          ((value / contractCapacityForchart1) * 100).roundDecimal(2)
+          Math.round((value / contractCapacityForchart1) * 100),
+          value
         );
       } else if (value && compus === "Area2") {
         if (data.some(({ point_name }) => point_name === "Capacity")) {
@@ -479,9 +481,11 @@
             ({ point_name }) => point_name === "Capacity"
           )?.value;
         }
+        $("#contractCapacityForArea2").text(` (${contractCapacityForchart2} kW)`);
         chartContractValue(
           "contractValueChart2",
-          ((value / contractCapacityForchart2) * 100).roundDecimal(2)
+          Math.round((value / contractCapacityForchart2) * 100),
+          value
         );
       }
     });
@@ -1121,7 +1125,7 @@
   }
 
   // 圖表 - 取得契約容量
-  function chartContractValue(ele, value) {
+  function chartContractValue(ele, value, pValue) {
     var chartDom = document.getElementById(ele);
     contractValueChart = echarts.init(chartDom, null, {
       renderer: "canvas",
@@ -1132,6 +1136,9 @@
       series: [
         {
           type: "gauge",
+          //startAngle: 180,
+          //endAngle: 0,
+          //center: ['50%', '60%'],
           axisLine: {
             lineStyle: {
               width: 30,
@@ -1171,13 +1178,13 @@
           },
           detail: {
             valueAnimation: true,
-            formatter: "{value} %",
+            formatter: (value) => { return `\t\n ${value} % \t\n ${Math.round(pValue)} kW` },
             color: "inherit",
             fontSize: 20,
           },
           data: [
             {
-              value,
+              value
             },
           ],
         },

Frontend/_historyData.html

@@ -69,7 +69,7 @@
                    type="date"
                    name="date"
                    value="" />
-            <input class="form-control flatpickr flatpickr-input selectDate"
+            <input class="form-control flatpickr flatpickr-input selectMonth"
                    id="getmonth"
                    type="month"
                    style="display: none" />
@@ -120,6 +120,7 @@
   hisFirst = true;
   $(function () {
     flatpickr(".selectDate", {});
+    flatpickr(".selectMonth", { dateFormat: "Y-m", });
     let html = "";
     for (let building of pageAct.buildList) {
       html += `<label class="btn btn-secondary">