From 16d97320b0bf365a30af26e9f6e2981198a2fe95 Mon Sep 17 00:00:00 2001 From: dev01 Date: Thu, 29 Dec 2022 18:44:09 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend][=E5=84=80=E9=8C=B6=E6=9D=BF]=20?= =?UTF-8?q?=E6=96=87=E5=AD=97=E8=AA=BF=E6=95=B4=20|=20[=E7=B3=BB=E7=B5=B1?= =?UTF-8?q?=E7=9B=A3=E6=8E=A7]=20=E7=86=B1=E5=9C=96=E7=A8=8B=E5=BA=8F?= =?UTF-8?q?=E4=B8=B2=E6=8E=A5=20|=20=E7=86=B1=E5=9C=96=E7=89=A9=E4=BB=B6?= =?UTF-8?q?=E5=8C=96=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_dashboard.html | 8 +- Frontend/_sysMonAll.html | 19 +++ Frontend/js/forge/forgemodel.js | 281 +++++++++++++++++++++++++++----- 3 files changed, 260 insertions(+), 48 deletions(-) diff --git a/Frontend/_dashboard.html b/Frontend/_dashboard.html index 0ac082f..0cbeb9d 100644 --- a/Frontend/_dashboard.html +++ b/Frontend/_dashboard.html @@ -24,7 +24,7 @@

-- - 昨日用電量 + 昨日用電量 kWH

@@ -75,7 +75,7 @@

-- - 即時功率 + 即時功率 kW

@@ -86,7 +86,7 @@

-- - 即時契約容量占比 kWH + 即時契約容量占比 %

@@ -368,7 +368,7 @@ if (data.point_name == "P") { let value = parseFloat(data.value).roundDecimal(2); $("#insPower").text(value); - $("#insPowerPer").text((value / 4).roundDecimal(2) + "%"); + $("#insPowerPer").text((value / 4).roundDecimal(2)); } }) myBaja.setSubscribeElectricmeterEndCallBack(function () { diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index c15d475..b08ed6b 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -109,6 +109,9 @@ let cloDevPoiName = matchDevice.device_close_point_name; let errDevPoiName = matchDevice.device_error_point_name; + if (data.point_name == "Temp") { + + } 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"); @@ -256,6 +259,22 @@ function show3DModel(urn) { launchViewerForHotspot(urn, (viewer, nodeIds) => { + let devices = [{ + 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"] + }]; + let option = { + devices:devices, + } + let heatMap = new ADHeatMaps(option); + let temp = 10; + heatMap.onComplete = function () { + debugger + heatMap.changeTemp(32); + + } },"[name=forgeViewer]"); } diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index b957b65..198bc0e 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -478,62 +478,255 @@ function getForgeToken(callback) { //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599); } +//------------------ 熱圖 ------------------------------- +class ADHeatMaps { + constructor(option = {}) { + this.devices = option.devices || []; + this.tempVals = []; + this.roomDbIds = [8181, 8183, 8185]; + this.model = null; + this.dataVizExtn = null; + this.onComplete = option.onComplete ?? null; + this.init(); + } + + init = async function () { + // 載入 Autodesk Viewer 的資料視覺化擴充功能 + const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); + // 儲存 Viewer 的模型 + this.model = viewer.model; + const { + SurfaceShadingData, + SurfaceShadingPoint, + SurfaceShadingNode, + } = Autodesk.DataVisualization.Core; + + // 建立一個名為 "Room Panel" 的 SurfaceShadingNode 物件，並將房間的模型給傳入 + const shadingNode = new SurfaceShadingNode("Room Panel", this.roomDbIds); + + // 遍歷每個設備，建立一個 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); + // 將資料初始化並顯示在模型上 + heatmapData.initialize(this.model); + + // 對模型做表面顏色的渲染 + await dataVizExtn.setupSurfaceShading(this.model, heatmapData); + + // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色 + dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0xff0000]); + + this.dataVizExtn = dataVizExtn; + + this.changeTemp(0); + this.onComplete ? this.onComplete() : ""; + } + + // 改變溫度 + changeTemp = function (temp) { + // 取得新的溫度值 + function getSensorValue(device, sensorType) { + return temp / 40; + } + // 對 "Room Panel" 做表面顏色的渲染，並使用新的溫度值 + this.dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue); + } +} + async function loadHeatmaps(model) { + const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); + + //取三個空調設備的位置打點 + const devices = [ + //{ + // id: "Oficina 5", + // position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5 + // sensorTypes: ["temperature", "humidity"] + //}, + //{ + // id: "Oficina 4", + // position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 + // sensorTypes: ["temperature", "humidity"] + //}, + //{ + // id: "Oficina 3", + // position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 + // sensorTypes: ["temperature", "humidity"] + //} + { + 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"] + }, + //{ + // id: "Oficina 4", + // //name: "Oficina-", + // position: { x: 37.03, y: -4.81, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88) + // sensorTypes: ["temperature", "humidity"] + //}, + //{ + // id: "Oficina 3", + // //name: "Oficina-", + // position: { x: 2.83, y: -22.60, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88) + // 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 = []; + for (let i = 0; i < devices.length; i++) { + sensorVals[i] = Math.random(); + } + + const roomDbIds = []; + roomDbIds.push(8181);//房間的dbid 七樓的 Room3-5 792 + roomDbIds.push(8183); + roomDbIds.push(8185); + + 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("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); +} +//------------------ end -------------------------------- +async function loadHeatmapsForFloor(model) { const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); - // Given a model loaded from Forge - const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model); - + //x: -17.33, y: 51.03, z: -2.52 const devices = [ { - id: "Oficina 6", - name: "Oficina-", - position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 }, + id: "Oficina 5", + //name: "Oficina-", + position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88 + sensorTypes: ["temperature", "humidity"] + }, + { + id: "Oficina 4", + //name: "Oficina-", + position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88) + sensorTypes: ["temperature", "humidity"] + }, + { + id: "Oficina 3", + //name: "Oficina-", + position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88) sensorTypes: ["temperature", "humidity"] } ]; + //冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86) - var offset = Autodesk.viewer.model.getGlobalOffset(); - removeOffset(devices[0], offset) - - // Generates `SurfaceShadingData` after assigning each device to a room. - - const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices); - - // Use the resulting shading data to generate heatmap from. - await dataVizExtn.setupSurfaceShading(model, shadingData); - - // Register color stops for the heatmap. Along with the normalized sensor value - // in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final - // heatmap color based on these specified colors. - const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]; - - // Set heatmap colors for temperature - const sensorType = "temperature"; - dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors); - - // Function that provides sensor value in the range of [0.0, 1.0] - - function getSensorValue(surfaceShadingPoint, sensorType) { - // The `SurfaceShadingPoint.id` property matches one of the identifiers passed - // to `generateSurfaceShadingData` function. In our case above, this will either - // be "cafeteria-entrace-01" or "cafeteria-exit-01". - const deviceId = surfaceShadingPoint.id; - - // Read the sensor data, along with its possible value range - let sensorValue = readSensorValue(deviceId, sensorType); - const maxSensorValue = getMaxSensorValue(sensorType); - const minSensorValue = getMinSensorValue(sensorType); - - // Normalize sensor value to [0, 1.0] - sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue); - return clamp(sensorValue, 0.0, 1.0); + // Initialize sensor values + let sensorVals = []; + for (let i = 0; i < devices.length; i++) { + sensorVals[i] = Math.random(); } - // This value can also be a room instead of a floor - const floorName = "01 - Entry Level"; - dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue); + const roofDbIds = []; + + roofDbIds.push(792); + + const { + SurfaceShadingData, + SurfaceShadingPoint, + SurfaceShadingNode, + } = Autodesk.DataVisualization.Core; + + const shadingNode = new SurfaceShadingNode("Roof Panel", roofDbIds); + + 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("Roof 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 changeHeatmapTemp(dbId) { + const model = viewer.model; + loadHeatmaps(model); +} +// +async function loadHeatmap() { + const model = viewer.model; + loadHeatmaps(model); +} + +async function loadHeatmapForFloor() { + const model = viewer.model; + loadHeatmapsForFloor(model); } function setTransparentBuilding() {