From a1b7d9333b0eb1f6ef2e7ee324272992707b6fca Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Tue, 26 Sep 2023 16:28:59 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend]=20=E4=BF=AE=E6=94=B9=20dashbord=20?=
 =?UTF-8?q?=E5=84=80=E8=A1=A8=E7=89=88=E5=85=A7=E5=AE=B9=20|=20=E6=AD=B7?=
 =?UTF-8?q?=E5=8F=B2=E6=95=B8=E6=93=9A=E6=9F=A5=E8=A9=A2=E6=9C=88=20input?=
 =?UTF-8?q?=20=20=E6=87=89=E8=A9=B2=E5=8F=AA=E9=A1=AF=E7=A4=BA=E5=88=B0?=
 =?UTF-8?q?=E6=9C=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_dashboard.html   | 21 ++++++++++++++-------
 Frontend/_historyData.html |  3 ++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index ef63b61..0f9f2ec 100644
--- a/Frontend/_dashboard.html
+++ b/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
             },
           ],
         },
diff --git a/Frontend/_historyData.html b/Frontend/_historyData.html
index 31c112e..04b2d01 100644
--- a/Frontend/_historyData.html
+++ b/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">