更新樓層顯示

src/components/forge/ForgeForSystem.vue

@@ -33,7 +33,7 @@ const updateHeatBarIsShow = (isShow) => {
   heat_bar_isShow.value = isShow;
 };
 
-const { updateDataVisualization, createSprites, hideAllObjects, forgeClickListener, clear } = useForgeSprite()
+const { updateDataVisualization, createSprites, showSubSystemObjects, forgeClickListener, clear } = useForgeSprite()
 
 const forgeDom = ref(null);
 
@@ -163,7 +163,7 @@ const initForge = async () => {
         viewer.isLoadDone()
       );
 
-      hideAllObjects();
+      showSubSystemObjects();
       createSprites();
       forgeClickListener();
     })

src/hooks/forge/useForgeFloor.js

@@ -1,11 +1,26 @@
+import useSelectedFloor from "@/hooks/useSelectedFloor";
+import { watch, ref, inject } from "vue";
+import { useRoute } from "vue-router";
+
 function useForgeFloor() {
-  const findLevels = (viewer) => {
+  const route = useRoute();
-    return new Promise((resolve, reject) => {
+  const levelList = ref([]);
-      viewer.model.search(
+  const { selectedFloor } = useSelectedFloor();
+  const { subscribeData } = inject("system_deviceList");
+
+  const forgeViewer = ref(null);
+  const dataVizExtn = ref(null);
+  const updateViewerFloor = (viewer, dataVisualization) => {
+    forgeViewer.value = viewer;
+    dataVizExtn.value = dataVisualization;
+  };
+
+  const findLevels = () => {
+    forgeViewer.value.model.search(
       "layer",
       (nodeIds) => {
         let levels = [];
-          const tree = viewer.model.getInstanceTree();
+        const tree = forgeViewer.value.model.getInstanceTree();
         for (let i = 0; i < nodeIds.length; i++) {
           const dbId = nodeIds[i];
           const name = tree.getNodeName(dbId);
@@ -24,47 +39,69 @@ function useForgeFloor() {
           });
         }
         levels = levels.sort((a, b) => b.elevation - a.elevation);
-          resolve(levels);
+        console.log(levels);
+        levelList.value = levels;
       },
       (e) => {
-          reject(e);
+        console.log(e);
       }
     );
-    });
   };
 
-  // function getCutPlaneParam(idx, n, viewer, levels) {
+  watch(forgeViewer, () => {
-  //   if (idx < 0 || !n) return;
+    findLevels();
+  });
 
-  //   const level = levels[idx];
+  const hideDbIdFn = () => {
-  //   if (!level) return;
+    const tree = forgeViewer.value.model.getInstanceTree();
+    const allDbIdsStr = Object.keys(tree.nodeAccess.dbIdToIndex);
+    for (var i = 0; i < allDbIdsStr.length; i++) {
+      forgeViewer.value.hide(parseInt(allDbIdsStr[i]));
+    }
+  };
+  const showDbIdFn = () => {
+    hideAllObjects();
+    subscribeData.value.forEach((value, index) => {
+      forgeViewer.value.show(value.forge_dbid);
+    });
 
-  //   const model = viewer.model;
+    forgeViewer.value.impl.invalidate(true);
-  //   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);
+  const showLevels = () => {
-  // }
+    const currentFloorName = selectedFloor.value.title.replaceAll(/U/gi, "");
 
-  // function profile(viewer, levels) {
+    const level = levelList.value.find(({ name }) =>
-  //   //const upperIdx = 6;
+      name.includes(currentFloorName)
-  //   const upperCutPlaneParam = getCutPlaneParam(2, 1, viewer, levels);
+    );
-  //   //const lowerIdx = 7;
+    console.log(currentFloorName, level);
-  //   const lowerCutPlaneParam = getCutPlaneParam(3, -1, viewer, levels);
-  //   viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
-  // }
 
+    if (!level) {
+      forgeViewer.value.impl.toggleGhosting(true);
+      showDbIdFn();
+    } else {
+      hideDbIdFn();
+      // forgeViewer.value.clearSelection();
+      // forgeViewer.value.model.setAllVisibility(0);
+      forgeViewer.value.impl.toggleGhosting(false);
+      // forgeViewer.value.impl.toggleGroundShadow(false);
+      forgeViewer.value.show(level.dbId);
+      forgeViewer.value.impl.invalidate(true);
+    }
+  };
 
+  watch(
+    () => route,
+    (newValue) => {
+      console.log(newValue);
+      newValue && showLevels();
+    },
+    {
+      deep: true,
+    }
+  );
 
-  return { findLevels, profile };
+  return { findLevels, showLevels, updateViewerFloor };
 }
 
 export default useForgeFloor;

src/hooks/forge/useForgeHeatmap.js

@@ -5,8 +5,6 @@ export default function useForgeHeatmap() {
   const route = useRoute();
   const { subscribeData, realtimeData } = inject("system_deviceList");
 
-  // const data = computed(()=>)
-
   const forgeViewer = ref(null);
   const dataVizExtn = ref(null);
   const updateViewExtension = (viewer, dataVisualization) => {
@@ -28,7 +26,8 @@ export default function useForgeHeatmap() {
   watch(
     () => realtimeData,
     () => {
-      Object.keys(dataVizExtn.value?.surfaceShading).length &&
+      dataVizExtn.value &&
+        Object.keys(dataVizExtn.value?.surfaceShading)?.length &&
         dataVizExtn.value.updateSurfaceShading(getSensorValue);
     },
     {
@@ -37,6 +36,7 @@ export default function useForgeHeatmap() {
   );
 
   const createHeatMap = async () => {
+    if (!dataVizExtn.value) return;
     const heatMapName = `iot_heatmap_${route.query?.gas}`;
     console.log("createHeatMap", heatMapName);
     const {
@@ -89,7 +89,7 @@ export default function useForgeHeatmap() {
     () => route.query,
     (newValue, oldValue) => {
       if (newValue.gas !== oldValue.gas) {
-        createHeatMap(newValue.gas);
+        // createHeatMap(newValue.gas);
       } else if (!newValue.gas) {
         dataVizExtn.value?.removeSurfaceShading();
       }

src/hooks/forge/useForgeSprite.js

@@ -3,6 +3,7 @@ import useAlarmStore from "@/stores/useAlarmStore";
 import hexToRgb from "@/util/hexToRgb";
 import useSelectedFloor from "@/hooks/useSelectedFloor";
 import useForgeHeatmap from "./useForgeHeatmap";
+import useForgeFloor from "./useForgeFloor";
 
 export default function useForgeSprite() {
   const store = useAlarmStore();
@@ -14,6 +15,7 @@ export default function useForgeSprite() {
   const dataVizExtn = ref(null);
 
   const { createHeatMap, updateViewExtension } = useForgeHeatmap();
+  const {  updateViewerFloor } = useForgeFloor();
 
   const updateDataVisualization = async (viewer) => {
     if (!forgeViewer.value) {
@@ -25,6 +27,7 @@ export default function useForgeSprite() {
     );
     dataVizExtn.value = markRaw(dataVisualization);
     updateViewExtension(markRaw(viewer), markRaw(dataVisualization));
+    updateViewerFloor(markRaw(viewer), markRaw(dataVisualization))
   };
 
   function onSpriteClicked(event) {
@@ -104,7 +107,10 @@ export default function useForgeSprite() {
   watch(
     () => showData,
     () => {
-      forgeViewer.value?.isLoadDone() && createSprites();
+      if (forgeViewer.value?.isLoadDone()) {
+        createSprites();
+        hideAllObjects();
+      }
     },
     {
       deep: true,
@@ -150,7 +156,10 @@ export default function useForgeSprite() {
     for (var i = 0; i < allDbIdsStr.length; i++) {
       forgeViewer.value.hide(parseInt(allDbIdsStr[i]));
     }
+  };
 
+  const showSubSystemObjects = () => {
+    hideAllObjects();
     subscribeData.value.forEach((value, index) => {
       forgeViewer.value.show(value.forge_dbid);
     });
@@ -173,7 +182,7 @@ export default function useForgeSprite() {
   return {
     createSprites,
     updateDataVisualization,
-    hideAllObjects,
+    showSubSystemObjects,
     forgeClickListener,
     clear,
   };