[Frontend][系統監控] 平面圖 baja 衝突問題解決 | 平面圖剖面框程序串接 | 熱點程序串接 | [全域功能] 熱圖溫度物件化程序調整 | 取得 node Id by tag id 程序優化 | [FrontendWebApi] GetForgeNodeName 取得資料庫 variable 設定 forge 依據字串程序建置

Frontend/_sysMonAll.html

@@ -260,20 +260,31 @@
     function show3DModel(urn) {
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
             let devices = [{
+                roomDbId: 7567,
                 id: "Oficina 5",
                 //name: "Oficina-",
                 position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
                 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,
+                devices: devices,
             }
             let heatMap = new ADHeatMaps(option);
-            let temp = 10;
+
             heatMap.onComplete = function () {
-                debugger
+                heatMap.changeTemp(7567, 32);
-                heatMap.changeTemp(32);
-                
             }
             
         },"[name=forgeViewer]");

Frontend/_sysMonFloor.html

@@ -22,20 +22,16 @@
     </div>
 </div>
 
-
-<script src="lib/echarts.min.js"></script>
 <script>
     var floChart = null;
     var currentData = [];
     var allDeviceRowData = []; //所有設備原始資料
     var global_emergency_alarm_device_number = [];
     var zoomToggle = 3;
-    var urn_all = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk";
-    var urn_test = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk";
 
     $(function () {
         getHotspotPoint(() => {
-            show3DModel(urn_test);
+            show3DModel(pageAct.urn);
         });
         initChart();
         getFloData();
@@ -868,9 +864,10 @@
         }
     }
 
+    // show 3D 模型
     function show3DModel(urn) {
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
-            getLevelsData("7F", "8F");//剖面的下方樓層，剖面的上方樓層
+            getLevelsData("R2F","RF")
             loadHeatmapForFloor();
         });
     }
@@ -894,13 +891,13 @@
                 $.each(res.data, (idx, data) => {
                     let item = {};
                     item.position = {};
-                    if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) {
+                    if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
-                        item.position = JSON.parse(x.device_coordinate_3d);
+                        item.position = JSON.parse(data.device_coordinate_3d);
                     }
                     $.extend(item, data);
                     myDataList.push(item);
                 })
-
+                
                 console.log("1", myDataList)
                 setHotspotPoint(myDataList);
                 callback ? callback() : "";

Frontend/js/forge/forgemodel.js

@@ -299,77 +299,86 @@ function onDocumentLoadSuccess(doc, eleOption) {
         let instanceTree = viewer.model.getData().instanceTree;
         console.log(instanceTree.nodeAccess)
         allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
-        getNodeIdByDbIds(allDbIdsStr, (nodeIds) => {
+        getNodeIdByDbIds("【電梯】", (nodeIds) => {
             $(selector).trigger("autodesk:loaded", nodeIds);
         });
 
-
-
     });
 
 
 }
 
-function getNodeIdByDbIds(allDbIdsStr, callback = null) {
+// 輔助函數，使用 Promise 封裝 viewer.getProperties 函數
-    let curDbId = 0;
+function viewerGetProperties(dbIds,attributeName = null) {
-    let tagId = 0;
+    // 在這裡，我們使用 viewer.getProperties 函數的成功回調函數作為 resolve 函數，
-    let _parentId = 0;
+    // 並使用 viewer.getProperties 函數的失敗回調函數作為 resolve 函數的參數
-    let _childId = 0;
+    // 這樣，當 viewer.getProperties 函數成功時，Promise 會傳回 properties 物件；
-    let evelMap = new Map();
+    // 當 viewer.getProperties 函數失敗時，Promise 會傳回 null。
-    let finTimeout = null;
+    return new Promise((resolve, reject) => {
-    let fin2Timeout = null; 
+        let option = {};
-    let hasElec = false;
+        if (attributeName != null) {
-
+            option.propFilter = [attributeName]; // 限制只返回指定的屬性
-    allDbIdsStr.forEach((dbId) => {
+        }
-        curDbId = parseInt(dbId);
+        viewer.model.getBulkProperties2(dbIds, option,    // 取得指定元素的屬性信息
-        viewer.getProperties(curDbId, function (e) {
+        function (elements) {
-            e.properties.forEach(function (item, idx) {
+            resolve(elements);   // 成功時傳回 elements 物件
-                if (item.displayName == "tag_id" && e.name.indexOf("【電梯】") != -1) {
-                    hasElec = true
-                    tagId = e.dbId;
-                    viewer.getProperties(tagId, function (e2) {
-                        e2.properties.forEach(function (item2, idx2) {
-                            if (item2.displayName == "child") {
-                                _parentId = item2.displayValue;
-
-                                viewer.getProperties(_parentId, function (e3) {
-                                    //var childIdArr = new Array();
-                                    /*childIdArr.push(_parentId)*/
-                                    //e3.properties.forEach(function (item3, idx3) {
-                                    //    if (item3.displayName == "child") {
-                                    //        _childId = item3.displayValue;
-                                    //        childIdArr.push(_childId);
-                                    //    }
-                                    //});
-                                    evelMap.set(item.displayValue, e3.dbId)
-                                    console.log("map: " + evelMap);
-                                    clearTimeout(finTimeout)
-                                    finTimeout = setTimeout(() => {
-                                        if (hasElec == true) {
-                                            callback ? callback(evelMap) : "";
-                                        }
-                                    }, 10)
-
-                                })
-
-                            }
-                        });
-                    })
-                } else {
-                    clearTimeout(fin2Timeout)
-                    fin2Timeout = setTimeout(() => {
-                        if (hasElec == false) {
-                            callback ? callback([]) : "";
-                        }
-                    }, 10)
-                }
-            });
         })
+    });
+}
 
+// 輔助函數，使用 Promise 封裝 viewer.search 函數
+async function getNodeIdBySearch(text) {
+    return new Promise((resolve, reject) => {
+        viewer.search(text, (e) => {      // 在 3D 模型中搜索具有指定文本的元素
+            resolve(e);          // 成功時傳回搜索結果
+        }, (e) => {
+            resolve(null);       // 失敗時傳回 null
+        })
     })
+}
+
+// 主函數 - 透過 model 全部 node 取得特定 nodeId 
+async function getNodeIdByDbIds(checkName = "【電梯】", callback = null) {
+    let evelMap = new Map();
+    let hasElement = false; // 設置是否有 【tag_id】的node
+    let targetNodeIds = await getNodeIdBySearch(checkName);
+    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);
+
+    if (elements) {
+        hasElement = true;
+    }
+
+    for (var e of elements) {
+        let name = e.properties[0].displayValue;    // 獲取元素的 【tag_id】 屬性
+        let chiElements = null;
+
+        // 獲取 node 元素的子元素信息
+        targetNodeIds = await viewerGetProperties([e.dbId], "child");
+        // 二次篩選
+        chiElements = targetNodeIds.filter(x => x.properties.findIndex(y => y.displayName == "child") != -1);
+
+         // 獲取子元素的 nodeId
+        targetNodeIds = chiElements.map(x => x.properties[0].displayValue);
+        // 獲取子元素的屬性信息
+        chiElements = await viewerGetProperties(targetNodeIds);
+
+        // 將 node 元素的 【tag_id】 屬性和子元素的 nodeId 加入 Map 中
+        evelMap.set(name, chiElements[0]?.dbId);
+    }
+
+    if (!hasElement) {
+        callback ? callback([]) : "";
+        return [];
+    }
+
+    callback ? callback(evelMap) : "";
     return evelMap;
 }
 
+
 function setElevatorFloor(floor) {
     if (floor == 0)
         targetFloorZ = 0;
@@ -484,9 +493,10 @@ function getForgeToken(callback) {
 //------------------ 熱圖 -------------------------------
 class ADHeatMaps {
     constructor(option = {}) {
-        this.devices = option.devices || [];
+        this.devices = option.devices ?? [];
-        this.tempVals = [];
+        this.checkNodeString = "【ROOM】";
-        this.roomDbIds = [8181, 8183, 8185];
+        this.tempVal = 0;
+        this.roomDbIds = [];  //房間 dbId
         this.model = null;
         this.dataVizExtn = null;
         this.onComplete = option.onComplete ?? null;
@@ -504,21 +514,31 @@ class ADHeatMaps {
             SurfaceShadingNode,
         } = Autodesk.DataVisualization.Core;
 
-        // 建立一個名為 "Room Panel" 的 SurfaceShadingNode 物件，並將房間的模型給傳入
+        let nodeIds = await getNodeIdByDbIds(this.checkNodeString);
-        const shadingNode = new SurfaceShadingNode("Room Panel", this.roomDbIds);
+        nodeIds = Array.from(nodeIds);
+        nodeIds = nodeIds.map(x => { return { room: x[0] , nodeId: x[1]} });
+        this.roomDbIds = nodeIds;
 
-        // 遍歷每個設備，建立一個 SurfaceShadingPoint 物件並加入到 SurfaceShadingNode 中
-        this.devices.forEach((device) => {
-            const shadingPoint = new SurfaceShadingPoint(
-                device.id,
-                device.position,
-                device.sensorTypes
-            );
-            shadingNode.addPoint(shadingPoint);
-        });
         // 建立一個 SurfaceShadingData 物件，並將 SurfaceShadingNode 加入到該物件中
         const heatmapData = new SurfaceShadingData();
-        heatmapData.addChild(shadingNode);
+
+        $.each(this.roomDbIds.map(x => x.nodeId), (idx, rDbid) => {
+            // 建立一個名為 "Room Panel" 的 SurfaceShadingNode 物件，並將房間的模型給傳入，只在該房間呈現溫度
+            const shadingNode = new SurfaceShadingNode("RoomPanel" + rDbid, rDbid);
+
+            // 遍歷每個設備，建立一個 SurfaceShadingPoint 物件並加入到 SurfaceShadingNode 中，透過這些設備渲染溫度
+            this.devices.filter(x => x.roomDbId == rDbid).forEach((device) => {
+                const shadingPoint = new SurfaceShadingPoint(
+                    device.id,
+                    device.position,
+                    device.sensorTypes
+                );
+                shadingNode.addPoint(shadingPoint);
+            });
+
+            heatmapData.addChild(shadingNode);
+        })
+
         // 將資料初始化並顯示在模型上
         heatmapData.initialize(this.model);
 
@@ -530,20 +550,25 @@ class ADHeatMaps {
 
         this.dataVizExtn = dataVizExtn;
 
-        this.changeTemp(0);
+        this.changeTemp(this.tempVal);
-        this.onComplete ? this.onComplete() : ""; 
+        this.onComplete ? this.onComplete() : "";
     }
 
     // 改變溫度
-    changeTemp = function (temp) {
+    changeTemp = function (devId, temp) {
-        // 取得新的溫度值
+        this.tempVal = temp;
-        function getSensorValue(device, sensorType) {
+        // 透過 device id 取得 roomDbId
-            return temp / 40;
+        /*const rDbid = this.roomDbIds.filter(x => x.)[0]?.roomDbId;*/
+        if (rDbid != null) {
+            // 取得新的溫度值
+            let getSensorValue = (device, sensorType) => {
+                return this.tempVal / 40;
+            }
+            // 對 "Room Panel" 做表面顏色的渲染，並使用新的溫度值
+            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", getSensorValue);
         }
-        // 對 "Room Panel" 做表面顏色的渲染，並使用新的溫度值
-        this.dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
     }
-}                         
+}
 
 
 function setTransparentBuilding() {
@@ -642,7 +667,7 @@ async function addHotPoint(data) {
 
     //熱點 點擊事件註冊
     viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
-    
+
     //viewer.addEventListener(
     //    Autodesk.Viewing.SELECTION_CHANGED_EVENT,
     //    onSelectionChange
@@ -670,9 +695,9 @@ async function addHotPoint(data) {
             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++){
+                for (let i = dbIdStart; i <= dbIdEnd; i++) {
-                    changeColorForHotspot(i,false);
+                    changeColorForHotspot(i, false);
-                    changeScaleForHotspot(i,false);
+                    changeScaleForHotspot(i, false);
                 }
                 let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
                 $(selector).trigger("autodesk:click:sprite", { event, myData });
@@ -709,7 +734,7 @@ async function addHotPoint(data) {
 }
 
 // 熱點 更換顏色
-async function changeColorForHotspot(dbId,type = true) {
+async function changeColorForHotspot(dbId, type = true) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     let spriteColorFocus = new THREE.Color(0x00ffe1);
     if (!type) {
@@ -724,10 +749,10 @@ async function changeColorForHotspot(dbId,type = true) {
 }
 
 // 熱點 更換大小
-async function changeScaleForHotspot(dbId,type = true) {
+async function changeScaleForHotspot(dbId, type = true) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     let scale = 1;
-    if(type){
+    if (type) {
         scale = 1.2;
     }
     const viewablesToUpdate = dbId;
@@ -765,19 +790,19 @@ async function loadHeatmaps(model) {
     //取三個空調設備的位置打點
     const devices = [
         {
-            id: "Oficina 3",
+            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 2",
+            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 1",
+            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"]
@@ -839,40 +864,28 @@ async function loadHeatmapsForFloor(model) {
 
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
 
-    
-
     //x: -17.33, y: 51.03, z: -2.52
-    //var devices;
     const devices = [
         {
-            id: "Oficina 3",
+            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 2",
+            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 1",
+            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"]
         }
     ];
 
-    //myDataList.forEach((myData, index) => {
-    //    //const dbId = 10 + index;
-    //    //const myPosition = myData.position;
-    //    //const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
-    //    //myData._dbId = dbId;
-    //    //viewableData.addViewable(viewable);
-    //    devices.push(index, myData.position, ["temperature", "humidity"]);
-    //});
-
     // Initialize sensor values
     let sensorVals = [];
     for (let i = 0; i < devices.length; i++) {
@@ -881,7 +894,7 @@ async function loadHeatmapsForFloor(model) {
 
     const roomDbIds = [];
 
-    roomDbIds.push(11449);
+    roomDbIds.push(7567);
 
     const {
         SurfaceShadingData,
@@ -947,7 +960,7 @@ async function getRemoteLevels() {
 }
 
 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) {

FrontendWebApi/ApiControllers/DeviceManageController.cs

@@ -265,7 +265,7 @@ namespace FrontendWebApi.ApiControllers
 
             try
             {
-                var sqlString = $@"select f.full_name, f.InitMapName as map_name, concat(f.floor_map_name,'.svg') as floor_map_name
+                var sqlString = $@"select f.full_name, f.InitMapName as map_name, concat(f.floor_map_name,'.svg') as floor_map_name, f.urn_3D
                                    from sub_system_floor ssf
                                    join floor f on ssf.floor_tag = f.full_name and ssf.building_tag = f.building_tag and f.deleted = 0
                                    where ssf.deleted = 0 and ssf.building_tag = @building_tag and ssf.sub_system_tag = @sub_system_tag and ssf.floor_tag = ifnull(@floor_tag, ssf.floor_tag);";
@@ -753,5 +753,41 @@ namespace FrontendWebApi.ApiControllers
             }
             return Ok(apiResult);
         }
+
+        /// <summary>
+        /// 取得 forge 模型 node 名稱，透過 node key
+        /// </summary>
+        /// <param name="account"></param>
+        /// <returns></returns>
+        [HttpPost]
+        [Route("api/Device/GetForgeNodeName")]
+        public async Task<ActionResult<List<Variable>>> GetForgeNodeName([FromBody] string forgeNodeKey)
+        {
+            ApiResult<List<Variable>> apiResult = new ApiResult<List<Variable>>();
+            List<Variable> variable = new List<Variable>();
+
+            try
+            {
+                var param = new
+                {
+                    @system_type = forge_node_name_system_type,
+                    @system_key = forgeNodeKey
+                };
+                var v = await backendRepository.GetAllAsync<Variable>($@"SELECT id,system_value FROM variable WHERE system_type = @system_type and system_key = ifnull(@system_key,system_key)"
+                    , param);
+
+                apiResult.Data = v;
+                apiResult.Code = "0000";
+                
+            }
+            catch (Exception exception)
+            {
+                apiResult.Code = "9999";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
+                return Ok(apiResult);
+            }
+            return Ok(apiResult);
+        }
     }
 }

FrontendWebApi/Models/Device.cs

@@ -26,6 +26,7 @@ namespace FrontendWebApi.Models
         public string floor_tag { get; set; }
         public string map_name { get; set; }
         public string floor_map_name { get; set; }
+        public string urn_3D { get; set; }
         public List<DeviceLists> device_list {get; set;}
     }