From f662d22a4f83372a1f7b2411b8bc3e36b0c2e5a4 Mon Sep 17 00:00:00 2001 From: wanli Date: Thu, 29 Dec 2022 18:19:22 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend][=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7?= =?UTF-8?q?]=20=E6=A8=93=E5=B1=A4=20=E5=8A=A0=E5=85=A5=E5=89=96=E9=9D=A2?= =?UTF-8?q?=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_sysMonAll.html | 4 +- Frontend/_sysMonFloor.html | 51 ++++- Frontend/js/forge/forgemodel.js | 325 +++++++++++++++++++++++++++----- 3 files changed, 332 insertions(+), 48 deletions(-) diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index c15d475..e51b9d5 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -256,8 +256,8 @@ function show3DModel(urn) { launchViewerForHotspot(urn, (viewer, nodeIds) => { - - },"[name=forgeViewer]"); + loadHeatmap(); + }, "[name=forgeViewer]"); } function getHotspotPoint(callback = null) { diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html index 87686c0..737dc97 100644 --- a/Frontend/_sysMonFloor.html +++ b/Frontend/_sysMonFloor.html @@ -30,9 +30,12 @@ var allDeviceRowData = []; //所有設備原始資料 var global_emergency_alarm_device_number = []; var zoomToggle = 3; + var urn_all = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk"; $(function () { - show3DModel(); + getHotspotPoint(() => { + show3DModel(urn_all); + }); initChart(); getFloData(); subDevice(); @@ -864,9 +867,49 @@ } } - function show3DModel() { - launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxQjFGXzIwMjJfMTJfMDQubndj", (viewer, nodeIds) => { - + function show3DModel(urn) { + launchViewerForHotspot(urn, (viewer, nodeIds) => { + getLevelsData(); + loadHeatmapForFloor(); }); } + + function getHotspotPoint(callback = null) { + let url = baseApiUrl + "/api/GetDevForCor"; + let sendData = { + "device_area_tag": pageAct.AreaTag, + "device_building_tag": pageAct.buiTag, + "device_system_tag": pageAct.sysMainTag, + "device_name_tag": pageAct.sysSubTag, + "device_floor_tag": pageAct.floTag, + }; + objSendData.Data = sendData; + ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { + if (!res || res.code != "0000" || !res.data) { + + } else { + debugger + let myDataList = []; + $.each(res.data, (idx, data) => { + let item = {}; + item.position = {}; + if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) { + item.position = JSON.parse(x.device_coordinate_3d); + } + $.extend(item, data); + myDataList.push(item); + }) + + console.log("1", myDataList) + setHotspotPoint(myDataList); + callback ? callback() : ""; + } + }, null, "POST").send(); + + } + + function setHotspotPoint(myDataList = []) { + console.log(myDataList) + getHopspotPoint(myDataList); + } \ No newline at end of file diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index b957b65..252142d 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -5,6 +5,7 @@ var targetFloorZ; var elevatorSpeed; var selector = "#forgeViewer"; let myDataList; +var levels;//剖面用 function launchViewer(urn, callback, _selector = "#forgeViewer") { selector = _selector; @@ -479,62 +480,76 @@ function getForgeToken(callback) { } async function loadHeatmaps(model) { - const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization"); - // Given a model loaded from Forge - const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model); - const devices = [ { - id: "Oficina 6", - name: "Oficina-", - position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 }, + id: "Oficina 5", + position: { x: 6.98, y: -19.00, z: 16.86 }, + sensorTypes: ["temperature", "humidity"] + }, + { + id: "Oficina 4", + position: { x: 35.85, y: -2.24, z: 16.86 }, + sensorTypes: ["temperature", "humidity"] + }, + { + id: "Oficina 3", + position: { x: 6.98, y: -2.24, z: 16.86 }, sensorTypes: ["temperature", "humidity"] } ]; - var offset = Autodesk.viewer.model.getGlobalOffset(); - removeOffset(devices[0], offset) + // 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); + }); // Generates `SurfaceShadingData` after assigning each device to a room. + const heatmapData = new SurfaceShadingData(); + heatmapData.addChild(shadingNode); + heatmapData.initialize(model); - const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices); + // Setup surface shading + await dataVizExtn.setupSurfaceShading(model, heatmapData); - // Use the resulting shading data to generate heatmap from. - await dataVizExtn.setupSurfaceShading(model, shadingData); + dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]); - // 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); + function getSensorValue(device, sensorType) { + return sensorVals[parseInt(device.id.slice(-1)) - 1]; } - // This value can also be a room instead of a floor - const floorName = "01 - Entry Level"; - dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue); -} + 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); +} function setTransparentBuilding() { //allDbIdsStr.forEach((dbId) => { @@ -746,4 +761,230 @@ function closeHotspotModal() { //modal.style.display = "none"; } -//------------------ end -------------------------------- \ No newline at end of file +//------------------ end -------------------------------- + +//------------------ 熱圖 ------------------------------- +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"); + + //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; + + const levels2 = aecData.levels; + levels2.sort((a, b) => b.elevation - a.elevation); + return levels2; +} + +async function getLevelsData() { + const data = await this.getRemoteLevels(); + this.levels = data; + profile(); +} + +function getCutPlaneParam(idx, n) { + if (idx < 0 || !n) return; + + const level = this.levels[idx]; + if (!level) return; + + const model = this.viewer.model; + const globalOffset = model.getData().globalOffset; + const units = model.getUnitString(); + const elevRaw = Autodesk.Viewing.Private.convertUnits('ft', units, 1, level.elevation); + + let d = elevRaw - globalOffset.z - 0.5; + if (n == 1) + d = -1 * d; + + return new THREE.Vector4(0, 0, n, d); +} + +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