From ead6a13f4bad554fddd9b4918a0f2f8716b0090e Mon Sep 17 00:00:00 2001
From: dev01 <dev01@yourteam.tw>
Date: Mon, 24 Apr 2023 12:00:23 +0800
Subject: [PATCH] =?UTF-8?q?[=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7]=20?=
 =?UTF-8?q?=E5=90=84=E6=A8=93=E5=B1=A4=E4=B8=8A=E6=96=B9=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=87=88=E8=99=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysMonAll.html   | 1592 ++++++++--------
 Frontend/_sysMonFloor.html | 3207 ++++++++++++++++----------------
 Frontend/index.html        | 3589 ++++++++++++++++++++----------------
 3 files changed, 4407 insertions(+), 3981 deletions(-)

diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index 6c1e372..c21e0ac 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -1,871 +1,853 @@
 <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 -->
-<div class="modal fade"
-     id="lightSchModal"
-     tabindex="-1"
-     role="dialog"
-     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>
+<div
+  class="modal fade"
+  id="lightSchModal"
+  tabindex="-1"
+  role="dialog"
+  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>
+  </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 () {
-        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 () {
+    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;
+        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 == "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)
+          lightOnHotColorArr.push(matchDevice.spriteDbid);
+          heatMap?.changeTemp(matchDevice.device_number, 40);
+        } else {
+          setLightValues(matchDevice.device_guid, 0, 0xffffff);
+          // changeColorForHotspot(matchDevice.spriteDbid)
+          lightOnHotColorArr = lightOnHotColorArr.filter(
+            (light) => light !== matchDevice.spriteDbid
+          );
+          lightOffHotColorArr.push(matchDevice.spriteDbid);
+          heatMap?.changeTemp(matchDevice.device_number, 0);
         }
+      }
 
-        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 == "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)
-                    lightOnHotColorArr.push(matchDevice.spriteDbid);
-                    heatMap?.changeTemp(matchDevice.device_number, 40);
-                } else {
-                    setLightValues(matchDevice.device_guid, 0, 0xffffff);
-                    // changeColorForHotspot(matchDevice.spriteDbid)
-                    lightOnHotColorArr = lightOnHotColorArr.filter(
-                        (light) => light !== matchDevice.spriteDbid
-                    );
-                    lightOffHotColorArr.push(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;
-            }
-            console.log(matchDevice, data)
-            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");
-            }
-
-            changeColorForHotspot(lightOnHotColorArr, null, true);
-            changeColorForHotspot(lightOffHotColorArr, null, false);
-            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 (data.point_name == "Temp") {
+        heatMap?.changeTemp(
+          data.device_number_full,
+          !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
         );
-        if (pointSpan && pointSpan.data("point") == data.point_name) {
-            // console.log(data)
-            pointSpan.text(data.value);
-        }
-    }
-
-    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");
-            }
-        });
-    }
-
-    // 設置昇位圖上方 燈號
-    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 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
+        let devIdx = allDevList.findIndex(
+          (x) => x.device_number == data.device_number_full
         );
-        if (tarDevItem && tarDevItem[0]) {
-            return tarDevItem[0];
-        }
-        return null;
-    }
+        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");
+      }
 
-    // 取得設備列表 並繪製卡片
-    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}">
+      changeColorForHotspot(lightOnHotColorArr, null, true);
+      changeColorForHotspot(lightOffHotColorArr, null, false);
+      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);
+    }
+  }
+
+  /* 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");
+      }
+    });
+  } */
+
+  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="...">
+                                                        <img src="${
+                                                          baseImgUrl +
+                                                          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>
+                                                    <a name="devItemName" data-number="${
+                                                      devObj.device_number
+                                                    }" 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>
-                                                <span class="${devItem ? "" : "d-none"
-                                } 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>
+                                                <span id="${
+                                                  devObj.device_number
+                                                }_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>
+                                                <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>
                                             </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) {
+    $(loadEle).Loading("start");
+    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]);
         }
 
-        return strHtml;
-    }
-
-    function iframeResize(obj) {
-        obj.style.height =
-            obj.contentWindow.document.documentElement.scrollHeight + "px";
-    }
-
-    function show3DModel(urn) {
-        $(loadEle).Loading("start");
-        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]);
-                }
-
-                $(loadEle).Loading("close");
-                let sensorObjs = [];
-                let devices = [];
-                if (pageAct.sysSubTag === "M12") {
-                    addHotPoint(viewer);
-                    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();
-                                }
-                                : 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 forge3DElev = new Forge3DElevFull(elevOption);
-                        forge3DElev.bajaEndCallback = function () {
-                            endPageLoading();
-                        };
-                        forge3DElev.init();
-                    }
-                }
-
-                let option = {
-                    devices: devices,
-                };
-
-                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();
+        $(loadEle).Loading("close");
+        let sensorObjs = [];
+        let devices = [];
+        if (pageAct.sysSubTag === "M12") {
+          addHotPoint(viewer);
+          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,
                     };
-                }
-                if (subDeviceData.length != 0) {
-                    let stSubArr = subDeviceData.map((x) =>
-                        Object.keys(x)
-                            .filter((y) => y == "ST")
-                            .map((y) => x)
-                    );
 
-                    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);
-                }
-            },
-            () => {
-                $(loadEle).Loading("close");
-            },
-            "[name=forgeViewer]"
-        );
-    }
-
-    // 供水系統 - 取得欲染色 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) {
-
-        //     } 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);
-        }
-    }
-
-    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);
-                }
+                    // 電梯移動訂閱程序載入
+                    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),
+              })),
             });
-            $(ele).data("dbId", 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),
+            };
+          });
 
-    onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
-        forgeUnFocusAll();
-    });
+          if (
+            (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
+            elevatorShow
+          ) {
+            let elevOption = {
+              selector: "[name=forgeViewer]",
+              viewer: viewer,
+              ordPath: {
+                area_tag: pageAct.AreaTag,
+                building_tag: pageAct.buiTag,
+              },
+            };
 
-    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);
+            // 電梯移動訂閱程序載入
+            let forge3DElev = new Forge3DElevFull(elevOption);
+            forge3DElev.bajaEndCallback = function () {
+              endPageLoading();
+            };
+            forge3DElev.init();
+          }
+        }
+
+        let option = {
+          devices: devices,
+        };
+
+        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)
+          );
+
+          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);
+        }
+      },
+      () => {
+        $(loadEle).Loading("close");
+      },
+      "[name=forgeViewer]"
+    );
+  }
+
+  // 供水系統 - 取得欲染色 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) {
+
+    //     } 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);
     }
+  }
+
+  var parentEle = "";
+  onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
+    forgeUnFocusAll();
+    let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
+    let position = [rect.left + rect.width / 2, rect.top + rect.height / 3];
+    // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
+    let devObj = obj.myData;
+    let name =
+      allDevList.filter((x) => x.device_guid == devObj.device_guid)[0]
+        ?.full_name || devObj.full_name;
+    devObj.full_name = name;
+    parentEle = crePosPopover(position, devObj);
+    $(parentEle).click();
+  });
+
+  onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
+    $(parentEle).YTTooltip("hide");
+  });
+
+  onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
+    $("#floDevList a[name=devItem]").each((idx, ele) => {
+      let devNum = $(ele).data("number");
+      let dbid = obj.myDataList.filter((x) => x.device_number == devNum)[0]
+        ?._dbId;
+      allDevList.forEach((dev, idx) => {
+        if (dev.device_number == devNum) {
+          dev.spriteDbid = dbid;
+          setForgeHotSpotColor(dev);
+        }
+      });
+      $(ele).data("dbId", dbid);
+    });
+  });
+
+  onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
+    forgeUnFocusAll();
+  });
+
+  function forgeUnFocusAll() {
+    $("#floDevList a[name=devItem]").each((idx, ele) => {
+      const eleDbId = $(ele).data("dbId");
+      if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+        changeScaleForHotspot(eleDbId, false);
+        return;
+      } else {
+        // 3D 熱點解除
+        controlFocusHotspot(eleDbId, false);
+      }
+    });
+  }
 </script>
diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html
index 7dc787e..c2ae7e1 100644
--- a/Frontend/_sysMonFloor.html
+++ b/Frontend/_sysMonFloor.html
@@ -1,12 +1,13 @@
 <style>
-    [id^="yt_tooltip"] {
-        min-width: 520px;
-    }
+  [id^="yt_tooltip"] {
+    min-width: 520px;
+  }
 </style>
 
-<div class="row m-0 mb-3">
-    <button id="resChartZoom" class="btn btn-info">圖檔重置</button>
-</div>
+<!-- <div class="row m-0 mb-3">
+  <button id="resChartZoom" class="btn btn-info">圖檔重置</button>
+</div> -->
+<div id="topLight" class="d-flex mb-4" style="gap: 15px"></div>
 <!-- <div class="row">
   <div id="floChart" style="height : 80vh!important;width:100%"></div>
 </div> -->
@@ -14,1653 +15,1661 @@
   <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>
+  <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>
 
 <!--<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 = 3;
-    $(function () {
-        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 = 3;
+  $(function () {
+    initChart();
+    getFloData();
+    drawHeatBar();
+    getHotspotPoint(() => {
+      show3DModel(pageAct.urn);
     });
-
-    onEvent("click", "#resChartZoom", function () {
-        floChart.setOption({
-            geo: {
-                center: null,
-                zoom: 1.2,
-            },
-        });
-        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();
+    if (!tempSubTag.includes(pageAct.sysSubTag)) {
+      $("#topLight").html(setTopLight());
+      setLightColor();
     }
+  });
 
-    function getDevice(devList) {
-        let selected_floor = devList[0];
-        //let selected_floor_objs = devList.filter(function (item) {
-        //    return item.floor_guid == selected_floor.floor_guid;
-        //});
+  onEvent("click", "#resChartZoom", function () {
+    floChart.setOption({
+      geo: {
+        center: null,
+        zoom: 1.2,
+      },
+    });
+    resetData();
+  });
 
-        //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();
-        //}
-        resetData();
-    }
+    //currentData = selected_floor_objs[0].device;
 
-    function initChart() {
-        let chartDom = $("#floChart")[0];
-        floChart = echarts.init(chartDom, null, { width: "auto" });
-    }
+    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])];
+      }
 
-    function chartHandler(url) {
-        floChart.clear();
+      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);
 
-        $.get(url, function (svg) {
-            if (svg == undefined || svg == null) {
-                return;
+          $.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);
+          //}
 
-            echarts.registerMap("floor_svg", { svg: svg });
+          $.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 = [];
+    }
 
-            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 >
+    // myBaja.setPrepareSubscribeDevices(currentData);
+    // myBaja.setCallBack(mySubscribeDevices);
+
+    //if (datatable_data_list.length > 0) {
+    //    $("#datatablediv").show();
+    //    dataTableDraw();
+    //} else {
+    //    $("#datatablediv").hide();
+    //}
+    resetData();
+  }
+
+  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: 16,
-                        min: 1,
-                    },
-                    layoutSize: "100%",
-                    layoutCenter: [],
-                    zoom: 1.2,
-                    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);
-
-            if (
-                currentData != undefined &&
-                currentData != null &&
-                currentData.length > 0
-            ) {
-                resetData();
             }
+          },
+        },
+        toolbox: {
+          //工具欄
+          show: false,
+        },
+        geo: {
+          map: "floor_svg",
+          roam: true,
+          scaleLimit: {
+            //限制放大縮小倍數
+            max: 16,
+            min: 1,
+          },
+          layoutSize: "100%",
+          layoutCenter: [],
+          zoom: 1.2,
+          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,
+          },
+        ],
+      };
 
-            var ordPath = {
-                building_tag: pageAct.buiTag,
-                system_tag: pageAct.sysMainTag,
-            };
-            //myBaja.setSubscribeDevicesByBql(ordPath);
-            //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
-            let parentEle = null;
-            floChart.on("click", function (params) {
-                console.log("Click1", 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.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) {
+        console.log("Click1", 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(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;
+              }
             });
-
-            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(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);
-            });
-            //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;
-
-                if (zoom <= 2.5) {
-                    /*ResetFloorMap();*/
-                    floChart.setOption({
-                        geo: {
-                            roam: "scale",
-                        },
-                    });
-                } else {
-                    floChart.setOption({
-                        geo: {
-                            roam: true,
-                        },
-                    });
-                }
-
-                resetData();
-            });
-        }).fail(function () {
-            toast_warning("查無該樓層地圖");
-            floChart.clear();
+            cData._dbId = dbid;
+            cData.spriteDbid = dbid;
+            setForgeHotSpotColor(cData);
+          });
         });
+        floChart.setOption(option);
+      });
+      //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;
+
+        if (zoom <= 2.5) {
+          /*ResetFloorMap();*/
+          floChart.setOption({
+            geo: {
+              roam: "scale",
+            },
+          });
+        } else {
+          floChart.setOption({
+            geo: {
+              roam: true,
+            },
+          });
+        }
+
+        resetData();
+      });
+    }).fail(function () {
+      toast_warning("查無該樓層地圖");
+      floChart.clear();
+    });
+  }
+
+  //baja 訂閱設備
+  function subDevice() {
+    console.log("subDevice 開始");
+    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 lightOnGuidArr = [];
+    let lightOffGuidArr = [];
+    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 == "ONOFF" && pageAct.sysSubTag === "L1") {
+        const lightOn = data.value.includes("true");
+        setLightOpenOrClose(lightOn, matchDevice.device_guid);
+        // console.log("Forge 渲染",data.point_name,lightOn)
+        if (lightOn && matchDevice.spriteDbid) {
+          console.log(lightOn, matchDevice, matchDevice.spriteDbid);
+          // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
+          // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
+          lightOnHotColorArr.push(matchDevice.spriteDbid);
+          lightOffHotColorArr = lightOffHotColorArr.filter(
+            (light) => light !== matchDevice.spriteDbid
+          );
+          heatMap?.changeTemp(matchDevice.device_number, 40);
+        } else if (matchDevice.spriteDbid) {
+          // console.log(lightOn, matchDevice);
+          // setLightValues(matchDevice.device_guid, 0, 0xffffff);
+          // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
+          lightOnHotColorArr = lightOnHotColorArr.filter(
+            (light) => light !== matchDevice.spriteDbid
+          );
+          lightOffHotColorArr.push(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");
+      } 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");
+      }
+      setForgeHotSpotColor(matchDevice);
+
+      console.log(lightOnHotColorArr, lightOffHotColorArr);
+      changeColorForHotspot(lightOnHotColorArr, null, true);
+      changeColorForHotspot(lightOffHotColorArr, null, false);
+    });
+
+    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
+            ) {
+              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 };
+
+        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;
+        }
+
+        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,
+        };
+
+        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;
     }
 
-    //baja 訂閱設備
-    function subDevice() {
-        console.log("subDevice 開始");
-        let floMyBaja = new subscriptionDevices();
-        var ordPath = {
+    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) {
+    $(loadEle).Loading("start");
+    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);
+          }
+        );
+        $(loadEle).Loading("close");
+      });
+
+      setHeatMap();
+
+      if (
+        (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
+        elevatorShow
+      ) {
+        let elevOption = {
+          viewer: viewer,
+          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 forge3DElev = new Forge3DElevFull(elevOption);
+        forge3DElev.bajaEndCallback = function () {
+          endPageLoading();
+        };
+        forge3DElev.init();
+      }
+    });
 
-        // 燈熱點用
-        let lightOnHotColorArr = [];
-        let lightOffHotColorArr = [];
-        // 燈光圈用
-        let lightOnGuidArr = [];
-        let lightOffGuidArr = [];
-        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;
+    subDevice();
+  }
 
-            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;
-            }
+  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"],
+        };
+      });
 
-            if (data.point_name == "ONOFF" && pageAct.sysSubTag === "L1") {
-                const lightOn = data.value.includes("true");
-                setLightOpenOrClose(lightOn, matchDevice.device_guid);
-                // console.log("Forge 渲染",data.point_name,lightOn)
-                if (lightOn && matchDevice.spriteDbid) {
-                    console.log(lightOn, matchDevice, matchDevice.spriteDbid);
-                    // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
-                    // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
-                    lightOnHotColorArr.push(matchDevice.spriteDbid);
-                    lightOffHotColorArr = lightOffHotColorArr.filter(
-                        (light) => light !== matchDevice.spriteDbid
-                    );
-                    heatMap?.changeTemp(matchDevice.device_number, 40);
-                } else if (matchDevice.spriteDbid) {
-                    // console.log(lightOn, matchDevice);
-                    // setLightValues(matchDevice.device_guid, 0, 0xffffff);
-                    // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
-                    lightOnHotColorArr = lightOnHotColorArr.filter(
-                        (light) => light !== matchDevice.spriteDbid
-                    );
-                    lightOffHotColorArr.push(matchDevice.spriteDbid);
-                    heatMap?.changeTemp(matchDevice.device_number, 0);
-                }
-            }
+      let option = {
+        devices: devices,
+      };
 
-            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");
-            }
-            setForgeHotSpotColor(matchDevice);
-
-            console.log(lightOnHotColorArr, lightOffHotColorArr);
-            changeColorForHotspot(lightOnHotColorArr, null, true);
-            changeColorForHotspot(lightOffHotColorArr, null, false);
-        });
-
-        floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
-            endPageLoading();
-            if (
-                pageAct.sysSubTag !== "M12" &&
-                data.findIndex(
-                    (x) => x.point_name == "Temp" || x.point_name == "TEMP"
-                ) != -1
-            ) {
-                // 顯示溫度條
-                showHeat("[name=forgeHeatBar]");
-            }
+      heatMap = new ADHeatMaps(option);
+      heatMap.onComplete = () => {
+        $.each(currentData, (idx, dev) => {
+          heatMap.changeTemp(dev.device_number, dev._temp || 0);
         });
+      };
     }
 
-    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 };
-
-                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;
-                }
-
-                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,
-                };
-
-                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) {
-        $(loadEle).Loading("start");
-        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);
-                    }
-                );
-                $(loadEle).Loading("close");
-            });
-
-            setHeatMap();
-
-            if (
-                (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
-                elevatorShow
-            ) {
+    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 = {
-                    viewer: viewer,
-                    ordPath: {
-                        area_tag: pageAct.AreaTag,
-                        building_tag: pageAct.buiTag,
-                    },
+                  selector: "#forgeViewer",
+                  viewer: viewer,
+                  ordPath: {
+                    area_tag: pageAct.AreaTag,
+                    building_tag: pageAct.buiTag,
+                  },
+                  sensorObjs,
                 };
+
                 // 電梯移動訂閱程序載入
                 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),
+              });
             }
-        });
+          });
 
-        subDevice();
-    }
-
-    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);
-                });
-            };
+          getLightData(myDataList);
+          setHotspotPoint(myDataList);
+          callback ? callback() : "";
         }
+      },
+      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);
+  }
 
-                            // 電梯移動訂閱程序載入
-                            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),
-                    })),
-                });
-            });
+  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;
+          }
         }
-    }
-
-    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() : "";
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    }
-
-    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;
-                    }
-                }
-            });
-        });
-        floChart.setOption(option);
+      });
     });
+    floChart.setOption(option);
+  });
 
-    onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
-        $(parentEle).YTTooltip("hide");
+  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 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);
+  }
 
-    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);
-    }
+  // 解除 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 5aec7d2..f6fa463 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -8,52 +8,102 @@ Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0
 License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
 -->
 <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">
+  <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">
+    <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
+      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">
+    <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
+      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"
+      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
+    <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
 
     * 'header-function-fixed'         - header is in a fixed at all times
     * 'nav-function-fixed'            - left panel is fixed
@@ -78,192 +128,248 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     >>> more settings are described inside documentation page >>>
 -->
 
-<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">
+  <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';
+      /**
+       *	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 || '';
+      var classHolder = document.getElementsByTagName("BODY")[0],
         /**
-         * Load theme options
+         * Load from localstorage
          **/
-        if (themeSettings.themeOptions) {
-            classHolder.className = themeSettings.themeOptions;
-            console.log("%c✔ Theme settings loaded", "color: #148f32");
+        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");
         }
-        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", "");
-        }
-
+        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">
+      <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>
+                <!--<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>
+              </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>
-                    <!--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"
+            <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"
+                  <!--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">
-
+                  <!--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>
+          <!-- 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 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>
@@ -276,427 +382,568 @@ License: You must have a valid license purchased only from wrapbootstrap.com (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>
+          <!-- 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="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="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="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="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="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="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="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="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="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="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>
-                                        </a>
-                                    </li>
-                                </ul>
-                                <div class="filter-message js-filter-message"></div>
-                            </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
+      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="
+                              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="
+                              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="
+                              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="
+                              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="
+                              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="
+                              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="
+                              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="
+                              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="
+                              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>
+                      </a>
+                    </li>
+                  </ul>
+                  <div class="filter-message js-filter-message"></div>
+                </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="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
-
-    </div>
+    <div
+      id="noticeBlock"
+      style="
+        position: fixed;
+        top: 70px;
+        right: 0px;
+        padding: 20px;
+        transition: 0.2s;
+        z-index: 50000;
+        height: 100%;
+      "
+    ></div>
 
     <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
     <!-- END Messenger -->
@@ -724,23 +971,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <!--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>
+    <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 type='text/javascript'>
-        define('niagaraSystemProperties', function () {
-            return {
-            };
-        });
+    <script type="text/javascript">
+      define("niagaraSystemProperties", function () {
+        return {};
+      });
     </script>
     <script src="js/n4js/bajatest.js"></script>
     <script src="js/n4js/electricmeterbaja.js"></script>
@@ -748,429 +991,451 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     <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"];  // 溫度向小類
 
-        /*$('#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 = [];
+      /**
+       * 頁面 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);
+        });
 
         /**
-        * 頁面 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;
+         * 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);
+          });
         }
 
-        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 loadedJsPack() {
+          cookies = new YourTeam.Utility.Cookie();
+          jwt = cookies.get("JWT-Authorization");
+          pageAct.AreaTag = initAreaTag;
+          loadEvent();
 
+          if (!jwt) {
+            if (location.href.indexOf("localhost:5966") != -1) {
+              location.href = "login.html";
             }
-            /**
-             * 第三方套件引用後 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",
+            myBaja = new MyBaja();
+            myBaja.setMyUserAccount(Login);
+          } else {
+            isValidLogin();
+          }
 
-                    ], function () {
-                        require(["init", "site"], loadedJsPack)
-                    });
+          $(loadEle).Loading("close");
+        }
+
+        /**
+         * 登入驗證完成 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);
+          }
 
-            /**
-             * 全數套件讀取完成 Callback
-             * */
-            function loadedJsPack() {
-                cookies = new YourTeam.Utility.Cookie();
-                jwt = cookies.get("JWT-Authorization");
-                pageAct.AreaTag = initAreaTag;
-                loadEvent();
+          timeOutGetData();
 
-                if (!jwt) {
-                    if (location.href.indexOf("localhost:5966") != -1) {
-                        location.href = "login.html";
-                    }
-                    myBaja = new MyBaja();
-                    myBaja.setMyUserAccount(Login);
+          function getBuiList() {
+            let url = baseApiUrl + "/api/Device/GetBuild";
+            ytAjax = new YourTeam.Ajax(
+              url,
+              null,
+              function (res) {
+                if (!res || res.code != "0000" || !res.data) {
                 } else {
-                    isValidLogin();
+                  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();
+          }
 
-                $(loadEle).Loading("close");
+          //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;
             }
-
-            /**
-             * 登入驗證完成 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>`;
-                            })
-                            $("#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);
-                }
+            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();
 
-            // page loaded callback
-            function loadCallback() {
-                initTabsByEle();
-                resetYTTooltip();
-                $("#sysMonTopBtn").YTNavbar("hide");
+            $(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");
             }
+          });
 
-            // 事件先行讀取
-            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();
-                })
-
+          onEvent("yt:tab:change", "#lightSch-tab", function () {
+            if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
+              setLightSchBlcok ? setLightSchBlcok(this) : "";
+              $("#lightSchModal").modal("show");
             }
+          });
 
-            // 登入驗證
-            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";
-                }
-                $.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);
-                    }
-                });
-
+          onEvent(
+            "yt:tab:prechange",
+            "[data-tabname=topFunBtn]",
+            function (e, arg) {
+              if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
+                arg.cancel = true;
+              }
             }
+          );
 
-            //==============================================================================
-            //                       ↓  系統監控 - 共用 Function ↓
-            //==============================================================================
-
-            // 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 = ["設備編號", "設備名稱"];
-
-                $.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");
+          onEvent("scroll", window, function () {
+            if ($(window).scrollTop() != 0) {
+              $("#noticeBlock").css("top", 0);
+            } else {
+              $("#noticeBlock").css("top", 70);
             }
+          });
 
-            // Card - 異常紀錄 block
-            function drawErrRecTabBlo() {
-                let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+          onEvent("click", "#testsysbtn", function () {});
 
-                                                                            </table>`
-                return strHtml;
-            }
+          //onEvent("click", "button[id^=noticeChkBtn]", function () {
+          //    $(this).parents(".toast").YTNotice("hide");
+          //})
 
-            // Card - 運維紀錄 block
-            function drawOpeRecTabBlo() {
-                let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+          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"
+              );
+            });
+          });
 
-                                                                            </table>`
-                return strHtml;
-            }
+          onEvent("click", "#toggleNoticeBtn", function () {
+            chaNoticeConSta();
+          });
 
-            // Card 呈現初始化
-            function initPopover(type = null, extOption = {}, selector = "[name=devItem]") {
-                if (type == null && pageAct.sysMainTag == "LT") {
-                    type = "light";
-                }
+          $(window).on("timeout:3s", function () {
+            getSystemAlarmByBaja((data) => {
+              if (typeof getAlarmSub != "undefined" && getAlarmSub) {
+                getAlarmSub(data);
+              }
 
-                $(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>` : "";
+              alarmIconBlink();
+            });
+            getAlarm();
+          });
+        }
 
-                    let option = {
-                        html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
+        // 登入驗證
+        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";
+          }
+          $.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);
+            },
+          });
+        }
+
+        //==============================================================================
+        //                       ↓  系統監控 - 共用 Function ↓
+        //==============================================================================
+
+        // 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 = ["設備編號", "設備名稱"];
+
+          $.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";
+          }
+
+          $(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;">
@@ -1210,405 +1475,523 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                             </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 = $(oriEle).data("dbId")
-                            if (eleDbId) {
-                                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
-                                    changeScaleForHotspot(eleDbId)
-                                }
-                                else {
-                                    controlFocusHotspot(eleDbId);
-                                }
-                            }
-                            // 3D 視角 ZOOM IN 聚焦
-
-                            if (devObj) {
-                                moveViewToDevice(devObj?.forge_dbid);
-                            }
-
-                            // 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)
-
-                            //     //     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);
-                                }
-                            }
-                            // sysMonFloor Echart 解除 focus
-                            typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
-                        }
-                    };
-
-                    $.extend(option, extOption);
-
-                    $(ele).YTTooltip(option);
-                })
-            }
-
-            // 卡片設備名稱點擊事件
-            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();
+              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);
+                  }
                 }
-                let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
-                let tag = "#opeRecTable";
+                // 3D 視角 ZOOM IN 聚焦
 
-                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>");
-            }
-
-            function loadLightSchTable(devGuid) {
-
-                /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
-                let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
-                let tag = "#lightSchTable";
-
-                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) {
-                // console.log("dbId", alarmDbIdList,dbId)
-                pageAct.sysSubTag !== "L1" && 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();
+                if (devObj) {
+                  console.log("devObj", devObj);
+                  moveViewToDevice(devObj?.forge_dbid);
                 }
 
-                let tag = "#errRecTable";
-                let datas;
+                // 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": "15%", "sortable": true },
-                    { "targets": [1], "width": "25%", "sortable": true },
-                    { "targets": [2], "width": "25%", "sortable": true },
-                    { "targets": [3], "width": "35%", "sortable": true },
-                ];
+                //     //     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);
+                  }
+                }
+                // sysMonFloor Echart 解除 focus
+                typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
+              },
+            };
 
-                let columns = [
-                    {
-                        "title": "異常ID",
-                        "data": "uuid",
+            $.extend(option, extOption);
 
-                    },
-                    {
-                        "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() {
-                $(".dev-card").each((index, ele) => {
-                    let type = $(ele).find("[data-light-type]").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).find("[data-light-type]").css("background-color", color);
-                    //是否閃爍
-                    if (isFlashing) {
-                        $(ele).addClass("light-flash");
-                    }
-                })
-            }
-
-            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);
-                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");
+            $(ele).YTTooltip(option);
+          });
         }
 
-        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 devItemNameEvent() {
+          onEvent("click", "[name=devItemName]", function () {
+            let devNum = $(this).data("number");
+            let devObj = $(`[name=devItem][data-number=${devNum}]`).data(
+              "devobj"
+            );
+            moveViewToDevice(devObj.forge_dbid);
+          });
         }
 
-        function getDevItem() {
-            let url = baseApiUrl + "/api/Device/GetDeviceItem";
+        // Card - 運維紀錄 Table
+        function loadOpeRecTable(devGuid) {
+          if (opeRecTable) {
+            opeRecTable.destroy();
+          }
+          let url =
+            baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
+          let tag = "#opeRecTable";
 
-            objSendData.Data = {
-                main_system_tag: pageAct.sysMainTag,
-                sub_system_tag: pageAct.sysSubTag,
+          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>"
+          );
+        }
+
+        function loadLightSchTable(devGuid) {
+          /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
+          let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
+          let tag = "#lightSchTable";
+
+          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;
             }
-            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");
+            $(ele).css("background-color", color);
+            //是否閃爍
+            if (isFlashing) {
+              $(ele).parents(".device-wrap").addClass("light-flash");
             } else {
-                $(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
+              $(ele).parents(".device-wrap").removeClass("light-flash");
             }
+          });
         }
 
-        function timeOutGetData() {
-            let timeOut3s = null, timeOut5m = null;
-            let events = $._data($(window)[0], "events");
+        // 設置昇位圖上方 燈號
+        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>`;
+          }
 
-            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]);
+          return strHtml;
         }
 
-        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 crePosPopover(position, obj) {
+          console.log("obj", 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;
         }
 
-        function startPageLoading() {
-            if (!loadingTip) {
-                loadingTip = YT.Alert.Tip("資料讀取中...", "show");
+        // 設置 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);
         }
 
-        function endPageLoading() {
-            if (loadingTip != null) {
-                $(loadingTip.ele).YTAlert().hide();
-                loadingTip = null;
+        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 iniFroList() {
-            url = baseApiUrl + '/api/GetUsrFroList'
-            let hasMonitor = false;
+      function endPageLoading() {
+        if (loadingTip != null) {
+          $(loadingTip.ele).YTAlert().hide();
+          loadingTip = null;
+        }
+      }
 
-            ytAjax = new YourTeam.Ajax(url, null, function (res) {
-                if (!res || res.code != "0000" || !res.data) {
+      function iniFroList() {
+        url = baseApiUrl + "/api/GetUsrFroList";
+        let hasMonitor = false;
 
-                } else {
-                    let strHtml = `<div class="btn-group mx-4">
+        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>
@@ -1619,224 +2002,276 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                                         </div>-->
                                                                     </div>`;
 
-                    $.each(res.data, function (i, v) {
-                        if (v.authCode == 'PF1') {
-                            strHtml += `<div class="btn-group mx-4" >
+              $.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">
+                  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) {
+              $("#froLisPage").html(strHtml);
+              $("#sysMonTopBtn").YTNavbar("init");
+            }
+          },
+          null,
+          "POST"
+        ).send();
+      }
 
-                } 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();
-                }
+      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 {
-                if ($("#noticeBlock").is(":visible")) {
-                    setHide();
-                } else if (!$("#noticeBlock").is(":visible")) {
-                    setShow();
+              $("#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);
+              });
 
-            function setShow() {
-                $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-                $("#noticeConIcon").addClass(iconArr[0]);
-                $("#noticeBlock").show();
-                $("#noticeBlock").animate({ opacity: 1 }, 200)
-                localStorage.setItem("noticeStatus", "show");
+              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 setHide() {
-                $("#toggleNoticeBtn").find("#noticeConText").text(showText);
-                $("#noticeConIcon").addClass(iconArr[1]);
-                $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
-                    $("#noticeBlock").hide();
-                })
-                localStorage.setItem("noticeStatus", "hide");
+      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>
\ No newline at end of file
+  </body>
+  <!-- END Body -->
+</html>