From 7169c33dc3c1cdda420cf50c59b3668b845c120e Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Tue, 30 May 2023 16:01:26 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=20forge=20=E7=AA=81?=
 =?UTF-8?q?=E6=93=8A=E5=B9=B3=E9=9D=A2=E5=9C=96=E5=8E=9F=E9=BB=9E=E9=85=8D?=
 =?UTF-8?q?=E5=90=88=E9=BB=9E=E4=BD=8D=E9=A1=8F=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysMonAll.html        | 1750 +++++++-------
 Frontend/_sysMonFloor.html      | 3437 +++++++++++++--------------
 Frontend/index.html             | 3927 ++++++++++++++++---------------
 Frontend/js/forge/forgemodel.js |   50 +-
 Frontend/js/site.js             | 2153 ++++++++---------
 5 files changed, 5656 insertions(+), 5661 deletions(-)

diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index 0901c5e..dafebe2 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,906 @@
      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) => {
+            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("subDevice 開始");
+            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
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-error-type", "error")
+                    .data("light-error-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 (
+                deviceCloseArr.length === 0 &&
+                alarmDbIdList.some(
+                    (device) => device.device_number === matchDevice.device_number
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "error")
+                    .data("light-type", "error");
+            }
+
+            if (
+                (!pageAct.floTag &&
+                    allDevList.length ===
+                    deviceNormalArr.length + deviceCloseArr.length) ||
+                allDevList.length === deviceNormalArr.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" || x.point_name == "TEMP") != -1) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
+        });
     }
-  }
 
-  // 取得昇位圖點位 (deviceItem)
-  function getRiserPoiObj() {
-    let tarDevItem = pageAct.devItems?.filter(
-      (x) => x.is_show_riserDiagram == 1
-    );
-    if (tarDevItem && tarDevItem[0]) {
-      return tarDevItem[0];
+    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);
+        });
+        if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
+            subDevice();
+        }
+    });
+
+    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..ce8a580 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,1799 @@
   <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");
+        alarmDbIdList = [];
+        $("#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);
+                }
+            }
 
-      heatMap = new ADHeatMaps(option);
-      heatMap.onComplete = () => {
-        $.each(currentData, (idx, dev) => {
-          heatMap.changeTemp(dev.device_number, dev._temp || 0);
+            if (
+                data.point_name == errDevPoiName &&
+                data.value !== matchDevice.device_error_point_value &&
+                alarmDbIdList.some(
+                    ({ device_number }) => matchDevice.device_number === device_number
+                )
+            ) {
+                alarmDbIdList = alarmDbIdList.filter(
+                    ({ device_number }) => matchDevice.device_number === device_number
+                );
+            } else if (
+                data.point_name == errDevPoiName &&
+                data.value == matchDevice.device_error_point_value &&
+                !alarmDbIdList.some(
+                    ({ device_number }) => matchDevice.device_number === device_number
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "error")
+                    .data("light-type", "error");
+                alarmDbIdList.push(matchDevice);
+            }
+
+            if (
+                data.point_name == norDevPoiName &&
+                data.value == matchDevice.device_normal_point_value &&
+                !deviceScatterNormalArr.some(
+                    ({ device_number }) => data.device_number_full === device_number
+                )
+            ) {
+                //顯示正常燈號
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "normal")
+                    .data("light-type", "normal");
+                deviceScatterNormalArr.push(matchDevice);
+                deviceScatterCloseArr = deviceScatterCloseArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            } else if (
+                data.point_name == cloDevPoiName &&
+                data.value == matchDevice.device_close_point_value &&
+                !deviceScatterCloseArr.some(
+                    ({ device_number }) => data.device_number_full === device_number
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "close")
+                    .data("light-type", "close");
+                deviceScatterCloseArr.push(matchDevice);
+                deviceScatterNormalArr = deviceScatterNormalArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            }
+
+            if (pageAct.sysSubTag === "L1" && lightControl === "node") {
+                alarmDbIdList = alarmDbIdList.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+
+                deviceScatterNormalArr = deviceScatterNormalArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+                deviceScatterCloseArr = deviceScatterCloseArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+
+                lightOnHotColorArr = lightOnHotColorArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+                lightOffHotColorArr = lightOffHotColorArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+            }
+
+            if (
+                deviceScatterCloseArr.length + deviceScatterNormalArr.length ===
+                option.series[0].data.length ||
+                deviceScatterCloseArr.length +
+                deviceScatterNormalArr.length +
+                alarmDbIdList.length ===
+                option.series[0].data.length
+            ) {
+                deviceScatterNormalArr.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;
+                        if (cur) {
+                            cur.itemStyle = { color: normalColor };
+                        }
+                    });
+
+                changeColorForHotspot(
+                    deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    true
+                );
+
+                deviceScatterCloseArr.length &&
+                    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;
+                        if (cur) {
+                            cur.itemStyle = { color: closeColor };
+                        }
+                    });
+
+                changeColorForHotspot(
+                    deviceScatterCloseArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    false
+                );
+
+                alarmDbIdList.length &&
+                    alarmDbIdList.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;
+
+                        if (cur) {
+                            cur.itemStyle = { color: errColor };
+                        }
+                    });
+                changeColorForHotspot(
+                    alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
+                    "error",
+                    false
+                );
+
+                floChart.setOption(option);
+                $(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();
-  }
+        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 setHotspotPoint(myDataList = []) {
-    getHopspotPoint(myDataList);
-  }
-
-  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>
diff --git a/Frontend/index.html b/Frontend/index.html
index b983e40..d7b3724 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -9,68 +9,68 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 -->
 <html lang="zh-hant-TW" class="root-text-lg">
 <head>
-  <meta charset="utf-8" />
-  <title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
-  <meta name="description" content="Marketing Dashboard" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport"
-        content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui" />
-  <!-- Call App Mode on ios devices -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <!-- Remove Tap Highlight on Windows Phone IE -->
-  <meta name="msapplication-tap-highlight" content="no" />
-  <!-- base css -->
-  <link id="vendorsbundle"
-        rel="stylesheet"
-        media="screen, print"
-        href="lib/vendors.bundle.css" />
-  <link id="appbundle"
-        rel="stylesheet"
-        media="screen, print"
-        href="lib/app.bundle.css" />
-  <link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
-  <link id="myskin"
-        rel="stylesheet"
-        media="screen, print"
-        href="lib/skins/skin-master.css" />
-  <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
-  <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
-  <!-- Place favicon.ico in the root directory -->
-  <link rel="apple-touch-icon"
-        sizes="180x180"
-        href="img/favicon/apple-touch-icon.png" />
-  <link rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="img/favicon/favicon-32x32.png" />
-  <link rel="mask-icon"
-        href="img/favicon/safari-pinned-tab.svg"
-        color="#5bbad5" />
-  <!-- Font Awesome -->
-  <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
-  <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
+    <meta charset="utf-8" />
+    <title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
+    <meta name="description" content="Marketing Dashboard" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui" />
+    <!-- Call App Mode on ios devices -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <!-- Remove Tap Highlight on Windows Phone IE -->
+    <meta name="msapplication-tap-highlight" content="no" />
+    <!-- base css -->
+    <link id="vendorsbundle"
+          rel="stylesheet"
+          media="screen, print"
+          href="lib/vendors.bundle.css" />
+    <link id="appbundle"
+          rel="stylesheet"
+          media="screen, print"
+          href="lib/app.bundle.css" />
+    <link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
+    <link id="myskin"
+          rel="stylesheet"
+          media="screen, print"
+          href="lib/skins/skin-master.css" />
+    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
+    <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="apple-touch-icon"
+          sizes="180x180"
+          href="img/favicon/apple-touch-icon.png" />
+    <link rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="img/favicon/favicon-32x32.png" />
+    <link rel="mask-icon"
+          href="img/favicon/safari-pinned-tab.svg"
+          color="#5bbad5" />
+    <!-- Font Awesome -->
+    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
+    <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
 
-  <!--<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
-  <link href="lib/jstree-master/themes/default/style.min.css"
-        rel="stylesheet" />
-  <link href="lib/jstree-master/themes/default-dark/style.min.css"
-        rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        rel="stylesheet" />
-  <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
-  <link rel="stylesheet"
-        media="screen, print"
-        href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
-  <link rel="stylesheet" href="css/site.css" />
-  <link rel="stylesheet"
-        href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
-  <link rel="stylesheet"
-        href="css/yourteam/plugins/yt-notice/yt-notice.css" />
-  <link rel="stylesheet"
-        href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
-  <link rel="stylesheet"
-        href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
-        type="text/css" />
+    <!--<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
+    <link href="lib/jstree-master/themes/default/style.min.css"
+          rel="stylesheet" />
+    <link href="lib/jstree-master/themes/default-dark/style.min.css"
+          rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+          rel="stylesheet" />
+    <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
+    <link rel="stylesheet"
+          media="screen, print"
+          href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
+    <link rel="stylesheet" href="css/site.css" />
+    <link rel="stylesheet"
+          href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
+    <link rel="stylesheet"
+          href="css/yourteam/plugins/yt-notice/yt-notice.css" />
+    <link rel="stylesheet"
+          href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
+    <link rel="stylesheet"
+          href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
+          type="text/css" />
 </head>
 <!-- BEGIN Body -->
 <!-- Possible Classes
@@ -99,687 +99,687 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 -->
 
 <body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
-  <!-- DOC: script to save and load page settings -->
-  <script>
-    /**
-     *	This script should be placed right after the body tag for fast execution
-     *	Note: the script is written in pure javascript and does not depend on thirdparty library
-     **/
-    "use strict";
+    <!-- DOC: script to save and load page settings -->
+    <script>
+        /**
+         *	This script should be placed right after the body tag for fast execution
+         *	Note: the script is written in pure javascript and does not depend on thirdparty library
+         **/
+        "use strict";
 
-    var classHolder = document.getElementsByTagName("BODY")[0],
-      /**
-       * Load from localstorage
-       **/
-      themeSettings = localStorage.getItem("themeSettings")
-        ? JSON.parse(localStorage.getItem("themeSettings"))
-        : {},
-      themeURL = themeSettings.themeURL || "",
-      themeOptions = themeSettings.themeOptions || "";
-    /**
-     * Load theme options
-     **/
-    if (themeSettings.themeOptions) {
-      classHolder.className = themeSettings.themeOptions;
-      console.log("%c✔ Theme settings loaded", "color: #148f32");
-    } else {
-      console.log(
-        "%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...",
-        "color: #ed1c24"
-      );
-    }
-    if (themeSettings.themeURL && !document.getElementById("mytheme")) {
-      var cssfile = document.createElement("link");
-      cssfile.id = "mytheme";
-      cssfile.rel = "stylesheet";
-      cssfile.href = themeURL;
-      document.getElementsByTagName("head")[0].appendChild(cssfile);
-    } else if (themeSettings.themeURL && document.getElementById("mytheme")) {
-      document.getElementById("mytheme").href = themeSettings.themeURL;
-    }
-    /**
-     * Save to localstorage
-     **/
-    var saveSettings = function () {
-      themeSettings.themeOptions = String(classHolder.className)
-        .split(/[^\w-]+/)
-        .filter(function (item) {
-          return /^(nav|header|footer|mod|display)-/i.test(item);
-        })
-        .join(" ");
-      if (document.getElementById("mytheme")) {
-        themeSettings.themeURL = document
-          .getElementById("mytheme")
-          .getAttribute("href");
-      }
-      localStorage.setItem("themeSettings", JSON.stringify(themeSettings));
-    };
-    /**
-     * Reset settings
-     **/
-    var resetSettings = function () {
-      localStorage.setItem("themeSettings", "");
-    };
-  </script>
-  <!-- BEGIN Page Wrapper -->
-  <div class="page-wrapper">
-    <div class="page-inner">
-      <!-- BEGIN Left Aside -->
-      <!-- END Left Aside -->
-      <div class="page-content-wrapper">
-        <!-- BEGIN Page Header -->
-        <header class="page-header" role="banner">
-          <!--we need this logo when user switches to nav-function-top-->
-          <div class="page-logo">
-            <a href="javascript:;"
-               name="topFunBtn"
-               data-page="dashboard"
-               class="page-logo-link press-scale-down d-flex align-items-center position-relative">
-              <img src="img/logo.png"
-                   alt="SmartAdmin WebApp"
-                   aria-roledescription="logo" />
+        var classHolder = document.getElementsByTagName("BODY")[0],
+            /**
+             * Load from localstorage
+             **/
+            themeSettings = localStorage.getItem("themeSettings")
+                ? JSON.parse(localStorage.getItem("themeSettings"))
+                : {},
+            themeURL = themeSettings.themeURL || "",
+            themeOptions = themeSettings.themeOptions || "";
+        /**
+         * Load theme options
+         **/
+        if (themeSettings.themeOptions) {
+            classHolder.className = themeSettings.themeOptions;
+            console.log("%c✔ Theme settings loaded", "color: #148f32");
+        } else {
+            console.log(
+                "%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...",
+                "color: #ed1c24"
+            );
+        }
+        if (themeSettings.themeURL && !document.getElementById("mytheme")) {
+            var cssfile = document.createElement("link");
+            cssfile.id = "mytheme";
+            cssfile.rel = "stylesheet";
+            cssfile.href = themeURL;
+            document.getElementsByTagName("head")[0].appendChild(cssfile);
+        } else if (themeSettings.themeURL && document.getElementById("mytheme")) {
+            document.getElementById("mytheme").href = themeSettings.themeURL;
+        }
+        /**
+         * Save to localstorage
+         **/
+        var saveSettings = function () {
+            themeSettings.themeOptions = String(classHolder.className)
+                .split(/[^\w-]+/)
+                .filter(function (item) {
+                    return /^(nav|header|footer|mod|display)-/i.test(item);
+                })
+                .join(" ");
+            if (document.getElementById("mytheme")) {
+                themeSettings.themeURL = document
+                    .getElementById("mytheme")
+                    .getAttribute("href");
+            }
+            localStorage.setItem("themeSettings", JSON.stringify(themeSettings));
+        };
+        /**
+         * Reset settings
+         **/
+        var resetSettings = function () {
+            localStorage.setItem("themeSettings", "");
+        };
+    </script>
+    <!-- BEGIN Page Wrapper -->
+    <div class="page-wrapper">
+        <div class="page-inner">
+            <!-- BEGIN Left Aside -->
+            <!-- END Left Aside -->
+            <div class="page-content-wrapper">
+                <!-- BEGIN Page Header -->
+                <header class="page-header" role="banner">
+                    <!--we need this logo when user switches to nav-function-top-->
+                    <div class="page-logo">
+                        <a href="javascript:;"
+                           name="topFunBtn"
+                           data-page="dashboard"
+                           class="page-logo-link press-scale-down d-flex align-items-center position-relative">
+                            <img src="img/logo.png"
+                                 alt="SmartAdmin WebApp"
+                                 aria-roledescription="logo" />
 
-              <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
-              <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
-                          <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
-            </a>
-          </div>
-          <!--DOC: nav menu layout change shortcut-->
-          <div class="hidden-md-down dropdown-icon-menu position-relative">
-            <a href="#"
-               class="header-btn btn js-waves-off"
-               data-action="toggle"
-               data-class="nav-function-hidden"
-               title="Hide Navigation">
-              <i class="ni ni-menu"></i>
-            </a>
-            <ul>
-              <li>
-                <a href="#"
-                   class="btn js-waves-off"
-                   data-action="toggle"
-                   data-class="nav-function-minify"
-                   title="Minify Navigation">
-                  <i class="ni ni-minify-nav"></i>
-                </a>
-              </li>
-              <li>
-                <a href="#"
-                   class="btn js-waves-off"
-                   data-action="toggle"
-                   data-class="nav-function-fixed"
-                   title="Lock Navigation">
-                  <i class="ni ni-lock-nav"></i>
-                </a>
-              </li>
-            </ul>
-          </div>
-          <!--DOC: mobile button appears during mobile width-->
-          <div class="hidden-lg-up">
-            <a href="#"
-               class="header-btn btn press-scale-down"
-               data-action="toggle"
-               data-class="mobile-nav-on">
-              <i class="ni ni-menu"></i>
-            </a>
-          </div>
+                            <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
+                            <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
+                                        <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
+                        </a>
+                    </div>
+                    <!--DOC: nav menu layout change shortcut-->
+                    <div class="hidden-md-down dropdown-icon-menu position-relative">
+                        <a href="#"
+                           class="header-btn btn js-waves-off"
+                           data-action="toggle"
+                           data-class="nav-function-hidden"
+                           title="Hide Navigation">
+                            <i class="ni ni-menu"></i>
+                        </a>
+                        <ul>
+                            <li>
+                                <a href="#"
+                                   class="btn js-waves-off"
+                                   data-action="toggle"
+                                   data-class="nav-function-minify"
+                                   title="Minify Navigation">
+                                    <i class="ni ni-minify-nav"></i>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#"
+                                   class="btn js-waves-off"
+                                   data-action="toggle"
+                                   data-class="nav-function-fixed"
+                                   title="Lock Navigation">
+                                    <i class="ni ni-lock-nav"></i>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <!--DOC: mobile button appears during mobile width-->
+                    <div class="hidden-lg-up">
+                        <a href="#"
+                           class="header-btn btn press-scale-down"
+                           data-action="toggle"
+                           data-class="mobile-nav-on">
+                            <i class="ni ni-menu"></i>
+                        </a>
+                    </div>
 
-          <div class="dropdown">
-            <a class="dropdown-toggle fs-1"
-               href="javascript:;"
-               role="button"
-               id="buiActDrop"
-               data-target="buiList"
-               data-toggle="dropdown"
-               aria-haspopup="true">
-            </a>
-            <div id="buiList"
-                 class="dropdown-menu dropdown-select-menu js-auto-close"></div>
-          </div>
+                    <div class="dropdown">
+                        <a class="dropdown-toggle fs-1"
+                           href="javascript:;"
+                           role="button"
+                           id="buiActDrop"
+                           data-target="buiList"
+                           data-toggle="dropdown"
+                           aria-haspopup="true">
+                        </a>
+                        <div id="buiList"
+                             class="dropdown-menu dropdown-select-menu js-auto-close"></div>
+                    </div>
 
-          <div class="ml-auto d-flex" id="froLisPage"></div>
-          <div class="ml-auto d-flex mr-3">
-            <div class="dropdown">
-              <a href="javascript:;"
-                 id="toggleNoticeBtn"
-                 class="d-flex align-items-center justify-content-center ml-2">
-                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                              alt="Dr. Codex Lantern">-->
-                <!--you can also add username next to the avatar with the codes below:-->
-                <div class="row m-0 justify-content-center userblock">
-                  <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
-                  <span id="noticeConText"
-                        class="text-truncate text-truncate-header hidden-xs-down"
-                        data-hide="隱藏警告"
-                        data-show="顯示警告"></span>
+                    <div class="ml-auto d-flex" id="froLisPage"></div>
+                    <div class="ml-auto d-flex mr-3">
+                        <div class="dropdown">
+                            <a href="javascript:;"
+                               id="toggleNoticeBtn"
+                               class="d-flex align-items-center justify-content-center ml-2">
+                                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                                              alt="Dr. Codex Lantern">-->
+                                <!--you can also add username next to the avatar with the codes below:-->
+                                <div class="row m-0 justify-content-center userblock">
+                                    <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
+                                    <span id="noticeConText"
+                                          class="text-truncate text-truncate-header hidden-xs-down"
+                                          data-hide="隱藏警告"
+                                          data-show="顯示警告"></span>
+                                </div>
+                            </a>
+                        </div>
+                        <!--app user menu-->
+                        <div class="dropdown">
+                            <a href="#"
+                               data-toggle="dropdown"
+                               data-target="logoutList"
+                               class="d-flex align-items-center justify-content-center ml-2">
+                                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                                              alt="Dr. Codex Lantern">-->
+                                <!--you can also add username next to the avatar with the codes below:-->
+                                <div class="row m-0 justify-content-center userblock">
+                                    <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
+                                    <span id="usrName"
+                                          class="text-truncate text-truncate-header hidden-xs-down"></span>
+                                </div>
+                            </a>
+                            <div id="logoutList"
+                                 class="dropdown-menu dropdown-menu-right dropdown-lg">
+                                <a id="logout"
+                                   href="javascript:;"
+                                   class="dropdown-item fw-500 pt-3 pb-3">
+                                    <span>登出</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ml-2 text-center">
+                        <!-- <label class="mb-0 fs-1-2">
+                          Diamond Controls<span class="fs-09 position-absolute"
+                            >®</span
+                          > </label
+                        ><br /> -->
+                        <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
+                    </div>
+                </header>
+                <!-- END Page Header -->
+                <!-- BEGIN Page Content -->
+                <!-- the #js-page-content id is needed for some plugins to initialize -->
+                <!--@RenderBody()-->
+                <div id="app"></div>
+
+                <!-- this overlay is activated only when mobile menu is triggered -->
+                <div class="page-content-overlay"
+                     data-action="toggle"
+                     data-class="mobile-nav-on"></div>
+
+                <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
+                    <div class="yt-navbar-content">
+                        <ul id="sysMonBtnList"></ul>
+                    </div>
                 </div>
-              </a>
+                <!-- END Page Content -->
+                <!-- BEGIN Page Footer -->
+                <!--<footer class="page-footer" role="contentinfo">
+                          <div class="d-flex align-items-center flex-1 text-muted">
+                              <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
+                          </div>
+                          <div>
+                              <ul class="list-table m-0">
+                                  <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
+                                  <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
+                                  <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
+                                  <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
+                              </ul>
+                          </div>
+                      </footer>-->
+                <!-- END Page Footer -->
+                <!-- BEGIN Shortcuts -->
+                <!-- END Shortcuts -->
+                <!-- BEGIN Color profile -->
+                <!-- this area is hidden and will not be seen on screens or screen readers -->
+                <!-- we use this only for CSS color refernce for JS stuff -->
+                <p id="js-color-profile" class="d-none">
+                    <span class="color-primary-50"></span>
+                    <span class="color-primary-100"></span>
+                    <span class="color-primary-200"></span>
+                    <span class="color-primary-300"></span>
+                    <span class="color-primary-400"></span>
+                    <span class="color-primary-500"></span>
+                    <span class="color-primary-600"></span>
+                    <span class="color-primary-700"></span>
+                    <span class="color-primary-800"></span>
+                    <span class="color-primary-900"></span>
+                    <span class="color-info-50"></span>
+                    <span class="color-info-100"></span>
+                    <span class="color-info-200"></span>
+                    <span class="color-info-300"></span>
+                    <span class="color-info-400"></span>
+                    <span class="color-info-500"></span>
+                    <span class="color-info-600"></span>
+                    <span class="color-info-700"></span>
+                    <span class="color-info-800"></span>
+                    <span class="color-info-900"></span>
+                    <span class="color-danger-50"></span>
+                    <span class="color-danger-100"></span>
+                    <span class="color-danger-200"></span>
+                    <span class="color-danger-300"></span>
+                    <span class="color-danger-400"></span>
+                    <span class="color-danger-500"></span>
+                    <span class="color-danger-600"></span>
+                    <span class="color-danger-700"></span>
+                    <span class="color-danger-800"></span>
+                    <span class="color-danger-900"></span>
+                    <span class="color-warning-50"></span>
+                    <span class="color-warning-100"></span>
+                    <span class="color-warning-200"></span>
+                    <span class="color-warning-300"></span>
+                    <span class="color-warning-400"></span>
+                    <span class="color-warning-500"></span>
+                    <span class="color-warning-600"></span>
+                    <span class="color-warning-700"></span>
+                    <span class="color-warning-800"></span>
+                    <span class="color-warning-900"></span>
+                    <span class="color-success-50"></span>
+                    <span class="color-success-100"></span>
+                    <span class="color-success-200"></span>
+                    <span class="color-success-300"></span>
+                    <span class="color-success-400"></span>
+                    <span class="color-success-500"></span>
+                    <span class="color-success-600"></span>
+                    <span class="color-success-700"></span>
+                    <span class="color-success-800"></span>
+                    <span class="color-success-900"></span>
+                    <span class="color-fusion-50"></span>
+                    <span class="color-fusion-100"></span>
+                    <span class="color-fusion-200"></span>
+                    <span class="color-fusion-300"></span>
+                    <span class="color-fusion-400"></span>
+                    <span class="color-fusion-500"></span>
+                    <span class="color-fusion-600"></span>
+                    <span class="color-fusion-700"></span>
+                    <span class="color-fusion-800"></span>
+                    <span class="color-fusion-900"></span>
+                </p>
+                <!-- END Color profile -->
             </div>
-            <!--app user menu-->
-            <div class="dropdown">
-              <a href="#"
-                 data-toggle="dropdown"
-                 data-target="logoutList"
-                 class="d-flex align-items-center justify-content-center ml-2">
-                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                              alt="Dr. Codex Lantern">-->
-                <!--you can also add username next to the avatar with the codes below:-->
-                <div class="row m-0 justify-content-center userblock">
-                  <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
-                  <span id="usrName"
-                        class="text-truncate text-truncate-header hidden-xs-down"></span>
-                </div>
-              </a>
-              <div id="logoutList"
-                   class="dropdown-menu dropdown-menu-right dropdown-lg">
-                <a id="logout"
-                   href="javascript:;"
-                   class="dropdown-item fw-500 pt-3 pb-3">
-                  <span>登出</span>
-                </a>
-              </div>
-            </div>
-          </div>
-          <div class="ml-2 text-center">
-            <!-- <label class="mb-0 fs-1-2">
-              Diamond Controls<span class="fs-09 position-absolute"
-                >®</span
-              > </label
-            ><br /> -->
-            <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
-          </div>
-        </header>
-        <!-- END Page Header -->
-        <!-- BEGIN Page Content -->
-        <!-- the #js-page-content id is needed for some plugins to initialize -->
-        <!--@RenderBody()-->
-        <div id="app"></div>
-
-        <!-- this overlay is activated only when mobile menu is triggered -->
-        <div class="page-content-overlay"
-             data-action="toggle"
-             data-class="mobile-nav-on"></div>
-
-        <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
-          <div class="yt-navbar-content">
-            <ul id="sysMonBtnList"></ul>
-          </div>
         </div>
-        <!-- END Page Content -->
-        <!-- BEGIN Page Footer -->
-        <!--<footer class="page-footer" role="contentinfo">
-                  <div class="d-flex align-items-center flex-1 text-muted">
-                      <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
-                  </div>
-                  <div>
-                      <ul class="list-table m-0">
-                          <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
-                          <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
-                          <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
-                          <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
-                      </ul>
-                  </div>
-              </footer>-->
-        <!-- END Page Footer -->
-        <!-- BEGIN Shortcuts -->
-        <!-- END Shortcuts -->
-        <!-- BEGIN Color profile -->
-        <!-- this area is hidden and will not be seen on screens or screen readers -->
-        <!-- we use this only for CSS color refernce for JS stuff -->
-        <p id="js-color-profile" class="d-none">
-          <span class="color-primary-50"></span>
-          <span class="color-primary-100"></span>
-          <span class="color-primary-200"></span>
-          <span class="color-primary-300"></span>
-          <span class="color-primary-400"></span>
-          <span class="color-primary-500"></span>
-          <span class="color-primary-600"></span>
-          <span class="color-primary-700"></span>
-          <span class="color-primary-800"></span>
-          <span class="color-primary-900"></span>
-          <span class="color-info-50"></span>
-          <span class="color-info-100"></span>
-          <span class="color-info-200"></span>
-          <span class="color-info-300"></span>
-          <span class="color-info-400"></span>
-          <span class="color-info-500"></span>
-          <span class="color-info-600"></span>
-          <span class="color-info-700"></span>
-          <span class="color-info-800"></span>
-          <span class="color-info-900"></span>
-          <span class="color-danger-50"></span>
-          <span class="color-danger-100"></span>
-          <span class="color-danger-200"></span>
-          <span class="color-danger-300"></span>
-          <span class="color-danger-400"></span>
-          <span class="color-danger-500"></span>
-          <span class="color-danger-600"></span>
-          <span class="color-danger-700"></span>
-          <span class="color-danger-800"></span>
-          <span class="color-danger-900"></span>
-          <span class="color-warning-50"></span>
-          <span class="color-warning-100"></span>
-          <span class="color-warning-200"></span>
-          <span class="color-warning-300"></span>
-          <span class="color-warning-400"></span>
-          <span class="color-warning-500"></span>
-          <span class="color-warning-600"></span>
-          <span class="color-warning-700"></span>
-          <span class="color-warning-800"></span>
-          <span class="color-warning-900"></span>
-          <span class="color-success-50"></span>
-          <span class="color-success-100"></span>
-          <span class="color-success-200"></span>
-          <span class="color-success-300"></span>
-          <span class="color-success-400"></span>
-          <span class="color-success-500"></span>
-          <span class="color-success-600"></span>
-          <span class="color-success-700"></span>
-          <span class="color-success-800"></span>
-          <span class="color-success-900"></span>
-          <span class="color-fusion-50"></span>
-          <span class="color-fusion-100"></span>
-          <span class="color-fusion-200"></span>
-          <span class="color-fusion-300"></span>
-          <span class="color-fusion-400"></span>
-          <span class="color-fusion-500"></span>
-          <span class="color-fusion-600"></span>
-          <span class="color-fusion-700"></span>
-          <span class="color-fusion-800"></span>
-          <span class="color-fusion-900"></span>
-        </p>
-        <!-- END Color profile -->
-      </div>
     </div>
-  </div>
-  <!-- END Page Wrapper -->
-  <!-- BEGIN Messenger -->
-  <div class="modal fade js-modal-messenger modal-backdrop-transparent"
-       tabindex="-1"
-       role="dialog"
-       aria-hidden="true">
-    <div class="modal-dialog modal-dialog-right">
-      <div class="modal-content h-100">
-        <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
-          <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
-            <span class="mr-2">
-              <span class="rounded-circle profile-image d-block"
-                    style="
+    <!-- END Page Wrapper -->
+    <!-- BEGIN Messenger -->
+    <div class="modal fade js-modal-messenger modal-backdrop-transparent"
+         tabindex="-1"
+         role="dialog"
+         aria-hidden="true">
+        <div class="modal-dialog modal-dialog-right">
+            <div class="modal-content h-100">
+                <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
+                    <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
+                        <span class="mr-2">
+                            <span class="rounded-circle profile-image d-block"
+                                  style="
                     background-image: url('img/demo/avatars/avatar-d.png');
                     background-size: cover;
                   "></span>
-            </span>
-            <div class="info-card-text">
-              <a href="javascript:void(0);"
-                 class="fs-lg text-truncate text-truncate-lg text-white"
-                 data-toggle="dropdown"
-                 aria-expanded="false">
-                Tracey Chang
-                <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
-              </a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="#">Send Email</a>
-                <a class="dropdown-item" href="#">Create Appointment</a>
-                <a class="dropdown-item" href="#">Block User</a>
-              </div>
-              <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
-            </div>
-          </div>
-          <button type="button"
-                  class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
-                  data-dismiss="modal"
-                  aria-label="Close">
-            <span aria-hidden="true"><i class="fal fa-times"></i></span>
-          </button>
-        </div>
-        <div class="modal-body p-0 h-100 d-flex">
-          <!-- BEGIN msgr-list -->
-          <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
-            <div>
-              <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
-                <i class="fal fa-search"></i>
-              </div>
-              <input type="text"
-                     class="form-control bg-white"
-                     id="msgr_listfilter_input"
-                     placeholder="Filter contacts"
-                     aria-label="FriendSearch"
-                     data-listfilter="#js-msgr-listfilter" />
-            </div>
-            <div class="flex-1 h-100 custom-scroll">
-              <div class="w-100">
-                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="tracey chang online">
-                      <div class="d-table-cell align-middle status status-success status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                        </span>
+                        <div class="info-card-text">
+                            <a href="javascript:void(0);"
+                               class="fs-lg text-truncate text-truncate-lg text-white"
+                               data-toggle="dropdown"
+                               aria-expanded="false">
+                                Tracey Chang
+                                <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
+                            </a>
+                            <div class="dropdown-menu">
+                                <a class="dropdown-item" href="#">Send Email</a>
+                                <a class="dropdown-item" href="#">Create Appointment</a>
+                                <a class="dropdown-item" href="#">Block User</a>
+                            </div>
+                            <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
+                        </div>
+                    </div>
+                    <button type="button"
+                            class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
+                            data-dismiss="modal"
+                            aria-label="Close">
+                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                    </button>
+                </div>
+                <div class="modal-body p-0 h-100 d-flex">
+                    <!-- BEGIN msgr-list -->
+                    <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
+                        <div>
+                            <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
+                                <i class="fal fa-search"></i>
+                            </div>
+                            <input type="text"
+                                   class="form-control bg-white"
+                                   id="msgr_listfilter_input"
+                                   placeholder="Filter contacts"
+                                   aria-label="FriendSearch"
+                                   data-listfilter="#js-msgr-listfilter" />
+                        </div>
+                        <div class="flex-1 h-100 custom-scroll">
+                            <div class="w-100">
+                                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="tracey chang online">
+                                            <div class="d-table-cell align-middle status status-success status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-d.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Tracey Chang
-                          <small class="d-block font-italic text-success fs-xs">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="oliver kopyuv online">
-                      <div class="d-table-cell align-middle status status-success status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Tracey Chang
+                                                    <small class="d-block font-italic text-success fs-xs">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="oliver kopyuv online">
+                                            <div class="d-table-cell align-middle status status-success status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-b.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Oliver Kopyuv
-                          <small class="d-block font-italic text-success fs-xs">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="dr john cook phd away">
-                      <div class="d-table-cell align-middle status status-warning status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Oliver Kopyuv
+                                                    <small class="d-block font-italic text-success fs-xs">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="dr john cook phd away">
+                                            <div class="d-table-cell align-middle status status-warning status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-e.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Dr. John Cook PhD
-                          <small class="d-block font-italic fs-xs">
-                            Away
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney online">
-                      <div class="d-table-cell align-middle status status-success status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Dr. John Cook PhD
+                                                    <small class="d-block font-italic fs-xs">
+                                                        Away
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney online">
+                                            <div class="d-table-cell align-middle status status-success status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-g.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Ali Amdaney
-                          <small class="d-block font-italic fs-xs text-success">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="sarah mcbrook online">
-                      <div class="d-table-cell align-middle status status-success status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Ali Amdaney
+                                                    <small class="d-block font-italic fs-xs text-success">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="sarah mcbrook online">
+                                            <div class="d-table-cell align-middle status status-success status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-h.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          Sarah McBrook
-                          <small class="d-block font-italic fs-xs text-success">
-                            Online
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney offline">
-                      <div class="d-table-cell align-middle status status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    Sarah McBrook
+                                                    <small class="d-block font-italic fs-xs text-success">
+                                                        Online
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney offline">
+                                            <div class="d-table-cell align-middle status status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-a.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          oliver.kopyuv@gotbootstrap.com
-                          <small class="d-block font-italic fs-xs">
-                            Offline
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney busy">
-                      <div class="d-table-cell align-middle status status-danger status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    oliver.kopyuv@gotbootstrap.com
+                                                    <small class="d-block font-italic fs-xs">
+                                                        Offline
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney busy">
+                                            <div class="d-table-cell align-middle status status-danger status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-j.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          oliver.kopyuv@gotbootstrap.com
-                          <small class="d-block font-italic fs-xs text-danger">
-                            Busy
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney offline">
-                      <div class="d-table-cell align-middle status status-sm">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    oliver.kopyuv@gotbootstrap.com
+                                                    <small class="d-block font-italic fs-xs text-danger">
+                                                        Busy
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney offline">
+                                            <div class="d-table-cell align-middle status status-sm">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-c.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          oliver.kopyuv@gotbootstrap.com
-                          <small class="d-block font-italic fs-xs">
-                            Offline
-                          </small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#"
-                       class="d-table w-100 px-2 py-2 text-dark hover-white"
-                       data-filter-tags="ali amdaney inactive">
-                      <div class="d-table-cell align-middle">
-                        <span class="profile-image-md rounded-circle d-block"
-                              style="
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    oliver.kopyuv@gotbootstrap.com
+                                                    <small class="d-block font-italic fs-xs">
+                                                        Offline
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="#"
+                                           class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                           data-filter-tags="ali amdaney inactive">
+                                            <div class="d-table-cell align-middle">
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                      style="
                               background-image: url('img/demo/avatars/avatar-m.png');
                               background-size: cover;
                             "></span>
-                      </div>
-                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                        <div class="text-truncate text-truncate-md">
-                          +714651347790
-                          <small class="d-block font-italic fs-xs opacity-50">
-                            Missed Call
-                          </small>
+                                            </div>
+                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                                                <div class="text-truncate text-truncate-md">
+                                                    +714651347790
+                                                    <small class="d-block font-italic fs-xs opacity-50">
+                                                        Missed Call
+                                                    </small>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    </li>
+                                </ul>
+                                <div class="filter-message js-filter-message"></div>
+                            </div>
                         </div>
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-                <div class="filter-message js-filter-message"></div>
-              </div>
+                        <div>
+                            <a class="fs-xl d-flex align-items-center p-3">
+                                <i class="fal fa-cogs"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- END msgr-list -->
+                    <!-- BEGIN msgr -->
+                    <div class="msgr d-flex h-100 flex-column bg-white">
+                        <!-- BEGIN custom-scroll -->
+                        <div class="custom-scroll flex-1 h-100">
+                            <div id="chat_container" class="w-100 p-4">
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment">
+                                    <div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-sent">
+                                    <div class="chat-message">
+                                        <p>Hey Tracey, did you get my files?</p>
+                                    </div>
+                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                                        3:00 pm
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get">
+                                    <div class="chat-message">
+                                        <p>Hi</p>
+                                        <p>
+                                            Sorry going through a busy time in office. Yes I
+                                            analyzed the solution.
+                                        </p>
+                                        <p>
+                                            It will require some resource, which I could not manage.
+                                        </p>
+                                    </div>
+                                    <div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-sent chat-start">
+                                    <div class="chat-message">
+                                        <p>Okay</p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-sent chat-end">
+                                    <div class="chat-message">
+                                        <p>
+                                            Sending you some dough today, you can allocate the
+                                            resources to this project.
+                                        </p>
+                                    </div>
+                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                                        3:26 pm
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get chat-start">
+                                    <div class="chat-message">
+                                        <p>Perfect. Thanks a lot!</p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get">
+                                    <div class="chat-message">
+                                        <p>I will have them ready by tonight.</p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment -->
+                                <div class="chat-segment chat-segment-get chat-end">
+                                    <div class="chat-message">
+                                        <p>Cheers</p>
+                                    </div>
+                                </div>
+                                <!--  end .chat-segment -->
+                                <!-- start .chat-segment for timestamp -->
+                                <div class="chat-segment">
+                                    <div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
+                                </div>
+                                <!--  end .chat-segment for timestamp -->
+                            </div>
+                        </div>
+                        <!-- END custom-scroll  -->
+                        <!-- BEGIN msgr__chatinput -->
+                        <div class="d-flex flex-column">
+                            <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
+                                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
+                                    <div id="msgr_input"
+                                         contenteditable="true"
+                                         data-placeholder="Type your message here..."
+                                         class="height-10 form-content-editable"></div>
+                                </div>
+                            </div>
+                            <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
+                                <a href="javascript:void(0);"
+                                   class="btn btn-icon fs-xl width-1 mr-1"
+                                   data-toggle="tooltip"
+                                   data-original-title="More options"
+                                   data-placement="top">
+                                    <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
+                                </a>
+                                <a href="javascript:void(0);"
+                                   class="btn btn-icon fs-xl mr-1"
+                                   data-toggle="tooltip"
+                                   data-original-title="Attach files"
+                                   data-placement="top">
+                                    <i class="fal fa-paperclip color-fusion-300"></i>
+                                </a>
+                                <a href="javascript:void(0);"
+                                   class="btn btn-icon fs-xl mr-1"
+                                   data-toggle="tooltip"
+                                   data-original-title="Insert photo"
+                                   data-placement="top">
+                                    <i class="fal fa-camera color-fusion-300"></i>
+                                </a>
+                                <div class="ml-auto">
+                                    <a href="javascript:void(0);" class="btn btn-info">Send</a>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- END msgr__chatinput -->
+                    </div>
+                    <!-- END msgr -->
+                </div>
             </div>
-            <div>
-              <a class="fs-xl d-flex align-items-center p-3">
-                <i class="fal fa-cogs"></i>
-              </a>
-            </div>
-          </div>
-          <!-- END msgr-list -->
-          <!-- BEGIN msgr -->
-          <div class="msgr d-flex h-100 flex-column bg-white">
-            <!-- BEGIN custom-scroll -->
-            <div class="custom-scroll flex-1 h-100">
-              <div id="chat_container" class="w-100 p-4">
-                <!-- start .chat-segment -->
-                <div class="chat-segment">
-                  <div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-sent">
-                  <div class="chat-message">
-                    <p>Hey Tracey, did you get my files?</p>
-                  </div>
-                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
-                    3:00 pm
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get">
-                  <div class="chat-message">
-                    <p>Hi</p>
-                    <p>
-                      Sorry going through a busy time in office. Yes I
-                      analyzed the solution.
-                    </p>
-                    <p>
-                      It will require some resource, which I could not manage.
-                    </p>
-                  </div>
-                  <div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-sent chat-start">
-                  <div class="chat-message">
-                    <p>Okay</p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-sent chat-end">
-                  <div class="chat-message">
-                    <p>
-                      Sending you some dough today, you can allocate the
-                      resources to this project.
-                    </p>
-                  </div>
-                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
-                    3:26 pm
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get chat-start">
-                  <div class="chat-message">
-                    <p>Perfect. Thanks a lot!</p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get">
-                  <div class="chat-message">
-                    <p>I will have them ready by tonight.</p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment -->
-                <div class="chat-segment chat-segment-get chat-end">
-                  <div class="chat-message">
-                    <p>Cheers</p>
-                  </div>
-                </div>
-                <!--  end .chat-segment -->
-                <!-- start .chat-segment for timestamp -->
-                <div class="chat-segment">
-                  <div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
-                </div>
-                <!--  end .chat-segment for timestamp -->
-              </div>
-            </div>
-            <!-- END custom-scroll  -->
-            <!-- BEGIN msgr__chatinput -->
-            <div class="d-flex flex-column">
-              <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
-                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
-                  <div id="msgr_input"
-                       contenteditable="true"
-                       data-placeholder="Type your message here..."
-                       class="height-10 form-content-editable"></div>
-                </div>
-              </div>
-              <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
-                <a href="javascript:void(0);"
-                   class="btn btn-icon fs-xl width-1 mr-1"
-                   data-toggle="tooltip"
-                   data-original-title="More options"
-                   data-placement="top">
-                  <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
-                </a>
-                <a href="javascript:void(0);"
-                   class="btn btn-icon fs-xl mr-1"
-                   data-toggle="tooltip"
-                   data-original-title="Attach files"
-                   data-placement="top">
-                  <i class="fal fa-paperclip color-fusion-300"></i>
-                </a>
-                <a href="javascript:void(0);"
-                   class="btn btn-icon fs-xl mr-1"
-                   data-toggle="tooltip"
-                   data-original-title="Insert photo"
-                   data-placement="top">
-                  <i class="fal fa-camera color-fusion-300"></i>
-                </a>
-                <div class="ml-auto">
-                  <a href="javascript:void(0);" class="btn btn-info">Send</a>
-                </div>
-              </div>
-            </div>
-            <!-- END msgr__chatinput -->
-          </div>
-          <!-- END msgr -->
         </div>
-      </div>
     </div>
-  </div>
 
-  <div id="noticeBlock"
-       style="
+    <div id="noticeBlock"
+         style="
         position: fixed;
         top: 70px;
         right: 0px;
@@ -789,1332 +789,1335 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         height: 100%;
       "></div>
 
-  <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
-  <!-- END Messenger -->
-  <!-- BEGIN Page Settings -->
-  <!-- END Page Settings -->
-  <!-- base vendor bundle:
-       DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
-                  + pace.js (recommended)
-                  + jquery.js (core)
-                  + jquery-ui-cust.js (core)
-                  + popper.js (core)
-                  + bootstrap.js (core)
-                  + slimscroll.js (extension)
-                  + app.navigation.js (core)
-                  + ba-throttle-debounce.js (core)
-                  + waves.js (extension)
-                  + smartpanels.js (extension)
-                  + src/../jquery-snippets.js (core) -->
-  <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
-  <script src="lib/vendors.bundle.js"></script>
-  <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
-  <script src="lib/notifications/toastr/toastr.min.js"></script>
-  <script src="js/toast.js"></script>
-  <script src="lib/echarts.min.js"></script>
-  <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
-  <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
+    <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
+    <!-- END Messenger -->
+    <!-- BEGIN Page Settings -->
+    <!-- END Page Settings -->
+    <!-- base vendor bundle:
+         DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
+                    + pace.js (recommended)
+                    + jquery.js (core)
+                    + jquery-ui-cust.js (core)
+                    + popper.js (core)
+                    + bootstrap.js (core)
+                    + slimscroll.js (extension)
+                    + app.navigation.js (core)
+                    + ba-throttle-debounce.js (core)
+                    + waves.js (extension)
+                    + smartpanels.js (extension)
+                    + src/../jquery-snippets.js (core) -->
+    <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
+    <script src="lib/vendors.bundle.js"></script>
+    <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
+    <script src="lib/notifications/toastr/toastr.min.js"></script>
+    <script src="js/toast.js"></script>
+    <script src="lib/echarts.min.js"></script>
+    <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
+    <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
 
-  <!--Bajascript-->
-  <script src="js/bajascript/bscriptReq.js"></script>
-  <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
-  <script src="js/bajascript/require.js"></script>
+    <!--Bajascript-->
+    <script src="js/bajascript/bscriptReq.js"></script>
+    <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
+    <script src="js/bajascript/require.js"></script>
 
-  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
-  <script src="js/forge/forgemodel.js"></script>
-  <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
+    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
+    <script src="js/forge/forgemodel.js"></script>
+    <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
 
-  <script type="text/javascript">
-    define("niagaraSystemProperties", function () {
-      return {};
-    });
-  </script>
-  <script src="js/n4js/bajatest.js"></script>
-  <script src="js/n4js/electricmeterbaja.js"></script>
-  <script src="js/n4js/elevatorbaja.js"></script>
-  <script src="js/bajascript/require.config.js"></script>
-  <script src="js/FileSaver.js"></script>
-
-  <script>
-    /*$('#js-page-content').smartPanel();*/
-    var cookies = null;
-    var jwt = null;
-    var loadingTip = "";
-    var pageAct = {}; //記錄全頁面已選擇項目
-    var timeOuters = [];
-    pageAct.AreaTag = "";
-    if (location.href.indexOf("ord") != -1) {
-      location.href = "/file/index.html";
-    }
-    var lastPage = sessionStorage.getItem("lastPage");
-    // 執行初步 Loading
-    var loadEle = pageLoading();
-    var errRecTable = null,
-      opeRecTable = null;
-    var tolSubList = [];
-    var allDevices = [];
-    var tempSubTag = ["M10", "M12"];  // 溫度向小類
-
-    /**
-     * 頁面 Loading 建立
-     * */
-    function pageLoading(text = null) {
-      let background = $(`<div class="loading-bg"></div>`);
-      let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
-      $(background)[0]._aleObj = aleObj;
-      $("body").css("overflow", "hidden");
-      $("body .page-content-wrapper").append(background);
-      $(background).animate({ opacity: 1 }, 300);
-      return background;
-    }
-
-    try {
-      $(function () {
-        // 二次引用 jquery.js
-        // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
-        // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
-        // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
-        // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
-        require(["jquery"], loadedBasePack);
-      });
-
-      /**
-       * jquery.js 二次引用後 Callback，載入第三方套件
-       * */
-      function loadedBasePack() {
-        require([
-          "lib/bootstrap/bootstrap.bundle.min",
-          "lib/app.bundle",
-          "lib/app.menu",
-          "datatables.net.b4",
-          "n4js/alarmbaja",
-          "n4js/historybaja",
-          "n4js/accmanbaja",
-          "lib/statistics/flot/flot.bundle",
-          "lib/statistics/peity/peity.bundle",
-          "lib/jquery-validation/dist/jquery.validate",
-          /*"lib/jquery-validation/dist/additional-methods.min",*/ /* 會影響 messages_zh_TW 文字呈現 */
-          "lib/jquery-validation/dist/localization/messages_zh_TW",
-          "lib/jquery-ui/jquery-ui.min",
-          "lib/chart.js_4.1.2/chart.umd",
-          "lib/dropzone/dropzone-min",
-          "lib/jstree-master/jstree.min",
-          "lib/notifications/sweetalert2/sweetalert2.bundle",
-        ], loadedMasterPack);
-      }
-      /**
-       * 第三方套件引用後 Callback，載入額外套件
-       * */
-      function loadedMasterPack() {
-        require([
-          "yourteam/yourteam.utility.class",
-          "yourteam/yourteam.ajax.class",
-          "yourteam/yourteam.jquery.datatables",
-          "yourteam/plugins/yt-tooltip/yt-tooltip",
-          "yourteam/plugins/yt-tab/yt-tab",
-          "yourteam/plugins/yt-navbar/yt-navbar",
-          "yourteam/plugins/yt-notice/yt-notice",
-          "style",
-        ], function () {
-          require(["init", "site"], loadedJsPack);
+    <script type="text/javascript">
+        define("niagaraSystemProperties", function () {
+            return {};
         });
-      }
+    </script>
+    <script src="js/n4js/bajatest.js"></script>
+    <script src="js/n4js/electricmeterbaja.js"></script>
+    <script src="js/n4js/elevatorbaja.js"></script>
+    <script src="js/bajascript/require.config.js"></script>
+    <script src="js/FileSaver.js"></script>
 
-      /**
-       * 全數套件讀取完成 Callback
-       * */
-      function loadedJsPack() {
-        cookies = new YourTeam.Utility.Cookie();
-        jwt = cookies.get("JWT-Authorization");
-        pageAct.AreaTag = initAreaTag;
-        loadEvent();
+    <script>
+        /*$('#js-page-content').smartPanel();*/
+        var cookies = null;
+        var jwt = null;
+        var loadingTip = "";
+        var pageAct = {}; //記錄全頁面已選擇項目
+        var timeOuters = [];
+        pageAct.AreaTag = "";
+        if (location.href.indexOf("ord") != -1) {
+            location.href = "/file/index.html";
+        }
+        var lastPage = sessionStorage.getItem("lastPage");
+        // 執行初步 Loading
+        var loadEle = pageLoading();
+        var errRecTable = null,
+            opeRecTable = null;
+        var tolSubList = [];
+        var allDevices = [];
+        var tempSubTag = ["M10", "M12"];  // 溫度向小類
 
-        if (!jwt) {
-          if (location.href.indexOf("localhost:5966") != -1) {
-            location.href = "login.html";
-          }
-          myBaja = new MyBaja();
-          myBaja.setMyUserAccount(Login);
-        } else {
-          isValidLogin();
+        /**
+         * 頁面 Loading 建立
+         * */
+        function pageLoading(text = null) {
+            let background = $(`<div class="loading-bg"></div>`);
+            let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+            $(background)[0]._aleObj = aleObj;
+            $("body").css("overflow", "hidden");
+            $("body .page-content-wrapper").append(background);
+            $(background).animate({ opacity: 1 }, 300);
+            return background;
         }
 
-        $(loadEle).Loading("close");
-      }
+        try {
+            $(function () {
+                // 二次引用 jquery.js
+                // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
+                // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
+                // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
+                // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
+                require(["jquery"], loadedBasePack);
+            });
 
-      /**
-       * 登入驗證完成 Callback
-       * */
-      function isValidLogin() {
-        getUserInfo();
-        iniFroList();
-        showMainSys();
-        getBuiList();
-        getSysMonBtnList();
-        checkDevState();
-        loadNoticeConSta();
-
-        allDevices = getAllDevice();
-        if (lastPage) {
-          let lastPageAct = {};
-          if (isJSON(sessionStorage.getItem("pageAct"))) {
-            lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
-          }
-          if (
-            (lastPageAct.sysSubTag && lastPage == "systemMonitor") ||
-            lastPage == "sysElevator"
-            //  || lastPage == "sysSensor"
-          ) {
-            $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
-            $("#sysMonTopBtn").YTTab("set");
-          } else {
-            $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab(
-              "setAndClick"
-            );
-          }
-
-          /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
-        } else {
-          $("#app").load("_dashboard.html", loadCallback);
-        }
-
-        timeOutGetData();
-
-        function getBuiList() {
-          let url = baseApiUrl + "/api/Device/GetBuild";
-          ytAjax = new YourTeam.Ajax(
-            url,
-            null,
-            function (res) {
-              if (!res || res.code != "0000" || !res.data) {
-              } else {
-                let strHtml = ``;
-                $.each(res.data, (index, buiObj) => {
-                  strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
+            /**
+             * jquery.js 二次引用後 Callback，載入第三方套件
+             * */
+            function loadedBasePack() {
+                require([
+                    "lib/bootstrap/bootstrap.bundle.min",
+                    "lib/app.bundle",
+                    "lib/app.menu",
+                    "datatables.net.b4",
+                    "n4js/alarmbaja",
+                    "n4js/historybaja",
+                    "n4js/accmanbaja",
+                    "lib/statistics/flot/flot.bundle",
+                    "lib/statistics/peity/peity.bundle",
+                    "lib/jquery-validation/dist/jquery.validate",
+                    /*"lib/jquery-validation/dist/additional-methods.min",*/ /* 會影響 messages_zh_TW 文字呈現 */
+                    "lib/jquery-validation/dist/localization/messages_zh_TW",
+                    "lib/jquery-ui/jquery-ui.min",
+                    "lib/chart.js_4.1.2/chart.umd",
+                    "lib/dropzone/dropzone-min",
+                    "lib/jstree-master/jstree.min",
+                    "lib/notifications/sweetalert2/sweetalert2.bundle",
+                ], loadedMasterPack);
+            }
+            /**
+             * 第三方套件引用後 Callback，載入額外套件
+             * */
+            function loadedMasterPack() {
+                require([
+                    "yourteam/yourteam.utility.class",
+                    "yourteam/yourteam.ajax.class",
+                    "yourteam/yourteam.jquery.datatables",
+                    "yourteam/plugins/yt-tooltip/yt-tooltip",
+                    "yourteam/plugins/yt-tab/yt-tab",
+                    "yourteam/plugins/yt-navbar/yt-navbar",
+                    "yourteam/plugins/yt-notice/yt-notice",
+                    "style",
+                ], function () {
+                    require(["init", "site"], loadedJsPack);
                 });
-                $("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
-              }
-            },
-            null,
-            "POST"
-          ).send();
-        }
-
-        //lily test
-        function checkDevState() {
-          //TPE_B1_LT_L1
-          //main_system_tag: pageAct.sysMainTag,
-          //building_tag: pageAct.buiTag,
-          //floor_tag: pageAct.floTag,
-          let systemPath = "TPE_B1";
-          // if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
-          //     systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
-          // }
-          getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
-          // console.log("systemP: " + systemPath);
-          // console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
-          //callbackForCheckDevState("test");
-        }
-
-        function callbackForCheckDevState(result) {
-          // console.log("------ " + result);
-          // $.each(deviceList, (index, devObj) => {
-          //     if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
-          //         || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
-          //         var str = "";
-          //         $(`#${devObj.device_guid}`).empty();
-          //         str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
-          //         $(`#${devObj.device_guid}`).append(str);
-          //     }
-          // })
-          // console.log(result);
-        }
-      }
-
-      // page loaded callback
-      function loadCallback() {
-        initTabsByEle();
-        resetYTTooltip();
-        $("#sysMonTopBtn").YTNavbar("hide");
-      }
-
-      // 事件先行讀取
-      function loadEvent() {
-        onEvent("click", "[name=topFunBtn]", function () {
-          _ytTabInited = [];
-          let page = $(this).data("page");
-          if (!page) {
-            return;
-          }
-          if (
-            page != "systemMonitor" &&
-            page != "sysElevator"
-            //  && page != "sysSensor"
-          ) {
-            $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
-            pageAct.sysMainTag = null;
-            pageAct.sysSubTag = null;
-          } else {
-            setSysTagForPageAct(this);
-            $("#sysMonTopBtn").YTTab("set");
-            $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
-          }
-          // 取消當前所有 baja 訂閱
-          $.each(tolSubList, (idx, sub) => {
-            sub.unsubscribeAll();
-            sub.detach();
-          });
-          // 清空 baja 訂閱紀錄
-          tolSubList = [];
-          // 清空 loading 狀態
-          endPageLoading();
-
-          // $(loadEle).Loading("close");
-          $(".yt-alert").YTAlert().hide();
-          // 取得使用者資訊
-          getUserInfo();
-          // 存取現在頁面 (重整讀取紀錄用)
-          sessionStorage.setItem("lastPage", page);
-          sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
-          // 讀取子頁面
-          $("#app").load(`_${page}.html`, loadCallback);
-        });
-
-        onEvent("click", "#logout", function () {
-          localStorage.removeItem("JWT-Authorization");
-          location.href = "/logout";
-        });
-
-        onEvent("active:change", "#buiList", function (e, actEle) {
-          if (actEle) {
-            pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
-            pageAct.urn = $(actEle).data("urn");
-          }
-        });
-
-        onEvent("yt:tab:change", "#lightSch-tab", function () {
-          if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
-            setLightSchBlcok ? setLightSchBlcok(this) : "";
-            $("#lightSchModal").modal("show");
-          }
-        });
-
-        onEvent(
-          "yt:tab:prechange",
-          "[data-tabname=topFunBtn]",
-          function (e, arg) {
-            if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
-              arg.cancel = true;
-            }
-          }
-        );
-
-        onEvent("scroll", window, function () {
-          if ($(window).scrollTop() != 0) {
-            $("#noticeBlock").css("top", 0);
-          } else {
-            $("#noticeBlock").css("top", 70);
-          }
-        });
-
-        onEvent("click", "#testsysbtn", function () { });
-
-        //onEvent("click", "button[id^=noticeChkBtn]", function () {
-        //    $(this).parents(".toast").YTNotice("hide");
-        //})
-
-        onEvent("click", "button[id^=noticeChkBtn]", function () {
-              /**button[id^=bajaAckBtn] */ let uuid = $(this).data("uuid");
-          let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
-          let myBaja = new MyBaja();
-          myBaja.setMyUserAccount((data) => {
-            let sendData =
-              '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
-            $.post(
-              url,
-              sendData,
-              (rel) => {
-                console.log(rel);
-                $(this).parents(".toast").YTNotice("hide");
-              },
-              "text"
-            );
-          });
-        });
-
-        onEvent("click", "#toggleNoticeBtn", function () {
-          chaNoticeConSta();
-        });
-
-        $(window).on("timeout:3s", function () {
-          getSystemAlarmByBaja((data) => {
-            if (typeof getAlarmSub != "undefined" && getAlarmSub) {
-              getAlarmSub(data);
             }
 
-            alarmIconBlink();
-          });
-          getAlarm();
-        });
-      }
+            /**
+             * 全數套件讀取完成 Callback
+             * */
+            function loadedJsPack() {
+                cookies = new YourTeam.Utility.Cookie();
+                jwt = cookies.get("JWT-Authorization");
+                pageAct.AreaTag = initAreaTag;
+                loadEvent();
 
-      // 登入驗證
-      function Login(account) {
-        console.log(account);
-        /*if ($("#login-form").valid()) {*/
+                if (!jwt) {
+                    if (location.href.indexOf("localhost:5966") != -1) {
+                        location.href = "login.html";
+                    }
+                    myBaja = new MyBaja();
+                    myBaja.setMyUserAccount(Login);
+                } else {
+                    isValidLogin();
+                }
 
-        var url = baseApiUrl + "/api/Login/";
-        var send_data = {
-          account: account,
-          password: "rJ2T5Kkj",
-        };
-        if (location.href.indexOf("localhost:5966") != -1) {
-          location.href = "login.html";
-        }
-        $.ajax({
-          method: "post",
-          url: url,
-          data: JSON.stringify(send_data),
-          async: false,
-          contentType: "application/json; charset=UTF-8",
-          dataType: "json",
-          success: function (rel) {
-            if (rel.code != "0000") {
-              toast_error(rel.msg || common.SysErr);
-              return;
-            } else {
-              /*toast_ok(rel.msg);*/
-              cookies.create(
-                "JWT-Authorization",
-                rel.data.token,
-                12 * 60 * 60 * 1000
-              );
-              isValidLogin();
+                $(loadEle).Loading("close");
             }
-          },
-          error: function (xhr, textStatus, thrownError) {
-            alert(common.SysErr);
-          },
-        });
-      }
 
-      //==============================================================================
-      //                       ↓  系統監控 - 共用 Function ↓
-      //==============================================================================
+            /**
+             * 登入驗證完成 Callback
+             * */
+            function isValidLogin() {
+                getUserInfo();
+                iniFroList();
+                showMainSys();
+                getBuiList();
+                getSysMonBtnList();
+                checkDevState();
+                loadNoticeConSta();
 
-      // Card - 基本資料 Table
-      function drawInfoTabBlo(devGuid) {
-        let tabEle = $(
-          `<table class="table table-bordered table-striped text-center m-0">`
-        );
-        let tbody = tabEle.append("<tbody>");
-        let columnNames = ["設備編號", "設備名稱"];
+                allDevices = getAllDevice();
+                if (lastPage) {
+                    let lastPageAct = {};
+                    if (isJSON(sessionStorage.getItem("pageAct"))) {
+                        lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
+                    }
+                    if (
+                        (lastPageAct.sysSubTag && lastPage == "systemMonitor") ||
+                        lastPage == "sysElevator"
+                        //  || lastPage == "sysSensor"
+                    ) {
+                        $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
+                        $("#sysMonTopBtn").YTTab("set");
+                    } else {
+                        $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab(
+                            "setAndClick"
+                        );
+                    }
 
-        $.each(columnNames, (index, colName) => {
-          let tr = $("<tr></tr>");
-          let td = $("<td></td>");
-          td.text(colName);
-          tr.append(td);
-          tbody.append(tr);
-        });
+                    /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
+                } else {
+                    $("#app").load("_dashboard.html", loadCallback);
+                }
 
-        let url = baseApiUrl + "/api/Device/GetBaseDevice";
-        let sendData = {
-          device_guid: devGuid,
-        };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(
-          url,
-          objSendData,
-          function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-            } else {
-              tbody
-                .find("tr")
-                .eq(0)
-                .append(creEle("td", res.data.device_number));
-              tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
+                timeOutGetData();
+
+                function getBuiList() {
+                    let url = baseApiUrl + "/api/Device/GetBuild";
+                    ytAjax = new YourTeam.Ajax(
+                        url,
+                        null,
+                        function (res) {
+                            if (!res || res.code != "0000" || !res.data) {
+                            } else {
+                                let strHtml = ``;
+                                $.each(res.data, (index, buiObj) => {
+                                    strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
+                                });
+                                $("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
+                            }
+                        },
+                        null,
+                        "POST"
+                    ).send();
+                }
+
+                //lily test
+                function checkDevState() {
+                    //TPE_B1_LT_L1
+                    //main_system_tag: pageAct.sysMainTag,
+                    //building_tag: pageAct.buiTag,
+                    //floor_tag: pageAct.floTag,
+                    let systemPath = "TPE_B1";
+                    // if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
+                    //     systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
+                    // }
+                    getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
+                    // console.log("systemP: " + systemPath);
+                    // console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
+                    //callbackForCheckDevState("test");
+                }
+
+                function callbackForCheckDevState(result) {
+                    // console.log("------ " + result);
+                    // $.each(deviceList, (index, devObj) => {
+                    //     if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
+                    //         || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
+                    //         var str = "";
+                    //         $(`#${devObj.device_guid}`).empty();
+                    //         str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
+                    //         $(`#${devObj.device_guid}`).append(str);
+                    //     }
+                    // })
+                    // console.log(result);
+                }
             }
-          },
-          null,
-          "POST"
-        ).send();
 
-        return tabEle.prop("outerHTML");
-      }
+            // page loaded callback
+            function loadCallback() {
+                initTabsByEle();
+                resetYTTooltip();
+                $("#sysMonTopBtn").YTNavbar("hide");
+            }
 
-      // Card - 異常紀錄 block
-      function drawErrRecTabBlo() {
-        let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+            // 事件先行讀取
+            function loadEvent() {
+                onEvent("click", "[name=topFunBtn]", function () {
+                    _ytTabInited = [];
+                    let page = $(this).data("page");
+                    if (!page) {
+                        return;
+                    }
+                    if (
+                        page != "systemMonitor" &&
+                        page != "sysElevator"
+                        //  && page != "sysSensor"
+                    ) {
+                        $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
+                        pageAct.sysMainTag = null;
+                        pageAct.sysSubTag = null;
+                    } else {
+                        setSysTagForPageAct(this);
+                        $("#sysMonTopBtn").YTTab("set");
+                        $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
+                    }
+                    // 取消當前所有 baja 訂閱
+                    $.each(tolSubList, (idx, sub) => {
+                        sub.unsubscribeAll();
+                        sub.detach();
+                    });
+                    // 清空 baja 訂閱紀錄
+                    tolSubList = [];
+                    // 清空 loading 狀態
+                    endPageLoading();
 
-                                                                              </table>`;
-        return strHtml;
-      }
+                    // $(loadEle).Loading("close");
+                    $(".yt-alert").YTAlert().hide();
+                    // 取得使用者資訊
+                    getUserInfo();
+                    // 存取現在頁面 (重整讀取紀錄用)
+                    sessionStorage.setItem("lastPage", page);
+                    sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
+                    // 讀取子頁面
+                    $("#app").load(`_${page}.html`, loadCallback);
+                });
 
-      // Card - 運維紀錄 block
-      function drawOpeRecTabBlo() {
-        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+                onEvent("click", "#logout", function () {
+                    localStorage.removeItem("JWT-Authorization");
+                    location.href = "/logout";
+                });
 
-                                                                              </table>`;
-        return strHtml;
-      }
+                onEvent("active:change", "#buiList", function (e, actEle) {
+                    if (actEle) {
+                        pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
+                        pageAct.urn = $(actEle).data("urn");
+                    }
+                });
 
-      // Card 呈現初始化
-      function initPopover(
-        type = null,
-        extOption = {},
-        selector = "[name=devItem]"
-      ) {
-        if (type == null && pageAct.sysMainTag == "LT") {
-          type = "light";
-        }
+                onEvent("yt:tab:change", "#lightSch-tab", function () {
+                    if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
+                        setLightSchBlcok ? setLightSchBlcok(this) : "";
+                        $("#lightSchModal").modal("show");
+                    }
+                });
 
-        $(selector).each((index, ele) => {
-          let devNum = $(ele).data("number"); //設備編號
-          let devGuid = $(ele).data("id"); //guid
-          let devName = $(ele).data("name"); //full_name
-          let lightHtml =
-            type == "light"
-              ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>`
-              : "";
-
-          let option = {
-            html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
-                                          <div class="card-header p-3">
-
-                                              <div class="position-absolute mr-5" style="word-break: break-all;">
-                                                  <label class="m-0 mt-2">${devName}</label>
-                                              </div>
-                                              <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
-                                                  <button type="button" id="state-tab"
-                                                  data-toggle="tooltip" data-placement="bottom" title="即時監控"
-                                                  class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
-                                                  ${lightHtml}
-                                                  <button type="button" id="info-tab"
-                                                  data-toggle="tooltip" data-placement="bottom" title="基本資料"
-                                                  class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
-                                                  <button type="button"
-                                                  d data-toggle="tooltip" data-placement="bottom" title="告警資料"
-                                                  id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
-                                                  <button type="button"
-                                                  data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
-                                                  id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
-
-                                                  <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
-
-                                              </div>
-                                          </div>
-                                          <div class="card-body p-2 tab-content w-100">
-                                              <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
-                                                  ${drawStateTabBlo(devNum)}
-                                              </div>
-                                              <div id="info" data-tabname="cardTab" data-tabrole="child">
-
-                                              </div>
-                                              <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                                  ${drawErrRecTabBlo()}
-                                              </div>
-                                              <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                                  ${drawOpeRecTabBlo()}
-                                              </div>
-                                          </div>
-                                      </div>`,
-            group: "device",
-            // 在 _sysElevator.html 及 _sysMonAll.html 會用到
-            onShow: function (tooltipEle, oriEle) {
-              // 執行 pop 視窗上方 Tab 類別
-              new YT.Tab({ tabName: "cardTab" });
-              // 系統監控才會有 data-devobj 屬性
-              let devObj = $(oriEle).data("devobj");
-              // 讀取運維列表
-              loadOpeRecTable(devGuid);
-              // 讀取異常列表
-              loadErr($(oriEle).data("number"));
-              // 讀取設備基本資料列表
-              $(tooltipEle)
-                .find("#info")
-                .html(
-                  typeof drawInfoTabBlo != "undefined"
-                    ? drawInfoTabBlo(devGuid)
-                    : ""
+                onEvent(
+                    "yt:tab:prechange",
+                    "[data-tabname=topFunBtn]",
+                    function (e, arg) {
+                        if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
+                            arg.cancel = true;
+                        }
+                    }
                 );
-              // 聚焦熱點
-              const eleDbId = parseInt($(oriEle).data("dbId"));
-              if (eleDbId) {
-                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
-                  changeScaleForHotspot(eleDbId);
-                } else {
-                  controlFocusHotspot(eleDbId);
+
+                onEvent("scroll", window, function () {
+                    if ($(window).scrollTop() != 0) {
+                        $("#noticeBlock").css("top", 0);
+                    } else {
+                        $("#noticeBlock").css("top", 70);
+                    }
+                });
+
+                onEvent("click", "#testsysbtn", function () { });
+
+                //onEvent("click", "button[id^=noticeChkBtn]", function () {
+                //    $(this).parents(".toast").YTNotice("hide");
+                //})
+
+                onEvent("click", "button[id^=noticeChkBtn]", function () {
+                  /**button[id^=bajaAckBtn] */ let uuid = $(this).data("uuid");
+                    let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
+                    let myBaja = new MyBaja();
+                    myBaja.setMyUserAccount((data) => {
+                        let sendData =
+                            '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
+                        $.post(
+                            url,
+                            sendData,
+                            (rel) => {
+                                console.log(rel);
+                                $(this).parents(".toast").YTNotice("hide");
+                            },
+                            "text"
+                        );
+                    });
+                });
+
+                onEvent("click", "#toggleNoticeBtn", function () {
+                    chaNoticeConSta();
+                });
+
+                $(window).on("timeout:3s", function () {
+                    getSystemAlarmByBaja((data) => {
+                        if (typeof getAlarmSub != "undefined" && getAlarmSub) {
+                            getAlarmSub(data);
+                        }
+
+                        alarmIconBlink();
+                    });
+                    getAlarm();
+                });
+            }
+
+            // 登入驗證
+            function Login(account) {
+                console.log(account);
+                /*if ($("#login-form").valid()) {*/
+
+                var url = baseApiUrl + "/api/Login/";
+                var send_data = {
+                    account: account,
+                    password: "rJ2T5Kkj",
+                };
+                if (location.href.indexOf("localhost:5966") != -1) {
+                    location.href = "login.html";
                 }
-              }
-              // 3D 視角 ZOOM IN 聚焦
+                $.ajax({
+                    method: "post",
+                    url: url,
+                    data: JSON.stringify(send_data),
+                    async: false,
+                    contentType: "application/json; charset=UTF-8",
+                    dataType: "json",
+                    success: function (rel) {
+                        if (rel.code != "0000") {
+                            toast_error(rel.msg || common.SysErr);
+                            return;
+                        } else {
+                            /*toast_ok(rel.msg);*/
+                            cookies.create(
+                                "JWT-Authorization",
+                                rel.data.token,
+                                12 * 60 * 60 * 1000
+                            );
+                            isValidLogin();
+                        }
+                    },
+                    error: function (xhr, textStatus, thrownError) {
+                        alert(common.SysErr);
+                    },
+                });
+            }
 
-              if (devObj) {
-                console.log("devObj", devObj);
-                moveViewToDevice(devObj?.forge_dbid);
-              }
+            //==============================================================================
+            //                       ↓  系統監控 - 共用 Function ↓
+            //==============================================================================
 
-              // pop 視窗卡片可拖移功能初始化
-              $(tooltipEle).draggable({
-                cursor: "move",
-                handle: ".card-header", // 只能通过卡片的标题栏拖拽
-                containment: "document",
-                scroll: true,
-              });
-              // pop 視窗卡片可縮放功能初始化
-              // $(tooltipEle).resizable({
-              //     // resize: function (event, ui) {
-              //     //     let iframe = $(ui.element).find("iframe");
-              //     //     if (iframe.length != 0) {
-              //     //         if (ui.size.width != ui.originalSize.width) {
-              //     //             iframe.css("width", "100%");
-              //     //         } else if (ui.size.height != ui.originalSize.height) {
-              //     //             iframe.css("height", "100%");
-              //     //         }
-              //     //     }
-              //     //     let cardBodyHeight = $(ui.element).find(".card-body").css("height");
-              //     //     $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
+            // Card - 基本資料 Table
+            function drawInfoTabBlo(devGuid) {
+                let tabEle = $(
+                    `<table class="table table-bordered table-striped text-center m-0">`
+                );
+                let tbody = tabEle.append("<tbody>");
+                let columnNames = ["設備編號", "設備名稱"];
 
-              //     //     errRecTable.draw(false)
-              //     // },
-              //     // minWidth: 200,
-              //     // minHeight: 150,
-              // });
-              // 電梯管理 - Card table 更新
-              typeof subDeviceSetTable != "undefined"
-                ? subDeviceSetTable($(oriEle).data("number"))
-                : "";
-            },
-            onHide: function (tooltipEle, oriEle) {
-              const eleDbId = $(oriEle).data("dbId");
-              if (eleDbId) {
-                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
-                  changeScaleForHotspot(eleDbId, false);
-                } else {
-                  // 3D 熱點解除
-                  controlFocusHotspot(eleDbId, false);
+                $.each(columnNames, (index, colName) => {
+                    let tr = $("<tr></tr>");
+                    let td = $("<td></td>");
+                    td.text(colName);
+                    tr.append(td);
+                    tbody.append(tr);
+                });
+
+                let url = baseApiUrl + "/api/Device/GetBaseDevice";
+                let sendData = {
+                    device_guid: devGuid,
+                };
+                objSendData.Data = sendData;
+                ytAjax = new YourTeam.Ajax(
+                    url,
+                    objSendData,
+                    function (res) {
+                        if (!res || res.code != "0000" || !res.data) {
+                        } else {
+                            tbody
+                                .find("tr")
+                                .eq(0)
+                                .append(creEle("td", res.data.device_number));
+                            tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
+                        }
+                    },
+                    null,
+                    "POST"
+                ).send();
+
+                return tabEle.prop("outerHTML");
+            }
+
+            // Card - 異常紀錄 block
+            function drawErrRecTabBlo() {
+                let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                                                                                  </table>`;
+                return strHtml;
+            }
+
+            // Card - 運維紀錄 block
+            function drawOpeRecTabBlo() {
+                let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                                                                                  </table>`;
+                return strHtml;
+            }
+
+            // Card 呈現初始化
+            function initPopover(
+                type = null,
+                extOption = {},
+                selector = "[name=devItem]"
+            ) {
+                if (type == null && pageAct.sysMainTag == "LT") {
+                    type = "light";
                 }
-              }
-              // sysMonFloor Echart 解除 focus
-              typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
-            },
-          };
 
-          $.extend(option, extOption);
+                $(selector).each((index, ele) => {
+                    let devNum = $(ele).data("number"); //設備編號
+                    let devGuid = $(ele).data("id"); //guid
+                    let devName = $(ele).data("name"); //full_name
+                    let lightHtml =
+                        type == "light"
+                            ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>`
+                            : "";
 
-          $(ele).YTTooltip(option);
-        });
-      }
+                    let option = {
+                        html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
+                                              <div class="card-header p-3">
 
-      // 卡片設備名稱點擊事件
-      function devItemNameEvent() {
-        onEvent("click", "[name=devItemName]", function () {
-          let devNum = $(this).data("number");
-          let devObj = $(`[name=devItem][data-number=${devNum}]`).data(
-            "devobj"
-          );
-          moveViewToDevice(devObj.forge_dbid);
-        });
-      }
+                                                  <div class="position-absolute mr-5" style="word-break: break-all;">
+                                                      <label class="m-0 mt-2">${devName}</label>
+                                                  </div>
+                                                  <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                                      <button type="button" id="state-tab"
+                                                      data-toggle="tooltip" data-placement="bottom" title="即時監控"
+                                                      class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
+                                                      ${lightHtml}
+                                                      <button type="button" id="info-tab"
+                                                      data-toggle="tooltip" data-placement="bottom" title="基本資料"
+                                                      class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
+                                                      <button type="button"
+                                                      d data-toggle="tooltip" data-placement="bottom" title="告警資料"
+                                                      id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
+                                                      <button type="button"
+                                                      data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
+                                                      id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
 
-      // Card - 運維紀錄 Table
-      function loadOpeRecTable(devGuid) {
-        if (opeRecTable) {
-          opeRecTable.destroy();
-        }
-        let url =
-          baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
-        let tag = "#opeRecTable";
+                                                      <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
 
-        let column_defs = [
-          { targets: [0], width: "8%", sortable: true },
-          { targets: [1], width: "8%", sortable: true },
-          { targets: [2], width: "7%", sortable: true },
-          { targets: [3], width: "7%", sortable: true },
-        ];
+                                                  </div>
+                                              </div>
+                                              <div class="card-body p-2 tab-content w-100">
+                                                  <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
+                                                      ${drawStateTabBlo(devNum)}
+                                                  </div>
+                                                  <div id="info" data-tabname="cardTab" data-tabrole="child">
 
-        let columns = [
-          {
-            title: "類型",
-            data: "work_type_name",
-          },
-          {
-            title: "項目",
-            data: "fix_do",
-          },
-          {
-            title: "處理人員",
-            data: "work_person_name",
-          },
-          {
-            title: "發生/完成時間",
-            data: "finishTime",
-            render: function (data, type, row) {
-              return row.createdAt + "<br>" + data;
-            },
-          },
-        ];
+                                                  </div>
+                                                  <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                                      ${drawErrRecTabBlo()}
+                                                  </div>
+                                                  <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                                      ${drawOpeRecTabBlo()}
+                                                  </div>
+                                              </div>
+                                          </div>`,
+                        group: "device",
+                        // 在 _sysElevator.html 及 _sysMonAll.html 會用到
+                        onShow: function (tooltipEle, oriEle) {
+                            // 執行 pop 視窗上方 Tab 類別
+                            new YT.Tab({ tabName: "cardTab" });
+                            // 系統監控才會有 data-devobj 屬性
+                            let devObj = $(oriEle).data("devobj");
+                            // 讀取運維列表
+                            loadOpeRecTable(devGuid);
+                            // 讀取異常列表
+                            loadErr($(oriEle).data("number"));
+                            // 讀取設備基本資料列表
+                            $(tooltipEle)
+                                .find("#info")
+                                .html(
+                                    typeof drawInfoTabBlo != "undefined"
+                                        ? drawInfoTabBlo(devGuid)
+                                        : ""
+                                );
+                            // 聚焦熱點
+                            const eleDbId = parseInt($(oriEle).data("dbId"));
+                            if (eleDbId) {
+                                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                                    changeScaleForHotspot(eleDbId);
+                                } else {
+                                    controlFocusHotspot(eleDbId);
+                                }
+                            }
+                            // 3D 視角 ZOOM IN 聚焦
 
-        opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
-          url,
-          tag,
-          null,
-          columns,
-          column_defs,
-          null,
-          null,
-          null,
-          null,
-          null,
-          null,
-          "<'scrolledTable'tpi>"
-        );
-      }
+                            if (devObj) {
+                                console.log("devObj", devObj);
+                                moveViewToDevice(devObj?.forge_dbid);
+                            }
 
-      function loadLightSchTable(devGuid) {
-        /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
-        let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
-        let tag = "#lightSchTable";
+                            // pop 視窗卡片可拖移功能初始化
+                            $(tooltipEle).draggable({
+                                cursor: "move",
+                                handle: ".card-header", // 只能通过卡片的标题栏拖拽
+                                containment: "document",
+                                scroll: true,
+                            });
+                            // pop 視窗卡片可縮放功能初始化
+                            // $(tooltipEle).resizable({
+                            //     // resize: function (event, ui) {
+                            //     //     let iframe = $(ui.element).find("iframe");
+                            //     //     if (iframe.length != 0) {
+                            //     //         if (ui.size.width != ui.originalSize.width) {
+                            //     //             iframe.css("width", "100%");
+                            //     //         } else if (ui.size.height != ui.originalSize.height) {
+                            //     //             iframe.css("height", "100%");
+                            //     //         }
+                            //     //     }
+                            //     //     let cardBodyHeight = $(ui.element).find(".card-body").css("height");
+                            //     //     $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)
 
-        let column_defs = [
-          { targets: [0], width: "14%", sortable: true },
-          { targets: [1], width: "14%", sortable: true },
-          { targets: [2], width: "14%", sortable: true },
-          { targets: [3], width: "14%", sortable: true },
-          { targets: [4], width: "14%", sortable: true },
-          { targets: [5], width: "14%", sortable: true },
-          { targets: [6], width: "16%", sortable: true },
-        ];
-
-        let columns = [
-          {
-            title: "序號",
-            data: null,
-            render: function (data, type, row, meta) {
-              return meta.row + 1;
-            },
-          },
-          {
-            title: "排程名稱",
-            data: "sch_name",
-          },
-          {
-            title: "設備數量",
-            data: "dev_cnt",
-          },
-          {
-            title: "排程設定",
-            data: "sch_set",
-          },
-          {
-            title: "動作",
-            data: "action",
-          },
-          {
-            title: "狀態",
-            data: "status",
-          },
-          {
-            title: "功能",
-            data: "sch_id",
-            render: function (data, type, row) {
-              let btnDiv = creDiv(["row", "m-0", "justify-content-center"], {
-                style: "gap:10px",
-              });
-              let icon = creI(["fas", "fa-pencil-alt"]);
-              btnDiv.append(
-                creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, [
-                  "btn",
-                  "btn-success",
-                ])
-              );
-              btnDiv.append(
-                creBtn(
-                  "修改",
-                  "lightSchTabEdiBtn" + data,
-                  null,
-                  ["btn", "btn-danger"],
-                  { toggle: "modal", target: "#delModal" }
-                ).append(icon)
-              );
-              return btnDiv.outerHtml();
-            },
-          },
-        ];
-
-        let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(
-          url,
-          tag,
-          null,
-          columns,
-          column_defs,
-          null,
-          null,
-          null,
-          null,
-          null,
-          null,
-          "tpi"
-        );
-      }
-
-      function controlFocusHotspot(dbId, open = true) {
-        pageAct.sysSubTag !== "L1" &&
-          pageAct.sysSubTag !== "M12" &&
-          console.log("dbId", dbId);
-        pageAct.sysSubTag !== "L1" &&
-          pageAct.sysSubTag !== "M12" &&
-          changeColorForHotspot(dbId, open ? "focus" : null);
-        changeScaleForHotspot(dbId, open);
-      }
-
-      // Baja 取得異常紀錄
-      function loadErr(allPath) {
-        if (allPath != undefined && allPath != null) {
-          getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
-        } else {
-          console.log("no device");
-        }
-      }
-
-      // Card - 異常紀錄 Table
-      function callbackForErr(result) {
-        // console.log("@@@",result)
-        if (errRecTable) {
-          errRecTable.destroy();
-        }
-
-        let tag = "#errRecTable";
-        let datas;
-
-        let column_defs = [
-          { targets: [0], width: "15%", sortable: true },
-          { targets: [1], width: "25%", sortable: true },
-          { targets: [2], width: "25%", sortable: true },
-          { targets: [3], width: "35%", sortable: true },
-        ];
-
-        let columns = [
-          {
-            title: "異常ID",
-            data: "uuid",
-          },
-          {
-            title: "異常原因",
-            data: "msgText",
-          },
-          {
-            title: "ACK確認",
-            data: "ackState",
-          },
-          {
-            title: "發生/完成時間",
-            data: "normalTime",
-            // "render": function (data, type, row) {
-            //     return row.timestamp + "<br>" + data;
-            // },
-          },
-        ];
-
-        let json_object = JSON.parse(result);
-        datas = json_object["data"];
-        errRecTable = new YourTeam.JqDataTables.getTableByStatic(
-          tag,
-          datas,
-          columns,
-          column_defs,
-          null,
-          null,
-          null,
-          null,
-          "<'scrolledTable'tpi>"
-        );
-      }
-
-      //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
-      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(".device-wrap").addClass("light-flash");
-          } else {
-            $(ele).parents(".device-wrap").removeClass("light-flash");
-          }
-        });
-      }
-
-      // 設置昇位圖上方 燈號
-      function setTopLight() {
-        let sysSubObj = pageAct.sysSubObj;
-        let strHtml = ``;
-        if (
-          sysSubObj.device_normal_point_name != null &&
-          sysSubObj.device_normal_point_value != null
-        ) {
-          strHtml += ` <div class="row m-0 align-items-center">
-                              <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
-                              <label class="mb-0">${sysSubObj.device_normal_text}</label>
-                          </div>`;
-        }
-        if (
-          sysSubObj.device_close_point_name != null &&
-          sysSubObj.device_close_point_value != null
-        ) {
-          strHtml += ` <div class="row m-0 align-items-center">
-                                      <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
-                                      <label class="mb-0">${sysSubObj.device_close_text}</label>
-                              </div>`;
-        }
-        if (
-          sysSubObj.device_error_point_name != null &&
-          sysSubObj.device_error_point_value != null
-        ) {
-          strHtml += ` <div class="row m-0 align-items-center">
-                              <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
-                              <label class="mb-0">${sysSubObj.device_error_text}</label>
-                          </div>`;
-        }
-
-        return strHtml;
-      }
-
-      function crePosPopover(position, obj) {
-        let _position = {};
-        _position.tpLeft = position[0];
-        _position.tpTop = position[1];
-        _position.tpOffHeight = 24;
-        let parentEle = creDiv();
-        parentEle.append(
-          `<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`
-        );
-        parentEle.data("id", obj.device_guid);
-        parentEle.data("number", obj.device_number);
-        parentEle.data("dbId", obj._dbId);
-        parentEle.data("name", obj.full_name || obj.device_node_full_name);
-        console.log("crePosPopover", parentEle.data());
-        initPopover(null, _position, parentEle);
-
-        return parentEle;
-      }
-
-      // 設置 Forge 3D 溫度條
-      function setTopHeatBar() {
-        let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
-        return strHtml;
-      }
-
-      //==============================================================================
-      //                       ↑  系統監控 - 共用 Function ↑
-      //==============================================================================
-    } catch (e) {
-      $(loadEle).Loading("close");
-    }
-
-    function setSysTagForPageAct(obj) {
-      pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
-      pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
-      pageAct.sysSubName = $(obj).data("subSysObj").full_name;
-      pageAct.sysSubObj = $(obj).data("subSysObj");
-      getDevItem();
-    }
-
-    function getDevItem() {
-      let url = baseApiUrl + "/api/Device/GetDeviceItem";
-
-      objSendData.Data = {
-        main_system_tag: pageAct.sysMainTag,
-        sub_system_tag: pageAct.sysSubTag,
-      };
-      ytAjax = new YourTeam.Ajax(
-        url,
-        objSendData,
-        function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-          } else {
-            pageAct.devItems = res.data;
-          }
-        },
-        null,
-        "POST"
-      ).send();
-    }
-
-    function alarmIconBlink(data) {
-      if (data?.data.length != 0) {
-        $(".page-header [name=topFunBtn][data-page=alert] i").addClass(
-          "blink"
-        );
-      } else {
-        $(".page-header [name=topFunBtn][data-page=alert] i").removeClass(
-          "blink"
-        );
-      }
-    }
-
-    function timeOutGetData() {
-      let timeOut3s = null,
-        timeOut5m = null;
-      let events = $._data($(window)[0], "events");
-
-      if (Object.keys(events).findIndex((x) => x == "timeout:3s") != -1) {
-        timeOut3s = setInterval(() => {
-          $(window).trigger("timeout:3s");
-        }, 3000);
-      }
-
-      if (Object.keys(events).findIndex((x) => x == "timeout:5m") != -1) {
-        timeOut5m = setInterval(() => {
-          $(window).trigger("timeout:5m");
-        }, 5 * 60 * 1000);
-      }
-
-      timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
-    }
-
-    function showMainSys() {
-      let url = baseApiUrl + "/Utility/isShowMaiSys";
-
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          if (!res || res.code != "0000") {
-          } else {
-            pageAct.mainStatus = res.data;
-          }
-        },
-        null,
-        "POST"
-      ).send();
-    }
-
-    function startPageLoading() {
-      if (!loadingTip) {
-        loadingTip = YT.Alert.Tip("資料讀取中...", "show");
-      }
-    }
-
-    function endPageLoading() {
-      if (loadingTip != null) {
-        $(loadingTip.ele).YTAlert().hide();
-        loadingTip = null;
-      }
-    }
-
-    function iniFroList() {
-      url = baseApiUrl + "/api/GetUsrFroList";
-      let hasMonitor = false;
-
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-          } else {
-            let strHtml = `<div class="btn-group mx-4">
-                                                                          <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
-                                                                              <i class="fal fa-home fa-2x"></i><br>首頁
-                                                                          </a>
-                                                                          <!--<div class="dropdown-menu">
-                                                                              <button class="dropdown-item" type="button">Action</button>
-                                                                              <button class="dropdown-item" type="button">Another action</button>
-                                                                              <button class="dropdown-item" type="button">Something else here</button>
-                                                                          </div>-->
-                                                                      </div>`;
-
-            $.each(res.data, function (i, v) {
-              if (v.authCode == "PF1") {
-                strHtml += `<div class="btn-group mx-4" >
-                                                                              <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
-                                                                                  <i class="fal fa-tv fa-2x"></i><br>${v.subName}
-                                                                              </a>
-
-                                                                          </div>`;
-
-                hasMonitor = true;
-              } else {
-                let icon =
-                  v.authCode == "PF2"
-                    ? "fa-chart-pie"
-                    : v.authCode == "PF3"
-                      ? "fa-chart-area"
-                      : v.authCode == "PF4"
-                        ? "fa-chart-line"
-                        : v.authCode == "PF5"
-                          ? "fa-bell"
-                          : v.authCode == "PF6"
-                            ? "fa-server"
-                            : v.authCode == "PF7"
-                              ? "fa-image"
-                              : v.authCode == "PF8"
-                                ? "fa-user"
+                            //     //     errRecTable.draw(false)
+                            //     // },
+                            //     // minWidth: 200,
+                            //     // minHeight: 150,
+                            // });
+                            // 電梯管理 - Card table 更新
+                            typeof subDeviceSetTable != "undefined"
+                                ? subDeviceSetTable($(oriEle).data("number"))
                                 : "";
-                strHtml += `<div class="btn-group mx-4">
-                                                                              <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
-                                                                                 data-page="${v.showView}">
-                                                                                  <i class="fal ${icon} fa-2x"></i><br>${v.subName}
-                                                                              </a>
-                                                                          </div>`;
-              }
-            });
+                        },
+                        onHide: function (tooltipEle, oriEle) {
+                            const eleDbId = $(oriEle).data("dbId");
+                            if (eleDbId) {
+                                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                                    changeScaleForHotspot(eleDbId, false);
+                                } else {
+                                    // 3D 熱點解除
+                                    controlFocusHotspot(eleDbId, false);
+                                }
+                            }
+                            // sysMonFloor Echart 解除 focus
+                            typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
+                        },
+                    };
 
-            $("#froLisPage").html(strHtml);
-            $("#sysMonTopBtn").YTNavbar("init");
-          }
-        },
-        null,
-        "POST"
-      ).send();
-    }
+                    $.extend(option, extOption);
 
-    function getSysMonBtnList() {
-      let url = baseApiUrl + "/api/Device/GetMainSub";
-      let sendData = {
-        building_tag: pageAct.buiTag,
-      };
-      objSendData.Data = sendData;
-      ytAjax = new YourTeam.Ajax(
-        url,
-        objSendData,
-        function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-          } else {
-            $("#sysMonBtnList").html("");
+                    $(ele).YTTooltip(option);
+                });
+            }
 
-            $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
-              $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
-                let page = "systemMonitor";
-                if (subSysObj.sub_system_tag == "EL") {
-                  page = "sysElevator";
+            // 卡片設備名稱點擊事件
+            function devItemNameEvent() {
+                onEvent("click", "[name=devItemName]", function () {
+                    let devNum = $(this).data("number");
+                    let devObj = $(`[name=devItem][data-number=${devNum}]`).data(
+                        "devobj"
+                    );
+                    moveViewToDevice(devObj.forge_dbid);
+                });
+            }
+
+            // Card - 運維紀錄 Table
+            function loadOpeRecTable(devGuid) {
+                if (opeRecTable) {
+                    opeRecTable.destroy();
                 }
-                // console.log(subSysObj.sub_system_tag)
-                // if (subSysObj.sub_system_tag == "M12") {
-                //     page = "sysSensor";
-                // }
+                let url =
+                    baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
+                let tag = "#opeRecTable";
 
-                let li = creEle("li");
-                let a = creA(
-                  subSysObj.full_name,
-                  { href: "javascript:;" },
-                  [],
-                  `subSysBtn${subSysObj.sub_system_tag}`,
-                  { page: page, tabname: "systemMonitor" },
-                  "topFunBtn"
+                let column_defs = [
+                    { targets: [0], width: "8%", sortable: true },
+                    { targets: [1], width: "8%", sortable: true },
+                    { targets: [2], width: "7%", sortable: true },
+                    { targets: [3], width: "7%", sortable: true },
+                ];
+
+                let columns = [
+                    {
+                        title: "類型",
+                        data: "work_type_name",
+                    },
+                    {
+                        title: "項目",
+                        data: "fix_do",
+                    },
+                    {
+                        title: "處理人員",
+                        data: "work_person_name",
+                    },
+                    {
+                        title: "發生/完成時間",
+                        data: "finishTime",
+                        render: function (data, type, row) {
+                            return row.createdAt + "<br>" + data;
+                        },
+                    },
+                ];
+
+                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(
+                    url,
+                    tag,
+                    null,
+                    columns,
+                    column_defs,
+                    null,
+                    null,
+                    null,
+                    null,
+                    null,
+                    null,
+                    "<'scrolledTable'tpi>"
                 );
-                li.append(a);
-                a.data("subSysObj", subSysObj);
-                subSysObj.main_system_tag = mainSysObj.main_system_tag;
-                $("#sysMonBtnList").append(li);
-              });
-            });
-          }
-        },
-        null,
-        "POST"
-      ).send();
-    }
+            }
 
-    function getLogo() {
-      url = baseApiUrl + "/api/GetLogo";
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          $("[name=webLogo]").attr("src", baseImgUrl + "/img/" + res.data);
-        },
-        null,
-        "POST"
-      ).send();
-    }
+            function loadLightSchTable(devGuid) {
+                /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
+                let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
+                let tag = "#lightSchTable";
 
-    function getUserInfo() {
-      let url = baseApiUrl + varApiUrl + "getUserFull";
+                let column_defs = [
+                    { targets: [0], width: "14%", sortable: true },
+                    { targets: [1], width: "14%", sortable: true },
+                    { targets: [2], width: "14%", sortable: true },
+                    { targets: [3], width: "14%", sortable: true },
+                    { targets: [4], width: "14%", sortable: true },
+                    { targets: [5], width: "14%", sortable: true },
+                    { targets: [6], width: "16%", sortable: true },
+                ];
 
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          if (!res || res.code != "0000") {
-          } else {
-            pageAct.userInfo = res.data;
-            let user = res.data;
-            $("#usrName").text(user.full_name);
-          }
-        },
-        null,
-        "POST"
-      ).send();
-    }
+                let columns = [
+                    {
+                        title: "序號",
+                        data: null,
+                        render: function (data, type, row, meta) {
+                            return meta.row + 1;
+                        },
+                    },
+                    {
+                        title: "排程名稱",
+                        data: "sch_name",
+                    },
+                    {
+                        title: "設備數量",
+                        data: "dev_cnt",
+                    },
+                    {
+                        title: "排程設定",
+                        data: "sch_set",
+                    },
+                    {
+                        title: "動作",
+                        data: "action",
+                    },
+                    {
+                        title: "狀態",
+                        data: "status",
+                    },
+                    {
+                        title: "功能",
+                        data: "sch_id",
+                        render: function (data, type, row) {
+                            let btnDiv = creDiv(["row", "m-0", "justify-content-center"], {
+                                style: "gap:10px",
+                            });
+                            let icon = creI(["fas", "fa-pencil-alt"]);
+                            btnDiv.append(
+                                creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, [
+                                    "btn",
+                                    "btn-success",
+                                ])
+                            );
+                            btnDiv.append(
+                                creBtn(
+                                    "修改",
+                                    "lightSchTabEdiBtn" + data,
+                                    null,
+                                    ["btn", "btn-danger"],
+                                    { toggle: "modal", target: "#delModal" }
+                                ).append(icon)
+                            );
+                            return btnDiv.outerHtml();
+                        },
+                    },
+                ];
 
-    var noticeOptArr = [];
-    function getAlarmFromDB() {
-      let url = baseApiUrl + "/api/AlarmCard";
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-          } else {
-            let datas = res.data;
-          }
-        },
-        null,
-        "POST",
-        true
-      ).send();
-    }
+                let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(
+                    url,
+                    tag,
+                    null,
+                    columns,
+                    column_defs,
+                    null,
+                    null,
+                    null,
+                    null,
+                    null,
+                    null,
+                    "tpi"
+                );
+            }
 
-    function getAlarm() {
-      let now = new Date().getTime();
-      let noticeObj = [
-        { title: "異常編號", data: "uuid" },
-        { title: "異常等級", data: "priority" },
-        { title: "異常類別", data: "alarmClass" },
-        { title: "設備名稱", data: "full_name" },
-        { title: "異常訊息", data: "msgText" },
-      ];
-      // 向 niagara 取得告警資料
-      getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
-        let datas = bajaDatas.data;
-        let titleHtml = `異常通知`;
-        let notices = [];
-        // 遍歷每個告警資料
-        $.each(datas ?? [], (idx, data) => {
-          if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
-            // 針對該告警對象的設備，從 allDevices 找出設備名稱
-            datas[idx].full_name = allDevices.filter(
-              (x) => x.device_number == data.devicePath
-            )[0]?.full_name;
+            function controlFocusHotspot(dbId, open = true) {
+                changeScaleForHotspot(dbId, open);
+            }
 
-            let div1 = creDiv(["col-12"]);
-            let button = creBtn(
-              "確認",
-              "noticeChkBtn",
-              null,
-              ["btn btn-sm btn-secondary ml-auto col-4"],
-              { uuid: data.uuid }
-            );
-            let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
-            btnDiv.append(button);
-            // 繪製 每行告警資訊
-            noticeObj.forEach((notice) => {
-              let div2 = creDiv(["row", "m-0"]);
-              let span1 = creSpan(notice.title + "：", ["m-0"]);
-              if (notice.data === "uuid") {
-                data[notice.data] = data[notice.data].split("-")[0];
-              }
-              span1.append(creSpan(data[notice.data]));
-              div2.append(span1);
-              div1.append(div2);
-            });
+            // Baja 取得異常紀錄
+            function loadErr(allPath) {
+                if (allPath != undefined && allPath != null) {
+                    getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
+                } else {
+                    console.log("no device");
+                }
+            }
 
-            div1.append(btnDiv);
-            // 拚湊 YTNotice 通知套件所需參數
-            let main = {
-              title: titleHtml,
-              content: div1.outerHtml(),
-              type: "warning",
-              id: data.uuid,
-              hasCloseBtn: true,
-              timeText: displayDate(data.timestamp),
+            // Card - 異常紀錄 Table
+            function callbackForErr(result) {
+                // console.log("@@@",result)
+                if (errRecTable) {
+                    errRecTable.destroy();
+                }
+
+                let tag = "#errRecTable";
+                let datas;
+
+                let column_defs = [
+                    { targets: [0], width: "15%", sortable: true },
+                    { targets: [1], width: "25%", sortable: true },
+                    { targets: [2], width: "25%", sortable: true },
+                    { targets: [3], width: "35%", sortable: true },
+                ];
+
+                let columns = [
+                    {
+                        title: "異常ID",
+                        data: "uuid",
+                    },
+                    {
+                        title: "異常原因",
+                        data: "msgText",
+                    },
+                    {
+                        title: "ACK確認",
+                        data: "ackState",
+                    },
+                    {
+                        title: "發生/完成時間",
+                        data: "normalTime",
+                        // "render": function (data, type, row) {
+                        //     return row.timestamp + "<br>" + data;
+                        // },
+                    },
+                ];
+
+                let json_object = JSON.parse(result);
+                datas = json_object["data"];
+                errRecTable = new YourTeam.JqDataTables.getTableByStatic(
+                    tag,
+                    datas,
+                    columns,
+                    column_defs,
+                    null,
+                    null,
+                    null,
+                    null,
+                    "<'scrolledTable'tpi>"
+                );
+            }
+            //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
+            function setLightColor() {
+                $("[data-light-type]").each((index, ele) => {
+                    let type = $(ele).data("light-type");
+                    let errType = $(ele).data("light-error-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;
+                    }
+
+                    if (errType === "error") {
+                        color =
+                            pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+                        isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
+                    }
+
+                    $(ele).css("background-color", color);
+                    //是否閃爍
+                    if (isFlashing) {
+                        $(ele).parents(".device-wrap").addClass("light-flash");
+                    } else {
+                        $(ele).parents(".device-wrap").removeClass("light-flash");
+                    }
+                });
+            }
+
+            // 設置昇位圖上方 燈號
+            function setTopLight() {
+                let sysSubObj = pageAct.sysSubObj;
+                let strHtml = ``;
+                if (
+                    sysSubObj.device_normal_point_name != null &&
+                    sysSubObj.device_normal_point_value != null
+                ) {
+                    strHtml += ` <div class="row m-0 align-items-center">
+                                  <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
+                                  <label class="mb-0">${sysSubObj.device_normal_text}</label>
+                              </div>`;
+                }
+                if (
+                    sysSubObj.device_close_point_name != null &&
+                    sysSubObj.device_close_point_value != null
+                ) {
+                    strHtml += ` <div class="row m-0 align-items-center">
+                                          <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
+                                          <label class="mb-0">${sysSubObj.device_close_text}</label>
+                                  </div>`;
+                }
+                if (
+                    sysSubObj.device_error_point_name != null &&
+                    sysSubObj.device_error_point_value != null
+                ) {
+                    strHtml += ` <div class="row m-0 align-items-center">
+                                  <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
+                                  <label class="mb-0">${sysSubObj.device_error_text}</label>
+                              </div>`;
+                }
+
+                return strHtml;
+            }
+
+            function crePosPopover(position, obj) {
+                let _position = {};
+                _position.tpLeft = position[0];
+                _position.tpTop = position[1];
+                _position.tpOffHeight = 24;
+                let parentEle = creDiv();
+                parentEle.append(
+                    `<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`
+                );
+                parentEle.data("id", obj.device_guid);
+                parentEle.data("number", obj.device_number);
+                parentEle.data("dbId", obj._dbId);
+                parentEle.data("name", obj.full_name || obj.device_node_full_name);
+                console.log("crePosPopover", parentEle.data());
+                initPopover(null, _position, parentEle);
+
+                return parentEle;
+            }
+
+            // 設置 Forge 3D 溫度條
+            function setTopHeatBar() {
+                let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
+                return strHtml;
+            }
+
+            //==============================================================================
+            //                       ↑  系統監控 - 共用 Function ↑
+            //==============================================================================
+        } catch (e) {
+            $(loadEle).Loading("close");
+        }
+
+        function setSysTagForPageAct(obj) {
+            pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
+            pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
+            pageAct.sysSubName = $(obj).data("subSysObj").full_name;
+            pageAct.sysSubObj = $(obj).data("subSysObj");
+            console.log(" pageAct.sysSubObj", pageAct.sysSubObj)
+            getDevItem();
+        }
+
+        function getDevItem() {
+            let url = baseApiUrl + "/api/Device/GetDeviceItem";
+
+            objSendData.Data = {
+                main_system_tag: pageAct.sysMainTag,
+                sub_system_tag: pageAct.sysSubTag,
             };
-            noticeOptArr.push(main);
-            notices.push(main);
-          }
-        });
-        if (notices.length != 0) {
-          $("#noticeBlock").YTNotice(
-            "add_many",
-            notices.oSort("id").reverse()
-          );
+            ytAjax = new YourTeam.Ajax(
+                url,
+                objSendData,
+                function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+                    } else {
+                        pageAct.devItems = res.data;
+                    }
+                },
+                null,
+                "POST"
+            ).send();
         }
-      });
-    }
 
-    function getAllDevice() {
-      let url = baseApiUrl + "/api/Device/GetAllDevice";
-      let result = [];
-
-      ytAjax = new YourTeam.Ajax(
-        url,
-        null,
-        function (res) {
-          if (!res || res.code != "0000" || !res.data) {
-          } else {
-            result = res.data;
-          }
-        },
-        null,
-        "POST"
-      ).send();
-      return result;
-    }
-
-    function loadNoticeConSta() {
-      let noticeStatus = localStorage.getItem("noticeStatus");
-      chaNoticeConSta(noticeStatus ?? "show");
-    }
-
-    function chaNoticeConSta(type = null) {
-      let showText = $("#toggleNoticeBtn #noticeConText").data("show");
-      let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
-      let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
-      $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
-      if (type != null) {
-        if (type == "hide") {
-          setHide();
-        } else if (type == "show") {
-          setShow();
+        function alarmIconBlink(data) {
+            if (data?.data.length != 0) {
+                $(".page-header [name=topFunBtn][data-page=alert] i").addClass(
+                    "blink"
+                );
+            } else {
+                $(".page-header [name=topFunBtn][data-page=alert] i").removeClass(
+                    "blink"
+                );
+            }
         }
-      } else {
-        if ($("#noticeBlock").is(":visible")) {
-          setHide();
-        } else if (!$("#noticeBlock").is(":visible")) {
-          setShow();
+
+        function timeOutGetData() {
+            let timeOut3s = null,
+                timeOut5m = null;
+            let events = $._data($(window)[0], "events");
+
+            if (Object.keys(events).findIndex((x) => x == "timeout:3s") != -1) {
+                timeOut3s = setInterval(() => {
+                    $(window).trigger("timeout:3s");
+                }, 3000);
+            }
+
+            if (Object.keys(events).findIndex((x) => x == "timeout:5m") != -1) {
+                timeOut5m = setInterval(() => {
+                    $(window).trigger("timeout:5m");
+                }, 5 * 60 * 1000);
+            }
+
+            timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
         }
-      }
 
-      function setShow() {
-        $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-        $("#noticeConIcon").addClass(iconArr[0]);
-        $("#noticeBlock").show();
-        $("#noticeBlock").animate({ opacity: 1 }, 200);
-        localStorage.setItem("noticeStatus", "show");
-      }
+        function showMainSys() {
+            let url = baseApiUrl + "/Utility/isShowMaiSys";
 
-      function setHide() {
-        $("#toggleNoticeBtn").find("#noticeConText").text(showText);
-        $("#noticeConIcon").addClass(iconArr[1]);
-        $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
-          $("#noticeBlock").hide();
-        });
-        localStorage.setItem("noticeStatus", "hide");
-      }
-    }
-  </script>
+            ytAjax = new YourTeam.Ajax(
+                url,
+                null,
+                function (res) {
+                    if (!res || res.code != "0000") {
+                    } else {
+                        pageAct.mainStatus = res.data;
+                    }
+                },
+                null,
+                "POST"
+            ).send();
+        }
+
+        function startPageLoading() {
+            if (!loadingTip) {
+                loadingTip = YT.Alert.Tip("資料讀取中...", "show");
+            }
+        }
+
+        function endPageLoading() {
+            if (loadingTip != null) {
+                $(loadingTip.ele).YTAlert().hide();
+                loadingTip = null;
+            }
+        }
+
+        function iniFroList() {
+            url = baseApiUrl + "/api/GetUsrFroList";
+            let hasMonitor = false;
+
+            ytAjax = new YourTeam.Ajax(
+                url,
+                null,
+                function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+                    } else {
+                        let strHtml = `<div class="btn-group mx-4">
+                                                                              <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
+                                                                                  <i class="fal fa-home fa-2x"></i><br>首頁
+                                                                              </a>
+                                                                              <!--<div class="dropdown-menu">
+                                                                                  <button class="dropdown-item" type="button">Action</button>
+                                                                                  <button class="dropdown-item" type="button">Another action</button>
+                                                                                  <button class="dropdown-item" type="button">Something else here</button>
+                                                                              </div>-->
+                                                                          </div>`;
+
+                        $.each(res.data, function (i, v) {
+                            if (v.authCode == "PF1") {
+                                strHtml += `<div class="btn-group mx-4" >
+                                                                                  <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
+                                                                                      <i class="fal fa-tv fa-2x"></i><br>${v.subName}
+                                                                                  </a>
+
+                                                                              </div>`;
+
+                                hasMonitor = true;
+                            } else {
+                                let icon =
+                                    v.authCode == "PF2"
+                                        ? "fa-chart-pie"
+                                        : v.authCode == "PF3"
+                                            ? "fa-chart-area"
+                                            : v.authCode == "PF4"
+                                                ? "fa-chart-line"
+                                                : v.authCode == "PF5"
+                                                    ? "fa-bell"
+                                                    : v.authCode == "PF6"
+                                                        ? "fa-server"
+                                                        : v.authCode == "PF7"
+                                                            ? "fa-image"
+                                                            : v.authCode == "PF8"
+                                                                ? "fa-user"
+                                                                : "";
+                                strHtml += `<div class="btn-group mx-4">
+                                                                                  <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                                                     data-page="${v.showView}">
+                                                                                      <i class="fal ${icon} fa-2x"></i><br>${v.subName}
+                                                                                  </a>
+                                                                              </div>`;
+                            }
+                        });
+
+                        $("#froLisPage").html(strHtml);
+                        $("#sysMonTopBtn").YTNavbar("init");
+                    }
+                },
+                null,
+                "POST"
+            ).send();
+        }
+
+        function getSysMonBtnList() {
+            let url = baseApiUrl + "/api/Device/GetMainSub";
+            let sendData = {
+                building_tag: pageAct.buiTag,
+            };
+            objSendData.Data = sendData;
+            ytAjax = new YourTeam.Ajax(
+                url,
+                objSendData,
+                function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+                    } else {
+                        $("#sysMonBtnList").html("");
+
+                        $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
+                            $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
+                                let page = "systemMonitor";
+                                if (subSysObj.sub_system_tag == "EL") {
+                                    page = "sysElevator";
+                                }
+                                // console.log(subSysObj.sub_system_tag)
+                                // if (subSysObj.sub_system_tag == "M12") {
+                                //     page = "sysSensor";
+                                // }
+
+                                let li = creEle("li");
+                                let a = creA(
+                                    subSysObj.full_name,
+                                    { href: "javascript:;" },
+                                    [],
+                                    `subSysBtn${subSysObj.sub_system_tag}`,
+                                    { page: page, tabname: "systemMonitor" },
+                                    "topFunBtn"
+                                );
+                                li.append(a);
+                                a.data("subSysObj", subSysObj);
+                                subSysObj.main_system_tag = mainSysObj.main_system_tag;
+                                $("#sysMonBtnList").append(li);
+                            });
+                        });
+                    }
+                },
+                null,
+                "POST"
+            ).send();
+        }
+
+        function getLogo() {
+            url = baseApiUrl + "/api/GetLogo";
+            ytAjax = new YourTeam.Ajax(
+                url,
+                null,
+                function (res) {
+                    $("[name=webLogo]").attr("src", baseImgUrl + "/img/" + res.data);
+                },
+                null,
+                "POST"
+            ).send();
+        }
+
+        function getUserInfo() {
+            let url = baseApiUrl + varApiUrl + "getUserFull";
+
+            ytAjax = new YourTeam.Ajax(
+                url,
+                null,
+                function (res) {
+                    if (!res || res.code != "0000") {
+                    } else {
+                        pageAct.userInfo = res.data;
+                        let user = res.data;
+                        $("#usrName").text(user.full_name);
+                    }
+                },
+                null,
+                "POST"
+            ).send();
+        }
+
+        var noticeOptArr = [];
+        function getAlarmFromDB() {
+            let url = baseApiUrl + "/api/AlarmCard";
+            ytAjax = new YourTeam.Ajax(
+                url,
+                null,
+                function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+                    } else {
+                        let datas = res.data;
+                    }
+                },
+                null,
+                "POST",
+                true
+            ).send();
+        }
+
+        function getAlarm() {
+            let now = new Date().getTime();
+            let noticeObj = [
+                { title: "異常編號", data: "uuid" },
+                { title: "異常等級", data: "priority" },
+                { title: "異常類別", data: "alarmClass" },
+                { title: "設備名稱", data: "full_name" },
+                { title: "異常訊息", data: "msgText" },
+            ];
+            // 向 niagara 取得告警資料
+            getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
+                let datas = bajaDatas.data;
+                let titleHtml = `異常通知`;
+                let notices = [];
+                // 遍歷每個告警資料
+                $.each(datas ?? [], (idx, data) => {
+                    if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
+                        // 針對該告警對象的設備，從 allDevices 找出設備名稱
+                        datas[idx].full_name = allDevices.filter(
+                            (x) => x.device_number == data.devicePath
+                        )[0]?.full_name;
+
+                        let div1 = creDiv(["col-12"]);
+                        let button = creBtn(
+                            "確認",
+                            "noticeChkBtn",
+                            null,
+                            ["btn btn-sm btn-secondary ml-auto col-4"],
+                            { uuid: data.uuid }
+                        );
+                        let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
+                        btnDiv.append(button);
+                        // 繪製 每行告警資訊
+                        noticeObj.forEach((notice) => {
+                            let div2 = creDiv(["row", "m-0"]);
+                            let span1 = creSpan(notice.title + "：", ["m-0"]);
+                            if (notice.data === "uuid") {
+                                data[notice.data] = data[notice.data].split("-")[0];
+                            }
+                            span1.append(creSpan(data[notice.data]));
+                            div2.append(span1);
+                            div1.append(div2);
+                        });
+
+                        div1.append(btnDiv);
+                        // 拚湊 YTNotice 通知套件所需參數
+                        let main = {
+                            title: titleHtml,
+                            content: div1.outerHtml(),
+                            type: "warning",
+                            id: data.uuid,
+                            hasCloseBtn: true,
+                            timeText: displayDate(data.timestamp),
+                        };
+                        noticeOptArr.push(main);
+                        notices.push(main);
+                    }
+                });
+                if (notices.length != 0) {
+                    $("#noticeBlock").YTNotice(
+                        "add_many",
+                        notices.oSort("id").reverse()
+                    );
+                }
+            });
+        }
+
+        function getAllDevice() {
+            let url = baseApiUrl + "/api/Device/GetAllDevice";
+            let result = [];
+
+            ytAjax = new YourTeam.Ajax(
+                url,
+                null,
+                function (res) {
+                    if (!res || res.code != "0000" || !res.data) {
+                    } else {
+                        result = res.data;
+                    }
+                },
+                null,
+                "POST"
+            ).send();
+            return result;
+        }
+
+        function loadNoticeConSta() {
+            let noticeStatus = localStorage.getItem("noticeStatus");
+            chaNoticeConSta(noticeStatus ?? "show");
+        }
+
+        function chaNoticeConSta(type = null) {
+            let showText = $("#toggleNoticeBtn #noticeConText").data("show");
+            let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
+            let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
+            $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
+            if (type != null) {
+                if (type == "hide") {
+                    setHide();
+                } else if (type == "show") {
+                    setShow();
+                }
+            } else {
+                if ($("#noticeBlock").is(":visible")) {
+                    setHide();
+                } else if (!$("#noticeBlock").is(":visible")) {
+                    setShow();
+                }
+            }
+
+            function setShow() {
+                $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
+                $("#noticeConIcon").addClass(iconArr[0]);
+                $("#noticeBlock").show();
+                $("#noticeBlock").animate({ opacity: 1 }, 200);
+                localStorage.setItem("noticeStatus", "show");
+            }
+
+            function setHide() {
+                $("#toggleNoticeBtn").find("#noticeConText").text(showText);
+                $("#noticeConIcon").addClass(iconArr[1]);
+                $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
+                    $("#noticeBlock").hide();
+                });
+                localStorage.setItem("noticeStatus", "hide");
+            }
+        }
+    </script>
 </body>
 <!-- END Body -->
 </html>
diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js
index dc5fb0c..1188a7e 100644
--- a/Frontend/js/forge/forgemodel.js
+++ b/Frontend/js/forge/forgemodel.js
@@ -922,9 +922,9 @@ async function addHotPoint(data) {
         return;
     } else {
         spriteColor = new THREE.Color(0xffffff);
-        spriteIcon = "/file/img/forge/hotspot.svg";
+        spriteIcon = "/file/img/forge/sensor_circle.svg";
         if (location.href.indexOf("localhost:5966") != -1) {
-            spriteIcon = "/img/forge/hotspot.svg";
+            spriteIcon = "/img/forge/sensor_circle.svg";
         }
     }
 
@@ -973,7 +973,7 @@ async function addHotPoint(data) {
                 // console.log(`Sprite clicked: ${event.dbId}`);
 
                 for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
-                    !alarmDbIdList.some((dbId) => dbId == i) &&
+                    !alarmDbIdList.some(({ spriteDbid }) => spriteDbid == i) &&
                         pageAct.sysSubTag !== "L1" &&
                         changeColorForHotspot(i);
                     changeScaleForHotspot(i, true);
@@ -990,7 +990,7 @@ async function addHotPoint(data) {
                 }
                 $(selector).trigger("autodesk:click:sprite", { event, myData });
             } else {
-                !alarmDbIdList.some((dbId) => dbId == i) &&
+                !alarmDbIdList.some(({ spriteDbid }) => spriteDbid == event.dbId) &&
                     pageAct.sysSubTag !== "L1" &&
                     changeColorForHotspot(event.dbId, null);
                 changeScaleForHotspot(event.dbId, false);
@@ -1038,25 +1038,47 @@ async function addHotPoint(data) {
     //}
 }
 
+//hex -> rgbsensor_circle
+function hexToRgb(hex) {
+    return (
+        "rgb(" +
+        parseInt("0x" + hex.slice(1, 3)) +
+        "," +
+        parseInt("0x" + hex.slice(3, 5)) +
+        "," +
+        parseInt("0x" + hex.slice(5, 7)) +
+        ")"
+    );
+}
+
 // 熱點 更換顏色
-async function changeColorForHotspot(dbId, type = null, lightOn = false) {
+async function changeColorForHotspot(dbId, type = null, OnOff = false) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     let spriteColorFocus = new THREE.Color(0xffffff);
-    if (pageAct.sysSubTag == "L1") {
-        spriteColorFocus = lightOn
-            ? new THREE.Color(0xffd524)
-            : new THREE.Color(0x40525e);
-        if (lightOn) {
-            console.log(dbId);
-        }
-    } else if (type == "focus" && pageAct.sysSubTag !== "M12") {
+
+    spriteColorFocus = OnOff
+        ? pageAct.sysSubObj.device_normal_color
+            ? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_normal_color))
+            : new THREE.Color(0xffffff)
+        : pageAct.sysSubObj.device_close_color
+            ? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_close_color))
+            : new THREE.Color(0xffffff);
+
+    if (type == "focus") {
         spriteColorFocus = new THREE.Color(0x00ffe1);
     } else if (type == "error") {
-        spriteColorFocus = new THREE.Color(0xff0000);
+        spriteColorFocus = new THREE.Color(
+            hexToRgb(pageAct.sysSubObj.device_error_color)
+        );
+        spriteErrIcon = baseForgeApiUrl + "/file/img/forge/sensor_circle.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteErrIcon = baseForgeApiUrl + "/img/forge/sensor_circle.svg";
+        }
     }
     const viewablesToUpdate = dbId;
     dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
         return {
+            url: "/file/img/forge/sensor_circle.svg",
             color: spriteColorFocus,
         };
     });
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index a554c0c..0ebdde4 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -1,21 +1,21 @@
 $(function () {
-  $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
-    setDropdownItem(value);
-  });
+    $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
+        setDropdownItem(value);
+    });
 });
 
 /**
  * fn 定義 | 手動初始化 Bootstrap dropdown select
  */
 $.fn.droSetItem = function () {
-  setDropdownItem(this);
-  return this;
+    setDropdownItem(this);
+    return this;
 };
 /**
  * fn 定義 | 輸出含原元素 html
  */
 $.fn.outerHtml = function () {
-  return $(this).prop("outerHTML");
+    return $(this).prop("outerHTML");
 };
 
 /**
@@ -24,63 +24,63 @@ $.fn.outerHtml = function () {
  * @param {any} text - 右下角 Alert 文字
  */
 $.fn.Loading = function (type = "close", text) {
-  let ele = this;
-  let aleObj = $(this)[0]._aleObj;
-  let showStatus = $(ele).data("loading-show-status");
+    let ele = this;
+    let aleObj = $(this)[0]._aleObj;
+    let showStatus = $(ele).data("loading-show-status");
 
-  function closeLoading() {
-    $(ele).data("loading-show-status", "close");
-    $("body").css("overflow", "auto");
-    $(aleObj.ele).YTAlert().hide();
-    $(ele).animate({ opacity: 0 }, 300, () => {
-      if ($(ele).data("loading-show-status") == "close") {
-        $(ele).hide();
-      }
-    });
-  }
-  function showLoading() {
-    $(ele).data("loading-show-status", "show");
-    $("body").css("overflow", "hidden");
-    let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
-    $(ele)[0]._aleObj = aleObj;
-    $(ele).show();
-    $(ele).animate({ opacity: 1 }, 300);
+    function closeLoading() {
+        $(ele).data("loading-show-status", "close");
+        $("body").css("overflow", "auto");
+        $(aleObj.ele).YTAlert().hide();
+        $(ele).animate({ opacity: 0 }, 300, () => {
+            if ($(ele).data("loading-show-status") == "close") {
+                $(ele).hide();
+            }
+        });
+    }
+    function showLoading() {
+        $(ele).data("loading-show-status", "show");
+        $("body").css("overflow", "hidden");
+        let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+        $(ele)[0]._aleObj = aleObj;
+        $(ele).show();
+        $(ele).animate({ opacity: 1 }, 300);
 
-    $(aleObj.ele).YTAlert().text(text);
-  }
-  if (type == "close") {
-    closeLoading();
-  } else if (type == "exceed") {
-    $(aleObj.ele).YTAlert().text(text);
-  } else if (type == "start") {
-    showLoading();
-  }
+        $(aleObj.ele).YTAlert().text(text);
+    }
+    if (type == "close") {
+        closeLoading();
+    } else if (type == "exceed") {
+        $(aleObj.ele).YTAlert().text(text);
+    } else if (type == "start") {
+        showLoading();
+    }
 
-  return $(this);
+    return $(this);
 };
 
 $.fn.YTAlert = function () {
-  let th = { element: this };
-  th.hide = function (delay = 0) {
-    let obj = this;
-    setTimeout(function () {
-      $(obj.element).fadeOut(300);
-      alertIdArray.splice(
-        $.inArray($(obj.element).prop("id"), alertIdArray),
-        1
-      );
-      setTimeout(function () {
-        $(obj.element).remove();
-      }, 1000);
-    }, delay);
-  };
+    let th = { element: this };
+    th.hide = function (delay = 0) {
+        let obj = this;
+        setTimeout(function () {
+            $(obj.element).fadeOut(300);
+            alertIdArray.splice(
+                $.inArray($(obj.element).prop("id"), alertIdArray),
+                1
+            );
+            setTimeout(function () {
+                $(obj.element).remove();
+            }, 1000);
+        }, delay);
+    };
 
-  th.text = function (text) {
-    let obj = this;
-    let id = $(obj.element).prop("id").split("tip-alert-")[1];
-    $(`#alert-text-${id}`).text(text);
-  };
-  return th;
+    th.text = function (text) {
+        let obj = this;
+        let id = $(obj.element).prop("id").split("tip-alert-")[1];
+        $(`#alert-text-${id}`).text(text);
+    };
+    return th;
 };
 
 /**
@@ -88,30 +88,30 @@ $.fn.YTAlert = function () {
  * @param {any} menuEle - .dropdown-menu element
  */
 function setDropdownItem(menuEle) {
-  if ($(menuEle).find(".dropdown-item.active").length == 0) {
-    $(menuEle).find(".dropdown-item").first().addClass("active");
-  }
-
-  let actText = $(menuEle).find(".dropdown-item.active").first().text();
-  let actEleId = $(menuEle).prop("id");
-  $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
-
-  /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
-  $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
-
-  //點選選項 add active class
-  onEvent(
-    "click",
-    ".dropdown-menu.dropdown-select-menu .dropdown-item",
-    function () {
-      $(this)
-        .parent(".dropdown-menu.dropdown-select-menu")
-        .find(".dropdown-item")
-        .removeClass("active");
-      $(this).addClass("active");
-      setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
+    if ($(menuEle).find(".dropdown-item.active").length == 0) {
+        $(menuEle).find(".dropdown-item").first().addClass("active");
     }
-  );
+
+    let actText = $(menuEle).find(".dropdown-item.active").first().text();
+    let actEleId = $(menuEle).prop("id");
+    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
+
+    /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
+    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
+
+    //點選選項 add active class
+    onEvent(
+        "click",
+        ".dropdown-menu.dropdown-select-menu .dropdown-item",
+        function () {
+            $(this)
+                .parent(".dropdown-menu.dropdown-select-menu")
+                .find(".dropdown-item")
+                .removeClass("active");
+            $(this).addClass("active");
+            setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
+        }
+    );
 }
 
 /**
@@ -119,8 +119,8 @@ function setDropdownItem(menuEle) {
  * @param {any} obj
  */
 function defDev(obj) {
-  let defSrc = "img/defdev.png";
-  obj.src = defSrc;
+    let defSrc = "img/defdev.png";
+    obj.src = defSrc;
 }
 
 /**
@@ -129,10 +129,10 @@ function defDev(obj) {
  * @param {any} sendData
  */
 function dtAjaxResetSendData(table, sendData) {
-  table.context[0].ajax.data = function (d) {
-    d = sendData;
-    return JSON.stringify(d);
-  };
+    table.context[0].ajax.data = function (d) {
+        d = sendData;
+        return JSON.stringify(d);
+    };
 }
 
 /**
@@ -145,505 +145,505 @@ function dtAjaxResetSendData(table, sendData) {
  * @param {any} attr
  */
 function eleBuild(
-  text = null,
-  id = null,
-  name = null,
-  cls = [],
-  data = {},
-  attr = {}
+    text = null,
+    id = null,
+    name = null,
+    cls = [],
+    data = {},
+    attr = {}
 ) {
-  (cls = cls ?? []), (data = data ?? {}), (attr = attr ?? {});
-  id = id ? `id="${id}"` : "";
-  name = name ? `name="${name}"` : "";
-  cls = cls.length != 0 ? `class="${cls.join(" ")}"` : "";
-  data =
-    data.length != 0
-      ? `${Object.keys(data)
-        .map((x) => `data-${x}="${data[x]}"`)
-        .join(" ")}`
-      : "";
-  attr = attr
-    ? `${Object.keys(attr)
-      .map((x) => `${x}="${attr[x]}"`)
-      .join(" ")}`
-    : "";
-  let attrArr = [],
-    attrText = "";
-  attrArr = [id, name, cls, data, attr];
-  attrText = attrArr.filter((x) => x != "").join(" ");
-  text = text === null ? "" : text;
-  return { attrText: attrText, text: text };
+    (cls = cls ?? []), (data = data ?? {}), (attr = attr ?? {});
+    id = id ? `id="${id}"` : "";
+    name = name ? `name="${name}"` : "";
+    cls = cls.length != 0 ? `class="${cls.join(" ")}"` : "";
+    data =
+        data.length != 0
+            ? `${Object.keys(data)
+                .map((x) => `data-${x}="${data[x]}"`)
+                .join(" ")}`
+            : "";
+    attr = attr
+        ? `${Object.keys(attr)
+            .map((x) => `${x}="${attr[x]}"`)
+            .join(" ")}`
+        : "";
+    let attrArr = [],
+        attrText = "";
+    attrArr = [id, name, cls, data, attr];
+    attrText = attrArr.filter((x) => x != "").join(" ");
+    text = text === null ? "" : text;
+    return { attrText: attrText, text: text };
 }
 
 function creEle(
-  ele,
-  text = null,
-  id = null,
-  name = null,
-  cls = [],
-  data = {},
-  attr = {}
+    ele,
+    text = null,
+    id = null,
+    name = null,
+    cls = [],
+    data = {},
+    attr = {}
 ) {
-  let comp = eleBuild(text, id, name, cls, data, attr);
-  return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
+    let comp = eleBuild(text, id, name, cls, data, attr);
+    return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
 }
 
 function creDiv(
-  cls = [],
-  attr = {},
-  id = null,
-  name = null,
-  data = {},
-  text = null
+    cls = [],
+    attr = {},
+    id = null,
+    name = null,
+    data = {},
+    text = null
 ) {
-  return creEle("div", text, id, name, cls, data, attr);
+    return creEle("div", text, id, name, cls, data, attr);
 }
 
 function creBtn(
-  text = null,
-  id = null,
-  name = null,
-  cls = [],
-  data = {},
-  attr = {}
+    text = null,
+    id = null,
+    name = null,
+    cls = [],
+    data = {},
+    attr = {}
 ) {
-  return creEle("button", text, id, name, cls, data, attr);
+    return creEle("button", text, id, name, cls, data, attr);
 }
 
 function creBtnHtml(
-  text = null,
-  id = null,
-  name = null,
-  cls = [],
-  data = {},
-  attr = {}
+    text = null,
+    id = null,
+    name = null,
+    cls = [],
+    data = {},
+    attr = {}
 ) {
-  return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
+    return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
 }
 
 function creSelect(
-  id = null,
-  cls = [],
-  name = null,
-  data = {},
-  attr = {},
-  text = null
+    id = null,
+    cls = [],
+    name = null,
+    data = {},
+    attr = {},
+    text = null
 ) {
-  return creEle("select", text, id, name, cls, data, attr);
+    return creEle("select", text, id, name, cls, data, attr);
 }
 
 function creOption(
-  text = null,
-  value = null,
-  data = {},
-  attr = {},
-  cls = [],
-  name = null,
-  id = null
+    text = null,
+    value = null,
+    data = {},
+    attr = {},
+    cls = [],
+    name = null,
+    id = null
 ) {
-  value != null ? (attr.value = value) : attr;
-  return creEle("option", text, id, name, cls, data, attr);
+    value != null ? (attr.value = value) : attr;
+    return creEle("option", text, id, name, cls, data, attr);
 }
 
 function creImg(
-  ele,
-  text = null,
-  id = null,
-  name = null,
-  cls = [],
-  data = {},
-  attr = {}
+    ele,
+    text = null,
+    id = null,
+    name = null,
+    cls = [],
+    data = {},
+    attr = {}
 ) {
-  let comp = eleBuild(text, id, name, cls, data, attr);
-  return $(`<${ele} ${comp.attrText}>${comp.text}`);
+    let comp = eleBuild(text, id, name, cls, data, attr);
+    return $(`<${ele} ${comp.attrText}>${comp.text}`);
 }
 
 function creI(
-  cls = [],
-  data = {},
-  attr = {},
-  id = null,
-  name = null,
-  text = null
+    cls = [],
+    data = {},
+    attr = {},
+    id = null,
+    name = null,
+    text = null
 ) {
-  return creEle("i", text, id, name, cls, data, attr);
+    return creEle("i", text, id, name, cls, data, attr);
 }
 
 function creA(
-  text = null,
-  attr = {},
-  cls = [],
-  id = null,
-  data = {},
-  name = null
+    text = null,
+    attr = {},
+    cls = [],
+    id = null,
+    data = {},
+    name = null
 ) {
-  return creEle("a", text, id, name, cls, data, attr);
+    return creEle("a", text, id, name, cls, data, attr);
 }
 
 function creSpan(
-  text = null,
-  cls = [],
-  id = null,
-  attr = {},
-  data = {},
-  name = null
+    text = null,
+    cls = [],
+    id = null,
+    attr = {},
+    data = {},
+    name = null
 ) {
-  return creEle("span", text, id, name, cls, data, attr);
+    return creEle("span", text, id, name, cls, data, attr);
 }
 /**
  * 根據該棟建築底下的'所有'電梯執行緒物件
  * */
 class ElevatorHandler {
-  constructor(ele, option = {}) {
-    this.ele = ele;
-    this.eleId = "";
-    this.eleWra = $("<div></div>");
-    this.speed = 0.3;
-    this.movStatus = {}; // {id:elevator01,value:0} 0=no 1=up 2=down
-    this.floorHeight =
-      typeof option.fHeight == "undefined" ? 60 : option.fHeight;
-    this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
-    this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
-    this.elevators =
-      typeof option.elevators == "undefined" ? [{}] : option.elevators; // {id:elevator01}
-    this.curElevFloor =
-      typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
-    this.setTimeout = null;
-    this.init();
-  }
-
-  // 所有電梯初始化
-  init = function () {
-    this.setTabWra();
-    this.setTabFloor();
-    // 若已有每個設備的所在樓層，則預設到該樓層位置
-    if (Object.keys(this.curElevFloor).length != 0) {
-      $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
-        this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
-      });
+    constructor(ele, option = {}) {
+        this.ele = ele;
+        this.eleId = "";
+        this.eleWra = $("<div></div>");
+        this.speed = 0.3;
+        this.movStatus = {}; // {id:elevator01,value:0} 0=no 1=up 2=down
+        this.floorHeight =
+            typeof option.fHeight == "undefined" ? 60 : option.fHeight;
+        this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
+        this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
+        this.elevators =
+            typeof option.elevators == "undefined" ? [{}] : option.elevators; // {id:elevator01}
+        this.curElevFloor =
+            typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
+        this.setTimeout = null;
+        this.init();
     }
-  };
 
-  // 設置 wrapper
-  setTabWra = function () {
-    let id = $(this.ele).prop("id");
-    this.eleId = id;
-    if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
-      $(this.ele).unwrap(".elevator-table-wrapper");
-    }
-    let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
-    $(this.ele).wrap(wrapper);
-    this.eleWra = wrapper;
-  };
+    // 所有電梯初始化
+    init = function () {
+        this.setTabWra();
+        this.setTabFloor();
+        // 若已有每個設備的所在樓層，則預設到該樓層位置
+        if (Object.keys(this.curElevFloor).length != 0) {
+            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
+                this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
+            });
+        }
+    };
 
-  // 設置 table 樓層
-  setTabFloor = function () {
-    let _w = this.floorWidth,
-      _h = this.floorHeight;
-    let thead = creEle("thead"),
-      tbody = creEle("tbody");
-    let _floors = this.floors,
-      _ele = this.ele,
-      _elevators = this.elevators;
-    //樓層從小到大
-    _floors = _floors
-      .oSort("sort")
-      .reverse()
-      .map((x) => x.name);
+    // 設置 wrapper
+    setTabWra = function () {
+        let id = $(this.ele).prop("id");
+        this.eleId = id;
+        if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
+            $(this.ele).unwrap(".elevator-table-wrapper");
+        }
+        let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
+        $(this.ele).wrap(wrapper);
+        this.eleWra = wrapper;
+    };
 
-    let theadTr = creEle("tr");
+    // 設置 table 樓層
+    setTabFloor = function () {
+        let _w = this.floorWidth,
+            _h = this.floorHeight;
+        let thead = creEle("thead"),
+            tbody = creEle("tbody");
+        let _floors = this.floors,
+            _ele = this.ele,
+            _elevators = this.elevators;
+        //樓層從小到大
+        _floors = _floors
+            .oSort("sort")
+            .reverse()
+            .map((x) => x.name);
 
-    for (let e = 1; e <= _elevators.length + 2; e++) {
-      let th = creEle("th");
-      th.css({ width: `${_w}px`, height: `${_h}px`, position: "relative" });
-      if (e != 1 && e != _elevators.length + 2) {
-        let elevId = _elevators[e - 2]?.id;
-        // 電梯方框
-        let span = creEle("span", null, "elevator-item-" + elevId, null, [
-          "elevator-item",
-        ]);
-        let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
-        let spanDown = creEle("span", null, null, null, [
-          "elevator-item-todown",
-        ]);
-        span.css({
-          width: `${_w - 3}px`,
-          height: `${_h - 3}px`,
-          top: `1.5px`,
-          left: "1.5px",
-          transition: `transform ${1 / this.speed
-            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
-        });
-        spanUp.css({
-          width: `${_w - 3}px`,
-          height: `${(_h - 3) / 2}px`,
-          top: `1.5px`,
-          left: "1.5px",
-          transition: `transform ${1 / this.speed
-            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
-        });
-        spanDown.css({
-          width: `${_w - 3}px`,
-          height: `${(_h - 3) / 2}px`,
-          top: `1.5px`,
-          left: "1.5px",
-          transition: `transform ${1 / this.speed
-            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
-          top: `${1.5 + (_h - 3) / 2}px`,
-        });
-        th.append(spanUp);
-        th.append(span);
-        th.append(spanDown);
-      }
-      theadTr.append(th);
-    }
-    thead.css("position", "absolute");
-    thead.append(theadTr);
+        let theadTr = creEle("tr");
 
-    //樓層表格建置 tbody
-    for (let f = 1; f <= _floors.length; f++) {
-      let tr = creEle("tr");
+        for (let e = 1; e <= _elevators.length + 2; e++) {
+            let th = creEle("th");
+            th.css({ width: `${_w}px`, height: `${_h}px`, position: "relative" });
+            if (e != 1 && e != _elevators.length + 2) {
+                let elevId = _elevators[e - 2]?.id;
+                // 電梯方框
+                let span = creEle("span", null, "elevator-item-" + elevId, null, [
+                    "elevator-item",
+                ]);
+                let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
+                let spanDown = creEle("span", null, null, null, [
+                    "elevator-item-todown",
+                ]);
+                span.css({
+                    width: `${_w - 3}px`,
+                    height: `${_h - 3}px`,
+                    top: `1.5px`,
+                    left: "1.5px",
+                    transition: `transform ${1 / this.speed
+                        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
+                });
+                spanUp.css({
+                    width: `${_w - 3}px`,
+                    height: `${(_h - 3) / 2}px`,
+                    top: `1.5px`,
+                    left: "1.5px",
+                    transition: `transform ${1 / this.speed
+                        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
+                });
+                spanDown.css({
+                    width: `${_w - 3}px`,
+                    height: `${(_h - 3) / 2}px`,
+                    top: `1.5px`,
+                    left: "1.5px",
+                    transition: `transform ${1 / this.speed
+                        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
+                    top: `${1.5 + (_h - 3) / 2}px`,
+                });
+                th.append(spanUp);
+                th.append(span);
+                th.append(spanDown);
+            }
+            theadTr.append(th);
+        }
+        thead.css("position", "absolute");
+        thead.append(theadTr);
 
-      for (let e = 1; e <= _elevators.length + 2; e++) {
-        let td = creEle("td");
-        td.css({ width: `${_w}px`, height: `${_h}px` });
-        if (e == 1) {
-          td.addClass("t-black");
-          td.text(_floors[f - 1]);
-        } else if (e == _elevators.length + 2) {
+        //樓層表格建置 tbody
+        for (let f = 1; f <= _floors.length; f++) {
+            let tr = creEle("tr");
+
+            for (let e = 1; e <= _elevators.length + 2; e++) {
+                let td = creEle("td");
+                td.css({ width: `${_w}px`, height: `${_h}px` });
+                if (e == 1) {
+                    td.addClass("t-black");
+                    td.text(_floors[f - 1]);
+                } else if (e == _elevators.length + 2) {
+                } else {
+                    let div = creDiv([
+                        "d-flex",
+                        "justify-content-center",
+                        "align-items-end",
+                        "h-100",
+                    ]);
+                    div.append(`<i class="fal fa-door-open fs-1-2"></i>`);
+                    td.append(div);
+                }
+                tr.append(td);
+            }
+            tbody.append(tr);
+        }
+
+        $(_ele).append(thead);
+        $(_ele).append(tbody);
+
+        //表格外圍無框線
+        $(_ele)
+            .find("tbody tr")
+            .each((index, tr) => {
+                $(tr).find("td:eq(0)").css("border-left", "0");
+                $(tr).find("td:eq(-1)").css("border-right", "0");
+
+                if (index == 0) {
+                    $(tr)
+                        .find("td")
+                        .each((index, td) => {
+                            $(td).css("border-top", "0");
+                        });
+                } else if (index == $("#floorTable tbody tr").length - 1) {
+                    $(tr)
+                        .find("td")
+                        .each((index, td) => {
+                            $(td).css("border-bottom", "0");
+                        });
+                }
+            });
+    };
+
+    // 設置某個電梯到某個樓層
+    setElevFloor = function (elevId, floId) {
+        let curFloId = this.curElevFloor[elevId];
+        let curSort = this.floors
+            .filter((x) => x.id == curFloId)
+            .map((x) => x.sort)[0];
+        let tarSort = this.floors
+            .filter((x) => x.id == floId)
+            .map((x) => x.sort)[0];
+        let gapFloor = tarSort - curSort;
+        let cssEle = [
+            $(`#elevator-item-${elevId}`)[0],
+            $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0],
+            $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0],
+        ];
+        if (this.movStatus[elevId] != 0) {
+            $(cssEle).css(
+                "transition",
+                `transform ${(1 / this.speed) * Math.abs(gapFloor)
+                }s cubic-bezier(0, 0, 0.62, 1) 0s`
+            );
+        }
+        clearTimeout(this.setTimeout);
+        this.setTimeout = setTimeout(() => {
+            $(cssEle).css(
+                "transition",
+                `transform ${(1 / this.speed) * Math.abs(gapFloor)
+                }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
+            );
+            this.setEleUpDownStyle(elevId);
+        }, (1 / this.speed) * Math.abs(gapFloor) * 1000);
+        this.setEleUpDownStyle(elevId);
+        this.curElevFloor[elevId] = floId;
+        $(cssEle).css(
+            "transition",
+            `transform ${(1 / this.speed) * Math.abs(gapFloor)
+            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
+        );
+        $(cssEle).css(
+            "transform",
+            `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`
+        );
+    };
+
+    // 設定現在電梯狀態 (往上/往下/停止)
+    setEleMovStatus = function (elevId, status) {
+        this.movStatus[elevId] = status;
+    };
+
+    // 電梯方框 往上或往下閃爍
+    setEleUpDownStyle = function (elevId) {
+        if (this.movStatus[elevId] == 1) {
+            $(`#elevator-item-${elevId}`)
+                .next("span.elevator-item-todown")
+                .removeClass("light-flash-c-bd");
+            $(`#elevator-item-${elevId}`)
+                .prev("span.elevator-item-toup")
+                .addClass("light-flash-c-bd")
+                .css("--flash-color-1", "#44ea8e")
+                .css("--flash-color-2", "rgba(255,255,255,0)");
+        } else if (this.movStatus[elevId] == 2) {
+            $(`#elevator-item-${elevId}`)
+                .prev("span.elevator-item-toup")
+                .removeClass("light-flash-c-bd");
+            $(`#elevator-item-${elevId}`)
+                .next("span.elevator-item-todown")
+                .addClass("light-flash-c-bd")
+                .css("--flash-color-1", "#44ea8e")
+                .css("--flash-color-2", "rgba(255,255,255,0)");
         } else {
-          let div = creDiv([
-            "d-flex",
-            "justify-content-center",
-            "align-items-end",
-            "h-100",
-          ]);
-          div.append(`<i class="fal fa-door-open fs-1-2"></i>`);
-          td.append(div);
+            $(`#elevator-item-${elevId}`)
+                .prev("span.elevator-item-toup")
+                .removeClass("light-flash-c-bd");
+            $(`#elevator-item-${elevId}`)
+                .next("span.elevator-item-todown")
+                .removeClass("light-flash-c-bd");
         }
-        tr.append(td);
-      }
-      tbody.append(tr);
-    }
+    };
 
-    $(_ele).append(thead);
-    $(_ele).append(tbody);
+    // 設定現在某個電梯所在樓層
+    setCurElevFloor = function (elevId, floId) {
+        this.curElevFloor[elevId] = floId;
+    };
 
-    //表格外圍無框線
-    $(_ele)
-      .find("tbody tr")
-      .each((index, tr) => {
-        $(tr).find("td:eq(0)").css("border-left", "0");
-        $(tr).find("td:eq(-1)").css("border-right", "0");
-
-        if (index == 0) {
-          $(tr)
-            .find("td")
-            .each((index, td) => {
-              $(td).css("border-top", "0");
-            });
-        } else if (index == $("#floorTable tbody tr").length - 1) {
-          $(tr)
-            .find("td")
-            .each((index, td) => {
-              $(td).css("border-bottom", "0");
+    // 重新繪製
+    redraw = function () {
+        $(this.ele).empty();
+        this.setTabFloor();
+        if (Object.keys(this.curElevFloor).length != 0) {
+            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
+                this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
             });
         }
-      });
-  };
-
-  // 設置某個電梯到某個樓層
-  setElevFloor = function (elevId, floId) {
-    let curFloId = this.curElevFloor[elevId];
-    let curSort = this.floors
-      .filter((x) => x.id == curFloId)
-      .map((x) => x.sort)[0];
-    let tarSort = this.floors
-      .filter((x) => x.id == floId)
-      .map((x) => x.sort)[0];
-    let gapFloor = tarSort - curSort;
-    let cssEle = [
-      $(`#elevator-item-${elevId}`)[0],
-      $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0],
-      $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0],
-    ];
-    if (this.movStatus[elevId] != 0) {
-      $(cssEle).css(
-        "transition",
-        `transform ${(1 / this.speed) * Math.abs(gapFloor)
-        }s cubic-bezier(0, 0, 0.62, 1) 0s`
-      );
-    }
-    clearTimeout(this.setTimeout);
-    this.setTimeout = setTimeout(() => {
-      $(cssEle).css(
-        "transition",
-        `transform ${(1 / this.speed) * Math.abs(gapFloor)
-        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
-      );
-      this.setEleUpDownStyle(elevId);
-    }, (1 / this.speed) * Math.abs(gapFloor) * 1000);
-    this.setEleUpDownStyle(elevId);
-    this.curElevFloor[elevId] = floId;
-    $(cssEle).css(
-      "transition",
-      `transform ${(1 / this.speed) * Math.abs(gapFloor)
-      }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
-    );
-    $(cssEle).css(
-      "transform",
-      `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`
-    );
-  };
-
-  // 設定現在電梯狀態 (往上/往下/停止)
-  setEleMovStatus = function (elevId, status) {
-    this.movStatus[elevId] = status;
-  };
-
-  // 電梯方框 往上或往下閃爍
-  setEleUpDownStyle = function (elevId) {
-    if (this.movStatus[elevId] == 1) {
-      $(`#elevator-item-${elevId}`)
-        .next("span.elevator-item-todown")
-        .removeClass("light-flash-c-bd");
-      $(`#elevator-item-${elevId}`)
-        .prev("span.elevator-item-toup")
-        .addClass("light-flash-c-bd")
-        .css("--flash-color-1", "#44ea8e")
-        .css("--flash-color-2", "rgba(255,255,255,0)");
-    } else if (this.movStatus[elevId] == 2) {
-      $(`#elevator-item-${elevId}`)
-        .prev("span.elevator-item-toup")
-        .removeClass("light-flash-c-bd");
-      $(`#elevator-item-${elevId}`)
-        .next("span.elevator-item-todown")
-        .addClass("light-flash-c-bd")
-        .css("--flash-color-1", "#44ea8e")
-        .css("--flash-color-2", "rgba(255,255,255,0)");
-    } else {
-      $(`#elevator-item-${elevId}`)
-        .prev("span.elevator-item-toup")
-        .removeClass("light-flash-c-bd");
-      $(`#elevator-item-${elevId}`)
-        .next("span.elevator-item-todown")
-        .removeClass("light-flash-c-bd");
-    }
-  };
-
-  // 設定現在某個電梯所在樓層
-  setCurElevFloor = function (elevId, floId) {
-    this.curElevFloor[elevId] = floId;
-  };
-
-  // 重新繪製
-  redraw = function () {
-    $(this.ele).empty();
-    this.setTabFloor();
-    if (Object.keys(this.curElevFloor).length != 0) {
-      $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
-        this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
-      });
-    }
-  };
+    };
 }
 
 // 從數字週數轉為中文週數
 function dayToChiDay(num) {
-  let chiDay = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"];
-  return chiDay[num];
+    let chiDay = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"];
+    return chiDay[num];
 }
 
 // 取得現在或前後時間，輸出單位依據 type
 function getTimeByType(type = null, cal = 0, unit = "d") {
-  let now = new Date();
-  return strToDate(now, type, cal, unit);
+    let now = new Date();
+    return strToDate(now, type, cal, unit);
 }
 
 // 取得某當下時間或前後時間，輸出單位依據 type
 function strToDate(text, type = null, cal = 0, unit = "d") {
-  let dec = 24 * 60 * 60 * 1000;
+    let dec = 24 * 60 * 60 * 1000;
 
-  if (unit == "d") {
-    dec = 24 * 60 * 60 * 1000;
-  } else if (unit == "h") {
-    dec = 60 * 60 * 1000;
-  } else if (unit == "m") {
-    dec = 60 * 1000;
-  } else if (unit == "s") {
-    dec = 1000;
-  }
+    if (unit == "d") {
+        dec = 24 * 60 * 60 * 1000;
+    } else if (unit == "h") {
+        dec = 60 * 60 * 1000;
+    } else if (unit == "m") {
+        dec = 60 * 1000;
+    } else if (unit == "s") {
+        dec = 1000;
+    }
 
-  let calDay = function (_d, _cal) {
-    return new Date(_d.getTime() + cal * dec);
-  };
+    let calDay = function (_d, _cal) {
+        return new Date(_d.getTime() + cal * dec);
+    };
 
-  let tarDate = new Date(text);
-  let result = 0;
-  if (type == "year") {
-    result = calDay(tarDate, cal).getFullYear();
-  } else if (type == "month") {
-    result = calDay(tarDate, cal).getMonth();
-  } else if (type == "date") {
-    result = calDay(tarDate, cal).getDate();
-  } else if (type == "day") {
-    result = calDay(tarDate, cal).getDay();
-  } else {
-    result = calDay(tarDate, cal);
-  }
-  return result;
+    let tarDate = new Date(text);
+    let result = 0;
+    if (type == "year") {
+        result = calDay(tarDate, cal).getFullYear();
+    } else if (type == "month") {
+        result = calDay(tarDate, cal).getMonth();
+    } else if (type == "date") {
+        result = calDay(tarDate, cal).getDate();
+    } else if (type == "day") {
+        result = calDay(tarDate, cal).getDay();
+    } else {
+        result = calDay(tarDate, cal);
+    }
+    return result;
 }
 
 // 將只有時間(Hms) 格式轉換為當日的時間
 function fullTime(time) {
-  let nowDate = displayDate(new Date(), "date");
-  return new Date(nowDate + " " + time);
+    let nowDate = displayDate(new Date(), "date");
+    return new Date(nowDate + " " + time);
 }
 
 function dateRanCutPart(start, end, cutNum) {
-  let sTime = new Date(start).getTime();
-  let eTime = new Date(end).getTime();
-  let cutTimeArr = [];
-  if (sTime < eTime) return [];
+    let sTime = new Date(start).getTime();
+    let eTime = new Date(end).getTime();
+    let cutTimeArr = [];
+    if (sTime < eTime) return [];
 
-  let partNum = (sTime - eTime) / cutNum;
-  for (let i = eTime; i <= sTime; i = i + partNum) {
-    cutTimeArr.push(i);
-  }
+    let partNum = (sTime - eTime) / cutNum;
+    for (let i = eTime; i <= sTime; i = i + partNum) {
+        cutTimeArr.push(i);
+    }
 
-  cutTimeArr.forEach((x) => new Date(x));
+    cutTimeArr.forEach((x) => new Date(x));
 
-  return cutTimeArr;
+    return cutTimeArr;
 }
 
 function isJSON(str) {
-  try {
-    JSON.parse(str);
-    return true;
-  } catch {
-    return false;
-  }
+    try {
+        JSON.parse(str);
+        return true;
+    } catch {
+        return false;
+    }
 }
 
 function addBsToast(
-  container,
-  type = "warning",
-  title = "",
-  content = "",
-  id,
-  datas = {},
-  option = {}
+    container,
+    type = "warning",
+    title = "",
+    content = "",
+    id,
+    datas = {},
+    option = {}
 ) {
-  datas =
-    Object.keys(datas).length != 0
-      ? `${Object.keys(datas)
-        .map((x) => `data-${x}="${datas[x]}"`)
-        .join(" ")}`
-      : "";
-  let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
-  let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
+    datas =
+        Object.keys(datas).length != 0
+            ? `${Object.keys(datas)
+                .map((x) => `data-${x}="${datas[x]}"`)
+                .join(" ")}`
+            : "";
+    let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
+    let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
                       <div class="toast-header ${warning ? `bg-` + warning : ""
-    }">
+        }">
                           <i class="${iconClass}"></i>
                           <strong class="mr-auto">${title}</strong>
                           <small class="text-muted">just now</small>
@@ -661,276 +661,276 @@ function addBsToast(
  * 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
  * */
 class Forge3DElevFull {
-  constructor(option = {}) {
-    this.allElevDevList = []; //全電梯設備清單
-    this.subSeviceData = []; //每個設備訂閱點位值
-    this.floList = [];
-    this.elev3DBind = {};
-    this.elev3DOption = {};
-    this.elev3DObj = [];
-    this.viewer = option.viewer ?? null;
-    this.ordPath = option.ordPath ?? {};
-    this.sysMainTag = option.system_tag ?? "ELEV";
-    this.sysSubTag = option.name_tag ?? "EL";
-    this.selector = option.selector ?? "#forgeViewer";
-    this.bajaChaCallback = option.bajaChaCallback ?? null;
-    this.bajaEndCallback = option.bajaEndCallback ?? null;
-    this.sensorObjs = option.sensorObjs ?? null;
-  }
+    constructor(option = {}) {
+        this.allElevDevList = []; //全電梯設備清單
+        this.subSeviceData = []; //每個設備訂閱點位值
+        this.floList = [];
+        this.elev3DBind = {};
+        this.elev3DOption = {};
+        this.elev3DObj = [];
+        this.viewer = option.viewer ?? null;
+        this.ordPath = option.ordPath ?? {};
+        this.sysMainTag = option.system_tag ?? "ELEV";
+        this.sysSubTag = option.name_tag ?? "EL";
+        this.selector = option.selector ?? "#forgeViewer";
+        this.bajaChaCallback = option.bajaChaCallback ?? null;
+        this.bajaEndCallback = option.bajaEndCallback ?? null;
+        this.sensorObjs = option.sensorObjs ?? null;
+    }
 
-  init = function () {
-    // 系統大類、小類固定
-    this.ordPath.system_tag = this.sysMainTag;
-    this.ordPath.name_tag = this.sysSubTag;
+    init = function () {
+        // 系統大類、小類固定
+        this.ordPath.system_tag = this.sysMainTag;
+        this.ordPath.name_tag = this.sysSubTag;
 
-    // if (pageAct.sysSubTag === "M12") {
-    //   console.log("@@",pageAct, pageAct.sysSubTag)
-    //   this.getSensorDevList();
-    // }
-    this.getElevDevList();
-  };
-
-  // 訂閱電梯設備
-  subElevDevice = function () {
-    let myBaja = new subscriptionDevices();
-    let ordPath = this.ordPath;
-
-    myBaja.setSubscribeDevicesByBql(ordPath);
-    myBaja.setSubscribeDevicesCallBack((data) => {
-      this.bajaChaCallback ? this.bajaChaCallback(data) : "";
-      if (this.allElevDevList.length == 0) {
-        return false;
-      }
-      data.device_number = data.device_number_full;
-
-      let matchDevice = this.allElevDevList.filter(
-        (x) => x.device_number == data.device_number
-      )[0];
-
-      if (!matchDevice) {
-        return;
-      }
-
-      //將訂閱值塞入 subSeviceData
-      if (
-        this.subSeviceData.findIndex(
-          (x) => x.device_number == matchDevice.device_number
-        ) == -1
-      ) {
-        let obj = {};
-        obj.device_number = matchDevice.device_number;
-        this.subSeviceData.push(obj);
-      }
-
-      let subData = this.subSeviceData.filter(
-        (x) => x.device_number == matchDevice.device_number
-      )[0];
-
-      if (subData) {
-        subData[data.point_name] = data.value;
-      }
-
-      if (data.point_name == "CP") {
-        if (this.elev3DObj.length != 0) {
-          let elevObj = this.elev3DObj.filter(
-            (x) => x.nodeId == this.elev3DBind[matchDevice.device_number]
-          )[0];
-          if (elevObj && elevObj.id) {
-            elevObj.obj.setElevatorFloor(data.value);
-            elevObj.obj.movElevator();
-          }
-        }
-      }
-    });
-
-    myBaja.setSubscribeDeviceEndCallBack((data) => {
-      this.floList = data
-        .filter((x) => x.point_name.startsWith("SP_FLS_"))
-        .map((x) => x?.point_name?.split("SP_FLS_")[1])
-        .Distinct();
-      this.set3DElevOpt(data);
-      this.bajaEndCallback != null ? this.bajaEndCallback() : "";
-    });
-  };
-
-  // 電梯 3D Option 設置
-  set3DElevOpt = function (data) {
-    let devNumArr = data
-      .map((x) => {
-        return {
-          devNum: x.device_number_full,
-          priority: this.allElevDevList.filter(
-            (y) => y.device_number == x.device_number_full
-          )[0]?.priority,
-        };
-      })
-      .DistinctBy("devNum");
-    devNumArr = devNumArr.oSort("priority");
-    $.each(devNumArr, (idx, devObj) => {
-      let devNum = devObj.devNum;
-      let subData = this.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]);*/
-        this.elev3DOption.nodeId = this.elev3DBind[devNum];
-        this.elev3DOption.floorHeight = this.floList.map((x) => {
-          return { floor: x };
-        });
-        this.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 (this.elev3DObj.length != 0) {
-          let elevObj = this.elev3DObj.filter(
-            (x) => x.nodeId == this.elev3DBind[devNum]
-          )[0];
-          if (!elevObj.id) {
-            elevObj.id = devNum;
-          }
-          elevObj.obj = Object.assign(elevObj.obj, this.elev3DOption);
-          elevObj.obj.init(() => {
-            let frags = elevObj.obj.fragProxys.filter(
-              (x) => x.nodeId == this.elev3DBind[devNum]
-            );
-
-            frags.forEach((fragProxy) => {
-              fragProxy.frag.position.z =
-                this.elev3DOption.floorHeight.filter(
-                  (x) => x.floor == subData["CP"]
-                )[0]?.height ?? 0;
-              let start = 0;
-              // 改變感測器熱點位置
-              this.sensorObjs &&
-                this.sensorObjs[0]?.changePos(
-                  node + 2,
-                  fragProxy.frag.position.z
-                );
-              // if (node === 15200 && start == 0) {
-              //     start = 1;
-              // }
-              fragProxy.frag.updateAnimTransform();
-            });
-            elevObj.obj.viewer.impl.sceneUpdated(true);
-          });
-        }
-      }
-    });
-    this.set3DElevPos();
-  };
-
-  // 電梯 3D 位置呈現
-  set3DElevPos = function () {
-    let nodeIds = this.allElevDevList
-      .filter((x) => !isNaN(parseInt(x.forge_dbid)))
-      .map((x) => {
-        return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
-      });
-
-    $.each(nodeIds, (idx, item) => {
-      this.elev3DBind[item.devNum] = item.nodeId;
-    });
-    nodeIds = nodeIds.map((x) => x.nodeId);
-    $.each(nodeIds, (idx, node) => {
-      let options = {
-        element: $(this.selector),
-        viewer: this.viewer,
-        nodeId: node,
-        floorHeight: this.elev3DOption.floorHeight ?? [],
-        sensorObjs: this.sensorObjs,
-        inited: function () { },
-      };
-      let elevator3DObj = new elevator3D(options);
-      let devNum = Object.keys(this.elev3DBind).filter(
-        (x) => this.elev3DBind[x] == node
-      )[0];
-      let subData = this.subSeviceData.filter(
-        (x) => x.device_number == devNum
-      )[0];
-
-      if (this.elev3DObj.filter((x) => x.nodeId == node).length == 0) {
-        this.elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
-      }
-
-      if (subData) {
-        let elevObj = this.elev3DObj.filter((x) => x.nodeId == node)[0];
-        if (!elevObj.id) {
-          elevObj.id = devNum;
-        }
-        elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
-        elevObj.obj.init(() => {
-          let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
-          frags.forEach((fragProxy) => {
-            fragProxy.frag.position.z =
-              this.elev3DOption.floorHeight.filter(
-                (x) => x.floor == subData["CP"]
-              )[0]?.height ?? 0;
-            let start = 0;
-            this.sensorObjs &&
-              this.sensorObjs[0]?.changePos(
-                node + 2,
-                fragProxy.frag.position.z
-              );
-            // if (node === 15200 && start == 0) {
-            //     // 改變感測器熱點位置
-            //     start = 1;
-            // }
-            fragProxy.frag.updateAnimTransform();
-          });
-          elevObj.obj.viewer.impl.sceneUpdated(true);
-        });
-      }
-    });
-  };
-
-  // 取得設備列表
-  getElevDevList = function () {
-    let url = baseApiUrl + "/api/Device/GetDeviceList";
-    let sendData = {
-      sub_system_tag: this.ordPath.name_tag,
-      building_tag: this.ordPath.building_tag,
+        // if (pageAct.sysSubTag === "M12") {
+        //   console.log("@@",pageAct, pageAct.sysSubTag)
+        //   this.getSensorDevList();
+        // }
+        this.getElevDevList();
     };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(
-      url,
-      objSendData,
-      (res) => {
-        if (!res || res.code != "0000" || !res.data) {
-        } else {
-          $.each(res.data, (index, floObj) => {
-            $.each(floObj.device_list, (index2, devObj) => {
-              this.allElevDevList.push(devObj);
-            });
-          });
-          this.subElevDevice();
-        }
-      },
-      null,
-      "POST"
-    ).send();
-  };
 
-  getNodeIds = function () {
-    return this.elev3DObj.map((x) => x.nodeId);
-  };
+    // 訂閱電梯設備
+    subElevDevice = function () {
+        let myBaja = new subscriptionDevices();
+        let ordPath = this.ordPath;
+
+        myBaja.setSubscribeDevicesByBql(ordPath);
+        myBaja.setSubscribeDevicesCallBack((data) => {
+            this.bajaChaCallback ? this.bajaChaCallback(data) : "";
+            if (this.allElevDevList.length == 0) {
+                return false;
+            }
+            data.device_number = data.device_number_full;
+
+            let matchDevice = this.allElevDevList.filter(
+                (x) => x.device_number == data.device_number
+            )[0];
+
+            if (!matchDevice) {
+                return;
+            }
+
+            //將訂閱值塞入 subSeviceData
+            if (
+                this.subSeviceData.findIndex(
+                    (x) => x.device_number == matchDevice.device_number
+                ) == -1
+            ) {
+                let obj = {};
+                obj.device_number = matchDevice.device_number;
+                this.subSeviceData.push(obj);
+            }
+
+            let subData = this.subSeviceData.filter(
+                (x) => x.device_number == matchDevice.device_number
+            )[0];
+
+            if (subData) {
+                subData[data.point_name] = data.value;
+            }
+
+            if (data.point_name == "CP") {
+                if (this.elev3DObj.length != 0) {
+                    let elevObj = this.elev3DObj.filter(
+                        (x) => x.nodeId == this.elev3DBind[matchDevice.device_number]
+                    )[0];
+                    if (elevObj && elevObj.id) {
+                        elevObj.obj.setElevatorFloor(data.value);
+                        elevObj.obj.movElevator();
+                    }
+                }
+            }
+        });
+
+        myBaja.setSubscribeDeviceEndCallBack((data) => {
+            this.floList = data
+                .filter((x) => x.point_name.startsWith("SP_FLS_"))
+                .map((x) => x?.point_name?.split("SP_FLS_")[1])
+                .Distinct();
+            this.set3DElevOpt(data);
+            this.bajaEndCallback != null ? this.bajaEndCallback() : "";
+        });
+    };
+
+    // 電梯 3D Option 設置
+    set3DElevOpt = function (data) {
+        let devNumArr = data
+            .map((x) => {
+                return {
+                    devNum: x.device_number_full,
+                    priority: this.allElevDevList.filter(
+                        (y) => y.device_number == x.device_number_full
+                    )[0]?.priority,
+                };
+            })
+            .DistinctBy("devNum");
+        devNumArr = devNumArr.oSort("priority");
+        $.each(devNumArr, (idx, devObj) => {
+            let devNum = devObj.devNum;
+            let subData = this.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]);*/
+                this.elev3DOption.nodeId = this.elev3DBind[devNum];
+                this.elev3DOption.floorHeight = this.floList.map((x) => {
+                    return { floor: x };
+                });
+                this.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 (this.elev3DObj.length != 0) {
+                    let elevObj = this.elev3DObj.filter(
+                        (x) => x.nodeId == this.elev3DBind[devNum]
+                    )[0];
+                    if (!elevObj.id) {
+                        elevObj.id = devNum;
+                    }
+                    elevObj.obj = Object.assign(elevObj.obj, this.elev3DOption);
+                    elevObj.obj.init(() => {
+                        let frags = elevObj.obj.fragProxys.filter(
+                            (x) => x.nodeId == this.elev3DBind[devNum]
+                        );
+
+                        frags.forEach((fragProxy) => {
+                            fragProxy.frag.position.z =
+                                this.elev3DOption.floorHeight.filter(
+                                    (x) => x.floor == subData["CP"]
+                                )[0]?.height ?? 0;
+                            let start = 0;
+                            // 改變感測器熱點位置
+                            this.sensorObjs &&
+                                this.sensorObjs[0]?.changePos(
+                                    node + 2,
+                                    fragProxy.frag.position.z
+                                );
+                            // if (node === 15200 && start == 0) {
+                            //     start = 1;
+                            // }
+                            fragProxy.frag.updateAnimTransform();
+                        });
+                        elevObj.obj.viewer.impl.sceneUpdated(true);
+                    });
+                }
+            }
+        });
+        this.set3DElevPos();
+    };
+
+    // 電梯 3D 位置呈現
+    set3DElevPos = function () {
+        let nodeIds = this.allElevDevList
+            .filter((x) => !isNaN(parseInt(x.forge_dbid)))
+            .map((x) => {
+                return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
+            });
+
+        $.each(nodeIds, (idx, item) => {
+            this.elev3DBind[item.devNum] = item.nodeId;
+        });
+        nodeIds = nodeIds.map((x) => x.nodeId);
+        $.each(nodeIds, (idx, node) => {
+            let options = {
+                element: $(this.selector),
+                viewer: this.viewer,
+                nodeId: node,
+                floorHeight: this.elev3DOption.floorHeight ?? [],
+                sensorObjs: this.sensorObjs,
+                inited: function () { },
+            };
+            let elevator3DObj = new elevator3D(options);
+            let devNum = Object.keys(this.elev3DBind).filter(
+                (x) => this.elev3DBind[x] == node
+            )[0];
+            let subData = this.subSeviceData.filter(
+                (x) => x.device_number == devNum
+            )[0];
+
+            if (this.elev3DObj.filter((x) => x.nodeId == node).length == 0) {
+                this.elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
+            }
+
+            if (subData) {
+                let elevObj = this.elev3DObj.filter((x) => x.nodeId == node)[0];
+                if (!elevObj.id) {
+                    elevObj.id = devNum;
+                }
+                elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
+                elevObj.obj.init(() => {
+                    let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
+                    frags.forEach((fragProxy) => {
+                        fragProxy.frag.position.z =
+                            this.elev3DOption.floorHeight.filter(
+                                (x) => x.floor == subData["CP"]
+                            )[0]?.height ?? 0;
+                        let start = 0;
+                        this.sensorObjs &&
+                            this.sensorObjs[0]?.changePos(
+                                node + 2,
+                                fragProxy.frag.position.z
+                            );
+                        // if (node === 15200 && start == 0) {
+                        //     // 改變感測器熱點位置
+                        //     start = 1;
+                        // }
+                        fragProxy.frag.updateAnimTransform();
+                    });
+                    elevObj.obj.viewer.impl.sceneUpdated(true);
+                });
+            }
+        });
+    };
+
+    // 取得設備列表
+    getElevDevList = function () {
+        let url = baseApiUrl + "/api/Device/GetDeviceList";
+        let sendData = {
+            sub_system_tag: this.ordPath.name_tag,
+            building_tag: this.ordPath.building_tag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(
+            url,
+            objSendData,
+            (res) => {
+                if (!res || res.code != "0000" || !res.data) {
+                } else {
+                    $.each(res.data, (index, floObj) => {
+                        $.each(floObj.device_list, (index2, devObj) => {
+                            this.allElevDevList.push(devObj);
+                        });
+                    });
+                    this.subElevDevice();
+                }
+            },
+            null,
+            "POST"
+        ).send();
+    };
+
+    getNodeIds = function () {
+        return this.elev3DObj.map((x) => x.nodeId);
+    };
 }
 
 /**
@@ -939,310 +939,359 @@ class Forge3DElevFull {
  * 2. 參數取得要移動到的電梯位置
  * */
 class Forge3DSensor {
-  constructor(option = {}) {
-    this.subDeviceData = []; //每個設備訂閱點位值
-    this.viewer = option.viewer ?? null;
-    this.ordPath = option.ordPath; // TPE_B1
-    this.sysMainTag = "ME";
-    this.sysSubTag = "M12";
-    this.selector = "#forgeViewer";
-    this.heatMap = null;
-    this.bajaChaCallback = option.bajaChaCallback ?? null;
-    this.bajaEndCallback = option.bajaEndCallback ?? null;
-    this.floorHeight = 0;
-    this.dataVizExtn = null;
-    this.DataVizCore = null;
-    this.tempVal = 20;
-    this.curDevice = option.curDevice ?? null;
-    this.deviceList = option.deviceList ?? null;
-    this.selector = option.selector ?? "#forgeViewer";
-    this.elevCb = option.elevCb ?? null;
-    this.#init();
-  }
+    constructor(option = {}) {
+        this.subDeviceData = []; //每個設備訂閱點位值
+        this.viewer = option.viewer ?? null;
+        this.ordPath = option.ordPath; // TPE_B1
+        this.sysMainTag = "ME";
+        this.sysSubTag = "M12";
+        this.selector = "#forgeViewer";
+        this.heatMap = null;
+        this.bajaChaCallback = option.bajaChaCallback ?? null;
+        this.bajaEndCallback = option.bajaEndCallback ?? null;
+        this.floorHeight = 0;
+        this.dataVizExtn = null;
+        this.DataVizCore = null;
+        this.tempVal = 20;
+        this.curDevice = option.curDevice ?? null;
+        this.selector = option.selector ?? "#forgeViewer";
+        this.elevCb = option.elevCb ?? null;
+        this.deviceList = option.deviceList ?? null;
+        this.#init();
+    }
 
-  static sensorTimes = 0;
-
-  #init = async function () {
-    // 系統大類、小類固定
-    this.ordPath.system_tag = this.sysMainTag;
-    this.ordPath.name_tag = this.sysSubTag;
-    // this.dataVizExtn = await this.viewer.loadExtension(
-    //   "Autodesk.DataVisualization"
-    // );
-    // this.DataVizCore = Autodesk.DataVisualization.Core;
-    await this.registerHotPoint();
-    this.addSensorHotspotList(this.curDevice.forge_dbid, 35);
-    this.subSensorDevice();
-    this.elevCb && this.elevCb();
-  };
-
-  // // 建立熱點
-  // async addHotPoint() {
-
-  //     // this.dataVizExtn.removeAllViewables()
-  //     await this.registerHotPoint()
-  //     this.subSensorDevice();
-  //     // console.log("2",this.dataVizExtn)
-  // }
-
-  async registerHotPoint(color = "") {
-    if (Forge3DSensor.sensorTimes === 1) {
-      var viewer = this.viewer;
-      const dataVizExtn = await viewer.loadExtension(
-        "Autodesk.DataVisualization"
-      );
-      const DataVizCore = Autodesk.DataVisualization.Core;
-      const viewableType = DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
-      const spriteColor = new THREE.Color(0xff8c00);
-      // const highlightedColor = new THREE.Color(0xe0e0ff);
-      let spriteIcon = "/file/img/forge/sensor_circle.svg";
-      if (location.href.indexOf("localhost:5966") != -1) {
-        spriteIcon = "/img/forge/sensor_circle.svg";
-      }
-      const style = new DataVizCore.ViewableStyle(
-        viewableType,
-        spriteColor,
-        spriteIcon
-      );
-      const viewableData = new DataVizCore.ViewableData();
-      viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
-      this.deviceList.forEach((myData, index) => {
-        const dbId = myData.forge_dbid;
-        const myPosition = myData.position;
-        const viewable = new DataVizCore.SpriteViewable(
-          myPosition,
-          style,
-          dbId
+    #init = async function () {
+        // 系統大類、小類固定
+        this.ordPath.system_tag = this.sysMainTag;
+        this.ordPath.name_tag = this.sysSubTag;
+        this.dataVizExtn = await this.viewer.loadExtension(
+            "Autodesk.DataVisualization"
         );
-        myData._dbId = dbId;
-        viewableData.addViewable(viewable);
-      });
-      await viewableData.finish();
-      dataVizExtn.addViewables(viewableData);
-      viewer.addEventListener(
-        DataVizCore.MOUSE_CLICK,
-        this.onSpriteClicked.bind(this)
-      ); // SPRITE_SELECTED
-      // viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
-    }
-  }
-  // ---------------- 熱點點擊事件 --------------------
-  onSpriteClicked(event) {
-    event.hasStopped = true;
-    const dbIdStart = 10;
-    if (event != undefined && event != null) {
-      if (event.dbId >= dbIdStart) {
-        let myData = this.deviceList.find((x) => x.forge_dbid == event.dbId);
-        console.log("site", myData);
-        // this.changeColorForSensorHotspot(event.dbId, this.tempVal);
-        myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備
-        myData &&
-          $(this.selector).trigger("autodesk:click:sprite", { event, myData });
-      } else {
-        $(this.selector).trigger("autodesk:clickOut:sprite", { event });
-      }
-    }
-  }
+        this.DataVizCore = Autodesk.DataVisualization.Core;
+        await this.registerHotPoint();
+        this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35);
+        this.elevCb && this.elevCb();
+        this.subSensorDevice();
+    };
 
-  // 改變熱點位置
-  async changePos(dbId, positionZ) {
-    const dataVizExtn = await viewer.loadExtension(
-      "Autodesk.DataVisualization"
-    );
-    dataVizExtn?.invalidateViewables(dbId, (viewable) => {
-      // console.log(viewable._position)
-      const z = viewable._position.z + positionZ;
-      const newPos = { ...viewable._position, z };
-      return {
-        // Move the viewable to a new location.
-        position: newPos,
-      };
-    });
-  }
+    // // 建立熱點
+    // async addHotPoint() {
 
-  // 溫度感測器 sprite 隨溫度變化
-  static lowerTempForSensor = [];
-  static normalTempForSensor = [];
-  static highTempForSensor = [];
-  static highestTempForSensor = [];
+    //     // this.dataVizExtn.removeAllViewables()
+    //     await this.registerHotPoint()
+    //     this.subSensorDevice();
+    //     // console.log("2",this.dataVizExtn)
+    // }
 
-  async addSensorHotspotList(dbid, temp) {
-    let index = Math.floor(temp / 10) - 1 || 0;
-
-    // 清空資料
-    Forge3DSensor.lowerTempForSensor = Forge3DSensor.lowerTempForSensor.filter(
-      (point) => point !== dbid
-    );
-    Forge3DSensor.normalTempForSensor =
-      Forge3DSensor.normalTempForSensor.filter((point) => point !== dbid);
-    Forge3DSensor.highTempForSensor = Forge3DSensor.highTempForSensor.filter(
-      (point) => point !== dbid
-    );
-    Forge3DSensor.highestTempForSensor =
-      Forge3DSensor.highestTempForSensor.filter((point) => point !== dbid);
-
-    const temps = [
-      new THREE.Color(0x00009c),
-      new THREE.Color(0xffff31),
-      new THREE.Color(0xff8c00),
-      new THREE.Color(0xff0000),
-    ];
-
-    switch (index) {
-      case -1:
-        Forge3DSensor.lowerTempForSensor.push(dbid);
-        break;
-      case 0:
-        Forge3DSensor.lowerTempForSensor.push(dbid);
-        break;
-      case 1:
-        Forge3DSensor.normalTempForSensor.push(dbid);
-        break;
-      case 2:
-        Forge3DSensor.highTempForSensor.push(dbid);
-        break;
-      case 3:
-        Forge3DSensor.highestTempForSensor.push(dbid);
-        break;
-      default:
-        Forge3DSensor.highTempForSensor.push(dbid);
-        break;
-    }
-    if (
-      (Forge3DSensor.lowerTempForSensor.length,
-        Forge3DSensor.normalTempForSensor.length,
-        Forge3DSensor.highTempForSensor.length,
-        Forge3DSensor.highestTempForSensor.length,
-        allDevList.length)
-    ) {
-      await this.changeColorForSensorHotspot(
-        Forge3DSensor.lowerTempForSensor,
-        temps[0]
-      );
-      await this.changeColorForSensorHotspot(
-        Forge3DSensor.normalTempForSensor,
-        temps[1]
-      );
-      await this.changeColorForSensorHotspot(
-        Forge3DSensor.highTempForSensor,
-        temps[2]
-      );
-      await this.changeColorForSensorHotspot(
-        Forge3DSensor.highestTempForSensor,
-        temps[3]
-      );
-    }
-  }
-
-  async changeColorForSensorHotspot(viewablesToUpdate, color) {
-    const dataVizExtn = await viewer.loadExtension(
-      "Autodesk.DataVisualization"
-    );
-    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
-      return {
-        color: color,
-      };
-    });
-  }
-
-  // 訂閱sensor設備
-  subSensorDevice() {
-    let myBaja = new subscriptionDevices();
-    myBaja.setSubscribeDevicesByBql(this.ordPath);
-
-    myBaja.setSubscribeDevicesCallBack((data) => {
-      this.bajaChaCallback ? this.bajaChaCallback(data) : "";
-      if (this.curDevice == null) {
-        return false;
-      }
-
-      data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
-
-      //將訂閱值塞入 subDeviceData
-      if (
-        this.subDeviceData.findIndex(
-          (d) => d.device_number == this.curDevice.id
-        ) == -1
-      ) {
-        let obj = {};
-        obj.device_number = this.curDevice.id;
-        obj.dbid = this.curDevice.roomDbId;
-        this.subDeviceData.push(obj);
-      }
-      let subData = this.subDeviceData.find(
-        (x) => x.device_number == this.curDevice.id
-      );
-
-      if (subData) {
-        subData = { ...subData, [data.point_name]: data.value };
-      }
-
-      if (data.point_name == "Temp" || data.point_name == "TEMP") {
-        this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
-        this.curDevice = {
-          ...this.curDevice,
-          temp: !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
-        };
-
-        if (data.device_number_full === this.curDevice.id) {
-          this.addSensorHotspotList(
-            this.curDevice.forge_dbid,
-            this.curDevice.temp
-          );
+    async registerHotPoint(color = "") {
+        var viewer = this.viewer;
+        const viewableType = this.DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
+        const spriteColor = new THREE.Color(0xff8c00);
+        // const highlightedColor = new THREE.Color(0xe0e0ff);
+        let spriteIcon = "/file/img/forge/sensor_circle.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteIcon = "/img/forge/sensor_circle.svg";
         }
-      }
+        const style = new this.DataVizCore.ViewableStyle(
+            viewableType,
+            spriteColor,
+            spriteIcon
+        );
 
-      let matchDevice = allDevList.find(
-        (x) => x.device_number == data.device_number_full
-      );
+        const viewableData = new this.DataVizCore.ViewableData();
+        viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
+        // console.log(this.curDevice, [this.curDevice])
 
-      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 == norDevPoiName &&
-        data.value == matchDevice.device_normal_point_value
-      ) {
+        [this.curDevice].forEach((myData, index) => {
+            // console.log(myData)
+            const dbId = myData.forge_dbid;
+            const myPosition = myData.position;
+            const viewable = new this.DataVizCore.SpriteViewable(
+                myPosition,
+                style,
+                dbId
+            );
+            myData._dbId = dbId;
+            viewableData.addViewable(viewable);
+        });
+        // console.log(viewableData)
+        await viewableData.finish();
+        this.dataVizExtn.addViewables(viewableData);
+        // console.log("1",this.dataVizExtn)
+        viewer.addEventListener(
+            this.DataVizCore.MOUSE_CLICK,
+            this.onSpriteClicked.bind(this)
+        ); // SPRITE_SELECTED
+        // viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
+    }
+    // ---------------- 熱點點擊事件 --------------------
+    onSpriteClicked(event) {
+        console.log(event);
+        event.hasStopped = true;
+        const dbIdStart = 10;
+        if (event != undefined && event != null) {
+            if (event.dbId >= dbIdStart) {
+                let myData = [this.curDevice].filter(
+                    (x) => x.forge_dbid == event.dbId
+                )[0];
+                this.changeColorForSensorHotspot(event.dbId, this.tempVal);
+                moveViewToDevice(myData.forge_dbid); //移動視角至該設備
+                $(this.selector).trigger("autodesk:click:sprite", { event, myData });
+            } else {
+                $(this.selector).trigger("autodesk:clickOut:sprite", { event });
+            }
+        }
+    }
 
-        //顯示正常燈號
-        $(`#${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
-      ) {
+    // 改變熱點位置
+    async changePos(dbId, positionZ) {
+        // const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization") || this.dataVizExtn;
+        this.dataVizExtn?.invalidateViewables(dbId, (viewable) => {
+            // console.log(viewable._position)
+            const z = viewable._position.z + positionZ;
+            const newPos = { ...viewable._position, z };
+            return {
+                // Move the viewable to a new location.
+                position: newPos,
+            };
+        });
+    }
 
-        $(`#${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");
-      }
+    // 熱點 更換顏色---環境感知器
+    async changeColorForSensorHotspot(dbId, temp, type = "") {
+        // const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+        const temps = [
+            new THREE.Color(0x00009c),
+            new THREE.Color(0xffff31),
+            new THREE.Color(0xff8c00),
+            new THREE.Color(0xff0000),
+        ];
+        let index = Math.floor(temp / 10) - 1 || 0;
+        if (index > 3) {
+            index = 3;
+        }
+        const viewablesToUpdate = dbId;
+        let color = temps[index];
+        // debugger
+        // this.registerHotPoint(color)
+        //   const _this=this
+        //   setInterval(() => {
+        //     _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+        //         return { color: color };
+        //     });
+        //     // sceneUpdated(true)
+        // }, 1000);
+        if (type == "error") {
+            color = new THREE.Color(0xff0000);
+        }
+        this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+            return {
+                color: color,
+            };
+        });
+        // debugger
+        // console.log("3", this.dataVizExtn)
+    }
 
-      setLightColor();
-      setDevItemPoiValBySub(data);
-      $(loadEle).Loading("close");
-    });
+    static deviceScatterNormalArr = [];
+    static deviceScatterCloseArr = [];
+    static deviceScatterErrorArr = [];
 
-    myBaja.setSubscribeDeviceEndCallBack((data) => {
-      if (
-        data.findIndex(
-          (x) => x.point_name == "Temp" || x.point_name == "TEMP"
-        ) != -1
-      ) {
-        // 顯示溫度條
-        showHeat("[name=forgeHeatBar]");
-      }
-    });
-    // window.x = 28
-    // setInterval(()=>{
-    //   this.changeColorForSensorHotspot(this.curDevice.forge_dbid, x++)
-    // }, 2000)
-  }
+    static deviceNormalArr = [];
+    static deviceCloseArr = [];
+
+    // 訂閱sensor設備
+    subSensorDevice() {
+        // console.log("sensor 訂閱")
+        // require(["baja!"], (baja)=>{
+        //   const sub = new baja.subscriber();
+        //   sub.attach("changed",function(){
+        //     console.log(this)
+        //   })
+        //   baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ME/M12/U1F/NA/TH/N1/TEMP").get({subscribe: sub})
+        // })
+
+        let myBaja = new subscriptionDevices();
+        myBaja.setSubscribeDevicesByBql(this.ordPath);
+
+        myBaja.setSubscribeDevicesCallBack((data) => {
+            // console.log(data)
+            this.bajaChaCallback ? this.bajaChaCallback(data) : "";
+            if (this.curDevice == null) {
+                $(loadEle).Loading("close");
+                return false;
+            }
+
+            data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
+
+            //將訂閱值塞入 subDeviceData
+            if (
+                this.subDeviceData.findIndex(
+                    (d) => d.device_number == this.curDevice.id
+                ) == -1
+            ) {
+                let obj = {};
+                obj.device_number = this.curDevice.id;
+                obj.dbid = this.curDevice.roomDbId;
+                this.subDeviceData.push(obj);
+            }
+            let subData = this.subDeviceData.find(
+                (x) =>
+                    x.device_number == this.curDevice.id ||
+                    x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
+            );
+
+            if (subData) {
+                subData[data.point_name] = data.value;
+            }
+            let norDevPoiName = this.curDevice.device_normal_point_name;
+            let cloDevPoiName = this.curDevice.device_close_point_name || "";
+            let errDevPoiName = this.curDevice.device_error_point_name;
+
+            if (data.point_name == "Temp" || data.point_name == "TEMP") {
+                this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
+                // this.heatMap?.changeTemp(
+                //   this.curDevice.id,
+                //   !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
+                // );
+                this.curDevice.temp = this.tempVal;
+                if (
+                    subData &&
+                    subData[this.curDevice.device_error_point_name] ==
+                    this.curDevice.device_error_point_value
+                ) {
+                    this.changeColorForSensorHotspot(
+                        this.curDevice.forge_dbid,
+                        this.curDevice.temp,
+                        "error"
+                    );
+                } else {
+                    this.changeColorForSensorHotspot(
+                        this.curDevice.forge_dbid,
+                        parseInt(data.value)
+                    );
+                }
+                // changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
+            }
+
+            if (
+                data.point_name == norDevPoiName &&
+                data.value == this.curDevice.device_normal_point_value &&
+                !Forge3DSensor.deviceNormalArr.some(
+                    ({ device_number }) => device_number === this.curDevice.device_number
+                )
+            ) {
+                //顯示正常燈號
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-type", "normal")
+                    .data("light-type", "normal");
+
+                Forge3DSensor.deviceNormalArr.push(this.curDevice);
+                Forge3DSensor.deviceCloseArr = Forge3DSensor.deviceCloseArr.filter(
+                    (device) => device.spriteDbid !== this.curDevice.spriteDbid
+                );
+            } else if (
+                data.point_name == cloDevPoiName &&
+                data.value == this.curDevice.device_close_point_value &&
+                !Forge3DSensor.deviceCloseArr.some(
+                    ({ device_number }) => device_number === this.curDevice.device_number
+                )
+            ) {
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-type", "close")
+                    .data("light-type", "close");
+
+                Forge3DSensor.deviceCloseArr.push(this.curDevice);
+                Forge3DSensor.deviceNormalArr = Forge3DSensor.deviceNormalArr.filter(
+                    (device) => device.spriteDbid !== this.curDevice.spriteDbid
+                );
+            }
+
+            if (
+                data.point_name == errDevPoiName &&
+                data.value == this.curDevice.device_error_point_value &&
+                !alarmDbIdList.some(
+                    (device) => device.device_number === this.curDevice.device_number
+                )
+            ) {
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-error-type", "error")
+                    .data("light-error-type", "error");
+
+                alarmDbIdList.push(this.curDevice);
+            } else if (
+                data.point_name == errDevPoiName &&
+                data.value !== this.curDevice.device_error_point_value
+            ) {
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-error-type", "")
+                    .data("light-error-type", "");
+                alarmDbIdList = alarmDbIdList.filter(
+                    (device) => device.device_number !== this.curDevice.device_number
+                );
+            }
+
+            if (
+                Forge3DSensor.deviceCloseArr.length === 0 &&
+                alarmDbIdList.some(
+                    (device) => device.device_number === this.curDevice.device_number
+                )
+            ) {
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-type", "error")
+                    .data("light-type", "error");
+            }
+            setLightColor();
+
+            if (pageAct.floTag) {
+                const option = floChart.getOption();
+
+                if (!alarmDbIdList.some(a => a.device_number === this.curDevice.device_number)) {
+                    this.deviceList.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;
+                        if (cur) {
+                            cur.itemStyle = { color: normalColor };
+                        }
+                    });
+                } else {
+                    alarmDbIdList.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;
+
+                        if (cur) {
+                            cur.itemStyle = { color: errColor };
+                        }
+                    });
+                }
+                floChart.setOption(option);
+            }
+            $(loadEle).Loading("close");
+            setDevItemPoiValBySub(data);
+        });
+
+        myBaja.setSubscribeDeviceEndCallBack((data) => {
+            if (
+                data.findIndex(
+                    (x) => x.point_name == "Temp" || x.point_name == "TEMP"
+                ) != -1
+            ) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
+        });
+        // window.x = 28
+        // setInterval(()=>{
+        //   this.changeColorForSensorHotspot(this.curDevice.forge_dbid, x++)
+        // }, 2000)
+    }
 }