From 1eb730b15d995bd4ea6b3f9eb2d053970757a75c Mon Sep 17 00:00:00 2001 From: wanli Date: Sat, 31 Dec 2022 15:24:02 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend]=20=E7=86=B1=E5=9C=96input=20?= =?UTF-8?q?=E5=8A=A0=E5=85=A5=E6=88=BF=E9=96=93dbid=EF=BC=8C=E7=86=B1?= =?UTF-8?q?=E5=9C=96=E6=89=93=E9=BB=9E:=20=E4=BD=BF=E7=94=A8=E8=A9=B2?= =?UTF-8?q?=E5=B1=A4=E7=B3=BB=E7=B5=B1=E8=A8=AD=E5=82=99=E7=9A=84=E5=BA=A7?= =?UTF-8?q?=E6=A8=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_sysMonFloor.html | 5 +- Frontend/js/forge/forgemodel.js | 278 ++++++-------------------------- 2 files changed, 49 insertions(+), 234 deletions(-) diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html index 3335f16..56cf959 100644 --- a/Frontend/_sysMonFloor.html +++ b/Frontend/_sysMonFloor.html @@ -867,8 +867,9 @@ // show 3D 模型 function show3DModel(urn) { launchViewerForHotspot(urn, (viewer, nodeIds) => { - getLevelsData("R2F","RF") - loadHeatmapForFloor(); + getLevelsData("R2F", "RF");//剖面的下方樓層，剖面的上方樓層 + var roomsArr = [10481, 10479];//七樓的兩間房間dbid + toLoadHeatmap(roomsArr); }); } diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index 32794db..f35fbf8 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -1,10 +1,9 @@ var viewer; - let fragProxy; var targetFloorZ; var elevatorSpeed; var selector = "#forgeViewer"; -let myDataList; +var myDataList;//設備list var levels;//剖面用 var lowerIdx;//剖面的下方樓層 var upperIdx;//剖面的上方樓層 @@ -28,31 +27,6 @@ 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 - - - }); } @@ -273,13 +247,6 @@ class elevator3D { hideColor(nodeId); return; } - //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26 - - //fragProxy.position = fragPosition; - - //fragProxy.updateAnimTransform(); - - //viewer.impl.sceneUpdated(true); } } @@ -287,14 +254,7 @@ 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) @@ -304,8 +264,6 @@ function onDocumentLoadSuccess(doc, eleOption) { }); }); - - } // 輔助函數，使用 Promise 封裝 viewer.getProperties 函數 @@ -393,14 +351,11 @@ 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 } @@ -415,7 +370,6 @@ 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; } @@ -439,15 +393,6 @@ 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) { @@ -572,21 +517,12 @@ class ADHeatMaps { 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); } @@ -639,16 +575,6 @@ 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; @@ -678,7 +604,7 @@ async function addHotPoint(data) { myDataList.forEach((myData, index) => { const dbId = 10 + index; - const myPosition = myData.position; + const myPosition = JSON.parse(myData.device_coordinate_3d); const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId); myData._dbId = dbId; viewableData.addViewable(viewable); @@ -694,7 +620,6 @@ 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); @@ -721,7 +646,6 @@ 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 { // // 處理沒有選取元件的邏輯 @@ -763,52 +687,16 @@ async function changeScaleForHotspot(dbId, type = true) { }; }); } +//------------------------------ end ---------------------------------- -//------------------- end -------------- - -//----------------- 開關熱點小視窗 ---------------------- -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) { +//------------------------------ 熱圖 --------------------------------- +async function loadHeatmaps(model, roomsArr) { const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); + var devices = []; - //取三個空調設備的位置打點 - 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) + myDataList.forEach((myData, index) => { + devices.push({ id: index, position: JSON.parse(myData.device_coordinate_3d), sensorTypes: ["temperature", "humidity"] }); + }); // Initialize sensor values let sensorVals = []; @@ -817,7 +705,9 @@ async function loadHeatmaps(model) { } const roomDbIds = []; - roomDbIds.push(7567); + for (var i = 0; i < roomsArr.length; i++) { + roomDbIds.push(roomsArr[i]); + } const { SurfaceShadingData, @@ -842,11 +732,10 @@ async function loadHeatmaps(model) { // Setup surface shading await dataVizExtn.setupSurfaceShading(model, heatmapData); - dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]); function getSensorValue(device, sensorType) { - return sensorVals[parseInt(device.id.slice(-1)) - 1]; + return sensorVals[parseInt(device.id)]; } dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue); @@ -859,97 +748,9 @@ async function loadHeatmaps(model) { dataVizExtn.updateSurfaceShading(getSensorValue); }, 2000); } -//------------------ end -------------------------------- -async function loadHeatmapsForFloor(model) { +//------------------------------ end ---------------------------------- - 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; @@ -959,21 +760,6 @@ 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; @@ -993,10 +779,38 @@ 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 ----------------------------------------------- \ No newline at end of file +//------------------------------ 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 =================================== \ No newline at end of file