[Frontend][儀錶板] 文字調整 | [系統監控] 熱圖程序串接 | 熱圖物件化調整

Frontend/_dashboard.html

@@ -24,7 +24,7 @@
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                 <span id="yesUseElec">--</span>
-                                <small class="m-0 l-h-n">昨日用電量</small>
+                                <small class="m-0 l-h-n">昨日用電量 kWH</small>
                             </h3>
                         </div>
                         <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15  mb-n1 mr-n4" style="font-size: 6rem;"></i>
@@ -75,7 +75,7 @@
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                 <span id="insPower">--</span>
-                                <small class="m-0 l-h-n">即時功率</small>
+                                <small class="m-0 l-h-n">即時功率 kW</small>
                             </h3>
                         </div>
                         <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
@@ -86,7 +86,7 @@
                         <div class="">
                             <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                 <span id="insPowerPer">--</span>
-                                <small class="m-0 l-h-n">即時契約容量占比 kWH</small>
+                                <small class="m-0 l-h-n">即時契約容量占比 %</small>
                             </h3>
                         </div>
                         <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
@@ -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 () {

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]");
     }

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
+    //x: -17.33, y: 51.03, z: -2.52
-    const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
-
     const devices = [
         {
-            id: "Oficina 6",
+            id: "Oficina 5",
-            name: "Oficina-",
+            //name: "Oficina-",
-            position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 },
+            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();
+    // Initialize sensor values
-    removeOffset(devices[0], offset)
+    let sensorVals = [];
-
+    for (let i = 0; i < devices.length; i++) {
-    // Generates `SurfaceShadingData` after assigning each device to a room.
+        sensorVals[i] = Math.random();
-
-    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);
     }
 
-    // This value can also be a room instead of a floor
+    const roofDbIds = [];
-    const floorName = "01 - Entry Level";
+
-    dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
+    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() {