diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index 1488571..ae097f7 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -1,1055 +1,1080 @@
 <main id="js-page-content" role="main" class="page-content">
-    <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 id="forgeViewer"
-                 class="position-absolute"
-                 style="width: 96%; height: 96%"></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>
-    </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-lg-8">
-            <div class="row" id="sysSubBtnList"></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>
-                </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>
+      <!-- <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>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-12 col-lg-4">
+      <div class="row" id="sysSubBtnList"></div>
+    </div>
+    <div class="col-sm-12 col-lg-4">
+      <div class="row"></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>
+        </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 worOrdErrChart = null;
-    var worOrdFinChart = null;
-    var errRecChart = null;
-    var errChkChart = null;
-    var loadedCnt = 0;
-    var chartDataCnt = {
-        alarmCnt: 0,
-        recCnt: 0,
-        chkedErrCnt: 0,
-        unChkedErrCnt: 0,
+  var eveDayElecChart = null;
+  var eveWeekElecChart = null;
+  var worOrdErrChart = null;
+  var worOrdFinChart = null;
+  var errRecChart = null;
+  var errChkChart = null;
+  var loadedCnt = 0;
+  var chartDataCnt = {
+    alarmCnt: 0,
+    recCnt: 0,
+    chkedErrCnt: 0,
+    unChkedErrCnt: 0,
+  };
+  var contractCapacity = 0;
+
+  var sysIconList = [
+    { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
+    { mainSys: "EE", subSys: "E2", iconClass: "./gif/E2_white.png" },
+    { mainSys: "EE", subSys: "E3", iconClass: "./gif/E3_white.png" },
+    { mainSys: "EE", subSys: "E4", iconClass: "./gif/E4-1_white.png" }, // 電表
+    { mainSys: "LT", subSys: "L1", iconClass: "./gif/L1_white.png" },
+    { mainSys: "LT", subSys: "L2", iconClass: "./gif/L2_white.png" }, // 景觀照明 0131目前沒有
+    { mainSys: "ME", subSys: "M1", iconClass: "./gif/M1_white.png" }, // 儲冰 0131目前沒有
+    { mainSys: "ME", subSys: "M5", iconClass: "./gif/M5-2_white.png" }, // 送排風
+    { mainSys: "ME", subSys: "M8", iconClass: "./gif/M8_white.png" }, // 排油煙0131目前沒有
+    { mainSys: "ME", subSys: "M10", iconClass: "./gif/M10_white.png" },
+    { mainSys: "ME", subSys: "M12", iconClass: "./gif/M12_white.png" },
+    { mainSys: "ELEV", subSys: "EL", iconClass: "./gif/EL_white.png" },
+    { mainSys: "FE", subSys: "F1", iconClass: "./gif/F1_white.png" },
+    { mainSys: "FE", subSys: "F2", iconClass: "./gif/lamp_white.png" }, // 排煙 0131目前沒有
+    { mainSys: "WP", subSys: "W1", iconClass: "./gif/W1_white.png" }, // 電子水表0131目前沒有
+    { mainSys: "WP", subSys: "W2", iconClass: "./gif/W2_white.png" },
+    { mainSys: "WP", subSys: "P1", iconClass: "./gif/P1_white.png" },
+    { mainSys: "S", subSys: "C", iconClass: "./gif/C_white.png" }, // CCTV
+    { mainSys: "S", subSys: "P", iconClass: "./gif/P_white.png" }, // 緊急求救
+    { mainSys: "S", subSys: "R", iconClass: "./gif/R_white.png" }, // 門禁
+    { mainSys: "P", subSys: "PSC", iconClass: "./gif/PSC_white.png" }, // 停管
+    { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有
+  ];
+
+  var tempSysSubText = [
+    { text: "水錶系統", mainSys: "WP", subSys: "W1" },
+    { text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2
+    { text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3
+    { text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
+    { text: "太陽能管理", mainSys: "S", subSys: "C" }, //12
+    { text: "冰水主機", mainSys: "WP", subSys: "W2" }, // 6
+    { text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
+    { text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
+    { text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4
+    { text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5
+    { text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7
+    { text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8
+    { text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9
+    { text: "消防設備", mainSys: "FE", subSys: "F1" }, //11
+    { text: "門禁系統", mainSys: "S", subSys: "R" }, //13
+    { text: "停管系統", mainSys: "P", subSys: "PSC" }, //14
+    { text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15
+    { text: "送排風系統", mainSys: "ME", subSys: "M5" }, //16
+    //{ text: "景觀照明系統", mainSys: "LT", subSys: "L2", },
+    //{ text: "儲冰系統", mainSys: "ME", subSys: "M1", },
+    // { text: "排油煙設備", mainSys: "ME", subSys: "M8", },
+    //{ text: "排煙系統", mainSys: "FE", subSys: "F2", },
+    //{ text: "電子水錶", mainSys: "WP", subSys: "W1", },
+    // { text: "熱水系統", mainSys: "W3", subSys: "W1", },
+  ];
+
+  $(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 = ``;
+
+    $.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="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center">
+                                <img src="${iconObj.iconClass}" class="w-100"></img>
+                                </button>
+                            <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
+                        </div>`;
+        $("#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="alert" type="button" class="btn btn-secondary col-4">
+                                <img src="${iconClass}" class="w-100 "></img>
+                                </button>
+                            <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
+                        </div>`;
+            });
+          });
+          $("#sysSubBtnList").html(strHtml);
+          demoSubList();
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  }
+  // 取得 自動須量
+  function getAutDemVal() {
+    let url = baseApiUrl + "/api/Energe/GetAutDemVal";
+    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 setKeyValue = {};
+          $.each(res.data || [], (idx, data) => {
+            setKeyValue[data.system_key] = data.system_value || 0;
+            })
+          contractCapacity = setKeyValue["contract_capacity"];
+          getFirstEletric()
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  }
+  //取得第一筆電錶
+  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;
+
+          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();
+
+    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();
+    });
+  }
+
+  //從 baja 取得電表用電量
+  function getElectricBaja() {
+    let devNum =
+      tarElePath.split("/")[0] +
+      "/" +
+      tarElePath.split("/")[1].split("_").slice(0, 8).join("_");
+    let devPath =
+      tarElePath.split("/")[0] +
+      "/" +
+      tarElePath.split("/")[1].split("_").slice(0, 8).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 + "_KWH",
+      n4Sup,
+      today,
+      tomorrow,
+      (data) => {
+        let result = data?.data[0]?.sum;
+        result = result ? parseFloat(result).toFixed(2) : 0;
+        $("#todayUseElec").text(result);
+        chkBajaLoaded();
+      }
+    );
+
+    // 今日用電量 (每小時)
+    getElectricMeterHourDataByBaja(
+      devNum + "_KWH",
+      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 + "_KWH",
+      n4Sup,
+      yesterday,
+      today,
+      (data) => {
+        let result = data?.data[0]?.sum;
+        result = result ? parseFloat(result).toFixed(2) : 0;
+        $("#yesUseElec").text(result);
+        chkBajaLoaded();
+      }
+    );
+
+    // 本週與上週用電量 (每天)
+    getElectricMeterDayDataByBaja(
+      devNum + "_KWH",
+      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();
+      }
+    );
+
+    // 異常數量與復歸數量
+    getAlarmCountByBaja((aData) => {
+      chartDataCnt.alarmCnt = aData.count;
+      chkBajaLoaded();
+    });
+    getRecoverCountByBaja((rData) => {
+      chartDataCnt.recCnt = rData.count;
+      chkBajaLoaded();
+    });
+    // 異常數量與復歸數量
+    getCheckedAckedCountByBaja((data) => {
+      chartDataCnt.chkedErrCnt = data.count;
+      chkBajaLoaded();
+    });
+
+    getUnCheckedAckedCountByBaja((uData) => {
+      chartDataCnt.unChkedErrCnt = uData.count;
+      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: 1,
+        },
+        {
+          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: 2,
+        },
+      ],
     };
 
-    var sysIconList = [
-        { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
-        { mainSys: "EE", subSys: "E2", iconClass: "./gif/E2_white.png" },
-        { mainSys: "EE", subSys: "E3", iconClass: "./gif/E3_white.png" },
-        { mainSys: "EE", subSys: "E4", iconClass: "./gif/E4-1_white.png" }, // 電表
-        { mainSys: "LT", subSys: "L1", iconClass: "./gif/L1_white.png" },
-        { mainSys: "LT", subSys: "L2", iconClass: "./gif/L2_white.png" }, // 景觀照明 0131目前沒有
-        { mainSys: "ME", subSys: "M1", iconClass: "./gif/M1_white.png" }, // 儲冰 0131目前沒有
-        { mainSys: "ME", subSys: "M5", iconClass: "./gif/M5-2_white.png" }, // 送排風
-        { mainSys: "ME", subSys: "M8", iconClass: "./gif/M8_white.png" }, // 排油煙0131目前沒有
-        { mainSys: "ME", subSys: "M10", iconClass: "./gif/M10_white.png" },
-        { mainSys: "ME", subSys: "M12", iconClass: "./gif/M12_white.png" },
-        { mainSys: "ELEV", subSys: "EL", iconClass: "./gif/EL_white.png" },
-        { mainSys: "FE", subSys: "F1", iconClass: "./gif/F1_white.png" },
-        { mainSys: "FE", subSys: "F2", iconClass: "./gif/lamp_white.png" }, // 排煙 0131目前沒有
-        { mainSys: "WP", subSys: "W1", iconClass: "./gif/W1_white.png" }, // 電子水表0131目前沒有
-        { mainSys: "WP", subSys: "W2", iconClass: "./gif/W2_white.png" },
-        { mainSys: "WP", subSys: "P1", iconClass: "./gif/P1_white.png" },
-        { mainSys: "S", subSys: "C", iconClass: "./gif/C_white.png" }, // CCTV
-        { mainSys: "S", subSys: "P", iconClass: "./gif/P_white.png" }, // 緊急求救
-        { mainSys: "S", subSys: "R", iconClass: "./gif/R_white.png" }, // 門禁
-        { mainSys: "P", subSys: "PSC", iconClass: "./gif/PSC_white.png" }, // 停管
-        { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有
-    ];
+    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;
+          },
+        },
+      },
+    };
 
-    var tempSysSubText = [
-        { text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
-        { text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2
-        { text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3
-        { text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4
-        { text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5
-        { text: "供水系統", mainSys: "WP", subSys: "W2" }, // 6
-        { text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7
-        { text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8
-        { text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9
-        { text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
-        { text: "消防設備", mainSys: "FE", subSys: "F1" }, //11
-        { text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
-        { text: "門禁系統", mainSys: "S", subSys: "R" }, //13
-        { text: "停管系統", mainSys: "P", subSys: "PSC" }, //14
-        { text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15
-        { text: "送排風系統", mainSys: "ME", subSys: "M5" }, //16
-        //{ text: "景觀照明系統", mainSys: "LT", subSys: "L2", },
-        //{ text: "儲冰系統", mainSys: "ME", subSys: "M1", },
-        // { text: "排油煙設備", mainSys: "ME", subSys: "M8", },
-        //{ text: "排煙系統", mainSys: "FE", subSys: "F2", },
-        //{ text: "電子水錶", mainSys: "WP", subSys: "W1", },
-        // { text: "熱水系統", mainSys: "W3", subSys: "W1", },
-    ];
-
-    $(document).ready(function () {
-        $(loadEle).Loading("start");
-        $(loadEle).Loading("close");
-        show3DModel();
-        getSubList();
-        getFirstEletric();
-    });
-
-    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 < 16
-            ) {
-                let iconObj = sysIconList.filter(
-                    (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
-                )[0];
-                strHtml = `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
-                              <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center">
-                                  <img src="${iconObj.iconClass}" class="w-100"></img>
-                                  </button>
-                              <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
-                          </div>`;
-                $("#sysSubBtnList").append(strHtml);
-            }
-        });
+    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 getSubList() {
-        let url = baseApiUrl + "/api/Device/GetMainSub";
-        let sendData = {
+  // 圖表 - 這週與上週用電量 (長條圖)
+  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: 1,
+        },
+        {
+          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: 2,
+        },
+      ],
+    };
+    // 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 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;
+      });
+    }
+  }
+
+  // 從 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() {
+    launchViewerNoTools(
+      pageAct.urn,
+      (viewer) => {
+        let elevOption = {
+          selector: "#forgeViewer",
+          viewer: viewer,
+          ordPath: {
+            area_tag: pageAct.AreaTag,
             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-3 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
-                              <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4">
-                                  <img src="${iconClass}" class="w-100 "></img>
-                                  </button>
-                              <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
-                          </div>`;
-                        });
-                    });
-                    $("#sysSubBtnList").html(strHtml);
-                    demoSubList();
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    }
-
-    //取得第一筆電錶
-    function getFirstEletric() {
-        let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";
-
-        ytAjax = new YourTeam.Ajax(
-            url,
-            null,
-            function (res) {
-                if (!res || res.code != "0000" || !res.data) {
-                } else {
-                    subSysElecList = res.data;
-                    tarElePath =
-                        subSysElecList.filter((x) => x.mainSubTag == "total")[0]
-                            ?.system_device_tag ?? "";
-                    getSubBaja();
-                    getElectricBaja();
-                    getChart();
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    }
-
-    function getSubBaja() {
-        let devPath = tarElePath.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));
-            }
-        });
-        myBaja.setSubscribeElectricmeterEndCallBack(function () { });
-    }
-
-    //從 baja 取得電表用電量
-    function getElectricBaja() {
-        let devNum = tarElePath.split("_").slice(0, 8).join("_");
-        let devPath = tarElePath.split("_").slice(0, 8).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 + "_KWH",
-            n4Sup,
-            today,
-            tomorrow,
-            (data) => {
-                let result = data?.data[0]?.sum;
-                result = result ? parseFloat(result).toFixed(2) : 0;
-                $("#todayUseElec").text(result);
-            }
-        );
-
-        // 今日用電量 (每小時)
-        getElectricMeterHourDataByBaja(
-            devNum + "_KWH",
-            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);
-            }
-        );
-
-        // 昨日用電量
-        getElectricMeterDayDataByBaja(
-            devNum + "_KWH",
-            n4Sup,
-            yesterday,
-            today,
-            (data) => {
-                let result = data?.data[0]?.sum;
-                result = result ? parseFloat(result).toFixed(2) : 0;
-                $("#yesUseElec").text(result);
-            }
-        );
-
-        // 本週與上週用電量 (每天)
-        getElectricMeterDayDataByBaja(
-            devNum + "_KWH",
-            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);
-            }
-        );
-    }
-
-    function getChart() {
-        // 異常數量與復歸數量
-        getAlarmCountByBaja((aData) => {
-            chartDataCnt.alarmCnt = aData;
-        });
-        getRecoverCountByBaja((rData) => {
-            chartDataCnt.recCnt = rData;
-        });
-        // 異常數量與復歸數量
-        getCheckedAckedCountByBaja((data) => {
-            chartDataCnt.chkedErrCnt = data;
-        });
-
-        getUnCheckedAckedCountByBaja((uData) => {
-            chartDataCnt.unChkedErrCnt = uData;
-        });
-
-        // 獲取所有異常數量
-        getAlarmForChartDataByBaja((allAlarmCount) => {
-            // 呼叫 api 找出所有有維修單的資料 (已派工)
-            // 所有異常數量 - 維修單數量(已派工) = 未派工
-            let url = baseApiUrl + "/operation/OpeRecListAllTime";
-            const token = cookies.get("JWT-Authorization");
-            fetch(url, {
-                method: "POST",
-                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,
-                    ]);
-                    chkBajaLoaded();
-                });
-        });
-    }
-
-    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: 1,
-                },
-                {
-                    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: 2,
-                },
-            ],
-        };
-
-        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) {
-            eveDayElecChart = new Chart(eveDayElecChartCanvas, {
-                data: eveDayElecChartData,
-                options: eveDayElecChartOptions,
-            });
-            console.log(eveDayElecChart);
-        } else {
-            eveDayElecChart.data.datasets.forEach((dataset) => {
-                if (dataset.order == 1) {
-                    dataset.data.splice(
-                        0,
-                        dataset.data.length,
-                        ...todayData?.data.map((x) => x.sum)
-                    );
-                    // dataset.data = todayData?.data.map((x) => x.sum);
-                } else {
-                    dataset.data.splice(
-                        0,
-                        dataset.data.length,
-                        ...yesData?.data.map((x) => x.sum)
-                    );
-                    // dataset.data = yesData?.data.map((x) => x.sum);
-                }
-            });
-            eveDayElecChart.update();
+        // 電梯移動訂閱程序載入
+        if (elevatorShow) {
+          let forge3DElev = new Forge3DElevFull(elevOption);
+          forge3DElev.bajaEndCallback = function () {
+            endPageLoading();
+          };
+          forge3DElev.init();
         }
-    }
+      },
+      () => {
+        endPageLoading();
+      }
+    );
+  }
 
-    // 圖表 - 這週與上週用電量 (長條圖)
-    function chartEveWeeksElec(curWeekData, prevWeekData) {
-        // console.log(curWeekData.map(x => x.sum),prevWeekData.map(x => x.sum))
-        let eveWeekElecChartCanvas = $("#eveWeekElecChart").get(0).getContext("2d");
+  $(window).on("timeout:5m", function () {
+    console.log("五分鐘更新");
+    getElectricBaja();
+  });
 
-        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: 1,
-                },
-                {
-                    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: 2,
-                },
-            ],
-        };
-        // 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.splice(
-                        0,
-                        dataset.data.length,
-                        ...curWeekData?.data.map((x) => x.sum)
-                    );
-                    // dataset.data = curWeekData.map((x) => x.sum);
-                } else {
-                    dataset.data.splice(
-                        0,
-                        dataset.data.length,
-                        ...prevWeekData?.data.map((x) => x.sum)
-                    );
-                    // dataset.data = prevWeekData.map((x) => x.sum);
-                }
-            });
-            eveWeekElecChart.update();
-        }
-    }
-
-    // 圖表 - 異常與復歸圖表 (圓餅圖)
-    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 if (
-            datas[0] !== errRecChart.data.datasets[0].data[0] ||
-            datas[1] !== errRecChart.data.datasets[0].data[1]
-        ) {
-            const newLable = labelsFn();
-            errRecChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
-            errRecChart.data.datasets.forEach((dataset) => {
-                dataset.data.splice(0, 2, datas[0], datas[1]);
-            });
-            errRecChart.update();
-            // console.log("圖表 - 異常與復歸圖表 (圓餅圖)", labelsFn(), datas, errRecChart.data.datasets);
-        }
-    }
-
-    // 圖表 - 異常確認與未確認圖表 (圓餅圖)
-    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 if (
-            datas[0] !== errChkChart.data.datasets[0].data[0] ||
-            datas[1] !== errChkChart.data.datasets[0].data[1]
-        ) {
-            const newLable = labelsFn();
-            errChkChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
-            errChkChart.data.datasets.forEach((dataset) => {
-                dataset.data.splice(0, 2, datas[0], datas[1]);
-            });
-            errChkChart.update();
-        }
-    }
-
-    // 圖表 - 異常未派工與異常已派工 (圓環圖)
-    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 if (
-            datas[0] !== worOrdErrChart.data.datasets[0].data[0] ||
-            datas[1] !== worOrdErrChart.data.datasets[0].data[1]
-        ) {
-            const newLable = labelsFn();
-            worOrdErrChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
-            worOrdErrChart.data.datasets.forEach((dataset) => {
-                dataset.data.splice(0, 2, datas[0], datas[1]);
-            });
-            worOrdErrChart.update();
-        }
-    }
-
-    // 圖表 - 工單已完成與工單未完成 (圓環圖)
-    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 if (
-            datas[0] !== worOrdFinChart.data.datasets[0].data[0] ||
-            datas[1] !== worOrdFinChart.data.datasets[0].data[1]
-        ) {
-            const newLable = labelsFn();
-            worOrdFinChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
-            worOrdFinChart.data.datasets.forEach((dataset) => {
-                dataset.data.splice(0, 2, datas[0], datas[1]);
-            });
-            worOrdFinChart.update();
-        }
-    }
-
-    // 從 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() {
-        launchViewerNoTools(pageAct.urn, (viewer) => {
-            document.querySelector("#guiviewer3d-toolbar").style.display = "none";
-            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();
-            }
-        });
-    }
-
-    $(window).on("timeout:1h", function () {
-        getElectricBaja();
-    });
-    $(window).on("timeout:3s", function () {
-        if (
-            $("#worOrdFinChart")?.get(0) &&
-            $("#worOrdErrChart")?.get(0) &&
-            $("#errRecChart")?.get(0) &&
-            $("#errChkChart")?.get(0)
-        ) {
-
-            console.log("3s chart....");
-            getChart();
-        }
-    });
-
-    onEvent("click", "button[id^=sysSubCardBtn]", function () {
-        let subSysTag = $(this).data("id");
-        $(`#subSysBtn${subSysTag}`).click();
-    });
+  onEvent("click", "button[id^=sysSubCardBtn]", function () {
+    let subSysTag = $(this).data("id");
+    $(`#subSysBtn${subSysTag}`).click();
+  });
 </script>