From 18746d5a42249f61e930d689cfa92fab0c477212 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Fri, 1 Sep 2023 13:10:32 +0800
Subject: [PATCH] =?UTF-8?q?[Frontend]=E4=BF=AE=E6=AD=A3dashboard=E6=9C=88?=
 =?UTF-8?q?=E4=BB=BD=E6=AF=94=E8=BC=83=20|=20=E6=8C=89=E9=88=95=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_dashboard.html | 2481 +++++++++++++++++++-------------------
 1 file changed, 1243 insertions(+), 1238 deletions(-)

diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index d1f987f..fdbb03a 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -1,1281 +1,1286 @@
 <main id="js-page-content" role="main" class="page-content">
-    <div class="top-building-text-container"></div>
+  <div class="top-building-text-container"></div>
 
-    <div class="row">
-        <div class="col-sm-12 col-xl-4 poisition-relative">
-            <!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->
-            <div class="position-absolute index-img" style="width: 96%; height: 96%">
-                <img src="img/backgrounds/bg_w.png" style="width: 100%" />
-            </div>
+  <div class="row">
+    <div class="col-sm-12 col-xl-4 poisition-relative">
+      <!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->
+      <div class="position-absolute index-img" style="width: 96%; height: 96%">
+        <img src="img/backgrounds/bg_w.png" style="width: 100%" />
+      </div>
 
-            <!-- <video playsInline autoPlay muted>
-                          <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
-                      </video> -->
-        </div>
-        <div class="col-sm-12 col-xl-4">
-            <div class="row">
-                <div class="col-sm-6 col-xl-6">
-                    <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
-                        <div class="">
-                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                <span id="todayUseElec">--</span>
-                                <small class="m-0 l-h-n">今日用電量 kWH</small>
-                            </h3>
-                        </div>
-                        <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
-                           style="font-size: 6rem"></i>
-                    </div>
-                </div>
-                <div class="col-sm-6 col-xl-6">
-                    <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
-                        <div class="">
-                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                <span id="yesUseElec">--</span>
-                                <small class="m-0 l-h-n">昨日用電量 kWH</small>
-                            </h3>
-                        </div>
-                        <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-                           style="font-size: 6rem"></i>
-                    </div>
-                </div>
-                <div class="col-lg-12">
-                    <div id="panel-2"
-                         class="panel"
-                         data-panel-sortable
-                         data-panel-collapsed
-                         data-panel-close>
-                        <div class="panel-hdr">
-                            <h2>昨日／今日用電比較 (kWh)</h2>
-                        </div>
-                        <div class="panel-container show">
-                            <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>
-                                <div style="width: 100%; min-height: 300px">
-                                    <canvas class="chart" id="eveDayElecChart"></canvas>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-12 col-xl-4">
-            <div class="row">
-                <div class="col-sm-6 col-xl-6">
-                    <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
-                        <div class="">
-                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                <span id="insPower">--</span>
-                                <small class="m-0 l-h-n">即時功率 kW</small>
-                            </h3>
-                        </div>
-                        <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
-                           style="font-size: 8rem"></i>
-                    </div>
-                </div>
-                <div class="col-sm-6 col-xl-6">
-                    <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
-                        <div class="">
-                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
-                                <span id="insPowerPer">--</span>
-                                <small class="m-0 l-h-n">即時契約容量占比 %</small>
-                            </h3>
-                        </div>
-                        <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-                           style="font-size: 6rem"></i>
-                    </div>
-                </div>
-                <div class="col-lg-12">
-                    <div id="panel-3"
-                         class="panel"
-                         data-panel-sortable
-                         data-panel-collapsed
-                         data-panel-close>
-                        <div class="panel-hdr">
-                            <h2>本週／上週用電比較 (kWh)</h2>
-                        </div>
-                        <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 style="width: 100%; min-height: 300px">
-                                    <canvas class="chart" id="eveWeekElecChart"></canvas>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+      <!-- <video playsInline autoPlay muted>
+                    <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
+                </video> -->
     </div>
-
-    <div class="row h-100">
-        <div class="col-sm-12 col-lg-4">
-            <div class="row" id="sysSubBtnList"></div>
-        </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="panel-container show h-100">
-                            <div class="panel-content poisition-relative h-100">
-                                <div class="mt-5" style="width: 100%; height: 400px">
-                                    <canvas class="chart" id="eveMonElecChart"></canvas>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-4">
-                    <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 id="contractValueChart" style="height: 240px"></div>
-                                </div>
-                            </div>
-                        </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 id="contractValueChart2" style="height: 240px"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+    <div class="col-sm-12 col-xl-4">
+      <div class="row">
+        <div class="col-sm-6 col-xl-6">
+          <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
+            <div class="">
+              <h3 class="display-4 d-block l-h-n m-0 fw-500">
+                <span id="todayUseElec">--</span>
+                <small class="m-0 l-h-n">今日用電量 kWH</small>
+              </h3>
             </div>
+            <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
+               style="font-size: 6rem"></i>
+          </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>
-                      <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-sm-6 col-xl-6">
+          <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
+            <div class="">
+              <h3 class="display-4 d-block l-h-n m-0 fw-500">
+                <span id="yesUseElec">--</span>
+                <small class="m-0 l-h-n">昨日用電量 kWH</small>
+              </h3>
+            </div>
+            <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
+               style="font-size: 6rem"></i>
+          </div>
+        </div>
+        <div class="col-lg-12">
+          <div id="panel-2"
+               class="panel"
+               data-panel-sortable
+               data-panel-collapsed
+               data-panel-close>
+            <div class="panel-hdr">
+              <h2>昨日／今日用電比較 (kWh)</h2>
+            </div>
+            <div class="panel-container show">
+              <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>
+                <div style="width: 100%; min-height: 300px">
+                  <canvas class="chart" id="eveDayElecChart"></canvas>
                 </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>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-12 col-xl-4">
+      <div class="row">
+        <div class="col-sm-6 col-xl-6">
+          <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
+            <div class="">
+              <h3 class="display-4 d-block l-h-n m-0 fw-500">
+                <span id="insPower">--</span>
+                <small class="m-0 l-h-n">即時功率 kW</small>
+              </h3>
+            </div>
+            <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
+               style="font-size: 8rem"></i>
+          </div>
+        </div>
+        <div class="col-sm-6 col-xl-6">
+          <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
+            <div class="">
+              <h3 class="display-4 d-block l-h-n m-0 fw-500">
+                <span id="insPowerPer">--</span>
+                <small class="m-0 l-h-n">即時契約容量占比 %</small>
+              </h3>
+            </div>
+            <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
+               style="font-size: 6rem"></i>
+          </div>
+        </div>
+        <div class="col-lg-12">
+          <div id="panel-3"
+               class="panel"
+               data-panel-sortable
+               data-panel-collapsed
+               data-panel-close>
+            <div class="panel-hdr">
+              <h2>本週／上週用電比較 (kWh)</h2>
+            </div>
+            <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 style="width: 100%; min-height: 300px">
+                  <canvas class="chart" id="eveWeekElecChart"></canvas>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row h-100">
+    <div class="col-sm-12 col-lg-4">
+      <div class="row h-100 d-flex justify-content-between"
+           id="sysSubBtnList"></div>
+    </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="panel-container show h-100">
+              <div class="panel-content poisition-relative h-100">
+                <div class="mt-5" style="width: 100%; height: 400px">
+                  <canvas class="chart" id="eveMonElecChart"></canvas>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-4">
+          <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 id="contractValueChart" style="height: 240px"></div>
+                </div>
+              </div>
+            </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 id="contractValueChart2" style="height: 240px"></div>
+                </div>
+              </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)">
+              <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="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
+                    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>
-          </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>
 </main>
 <script>
-    var tarElePath = "";
-    var sysSubList = [];
-    var viewer3DNodeIds = [];
+  var tarElePath = "";
+  var sysSubList = [];
+  var viewer3DNodeIds = [];
 
-    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 contractValueChart2 = null;
-    var loadedCnt = 0;
-    var chartDataCnt = {
-        alarmCnt: 0,
-        recCnt: 0,
-        chkedErrCnt: 0,
-        unChkedErrCnt: 0,
-    };
-    var contractCapacity = 0;
-    var contractCapacityForchart1, contractCapacityForchart2;
+  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 contractValueChart2 = null;
+  var loadedCnt = 0;
+  var chartDataCnt = {
+    alarmCnt: 0,
+    recCnt: 0,
+    chkedErrCnt: 0,
+    unChkedErrCnt: 0,
+  };
+  var contractCapacity = 0;
+  var contractCapacityForchart1, contractCapacityForchart2;
 
-    $(document).ready(function () {
-        $(loadEle).Loading("start");
-        $(loadEle).Loading("close");
-        show3DModel();
-        getSubList();
-        getAutDemVal();
-    });
+  $(document).ready(function () {
+    $(loadEle).Loading("start");
+    $(loadEle).Loading("close");
+    show3DModel();
+    getSubList();
+    getAutDemVal();
+  });
 
-    function demoSubList() {
-        let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]")
-            .toArray()
-            .map((x) => $(x).text());
-        let strHtml = ``;
+  function demoSubList() {
+    let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]")
+      .toArray()
+      .map((x) => $(x).text());
+    let strHtml = ``;
 
-        $.each(tempSysSubText, (idx, obj) => {
-            if (
-                isExiNames.indexOf(obj.text) == -1 &&
-                $("#sysSubBtnList .dev-group").length < 8
-            ) {
-                let iconObj = sysIconList.filter(
-                    (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>
+    $.each(tempSysSubText, (idx, obj) => {
+      if (
+        isExiNames.indexOf(obj.text) == -1 &&
+        $("#sysSubBtnList .dev-group").length < 8
+      ) {
+        let iconObj = sysIconList.filter(
+          (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
+        )[0];
+        strHtml = `<div class="btn-group  col-lg-6 mb-4 dev-group">
+                          <button name="topFunBtn" data-page="systemMonitor" type="button" class="btn btn-secondary col-4 disabled px-2 h-100" 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>
+                          <button name="topFunBtn" data-page="systemMonitor" id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary disabled px-2 h-100" disabled data-id="${obj.subSys}">
+                            <span class="h2">${obj.text}</span>
+                            </button>
                       </div>`;
-                $("#sysSubBtnList").append(strHtml);
-            }
-        });
-    }
+        $("#sysSubBtnList").append(strHtml);
+      }
+    });
+  }
 
-    //取得 左下方 各系統小類
-    function getSubList() {
-        let url = baseApiUrl + "/api/Device/GetMainSub";
-        let sendData = {
-            building_tag: pageAct.buiTag,
-        };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(
-            url,
-            objSendData,
-            function (res) {
-                if (!res || res.code != "0000" || !res.data) {
-                } else {
-                    let strHtml = ``;
-                    let contest = ["E4", "EL", "L1", "M10", "M12"];
-                    $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
-                        $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
-                            if (contest.indexOf(subSysObj.sub_system_tag) != -1) {
-                                sysSubList.push({
-                                    sysMainTag: mainSysObj.main_system_tag,
-                                    sysSubTag: subSysObj.sub_system_tag,
-                                });
-                            }
-                            let iconClass = sysIconList.filter(
-                                (x) =>
-                                    x.mainSys == mainSysObj.main_system_tag &&
-                                    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="systemMonitor" type="button" class="btn btn-secondary col-4" data-subSysobj=${JSON.stringify(
-                                    {
-                                        ...subSysObj,
-                                        main_system_tag: mainSysObj.main_system_tag,
-                                    }
-                                )}>
+  //取得 左下方 各系統小類
+  function getSubList() {
+    let url = baseApiUrl + "/api/Device/GetMainSub";
+    let sendData = {
+      building_tag: pageAct.buiTag,
+    };
+    objSendData.Data = sendData;
+    ytAjax = new YourTeam.Ajax(
+      url,
+      objSendData,
+      function (res) {
+        if (!res || res.code != "0000" || !res.data) {
+        } else {
+          let strHtml = ``;
+          let contest = ["E4", "EL", "L1", "M10", "M12"];
+          $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
+            $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
+              if (contest.indexOf(subSysObj.sub_system_tag) != -1) {
+                sysSubList.push({
+                  sysMainTag: mainSysObj.main_system_tag,
+                  sysSubTag: subSysObj.sub_system_tag,
+                });
+              }
+              let iconClass = sysIconList.filter(
+                (x) =>
+                  x.mainSys == mainSysObj.main_system_tag &&
+                  x.subSys == subSysObj.sub_system_tag
+              )[0]?.iconClass;
+              strHtml += `<div class="btn-group  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 px-2 h-100" 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
-                                }" 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>
+                }" type="button" class="btn btn-secondary px-2 h4 h-100"  data-id="${subSysObj.sub_system_tag
+                }" data-subSysObj=${JSON.stringify({
+                  ...subSysObj,
+                  main_system_tag: mainSysObj.main_system_tag,
+                })} >
+              <span class="h2">${subSysObj.full_name}</span>
+              </button>
                       </div>`;
-                        });
-                    });
-                    $("#sysSubBtnList").html(strHtml);
-                    demoSubList();
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    }
-    // 取得 自動須量
-    function getAutDemVal() {
-        let url = baseApiUrl + "/api/Dashboard/GetContractValue";
-        let sendData = pageAct.buiTag;
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(
-            url,
-            objSendData,
-            function (res) {
-                if (!res || res.code != "0000" || !res.data) {
-                } else {
-                    contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
-                    getFirstEletric();
-                    getContractValueChange("Area1");
-                    getContractValueChange("Area2");
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    }
+            });
+          });
+          $("#sysSubBtnList").html(strHtml);
+          demoSubList();
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  }
+  // 取得 自動須量
+  function getAutDemVal() {
+    let url = baseApiUrl + "/api/Dashboard/GetContractValue";
+    let sendData = pageAct.buiTag;
+    objSendData.Data = sendData;
+    ytAjax = new YourTeam.Ajax(
+      url,
+      objSendData,
+      function (res) {
+        if (!res || res.code != "0000" || !res.data) {
+        } else {
+          contractCapacity = (res.data || [])[0]?.contract_value ?? 0;
+          getFirstEletric();
+          getContractValueChange("Area1");
+          getContractValueChange("Area2");
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  }
 
-    //取得第一筆電錶
-    function getFirstEletric() {
-        let url = baseApiUrl + "/api/Dashboard/GetTotalElec";
+  //取得第一筆電錶
+  function getFirstEletric() {
+    let url = baseApiUrl + "/api/Dashboard/GetTotalElec";
 
-        ytAjax = new YourTeam.Ajax(
-            url,
-            null,
-            function (res) {
-                if (!res || res.code != "0000" || !res.data) {
-                } else {
-                    subSysElecList = res.data;
+    ytAjax = new YourTeam.Ajax(
+      url,
+      null,
+      function (res) {
+        if (!res || res.code != "0000" || !res.data) {
+        } else {
+          subSysElecList = res.data;
 
-                    tarElePath =
-                        subSysElecList.filter((x) => x.building_tag == pageAct.buiTag)[0]
-                            ?.device_number ?? "";
-                    getSubBaja();
-                    getElectricBaja();
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    }
+          tarElePath =
+            subSysElecList.filter((x) => x.building_tag == pageAct.buiTag)[0]
+              ?.device_number ?? "";
+          getSubBaja();
+          getElectricBaja();
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  }
 
-    function getSubBaja() {
-        let devPath = tarElePath.split("/")[1]?.split("_").slice(0, 8).join("/");
-        let tempOrdPath = { devicePath: devPath };
-        let myBaja = new subscriptionElectricmeter();
+  function getSubBaja() {
+    let devPath = tarElePath.split("/")[1]?.split("_").slice(0, 8).join("/");
+    let tempOrdPath = { devicePath: devPath };
+    let myBaja = new subscriptionElectricmeter();
 
-        myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
-        myBaja.setSubscribeElectricmeterCallBack(function (data) {
-            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));
-            }
-        });
-        myBaja.setSubscribeElectricmeterEndCallBack(function () {
-            chkBajaLoaded();
-        });
-    }
+    myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
+    myBaja.setSubscribeElectricmeterCallBack(function (data) {
+      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));
+      }
+    });
+    myBaja.setSubscribeElectricmeterEndCallBack(function () {
+      chkBajaLoaded();
+    });
+  }
 
-    function getContractValueChange(compus) {
-        let devPath = `Data/${compus}`;
-        BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
-            let value = data
-                .find(({ point_name }) => point_name === "P")
-                ?.value.replaceAll(",", "");
+  function getContractValueChange(compus) {
+    let devPath = `Data/${compus}`;
+    BajaSubscribeElectricmeterByBql({ devicePath: devPath }, (data) => {
+      let value = data
+        .find(({ point_name }) => point_name === "P")
+        ?.value.replaceAll(",", "");
 
-            if (value && compus === "Area1") {
-                if (data.some(({ point_name }) => point_name === "Capacity")) {
-                    contractCapacityForchart1 = data.find(
-                        ({ point_name }) => point_name === "Capacity"
-                    )?.value;
-                }
-                chartContractValue(
-                    "contractValueChart",
-                    ((value / contractCapacityForchart1) * 100).roundDecimal(2)
-                );
-            } else if (value && compus === "Area2") {
-                if (data.some(({ point_name }) => point_name === "Capacity")) {
-                    contractCapacityForchart2 = data.find(
-                        ({ point_name }) => point_name === "Capacity"
-                    )?.value;
-                }
-                chartContractValue(
-                    "contractValueChart2",
-                    ((value / contractCapacityForchart1) * 100).roundDecimal(2)
-                );
-            }
-        });
-    }
-
-    //從 baja 取得電表用電量
-    function getElectricBaja() {
-        let devNum =
-            tarElePath.split("/")[0] +
-            "/" +
-            tarElePath.split("/")[1].split("_").slice(0, 9).join("_");
-        let devPath =
-            tarElePath.split("/")[0] +
-            "/" +
-            tarElePath.split("/")[1].split("_").slice(0, 9).join("_");
-
-        let today =
-            displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00";
-        let prevTwoWeek =
-            displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") +
-            "T00:00:00";
-        let yesterday =
-            displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") +
-            "T00:00:00";
-        let tomorrow =
-            displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") +
-            "T00:00:00";
-
-        // 今日用電量
-        getElectricMeterDayDataByBaja(devNum, n4Sup, today, tomorrow, (data) => {
-            let result = data?.data[0]?.sum;
-            result = result ? parseFloat(result).toFixed(2) : 0;
-            $("#todayUseElec").text(result);
-            chkBajaLoaded();
-        });
-
-        // 今日用電量 (每小時)
-        getElectricMeterHourDataByBaja(
-            devNum,
-            n4Sup,
-            yesterday,
-            tomorrow,
-            (data) => {
-                let todayData = data.data.filter(
-                    (x) =>
-                        x.timestamp.$date.$year == getTimeByType("year") &&
-                        x.timestamp.$date.$month == getTimeByType("month") &&
-                        x.timestamp.$date.$day == getTimeByType("date")
-                );
-                let yesData = data.data.filter(
-                    (x) =>
-                        x.timestamp.$date.$year == getTimeByType("year", -1) &&
-                        x.timestamp.$date.$month == getTimeByType("month", -1) &&
-                        x.timestamp.$date.$day == getTimeByType("date", -1)
-                );
-                chartEveDaysElec(todayData, yesData);
-                chkBajaLoaded();
-            }
+      if (value && compus === "Area1") {
+        if (data.some(({ point_name }) => point_name === "Capacity")) {
+          contractCapacityForchart1 = data.find(
+            ({ point_name }) => point_name === "Capacity"
+          )?.value;
+        }
+        chartContractValue(
+          "contractValueChart",
+          ((value / contractCapacityForchart1) * 100).roundDecimal(2)
         );
-
-        // 昨日用電量
-        getElectricMeterDayDataByBaja(devNum, n4Sup, yesterday, today, (data) => {
-            let result = data?.data[0]?.sum;
-            result = result ? parseFloat(result).toFixed(2) : 0;
-            $("#yesUseElec").text(result);
-            chkBajaLoaded();
-        });
-
-        // 本週與上週用電量 (每天)
-        getElectricMeterDayDataByBaja(
-            devNum,
-            n4Sup,
-            prevTwoWeek,
-            tomorrow,
-            (data) => {
-                let curDay = new Date().getDay() == 0 ? 7 : new Date().getDay();
-                let curWeekData = data.data.filter(
-                    (x) =>
-                        strToDate(displayDate(new Date(), "date"), null, 1 - 7) <=
-                        strToDate(x.timestamp.$cEncStr)
-                );
-                let prevWeekData = data.data.filter(
-                    (x) =>
-                        strToDate(displayDate(new Date(), "date"), null, 1 - 14) <=
-                        strToDate(x.timestamp.$cEncStr) &&
-                        strToDate(new Date(), null, 1 - 7) >=
-                        strToDate(x.timestamp.$cEncStr)
-                );
-
-                chartEveWeeksElec(curWeekData, prevWeekData);
-                chkBajaLoaded();
-            }
+      } else if (value && compus === "Area2") {
+        if (data.some(({ point_name }) => point_name === "Capacity")) {
+          contractCapacityForchart2 = data.find(
+            ({ point_name }) => point_name === "Capacity"
+          )?.value;
+        }
+        chartContractValue(
+          "contractValueChart2",
+          ((value / contractCapacityForchart2) * 100).roundDecimal(2)
         );
+      }
+    });
+  }
 
-        // 本月及上月用電
-        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;
-                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();
-            }
-        );
+  //從 baja 取得電表用電量
+  function getElectricBaja() {
+    let devNum =
+      tarElePath.split("/")[0] +
+      "/" +
+      tarElePath.split("/")[1].split("_").slice(0, 9).join("_");
+    let devPath =
+      tarElePath.split("/")[0] +
+      "/" +
+      tarElePath.split("/")[1].split("_").slice(0, 9).join("_");
 
-        // 異常數量與復歸數量
-        // getAlarmCountByBaja((aData) => {
-        //   chartDataCnt.alarmCnt = aData;
-        //   chkBajaLoaded();
-        // });
-        // getRecoverCountByBaja((rData) => {
-        //   chartDataCnt.recCnt = rData;
-        //   chkBajaLoaded();
-        // });
-        // // 異常數量與復歸數量
-        // getCheckedAckedCountByBaja((data) => {
-        //   chartDataCnt.chkedErrCnt = data;
-        //   chkBajaLoaded();
-        // });
+    let today =
+      displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00";
+    let prevTwoWeek =
+      displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") +
+      "T00:00:00";
+    let yesterday =
+      displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") +
+      "T00:00:00";
+    let tomorrow =
+      displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") +
+      "T00:00:00";
 
-        // 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,
-        //       ]);
-        //     });
-        // });
-    }
-
-    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");
-        // }
-    }
-
-    // 圖表 - 今天與昨天用電量 (長條圖)
-    function chartEveDaysElec(todayData, yesData) {
-        let eveDayElecChartCanvas = $("#eveDayElecChart").get(0).getContext("2d");
-        let curHour = new Date().getHours();
-        todayData.data = todayData.filter((x) => x.timestamp.$time.$hour < curHour);
-        yesData.data = yesData.filter((x) => x.timestamp.$time.$hour < curHour);
-        let eveDayElecChartData = {
-            labels: todayData?.data.map((x) => x.timestamp.$time.$hour),
-            datasets: [
-                {
-                    id: "today",
-                    type: "bar",
-                    label: "今日用電量",
-                    fill: false,
-                    backgroundColor: color.success._500,
-                    borderColor: color.success._500,
-                    pointColor: color.success._500,
-                    pointBackgroundColor: color.main1,
-                    data: todayData?.data.map((x) => x.sum),
-                    order: 2,
-                },
-                {
-                    id: "yesterday",
-                    type: "bar",
-                    label: "昨日用電量",
-                    fill: false,
-                    backgroundColor: color.info._100,
-                    borderColor: color.info._100,
-                    pointColor: color.info._100,
-                    pointBackgroundColor: color.info._100,
-                    data: yesData?.data.map((x) => x.sum),
-                    order: 1,
-                },
-            ],
-        };
-
-        let eveDayElecChartOptions = {
-            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) {
-                        let result =
-                            tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
-                        return result;
-                    },
-                },
-            },
-        };
-
-        if (eveDayElecChart == null) {
-            // console.log(eveDayElecChart)
-            eveDayElecChart = new Chart(eveDayElecChartCanvas, {
-                data: eveDayElecChartData,
-                options: eveDayElecChartOptions,
-            });
-            // console.log(eveDayElecChart)
-        } else {
-            eveDayElecChart.data.datasets.forEach((dataset) => {
-                if (dataset.order == 1) {
-                    dataset.data = todayData?.data.map((x) => x.sum);
-                } else {
-                    dataset.data = yesData?.data.map((x) => x.sum);
-                }
-            });
-        }
-    }
-
-    // 圖表 - 這週與上週用電量 (長條圖)
-    function chartEveWeeksElec(curWeekData, prevWeekData) {
-        // console.log(curWeekData.map(x => x.sum),prevWeekData.map(x => x.sum))
-        let eveWeekElecChartCanvas = $("#eveWeekElecChart").get(0).getContext("2d");
-
-        let eveWeekElecChartData = {
-            labels: curWeekData.map((x) =>
-                dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))
-            ),
-            datasets: [
-                {
-                    id: "today",
-                    type: "bar",
-                    label: "本週用電量",
-                    fill: false,
-                    backgroundColor: color.success._500,
-                    borderColor: color.success._500,
-                    pointColor: color.success._500,
-                    pointBackgroundColor: color.success._500,
-                    data: curWeekData.map((x) => x.sum),
-                    order: 2,
-                },
-                {
-                    id: "yesterday",
-                    type: "bar",
-                    label: "上週用電量",
-                    fill: false,
-                    backgroundColor: color.info._100,
-                    borderColor: color.info._100,
-                    pointColor: color.info._100,
-                    pointBackgroundColor: color.info._100,
-                    data: prevWeekData.map((x) => x.sum),
-                    order: 1,
-                },
-            ],
-        };
-        // console.log(eveWeekElecChartData)
-        let eveWeekElecChartOptions = {
-            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 (eveWeekElecChart == null) {
-            eveWeekElecChart = new Chart(eveWeekElecChartCanvas, {
-                data: eveWeekElecChartData,
-                options: eveWeekElecChartOptions,
-            });
-            // console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions)
-        } else {
-            eveWeekElecChart.data.datasets.forEach((dataset) => {
-                if (dataset.order == 1) {
-                    dataset.data = curWeekData.map((x) => x.sum);
-                } else {
-                    dataset.data = prevWeekData.map((x) => x.sum);
-                }
-            });
-        }
-    }
-
-    // 圖表 - 本月即上月用電量
-    function chartEveMonsElec(curMonData, prevMonData) {
-        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"));
-
-        let errRecChartData = {
-            labels: labelsFn(),
-            datasets: [
-                {
-                    label: "數量",
-                    unit: "個",
-                    fill: true,
-                    backgroundColor: [color.danger._500, color.info._300],
-                    data: datas,
-                },
-            ],
-        };
-
-        let errRecChartOptions = {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                legend: {
-                    display: true,
-                    labels: {
-                        color: "#fff",
-                    },
-                },
-            },
-            tooltips: {
-                enabled: true,
-            },
-        };
-
-        // This will get the first returned node in the jQuery collection.
-        if (errRecChart == null) {
-            errRecChart = new Chart(errRecChartCanvas, {
-                type: "pie",
-                data: errRecChartData,
-                options: errRecChartOptions,
-            });
-        } else {
-            errRecChart.data.datasets.forEach((dataset) => {
-                dataset.data = datas;
-            });
-        }
-    }
-
-    // 圖表 - 異常確認與未確認圖表 (圓餅圖)
-    function chartErrChk(labelsFn, datas) {
-        let errChkChartCanvas = (ctx = $("#errChkChart").get(0).getContext("2d"));
-
-        let errChkChartData = {
-            labels: labelsFn(),
-            datasets: [
-                {
-                    label: "數量",
-                    unit: "個",
-                    fill: true,
-                    backgroundColor: [color.danger._500, color.info._300],
-                    data: datas,
-                },
-            ],
-        };
-
-        let errChkChartOptions = {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                legend: {
-                    display: true,
-                    labels: {
-                        color: "#fff",
-                    },
-                },
-            },
-            tooltips: {
-                enabled: true,
-            },
-        };
-
-        if (errChkChart == null) {
-            errChkChart = new Chart(errChkChartCanvas, {
-                type: "pie",
-                data: errChkChartData,
-                options: errChkChartOptions,
-            });
-        } else {
-            errChkChart.data.datasets.forEach((dataset) => {
-                dataset.data = datas;
-            });
-        }
-    }
-
-    // 圖表 - 異常未派工與異常已派工 (圓環圖)
-    function chartWorOrdErr(datas) {
-        let labels = [`未派工 ${datas[0]}`, `已派工 ${datas[1]}`];
-        let worOrdErrChartCanvas = (ctx = $("#worOrdErrChart")
-            .get(0)
-            .getContext("2d"));
-
-        let worOrdErrChartData = {
-            labels: labels,
-            datasets: [
-                {
-                    label: "數量",
-                    unit: "個",
-                    fill: true,
-                    backgroundColor: [color.danger._500, color.info._300],
-                    data: datas,
-                },
-            ],
-        };
-
-        let worOrdErrChartOptions = {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                legend: {
-                    display: true,
-                    labels: {
-                        color: "#fff",
-                    },
-                },
-            },
-            tooltips: {
-                enabled: true,
-            },
-        };
-
-        if (worOrdErrChart == null) {
-            worOrdErrChart = new Chart(worOrdErrChartCanvas, {
-                type: "doughnut",
-                data: worOrdErrChartData,
-                options: worOrdErrChartOptions,
-            });
-        } else {
-            worOrdErrChart.data.datasets.forEach((dataset) => {
-                dataset.data = datas;
-            });
-        }
-    }
-
-    // 圖表 - 工單已完成與工單未完成 (圓環圖)
-    function chartWorOrdFin(datas) {
-        let labels = [`已完成 ${datas[0]}`, `未完成 ${datas[1]}`];
-        let worOrdFinChartCanvas = (ctx = $("#worOrdFinChart")
-            .get(0)
-            .getContext("2d"));
-
-        let worOrdFinChartData = {
-            labels: labels,
-            datasets: [
-                {
-                    label: "數量",
-                    unit: "個",
-                    fill: true,
-                    backgroundColor: [color.danger._500, color.info._300],
-                    data: datas,
-                },
-            ],
-        };
-
-        let worOrdFinChartOptions = {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                legend: {
-                    display: true,
-                    labels: {
-                        color: "#fff",
-                    },
-                },
-            },
-            tooltips: {
-                enabled: true,
-            },
-        };
-
-        if (worOrdFinChart == null) {
-            worOrdFinChart = new Chart(worOrdFinChartCanvas, {
-                type: "doughnut",
-                data: worOrdFinChartData,
-                options: worOrdFinChartOptions,
-            });
-        } else {
-            worOrdFinChart.data.datasets.forEach((dataset) => {
-                dataset.data = datas;
-            });
-        }
-    }
-
-    // 圖表 - 取得契約容量
-    function chartContractValue(ele, value) {
-        var chartDom = document.getElementById(ele);
-        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: 20,
-                    },
-                    data: [
-                        {
-                            value,
-                        },
-                    ],
-                },
-            ],
-        };
-
-        option && contractValueChart.setOption(option);
-    }
-
-    function changeContractValueChart(value) {
-        contractValueChart.setOption({
-            series: [
-                {
-                    data: [
-                        {
-                            value,
-                        },
-                    ],
-                },
-            ],
-        });
-    }
-
-    // 從 baja 訂閱 左下角各系統小類異常狀態
-    function getAlarmSub(data) {
-        $.each(data.data, (idx, alaObj) => {
-            if (alaObj.alarmClass.indexOf("_") != -1) {
-                let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
-                const img = $(
-                    `.btn-group.dev-group[data-id*='${mainSubSys}'] img`
-                )[0]?.src.split(".");
-                if (img?.length > 0) {
-                    img[img.length - 1] = "gif";
-                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src =
-                        img.join(".");
-                    // console.log($(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src)
-                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass(
-                        "blink"
-                    );
-                }
-            }
-        });
-        $(`.dev-group img.blink`).each((idx, ele) => {
-            let devPath = $(ele).parents(".dev-group").data("id");
-            let sysPath = devPath.split("/").slice(3, 5).join("/");
-            let alaDevPath = data.data.map((x) =>
-                x.alarmClass?.split("_").slice(0, 2).join("/")
-            );
-            if (alaDevPath.indexOf(sysPath) == -1) {
-                const img = $(
-                    `.btn-group.dev-group[data-id*='${sysPath}'] img`
-                )[0]?.src.split(".");
-                if (img?.length) {
-                    img[img.length - 1] = "png";
-                    $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src =
-                        img.join(".");
-                    $(ele).removeClass("blink");
-                }
-            }
-        });
-    }
-
-    function show3DModel() {
-        if (typeof launchViewerNoTools != "undefined") {
-            launchViewerNoTools(
-                pageAct.urn,
-                (viewer) => {
-                    let elevOption = {
-                        selector: "#forgeViewer",
-                        viewer: viewer,
-                        ordPath: {
-                            area_tag: pageAct.AreaTag,
-                            building_tag: pageAct.buiTag,
-                        },
-                    };
-
-                    // 電梯移動訂閱程序載入
-                    if (elevatorShow) {
-                        let forge3DElev = new Forge3DElevFull(elevOption);
-                        forge3DElev.bajaEndCallback = function () {
-                            endPageLoading();
-                        };
-                        forge3DElev.init();
-                    }
-                },
-                () => {
-                    endPageLoading();
-                }
-            );
-        }
-    }
-
-    $(window).on("timeout:5m", function () {
-        console.log("五分鐘更新");
-        getElectricBaja();
+    // 今日用電量
+    getElectricMeterDayDataByBaja(devNum, n4Sup, today, tomorrow, (data) => {
+      let result = data?.data[0]?.sum;
+      result = result ? parseFloat(result).toFixed(2) : 0;
+      $("#todayUseElec").text(result);
+      chkBajaLoaded();
     });
 
-    onEvent("click", "button[id^=sysSubCardBtn]", function () {
-        let subSysTag = $(this).data("id");
-        $(
-            `#subSysBtn${subSysTag}[data-building-tag='${buildingTagOnJquery(
-                pageAct.buiTag
-            )}']`
-        ).click();
+    // 今日用電量 (每小時)
+    getElectricMeterHourDataByBaja(
+      devNum,
+      n4Sup,
+      yesterday,
+      tomorrow,
+      (data) => {
+        let todayData = data.data.filter(
+          (x) =>
+            x.timestamp.$date.$year == getTimeByType("year") &&
+            x.timestamp.$date.$month == getTimeByType("month") &&
+            x.timestamp.$date.$day == getTimeByType("date")
+        );
+        let yesData = data.data.filter(
+          (x) =>
+            x.timestamp.$date.$year == getTimeByType("year", -1) &&
+            x.timestamp.$date.$month == getTimeByType("month", -1) &&
+            x.timestamp.$date.$day == getTimeByType("date", -1)
+        );
+        chartEveDaysElec(todayData, yesData);
+        chkBajaLoaded();
+      }
+    );
+
+    // 昨日用電量
+    getElectricMeterDayDataByBaja(devNum, n4Sup, yesterday, today, (data) => {
+      let result = data?.data[0]?.sum;
+      result = result ? parseFloat(result).toFixed(2) : 0;
+      $("#yesUseElec").text(result);
+      chkBajaLoaded();
     });
+
+    // 本週與上週用電量 (每天)
+    getElectricMeterDayDataByBaja(
+      devNum,
+      n4Sup,
+      prevTwoWeek,
+      tomorrow,
+      (data) => {
+        let curDay = new Date().getDay() == 0 ? 7 : new Date().getDay();
+        let curWeekData = data.data.filter(
+          (x) =>
+            strToDate(displayDate(new Date(), "date"), null, 1 - 7) <=
+            strToDate(x.timestamp.$cEncStr)
+        );
+        let prevWeekData = data.data.filter(
+          (x) =>
+            strToDate(displayDate(new Date(), "date"), null, 1 - 14) <=
+            strToDate(x.timestamp.$cEncStr) &&
+            strToDate(new Date(), null, 1 - 7) >=
+            strToDate(x.timestamp.$cEncStr)
+        );
+
+        chartEveWeeksElec(curWeekData, prevWeekData);
+        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() + 2 < 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;
+        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();
+      }
+    );
+
+    // 異常數量與復歸數量
+    // 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,
+    //       ]);
+    //     });
+    // });
+  }
+
+  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");
+    // }
+  }
+
+  // 圖表 - 今天與昨天用電量 (長條圖)
+  function chartEveDaysElec(todayData, yesData) {
+    let eveDayElecChartCanvas = $("#eveDayElecChart").get(0).getContext("2d");
+    let curHour = new Date().getHours();
+    todayData.data = todayData.filter((x) => x.timestamp.$time.$hour < curHour);
+    yesData.data = yesData.filter((x) => x.timestamp.$time.$hour < curHour);
+    let eveDayElecChartData = {
+      labels: todayData?.data.map((x) => x.timestamp.$time.$hour),
+      datasets: [
+        {
+          id: "today",
+          type: "bar",
+          label: "今日用電量",
+          fill: false,
+          backgroundColor: color.success._500,
+          borderColor: color.success._500,
+          pointColor: color.success._500,
+          pointBackgroundColor: color.main1,
+          data: todayData?.data.map((x) => x.sum),
+          order: 2,
+        },
+        {
+          id: "yesterday",
+          type: "bar",
+          label: "昨日用電量",
+          fill: false,
+          backgroundColor: color.info._100,
+          borderColor: color.info._100,
+          pointColor: color.info._100,
+          pointBackgroundColor: color.info._100,
+          data: yesData?.data.map((x) => x.sum),
+          order: 1,
+        },
+      ],
+    };
+
+    let eveDayElecChartOptions = {
+      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) {
+            let result =
+              tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
+            return result;
+          },
+        },
+      },
+    };
+
+    if (eveDayElecChart == null) {
+      // console.log(eveDayElecChart)
+      eveDayElecChart = new Chart(eveDayElecChartCanvas, {
+        data: eveDayElecChartData,
+        options: eveDayElecChartOptions,
+      });
+      // console.log(eveDayElecChart)
+    } else {
+      eveDayElecChart.data.datasets.forEach((dataset) => {
+        if (dataset.order == 1) {
+          dataset.data = todayData?.data.map((x) => x.sum);
+        } else {
+          dataset.data = yesData?.data.map((x) => x.sum);
+        }
+      });
+    }
+  }
+
+  // 圖表 - 這週與上週用電量 (長條圖)
+  function chartEveWeeksElec(curWeekData, prevWeekData) {
+    // console.log(curWeekData.map(x => x.sum),prevWeekData.map(x => x.sum))
+    let eveWeekElecChartCanvas = $("#eveWeekElecChart").get(0).getContext("2d");
+
+    let eveWeekElecChartData = {
+      labels: curWeekData.map((x) =>
+        dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))
+      ),
+      datasets: [
+        {
+          id: "today",
+          type: "bar",
+          label: "本週用電量",
+          fill: false,
+          backgroundColor: color.success._500,
+          borderColor: color.success._500,
+          pointColor: color.success._500,
+          pointBackgroundColor: color.success._500,
+          data: curWeekData.map((x) => x.sum),
+          order: 2,
+        },
+        {
+          id: "yesterday",
+          type: "bar",
+          label: "上週用電量",
+          fill: false,
+          backgroundColor: color.info._100,
+          borderColor: color.info._100,
+          pointColor: color.info._100,
+          pointBackgroundColor: color.info._100,
+          data: prevWeekData.map((x) => x.sum),
+          order: 1,
+        },
+      ],
+    };
+    // console.log(eveWeekElecChartData)
+    let eveWeekElecChartOptions = {
+      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 (eveWeekElecChart == null) {
+      eveWeekElecChart = new Chart(eveWeekElecChartCanvas, {
+        data: eveWeekElecChartData,
+        options: eveWeekElecChartOptions,
+      });
+      // console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions)
+    } else {
+      eveWeekElecChart.data.datasets.forEach((dataset) => {
+        if (dataset.order == 1) {
+          dataset.data = curWeekData.map((x) => x.sum);
+        } else {
+          dataset.data = prevWeekData.map((x) => x.sum);
+        }
+      });
+    }
+  }
+
+  // 圖表 - 本月即上月用電量
+  function chartEveMonsElec(curMonData, prevMonData) {
+    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"));
+
+    let errRecChartData = {
+      labels: labelsFn(),
+      datasets: [
+        {
+          label: "數量",
+          unit: "個",
+          fill: true,
+          backgroundColor: [color.danger._500, color.info._300],
+          data: datas,
+        },
+      ],
+    };
+
+    let errRecChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      plugins: {
+        legend: {
+          display: true,
+          labels: {
+            color: "#fff",
+          },
+        },
+      },
+      tooltips: {
+        enabled: true,
+      },
+    };
+
+    // This will get the first returned node in the jQuery collection.
+    if (errRecChart == null) {
+      errRecChart = new Chart(errRecChartCanvas, {
+        type: "pie",
+        data: errRecChartData,
+        options: errRecChartOptions,
+      });
+    } else {
+      errRecChart.data.datasets.forEach((dataset) => {
+        dataset.data = datas;
+      });
+    }
+  }
+
+  // 圖表 - 異常確認與未確認圖表 (圓餅圖)
+  function chartErrChk(labelsFn, datas) {
+    let errChkChartCanvas = (ctx = $("#errChkChart").get(0).getContext("2d"));
+
+    let errChkChartData = {
+      labels: labelsFn(),
+      datasets: [
+        {
+          label: "數量",
+          unit: "個",
+          fill: true,
+          backgroundColor: [color.danger._500, color.info._300],
+          data: datas,
+        },
+      ],
+    };
+
+    let errChkChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      plugins: {
+        legend: {
+          display: true,
+          labels: {
+            color: "#fff",
+          },
+        },
+      },
+      tooltips: {
+        enabled: true,
+      },
+    };
+
+    if (errChkChart == null) {
+      errChkChart = new Chart(errChkChartCanvas, {
+        type: "pie",
+        data: errChkChartData,
+        options: errChkChartOptions,
+      });
+    } else {
+      errChkChart.data.datasets.forEach((dataset) => {
+        dataset.data = datas;
+      });
+    }
+  }
+
+  // 圖表 - 異常未派工與異常已派工 (圓環圖)
+  function chartWorOrdErr(datas) {
+    let labels = [`未派工 ${datas[0]}`, `已派工 ${datas[1]}`];
+    let worOrdErrChartCanvas = (ctx = $("#worOrdErrChart")
+      .get(0)
+      .getContext("2d"));
+
+    let worOrdErrChartData = {
+      labels: labels,
+      datasets: [
+        {
+          label: "數量",
+          unit: "個",
+          fill: true,
+          backgroundColor: [color.danger._500, color.info._300],
+          data: datas,
+        },
+      ],
+    };
+
+    let worOrdErrChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      plugins: {
+        legend: {
+          display: true,
+          labels: {
+            color: "#fff",
+          },
+        },
+      },
+      tooltips: {
+        enabled: true,
+      },
+    };
+
+    if (worOrdErrChart == null) {
+      worOrdErrChart = new Chart(worOrdErrChartCanvas, {
+        type: "doughnut",
+        data: worOrdErrChartData,
+        options: worOrdErrChartOptions,
+      });
+    } else {
+      worOrdErrChart.data.datasets.forEach((dataset) => {
+        dataset.data = datas;
+      });
+    }
+  }
+
+  // 圖表 - 工單已完成與工單未完成 (圓環圖)
+  function chartWorOrdFin(datas) {
+    let labels = [`已完成 ${datas[0]}`, `未完成 ${datas[1]}`];
+    let worOrdFinChartCanvas = (ctx = $("#worOrdFinChart")
+      .get(0)
+      .getContext("2d"));
+
+    let worOrdFinChartData = {
+      labels: labels,
+      datasets: [
+        {
+          label: "數量",
+          unit: "個",
+          fill: true,
+          backgroundColor: [color.danger._500, color.info._300],
+          data: datas,
+        },
+      ],
+    };
+
+    let worOrdFinChartOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      plugins: {
+        legend: {
+          display: true,
+          labels: {
+            color: "#fff",
+          },
+        },
+      },
+      tooltips: {
+        enabled: true,
+      },
+    };
+
+    if (worOrdFinChart == null) {
+      worOrdFinChart = new Chart(worOrdFinChartCanvas, {
+        type: "doughnut",
+        data: worOrdFinChartData,
+        options: worOrdFinChartOptions,
+      });
+    } else {
+      worOrdFinChart.data.datasets.forEach((dataset) => {
+        dataset.data = datas;
+      });
+    }
+  }
+
+  // 圖表 - 取得契約容量
+  function chartContractValue(ele, value) {
+    var chartDom = document.getElementById(ele);
+    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: 20,
+          },
+          data: [
+            {
+              value,
+            },
+          ],
+        },
+      ],
+    };
+
+    option && contractValueChart.setOption(option);
+  }
+
+  function changeContractValueChart(value) {
+    contractValueChart.setOption({
+      series: [
+        {
+          data: [
+            {
+              value,
+            },
+          ],
+        },
+      ],
+    });
+  }
+
+  // 從 baja 訂閱 左下角各系統小類異常狀態
+  function getAlarmSub(data) {
+    $.each(data.data, (idx, alaObj) => {
+      if (alaObj.alarmClass.indexOf("_") != -1) {
+        let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
+        const img = $(
+          `.btn-group.dev-group[data-id*='${mainSubSys}'] img`
+        )[0]?.src.split(".");
+        if (img?.length > 0) {
+          img[img.length - 1] = "gif";
+          $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src =
+            img.join(".");
+          // console.log($(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src)
+          $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass(
+            "blink"
+          );
+        }
+      }
+    });
+    $(`.dev-group img.blink`).each((idx, ele) => {
+      let devPath = $(ele).parents(".dev-group").data("id");
+      let sysPath = devPath.split("/").slice(3, 5).join("/");
+      let alaDevPath = data.data.map((x) =>
+        x.alarmClass?.split("_").slice(0, 2).join("/")
+      );
+      if (alaDevPath.indexOf(sysPath) == -1) {
+        const img = $(
+          `.btn-group.dev-group[data-id*='${sysPath}'] img`
+        )[0]?.src.split(".");
+        if (img?.length) {
+          img[img.length - 1] = "png";
+          $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src =
+            img.join(".");
+          $(ele).removeClass("blink");
+        }
+      }
+    });
+  }
+
+  function show3DModel() {
+    if (typeof launchViewerNoTools != "undefined") {
+      launchViewerNoTools(
+        pageAct.urn,
+        (viewer) => {
+          let elevOption = {
+            selector: "#forgeViewer",
+            viewer: viewer,
+            ordPath: {
+              area_tag: pageAct.AreaTag,
+              building_tag: pageAct.buiTag,
+            },
+          };
+
+          // 電梯移動訂閱程序載入
+          if (elevatorShow) {
+            let forge3DElev = new Forge3DElevFull(elevOption);
+            forge3DElev.bajaEndCallback = function () {
+              endPageLoading();
+            };
+            forge3DElev.init();
+          }
+        },
+        () => {
+          endPageLoading();
+        }
+      );
+    }
+  }
+
+  $(window).on("timeout:5m", function () {
+    console.log("五分鐘更新");
+    getElectricBaja();
+  });
+
+  onEvent("click", "button[id^=sysSubCardBtn]", function () {
+    let subSysTag = $(this).data("id");
+    $(
+      `#subSysBtn${subSysTag}[data-building-tag='${buildingTagOnJquery(
+        pageAct.buiTag
+      )}']`
+    ).click();
+  });
 </script>