From 4e96375be44d928aa97d4482bd04d6f3f3bb4744 Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Fri, 28 Apr 2023 14:01:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=85=A7=E6=98=8E=E8=A8=AD=E5=82=99=E9=96=8B?=
 =?UTF-8?q?=E9=97=9C=20bug=20=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysMonAll.html     |  179 +-
 Frontend/_sysMonFloor.html   |   22 +-
 Frontend/index.html          | 3999 ++++++++++++++++------------------
 Frontend/js/n4js/bajatest.js | 1155 +++++-----
 Frontend/js/site.js          | 2049 ++++++++---------
 5 files changed, 3653 insertions(+), 3751 deletions(-)

diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index c21e0ac..64c6432 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -6,29 +6,23 @@
 </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 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"
-        >
+        <button type="button"
+                class="close"
+                data-dismiss="modal"
+                aria-label="Close">
           <span aria-hidden="true"><i class="fal fa-times"></i></span>
         </button>
       </div>
@@ -59,6 +53,7 @@
   var forgeInvTypeDef = null;
 
   $(function () {
+    $(loadEle).Loading("start");
     getBuildMenu((arr, data) => {
       buildMenuData = data;
       if (arr.indexOf(4) != -1) {
@@ -162,15 +157,31 @@
         if (lightOn) {
           setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
           // changeColorForHotspot(matchDevice.spriteDbid, null, true)
-          lightOnHotColorArr.push(matchDevice.spriteDbid);
+          if (
+            !lightOnHotColorArr.some(
+              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+            )
+          ) {
+            lightOnHotColorArr.push(matchDevice);
+          }
+          lightOffHotColorArr = lightOffHotColorArr.filter(
+            (light) => light.spriteDbid !== matchDevice.spriteDbid
+          );
           heatMap?.changeTemp(matchDevice.device_number, 40);
         } else {
           setLightValues(matchDevice.device_guid, 0, 0xffffff);
           // changeColorForHotspot(matchDevice.spriteDbid)
+          if (
+            !lightOffHotColorArr.some(
+              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+            )
+          ) {
+            lightOffHotColorArr.push(matchDevice);
+          }
           lightOnHotColorArr = lightOnHotColorArr.filter(
-            (light) => light !== matchDevice.spriteDbid
+            (light) => light.spriteDbid !== matchDevice.spriteDbid
           );
-          lightOffHotColorArr.push(matchDevice.spriteDbid);
+
           heatMap?.changeTemp(matchDevice.device_number, 0);
         }
       }
@@ -187,7 +198,6 @@
           ? parseInt(data.value)
           : 0;
       }
-      
       if (
         data.point_name == norDevPoiName &&
         data.value == matchDevice.device_normal_point_value
@@ -211,9 +221,24 @@
           .attr("data-light-type", "error")
           .data("light-type", "error");
       }
+      if (
+        allDevList.length ===
+        lightOnHotColorArr.length + lightOffHotColorArr.length
+      ) {
+        changeColorForHotspot(
+          lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
+          null,
+          true
+        );
+        changeColorForHotspot(
+          lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
+          null,
+          false
+        );
+
+      }
+      $(loadEle).Loading("close");
 
-      changeColorForHotspot(lightOnHotColorArr, null, true);
-      changeColorForHotspot(lightOffHotColorArr, null, false);
       setLightColor();
       setForgeHotSpotColor(matchDevice);
       lightDevForgeSpotLig(matchDevice);
@@ -230,7 +255,7 @@
     });
   }
 
-  function lightDevForgeSpotLig(devObj) {}
+  function lightDevForgeSpotLig(devObj) { }
 
   // 從設備訂閱更新每個設備卡片即時點位
   function setDevItemPoiValBySub(data) {
@@ -289,7 +314,7 @@
     if (
       subData &&
       subData[device.device_error_point_name] ==
-        device.device_error_point_value &&
+      device.device_error_point_value &&
       (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
     ) {
       const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
@@ -299,7 +324,7 @@
     } else if (
       subData &&
       subData[device.device_error_point_name] !==
-        device.device_error_point_value &&
+      device.device_error_point_value &&
       (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))
     ) {
       const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId);
@@ -342,44 +367,33 @@
             $.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}">
+              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>`;
@@ -469,9 +483,9 @@
 
           callback
             ? callback(
-                [res.data.left_drawing, res.data.right_drawing],
-                res.data
-              )
+              [res.data.left_drawing, res.data.right_drawing],
+              res.data
+            )
             : "";
         }
       },
@@ -511,12 +525,11 @@
   }
 
   function show3DModel(urn) {
-    $(loadEle).Loading("start");
     launchViewerForHotspot(
       urn,
       (viewer, nodeIds) => {
         // 隱藏 toolbar
-        // document.querySelector("#guiviewer3d-toolbar").style.display = "none";
+        document.querySelector("#guiviewer3d-toolbar").style.display = "none";
         let devDbIds = allDevList.map((x) => x.forge_dbid);
         // 大類
         let subDevDbId = [];
@@ -534,11 +547,11 @@
           setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
         }
 
-        $(loadEle).Loading("close");
         let sensorObjs = [];
         let devices = [];
         if (pageAct.sysSubTag === "M12") {
           addHotPoint(viewer);
+          Forge3DSensor.sensorTimes = 0;
           allDevList.forEach((device) => {
             Forge3DSensor.sensorTimes++;
             const sensorObj = new Forge3DSensor({
@@ -550,23 +563,23 @@
               selector: "[name=forgeViewer]",
               elevCb: elevatorShow
                 ? () => {
-                    let elevOption = {
-                      selector: "[name=forgeViewer]",
-                      viewer: viewer,
-                      ordPath: {
-                        area_tag: pageAct.AreaTag,
-                        building_tag: pageAct.buiTag,
-                      },
-                      sensorObjs,
-                    };
+                  let elevOption = {
+                    selector: "[name=forgeViewer]",
+                    viewer: viewer,
+                    ordPath: {
+                      area_tag: pageAct.AreaTag,
+                      building_tag: pageAct.buiTag,
+                    },
+                    sensorObjs,
+                  };
 
-                    // 電梯移動訂閱程序載入
-                    let forge3DElev = new Forge3DElevFull(elevOption);
-                    forge3DElev.bajaEndCallback = function () {
-                      endPageLoading();
-                    };
-                    forge3DElev.init();
-                  }
+                  // 電梯移動訂閱程序載入
+                  let forge3DElev = new Forge3DElevFull(elevOption);
+                  forge3DElev.bajaEndCallback = function () {
+                    endPageLoading();
+                  };
+                  forge3DElev.init();
+                }
                 : null,
               curDevice: {
                 ...device,
@@ -670,9 +683,7 @@
           getE1NodeId(viewer);
         }
       },
-      () => {
-        $(loadEle).Loading("close");
-      },
+      () => { },
       "[name=forgeViewer]"
     );
   }
diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html
index f53807c..969b9de 100644
--- a/Frontend/_sysMonFloor.html
+++ b/Frontend/_sysMonFloor.html
@@ -49,7 +49,7 @@
     getHotspotPoint(() => {
       show3DModel(pageAct.urn);
     });
-    if (!tempSubTag.includes(pageAct.sysSubTag)) {
+    if (tempSubTag.includes(pageAct.sysSubTag)) {
       $("#topLight").html(setTopLight());
       setLightColor();
     }
@@ -573,7 +573,13 @@
         if (lightOn && matchDevice.spriteDbid) {
           // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
           // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
-          lightOnHotColorArr.push(matchDevice);
+          if (
+            !lightOnHotColorArr.some(
+              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+            )
+          ) {
+            lightOnHotColorArr.push(matchDevice);
+          }
           lightOffHotColorArr = lightOffHotColorArr.filter(
             (light) => light.spriteDbid !== matchDevice.spriteDbid
           );
@@ -582,10 +588,16 @@
           // console.log(lightOn, matchDevice);
           // setLightValues(matchDevice.device_guid, 0, 0xffffff);
           // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
+          if (
+            !lightOffHotColorArr.some(
+              ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
+            )
+          ) {
+            lightOffHotColorArr.push(matchDevice);
+          }
           lightOnHotColorArr = lightOnHotColorArr.filter(
             (light) => light.spriteDbid !== matchDevice.spriteDbid
           );
-          lightOffHotColorArr.push(matchDevice);
           heatMap?.changeTemp(matchDevice.device_number, 0);
         }
       }
@@ -681,7 +693,6 @@
         deviceScatterErrorArr.length ===
         option.series[0].data.length
       ) {
-        console.log("deviceScatterNormalArr", deviceScatterNormalArr)
         deviceScatterNormalArr.forEach((device) => {
           const cur = option.series[0].data.find(
             ({ device_number }) => device_number === device.device_number
@@ -693,7 +704,6 @@
           cur.itemStyle = { color: normalColor };
         });
 
-
         deviceScatterCloseArr.forEach((device) => {
           const cur = option.series[0].data.find(
             ({ device_number }) => device_number === device.device_number
@@ -1150,7 +1160,7 @@
         };
 
         obj.itemStyle = {
-          color: item.device_color || item.device_normal_color,
+          color: item.device_color || item.device_close_color,
         };
 
         res.push(obj);
diff --git a/Frontend/index.html b/Frontend/index.html
index f6fa463..b983e40 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -8,102 +8,72 @@ 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"
-    />
-    <!-- Call App Mode on ios devices -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <!-- Remove Tap Highlight on Windows Phone IE -->
-    <meta name="msapplication-tap-highlight" content="no" />
-    <!-- base css -->
-    <link
-      id="vendorsbundle"
-      rel="stylesheet"
-      media="screen, print"
-      href="lib/vendors.bundle.css"
-    />
-    <link
-      id="appbundle"
-      rel="stylesheet"
-      media="screen, print"
-      href="lib/app.bundle.css"
-    />
-    <link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
-    <link
-      id="myskin"
-      rel="stylesheet"
-      media="screen, print"
-      href="lib/skins/skin-master.css"
-    />
-    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
-    <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
-    <!-- Place favicon.ico in the root directory -->
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="img/favicon/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="img/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="mask-icon"
-      href="img/favicon/safari-pinned-tab.svg"
-      color="#5bbad5"
-    />
-    <!-- Font Awesome -->
-    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
-    <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
+<head>
+  <meta charset="utf-8" />
+  <title>Marketing Dashboard - Application Intel - SmartAdmin v4.5.1</title>
+  <meta name="description" content="Marketing Dashboard" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui" />
+  <!-- Call App Mode on ios devices -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <!-- Remove Tap Highlight on Windows Phone IE -->
+  <meta name="msapplication-tap-highlight" content="no" />
+  <!-- base css -->
+  <link id="vendorsbundle"
+        rel="stylesheet"
+        media="screen, print"
+        href="lib/vendors.bundle.css" />
+  <link id="appbundle"
+        rel="stylesheet"
+        media="screen, print"
+        href="lib/app.bundle.css" />
+  <link id="mytheme" rel="stylesheet" media="screen, print" href="#" />
+  <link id="myskin"
+        rel="stylesheet"
+        media="screen, print"
+        href="lib/skins/skin-master.css" />
+  <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
+  <link rel="stylesheet" href="lib/dropzone/dropzone.css" />
+  <!-- Place favicon.ico in the root directory -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="img/favicon/apple-touch-icon.png" />
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="img/favicon/favicon-32x32.png" />
+  <link rel="mask-icon"
+        href="img/favicon/safari-pinned-tab.svg"
+        color="#5bbad5" />
+  <!-- Font Awesome -->
+  <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
+  <link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
 
-    <!--<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
-    <link
-      href="lib/jstree-master/themes/default/style.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="lib/jstree-master/themes/default-dark/style.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
-    <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
-    <link
-      rel="stylesheet"
-      media="screen, print"
-      href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"
-    />
-    <link rel="stylesheet" href="css/site.css" />
-    <link
-      rel="stylesheet"
-      href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css"
-    />
-    <link
-      rel="stylesheet"
-      href="css/yourteam/plugins/yt-notice/yt-notice.css"
-    />
-    <link
-      rel="stylesheet"
-      href="css/yourteam/plugins/yt-alert/ytpop-alert.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
-      type="text/css"
-    />
-  </head>
-  <!-- BEGIN Body -->
-  <!-- Possible Classes
+  <!--<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />-->
+  <link href="lib/jstree-master/themes/default/style.min.css"
+        rel="stylesheet" />
+  <link href="lib/jstree-master/themes/default-dark/style.min.css"
+        rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+        rel="stylesheet" />
+  <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
+  <link rel="stylesheet"
+        media="screen, print"
+        href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
+  <link rel="stylesheet" href="css/site.css" />
+  <link rel="stylesheet"
+        href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
+  <link rel="stylesheet"
+        href="css/yourteam/plugins/yt-notice/yt-notice.css" />
+  <link rel="stylesheet"
+        href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
+  <link rel="stylesheet"
+        href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
+        type="text/css" />
+</head>
+<!-- BEGIN Body -->
+<!-- Possible Classes
 
     * 'header-function-fixed'         - header is in a fixed at all times
     * 'nav-function-fixed'            - left panel is fixed
@@ -128,813 +98,688 @@ 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"
-  >
-    <!-- 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";
+<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";
 
-      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");
-      } else {
-        console.log(
-          "%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...",
-          "color: #ed1c24"
-        );
+      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");
       }
-      if (themeSettings.themeURL && !document.getElementById("mytheme")) {
-        var cssfile = document.createElement("link");
-        cssfile.id = "mytheme";
-        cssfile.rel = "stylesheet";
-        cssfile.href = themeURL;
-        document.getElementsByTagName("head")[0].appendChild(cssfile);
-      } else if (themeSettings.themeURL && document.getElementById("mytheme")) {
-        document.getElementById("mytheme").href = themeSettings.themeURL;
-      }
-      /**
-       * Save to localstorage
-       **/
-      var saveSettings = function () {
-        themeSettings.themeOptions = String(classHolder.className)
-          .split(/[^\w-]+/)
-          .filter(function (item) {
-            return /^(nav|header|footer|mod|display)-/i.test(item);
-          })
-          .join(" ");
-        if (document.getElementById("mytheme")) {
-          themeSettings.themeURL = document
-            .getElementById("mytheme")
-            .getAttribute("href");
-        }
-        localStorage.setItem("themeSettings", JSON.stringify(themeSettings));
-      };
-      /**
-       * Reset settings
-       **/
-      var resetSettings = function () {
-        localStorage.setItem("themeSettings", "");
-      };
-    </script>
-    <!-- BEGIN Page Wrapper -->
-    <div class="page-wrapper">
-      <div class="page-inner">
-        <!-- BEGIN Left Aside -->
-        <!-- END Left Aside -->
-        <div class="page-content-wrapper">
-          <!-- BEGIN Page Header -->
-          <header class="page-header" role="banner">
-            <!--we need this logo when user switches to nav-function-top-->
-            <div class="page-logo">
-              <a
-                href="javascript:;"
-                name="topFunBtn"
-                data-page="dashboard"
-                class="page-logo-link press-scale-down d-flex align-items-center position-relative"
-              >
-                <img
-                  src="img/logo.png"
-                  alt="SmartAdmin WebApp"
-                  aria-roledescription="logo"
-                />
+      localStorage.setItem("themeSettings", JSON.stringify(themeSettings));
+    };
+    /**
+     * Reset settings
+     **/
+    var resetSettings = function () {
+      localStorage.setItem("themeSettings", "");
+    };
+  </script>
+  <!-- BEGIN Page Wrapper -->
+  <div class="page-wrapper">
+    <div class="page-inner">
+      <!-- BEGIN Left Aside -->
+      <!-- END Left Aside -->
+      <div class="page-content-wrapper">
+        <!-- BEGIN Page Header -->
+        <header class="page-header" role="banner">
+          <!--we need this logo when user switches to nav-function-top-->
+          <div class="page-logo">
+            <a href="javascript:;"
+               name="topFunBtn"
+               data-page="dashboard"
+               class="page-logo-link press-scale-down d-flex align-items-center position-relative">
+              <img src="img/logo.png"
+                   alt="SmartAdmin WebApp"
+                   aria-roledescription="logo" />
 
-                <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
-                <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
-                            <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
-              </a>
-            </div>
-            <!--DOC: nav menu layout change shortcut-->
-            <div class="hidden-md-down dropdown-icon-menu position-relative">
-              <a
-                href="#"
-                class="header-btn btn js-waves-off"
-                data-action="toggle"
-                data-class="nav-function-hidden"
-                title="Hide Navigation"
-              >
-                <i class="ni ni-menu"></i>
-              </a>
-              <ul>
-                <li>
-                  <a
-                    href="#"
-                    class="btn js-waves-off"
-                    data-action="toggle"
-                    data-class="nav-function-minify"
-                    title="Minify Navigation"
-                  >
-                    <i class="ni ni-minify-nav"></i>
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    class="btn js-waves-off"
-                    data-action="toggle"
-                    data-class="nav-function-fixed"
-                    title="Lock Navigation"
-                  >
-                    <i class="ni ni-lock-nav"></i>
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <!--DOC: mobile button appears during mobile width-->
-            <div class="hidden-lg-up">
-              <a
-                href="#"
-                class="header-btn btn press-scale-down"
-                data-action="toggle"
-                data-class="mobile-nav-on"
-              >
-                <i class="ni ni-menu"></i>
-              </a>
-            </div>
+              <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
+              <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
+                          <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
+            </a>
+          </div>
+          <!--DOC: nav menu layout change shortcut-->
+          <div class="hidden-md-down dropdown-icon-menu position-relative">
+            <a href="#"
+               class="header-btn btn js-waves-off"
+               data-action="toggle"
+               data-class="nav-function-hidden"
+               title="Hide Navigation">
+              <i class="ni ni-menu"></i>
+            </a>
+            <ul>
+              <li>
+                <a href="#"
+                   class="btn js-waves-off"
+                   data-action="toggle"
+                   data-class="nav-function-minify"
+                   title="Minify Navigation">
+                  <i class="ni ni-minify-nav"></i>
+                </a>
+              </li>
+              <li>
+                <a href="#"
+                   class="btn js-waves-off"
+                   data-action="toggle"
+                   data-class="nav-function-fixed"
+                   title="Lock Navigation">
+                  <i class="ni ni-lock-nav"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!--DOC: mobile button appears during mobile width-->
+          <div class="hidden-lg-up">
+            <a href="#"
+               class="header-btn btn press-scale-down"
+               data-action="toggle"
+               data-class="mobile-nav-on">
+              <i class="ni ni-menu"></i>
+            </a>
+          </div>
 
+          <div class="dropdown">
+            <a class="dropdown-toggle fs-1"
+               href="javascript:;"
+               role="button"
+               id="buiActDrop"
+               data-target="buiList"
+               data-toggle="dropdown"
+               aria-haspopup="true">
+            </a>
+            <div id="buiList"
+                 class="dropdown-menu dropdown-select-menu js-auto-close"></div>
+          </div>
+
+          <div class="ml-auto d-flex" id="froLisPage"></div>
+          <div class="ml-auto d-flex mr-3">
             <div class="dropdown">
-              <a
-                class="dropdown-toggle fs-1"
-                href="javascript:;"
-                role="button"
-                id="buiActDrop"
-                data-target="buiList"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-              >
-              </a>
-              <div
-                id="buiList"
-                class="dropdown-menu dropdown-select-menu js-auto-close"
-              ></div>
-            </div>
-
-            <div class="ml-auto d-flex" id="froLisPage"></div>
-            <div class="ml-auto d-flex mr-3">
-              <div class="dropdown">
-                <a
-                  href="javascript:;"
-                  id="toggleNoticeBtn"
-                  class="d-flex align-items-center justify-content-center ml-2"
-                >
-                  <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
-                                alt="Dr. Codex Lantern">-->
-                  <!--you can also add username next to the avatar with the codes below:-->
-                  <div class="row m-0 justify-content-center userblock">
-                    <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
-                    <span
-                      id="noticeConText"
-                      class="text-truncate text-truncate-header hidden-xs-down"
-                      data-hide="隱藏警告"
-                      data-show="顯示警告"
-                    ></span>
-                  </div>
-                </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>
+              <a href="javascript:;"
+                 id="toggleNoticeBtn"
+                 class="d-flex align-items-center justify-content-center ml-2">
+                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                              alt="Dr. Codex Lantern">-->
+                <!--you can also add username next to the avatar with the codes below:-->
+                <div class="row m-0 justify-content-center userblock">
+                  <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
+                  <span id="noticeConText"
+                        class="text-truncate text-truncate-header hidden-xs-down"
+                        data-hide="隱藏警告"
+                        data-show="顯示警告"></span>
                 </div>
+              </a>
+            </div>
+            <!--app user menu-->
+            <div class="dropdown">
+              <a href="#"
+                 data-toggle="dropdown"
+                 data-target="logoutList"
+                 class="d-flex align-items-center justify-content-center ml-2">
+                <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                              alt="Dr. Codex Lantern">-->
+                <!--you can also add username next to the avatar with the codes below:-->
+                <div class="row m-0 justify-content-center userblock">
+                  <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
+                  <span id="usrName"
+                        class="text-truncate text-truncate-header hidden-xs-down"></span>
+                </div>
+              </a>
+              <div id="logoutList"
+                   class="dropdown-menu dropdown-menu-right dropdown-lg">
+                <a id="logout"
+                   href="javascript:;"
+                   class="dropdown-item fw-500 pt-3 pb-3">
+                  <span>登出</span>
+                </a>
               </div>
             </div>
-            <div class="ml-2 text-center">
-              <!-- <label class="mb-0 fs-1-2">
-                Diamond Controls<span class="fs-09 position-absolute"
-                  >®</span
-                > </label
-              ><br /> -->
-              <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
-            </div>
-          </header>
-          <!-- END Page Header -->
-          <!-- BEGIN Page Content -->
-          <!-- the #js-page-content id is needed for some plugins to initialize -->
-          <!--@RenderBody()-->
-          <div id="app"></div>
-
-          <!-- this overlay is activated only when mobile menu is triggered -->
-          <div
-            class="page-content-overlay"
-            data-action="toggle"
-            data-class="mobile-nav-on"
-          ></div>
-
-          <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
-            <div class="yt-navbar-content">
-              <ul id="sysMonBtnList"></ul>
-            </div>
           </div>
-          <!-- END Page Content -->
-          <!-- BEGIN Page Footer -->
-          <!--<footer class="page-footer" role="contentinfo">
-                    <div class="d-flex align-items-center flex-1 text-muted">
-                        <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
-                    </div>
-                    <div>
-                        <ul class="list-table m-0">
-                            <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
-                            <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
-                            <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
-                            <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
-                        </ul>
-                    </div>
-                </footer>-->
-          <!-- END Page Footer -->
-          <!-- BEGIN Shortcuts -->
-          <!-- END Shortcuts -->
-          <!-- BEGIN Color profile -->
-          <!-- this area is hidden and will not be seen on screens or screen readers -->
-          <!-- we use this only for CSS color refernce for JS stuff -->
-          <p id="js-color-profile" class="d-none">
-            <span class="color-primary-50"></span>
-            <span class="color-primary-100"></span>
-            <span class="color-primary-200"></span>
-            <span class="color-primary-300"></span>
-            <span class="color-primary-400"></span>
-            <span class="color-primary-500"></span>
-            <span class="color-primary-600"></span>
-            <span class="color-primary-700"></span>
-            <span class="color-primary-800"></span>
-            <span class="color-primary-900"></span>
-            <span class="color-info-50"></span>
-            <span class="color-info-100"></span>
-            <span class="color-info-200"></span>
-            <span class="color-info-300"></span>
-            <span class="color-info-400"></span>
-            <span class="color-info-500"></span>
-            <span class="color-info-600"></span>
-            <span class="color-info-700"></span>
-            <span class="color-info-800"></span>
-            <span class="color-info-900"></span>
-            <span class="color-danger-50"></span>
-            <span class="color-danger-100"></span>
-            <span class="color-danger-200"></span>
-            <span class="color-danger-300"></span>
-            <span class="color-danger-400"></span>
-            <span class="color-danger-500"></span>
-            <span class="color-danger-600"></span>
-            <span class="color-danger-700"></span>
-            <span class="color-danger-800"></span>
-            <span class="color-danger-900"></span>
-            <span class="color-warning-50"></span>
-            <span class="color-warning-100"></span>
-            <span class="color-warning-200"></span>
-            <span class="color-warning-300"></span>
-            <span class="color-warning-400"></span>
-            <span class="color-warning-500"></span>
-            <span class="color-warning-600"></span>
-            <span class="color-warning-700"></span>
-            <span class="color-warning-800"></span>
-            <span class="color-warning-900"></span>
-            <span class="color-success-50"></span>
-            <span class="color-success-100"></span>
-            <span class="color-success-200"></span>
-            <span class="color-success-300"></span>
-            <span class="color-success-400"></span>
-            <span class="color-success-500"></span>
-            <span class="color-success-600"></span>
-            <span class="color-success-700"></span>
-            <span class="color-success-800"></span>
-            <span class="color-success-900"></span>
-            <span class="color-fusion-50"></span>
-            <span class="color-fusion-100"></span>
-            <span class="color-fusion-200"></span>
-            <span class="color-fusion-300"></span>
-            <span class="color-fusion-400"></span>
-            <span class="color-fusion-500"></span>
-            <span class="color-fusion-600"></span>
-            <span class="color-fusion-700"></span>
-            <span class="color-fusion-800"></span>
-            <span class="color-fusion-900"></span>
-          </p>
-          <!-- END Color profile -->
+          <div class="ml-2 text-center">
+            <!-- <label class="mb-0 fs-1-2">
+              Diamond Controls<span class="fs-09 position-absolute"
+                >®</span
+              > </label
+            ><br /> -->
+            <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
+          </div>
+        </header>
+        <!-- END Page Header -->
+        <!-- BEGIN Page Content -->
+        <!-- the #js-page-content id is needed for some plugins to initialize -->
+        <!--@RenderBody()-->
+        <div id="app"></div>
+
+        <!-- this overlay is activated only when mobile menu is triggered -->
+        <div class="page-content-overlay"
+             data-action="toggle"
+             data-class="mobile-nav-on"></div>
+
+        <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
+          <div class="yt-navbar-content">
+            <ul id="sysMonBtnList"></ul>
+          </div>
         </div>
+        <!-- END Page Content -->
+        <!-- BEGIN Page Footer -->
+        <!--<footer class="page-footer" role="contentinfo">
+                  <div class="d-flex align-items-center flex-1 text-muted">
+                      <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
+                  </div>
+                  <div>
+                      <ul class="list-table m-0">
+                          <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
+                          <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
+                          <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
+                          <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
+                      </ul>
+                  </div>
+              </footer>-->
+        <!-- END Page Footer -->
+        <!-- BEGIN Shortcuts -->
+        <!-- END Shortcuts -->
+        <!-- BEGIN Color profile -->
+        <!-- this area is hidden and will not be seen on screens or screen readers -->
+        <!-- we use this only for CSS color refernce for JS stuff -->
+        <p id="js-color-profile" class="d-none">
+          <span class="color-primary-50"></span>
+          <span class="color-primary-100"></span>
+          <span class="color-primary-200"></span>
+          <span class="color-primary-300"></span>
+          <span class="color-primary-400"></span>
+          <span class="color-primary-500"></span>
+          <span class="color-primary-600"></span>
+          <span class="color-primary-700"></span>
+          <span class="color-primary-800"></span>
+          <span class="color-primary-900"></span>
+          <span class="color-info-50"></span>
+          <span class="color-info-100"></span>
+          <span class="color-info-200"></span>
+          <span class="color-info-300"></span>
+          <span class="color-info-400"></span>
+          <span class="color-info-500"></span>
+          <span class="color-info-600"></span>
+          <span class="color-info-700"></span>
+          <span class="color-info-800"></span>
+          <span class="color-info-900"></span>
+          <span class="color-danger-50"></span>
+          <span class="color-danger-100"></span>
+          <span class="color-danger-200"></span>
+          <span class="color-danger-300"></span>
+          <span class="color-danger-400"></span>
+          <span class="color-danger-500"></span>
+          <span class="color-danger-600"></span>
+          <span class="color-danger-700"></span>
+          <span class="color-danger-800"></span>
+          <span class="color-danger-900"></span>
+          <span class="color-warning-50"></span>
+          <span class="color-warning-100"></span>
+          <span class="color-warning-200"></span>
+          <span class="color-warning-300"></span>
+          <span class="color-warning-400"></span>
+          <span class="color-warning-500"></span>
+          <span class="color-warning-600"></span>
+          <span class="color-warning-700"></span>
+          <span class="color-warning-800"></span>
+          <span class="color-warning-900"></span>
+          <span class="color-success-50"></span>
+          <span class="color-success-100"></span>
+          <span class="color-success-200"></span>
+          <span class="color-success-300"></span>
+          <span class="color-success-400"></span>
+          <span class="color-success-500"></span>
+          <span class="color-success-600"></span>
+          <span class="color-success-700"></span>
+          <span class="color-success-800"></span>
+          <span class="color-success-900"></span>
+          <span class="color-fusion-50"></span>
+          <span class="color-fusion-100"></span>
+          <span class="color-fusion-200"></span>
+          <span class="color-fusion-300"></span>
+          <span class="color-fusion-400"></span>
+          <span class="color-fusion-500"></span>
+          <span class="color-fusion-600"></span>
+          <span class="color-fusion-700"></span>
+          <span class="color-fusion-800"></span>
+          <span class="color-fusion-900"></span>
+        </p>
+        <!-- END Color profile -->
       </div>
     </div>
-    <!-- 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="
+  </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
-                >
+                  "></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>
-            <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"
-                />
+          <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>
-              <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="
+              <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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            Tracey Chang
-                            <small
-                              class="d-block font-italic text-success fs-xs"
-                            >
-                              Online
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="oliver kopyuv online"
-                      >
-                        <div
-                          class="d-table-cell align-middle status status-success status-sm"
-                        >
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            Oliver Kopyuv
-                            <small
-                              class="d-block font-italic text-success fs-xs"
-                            >
-                              Online
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="dr john cook phd away"
-                      >
-                        <div
-                          class="d-table-cell align-middle status status-warning status-sm"
-                        >
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            Dr. John Cook PhD
-                            <small class="d-block font-italic fs-xs">
-                              Away
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="ali amdaney online"
-                      >
-                        <div
-                          class="d-table-cell align-middle status status-success status-sm"
-                        >
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            Ali Amdaney
-                            <small
-                              class="d-block font-italic fs-xs text-success"
-                            >
-                              Online
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="sarah mcbrook online"
-                      >
-                        <div
-                          class="d-table-cell align-middle status status-success status-sm"
-                        >
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            Sarah McBrook
-                            <small
-                              class="d-block font-italic fs-xs text-success"
-                            >
-                              Online
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="ali amdaney offline"
-                      >
-                        <div class="d-table-cell align-middle status status-sm">
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            oliver.kopyuv@gotbootstrap.com
-                            <small class="d-block font-italic fs-xs">
-                              Offline
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="ali amdaney busy"
-                      >
-                        <div
-                          class="d-table-cell align-middle status status-danger status-sm"
-                        >
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            oliver.kopyuv@gotbootstrap.com
-                            <small
-                              class="d-block font-italic fs-xs text-danger"
-                            >
-                              Busy
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="ali amdaney offline"
-                      >
-                        <div class="d-table-cell align-middle status status-sm">
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></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 class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            oliver.kopyuv@gotbootstrap.com
-                            <small class="d-block font-italic fs-xs">
-                              Offline
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="#"
-                        class="d-table w-100 px-2 py-2 text-dark hover-white"
-                        data-filter-tags="ali amdaney inactive"
-                      >
-                        <div class="d-table-cell align-middle">
-                          <span
-                            class="profile-image-md rounded-circle d-block"
-                            style="
+                      </div>
+                    </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>
+                            "></span>
+                      </div>
+                      <div class="d-table-cell w-100 align-middle pl-2 pr-2">
+                        <div class="text-truncate text-truncate-md">
+                          +714651347790
+                          <small class="d-block font-italic fs-xs opacity-50">
+                            Missed Call
+                          </small>
                         </div>
-                        <div class="d-table-cell w-100 align-middle pl-2 pr-2">
-                          <div class="text-truncate text-truncate-md">
-                            +714651347790
-                            <small class="d-block font-italic fs-xs opacity-50">
-                              Missed Call
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                  </ul>
-                  <div class="filter-message js-filter-message"></div>
-                </div>
-              </div>
-              <div>
-                <a class="fs-xl d-flex align-items-center p-3">
-                  <i class="fal fa-cogs"></i>
-                </a>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+                <div class="filter-message js-filter-message"></div>
               </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>
+              <a class="fs-xl d-flex align-items-center p-3">
+                <i class="fal fa-cogs"></i>
+              </a>
             </div>
-            <!-- END msgr -->
           </div>
+          <!-- END msgr-list -->
+          <!-- BEGIN msgr -->
+          <div class="msgr d-flex h-100 flex-column bg-white">
+            <!-- BEGIN custom-scroll -->
+            <div class="custom-scroll flex-1 h-100">
+              <div id="chat_container" class="w-100 p-4">
+                <!-- start .chat-segment -->
+                <div class="chat-segment">
+                  <div class="time-stamp text-center mb-2 fw-400">Jun 19</div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-sent">
+                  <div class="chat-message">
+                    <p>Hey Tracey, did you get my files?</p>
+                  </div>
+                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                    3:00 pm
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get">
+                  <div class="chat-message">
+                    <p>Hi</p>
+                    <p>
+                      Sorry going through a busy time in office. Yes I
+                      analyzed the solution.
+                    </p>
+                    <p>
+                      It will require some resource, which I could not manage.
+                    </p>
+                  </div>
+                  <div class="fw-300 text-muted mt-1 fs-xs">3:24 pm</div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-sent chat-start">
+                  <div class="chat-message">
+                    <p>Okay</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-sent chat-end">
+                  <div class="chat-message">
+                    <p>
+                      Sending you some dough today, you can allocate the
+                      resources to this project.
+                    </p>
+                  </div>
+                  <div class="text-right fw-300 text-muted mt-1 fs-xs">
+                    3:26 pm
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get chat-start">
+                  <div class="chat-message">
+                    <p>Perfect. Thanks a lot!</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get">
+                  <div class="chat-message">
+                    <p>I will have them ready by tonight.</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment -->
+                <div class="chat-segment chat-segment-get chat-end">
+                  <div class="chat-message">
+                    <p>Cheers</p>
+                  </div>
+                </div>
+                <!--  end .chat-segment -->
+                <!-- start .chat-segment for timestamp -->
+                <div class="chat-segment">
+                  <div class="time-stamp text-center mb-2 fw-400">Jun 20</div>
+                </div>
+                <!--  end .chat-segment for timestamp -->
+              </div>
+            </div>
+            <!-- END custom-scroll  -->
+            <!-- BEGIN msgr__chatinput -->
+            <div class="d-flex flex-column">
+              <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
+                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
+                  <div id="msgr_input"
+                       contenteditable="true"
+                       data-placeholder="Type your message here..."
+                       class="height-10 form-content-editable"></div>
+                </div>
+              </div>
+              <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
+                <a href="javascript:void(0);"
+                   class="btn btn-icon fs-xl width-1 mr-1"
+                   data-toggle="tooltip"
+                   data-original-title="More options"
+                   data-placement="top">
+                  <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   class="btn btn-icon fs-xl mr-1"
+                   data-toggle="tooltip"
+                   data-original-title="Attach files"
+                   data-placement="top">
+                  <i class="fal fa-paperclip color-fusion-300"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   class="btn btn-icon fs-xl mr-1"
+                   data-toggle="tooltip"
+                   data-original-title="Insert photo"
+                   data-placement="top">
+                  <i class="fal fa-camera color-fusion-300"></i>
+                </a>
+                <div class="ml-auto">
+                  <a href="javascript:void(0);" class="btn btn-info">Send</a>
+                </div>
+              </div>
+            </div>
+            <!-- END msgr__chatinput -->
+          </div>
+          <!-- END msgr -->
         </div>
       </div>
     </div>
+  </div>
 
-    <div
-      id="noticeBlock"
-      style="
+  <div id="noticeBlock"
+       style="
         position: fixed;
         top: 70px;
         right: 0px;
@@ -942,1115 +787,440 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         transition: 0.2s;
         z-index: 50000;
         height: 100%;
-      "
-    ></div>
+      "></div>
 
-    <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
-    <!-- END Messenger -->
-    <!-- BEGIN Page Settings -->
-    <!-- END Page Settings -->
-    <!-- base vendor bundle:
-         DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
-                    + pace.js (recommended)
-                    + jquery.js (core)
-                    + jquery-ui-cust.js (core)
-                    + popper.js (core)
-                    + bootstrap.js (core)
-                    + slimscroll.js (extension)
-                    + app.navigation.js (core)
-                    + ba-throttle-debounce.js (core)
-                    + waves.js (extension)
-                    + smartpanels.js (extension)
-                    + src/../jquery-snippets.js (core) -->
-    <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
-    <script src="lib/vendors.bundle.js"></script>
-    <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
-    <script src="lib/notifications/toastr/toastr.min.js"></script>
-    <script src="js/toast.js"></script>
-    <script src="lib/echarts.min.js"></script>
-    <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
-    <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
+  <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
+  <!-- END Messenger -->
+  <!-- BEGIN Page Settings -->
+  <!-- END Page Settings -->
+  <!-- base vendor bundle:
+       DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
+                  + pace.js (recommended)
+                  + jquery.js (core)
+                  + jquery-ui-cust.js (core)
+                  + popper.js (core)
+                  + bootstrap.js (core)
+                  + slimscroll.js (extension)
+                  + app.navigation.js (core)
+                  + ba-throttle-debounce.js (core)
+                  + waves.js (extension)
+                  + smartpanels.js (extension)
+                  + src/../jquery-snippets.js (core) -->
+  <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
+  <script src="lib/vendors.bundle.js"></script>
+  <!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
+  <script src="lib/notifications/toastr/toastr.min.js"></script>
+  <script src="js/toast.js"></script>
+  <script src="lib/echarts.min.js"></script>
+  <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
+  <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
 
-    <!--Bajascript-->
-    <script src="js/bajascript/bscriptReq.js"></script>
-    <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
-    <script src="js/bajascript/require.js"></script>
+  <!--Bajascript-->
+  <script src="js/bajascript/bscriptReq.js"></script>
+  <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
+  <script src="js/bajascript/require.js"></script>
 
-    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
-    <script src="js/forge/forgemodel.js"></script>
-    <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
+  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
+  <script src="js/forge/forgemodel.js"></script>
+  <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
 
-    <script type="text/javascript">
-      define("niagaraSystemProperties", function () {
-        return {};
+  <script type="text/javascript">
+    define("niagaraSystemProperties", function () {
+      return {};
+    });
+  </script>
+  <script src="js/n4js/bajatest.js"></script>
+  <script src="js/n4js/electricmeterbaja.js"></script>
+  <script src="js/n4js/elevatorbaja.js"></script>
+  <script src="js/bajascript/require.config.js"></script>
+  <script src="js/FileSaver.js"></script>
+
+  <script>
+    /*$('#js-page-content').smartPanel();*/
+    var cookies = null;
+    var jwt = null;
+    var loadingTip = "";
+    var pageAct = {}; //記錄全頁面已選擇項目
+    var timeOuters = [];
+    pageAct.AreaTag = "";
+    if (location.href.indexOf("ord") != -1) {
+      location.href = "/file/index.html";
+    }
+    var lastPage = sessionStorage.getItem("lastPage");
+    // 執行初步 Loading
+    var loadEle = pageLoading();
+    var errRecTable = null,
+      opeRecTable = null;
+    var tolSubList = [];
+    var allDevices = [];
+    var tempSubTag = ["M10", "M12"];  // 溫度向小類
+
+    /**
+     * 頁面 Loading 建立
+     * */
+    function pageLoading(text = null) {
+      let background = $(`<div class="loading-bg"></div>`);
+      let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+      $(background)[0]._aleObj = aleObj;
+      $("body").css("overflow", "hidden");
+      $("body .page-content-wrapper").append(background);
+      $(background).animate({ opacity: 1 }, 300);
+      return background;
+    }
+
+    try {
+      $(function () {
+        // 二次引用 jquery.js
+        // - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
+        // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
+        // - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
+        // (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
+        require(["jquery"], loadedBasePack);
       });
-    </script>
-    <script src="js/n4js/bajatest.js"></script>
-    <script src="js/n4js/electricmeterbaja.js"></script>
-    <script src="js/n4js/elevatorbaja.js"></script>
-    <script src="js/bajascript/require.config.js"></script>
-    <script src="js/FileSaver.js"></script>
-
-    <script>
-      /*$('#js-page-content').smartPanel();*/
-      var cookies = null;
-      var jwt = null;
-      var loadingTip = "";
-      var pageAct = {}; //記錄全頁面已選擇項目
-      var timeOuters = [];
-      pageAct.AreaTag = "";
-      if (location.href.indexOf("ord") != -1) {
-        location.href = "/file/index.html";
-      }
-      var lastPage = sessionStorage.getItem("lastPage");
-      // 執行初步 Loading
-      var loadEle = pageLoading();
-      var errRecTable = null,
-        opeRecTable = null;
-      var tolSubList = [];
-      var allDevices = [];
-      var tempSubTag = ["M10","M12"];  // 溫度向小類
 
       /**
-       * 頁面 Loading 建立
+       * jquery.js 二次引用後 Callback，載入第三方套件
        * */
-      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;
+      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);
-        });
+      /**
+       * 全數套件讀取完成 Callback
+       * */
+      function loadedJsPack() {
+        cookies = new YourTeam.Utility.Cookie();
+        jwt = cookies.get("JWT-Authorization");
+        pageAct.AreaTag = initAreaTag;
+        loadEvent();
 
-        /**
-         * 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);
-          });
-        }
-
-        /**
-         * 全數套件讀取完成 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";
-            }
-            myBaja = new MyBaja();
-            myBaja.setMyUserAccount(Login);
-          } else {
-            isValidLogin();
-          }
-
-          $(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);
-          }
-
-          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);
-          }
-        }
-
-        // page loaded callback
-        function loadCallback() {
-          initTabsByEle();
-          resetYTTooltip();
-          $("#sysMonTopBtn").YTNavbar("hide");
-        }
-
-        // 事件先行讀取
-        function loadEvent() {
-          onEvent("click", "[name=topFunBtn]", function () {
-            _ytTabInited = [];
-            let page = $(this).data("page");
-            if (!page) {
-              return;
-            }
-            if (
-              page != "systemMonitor" &&
-              page != "sysElevator"
-              //  && page != "sysSensor"
-            ) {
-              $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
-              pageAct.sysMainTag = null;
-              pageAct.sysSubTag = null;
-            } else {
-              setSysTagForPageAct(this);
-              $("#sysMonTopBtn").YTTab("set");
-              $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
-            }
-            // 取消當前所有 baja 訂閱
-            $.each(tolSubList, (idx, sub) => {
-              sub.unsubscribeAll();
-              sub.detach();
-            });
-            // 清空 baja 訂閱紀錄
-            tolSubList = [];
-            // 清空 loading 狀態
-            endPageLoading();
-
-            $(loadEle).Loading("close");
-            $(".yt-alert").YTAlert().hide();
-            // 取得使用者資訊
-            getUserInfo();
-            // 存取現在頁面 (重整讀取紀錄用)
-            sessionStorage.setItem("lastPage", page);
-            sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
-            // 讀取子頁面
-            $("#app").load(`_${page}.html`, loadCallback);
-          });
-
-          onEvent("click", "#logout", function () {
-            localStorage.removeItem("JWT-Authorization");
-            location.href = "/logout";
-          });
-
-          onEvent("active:change", "#buiList", function (e, actEle) {
-            if (actEle) {
-              pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
-              pageAct.urn = $(actEle).data("urn");
-            }
-          });
-
-          onEvent("yt:tab:change", "#lightSch-tab", function () {
-            if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
-              setLightSchBlcok ? setLightSchBlcok(this) : "";
-              $("#lightSchModal").modal("show");
-            }
-          });
-
-          onEvent(
-            "yt:tab:prechange",
-            "[data-tabname=topFunBtn]",
-            function (e, arg) {
-              if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
-                arg.cancel = true;
-              }
-            }
-          );
-
-          onEvent("scroll", window, function () {
-            if ($(window).scrollTop() != 0) {
-              $("#noticeBlock").css("top", 0);
-            } else {
-              $("#noticeBlock").css("top", 70);
-            }
-          });
-
-          onEvent("click", "#testsysbtn", function () {});
-
-          //onEvent("click", "button[id^=noticeChkBtn]", function () {
-          //    $(this).parents(".toast").YTNotice("hide");
-          //})
-
-          onEvent("click", "button[id^=noticeChkBtn]", function () {
-            /**button[id^=bajaAckBtn] */ let uuid = $(this).data("uuid");
-            let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
-            let myBaja = new MyBaja();
-            myBaja.setMyUserAccount((data) => {
-              let sendData =
-                '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
-              $.post(
-                url,
-                sendData,
-                (rel) => {
-                  console.log(rel);
-                  $(this).parents(".toast").YTNotice("hide");
-                },
-                "text"
-              );
-            });
-          });
-
-          onEvent("click", "#toggleNoticeBtn", function () {
-            chaNoticeConSta();
-          });
-
-          $(window).on("timeout:3s", function () {
-            getSystemAlarmByBaja((data) => {
-              if (typeof getAlarmSub != "undefined" && getAlarmSub) {
-                getAlarmSub(data);
-              }
-
-              alarmIconBlink();
-            });
-            getAlarm();
-          });
-        }
-
-        // 登入驗證
-        function Login(account) {
-          console.log(account);
-          /*if ($("#login-form").valid()) {*/
-
-          var url = baseApiUrl + "/api/Login/";
-          var send_data = {
-            account: account,
-            password: "rJ2T5Kkj",
-          };
+        if (!jwt) {
           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);
-            },
-          });
+          myBaja = new MyBaja();
+          myBaja.setMyUserAccount(Login);
+        } else {
+          isValidLogin();
         }
 
-        //==============================================================================
-        //                       ↓  系統監控 - 共用 Function ↓
-        //==============================================================================
+        $(loadEle).Loading("close");
+      }
 
-        // 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 = ["設備編號", "設備名稱"];
+      /**
+       * 登入驗證完成 Callback
+       * */
+      function isValidLogin() {
+        getUserInfo();
+        iniFroList();
+        showMainSys();
+        getBuiList();
+        getSysMonBtnList();
+        checkDevState();
+        loadNoticeConSta();
 
-          $.each(columnNames, (index, colName) => {
-            let tr = $("<tr></tr>");
-            let td = $("<td></td>");
-            td.text(colName);
-            tr.append(td);
-            tbody.append(tr);
-          });
+        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"
+            );
+          }
 
-          let url = baseApiUrl + "/api/Device/GetBaseDevice";
-          let sendData = {
-            device_guid: devGuid,
-          };
-          objSendData.Data = sendData;
+          /*$(`[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,
-            objSendData,
+            null,
             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));
+                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();
-
-          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;
+        //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");
         }
 
-        // Card - 運維紀錄 block
-        function drawOpeRecTabBlo() {
-          let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
-
-                                                                            </table>`;
-          return strHtml;
+        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);
         }
+      }
 
-        // Card 呈現初始化
-        function initPopover(
-          type = null,
-          extOption = {},
-          selector = "[name=devItem]"
-        ) {
-          if (type == null && pageAct.sysMainTag == "LT") {
-            type = "light";
+      // 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;
           }
-
-          $(selector).each((index, ele) => {
-            let devNum = $(ele).data("number"); //設備編號
-            let devGuid = $(ele).data("id"); //guid
-            let devName = $(ele).data("name"); //full_name
-            let lightHtml =
-              type == "light"
-                ? `<button type="button" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>`
-                : "";
-
-            let option = {
-              html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
-                                        <div class="card-header p-3">
-
-                                            <div class="position-absolute mr-5" style="word-break: break-all;">
-                                                <label class="m-0 mt-2">${devName}</label>
-                                            </div>
-                                            <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
-                                                <button type="button" id="state-tab"
-                                                data-toggle="tooltip" data-placement="bottom" title="即時監控"
-                                                class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
-                                                ${lightHtml}
-                                                <button type="button" id="info-tab"
-                                                data-toggle="tooltip" data-placement="bottom" title="基本資料"
-                                                class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
-                                                <button type="button"
-                                                d data-toggle="tooltip" data-placement="bottom" title="告警資料"
-                                                id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
-                                                <button type="button"
-                                                data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
-                                                id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
-
-                                                <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
-
-                                            </div>
-                                        </div>
-                                        <div class="card-body p-2 tab-content w-100">
-                                            <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
-                                                ${drawStateTabBlo(devNum)}
-                                            </div>
-                                            <div id="info" data-tabname="cardTab" data-tabrole="child">
-
-                                            </div>
-                                            <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                                ${drawErrRecTabBlo()}
-                                            </div>
-                                            <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                                ${drawOpeRecTabBlo()}
-                                            </div>
-                                        </div>
-                                    </div>`,
-              group: "device",
-              // 在 _sysElevator.html 及 _sysMonAll.html 會用到
-              onShow: function (tooltipEle, oriEle) {
-                // 執行 pop 視窗上方 Tab 類別
-                new YT.Tab({ tabName: "cardTab" });
-                // 系統監控才會有 data-devobj 屬性
-                let devObj = $(oriEle).data("devobj");
-                // 讀取運維列表
-                loadOpeRecTable(devGuid);
-                // 讀取異常列表
-                loadErr($(oriEle).data("number"));
-                // 讀取設備基本資料列表
-                $(tooltipEle)
-                  .find("#info")
-                  .html(
-                    typeof drawInfoTabBlo != "undefined"
-                      ? drawInfoTabBlo(devGuid)
-                      : ""
-                  );
-                // 聚焦熱點
-                const eleDbId = parseInt($(oriEle).data("dbId"));
-                if (eleDbId) {
-                  if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
-                    changeScaleForHotspot(eleDbId);
-                  } else {
-                    controlFocusHotspot(eleDbId);
-                  }
-                }
-                // 3D 視角 ZOOM IN 聚焦
-
-                if (devObj) {
-                  console.log("devObj", 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();
-          }
-          let url =
-            baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
-          let tag = "#opeRecTable";
-
-          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);
+          if (
+            page != "systemMonitor" &&
+            page != "sysElevator"
+            //  && page != "sysSensor"
+          ) {
+            $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
+            pageAct.sysMainTag = null;
+            pageAct.sysSubTag = null;
           } else {
-            console.log("no device");
+            setSysTagForPageAct(this);
+            $("#sysMonTopBtn").YTTab("set");
+            $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
           }
-        }
-
-        // Card - 異常紀錄 Table
-        function callbackForErr(result) {
-          // console.log("@@@",result)
-          if (errRecTable) {
-            errRecTable.destroy();
-          }
-
-          let tag = "#errRecTable";
-          let datas;
-
-          let column_defs = [
-            { targets: [0], width: "15%", sortable: true },
-            { targets: [1], width: "25%", sortable: true },
-            { targets: [2], width: "25%", sortable: true },
-            { targets: [3], width: "35%", sortable: true },
-          ];
-
-          let columns = [
-            {
-              title: "異常ID",
-              data: "uuid",
-            },
-            {
-              title: "異常原因",
-              data: "msgText",
-            },
-            {
-              title: "ACK確認",
-              data: "ackState",
-            },
-            {
-              title: "發生/完成時間",
-              data: "normalTime",
-              // "render": function (data, type, row) {
-              //     return row.timestamp + "<br>" + data;
-              // },
-            },
-          ];
-
-          let json_object = JSON.parse(result);
-          datas = json_object["data"];
-          errRecTable = new YourTeam.JqDataTables.getTableByStatic(
-            tag,
-            datas,
-            columns,
-            column_defs,
-            null,
-            null,
-            null,
-            null,
-            "<'scrolledTable'tpi>"
-          );
-        }
-
-        //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
-        function setLightColor() {
-          $("[data-light-type]").each((index, ele) => {
-            let type = $(ele).data("light-type");
-            let isFlashing = false;
-            let color = "#000";
-            switch (type) {
-              case "normal":
-                color =
-                  pageAct.sysSubObj.device_normal_color ??
-                  "var(--theme-success)";
-                isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
-                break;
-              case "close":
-                color =
-                  pageAct.sysSubObj.device_close_color ??
-                  "var(--theme-secondary)";
-                isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
-                break;
-              case "error":
-                color =
-                  pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
-                isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
-                break;
-            }
-            $(ele).css("background-color", color);
-            //是否閃爍
-            if (isFlashing) {
-              $(ele).parents(".device-wrap").addClass("light-flash");
-            } else {
-              $(ele).parents(".device-wrap").removeClass("light-flash");
-            }
+          // 取消當前所有 baja 訂閱
+          $.each(tolSubList, (idx, sub) => {
+            sub.unsubscribeAll();
+            sub.detach();
           });
-        }
+          // 清空 baja 訂閱紀錄
+          tolSubList = [];
+          // 清空 loading 狀態
+          endPageLoading();
 
-        // 設置昇位圖上方 燈號
-        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>`;
+          // $(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");
           }
-          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>`;
+        });
+
+        onEvent("yt:tab:change", "#lightSch-tab", function () {
+          if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
+            setLightSchBlcok ? setLightSchBlcok(this) : "";
+            $("#lightSchModal").modal("show");
           }
-          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>`;
+        });
+
+        onEvent(
+          "yt:tab:prechange",
+          "[data-tabname=topFunBtn]",
+          function (e, arg) {
+            if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
+              arg.cancel = true;
+            }
           }
+        );
 
-          return strHtml;
-        }
+        onEvent("scroll", window, function () {
+          if ($(window).scrollTop() != 0) {
+            $("#noticeBlock").css("top", 0);
+          } else {
+            $("#noticeBlock").css("top", 70);
+          }
+        });
 
-        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);
+        onEvent("click", "#testsysbtn", function () { });
 
-          return parentEle;
-        }
+        //onEvent("click", "button[id^=noticeChkBtn]", function () {
+        //    $(this).parents(".toast").YTNotice("hide");
+        //})
 
-        // 設置 Forge 3D 溫度條
-        function setTopHeatBar() {
-          let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
-          return strHtml;
-        }
+        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"
+            );
+          });
+        });
 
-        //==============================================================================
-        //                       ↑  系統監控 - 共用 Function ↑
-        //==============================================================================
-      } catch (e) {
-        $(loadEle).Loading("close");
+        onEvent("click", "#toggleNoticeBtn", function () {
+          chaNoticeConSta();
+        });
+
+        $(window).on("timeout:3s", function () {
+          getSystemAlarmByBaja((data) => {
+            if (typeof getAlarmSub != "undefined" && getAlarmSub) {
+              getAlarmSub(data);
+            }
+
+            alarmIconBlink();
+          });
+          getAlarm();
+        });
       }
 
-      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 Login(account) {
+        console.log(account);
+        /*if ($("#login-form").valid()) {*/
 
-      function getDevItem() {
-        let url = baseApiUrl + "/api/Device/GetDeviceItem";
-
-        objSendData.Data = {
-          main_system_tag: pageAct.sysMainTag,
-          sub_system_tag: pageAct.sysSubTag,
+        var url = baseApiUrl + "/api/Login/";
+        var send_data = {
+          account: account,
+          password: "rJ2T5Kkj",
         };
-        ytAjax = new YourTeam.Ajax(
-          url,
-          objSendData,
-          function (res) {
-            if (!res || res.code != "0000" || !res.data) {
+        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 {
-              pageAct.devItems = res.data;
+              /*toast_ok(rel.msg);*/
+              cookies.create(
+                "JWT-Authorization",
+                rel.data.token,
+                12 * 60 * 60 * 1000
+              );
+              isValidLogin();
             }
           },
-          null,
-          "POST"
-        ).send();
-      }
-
-      function alarmIconBlink(data) {
-        if (data?.data.length != 0) {
-          $(".page-header [name=topFunBtn][data-page=alert] i").addClass(
-            "blink"
-          );
-        } else {
-          $(".page-header [name=topFunBtn][data-page=alert] i").removeClass(
-            "blink"
-          );
-        }
-      }
-
-      function timeOutGetData() {
-        let timeOut3s = null,
-          timeOut5m = null;
-        let events = $._data($(window)[0], "events");
-
-        if (Object.keys(events).findIndex((x) => x == "timeout:3s") != -1) {
-          timeOut3s = setInterval(() => {
-            $(window).trigger("timeout:3s");
-          }, 3000);
-        }
-
-        if (Object.keys(events).findIndex((x) => x == "timeout:5m") != -1) {
-          timeOut5m = setInterval(() => {
-            $(window).trigger("timeout:5m");
-          }, 5 * 60 * 1000);
-        }
-
-        timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
-      }
-
-      function showMainSys() {
-        let url = baseApiUrl + "/Utility/isShowMaiSys";
-
-        ytAjax = new YourTeam.Ajax(
-          url,
-          null,
-          function (res) {
-            if (!res || res.code != "0000") {
-            } else {
-              pageAct.mainStatus = res.data;
-            }
+          error: function (xhr, textStatus, thrownError) {
+            alert(common.SysErr);
           },
-          null,
-          "POST"
-        ).send();
+        });
       }
 
-      function startPageLoading() {
-        if (!loadingTip) {
-          loadingTip = YT.Alert.Tip("資料讀取中...", "show");
-        }
-      }
+      //==============================================================================
+      //                       ↓  系統監控 - 共用 Function ↓
+      //==============================================================================
 
-      function endPageLoading() {
-        if (loadingTip != null) {
-          $(loadingTip.ele).YTAlert().hide();
-          loadingTip = null;
-        }
-      }
+      // 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 = ["設備編號", "設備名稱"];
 
-      function iniFroList() {
-        url = baseApiUrl + "/api/GetUsrFroList";
-        let hasMonitor = false;
+        $.each(columnNames, (index, colName) => {
+          let tr = $("<tr></tr>");
+          let td = $("<td></td>");
+          td.text(colName);
+          tr.append(td);
+          tbody.append(tr);
+        });
 
-        ytAjax = new YourTeam.Ajax(
-          url,
-          null,
-          function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-            } else {
-              let strHtml = `<div class="btn-group mx-4">
-                                                                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
-                                                                            <i class="fal fa-home fa-2x"></i><br>首頁
-                                                                        </a>
-                                                                        <!--<div class="dropdown-menu">
-                                                                            <button class="dropdown-item" type="button">Action</button>
-                                                                            <button class="dropdown-item" type="button">Another action</button>
-                                                                            <button class="dropdown-item" type="button">Something else here</button>
-                                                                        </div>-->
-                                                                    </div>`;
-
-              $.each(res.data, function (i, v) {
-                if (v.authCode == "PF1") {
-                  strHtml += `<div class="btn-group mx-4" >
-                                                                            <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
-                                                                                <i class="fal fa-tv fa-2x"></i><br>${v.subName}
-                                                                            </a>
-
-                                                                        </div>`;
-
-                  hasMonitor = true;
-                } else {
-                  let icon =
-                    v.authCode == "PF2"
-                      ? "fa-chart-pie"
-                      : v.authCode == "PF3"
-                      ? "fa-chart-area"
-                      : v.authCode == "PF4"
-                      ? "fa-chart-line"
-                      : v.authCode == "PF5"
-                      ? "fa-bell"
-                      : v.authCode == "PF6"
-                      ? "fa-server"
-                      : v.authCode == "PF7"
-                      ? "fa-image"
-                      : v.authCode == "PF8"
-                      ? "fa-user"
-                      : "";
-                  strHtml += `<div class="btn-group mx-4">
-                                                                            <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
-                                                                               data-page="${v.showView}">
-                                                                                <i class="fal ${icon} fa-2x"></i><br>${v.subName}
-                                                                            </a>
-                                                                        </div>`;
-                }
-              });
-
-              $("#froLisPage").html(strHtml);
-              $("#sysMonTopBtn").YTNavbar("init");
-            }
-          },
-          null,
-          "POST"
-        ).send();
-      }
-
-      function getSysMonBtnList() {
-        let url = baseApiUrl + "/api/Device/GetMainSub";
+        let url = baseApiUrl + "/api/Device/GetBaseDevice";
         let sendData = {
-          building_tag: pageAct.buiTag,
+          device_guid: devGuid,
         };
         objSendData.Data = sendData;
         ytAjax = new YourTeam.Ajax(
@@ -2059,219 +1229,892 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
           function (res) {
             if (!res || res.code != "0000" || !res.data) {
             } else {
-              $("#sysMonBtnList").html("");
-
-              $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
-                $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
-                  let page = "systemMonitor";
-                  if (subSysObj.sub_system_tag == "EL") {
-                    page = "sysElevator";
-                  }
-                  // console.log(subSysObj.sub_system_tag)
-                  // if (subSysObj.sub_system_tag == "M12") {
-                  //     page = "sysSensor";
-                  // }
-
-                  let li = creEle("li");
-                  let a = creA(
-                    subSysObj.full_name,
-                    { href: "javascript:;" },
-                    [],
-                    `subSysBtn${subSysObj.sub_system_tag}`,
-                    { page: page, tabname: "systemMonitor" },
-                    "topFunBtn"
-                  );
-                  li.append(a);
-                  a.data("subSysObj", subSysObj);
-                  subSysObj.main_system_tag = mainSysObj.main_system_tag;
-                  $("#sysMonBtnList").append(li);
-                });
-              });
+              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");
       }
 
-      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();
+      // Card - 異常紀錄 block
+      function drawErrRecTabBlo() {
+        let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+
+                                                                              </table>`;
+        return strHtml;
       }
 
-      function getUserInfo() {
-        let url = baseApiUrl + varApiUrl + "getUserFull";
+      // Card - 運維紀錄 block
+      function drawOpeRecTabBlo() {
+        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
 
-        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();
+                                                                              </table>`;
+        return strHtml;
       }
 
-      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();
-      }
+      // Card 呈現初始化
+      function initPopover(
+        type = null,
+        extOption = {},
+        selector = "[name=devItem]"
+      ) {
+        if (type == null && pageAct.sysMainTag == "LT") {
+          type = "light";
+        }
 
-      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;
+        $(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 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];
+          let option = {
+            html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
+                                          <div class="card-header p-3">
+
+                                              <div class="position-absolute mr-5" style="word-break: break-all;">
+                                                  <label class="m-0 mt-2">${devName}</label>
+                                              </div>
+                                              <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                                  <button type="button" id="state-tab"
+                                                  data-toggle="tooltip" data-placement="bottom" title="即時監控"
+                                                  class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
+                                                  ${lightHtml}
+                                                  <button type="button" id="info-tab"
+                                                  data-toggle="tooltip" data-placement="bottom" title="基本資料"
+                                                  class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
+                                                  <button type="button"
+                                                  d data-toggle="tooltip" data-placement="bottom" title="告警資料"
+                                                  id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
+                                                  <button type="button"
+                                                  data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
+                                                  id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
+
+                                                  <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
+
+                                              </div>
+                                          </div>
+                                          <div class="card-body p-2 tab-content w-100">
+                                              <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
+                                                  ${drawStateTabBlo(devNum)}
+                                              </div>
+                                              <div id="info" data-tabname="cardTab" data-tabrole="child">
+
+                                              </div>
+                                              <div id="errRec" data-tabname="cardTab" data-tabrole="child">
+                                                  ${drawErrRecTabBlo()}
+                                              </div>
+                                              <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
+                                                  ${drawOpeRecTabBlo()}
+                                              </div>
+                                          </div>
+                                      </div>`,
+            group: "device",
+            // 在 _sysElevator.html 及 _sysMonAll.html 會用到
+            onShow: function (tooltipEle, oriEle) {
+              // 執行 pop 視窗上方 Tab 類別
+              new YT.Tab({ tabName: "cardTab" });
+              // 系統監控才會有 data-devobj 屬性
+              let devObj = $(oriEle).data("devobj");
+              // 讀取運維列表
+              loadOpeRecTable(devGuid);
+              // 讀取異常列表
+              loadErr($(oriEle).data("number"));
+              // 讀取設備基本資料列表
+              $(tooltipEle)
+                .find("#info")
+                .html(
+                  typeof drawInfoTabBlo != "undefined"
+                    ? drawInfoTabBlo(devGuid)
+                    : ""
+                );
+              // 聚焦熱點
+              const eleDbId = parseInt($(oriEle).data("dbId"));
+              if (eleDbId) {
+                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
+                  changeScaleForHotspot(eleDbId);
+                } else {
+                  controlFocusHotspot(eleDbId);
                 }
-                span1.append(creSpan(data[notice.data]));
-                div2.append(span1);
-                div1.append(div2);
-              });
+              }
+              // 3D 視角 ZOOM IN 聚焦
 
-              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()
-            );
+              if (devObj) {
+                console.log("devObj", 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();
+        }
+        let url =
+          baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
+        let tag = "#opeRecTable";
+
+        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;
+          }
+          $(ele).css("background-color", color);
+          //是否閃爍
+          if (isFlashing) {
+            $(ele).parents(".device-wrap").addClass("light-flash");
+          } else {
+            $(ele).parents(".device-wrap").removeClass("light-flash");
           }
         });
       }
 
-      function getAllDevice() {
-        let url = baseApiUrl + "/api/Device/GetAllDevice";
-        let result = [];
+      // 設置昇位圖上方 燈號
+      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>`;
+        }
 
-        ytAjax = new YourTeam.Ajax(
-          url,
-          null,
-          function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-            } else {
-              result = res.data;
-            }
-          },
-          null,
-          "POST"
-        ).send();
-        return result;
+        return strHtml;
       }
 
-      function loadNoticeConSta() {
-        let noticeStatus = localStorage.getItem("noticeStatus");
-        chaNoticeConSta(noticeStatus ?? "show");
+      function crePosPopover(position, obj) {
+        let _position = {};
+        _position.tpLeft = position[0];
+        _position.tpTop = position[1];
+        _position.tpOffHeight = 24;
+        let parentEle = creDiv();
+        parentEle.append(
+          `<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`
+        );
+        parentEle.data("id", obj.device_guid);
+        parentEle.data("number", obj.device_number);
+        parentEle.data("dbId", obj._dbId);
+        parentEle.data("name", obj.full_name || obj.device_node_full_name);
+        console.log("crePosPopover", parentEle.data());
+        initPopover(null, _position, parentEle);
+
+        return parentEle;
       }
 
-      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();
+      // 設置 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;
           }
-        } else {
-          if ($("#noticeBlock").is(":visible")) {
-            setHide();
-          } else if (!$("#noticeBlock").is(":visible")) {
-            setShow();
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function alarmIconBlink(data) {
+      if (data?.data.length != 0) {
+        $(".page-header [name=topFunBtn][data-page=alert] i").addClass(
+          "blink"
+        );
+      } else {
+        $(".page-header [name=topFunBtn][data-page=alert] i").removeClass(
+          "blink"
+        );
+      }
+    }
+
+    function timeOutGetData() {
+      let timeOut3s = null,
+        timeOut5m = null;
+      let events = $._data($(window)[0], "events");
+
+      if (Object.keys(events).findIndex((x) => x == "timeout:3s") != -1) {
+        timeOut3s = setInterval(() => {
+          $(window).trigger("timeout:3s");
+        }, 3000);
+      }
+
+      if (Object.keys(events).findIndex((x) => x == "timeout:5m") != -1) {
+        timeOut5m = setInterval(() => {
+          $(window).trigger("timeout:5m");
+        }, 5 * 60 * 1000);
+      }
+
+      timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
+    }
+
+    function showMainSys() {
+      let url = baseApiUrl + "/Utility/isShowMaiSys";
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000") {
+          } else {
+            pageAct.mainStatus = res.data;
           }
-        }
+        },
+        null,
+        "POST"
+      ).send();
+    }
 
-        function setShow() {
-          $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
-          $("#noticeConIcon").addClass(iconArr[0]);
-          $("#noticeBlock").show();
-          $("#noticeBlock").animate({ opacity: 1 }, 200);
-          localStorage.setItem("noticeStatus", "show");
-        }
+    function startPageLoading() {
+      if (!loadingTip) {
+        loadingTip = YT.Alert.Tip("資料讀取中...", "show");
+      }
+    }
 
-        function setHide() {
-          $("#toggleNoticeBtn").find("#noticeConText").text(showText);
-          $("#noticeConIcon").addClass(iconArr[1]);
-          $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
-            $("#noticeBlock").hide();
-          });
-          localStorage.setItem("noticeStatus", "hide");
+    function endPageLoading() {
+      if (loadingTip != null) {
+        $(loadingTip.ele).YTAlert().hide();
+        loadingTip = null;
+      }
+    }
+
+    function iniFroList() {
+      url = baseApiUrl + "/api/GetUsrFroList";
+      let hasMonitor = false;
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            let strHtml = `<div class="btn-group mx-4">
+                                                                          <a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
+                                                                              <i class="fal fa-home fa-2x"></i><br>首頁
+                                                                          </a>
+                                                                          <!--<div class="dropdown-menu">
+                                                                              <button class="dropdown-item" type="button">Action</button>
+                                                                              <button class="dropdown-item" type="button">Another action</button>
+                                                                              <button class="dropdown-item" type="button">Something else here</button>
+                                                                          </div>-->
+                                                                      </div>`;
+
+            $.each(res.data, function (i, v) {
+              if (v.authCode == "PF1") {
+                strHtml += `<div class="btn-group mx-4" >
+                                                                              <a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
+                                                                                  <i class="fal fa-tv fa-2x"></i><br>${v.subName}
+                                                                              </a>
+
+                                                                          </div>`;
+
+                hasMonitor = true;
+              } else {
+                let icon =
+                  v.authCode == "PF2"
+                    ? "fa-chart-pie"
+                    : v.authCode == "PF3"
+                      ? "fa-chart-area"
+                      : v.authCode == "PF4"
+                        ? "fa-chart-line"
+                        : v.authCode == "PF5"
+                          ? "fa-bell"
+                          : v.authCode == "PF6"
+                            ? "fa-server"
+                            : v.authCode == "PF7"
+                              ? "fa-image"
+                              : v.authCode == "PF8"
+                                ? "fa-user"
+                                : "";
+                strHtml += `<div class="btn-group mx-4">
+                                                                              <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                                                                 data-page="${v.showView}">
+                                                                                  <i class="fal ${icon} fa-2x"></i><br>${v.subName}
+                                                                              </a>
+                                                                          </div>`;
+              }
+            });
+
+            $("#froLisPage").html(strHtml);
+            $("#sysMonTopBtn").YTNavbar("init");
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function getSysMonBtnList() {
+      let url = baseApiUrl + "/api/Device/GetMainSub";
+      let sendData = {
+        building_tag: pageAct.buiTag,
+      };
+      objSendData.Data = sendData;
+      ytAjax = new YourTeam.Ajax(
+        url,
+        objSendData,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            $("#sysMonBtnList").html("");
+
+            $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
+              $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
+                let page = "systemMonitor";
+                if (subSysObj.sub_system_tag == "EL") {
+                  page = "sysElevator";
+                }
+                // console.log(subSysObj.sub_system_tag)
+                // if (subSysObj.sub_system_tag == "M12") {
+                //     page = "sysSensor";
+                // }
+
+                let li = creEle("li");
+                let a = creA(
+                  subSysObj.full_name,
+                  { href: "javascript:;" },
+                  [],
+                  `subSysBtn${subSysObj.sub_system_tag}`,
+                  { page: page, tabname: "systemMonitor" },
+                  "topFunBtn"
+                );
+                li.append(a);
+                a.data("subSysObj", subSysObj);
+                subSysObj.main_system_tag = mainSysObj.main_system_tag;
+                $("#sysMonBtnList").append(li);
+              });
+            });
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function getLogo() {
+      url = baseApiUrl + "/api/GetLogo";
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          $("[name=webLogo]").attr("src", baseImgUrl + "/img/" + res.data);
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    function getUserInfo() {
+      let url = baseApiUrl + varApiUrl + "getUserFull";
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000") {
+          } else {
+            pageAct.userInfo = res.data;
+            let user = res.data;
+            $("#usrName").text(user.full_name);
+          }
+        },
+        null,
+        "POST"
+      ).send();
+    }
+
+    var noticeOptArr = [];
+    function getAlarmFromDB() {
+      let url = baseApiUrl + "/api/AlarmCard";
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            let datas = res.data;
+          }
+        },
+        null,
+        "POST",
+        true
+      ).send();
+    }
+
+    function getAlarm() {
+      let now = new Date().getTime();
+      let noticeObj = [
+        { title: "異常編號", data: "uuid" },
+        { title: "異常等級", data: "priority" },
+        { title: "異常類別", data: "alarmClass" },
+        { title: "設備名稱", data: "full_name" },
+        { title: "異常訊息", data: "msgText" },
+      ];
+      // 向 niagara 取得告警資料
+      getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
+        let datas = bajaDatas.data;
+        let titleHtml = `異常通知`;
+        let notices = [];
+        // 遍歷每個告警資料
+        $.each(datas ?? [], (idx, data) => {
+          if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
+            // 針對該告警對象的設備，從 allDevices 找出設備名稱
+            datas[idx].full_name = allDevices.filter(
+              (x) => x.device_number == data.devicePath
+            )[0]?.full_name;
+
+            let div1 = creDiv(["col-12"]);
+            let button = creBtn(
+              "確認",
+              "noticeChkBtn",
+              null,
+              ["btn btn-sm btn-secondary ml-auto col-4"],
+              { uuid: data.uuid }
+            );
+            let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
+            btnDiv.append(button);
+            // 繪製 每行告警資訊
+            noticeObj.forEach((notice) => {
+              let div2 = creDiv(["row", "m-0"]);
+              let span1 = creSpan(notice.title + "：", ["m-0"]);
+              if (notice.data === "uuid") {
+                data[notice.data] = data[notice.data].split("-")[0];
+              }
+              span1.append(creSpan(data[notice.data]));
+              div2.append(span1);
+              div1.append(div2);
+            });
+
+            div1.append(btnDiv);
+            // 拚湊 YTNotice 通知套件所需參數
+            let main = {
+              title: titleHtml,
+              content: div1.outerHtml(),
+              type: "warning",
+              id: data.uuid,
+              hasCloseBtn: true,
+              timeText: displayDate(data.timestamp),
+            };
+            noticeOptArr.push(main);
+            notices.push(main);
+          }
+        });
+        if (notices.length != 0) {
+          $("#noticeBlock").YTNotice(
+            "add_many",
+            notices.oSort("id").reverse()
+          );
+        }
+      });
+    }
+
+    function getAllDevice() {
+      let url = baseApiUrl + "/api/Device/GetAllDevice";
+      let result = [];
+
+      ytAjax = new YourTeam.Ajax(
+        url,
+        null,
+        function (res) {
+          if (!res || res.code != "0000" || !res.data) {
+          } else {
+            result = res.data;
+          }
+        },
+        null,
+        "POST"
+      ).send();
+      return result;
+    }
+
+    function loadNoticeConSta() {
+      let noticeStatus = localStorage.getItem("noticeStatus");
+      chaNoticeConSta(noticeStatus ?? "show");
+    }
+
+    function chaNoticeConSta(type = null) {
+      let showText = $("#toggleNoticeBtn #noticeConText").data("show");
+      let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
+      let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
+      $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
+      if (type != null) {
+        if (type == "hide") {
+          setHide();
+        } else if (type == "show") {
+          setShow();
+        }
+      } else {
+        if ($("#noticeBlock").is(":visible")) {
+          setHide();
+        } else if (!$("#noticeBlock").is(":visible")) {
+          setShow();
         }
       }
-    </script>
-  </body>
-  <!-- END Body -->
+
+      function setShow() {
+        $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
+        $("#noticeConIcon").addClass(iconArr[0]);
+        $("#noticeBlock").show();
+        $("#noticeBlock").animate({ opacity: 1 }, 200);
+        localStorage.setItem("noticeStatus", "show");
+      }
+
+      function setHide() {
+        $("#toggleNoticeBtn").find("#noticeConText").text(showText);
+        $("#noticeConIcon").addClass(iconArr[1]);
+        $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
+          $("#noticeBlock").hide();
+        });
+        localStorage.setItem("noticeStatus", "hide");
+      }
+    }
+  </script>
+</body>
+<!-- END Body -->
 </html>
diff --git a/Frontend/js/n4js/bajatest.js b/Frontend/js/n4js/bajatest.js
index f7f3f18..05dc525 100644
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@@ -23,378 +23,377 @@ window.tolSubList = [];
 var user_name = "";
 
 class subscriptionDevices {
-    constructor() {
-        this.ordPath = {};
-        this.changeCallback = null;
-        this.changeEndCallback = null;
+  constructor() {
+    this.ordPath = {};
+    this.changeCallback = null;
+    this.changeEndCallback = null;
+  }
+
+  setSubscribeDevicesByBql = function (tempOrdPath) {
+    this.ordPath = tempOrdPath;
+    this.BajaSubscribeDevicesByBql();
+  };
+
+  setSubscribeDevicesCallBack = function (callBackFunc) {
+    // console.log(callBackFunc)
+    if (callBackFunc != undefined && callBackFunc != null) {
+      this.changeCallback = callBackFunc;
     }
+  }
+  // BQL訂閱結束回傳的Function
+  setSubscribeDeviceEndCallBack = function (callBackFunc) {
+    if (callBackFunc != undefined && callBackFunc != null) {
+      this.changeEndCallback = callBackFunc;
+    }
+  }
 
-    setSubscribeDevicesByBql = function (tempOrdPath) {
-        this.ordPath = tempOrdPath;
-        this.BajaSubscribeDevicesByBql();
-    };
+  BajaSubscribeDevicesByBql = function () {
+    let _this = this;
+    require(['baja!'], function (baja) {
+      console.log("進入Function 準備執行BQL訂閱");
+      startPageLoading ? startPageLoading() : ""
+      var init_start = new Date(Date.now());
+      var sub = new baja.Subscriber();
 
-    setSubscribeDevicesCallBack = function (callBackFunc) {
-        // console.log(callBackFunc)
-        if (callBackFunc != undefined && callBackFunc != null) {
-            this.changeCallback = callBackFunc;
+      sub.attach('changed', function (prop) {
+        if (prop.getName() === 'out') {
+          var out_value = this.getOutDisplay();
+          var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+          var point_name = this.getDisplayName();
+
+          //依據Facets判斷回傳的內容值為何
+          var facets_split = this.getFacets1().$cEncStr.split('|');
+          var facets_arr = [];
+          facets_split.forEach(function (item, index) {
+            facets_arr.push(item.split('=s:'));
+          });
+
+          var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+          var point_out_split = this.getOutDisplay().split(' ');
+
+          let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+          if (key == undefined) {
+            key = point_out_split[0];
+          }
+
+          var modify_target_device = {
+            "device_number": target_device_number ? target_device_number : null,
+            "device_number_full": this.$parent.getSlotPath().$names.join("_"),
+            "point_name": point_name ? point_name : null,
+            "value": key
+          }
+          if (_this.changeCallback != undefined && _this.changeCallback != null) {
+            _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+          }
         }
-    }
-    // BQL訂閱結束回傳的Function
-    setSubscribeDeviceEndCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            this.changeEndCallback = callBackFunc;
-        }
-    }
+      }, function (err) {
+        console.log(err)
+      });
 
-    BajaSubscribeDevicesByBql = function () {
-        let _this = this;
-        require(['baja!'], function (baja) {
-            console.log("進入Function 準備執行BQL訂閱");
-            startPageLoading ? startPageLoading() : ""
-            var init_start = new Date(Date.now());
-            var sub = new baja.Subscriber();
+      //使用bql語法
+      // var building_tag = "H";
+      // var system_tag = "M10";
+      // baja.Ord.make(`ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/${building_tag}/${system_tag}|bql:select name, displayname, slotPath, out.value, out from control:ControlPoint`)
+      console.log(`local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`);
+      baja.Ord.make(`local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`)
+        .get(
+          function (table) {
+            var tableStart, tableFinish;
+            var subStart, subFinish;
+            var component_index = 0;
+            var total_component_index = 0;
+            var totalTargetDevice = [];
+            var readBqlFinish = new Date(Date.now());
+            // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
+            // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+            console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+            table.cursor({
+              before: function () {
+                totalTargetDevice = [];
+                tableStart = new Date(Date.now());
+                $("#table-start-timestamp").html(tableStart.toISOString());
 
-            sub.attach('changed', function (prop) {
-                console.log("Light prop", prop.getName())
-                if (prop.getName() === 'out') {
-                    var out_value = this.getOutDisplay();
-                    var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                    var point_name = this.getDisplayName();
 
-                    //依據Facets判斷回傳的內容值為何
-                    var facets_split = this.getFacets1().$cEncStr.split('|');
-                    var facets_arr = [];
-                    facets_split.forEach(function (item, index) {
-                        facets_arr.push(item.split('=s:'));
-                    });
-
-                    var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-                    var point_out_split = this.getOutDisplay().split(' ');
-
-                    let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                    if (key == undefined) {
-                        key = point_out_split[0];
-                    }
-
-                    var modify_target_device = {
-                        "device_number": target_device_number ? target_device_number : null,
-                        "device_number_full": this.$parent.getSlotPath().$names.join("_"),
-                        "point_name": point_name ? point_name : null,
-                        "value": key
-                    }
-                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                        _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                    }
+              },
+              each: function (item, index) {
+                if (index < 1) {
+                  subStart = new Date(Date.now());
+                  $("#sub-start").html(subStart.toISOString());
                 }
-            }, function (err) {
-                console.log(err)
-            });
-
-            //使用bql語法
-            // var building_tag = "H";
-            // var system_tag = "M10";
-            // baja.Ord.make(`ip:greencloud.fic.com.tw|foxs:|station:|slot:/Arena/${building_tag}/${system_tag}|bql:select name, displayname, slotPath, out.value, out from control:ControlPoint`)
-            console.log(`local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`);
-            baja.Ord.make(`local:|foxs:${port}|station:|slot:/${_this.ordPath.area_tag}/${_this.ordPath.building_tag}/${_this.ordPath.system_tag}/${_this.ordPath.name_tag}${_this.ordPath.flo_tag ? `/${_this.ordPath.flo_tag}` : ""}|bql:select name, displayname, slotPath, out.value, out, facets  from control:ControlPoint`)
-                .get(
-                    function (table) {
-                        var tableStart, tableFinish;
-                        var subStart, subFinish;
-                        var component_index = 0;
-                        var total_component_index = 0;
-                        var totalTargetDevice = [];
-                        var readBqlFinish = new Date(Date.now());
-                        // $("#readPath-finish-timestamp").html(readBqlFinish.toISOString());
-                        // $("#readPath-finish-time").html((readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-                        console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-                        table.cursor({
-                            before: function () {
-                                totalTargetDevice = [];
-                                tableStart = new Date(Date.now());
-                                $("#table-start-timestamp").html(tableStart.toISOString());
-
-
-                            },
-                            each: function (item, index) {
-                                if (index < 1) {
-                                    subStart = new Date(Date.now());
-                                    $("#sub-start").html(subStart.toISOString());
-                                }
-                                $("#sub-number").html(index + 1);
-                                total_component_index = index;
+                $("#sub-number").html(index + 1);
+                total_component_index = index;
 
 
 
-                                var target_device_number_split = this.getDisplay("slotPath").split('/');
-                                var target_device_number = target_device_number_split[8];
-                                //console.log(target_device_number);
-                                var point_name = this.getDisplay("name");
-                                var facets = this.getDisplay("facets");
+                var target_device_number_split = this.getDisplay("slotPath").split('/');
+                var target_device_number = target_device_number_split[8];
+                //console.log(target_device_number);
+                var point_name = this.getDisplay("name");
+                var facets = this.getDisplay("facets");
 
-                                //依據Facets判斷回傳的內容值為何
-                                var facets_split = facets.split(',');
-                                var facets_arr = [];
-                                facets_split.forEach(function (item, index) {
-                                    facets_arr.push(item.split('='));
-                                });
+                //依據Facets判斷回傳的內容值為何
+                var facets_split = facets.split(',');
+                var facets_arr = [];
+                facets_split.forEach(function (item, index) {
+                  facets_arr.push(item.split('='));
+                });
 
-                                facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+                facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
 
-                                var point_out_split = this.getDisplay("out").split(' ');
+                var point_out_split = this.getDisplay("out").split(' ');
 
-                                let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+                let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
 
-                                if (key == undefined) {
-                                    key = point_out_split[0];
-                                }
+                if (key == undefined) {
+                  key = point_out_split[0];
+                }
 
-                                var modify_target_device = {
-                                    "device_number": target_device_number ? target_device_number : null,
-                                    "device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
-                                    "point_name": point_name ? point_name : null,
-                                    "value": key
-                                }
-                                totalTargetDevice.push(modify_target_device);
-                                //取得component當下就更新設備點位
-                                // if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                //     _this.changeCallback(modify_target_device);
-                                // }
-                                if (pageAct.sysSubTag === "L1") {
-                                    if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                                        if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                            _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                                            baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
-                                                .get()
-                                                .then(function (component) {
-                                                    // console.log("component",component)
-                                                    component_index++;
-                                                    var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                var modify_target_device = {
+                  "device_number": target_device_number ? target_device_number : null,
+                  "device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
+                  "point_name": point_name ? point_name : null,
+                  "value": key
+                }
+                totalTargetDevice.push(modify_target_device);
+                //取得component當下就更新設備點位
+                // if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                //     _this.changeCallback(modify_target_device);
+                // }
+                if (pageAct.sysSubTag === "L1") {
+                  if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
+                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                      _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                      baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
+                        .get()
+                        .then(function (component) {
+                          // console.log("component",component)
+                          component_index++;
+                          var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
 
-                                                    var out_value = component.getOutDisplay();
-                                                    var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                                                    var point_name = component.getDisplayName();
-                                                    //依據Facets判斷回傳的內容值為何
-                                                    var facets_split = component.getFacets1().$cEncStr.split('|');
-                                                    var facets_arr = [];
-                                                    facets_split.forEach(function (item, index) {
-                                                        facets_arr.push(item.split('=s:'));
-                                                    });
+                          var out_value = component.getOutDisplay();
+                          var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                          var point_name = component.getDisplayName();
+                          //依據Facets判斷回傳的內容值為何
+                          var facets_split = component.getFacets1().$cEncStr.split('|');
+                          var facets_arr = [];
+                          facets_split.forEach(function (item, index) {
+                            facets_arr.push(item.split('=s:'));
+                          });
 
-                                                    var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+                          var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
 
-                                                    var point_out_split = component.getOutDisplay().split(' ');
+                          var point_out_split = component.getOutDisplay().split(' ');
 
-                                                    let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+                          let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
 
-                                                    if (key == undefined) {
-                                                        key = point_out_split[0];
-                                                    }
+                          if (key == undefined) {
+                            key = point_out_split[0];
+                          }
 
-                                                    var modify_target_device = {
-                                                        "device_number": target_device_number ? target_device_number : null,
-                                                        "device_number_full": component.$parent.getSlotPath().$names.join("_"),
-                                                        "point_name": point_name ? point_name : null,
-                                                        "value": key
-                                                    }
+                          var modify_target_device = {
+                            "device_number": target_device_number ? target_device_number : null,
+                            "device_number_full": component.$parent.getSlotPath().$names.join("_"),
+                            "point_name": point_name ? point_name : null,
+                            "value": key
+                          }
 
-                                                    if (pageAct.sysSubTag === "L1") {
-                                                        if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                                                            if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                                                _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                                                            }
-                                                        }
-                                                    } else {
-                                                        if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                                            _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                                                        }
-                                                    }
+                          if (pageAct.sysSubTag === "L1") {
+                            if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
+                              if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                                _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                              }
+                            }
+                          } else {
+                            if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                              _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                            }
+                          }
 
 
-                                                    // //依據Facets判斷回傳的內容值為何
-                                                    // var facets_split = component.getFacets1().$cEncStr.split('|');
-                                                    // var facets_arr = [];
-                                                    // facets_split.forEach(function (item, index) {
-                                                    //   facets_arr.push(item.split('=s:'));
-                                                    // });
+                          // //依據Facets判斷回傳的內容值為何
+                          // var facets_split = component.getFacets1().$cEncStr.split('|');
+                          // var facets_arr = [];
+                          // facets_split.forEach(function (item, index) {
+                          //   facets_arr.push(item.split('=s:'));
+                          // });
 
-                                                    // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+                          // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
 
-                                                    // var point_out_split = component.getOutDisplay().split(' ');
+                          // var point_out_split = component.getOutDisplay().split(' ');
 
-                                                    // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+                          // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
 
-                                                    // if (key == undefined) {
-                                                    //   key = point_out_split[0];
-                                                    // }
+                          // if (key == undefined) {
+                          //   key = point_out_split[0];
+                          // }
 
-                                                    // var modify_target_device = {
-                                                    //   "device_number": target_device_number ? target_device_number : null,
-                                                    //   "point_name": point_name ? point_name : null,
-                                                    //   "value": key
-                                                    // }
+                          // var modify_target_device = {
+                          //   "device_number": target_device_number ? target_device_number : null,
+                          //   "point_name": point_name ? point_name : null,
+                          //   "value": key
+                          // }
 
-                                                    // //取得component當下就更新設備點位
-                                                    // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
-                                                    //   if (component_index == total_component_index) {
-                                                    //     baja_subscribe_device_callback_func(modify_target_device, true);
-                                                    //   }
-                                                    //   else {
-                                                    //     baja_subscribe_device_callback_func(modify_target_device);
-                                                    //   }
-                                                    // }
+                          // //取得component當下就更新設備點位
+                          // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+                          //   if (component_index == total_component_index) {
+                          //     baja_subscribe_device_callback_func(modify_target_device, true);
+                          //   }
+                          //   else {
+                          //     baja_subscribe_device_callback_func(modify_target_device);
+                          //   }
+                          // }
 
-                                                    if (pageAct.sysSubTag === "L1") {
-                                                        if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                                                            sub.subscribe({
-                                                                comps: component,
-                                                            });
-                                                        }
-                                                    } else {
-                                                        sub.subscribe({
-                                                            comps: component,
-                                                        });
-                                                    }
+                          if (pageAct.sysSubTag === "L1") {
+                            if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
+                              sub.subscribe({
+                                comps: component,
+                              });
+                            }
+                          } else {
+                            sub.subscribe({
+                              comps: component,
+                            });
+                          }
 
-                                                    // sub.subscribe({
-                                                    //     comps: component,
-                                                    // });
-                                                    tolSubList.push(sub);
-                                                    subFinish = new Date(Date.now());
-                                                    $("#sub-end").html(subFinish.toISOString());
-                                                    $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                                    // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                                });
-                                        }
-                                    }
-                                } else {
-                                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                        _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                                        baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
-                                            .get()
-                                            .then(function (component) {
-                                                component_index++;
-                                                var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-
-                                                var out_value = component.getOutDisplay();
-                                                var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                                                var point_name = component.getDisplayName();
-                                                //依據Facets判斷回傳的內容值為何
-                                                var facets_split = component.getFacets1().$cEncStr.split('|');
-                                                var facets_arr = [];
-                                                facets_split.forEach(function (item, index) {
-                                                    facets_arr.push(item.split('=s:'));
-                                                });
-
-                                                var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-                                                var point_out_split = component.getOutDisplay().split(' ');
-
-                                                let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                                                if (key == undefined) {
-                                                    key = point_out_split[0];
-                                                }
-
-                                                var modify_target_device = {
-                                                    "device_number": target_device_number ? target_device_number : null,
-                                                    "device_number_full": component.$parent.getSlotPath().$names.join("_"),
-                                                    "point_name": point_name ? point_name : null,
-                                                    "value": key
-                                                }
-
-                                                if (pageAct.sysSubTag === "L1") {
-                                                    if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                                                        if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                                            _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                                                        }
-                                                    }
-                                                } else {
-                                                    if (_this.changeCallback != undefined && _this.changeCallback != null) {
-                                                        _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                                                    }
-                                                }
-
-
-                                                // //依據Facets判斷回傳的內容值為何
-                                                // var facets_split = component.getFacets1().$cEncStr.split('|');
-                                                // var facets_arr = [];
-                                                // facets_split.forEach(function (item, index) {
-                                                //   facets_arr.push(item.split('=s:'));
-                                                // });
-
-                                                // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-                                                // var point_out_split = component.getOutDisplay().split(' ');
-
-                                                // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                                                // if (key == undefined) {
-                                                //   key = point_out_split[0];
-                                                // }
-
-                                                // var modify_target_device = {
-                                                //   "device_number": target_device_number ? target_device_number : null,
-                                                //   "point_name": point_name ? point_name : null,
-                                                //   "value": key
-                                                // }
-
-                                                // //取得component當下就更新設備點位
-                                                // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
-                                                //   if (component_index == total_component_index) {
-                                                //     baja_subscribe_device_callback_func(modify_target_device, true);
-                                                //   }
-                                                //   else {
-                                                //     baja_subscribe_device_callback_func(modify_target_device);
-                                                //   }
-                                                // }
-
-                                                if (pageAct.sysSubTag === "L1") {
-                                                    if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
-                                                        sub.subscribe({
-                                                            comps: component,
-                                                        });
-                                                    }
-                                                } else {
-                                                    sub.subscribe({
-                                                        comps: component,
-                                                    });
-                                                }
-
-                                                // sub.subscribe({
-                                                //     comps: component,
-                                                // });
-                                                tolSubList.push(sub);
-                                                subFinish = new Date(Date.now());
-                                                $("#sub-end").html(subFinish.toISOString());
-                                                $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                                // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                            });
-                                    }
-                                }
-
-
-
-                            },
-                            after: function () {
-                                tableFinish = new Date(Date.now());
-                                // $("#table-finish-timestamp").html(tableFinish.toISOString());
-                                // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-                                //取得component當下就更新設備點位
-                                if (_this.changeEndCallback != undefined && _this.changeEndCallback != null) {
-                                    _this.changeEndCallback(totalTargetDevice);
-                                }
-                                endPageLoading ? endPageLoading() : ""
-                                console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-                            },
-                            limit: -1,
-                            offset: 0
+                          // sub.subscribe({
+                          //     comps: component,
+                          // });
+                          tolSubList.push(sub);
+                          subFinish = new Date(Date.now());
+                          $("#sub-end").html(subFinish.toISOString());
+                          $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                          // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
                         });
-                    });
-        })
-    }
+                    }
+                  }
+                } else {
+                  if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                    _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                    baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
+                      .get()
+                      .then(function (component) {
+                        component_index++;
+                        var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+
+                        var out_value = component.getOutDisplay();
+                        var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                        var point_name = component.getDisplayName();
+                        //依據Facets判斷回傳的內容值為何
+                        var facets_split = component.getFacets1().$cEncStr.split('|');
+                        var facets_arr = [];
+                        facets_split.forEach(function (item, index) {
+                          facets_arr.push(item.split('=s:'));
+                        });
+
+                        var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+                        var point_out_split = component.getOutDisplay().split(' ');
+
+                        let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+                        if (key == undefined) {
+                          key = point_out_split[0];
+                        }
+
+                        var modify_target_device = {
+                          "device_number": target_device_number ? target_device_number : null,
+                          "device_number_full": component.$parent.getSlotPath().$names.join("_"),
+                          "point_name": point_name ? point_name : null,
+                          "value": key
+                        }
+
+                        if (pageAct.sysSubTag === "L1") {
+                          if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
+                            if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                              _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                            }
+                          }
+                        } else {
+                          if (_this.changeCallback != undefined && _this.changeCallback != null) {
+                            _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+                          }
+                        }
+
+
+                        // //依據Facets判斷回傳的內容值為何
+                        // var facets_split = component.getFacets1().$cEncStr.split('|');
+                        // var facets_arr = [];
+                        // facets_split.forEach(function (item, index) {
+                        //   facets_arr.push(item.split('=s:'));
+                        // });
+
+                        // var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+
+                        // var point_out_split = component.getOutDisplay().split(' ');
+
+                        // let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+                        // if (key == undefined) {
+                        //   key = point_out_split[0];
+                        // }
+
+                        // var modify_target_device = {
+                        //   "device_number": target_device_number ? target_device_number : null,
+                        //   "point_name": point_name ? point_name : null,
+                        //   "value": key
+                        // }
+
+                        // //取得component當下就更新設備點位
+                        // if (baja_subscribe_device_callback_func != undefined && baja_subscribe_device_callback_func != null) {
+                        //   if (component_index == total_component_index) {
+                        //     baja_subscribe_device_callback_func(modify_target_device, true);
+                        //   }
+                        //   else {
+                        //     baja_subscribe_device_callback_func(modify_target_device);
+                        //   }
+                        // }
+
+                        if (pageAct.sysSubTag === "L1") {
+                          if (point_name === "SSC" || point_name === "TRIP" || point_name === "ONOFF") {
+                            sub.subscribe({
+                              comps: component,
+                            });
+                          }
+                        } else {
+                          sub.subscribe({
+                            comps: component,
+                          });
+                        }
+
+                        // sub.subscribe({
+                        //     comps: component,
+                        // });
+                        tolSubList.push(sub);
+                        subFinish = new Date(Date.now());
+                        $("#sub-end").html(subFinish.toISOString());
+                        $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                        // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                      });
+                  }
+                }
+
+
+
+              },
+              after: function () {
+                tableFinish = new Date(Date.now());
+                // $("#table-finish-timestamp").html(tableFinish.toISOString());
+                // $("#table-time").html((tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+                //取得component當下就更新設備點位
+                if (_this.changeEndCallback != undefined && _this.changeEndCallback != null) {
+                  _this.changeEndCallback(totalTargetDevice);
+                }
+                endPageLoading ? endPageLoading() : ""
+                console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+              },
+              limit: -1,
+              offset: 0
+            });
+          });
+    })
+  }
 }
 
 //function subscriptionDevices() {
@@ -419,53 +418,53 @@ class subscriptionDevices {
 //}
 
 function subscriptionAlarms() {
-    // 用BQL的方式去訂閱
-    this.setSubscribeAlarmsByBql = function (tempOrdPath) {
-        BajaSubscribeAlarmsByBql(tempOrdPath);
-    };
-    // BQL去訂閱回傳的Function
-    this.setSubscribeAlarmsCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_alarm_callback_func = callBackFunc;
-        }
+  // 用BQL的方式去訂閱
+  this.setSubscribeAlarmsByBql = function (tempOrdPath) {
+    BajaSubscribeAlarmsByBql(tempOrdPath);
+  };
+  // BQL去訂閱回傳的Function
+  this.setSubscribeAlarmsCallBack = function (callBackFunc) {
+    if (callBackFunc != undefined && callBackFunc != null) {
+      baja_subscribe_alarm_callback_func = callBackFunc;
     }
-    // BQL訂閱結束回傳的Function
-    this.setSubscribeAlarmEndCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_end_alarm_callback_func = callBackFunc;
-        }
+  }
+  // BQL訂閱結束回傳的Function
+  this.setSubscribeAlarmEndCallBack = function (callBackFunc) {
+    if (callBackFunc != undefined && callBackFunc != null) {
+      baja_subscribe_end_alarm_callback_func = callBackFunc;
     }
+  }
 
 }
 
 function subscriptionElectricmeter() {
-    // 用BQL的方式去訂閱
-    this.setSubscribeElectricmeterByBql = function (tempOrdPath) {
-        BajaSubscribeElectricmeterByBql(tempOrdPath);
-    };
-    // BQL去訂閱回傳的Function
-    this.setSubscribeElectricmeterCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_electricmeter_callback_func = callBackFunc;
-        }
+  // 用BQL的方式去訂閱
+  this.setSubscribeElectricmeterByBql = function (tempOrdPath) {
+    BajaSubscribeElectricmeterByBql(tempOrdPath);
+  };
+  // BQL去訂閱回傳的Function
+  this.setSubscribeElectricmeterCallBack = function (callBackFunc) {
+    if (callBackFunc != undefined && callBackFunc != null) {
+      baja_subscribe_electricmeter_callback_func = callBackFunc;
     }
-    // BQL訂閱結束回傳的Function
-    this.setSubscribeElectricmeterEndCallBack = function (callBackFunc) {
-        if (callBackFunc != undefined && callBackFunc != null) {
-            baja_subscribe_end_electricmeter_callback_func = callBackFunc;
-        }
+  }
+  // BQL訂閱結束回傳的Function
+  this.setSubscribeElectricmeterEndCallBack = function (callBackFunc) {
+    if (callBackFunc != undefined && callBackFunc != null) {
+      baja_subscribe_end_electricmeter_callback_func = callBackFunc;
     }
+  }
 }
 
 function MyBaja() {
-    // 取得使用者帳號
-    this.setMyUserAccount = function (callBackFunc = null) {
-        require(['baja!'], function (baja) {
-            user_name = baja.getUserName();
-            callBackFunc ? callBackFunc(user_name) : "";
-        });
+  // 取得使用者帳號
+  this.setMyUserAccount = function (callBackFunc = null) {
+    require(['baja!'], function (baja) {
+      user_name = baja.getUserName();
+      callBackFunc ? callBackFunc(user_name) : "";
+    });
 
-    };
+  };
 }
 
 /**
@@ -661,93 +660,93 @@ function MyBaja() {
  * 使用者透過BQL指定路徑去訂閱Alarm
  */
 function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
-    require(['baja!'], function (baja) {
-        console.log("進入Function 準備執行BQL訂閱");
-        var init_start = new Date(Date.now());
-        var sub = new baja.Subscriber();
-        startPageLoading ? startPageLoading() : ""
-        sub.attach('changed', function (prop) {
-            if (prop.getName() === 'out') {
-                var sourceState = (this.$map.$map.in10.$val.$map.$map.value.$display) == 'true' ? "Offnormal" : "Normal";
+  require(['baja!'], function (baja) {
+    console.log("進入Function 準備執行BQL訂閱");
+    var init_start = new Date(Date.now());
+    var sub = new baja.Subscriber();
+    startPageLoading ? startPageLoading() : ""
+    sub.attach('changed', function (prop) {
+      if (prop.getName() === 'out') {
+        var sourceState = (this.$map.$map.in10.$val.$map.$map.value.$display) == 'true' ? "Offnormal" : "Normal";
 
-                var modify_target_device = {
-                    "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
-                    "sourceState": sourceState ? sourceState : null
-                }
+        var modify_target_device = {
+          "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
+          "sourceState": sourceState ? sourceState : null
+        }
 
-                if (baja_subscribe_alarm_callback_func != undefined && baja_subscribe_alarm_callback_func != null) {
-                    baja_subscribe_alarm_callback_func(modify_target_device);
-                }
-            }
-        });
-
-        //使用bql語法
-        // console.log(`local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
-        baja.Ord.make(`local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
-            .get(
-                function (table) {
-                    var tableStart, tableFinish;
-                    var subStart, subFinish;
-                    var totalTargetDevice = [];
-                    var component_index = 0;
-                    var total_component_index = 0;
-                    var readBqlFinish = new Date(Date.now());
-                    console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-
-                    table.cursor({
-                        before: function () {
-                            totalTargetDevice = [];
-                            tableStart = new Date(Date.now());
-                            render_start = new Date(Date.now());
-                        },
-                        each: function (item, index) {
-                            if (index < 1) {
-                                subStart = new Date(Date.now());
-                            }
-                            total_component_index = index;
-
-                            var sourceState = this.getDisplay("sourceState");
-                            //var sourceName = (item.$map.$map.alarmData$2esourceName.$display).replace('_', '/');
-                            var sourceNameArray = (item.$map.$map.alarmData$2esourceName.$display).split('_');
-                            var slotPath = sourceNameArray[0] + "/" + sourceNameArray[1] + "/" + sourceNameArray[2] + "/" + sourceNameArray[3] + "/" + sourceNameArray[4] + "/" + sourceNameArray[5] + "/" + sourceNameArray[6] + "/" + sourceNameArray[7] + "/" + sourceNameArray[8];
-                            var normalTime = this.getDisplay("normalTime");
-
-                            var modify_target_device = {
-                                "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
-                                "sourceState": sourceState ? sourceState : null
-                            }
-                            totalTargetDevice.push(modify_target_device);
-                            //取得component當下就更新設備點位
-                            if (baja_subscribe_alarm_callback_func != undefined && baja_subscribe_alarm_callback_func != null) {
-                                baja_subscribe_alarm_callback_func(modify_target_device);
-                            }
-
-                            baja.Ord.make("local:|foxs:|station:|slot:/" + slotPath)
-                                .get()
-                                .then(function (component) {
-                                    component_index++;
-
-                                    sub.subscribe({
-                                        comps: component,
-                                    });
-
-                                    subFinish = new Date(Date.now());
-                                    console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                });
-                        },
-                        after: function () {
-                            tableFinish = new Date(Date.now());
-                            if (baja_subscribe_end_alarm_callback_func != undefined && baja_subscribe_end_alarm_callback_func != null) {
-                                baja_subscribe_end_alarm_callback_func(totalTargetDevice);
-                            }
-                            endPageLoading ? endPageLoading() : ""
-                            console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-                        },
-                        limit: -1,
-                        offset: 0
-                    });
-                });
+        if (baja_subscribe_alarm_callback_func != undefined && baja_subscribe_alarm_callback_func != null) {
+          baja_subscribe_alarm_callback_func(modify_target_device);
+        }
+      }
     });
+
+    //使用bql語法
+    // console.log(`local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
+    baja.Ord.make(`local:|foxs:${port}|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
+      .get(
+        function (table) {
+          var tableStart, tableFinish;
+          var subStart, subFinish;
+          var totalTargetDevice = [];
+          var component_index = 0;
+          var total_component_index = 0;
+          var readBqlFinish = new Date(Date.now());
+          console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+
+          table.cursor({
+            before: function () {
+              totalTargetDevice = [];
+              tableStart = new Date(Date.now());
+              render_start = new Date(Date.now());
+            },
+            each: function (item, index) {
+              if (index < 1) {
+                subStart = new Date(Date.now());
+              }
+              total_component_index = index;
+
+              var sourceState = this.getDisplay("sourceState");
+              //var sourceName = (item.$map.$map.alarmData$2esourceName.$display).replace('_', '/');
+              var sourceNameArray = (item.$map.$map.alarmData$2esourceName.$display).split('_');
+              var slotPath = sourceNameArray[0] + "/" + sourceNameArray[1] + "/" + sourceNameArray[2] + "/" + sourceNameArray[3] + "/" + sourceNameArray[4] + "/" + sourceNameArray[5] + "/" + sourceNameArray[6] + "/" + sourceNameArray[7] + "/" + sourceNameArray[8];
+              var normalTime = this.getDisplay("normalTime");
+
+              var modify_target_device = {
+                "system": ordPathForAlarm.area_tag + "_" + ordPathForAlarm.building_tag + "_" + ordPathForAlarm.system_tag + "_" + ordPathForAlarm.name_tag,
+                "sourceState": sourceState ? sourceState : null
+              }
+              totalTargetDevice.push(modify_target_device);
+              //取得component當下就更新設備點位
+              if (baja_subscribe_alarm_callback_func != undefined && baja_subscribe_alarm_callback_func != null) {
+                baja_subscribe_alarm_callback_func(modify_target_device);
+              }
+
+              baja.Ord.make("local:|foxs:|station:|slot:/" + slotPath)
+                .get()
+                .then(function (component) {
+                  component_index++;
+
+                  sub.subscribe({
+                    comps: component,
+                  });
+
+                  subFinish = new Date(Date.now());
+                  console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                });
+            },
+            after: function () {
+              tableFinish = new Date(Date.now());
+              if (baja_subscribe_end_alarm_callback_func != undefined && baja_subscribe_end_alarm_callback_func != null) {
+                baja_subscribe_end_alarm_callback_func(totalTargetDevice);
+              }
+              endPageLoading ? endPageLoading() : ""
+              console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+            },
+            limit: -1,
+            offset: 0
+          });
+        });
+  });
 }
 
 /**
@@ -756,146 +755,146 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
 function BajaSubscribeElectricmeterByBql(ordPathForElectricmeter) {
 
 
-    require(['baja!'], function (baja) {
-        //console.log("進入Function 準備執行BQL訂閱");
-        startPageLoading ? startPageLoading() : ""
-        var init_start = new Date(Date.now());
-        var sub = new baja.Subscriber();
+  require(['baja!'], function (baja) {
+    //console.log("進入Function 準備執行BQL訂閱");
+    startPageLoading ? startPageLoading() : ""
+    var init_start = new Date(Date.now());
+    var sub = new baja.Subscriber();
 
-        sub.attach('changed', function (prop) {
-            if (prop.getName() === 'out') {
-                var out_value = this.getOutDisplay();
-                var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                var point_name = this.getDisplayName();
+    sub.attach('changed', function (prop) {
+      if (prop.getName() === 'out') {
+        var out_value = this.getOutDisplay();
+        var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+        var point_name = this.getDisplayName();
 
-                //依據Facets判斷回傳的內容值為何
-                var facets_split = this.getFacets1().$cEncStr.split('|');
-                var facets_arr = [];
-                facets_split.forEach(function (item, index) {
-                    facets_arr.push(item.split('=s:'));
-                });
-
-                var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
-
-                var point_out_split = this.getOutDisplay().split(' ');
-
-                let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
-
-                if (key == undefined) {
-                    key = point_out_split[0];
-                }
-
-                var modify_target_device = {
-                    "device_number": target_device_number ? target_device_number : null,
-                    //"device_number_full": this.$parent.getSlotPath().$names.join("_"),
-                    "point_name": point_name ? point_name : null,
-                    "value": key
-                }
-
-                if (baja_subscribe_electricmeter_callback_func != undefined && baja_subscribe_electricmeter_callback_func != null) {
-                    baja_subscribe_electricmeter_callback_func(modify_target_device, true); //第2參數用在平面圖，刷新畫面
-                }
-            }
-        }, function (err) {
-            console.log(err)
+        //依據Facets判斷回傳的內容值為何
+        var facets_split = this.getFacets1().$cEncStr.split('|');
+        var facets_arr = [];
+        facets_split.forEach(function (item, index) {
+          facets_arr.push(item.split('=s:'));
         });
 
-        //使用bql語法
-        // console.log(`local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
-        baja.Ord.make(`local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`)
-            .get(
-                function (table) {
-                    var tableStart, tableFinish;
-                    var subStart, subFinish;
-                    var component_index = 0;
-                    var total_component_index = 0;
-                    var totalTargetDevice = [];
-                    var readBqlFinish = new Date(Date.now());
-                    //console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
-                    table.cursor({
-                        before: function () {
-                            totalTargetDevice = [];
-                            tableStart = new Date(Date.now());
-                            $("#table-start-timestamp").html(tableStart.toISOString());
-                            render_start = new Date(Date.now());
+        var facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
 
-                        },
-                        each: function (item, index) {
-                            if (index < 1) {
-                                subStart = new Date(Date.now());
-                                $("#sub-start").html(subStart.toISOString());
-                            }
-                            $("#sub-number").html(index + 1);
-                            total_component_index = index;
+        var point_out_split = this.getOutDisplay().split(' ');
+
+        let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+
+        if (key == undefined) {
+          key = point_out_split[0];
+        }
+
+        var modify_target_device = {
+          "device_number": target_device_number ? target_device_number : null,
+          //"device_number_full": this.$parent.getSlotPath().$names.join("_"),
+          "point_name": point_name ? point_name : null,
+          "value": key
+        }
+
+        if (baja_subscribe_electricmeter_callback_func != undefined && baja_subscribe_electricmeter_callback_func != null) {
+          baja_subscribe_electricmeter_callback_func(modify_target_device, true); //第2參數用在平面圖，刷新畫面
+        }
+      }
+    }, function (err) {
+      console.log(err)
+    });
+
+    //使用bql語法
+    // console.log(`local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
+    baja.Ord.make(`local:|foxs:${port}|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`)
+      .get(
+        function (table) {
+          var tableStart, tableFinish;
+          var subStart, subFinish;
+          var component_index = 0;
+          var total_component_index = 0;
+          var totalTargetDevice = [];
+          var readBqlFinish = new Date(Date.now());
+          //console.log("讀取路徑完成-花費時間", (readBqlFinish.getTime() - init_start.getTime()) / 1000 + "sec");
+          table.cursor({
+            before: function () {
+              totalTargetDevice = [];
+              tableStart = new Date(Date.now());
+              $("#table-start-timestamp").html(tableStart.toISOString());
+              render_start = new Date(Date.now());
+
+            },
+            each: function (item, index) {
+              if (index < 1) {
+                subStart = new Date(Date.now());
+                $("#sub-start").html(subStart.toISOString());
+              }
+              $("#sub-number").html(index + 1);
+              total_component_index = index;
 
 
 
-                            var target_device_number_split = this.getDisplay("slotPath").split('/');
-                            var target_device_number = target_device_number_split[8];
-                            //console.log(target_device_number);
-                            var point_name = this.getDisplay("name");
-                            var facets = this.getDisplay("facets");
+              var target_device_number_split = this.getDisplay("slotPath").split('/');
+              var target_device_number = target_device_number_split[8];
+              //console.log(target_device_number);
+              var point_name = this.getDisplay("name");
+              var facets = this.getDisplay("facets");
 
-                            //依據Facets判斷回傳的內容值為何
-                            var facets_split = facets.split(',');
-                            var facets_arr = [];
-                            facets_split.forEach(function (item, index) {
-                                facets_arr.push(item.split('='));
-                            });
+              //依據Facets判斷回傳的內容值為何
+              var facets_split = facets.split(',');
+              var facets_arr = [];
+              facets_split.forEach(function (item, index) {
+                facets_arr.push(item.split('='));
+              });
 
-                            facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
+              facets = facets_arr.reduce((obj, cur) => ({ ...obj, [cur[0]]: cur[1] }), {})
 
-                            var point_out_split = this.getDisplay("out").split(' ');
+              var point_out_split = this.getDisplay("out").split(' ');
 
-                            let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
+              let key = Object.keys(facets).find(k => facets[k] === point_out_split[0]);
 
-                            if (key == undefined) {
-                                key = point_out_split[0];
-                            }
+              if (key == undefined) {
+                key = point_out_split[0];
+              }
 
-                            var modify_target_device = {
-                                "device_number": target_device_number ? target_device_number : null,
-                                //"device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
-                                "point_name": point_name ? point_name : null,
-                                "value": key
-                            }
-                            totalTargetDevice.push(modify_target_device);
-                            //取得component當下就更新設備點位
-                            if (baja_subscribe_electricmeter_callback_func != undefined && baja_subscribe_electricmeter_callback_func != null) {
-                                baja_subscribe_electricmeter_callback_func(modify_target_device);
-                            }
+              var modify_target_device = {
+                "device_number": target_device_number ? target_device_number : null,
+                //"device_number_full": this.getDisplay("slotPath").split("slot:")[1].split('/').slice(1, -1).join("_"),
+                "point_name": point_name ? point_name : null,
+                "value": key
+              }
+              totalTargetDevice.push(modify_target_device);
+              //取得component當下就更新設備點位
+              if (baja_subscribe_electricmeter_callback_func != undefined && baja_subscribe_electricmeter_callback_func != null) {
+                baja_subscribe_electricmeter_callback_func(modify_target_device);
+              }
 
 
-                            baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
-                                .get()
-                                .then(function (component) {
-                                    component_index++;
-                                    //var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
-                                    //var point_name = component.getDisplayName();
+              baja.Ord.make(`local:|foxs:${port}|station:|` + this.getDisplay("slotPath"))
+                .get()
+                .then(function (component) {
+                  component_index++;
+                  //var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                  //var point_name = component.getDisplayName();
 
-                                    sub.subscribe({
-                                        comps: component,
-                                    });
-                                    tolSubList.push(sub);
-                                    subFinish = new Date(Date.now());
-                                    $("#sub-end").html(subFinish.toISOString());
-                                    $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                    // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
-                                });
-                        },
-                        after: function () {
-                            tableFinish = new Date(Date.now());
-                            if (baja_subscribe_end_electricmeter_callback_func != undefined && baja_subscribe_end_electricmeter_callback_func != null) {
-                                baja_subscribe_end_electricmeter_callback_func(totalTargetDevice);
-                            }
-                            endPageLoading ? endPageLoading() : ""
-                            //console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
-                        },
-                        limit: -1,
-                        offset: 0
-                    });
+                  sub.subscribe({
+                    comps: component,
+                  });
+                  tolSubList.push(sub);
+                  subFinish = new Date(Date.now());
+                  $("#sub-end").html(subFinish.toISOString());
+                  $("#sub-time").html((subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
+                  // console.log("訂閱完成時間", (subFinish.getTime() - subStart.getTime()) / 1000 + "sec");
                 });
-    })
+            },
+            after: function () {
+              tableFinish = new Date(Date.now());
+              if (baja_subscribe_end_electricmeter_callback_func != undefined && baja_subscribe_end_electricmeter_callback_func != null) {
+                baja_subscribe_end_electricmeter_callback_func(totalTargetDevice);
+              }
+              endPageLoading ? endPageLoading() : ""
+              //console.log("表格完成時間", (tableFinish.getTime() - tableStart.getTime()) / 1000 + "sec");
+            },
+            limit: -1,
+            offset: 0
+          });
+        });
+  })
 }
 
 // function getAlarmCountByBaja(callback) {
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index 185ade0..a554c0c 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -1,21 +1,21 @@
 $(function () {
-    $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
-        setDropdownItem(value);
-    });
+  $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
+    setDropdownItem(value);
+  });
 });
 
 /**
  * fn 定義 | 手動初始化 Bootstrap dropdown select
  */
 $.fn.droSetItem = function () {
-    setDropdownItem(this);
-    return this;
+  setDropdownItem(this);
+  return this;
 };
 /**
  * fn 定義 | 輸出含原元素 html
  */
 $.fn.outerHtml = function () {
-    return $(this).prop("outerHTML");
+  return $(this).prop("outerHTML");
 };
 
 /**
@@ -24,63 +24,63 @@ $.fn.outerHtml = function () {
  * @param {any} text - 右下角 Alert 文字
  */
 $.fn.Loading = function (type = "close", text) {
-    let ele = this;
-    let aleObj = $(this)[0]._aleObj;
-    let showStatus = $(ele).data("loading-show-status");
+  let ele = this;
+  let aleObj = $(this)[0]._aleObj;
+  let showStatus = $(ele).data("loading-show-status");
 
-    function closeLoading() {
-        $(ele).data("loading-show-status", "close");
-        $("body").css("overflow", "auto");
-        $(aleObj.ele).YTAlert().hide();
-        $(ele).animate({ opacity: 0 }, 300, () => {
-            if ($(ele).data("loading-show-status") == "close") {
-                $(ele).hide();
-            }
-        });
-    }
-    function showLoading() {
-        $(ele).data("loading-show-status", "show");
-        $("body").css("overflow", "hidden");
-        let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
-        $(ele)[0]._aleObj = aleObj;
-        $(ele).show();
-        $(ele).animate({ opacity: 1 }, 300);
+  function closeLoading() {
+    $(ele).data("loading-show-status", "close");
+    $("body").css("overflow", "auto");
+    $(aleObj.ele).YTAlert().hide();
+    $(ele).animate({ opacity: 0 }, 300, () => {
+      if ($(ele).data("loading-show-status") == "close") {
+        $(ele).hide();
+      }
+    });
+  }
+  function showLoading() {
+    $(ele).data("loading-show-status", "show");
+    $("body").css("overflow", "hidden");
+    let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
+    $(ele)[0]._aleObj = aleObj;
+    $(ele).show();
+    $(ele).animate({ opacity: 1 }, 300);
 
-        $(aleObj.ele).YTAlert().text(text);
-    }
-    if (type == "close") {
-        closeLoading();
-    } else if (type == "exceed") {
-        $(aleObj.ele).YTAlert().text(text);
-    } else if (type == "start") {
-        showLoading();
-    }
+    $(aleObj.ele).YTAlert().text(text);
+  }
+  if (type == "close") {
+    closeLoading();
+  } else if (type == "exceed") {
+    $(aleObj.ele).YTAlert().text(text);
+  } else if (type == "start") {
+    showLoading();
+  }
 
-    return $(this);
+  return $(this);
 };
 
 $.fn.YTAlert = function () {
-    let th = { element: this };
-    th.hide = function (delay = 0) {
-        let obj = this;
-        setTimeout(function () {
-            $(obj.element).fadeOut(300);
-            alertIdArray.splice(
-                $.inArray($(obj.element).prop("id"), alertIdArray),
-                1
-            );
-            setTimeout(function () {
-                $(obj.element).remove();
-            }, 1000);
-        }, delay);
-    };
+  let th = { element: this };
+  th.hide = function (delay = 0) {
+    let obj = this;
+    setTimeout(function () {
+      $(obj.element).fadeOut(300);
+      alertIdArray.splice(
+        $.inArray($(obj.element).prop("id"), alertIdArray),
+        1
+      );
+      setTimeout(function () {
+        $(obj.element).remove();
+      }, 1000);
+    }, delay);
+  };
 
-    th.text = function (text) {
-        let obj = this;
-        let id = $(obj.element).prop("id").split("tip-alert-")[1];
-        $(`#alert-text-${id}`).text(text);
-    };
-    return th;
+  th.text = function (text) {
+    let obj = this;
+    let id = $(obj.element).prop("id").split("tip-alert-")[1];
+    $(`#alert-text-${id}`).text(text);
+  };
+  return th;
 };
 
 /**
@@ -88,30 +88,30 @@ $.fn.YTAlert = function () {
  * @param {any} menuEle - .dropdown-menu element
  */
 function setDropdownItem(menuEle) {
-    if ($(menuEle).find(".dropdown-item.active").length == 0) {
-        $(menuEle).find(".dropdown-item").first().addClass("active");
+  if ($(menuEle).find(".dropdown-item.active").length == 0) {
+    $(menuEle).find(".dropdown-item").first().addClass("active");
+  }
+
+  let actText = $(menuEle).find(".dropdown-item.active").first().text();
+  let actEleId = $(menuEle).prop("id");
+  $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
+
+  /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
+  $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
+
+  //點選選項 add active class
+  onEvent(
+    "click",
+    ".dropdown-menu.dropdown-select-menu .dropdown-item",
+    function () {
+      $(this)
+        .parent(".dropdown-menu.dropdown-select-menu")
+        .find(".dropdown-item")
+        .removeClass("active");
+      $(this).addClass("active");
+      setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
     }
-
-    let actText = $(menuEle).find(".dropdown-item.active").first().text();
-    let actEleId = $(menuEle).prop("id");
-    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
-
-    /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
-    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
-
-    //點選選項 add active class
-    onEvent(
-        "click",
-        ".dropdown-menu.dropdown-select-menu .dropdown-item",
-        function () {
-            $(this)
-                .parent(".dropdown-menu.dropdown-select-menu")
-                .find(".dropdown-item")
-                .removeClass("active");
-            $(this).addClass("active");
-            setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
-        }
-    );
+  );
 }
 
 /**
@@ -119,8 +119,8 @@ function setDropdownItem(menuEle) {
  * @param {any} obj
  */
 function defDev(obj) {
-    let defSrc = "img/defdev.png";
-    obj.src = defSrc;
+  let defSrc = "img/defdev.png";
+  obj.src = defSrc;
 }
 
 /**
@@ -129,10 +129,10 @@ function defDev(obj) {
  * @param {any} sendData
  */
 function dtAjaxResetSendData(table, sendData) {
-    table.context[0].ajax.data = function (d) {
-        d = sendData;
-        return JSON.stringify(d);
-    };
+  table.context[0].ajax.data = function (d) {
+    d = sendData;
+    return JSON.stringify(d);
+  };
 }
 
 /**
@@ -145,505 +145,505 @@ function dtAjaxResetSendData(table, sendData) {
  * @param {any} attr
  */
 function eleBuild(
-    text = null,
-    id = null,
-    name = null,
-    cls = [],
-    data = {},
-    attr = {}
+  text = null,
+  id = null,
+  name = null,
+  cls = [],
+  data = {},
+  attr = {}
 ) {
-    (cls = cls ?? []), (data = data ?? {}), (attr = attr ?? {});
-    id = id ? `id="${id}"` : "";
-    name = name ? `name="${name}"` : "";
-    cls = cls.length != 0 ? `class="${cls.join(" ")}"` : "";
-    data =
-        data.length != 0
-            ? `${Object.keys(data)
-                .map((x) => `data-${x}="${data[x]}"`)
-                .join(" ")}`
-            : "";
-    attr = attr
-        ? `${Object.keys(attr)
-            .map((x) => `${x}="${attr[x]}"`)
-            .join(" ")}`
-        : "";
-    let attrArr = [],
-        attrText = "";
-    attrArr = [id, name, cls, data, attr];
-    attrText = attrArr.filter((x) => x != "").join(" ");
-    text = text === null ? "" : text;
-    return { attrText: attrText, text: text };
+  (cls = cls ?? []), (data = data ?? {}), (attr = attr ?? {});
+  id = id ? `id="${id}"` : "";
+  name = name ? `name="${name}"` : "";
+  cls = cls.length != 0 ? `class="${cls.join(" ")}"` : "";
+  data =
+    data.length != 0
+      ? `${Object.keys(data)
+        .map((x) => `data-${x}="${data[x]}"`)
+        .join(" ")}`
+      : "";
+  attr = attr
+    ? `${Object.keys(attr)
+      .map((x) => `${x}="${attr[x]}"`)
+      .join(" ")}`
+    : "";
+  let attrArr = [],
+    attrText = "";
+  attrArr = [id, name, cls, data, attr];
+  attrText = attrArr.filter((x) => x != "").join(" ");
+  text = text === null ? "" : text;
+  return { attrText: attrText, text: text };
 }
 
 function creEle(
-    ele,
-    text = null,
-    id = null,
-    name = null,
-    cls = [],
-    data = {},
-    attr = {}
+  ele,
+  text = null,
+  id = null,
+  name = null,
+  cls = [],
+  data = {},
+  attr = {}
 ) {
-    let comp = eleBuild(text, id, name, cls, data, attr);
-    return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
+  let comp = eleBuild(text, id, name, cls, data, attr);
+  return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
 }
 
 function creDiv(
-    cls = [],
-    attr = {},
-    id = null,
-    name = null,
-    data = {},
-    text = null
+  cls = [],
+  attr = {},
+  id = null,
+  name = null,
+  data = {},
+  text = null
 ) {
-    return creEle("div", text, id, name, cls, data, attr);
+  return creEle("div", text, id, name, cls, data, attr);
 }
 
 function creBtn(
-    text = null,
-    id = null,
-    name = null,
-    cls = [],
-    data = {},
-    attr = {}
+  text = null,
+  id = null,
+  name = null,
+  cls = [],
+  data = {},
+  attr = {}
 ) {
-    return creEle("button", text, id, name, cls, data, attr);
+  return creEle("button", text, id, name, cls, data, attr);
 }
 
 function creBtnHtml(
-    text = null,
-    id = null,
-    name = null,
-    cls = [],
-    data = {},
-    attr = {}
+  text = null,
+  id = null,
+  name = null,
+  cls = [],
+  data = {},
+  attr = {}
 ) {
-    return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
+  return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
 }
 
 function creSelect(
-    id = null,
-    cls = [],
-    name = null,
-    data = {},
-    attr = {},
-    text = null
+  id = null,
+  cls = [],
+  name = null,
+  data = {},
+  attr = {},
+  text = null
 ) {
-    return creEle("select", text, id, name, cls, data, attr);
+  return creEle("select", text, id, name, cls, data, attr);
 }
 
 function creOption(
-    text = null,
-    value = null,
-    data = {},
-    attr = {},
-    cls = [],
-    name = null,
-    id = null
+  text = null,
+  value = null,
+  data = {},
+  attr = {},
+  cls = [],
+  name = null,
+  id = null
 ) {
-    value != null ? (attr.value = value) : attr;
-    return creEle("option", text, id, name, cls, data, attr);
+  value != null ? (attr.value = value) : attr;
+  return creEle("option", text, id, name, cls, data, attr);
 }
 
 function creImg(
-    ele,
-    text = null,
-    id = null,
-    name = null,
-    cls = [],
-    data = {},
-    attr = {}
+  ele,
+  text = null,
+  id = null,
+  name = null,
+  cls = [],
+  data = {},
+  attr = {}
 ) {
-    let comp = eleBuild(text, id, name, cls, data, attr);
-    return $(`<${ele} ${comp.attrText}>${comp.text}`);
+  let comp = eleBuild(text, id, name, cls, data, attr);
+  return $(`<${ele} ${comp.attrText}>${comp.text}`);
 }
 
 function creI(
-    cls = [],
-    data = {},
-    attr = {},
-    id = null,
-    name = null,
-    text = null
+  cls = [],
+  data = {},
+  attr = {},
+  id = null,
+  name = null,
+  text = null
 ) {
-    return creEle("i", text, id, name, cls, data, attr);
+  return creEle("i", text, id, name, cls, data, attr);
 }
 
 function creA(
-    text = null,
-    attr = {},
-    cls = [],
-    id = null,
-    data = {},
-    name = null
+  text = null,
+  attr = {},
+  cls = [],
+  id = null,
+  data = {},
+  name = null
 ) {
-    return creEle("a", text, id, name, cls, data, attr);
+  return creEle("a", text, id, name, cls, data, attr);
 }
 
 function creSpan(
-    text = null,
-    cls = [],
-    id = null,
-    attr = {},
-    data = {},
-    name = null
+  text = null,
+  cls = [],
+  id = null,
+  attr = {},
+  data = {},
+  name = null
 ) {
-    return creEle("span", text, id, name, cls, data, attr);
+  return creEle("span", text, id, name, cls, data, attr);
 }
 /**
  * 根據該棟建築底下的'所有'電梯執行緒物件
  * */
 class ElevatorHandler {
-    constructor(ele, option = {}) {
-        this.ele = ele;
-        this.eleId = "";
-        this.eleWra = $("<div></div>");
-        this.speed = 0.3;
-        this.movStatus = {}; // {id:elevator01,value:0} 0=no 1=up 2=down
-        this.floorHeight =
-            typeof option.fHeight == "undefined" ? 60 : option.fHeight;
-        this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
-        this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
-        this.elevators =
-            typeof option.elevators == "undefined" ? [{}] : option.elevators; // {id:elevator01}
-        this.curElevFloor =
-            typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
-        this.setTimeout = null;
-        this.init();
+  constructor(ele, option = {}) {
+    this.ele = ele;
+    this.eleId = "";
+    this.eleWra = $("<div></div>");
+    this.speed = 0.3;
+    this.movStatus = {}; // {id:elevator01,value:0} 0=no 1=up 2=down
+    this.floorHeight =
+      typeof option.fHeight == "undefined" ? 60 : option.fHeight;
+    this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
+    this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
+    this.elevators =
+      typeof option.elevators == "undefined" ? [{}] : option.elevators; // {id:elevator01}
+    this.curElevFloor =
+      typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
+    this.setTimeout = null;
+    this.init();
+  }
+
+  // 所有電梯初始化
+  init = function () {
+    this.setTabWra();
+    this.setTabFloor();
+    // 若已有每個設備的所在樓層，則預設到該樓層位置
+    if (Object.keys(this.curElevFloor).length != 0) {
+      $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
+        this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
+      });
+    }
+  };
+
+  // 設置 wrapper
+  setTabWra = function () {
+    let id = $(this.ele).prop("id");
+    this.eleId = id;
+    if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
+      $(this.ele).unwrap(".elevator-table-wrapper");
+    }
+    let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
+    $(this.ele).wrap(wrapper);
+    this.eleWra = wrapper;
+  };
+
+  // 設置 table 樓層
+  setTabFloor = function () {
+    let _w = this.floorWidth,
+      _h = this.floorHeight;
+    let thead = creEle("thead"),
+      tbody = creEle("tbody");
+    let _floors = this.floors,
+      _ele = this.ele,
+      _elevators = this.elevators;
+    //樓層從小到大
+    _floors = _floors
+      .oSort("sort")
+      .reverse()
+      .map((x) => x.name);
+
+    let theadTr = creEle("tr");
+
+    for (let e = 1; e <= _elevators.length + 2; e++) {
+      let th = creEle("th");
+      th.css({ width: `${_w}px`, height: `${_h}px`, position: "relative" });
+      if (e != 1 && e != _elevators.length + 2) {
+        let elevId = _elevators[e - 2]?.id;
+        // 電梯方框
+        let span = creEle("span", null, "elevator-item-" + elevId, null, [
+          "elevator-item",
+        ]);
+        let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
+        let spanDown = creEle("span", null, null, null, [
+          "elevator-item-todown",
+        ]);
+        span.css({
+          width: `${_w - 3}px`,
+          height: `${_h - 3}px`,
+          top: `1.5px`,
+          left: "1.5px",
+          transition: `transform ${1 / this.speed
+            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
+        });
+        spanUp.css({
+          width: `${_w - 3}px`,
+          height: `${(_h - 3) / 2}px`,
+          top: `1.5px`,
+          left: "1.5px",
+          transition: `transform ${1 / this.speed
+            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
+        });
+        spanDown.css({
+          width: `${_w - 3}px`,
+          height: `${(_h - 3) / 2}px`,
+          top: `1.5px`,
+          left: "1.5px",
+          transition: `transform ${1 / this.speed
+            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
+          top: `${1.5 + (_h - 3) / 2}px`,
+        });
+        th.append(spanUp);
+        th.append(span);
+        th.append(spanDown);
+      }
+      theadTr.append(th);
+    }
+    thead.css("position", "absolute");
+    thead.append(theadTr);
+
+    //樓層表格建置 tbody
+    for (let f = 1; f <= _floors.length; f++) {
+      let tr = creEle("tr");
+
+      for (let e = 1; e <= _elevators.length + 2; e++) {
+        let td = creEle("td");
+        td.css({ width: `${_w}px`, height: `${_h}px` });
+        if (e == 1) {
+          td.addClass("t-black");
+          td.text(_floors[f - 1]);
+        } else if (e == _elevators.length + 2) {
+        } else {
+          let div = creDiv([
+            "d-flex",
+            "justify-content-center",
+            "align-items-end",
+            "h-100",
+          ]);
+          div.append(`<i class="fal fa-door-open fs-1-2"></i>`);
+          td.append(div);
+        }
+        tr.append(td);
+      }
+      tbody.append(tr);
     }
 
-    // 所有電梯初始化
-    init = function () {
-        this.setTabWra();
-        this.setTabFloor();
-        // 若已有每個設備的所在樓層，則預設到該樓層位置
-        if (Object.keys(this.curElevFloor).length != 0) {
-            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
-                this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
+    $(_ele).append(thead);
+    $(_ele).append(tbody);
+
+    //表格外圍無框線
+    $(_ele)
+      .find("tbody tr")
+      .each((index, tr) => {
+        $(tr).find("td:eq(0)").css("border-left", "0");
+        $(tr).find("td:eq(-1)").css("border-right", "0");
+
+        if (index == 0) {
+          $(tr)
+            .find("td")
+            .each((index, td) => {
+              $(td).css("border-top", "0");
+            });
+        } else if (index == $("#floorTable tbody tr").length - 1) {
+          $(tr)
+            .find("td")
+            .each((index, td) => {
+              $(td).css("border-bottom", "0");
             });
         }
-    };
+      });
+  };
 
-    // 設置 wrapper
-    setTabWra = function () {
-        let id = $(this.ele).prop("id");
-        this.eleId = id;
-        if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
-            $(this.ele).unwrap(".elevator-table-wrapper");
-        }
-        let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
-        $(this.ele).wrap(wrapper);
-        this.eleWra = wrapper;
-    };
+  // 設置某個電梯到某個樓層
+  setElevFloor = function (elevId, floId) {
+    let curFloId = this.curElevFloor[elevId];
+    let curSort = this.floors
+      .filter((x) => x.id == curFloId)
+      .map((x) => x.sort)[0];
+    let tarSort = this.floors
+      .filter((x) => x.id == floId)
+      .map((x) => x.sort)[0];
+    let gapFloor = tarSort - curSort;
+    let cssEle = [
+      $(`#elevator-item-${elevId}`)[0],
+      $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0],
+      $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0],
+    ];
+    if (this.movStatus[elevId] != 0) {
+      $(cssEle).css(
+        "transition",
+        `transform ${(1 / this.speed) * Math.abs(gapFloor)
+        }s cubic-bezier(0, 0, 0.62, 1) 0s`
+      );
+    }
+    clearTimeout(this.setTimeout);
+    this.setTimeout = setTimeout(() => {
+      $(cssEle).css(
+        "transition",
+        `transform ${(1 / this.speed) * Math.abs(gapFloor)
+        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
+      );
+      this.setEleUpDownStyle(elevId);
+    }, (1 / this.speed) * Math.abs(gapFloor) * 1000);
+    this.setEleUpDownStyle(elevId);
+    this.curElevFloor[elevId] = floId;
+    $(cssEle).css(
+      "transition",
+      `transform ${(1 / this.speed) * Math.abs(gapFloor)
+      }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
+    );
+    $(cssEle).css(
+      "transform",
+      `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`
+    );
+  };
 
-    // 設置 table 樓層
-    setTabFloor = function () {
-        let _w = this.floorWidth,
-            _h = this.floorHeight;
-        let thead = creEle("thead"),
-            tbody = creEle("tbody");
-        let _floors = this.floors,
-            _ele = this.ele,
-            _elevators = this.elevators;
-        //樓層從小到大
-        _floors = _floors
-            .oSort("sort")
-            .reverse()
-            .map((x) => x.name);
+  // 設定現在電梯狀態 (往上/往下/停止)
+  setEleMovStatus = function (elevId, status) {
+    this.movStatus[elevId] = status;
+  };
 
-        let theadTr = creEle("tr");
+  // 電梯方框 往上或往下閃爍
+  setEleUpDownStyle = function (elevId) {
+    if (this.movStatus[elevId] == 1) {
+      $(`#elevator-item-${elevId}`)
+        .next("span.elevator-item-todown")
+        .removeClass("light-flash-c-bd");
+      $(`#elevator-item-${elevId}`)
+        .prev("span.elevator-item-toup")
+        .addClass("light-flash-c-bd")
+        .css("--flash-color-1", "#44ea8e")
+        .css("--flash-color-2", "rgba(255,255,255,0)");
+    } else if (this.movStatus[elevId] == 2) {
+      $(`#elevator-item-${elevId}`)
+        .prev("span.elevator-item-toup")
+        .removeClass("light-flash-c-bd");
+      $(`#elevator-item-${elevId}`)
+        .next("span.elevator-item-todown")
+        .addClass("light-flash-c-bd")
+        .css("--flash-color-1", "#44ea8e")
+        .css("--flash-color-2", "rgba(255,255,255,0)");
+    } else {
+      $(`#elevator-item-${elevId}`)
+        .prev("span.elevator-item-toup")
+        .removeClass("light-flash-c-bd");
+      $(`#elevator-item-${elevId}`)
+        .next("span.elevator-item-todown")
+        .removeClass("light-flash-c-bd");
+    }
+  };
 
-        for (let e = 1; e <= _elevators.length + 2; e++) {
-            let th = creEle("th");
-            th.css({ width: `${_w}px`, height: `${_h}px`, position: "relative" });
-            if (e != 1 && e != _elevators.length + 2) {
-                let elevId = _elevators[e - 2]?.id;
-                // 電梯方框
-                let span = creEle("span", null, "elevator-item-" + elevId, null, [
-                    "elevator-item",
-                ]);
-                let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
-                let spanDown = creEle("span", null, null, null, [
-                    "elevator-item-todown",
-                ]);
-                span.css({
-                    width: `${_w - 3}px`,
-                    height: `${_h - 3}px`,
-                    top: `1.5px`,
-                    left: "1.5px",
-                    transition: `transform ${1 / this.speed
-                        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
-                });
-                spanUp.css({
-                    width: `${_w - 3}px`,
-                    height: `${(_h - 3) / 2}px`,
-                    top: `1.5px`,
-                    left: "1.5px",
-                    transition: `transform ${1 / this.speed
-                        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
-                });
-                spanDown.css({
-                    width: `${_w - 3}px`,
-                    height: `${(_h - 3) / 2}px`,
-                    top: `1.5px`,
-                    left: "1.5px",
-                    transition: `transform ${1 / this.speed
-                        }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`,
-                    top: `${1.5 + (_h - 3) / 2}px`,
-                });
-                th.append(spanUp);
-                th.append(span);
-                th.append(spanDown);
-            }
-            theadTr.append(th);
-        }
-        thead.css("position", "absolute");
-        thead.append(theadTr);
+  // 設定現在某個電梯所在樓層
+  setCurElevFloor = function (elevId, floId) {
+    this.curElevFloor[elevId] = floId;
+  };
 
-        //樓層表格建置 tbody
-        for (let f = 1; f <= _floors.length; f++) {
-            let tr = creEle("tr");
-
-            for (let e = 1; e <= _elevators.length + 2; e++) {
-                let td = creEle("td");
-                td.css({ width: `${_w}px`, height: `${_h}px` });
-                if (e == 1) {
-                    td.addClass("t-black");
-                    td.text(_floors[f - 1]);
-                } else if (e == _elevators.length + 2) {
-                } else {
-                    let div = creDiv([
-                        "d-flex",
-                        "justify-content-center",
-                        "align-items-end",
-                        "h-100",
-                    ]);
-                    div.append(`<i class="fal fa-door-open fs-1-2"></i>`);
-                    td.append(div);
-                }
-                tr.append(td);
-            }
-            tbody.append(tr);
-        }
-
-        $(_ele).append(thead);
-        $(_ele).append(tbody);
-
-        //表格外圍無框線
-        $(_ele)
-            .find("tbody tr")
-            .each((index, tr) => {
-                $(tr).find("td:eq(0)").css("border-left", "0");
-                $(tr).find("td:eq(-1)").css("border-right", "0");
-
-                if (index == 0) {
-                    $(tr)
-                        .find("td")
-                        .each((index, td) => {
-                            $(td).css("border-top", "0");
-                        });
-                } else if (index == $("#floorTable tbody tr").length - 1) {
-                    $(tr)
-                        .find("td")
-                        .each((index, td) => {
-                            $(td).css("border-bottom", "0");
-                        });
-                }
-            });
-    };
-
-    // 設置某個電梯到某個樓層
-    setElevFloor = function (elevId, floId) {
-        let curFloId = this.curElevFloor[elevId];
-        let curSort = this.floors
-            .filter((x) => x.id == curFloId)
-            .map((x) => x.sort)[0];
-        let tarSort = this.floors
-            .filter((x) => x.id == floId)
-            .map((x) => x.sort)[0];
-        let gapFloor = tarSort - curSort;
-        let cssEle = [
-            $(`#elevator-item-${elevId}`)[0],
-            $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0],
-            $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0],
-        ];
-        if (this.movStatus[elevId] != 0) {
-            $(cssEle).css(
-                "transition",
-                `transform ${(1 / this.speed) * Math.abs(gapFloor)
-                }s cubic-bezier(0, 0, 0.62, 1) 0s`
-            );
-        }
-        clearTimeout(this.setTimeout);
-        this.setTimeout = setTimeout(() => {
-            $(cssEle).css(
-                "transition",
-                `transform ${(1 / this.speed) * Math.abs(gapFloor)
-                }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
-            );
-            this.setEleUpDownStyle(elevId);
-        }, (1 / this.speed) * Math.abs(gapFloor) * 1000);
-        this.setEleUpDownStyle(elevId);
-        this.curElevFloor[elevId] = floId;
-        $(cssEle).css(
-            "transition",
-            `transform ${(1 / this.speed) * Math.abs(gapFloor)
-            }s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`
-        );
-        $(cssEle).css(
-            "transform",
-            `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`
-        );
-    };
-
-    // 設定現在電梯狀態 (往上/往下/停止)
-    setEleMovStatus = function (elevId, status) {
-        this.movStatus[elevId] = status;
-    };
-
-    // 電梯方框 往上或往下閃爍
-    setEleUpDownStyle = function (elevId) {
-        if (this.movStatus[elevId] == 1) {
-            $(`#elevator-item-${elevId}`)
-                .next("span.elevator-item-todown")
-                .removeClass("light-flash-c-bd");
-            $(`#elevator-item-${elevId}`)
-                .prev("span.elevator-item-toup")
-                .addClass("light-flash-c-bd")
-                .css("--flash-color-1", "#44ea8e")
-                .css("--flash-color-2", "rgba(255,255,255,0)");
-        } else if (this.movStatus[elevId] == 2) {
-            $(`#elevator-item-${elevId}`)
-                .prev("span.elevator-item-toup")
-                .removeClass("light-flash-c-bd");
-            $(`#elevator-item-${elevId}`)
-                .next("span.elevator-item-todown")
-                .addClass("light-flash-c-bd")
-                .css("--flash-color-1", "#44ea8e")
-                .css("--flash-color-2", "rgba(255,255,255,0)");
-        } else {
-            $(`#elevator-item-${elevId}`)
-                .prev("span.elevator-item-toup")
-                .removeClass("light-flash-c-bd");
-            $(`#elevator-item-${elevId}`)
-                .next("span.elevator-item-todown")
-                .removeClass("light-flash-c-bd");
-        }
-    };
-
-    // 設定現在某個電梯所在樓層
-    setCurElevFloor = function (elevId, floId) {
-        this.curElevFloor[elevId] = floId;
-    };
-
-    // 重新繪製
-    redraw = function () {
-        $(this.ele).empty();
-        this.setTabFloor();
-        if (Object.keys(this.curElevFloor).length != 0) {
-            $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
-                this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
-            });
-        }
-    };
+  // 重新繪製
+  redraw = function () {
+    $(this.ele).empty();
+    this.setTabFloor();
+    if (Object.keys(this.curElevFloor).length != 0) {
+      $.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
+        this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
+      });
+    }
+  };
 }
 
 // 從數字週數轉為中文週數
 function dayToChiDay(num) {
-    let chiDay = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"];
-    return chiDay[num];
+  let chiDay = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"];
+  return chiDay[num];
 }
 
 // 取得現在或前後時間，輸出單位依據 type
 function getTimeByType(type = null, cal = 0, unit = "d") {
-    let now = new Date();
-    return strToDate(now, type, cal, unit);
+  let now = new Date();
+  return strToDate(now, type, cal, unit);
 }
 
 // 取得某當下時間或前後時間，輸出單位依據 type
 function strToDate(text, type = null, cal = 0, unit = "d") {
-    let dec = 24 * 60 * 60 * 1000;
+  let dec = 24 * 60 * 60 * 1000;
 
-    if (unit == "d") {
-        dec = 24 * 60 * 60 * 1000;
-    } else if (unit == "h") {
-        dec = 60 * 60 * 1000;
-    } else if (unit == "m") {
-        dec = 60 * 1000;
-    } else if (unit == "s") {
-        dec = 1000;
-    }
+  if (unit == "d") {
+    dec = 24 * 60 * 60 * 1000;
+  } else if (unit == "h") {
+    dec = 60 * 60 * 1000;
+  } else if (unit == "m") {
+    dec = 60 * 1000;
+  } else if (unit == "s") {
+    dec = 1000;
+  }
 
-    let calDay = function (_d, _cal) {
-        return new Date(_d.getTime() + cal * dec);
-    };
+  let calDay = function (_d, _cal) {
+    return new Date(_d.getTime() + cal * dec);
+  };
 
-    let tarDate = new Date(text);
-    let result = 0;
-    if (type == "year") {
-        result = calDay(tarDate, cal).getFullYear();
-    } else if (type == "month") {
-        result = calDay(tarDate, cal).getMonth();
-    } else if (type == "date") {
-        result = calDay(tarDate, cal).getDate();
-    } else if (type == "day") {
-        result = calDay(tarDate, cal).getDay();
-    } else {
-        result = calDay(tarDate, cal);
-    }
-    return result;
+  let tarDate = new Date(text);
+  let result = 0;
+  if (type == "year") {
+    result = calDay(tarDate, cal).getFullYear();
+  } else if (type == "month") {
+    result = calDay(tarDate, cal).getMonth();
+  } else if (type == "date") {
+    result = calDay(tarDate, cal).getDate();
+  } else if (type == "day") {
+    result = calDay(tarDate, cal).getDay();
+  } else {
+    result = calDay(tarDate, cal);
+  }
+  return result;
 }
 
 // 將只有時間(Hms) 格式轉換為當日的時間
 function fullTime(time) {
-    let nowDate = displayDate(new Date(), "date");
-    return new Date(nowDate + " " + time);
+  let nowDate = displayDate(new Date(), "date");
+  return new Date(nowDate + " " + time);
 }
 
 function dateRanCutPart(start, end, cutNum) {
-    let sTime = new Date(start).getTime();
-    let eTime = new Date(end).getTime();
-    let cutTimeArr = [];
-    if (sTime < eTime) return [];
+  let sTime = new Date(start).getTime();
+  let eTime = new Date(end).getTime();
+  let cutTimeArr = [];
+  if (sTime < eTime) return [];
 
-    let partNum = (sTime - eTime) / cutNum;
-    for (let i = eTime; i <= sTime; i = i + partNum) {
-        cutTimeArr.push(i);
-    }
+  let partNum = (sTime - eTime) / cutNum;
+  for (let i = eTime; i <= sTime; i = i + partNum) {
+    cutTimeArr.push(i);
+  }
 
-    cutTimeArr.forEach((x) => new Date(x));
+  cutTimeArr.forEach((x) => new Date(x));
 
-    return cutTimeArr;
+  return cutTimeArr;
 }
 
 function isJSON(str) {
-    try {
-        JSON.parse(str);
-        return true;
-    } catch {
-        return false;
-    }
+  try {
+    JSON.parse(str);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 function addBsToast(
-    container,
-    type = "warning",
-    title = "",
-    content = "",
-    id,
-    datas = {},
-    option = {}
+  container,
+  type = "warning",
+  title = "",
+  content = "",
+  id,
+  datas = {},
+  option = {}
 ) {
-    datas =
-        Object.keys(datas).length != 0
-            ? `${Object.keys(datas)
-                .map((x) => `data-${x}="${datas[x]}"`)
-                .join(" ")}`
-            : "";
-    let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
-    let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
+  datas =
+    Object.keys(datas).length != 0
+      ? `${Object.keys(datas)
+        .map((x) => `data-${x}="${datas[x]}"`)
+        .join(" ")}`
+      : "";
+  let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
+  let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
                       <div class="toast-header ${warning ? `bg-` + warning : ""
-        }">
+    }">
                           <i class="${iconClass}"></i>
                           <strong class="mr-auto">${title}</strong>
                           <small class="text-muted">just now</small>
@@ -661,276 +661,276 @@ function addBsToast(
  * 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
  * */
 class Forge3DElevFull {
-    constructor(option = {}) {
-        this.allElevDevList = []; //全電梯設備清單
-        this.subSeviceData = []; //每個設備訂閱點位值
-        this.floList = [];
-        this.elev3DBind = {};
-        this.elev3DOption = {};
-        this.elev3DObj = [];
-        this.viewer = option.viewer ?? null;
-        this.ordPath = option.ordPath ?? {};
-        this.sysMainTag = option.system_tag ?? "ELEV";
-        this.sysSubTag = option.name_tag ?? "EL";
-        this.selector = option.selector ?? "#forgeViewer";
-        this.bajaChaCallback = option.bajaChaCallback ?? null;
-        this.bajaEndCallback = option.bajaEndCallback ?? null;
-        this.sensorObjs = option.sensorObjs ?? null;
-    }
+  constructor(option = {}) {
+    this.allElevDevList = []; //全電梯設備清單
+    this.subSeviceData = []; //每個設備訂閱點位值
+    this.floList = [];
+    this.elev3DBind = {};
+    this.elev3DOption = {};
+    this.elev3DObj = [];
+    this.viewer = option.viewer ?? null;
+    this.ordPath = option.ordPath ?? {};
+    this.sysMainTag = option.system_tag ?? "ELEV";
+    this.sysSubTag = option.name_tag ?? "EL";
+    this.selector = option.selector ?? "#forgeViewer";
+    this.bajaChaCallback = option.bajaChaCallback ?? null;
+    this.bajaEndCallback = option.bajaEndCallback ?? null;
+    this.sensorObjs = option.sensorObjs ?? null;
+  }
 
-    init = function () {
-        // 系統大類、小類固定
-        this.ordPath.system_tag = this.sysMainTag;
-        this.ordPath.name_tag = this.sysSubTag;
+  init = function () {
+    // 系統大類、小類固定
+    this.ordPath.system_tag = this.sysMainTag;
+    this.ordPath.name_tag = this.sysSubTag;
 
-        // if (pageAct.sysSubTag === "M12") {
-        //   console.log("@@",pageAct, pageAct.sysSubTag)
-        //   this.getSensorDevList();
-        // }
-        this.getElevDevList();
-    };
+    // if (pageAct.sysSubTag === "M12") {
+    //   console.log("@@",pageAct, pageAct.sysSubTag)
+    //   this.getSensorDevList();
+    // }
+    this.getElevDevList();
+  };
 
-    // 訂閱電梯設備
-    subElevDevice = function () {
-        let myBaja = new subscriptionDevices();
-        let ordPath = this.ordPath;
+  // 訂閱電梯設備
+  subElevDevice = function () {
+    let myBaja = new subscriptionDevices();
+    let ordPath = this.ordPath;
 
-        myBaja.setSubscribeDevicesByBql(ordPath);
-        myBaja.setSubscribeDevicesCallBack((data) => {
-            this.bajaChaCallback ? this.bajaChaCallback(data) : "";
-            if (this.allElevDevList.length == 0) {
-                return false;
-            }
-            data.device_number = data.device_number_full;
+    myBaja.setSubscribeDevicesByBql(ordPath);
+    myBaja.setSubscribeDevicesCallBack((data) => {
+      this.bajaChaCallback ? this.bajaChaCallback(data) : "";
+      if (this.allElevDevList.length == 0) {
+        return false;
+      }
+      data.device_number = data.device_number_full;
 
-            let matchDevice = this.allElevDevList.filter(
-                (x) => x.device_number == data.device_number
-            )[0];
+      let matchDevice = this.allElevDevList.filter(
+        (x) => x.device_number == data.device_number
+      )[0];
 
-            if (!matchDevice) {
-                return;
-            }
+      if (!matchDevice) {
+        return;
+      }
 
-            //將訂閱值塞入 subSeviceData
-            if (
-                this.subSeviceData.findIndex(
-                    (x) => x.device_number == matchDevice.device_number
-                ) == -1
-            ) {
-                let obj = {};
-                obj.device_number = matchDevice.device_number;
-                this.subSeviceData.push(obj);
-            }
+      //將訂閱值塞入 subSeviceData
+      if (
+        this.subSeviceData.findIndex(
+          (x) => x.device_number == matchDevice.device_number
+        ) == -1
+      ) {
+        let obj = {};
+        obj.device_number = matchDevice.device_number;
+        this.subSeviceData.push(obj);
+      }
 
-            let subData = this.subSeviceData.filter(
-                (x) => x.device_number == matchDevice.device_number
-            )[0];
+      let subData = this.subSeviceData.filter(
+        (x) => x.device_number == matchDevice.device_number
+      )[0];
 
-            if (subData) {
-                subData[data.point_name] = data.value;
-            }
+      if (subData) {
+        subData[data.point_name] = data.value;
+      }
 
-            if (data.point_name == "CP") {
-                if (this.elev3DObj.length != 0) {
-                    let elevObj = this.elev3DObj.filter(
-                        (x) => x.nodeId == this.elev3DBind[matchDevice.device_number]
-                    )[0];
-                    if (elevObj && elevObj.id) {
-                        elevObj.obj.setElevatorFloor(data.value);
-                        elevObj.obj.movElevator();
-                    }
-                }
-            }
-        });
+      if (data.point_name == "CP") {
+        if (this.elev3DObj.length != 0) {
+          let elevObj = this.elev3DObj.filter(
+            (x) => x.nodeId == this.elev3DBind[matchDevice.device_number]
+          )[0];
+          if (elevObj && elevObj.id) {
+            elevObj.obj.setElevatorFloor(data.value);
+            elevObj.obj.movElevator();
+          }
+        }
+      }
+    });
 
-        myBaja.setSubscribeDeviceEndCallBack((data) => {
-            this.floList = data
-                .filter((x) => x.point_name.startsWith("SP_FLS_"))
-                .map((x) => x?.point_name?.split("SP_FLS_")[1])
-                .Distinct();
-            this.set3DElevOpt(data);
-            this.bajaEndCallback != null ? this.bajaEndCallback() : "";
-        });
-    };
+    myBaja.setSubscribeDeviceEndCallBack((data) => {
+      this.floList = data
+        .filter((x) => x.point_name.startsWith("SP_FLS_"))
+        .map((x) => x?.point_name?.split("SP_FLS_")[1])
+        .Distinct();
+      this.set3DElevOpt(data);
+      this.bajaEndCallback != null ? this.bajaEndCallback() : "";
+    });
+  };
 
-    // 電梯 3D Option 設置
-    set3DElevOpt = function (data) {
-        let devNumArr = data
-            .map((x) => {
-                return {
-                    devNum: x.device_number_full,
-                    priority: this.allElevDevList.filter(
-                        (y) => y.device_number == x.device_number_full
-                    )[0]?.priority,
-                };
-            })
-            .DistinctBy("devNum");
-        devNumArr = devNumArr.oSort("priority");
-        $.each(devNumArr, (idx, devObj) => {
-            let devNum = devObj.devNum;
-            let subData = this.subSeviceData.filter(
-                (x) => x.device_number == devNum
-            )[0];
-
-            if (subData) {
-                //// 左側 3D 電梯 nodeID 與 device_number match
-                //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
-                //    elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
-                //}
-                // 左側 3D 電梯 Viewer Option 設置
-                /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
-                this.elev3DOption.nodeId = this.elev3DBind[devNum];
-                this.elev3DOption.floorHeight = this.floList.map((x) => {
-                    return { floor: x };
-                });
-                this.elev3DOption.floorHeight.forEach((floObj, idx) => {
-                    if (floObj.floor.startsWith("B")) {
-                        let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
-                        floObj.height = floor * -13;
-                    } else {
-                        let floor = parseInt(floObj.floor.split("F")[0]);
-                        if (floor == 1) {
-                            floObj.height = 0;
-                        } else if (floor == 2) {
-                            floObj.height = 14.75;
-                        } else {
-                            floObj.height = 14.75 + (floor - 2) * 9.75;
-                        }
-                    }
-                });
-
-                if (this.elev3DObj.length != 0) {
-                    let elevObj = this.elev3DObj.filter(
-                        (x) => x.nodeId == this.elev3DBind[devNum]
-                    )[0];
-                    if (!elevObj.id) {
-                        elevObj.id = devNum;
-                    }
-                    elevObj.obj = Object.assign(elevObj.obj, this.elev3DOption);
-                    elevObj.obj.init(() => {
-                        let frags = elevObj.obj.fragProxys.filter(
-                            (x) => x.nodeId == this.elev3DBind[devNum]
-                        );
-
-                        frags.forEach((fragProxy) => {
-                            fragProxy.frag.position.z =
-                                this.elev3DOption.floorHeight.filter(
-                                    (x) => x.floor == subData["CP"]
-                                )[0]?.height ?? 0;
-                            let start = 0;
-                            // 改變感測器熱點位置
-                            this.sensorObjs &&
-                                this.sensorObjs[0]?.changePos(
-                                    node + 2,
-                                    fragProxy.frag.position.z
-                                );
-                            // if (node === 15200 && start == 0) {
-                            //     start = 1;
-                            // }
-                            fragProxy.frag.updateAnimTransform();
-                        });
-                        elevObj.obj.viewer.impl.sceneUpdated(true);
-                    });
-                }
-            }
-        });
-        this.set3DElevPos();
-    };
-
-    // 電梯 3D 位置呈現
-    set3DElevPos = function () {
-        let nodeIds = this.allElevDevList
-            .filter((x) => !isNaN(parseInt(x.forge_dbid)))
-            .map((x) => {
-                return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
-            });
-
-        $.each(nodeIds, (idx, item) => {
-            this.elev3DBind[item.devNum] = item.nodeId;
-        });
-        nodeIds = nodeIds.map((x) => x.nodeId);
-        $.each(nodeIds, (idx, node) => {
-            let options = {
-                element: $(this.selector),
-                viewer: this.viewer,
-                nodeId: node,
-                floorHeight: this.elev3DOption.floorHeight ?? [],
-                sensorObjs: this.sensorObjs,
-                inited: function () { },
-            };
-            let elevator3DObj = new elevator3D(options);
-            let devNum = Object.keys(this.elev3DBind).filter(
-                (x) => this.elev3DBind[x] == node
-            )[0];
-            let subData = this.subSeviceData.filter(
-                (x) => x.device_number == devNum
-            )[0];
-
-            if (this.elev3DObj.filter((x) => x.nodeId == node).length == 0) {
-                this.elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
-            }
-
-            if (subData) {
-                let elevObj = this.elev3DObj.filter((x) => x.nodeId == node)[0];
-                if (!elevObj.id) {
-                    elevObj.id = devNum;
-                }
-                elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
-                elevObj.obj.init(() => {
-                    let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
-                    frags.forEach((fragProxy) => {
-                        fragProxy.frag.position.z =
-                            this.elev3DOption.floorHeight.filter(
-                                (x) => x.floor == subData["CP"]
-                            )[0]?.height ?? 0;
-                        let start = 0;
-                        this.sensorObjs &&
-                            this.sensorObjs[0]?.changePos(
-                                node + 2,
-                                fragProxy.frag.position.z
-                            );
-                        // if (node === 15200 && start == 0) {
-                        //     // 改變感測器熱點位置
-                        //     start = 1;
-                        // }
-                        fragProxy.frag.updateAnimTransform();
-                    });
-                    elevObj.obj.viewer.impl.sceneUpdated(true);
-                });
-            }
-        });
-    };
-
-    // 取得設備列表
-    getElevDevList = function () {
-        let url = baseApiUrl + "/api/Device/GetDeviceList";
-        let sendData = {
-            sub_system_tag: this.ordPath.name_tag,
-            building_tag: this.ordPath.building_tag,
+  // 電梯 3D Option 設置
+  set3DElevOpt = function (data) {
+    let devNumArr = data
+      .map((x) => {
+        return {
+          devNum: x.device_number_full,
+          priority: this.allElevDevList.filter(
+            (y) => y.device_number == x.device_number_full
+          )[0]?.priority,
         };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(
-            url,
-            objSendData,
-            (res) => {
-                if (!res || res.code != "0000" || !res.data) {
-                } else {
-                    $.each(res.data, (index, floObj) => {
-                        $.each(floObj.device_list, (index2, devObj) => {
-                            this.allElevDevList.push(devObj);
-                        });
-                    });
-                    this.subElevDevice();
-                }
-            },
-            null,
-            "POST"
-        ).send();
-    };
+      })
+      .DistinctBy("devNum");
+    devNumArr = devNumArr.oSort("priority");
+    $.each(devNumArr, (idx, devObj) => {
+      let devNum = devObj.devNum;
+      let subData = this.subSeviceData.filter(
+        (x) => x.device_number == devNum
+      )[0];
 
-    getNodeIds = function () {
-        return this.elev3DObj.map((x) => x.nodeId);
+      if (subData) {
+        //// 左側 3D 電梯 nodeID 與 device_number match
+        //if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
+        //    elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
+        //}
+        // 左側 3D 電梯 Viewer Option 設置
+        /*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
+        this.elev3DOption.nodeId = this.elev3DBind[devNum];
+        this.elev3DOption.floorHeight = this.floList.map((x) => {
+          return { floor: x };
+        });
+        this.elev3DOption.floorHeight.forEach((floObj, idx) => {
+          if (floObj.floor.startsWith("B")) {
+            let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
+            floObj.height = floor * -13;
+          } else {
+            let floor = parseInt(floObj.floor.split("F")[0]);
+            if (floor == 1) {
+              floObj.height = 0;
+            } else if (floor == 2) {
+              floObj.height = 14.75;
+            } else {
+              floObj.height = 14.75 + (floor - 2) * 9.75;
+            }
+          }
+        });
+
+        if (this.elev3DObj.length != 0) {
+          let elevObj = this.elev3DObj.filter(
+            (x) => x.nodeId == this.elev3DBind[devNum]
+          )[0];
+          if (!elevObj.id) {
+            elevObj.id = devNum;
+          }
+          elevObj.obj = Object.assign(elevObj.obj, this.elev3DOption);
+          elevObj.obj.init(() => {
+            let frags = elevObj.obj.fragProxys.filter(
+              (x) => x.nodeId == this.elev3DBind[devNum]
+            );
+
+            frags.forEach((fragProxy) => {
+              fragProxy.frag.position.z =
+                this.elev3DOption.floorHeight.filter(
+                  (x) => x.floor == subData["CP"]
+                )[0]?.height ?? 0;
+              let start = 0;
+              // 改變感測器熱點位置
+              this.sensorObjs &&
+                this.sensorObjs[0]?.changePos(
+                  node + 2,
+                  fragProxy.frag.position.z
+                );
+              // if (node === 15200 && start == 0) {
+              //     start = 1;
+              // }
+              fragProxy.frag.updateAnimTransform();
+            });
+            elevObj.obj.viewer.impl.sceneUpdated(true);
+          });
+        }
+      }
+    });
+    this.set3DElevPos();
+  };
+
+  // 電梯 3D 位置呈現
+  set3DElevPos = function () {
+    let nodeIds = this.allElevDevList
+      .filter((x) => !isNaN(parseInt(x.forge_dbid)))
+      .map((x) => {
+        return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
+      });
+
+    $.each(nodeIds, (idx, item) => {
+      this.elev3DBind[item.devNum] = item.nodeId;
+    });
+    nodeIds = nodeIds.map((x) => x.nodeId);
+    $.each(nodeIds, (idx, node) => {
+      let options = {
+        element: $(this.selector),
+        viewer: this.viewer,
+        nodeId: node,
+        floorHeight: this.elev3DOption.floorHeight ?? [],
+        sensorObjs: this.sensorObjs,
+        inited: function () { },
+      };
+      let elevator3DObj = new elevator3D(options);
+      let devNum = Object.keys(this.elev3DBind).filter(
+        (x) => this.elev3DBind[x] == node
+      )[0];
+      let subData = this.subSeviceData.filter(
+        (x) => x.device_number == devNum
+      )[0];
+
+      if (this.elev3DObj.filter((x) => x.nodeId == node).length == 0) {
+        this.elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
+      }
+
+      if (subData) {
+        let elevObj = this.elev3DObj.filter((x) => x.nodeId == node)[0];
+        if (!elevObj.id) {
+          elevObj.id = devNum;
+        }
+        elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
+        elevObj.obj.init(() => {
+          let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
+          frags.forEach((fragProxy) => {
+            fragProxy.frag.position.z =
+              this.elev3DOption.floorHeight.filter(
+                (x) => x.floor == subData["CP"]
+              )[0]?.height ?? 0;
+            let start = 0;
+            this.sensorObjs &&
+              this.sensorObjs[0]?.changePos(
+                node + 2,
+                fragProxy.frag.position.z
+              );
+            // if (node === 15200 && start == 0) {
+            //     // 改變感測器熱點位置
+            //     start = 1;
+            // }
+            fragProxy.frag.updateAnimTransform();
+          });
+          elevObj.obj.viewer.impl.sceneUpdated(true);
+        });
+      }
+    });
+  };
+
+  // 取得設備列表
+  getElevDevList = function () {
+    let url = baseApiUrl + "/api/Device/GetDeviceList";
+    let sendData = {
+      sub_system_tag: this.ordPath.name_tag,
+      building_tag: this.ordPath.building_tag,
     };
+    objSendData.Data = sendData;
+    ytAjax = new YourTeam.Ajax(
+      url,
+      objSendData,
+      (res) => {
+        if (!res || res.code != "0000" || !res.data) {
+        } else {
+          $.each(res.data, (index, floObj) => {
+            $.each(floObj.device_list, (index2, devObj) => {
+              this.allElevDevList.push(devObj);
+            });
+          });
+          this.subElevDevice();
+        }
+      },
+      null,
+      "POST"
+    ).send();
+  };
+
+  getNodeIds = function () {
+    return this.elev3DObj.map((x) => x.nodeId);
+  };
 }
 
 /**
@@ -939,271 +939,310 @@ class Forge3DElevFull {
  * 2. 參數取得要移動到的電梯位置
  * */
 class Forge3DSensor {
-    constructor(option = {}) {
-        this.subDeviceData = []; //每個設備訂閱點位值
-        this.viewer = option.viewer ?? null;
-        this.ordPath = option.ordPath; // TPE_B1
-        this.sysMainTag = "ME";
-        this.sysSubTag = "M12";
-        this.selector = "#forgeViewer";
-        this.heatMap = null;
-        this.bajaChaCallback = option.bajaChaCallback ?? null;
-        this.bajaEndCallback = option.bajaEndCallback ?? null;
-        this.floorHeight = 0;
-        this.dataVizExtn = null;
-        this.DataVizCore = null;
-        this.tempVal = 20;
-        this.curDevice = option.curDevice ?? null;
-        this.deviceList = option.deviceList ?? null;
-        this.selector = option.selector ?? "#forgeViewer";
-        this.elevCb = option.elevCb ?? null;
-        this.#init();
+  constructor(option = {}) {
+    this.subDeviceData = []; //每個設備訂閱點位值
+    this.viewer = option.viewer ?? null;
+    this.ordPath = option.ordPath; // TPE_B1
+    this.sysMainTag = "ME";
+    this.sysSubTag = "M12";
+    this.selector = "#forgeViewer";
+    this.heatMap = null;
+    this.bajaChaCallback = option.bajaChaCallback ?? null;
+    this.bajaEndCallback = option.bajaEndCallback ?? null;
+    this.floorHeight = 0;
+    this.dataVizExtn = null;
+    this.DataVizCore = null;
+    this.tempVal = 20;
+    this.curDevice = option.curDevice ?? null;
+    this.deviceList = option.deviceList ?? null;
+    this.selector = option.selector ?? "#forgeViewer";
+    this.elevCb = option.elevCb ?? null;
+    this.#init();
+  }
+
+  static sensorTimes = 0;
+
+  #init = async function () {
+    // 系統大類、小類固定
+    this.ordPath.system_tag = this.sysMainTag;
+    this.ordPath.name_tag = this.sysSubTag;
+    // this.dataVizExtn = await this.viewer.loadExtension(
+    //   "Autodesk.DataVisualization"
+    // );
+    // this.DataVizCore = Autodesk.DataVisualization.Core;
+    await this.registerHotPoint();
+    this.addSensorHotspotList(this.curDevice.forge_dbid, 35);
+    this.subSensorDevice();
+    this.elevCb && this.elevCb();
+  };
+
+  // // 建立熱點
+  // async addHotPoint() {
+
+  //     // this.dataVizExtn.removeAllViewables()
+  //     await this.registerHotPoint()
+  //     this.subSensorDevice();
+  //     // console.log("2",this.dataVizExtn)
+  // }
+
+  async registerHotPoint(color = "") {
+    if (Forge3DSensor.sensorTimes === 1) {
+      var viewer = this.viewer;
+      const dataVizExtn = await viewer.loadExtension(
+        "Autodesk.DataVisualization"
+      );
+      const DataVizCore = Autodesk.DataVisualization.Core;
+      const viewableType = DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
+      const spriteColor = new THREE.Color(0xff8c00);
+      // const highlightedColor = new THREE.Color(0xe0e0ff);
+      let spriteIcon = "/file/img/forge/sensor_circle.svg";
+      if (location.href.indexOf("localhost:5966") != -1) {
+        spriteIcon = "/img/forge/sensor_circle.svg";
+      }
+      const style = new DataVizCore.ViewableStyle(
+        viewableType,
+        spriteColor,
+        spriteIcon
+      );
+      const viewableData = new DataVizCore.ViewableData();
+      viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
+      this.deviceList.forEach((myData, index) => {
+        const dbId = myData.forge_dbid;
+        const myPosition = myData.position;
+        const viewable = new DataVizCore.SpriteViewable(
+          myPosition,
+          style,
+          dbId
+        );
+        myData._dbId = dbId;
+        viewableData.addViewable(viewable);
+      });
+      await viewableData.finish();
+      dataVizExtn.addViewables(viewableData);
+      viewer.addEventListener(
+        DataVizCore.MOUSE_CLICK,
+        this.onSpriteClicked.bind(this)
+      ); // SPRITE_SELECTED
+      // viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
     }
+  }
+  // ---------------- 熱點點擊事件 --------------------
+  onSpriteClicked(event) {
+    event.hasStopped = true;
+    const dbIdStart = 10;
+    if (event != undefined && event != null) {
+      if (event.dbId >= dbIdStart) {
+        let myData = this.deviceList.find((x) => x.forge_dbid == event.dbId);
+        console.log("site", myData);
+        // this.changeColorForSensorHotspot(event.dbId, this.tempVal);
+        myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備
+        myData &&
+          $(this.selector).trigger("autodesk:click:sprite", { event, myData });
+      } else {
+        $(this.selector).trigger("autodesk:clickOut:sprite", { event });
+      }
+    }
+  }
 
-    static sensorTimes = 0;
+  // 改變熱點位置
+  async changePos(dbId, positionZ) {
+    const dataVizExtn = await viewer.loadExtension(
+      "Autodesk.DataVisualization"
+    );
+    dataVizExtn?.invalidateViewables(dbId, (viewable) => {
+      // console.log(viewable._position)
+      const z = viewable._position.z + positionZ;
+      const newPos = { ...viewable._position, z };
+      return {
+        // Move the viewable to a new location.
+        position: newPos,
+      };
+    });
+  }
 
-    #init = async function () {
-        // 系統大類、小類固定
-        this.ordPath.system_tag = this.sysMainTag;
-        this.ordPath.name_tag = this.sysSubTag;
-        // this.dataVizExtn = await this.viewer.loadExtension(
-        //   "Autodesk.DataVisualization"
-        // );
-        // this.DataVizCore = Autodesk.DataVisualization.Core;
-        await this.registerHotPoint();
-        this.addSensorHotspotList(this.curDevice.forge_dbid, 35);
-        this.subSensorDevice();
-        this.elevCb && this.elevCb();
-    };
+  // 溫度感測器 sprite 隨溫度變化
+  static lowerTempForSensor = [];
+  static normalTempForSensor = [];
+  static highTempForSensor = [];
+  static highestTempForSensor = [];
 
-    // // 建立熱點
-    // async addHotPoint() {
+  async addSensorHotspotList(dbid, temp) {
+    let index = Math.floor(temp / 10) - 1 || 0;
 
-    //     // this.dataVizExtn.removeAllViewables()
-    //     await this.registerHotPoint()
-    //     this.subSensorDevice();
-    //     // console.log("2",this.dataVizExtn)
-    // }
+    // 清空資料
+    Forge3DSensor.lowerTempForSensor = Forge3DSensor.lowerTempForSensor.filter(
+      (point) => point !== dbid
+    );
+    Forge3DSensor.normalTempForSensor =
+      Forge3DSensor.normalTempForSensor.filter((point) => point !== dbid);
+    Forge3DSensor.highTempForSensor = Forge3DSensor.highTempForSensor.filter(
+      (point) => point !== dbid
+    );
+    Forge3DSensor.highestTempForSensor =
+      Forge3DSensor.highestTempForSensor.filter((point) => point !== dbid);
 
-    async registerHotPoint(color = "") {
-        if (Forge3DSensor.sensorTimes === 1) {
-            var viewer = this.viewer;
-            const dataVizExtn = await viewer.loadExtension(
-                "Autodesk.DataVisualization"
-            );
-            const DataVizCore = Autodesk.DataVisualization.Core;
-            const viewableType = DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
-            const spriteColor = new THREE.Color(0xff8c00);
-            // const highlightedColor = new THREE.Color(0xe0e0ff);
-            let spriteIcon = "/file/img/forge/sensor_circle.svg";
-            if (location.href.indexOf("localhost:5966") != -1) {
-                spriteIcon = "/img/forge/sensor_circle.svg";
-            }
-            const style = new DataVizCore.ViewableStyle(
-                viewableType,
-                spriteColor,
-                spriteIcon
-            );
-            const viewableData = new DataVizCore.ViewableData();
-            viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
-            this.deviceList.forEach((myData, index) => {
-                // console.log(myData)
-                const dbId = myData.forge_dbid;
-                const myPosition = myData.position;
-                const viewable = new DataVizCore.SpriteViewable(
-                    myPosition,
-                    style,
-                    dbId
-                );
-                myData._dbId = dbId;
-                viewableData.addViewable(viewable);
-            });
-            await viewableData.finish();
-            dataVizExtn.addViewables(viewableData);
-            viewer.addEventListener(
-                DataVizCore.MOUSE_CLICK,
-                this.onSpriteClicked.bind(this)
-            ); // SPRITE_SELECTED
-            // viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
+    const temps = [
+      new THREE.Color(0x00009c),
+      new THREE.Color(0xffff31),
+      new THREE.Color(0xff8c00),
+      new THREE.Color(0xff0000),
+    ];
+
+    switch (index) {
+      case -1:
+        Forge3DSensor.lowerTempForSensor.push(dbid);
+        break;
+      case 0:
+        Forge3DSensor.lowerTempForSensor.push(dbid);
+        break;
+      case 1:
+        Forge3DSensor.normalTempForSensor.push(dbid);
+        break;
+      case 2:
+        Forge3DSensor.highTempForSensor.push(dbid);
+        break;
+      case 3:
+        Forge3DSensor.highestTempForSensor.push(dbid);
+        break;
+      default:
+        Forge3DSensor.highTempForSensor.push(dbid);
+        break;
+    }
+    if (
+      (Forge3DSensor.lowerTempForSensor.length,
+        Forge3DSensor.normalTempForSensor.length,
+        Forge3DSensor.highTempForSensor.length,
+        Forge3DSensor.highestTempForSensor.length,
+        allDevList.length)
+    ) {
+      await this.changeColorForSensorHotspot(
+        Forge3DSensor.lowerTempForSensor,
+        temps[0]
+      );
+      await this.changeColorForSensorHotspot(
+        Forge3DSensor.normalTempForSensor,
+        temps[1]
+      );
+      await this.changeColorForSensorHotspot(
+        Forge3DSensor.highTempForSensor,
+        temps[2]
+      );
+      await this.changeColorForSensorHotspot(
+        Forge3DSensor.highestTempForSensor,
+        temps[3]
+      );
+    }
+  }
+
+  async changeColorForSensorHotspot(viewablesToUpdate, color) {
+    const dataVizExtn = await viewer.loadExtension(
+      "Autodesk.DataVisualization"
+    );
+    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+      return {
+        color: color,
+      };
+    });
+  }
+
+  // 訂閱sensor設備
+  subSensorDevice() {
+    let myBaja = new subscriptionDevices();
+    myBaja.setSubscribeDevicesByBql(this.ordPath);
+
+    myBaja.setSubscribeDevicesCallBack((data) => {
+      this.bajaChaCallback ? this.bajaChaCallback(data) : "";
+      if (this.curDevice == null) {
+        return false;
+      }
+
+      data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
+
+      //將訂閱值塞入 subDeviceData
+      if (
+        this.subDeviceData.findIndex(
+          (d) => d.device_number == this.curDevice.id
+        ) == -1
+      ) {
+        let obj = {};
+        obj.device_number = this.curDevice.id;
+        obj.dbid = this.curDevice.roomDbId;
+        this.subDeviceData.push(obj);
+      }
+      let subData = this.subDeviceData.find(
+        (x) => x.device_number == this.curDevice.id
+      );
+
+      if (subData) {
+        subData = { ...subData, [data.point_name]: data.value };
+      }
+
+      if (data.point_name == "Temp" || data.point_name == "TEMP") {
+        this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
+        this.curDevice = {
+          ...this.curDevice,
+          temp: !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
+        };
+
+        if (data.device_number_full === this.curDevice.id) {
+          this.addSensorHotspotList(
+            this.curDevice.forge_dbid,
+            this.curDevice.temp
+          );
         }
-    }
-    // ---------------- 熱點點擊事件 --------------------
-    onSpriteClicked(event) {
-        event.hasStopped = true;
-        const dbIdStart = 10;
-        if (event != undefined && event != null) {
-            if (event.dbId >= dbIdStart) {
-                let myData = this.deviceList.find((x) => x.forge_dbid == event.dbId);
-                console.log("site", myData);
-                // this.changeColorForSensorHotspot(event.dbId, this.tempVal);
-                myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備
-                myData &&
-                    $(this.selector).trigger("autodesk:click:sprite", { event, myData });
-            } else {
-                $(this.selector).trigger("autodesk:clickOut:sprite", { event });
-            }
-        }
-    }
+      }
 
-    // 改變熱點位置
-    async changePos(dbId, positionZ) {
-        const dataVizExtn = await viewer.loadExtension(
-            "Autodesk.DataVisualization"
-        );
-        dataVizExtn?.invalidateViewables(dbId, (viewable) => {
-            // console.log(viewable._position)
-            const z = viewable._position.z + positionZ;
-            const newPos = { ...viewable._position, z };
-            return {
-                // Move the viewable to a new location.
-                position: newPos,
-            };
-        });
-    }
+      let matchDevice = allDevList.find(
+        (x) => x.device_number == data.device_number_full
+      );
 
-    // 溫度感測器 sprite 隨溫度變化
-    static lowerTempForSensor = [];
-    static normalTempForSensor = [];
-    static highTempForSensor = [];
-    static highestTempForSensor = [];
+      let norDevPoiName = matchDevice.device_normal_point_name;
+      let cloDevPoiName = matchDevice.device_close_point_name;
+      let errDevPoiName = matchDevice.device_error_point_name;
+      if (
+        data.point_name == norDevPoiName &&
+        data.value == matchDevice.device_normal_point_value
+      ) {
 
-    async addSensorHotspotList(dbid, temp) {
-        let index = Math.floor(temp / 10) - 1 || 0;
+        //顯示正常燈號
+        $(`#${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
+      ) {
 
-        // 清空資料
-        Forge3DSensor.lowerTempForSensor = Forge3DSensor.lowerTempForSensor.filter(
-            (point) => point !== dbid
-        );
-        Forge3DSensor.normalTempForSensor =
-            Forge3DSensor.normalTempForSensor.filter((point) => point !== dbid);
-        Forge3DSensor.highTempForSensor = Forge3DSensor.highTempForSensor.filter(
-            (point) => point !== dbid
-        );
-        Forge3DSensor.highestTempForSensor =
-            Forge3DSensor.highestTempForSensor.filter((point) => point !== dbid);
+        $(`#${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");
+      }
 
-        const temps = [
-            new THREE.Color(0x00009c),
-            new THREE.Color(0xffff31),
-            new THREE.Color(0xff8c00),
-            new THREE.Color(0xff0000),
-        ];
+      setLightColor();
+      setDevItemPoiValBySub(data);
+      $(loadEle).Loading("close");
+    });
 
-        switch (index) {
-            case -1:
-                Forge3DSensor.lowerTempForSensor.push(dbid);
-                break;
-            case 0:
-                Forge3DSensor.lowerTempForSensor.push(dbid);
-                break;
-            case 1:
-                Forge3DSensor.normalTempForSensor.push(dbid);
-                break;
-            case 2:
-                Forge3DSensor.highTempForSensor.push(dbid);
-                break;
-            case 3:
-                Forge3DSensor.highestTempForSensor.push(dbid);
-                break;
-            default:
-                Forge3DSensor.highTempForSensor.push(dbid);
-                break;
-        }
-
-        await this.changeColorForSensorHotspot(
-            Forge3DSensor.lowerTempForSensor,
-            temps[0]
-        );
-        await this.changeColorForSensorHotspot(
-            Forge3DSensor.normalTempForSensor,
-            temps[1]
-        );
-        await this.changeColorForSensorHotspot(
-            Forge3DSensor.highTempForSensor,
-            temps[2]
-        );
-        await this.changeColorForSensorHotspot(
-            Forge3DSensor.highestTempForSensor,
-            temps[3]
-        );
-    }
-
-    async changeColorForSensorHotspot(viewablesToUpdate, color) {
-        const dataVizExtn = await viewer.loadExtension(
-            "Autodesk.DataVisualization"
-        );
-        dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
-            return {
-                color: color,
-            };
-        });
-    }
-
-    // 訂閱sensor設備
-    subSensorDevice() {
-        let myBaja = new subscriptionDevices();
-        myBaja.setSubscribeDevicesByBql(this.ordPath);
-
-        myBaja.setSubscribeDevicesCallBack((data) => {
-            this.bajaChaCallback ? this.bajaChaCallback(data) : "";
-            if (this.curDevice == null) {
-                return false;
-            }
-
-            data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
-
-            //將訂閱值塞入 subDeviceData
-            if (
-                this.subDeviceData.findIndex(
-                    (d) => d.device_number == this.curDevice.id
-                ) == -1
-            ) {
-                let obj = {};
-                obj.device_number = this.curDevice.id;
-                obj.dbid = this.curDevice.roomDbId;
-                this.subDeviceData.push(obj);
-            }
-            let subData = this.subDeviceData.find(
-                (x) => x.device_number == this.curDevice.id
-            );
-
-            if (subData) {
-                subData = { ...subData, [data.point_name]: data.value };
-            }
-
-            //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") {
-                this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
-                this.curDevice = {
-                    ...this.curDevice,
-                    temp: !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
-                };
-
-                if (data.device_number_full === this.curDevice.id) {
-                    this.addSensorHotspotList(
-                        this.curDevice.forge_dbid,
-                        this.curDevice.temp
-                    );
-                }
-            }
-        });
-
-        myBaja.setSubscribeDeviceEndCallBack((data) => {
-            if (
-                data.findIndex(
-                    (x) => x.point_name == "Temp" || x.point_name == "TEMP"
-                ) != -1
-            ) {
-                // 顯示溫度條
-                showHeat("[name=forgeHeatBar]");
-            }
-        });
-        // window.x = 28
-        // setInterval(()=>{
-        //   this.changeColorForSensorHotspot(this.curDevice.forge_dbid, x++)
-        // }, 2000)
-    }
+    myBaja.setSubscribeDeviceEndCallBack((data) => {
+      if (
+        data.findIndex(
+          (x) => x.point_name == "Temp" || x.point_name == "TEMP"
+        ) != -1
+      ) {
+        // 顯示溫度條
+        showHeat("[name=forgeHeatBar]");
+      }
+    });
+    // window.x = 28
+    // setInterval(()=>{
+    //   this.changeColorForSensorHotspot(this.curDevice.forge_dbid, x++)
+    // }, 2000)
+  }
 }