[React] forge 指定設備顯示

ibms_react/ibms_react.esproj

@@ -4,10 +4,17 @@
     <JavaScriptTestRoot>src\</JavaScriptTestRoot>
     <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
     <!-- Command to run on project build -->
-    <BuildCommand></BuildCommand>
+    <BuildCommand>
+    </BuildCommand>
     <!-- Command to create an optimized build of the project that's ready for publishing -->
     <ProductionBuildCommand>npm run build</ProductionBuildCommand>
     <!-- Folder where production build objects will be placed -->
     <BuildOutputFolder>$(MSBuildProjectDirectory)\build</BuildOutputFolder>
   </PropertyGroup>
+  <ItemGroup>
+    <None Remove="src\utils\baja\bajaUtil.js" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Remove="src\utils\baja\bajaUtil.js" />
+  </ItemGroup>
 </Project>

ibms_react/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

ibms_react/src/App.js

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from "react";
+import { useMemo, useEffect, useState, useCallback } from "react";
 import { Outlet, NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { Container, Nav, Navbar, NavDropdown } from "react-bootstrap";
@@ -49,6 +49,16 @@ function App() {
       dispatch(fetchSysMainSub(selectedBuiTag));
     }
   }, [selectedBuiTag]);
+
+  // 離開頁面就清除所有 cookie
+  //const removeAllCookie = useCallback(() => {
+  //  console.log("關閉分頁時，清除所有 cookie")
+  //  window.addEventListener("beforeunload",() => {
+  //    document.cookie.match(/[^ =;]+(?=\=)/g).forEach(key => {
+  //      document.cookie = `${key}=""; max-age=0`;
+  //    }) })
+  //}, [])
+
   return (
     <div className="App">
       {/* 主選單 */}

ibms_react/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

ibms_react/src/components/forges/ForgeModel.js

@@ -1,17 +1,29 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import * as THREE from "three";
 import { fetchForge, shutdownForge } from "@STORE/forgeSlice";
+import { SubscribeDeviceTempByBaja } from "@UTIL"
 import hotspot from "@ASSET/img/hotspot.svg";
 
-function ForgeModel({ forgeHeight, sprites = [] }) {
+function ForgeModel({ forgeHeight, deviceList = [] }) {
   const dispatch = useDispatch();
   const viewerEl = useRef(null);
   const {
     buildingInfo: { urn_3D },
-    forgeViewer: { viewer, dataVizExtn, DataVizCore },
+    forgeViewer: { viewer, model,dataVizExtn, DataVizCore, structureInfo },
+    device: { selectedDeviceSysTag,selectedDeviceNameTag,tempsensorDevList }
   } = useSelector((store) => store);
 
+  const deviceArray = useMemo(()=> deviceList.map(({ device_number, device_coordinate_3d, room_dbid }) => {
+    return {
+      id: device_number, // An ID to identify this device
+      position: JSON.parse(device_coordinate_3d), // World coordinates of this device
+      roomId: room_dbid,
+      sensorTypes: ["temperature", "humidity"], // The types/properties this device exposes
+      temp: 0,
+    }
+  }), [selectedDeviceNameTag])
+
   // 載入 Forge Viewer
   useEffect(() => {
     if (urn_3D) {
@@ -21,9 +33,9 @@ function ForgeModel({ forgeHeight, sprites = [] }) {
           urn: urn_3D,
         }),
       );
+     };
       return () => {
         dispatch(shutdownForge());
-      };
     }
   }, [urn_3D]);
 
@@ -38,7 +50,7 @@ function ForgeModel({ forgeHeight, sprites = [] }) {
   // 熱點點擊事件
   const onSpriteClicked = (event) => {
     const targetDbIds = [event.dbId];
-    spriteUpdate(event, targetDbIds, { scale: 1.3, color: { r: 1, g: 0, b: 0 } });
+    spriteUpdate(event, targetDbIds, { scale: 1.3, color: { r: 1.0, g: 0, b: 0 } });
     console.log(`Sprite clicked:${targetDbIds}`);
   };
 
@@ -51,10 +63,9 @@ function ForgeModel({ forgeHeight, sprites = [] }) {
 
   // 進入系統監控頁面，出現熱點
   useEffect(() => {
-    if (sprites.length !== 0 && viewer && dataVizExtn) {
+    if (deviceList.length !== 0 && viewer && dataVizExtn) {
-      // const filterSprites = sprites.map;
       dataVizExtn.removeAllViewables();
-      sprites.forEach(async ({ device_coordinate_3d, forge_dbid }, index) => {
+      deviceList.forEach(async ({ device_coordinate_3d, forge_dbid }, index) => {
         const viewableType = DataVizCore.ViewableType.SPRITE;
         const spriteColor = new THREE.Color(0xffffff);
         const spriteIconUrl = hotspot;
@@ -78,12 +89,84 @@ function ForgeModel({ forgeHeight, sprites = [] }) {
     }
 
     return () => {
-      if (sprites.length !== 0 && viewer && dataVizExtn) {
+      if (deviceList.length !== 0 && viewer && dataVizExtn) {
         viewer.removeEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
         viewer.removeEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
       }
     };
-  }, [sprites, dataVizExtn, viewer]);
+  }, [deviceList, dataVizExtn]);
+
+  // 熱圖
+  const getSensorValue = (surfaceShadingPoint) => {
+    // The `SurfaceShadingPoint.id` property matches one of the identifiers passed to `generateSurfaceShadingData` 
+      const { temp } = surfaceShadingPoint;
+      return temp / 40;
+  }
+
+  // 構建熱圖
+  const establishHeatMaps = async (deviceList, dataVizExtn) => {
+    // 不重複的房間值
+    const uniqueRoomIds = [...new Set(deviceArray.map(r => r.roomId))]; // 房間唯一值
+    const {
+      SurfaceShadingData,
+      SurfaceShadingPoint,
+      SurfaceShadingNode,
+    } = DataVizCore;
+    const heatmapData = new SurfaceShadingData();
+    uniqueRoomIds.forEach(room_Id => {
+       // 為每個房間都建立一個 Node
+      const shadingNode = new SurfaceShadingNode("TemperatureSensor", room_Id);
+      deviceArray.forEach(({ id, position, roomId, sensorTypes  }) => {
+      // 設備對應的 roomId 用來判斷要加入哪個 Node
+        if (room_Id === roomId) {
+          const pt = new SurfaceShadingPoint(id, position, sensorTypes);
+          shadingNode.addPoint(pt);
+        }
+
+      })
+      heatmapData.addChild(shadingNode);
+      heatmapData.initialize(viewer.model);
+    })
+    await dataVizExtn.setupSurfaceShading(viewer.model, heatmapData, {
+      type: "PlanarHeatmap",
+      slicingPosition: 0.5, // Slicing happens at the vertical mid-point of the geometry
+      placementPosition: 1.0, // The sliced planar heatmap placed at the base of geometry
+      minOpacity: 0.0, // The default value if this option is omitted
+      maxOpacity: 0.5, // The default value if this option is omitted
+    });
+     // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
+    dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
+
+    if (deviceArray.length !== 0) {
+      const sensorType = "temperature";
+      deviceArray.forEach(({ id }) => {
+        dataVizExtn.renderSurfaceShading(id, sensorType, getSensorValue);
+      })
+    }
+  }
+
+  useEffect(() => {
+  if (deviceList && structureInfo && dataVizExtn && selectedDeviceSysTag == "ME") {
+    // 訂閱有 Temp 的設備
+    deviceList.forEach(({ device_number }) => {
+      SubscribeDeviceTempByBaja(device_number, dispatch)
+    })
+    establishHeatMaps(deviceList, dataVizExtn, structureInfo);
+  }
+    return () => { }
+}, [selectedDeviceNameTag]);
+
+  useEffect(() => {
+    if (tempsensorDevList.length !== 0) {
+      deviceArray.forEach((device) => {
+        if (tempsensorDevList.findIndex(({ device_number }) => device_number === device.id) !== -1) {
+          const newTempObj = tempsensorDevList.find(({ device_number }) => device_number === device.id)
+          device.temp = newTempObj.temp;
+          dataVizExtn.updateSurfaceShading(getSensorValue);
+        }
+      })     
+    }
+  }, [tempsensorDevList])
 
   return <div ref={viewerEl} id="forgeViewer" style={{ height: forgeHeight }}></div>;
 }

ibms_react/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

ibms_react/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

ibms_react/src/pages/Monitor.js

@@ -3,26 +3,49 @@ import { useParams } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { Container, Row, Col, Card, ButtonGroup, Button } from "react-bootstrap";
 import ForgeModel from "@COM/forges/ForgeModel";
-import { fetchSelectedDeviceMenu, fetchSelectedDeviceList, fetchSelectedDevFlTags } from "@STORE";
+import { fetchSelectedDeviceMenu, fetchSelectedDeviceList, fetchSelectedDevFlTags, changeMainSubSys } from "@STORE";
 import defdev from "@ASSET/img/defdev.png";
 function Monitor() {
   const params = useParams().systemId; // main_sub
   const [main_system_tag, sub_system_tag] = params.split("_");
   const dispatch = useDispatch();
   const {
-    buildingInfo: { selectedBuiTag },
     device: { selectedDeviceMenu, selectedDeviceList, selectedDeviceFloorTags },
     system: { mainSub },
+    forgeViewer: { viewer, model },
   } = useSelector((state) => state);
 
   useEffect(() => {
-    if (selectedBuiTag && main_system_tag && sub_system_tag) {
+    if (main_system_tag && sub_system_tag) {
+      dispatch(changeMainSubSys({ main_system_tag, sub_system_tag }))
       dispatch(fetchSelectedDeviceMenu({ main_system_tag, sub_system_tag }));
       dispatch(fetchSelectedDeviceList({ sub_system_tag }));
       dispatch(fetchSelectedDevFlTags({ sub_system_tag }));
     }
     // 載入資料
-  }, [main_system_tag, sub_system_tag, selectedBuiTag]);
+  }, [main_system_tag, sub_system_tag]);
+
+  // 只顯示指定的設備
+  // 取得所有 forge dbid
+  const getAllDbIds = (model) => {
+    const instanceTree = model.getInstanceTree();
+    const allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
+    return allDbIdsStr.map(id => parseInt(id));
+  }
+  useEffect(() => {
+    if (model && selectedDeviceList.length !== 0) {
+      console.log(model)
+      const allDbIds = getAllDbIds(model)
+      viewer.hide(allDbIds)
+      const showDbIds = selectedDeviceList.map((d) => parseInt(d.forge_dbid))
+      let showNodeDbId = [];
+      selectedDeviceList.forEach(({ device_nodes }) => {
+        showNodeDbId = [...showNodeDbId, ...device_nodes.map(({ forge_dbid }) => forge_dbid)]
+      })
+      viewer.show([...showDbIds, ...showNodeDbId])
+    }
+  }, [model, selectedDeviceList])
+
   return (
     <>
       <Container
@@ -60,12 +83,13 @@ function Monitor() {
                   <Col md={1}>
                     <Button className="px-4 py-2 text-white">{floor_tag}</Button>
                   </Col>
-                  <Col className="d-flex justify-content-evenly align-items-center flex-wrap">
+                  <Col className="d-flex justify-content-start align-items-center flex-wrap">
-                    {selectedDeviceList.map(({ device_guid, full_name, forge_dbid }) => (
+                    {selectedDeviceList.map(({ device_guid, full_name, forge_dbid, device_floor }) => (
+                      device_floor === floor_tag ?
                         <Card
                         bg="dark"
                         key={device_guid}
-                        className="mb-3"
+                        className="mb-3 ms-4"
                         style={{ maxWidth: "45%" }}
                       >
                         <Card.Body>
@@ -77,13 +101,14 @@ function Monitor() {
                             <span className="text-secondary me-4">功率 kW</span>
                             <Card.Link
                               className="text-white text-decoration-none"
-                              data-forgeId={forge_dbid}
+                                data-forgeid={forge_dbid}
                             >
                               詳細內容
                             </Card.Link>
                           </Card.Text>
                         </Card.Body>
-                      </Card>
+                        </Card> :
+                      <></>
                     ))}
                   </Col>
                 </Row>
@@ -91,7 +116,7 @@ function Monitor() {
             )}
           </Col>
           <Col md={6}>
-            <ForgeModel forgeHeight="90vh" sprites={selectedDeviceList} />
+            <ForgeModel forgeHeight="90vh" deviceList={ selectedDeviceList } />
           </Col>
         </Row>
       </Container>

ibms_react/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

ibms_react/src/routes/routes.js

@@ -20,8 +20,8 @@ const routes = [
         /(?:(?:^|.*;\s*)JWT-Authorization\s*\=\s*([^;]*).*$)|^.*$/,
         "$1",
       );
-      if (window.location.href.includes("localhost:3000") && !JWT_Authorization) {
         console.log(JWT_Authorization);
+      if (window.location.href.includes("localhost:3000") && !JWT_Authorization) {
         return redirect("/login");
       } else if (window.location.href.includes("http://220.132.206.5") && !JWT_Authorization) {
         const account = await setUserAccountByBaja();

ibms_react/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

ibms_react/src/stores/buildingSlice.js

@@ -16,7 +16,7 @@ const buildingSlice = createSlice({
     buildingList: ["中凌大樓"],
     urn_3D: "",
     selectedBuiArea: "TPE",
-    selectedBuiTag: "",
+    selectedBuiTag: "B1",
     selectedBuiFullName: "",
     errMsg: "",
   },

ibms_react/src/stores/deviceListSlice.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import { deviceBuiMenuBaseUrl, deviceListBaseUrl, deviceFloorBaseUrl } from "@CON";
 import { ajaxRes } from "@UTIL";
 
+// 獲取小類中總覽資料
 export const fetchSelectedDeviceMenu = createAsyncThunk(
   "deviceList/fetchSelectedDeviceMenu",
   async ({ main_system_tag, sub_system_tag }, thunkAPI) => {
@@ -29,14 +30,12 @@ export const fetchSelectedDeviceList = createAsyncThunk(
     if (code !== "0000" || !data) {
       return rejectWithValue(msg);
     } else {
-      console.log(data)
       let results=[];
       data.forEach((p) => {
         p.device_list.forEach((d) => {
           results.push({ ...d, device_floor: p.full_name });
         });
       });
-      console.log("v", [...results]);
       return fulfillWithValue([...results]);
     }
   },
@@ -66,16 +65,30 @@ const deviceListSlice = createSlice({
     selectedDeviceMaster: "", // BANK1
     selectedDeviceLastName: "", // ELEV
     selectedDeviceSerialTag: "", // N1
+    tempsensorDevList: [],
   },
   reducers: {
     getAllDevice: (state, action) => { },
+    getCurDeviceTemp: (state, { payload }) => {
+      const { device_number, temp } = payload;
+      state.tempsensorDevList = state.tempsensorDevList.map((sensor) => {
+        if (sensor.some(s => s.device_number == device_number)) {
+          return { ...sensor, temp }
+        }
+        return sensor
+      })
+    },
+    changeMainSubSys: (state, { payload }) => {
+      const { main_system_tag, sub_system_tag } = payload;
+      state.selectedDeviceSysTag = main_system_tag;
+      state.selectedDeviceNameTag = sub_system_tag;
+    }
   },
   extraReducers: (builder) => {
     builder.addCase(fetchSelectedDeviceMenu.fulfilled, (state, { payload }) => {
       state.selectedDeviceMenu = payload;
     });
     builder.addCase(fetchSelectedDeviceList.fulfilled, (state, { payload }) => {
-      console.log("de", payload);
       state.selectedDeviceList = payload;
     });
 
@@ -88,5 +101,5 @@ const deviceListSlice = createSlice({
 });
 
 const { reducer, actions } = deviceListSlice;
-export const { getAllDevice } = actions;
+export const { getCurDeviceTemp, changeMainSubSys } = actions;
 export default reducer;

ibms_react/src/stores/forgeSlice.js

@@ -6,7 +6,7 @@ export const fetchForge = createAsyncThunk(
   async ({ viewerEl, urn }, { dispatch, fulfillWithValue, rejectWithValue }) => {
     const res = await forgeInit(viewerEl);
     if (res.ok) {
-      modelLoad(res.viewer, urn, dispatch);
+      await modelLoad(res.viewer, urn, dispatch);
       return fulfillWithValue(res.viewer);
     } else {
       return rejectWithValue(res.errCode);
@@ -18,8 +18,10 @@ const forgeSlice = createSlice({
   name: "forge",
   initialState: {
     viewer: null,
+    model: null,
     dataVizExtn: null,
     DataVizCore: null,
+    structureInfo: null,
     errCode: 0,
     urn_3D: "",
   },
@@ -27,6 +29,14 @@ const forgeSlice = createSlice({
     loadDataVizExtn: (state, { payload }) => {
       state.dataVizExtn = payload;
       state.DataVizCore = window.Autodesk.DataVisualization.Core;
+      // heatmap
+      state.structureInfo = new window.Autodesk.DataVisualization.Core.ModelStructureInfo(state.model);
+    },
+    loadStructureInfo: (state, { payload }) => {
+      state.structureInfo = payload
+    },
+    loadModel: (state, { payload }) => {
+      state.model = payload
     },
     shutdownForge: (state, action) => {
       state.viewer?.finish();
@@ -46,5 +56,5 @@ const forgeSlice = createSlice({
 });
 
 const { reducer, actions } = forgeSlice;
-export const { shutdownForge, loadDataVizExtn } = actions;
+export const { shutdownForge, loadDataVizExtn, loadModel } = actions;
 export default reducer;

ibms_react/src/stores/index.js

@@ -5,8 +5,10 @@ import device, {
   fetchSelectedDeviceList,
   fetchSelectedDeviceMenu,
   fetchSelectedDevFlTags,
+  getCurDeviceTemp,
+  changeMainSubSys,
 } from "./deviceListSlice";
-import forgeViewer, { fetchForge, loadDataVizExtn, shutdownForge } from "./forgeSlice";
+import forgeViewer, { fetchForge, loadDataVizExtn, loadModel, shutdownForge } from "./forgeSlice";
 import system, { fetchSysMainSub } from "./systemSlice";
 import user, { fetchUserInfo, fetchUserAuthPages } from "./userSlice";
 import alarm, { fetchBuiAlarmStateByBaja } from "./alarmSlice";
@@ -40,16 +42,25 @@ export default store;
 export {
   fetchBuiList,
   changeBuilding,
+
   fetchSelectedDeviceList,
   fetchSelectedDeviceMenu,
   fetchSelectedDevFlTags,
+  getCurDeviceTemp,
+  changeMainSubSys,
+
   fetchForge,
   loadDataVizExtn,
+  loadModel,
   shutdownForge,
+
   fetchSysMainSub,
+
   fetchUserInfo,
   fetchUserAuthPages,
+
   fetchBuiAlarmStateByBaja,
+
   fetchInitElecMeterByBaja,
   getElectricMeter,
   getHourElectricMeter,

ibms_react/src/utils/baja/alarmBaja.js

@@ -14,7 +14,8 @@ export async function getBuiAlarmStateByBaja(area_tag, building_tag) {
             const { msgText, sourceName } = this.get("alarmData").$map.$map;
             const { $enc: ackState } = this.get("ackState").getType();
             const { $enc: sourceState } = this.get("sourceState").getType();
-            if (ackState !== "acked" && sourceState !== "normal") {
+            // 在選單上的顯示警告，只須出現在緊急的 offnormal 設備
+            if (sourceState !== "normal") {
               result.push({
                 msgText,
                 sourceName,

ibms_react/src/utils/baja/bajaUtil.js

@@ -0,0 +1,12 @@
+export function PointSubscribe(baja, sub, ordPath, pointName) {
+  // ord 為要訂閱的點位
+  baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath}`)
+    .get()
+    .then(folder => {
+      folder.getSlots().is("control:NumericWritable").eachValue((point) => {
+        if (point.getDisplayName() === pointName) {
+          baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath}/${pointName}`).get({ subscriber: sub })
+        }
+      })
+    })
+}

ibms_react/src/utils/baja/deviceBaja.js

@@ -1,26 +1,35 @@
+import { getCurDeviceTemp } from "@STORE"
+import { roundDecimal } from "@UTIL";
 // 訂閱設備
 // 針對數值的點位
-export function SubscribeDeviceByBaja(ord) {
+export function SubscribeDeviceTempByBaja(ordPath, dispatch) {
   window.require &&
     window.requirejs(["baja!"], (baja) => {
       console.log("進入 bajaSubscriber 準備執行BQL訂閱");
-      const sub = new baja.subscriber();
+      const sub = new baja.Subscriber();
-      sub.attach("changed", (prop, cx) => {
+      function passValueToFront(temp) {
-        console.log(prop, cx);
+        dispatch(getCurDeviceTemp({ device_number: ordPath, temp }))
-      });
+      }
-      // ord 為要訂閱的點位
+      sub.attach("changed", (prop) => {
-      baja.Ord.make(ord)
+        if (prop && prop.$displayName === "Out") {
-        .get({
+          passValueToFront(prop.$getValue().getValueDisplay())
-          subscriber: sub,
+        }
-          // cursor 對返回的數據做處理
+      })
-          cursor: {
+      sub.attach("subscribed", (prop) => {
-            before: function () {},
+        if (prop && prop.$displayName === "Out") {
-            each: function () {},
+          passValueToFront(prop.$getValue().getValueDisplay())
-            after: function () {},
+        }
-          },
+      })
-        })
+      // ord 為要訂閱的點位
-        .then((point) => {
+      // ord 為要訂閱的點位
-          console.log(point);
+      baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath}`)
-        });
+        .get()
-    });
+        .then(folder => {
+          folder.getSlots().is("control:NumericWritable").eachValue((point) => {
+            if (point.getDisplayName() === "Temp" || point.getDisplayName() === "TEMP") {
+              baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath}/${point.getDisplayName()}`).get({ subscriber: sub })
+            }
+          })
+        })
+    })
 }

ibms_react/src/utils/baja/electricityBaja.js

@@ -89,30 +89,34 @@ export async function getCurPower(ordPath, dispatch) {
   window.require &&
     window.require(["baja!"], function (baja) {
       const sub = new baja.Subscriber();
-      sub.attach("changed", function (prop) {
+      function passValueToFront(value) {
-        const value = roundDecimal(this.get("out").getValue());
+        const newValue = roundDecimal(value);
         dispatch(
           getCurElectricity([
-            { data: value, text: "即時功率 " },
+            { data: newValue, text: "即時功率 " },
-            { data: roundDecimal(value / 4), text: "即時契約容量占比 " },
+            { data: roundDecimal(newValue / 4), text: "即時契約容量占比 " },
           ]),
         );
+      }
+      sub.attach("changed", function (prop) {
+        if (prop && prop.$displayName === "Out") {
+          passValueToFront(prop.$getValue().getValueDisplay())
+        }
+      })
+        sub.attach("subscribed", function (prop) {
+          if (prop && prop.$displayName === "Out") {
+            passValueToFront(prop.$getValue().getValueDisplay())
+          }
       });
+      // ord 為要訂閱的點位
       baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath}`)
         .get()
-        .then((folder) => {
+        .then(folder => {
-          folder
+          folder.getSlots().is("control:NumericWritable").eachValue((point) => {
-            .getSlots()
-            .is("control:NumericWritable")
-            .eachValue((point) => {
             if (point.getDisplayName() === "P") {
-                baja.Ord.make(
+              baja.Ord.make(`local:|foxs:|station:|slot:/${ordPath}/${point.getDisplayName() }`).get({ subscriber: sub })
-                  `local:|foxs:|station:|slot:/TPE/B1/EE/E4/R2F/NA/WHT/N1/${point.getDisplayName()}`,
+            }
-                ).get({
+          })
-                  subscriber: sub,
+        })
-                });
-              }
-            });
-        });
     });
 }

ibms_react/src/utils/baja/index.js

@@ -1,5 +1,5 @@
 import { getBuiAlarmStateByBaja, getDeviceAlarmByBaja } from "./alarmBaja";
-import { SubscribeDeviceByBaja } from "./deviceBaja";
+import { SubscribeDeviceTempByBaja } from "./deviceBaja";
 import { getTotalElectricByBaja, getCurPower } from "./electricityBaja";
 // 下載 N4 內置requireJS
 function loadRequireJS() {
@@ -25,10 +25,14 @@ function setUserAccountByBaja(callBackFunc = null) {
 
 export {
   loadRequireJS,
+  // 使用者
   setUserAccountByBaja,
+  // alarm
   getBuiAlarmStateByBaja,
   getDeviceAlarmByBaja,
-  SubscribeDeviceByBaja,
+  // device
+  SubscribeDeviceTempByBaja,
+  // eletricity
   getTotalElectricByBaja,
   getCurPower,
 };

ibms_react/src/utils/forge.js

@@ -1,5 +1,5 @@
 import { forgeTokenBaseUrl } from "@CON";
-import { loadDataVizExtn } from "@STORE";
+import { loadDataVizExtn, loadModel } from "@STORE";
 // 載入 forgeCss 樣式
 function loadForgeCss(src) {
   const link = document.createElement("link");
@@ -72,15 +72,19 @@ export function modelLoad(viewer, urn, dispatch) {
   const documentId = `urn:${urn}`;
   window.Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
 
-  function onDocumentLoadSuccess(viewerDocument) {
+  async function onDocumentLoadSuccess(viewerDocument) {
     var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
     viewer.loadDocumentNode(viewerDocument, defaultModel);
 
-    viewer.addEventListener(window.Autodesk.Viewing.GEOMETRY_LOADED_EVENT, async function () {
+    viewer.addEventListener(window.Autodesk.Viewing.GEOMETRY_LOADED_EVENT, async ()=> {
-      // 取得所有 forge dbid
+      console.log(viewer.model)
-      const allDbIds = getAllDbIds(this);
+      dispatch(loadModel(viewer.model))
+    // sprites
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     dispatch(loadDataVizExtn(dataVizExtn));
+    // heatmap
+    //const structureInfo = new window.Autodesk.DataVisualization.Core.ModelStructureInfo(viewer.model);
+    //dispatch(loadStructureInfo(structureInfo));
     });
   }
 
@@ -89,13 +93,4 @@ export function modelLoad(viewer, urn, dispatch) {
   }
 }
 
-// 取得 forge dbid
-function getAllDbIds(viewer) {
-  var instanceTree = viewer.model?.getData().instanceTree;
 
-  var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
-
-  return allDbIdsStr.map(function (id) {
-    return parseInt(id);
-  });
-}

ibms_react/src/utils/index.js

@@ -1,9 +1,13 @@
 import {
   loadRequireJS,
+  // 使用者
   setUserAccountByBaja,
+  // alarm
   getBuiAlarmStateByBaja,
   getDeviceAlarmByBaja,
-  SubscribeDeviceByBaja,
+  // device
+  SubscribeDeviceTempByBaja,
+  // eletricity
   getTotalElectricByBaja,
   getCurPower,
 } from "./baja/index";
@@ -14,10 +18,14 @@ import { userLogin } from "./login";
 import { roundDecimal } from "./math";
 export {
   loadRequireJS,
+  // 使用者
   setUserAccountByBaja,
+  // alarm
   getBuiAlarmStateByBaja,
   getDeviceAlarmByBaja,
-  SubscribeDeviceByBaja,
+  // device
+  SubscribeDeviceTempByBaja,
+  // eletricity
   getTotalElectricByBaja,
   getCurPower,
   forgeInit,