From 47c9bd16b661711d484fc5f2a78d5300b1f15a5b Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Mon, 28 Aug 2023 16:24:08 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend]=E5=A0=B1=E8=A1=A8=E6=9F=A5=E8=A9=A2?=
 =?UTF-8?q?=E4=BB=8B=E9=9D=A2=E5=A2=9E=E5=8A=A0=E7=B8=BD=E7=9B=A4=E5=88=86?=
 =?UTF-8?q?=E7=9B=A4=E6=AF=94=E8=BC=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_dashboard.html        | 250 ++++++++++++++++----------------
 Frontend/_reportManagement.html | 250 ++++++++++++++++++++++++--------
 2 files changed, 316 insertions(+), 184 deletions(-)

diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index 3e9fe1d..d1f987f 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -9,8 +9,8 @@
             </div>
 
             <!-- <video playsInline autoPlay muted>
-                      <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
-                  </video> -->
+                          <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
+                      </video> -->
         </div>
         <div class="col-sm-12 col-xl-4">
             <div class="row">
@@ -51,23 +51,23 @@
                             <div class="panel-content poisition-relative">
                                 <div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
                                     <!--<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
-                                                          <div class="text-right fw-500 l-h-n d-flex flex-column">
-                                                              <div class="h3 m-0 d-flex align-items-center justify-content-end">
-                                                                  <div class='icon-stack mr-2'>
-                                                                      <i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
-                                                                      <i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
-                                                                      <i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
-                                                                  </div>
-                                                                  $44.34 / GE
-                                                              </div>
-                                                              <span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
-                                                          </div>
-                                                      </div>
-                                                      <div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
-                                                          <div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
-                                                              <div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
-                                                          </div>
-                                                      </div>-->
+                                                                          <div class="text-right fw-500 l-h-n d-flex flex-column">
+                                                                              <div class="h3 m-0 d-flex align-items-center justify-content-end">
+                                                                                  <div class='icon-stack mr-2'>
+                                                                                      <i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
+                                                                                      <i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
+                                                                                      <i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
+                                                                                  </div>
+                                                                                  $44.34 / GE
+                                                                              </div>
+                                                                              <span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
+                                                                          <div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
+                                                                              <div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
+                                                                          </div>
+                                                                      </div>-->
                                 </div>
                                 <div style="width: 100%; min-height: 300px">
                                     <canvas class="chart" id="eveDayElecChart"></canvas>
@@ -116,45 +116,45 @@
                         <div class="panel-container show">
                             <div class="panel-content poisition-relative">
                                 <!--<div class="pb-5 pt-3">
-                                                    <div class="row">
-                                                        <div class="col-6 col-xl-3 d-sm-flex align-items-center">
-                                                            <div class="p-2 mr-3 bg-info-200 rounded">
-                                                                <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
-                                                            </div>
-                                                            <div>
-                                                                <label class="fs-sm mb-0">Bounce Rate</label>
-                                                                <h4 class="font-weight-bold mb-0">37.56%</h4>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-6 col-xl-3 d-sm-flex align-items-center">
-                                                            <div class="p-2 mr-3 bg-info-300 rounded">
-                                                                <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
-                                                            </div>
-                                                            <div>
-                                                                <label class="fs-sm mb-0">Sessions</label>
-                                                                <h4 class="font-weight-bold mb-0">759</h4>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-6 col-xl-3 d-sm-flex align-items-center">
-                                                            <div class="p-2 mr-3 bg-success-300 rounded">
-                                                                <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
-                                                            </div>
-                                                            <div>
-                                                                <label class="fs-sm mb-0">New Sessions</label>
-                                                                <h4 class="font-weight-bold mb-0">12.17%</h4>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-6 col-xl-3 d-sm-flex align-items-center">
-                                                            <div class="p-2 mr-3 bg-success-500 rounded">
-                                                                <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
-                                                            </div>
-                                                            <div>
-                                                                <label class="fs-sm mb-0">Clickthrough</label>
-                                                                <h4 class="font-weight-bold mb-0">19.77%</h4>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>-->
+                                                                  <div class="row">
+                                                                      <div class="col-6 col-xl-3 d-sm-flex align-items-center">
+                                                                          <div class="p-2 mr-3 bg-info-200 rounded">
+                                                                              <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
+                                                                          </div>
+                                                                          <div>
+                                                                              <label class="fs-sm mb-0">Bounce Rate</label>
+                                                                              <h4 class="font-weight-bold mb-0">37.56%</h4>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div class="col-6 col-xl-3 d-sm-flex align-items-center">
+                                                                          <div class="p-2 mr-3 bg-info-300 rounded">
+                                                                              <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
+                                                                          </div>
+                                                                          <div>
+                                                                              <label class="fs-sm mb-0">Sessions</label>
+                                                                              <h4 class="font-weight-bold mb-0">759</h4>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div class="col-6 col-xl-3 d-sm-flex align-items-center">
+                                                                          <div class="p-2 mr-3 bg-success-300 rounded">
+                                                                              <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
+                                                                          </div>
+                                                                          <div>
+                                                                              <label class="fs-sm mb-0">New Sessions</label>
+                                                                              <h4 class="font-weight-bold mb-0">12.17%</h4>
+                                                                          </div>
+                                                                      </div>
+                                                                      <div class="col-6 col-xl-3 d-sm-flex align-items-center">
+                                                                          <div class="p-2 mr-3 bg-success-500 rounded">
+                                                                              <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
+                                                                          </div>
+                                                                          <div>
+                                                                              <label class="fs-sm mb-0">Clickthrough</label>
+                                                                              <h4 class="font-weight-bold mb-0">19.77%</h4>
+                                                                          </div>
+                                                                      </div>
+                                                                  </div>
+                                                              </div>-->
                                 <div style="width: 100%; min-height: 300px">
                                     <canvas class="chart" id="eveWeekElecChart"></canvas>
                                 </div>
@@ -184,7 +184,7 @@
                         </div>
                         <div class="panel-container show h-100">
                             <div class="panel-content poisition-relative h-100">
-                                <div style="width: 100%; min-height: 450px">
+                                <div class="mt-5" style="width: 100%; height: 400px">
                                     <canvas class="chart" id="eveMonElecChart"></canvas>
                                 </div>
                             </div>
@@ -201,7 +201,7 @@
                                     <h2>即時契約容量占比 - 第一校區</h2>
                                 </div>
                                 <div class="panel-container show h-100">
-                                    <div class="h-100 py-2" id="contractValueChart"></div>
+                                    <div id="contractValueChart" style="height: 240px"></div>
                                 </div>
                             </div>
                         </div>
@@ -210,10 +210,10 @@
                                  class="panel"
                                  style="height: calc(100% - 1.5rem)">
                                 <div class="panel-hdr">
-                                    <h2>即時契約容量占比 - 第一校區</h2>
+                                    <h2>即時契約容量占比 - 第二校區</h2>
                                 </div>
                                 <div class="panel-container h-100 show">
-                                    <div class="h-100 py-2" id="contractValueChart2"></div>
+                                    <div id="contractValueChart2" style="height: 240px"></div>
                                 </div>
                             </div>
                         </div>
@@ -222,55 +222,55 @@
             </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)">
-                <div class="panel-hdr">
-                  <h2>異常狀態</h2>
-                </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"
-                    >
-                      <canvas class="chart" id="errRecChart"></canvas>
+            <div class="row h-100">
+              <div class="col-lg-6">
+                <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="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"
+                      >
+                        <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"
+                      >
+                        <canvas class="chart" id="errChkChart"></canvas>
+                      </div>
                     </div>
-                    <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>
+              </div>
+              <div class="col-lg-6">
+                <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="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"
+                      >
+                        <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"
+                      >
+                        <canvas class="chart" id="worOrdFinChart"></canvas>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="col-lg-6">
-              <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="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"
-                    >
-                      <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"
-                    >
-                      <canvas class="chart" id="worOrdFinChart"></canvas>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div> -->
+          </div> -->
     </div>
 </main>
 <script>
@@ -320,11 +320,11 @@
                     (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="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 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>`;
+                          <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 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);
             }
         });
@@ -361,21 +361,21 @@
                             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="systemMonitor" type="button" class="btn btn-secondary col-4" data-subSysobj=${JSON.stringify(
+                          <button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4" data-subSysobj=${JSON.stringify(
                                     {
                                         ...subSysObj,
                                         main_system_tag: mainSysObj.main_system_tag,
                                     }
                                 )}>
-                                <img src="${iconClass}" class="w-100 "></img>
-                                </button>
-                            <button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${subSysObj.sub_system_tag
+                              <img src="${iconClass}" class="w-100 "></img>
+                              </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
                                 }" data-subSysObj=${JSON.stringify({
                                     ...subSysObj,
                                     main_system_tag: mainSysObj.main_system_tag,
                                 })}  style="font-size: 20px">${subSysObj.full_name}</button>
-                        </div>`;
+                      </div>`;
                         });
                     });
                     $("#sysSubBtnList").html(strHtml);
@@ -399,8 +399,8 @@
                 } else {
                     contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
                     getFirstEletric();
-                    getContractValueChange("Arean1");
-                    getContractValueChange("Arean2");
+                    getContractValueChange("Area1");
+                    getContractValueChange("Area2");
                 }
             },
             null,
@@ -433,7 +433,7 @@
     }
 
     function getSubBaja() {
-        let devPath = tarElePath.split("/")[1].split("_").slice(0, 8).join("/");
+        let devPath = tarElePath.split("/")[1]?.split("_").slice(0, 8).join("/");
         let tempOrdPath = { devicePath: devPath };
         let myBaja = new subscriptionElectricmeter();
 
@@ -454,9 +454,11 @@
     function getContractValueChange(compus) {
         let devPath = `Data/${compus}`;
         BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
-            let value = data.find(({ point_name }) => point_name === "P")?.value;
+            let value = data
+                .find(({ point_name }) => point_name === "P")
+                ?.value.replaceAll(",", "");
 
-            if (compus === "Arean1") {
+            if (value && compus === "Area1") {
                 if (data.some(({ point_name }) => point_name === "Capacity")) {
                     contractCapacityForchart1 = data.find(
                         ({ point_name }) => point_name === "Capacity"
@@ -464,9 +466,9 @@
                 }
                 chartContractValue(
                     "contractValueChart",
-                    (value / contractCapacityForchart1).roundDecimal(2) * 100
+                    ((value / contractCapacityForchart1) * 100).roundDecimal(2)
                 );
-            } else {
+            } else if (value && compus === "Area2") {
                 if (data.some(({ point_name }) => point_name === "Capacity")) {
                     contractCapacityForchart2 = data.find(
                         ({ point_name }) => point_name === "Capacity"
@@ -474,7 +476,7 @@
                 }
                 chartContractValue(
                     "contractValueChart2",
-                    (value / contractCapacityForchart2).roundDecimal(2) * 100
+                    ((value / contractCapacityForchart1) * 100).roundDecimal(2)
                 );
             }
         });
@@ -1166,7 +1168,7 @@
                         valueAnimation: true,
                         formatter: "{value} %",
                         color: "inherit",
-                        fontSize: 28,
+                        fontSize: 20,
                     },
                     data: [
                         {
diff --git a/Frontend/_reportManagement.html b/Frontend/_reportManagement.html
index b8d9448..f4c2f15 100644
--- a/Frontend/_reportManagement.html
+++ b/Frontend/_reportManagement.html
@@ -33,6 +33,16 @@
                                     <span class="nav-link-text"> 電錶 - 同期比較 </span>
                                 </a>
                             </li>
+                            <li>
+                                <a name="reportTypeRadio"
+                                   href="javascript:;"
+                                   data-value="day"
+                                   data-type="compare">
+                                    <span class="nav-link-text">
+                                        電錶 - 總盤與分盤 - 月份比較
+                                    </span>
+                                </a>
+                            </li>
                         </ul>
                         <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
                     </div>
@@ -40,12 +50,12 @@
                 <div class="col-12 col-xl-10">
                     <div class="panel-hdr" style="min-height: auto">
                         <h2 class="py-2" id="xx">
-                            <div class="col-auto">
+                            <div class="col-auto price">
                                 <span class="report-type-name"></span>費每度單價
                             </div>
                             <input type="text"
                                    id="elecPriceDegree"
-                                   class="form-control col-1" />
+                                   class="form-control col-1 price" />
                             <div id="compareTypeBtnsDiv"
                                  class="item btn-group btn-group-toggle offset-1"
                                  data-toggle="buttons"
@@ -66,6 +76,28 @@
                                     月份同日比較
                                 </label>
                             </div>
+
+                            <div id="compareAreaBtnsDiv"
+                                 class="item btn-group btn-group-toggle"
+                                 data-toggle="buttons"
+                                 style="display: none">
+                                <label class="btn btn-outline-success waves-effect active waves-themed">
+                                    <input type="radio"
+                                           name="compareEleRadio"
+                                           id="compareAll"
+                                           value="0"
+                                           checked />
+                                    總計含分盤資料
+                                </label>
+                                <label class="btn btn-outline-success waves-effect waves-themed">
+                                    <input type="radio"
+                                           name="compareEleRadio"
+                                           id="compareSeperate"
+                                           value="1" />
+                                    總計不含分盤資料
+                                </label>
+                            </div>
+
                             <div class="col-auto offset-1">
                                 選擇<span id="elecTimeText">單一月份</span>
                             </div>
@@ -129,29 +161,29 @@
                     </div>
                     <div class="panel-hdr" style="min-height: auto">
                         <!-- <h2 class="py-2 col-12" id="floors">
-                          <div class="col-1">樓層</div>
-                          <button
-                            type="button"
-                            class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
-                            onclick="allFloor()"
-                            style="display: none"
-                          >
-                            全選
-                          </button>
-                          <div
-                            class="item btn-group btn-group-toggle row m-0"
-                            data-toggle="buttons"
-                            style="row-gap: 5px"
-                          ></div>
-                          <span
-                            class="text-notice notice-noSelectedBuilding"
-                            style="display: none"
-                            >請選擇棟別</span
-                          >
-                          <span class="text-notice notice-noBuilding" style="display: none"
-                            >該棟別沒有樓層</span
-                          >
-                        </h2> -->
+                                    <div class="col-1">樓層</div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
+                                      onclick="allFloor()"
+                                      style="display: none"
+                                    >
+                                      全選
+                                    </button>
+                                    <div
+                                      class="item btn-group btn-group-toggle row m-0"
+                                      data-toggle="buttons"
+                                      style="row-gap: 5px"
+                                    ></div>
+                                    <span
+                                      class="text-notice notice-noSelectedBuilding"
+                                      style="display: none"
+                                      >請選擇棟別</span
+                                    >
+                                    <span class="text-notice notice-noBuilding" style="display: none"
+                                      >該棟別沒有樓層</span
+                                    >
+                                  </h2> -->
                     </div>
                     <div class="d-flex my-2">
                         <button type="button"
@@ -175,8 +207,8 @@
                             <span id="tableLoadingText">列表讀取中</span>
                         </div>
                         <!-- <button type="button" class="btn btn-primary" onclick="SaveRealTimeCombination()">儲存常用組合</button>
-                        <button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
-                        <button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
+                                  <button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
+                                  <button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
                     </div>
                     <span class="d-flex justify-content-end">單位：kWh </span>
                     <table id="report_table"
@@ -209,6 +241,7 @@
             name: "Electric",
             chiName: "電",
             listApiUrl: "ElectricList",
+            listApiUrlForTotal: "ElectricListEachTotal",
             exportListApiUrl: {
                 day: "ExportElectricList",
                 month: "ExportElectricList",
@@ -421,10 +454,24 @@
                 "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
             ).hide();
             $("#compareTypeBtnsDiv").hide();
+            $("#compareAreaBtnsDiv").hide();
 
             const value = $(this).data("value");
+            const type = $(this).data("type");
             const curDate = $("#elecDate").val();
-            if (value === "day") {
+
+            $("#school_zone").show();
+            $("#building").show();
+            $(".price").show();
+
+            if (type === "compare") {
+                $("#elecTimeText").text("月份");
+                $("#elecMonthDate").show();
+                $("#compareAreaBtnsDiv").show();
+                $("#school_zone").hide();
+                $("#building").hide();
+                $(".price").hide();
+            } else if (value === "day") {
                 $("#elecTimeText").text("月份");
                 $("#elecMonthDate").show();
             } else if (value == "month") {
@@ -455,7 +502,8 @@
         $("[name=reportTypeRadio]")
             .parent("li")
             .on("click", function () {
-                $("[name=reportTypeRadio]").parent("li").removeClass("active");
+                $("[name=reportTypeRadio]").parent("li.active").removeClass("active");
+                // $("[name=compareTypeRadio]").parent("label").removeClass("active");
                 const oldVal = $("li.active [name=reportTypeRadio]").data("value");
                 $(this).addClass("active");
                 const newVal = $("li.active [name=reportTypeRadio]").data("value");
@@ -476,6 +524,18 @@
                 }
             });
 
+        $("[name=compareEleRadio]")
+            .parent("label")
+            .on("click", function () {
+                $("[name=compareEleRadio]").parent("label").removeClass("active");
+                const oldVal = $("label.active [name=compareEleRadio]").val();
+                $(this).addClass("active");
+                const newVal = $("label.active [name=compareEleRadio]").val();
+                if (oldVal !== newVal) {
+                    $("label.active [name=compareEleRadio]").trigger("change");
+                }
+            });
+
         $("[name=floorCheckbox]")
             .parent(".btn")
             .off("click")
@@ -503,6 +563,10 @@
     function getListSendData() {
         const tableType = $("li.active [name=reportTypeRadio]").data("value");
         const compareType = $("label.active [name=compareTypeRadio]").val();
+        const Mode =
+            $("li.active [name=reportTypeRadio]").data("type") == "compare"
+                ? $("label.active [name=compareEleRadio]").val()
+                : null; // 總盤、分盤
         const startTime =
             tableType == "day"
                 ? $("#elecMonthDate").val()
@@ -538,21 +602,35 @@
             return;
         }
 
-        let sent_data = {
-            tableType:
-                $("li.active [name=reportTypeRadio]").data("value") == "compare"
-                    ? $("[name=compareTypeRadio]:checked").val()
-                    : $("li.active [name=reportTypeRadio]").data("value"),
-            building_tag: SelectBuildings.join(","),
-            floor_tag: $("[name=floorCheckbox]:checked")
-                .map((i, e) => $(e).val())
-                .toArray(),
-            startTime: startTime,
-            endTime: endTime,
-            price: $("#elecPriceDegree").val()
-                ? parseFloat($("#elecPriceDegree").val())
-                : null,
-        };
+        let sent_data = Mode
+            ? {
+                tableType: "month",
+                building_tag: "",
+                floor_tag: $("[name=floorCheckbox]:checked")
+                    .map((i, e) => $(e).val())
+                    .toArray(),
+                startTime: startTime,
+                endTime: endTime,
+                price: $("#elecPriceDegree").val()
+                    ? parseFloat($("#elecPriceDegree").val())
+                    : null,
+                Mode: parseInt(Mode),
+            }
+            : {
+                tableType:
+                    $("li.active [name=reportTypeRadio]").data("value") == "compare"
+                        ? $("[name=compareTypeRadio]:checked").val()
+                        : $("li.active [name=reportTypeRadio]").data("value"),
+                building_tag: SelectBuildings.join(","),
+                floor_tag: $("[name=floorCheckbox]:checked")
+                    .map((i, e) => $(e).val())
+                    .toArray(),
+                startTime: startTime,
+                endTime: endTime,
+                price: $("#elecPriceDegree").val()
+                    ? parseFloat($("#elecPriceDegree").val())
+                    : null,
+            };
 
         if (Array.isArray(startTime)) {
             sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)];
@@ -572,7 +650,11 @@
         if (!Array.isArray(sent_data)) {
             sent_data = [sent_data];
         }
-        if (!sent_data.some((s) => s.building_tag)) {
+
+        if (
+            !sent_data[0]?.Mode?.toString() &&
+            !sent_data.some((s) => s.building_tag)
+        ) {
             toast_error("請選擇棟別");
             return;
         }
@@ -580,7 +662,13 @@
             toast_error("請選擇樓層");
             return;
         }
-        var url = baseApiUrl + "/api/" + reportTypeDict["RElec"]["listApiUrl"];
+        var url =
+            baseApiUrl +
+            "/api/" +
+            `${sent_data[0]?.Mode?.toString()
+                ? reportTypeDict["RElec"]["listApiUrlForTotal"]
+                : reportTypeDict["RElec"]["listApiUrl"]
+            }`;
 
         setLoading(true);
         sent_data.forEach((sdata, i) => {
@@ -787,7 +875,45 @@
             datatable.destroy();
             $("#report_table").empty();
         }
-        datesColumns = setTableColumns();
+
+        const ElecEachTotal =
+            $("li.active [name=reportTypeRadio]").data("type") === "compare";
+        if (ElecEachTotal) {
+            const [year, month] = $("#elecMonthDate").val().split("-");
+            datesColumns = [
+                {
+                    label: "選擇月份 <br>" + `${year}${month}` + "(A)",
+                    value: $("#elecMonthDate").val(),
+                },
+                {
+                    label:
+                        "前一月份 <br>" +
+                        `${year}${month - 1 > 10 ? month - 1 : `0${month - 1}`}` +
+                        "(B)",
+                    value: `${year}-${month - 1 > 10 ? month - 1 : `0${month - 1}`}`,
+                },
+                {
+                    label:
+                        "差異比較 <br>" +
+                        `${year}${month}(A)-${year}${month - 1 > 10 ? month - 1 : `0${month - 1}`
+                        }(B)`,
+                    value: "last month different",
+                },
+                {
+                    label: "去年同期 <br>" + `${year - 1}${month}` + "(C)",
+                    value: `${year - 1}-${month}`,
+                },
+                {
+                    label: "同期差異 <br>" + `${year - 1}${month}(A)-${year}${month}(C)`,
+                    value: "last year different",
+                },
+            ].map((dc) => {
+                return { title: dc.label, data: dc.value, sWidth: "120px" };
+            });
+        } else {
+            datesColumns = setTableColumns();
+        }
+
         const compareType = $("label.active [name=compareTypeRadio]").val();
         datas.forEach((td) => {
             td.rawData.forEach((rd) => {
@@ -862,6 +988,7 @@
                     title: "棟別",
                     data: "building_name",
                     className: "text-nowrap",
+                    sWidth: "100px",
                 },
                 {
                     title: "樓層",
@@ -875,7 +1002,7 @@
                     sWidth: "100px",
                 },
                 ...datesColumns,
-                ...totalColumns,
+                ...(ElecEachTotal ? [] : totalColumns),
             ],
         });
     }
@@ -1017,8 +1144,8 @@
         var html = "";
         for (let floor of floors) {
             html += `<label class="btn btn-outline-success waves-effect waves-themed" style="flex:0 0 auto">
-                    <input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
-                </label>`;
+                  <input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
+              </label>`;
         }
 
         $("#floors").find(".item").empty();
@@ -1051,12 +1178,12 @@
                     let htmlStr = "";
                     rel.data.forEach(({ system_key, system_value }) => {
                         htmlStr += `
-          <label
-                  class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : ""
+        <label
+                class="btn btn-outline-success waves-effect waves-themed ${school_zone === system_key ? "active" : ""
                             }"
-                >
-                  <input type="radio" name="buildingRadio" value=${system_key} />${system_value}
-                </label>`;
+              >
+                <input type="radio" name="buildingRadio" value=${system_key} />${system_value}
+              </label>`;
                     });
                     $("#school_zone>.btn-group").append(htmlStr);
                 }
@@ -1066,10 +1193,13 @@
 
     $("#school_zone").on("click", function (event) {
         event.stopPropagation();
-        if (event.target.tagName !== "INPUT" && !$(event.target).hasClass("active")) {
+        if (
+            event.target.tagName !== "INPUT" &&
+            !$(event.target).hasClass("active")
+        ) {
             $("#school_zone label.active").removeClass("active");
             $(event.target).addClass("active");
-            SelectBuildings = []
+            SelectBuildings = [];
         } else if (event.target.tagName === "INPUT") {
             school_zone = event.target.value;
             getbuildings(school_zone);
@@ -1082,11 +1212,11 @@
             ({ school_zone }) => school_zone === value
         )) {
             html += `<label class="btn btn-outline-success waves-effect waves-themed">
-          <input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
-          </label>`;
+        <input type="checkbox" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
+        </label>`;
         }
         $("#building").find(".item").empty();
         $("#building").find(".item").append(html);
-        SelectBuildings = []
+        SelectBuildings = [];
     }
 </script>