From c87668ee1d1c334a68af678781368a60dd6f20e0 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Mon, 29 May 2023 14:22:46 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=20subDevice=20=E7=B5=90?=
 =?UTF-8?q?=E6=9D=9F=20loading=20bug=20|=20dashbord=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=20chart=20=E6=9B=B4=E6=96=B0=E6=99=82=E6=A9=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_dashboard.html   |  872 +++++----
 Frontend/_sysMonAll.html   | 1894 ++++++++++----------
 Frontend/_sysMonFloor.html | 3414 ++++++++++++++++++------------------
 3 files changed, 3177 insertions(+), 3003 deletions(-)

diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html
index d234eb4..1488571 100644
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@@ -2,11 +2,12 @@
     <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>
+            <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> -->
-
+                        <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
+                    </video> -->
         </div>
         <div class="col-sm-12 col-xl-4">
             <div class="row">
@@ -19,7 +20,7 @@
                             </h3>
                         </div>
                         <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
-                           style="font-size:6rem"></i>
+                           style="font-size: 6rem"></i>
                     </div>
                 </div>
                 <div class="col-sm-6 col-xl-6">
@@ -30,40 +31,42 @@
                                 <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>
+                        <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 id="panel-2"
+                         class="panel"
+                         data-panel-sortable
+                         data-panel-collapsed
+                         data-panel-close>
                         <div class="panel-hdr">
-                            <h2>
-                                昨日／今日用電比較 (kWh)
-                            </h2>
+                            <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 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;">
+                                <div style="width: 100%; min-height: 300px">
                                     <canvas class="chart" id="eveDayElecChart"></canvas>
                                 </div>
                             </div>
@@ -83,7 +86,7 @@
                             </h3>
                         </div>
                         <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
-                           style="font-size: 8rem;"></i>
+                           style="font-size: 8rem"></i>
                     </div>
                 </div>
                 <div class="col-sm-6 col-xl-6">
@@ -95,62 +98,63 @@
                             </h3>
                         </div>
                         <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-                           style="font-size: 6rem;"></i>
+                           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 id="panel-3"
+                         class="panel"
+                         data-panel-sortable
+                         data-panel-collapsed
+                         data-panel-close>
                         <div class="panel-hdr">
-                            <h2>
-                                本週／上週用電比較 (kWh)
-                            </h2>
+                            <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;">
+                                                      <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>
@@ -161,28 +165,24 @@
 
     <div class="row">
         <div class="col-sm-12 col-lg-8">
-            <div class="row" id="sysSubBtnList">
-
-            </div>
+            <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 id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
                         <div class="panel-hdr">
-                            <h2>
-                                異常狀態
-                            </h2>
+                            <h2>異常狀態</h2>
                         </div>
                         <div class="panel-container h-100 show">
                             <div class="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;">
+                                     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;">
+                                     style="max-height: 150px">
                                     <canvas class="chart" id="errChkChart"></canvas>
                                 </div>
                             </div>
@@ -190,21 +190,18 @@
                     </div>
                 </div>
                 <div class="col-lg-6">
-                    <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem);">
+                    <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
                         <div class="panel-hdr">
-                            <h2>
-                                工單進度
-                            </h2>
+                            <h2>工單進度</h2>
                         </div>
                         <div class="panel-container h-100 show">
                             <div class="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;">
+                                     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;">
+                                     style="max-height: 150px">
                                     <canvas class="chart" id="worOrdFinChart"></canvas>
                                 </div>
                             </div>
@@ -214,12 +211,9 @@
             </div>
         </div>
     </div>
-
-
-
 </main>
 <script>
-    var tarElePath = '';
+    var tarElePath = "";
     var sysSubList = [];
     var viewer3DNodeIds = [];
 
@@ -230,7 +224,12 @@
     var errRecChart = null;
     var errChkChart = null;
     var loadedCnt = 0;
-    var chartDataCnt = { alarmCnt: 0, recCnt: 0, chkedErrCnt: 0, unChkedErrCnt: 0 };
+    var chartDataCnt = {
+        alarmCnt: 0,
+        recCnt: 0,
+        chkedErrCnt: 0,
+        unChkedErrCnt: 0,
+    };
 
     var sysIconList = [
         { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
@@ -238,42 +237,42 @@
         { 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: "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: "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: "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目前沒有
+        { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有
     ];
 
     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: "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", },
@@ -283,7 +282,6 @@
     ];
 
     $(document).ready(function () {
-
         $(loadEle).Loading("start");
         $(loadEle).Loading("close");
         show3DModel();
@@ -292,22 +290,28 @@
     });
 
     function demoSubList() {
-        let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]").toArray().map(x => $(x).text());
+        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];
+            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>`;
+                              <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);
             }
-        })
-
+        });
     }
 
     //取得 左下方 各系統小類
@@ -317,52 +321,71 @@
             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();
+        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();
-            }
-        }, null, "POST").send();
+        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 tempOrdPath = { devicePath: devPath };
         let myBaja = new subscriptionElectricmeter();
 
         myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
@@ -372,10 +395,8 @@
                 $("#insPower").text(value);
                 $("#insPowerPer").text((value / 4).roundDecimal(2));
             }
-        })
-        myBaja.setSubscribeElectricmeterEndCallBack(function () {
-            chkBajaLoaded();
-        })
+        });
+        myBaja.setSubscribeElectricmeterEndCallBack(function () { });
     }
 
     //從 baja 取得電表用電量
@@ -383,149 +404,196 @@
         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";
+        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();
-        })
+        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);
-            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);
+            }
+        );
 
         // 昨日用電量
-        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,
+            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));
+        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();
-        })
+                chartEveWeeksElec(curWeekData, prevWeekData);
+            }
+        );
+    }
 
+    function getChart() {
         // 異常數量與復歸數量
         getAlarmCountByBaja((aData) => {
-            chartDataCnt.alarmCnt = aData.count;
-            chkBajaLoaded();
-        })
+            chartDataCnt.alarmCnt = aData;
+        });
         getRecoverCountByBaja((rData) => {
-            chartDataCnt.recCnt = rData.count;
-            chkBajaLoaded();
-        })
+            chartDataCnt.recCnt = rData;
+        });
         // 異常數量與復歸數量
         getCheckedAckedCountByBaja((data) => {
-            chartDataCnt.chkedErrCnt = data.count;
-            chkBajaLoaded();
-        })
+            chartDataCnt.chkedErrCnt = data;
+        });
 
         getUnCheckedAckedCountByBaja((uData) => {
-            chartDataCnt.unChkedErrCnt = uData.count;
-            chkBajaLoaded();
-        })
+            chartDataCnt.unChkedErrCnt = uData;
+        });
 
         // 獲取所有異常數量
         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 => {
+            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
+                    const { finish, notfinish } = data.data;
                     chartWorOrdFin([finish, notfinish]); // 已完成 未完成
-                    chartWorOrdErr([allAlarmCount - (finish + notfinish), finish + notfinish]);
-                })
-
-        })
+                    chartWorOrdErr([
+                        allAlarmCount - (finish + notfinish),
+                        finish + notfinish,
+                    ]);
+                    chkBajaLoaded();
+                });
+        });
     }
 
     function chkBajaLoaded() {
-        loadedCnt++;
+        // loadedCnt++;
 
-        if (loadedCnt == 9) {
-            const ErrRecLabel = () => {
-                const normal = `異常 ${chartDataCnt.alarmCnt}`;
-                const offnormal = `復歸 ${chartDataCnt.recCnt}`;
-                return [normal, offnormal]
-            }
+        // 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");
-        }
+        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 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),
+            labels: todayData?.data.map((x) => x.timestamp.$time.$hour),
             datasets: [
                 {
                     id: "today",
                     type: "bar",
-                    label: '今日用電量',
+                    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),
+                    data: todayData?.data.map((x) => x.sum),
                     order: 1,
                 },
                 {
                     id: "yesterday",
                     type: "bar",
-                    label: '昨日用電量',
+                    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),
+                    data: yesData?.data.map((x) => x.sum),
                     order: 2,
-                }
-            ]
-        }
+                },
+            ],
+        };
 
         let eveDayElecChartOptions = {
             maintainAspectRatio: false,
@@ -543,7 +611,7 @@
                     ticks: {
                         min: 0,
                     },
-                }
+                },
             },
             tooltips: {
                 callbacks: {
@@ -552,67 +620,78 @@
                         return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
                     },
                     title: function (tooltipItem) {
-                        let result = tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
+                        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)
+                options: eveDayElecChartOptions,
+            });
+            console.log(eveDayElecChart);
         } else {
             eveDayElecChart.data.datasets.forEach((dataset) => {
                 if (dataset.order == 1) {
-                    dataset.data = todayData?.data.map(x => x.sum);
+                    dataset.data.splice(
+                        0,
+                        dataset.data.length,
+                        ...todayData?.data.map((x) => x.sum)
+                    );
+                    // dataset.data = todayData?.data.map((x) => x.sum);
                 } else {
-                    dataset.data = yesData?.data.map(x => x.sum);
+                    dataset.data.splice(
+                        0,
+                        dataset.data.length,
+                        ...yesData?.data.map((x) => x.sum)
+                    );
+                    // dataset.data = yesData?.data.map((x) => x.sum);
                 }
             });
+            eveDayElecChart.update();
         }
-
-
     }
 
     // 圖表 - 這週與上週用電量 (長條圖)
     function chartEveWeeksElec(curWeekData, prevWeekData) {
         // console.log(curWeekData.map(x => x.sum),prevWeekData.map(x => x.sum))
-        let eveWeekElecChartCanvas = $('#eveWeekElecChart').get(0).getContext('2d');
+        let eveWeekElecChartCanvas = $("#eveWeekElecChart").get(0).getContext("2d");
 
         let eveWeekElecChartData = {
-            labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
+            labels: curWeekData.map((x) =>
+                dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))
+            ),
             datasets: [
                 {
                     id: "today",
                     type: "bar",
-                    label: '本週用電量',
+                    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),
+                    data: curWeekData.map((x) => x.sum),
                     order: 1,
                 },
                 {
                     id: "yesterday",
                     type: "bar",
-                    label: '上週用電量',
+                    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),
+                    data: prevWeekData.map((x) => x.sum),
                     order: 2,
-                }
-            ]
-        }
+                },
+            ],
+        };
         // console.log(eveWeekElecChartData)
         let eveWeekElecChartOptions = {
             maintainAspectRatio: false,
@@ -630,7 +709,7 @@
                     ticks: {
                         min: 0,
                     },
-                }
+                },
             },
             tooltips: {
                 callbacks: {
@@ -642,45 +721,55 @@
                         // 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
-            })
+                options: eveWeekElecChartOptions,
+            });
             // console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions)
         } else {
             eveWeekElecChart.data.datasets.forEach((dataset) => {
                 if (dataset.order == 1) {
-                    dataset.data = curWeekData.map(x => x.sum);
+                    dataset.data.splice(
+                        0,
+                        dataset.data.length,
+                        ...curWeekData?.data.map((x) => x.sum)
+                    );
+                    // dataset.data = curWeekData.map((x) => x.sum);
                 } else {
-                    dataset.data = prevWeekData.map(x => x.sum);
+                    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 errRecChartCanvas = (ctx = $("#errRecChart").get(0).getContext("2d"));
 
         let errRecChartData = {
             labels: labelsFn(),
             datasets: [
                 {
-                    label: '數量',
-                    unit: '個',
+                    label: "數量",
+                    unit: "個",
                     fill: true,
                     backgroundColor: [color.danger._500, color.info._300],
                     data: datas,
-                }
-            ]
-        }
+                },
+            ],
+        };
 
         let errRecChartOptions = {
             maintainAspectRatio: false,
@@ -689,46 +778,52 @@
                 legend: {
                     display: true,
                     labels: {
-                        color: "#fff"
+                        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;
+                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 errChkChartCanvas = (ctx = $("#errChkChart").get(0).getContext("2d"));
 
         let errChkChartData = {
             labels: labelsFn(),
             datasets: [
                 {
-                    label: '數量',
-                    unit: '個',
+                    label: "數量",
+                    unit: "個",
                     fill: true,
                     backgroundColor: [color.danger._500, color.info._300],
                     data: datas,
-                }
-            ]
-        }
+                },
+            ],
+        };
 
         let errChkChartOptions = {
             maintainAspectRatio: false,
@@ -737,46 +832,53 @@
                 legend: {
                     display: true,
                     labels: {
-                        color: "#fff"
+                        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;
+                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 labels = [`未派工 ${datas[0]}`, `已派工 ${datas[1]}`];
+        let worOrdErrChartCanvas = (ctx = $("#worOrdErrChart")
+            .get(0)
+            .getContext("2d"));
 
         let worOrdErrChartData = {
             labels: labels,
             datasets: [
                 {
-                    label: '數量',
-                    unit: '個',
+                    label: "數量",
+                    unit: "個",
                     fill: true,
                     backgroundColor: [color.danger._500, color.info._300],
                     data: datas,
-                }
-            ]
-        }
+                },
+            ],
+        };
 
         let worOrdErrChartOptions = {
             maintainAspectRatio: false,
@@ -785,48 +887,53 @@
                 legend: {
                     display: true,
                     labels: {
-                        color: "#fff"
+                        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;
+                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 labels = [`已完成 ${datas[0]}`, `未完成 ${datas[1]}`];
+        let worOrdFinChartCanvas = (ctx = $("#worOrdFinChart")
+            .get(0)
+            .getContext("2d"));
 
         let worOrdFinChartData = {
             labels: labels,
             datasets: [
                 {
-                    label: '數量',
-                    unit: '個',
+                    label: "數量",
+                    unit: "個",
                     fill: true,
                     backgroundColor: [color.danger._500, color.info._300],
                     data: datas,
-                }
-            ]
-        }
+                },
+            ],
+        };
 
         let worOrdFinChartOptions = {
             maintainAspectRatio: false,
@@ -835,29 +942,32 @@
                 legend: {
                     display: true,
                     labels: {
-                        color: "#fff"
+                        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;
+                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 訂閱 左下角各系統小類異常狀態
@@ -865,61 +975,81 @@
         $.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('.');
+                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('.')
+                    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");
+                    $(`.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("/"));
+            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('.');
+                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('.')
+                    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,
+                    area_tag: pageAct.AreaTag,
+                    building_tag: pageAct.buiTag,
                 },
-            }
+            };
 
             // 電梯移動訂閱程序載入
             if (elevatorShow) {
                 let forge3DElev = new Forge3DElevFull(elevOption);
                 forge3DElev.bajaEndCallback = function () {
                     endPageLoading();
-                }
+                };
                 forge3DElev.init();
             }
         });
     }
 
-    $(window).on("timeout:5m", function () {
-        console.log("五分鐘更新")
+    $(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();
-    })
-</script>
\ No newline at end of file
+    });
+</script>
diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index 0901c5e..262b678 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -1,8 +1,8 @@
 <style></style>
 
 <div class="row">
-  <div id="leftDiv" class="col-sm-12 col-xl-6"></div>
-  <div id="rightDiv" class="col-sm-12 col-xl-6"></div>
+    <div id="leftDiv" class="col-sm-12 col-xl-6"></div>
+    <div id="rightDiv" class="col-sm-12 col-xl-6"></div>
 </div>
 
 <!-- Modal center Add -->
@@ -13,1006 +13,1050 @@
      aria-hidden="true"
      data-backdrop="static"
      data-keyboard="false">
-  <div class="modal-dialog modal-dialog-centered"
-       role="document"
-       style="min-width: 60%">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">燈控排程</h4>
-        <button type="button"
-                class="close"
-                data-dismiss="modal"
-                aria-label="Close">
-          <span aria-hidden="true"><i class="fal fa-times"></i></span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
-        </table>-->
-        <div id="lightSchBlock" style="height: 60vh"></div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">
-          關閉
-        </button>
-        <button type="button" id="lightSchSavBtn" class="btn btn-primary">
-          儲存
-        </button>
-      </div>
+    <div class="modal-dialog modal-dialog-centered"
+         role="document"
+         style="min-width: 60%">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">燈控排程</h4>
+                <button type="button"
+                        class="close"
+                        data-dismiss="modal"
+                        aria-label="Close">
+                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
+                </table>-->
+                <div id="lightSchBlock" style="height: 60vh"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                    關閉
+                </button>
+                <button type="button" id="lightSchSavBtn" class="btn btn-primary">
+                    儲存
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
 <script>
-  var allDevList = []; //全設備清單
-  var alarmDbIdList = []; // 紀錄異常 forge 圓點，避免點擊與異常顏色衝突
-  var subDeviceData = [];
-  var heatMap = null;
-  var buildMenuData = {};
-  var forgeInvType = null;
-  var forgeInvTypeDef = null;
+    var allDevList = []; //全設備清單
+    var alarmDbIdList = []; // 紀錄異常 forge 圓點，避免點擊與異常顏色衝突
+    var subDeviceData = [];
+    var heatMap = null;
+    var buildMenuData = {};
+    var forgeInvType = null;
+    var forgeInvTypeDef = null;
 
-  $(function () {
-    $(loadEle).Loading("start");
-    getBuildMenu((arr, data) => {
-      buildMenuData = data;
-      if (arr.indexOf(4) != -1) {
-        getFloDevList(arr[0] == 4 ? "left" : "right");
-        setLightColor();
-      }
-      if (arr.indexOf(3) != -1) {
-        getHotspotPoint(() => {
-          show3DModel(data.urn_3D);
-          getInviForge();
+    $(function () {
+        $(loadEle).Loading("start");
+        getBuildMenu((arr, data) => {
+            console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@", arr, data);
+            buildMenuData = data;
+            if (arr.indexOf(4) != -1) {
+                getFloDevList(arr[0] == 4 ? "left" : "right");
+                setLightColor();
+            }
+            if (arr.indexOf(3) != -1) {
+                getHotspotPoint(() => {
+                    show3DModel(data.urn_3D);
+                    getInviForge();
+                });
+            }
         });
-      }
     });
-  });
 
-  // 依據 drawing type 決定呈現畫面
-  function getHtmlByType(type = 0, data = {}) {
-    let strHtml = ``;
-    switch (type) {
-      case 2:
-        strHtml = `<div style="height:85vh">
+    // 依據 drawing type 決定呈現畫面
+    function getHtmlByType(type = 0, data = {}) {
+        let strHtml = ``;
+        switch (type) {
+            case 2:
+                strHtml = `<div style="height:85vh">
                                 <iframe src="${data.system_url}" width="100%" height="100%"></iframe>
                            </div>`;
-        break;
-      case 4:
-        strHtml = `<div class="d-flex mb-4" style="gap:15px">
+                break;
+            case 4:
+                strHtml = `<div class="d-flex mb-4" style="gap:15px">
                                 ${setTopLight()}
                             </div>
 
                             <div class="col-12 p-0" id="floDevList">
 
                             </div>`;
-        break;
-      case 3:
-        strHtml = `<div class="d-flex mb-4" style="position: relative; gap:15px">
+                break;
+            case 3:
+                strHtml = `<div class="d-flex mb-4" style="position: relative; gap:15px">
                                 <div name="forgeViewer" style="position: absolute;width: 100%;height:85vh;">
                                 ${setTopHeatBar()}
                                   </div>
                             </div>
                             `;
-        break;
-    }
-
-    return strHtml;
-  }
-  //baja 訂閱設備
-  function subDevice() {
-    let myBaja = new subscriptionDevices();
-    var ordPath = {
-      area_tag: pageAct.AreaTag,
-      building_tag: pageAct.buiTag,
-      system_tag: pageAct.sysMainTag,
-      name_tag: pageAct.sysSubTag,
-    };
-    myBaja.setSubscribeDevicesByBql(ordPath);
-
-    // 燈熱點用
-    let lightOnHotColorArr = [];
-    let lightOffHotColorArr = [];
-    // 燈光圈用
-    let lightOnGuidArr = [];
-    let lightOffGuidArr = [];
-
-    myBaja.setSubscribeDevicesCallBack(function (data) {
-      // console.log(data)
-      let matchDevice = allDevList.filter(
-        (x) => x.device_number == data.device_number_full
-      )[0];
-      if (!matchDevice) {
-        return false;
-      }
-
-      //將訂閱值塞入 subDeviceData
-      if (
-        subDeviceData.findIndex(
-          (x) => x.device_number == matchDevice.device_number
-        ) == -1
-      ) {
-        let obj = {};
-        obj.device_number = matchDevice.device_number;
-        obj.dbid = matchDevice.forge_dbid;
-        subDeviceData.push(obj);
-      }
-
-      let subData = subDeviceData.filter(
-        (x) => x.device_number == matchDevice.device_number
-      )[0];
-
-      if (subData) {
-        subData[data.point_name] = data.value;
-      }
-
-      let norDevPoiName = matchDevice.device_normal_point_name;
-      let cloDevPoiName = matchDevice.device_close_point_name;
-      let errDevPoiName = matchDevice.device_error_point_name;
-
-      if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
-        const lightOn = data.value.includes("true");
-
-        setLightOpenOrClose(lightOn, matchDevice.device_guid);
-        if (lightOn) {
-          setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
-          // changeColorForHotspot(matchDevice.spriteDbid, null, true)
-          if (
-            !lightOnHotColorArr.some(
-              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-            )
-          ) {
-            lightOnHotColorArr.push(matchDevice);
-          }
-          lightOffHotColorArr = lightOffHotColorArr.filter(
-            (light) => light.spriteDbid !== matchDevice.spriteDbid
-          );
-          heatMap?.changeTemp(matchDevice.device_number, 40);
-        } else {
-          setLightValues(matchDevice.device_guid, 0, 0xffffff);
-          // changeColorForHotspot(matchDevice.spriteDbid)
-          if (
-            !lightOffHotColorArr.some(
-              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-            )
-          ) {
-            lightOffHotColorArr.push(matchDevice);
-          }
-          lightOnHotColorArr = lightOnHotColorArr.filter(
-            (light) => light.spriteDbid !== matchDevice.spriteDbid
-          );
-
-          heatMap?.changeTemp(matchDevice.device_number, 0);
+                break;
         }
-      }
 
-      if (data.point_name == "Temp") {
-        heatMap?.changeTemp(
-          data.device_number_full,
-          !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
-        );
-        let devIdx = allDevList.findIndex(
-          (x) => x.device_number == data.device_number_full
-        );
-        allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
-          ? parseInt(data.value)
-          : 0;
-      }
-      if (
-        data.point_name == norDevPoiName &&
-        data.value == matchDevice.device_normal_point_value
-      ) {
-        //顯示正常燈號
-        $(`#${matchDevice.device_number}_status`)
-          .attr("data-light-type", "normal")
-          .data("light-type", "normal");
-      } else if (
-        data.point_name == cloDevPoiName &&
-        data.value == matchDevice.device_close_point_value
-      ) {
-        $(`#${matchDevice.device_number}_status`)
-          .attr("data-light-type", "close")
-          .data("light-type", "close");
-      } else if (
-        data.point_name == errDevPoiName &&
-        data.value == matchDevice.device_error_point_value
-      ) {
-        $(`#${matchDevice.device_number}_status`)
-          .attr("data-light-type", "error")
-          .data("light-type", "error");
-      }
-      if (
-        allDevList.length ===
-        lightOnHotColorArr.length + lightOffHotColorArr.length
-      ) {
-        changeColorForHotspot(
-          lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
-          null,
-          true
-        );
-        changeColorForHotspot(
-          lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
-          null,
-          false
-        );
-
-      }
-      $(loadEle).Loading("close");
-
-      setLightColor();
-      setForgeHotSpotColor(matchDevice);
-      lightDevForgeSpotLig(matchDevice);
-      // 從設備訂閱更新每個設備卡片即時點位
-      setDevItemPoiValBySub(data);
-    });
-
-    myBaja.setSubscribeDeviceEndCallBack(function (data) {
-      endPageLoading();
-      if (data.findIndex((x) => x.point_name == "Temp") != -1) {
-        // 顯示溫度條
-        showHeat("[name=forgeHeatBar]");
-      }
-    });
-  }
-  // function subDevice() {
-  //   let myBaja = new subscriptionDevices();
-  //   var ordPath = {
-  //     area_tag: pageAct.AreaTag,
-  //     building_tag: pageAct.buiTag,
-  //     system_tag: pageAct.sysMainTag,
-  //     name_tag: pageAct.sysSubTag,
-  //   };
-  //   myBaja.setSubscribeDevicesByBql(ordPath);
-
-  //   // 燈熱點用
-  //   let lightOnHotColorArr = [];
-  //   let lightOffHotColorArr = [];
-  //   // 燈光圈用
-  //   let lightOnGuidArr = [];
-  //   let lightOffGuidArr = [];
-
-  //   myBaja.setSubscribeDevicesCallBack(function (data) {
-  //     // console.log(data)
-  //     let matchDevice = allDevList.filter(
-  //       (x) => x.device_number == data.device_number_full
-  //     )[0];
-  //     if (!matchDevice) {
-  //       return false;
-  //     }
-
-  //     //將訂閱值塞入 subDeviceData
-  //     if (
-  //       subDeviceData.findIndex(
-  //         (x) => x.device_number == matchDevice.device_number
-  //       ) == -1
-  //     ) {
-  //       let obj = {};
-  //       obj.device_number = matchDevice.device_number;
-  //       obj.dbid = matchDevice.forge_dbid;
-  //       subDeviceData.push(obj);
-  //     }
-
-  //     let subData = subDeviceData.filter(
-  //       (x) => x.device_number == matchDevice.device_number
-  //     )[0];
-
-  //     if (subData) {
-  //       subData[data.point_name] = data.value;
-  //     }
-
-  //     let norDevPoiName = matchDevice.device_normal_point_name;
-  //     let cloDevPoiName = matchDevice.device_close_point_name;
-  //     let errDevPoiName = matchDevice.device_error_point_name;
-
-  //     if (data.point_name == "ONOFF" && pageAct.sysSubTag === "L1") {
-  //       const lightOn = data.value.includes("true");
-
-  //       setLightOpenOrClose(lightOn, matchDevice.device_guid);
-  //       if (lightOn) {
-  //         setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
-  //         // changeColorForHotspot(matchDevice.spriteDbid, null, true)
-  //         if (
-  //           !lightOnHotColorArr.some(
-  //             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-  //           )
-  //         ) {
-  //           lightOnHotColorArr.push(matchDevice);
-  //         }
-  //         lightOffHotColorArr = lightOffHotColorArr.filter(
-  //           (light) => light.spriteDbid !== matchDevice.spriteDbid
-  //         );
-  //         heatMap?.changeTemp(matchDevice.device_number, 40);
-  //       } else {
-  //         setLightValues(matchDevice.device_guid, 0, 0xffffff);
-  //         // changeColorForHotspot(matchDevice.spriteDbid)
-  //         if (
-  //           !lightOffHotColorArr.some(
-  //             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-  //           )
-  //         ) {
-  //           lightOffHotColorArr.push(matchDevice);
-  //         }
-  //         lightOnHotColorArr = lightOnHotColorArr.filter(
-  //           (light) => light.spriteDbid !== matchDevice.spriteDbid
-  //         );
-
-  //         heatMap?.changeTemp(matchDevice.device_number, 0);
-  //       }
-  //     }
-
-  //     if (data.point_name == "Temp") {
-  //       heatMap?.changeTemp(
-  //         data.device_number_full,
-  //         !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
-  //       );
-  //       let devIdx = allDevList.findIndex(
-  //         (x) => x.device_number == data.device_number_full
-  //       );
-  //       allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
-  //         ? parseInt(data.value)
-  //         : 0;
-  //     }
-  //     if (
-  //       data.point_name == norDevPoiName &&
-  //       data.value == matchDevice.device_normal_point_value
-  //     ) {
-  //       //顯示正常燈號
-  //       $(`#${matchDevice.device_number}_status`)
-  //         .attr("data-light-type", "normal")
-  //         .data("light-type", "normal");
-  //     } else if (
-  //       data.point_name == cloDevPoiName &&
-  //       data.value == matchDevice.device_close_point_value
-  //     ) {
-  //       $(`#${matchDevice.device_number}_status`)
-  //         .attr("data-light-type", "close")
-  //         .data("light-type", "close");
-  //     } else if (
-  //       data.point_name == errDevPoiName &&
-  //       data.value == matchDevice.device_error_point_value
-  //     ) {
-  //       $(`#${matchDevice.device_number}_status`)
-  //         .attr("data-light-type", "error")
-  //         .data("light-type", "error");
-  //     }
-  //     if (
-  //       allDevList.length ===
-  //       lightOnHotColorArr.length + lightOffHotColorArr.length
-  //     ) {
-  //       changeColorForHotspot(
-  //         lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
-  //         null,
-  //         true
-  //       );
-  //       changeColorForHotspot(
-  //         lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
-  //         null,
-  //         false
-  //       );
-
-  //     }
-  //     $(loadEle).Loading("close");
-
-  //     setLightColor();
-  //     setForgeHotSpotColor(matchDevice);
-  //     lightDevForgeSpotLig(matchDevice);
-  //     // 從設備訂閱更新每個設備卡片即時點位
-  //     setDevItemPoiValBySub(data);
-  //   });
-
-  //   myBaja.setSubscribeDeviceEndCallBack(function (data) {
-  //     endPageLoading();
-  //     if (data.findIndex((x) => x.point_name == "Temp") != -1) {
-  //       // 顯示溫度條
-  //       showHeat("[name=forgeHeatBar]");
-  //     }
-  //   });
-  // }
-
-  function lightDevForgeSpotLig(devObj) { }
-
-  // 從設備訂閱更新每個設備卡片即時點位
-  function setDevItemPoiValBySub(data) {
-    let pointSpan = $(
-      `.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`
-    );
-    if (pointSpan && pointSpan.data("point") == data.point_name) {
-      // console.log(data)
-      pointSpan.text(data.value);
+        return strHtml;
     }
-  }
+    //baja 訂閱設備
+    function subDevice() {
+        let myBaja = new subscriptionDevices();
+        var ordPath = {
+            area_tag: pageAct.AreaTag,
+            building_tag: pageAct.buiTag,
+            system_tag: pageAct.sysMainTag,
+            name_tag: pageAct.sysSubTag,
+        };
+        myBaja.setSubscribeDevicesByBql(ordPath);
 
-  /* function setLightColor() {
-    $("[data-light-type]").each((index, ele) => {
-      let type = $(ele).data("light-type");
-      let isFlashing = false;
-      let color = "#000";
-      switch (type) {
-        case "normal":
-          color =
-            pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
-          isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
-          break;
-        case "close":
-          color =
-            pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
-          isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
-          break;
-        case "error":
-          color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-          isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
-          break;
-      }
-      $(ele).css("background-color", color);
-      //是否閃爍
-      if (isFlashing) {
-        $(ele).parents(".card.device-wrap").addClass("light-flash");
-      } else {
-        $(ele).parents(".card.device-wrap").removeClass("light-flash");
-      }
-    });
-  } */
+        // 燈熱點用
+        let lightOnHotColorArr = [];
+        let lightOffHotColorArr = [];
+        // 燈光圈用
+        let deviceNormalArr = [];
+        let deviceCloseArr = [];
 
-  function setLightSchBlcok(obj) {
-    let devNum = $(obj).parents(".device-wrap").data("number");
-    let devPath = devNum.replaceAll("_", "/");
-    let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`;
-    $("#lightSchBlock").html(iframe);
-  }
+        myBaja.setSubscribeDevicesCallBack(function (data) {
+            // console.log(data)
+            let matchDevice = allDevList.filter(
+                (x) => x.device_number == data.device_number_full
+            )[0];
+            if (!matchDevice) {
+                $(loadEle).Loading("close");
+                return false;
+            }
 
-  // forge 3D 異常點位變紅色
-  function setForgeHotSpotColor(device) {
-    let subData = subDeviceData.filter(
-      (x) => x.device_number == device.device_number
-    )[0];
-    if (
-      subData &&
-      subData[device.device_error_point_name] ==
-      device.device_error_point_value &&
-      (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
-    ) {
-      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
-      alarmDbIdList = [...alarmDbIdList, _dbId];
-      // console.log("異常", _dbId)
-      changeColorForHotspot(_dbId, "error");
-    } else if (
-      subData &&
-      subData[device.device_error_point_name] !==
-      device.device_error_point_value &&
-      (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
-    ) {
-      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
-      let index = alarmDbIdList.findIndex((dbId) => dbId == _dbId);
-      index !== -1 && alarmDbIdList.splice(index, 1);
+            //將訂閱值塞入 subDeviceData
+            if (
+                subDeviceData.findIndex(
+                    (x) => x.device_number == matchDevice.device_number
+                ) == -1
+            ) {
+                let obj = {};
+                obj.device_number = matchDevice.device_number;
+                obj.dbid = matchDevice.forge_dbid;
+                subDeviceData.push(obj);
+            }
+
+            let subData = subDeviceData.filter(
+                (x) => x.device_number == matchDevice.device_number
+            )[0];
+
+            if (subData) {
+                subData[data.point_name] = data.value;
+            }
+
+            // setForgeHotSpotColor(matchDevice);
+
+            let norDevPoiName = matchDevice.device_normal_point_name;
+            let cloDevPoiName = matchDevice.device_close_point_name;
+            let errDevPoiName = matchDevice.device_error_point_name;
+
+            if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
+                const lightOn = data.value.includes("true");
+                setLightOpenOrClose(lightOn, matchDevice);
+                if (lightOn && matchDevice.spriteDbid) {
+                    if (
+                        !lightOnHotColorArr.some(
+                            ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+                        )
+                    ) {
+                        setLightValues(matchDevice.device_node_guid, 200, 0xe1cf18);
+                        lightOnHotColorArr.push(matchDevice);
+                    }
+                    lightOffHotColorArr = lightOffHotColorArr.filter(
+                        (light) => light.spriteDbid !== matchDevice.spriteDbid
+                    );
+                } else if (matchDevice.spriteDbid) {
+                    if (
+                        !lightOffHotColorArr.some(
+                            ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+                        )
+                    ) {
+                        setLightValues(matchDevice.device_node_guid, 0, 0xffffff);
+                        lightOffHotColorArr.push(matchDevice);
+                    }
+                    lightOnHotColorArr = lightOnHotColorArr.filter(
+                        (light) => light.spriteDbid !== matchDevice.spriteDbid
+                    );
+                }
+            }
+
+            if (data.point_name == "Temp") {
+                heatMap?.changeTemp(
+                    data.device_number_full,
+                    !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
+                );
+                let devIdx = allDevList.findIndex(
+                    (x) => x.device_number == data.device_number_full
+                );
+                allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
+                    ? parseInt(data.value)
+                    : 0;
+            }
+
+            if (
+                data.point_name == norDevPoiName &&
+                data.value == matchDevice.device_normal_point_value &&
+                !deviceNormalArr.some(
+                    ({ device_number }) => device_number === matchDevice.device_number
+                )
+            ) {
+                //顯示正常燈號
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "normal")
+                    .data("light-type", "normal");
+
+                deviceNormalArr.push(matchDevice);
+                deviceCloseArr = deviceCloseArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            } else if (
+                data.point_name == cloDevPoiName &&
+                data.value == matchDevice.device_close_point_value &&
+                !deviceCloseArr.some(
+                    ({ device_number }) => device_number === matchDevice.device_number
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "close")
+                    .data("light-type", "close");
+
+                deviceCloseArr.push(matchDevice);
+                deviceNormalArr = deviceNormalArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            }
+
+            if (
+                data.point_name == errDevPoiName &&
+                data.value == matchDevice.device_error_point_value &&
+                !alarmDbIdList.some(
+                    (device) => device.device_number === matchDevice.device_number
+                )
+            ) {
+                if (pageAct.sysSubTag === "L1") {
+                    $(`#${matchDevice.device_number}_status`)
+                        .attr("data-light-error-type", "error")
+                        .data("light-error-type", "error");
+                } else {
+                    $(`#${matchDevice.device_number}_status`)
+                        .attr("data-light-type", "error")
+                        .data("light-type", "error");
+                }
+                alarmDbIdList.push(matchDevice);
+            } else if (
+                data.point_name == errDevPoiName &&
+                data.value !== matchDevice.device_error_point_value
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-error-type", "")
+                    .data("light-error-type", "");
+                alarmDbIdList = alarmDbIdList.filter(
+                    (device) => device.device_number !== matchDevice.device_number
+                );
+            }
+
+            if (
+                allDevList.length ===
+                deviceNormalArr.length + deviceCloseArr.length + alarmDbIdList.length
+            ) {
+                changeColorForHotspot(
+                    deviceNormalArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    true
+                );
+                changeColorForHotspot(
+                    deviceCloseArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    false
+                );
+            }
+            changeColorForHotspot(
+                alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
+                "error",
+                false
+            );
+            $(loadEle).Loading("close");
+
+            setLightColor();
+            lightDevForgeSpotLig(matchDevice);
+            // 從設備訂閱更新每個設備卡片即時點位
+            setDevItemPoiValBySub(data);
+        });
+
+        myBaja.setSubscribeDeviceEndCallBack(function (data) {
+            endPageLoading();
+            if (data.findIndex((x) => x.point_name == "CO2") != -1) {
+                // 顯示溫度條
+                showHeatCO2("[name=forgeHeatBar]");
+            } else if (data.findIndex((x) => x.point_name == "Temp") != -1) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
+        });
     }
-  }
+    // function subDevice() {
+    //   let myBaja = new subscriptionDevices();
+    //   var ordPath = {
+    //     area_tag: pageAct.AreaTag,
+    //     building_tag: pageAct.buiTag,
+    //     system_tag: pageAct.sysMainTag,
+    //     name_tag: pageAct.sysSubTag,
+    //   };
+    //   myBaja.setSubscribeDevicesByBql(ordPath);
 
-  // 取得昇位圖點位 (deviceItem)
-  function getRiserPoiObj() {
-    let tarDevItem = pageAct.devItems?.filter(
-      (x) => x.is_show_riserDiagram == 1
-    );
-    if (tarDevItem && tarDevItem[0]) {
-      return tarDevItem[0];
+    //   // 燈熱點用
+    //   let lightOnHotColorArr = [];
+    //   let lightOffHotColorArr = [];
+    //   // 燈光圈用
+    //   let lightOnGuidArr = [];
+    //   let lightOffGuidArr = [];
+
+    //   myBaja.setSubscribeDevicesCallBack(function (data) {
+    //     // console.log(data)
+    //     let matchDevice = allDevList.filter(
+    //       (x) => x.device_number == data.device_number_full
+    //     )[0];
+    //     if (!matchDevice) {
+    //       return false;
+    //     }
+
+    //     //將訂閱值塞入 subDeviceData
+    //     if (
+    //       subDeviceData.findIndex(
+    //         (x) => x.device_number == matchDevice.device_number
+    //       ) == -1
+    //     ) {
+    //       let obj = {};
+    //       obj.device_number = matchDevice.device_number;
+    //       obj.dbid = matchDevice.forge_dbid;
+    //       subDeviceData.push(obj);
+    //     }
+
+    //     let subData = subDeviceData.filter(
+    //       (x) => x.device_number == matchDevice.device_number
+    //     )[0];
+
+    //     if (subData) {
+    //       subData[data.point_name] = data.value;
+    //     }
+
+    //     let norDevPoiName = matchDevice.device_normal_point_name;
+    //     let cloDevPoiName = matchDevice.device_close_point_name;
+    //     let errDevPoiName = matchDevice.device_error_point_name;
+
+    //     if (data.point_name == "ONOFF" && pageAct.sysSubTag === "L1") {
+    //       const lightOn = data.value.includes("true");
+
+    //       setLightOpenOrClose(lightOn, matchDevice.device_guid);
+    //       if (lightOn) {
+    //         setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
+    //         // changeColorForHotspot(matchDevice.spriteDbid, null, true)
+    //         if (
+    //           !lightOnHotColorArr.some(
+    //             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+    //           )
+    //         ) {
+    //           lightOnHotColorArr.push(matchDevice);
+    //         }
+    //         lightOffHotColorArr = lightOffHotColorArr.filter(
+    //           (light) => light.spriteDbid !== matchDevice.spriteDbid
+    //         );
+    //         heatMap?.changeTemp(matchDevice.device_number, 40);
+    //       } else {
+    //         setLightValues(matchDevice.device_guid, 0, 0xffffff);
+    //         // changeColorForHotspot(matchDevice.spriteDbid)
+    //         if (
+    //           !lightOffHotColorArr.some(
+    //             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+    //           )
+    //         ) {
+    //           lightOffHotColorArr.push(matchDevice);
+    //         }
+    //         lightOnHotColorArr = lightOnHotColorArr.filter(
+    //           (light) => light.spriteDbid !== matchDevice.spriteDbid
+    //         );
+
+    //         heatMap?.changeTemp(matchDevice.device_number, 0);
+    //       }
+    //     }
+
+    //     if (data.point_name == "Temp") {
+    //       heatMap?.changeTemp(
+    //         data.device_number_full,
+    //         !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
+    //       );
+    //       let devIdx = allDevList.findIndex(
+    //         (x) => x.device_number == data.device_number_full
+    //       );
+    //       allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
+    //         ? parseInt(data.value)
+    //         : 0;
+    //     }
+    //     if (
+    //       data.point_name == norDevPoiName &&
+    //       data.value == matchDevice.device_normal_point_value
+    //     ) {
+    //       //顯示正常燈號
+    //       $(`#${matchDevice.device_number}_status`)
+    //         .attr("data-light-type", "normal")
+    //         .data("light-type", "normal");
+    //     } else if (
+    //       data.point_name == cloDevPoiName &&
+    //       data.value == matchDevice.device_close_point_value
+    //     ) {
+    //       $(`#${matchDevice.device_number}_status`)
+    //         .attr("data-light-type", "close")
+    //         .data("light-type", "close");
+    //     } else if (
+    //       data.point_name == errDevPoiName &&
+    //       data.value == matchDevice.device_error_point_value
+    //     ) {
+    //       $(`#${matchDevice.device_number}_status`)
+    //         .attr("data-light-type", "error")
+    //         .data("light-type", "error");
+    //     }
+    //     if (
+    //       allDevList.length ===
+    //       lightOnHotColorArr.length + lightOffHotColorArr.length
+    //     ) {
+    //       changeColorForHotspot(
+    //         lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
+    //         null,
+    //         true
+    //       );
+    //       changeColorForHotspot(
+    //         lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
+    //         null,
+    //         false
+    //       );
+
+    //     }
+    //     $(loadEle).Loading("close");
+
+    //     setLightColor();
+    //     setForgeHotSpotColor(matchDevice);
+    //     lightDevForgeSpotLig(matchDevice);
+    //     // 從設備訂閱更新每個設備卡片即時點位
+    //     setDevItemPoiValBySub(data);
+    //   });
+
+    //   myBaja.setSubscribeDeviceEndCallBack(function (data) {
+    //     endPageLoading();
+    //     if (data.findIndex((x) => x.point_name == "Temp") != -1) {
+    //       // 顯示溫度條
+    //       showHeat("[name=forgeHeatBar]");
+    //     }
+    //   });
+    // }
+
+    function lightDevForgeSpotLig(devObj) { }
+
+    // 從設備訂閱更新每個設備卡片即時點位
+    function setDevItemPoiValBySub(data) {
+        let pointSpan = $(
+            `.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`
+        );
+        if (pointSpan && pointSpan.data("point") == data.point_name) {
+            // console.log(data)
+            pointSpan.text(data.value);
+        }
     }
-    return null;
-  }
 
-  // 取得設備列表 並繪製卡片
-  function getFloDevList(position = "left") {
-    let url = baseApiUrl + "/api/Device/GetDeviceList";
-    let sendData = {
-      sub_system_tag: pageAct.sysSubTag,
-      building_tag: pageAct.buiTag,
-      floor_tag: pageAct.floTag,
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
+    /* function setLightColor() {
+      $("[data-light-type]").each((index, ele) => {
+        let type = $(ele).data("light-type");
+        let isFlashing = false;
+        let color = "#000";
+        switch (type) {
+          case "normal":
+            color =
+              pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
+            isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
+            break;
+          case "close":
+            color =
+              pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
+            isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
+            break;
+          case "error":
+            color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+            isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
+            break;
+        }
+        $(ele).css("background-color", color);
+        //是否閃爍
+        if (isFlashing) {
+          $(ele).parents(".card.device-wrap").addClass("light-flash");
         } else {
-          let strHtml = ``;
-          $.each(res.data, (index, floObj) => {
-            strHtml += `<div class='d-flex justify-content-start mb-5'>`;
-            strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`;
-            strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`;
-            $.each(floObj.device_list, (index2, devObj) => {
-              allDevList.push(devObj);
-              let devItem = getRiserPoiObj();
-              strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number
-                }" data-position="${position}">
+          $(ele).parents(".card.device-wrap").removeClass("light-flash");
+        }
+      });
+    } */
+
+    function setLightSchBlcok(obj) {
+        let devNum = $(obj).parents(".device-wrap").data("number");
+        let devPath = devNum.replaceAll("_", "/");
+        let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`;
+        $("#lightSchBlock").html(iframe);
+    }
+
+    // forge 3D 異常點位變紅色
+    function setForgeHotSpotColor(device) {
+        let subData = subDeviceData.filter(
+            (x) => x.device_number == device.device_number
+        )[0];
+        if (
+            subData &&
+            subData[device.device_error_point_name] ==
+            device.device_error_point_value &&
+            (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
+        ) {
+            const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
+            alarmDbIdList = [...alarmDbIdList, _dbId];
+            // console.log("異常", _dbId)
+            changeColorForHotspot(_dbId, "error");
+        } else if (
+            subData &&
+            subData[device.device_error_point_name] !==
+            device.device_error_point_value &&
+            (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
+        ) {
+            const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
+            let index = alarmDbIdList.findIndex((dbId) => dbId == _dbId);
+            index !== -1 && alarmDbIdList.splice(index, 1);
+        }
+    }
+
+    // 取得昇位圖點位 (deviceItem)
+    function getRiserPoiObj() {
+        let tarDevItem = pageAct.devItems?.filter(
+            (x) => x.is_show_riserDiagram == 1
+        );
+        if (tarDevItem && tarDevItem[0]) {
+            return tarDevItem[0];
+        }
+        return null;
+    }
+
+    // 取得設備列表 並繪製卡片
+    function getFloDevList(position = "left") {
+        let url = baseApiUrl + "/api/Device/GetDeviceList";
+        let sendData = {
+            sub_system_tag: pageAct.sysSubTag,
+            building_tag: pageAct.buiTag,
+            floor_tag: pageAct.floTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    let strHtml = ``;
+                    $.each(res.data, (index, floObj) => {
+                        strHtml += `<div class='d-flex justify-content-start mb-5'>`;
+                        strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`;
+                        strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`;
+                        $.each(floObj.device_list, (index2, devObj) => {
+                            allDevList.push(devObj);
+                            let devItem = getRiserPoiObj();
+                            strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number
+                                }" data-position="${position}">
                                         <div class="card-body p-2">
                                             <div class="d-flex mb-2">
                                                 <div  class="mr-5 cur-poi">
                                                     <span class="d-inline-block mr-3">
                                                         <img src="${baseImgUrl +
-                varPathDevIcon +
-                devObj.device_image
-                }" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
+                                varPathDevIcon +
+                                devObj.device_image
+                                }" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
                                                     </span>
                                                     <a name="devItemName" data-number="${devObj.device_number
-                }" href="javascript:;">${devObj.full_name
-                }</a>
+                                }" href="javascript:;">${devObj.full_name
+                                }</a>
                                                 </div>
                                             </div>
                                         <div class="d-flex mb-0 mt-2 align-items-center">
                                                 <span id="${devObj.device_number
-                }_status" class="circle-light"></span>
+                                }_status" class="circle-light"></span>
                                                 <span class="${devItem ? "" : "d-none"
-                } ml-2">${devItem?.full_name
-                }：<span name="devItemPoiVal" data-point="${devItem?.points
-                }"></span>${devItem?.unit}</span>
+                                } ml-2">${devItem?.full_name
+                                }：<span name="devItemPoiVal" data-point="${devItem?.points
+                                }"></span>${devItem?.unit}</span>
                                                 <a href="javascript:;" name="devItem" data-id="${devObj.device_guid
-                }" data-number="${devObj.device_number
-                }" data-name="${devObj.full_name
-                }" class=" ml-2 mb-0 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
+                                }" data-number="${devObj.device_number
+                                }" data-name="${devObj.full_name
+                                }" class=" ml-2 mb-0 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
                                             </div>
                                         </div>
                                     </div>`;
-            });
-            strHtml += "</div></div>";
-          });
-          // Niagara 產生 file 開頭字串問題
-          strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
+                        });
+                        strHtml += "</div></div>";
+                    });
+                    // Niagara 產生 file 開頭字串問題
+                    strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
 
-          if (!res.data || res.data.length == 0) {
-            endPageLoading();
-          } else {
-            // 訂閱 baja 設備
-            if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
-              subDevice();
-            }
-          }
+                    if (!res.data || res.data.length == 0) {
+                        endPageLoading();
+                    } else {
+                        // 訂閱 baja 設備
+                        if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
+                            subDevice();
+                        }
+                    }
 
-          // 繪製 html
-          $("#floDevList").append(strHtml);
+                    // 繪製 html
+                    $("#floDevList").append(strHtml);
 
-          // 存入 device 基本資料至元素 data 屬性
-          $("#floDevList a[name=devItem]").each((idx, ele) => {
-            if (
-              allDevList.findIndex(
-                (x) => x.device_number == $(ele).data("number")
-              ) != -1
-            ) {
-              $(ele).data(
-                "devobj",
-                allDevList.filter(
-                  (x) => x.device_number == $(ele).data("number")
-                )[0]
-              );
-            }
-          });
+                    // 存入 device 基本資料至元素 data 屬性
+                    $("#floDevList a[name=devItem]").each((idx, ele) => {
+                        if (
+                            allDevList.findIndex(
+                                (x) => x.device_number == $(ele).data("number")
+                            ) != -1
+                        ) {
+                            $(ele).data(
+                                "devobj",
+                                allDevList.filter(
+                                    (x) => x.device_number == $(ele).data("number")
+                                )[0]
+                            );
+                        }
+                    });
 
-          // 初始化 pop 視窗
-          initPopover();
-          // 卡片設備名稱點擊事件
-          devItemNameEvent();
-        }
-      },
-      null,
-      "POST"
-    ).send();
-  }
+                    // 初始化 pop 視窗
+                    initPopover();
+                    // 卡片設備名稱點擊事件
+                    devItemNameEvent();
+                }
+            },
+            null,
+            "POST"
+        ).send();
+    }
 
-  function getBuildMenu(callback = null) {
-    let url = baseApiUrl + "/api/Device/GetBuildMenu";
-    let sendData = {
-      main_system_tag: pageAct.sysMainTag,
-      sub_system_tag: pageAct.sysSubTag,
-      building_tag: pageAct.buiTag,
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          let leftData = {},
-            rightData = {};
+    function getBuildMenu(callback = null) {
+        let url = baseApiUrl + "/api/Device/GetBuildMenu";
+        let sendData = {
+            main_system_tag: pageAct.sysMainTag,
+            sub_system_tag: pageAct.sysSubTag,
+            building_tag: pageAct.buiTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    let leftData = {},
+                        rightData = {};
 
-          for (var key in res.data) {
-            if (key.startsWith("left")) {
-              leftData[key.split("left_")[1]] = res.data[key];
-            } else if (key.startsWith("right")) {
-              rightData[key.split("right_")[1]] = res.data[key];
-            }
-          }
+                    for (var key in res.data) {
+                        if (key.startsWith("left")) {
+                            leftData[key.split("left_")[1]] = res.data[key];
+                        } else if (key.startsWith("right")) {
+                            rightData[key.split("right_")[1]] = res.data[key];
+                        }
+                    }
 
-          if (res.data.left_drawing != null) {
-            $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
-          } else {
-            $("#leftDiv").html(getHtmlByType(0, leftData));
-          }
-          if (res.data.right_drawing != null) {
-            $("#rightDiv").html(
-              getHtmlByType(res.data.right_drawing),
-              rightData
-            );
-          } else {
-            $("#rightDiv").html(getHtmlByType(0, rightData));
-          }
+                    if (res.data.left_drawing != null) {
+                        $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
+                    } else {
+                        $("#leftDiv").html(getHtmlByType(0, leftData));
+                    }
+                    if (res.data.right_drawing != null) {
+                        $("#rightDiv").html(
+                            getHtmlByType(res.data.right_drawing),
+                            rightData
+                        );
+                    } else {
+                        $("#rightDiv").html(getHtmlByType(0, rightData));
+                    }
 
-          callback
-            ? callback(
-              [res.data.left_drawing, res.data.right_drawing],
-              res.data
-            )
-            : "";
-        }
-      },
-      null,
-      "POST"
-    ).send();
-  }
+                    callback
+                        ? callback(
+                            [res.data.left_drawing, res.data.right_drawing],
+                            res.data
+                        )
+                        : "";
+                }
+            },
+            null,
+            "POST"
+        ).send();
+    }
 
-  // Card 即時狀態
-  function drawStateTabBlo(devNum) {
-    let devPath = devNum.replaceAll("_", "/");
-    let position =
-      $(`.card.device-wrap[data-number=${devNum}]`).data("position") || "left";
-    let width = buildMenuData[position + "_icon_click_url_width"]
-      ? buildMenuData[position + "_icon_click_url_width"] + "px"
-      : "100%";
-    let height = buildMenuData[position + "_icon_click_url_height"]
-      ? buildMenuData[position + "_icon_click_url_height"] + "px"
-      : "100%";
-    let strHtml;
-    if (pageAct.sysSubTag == "C") {
-      strHtml = `<div style="width:${width};height:${height};">
+    // Card 即時狀態
+    function drawStateTabBlo(devNum) {
+        let devPath = devNum.replaceAll("_", "/");
+        let position =
+            $(`.card.device-wrap[data-number=${devNum}]`).data("position") || "left";
+        let width = buildMenuData[position + "_icon_click_url_width"]
+            ? buildMenuData[position + "_icon_click_url_width"] + "px"
+            : "100%";
+        let height = buildMenuData[position + "_icon_click_url_height"]
+            ? buildMenuData[position + "_icon_click_url_height"] + "px"
+            : "100%";
+        let strHtml;
+        if (pageAct.sysSubTag == "C") {
+            strHtml = `<div style="width:${width};height:${height};">
                             <iframe src="./px/CCTV/TEST_RENDER.mp4" style="width:${width};height:${height};"></iframe>
                        </div>`;
-    } else {
-      strHtml = `<div style="width:${width};height:${height};">
+        } else {
+            strHtml = `<div style="width:${width};height:${height};">
                             <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
                        </div>`;
-    }
-
-    return strHtml;
-  }
-
-  function iframeResize(obj) {
-    obj.style.height =
-      obj.contentWindow.document.documentElement.scrollHeight + "px";
-  }
-
-  function show3DModel(urn) {
-    launchViewerForHotspot(
-      urn,
-      (viewer, nodeIds) => {
-        // 隱藏 toolbar
-        document.querySelector("#guiviewer3d-toolbar").style.display = "none";
-        let devDbIds = allDevList.map((x) => x.forge_dbid);
-        // 大類
-        let subDevDbId = [];
-        allDevList.forEach(({ device_nodes }) => {
-          subDevDbId = [
-            ...subDevDbId,
-            ...device_nodes.map((n) => n.forge_dbid),
-          ];
-        });
-        // console.log(devDbIds, subDevDbId)
-        // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
-        if (forgeInvType) {
-          setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
-        } else {
-          setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
         }
 
-        let sensorObjs = [];
-        let devices = [];
-        if (pageAct.sysSubTag === "M12") {
-          addHotPoint(viewer);
-          Forge3DSensor.sensorTimes = 0;
-          allDevList.forEach((device) => {
-            Forge3DSensor.sensorTimes++;
-            const sensorObj = new Forge3DSensor({
-              viewer: viewer,
-              ordPath: {
-                area_tag: pageAct.AreaTag,
-                building_tag: pageAct.buiTag,
-              },
-              selector: "[name=forgeViewer]",
-              elevCb: elevatorShow
-                ? () => {
-                  let elevOption = {
-                    selector: "[name=forgeViewer]",
-                    viewer: viewer,
-                    ordPath: {
-                      area_tag: pageAct.AreaTag,
-                      building_tag: pageAct.buiTag,
-                    },
-                    sensorObjs,
-                  };
+        return strHtml;
+    }
 
-                  // 電梯移動訂閱程序載入
-                  let forge3DElev = new Forge3DElevFull(elevOption);
-                  forge3DElev.bajaEndCallback = function () {
-                    endPageLoading();
-                  };
-                  forge3DElev.init();
+    function iframeResize(obj) {
+        obj.style.height =
+            obj.contentWindow.document.documentElement.scrollHeight + "px";
+    }
+
+    function show3DModel(urn) {
+        launchViewerForHotspot(
+            urn,
+            (viewer, nodeIds) => {
+                // 隱藏 toolbar
+                document.querySelector("#guiviewer3d-toolbar").style.display = "none";
+                let devDbIds = allDevList.map((x) => x.forge_dbid);
+                // 大類
+                let subDevDbId = [];
+                allDevList.forEach(({ device_nodes }) => {
+                    subDevDbId = [
+                        ...subDevDbId,
+                        ...device_nodes.map((n) => n.forge_dbid),
+                    ];
+                });
+                // console.log(devDbIds, subDevDbId)
+                // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
+                if (forgeInvType) {
+                    setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
+                } else {
+                    setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
                 }
-                : null,
-              curDevice: {
-                ...device,
-                roomDbId: !isNaN(parseInt(device.room_dbid))
-                  ? parseInt(device.room_dbid)
-                  : -1,
-                id: device.device_number,
-                position: isJSON(device.device_coordinate_3d)
-                  ? JSON.parse(device.device_coordinate_3d)
-                  : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-                temp: 25,
-                forge_dbid: parseInt(device.forge_dbid),
-              },
-              deviceList: allDevList.map((d) => ({
-                ...d,
-                roomDbId: !isNaN(parseInt(d.room_dbid))
-                  ? parseInt(d.room_dbid)
-                  : -1,
-                id: d.device_number,
-                position: isJSON(d.device_coordinate_3d)
-                  ? JSON.parse(d.device_coordinate_3d)
-                  : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-                temp: 25,
-                forge_dbid: parseInt(d.forge_dbid),
-              })),
-            });
-            sensorObjs.push(sensorObj);
-          });
-        } else {
-          devices = allDevList.map((x) => {
-            return {
-              roomDbId: !isNaN(parseInt(x.room_dbid))
-                ? parseInt(x.room_dbid)
-                : -1,
-              id: x.device_number,
-              position: isJSON(x.device_coordinate_3d)
-                ? JSON.parse(x.device_coordinate_3d)
-                : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-              sensorTypes: ["temperature", "humidity"],
-              temp: 30,
-              forgeDbId: parseInt(x.forge_dbid),
-            };
-          });
 
-          if (
-            (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
-            elevatorShow
-          ) {
-            let elevOption = {
-              selector: "[name=forgeViewer]",
-              viewer: viewer,
-              ordPath: {
-                area_tag: pageAct.AreaTag,
-                building_tag: pageAct.buiTag,
-              },
-            };
+                let sensorObjs = [];
+                let devices = [];
+                if (pageAct.sysSubTag === "M12") {
+                    addHotPoint(viewer);
+                    Forge3DSensor.sensorTimes = 0;
+                    allDevList.forEach((device) => {
+                        Forge3DSensor.sensorTimes++;
+                        const sensorObj = new Forge3DSensor({
+                            viewer: viewer,
+                            ordPath: {
+                                area_tag: pageAct.AreaTag,
+                                building_tag: pageAct.buiTag,
+                            },
+                            selector: "[name=forgeViewer]",
+                            elevCb: elevatorShow
+                                ? () => {
+                                    let elevOption = {
+                                        selector: "[name=forgeViewer]",
+                                        viewer: viewer,
+                                        ordPath: {
+                                            area_tag: pageAct.AreaTag,
+                                            building_tag: pageAct.buiTag,
+                                        },
+                                        sensorObjs,
+                                    };
 
-            // 電梯移動訂閱程序載入
-            let forge3DElev = new Forge3DElevFull(elevOption);
-            forge3DElev.bajaEndCallback = function () {
-              endPageLoading();
-            };
-            forge3DElev.init();
-          }
-        }
+                                    // 電梯移動訂閱程序載入
+                                    let forge3DElev = new Forge3DElevFull(elevOption);
+                                    forge3DElev.bajaEndCallback = function () {
+                                        endPageLoading();
+                                    };
+                                    forge3DElev.init();
+                                }
+                                : null,
+                            curDevice: {
+                                ...device,
+                                roomDbId: !isNaN(parseInt(device.room_dbid))
+                                    ? parseInt(device.room_dbid)
+                                    : -1,
+                                id: device.device_number,
+                                position: isJSON(device.device_coordinate_3d)
+                                    ? JSON.parse(device.device_coordinate_3d)
+                                    : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                                temp: 25,
+                                forge_dbid: parseInt(device.forge_dbid),
+                            },
+                            deviceList: allDevList.map((d) => ({
+                                ...d,
+                                roomDbId: !isNaN(parseInt(d.room_dbid))
+                                    ? parseInt(d.room_dbid)
+                                    : -1,
+                                id: d.device_number,
+                                position: isJSON(d.device_coordinate_3d)
+                                    ? JSON.parse(d.device_coordinate_3d)
+                                    : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                                temp: 25,
+                                forge_dbid: parseInt(d.forge_dbid),
+                            })),
+                        });
+                        sensorObjs.push(sensorObj);
+                    });
+                } else {
+                    devices = allDevList.map((x) => {
+                        return {
+                            roomDbId: !isNaN(parseInt(x.room_dbid))
+                                ? parseInt(x.room_dbid)
+                                : -1,
+                            id: x.device_number,
+                            position: isJSON(x.device_coordinate_3d)
+                                ? JSON.parse(x.device_coordinate_3d)
+                                : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                            sensorTypes: ["temperature", "humidity"],
+                            temp: 30,
+                            forgeDbId: parseInt(x.forge_dbid),
+                        };
+                    });
 
-        let option = {
-          devices: devices,
-        };
+                    if (
+                        (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
+                        elevatorShow
+                    ) {
+                        let elevOption = {
+                            selector: "[name=forgeViewer]",
+                            viewer: viewer,
+                            ordPath: {
+                                area_tag: pageAct.AreaTag,
+                                building_tag: pageAct.buiTag,
+                            },
+                        };
 
-        if (pageAct.sysSubTag !== "M12") {
-          // console.log(pageAct.sysSubTag, option)
-          heatMap = new ADHeatMaps(option);
-          heatMap.onComplete = () => {
-            $.each(allDevList, (idx, dev) => {
-              heatMap.changeTemp(dev.device_number, dev._temp || 0);
-            });
-            subDevice();
-          };
-        }
-        if (subDeviceData.length != 0) {
-          let stSubArr = subDeviceData.map((x) =>
-            Object.keys(x)
-              .filter((y) => y == "ST")
-              .map((y) => x)
-          );
+                        // 電梯移動訂閱程序載入
+                        let forge3DElev = new Forge3DElevFull(elevOption);
+                        forge3DElev.bajaEndCallback = function () {
+                            endPageLoading();
+                        };
+                        forge3DElev.init();
+                    }
+                }
 
-          for (let sub of stSubArr) {
-            let matchDevice = allDevList.filter(
-              (x) => x.device_number == sub[0]?.device_number
-            )[0];
-            if (matchDevice) {
-              setForgeHotSpotColor(matchDevice);
-            }
-          }
-        }
-        if (pageAct.sysSubTag == "W2") {
-          // console.log("@@",pageAct, pageAct.sub_system_tag)
-          getWaterNodeId(viewer);
-        } else if (pageAct.sysSubTag == "E1") {
-          getE1NodeId(viewer);
-        }
-      },
-      () => { },
-      "[name=forgeViewer]"
-    );
-  }
+                let option = {
+                    devices: devices,
+                };
 
-  // 供水系統 - 取得欲染色 dbid
-  function getWaterNodeId() {
-    // let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
-    // let sendData = { forgeNodeKey: "water_wupply" };
-    // objSendData.Data = sendData;
-    // ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-    //     if (!res || res.code != "0000" || !res.data) {
+                if (pageAct.sysSubTag !== "M12") {
+                    // console.log(pageAct.sysSubTag, option)
+                    heatMap = new ADHeatMaps(option);
+                    heatMap.onComplete = () => {
+                        $.each(allDevList, (idx, dev) => {
+                            heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                        });
+                        subDevice();
+                    };
+                }
+                if (subDeviceData.length != 0) {
+                    let stSubArr = subDeviceData.map((x) =>
+                        Object.keys(x)
+                            .filter((y) => y == "ST")
+                            .map((y) => x)
+                    );
 
-    //     } else {
-    //         if (!isNaN(parseInt(res.data[0]?.system_value))) {
-    //             changeColor(parseInt(res.data[0]?.system_value))
-    //         }
-    //         console.log(res.data)
-    //     }
-    // }, null, "POST").send();
-    // console.log("1",viewer.model)
-    viewer.model.search(
-      "給水",
-      (nodeIds) => {
-        // console.log("2",nodeIds)
-        viewer.show(nodeIds);
-      },
-      (e) => {
-        console.log(e);
-      }
-    );
-  }
-
-  // 高壓配電盤染色
-  function getE1NodeId() {
-    viewer.model.search(
-      "高壓電力",
-      (nodeIds) => {
-        viewer.show(nodeIds);
-      },
-      (e) => {
-        console.log(e);
-      }
-    );
-  }
-
-  function getHotspotPoint(callback = null) {
-    let url = baseApiUrl + "/api/GetDevForCor";
-    let sendData = {
-      device_area_tag: pageAct.AreaTag,
-      device_building_tag: pageAct.buiTag,
-      device_system_tag: pageAct.sysMainTag,
-      device_name_tag: pageAct.sysSubTag,
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          let myDataList = [];
-          $.each(res.data, (idx, data) => {
-            let item = {};
-            item.position = {};
-            if (
-              data.device_coordinate_3d != null &&
-              isJSON(data.device_coordinate_3d)
-            ) {
-              item.position = JSON.parse(data.device_coordinate_3d);
-            }
-            $.extend(item, data);
-            myDataList.push(item);
-          });
-          setHotspotPoint(myDataList);
-          if (pageAct.sysMainTag == "LT") {
-            setLightPoint(myDataList);
-          }
-          callback ? callback() : "";
-        }
-      },
-      null,
-      "POST"
-    ).send();
-  }
-
-  function setHotspotPoint(myDataList = []) {
-    getHopspotPoint(myDataList);
-  }
-
-  function setLightPoint(myDataList = []) {
-    getLightData(myDataList);
-  }
-
-  // 取得 不可視 3D 模型類型
-  function getInviForge() {
-    let url = baseApiUrl + "/api/Device/GetForgeInvType";
-
-    ytAjax = new YourTeam.Ajax(
-      url,
-      null,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          let datas = res.data;
-
-          forgeInvType = datas.filter(
-            (x) => x.sub_system_tag == pageAct.sysSubTag
-          )[0]?.invisible_value;
-          forgeInvTypeDef = datas.filter(
-            (x) => x.invisible_type == "default_value"
-          )[0]?.invisible_value;
-        }
-      },
-      null,
-      "POST"
-    ).send();
-  }
-
-  // 設置 模型隱藏或透明
-  function setInviForge(type, devDbIds) {
-    if (type == "Hide") {
-      hideAllObjects(devDbIds);
-    } else if (type == "Opacity") {
-      setTransparentBuilding(0, devDbIds);
+                    for (let sub of stSubArr) {
+                        let matchDevice = allDevList.filter(
+                            (x) => x.device_number == sub[0]?.device_number
+                        )[0];
+                        if (matchDevice) {
+                            setForgeHotSpotColor(matchDevice);
+                        }
+                    }
+                }
+                if (pageAct.sysSubTag == "W2") {
+                    // console.log("@@",pageAct, pageAct.sub_system_tag)
+                    getWaterNodeId(viewer);
+                } else if (pageAct.sysSubTag == "E1") {
+                    getE1NodeId(viewer);
+                }
+            },
+            () => { },
+            "[name=forgeViewer]"
+        );
     }
-  }
 
-  var parentEle = "";
-  onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
-    forgeUnFocusAll();
-    let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
-    let position = [rect.left + rect.width / 2, rect.top + rect.height / 3];
-    // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
-    let devObj = obj.myData;
-    let name =
-      allDevList.filter((x) => x.device_guid == devObj.device_guid)[0]
-        ?.full_name || devObj.full_name;
-    devObj.full_name = name;
-    parentEle = crePosPopover(position, devObj);
-    $(parentEle).click();
-  });
+    // 供水系統 - 取得欲染色 dbid
+    function getWaterNodeId() {
+        // let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
+        // let sendData = { forgeNodeKey: "water_wupply" };
+        // objSendData.Data = sendData;
+        // ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+        //     if (!res || res.code != "0000" || !res.data) {
 
-  onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
-    $(parentEle).YTTooltip("hide");
-  });
+        //     } else {
+        //         if (!isNaN(parseInt(res.data[0]?.system_value))) {
+        //             changeColor(parseInt(res.data[0]?.system_value))
+        //         }
+        //         console.log(res.data)
+        //     }
+        // }, null, "POST").send();
+        // console.log("1",viewer.model)
+        viewer.model.search(
+            "給水",
+            (nodeIds) => {
+                // console.log("2",nodeIds)
+                viewer.show(nodeIds);
+            },
+            (e) => {
+                console.log(e);
+            }
+        );
+    }
 
-  onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
-    $("#floDevList a[name=devItem]").each((idx, ele) => {
-      let devNum = $(ele).data("number");
-      let dbid = obj.myDataList.filter((x) => x.device_number == devNum)[0]
-        ?._dbId;
-      allDevList.forEach((dev, idx) => {
-        if (dev.device_number == devNum) {
-          dev.spriteDbid = dbid;
-          setForgeHotSpotColor(dev);
+    // 高壓配電盤染色
+    function getE1NodeId() {
+        viewer.model.search(
+            "高壓電力",
+            (nodeIds) => {
+                viewer.show(nodeIds);
+            },
+            (e) => {
+                console.log(e);
+            }
+        );
+    }
+
+    function getHotspotPoint(callback = null) {
+        let url = baseApiUrl + "/api/GetDevForCor";
+        let sendData = {
+            device_area_tag: pageAct.AreaTag,
+            device_building_tag: pageAct.buiTag,
+            device_system_tag: pageAct.sysMainTag,
+            device_name_tag: pageAct.sysSubTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    let myDataList = [];
+                    $.each(res.data, (idx, data) => {
+                        let item = {};
+                        item.position = {};
+                        if (
+                            data.device_coordinate_3d != null &&
+                            isJSON(data.device_coordinate_3d)
+                        ) {
+                            item.position = JSON.parse(data.device_coordinate_3d);
+                        }
+                        $.extend(item, data);
+                        myDataList.push(item);
+                    });
+                    setHotspotPoint(myDataList);
+                    if (pageAct.sysMainTag == "LT") {
+                        setLightPoint(myDataList);
+                    }
+                    callback ? callback() : "";
+                }
+            },
+            null,
+            "POST"
+        ).send();
+    }
+
+    function setHotspotPoint(myDataList = []) {
+        getHopspotPoint(myDataList);
+    }
+
+    function setLightPoint(myDataList = []) {
+        getLightData(myDataList);
+    }
+
+    // 取得 不可視 3D 模型類型
+    function getInviForge() {
+        let url = baseApiUrl + "/api/Device/GetForgeInvType";
+
+        ytAjax = new YourTeam.Ajax(
+            url,
+            null,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    let datas = res.data;
+
+                    forgeInvType = datas.filter(
+                        (x) => x.sub_system_tag == pageAct.sysSubTag
+                    )[0]?.invisible_value;
+                    forgeInvTypeDef = datas.filter(
+                        (x) => x.invisible_type == "default_value"
+                    )[0]?.invisible_value;
+                }
+            },
+            null,
+            "POST"
+        ).send();
+    }
+
+    // 設置 模型隱藏或透明
+    function setInviForge(type, devDbIds) {
+        if (type == "Hide") {
+            hideAllObjects(devDbIds);
+        } else if (type == "Opacity") {
+            setTransparentBuilding(0, devDbIds);
         }
-      });
-      $(ele).data("dbId", dbid);
-    });
-  });
+    }
 
-  onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
-    forgeUnFocusAll();
-  });
-
-  function forgeUnFocusAll() {
-    $("#floDevList a[name=devItem]").each((idx, ele) => {
-      const eleDbId = $(ele).data("dbId");
-      if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
-        changeScaleForHotspot(eleDbId, false);
-        return;
-      } else {
-        // 3D 熱點解除
-        controlFocusHotspot(eleDbId, false);
-      }
+    var parentEle = "";
+    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
+        forgeUnFocusAll();
+        let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
+        let position = [rect.left + rect.width / 2, rect.top + rect.height / 3];
+        // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
+        let devObj = obj.myData;
+        let name =
+            allDevList.filter((x) => x.device_guid == devObj.device_guid)[0]
+                ?.full_name || devObj.full_name;
+        devObj.full_name = name;
+        parentEle = crePosPopover(position, devObj);
+        $(parentEle).click();
     });
-  }
+
+    onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
+        $(parentEle).YTTooltip("hide");
+    });
+
+    onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
+        $("#floDevList a[name=devItem]").each((idx, ele) => {
+            let devNum = $(ele).data("number");
+            let dbid = obj.myDataList.filter((x) => x.device_number == devNum)[0]
+                ?._dbId;
+            allDevList.forEach((dev, idx) => {
+                if (dev.device_number == devNum) {
+                    dev.spriteDbid = dbid;
+                    setForgeHotSpotColor(dev);
+                }
+            });
+            $(ele).data("dbId", dbid);
+        });
+    });
+
+    onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
+        forgeUnFocusAll();
+    });
+
+    function forgeUnFocusAll() {
+        $("#floDevList a[name=devItem]").each((idx, ele) => {
+            const eleDbId = $(ele).data("dbId");
+            if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                changeScaleForHotspot(eleDbId, false);
+                return;
+            } else {
+                // 3D 熱點解除
+                controlFocusHotspot(eleDbId, false);
+            }
+        });
+    }
 </script>
diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html
index ab84263..77da459 100644
--- a/Frontend/_sysMonFloor.html
+++ b/Frontend/_sysMonFloor.html
@@ -1,7 +1,7 @@
 <style>
-  [id^="yt_tooltip"] {
-    min-width: 520px;
-  }
+    [id^="yt_tooltip"] {
+        min-width: 520px;
+    }
 </style>
 
 <!-- <div class="row m-0 mb-3">
@@ -15,1778 +15,1778 @@
   <div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
 </div> -->
 <div class="d-flex">
-  <div class="col-6 my-3">
-    <div
-      id="floChart"
-      style="height: 100%; width: 100%; background-color: #fff"
-    ></div>
-  </div>
-  <div class="col-6 my-3">
-    <!-- <div id="forgeViewer" class="position-relative" style="height:100%">
-          <div id="forgeHeatBarDiv" class="d-flex mb-4 position-absolute" style="gap:15px">
-          </div>
-        </div> -->
-    <div id="forgeViewer" class="position-relative" style="height: 80vh">
-      <div
-        id="forgeHeatBarDiv"
-        class="d-flex mb-4 position-absolute"
-        style="gap: 15px"
-      ></div>
+    <div class="col-6 my-3">
+        <div id="floChart"
+             style="height: 100%; width: 100%; background-color: #fff"></div>
+    </div>
+    <div class="col-6 my-3">
+        <!-- <div id="forgeViewer" class="position-relative" style="height:100%">
+              <div id="forgeHeatBarDiv" class="d-flex mb-4 position-absolute" style="gap:15px">
+              </div>
+            </div> -->
+        <div id="forgeViewer" class="position-relative" style="height: 80vh">
+            <div id="forgeHeatBarDiv"
+                 class="d-flex mb-4 position-absolute"
+                 style="gap: 15px"></div>
+        </div>
     </div>
-  </div>
 </div>
 
 <!--<script src="lib/echarts.min.js"></script>-->
 <script>
-  var floChart = null;
-  var currentData = [];
-  var heatMap = null;
-  var allDeviceRowData = []; //所有設備原始資料
-  var global_emergency_alarm_device_number = [];
-  var lightControl = "device"; // device 群控 node 燈控
-  var zoomToggle = 1.3;
-  $(function () {
-    $(loadEle).Loading("start");
-    $("#topLight").html(setTopLight());
-    setLightColor();
-    initChart();
-    getFloData();
-    drawHeatBar();
-    getHotspotPoint(() => {
-      show3DModel(pageAct.urn);
+    var floChart = null;
+    var currentData = [];
+    var heatMap = null;
+    var allDeviceRowData = []; //所有設備原始資料
+    var global_emergency_alarm_device_number = [];
+    var lightControl = "device"; // device 群控 node 燈控
+    var zoomToggle = 1.3;
+    $(function () {
+        $(loadEle).Loading("start");
+        $("#topLight").html(setTopLight());
+        setLightColor();
+        initChart();
+        getFloData();
+        drawHeatBar();
+        getHotspotPoint(() => {
+            show3DModel(pageAct.urn);
+        });
     });
-  });
 
-  onEvent("click", "#resChartZoom", function () {
-    floChart.setOption({
-      geo: {
-        center: null,
-        zoom: 1.2,
-      },
+    onEvent("click", "#resChartZoom", function () {
+        floChart.setOption({
+            geo: {
+                center: null,
+                zoom: 1.2,
+            },
+        });
+        resetData();
     });
-    resetData();
-  });
 
-  function getFloData() {
-    let url = baseApiUrl + "/api/Device/GetDeviceList";
-    let sendData = {
-      sub_system_tag: pageAct.sysSubTag,
-      building_tag: pageAct.buiTag,
-      floor_tag: pageAct.floTag,
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          lightControl = res.module;
-          chartHandler(
-            `${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`
-          );
-          if (pageAct.sysSubTag === "L1") {
-            let nodes = [];
-            res.data[0].device_list.forEach((d) => {
-              nodes = [...nodes, ...d.device_nodes];
-            });
-            getDevice([...nodes, ...res.data[0].device_list]);
-          } else {
-            getDevice(res.data[0].device_list);
-          }
-        }
-      },
-      null,
-      "POST"
-    ).send();
-  }
-
-  function getDevice(devList) {
-    let selected_floor = devList[0];
-    //let selected_floor_objs = devList.filter(function (item) {
-    //    return item.floor_guid == selected_floor.floor_guid;
-    //});
-
-    //currentData = selected_floor_objs[0].device;
-
-    currentData = $.map(devList, function (item) {
-      //資料處理
-      if (
-        selected_floor.device_number != undefined &&
-        selected_floor.device_number != null &&
-        selected_floor.device_number != "" &&
-        selected_floor.device_number == item.device_number
-      ) {
-        item.selected = true;
-      } else {
-        item.selected = false;
-      }
-      if (
-        item.device_coordinate != undefined &&
-        item.device_coordinate != null
-      ) {
-        var coordinate = item.device_coordinate.split(",");
-        item.value = [parseFloat(coordinate[0]), parseFloat(coordinate[1])];
-      }
-
-      if (
-        item.device_nodes != undefined &&
-        item.device_nodes != null &&
-        item.device_nodes.length > 0
-      ) {
-        if (item.device_master_number == selected_floor.device_master) {
-          //var datatable_data = {
-          //    device_full_name: item.full_name,
-          //    device_number: item.device_number,
-          //    device_master: item.device_master_number
-          //}
-          //datatable_data_list.push(datatable_data);
-
-          $.map(item.device_nodes, function (item_node) {
-            item_node.selected = false;
-            if (
-              item_node.device_node_coordinate != undefined &&
-              item_node.device_node_coordinate != null
-            ) {
-              var node_coordinate = item_node.device_node_coordinate.split(",");
-              item_node.value = [
-                parseFloat(node_coordinate[0]),
-                parseFloat(node_coordinate[1]),
-              ];
-            }
-          });
-        } else {
-          //var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
-          //if (index < 0) {
-          //    var datatable_data = {
-          //        device_number: item.device_number,
-          //        device_master: item.device_master_number
-          //    }
-          //    datatable_data_list.push(datatable_data);
-          //}
-
-          $.map(item.device_nodes, function (item_node) {
-            item_node.selected = false;
-            if (
-              item_node.device_node_coordinate != undefined &&
-              item_node.device_node_coordinate != null
-            ) {
-              var node_coordinate = item_node.device_node_coordinate.split(",");
-              item_node.value = [
-                parseFloat(node_coordinate[0]),
-                parseFloat(node_coordinate[1]),
-              ];
-            }
-          });
-        }
-      }
-      return item;
-    });
-    if (currentData == null || currentData.length == 0) {
-      currentData = [];
+    function getFloData() {
+        let url = baseApiUrl + "/api/Device/GetDeviceList";
+        let sendData = {
+            sub_system_tag: pageAct.sysSubTag,
+            building_tag: pageAct.buiTag,
+            floor_tag: pageAct.floTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    lightControl = res.module;
+                    chartHandler(
+                        `${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`
+                    );
+                    if (pageAct.sysSubTag === "L1") {
+                        let nodes = [];
+                        res.data[0].device_list.forEach((d) => {
+                            nodes = [...nodes, ...d.device_nodes];
+                        });
+                        getDevice([...nodes, ...res.data[0].device_list]);
+                    } else {
+                        getDevice(res.data[0].device_list);
+                    }
+                }
+            },
+            null,
+            "POST"
+        ).send();
     }
 
-    // myBaja.setPrepareSubscribeDevices(currentData);
-    // myBaja.setCallBack(mySubscribeDevices);
+    function getDevice(devList) {
+        let selected_floor = devList[0];
+        //let selected_floor_objs = devList.filter(function (item) {
+        //    return item.floor_guid == selected_floor.floor_guid;
+        //});
 
-    //if (datatable_data_list.length > 0) {
-    //    $("#datatablediv").show();
-    //    dataTableDraw();
-    //} else {
-    //    $("#datatablediv").hide();
-    //}
-  }
+        //currentData = selected_floor_objs[0].device;
 
-  function initChart() {
-    let chartDom = $("#floChart")[0];
-    floChart = echarts.init(chartDom, null, { width: "auto" });
-  }
-
-  function chartHandler(url) {
-    floChart.clear();
-
-    $.get(url, function (svg) {
-      if (svg == undefined || svg == null) {
-        return;
-      }
-
-      echarts.registerMap("floor_svg", { svg: svg });
-
-      option = {
-        // animationDurationUpdate: 1500,
-        tooltip: {
-          formatter: function (params) {
+        currentData = $.map(devList, function (item) {
+            //資料處理
             if (
-              params.data.device_node_guid != undefined &&
-              params.data.device_node_guid != null &&
-              params.data.device_node_guid != ""
+                selected_floor.device_number != undefined &&
+                selected_floor.device_number != null &&
+                selected_floor.device_number != "" &&
+                selected_floor.device_number == item.device_number
             ) {
-              return `<div >
+                item.selected = true;
+            } else {
+                item.selected = false;
+            }
+            if (
+                item.device_coordinate != undefined &&
+                item.device_coordinate != null
+            ) {
+                var coordinate = item.device_coordinate.split(",");
+                item.value = [parseFloat(coordinate[0]), parseFloat(coordinate[1])];
+            }
+
+            if (
+                item.device_nodes != undefined &&
+                item.device_nodes != null &&
+                item.device_nodes.length > 0
+            ) {
+                if (item.device_master_number == selected_floor.device_master) {
+                    //var datatable_data = {
+                    //    device_full_name: item.full_name,
+                    //    device_number: item.device_number,
+                    //    device_master: item.device_master_number
+                    //}
+                    //datatable_data_list.push(datatable_data);
+
+                    $.map(item.device_nodes, function (item_node) {
+                        item_node.selected = false;
+                        if (
+                            item_node.device_node_coordinate != undefined &&
+                            item_node.device_node_coordinate != null
+                        ) {
+                            var node_coordinate = item_node.device_node_coordinate.split(",");
+                            item_node.value = [
+                                parseFloat(node_coordinate[0]),
+                                parseFloat(node_coordinate[1]),
+                            ];
+                        }
+                    });
+                } else {
+                    //var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
+                    //if (index < 0) {
+                    //    var datatable_data = {
+                    //        device_number: item.device_number,
+                    //        device_master: item.device_master_number
+                    //    }
+                    //    datatable_data_list.push(datatable_data);
+                    //}
+
+                    $.map(item.device_nodes, function (item_node) {
+                        item_node.selected = false;
+                        if (
+                            item_node.device_node_coordinate != undefined &&
+                            item_node.device_node_coordinate != null
+                        ) {
+                            var node_coordinate = item_node.device_node_coordinate.split(",");
+                            item_node.value = [
+                                parseFloat(node_coordinate[0]),
+                                parseFloat(node_coordinate[1]),
+                            ];
+                        }
+                    });
+                }
+            }
+            return item;
+        });
+        if (currentData == null || currentData.length == 0) {
+            currentData = [];
+        }
+
+        // myBaja.setPrepareSubscribeDevices(currentData);
+        // myBaja.setCallBack(mySubscribeDevices);
+
+        //if (datatable_data_list.length > 0) {
+        //    $("#datatablediv").show();
+        //    dataTableDraw();
+        //} else {
+        //    $("#datatablediv").hide();
+        //}
+    }
+
+    function initChart() {
+        let chartDom = $("#floChart")[0];
+        floChart = echarts.init(chartDom, null, { width: "auto" });
+    }
+
+    function chartHandler(url) {
+        floChart.clear();
+
+        $.get(url, function (svg) {
+            if (svg == undefined || svg == null) {
+                return;
+            }
+
+            echarts.registerMap("floor_svg", { svg: svg });
+
+            option = {
+                // animationDurationUpdate: 1500,
+                tooltip: {
+                    formatter: function (params) {
+                        if (
+                            params.data.device_node_guid != undefined &&
+                            params.data.device_node_guid != null &&
+                            params.data.device_node_guid != ""
+                        ) {
+                            return `<div >
               名稱：${params.data.device_node_full_name}<br>
                     Guid：${params.data.device_node_guid}
               </div>`;
-            } else {
-              return `<div >名稱：${params.data.full_name}<br>
+                        } else {
+                            return `<div >名稱：${params.data.full_name}<br>
                     Guid：${params.data.device_guid}</div>`;
-            }
-          },
-        },
-        toolbox: {
-          //工具欄
-          show: false,
-        },
-        geo: {
-          map: "floor_svg",
-          roam: true,
-          scaleLimit: {
-            //限制放大縮小倍數
-            max: 2,
-            min: 1,
-          },
-          layoutSize: "100%",
-          layoutCenter: [],
-          zoom: 1.1,
-          silent: true,
-        },
-        series: [
-          {
-            //不管有無被選擇(圓點)
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 0,
-            symbol: "circle",
-            symbolSize: 20,
-            symbolOffset: [10, 10],
-            label: {
-              show: false,
-            },
-            /*data: currentData,*/
-            z: 2,
-          },
-          {
-            //未選擇的設備(icon)
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 0,
-            symbolSize: 50,
-            label: {
-              formatter: "{b}",
-              position: "bottom",
-              show: true,
-              backgroundColor: "orange",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: "20",
-                fontWeight: "bold",
-                color: "yellow",
-              },
-            },
-            selectedMode: "single",
-            data: null,
-            z: 1,
-          },
-          {
-            //被選擇的設備(icon)
-            type: "effectScatter",
-            coordinateSystem: "geo",
-            geoIndex: 0,
-            showEffectOn: "render",
-            symbolSize: 50,
-            label: {
-              formatter: "{b}",
-              position: "bottom",
-              show: true,
-              backgroundColor: "orange",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: "20",
-                fontWeight: "bold",
-                color: "yellow",
-              },
-            },
-            selectedMode: "single",
-            data: null,
-            z: 1,
-          },
-          {
-            //編輯模式底下的設備(圓點，只會有一個)
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 0,
-            symbol: "circle",
-            symbolSize: 20,
-            symbolOffset: [10, 10],
-            label: {
-              show: false,
-            },
-            /*data: currentData,*/
-            z: 2,
-          },
-          {
-            //編輯模式底下的設備(icon，只會有一個)
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 0,
-            symbolSize: 50,
-            label: {
-              formatter: "{b}",
-              position: "bottom",
-              show: true,
-              backgroundColor: "orange",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: "20",
-                fontWeight: "bold",
-                color: "yellow",
-              },
-            },
-            data: null,
-            z: 1,
-          },
-        ],
-      };
+                        }
+                    },
+                },
+                toolbox: {
+                    //工具欄
+                    show: false,
+                },
+                geo: {
+                    map: "floor_svg",
+                    roam: true,
+                    scaleLimit: {
+                        //限制放大縮小倍數
+                        max: 2,
+                        min: 1,
+                    },
+                    layoutSize: "100%",
+                    layoutCenter: [],
+                    zoom: 1.1,
+                    silent: true,
+                },
+                series: [
+                    {
+                        //不管有無被選擇(圓點)
+                        type: "scatter",
+                        coordinateSystem: "geo",
+                        geoIndex: 0,
+                        symbol: "circle",
+                        symbolSize: 20,
+                        symbolOffset: [10, 10],
+                        label: {
+                            show: false,
+                        },
+                        /*data: currentData,*/
+                        z: 2,
+                    },
+                    {
+                        //未選擇的設備(icon)
+                        type: "scatter",
+                        coordinateSystem: "geo",
+                        geoIndex: 0,
+                        symbolSize: 50,
+                        label: {
+                            formatter: "{b}",
+                            position: "bottom",
+                            show: true,
+                            backgroundColor: "orange",
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: "20",
+                                fontWeight: "bold",
+                                color: "yellow",
+                            },
+                        },
+                        selectedMode: "single",
+                        data: null,
+                        z: 1,
+                    },
+                    {
+                        //被選擇的設備(icon)
+                        type: "effectScatter",
+                        coordinateSystem: "geo",
+                        geoIndex: 0,
+                        showEffectOn: "render",
+                        symbolSize: 50,
+                        label: {
+                            formatter: "{b}",
+                            position: "bottom",
+                            show: true,
+                            backgroundColor: "orange",
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: "20",
+                                fontWeight: "bold",
+                                color: "yellow",
+                            },
+                        },
+                        selectedMode: "single",
+                        data: null,
+                        z: 1,
+                    },
+                    {
+                        //編輯模式底下的設備(圓點，只會有一個)
+                        type: "scatter",
+                        coordinateSystem: "geo",
+                        geoIndex: 0,
+                        symbol: "circle",
+                        symbolSize: 20,
+                        symbolOffset: [10, 10],
+                        label: {
+                            show: false,
+                        },
+                        /*data: currentData,*/
+                        z: 2,
+                    },
+                    {
+                        //編輯模式底下的設備(icon，只會有一個)
+                        type: "scatter",
+                        coordinateSystem: "geo",
+                        geoIndex: 0,
+                        symbolSize: 50,
+                        label: {
+                            formatter: "{b}",
+                            position: "bottom",
+                            show: true,
+                            backgroundColor: "orange",
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: "20",
+                                fontWeight: "bold",
+                                color: "yellow",
+                            },
+                        },
+                        data: null,
+                        z: 1,
+                    },
+                ],
+            };
 
-      floChart.setOption(option);
+            floChart.setOption(option);
 
-      if (
-        currentData != undefined &&
-        currentData != null &&
-        currentData.length > 0
-      ) {
-        resetData();
-      }
-
-      var ordPath = {
-        building_tag: pageAct.buiTag,
-        system_tag: pageAct.sysMainTag,
-      };
-      //myBaja.setSubscribeDevicesByBql(ordPath);
-      //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
-      let parentEle = null;
-      floChart.on("click", function (params) {
-        forgeUnFocusAll();
-        chartUnFocusAll();
-        if (params.componentType == "series") {
-          let data = params.data;
-          let rect = $("#floChart")[0].getBoundingClientRect();
-          let position = [
-            rect.left + rect.width / 2,
-            rect.top + rect.height / 4,
-          ];
-          // console.log(position)
-          // let position = [params.event.event.clientX+100, params.event.event.clientY-300];
-          data._dbId = data._dbId ?? "";
-          // currentData.find(
-          //   (cData) => cData.device_number === data.device_number
-          // ).forge_dbid;
-          parentEle = crePosPopover(position, data);
-          $(parentEle).click();
-        } else {
-          $(parentEle).YTTooltip("hide");
-        }
-      });
-
-      floChart.getZr().on("click", function (params) {
-        /*console.log("click", params);*/
-        var pixelPoint = [params.offsetX, params.offsetY];
-        var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
-
-        if (!(params?.target?.shape?.symbolType == "circle")) {
-          $(parentEle).YTTooltip("hide");
-        }
-
-        //temp_device_on_floor_map = [{
-        //    device_guid: selected_temp_device.device_guid,
-        //    device_full_name: selected_temp_device.device_full_name,
-        //    device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
-        //    device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
-        //    status: selected_temp_device.status,
-        //    value: dataPoint
-        //}];
-
-        // currentData.push([dataPoint[0], dataPoint[1], 1]);
-        // floChart.setOption(option);
-      });
-
-      onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
-        console.log("Current", obj.myDataList);
-        let option = floChart.getOption();
-
-        option.series.forEach(function (series) {
-          (series.data ?? []).forEach(function (point) {
-            let dbid = obj.myDataList.filter(
-              (x) => x.device_number == point.device_number
-            )[0]?._dbId;
-            point._dbId = dbid;
-            // currentData.forEach(function (cData) {
-            //   console.log(cData.device_node_guid=== point.device_node_guid)
-            //   if (lightControl === "node" && pageAct.sysSubTag === "L1" && cData.device_node_guid == point.device_node_guid) {
-            //     cData._dbId = dbid;
-            //     cData.spriteDbid = dbid;
-            //     setForgeHotSpotColor(cData);
-            //   }
-            //   else if (cData.device_guid == point.device_guid) {
-            //     cData._dbId = dbid;
-            //     cData.spriteDbid = dbid;
-            //     setForgeHotSpotColor(cData);
-            //   }
-            // });
-            const cData = currentData.find((cur) => {
-              if (lightControl === "node" && pageAct.sysSubTag === "L1") {
-                if (cur.device_node_guid == point.device_node_guid) return cur;
-              } else if (cur.device_guid == point.device_guid) {
-                return cur;
-              }
-            });
-            cData._dbId = dbid;
-            cData.spriteDbid = dbid;
-            setForgeHotSpotColor(cData);
-          });
-        });
-        floChart.setOption(option);
-
-        subDevice();
-      });
-      //floChart.on('selectchanged', function (params) {
-
-      //    console.log("selectchanged", params);
-      //    // currentData.push([dataPoint[0], dataPoint[1], 1]);
-      //    // floChart.setOption(option);
-
-      //    currentData = $.map(currentData, function (item) {
-      //        item.selected = false;
-      //        return item;
-      //    });
-
-      //    if (params.selected.length > 0) {
-      //        currentData[params.selected[0].seriesIndex - 1].selected = true;
-      //    }
-
-      //});
-
-      // floChart.getZr().on('mousewheel', function (params) {
-      //     console.log(params)
-      // })
-      floChart.on("georoam", function (params) {
-        var zoom = floChart.getOption().geo[0].zoom;
-        const option = floChart.getOption();
-        console.log("georoam", zoom);
-
-        if (zoom <= 1.5) {
-          /*ResetFloorMap();*/
-          floChart.setOption({
-            geo: {
-              roam: "scale",
-            },
-          });
-        } else {
-          floChart.setOption({
-            geo: {
-              roam: true,
-            },
-          });
-        }
-        if (zoom > zoomToggle) {
-          const currentImage = currentData.find(
-            ({ device_image }) => device_image
-          ).device_image;
-          option.series[1].data = option.series[0].data.map((d) => ({
-            ...d,
-            symbol:
-              "image://" + baseImgUrl + "/upload/device_icon/" + currentImage,
-          }));
-        } else {
-          option.series[1].data = [];
-        }
-        floChart.setOption(option);
-        // resetData();
-      });
-    }).fail(function () {
-      toast_warning("查無該樓層地圖");
-      floChart.clear();
-    });
-  }
-
-  //baja 訂閱設備
-  function subDevice() {
-    console.log("subDevice 開始");
-
-    let option = floChart.getOption();
-    let floMyBaja = new subscriptionDevices();
-    var ordPath = {
-      area_tag: pageAct.AreaTag,
-      building_tag: pageAct.buiTag,
-      system_tag: pageAct.sysMainTag,
-      name_tag: pageAct.sysSubTag,
-      flo_tag: pageAct.floTag,
-    };
-    floMyBaja.setSubscribeDevicesByBql(ordPath);
-
-    // 燈熱點用
-    let lightOnHotColorArr = [];
-    let lightOffHotColorArr = [];
-    // 燈光圈用
-    let deviceScatterNormalArr = [];
-    let deviceScatterCloseArr = [];
-    let deviceScatterErrorArr = [];
-    floMyBaja.setSubscribeDevicesCallBack(function (data) {
-      let matchDevice = currentData.filter(
-        (x) => x.device_number == data.device_number_full
-      )[0];
-      if (!matchDevice) {
-        return false;
-      }
-      //將訂閱值塞入 subDeviceData
-      if (
-        subDeviceData.findIndex(
-          (x) => x.device_number == matchDevice.device_number
-        ) == -1
-      ) {
-        let obj = {};
-        obj.device_number = matchDevice.device_number;
-        obj.dbid = matchDevice.forge_dbid;
-        subDeviceData.push(obj);
-      }
-      let norDevPoiName = matchDevice.device_normal_point_name;
-      let cloDevPoiName = matchDevice.device_close_point_name;
-      let errDevPoiName = matchDevice.device_error_point_name;
-
-      if (data.point_name == "Temp" || data.point_name == "TEMP") {
-        heatMap?.changeTemp(
-          data.device_number_full,
-          !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
-        );
-        let devIdx = currentData.findIndex(
-          (x) => x.device_number == data.device_number_full
-        );
-        currentData[devIdx]._temp = !isNaN(parseInt(data.value))
-          ? parseInt(data.value)
-          : 0;
-      }
-      if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
-        const lightOn = data.value.includes("true");
-        setLightOpenOrClose(lightOn, matchDevice.device_guid);
-        if (lightOn && matchDevice.spriteDbid) {
-          // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
-          // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
-          if (
-            !lightOnHotColorArr.some(
-              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-            )
-          ) {
-            lightOnHotColorArr.push(matchDevice);
-          }
-          lightOffHotColorArr = lightOffHotColorArr.filter(
-            (light) => light.spriteDbid !== matchDevice.spriteDbid
-          );
-          heatMap?.changeTemp(matchDevice.device_number, 40);
-        } else if (matchDevice.spriteDbid) {
-          if (
-            !lightOffHotColorArr.some(
-              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-            )
-          ) {
-            lightOffHotColorArr.push(matchDevice);
-          }
-          lightOnHotColorArr = lightOnHotColorArr.filter(
-            (light) => light.spriteDbid !== matchDevice.spriteDbid
-          );
-          heatMap?.changeTemp(matchDevice.device_number, 0);
-        }
-      }
-      if (
-        data.point_name == norDevPoiName &&
-        data.value == matchDevice.device_normal_point_value
-      ) {
-        //顯示正常燈號
-        $(`#${matchDevice.device_number}_status`)
-          .attr("data-light-type", "normal")
-          .data("light-type", "normal");
-        deviceScatterNormalArr.push(matchDevice);
-        deviceScatterCloseArr = deviceScatterCloseArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-        deviceScatterErrorArr = deviceScatterErrorArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-      } else if (
-        data.point_name == cloDevPoiName &&
-        data.value == matchDevice.device_close_point_value
-      ) {
-        $(`#${matchDevice.device_number}_status`)
-          .attr("data-light-type", "close")
-          .data("light-type", "close");
-        deviceScatterCloseArr.push(matchDevice);
-
-        deviceScatterNormalArr = deviceScatterNormalArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-        deviceScatterErrorArr = deviceScatterErrorArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-      } else if (
-        data.point_name == errDevPoiName &&
-        data.value == matchDevice.device_error_point_value
-      ) {
-        $(`#${matchDevice.device_number}_status`)
-          .attr("data-light-type", "error")
-          .data("light-type", "error");
-        deviceScatterErrorArr.push(matchDevice);
-        deviceScatterNormalArr = deviceScatterNormalArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-        deviceScatterCloseArr = deviceScatterCloseArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-      }
-      if (
-        option.series[0].data.length ===
-        lightOnHotColorArr.length + lightOffHotColorArr.length
-      ) {
-        lightOnHotColorArr.forEach((light) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === light.device_number
-          );
-
-          const onColor = currentData.find(
-            ({ device_number }) => device_number === light.device_number
-          ).device_normal_color;
-          cur.itemStyle = { color: onColor };
-        });
-
-        lightOffHotColorArr.forEach((light) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === light.device_number
-          );
-          const offColor = currentData.find(
-            ({ device_number }) => device_number === light.device_number
-          ).device_close_color;
-          cur.itemStyle = { color: offColor };
-        });
-
-        floChart.setOption(option);
-
-        changeColorForHotspot(
-          lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
-          null,
-          true
-        );
-        changeColorForHotspot(
-          lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
-          null,
-          false
-        );
-        $(loadEle).Loading("close");
-      } else if (
-        deviceScatterCloseArr.length +
-          deviceScatterNormalArr.length +
-          deviceScatterErrorArr.length ===
-        option.series[0].data.length
-      ) {
-        deviceScatterNormalArr.forEach((device) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === device.device_number
-          );
-
-          const normalColor = currentData.find(
-            ({ device_number }) => device_number === device.device_number
-          ).device_normal_color;
-          cur.itemStyle = { color: normalColor };
-        });
-
-        deviceScatterCloseArr.forEach((device) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === device.device_number
-          );
-          const closeColor = currentData.find(
-            ({ device_number }) => device_number === device.device_number
-          ).device_close_color;
-          cur.itemStyle = { color: closeColor };
-        });
-
-        deviceScatterErrorArr.forEach((device) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === device.device_number
-          );
-
-          const errColor = currentData.find(
-            ({ device_number }) => device_number === device.device_number
-          ).device_error_color;
-          cur.itemStyle = { color: errColor };
-        });
-
-        floChart.setOption(option);
-        setForgeHotSpotColor(matchDevice);
-        $(loadEle).Loading("close");
-      }
-    });
-
-    floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
-      endPageLoading();
-      if (
-        pageAct.sysSubTag !== "M12" &&
-        data.findIndex(
-          (x) => x.point_name == "Temp" || x.point_name == "TEMP"
-        ) != -1
-      ) {
-        // 顯示溫度條
-        showHeat("[name=forgeHeatBar]");
-      }
-    });
-  }
-
-  function drawHeatBar() {
-    $("#forgeHeatBarDiv").html(setTopHeatBar());
-  }
-
-  // 電梯 3D 位置呈現
-  function set3DElevPos(viewer) {
-    let nodeIds = allElevDevList
-      .filter((x) => !isNaN(parseInt(x.forge_dbid)))
-      .map((x) => {
-        return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
-      });
-
-    $.each(nodeIds, (idx, item) => {
-      elev3DBind[item.devNum] = item.nodeId;
-    });
-    nodeIds = nodeIds.map((x) => x.nodeId);
-    $.each(nodeIds, function (idx, node) {
-      let options = {
-        element: $("#forgeViewer"),
-        viewer: viewer,
-        nodeId: node,
-        floorHeight: elev3DOption.floorHeight ?? [],
-        inited: function () {},
-      };
-      let elevator3DObj = new elevator3D(options);
-      let devNum = Object.keys(elev3DBind).filter(
-        (x) => elev3DBind[x] == node
-      )[0];
-      let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
-
-      if (elev3DObj.filter((x) => x.nodeId == node).length == 0) {
-        elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
-      }
-
-      if (subData) {
-        let elevObj = elev3DObj.filter((x) => x.nodeId == node)[0];
-        if (!elevObj.id) {
-          elevObj.id = devNum;
-        }
-        elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
-        elevObj.obj.init(function () {
-          let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
-
-          frags.forEach((fragProxy) => {
-            fragProxy.frag.position.z =
-              elev3DOption.floorHeight.filter(
-                (x) => x.floor == subData["CP"]
-              )[0]?.height ?? 0;
-            fragProxy.frag.updateAnimTransform();
-          });
-          elevObj.obj.viewer.impl.sceneUpdated(true);
-        });
-      }
-    });
-  }
-
-  // 電梯 3D Option 設置
-  function set3DElevOpt(data) {
-    let devNumArr = data
-      .map((x) => {
-        return {
-          devNum: x.device_number_full,
-          priority: allElevDevList.filter(
-            (y) => y.device_number == x.device_number_full
-          )[0]?.priority,
-        };
-      })
-      .DistinctBy("devNum");
-    devNumArr = devNumArr.oSort("priority");
-    $.each(devNumArr, (idx, devObj) => {
-      devNum = devObj.devNum;
-      let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
-
-      if (subData) {
-        //// 左側 3D 電梯 nodeID 與 device_number match
-        //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
-        //    elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
-        //}
-        // 左側 3D 電梯 Viewer Option 設置
-        /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
-        elev3DOption.nodeId = elev3DBind[devNum];
-        elev3DOption.floorHeight = floList.map((x) => {
-          return { floor: x };
-        });
-        elev3DOption.floorHeight.forEach((floObj, idx) => {
-          if (floObj.floor.startsWith("B")) {
-            let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
-            floObj.height = floor * -13;
-          } else {
-            let floor = parseInt(floObj.floor.split("F")[0]);
-            if (floor == 1) {
-              floObj.height = 0;
-            } else if (floor == 2) {
-              floObj.height = 14.75;
-            } else {
-              floObj.height = 14.75 + (floor - 2) * 9.75;
-            }
-          }
-        });
-
-        if (elev3DObj.length != 0) {
-          let elevObj = elev3DObj.filter(
-            (x) => x.nodeId == elev3DBind[devNum]
-          )[0];
-          if (!elevObj.id) {
-            elevObj.id = devNum;
-          }
-          elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
-          elevObj.obj.init(function () {
-            let frags = elevObj.obj.fragProxys.filter(
-              (x) => x.nodeId == elev3DBind[devNum]
-            );
-
-            frags.forEach((fragProxy) => {
-              fragProxy.frag.position.z =
-                elev3DOption.floorHeight.filter(
-                  (x) => x.floor == subData["CP"]
-                )[0]?.height ?? 0;
-              fragProxy.frag.updateAnimTransform();
-            });
-            elevObj.obj.viewer.impl.sceneUpdated(true);
-          });
-        }
-      }
-    });
-  }
-
-  // //訂閱設備的回傳值，並塞到全域變數
-  // function subscribeCallBack(change_device, is_need_reset = false) {
-  //     if (change_device != undefined && change_device != null) {
-  //         var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
-
-  //         if (target_device == undefined || target_device == null) {
-  //             //新增
-  //             obj = {
-  //                 device_number: change_device.device_number,
-  //                 points: [{
-  //                     name: change_device.point_name,
-  //                     value: change_device.value
-  //                 }]
-  //             };
-
-  //             allDeviceRowData.push(obj);
-  //         }
-  //         else {
-  //             selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
-  //             if (selected_device_point != null) {
-  //                 selected_device_point.value = change_device.value;
-  //             }
-  //             else {
-  //                 obj = {
-  //                     name: change_device.point_name,
-  //                     value: change_device.value
-  //                 }
-  //                 target_device.points.push(obj);
-  //             }
-  //         }
-
-  //         if (is_need_reset) {
-  //             resetData();
-  //         }
-  //     }
-  // }
-
-  // 重設平面圖設備資料
-  function resetData() {
-    const scatter_symbol_convertData = function (data, zoom) {
-      //正常、關閉排除CCVT(圓點)
-      let res = [],
-        temp = [];
-      data.forEach(function (item, index) {
-        if (
-          global_emergency_alarm_device_number != undefined &&
-          global_emergency_alarm_device_number != null
-        ) {
-          if (
-            global_emergency_alarm_device_number.findIndex(
-              (x) => x.device_number == item.device_number
-            ) < 0 &&
-            item.device_system_category_layer3 != "C"
-          ) {
-            //如果有子節點，則只針對子節點操作
             if (
-              lightControl === "node" &&
-              item.device_nodes != undefined &&
-              item.device_nodes != null &&
-              item.device_nodes.length > 0
+                currentData != undefined &&
+                currentData != null &&
+                currentData.length > 0
             ) {
-              item.device_nodes.forEach(function (item_node, item_node_index) {
-                //添加父節點相關資訊
-                item_node.device_system_category_layer3 =
-                  item.device_system_category_layer3;
-                item_node.device_normal_color = item.device_normal_color;
-                item_node.device_close_color = item.device_close_color;
+                resetData();
+            }
 
-                //判斷父節點狀態
-                var device_index = allDeviceRowData.findIndex(
-                  (x) => x.device_number == item.device_number
-                );
-                var temp_point_value;
-                if (device_index > -1) {
-                  if (
-                    item.device_normal_point_name != null ||
-                    item.device_close_point_name != null
-                  ) {
-                    //當其中point name 不為null的情況
-                    if (item.device_normal_point_name != null) {
-                      temp_point_value = allDeviceRowData[
-                        device_index
-                      ].points.find(
-                        (x) => x.name == item.device_normal_point_name
-                      );
-                      temp_point_value =
-                        allDeviceRowData[device_index].points[
-                          item.device_normal_point_name
-                        ];
-                      if (temp_point_value == item.device_normal_point_value) {
-                        item_node.device_color = item.device_normal_color;
-                      }
-                    }
-                    if (item.device_close_point_name != null) {
-                      temp_point_value =
-                        allDeviceRowData[device_index].points[
-                          item.device_close_point_name
-                        ];
-                      if (temp_point_value == item.device_close_point_value) {
-                        item_node.device_color = item.device_close_color;
-                      }
-                    }
-                  } else {
-                    if (item.device_normal_point_name == "ER") {
-                      temp_point_value =
-                        allDeviceRowData[device_index].points[
-                          item.device_normal_point_name
-                        ];
-                      if (temp_point_value == "true") {
-                        item_node.device_color = item.device_normal_color;
-                      } else {
-                        temp_point_value =
-                          allDeviceRowData[device_index].points[
-                            item.device_close_point_name
-                          ];
-                        if (temp_point_value == item.device_close_point_value) {
-                          item_node.device_color = item.device_close_color;
-                        }
-                      }
-                    } else if (item.device_close_point_name == "ER") {
-                      temp_point_value =
-                        allDeviceRowData[device_index].points[
-                          item.device_close_point_name
-                        ];
-                      if (temp_point_value == "true") {
-                        item_node.device_color = item.device_close_color;
-                      } else {
-                        temp_point_value =
-                          allDeviceRowData[device_index].points[
-                            item.device_normal_point_name
-                          ];
-                        if (
-                          temp_point_value == item.device_normal_point_value
-                        ) {
-                          item_node.device_color = item.device_normal_color;
-                        }
-                      }
-                    } else {
-                      temp_point_value =
-                        allDeviceRowData[device_index].points[
-                          item.device_normal_point_name
-                        ];
-                      if (temp_point_value == item.device_normal_point_value) {
-                        item_node.device_color = item.device_normal_color;
-                      } else if (
-                        temp_point_value == item.device_close_point_value
-                      ) {
-                        item_node.device_color = item.device_close_color;
-                      }
-                    }
-                  }
-                }
-                // temp.push(item_node);
-              });
-            } else {
-              var device_index = allDeviceRowData.findIndex(
-                (x) => x.device_number == item.device_number
-              );
-              if (device_index > -1) {
-                if (
-                  item.device_normal_point_name != null ||
-                  item.device_close_point_name != null
-                ) {
-                  //當其中point name 有為null的情況
-                  if (item.device_normal_point_name != null) {
-                    // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
-                    temp_point_value = allDeviceRowData[
-                      device_index
-                    ].points.find(
-                      (x) => x.name == item.device_normal_point_name
-                    ).value;
-                    if (temp_point_value == item.device_normal_point_value) {
-                      item.device_color = item.device_normal_color;
-                    }
-                  }
-                  if (item.device_close_point_name != null) {
-                    // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
-                    temp_point_value = allDeviceRowData[
-                      device_index
-                    ].points.find(
-                      (x) => x.name == item.device_close_point_name
-                    ).value;
-                    if (temp_point_value == item.device_close_point_value) {
-                      item.device_color = item.device_close_color;
-                    }
-                  }
+            var ordPath = {
+                building_tag: pageAct.buiTag,
+                system_tag: pageAct.sysMainTag,
+            };
+            //myBaja.setSubscribeDevicesByBql(ordPath);
+            //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
+            let parentEle = null;
+            floChart.on("click", function (params) {
+                forgeUnFocusAll();
+                chartUnFocusAll();
+                if (params.componentType == "series") {
+                    let data = params.data;
+                    let rect = $("#floChart")[0].getBoundingClientRect();
+                    let position = [
+                        rect.left + rect.width / 2,
+                        rect.top + rect.height / 4,
+                    ];
+                    // console.log(position)
+                    // let position = [params.event.event.clientX+100, params.event.event.clientY-300];
+                    data._dbId = data._dbId ?? "";
+                    // currentData.find(
+                    //   (cData) => cData.device_number === data.device_number
+                    // ).forge_dbid;
+                    parentEle = crePosPopover(position, data);
+                    $(parentEle).click();
                 } else {
-                  if (item.device_normal_point_name == "ER") {
-                    // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
-                    temp_point_value = allDeviceRowData[
-                      device_index
-                    ].points.find(
-                      (x) => x.name == item.device_normal_point_name
-                    ).value;
-                    if (temp_point_value == "true") {
-                      item.device_color = item.device_normal_color;
-                    } else {
-                      // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
-                      temp_point_value = allDeviceRowData[
-                        device_index
-                      ].points.find(
-                        (x) => x.name == item.device_close_point_name
-                      ).value;
-                      if (temp_point_value == item.device_close_point_value) {
-                        item.device_color = item.device_close_color;
-                      }
-                    }
-                  } else if (item.device_close_point_name == "ER") {
-                    // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
-                    temp_point_value = allDeviceRowData[
-                      device_index
-                    ].points.find(
-                      (x) => x.name == item.device_close_point_name
-                    ).value;
-                    if (temp_point_value == "true") {
-                      item.device_color = item.device_close_color;
-                    } else {
-                      // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
-                      temp_point_value = allDeviceRowData[
-                        device_index
-                      ].points.find(
-                        (x) => x.name == item.device_normal_point_name
-                      ).value;
-                      if (temp_point_value == item.device_normal_point_value) {
-                        item.device_color = item.device_normal_color;
-                      }
-                    }
-                  } else {
-                    // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
-                    temp_point_value = allDeviceRowData[
-                      device_index
-                    ].points.find(
-                      (x) => x.name == item.device_normal_point_name
-                    ).value;
-                    if (temp_point_value == item.device_normal_point_value) {
-                      item.device_color = item.device_normal_color;
-                    } else if (
-                      temp_point_value == item.device_close_point_value
-                    ) {
-                      item.device_color = item.device_close_color;
-                    }
-                  }
+                    $(parentEle).YTTooltip("hide");
                 }
-              }
-              item.zoom = zoom;
-              temp.push(item);
-            }
-          }
-        }
-      });
+            });
 
-      // let temp = data.filter(function (item, index) {
-      //     if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
-      //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
-      //     } else {
-      //         return [];
-      //     }
-      // });
-      let option = floChart.getOption();
-      temp.forEach(function (tempData) {
-        let oldTarObj = option.series[0]?.data?.filter(
-          (x) => x.device_number == tempData.device_number
-        )[0];
-        if (oldTarObj) {
-          tempData = Object.assign(tempData, oldTarObj);
-        }
-      });
-      temp.map(function (item) {
-        var obj = {
-          device_guid: item.device_guid,
-          device_number: item.device_number,
-          full_name: item.full_name ? item.full_name : null,
-          device_node_guid: item.device_node_guid
-            ? item.device_node_guid
-            : null,
-          device_node_full_name: item.device_node_full_name
-            ? item.device_node_full_name
-            : null,
-          device_system_category_layer3: item.device_system_category_layer3
-            ? item.device_system_category_layer3
-            : null,
-          status: item.status,
-          value: item.value,
-          deviceItems: item.deviceItems,
-          deviceURL: item.deviceURL,
-          _dbId: item._dbId ?? null,
-        };
+            floChart.getZr().on("click", function (params) {
+                /*console.log("click", params);*/
+                var pixelPoint = [params.offsetX, params.offsetY];
+                var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
 
-        obj.itemStyle = {
-          color: item.device_color || item.device_close_color,
-        };
+                if (!(params?.target?.shape?.symbolType == "circle")) {
+                    $(parentEle).YTTooltip("hide");
+                }
 
-        res.push(obj);
-      });
+                //temp_device_on_floor_map = [{
+                //    device_guid: selected_temp_device.device_guid,
+                //    device_full_name: selected_temp_device.device_full_name,
+                //    device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
+                //    device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
+                //    status: selected_temp_device.status,
+                //    value: dataPoint
+                //}];
 
-      return res;
-    };
+                // currentData.push([dataPoint[0], dataPoint[1], 1]);
+                // floChart.setOption(option);
+            });
 
-    const scatter_icon_convertData = function (data) {
-      //正常、關閉(icon)
-      let res = [],
-        temp = [];
+            onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
+                console.log("Current", obj.myDataList);
+                let option = floChart.getOption();
 
-      data.forEach(function (item, index) {
-        if (
-          global_emergency_alarm_device_number != undefined &&
-          global_emergency_alarm_device_number != null
-        ) {
-          if (
-            global_emergency_alarm_device_number.findIndex(
-              (x) => x.device_number == item.device_number
-            ) < 0 &&
-            item.device_system_category_layer3 != "C"
-          ) {
-            //如果有子節點，則只針對子節點操作
-            if (
-              lightControl === "node" &&
-              item.device_nodes != undefined &&
-              item.device_nodes != null &&
-              item.device_nodes.length > 0
-            ) {
-              item.device_nodes.forEach(function (item_node, item_node_index) {
-                //添加父節點相關資訊
-                item_node.device_system_category_layer3 =
-                  item.device_system_category_layer3;
-                item_node.device_normal_color = item.device_normal_color;
-                item_node.device_image = item.device_image;
-                temp.push(item_node);
-              });
-            } else {
-              temp.push(item);
-            }
-          }
-        }
-      });
+                option.series.forEach(function (series) {
+                    (series.data ?? []).forEach(function (point) {
+                        let dbid = obj.myDataList.filter(
+                            (x) => x.device_number == point.device_number
+                        )[0]?._dbId;
+                        point._dbId = dbid;
+                        // currentData.forEach(function (cData) {
+                        //   console.log(cData.device_node_guid=== point.device_node_guid)
+                        //   if (lightControl === "node" && pageAct.sysSubTag === "L1" && cData.device_node_guid == point.device_node_guid) {
+                        //     cData._dbId = dbid;
+                        //     cData.spriteDbid = dbid;
+                        //     setForgeHotSpotColor(cData);
+                        //   }
+                        //   else if (cData.device_guid == point.device_guid) {
+                        //     cData._dbId = dbid;
+                        //     cData.spriteDbid = dbid;
+                        //     setForgeHotSpotColor(cData);
+                        //   }
+                        // });
+                        const cData = currentData.find((cur) => {
+                            if (lightControl === "node" && pageAct.sysSubTag === "L1") {
+                                if (cur.device_node_guid == point.device_node_guid) return cur;
+                            } else if (cur.device_guid == point.device_guid) {
+                                return cur;
+                            }
+                        });
+                        cData._dbId = dbid;
+                        cData.spriteDbid = dbid;
+                        setForgeHotSpotColor(cData);
+                    });
+                });
+                floChart.setOption(option);
 
-      temp = data.filter(function (item, index) {
-        if (
-          global_emergency_alarm_device_number != undefined &&
-          global_emergency_alarm_device_number != null
-        ) {
-          return (
-            global_emergency_alarm_device_number.findIndex(
-              (x) => x.device_number == item.device_number
-            ) < 0 && item.device_system_category_layer3 != "C"
-          );
-        } else {
-          return [];
-        }
-      });
+                subDevice();
+            });
+            //floChart.on('selectchanged', function (params) {
 
-      temp.map(function (item) {
-        var obj = {
-          device_guid: item.device_guid,
-          device_number: item.device_number,
-          full_name: item.full_name ? item.full_name : null,
-          device_node_guid: item.device_node_guid
-            ? item.device_node_guid
-            : null,
-          device_node_full_name: item.device_node_full_name
-            ? item.device_node_full_name
-            : null,
-          device_system_category_layer3: item.device_system_category_layer3
-            ? item.device_system_category_layer3
-            : null,
-          status: item.status,
-          symbol:
-            "image://" +
-            baseImgUrl +
-            "/upload/device_icon/" +
-            item.device_image,
-          value: item.value,
-          deviceItems: item.deviceItems,
-          deviceURL: item.deviceURL,
-        };
+            //    console.log("selectchanged", params);
+            //    // currentData.push([dataPoint[0], dataPoint[1], 1]);
+            //    // floChart.setOption(option);
 
-        if (item.selected) {
-          obj.symbolSize = 50;
-        }
-        obj.itemStyle = {
-          color: item.device_colse_color,
-        };
-        res.push(obj);
-      });
+            //    currentData = $.map(currentData, function (item) {
+            //        item.selected = false;
+            //        return item;
+            //    });
 
-      return res;
-    };
+            //    if (params.selected.length > 0) {
+            //        currentData[params.selected[0].seriesIndex - 1].selected = true;
+            //    }
 
-    const scatter_error_convertData = function (data) {
-      //異常(圓點)
-      let res = [],
-        temp = [];
+            //});
 
-      data.forEach(function (item, index) {
-        if (
-          global_emergency_alarm_device_number != undefined &&
-          global_emergency_alarm_device_number != null
-        ) {
-          if (
-            global_emergency_alarm_device_number.findIndex(
-              (x) => x.device_number == item.device_number
-            ) > -1 &&
-            item.device_system_category_layer3 != "C"
-          ) {
-            //如果有子節點，則只針對子節點操作
-            if (
-              lightControl === "node" &&
-              item.device_nodes != undefined &&
-              item.device_nodes != null &&
-              item.device_nodes.length > 0
-            ) {
-              item.device_nodes.forEach(function (item_node, item_node_index) {
-                //添加父節點相關資訊
-                item_node.device_system_category_layer3 =
-                  item.device_system_category_layer3;
-                item_node.device_error_color = item.device_error_color;
-                temp.push(item_node);
-              });
-            } else {
-              temp.push(item);
-            }
-          }
-        }
-      });
+            // floChart.getZr().on('mousewheel', function (params) {
+            //     console.log(params)
+            // })
+            floChart.on("georoam", function (params) {
+                var zoom = floChart.getOption().geo[0].zoom;
+                const option = floChart.getOption();
+                console.log("georoam", zoom);
 
-      // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
-      //     temp = data.filter(function (item, index) {
-      //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
-      //     });
-      // }
-
-      temp.map(function (item) {
-        var obj = {
-          device_guid: item.device_guid,
-          device_number: item.device_number,
-          full_name: item.full_name ? item.full_name : null,
-          device_node_guid: item.device_node_guid
-            ? item.device_node_guid
-            : null,
-          device_node_full_name: item.device_node_full_name
-            ? item.device_node_full_name
-            : null,
-          device_system_category_layer3: item.device_system_category_layer3
-            ? item.device_system_category_layer3
-            : null,
-          status: item.status,
-          value: item.value,
-          deviceItems: item.deviceItems,
-          deviceURL: item.deviceURL,
-        };
-        console.log("異常", item.device_color);
-        obj.itemStyle = { color: item.device_error_color };
-
-        res.push(obj);
-      });
-
-      return res;
-    };
-
-    const scatter_error_icon_convertData = function (data) {
-      //異常(icon)
-      let res = [],
-        temp = [];
-
-      data.forEach(function (item, index) {
-        if (
-          global_emergency_alarm_device_number != undefined &&
-          global_emergency_alarm_device_number != null
-        ) {
-          if (
-            global_emergency_alarm_device_number.findIndex(
-              (x) => x.device_number == item.device_number
-            ) > -1 &&
-            item.device_system_category_layer3 != "C"
-          ) {
-            //如果有子節點，則只針對子節點操作
-            if (
-              lightControl === "node" &&
-              item.device_nodes != undefined &&
-              item.device_nodes != null &&
-              item.device_nodes.length > 0
-            ) {
-              item.device_nodes.forEach(function (item_node, item_node_index) {
-                //添加父節點相關資訊
-                item_node.device_system_category_layer3 =
-                  item.device_system_category_layer3;
-                item_node.device_error_color = item.device_error_color;
-                item_node.device_image = item.device_image;
-                temp.push(item_node);
-              });
-            } else {
-              temp.push(item);
-            }
-          }
-        }
-      });
-
-      if (
-        global_emergency_alarm_device_number != undefined &&
-        global_emergency_alarm_device_number != null
-      ) {
-        temp = data.filter(function (item, index) {
-          return (
-            global_emergency_alarm_device_number.findIndex(
-              (x) => x.device_number == item.device_number
-            ) > -1 && item.device_system_category_layer3 != "C"
-          );
+                if (zoom <= 1.5) {
+                    /*ResetFloorMap();*/
+                    floChart.setOption({
+                        geo: {
+                            roam: "scale",
+                        },
+                    });
+                } else {
+                    floChart.setOption({
+                        geo: {
+                            roam: true,
+                        },
+                    });
+                }
+                if (zoom > zoomToggle) {
+                    const currentImage = currentData.find(
+                        ({ device_image }) => device_image
+                    ).device_image;
+                    option.series[1].data = option.series[0].data.map((d) => ({
+                        ...d,
+                        symbol:
+                            "image://" + baseImgUrl + "/upload/device_icon/" + currentImage,
+                    }));
+                } else {
+                    option.series[1].data = [];
+                }
+                floChart.setOption(option);
+                // resetData();
+            });
+        }).fail(function () {
+            toast_warning("查無該樓層地圖");
+            floChart.clear();
         });
-      }
-
-      temp.map(function (item) {
-        var obj = {
-          device_guid: item.device_guid,
-          device_number: item.device_number,
-          full_name: item.full_name ? item.full_name : null,
-          device_node_guid: item.device_node_guid
-            ? item.device_node_guid
-            : null,
-          device_node_full_name: item.device_node_full_name
-            ? item.device_node_full_name
-            : null,
-          device_system_category_layer3: item.device_system_category_layer3
-            ? item.device_system_category_layer3
-            : null,
-          status: item.status,
-          symbol:
-            "image://" +
-            baseImgUrl +
-            "/upload/device_icon/" +
-            item.device_image,
-          value: item.value,
-          deviceItems: item.deviceItems,
-          deviceURL: item.deviceURL,
-        };
-
-        res.push(obj);
-      });
-
-      return res;
-    };
-
-    const scatter_cctv_convertData = function (data) {
-      //CCTV
-      let res = [];
-      let temp = data.filter(function (item, index) {
-        return item.device_system_category_layer3 == "C";
-      });
-
-      temp.map(function (item) {
-        var obj = {
-          device_guid: item.device_guid,
-          device_number: item.device_number,
-          full_name: item.full_name,
-          device_system_category_layer3: item.device_system_category_layer3,
-          device_ip: item.device_ip,
-          device_port: item.device_port,
-          status: item.status,
-          symbol:
-            "image://" +
-            str_location_url +
-            "/upload/device_icon/" +
-            item.device_image,
-          value: item.value,
-        };
-
-        res.push(obj);
-      });
-
-      return res;
-    };
-
-    if (!floChart.getOption()) {
-      return;
     }
 
-    var zoom = 0;
-    if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
-      zoom = floChart.getOption().geo[0].zoom;
-    }
-    if (zoom <= zoomToggle) {
-      floChart.setOption({
-        series: [
-          {
-            symbolOffset: [0, 0],
-            data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
-          },
-          {
-            data: [], //正常、關閉(icon)
-          },
-          {
-            symbolOffset: [0, 0],
-            data: scatter_error_convertData(currentData), //異常(圓點)
-          },
-          {
-            data: [], //異常(icon)
-          },
-          {
-            data: scatter_cctv_convertData(currentData), //CCTV
-          },
-        ],
-      });
-    } else {
-      floChart.setOption({
-        series: [
-          {
-            symbolOffset: [10, 10],
+    //baja 訂閱設備
+    function subDevice() {
+        console.log("subDevice 開始");
 
-            data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
-          },
-          {
-            data: scatter_icon_convertData(currentData), //正常、關閉(icon)
-          },
-          {
-            symbolOffset: [10, 10],
-            data: scatter_error_convertData(currentData), //異常(圓點)
-          },
-          {
-            data: scatter_error_icon_convertData(currentData), //異常(icon)
-          },
-          {
-            data: scatter_cctv_convertData(currentData), //CCTV
-          },
-        ],
-      });
-    }
-  }
-
-  function getNextFloor(floGuid = null) {
-    let url = baseApiUrl + "/api/Device/GetNextFloor";
-    objSendData.Data = { floor_guid: floGuid, building_tag: pageAct.buiTag };
-    let result = "";
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          result = res.data?.full_name;
-        }
-      },
-      null,
-      "POST"
-    ).send();
-
-    return result;
-  }
-
-  // show 3D 模型
-  function show3DModel(urn) {
-    launchViewerForHotspot(urn, (viewer, nodeIds) => {
-      // 隱藏 toolbar
-      document.querySelector("#guiviewer3d-toolbar").style.display = "none";
-      let nextFloor = getNextFloor(pageAct.floGuid);
-      let curFloTag = pageAct.floTag;
-
-      if (!nextFloor) {
-        toast_warning("超出樓層範圍");
-        return;
-      }
-
-      if (curFloTag?.startsWith("U")) {
-        curFloTag = curFloTag.split("U")[1];
-      }
-      if (nextFloor?.startsWith("U")) {
-        nextFloor = nextFloor.split("U")[1];
-      }
-
-      getLevelsData(curFloTag, nextFloor, function () {
-        viewer.model.search(
-          "天花板",
-          (nodeIds) => {
-            // console.log("2",nodeIds)
-            viewer.hide(nodeIds);
-          },
-          (e) => {
-            console.log(e);
-          }
-        );
-      });
-
-      setHeatMap();
-
-      if (
-        (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
-        elevatorShow
-      ) {
-        let elevOption = {
-          viewer: viewer,
-          ordPath: {
+        let option = floChart.getOption();
+        let floMyBaja = new subscriptionDevices();
+        var ordPath = {
             area_tag: pageAct.AreaTag,
             building_tag: pageAct.buiTag,
-          },
+            system_tag: pageAct.sysMainTag,
+            name_tag: pageAct.sysSubTag,
+            flo_tag: pageAct.floTag,
         };
-        // 電梯移動訂閱程序載入
-        let forge3DElev = new Forge3DElevFull(elevOption);
-        forge3DElev.bajaEndCallback = function () {
-          endPageLoading();
-        };
-        forge3DElev.init();
-      }
-    });
-  }
+        floMyBaja.setSubscribeDevicesByBql(ordPath);
 
-  function setHeatMap() {
-    if (pageAct.sysSubTag !== "M12") {
-      devices = currentData.map((x) => {
-        return {
-          roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
-          id: x.device_number,
-          position: isJSON(x.device_coordinate_3d)
-            ? JSON.parse(x.device_coordinate_3d)
-            : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-          sensorTypes: ["temperature", "humidity"],
-        };
-      });
+        // 燈熱點用
+        let lightOnHotColorArr = [];
+        let lightOffHotColorArr = [];
+        // 燈光圈用
+        let deviceScatterNormalArr = [];
+        let deviceScatterCloseArr = [];
+        let deviceScatterErrorArr = [];
+        floMyBaja.setSubscribeDevicesCallBack(function (data) {
+            let matchDevice = currentData.filter(
+                (x) => x.device_number == data.device_number_full
+            )[0];
+            if (!matchDevice) {
+                $(loadEle).Loading("close");
+                return false;
+            }
+            //將訂閱值塞入 subDeviceData
+            if (
+                subDeviceData.findIndex(
+                    (x) => x.device_number == matchDevice.device_number
+                ) == -1
+            ) {
+                let obj = {};
+                obj.device_number = matchDevice.device_number;
+                obj.dbid = matchDevice.forge_dbid;
+                subDeviceData.push(obj);
+            }
+            let norDevPoiName = matchDevice.device_normal_point_name;
+            let cloDevPoiName = matchDevice.device_close_point_name;
+            let errDevPoiName = matchDevice.device_error_point_name;
 
-      let option = {
-        devices: devices,
-      };
+            if (data.point_name == "Temp" || data.point_name == "TEMP") {
+                heatMap?.changeTemp(
+                    data.device_number_full,
+                    !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
+                );
+                let devIdx = currentData.findIndex(
+                    (x) => x.device_number == data.device_number_full
+                );
+                currentData[devIdx]._temp = !isNaN(parseInt(data.value))
+                    ? parseInt(data.value)
+                    : 0;
+            }
+            if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
+                const lightOn = data.value.includes("true");
+                setLightOpenOrClose(lightOn, matchDevice.device_guid);
+                if (lightOn && matchDevice.spriteDbid) {
+                    // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
+                    // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
+                    if (
+                        !lightOnHotColorArr.some(
+                            ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+                        )
+                    ) {
+                        lightOnHotColorArr.push(matchDevice);
+                    }
+                    lightOffHotColorArr = lightOffHotColorArr.filter(
+                        (light) => light.spriteDbid !== matchDevice.spriteDbid
+                    );
+                    heatMap?.changeTemp(matchDevice.device_number, 40);
+                } else if (matchDevice.spriteDbid) {
+                    if (
+                        !lightOffHotColorArr.some(
+                            ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+                        )
+                    ) {
+                        lightOffHotColorArr.push(matchDevice);
+                    }
+                    lightOnHotColorArr = lightOnHotColorArr.filter(
+                        (light) => light.spriteDbid !== matchDevice.spriteDbid
+                    );
+                    heatMap?.changeTemp(matchDevice.device_number, 0);
+                }
+            }
+            if (
+                data.point_name == norDevPoiName &&
+                data.value == matchDevice.device_normal_point_value
+            ) {
+                //顯示正常燈號
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "normal")
+                    .data("light-type", "normal");
+                deviceScatterNormalArr.push(matchDevice);
+                deviceScatterCloseArr = deviceScatterCloseArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+                deviceScatterErrorArr = deviceScatterErrorArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            } else if (
+                data.point_name == cloDevPoiName &&
+                data.value == matchDevice.device_close_point_value
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "close")
+                    .data("light-type", "close");
+                deviceScatterCloseArr.push(matchDevice);
 
-      heatMap = new ADHeatMaps(option);
-      heatMap.onComplete = () => {
-        $.each(currentData, (idx, dev) => {
-          heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                deviceScatterNormalArr = deviceScatterNormalArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+                deviceScatterErrorArr = deviceScatterErrorArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            } else if (
+                data.point_name == errDevPoiName &&
+                data.value == matchDevice.device_error_point_value
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "error")
+                    .data("light-type", "error");
+                deviceScatterErrorArr.push(matchDevice);
+                deviceScatterNormalArr = deviceScatterNormalArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+                deviceScatterCloseArr = deviceScatterCloseArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            }
+            console.log(deviceScatterCloseArr.length,
+                deviceScatterNormalArr.length,
+                deviceScatterErrorArr.length)
+            if (
+                option.series[0].data.length ===
+                lightOnHotColorArr.length + lightOffHotColorArr.length
+            ) {
+                lightOnHotColorArr.forEach((light) => {
+                    const cur = option.series[0].data.find(
+                        ({ device_number }) => device_number === light.device_number
+                    );
+
+                    const onColor = currentData.find(
+                        ({ device_number }) => device_number === light.device_number
+                    ).device_normal_color;
+                    cur.itemStyle = { color: onColor };
+                });
+
+                lightOffHotColorArr.forEach((light) => {
+                    const cur = option.series[0].data.find(
+                        ({ device_number }) => device_number === light.device_number
+                    );
+                    const offColor = currentData.find(
+                        ({ device_number }) => device_number === light.device_number
+                    ).device_close_color;
+                    cur.itemStyle = { color: offColor };
+                });
+
+                floChart.setOption(option);
+
+                changeColorForHotspot(
+                    lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    true
+                );
+                changeColorForHotspot(
+                    lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    false
+                );
+                $(loadEle).Loading("close");
+            } else if (
+                deviceScatterCloseArr.length +
+                deviceScatterNormalArr.length +
+                deviceScatterErrorArr.length ===
+                option.series[0].data.length
+            ) {
+                deviceScatterNormalArr.forEach((device) => {
+                    const cur = option.series[0].data.find(
+                        ({ device_number }) => device_number === device.device_number
+                    );
+
+                    const normalColor = currentData.find(
+                        ({ device_number }) => device_number === device.device_number
+                    ).device_normal_color;
+                    cur.itemStyle = { color: normalColor };
+                });
+
+                deviceScatterCloseArr.forEach((device) => {
+                    const cur = option.series[0].data.find(
+                        ({ device_number }) => device_number === device.device_number
+                    );
+                    const closeColor = currentData.find(
+                        ({ device_number }) => device_number === device.device_number
+                    ).device_close_color;
+                    cur.itemStyle = { color: closeColor };
+                });
+
+                deviceScatterErrorArr.forEach((device) => {
+                    const cur = option.series[0].data.find(
+                        ({ device_number }) => device_number === device.device_number
+                    );
+
+                    const errColor = currentData.find(
+                        ({ device_number }) => device_number === device.device_number
+                    ).device_error_color;
+                    cur.itemStyle = { color: errColor };
+                });
+
+                floChart.setOption(option);
+                setForgeHotSpotColor(matchDevice);
+                $(loadEle).Loading("close");
+            }
+        });
+
+        floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
+            endPageLoading();
+            if (
+                pageAct.sysSubTag !== "M12" &&
+                data.findIndex(
+                    (x) => x.point_name == "Temp" || x.point_name == "TEMP"
+                ) != -1
+            ) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
         });
-      };
     }
 
-    if (pageAct.sysSubTag === "M12" && !elevatorShow) {
-      let sensorObjs = [];
-      addHotPoint(viewer);
-      Forge3DSensor.sensorTimes = 0;
-      sensorObjs = currentData.map((device) => {
-        Forge3DSensor.sensorTimes++;
-        return new Forge3DSensor({
-          viewer: viewer,
-          ordPath: {
-            area_tag: pageAct.AreaTag,
-            building_tag: pageAct.buiTag,
-          },
-          selector: "#forgeViewer",
-          elevCb: elevatorShow
-            ? () => {
-                let elevOption = {
-                  selector: "#forgeViewer",
-                  viewer: viewer,
-                  ordPath: {
-                    area_tag: pageAct.AreaTag,
-                    building_tag: pageAct.buiTag,
-                  },
-                  sensorObjs,
+    function drawHeatBar() {
+        $("#forgeHeatBarDiv").html(setTopHeatBar());
+    }
+
+    // 電梯 3D 位置呈現
+    function set3DElevPos(viewer) {
+        let nodeIds = allElevDevList
+            .filter((x) => !isNaN(parseInt(x.forge_dbid)))
+            .map((x) => {
+                return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
+            });
+
+        $.each(nodeIds, (idx, item) => {
+            elev3DBind[item.devNum] = item.nodeId;
+        });
+        nodeIds = nodeIds.map((x) => x.nodeId);
+        $.each(nodeIds, function (idx, node) {
+            let options = {
+                element: $("#forgeViewer"),
+                viewer: viewer,
+                nodeId: node,
+                floorHeight: elev3DOption.floorHeight ?? [],
+                inited: function () { },
+            };
+            let elevator3DObj = new elevator3D(options);
+            let devNum = Object.keys(elev3DBind).filter(
+                (x) => elev3DBind[x] == node
+            )[0];
+            let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
+
+            if (elev3DObj.filter((x) => x.nodeId == node).length == 0) {
+                elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
+            }
+
+            if (subData) {
+                let elevObj = elev3DObj.filter((x) => x.nodeId == node)[0];
+                if (!elevObj.id) {
+                    elevObj.id = devNum;
+                }
+                elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
+                elevObj.obj.init(function () {
+                    let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
+
+                    frags.forEach((fragProxy) => {
+                        fragProxy.frag.position.z =
+                            elev3DOption.floorHeight.filter(
+                                (x) => x.floor == subData["CP"]
+                            )[0]?.height ?? 0;
+                        fragProxy.frag.updateAnimTransform();
+                    });
+                    elevObj.obj.viewer.impl.sceneUpdated(true);
+                });
+            }
+        });
+    }
+
+    // 電梯 3D Option 設置
+    function set3DElevOpt(data) {
+        let devNumArr = data
+            .map((x) => {
+                return {
+                    devNum: x.device_number_full,
+                    priority: allElevDevList.filter(
+                        (y) => y.device_number == x.device_number_full
+                    )[0]?.priority,
+                };
+            })
+            .DistinctBy("devNum");
+        devNumArr = devNumArr.oSort("priority");
+        $.each(devNumArr, (idx, devObj) => {
+            devNum = devObj.devNum;
+            let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
+
+            if (subData) {
+                //// 左側 3D 電梯 nodeID 與 device_number match
+                //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
+                //    elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
+                //}
+                // 左側 3D 電梯 Viewer Option 設置
+                /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
+                elev3DOption.nodeId = elev3DBind[devNum];
+                elev3DOption.floorHeight = floList.map((x) => {
+                    return { floor: x };
+                });
+                elev3DOption.floorHeight.forEach((floObj, idx) => {
+                    if (floObj.floor.startsWith("B")) {
+                        let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
+                        floObj.height = floor * -13;
+                    } else {
+                        let floor = parseInt(floObj.floor.split("F")[0]);
+                        if (floor == 1) {
+                            floObj.height = 0;
+                        } else if (floor == 2) {
+                            floObj.height = 14.75;
+                        } else {
+                            floObj.height = 14.75 + (floor - 2) * 9.75;
+                        }
+                    }
+                });
+
+                if (elev3DObj.length != 0) {
+                    let elevObj = elev3DObj.filter(
+                        (x) => x.nodeId == elev3DBind[devNum]
+                    )[0];
+                    if (!elevObj.id) {
+                        elevObj.id = devNum;
+                    }
+                    elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
+                    elevObj.obj.init(function () {
+                        let frags = elevObj.obj.fragProxys.filter(
+                            (x) => x.nodeId == elev3DBind[devNum]
+                        );
+
+                        frags.forEach((fragProxy) => {
+                            fragProxy.frag.position.z =
+                                elev3DOption.floorHeight.filter(
+                                    (x) => x.floor == subData["CP"]
+                                )[0]?.height ?? 0;
+                            fragProxy.frag.updateAnimTransform();
+                        });
+                        elevObj.obj.viewer.impl.sceneUpdated(true);
+                    });
+                }
+            }
+        });
+    }
+
+    // //訂閱設備的回傳值，並塞到全域變數
+    // function subscribeCallBack(change_device, is_need_reset = false) {
+    //     if (change_device != undefined && change_device != null) {
+    //         var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
+
+    //         if (target_device == undefined || target_device == null) {
+    //             //新增
+    //             obj = {
+    //                 device_number: change_device.device_number,
+    //                 points: [{
+    //                     name: change_device.point_name,
+    //                     value: change_device.value
+    //                 }]
+    //             };
+
+    //             allDeviceRowData.push(obj);
+    //         }
+    //         else {
+    //             selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
+    //             if (selected_device_point != null) {
+    //                 selected_device_point.value = change_device.value;
+    //             }
+    //             else {
+    //                 obj = {
+    //                     name: change_device.point_name,
+    //                     value: change_device.value
+    //                 }
+    //                 target_device.points.push(obj);
+    //             }
+    //         }
+
+    //         if (is_need_reset) {
+    //             resetData();
+    //         }
+    //     }
+    // }
+
+    // 重設平面圖設備資料
+    function resetData() {
+        const scatter_symbol_convertData = function (data, zoom) {
+            //正常、關閉排除CCVT(圓點)
+            let res = [],
+                temp = [];
+            data.forEach(function (item, index) {
+                if (
+                    global_emergency_alarm_device_number != undefined &&
+                    global_emergency_alarm_device_number != null
+                ) {
+                    if (
+                        global_emergency_alarm_device_number.findIndex(
+                            (x) => x.device_number == item.device_number
+                        ) < 0 &&
+                        item.device_system_category_layer3 != "C"
+                    ) {
+                        //如果有子節點，則只針對子節點操作
+                        if (
+                            lightControl === "node" &&
+                            item.device_nodes != undefined &&
+                            item.device_nodes != null &&
+                            item.device_nodes.length > 0
+                        ) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 =
+                                    item.device_system_category_layer3;
+                                item_node.device_normal_color = item.device_normal_color;
+                                item_node.device_close_color = item.device_close_color;
+
+                                //判斷父節點狀態
+                                var device_index = allDeviceRowData.findIndex(
+                                    (x) => x.device_number == item.device_number
+                                );
+                                var temp_point_value;
+                                if (device_index > -1) {
+                                    if (
+                                        item.device_normal_point_name != null ||
+                                        item.device_close_point_name != null
+                                    ) {
+                                        //當其中point name 不為null的情況
+                                        if (item.device_normal_point_name != null) {
+                                            temp_point_value = allDeviceRowData[
+                                                device_index
+                                            ].points.find(
+                                                (x) => x.name == item.device_normal_point_name
+                                            );
+                                            temp_point_value =
+                                                allDeviceRowData[device_index].points[
+                                                item.device_normal_point_name
+                                                ];
+                                            if (temp_point_value == item.device_normal_point_value) {
+                                                item_node.device_color = item.device_normal_color;
+                                            }
+                                        }
+                                        if (item.device_close_point_name != null) {
+                                            temp_point_value =
+                                                allDeviceRowData[device_index].points[
+                                                item.device_close_point_name
+                                                ];
+                                            if (temp_point_value == item.device_close_point_value) {
+                                                item_node.device_color = item.device_close_color;
+                                            }
+                                        }
+                                    } else {
+                                        if (item.device_normal_point_name == "ER") {
+                                            temp_point_value =
+                                                allDeviceRowData[device_index].points[
+                                                item.device_normal_point_name
+                                                ];
+                                            if (temp_point_value == "true") {
+                                                item_node.device_color = item.device_normal_color;
+                                            } else {
+                                                temp_point_value =
+                                                    allDeviceRowData[device_index].points[
+                                                    item.device_close_point_name
+                                                    ];
+                                                if (temp_point_value == item.device_close_point_value) {
+                                                    item_node.device_color = item.device_close_color;
+                                                }
+                                            }
+                                        } else if (item.device_close_point_name == "ER") {
+                                            temp_point_value =
+                                                allDeviceRowData[device_index].points[
+                                                item.device_close_point_name
+                                                ];
+                                            if (temp_point_value == "true") {
+                                                item_node.device_color = item.device_close_color;
+                                            } else {
+                                                temp_point_value =
+                                                    allDeviceRowData[device_index].points[
+                                                    item.device_normal_point_name
+                                                    ];
+                                                if (
+                                                    temp_point_value == item.device_normal_point_value
+                                                ) {
+                                                    item_node.device_color = item.device_normal_color;
+                                                }
+                                            }
+                                        } else {
+                                            temp_point_value =
+                                                allDeviceRowData[device_index].points[
+                                                item.device_normal_point_name
+                                                ];
+                                            if (temp_point_value == item.device_normal_point_value) {
+                                                item_node.device_color = item.device_normal_color;
+                                            } else if (
+                                                temp_point_value == item.device_close_point_value
+                                            ) {
+                                                item_node.device_color = item.device_close_color;
+                                            }
+                                        }
+                                    }
+                                }
+                                // temp.push(item_node);
+                            });
+                        } else {
+                            var device_index = allDeviceRowData.findIndex(
+                                (x) => x.device_number == item.device_number
+                            );
+                            if (device_index > -1) {
+                                if (
+                                    item.device_normal_point_name != null ||
+                                    item.device_close_point_name != null
+                                ) {
+                                    //當其中point name 有為null的情況
+                                    if (item.device_normal_point_name != null) {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                        temp_point_value = allDeviceRowData[
+                                            device_index
+                                        ].points.find(
+                                            (x) => x.name == item.device_normal_point_name
+                                        ).value;
+                                        if (temp_point_value == item.device_normal_point_value) {
+                                            item.device_color = item.device_normal_color;
+                                        }
+                                    }
+                                    if (item.device_close_point_name != null) {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                        temp_point_value = allDeviceRowData[
+                                            device_index
+                                        ].points.find(
+                                            (x) => x.name == item.device_close_point_name
+                                        ).value;
+                                        if (temp_point_value == item.device_close_point_value) {
+                                            item.device_color = item.device_close_color;
+                                        }
+                                    }
+                                } else {
+                                    if (item.device_normal_point_name == "ER") {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                        temp_point_value = allDeviceRowData[
+                                            device_index
+                                        ].points.find(
+                                            (x) => x.name == item.device_normal_point_name
+                                        ).value;
+                                        if (temp_point_value == "true") {
+                                            item.device_color = item.device_normal_color;
+                                        } else {
+                                            // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                            temp_point_value = allDeviceRowData[
+                                                device_index
+                                            ].points.find(
+                                                (x) => x.name == item.device_close_point_name
+                                            ).value;
+                                            if (temp_point_value == item.device_close_point_value) {
+                                                item.device_color = item.device_close_color;
+                                            }
+                                        }
+                                    } else if (item.device_close_point_name == "ER") {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
+                                        temp_point_value = allDeviceRowData[
+                                            device_index
+                                        ].points.find(
+                                            (x) => x.name == item.device_close_point_name
+                                        ).value;
+                                        if (temp_point_value == "true") {
+                                            item.device_color = item.device_close_color;
+                                        } else {
+                                            // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                            temp_point_value = allDeviceRowData[
+                                                device_index
+                                            ].points.find(
+                                                (x) => x.name == item.device_normal_point_name
+                                            ).value;
+                                            if (temp_point_value == item.device_normal_point_value) {
+                                                item.device_color = item.device_normal_color;
+                                            }
+                                        }
+                                    } else {
+                                        // temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
+                                        temp_point_value = allDeviceRowData[
+                                            device_index
+                                        ].points.find(
+                                            (x) => x.name == item.device_normal_point_name
+                                        ).value;
+                                        if (temp_point_value == item.device_normal_point_value) {
+                                            item.device_color = item.device_normal_color;
+                                        } else if (
+                                            temp_point_value == item.device_close_point_value
+                                        ) {
+                                            item.device_color = item.device_close_color;
+                                        }
+                                    }
+                                }
+                            }
+                            item.zoom = zoom;
+                            temp.push(item);
+                        }
+                    }
+                }
+            });
+
+            // let temp = data.filter(function (item, index) {
+            //     if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
+            //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
+            //     } else {
+            //         return [];
+            //     }
+            // });
+            let option = floChart.getOption();
+            temp.forEach(function (tempData) {
+                let oldTarObj = option.series[0]?.data?.filter(
+                    (x) => x.device_number == tempData.device_number
+                )[0];
+                if (oldTarObj) {
+                    tempData = Object.assign(tempData, oldTarObj);
+                }
+            });
+            temp.map(function (item) {
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid
+                        ? item.device_node_guid
+                        : null,
+                    device_node_full_name: item.device_node_full_name
+                        ? item.device_node_full_name
+                        : null,
+                    device_system_category_layer3: item.device_system_category_layer3
+                        ? item.device_system_category_layer3
+                        : null,
+                    status: item.status,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL,
+                    _dbId: item._dbId ?? null,
                 };
 
+                obj.itemStyle = {
+                    color: item.device_color || item.device_close_color,
+                };
+
+                res.push(obj);
+            });
+
+            return res;
+        };
+
+        const scatter_icon_convertData = function (data) {
+            //正常、關閉(icon)
+            let res = [],
+                temp = [];
+
+            data.forEach(function (item, index) {
+                if (
+                    global_emergency_alarm_device_number != undefined &&
+                    global_emergency_alarm_device_number != null
+                ) {
+                    if (
+                        global_emergency_alarm_device_number.findIndex(
+                            (x) => x.device_number == item.device_number
+                        ) < 0 &&
+                        item.device_system_category_layer3 != "C"
+                    ) {
+                        //如果有子節點，則只針對子節點操作
+                        if (
+                            lightControl === "node" &&
+                            item.device_nodes != undefined &&
+                            item.device_nodes != null &&
+                            item.device_nodes.length > 0
+                        ) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 =
+                                    item.device_system_category_layer3;
+                                item_node.device_normal_color = item.device_normal_color;
+                                item_node.device_image = item.device_image;
+                                temp.push(item_node);
+                            });
+                        } else {
+                            temp.push(item);
+                        }
+                    }
+                }
+            });
+
+            temp = data.filter(function (item, index) {
+                if (
+                    global_emergency_alarm_device_number != undefined &&
+                    global_emergency_alarm_device_number != null
+                ) {
+                    return (
+                        global_emergency_alarm_device_number.findIndex(
+                            (x) => x.device_number == item.device_number
+                        ) < 0 && item.device_system_category_layer3 != "C"
+                    );
+                } else {
+                    return [];
+                }
+            });
+
+            temp.map(function (item) {
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid
+                        ? item.device_node_guid
+                        : null,
+                    device_node_full_name: item.device_node_full_name
+                        ? item.device_node_full_name
+                        : null,
+                    device_system_category_layer3: item.device_system_category_layer3
+                        ? item.device_system_category_layer3
+                        : null,
+                    status: item.status,
+                    symbol:
+                        "image://" +
+                        baseImgUrl +
+                        "/upload/device_icon/" +
+                        item.device_image,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL,
+                };
+
+                if (item.selected) {
+                    obj.symbolSize = 50;
+                }
+                obj.itemStyle = {
+                    color: item.device_colse_color,
+                };
+                res.push(obj);
+            });
+
+            return res;
+        };
+
+        const scatter_error_convertData = function (data) {
+            //異常(圓點)
+            let res = [],
+                temp = [];
+
+            data.forEach(function (item, index) {
+                if (
+                    global_emergency_alarm_device_number != undefined &&
+                    global_emergency_alarm_device_number != null
+                ) {
+                    if (
+                        global_emergency_alarm_device_number.findIndex(
+                            (x) => x.device_number == item.device_number
+                        ) > -1 &&
+                        item.device_system_category_layer3 != "C"
+                    ) {
+                        //如果有子節點，則只針對子節點操作
+                        if (
+                            lightControl === "node" &&
+                            item.device_nodes != undefined &&
+                            item.device_nodes != null &&
+                            item.device_nodes.length > 0
+                        ) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 =
+                                    item.device_system_category_layer3;
+                                item_node.device_error_color = item.device_error_color;
+                                temp.push(item_node);
+                            });
+                        } else {
+                            temp.push(item);
+                        }
+                    }
+                }
+            });
+
+            // if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
+            //     temp = data.filter(function (item, index) {
+            //         return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
+            //     });
+            // }
+
+            temp.map(function (item) {
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid
+                        ? item.device_node_guid
+                        : null,
+                    device_node_full_name: item.device_node_full_name
+                        ? item.device_node_full_name
+                        : null,
+                    device_system_category_layer3: item.device_system_category_layer3
+                        ? item.device_system_category_layer3
+                        : null,
+                    status: item.status,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL,
+                };
+                console.log("異常", item.device_color);
+                obj.itemStyle = { color: item.device_error_color };
+
+                res.push(obj);
+            });
+
+            return res;
+        };
+
+        const scatter_error_icon_convertData = function (data) {
+            //異常(icon)
+            let res = [],
+                temp = [];
+
+            data.forEach(function (item, index) {
+                if (
+                    global_emergency_alarm_device_number != undefined &&
+                    global_emergency_alarm_device_number != null
+                ) {
+                    if (
+                        global_emergency_alarm_device_number.findIndex(
+                            (x) => x.device_number == item.device_number
+                        ) > -1 &&
+                        item.device_system_category_layer3 != "C"
+                    ) {
+                        //如果有子節點，則只針對子節點操作
+                        if (
+                            lightControl === "node" &&
+                            item.device_nodes != undefined &&
+                            item.device_nodes != null &&
+                            item.device_nodes.length > 0
+                        ) {
+                            item.device_nodes.forEach(function (item_node, item_node_index) {
+                                //添加父節點相關資訊
+                                item_node.device_system_category_layer3 =
+                                    item.device_system_category_layer3;
+                                item_node.device_error_color = item.device_error_color;
+                                item_node.device_image = item.device_image;
+                                temp.push(item_node);
+                            });
+                        } else {
+                            temp.push(item);
+                        }
+                    }
+                }
+            });
+
+            if (
+                global_emergency_alarm_device_number != undefined &&
+                global_emergency_alarm_device_number != null
+            ) {
+                temp = data.filter(function (item, index) {
+                    return (
+                        global_emergency_alarm_device_number.findIndex(
+                            (x) => x.device_number == item.device_number
+                        ) > -1 && item.device_system_category_layer3 != "C"
+                    );
+                });
+            }
+
+            temp.map(function (item) {
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name ? item.full_name : null,
+                    device_node_guid: item.device_node_guid
+                        ? item.device_node_guid
+                        : null,
+                    device_node_full_name: item.device_node_full_name
+                        ? item.device_node_full_name
+                        : null,
+                    device_system_category_layer3: item.device_system_category_layer3
+                        ? item.device_system_category_layer3
+                        : null,
+                    status: item.status,
+                    symbol:
+                        "image://" +
+                        baseImgUrl +
+                        "/upload/device_icon/" +
+                        item.device_image,
+                    value: item.value,
+                    deviceItems: item.deviceItems,
+                    deviceURL: item.deviceURL,
+                };
+
+                res.push(obj);
+            });
+
+            return res;
+        };
+
+        const scatter_cctv_convertData = function (data) {
+            //CCTV
+            let res = [];
+            let temp = data.filter(function (item, index) {
+                return item.device_system_category_layer3 == "C";
+            });
+
+            temp.map(function (item) {
+                var obj = {
+                    device_guid: item.device_guid,
+                    device_number: item.device_number,
+                    full_name: item.full_name,
+                    device_system_category_layer3: item.device_system_category_layer3,
+                    device_ip: item.device_ip,
+                    device_port: item.device_port,
+                    status: item.status,
+                    symbol:
+                        "image://" +
+                        str_location_url +
+                        "/upload/device_icon/" +
+                        item.device_image,
+                    value: item.value,
+                };
+
+                res.push(obj);
+            });
+
+            return res;
+        };
+
+        if (!floChart.getOption()) {
+            return;
+        }
+
+        var zoom = 0;
+        if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
+            zoom = floChart.getOption().geo[0].zoom;
+        }
+        if (zoom <= zoomToggle) {
+            floChart.setOption({
+                series: [
+                    {
+                        symbolOffset: [0, 0],
+                        data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
+                    },
+                    {
+                        data: [], //正常、關閉(icon)
+                    },
+                    {
+                        symbolOffset: [0, 0],
+                        data: scatter_error_convertData(currentData), //異常(圓點)
+                    },
+                    {
+                        data: [], //異常(icon)
+                    },
+                    {
+                        data: scatter_cctv_convertData(currentData), //CCTV
+                    },
+                ],
+            });
+        } else {
+            floChart.setOption({
+                series: [
+                    {
+                        symbolOffset: [10, 10],
+
+                        data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
+                    },
+                    {
+                        data: scatter_icon_convertData(currentData), //正常、關閉(icon)
+                    },
+                    {
+                        symbolOffset: [10, 10],
+                        data: scatter_error_convertData(currentData), //異常(圓點)
+                    },
+                    {
+                        data: scatter_error_icon_convertData(currentData), //異常(icon)
+                    },
+                    {
+                        data: scatter_cctv_convertData(currentData), //CCTV
+                    },
+                ],
+            });
+        }
+    }
+
+    function getNextFloor(floGuid = null) {
+        let url = baseApiUrl + "/api/Device/GetNextFloor";
+        objSendData.Data = { floor_guid: floGuid, building_tag: pageAct.buiTag };
+        let result = "";
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    result = res.data?.full_name;
+                }
+            },
+            null,
+            "POST"
+        ).send();
+
+        return result;
+    }
+
+    // show 3D 模型
+    function show3DModel(urn) {
+        launchViewerForHotspot(urn, (viewer, nodeIds) => {
+            // 隱藏 toolbar
+            document.querySelector("#guiviewer3d-toolbar").style.display = "none";
+            let nextFloor = getNextFloor(pageAct.floGuid);
+            let curFloTag = pageAct.floTag;
+
+            if (!nextFloor) {
+                toast_warning("超出樓層範圍");
+                return;
+            }
+
+            if (curFloTag?.startsWith("U")) {
+                curFloTag = curFloTag.split("U")[1];
+            }
+            if (nextFloor?.startsWith("U")) {
+                nextFloor = nextFloor.split("U")[1];
+            }
+
+            getLevelsData(curFloTag, nextFloor, function () {
+                viewer.model.search(
+                    "天花板",
+                    (nodeIds) => {
+                        // console.log("2",nodeIds)
+                        viewer.hide(nodeIds);
+                    },
+                    (e) => {
+                        console.log(e);
+                    }
+                );
+            });
+
+            setHeatMap();
+
+            if (
+                (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
+                elevatorShow
+            ) {
+                let elevOption = {
+                    viewer: viewer,
+                    ordPath: {
+                        area_tag: pageAct.AreaTag,
+                        building_tag: pageAct.buiTag,
+                    },
+                };
                 // 電梯移動訂閱程序載入
                 let forge3DElev = new Forge3DElevFull(elevOption);
                 forge3DElev.bajaEndCallback = function () {
-                  endPageLoading();
+                    endPageLoading();
                 };
                 forge3DElev.init();
-              }
-            : null,
-          curDevice: {
-            ...device,
-            roomDbId: !isNaN(parseInt(device.room_dbid))
-              ? parseInt(device.room_dbid)
-              : -1,
-            id: device.device_number,
-            position: isJSON(device.device_coordinate_3d)
-              ? JSON.parse(device.device_coordinate_3d)
-              : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-            temp: 25,
-            forge_dbid: parseInt(device.forge_dbid),
-          },
-          deviceList: currentData.map((d) => ({
-            ...d,
-            roomDbId: !isNaN(parseInt(d.room_dbid))
-              ? parseInt(d.room_dbid)
-              : -1,
-            id: d.device_number,
-            position: isJSON(d.device_coordinate_3d)
-              ? JSON.parse(d.device_coordinate_3d)
-              : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-            temp: 25,
-            forge_dbid: parseInt(d.forge_dbid),
-          })),
-        });
-      });
-    }
-  }
-
-  function getHotspotPoint(callback = null) {
-    let url = baseApiUrl + "/api/GetDevForCor";
-    let sendData = {
-      device_area_tag: pageAct.AreaTag,
-      device_building_tag: pageAct.buiTag,
-      device_system_tag: pageAct.sysMainTag,
-      device_name_tag: pageAct.sysSubTag,
-      device_floor_tag: pageAct.floTag,
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      function (res) {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          let myDataList = [];
-          $.each(res.data, (idx, data) => {
-            if (lightControl == "node" && data.device_nodes.length > 0) {
-              data.device_nodes.forEach((node) => {
-                if (
-                  node.device_node_coordinate_3D != null &&
-                  isJSON(node.device_node_coordinate_3D)
-                ) {
-                  myDataList.push({
-                    ...node,
-                    position: JSON.parse(node.device_node_coordinate_3D),
-                  });
-                }
-              });
-            } else if (
-              data.device_coordinate_3d != null &&
-              isJSON(data.device_coordinate_3d)
-            ) {
-              myDataList.push({
-                ...data,
-                position: JSON.parse(data.device_coordinate_3d),
-              });
             }
-          });
+        });
+    }
 
-          getLightData(myDataList);
-          setHotspotPoint(myDataList);
-          callback ? callback() : "";
+    function setHeatMap() {
+        if (pageAct.sysSubTag !== "M12") {
+            devices = currentData.map((x) => {
+                return {
+                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
+                    id: x.device_number,
+                    position: isJSON(x.device_coordinate_3d)
+                        ? JSON.parse(x.device_coordinate_3d)
+                        : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                    sensorTypes: ["temperature", "humidity"],
+                };
+            });
+
+            let option = {
+                devices: devices,
+            };
+
+            heatMap = new ADHeatMaps(option);
+            heatMap.onComplete = () => {
+                $.each(currentData, (idx, dev) => {
+                    heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                });
+            };
         }
-      },
-      null,
-      "POST"
-    ).send();
-  }
 
-  function setHotspotPoint(myDataList = []) {
-    getHopspotPoint(myDataList);
-  }
+        if (pageAct.sysSubTag === "M12" && !elevatorShow) {
+            let sensorObjs = [];
+            addHotPoint(viewer);
+            Forge3DSensor.sensorTimes = 0;
+            sensorObjs = currentData.map((device) => {
+                Forge3DSensor.sensorTimes++;
+                return new Forge3DSensor({
+                    viewer: viewer,
+                    ordPath: {
+                        area_tag: pageAct.AreaTag,
+                        building_tag: pageAct.buiTag,
+                    },
+                    selector: "#forgeViewer",
+                    elevCb: elevatorShow
+                        ? () => {
+                            let elevOption = {
+                                selector: "#forgeViewer",
+                                viewer: viewer,
+                                ordPath: {
+                                    area_tag: pageAct.AreaTag,
+                                    building_tag: pageAct.buiTag,
+                                },
+                                sensorObjs,
+                            };
 
-  onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
-    forgeUnFocusAll();
-    chartUnFocusAll();
-    let rect = $("#forgeViewer")[0].getBoundingClientRect();
-    let position = [rect.left + rect.width / 2, rect.top + rect.height / 4];
-    // console.log(position)
-    // let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
-    let devObj = obj.myData;
-    let name =
-      lightControl === "node" && pageAct.sysSubTag === "L1"
-        ? currentData.filter(
-            (x) => x.device_node_guid == devObj.device_node_guid
-          )[0]?.device_node_full_name
-        : currentData.filter((x) => x.device_guid == devObj.device_guid)[0]
-            ?.full_name;
-    devObj.full_name = name;
-    parentEle = crePosPopover(position, devObj);
-    $(parentEle).click();
-
-    let option = floChart.getOption();
-    option.series.forEach(function (series) {
-      series.data.forEach(function (point) {
-        if (pageAct.sysSubTag === "L1") {
-          if (point.device_node_guid == devObj.device_node_guid) {
-            point.symbolSize = 50;
-          }
-        } else {
-          if (point.device_guid == devObj.device_guid) {
-            point.symbolSize = 50;
-          }
+                            // 電梯移動訂閱程序載入
+                            let forge3DElev = new Forge3DElevFull(elevOption);
+                            forge3DElev.bajaEndCallback = function () {
+                                endPageLoading();
+                            };
+                            forge3DElev.init();
+                        }
+                        : null,
+                    curDevice: {
+                        ...device,
+                        roomDbId: !isNaN(parseInt(device.room_dbid))
+                            ? parseInt(device.room_dbid)
+                            : -1,
+                        id: device.device_number,
+                        position: isJSON(device.device_coordinate_3d)
+                            ? JSON.parse(device.device_coordinate_3d)
+                            : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                        temp: 25,
+                        forge_dbid: parseInt(device.forge_dbid),
+                    },
+                    deviceList: currentData.map((d) => ({
+                        ...d,
+                        roomDbId: !isNaN(parseInt(d.room_dbid))
+                            ? parseInt(d.room_dbid)
+                            : -1,
+                        id: d.device_number,
+                        position: isJSON(d.device_coordinate_3d)
+                            ? JSON.parse(d.device_coordinate_3d)
+                            : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                        temp: 25,
+                        forge_dbid: parseInt(d.forge_dbid),
+                    })),
+                });
+            });
         }
-      });
-    });
-    floChart.setOption(option);
-  });
+    }
 
-  onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
-    $(parentEle).YTTooltip("hide");
-  });
+    function getHotspotPoint(callback = null) {
+        let url = baseApiUrl + "/api/GetDevForCor";
+        let sendData = {
+            device_area_tag: pageAct.AreaTag,
+            device_building_tag: pageAct.buiTag,
+            device_system_tag: pageAct.sysMainTag,
+            device_name_tag: pageAct.sysSubTag,
+            device_floor_tag: pageAct.floTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    let myDataList = [];
+                    $.each(res.data, (idx, data) => {
+                        if (lightControl == "node" && data.device_nodes.length > 0) {
+                            data.device_nodes.forEach((node) => {
+                                if (
+                                    node.device_node_coordinate_3D != null &&
+                                    isJSON(node.device_node_coordinate_3D)
+                                ) {
+                                    myDataList.push({
+                                        ...node,
+                                        position: JSON.parse(node.device_node_coordinate_3D),
+                                    });
+                                }
+                            });
+                        } else if (
+                            data.device_coordinate_3d != null &&
+                            isJSON(data.device_coordinate_3d)
+                        ) {
+                            myDataList.push({
+                                ...data,
+                                position: JSON.parse(data.device_coordinate_3d),
+                            });
+                        }
+                    });
 
-  function forgeUnFocusAll() {
-    $.each(currentData, (idx, cData) => {
-      const eleDbId = cData._dbId;
-      if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
-        changeScaleForHotspot(eleDbId, false);
-        return;
-      } else {
-        // 3D 熱點解除
-        controlFocusHotspot(eleDbId, false);
-      }
-    });
-  }
+                    getLightData(myDataList);
+                    setHotspotPoint(myDataList);
+                    callback ? callback() : "";
+                }
+            },
+            null,
+            "POST"
+        ).send();
+    }
 
-  function chartUnFocusAll() {
-    let option = floChart.getOption();
-    option.series.forEach(function (series) {
-      series.data.forEach(function (point) {
-        point.symbolSize = 20;
-      });
-    });
-    floChart.setOption(option);
-  }
+    function setHotspotPoint(myDataList = []) {
+        getHopspotPoint(myDataList);
+    }
 
-  // 解除 series 聚焦
-  function chartUnFocus(ele) {
-    let devGuid = $(ele).data("id");
-    let option = floChart.getOption();
-    option.series.forEach(function (series) {
-      series.data.forEach(function (point) {
-        if (point.device_guid == devGuid) {
-          point.symbolSize = 20;
-        }
-      });
+    onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
+        forgeUnFocusAll();
+        chartUnFocusAll();
+        let rect = $("#forgeViewer")[0].getBoundingClientRect();
+        let position = [rect.left + rect.width / 2, rect.top + rect.height / 4];
+        // console.log(position)
+        // let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
+        let devObj = obj.myData;
+        let name =
+            lightControl === "node" && pageAct.sysSubTag === "L1"
+                ? currentData.filter(
+                    (x) => x.device_node_guid == devObj.device_node_guid
+                )[0]?.device_node_full_name
+                : currentData.filter((x) => x.device_guid == devObj.device_guid)[0]
+                    ?.full_name;
+        devObj.full_name = name;
+        parentEle = crePosPopover(position, devObj);
+        $(parentEle).click();
+
+        let option = floChart.getOption();
+        option.series.forEach(function (series) {
+            series.data.forEach(function (point) {
+                if (pageAct.sysSubTag === "L1") {
+                    if (point.device_node_guid == devObj.device_node_guid) {
+                        point.symbolSize = 50;
+                    }
+                } else {
+                    if (point.device_guid == devObj.device_guid) {
+                        point.symbolSize = 50;
+                    }
+                }
+            });
+        });
+        floChart.setOption(option);
     });
-    floChart.setOption(option);
-  }
+
+    onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
+        $(parentEle).YTTooltip("hide");
+    });
+
+    function forgeUnFocusAll() {
+        $.each(currentData, (idx, cData) => {
+            const eleDbId = cData._dbId;
+            if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                changeScaleForHotspot(eleDbId, false);
+                return;
+            } else {
+                // 3D 熱點解除
+                controlFocusHotspot(eleDbId, false);
+            }
+        });
+    }
+
+    function chartUnFocusAll() {
+        let option = floChart.getOption();
+        option.series.forEach(function (series) {
+            series.data.forEach(function (point) {
+                point.symbolSize = 20;
+            });
+        });
+        floChart.setOption(option);
+    }
+
+    // 解除 series 聚焦
+    function chartUnFocus(ele) {
+        let devGuid = $(ele).data("id");
+        let option = floChart.getOption();
+        option.series.forEach(function (series) {
+            series.data.forEach(function (point) {
+                if (point.device_guid == devGuid) {
+                    point.symbolSize = 20;
+                }
+            });
+        });
+        floChart.setOption(option);
+    }
 </script>