From 092c055c2ea372282561647ad9a7975fa5ef3a0f Mon Sep 17 00:00:00 2001
From: Celeste <aafree2014@gmail.com>
Date: Tue, 14 Feb 2023 15:16:11 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=89=8D=E5=8F=B0]=E7=B3=BB=E7=B5=B1=E7=9B=A3?=
 =?UTF-8?q?=E6=8E=A7=E8=A9=B3=E7=B4=B0=E8=B3=87=E6=96=99=20zoom=20in=20=20?=
 =?UTF-8?q?|=20=E6=84=9F=E6=B8=AC=E8=A8=AD=E5=82=99=E9=9A=A8=E9=9B=BB?=
 =?UTF-8?q?=E6=A2=AF=E7=A7=BB=E5=8B=95=E5=8F=8A=E6=BA=AB=E5=BA=A6=E8=AE=8A?=
 =?UTF-8?q?=E5=8C=96=20|=20=20=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7=20pop?=
 =?UTF-8?q?=20=E5=B0=8F=E5=8D=A1=20icon=20=E5=8A=9F=E8=83=BD=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/_sysElevator.html           |  72 +++-
 Frontend/_sysMonAll.html             | 159 ++++----
 Frontend/img/forge/sensor_circle.svg |   7 +
 Frontend/index.html                  |  51 ++-
 Frontend/js/forge/forgemodel.js      | 140 +++++---
 Frontend/js/site.js                  | 519 +++++++++++++--------------
 6 files changed, 546 insertions(+), 402 deletions(-)
 create mode 100644 Frontend/img/forge/sensor_circle.svg

diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html
index 1f6330f..18f02c4 100644
--- a/Frontend/_sysElevator.html
+++ b/Frontend/_sysElevator.html
@@ -1,25 +1,61 @@
 <style>
-    .elevator { background-color: #fff; min-height: 520px; }
+    .elevator {
+        background-color: #fff;
+        min-height: 520px;
+    }
 
-    .elevator-table-wrapper { padding: 0.8rem; }
+    .elevator-table-wrapper {
+        padding: 0.8rem;
+    }
 
-    table.elevator-build { /*border: 1px double #000;*/ }
+    table.elevator-build { /*border: 1px double #000;*/
+    }
 
-    table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; }
+        table.elevator-build td {
+            padding: 0.2rem 0.5rem;
+            height: 50px;
+            width: 45px;
+            border: 1px solid #000;
+        }
 
-    elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; }
+    elevator .elevator-body, elevator .elevator-header {
+        padding: 0.7rem;
+    }
 
-    .elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; }
+    .elevator-item {
+        position: absolute;
+        width: 43px;
+        height: 47px;
+        border: 4px solid orange;
+    }
 
-    .elevator-item-toup { border: 4px solid rgba(255,255,255,0); position: absolute; border-bottom: 0; z-index: 2; }
+    .elevator-item-toup {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-bottom: 0;
+        z-index: 2;
+    }
 
-    .elevator-item-todown { border: 4px solid rgba(255,255,255,0); position: absolute; border-top: 0; z-index: 2; }
+    .elevator-item-todown {
+        border: 4px solid rgba(255,255,255,0);
+        position: absolute;
+        border-top: 0;
+        z-index: 2;
+    }
 
-    .table-compact td { padding: 0.2rem 0.3rem; }
+    .table-compact td {
+        padding: 0.2rem 0.3rem;
+    }
 
-    #emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; }
+    #emerTurn tr td:nth-child(2) {
+        width: 50%;
+        text-align: center;
+        justify-content: center;
+    }
 
-    #emerTurn tr td:nth-child(1) { width: 35%; }
+    #emerTurn tr td:nth-child(1) {
+        width: 35%;
+    }
 </style>
 
 <div class="d-flex">
@@ -215,7 +251,7 @@
                     </div>
                     <div class="">
                         <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
-                           title="及時狀態">
+                           title="即時狀態">
                             <i class="fal fa-tv fa-2x" data-toggle="modal"
                                data-target="#exampleModal"></i>
                         </a>
@@ -899,7 +935,7 @@
 
         setBuildFloor();
         setCards();
-        
+
         setEleManTable();
         show3D();
     })
@@ -2374,7 +2410,7 @@
     //                         ↑  樓層平面圖  ↑
     //=====================================================================
 
-    // 設置 模型隱藏或透明 
+    // 設置 模型隱藏或透明
     function setInviForge(type, devDbIds) {
         console.log("devDbIds", devDbIds)
         if (type == "Hide") {
@@ -2402,8 +2438,8 @@
     //載入3D模型
     function load3DModel() {
         launchViewer(pageAct.urn, (viewer) => {
-            
-            
+
+
             let elevOption = {
                 selector: "#forgeViewer",
                 viewer: viewer,
@@ -2427,8 +2463,8 @@
                 subDeviceSetStatus(data);
             }
             forge3DElev.init();
-             
-            
+
+
         });
 
     }
diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html
index e30f7d3..4c12cd9 100644
--- a/Frontend/_sysMonAll.html
+++ b/Frontend/_sysMonAll.html
@@ -11,7 +11,8 @@
 </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 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">
@@ -24,9 +25,9 @@
             </div>
             <div class="modal-body">
                 <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
-    </table>-->
+                </table>-->
                 <div id="lightSchBlock" style="height:60vh"></div>
-                
+
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
@@ -46,9 +47,10 @@
 
     $(function () {
         getBuildMenu((arr, data) => {
+            console.log(arr)
             buildMenuData = data;
             if (arr.indexOf(4) != -1) {
-                getFloDevList(arr[0] == 4 ? "left" :"right");
+                getFloDevList(arr[0] == 4 ? "left" : "right");
                 setLightColor();
             }
             if (arr.indexOf(3) != -1) {
@@ -100,12 +102,12 @@
         }
         myBaja.setSubscribeDevicesByBql(ordPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-           
+
             let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
             if (!matchDevice) {
                 return false;
             }
-           
+
             //將訂閱值塞入 subDeviceData
             if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
@@ -138,7 +140,7 @@
             } 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");
             }
-            
+
             setLightColor();
             setForgeHotSpotColor(matchDevice);
             lightDevForgeSpotLig(matchDevice)
@@ -147,7 +149,7 @@
         });
 
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
-          endPageLoading();
+            endPageLoading();
             if (data.findIndex(x => x.point_name == "Temp") != -1) {
                 // 顯示溫度條
                 showHeat("[name=forgeHeatBar]");
@@ -157,16 +159,16 @@
     }
 
     function lightDevForgeSpotLig(devObj) {
-        
-        
+
+
     }
 
     // 從設備訂閱更新每個設備卡片即時點位
-    function setDevItemPoiValBySub(data) { 
-        
+    function setDevItemPoiValBySub(data) {
+
         let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
         if (pointSpan && pointSpan.data("point") == data.point_name) {
-            console.log(data)
+            // console.log(data)
             pointSpan.text(data.value);
         }
     }
@@ -284,7 +286,7 @@
                                         <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 ">詳細資料</a>
+                                                <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>`;
@@ -376,42 +378,67 @@
     function show3DModel(urn) {
         $(loadEle).Loading("start");
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
-          let devDbIds = allDevList.map(x => x.forge_dbid); // 大類
-          console.log(allDevList);
-          let subDevDbId = [];
-          allDevList.forEach(({ device_nodes }) => {
-            subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
-          })
+
+            addHotPoint(viewer)
+            let devDbIds = allDevList.map(x => x.forge_dbid);
+            // 大類
+            let subDevDbId = [];
+            allDevList.forEach(({ device_nodes }) => {
+                subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
+            })
+
             // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
             if (forgeInvType) {
-              setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
+                setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
             } else {
-              setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
+                setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
             }
 
             $(loadEle).Loading("close");
-
-            let devices = allDevList.map(x => {
-                return {
-                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
-                    id: x.device_number,
-                    position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-                    sensorTypes: ["temperature", "humidity"]
-                }
-            })
+            let sensorObjs = []
+            let devices = []
+            if (pageAct.sysSubTag === "M12") {
+                allDevList.forEach((device) => {
+                    const sensorObj = new Forge3DSensor({
+                        viewer: viewer,
+                        ordPath: {
+                            "area_tag": pageAct.AreaTag,
+                            "building_tag": pageAct.buiTag,
+                        },
+                        curDevice: {
+                            roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
+                            id: device.device_number,
+                            position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                            temp: 25,
+                            forge_dbid: parseInt(device.forge_dbid)
+                        }
+                    });
+                    sensorObjs.push(sensorObj)
+                })
+            } else {
+                allDevList.map(x => {
+                    return {
+                        roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
+                        id: x.device_number,
+                        position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                        sensorTypes: ["temperature", "humidity"],
+                        temp: 0,
+                    }
+                })
+            }
 
             let option = {
                 devices: devices,
             }
 
-          if (pageAct.sysMainTag !== "LT") {
-            heatMap = new ADHeatMaps(option);
-            heatMap.onComplete = () => {
-              $.each(allDevList, (idx, dev) => {
-                heatMap.changeTemp(dev.device_number, dev._temp || 0);
-              })
+            if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
+                heatMap = new ADHeatMaps(option);
+                heatMap.onComplete = () => {
+                    $.each(allDevList, (idx, dev) => {
+                        heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                    })
+                }
             }
-          }
 
             let elevOption = {
                 selector: "[name=forgeViewer]",
@@ -420,6 +447,7 @@
                     "area_tag": pageAct.AreaTag,
                     "building_tag": pageAct.buiTag,
                 },
+                sensorObjs
             }
 
             // 電梯移動訂閱程序載入
@@ -438,36 +466,40 @@
                         setForgeHotSpotColor(matchDevice);
                     }
                 }
-          }
-          if (pageAct.sub_system_tag == "W2") {
-            getWaterNodeId();
-          }
+            }
+            if (pageAct.sysSubTag == "W2") {
+                // console.log("@@",pageAct, pageAct.sub_system_tag)
+                getWaterNodeId(viewer);
+            }
 
         }, () => {
             $(loadEle).Loading("close");
         }, "[name=forgeViewer]");
+
+
     }
 
     // 供水系統 - 取得欲染色 dbid
     function getWaterNodeId() {
-        //let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
-        //let sendData = { forgeNodeKey: "water_wupply" };
-        //objSendData.Data = sendData;
-        //ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-        //    if (!res || res.code != "0000" || !res.data) {
+        // let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
+        // let sendData = { forgeNodeKey: "water_wupply" };
+        // objSendData.Data = sendData;
+        // ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+        //     if (!res || res.code != "0000" || !res.data) {
 
-        //    } else {
-        //        if (!isNaN(parseInt(res.data[0]?.system_value))) {
-        //            changeColor(parseInt(res.data[0]?.system_value))
-        //        }
-        //        console.log(res.data)
-        //    }
-        //}, null, "POST").send();
+        //     } else {
+        //         if (!isNaN(parseInt(res.data[0]?.system_value))) {
+        //             changeColor(parseInt(res.data[0]?.system_value))
+        //         }
+        //         console.log(res.data)
+        //     }
+        // }, null, "POST").send();
+        // console.log("1",viewer.model)
+        viewer.model.search("給水", (nodeIds) => {
+            // console.log("2",nodeIds)
+            viewer.show(nodeIds)
+        }, (e) => { console.log(e) })
 
-      viewer.model.search("給水", (nodeIds) => {
-        console.log(nodeIds)
-        viewer.show(nodeIds)
-      }, (e) => { console.log(e) })
     }
 
     function getHotspotPoint(callback = null) {
@@ -494,7 +526,7 @@
                     $.extend(item, data);
                     myDataList.push(item);
                 })
-               
+
                 setHotspotPoint(myDataList);
                 if (pageAct.sysMainTag == "LT") {
                     setLightPoint(myDataList);
@@ -518,22 +550,21 @@
     // 取得 不可視 3D 模型類型
     function getInviForge() {
         let url = baseApiUrl + "/api/Device/GetForgeInvType";
-       
+
         ytAjax = new YourTeam.Ajax(url, null, function (res) {
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
                 let datas = res.data;
-                
+
                 forgeInvType = datas.filter(x => x.sub_system_tag == pageAct.sysSubTag)[0]?.invisible_value;
                 forgeInvTypeDef = datas.filter(x => x.invisible_type == "default_value")[0]?.invisible_value;
             }
         }, null, "POST").send();
     }
 
-    // 設置 模型隱藏或透明 
+    // 設置 模型隱藏或透明
     function setInviForge(type, devDbIds) {
-        console.log("devDbIds",devDbIds)
         if (type == "Hide") {
             hideAllObjects(devDbIds);
         } else if (type == "Opacity") {
@@ -558,7 +589,7 @@
     })
 
     onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
-        
+
         $("#floDevList a[name=devItem]").each((idx, ele) => {
             let devNum = $(ele).data("number");
             let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
diff --git a/Frontend/img/forge/sensor_circle.svg b/Frontend/img/forge/sensor_circle.svg
new file mode 100644
index 0000000..e7b0325
--- /dev/null
+++ b/Frontend/img/forge/sensor_circle.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
+
+ <g>
+  <title>Layer 1</title>
+  <circle fill="none" id="svg_1" r="8" cy="8" cx="8"/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index fb37597..ed3b2d2 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -801,7 +801,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         /*"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/chart.min",
+                        "lib/chart.js_4.1.2/chart.umd",
                         "lib/dropzone/dropzone-min",
                         "lib/jstree-master/jstree.min",
                         "lib/notifications/sweetalert2/sweetalert2.bundle",
@@ -870,7 +870,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (isJSON(sessionStorage.getItem("pageAct"))) {
                         lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
                     }
-                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator" || lastPage == "sysSensor") {
+                    if ((lastPageAct.sysSubTag && lastPage == "systemMonitor") || lastPage == "sysElevator"
+                        //  || lastPage == "sysSensor"
+                    ) {
                         $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
                         $("#sysMonTopBtn").YTTab("set");
                     } else {
@@ -927,7 +929,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     //     }
                     // })
 
-                    console.log(result);
+                    // console.log(result);
                 }
             }
 
@@ -946,7 +948,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     if (!page) {
                         return;
                     }
-                    if (page != "systemMonitor" && page != "sysElevator" && page != "sysSenesor") {
+                    if (page != "systemMonitor" && page != "sysElevator"
+                        //  && page != "sysSensor"
+                    ) {
                         $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
                         pageAct.sysMainTag = null;
                         pageAct.sysSubTag = null;
@@ -1161,12 +1165,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                 <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" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                                <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" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
-                                                <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
-                                                <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
-                                                <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                                                <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">
@@ -1202,11 +1216,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 controlFocusHotspot($(oriEle).data("dbId"));
                             }
                             // 3D 視角 ZOOM IN 聚焦
-                            /*
+
                             if (devObj) {
                                 moveViewToDevice(devObj?.forge_dbid);
                             }
-                            */
+
                             // pop 視窗卡片可拖移功能初始化
                             $(tooltipEle).draggable({
                                 cursor: "move",
@@ -1379,6 +1393,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             // Card - 異常紀錄 Table
             function callbackForErr(result) {
+                console.log("@@@", result)
                 if (errRecTable) {
                     errRecTable.destroy();
                 }
@@ -1410,9 +1425,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     {
                         "title": "發生/完成時間",
                         "data": "normalTime",
-                        //"render": function (data, type, row) {
-                        //    return row.timestamp + "<br>" + data;
-                        //},
+                        // "render": function (data, type, row) {
+                        //     return row.timestamp + "<br>" + data;
+                        // },
                     },
 
                 ];
@@ -1626,10 +1641,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             if (subSysObj.sub_system_tag == "EL") {
                                 page = "sysElevator";
                             }
-                            console.log(subSysObj.sub_system_tag)
-                            if (subSysObj.sub_system_tag == "M12") {
-                                page = "sysSensor";
-                            }
+                            // 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");
diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js
index a30b5c1..435e3e0 100644
--- a/Frontend/js/forge/forgemodel.js
+++ b/Frontend/js/forge/forgemodel.js
@@ -11,7 +11,7 @@ var levels;//剖面用
 var lowerIdx;//剖面的下方樓層
 var upperIdx;//剖面的上方樓層
 
-function launchViewer(urn, callback,failCallback, _selector = "#forgeViewer") {
+function launchViewer(urn, callback, failCallback, _selector = "#forgeViewer") {
     selector = _selector;
     var options = {
         env: 'AutodeskProduction',
@@ -38,7 +38,7 @@ function launchViewer(urn, callback,failCallback, _selector = "#forgeViewer") {
             failCallback ? failCallback(viewer) : "";
         })
 
-        //test 
+        //test
         // for (let i = 0; i < urn.length; i++) {
         //     Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
         //         let viewables = doc.getRoot().getDefaultGeometry();
@@ -90,7 +90,6 @@ function launchViewerForHotspot(urn, callback, failCallback, _selector = "#forge
         setShadowShow();
         $(selector).on("autodesk:loaded", function (e, nodeIds) {
             callback ? callback(viewer, nodeIds) : "";
-            console.log(viewer.get)
         })
 
         $(selector).on("autodesk:loaded:fail", function (e) {
@@ -168,6 +167,7 @@ class elevator3D {
         this.movStatus = 0;
         this.targetFloorZ = 0;
         this.floorHeight = option.floorHeight ?? [{}];
+        this.sensorObjs = option.sensorObjs ?? null;
         this.init();
     }
 
@@ -177,7 +177,7 @@ class elevator3D {
             // 定義結果陣列
             let result = [];
             // 使用 InstanceTree.enumNodeFragments 遍歷模型中的所有片段
-            this.viewer?.model?.getData().instanceTree.enumNodeFragments(nodeId,(fragId) => {
+            this.viewer?.model?.getData().instanceTree.enumNodeFragments(nodeId, (fragId) => {
                 // 將遍歷到的片段 ID 添加到結果陣列中
                 result.push(fragId);
             }, (nodeId) => {
@@ -219,6 +219,12 @@ class elevator3D {
                 let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
                 // 設置當前片段的位置
                 fragProxy.position = fragPosition;
+
+                // if(nodeId === 13704) {
+                //   // 改變感測器熱點位置
+                //   this.sensorObjs&&this.sensorObjs[0]?.changePos(13706, fragProxy.position.z)
+                // }
+
                 // 更新當前片段的動畫變換矩陣
                 fragProxy.updateAnimTransform();
             })
@@ -294,10 +300,15 @@ class elevator3D {
                 fragProxy.position.z += this.speed;
             }
             let tarFrag = this.fragProxys.filter(x => x.nodeId == nodeId && x.fragId == frag)[0];
-            if (tarFrag) { 
+            if (tarFrag) {
                 tarFrag.frag.position.z = fragProxy.position.z;
             }
             fragProxyZ = fragProxy.position.z;
+
+            if (nodeId === 13704) {
+                // 改變感測器熱點位置
+                this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxyZ)
+            }
             fragProxy.updateAnimTransform()
         })
 
@@ -349,20 +360,20 @@ function onDocumentLoadSuccess(doc, eleOption) {
 
     viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
         let instanceTree = viewer.model?.getData().instanceTree;
-        console.log(instanceTree.nodeAccess)
+        // console.log(instanceTree.nodeAccess)
         allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
         /*getNodeIdByDbIds("【電梯】", (nodeIds) => {*/
         $(selector).trigger("autodesk:loaded");
         /*});*/
 
-        
+
     });
 
-    
+
 }
 
 // 輔助函數，使用 Promise 封裝 viewer.getProperties 函數
-function viewerGetProperties(dbIds,attributeName = null) {
+function viewerGetProperties(dbIds, attributeName = null) {
     // 在這裡，我們使用 viewer.getProperties 函數的成功回調函數作為 resolve 函數，
     // 並使用 viewer.getProperties 函數的失敗回調函數作為 resolve 函數的參數
     // 這樣，當 viewer.getProperties 函數成功時，Promise 會傳回 properties 物件；
@@ -373,9 +384,9 @@ function viewerGetProperties(dbIds,attributeName = null) {
             option.propFilter = [attributeName]; // 限制只返回指定的屬性
         }
         viewer.model.getBulkProperties2(dbIds, option,    // 取得指定元素的屬性信息
-        function (elements) {
-            resolve(elements);   // 成功時傳回 elements 物件
-        })
+            function (elements) {
+                resolve(elements);   // 成功時傳回 elements 物件
+            })
     });
 }
 
@@ -390,12 +401,12 @@ async function getNodeIdBySearch(text) {
     })
 }
 
-// 主函數 - 透過 model 全部 node 取得特定 nodeId 
+// 主函數 - 透過 model 全部 node 取得特定 nodeId
 async function getNodeIdByDbIds(checkValue = [], callback = null) {
     let evelMap = new Map();
     let hasElement = false; // 設置是否有 【tag_id】的node
     let targetNodeIds = await getNodeIdBySearch(checkValue);
-    let elements = await viewerGetProperties(targetNodeIds,"【tag_id】");
+    let elements = await viewerGetProperties(targetNodeIds, "【tag_id】");
 
     // 從 elements 中篩選出包含 【tag_id】 屬性的元素
     elements = elements.filter(x => x.properties.findIndex(y => y.displayName == "【tag_id】" && checkValue.indexOf(y.displayValue) != -1) != -1);
@@ -413,7 +424,7 @@ async function getNodeIdByDbIds(checkValue = [], callback = null) {
         // 二次篩選
         chiElements = targetNodeIds.filter(x => x.properties.findIndex(y => y.displayName == "child") != -1);
 
-         // 獲取子元素的 nodeId
+        // 獲取子元素的 nodeId
         targetNodeIds = chiElements.map(x => x.properties[0].displayValue);
         // 獲取子元素的屬性信息
         chiElements = await viewerGetProperties(targetNodeIds);
@@ -560,8 +571,12 @@ class ADHeatMaps {
     init = async function () {
         // 載入 Autodesk Viewer 的資料視覺化擴充功能
         const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+        this.dataVizExtn = dataVizExtn;
         // 儲存 Viewer 的模型
         this.model = viewer.model;
+        this.addHeatMaps()
+    }
+    async addHeatMaps() {
         const {
             SurfaceShadingData,
             SurfaceShadingPoint,
@@ -584,11 +599,12 @@ class ADHeatMaps {
             this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
                 const shadingPoint = new SurfaceShadingPoint(
                     device.id,
-                    device.position,
+                    undefined,
                     device.sensorTypes
                 );
+                shadingPoint.positionFromDBId(this.model, device.roomDbId)
                 shadingNode.addPoint(shadingPoint);
-                device.temp = 0;
+                // device.temp = 0;
             });
 
             heatmapData.addChild(shadingNode);
@@ -598,12 +614,10 @@ class ADHeatMaps {
         heatmapData.initialize(this.model);
 
         // 對模型做表面顏色的渲染
-        await dataVizExtn.setupSurfaceShading(this.model, heatmapData);
+        await this.dataVizExtn.setupSurfaceShading(this.model, heatmapData);
 
         // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
-        dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
-
-        this.dataVizExtn = dataVizExtn;
+        this.dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
 
         $.each(this.roomDbIds, (idx, rDbid) => {
             this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
@@ -613,8 +627,9 @@ class ADHeatMaps {
         this.onComplete ? this.onComplete() : "";
     }
 
-    getSensorValue = function(device, sensorType) {
+    getSensorValue = function (device, sensorType) {
         let dev = this.devices.filter(x => x.id == device.id)[0];
+        // shadingPoint.positionFromDBId(this.model, device.roomDbId)
         return dev.temp / 40;
     }
 
@@ -627,7 +642,7 @@ class ADHeatMaps {
                 dev.temp = temp;
             }
         })
-        $.each(this.roomDbIds, (idx, rDbid) => {
+        $.each(this.roomDbIds, async (idx, rDbid) => {
             this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
         })
         //if (rDbid != null) {
@@ -732,7 +747,7 @@ async function getLightData(data) {
 async function testNewLight(dataList) {
     dataList.forEach((myData, index) => {
         const position = JSON.parse(myData.device_coordinate_3d);
-        if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) { 
+        if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) {
             lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10) });
         }
 
@@ -745,7 +760,7 @@ async function testNewLight(dataList) {
 
         //let spotLightHelper = new THREE.SpotLightHelper(lightList[index].lightObject);
         //viewer.scene.add(spotLightHelper);
-        
+
 
     });
     viewer.impl.sceneUpdated(true);
@@ -753,16 +768,22 @@ async function testNewLight(dataList) {
 
 //------------------- 加入熱點 -----------------
 async function addHotPoint(data) {
-    var viewer = data.target;
+    var viewer = data.target ? data.target : data;
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     const DataVizCore = Autodesk.DataVisualization.Core;
     const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
-    const spriteColor = new THREE.Color(0xffffff);
+    let spriteColor = null;
+    let spriteIcon = "";
     const dbIdStart = 10;
     const dbIdEnd = 19;
-    let spriteIcon = "/file/img/forge/hotspot.svg";
-    if (location.href.indexOf("localhost:5966") != -1) {
-        spriteIcon = "/img/forge/hotspot.svg";
+    if (pageAct.sysSubTag === "M12") {
+        return
+    } else {
+        spriteColor = new THREE.Color(0xffffff);
+        spriteIcon = "/file/img/forge/hotspot.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteIcon = "/img/forge/hotspot.svg";
+        }
     }
 
     const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
@@ -770,7 +791,7 @@ async function addHotPoint(data) {
     if (lightDataList != undefined && lightDataList != null && lightDataList.length > 0) {
         testNewLight(lightDataList);
     }
-    
+
 
     //熱點 點擊事件註冊
     viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
@@ -793,15 +814,28 @@ async function addHotPoint(data) {
 
     await viewableData.finish();
     dataVizExtn.addViewables(viewableData);
+    // console.log(dataVizExtn)
     $(selector).trigger("autodesk:complete:sprite", { myDataList });
 
     //---------------- 熱點點擊事件 --------------------
     function onSpriteClicked(event) {
         event.hasStopped = true;
+        if (pageAct.sysSubTag === "M12" && event != undefined && event != null) {
+            if (event.dbId >= dbIdStart) {
+                changeColorForHotspot(event.dbId);
+                changeScaleForHotspot(event.dbId, false);
+                let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
+                moveViewToDevice(myData.forge_dbid);//移動視角至該設備
+
+                $(selector).trigger("autodesk:click:sprite", { event, myData });
+            } else {
+                $(selector).trigger("autodesk:clickOut:sprite", { event });
+            }
+        }
         if (event != undefined && event != null) {
             if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19
-                console.log(`Sprite clicked: ${event.dbId}`);
-                
+                // console.log(`Sprite clicked: ${event.dbId}`);
+
                 for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
                     changeColorForHotspot(i);
                     changeScaleForHotspot(i, false);
@@ -821,7 +855,7 @@ async function addHotPoint(data) {
                 //document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
                 //document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
                 //document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")";
-                console.log(`event>>  dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
+                // console.log(`event>>  dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
             }
         }
     }
@@ -847,12 +881,13 @@ async function addHotPoint(data) {
 // 熱點 更換顏色
 async function changeColorForHotspot(dbId, type = null) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    let spriteColorFocus = new THREE.Color(0xffffff); 
-    if (type == "focus") {
+    // console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
+    let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff);
+    if (type == "focus" && pageAct.sysSubTag !== "M12") {
         spriteColorFocus = new THREE.Color(0x00ffe1);
     } else if (type == "error") {
         spriteColorFocus = new THREE.Color(0xff0000);
-    } 
+    }
     const viewablesToUpdate = dbId;
     dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
         return {
@@ -861,6 +896,27 @@ async function changeColorForHotspot(dbId, type = null) {
     });
 }
 
+
+// 熱點 更換顏色---環境感知器
+async function changeColorForSensorHotspot(dbId, temp) {
+    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+    const temps = [new THREE.Color(0x0000ff), new THREE.Color(0x00ff00), new THREE.Color(0xffff00), new THREE.Color(0xff0000)]
+    let index = Math.floor(temp / 10);
+    if (index > 3) {
+        index = 3
+    }
+    const viewablesToUpdate = dbId;
+    const color = temps[index]
+
+    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+        return {
+            color: color,
+        };
+    });
+    console.log(dataVizExtn)
+}
+
+
 // 熱點 更換大小
 async function changeScaleForHotspot(dbId, type = true) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
@@ -1050,7 +1106,7 @@ async function loadHeatmapForFloor() {
 //------------ 剖面 ----------------------
 async function getRemoteLevels() {
     const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
-    if (!aecData.levels) return null;
+    if (!aecData || !aecData.levels) return null;
 
     const levels2 = aecData.levels;
     levels2.sort((a, b) => b.elevation - a.elevation);
@@ -1058,7 +1114,7 @@ async function getRemoteLevels() {
 }
 
 async function getLevelsData(lowerFloor, upperFloor, callback = null) {
-    // 樓層正規化 取得樓層 
+    // 樓層正規化 取得樓層
     const floorRegex = /[\d|\w]+F/gmi;
     const data = await this.getRemoteLevels();
     for (var i = 0; i < data.length; i++) {
@@ -1106,10 +1162,10 @@ async function newLight(lightPosition) {
     //聚光燈
     var spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);
     spotLight.position.set(lightPosition.x, lightPosition.y, lightPosition.z);
-    console.log(lightPosition.x, lightPosition.y, lightPosition.z)
+    // console.log(lightPosition.x, lightPosition.y, lightPosition.z)
     spotLight.castShadow = false;
     spotLight.visible = true;
-    spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z-20);
+    spotLight.target.position.set(lightPosition.x, lightPosition.y, lightPosition.z - 20);
     viewer.scene.add(spotLight.target);
     viewer.scene.add(spotLight);
     viewer.impl.sceneUpdated(true);
@@ -1119,7 +1175,7 @@ async function newLight(lightPosition) {
 
 //調整燈光 強度、顏色
 async function setLightValues(deviceGuid, intensity, color) {
-    for (var i = 0; i < lightList.length; i++) { 
+    for (var i = 0; i < lightList.length; i++) {
         if (lightList[i].device_guid == deviceGuid) {
             lightList[i].lightObject.intensity = intensity;
 
diff --git a/Frontend/js/site.js b/Frontend/js/site.js
index d48d678..fdd43bc 100644
--- a/Frontend/js/site.js
+++ b/Frontend/js/site.js
@@ -5,25 +5,25 @@
 
 })
 
-/** 
- * fn 定義 | 手動初始化 Bootstrap dropdown select 
- */
+/**
+* fn 定義 | 手動初始化 Bootstrap dropdown select
+*/
 $.fn.droSetItem = function () {
     setDropdownItem(this);
     return this;
 }
-/** 
- * fn 定義 | 輸出含原元素 html
- */
+/**
+* fn 定義 | 輸出含原元素 html
+*/
 $.fn.outerHtml = function () {
     return $(this).prop("outerHTML");
 }
 
 /**
- * fn 定義 | Loading 操作
- * @param {any} type - close / start / exceed , exceed => 繼續執行並可切換文字
- * @param {any} text - 右下角 Alert 文字
- */
+* fn 定義 | Loading 操作
+* @param {any} type - close / start / exceed , exceed => 繼續執行並可切換文字
+* @param {any} text - 右下角 Alert 文字
+*/
 $.fn.Loading = function (type = "close", text) {
     let ele = this;
     let aleObj = $(this)[0]._aleObj;
@@ -34,7 +34,7 @@ $.fn.Loading = function (type = "close", text) {
         $("body").css("overflow", "auto");
         $(aleObj.ele).YTAlert().hide();
         $(ele).animate({ opacity: 0 }, 300, () => {
-            if ($(ele).data("loading-show-status") == "close") { 
+            if ($(ele).data("loading-show-status") == "close") {
                 $(ele).hide();
             }
         })
@@ -82,9 +82,9 @@ $.fn.YTAlert = function () {
 }
 
 /**
- * 設置 bootstrap dropdown 為下拉選單 
- * @param {any} menuEle - .dropdown-menu element
- */
+* 設置 bootstrap dropdown 為下拉選單
+* @param {any} menuEle - .dropdown-menu element
+*/
 function setDropdownItem(menuEle) {
     if ($(menuEle).find(".dropdown-item.active").length == 0) {
         $(menuEle).find(".dropdown-item").first().addClass("active");
@@ -106,19 +106,19 @@ function setDropdownItem(menuEle) {
 }
 
 /**
- * 預設設備圖像
- * @param {any} obj
- */
+* 預設設備圖像
+* @param {any} obj
+*/
 function defDev(obj) {
     let defSrc = 'img/defdev.png';
     obj.src = defSrc;
 }
 
 /**
- * jquery datatable - ajax send data reset
- * @param {any} table
- * @param {any} sendData
- */
+* jquery datatable - ajax send data reset
+* @param {any} table
+* @param {any} sendData
+*/
 function dtAjaxResetSendData(table, sendData) {
     table.context[0].ajax.data = function (d) {
         d = sendData;
@@ -128,14 +128,14 @@ function dtAjaxResetSendData(table, sendData) {
 
 
 /**
- * element 建造 
- * @param {any} text
- * @param {any} id
- * @param {any} name
- * @param {any} cls
- * @param {any} data
- * @param {any} attr
- */
+* element 建造
+* @param {any} text
+* @param {any} id
+* @param {any} name
+* @param {any} cls
+* @param {any} data
+* @param {any} attr
+*/
 function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
     cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
     id = id ? `id="${id}"` : "";
@@ -193,8 +193,8 @@ function creSpan(text = null, cls = [], id = null, attr = {}, data = {}, name =
     return creEle("span", text, id, name, cls, data, attr);
 }
 /**
- * 根據該棟建築底下的'所有'電梯執行緒物件
- * */
+* 根據該棟建築底下的'所有'電梯執行緒物件
+* */
 class ElevatorHandler {
     constructor(ele, option = {}) {
         this.ele = ele;
@@ -428,7 +428,7 @@ function dateRanCutPart(start, end, cutNum) {
     let cutTimeArr = [];
     if (sTime < eTime) return [];
 
-    
+
     let partNum = (sTime - eTime) / cutNum;
     for (let i = eTime; i <= sTime; i = i + partNum) {
         cutTimeArr.push(i)
@@ -448,27 +448,27 @@ function isJSON(str) {
     }
 }
 
-function addBsToast(container, type = "warning",title="",content ="", id, datas = {}, option = {}) {
+function addBsToast(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}> 
-                        <div class="toast-header ${warning ? `bg-` + warning : ""}">
-                            <i class="${iconClass}"></i>
-                            <strong class="mr-auto">${title}</strong>
-                            <small class="text-muted">just now</small>
-                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                            </button>
-                        </div>
-                        <div class="toast-body">
-                            ${content}
-                        </div>
-                    </div>`
+    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>
+                          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                              <span aria-hidden="true">&times;</span>
+                          </button>
+                      </div>
+                      <div class="toast-body">
+                          ${content}
+                      </div>
+                  </div>`
 }
 
 /**
- * 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
- * */
+* 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
+* */
 class Forge3DElevFull {
     constructor(option = {}) {
         this.allElevDevList = [];  //全電梯設備清單
@@ -484,17 +484,18 @@ class Forge3DElevFull {
         this.selector = option.selector ?? "#forgeViewer";
         this.bajaChaCallback = option.bajaChaCallback ?? null;
         this.bajaEndCallback = option.bajaEndCallback ?? null;
-        this.sensorObj = null
+        this.sensorObjs = option.sensorObjs ?? null;
     }
 
-  init = function () {
-        this.sensorObj = new Forge3DSensor({
-          viewer: this.viewer,
-          ordPath: { ...this.ordPath },
-        })
+    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();
     }
 
@@ -534,6 +535,7 @@ class Forge3DElevFull {
                 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();
                     }
@@ -593,6 +595,13 @@ class Forge3DElevFull {
 
                         frags.forEach((fragProxy) => {
                             fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
+                            console.log("1", fragProxy.frag.position.z)
+                            let start = 0;
+                            if (node === 13704 && start == 0) {
+                                // 改變感測器熱點位置
+                                this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxy.frag.position.z);
+                                start = 1;
+                            }
                             fragProxy.frag.updateAnimTransform();
                         })
                         elevObj.obj.viewer.impl.sceneUpdated(true);
@@ -617,6 +626,7 @@ class Forge3DElevFull {
                 viewer: this.viewer,
                 nodeId: node,
                 floorHeight: this.elev3DOption.floorHeight ?? [],
+                sensorObjs: this.sensorObjs,
                 inited: function () {
 
                 }
@@ -637,9 +647,16 @@ class Forge3DElevFull {
                 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;
+                        console.log("2", fragProxy.frag.position.z)
+                        // debugger
+                        let start = 0;
+                        if (node === 13704 && start == 0) {
+                            // 改變感測器熱點位置
+                            this.sensorObjs && this.sensorObjs[0]?.changePos(13706, fragProxy.frag.position.z);
+                            start = 1;
+                        }
                         fragProxy.frag.updateAnimTransform()
                     })
                     elevObj.obj.viewer.impl.sceneUpdated(true);
@@ -677,229 +694,211 @@ class Forge3DElevFull {
     }
 }
 
+
+
 /**
- * 取得資料庫溫度感測器
- * 1. baja 取得溫度感測器改變顏色
- * 2. 參數取得要移動到的電梯位置
- * */
+* 取得資料庫溫度感測器
+* 1. baja 取得溫度感測器改變顏色
+* 2. 參數取得要移動到的電梯位置
+* */
 class Forge3DSensor {
-  constructor(option = {}) {
-    this.allSensorDevList = [];  //溫度調節器設備清單
-    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.#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.#init();
+    }
 
-  #init = async function () {
-    // 系統大類、小類固定
-    this.ordPath.system_tag = this.sysMainTag;
-    this.ordPath.name_tag = this.sysSubTag;
-    this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization");
-    //this.getSensorDevList();
-  }
-  // 取得Sensor設備列表
-  getSensorDevList = function () {
-    let url = baseApiUrl + "/api/Device/GetDeviceList";
-    let sendData = {
-      sub_system_tag: this.ordPath.name_tag, // M12
-      building_tag: this.ordPath.building_tag, //B1
-    };
-    objSendData.Data = sendData;
-    ytAjax = new YourTeam.Ajax(url, objSendData, (res) => {
-      if (!res || res.code != "0000" || !res.data) {
+    #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.addHotPoint();
+        this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35)
+        this.subSensorDevice();
 
-      } else {
-        $.each(res.data, (index, floObj) => {
-          $.each(floObj.device_list, (index2, devObj) => {
-            this.allSensorDevList.push(devObj);
-          })
-        })
-        let devices = this.allSensorDevList.map((x) => {
-          if (x.device_number.includes("ME_M12")) {
-            return {
-              roomDbId: 12879, // Bank2 電梯
-              id: x.device_number,
-              position: isJSON(x.device_coordinate_3d)
-                ? JSON.parse(x.device_coordinate_3d)
-                : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-              sensorTypes: ["temperature", "humidity"],
-            };
-          }
+
+    }
+
+    // 建立熱點
+    async addHotPoint() {
+
+        // this.dataVizExtn.removeAllViewables()
+        await this.registerHotPoint()
+        this.subSensorDevice();
+        // console.log("2",this.dataVizExtn)
+    }
+
+    async registerHotPoint(color = "") {
+        var viewer = this.viewer;
+        const viewableType = this.DataVizCore.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
+        const spriteColor = new THREE.Color(0x000000);
+        // const highlightedColor = new THREE.Color(0xe0e0ff);
+        let spriteIcon = "/file/img/forge/sensor_circle.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteIcon = "/img/forge/sensor_circle.svg";
+        }
+        const style = new this.DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
+
+        const viewableData = new this.DataVizCore.ViewableData();
+        viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
+        // console.log(this.curDevice, [this.curDevice])
+
+        [this.curDevice].forEach((myData, index) => {
+            // console.log(myData)
+            const dbId = myData.forge_dbid;
+            const myPosition = myData.position;
+            const viewable = new this.DataVizCore.SpriteViewable(myPosition, style, dbId);
+            myData._dbId = dbId;
+            viewableData.addViewable(viewable);
         });
-        //this.heatMap = new ADHeatMaps({
-        //  devices
-        //});
-        //this.subSensorDevice();
-      }
-    }, null, "POST").send();
-  }
+        // console.log(viewableData)
+        await viewableData.finish();
+        this.dataVizExtn.addViewables(viewableData);
+        // console.log("1",this.dataVizExtn)
+        viewer.addEventListener(this.DataVizCore.MOUSE_CLICK, onSpriteClicked.bind(this));// SPRITE_SELECTED
 
-  // 訂閱sensor設備
-  subSensorDevice = function () {
-    let myBaja = new subscriptionDevices();
-    let ordPath = this.ordPath;
+        // ---------------- 熱點點擊事件 --------------------
+        function onSpriteClicked(event) {
+            event.hasStopped = true;
+            const dbIdStart = 10;
+            // debugger
+            if (event != undefined && event != null) {
+                if (event.dbId >= dbIdStart) {
+                    changeColorForHotspot(event.dbId);
+                    changeScaleForHotspot(event.dbId, false);
+                    let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
+                    moveViewToDevice(myData.forge_dbid);//移動視角至該設備
 
-    myBaja.setSubscribeDevicesByBql(ordPath);
-    myBaja.setSubscribeDevicesCallBack((data) => {
-      this.bajaChaCallback ? this.bajaChaCallback(data) : "";
-      if (this.allSensorDevList.length == 0) {
-        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)
+                    $(selector).trigger("autodesk:click:sprite", { event, myData });
+                } else {
+                    $(selector).trigger("autodesk:clickOut:sprite", { event });
+                }
+            }
+        }
+    }
 
-      let matchDevice = this.allSensorDevList.find(
-        (x) =>
-          x.device_number == data.device_number ||
-          x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1",
-      );
 
-      if (!matchDevice) {
-        return;
-      }
-      //將訂閱值塞入 subDeviceData
-      if (
-        this.subDeviceData.findIndex(d => d.device_number == matchDevice.device_number) == -1
-      ) {
-        let obj = {};
-        obj.device_number = matchDevice.device_number;
-        obj.dbid = matchDevice.forge_dbid;
-        this.subDeviceData.push(obj);
-      }
-      let subData = this.subDeviceData.find(
-        (x) => x.device_number == matchDevice.device_number || x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
-      );
+    // 改變熱點位置
+    changePos(dbId, positionZ) {
+        this.dataVizExtn.invalidateViewables(dbId, (viewable) => {
+            // console.log(viewable._position)
+            const z = viewable._position.z + positionZ
+            const newPos = { ...viewable._position, z }
+            return {
+                // Move the viewable to a new location.
+                position: newPos
+            };
+        });
+    }
 
-      if (subData) {
-        subData[data.point_name] = data.value;
-      }
-      //let norDevPoiName = matchDevice.device_normal_point_name;
-      //let cloDevPoiName = matchDevice.device_close_point_name || "";
-      //let errDevPoiName = matchDevice.device_error_point_name;
-      if (data.point_name == "Temp" || data.point_name == "TEMP") {
-        this.heatMap?.changeTemp(
-          matchDevice.device_number,
-          !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
-        );
-        let devIdx = this.allSensorDevList.findIndex(
-          (x) =>
-            x.device_number == data.device_number_full ||
-            x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1",
-        );
-        this.allSensorDevList[devIdx]._temp = !isNaN(parseInt(data.value))
-          ? parseInt(data.value)
-          : 0;
-      }
-    });
+    // 熱點 更換顏色---環境感知器
+    changeColorForSensorHotspot(dbId, temp) {
+        const temps = [new THREE.Color(0x00009c), new THREE.Color(0xffff31), new THREE.Color(0xff8c00), new THREE.Color(0xff0000)]
+        let index = Math.floor(temp / 10) - 1 || 0;
+        if (index > 3) {
+            index = 3
+        }
+        const viewablesToUpdate = dbId;
+        const color = temps[index]
+        // debugger
+        // this.registerHotPoint(color)
+        //   const _this=this
+        //   setInterval(() => {
+        //     _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
+        //         return { color: color };
+        //     });
+        //     // sceneUpdated(true)
+        // }, 1000);
+        this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
 
-    //myBaja.setSubscribeDeviceEndCallBack((data) => {
-    //  if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
-    //    // 顯示溫度條
-    //    console.log(showHeat)
-    //    showHeat("[name=forgeHeatBar]");
-    //  }
-    //});
-  }
+            return {
+                color: color,
+            };
+        });
+        // debugger
+        // console.log("3", this.dataVizExtn)
+    }
 
-  // 位置呈現
-  changeSensorPos = async function () {
-    this.dataVizExtn.removeAllViewables();
-    const DataVizCore = Autodesk.DataVisualization.Core;
-    const viewableType = DataVizCore.ViewableType.SPRITE;
-    const spriteColor = new THREE.Color(0x000000);
-    let spriteIcon = "/file/img/forge/hotspot.svg";
-    if (location.href.indexOf("localhost:5966") != -1) {
-      spriteIcon = "/img/forge/hotspot.svg";
-    } const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
-    const viewableData = new DataVizCore.ViewableData();
-    viewableData.spriteSize = 30
+    // 訂閱sensor設備
+    subSensorDevice() {
+        // console.log("sensor 訂閱")
+        // require(["baja!"], (baja)=>{
+        //   const sub = new baja.subscriber();
+        //   sub.attach("changed",function(){
+        //     console.log(this)
+        //   })
+        //   baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ME/M12/U1F/NA/TH/N1/TEMP").get({subscribe: sub})
+        // })
 
-    // test 1    
-    //   const myDataList = [{ position: { x: 0, y: 0, z: this.floorHeight } }];
-    //   myDataList.forEach((myData, index) => {
-    //     const position = myData.position;
-    //     const viewable = new DataVizCore.SpriteViewable(position, style, 12982);
-    //     console.log(viewable)
-    //     viewableData.addViewable(viewable);
-    //   });
-    //   await viewableData.finish();
-    //   this.dataVizExtn.addViewables(viewableData);
-    //   console.log(this.floorHeight,this.dataVizExtn)
+        let myBaja = new subscriptionDevices();
+        myBaja.setSubscribeDevicesByBql(this.ordPath);
 
-    // test 2
-    const myDataList = [{ position: { x: 0, y: 0, z: 0 } }];
-    myDataList.forEach((myData, index) => {
-      const position = myData.position;
-      const viewable = new DataVizCore.SpriteViewable(position, style, 12982);
-      viewableData.addViewable(viewable);
-    });
-    await viewableData.finish();
-    this.dataVizExtn.addViewables(viewableData);
-    let spritesToUpdate = this.dataVizExtn.viewableData.viewables.map((v) => v.dbId);
-    this.dataVizExtn.invalidateViewables(spritesToUpdate, (viewable) => {
-      return {
-        // Move the viewable to a new location.
-        position: { x: 0, y: 0, z: 100 },
+        myBaja.setSubscribeDevicesCallBack((data) => {
+            // console.log(data)
+            this.bajaChaCallback ? this.bajaChaCallback(data) : "";
+            if (this.curDevice == null) {
+                return false;
+            }
 
-      };
-    });
-    console.log(this.floorHeight, this.dataVizExtn)
-    console.log("site")
-    //let nodeIds = this.allSensorDevList
-    //  .filter((x) => !isNaN(parseInt(x.forge_dbid)))
-    //  .map((x) => {
-    //    return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
-    //  });
-    //console.log("sensor", nodeIds)
-    //$.each(nodeIds, (idx, node) => {
-    //  let options = {
-    //    element: $(this.selector),
-    //    viewer: this.viewer,
-    //    nodeId: node,
-    //    floorHeight: this.floorHeight ?? [],
-    //    inited: function () {
+            data.device_number = data.device_number_full; // "TPE_B1_ME_M12_U1F_NA_TH_N1" (forge TPE_B1_ME_M12_R2F_NA_TH_N1)
 
-    //    }
-    //  }
-    //  let elevator3DObj = new elevator3D(options);
-    //  elevator3DObj.init(() => {
+            //將訂閱值塞入 subDeviceData
+            if (
+                this.subDeviceData.findIndex(d => d.device_number == this.curDevice.id) == -1
+            ) {
+                let obj = {};
+                obj.device_number = this.curDevice.id;
+                obj.dbid = this.curDevice.roomDbId;
+                this.subDeviceData.push(obj);
+            }
+            let subData = this.subDeviceData.find(
+                (x) => x.device_number == this.curDevice.id || x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
+            );
 
-    //    const frags = this.viewer.model.getFragmentList();
-    //    let scale = new THREE.Vector3();
-    //    let rotation = new THREE.Quaternion();
-    //    let translation = new THREE.Vector3();
-    //    frags.getAnimTransform(node.nodeId, scale, rotation, translation);
-    //    console.log(frags.getAnimTransform(node.nodeId, scale, rotation, translation))
-    //    translation.z = this.floorHeight;
-    //    frags.updateAnimTransform(node.nodeId, scale, rotation, translation);
-    //    console.log(frags, frags.getAnimTransform(node.nodeId, scale, rotation, translation))
-    //    // let frags = elevator3DObj.fragProxys.filter(x => x.nodeId == node);
-    //    // console.log("sensor",elevator3DObj, frags)
+            if (subData) {
+                subData[data.point_name] = data.value;
+            }
+            //let norDevPoiName = matchDevice.device_normal_point_name;
+            //let cloDevPoiName = matchDevice.device_close_point_name || "";
+            //let errDevPoiName = matchDevice.device_error_point_name;
 
-    //    // let fragProxy = this.viewer.impl.getFragmentProxy(this.viewer.model, node.nodeId)
-    //    // fragProxy.position = new THREE.Vector3(0, 0, 0)
-    //    // console.log(node,fragProxy)
-    //    // fragProxy.position.z = this.floorHeight
-    //    // fragProxy.updateAnimTransform()
+            if (data.point_name == "Temp" || data.point_name == "TEMP") {
+                this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
+                // this.heatMap?.changeTemp(
+                //   this.curDevice.id,
+                //   !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
+                // );
+                this.curDevice.temp = this.tempVal;
+                // console.log(data.value, parseInt(data.value))
+                this.changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
+                // changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
+            }
+        });
 
-    //    //   frags.forEach((fragProxy) => {
-    //    //     console.log("sensor", this)
-    //    //     console.log("elev2")
-    //    //     fragProxy.frag.position.z = this.floorHeight
-    //    //     console.log("sensor", fragProxy, fragProxy.frag)
-    //    //     fragProxy.frag.updateAnimTransform()
-    //    //   })
+        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)
+    }
 
-    //    this.viewer.impl.sceneUpdated(true)
-    //  })
-    //})
-  }
 }
\ No newline at end of file