[Frontend][系統監控] 平面圖 熱點程序建置 | 3D 熱點 focus 程序建置 | 2D平面圖 設備圓點 打開 popover 程序建置 | 2D平面圖圓點與3D熱點互動程序建置 | 2D 平面圖剖面熱圖程序建置 | 總攬 3D 熱圖串接資料庫程序建置 | 3D 熱圖 串接訂閱程序建置

Frontend/_sysMonAll.html

@@ -36,7 +36,7 @@
 
 <script>
     var allDevList = [];  //全設備清單
-    var devicePointList = [];
+    var heatMap = null;
 
     $(function () {
         getBuildMenu((arr, data) => {
@@ -108,10 +108,14 @@
                 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") {
-                    
+                    console.log(data)
+                    heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
+                    let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
+                    allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
                 }
+                
                 if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
                     //顯示正常燈號
                     $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
@@ -205,7 +209,7 @@
                     subDevice();
                 }
                 $("#floDevList").append(strHtml);
-                initPopover(pageAct.sysMainTag == "LT" ? "light" : null);
+                initPopover();
             }
         }, null, "POST").send();
     }
@@ -259,32 +263,24 @@
 
     function show3DModel(urn) {
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
-            let devices = [{
+            let devices = allDevList.map(x => {
-                roomDbId: 7567,
+                return {
-                id: "Oficina 5",
+                    roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
-                //name: "Oficina-",
+                    id: x.device_number,
-                position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                    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"]
+                    sensorTypes: ["temperature", "humidity"]
-            }, {
+                }
-                roomDbId: 7567,
+            })
-                id: "Oficina 6",
+         
-                //name: "Oficina-",
-                position: { x: 4.35, y: -4.81, z: 11.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-                sensorTypes: ["temperature", "humidity"]
-            }, {
-                roomDbId: 7567,
-                id: "Oficina 7",
-                //name: "Oficina-",
-                position: { x: 6.35, y: -4.81, z: 16.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
-                sensorTypes: ["temperature", "humidity"]
-            }];
             let option = {
                 devices: devices,
             }
-            let heatMap = new ADHeatMaps(option);
+            
-
+            heatMap = new ADHeatMaps(option);
-            heatMap.onComplete = function () {
+            heatMap.onComplete = () => {
-                heatMap.changeTemp(7567, 32);
+                $.each(allDevList, (idx,dev) => {
+                    heatMap.changeTemp(dev.device_number, dev._temp || 0);
+                })
             }
             
         },"[name=forgeViewer]");
@@ -327,25 +323,17 @@
         console.log(myDataList)
         getHopspotPoint(myDataList);
     }
-
+    
     var parentEle = "";
     onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
-        let position = {};
+        forgeUnFocusAll();
-        position.tpLeft = obj.event.target.toolController.lastClickX;
+        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
-        position.tpTop = obj.event.target.toolController.lastClickY;
-        position.tpOffHeight = 24;
-        parentEle = creDiv();
         let devObj = obj.myData;
-        parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
-        parentEle.data("id", devObj.device_guid);
-        parentEle.data("number", devObj.device_number);
-        parentEle.data("dbId", devObj._dbId);
         let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
-        parentEle.data("name", name);
+        devObj.full_name = name;
+        parentEle = crePosPopover(position, devObj);
         
-        initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, parentEle);
         $(parentEle).click();
-       
     })
 
     onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
@@ -358,7 +346,15 @@
             let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
             $(ele).data("dbId", dbid);
         })
-       
+    })
+    
+    onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
+        forgeUnFocusAll();
     })
 
+    function forgeUnFocusAll() {
+        $("#floDevList a[name=devItem]").each((idx, ele) => {
+            controlFocusHotspot($(ele).data("dbId"), false);
+        })
+    }
 </script>

Frontend/_sysMonFloor.html

@@ -22,9 +22,12 @@
     </div>
 </div>
 
+
+<!--<script src="lib/echarts.min.js"></script>-->
 <script>
     var floChart = null;
     var currentData = [];
+    var heatMap = null;
     var allDeviceRowData = []; //所有設備原始資料
     var global_emergency_alarm_device_number = [];
     var zoomToggle = 3;
@@ -140,7 +143,6 @@
             }
             return item;
         });
-        console.log(currentData)
         if (currentData == null || currentData.length == 0) {
             this.currentData = [];
         }
@@ -176,7 +178,6 @@
                 // animationDurationUpdate: 1500,
                 tooltip: {
                     formatter: function (params) {
-                        console.log("23", params)
                         if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
                             return `名稱：${params.data.device_node_full_name}<br>
                                     Guid：${params.data.device_node_guid}`
@@ -314,24 +315,41 @@
             }
             //myBaja.setSubscribeDevicesByBql(ordPath);
             //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
+            let parentEle = null;
+            floChart.on('click', function (params) {
+                forgeUnFocusAll();
+                chartUnFocusAll();
+                if (params.componentType == "series") {
+                    let data = params.data;
+                    let position = [params.event.event.clientX, params.event.event.clientY];
+                    data._dbId = data._dbId ?? null;
+                    parentEle = crePosPopover(position, data);
+
+                    $(parentEle).click();
+                } else {
+                    $(parentEle).YTTooltip("hide");
+                }
+            })
 
-            console.log(floChart)
             floChart.getZr().on('click', function (params) {
-                console.log("click", params);
+                /*console.log("click", params);*/
                 var pixelPoint = [params.offsetX, params.offsetY];
                 var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
-                console.log(dataPoint);
+                
+                if (!(params?.target?.shape?.symbolType == "circle")) {
+                    $(parentEle).YTTooltip("hide");
+                }
 
 
 
-                temp_device_on_floor_map = [{
+                //temp_device_on_floor_map = [{
-                    device_guid: selected_temp_device.device_guid,
+                //    device_guid: selected_temp_device.device_guid,
-                    device_full_name: selected_temp_device.device_full_name,
+                //    device_full_name: selected_temp_device.device_full_name,
-                    device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
+                //    device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
-                    device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
+                //    device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
-                    status: selected_temp_device.status,
+                //    status: selected_temp_device.status,
-                    value: dataPoint
+                //    value: dataPoint
-                }];
+                //}];
 
 
 
@@ -341,6 +359,23 @@
                 // floChart.setOption(option);
             });
 
+
+            onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
+                let option = floChart.getOption();
+
+                option.series.forEach(function (series) {
+                    series.data.forEach(function (point) {
+                        let dbid = obj.myDataList.filter(x => x.device_number == point.device_number)[0]?._dbId;
+                        point._dbId = dbid;
+                        currentData.forEach(function (cData) { 
+                            if (cData.device_guid == point.device_guid) {
+                                cData._dbId = dbid;
+                            }
+                        })
+                    });
+                });
+                floChart.setOption(option)
+            })
             //floChart.on('selectchanged', function (params) {
 
             //    console.log("selectchanged", params);
@@ -404,8 +439,7 @@
             }
             floMyBaja.setSubscribeDevicesByBql(ordPath);
             floMyBaja.setSubscribeDevicesCallBack(function (data) {
-                console.log(data)
+                let matchDevice = currentData.filter(x => x.device_number == data.device_number_full)[0];
-                let matchDevice = allDeviceRowData.filter(x => x.device_number == data.device_number_full)[0];
                 if (!matchDevice) {
                     return false;
                 }
@@ -413,6 +447,12 @@
                 let cloDevPoiName = matchDevice.device_close_point_name;
                 let errDevPoiName = matchDevice.device_error_point_name;
 
+                if (data.point_name == "Temp") {
+                    heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
+                    let devIdx = currentData.findIndex(x => x.device_number == data.device_number_full);
+                    currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
+                }
+
                 if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
                     //顯示正常燈號
                     $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
@@ -605,7 +645,14 @@
             //         return [];
             //     }
             // });
-
+            let option = floChart.getOption();
+            temp.forEach(function (tempData) {
+                let oldTarObj = option.series[0]?.data?.filter(x => x.device_number == tempData.device_number)[0];
+                if (oldTarObj) {
+                    tempData = Object.assign(tempData, oldTarObj)
+                }
+            })
+            
             temp.map(function (item) {
 
                 var obj = {
@@ -618,14 +665,16 @@
                     status: item.status,
                     value: item.value,
                     deviceItems: item.deviceItems,
-                    deviceURL: item.deviceURL
+                    deviceURL: item.deviceURL,
+                    _dbId: item._dbId ?? null
                 }
 
                 obj.itemStyle = { 'color': item.device_color };
 
                 res.push(obj);
             });
-
+            
+           
             return res;
         }
 
@@ -830,7 +879,7 @@
             floChart.setOption({
                 series: [{
                     symbolOffset: [0, 0],
-                    data: scatter_symbol_convertData(currentData) //正常、關閉(圓點)
+                    data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
                 }, {
                     data: [] //正常、關閉(icon)
                 }, {
@@ -864,15 +913,69 @@
         }
     }
 
+    function getNextFloor(floGuid = null) {
+        
+        let url = baseApiUrl + "/api/Device/GetNextFloor";
+        objSendData.Data = { floor_guid: floGuid }
+        let result = "";
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                result = res.data?.full_name;
+            }
+        }, null, "POST").send();
+
+        return result;
+    }
+
     // show 3D 模型
     function show3DModel(urn) {
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
-            getLevelsData("R2F", "RF");//剖面的下方樓層，剖面的上方樓層
+            let nextFloor = getNextFloor(pageAct.floGuid);
-            var roomsArr = [10481, 10479];//七樓的兩間房間dbid
+            let curFloTag = pageAct.floTag;
-            toLoadHeatmap(roomsArr);
+            
+            if (!nextFloor) {
+                toast_warning("超出樓層範圍");
+                return;
+            }
+
+            if (curFloTag?.startsWith("U")) {
+                curFloTag = curFloTag.split("U")[1];
+            }
+            if (nextFloor?.startsWith("U")) {
+                nextFloor = nextFloor.split("U")[1];
+            }
+
+            getLevelsData(curFloTag, nextFloor);
+            setHeatMap();
         });
     }
 
+    function setHeatMap() {
+        console.log("currentData", currentData)
+        let devices = currentData.map(x => {
+            return {
+                roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
+                id: x.device_number,
+                position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
+                sensorTypes: ["temperature", "humidity"]
+            }
+        })
+
+        let option = {
+            devices: devices,
+        }
+
+        heatMap = new ADHeatMaps(option);
+        heatMap.onComplete = () => {
+            
+            $.each(currentData, (idx, dev) => {
+                heatMap.changeTemp(dev.device_number, dev._temp || 0);
+            })
+        }
+    }
+
     function getHotspotPoint(callback = null) {
         let url = baseApiUrl + "/api/GetDevForCor";
         let sendData = {
@@ -887,7 +990,6 @@
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
-                debugger
                 let myDataList = [];
                 $.each(res.data, (idx, data) => {
                     let item = {};
@@ -899,7 +1001,6 @@
                     myDataList.push(item);
                 })
                 
-                console.log("1", myDataList)
                 setHotspotPoint(myDataList);
                 callback ? callback() : "";
             }
@@ -908,7 +1009,62 @@
     }
 
     function setHotspotPoint(myDataList = []) {
-        console.log(myDataList)
         getHopspotPoint(myDataList);
     }
+
+    onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
+        forgeUnFocusAll();
+        chartUnFocusAll();
+        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
+        let devObj = obj.myData;
+        let name = currentData.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
+        devObj.full_name = name;
+        parentEle = crePosPopover(position, devObj);
+        $(parentEle).click();
+        
+        let option = floChart.getOption();
+        option.series.forEach(function (series) {
+            series.data.forEach(function (point) {
+                if (point.device_guid == devObj.device_guid) {
+                    point.symbolSize = 50;
+                }
+            });
+        });
+        floChart.setOption(option);
+        
+    })
+
+    onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
+        $(parentEle).YTTooltip("hide");
+    })
+
+    function forgeUnFocusAll() {
+        $.each(currentData, (idx, cData) => {
+            controlFocusHotspot(cData._dbId, false);
+        })
+    }
+    
+    function chartUnFocusAll() {
+        let option = floChart.getOption();
+        option.series.forEach(function (series) {
+            series.data.forEach(function (point) {
+                point.symbolSize = 10;
+            });
+        });
+        floChart.setOption(option);
+    }
+
+    // 解除 series 聚焦 
+    function chartUnFocus(ele) {
+        let devGuid = $(ele).data("id");
+        let option = floChart.getOption();
+        option.series.forEach(function (series) {
+            series.data.forEach(function (point) {
+                if (point.device_guid == devGuid) {
+                    point.symbolSize = 10;
+                }
+            });
+        });
+        floChart.setOption(option);
+    }
 </script>

Frontend/_systemMonitor.html

@@ -25,15 +25,16 @@
     })
 
     onEvent("yt:tab:change", "[name=floBtn]", function () {
-        debugger
         $.each(tolSubList, (idx, sub) => {
-                        sub.unsubscribeAll();
+            sub.unsubscribeAll();
-                        sub.detach();
+            sub.detach();
-                    })
+        })
-                    tolSubList=[];
+        tolSubList=[];
         pageAct.floTag = $(this).data("id");
+        pageAct.floGuid = $(this).data("guid");
         if ($(this).data("id") == "all") {
             pageAct.floTag = null;
+            pageAct.floGuid = null;
             $("#js-page-content").load("_sysMonAll.html", loadCallback);
         } else {
             $("#js-page-content").load("_sysMonFloor.html", loadCallback);
@@ -55,7 +56,7 @@
             } else {
                 let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="all">總覽</button>`;
                 $.each(res.data, (index, floObj) => {
-                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
+                    strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" data-guid="${floObj.floor_guid}" class="btn btn-secondary waves-effect waves-themed btn-sm-2" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
                 })
                 $("#floList").html(strHtml);
                 floList = res.data;

Frontend/index.html

@@ -2043,6 +2043,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         }
         // 執行初步 Loading
         var loadEle = pageLoading();
+        var errRecTable = null, opeRecTable = null;
 
         /**
         * 頁面 Loading 建立
@@ -2363,7 +2364,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }
 
             // Card 呈現初始化
-            function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
+            function initPopover(type = null, extOption = {}, selector = "[name=devItem]") {
+                if (type == null && pageAct.sysMainTag == "LT") {
+                    type = "light";
+                }
+
                 $(selector).each((index, ele) => {
                     let devNum = $(ele).data("number"); //設備編號
                     let devGuid = $(ele).data("id"); //guid
@@ -2409,13 +2414,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             //loadErrRecTable();
                             loadErr($(oriEle).data("number"));
                             $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
-                            changeColorForHotspot($(oriEle).data("dbId"));
+                            if ($(oriEle).data("dbId")) { 
-                            changeScaleForHotspot($(oriEle).data("dbId"));
+                                controlFocusHotspot($(oriEle).data("dbId"));
-                            typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
+                            }
+                            typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
                         },
                         onHide: function (tooltipEle, oriEle) {
-                            changeColorForHotspot($(oriEle).data("dbId"),false);
+                            controlFocusHotspot($(oriEle).data("dbId"),false);
-                            changeScaleForHotspot($(oriEle).data("dbId"),false);
+                            // sysMonFloor Echart 解除 focus
+                            typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
                         }
                     };
 
@@ -2427,7 +2434,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             // Card - 運維紀錄 Table
             function loadOpeRecTable(devGuid) {
-
+                if (opeRecTable) {
+                    opeRecTable.destroy();
+                }
                 let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
                 let tag = "#opeRecTable";
 
@@ -2461,7 +2470,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 ];
 
-                let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
+                opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
             }
 
             function loadLightSchTable(devGuid) {
@@ -2525,12 +2534,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
             }
 
+            function controlFocusHotspot(dbId,open = true) {
+                changeColorForHotspot(dbId, open);
+                changeScaleForHotspot(dbId, open);
+            }
+
             // Baja 取得異常紀錄
             function loadErr(allPath) {
                 if (allPath != undefined && allPath != null) {
-                    let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
+                  
-                    let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
+                    getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
-                    getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
                 }
                 else {
                     console.log("no device");
@@ -2539,6 +2552,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
             // Card - 異常紀錄 Table
             function callbackForErr(result) {
+                if (errRecTable) {
+                    errRecTable.destroy();
+                }
+
                 let tag = "#errRecTable";
                 let datas;
 
@@ -2607,6 +2624,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 })
             }
 
+            function crePosPopover(position, obj) {
+                let _position = {};
+                _position.tpLeft = position[0];
+                _position.tpTop = position[1];
+                _position.tpOffHeight = 24;
+                let parentEle = creDiv();
+                parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
+                parentEle.data("id", obj.device_guid);
+                parentEle.data("number", obj.device_number);
+                parentEle.data("dbId", obj._dbId);
+                parentEle.data("name", obj.full_name);
+                initPopover(null, _position, parentEle);
+
+                return parentEle;
+            }
+
             //==============================================================================
             //                       ↑  系統監控 - 共用 Function ↑
             //==============================================================================

Frontend/js/forge/forgemodel.js

@@ -1,9 +1,10 @@
 var viewer;
+
 let fragProxy;
 var targetFloorZ;
 var elevatorSpeed;
 var selector = "#forgeViewer";
-var myDataList;//設備list
+let myDataList;
 var levels;//剖面用
 var lowerIdx;//剖面的下方樓層
 var upperIdx;//剖面的上方樓層
@@ -27,6 +28,31 @@ function launchViewer(urn, callback, _selector = "#forgeViewer") {
             callback ? callback(viewer, nodeIds) : "";
         })
 
+
+        //test 
+        // for (let i = 0; i < urn.length; i++) {
+        //     Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
+        //         let viewables = doc.getRoot().getDefaultGeometry();
+        //         let model = await viewer.loadDocumentNode(doc, viewables, {
+        //             preserveView: false,
+        //             keepCurrentModels: true,
+        //             placementTransform: (new THREE.Matrix4()).setPosition(urn[i]["xform"]),
+        //             keepCurrentModels: true,
+        //             globalOffset: {
+        //                 x: 0,
+        //                 y: 0,
+        //                 z: 0
+        //             }
+        //         });
+
+        //         await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
+        //     });
+        // }
+
+        //loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
+
+
+
     });
 }
 
@@ -247,6 +273,13 @@ class elevator3D {
             hideColor(nodeId);
             return;
         }
+        //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
+
+        //fragProxy.position = fragPosition;
+
+        //fragProxy.updateAnimTransform();
+
+        //viewer.impl.sceneUpdated(true);
     }
 }
 
@@ -254,7 +287,14 @@ function onDocumentLoadSuccess(doc, eleOption) {
     var viewables = doc.getRoot().getDefaultGeometry();
     viewer.loadDocumentNode(doc, viewables).then(i => {
         // documented loaded, any action?
+
     });
+    // viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
+    //     var currSelection = viewer.getSelection();
+    //     var domElem = document.getElementById('id_printer');
+    //     domElem.innerText = currSelection[0];
+    // });
+
     viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
         let instanceTree = viewer.model.getData().instanceTree;
         console.log(instanceTree.nodeAccess)
@@ -264,6 +304,8 @@ function onDocumentLoadSuccess(doc, eleOption) {
         });
 
     });
+
+
 }
 
 // 輔助函數，使用 Promise 封裝 viewer.getProperties 函數
@@ -303,7 +345,7 @@ async function getNodeIdByDbIds(checkName = "【電梯】", callback = null) {
     let elements = await viewerGetProperties(targetNodeIds,"【tag_id】");
 
     // 從 elements 中篩選出包含 【tag_id】 屬性的元素
-    elements = elements.filter(x => x.properties.findIndex(y => y.displayName == "【tag_id】" && y.displayValue == checkName) != -1);
+    elements = elements.filter(x => x.properties.findIndex(y => y.displayName == "【tag_id】" && y.displayValue.indexOf(checkName) != -1) != -1);
 
     if (elements) {
         hasElement = true;
@@ -351,11 +393,14 @@ function setElevatorSpeed(speed) { //0.01 ~ 1
 }
 
 function movElevator() {
+
+
     let tree = viewer.model.getData().instanceTree;
     let nodeId = 10952;
     let fragProxyZ = 0;
     var movStatus = 0; // 0=no 1=up 2=down
 
+
     if (fragProxy.position.z > targetFloorZ) {
         movStatus = 2
     }
@@ -370,6 +415,7 @@ function movElevator() {
     tree.enumNodeFragments(nodeId, function (frag) {
         fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
         fragProxy.getAnimTransform();
+        //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
         if (movStatus == 2) {
             fragProxy.position.z -= elevatorSpeed;
         }
@@ -393,6 +439,15 @@ function movElevator() {
             requestAnimationFrame(movElevator);
         }
     }
+
+
+    //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26
+
+    //fragProxy.position = fragPosition;
+
+    //fragProxy.updateAnimTransform();
+
+    //viewer.impl.sceneUpdated(true);
 }
 
 function getAllDbIds(viewer) {
@@ -440,7 +495,7 @@ class ADHeatMaps {
     constructor(option = {}) {
         this.devices = option.devices ?? [];
         this.checkNodeString = "【ROOM】";
-        this.tempVal = 0;
+        this.tempVals = [];
         this.roomDbIds = [];  //房間 dbId
         this.model = null;
         this.dataVizExtn = null;
@@ -479,6 +534,7 @@ class ADHeatMaps {
                     device.sensorTypes
                 );
                 shadingNode.addPoint(shadingPoint);
+                device.temp = 0;
             });
 
             heatmapData.addChild(shadingNode);
@@ -495,34 +551,59 @@ class ADHeatMaps {
 
         this.dataVizExtn = dataVizExtn;
 
-        this.changeTemp(this.tempVal);
+        $.each(this.roomDbIds.map(x => x.nodeId), (idx, rDbid) => {
+            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
+        })
+
+        /*this.changeTemp(this.tempVal);*/
         this.onComplete ? this.onComplete() : "";
     }
 
+    getSensorValue = function(device, sensorType) {
+        let dev = this.devices.filter(x => x.id == device.id)[0];
+        return dev.temp / 40;
+    }
+
     // 改變溫度
     changeTemp = function (devId, temp) {
         this.tempVal = temp;
         // 透過 device id 取得 roomDbId
-        /*const rDbid = this.roomDbIds.filter(x => x.)[0]?.roomDbId;*/
+        this.devices.forEach((dev) => {
-        if (rDbid != null) {
+            if (devId == dev.id) {
-            // 取得新的溫度值
+                dev.temp = temp;
-            let getSensorValue = (device, sensorType) => {
-                return this.tempVal / 40;
             }
-            // 對 "Room Panel" 做表面顏色的渲染，並使用新的溫度值
+        })
-            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", getSensorValue);
+       
-        }
+        this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
+
+        //if (rDbid != null) {
+        //    // 取得新的溫度值
+        //    let getSensorValue = (device, sensorType) => {
+        //        return this.tempVal / 40;
+        //    }
+        //    // 對 "Room Panel" 做表面顏色的渲染，並使用新的溫度值
+        //    this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", getSensorValue);
+        //}
     }
 }
 
 
 function setTransparentBuilding() {
+    //allDbIdsStr.forEach((dbId) => {
+    //    setTransparency(dbId, 0.2);
+    //})
+
     for (var i = 0; i < allDbIdsStr.length; i++) {
         setTransparency(parseInt(allDbIdsStr[i]), 0.2);
     }
+
 }
 
 function recoverTransparentBuilding() {
+    //allDbIdsStr.forEach((dbId) => {
+    //    setTransparency(dbId, 1);
+    //})
+
     for (var i = 0; i < allDbIdsStr.length; i++) {
         setTransparency(parseInt(allDbIdsStr[i]), 1);
     }
@@ -575,6 +656,16 @@ function hideColor(nodeId) {//顏色改成透明
 
 }
 
+//------------------ 紀錄熱點座標 ---------------
+function getHopspotPoint(data) {
+    //var av = Autodesk.Viewing;
+    myDataList = data;
+    //viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
+    //    once: true,
+    //});
+}
+//-------------------- end ----------------------
+
 //------------------- 加入熱點 -----------------
 async function addHotPoint(data) {
     var viewer = data.target;
@@ -604,7 +695,7 @@ async function addHotPoint(data) {
 
     myDataList.forEach((myData, index) => {
         const dbId = 10 + index;
-        const myPosition = JSON.parse(myData.device_coordinate_3d);
+        const myPosition = myData.position;
         const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
         myData._dbId = dbId;
         viewableData.addViewable(viewable);
@@ -620,6 +711,7 @@ async function addHotPoint(data) {
         if (event != undefined && event != null) {
             if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19
                 console.log(`Sprite clicked: ${event.dbId}`);
+                openHotspotModal();
                 for (let i = dbIdStart; i <= dbIdEnd; i++) {
                     changeColorForHotspot(i, false);
                     changeScaleForHotspot(i, false);
@@ -646,6 +738,7 @@ async function addHotPoint(data) {
     //        if (dbIds.length > 0) {
     //            // 處理已選取元件的邏輯
     //            $(selector).trigger("autodesk:click:sprite", event);
+    //            //openHotspotModal();
     //            console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
     //        } else {
     //            // 處理沒有選取元件的邏輯
@@ -687,16 +780,52 @@ async function changeScaleForHotspot(dbId, type = true) {
         };
     });
 }
-//------------------------------ end ----------------------------------
 
-//------------------------------ 熱圖 ---------------------------------
+//------------------- end --------------
-async function loadHeatmaps(model, roomsArr) {
+
+//----------------- 開關熱點小視窗 ----------------------
+function openHotspotModal() {
+    //var modal = document.getElementById("hotspotModal");
+    //modal.style.display = "block";
+    //$("#pills-register-tab").removeClass("active");
+    //$("#pills-alarm-tab").removeClass("active");
+    //$("#pills-operation-tab").removeClass("active");
+    //$("#pills-login-tab").tab("show");
+}
+
+function closeHotspotModal() {
+    //var modal = document.getElementById("hotspotModal");
+    //modal.style.display = "none";
+
+}
+//------------------ end --------------------------------
+
+//------------------ 熱圖 -------------------------------
+async function loadHeatmaps(model) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    var devices = [];
 
-    myDataList.forEach((myData, index) => {
+    //取三個空調設備的位置打點
-        devices.push({ id: index, position: JSON.parse(myData.device_coordinate_3d), sensorTypes: ["temperature", "humidity"] });
+    const devices = [
-    });
+        {
+            id: "Oficina 5",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 4",
+            //name: "Oficina-",
+            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 3",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        }
+    ];
+    //冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
 
     // Initialize sensor values
     let sensorVals = [];
@@ -705,9 +834,7 @@ async function loadHeatmaps(model, roomsArr) {
     }
 
     const roomDbIds = [];
-    for (var i = 0; i < roomsArr.length; i++) {
+    roomDbIds.push(7567);
-        roomDbIds.push(roomsArr[i]);
-    }
 
     const {
         SurfaceShadingData,
@@ -732,10 +859,11 @@ async function loadHeatmaps(model, roomsArr) {
 
     // Setup surface shading
     await dataVizExtn.setupSurfaceShading(model, heatmapData);
+
     dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
 
     function getSensorValue(device, sensorType) {
-        return sensorVals[parseInt(device.id)];
+        return sensorVals[parseInt(device.id.slice(-1)) - 1];
     }
 
     dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
@@ -748,9 +876,97 @@ async function loadHeatmaps(model, roomsArr) {
         dataVizExtn.updateSurfaceShading(getSensorValue);
     }, 2000);
 }
-//------------------------------ end ----------------------------------
+//------------------ end --------------------------------
+async function loadHeatmapsForFloor(model) {
 
-//--------------------------- -- 剖面 ---------------------------------
+    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
+
+    //x: -17.33, y: 51.03, z: -2.52
+    const devices = [
+        {
+            id: "Oficina 5",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 4",
+            //name: "Oficina-",
+            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        },
+        {
+            id: "Oficina 3",
+            //name: "Oficina-",
+            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
+            sensorTypes: ["temperature", "humidity"]
+        }
+    ];
+
+    // Initialize sensor values
+    let sensorVals = [];
+    for (let i = 0; i < devices.length; i++) {
+        sensorVals[i] = Math.random();
+    }
+
+    const roomDbIds = [];
+
+    roomDbIds.push(7567);
+
+    const {
+        SurfaceShadingData,
+        SurfaceShadingPoint,
+        SurfaceShadingNode,
+    } = Autodesk.DataVisualization.Core;
+
+    const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
+
+    devices.forEach((device) => {
+        const shadingPoint = new SurfaceShadingPoint(
+            device.id,
+            device.position,
+            device.sensorTypes
+        );
+        shadingNode.addPoint(shadingPoint);
+    });
+
+    const heatmapData = new SurfaceShadingData();
+    heatmapData.addChild(shadingNode);
+    heatmapData.initialize(model);
+
+    // Setup surface shading
+    await dataVizExtn.setupSurfaceShading(model, heatmapData);
+
+    //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
+    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
+
+    function getSensorValue(device, sensorType) {
+        return sensorVals[parseInt(device.id.slice(-1)) - 1];
+    }
+
+    dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
+
+    setInterval(() => {
+        // Modify sensor values.
+        for (let i = 0; i < devices.length; i++) {
+            sensorVals[i] = Math.random();
+        }
+        dataVizExtn.updateSurfaceShading(getSensorValue);
+    }, 2000);
+}
+
+//
+async function loadHeatmap() {
+    const model = viewer.model;
+    loadHeatmaps(model);
+}
+
+async function loadHeatmapForFloor() {
+    const model = viewer.model;
+    loadHeatmapsForFloor(model);
+}
+
+//------------ 剖面 ----------------------
 async function getRemoteLevels() {
     const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
     if (!aecData.levels) return null;
@@ -760,6 +976,21 @@ async function getRemoteLevels() {
     return levels2;
 }
 
+async function getLevelsData(lowerFloor, upperFloor) {
+
+    const data = await this.getRemoteLevels();
+    for (var i = 0; i < data.length; i++) {
+        if ((data[i].name).indexOf(lowerFloor) != -1) {
+            lowerIdx = i;
+        }
+        if ((data[i].name).indexOf(upperFloor) != -1) {
+            upperIdx = i;
+        }
+    }
+    this.levels = data;
+    profile();
+}
+
 function getCutPlaneParam(idx, n) {
     if (idx < 0 || !n) return;
 
@@ -779,38 +1010,10 @@ function getCutPlaneParam(idx, n) {
 }
 
 function profile() {
+    //const upperIdx = 6;
     const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
+    //const lowerIdx = 7;
     const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
     this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
 }
-//------------------------------ end ----------------------------------
+//----------------- end -----------------------------------------------
-
-
-//======================== 外部呼叫function ===========================
-//紀錄熱點座標
-function getHopspotPoint(data) {
-    myDataList = data;
-}
-
-//呼叫載入熱圖
-async function toLoadHeatmap(roomArr) {
-    const model = viewer.model;
-    loadHeatmaps(model, roomArr);
-}
-
-//取得levels，執行剖面
-async function getLevelsData(lowerFloor, upperFloor) {
-
-    const data = await this.getRemoteLevels();
-    for (var i = 0; i < data.length; i++) {
-        if ((data[i].name).indexOf(lowerFloor) != -1) {
-            lowerIdx = i;
-        }
-        if ((data[i].name).indexOf(upperFloor) != -1) {
-            upperIdx = i;
-        }
-    }
-    this.levels = data;
-    profile();
-}
-//============================= end ===================================

Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js

@@ -92,6 +92,7 @@ $.fn.YTTooltip = function (option) {
                     })
                 }
                 $("body").append(clone);
+                $(obj.ele).trigger("yt:tooltip:show");
                 //push 已顯示紀錄
                 obj.isShowArr.push(ranId);
                 obj.tooltipDiv = clone;
@@ -125,6 +126,7 @@ $.fn.YTTooltip = function (option) {
                 }
                 setTimeout(function () { 
                     obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";
+                    $(obj.ele).trigger("yt:tooltip:shown");
                 }, 10)
                 event();
             } else {
@@ -158,6 +160,8 @@ $.fn.YTTooltip = function (option) {
             let _obj = $(obj.ele)[0]._ytTooltip;
             onHide ? onHide($("#yt_tooltip_" + tooId), _obj.ele, _obj) : "";
 
+            $(obj.ele).trigger("yt:tooltip:hide");
+
             $("#yt_tooltip_" + tooId).remove();
             obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
             //setTimeout(function () {