From 7f570fc366d8625713ca93f8e7a809217e907e0f Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Wed, 23 Oct 2024 14:41:04 -0400
Subject: [PATCH 1/9] =?UTF-8?q?production=20forge=20sprite=20route=20|=20?=
 =?UTF-8?q?=E7=86=B1=E5=9C=96api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                    |  2 +-
 src/hooks/forge/useForgeHeatmap.js | 95 +++++++++++++++++++++++-------
 src/hooks/forge/useForgeSprite.js  | 12 ++--
 3 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/.env.production b/.env.production
index a7e4527..e05e86c 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
 VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
-VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
\ No newline at end of file
+VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"
\ No newline at end of file
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
index d540dfb..f494438 100644
--- a/src/hooks/forge/useForgeHeatmap.js
+++ b/src/hooks/forge/useForgeHeatmap.js
@@ -1,36 +1,75 @@
 import { watch, inject, markRaw, ref } from "vue";
+import { useRoute } from "vue-router";
 
-export default function useForgeHeatmap(dataVizExtn, forgeViewer){
-  const { subscribeData } = inject("system_deviceList");
+export default function useForgeHeatmap() {
+  const route = useRoute();
+  const { subscribeData, realtimeData } = inject("system_deviceList");
 
-  const createHeatMap = async (heatMapName) => {
+  // const data = computed(()=>)
+
+  const forgeViewer = ref(null);
+  const dataVizExtn = ref(null);
+  const updateViewExtension = (viewer, dataVisualization) => {
+    forgeViewer.value = viewer;
+    dataVizExtn.value = dataVisualization;
+  };
+
+  //create the heatmap
+  function getSensorValue(device, sensorType, pointData) {
+    const dev = realtimeData.value.find(
+      ({ device_number }) => device_number === device.id
+    );
+    const point = dev.data.find(({ point }) => point === route.query?.gas);
+    console.log(9, device, dev, point);
+
+    return (point?.value || 0) / 40;
+  }
+
+  watch(
+    () => realtimeData,
+    () => {
+      Object.keys(dataVizExtn.value?.surfaceShading).length &&
+        dataVizExtn.value.updateSurfaceShading(getSensorValue);
+    },
+    {
+      deep: true,
+    }
+  );
+
+  const createHeatMap = async () => {
+    const heatMapName = `iot_heatmap_${route.query?.gas}`;
+    console.log("createHeatMap", heatMapName);
     const {
       SurfaceShadingData,
       SurfaceShadingPoint,
       SurfaceShadingNode,
       SurfaceShadingGroup,
     } = Autodesk.DataVisualization.Core;
-    const shadingGroup = new SurfaceShadingGroup(`iot_heatmap_${heatMapName}`);
+    const shadingGroup = new SurfaceShadingGroup(`${heatMapName}_group`);
     const rooms = new Map();
 
-    for (const { id, roomDbId, position, sensorTypes } of subscribeData.value) {
-      if (!id || roomDbId == -1 || !roomDbId) {
-        continue;
+    subscribeData.value.forEach(
+      ({
+        device_number: id,
+        room_dbid: roomDbId,
+        device_coordinate_3d: position,
+        sensorTypes,
+      }) => {
+        if (!id || roomDbId == -1 || !roomDbId) {
+          return;
+        }
+        if (!rooms.has(roomDbId)) {
+          const room = new SurfaceShadingNode(id, roomDbId);
+          shadingGroup.addChild(room);
+          rooms.set(roomDbId, room);
+        }
+        const room = rooms.get(roomDbId);
+        room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
       }
-
-      if (!rooms.has(roomDbId)) {
-        const room = new SurfaceShadingNode(id, roomDbId);
-        shadingGroup.addChild(room);
-        rooms.set(roomDbId, room);
-      }
-      const room = rooms.get(roomDbId);
-      room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
-    }
-
-    const shadingData = new SurfaceShadingData();
+    );
+    const shadingData = new SurfaceShadingData(`${heatMapName}_data`);
     shadingData.addChild(shadingGroup);
     shadingData.initialize(forgeViewer.value?.model);
-
     await dataVizExtn.value.setupSurfaceShading(
       forgeViewer.value.model,
       shadingData
@@ -40,10 +79,22 @@ export default function useForgeHeatmap(dataVizExtn, forgeViewer){
       [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
     );
     dataVizExtn.value.renderSurfaceShading(
-      `iot_heatmap_${heatMapName}`,
       heatMapName,
+      route.query.gas.shading,
       getSensorValue
     );
-
   };
-}
\ No newline at end of file
+
+  watch(
+    () => route.query,
+    (newValue, oldValue) => {
+      if (newValue.gas !== oldValue.gas) {
+        createHeatMap(newValue.gas);
+      } else if (!newValue.gas) {
+        dataVizExtn.value?.removeSurfaceShading();
+      }
+    }
+  );
+
+  return { createHeatMap, updateViewExtension };
+}
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index 6a6678c..716a253 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -1,8 +1,8 @@
-import { watch, inject, markRaw, ref, computed } from "vue";
+import { watch, inject, markRaw, ref, computed, provide } from "vue";
 import useAlarmStore from "@/stores/useAlarmStore";
 import hexToRgb from "@/util/hexToRgb";
-import { useRoute } from "vue-router";
 import useSelectedFloor from "@/hooks/useSelectedFloor";
+import useForgeHeatmap from "./useForgeHeatmap";
 
 export default function useForgeSprite() {
   const store = useAlarmStore();
@@ -12,6 +12,9 @@ export default function useForgeSprite() {
   );
   const forgeViewer = ref(null);
   const dataVizExtn = ref(null);
+
+  const { createHeatMap, updateViewExtension } = useForgeHeatmap();
+
   const updateDataVisualization = async (viewer) => {
     if (!forgeViewer.value) {
       forgeViewer.value = markRaw(viewer);
@@ -21,6 +24,7 @@ export default function useForgeSprite() {
       "Autodesk.DataVisualization"
     );
     dataVizExtn.value = markRaw(dataVisualization);
+    updateViewExtension(markRaw(viewer), markRaw(dataVisualization));
   };
 
   function onSpriteClicked(event) {
@@ -72,7 +76,6 @@ export default function useForgeSprite() {
       viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
       showData.value?.forEach((d, index) => {
         if (d.device_coordinate_3d) {
-          console.log(d.device_coordinate_3d);
           const position = d.device_coordinate_3d;
           style.color = new THREE.Color(hexToRgb(d.device_normal_color));
           const viewable = new DataVizCore.SpriteViewable(
@@ -89,6 +92,7 @@ export default function useForgeSprite() {
       viewableData.finish().then(
         () => {
           dataVizExtn.value.addViewables(viewableData);
+          createHeatMap();
         },
         (error) => {
           console.log(error);
@@ -171,6 +175,6 @@ export default function useForgeSprite() {
     updateDataVisualization,
     hideAllObjects,
     forgeClickListener,
-    clear
+    clear,
   };
 }

From fdac1a2fb38e801432ffd2eb0f061c72ea43fb67 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Thu, 24 Oct 2024 13:22:00 -0400
Subject: [PATCH 2/9] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=A8=93=E5=B1=A4?=
 =?UTF-8?q?=E9=A1=AF=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forge/ForgeForSystem.vue |   4 +-
 src/hooks/forge/useForgeFloor.js        | 151 +++++++++++++++---------
 src/hooks/forge/useForgeHeatmap.js      |   8 +-
 src/hooks/forge/useForgeSprite.js       |  13 +-
 4 files changed, 111 insertions(+), 65 deletions(-)

diff --git a/src/components/forge/ForgeForSystem.vue b/src/components/forge/ForgeForSystem.vue
index 3e111b8..c994e5b 100644
--- a/src/components/forge/ForgeForSystem.vue
+++ b/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();
     })
diff --git a/src/hooks/forge/useForgeFloor.js b/src/hooks/forge/useForgeFloor.js
index 04a3307..e389649 100644
--- a/src/hooks/forge/useForgeFloor.js
+++ b/src/hooks/forge/useForgeFloor.js
@@ -1,70 +1,107 @@
+import useSelectedFloor from "@/hooks/useSelectedFloor";
+import { watch, ref, inject } from "vue";
+import { useRoute } from "vue-router";
+
 function useForgeFloor() {
-  const findLevels = (viewer) => {
-    return new Promise((resolve, reject) => {
-      viewer.model.search(
-        "layer",
-        (nodeIds) => {
-          let levels = [];
-          const tree = viewer.model.getInstanceTree();
-          for (let i = 0; i < nodeIds.length; i++) {
-            const dbId = nodeIds[i];
-            const name = tree.getNodeName(dbId);
-            if (!name || name.includes("<沒有層級>")) continue;
-            levels.push({
-              guid: dbId,
-              name,
-              dbId,
-              extension: {
-                buildingStory: true,
-                structure: false,
-                computationHeight: 0,
-                groundPlane: false,
-                hasAssociatedViewPlans: false,
-              },
-            });
-          }
-          levels = levels.sort((a, b) => b.elevation - a.elevation);
-          resolve(levels);
-        },
-        (e) => {
-          reject(e);
-        }
-      );
-    });
+  const route = useRoute();
+  const levelList = ref([]);
+  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;
   };
 
-  // function getCutPlaneParam(idx, n, viewer, levels) {
-  //   if (idx < 0 || !n) return;
+  const findLevels = () => {
+    forgeViewer.value.model.search(
+      "layer",
+      (nodeIds) => {
+        let levels = [];
+        const tree = forgeViewer.value.model.getInstanceTree();
+        for (let i = 0; i < nodeIds.length; i++) {
+          const dbId = nodeIds[i];
+          const name = tree.getNodeName(dbId);
+          if (!name || name.includes("<沒有層級>")) continue;
+          levels.push({
+            guid: dbId,
+            name,
+            dbId,
+            extension: {
+              buildingStory: true,
+              structure: false,
+              computationHeight: 0,
+              groundPlane: false,
+              hasAssociatedViewPlans: false,
+            },
+          });
+        }
+        levels = levels.sort((a, b) => b.elevation - a.elevation);
+        console.log(levels);
+        levelList.value = levels;
+      },
+      (e) => {
+        console.log(e);
+      }
+    );
+  };
 
-  //   const level = levels[idx];
-  //   if (!level) return;
+  watch(forgeViewer, () => {
+    findLevels();
+  });
 
-  //   const model = 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;
+  const hideDbIdFn = () => {
+    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);
+    });
 
-  //   return new THREE.Vector4(0, 0, n, d);
-  // }
+    forgeViewer.value.impl.invalidate(true);
+  };
 
-  // function profile(viewer, levels) {
-  //   //const upperIdx = 6;
-  //   const upperCutPlaneParam = getCutPlaneParam(2, 1, viewer, levels);
-  //   //const lowerIdx = 7;
-  //   const lowerCutPlaneParam = getCutPlaneParam(3, -1, viewer, levels);
-  //   viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
-  // }
+  const showLevels = () => {
+    const currentFloorName = selectedFloor.value.title.replaceAll(/U/gi, "");
 
+    const level = levelList.value.find(({ name }) =>
+      name.includes(currentFloorName)
+    );
+    console.log(currentFloorName, level);
 
+    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);
+    }
+  };
 
-  return { findLevels, profile };
+  watch(
+    () => route,
+    (newValue) => {
+      console.log(newValue);
+      newValue && showLevels();
+    },
+    {
+      deep: true,
+    }
+  );
+
+  return { findLevels, showLevels, updateViewerFloor };
 }
 
 export default useForgeFloor;
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
index f494438..1957f81 100644
--- a/src/hooks/forge/useForgeHeatmap.js
+++ b/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();
       }
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index 716a253..3c254e4 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/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,
   };

From 97c3c394d9cb08eac7d62bc4f24cf4db0701c888 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Thu, 24 Oct 2024 22:12:19 -0400
Subject: [PATCH 3/9] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=9B=9E=E5=88=B0?=
 =?UTF-8?q?=E7=B8=BD=E8=A6=BDmode=EF=BD=9CfitToView=EF=BD=9C=E6=A8=93?=
 =?UTF-8?q?=E5=B1=A4=E5=89=96=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forge/ForgeForSystem.vue        | 2 +-
 src/hooks/forge/useForgeFloor.js               | 4 +++-
 src/hooks/forge/useForgeHeatmap.js             | 2 +-
 src/views/system/System.vue                    | 3 ++-
 src/views/system/components/SystemCard.vue     | 5 ++++-
 src/views/system/components/SystemFloorBar.vue | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/forge/ForgeForSystem.vue b/src/components/forge/ForgeForSystem.vue
index c994e5b..b21ee06 100644
--- a/src/components/forge/ForgeForSystem.vue
+++ b/src/components/forge/ForgeForSystem.vue
@@ -264,7 +264,7 @@ onUnmounted(() => {
 }
 
 .homeViewWrapper {
-  transform: scale(0.9) !important;
+  transform: scale(2) !important;
 }
 
 .heatbar {
diff --git a/src/hooks/forge/useForgeFloor.js b/src/hooks/forge/useForgeFloor.js
index e389649..ea9fee4 100644
--- a/src/hooks/forge/useForgeFloor.js
+++ b/src/hooks/forge/useForgeFloor.js
@@ -60,7 +60,7 @@ function useForgeFloor() {
     }
   };
   const showDbIdFn = () => {
-    hideAllObjects();
+    hideDbIdFn();
     subscribeData.value.forEach((value, index) => {
       forgeViewer.value.show(value.forge_dbid);
     });
@@ -78,6 +78,7 @@ function useForgeFloor() {
 
     if (!level) {
       forgeViewer.value.impl.toggleGhosting(true);
+      forgeViewer.value.fitToView([forgeViewer.value.model.getRootId()]);
       showDbIdFn();
     } else {
       hideDbIdFn();
@@ -87,6 +88,7 @@ function useForgeFloor() {
       // forgeViewer.value.impl.toggleGroundShadow(false);
       forgeViewer.value.show(level.dbId);
       forgeViewer.value.impl.invalidate(true);
+      forgeViewer.value.fitToView([level.dbId]);
     }
   };
 
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
index 1957f81..a023539 100644
--- a/src/hooks/forge/useForgeHeatmap.js
+++ b/src/hooks/forge/useForgeHeatmap.js
@@ -80,7 +80,7 @@ export default function useForgeHeatmap() {
     );
     dataVizExtn.value.renderSurfaceShading(
       heatMapName,
-      route.query.gas.shading,
+      route.query.gas,
       getSensorValue
     );
   };
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index ef6779d..0f03c46 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -44,6 +44,7 @@ const getData = async () => {
     ...d, key: d.full_name, device_list: d.device_list.map((dev, index) => ({
       ...dev,
       forge_dbid: parseInt(dev.forge_dbid),
+      room_dbid: parseInt(dev.room_dbid),
       device_coordinate_3d: dev.device_coordinate_3d
         ? JSON.parse(dev.device_coordinate_3d)
         : null,
@@ -168,7 +169,7 @@ const getCurrentInfoModalData = (e, position, value) => {
 const selectedDeviceRealtime = computed(() => realtimeData.value?.find(({ device_number }) => device_number === selectedDevice.value?.value?.device_number)?.data)
 
 const clearSelectedDeviceInfo = () => {
-  
+
   selectedDevice.value.value = null;
 }
 
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index 3969ab8..fa41938 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -14,6 +14,9 @@ watch(selectedFloor, (newValue) => {
   console.log(newValue)
 })
 
+const fitToView = (forge_dbid) => {
+  window.NOP_VIEWER.fitToView([forge_dbid])
+}
 </script>
 
 <template>
@@ -25,7 +28,7 @@ watch(selectedFloor, (newValue) => {
         <p class="title">{{ d.full_name }}</p>
         <div class="grid grid-cols-3 gap-5">
           <div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
-            <div class="item h-36">
+            <div class="item h-36" @click="() => fitToView(device.forge_dbid)">
               <div class="left w-4/5 h-full flex flex-wrap justify-center">
                 <div class="sec02 w-full">
                   <img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
diff --git a/src/views/system/components/SystemFloorBar.vue b/src/views/system/components/SystemFloorBar.vue
index 7f21eca..cb41881 100644
--- a/src/views/system/components/SystemFloorBar.vue
+++ b/src/views/system/components/SystemFloorBar.vue
@@ -39,7 +39,7 @@ const onClick = (item) => {
   router.push({
     name: 'sub_system', params: {
       ...route.params, floor_id: item.key
-    }, query: { ...route.query, gas: route.query.gas }
+    }, query: { ...route.query, gas: route.query.gas, mode: route.params.floor_id === "main" ? "3D" : route.query.mode }
   })
 
 }

From bc31e9134ca45222e0723cf5a6ef5515c412cf50 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Thu, 24 Oct 2024 23:07:42 -0400
Subject: [PATCH 4/9] =?UTF-8?q?=E5=88=87=E6=8F=9B=E5=B0=8F=E9=A1=9E?=
 =?UTF-8?q?=E6=9B=B4=E6=8F=9B=E8=A8=AD=E5=82=99forge=E9=A1=AF=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/forge/useForgeSprite.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index 3c254e4..a1d83c1 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -109,7 +109,7 @@ export default function useForgeSprite() {
     () => {
       if (forgeViewer.value?.isLoadDone()) {
         createSprites();
-        hideAllObjects();
+        showSubSystemObjects();
       }
     },
     {
@@ -179,6 +179,8 @@ export default function useForgeSprite() {
     forgeViewer.value.tearDown();
   };
 
+
+
   return {
     createSprites,
     updateDataVisualization,

From 6d3b82ec896471d79a2a71ebb6e4f3c8b8238db9 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Sun, 27 Oct 2024 19:54:56 -0400
Subject: [PATCH 5/9] =?UTF-8?q?=E7=86=B1=E5=9C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/config.json                         |  24 +++++
 src/components/forge/ForgeForSystem.vue    |  34 +++----
 src/hooks/forge/useForgeHeatmap.js         | 110 ++++++++++++++-------
 src/hooks/forge/useForgeSprite.js          |  17 +---
 src/hooks/useSystemShowData.js             |  27 +++++
 src/stores/useHeatmapBarStore.js           |  27 +++++
 src/views/system/System.vue                |   6 +-
 src/views/system/components/SystemCard.vue |  11 +--
 8 files changed, 176 insertions(+), 80 deletions(-)
 create mode 100644 public/config.json
 create mode 100644 src/hooks/useSystemShowData.js
 create mode 100644 src/stores/useHeatmapBarStore.js

diff --git a/public/config.json b/public/config.json
new file mode 100644
index 0000000..3d0a81e
--- /dev/null
+++ b/public/config.json
@@ -0,0 +1,24 @@
+{
+  "heatmap": {
+    "temp": {
+      "range": [0, 50],
+      "color": ["#0023F5", "#FF1C05"],
+      "unit": "°C"
+    },
+    "humi": {
+      "range": [15, 95],
+      "color": ["#ADD8E6", "#00008B"],
+      "unit": "%"
+    },
+    "CO2": {
+      "range": [0, 5000],
+      "color": ["#FFDAB9", "#FF8C00"],
+      "unit": "ppm"
+    },
+    "CO": {
+      "range": [0, 1000],
+      "color": ["#FFFFE0", "#FFD700"],
+      "unit": "ppm"
+    }
+  }
+}
diff --git a/src/components/forge/ForgeForSystem.vue b/src/components/forge/ForgeForSystem.vue
index b21ee06..9181cd2 100644
--- a/src/components/forge/ForgeForSystem.vue
+++ b/src/components/forge/ForgeForSystem.vue
@@ -16,6 +16,7 @@ import useSystemStatusByBaja from "@/hooks/baja/useSystemStatusByBaja";
 import ForgeInfoModal from "../../views/system/components/SystemInfoModal.vue";
 import useAlarmStore from "@/stores/useAlarmStore";
 import useForgeSprite from "@/hooks/forge/useForgeSprite";
+import useHeatmapBarStore from "@/stores/useHeatmapBarStore";
 
 const props = defineProps({
   initialData: Object,
@@ -27,11 +28,7 @@ const props = defineProps({
     },
   },
 });
-
-const heat_bar_isShow = ref(false);
-const updateHeatBarIsShow = (isShow) => {
-  heat_bar_isShow.value = isShow;
-};
+const store = useHeatmapBarStore();
 
 const { updateDataVisualization, createSprites, showSubSystemObjects, forgeClickListener, clear } = useForgeSprite()
 
@@ -92,9 +89,10 @@ const loadModel = (viewer, filePath) => {
   });
 };
 
-// const loadModel = (viewer, urn) => {
+// const loadModel = (viewer) => {
 //   return new Promise(function (resolve, reject) {
 //     async function onDocumentLoadSuccess(doc) {
+//       console.log("模型加載完成");
 //       viewer.setGroundShadow(false);
 //       viewer.impl.renderer().setClearAlpha(0); //clear alpha channel
 //       viewer.impl.glrenderer().setClearColor(0xffffff, 0); //set transparent background, color code does not matter
@@ -201,22 +199,18 @@ onUnmounted(() => {
 <template>
   <ForgeInfoModal :data="currentInfoModalData" />
   <div id="forge-preview" ref="forgeDom" class="relative w-full h-full min-h-full">
-    <div v-show="heat_bar_isShow" class="absolute z-10 heatbar">
+    <div v-show="store.heat_bar_isShow" class="absolute z-10 heatbar">
       <div class="w-40 flex justify-between text-[10px] mb-1">
-        <span class="text-gradient-1">10 °C</span>
-        <span class="text-gradient-2">20 °C</span>
-        <span class="text-gradient-3">30 °C</span>
-        <span class="text-gradient-4">40 °C</span>
+        <span v-for="value in store.heatmapConfig?.range" class="text-gradient-1">{{ value }} {{
+          store.heatmapConfig?.unit }}</span>
       </div>
-      <div class="w-40 h-3" style="
-            background: linear-gradient(
+      <div class="w-40 h-3" :style="{
+        background: `linear-gradient(
               to right,
-              #0000ff 0%,
-              #00ff00 33%,
-              #ffff00 66%,
-              #ff0000 100%
-            );
-          "></div>
+              ${store.heatmapConfig?.color[0]} 0%,
+              ${store.heatmapConfig?.color[1]} 100%
+            )`
+      }"></div>
     </div>
     <!-- label -->
     <!-- https://github.com/augustogoncalves/forge-plant-operation/blob/master/forgeSample/wwwroot/js/iconExtension.js -->
@@ -268,7 +262,7 @@ onUnmounted(() => {
 }
 
 .heatbar {
-  right: v-bind("`${props.cubeStyle.right + 2}%`") !important;
+  /* right: v-bind("`${props.cubeStyle.right + 2}%`") !important; */
   top: 0% !important;
 }
 </style>
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
index a023539..1abbfe5 100644
--- a/src/hooks/forge/useForgeHeatmap.js
+++ b/src/hooks/forge/useForgeHeatmap.js
@@ -1,10 +1,14 @@
-import { watch, inject, markRaw, ref } from "vue";
+import { watch, inject, markRaw, ref, computed, onMounted } from "vue";
 import { useRoute } from "vue-router";
+import useHeatmapBarStore from "@/stores/useHeatmapBarStore";
+import useSystemShowData from "@/hooks/useSystemShowData";
 
 export default function useForgeHeatmap() {
   const route = useRoute();
   const { subscribeData, realtimeData } = inject("system_deviceList");
 
+  const store = useHeatmapBarStore();
+
   const forgeViewer = ref(null);
   const dataVizExtn = ref(null);
   const updateViewExtension = (viewer, dataVisualization) => {
@@ -17,12 +21,27 @@ export default function useForgeHeatmap() {
     const dev = realtimeData.value.find(
       ({ device_number }) => device_number === device.id
     );
-    const point = dev.data.find(({ point }) => point === route.query?.gas);
-    console.log(9, device, dev, point);
+    if (dev) {
+      const [min, max] = store.heatmapConfig?.range;
+      const point = dev.data.find(({ point }) => point === route.query?.gas);
+      console.log(9, device, dev, point, (point?.value - min || 0) / max);
 
-    return (point?.value || 0) / 40;
+      return Math.random();
+    }
+    return 0;
   }
 
+  const { flatSubData } = useSystemShowData();
+
+  const data = computed(() =>
+    flatSubData.value?.map((d) => ({
+      ...d,
+      ...Object.fromEntries(
+        d.points.map(({ point, value }) => [point, 0]) || []
+      ),
+    }))
+  );
+
   watch(
     () => realtimeData,
     () => {
@@ -45,29 +64,53 @@ export default function useForgeHeatmap() {
       SurfaceShadingNode,
       SurfaceShadingGroup,
     } = Autodesk.DataVisualization.Core;
-    const shadingGroup = new SurfaceShadingGroup(`${heatMapName}_group`);
+    const shadingGroup = new SurfaceShadingGroup(`${heatMapName}`);
     const rooms = new Map();
 
-    subscribeData.value.forEach(
-      ({
-        device_number: id,
-        room_dbid: roomDbId,
-        device_coordinate_3d: position,
-        sensorTypes,
-      }) => {
-        if (!id || roomDbId == -1 || !roomDbId) {
-          return;
-        }
-        if (!rooms.has(roomDbId)) {
-          const room = new SurfaceShadingNode(id, roomDbId);
-          shadingGroup.addChild(room);
-          rooms.set(roomDbId, room);
-        }
-        const room = rooms.get(roomDbId);
-        room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes));
+    const roomSet = new Set(data.value.map(({ room_dbid }) => room_dbid));
+
+    // 每個room是一個node
+    [...roomSet].forEach((roomDbId) => {
+      if (!roomDbId) {
+        return;
       }
-    );
-    const shadingData = new SurfaceShadingData(`${heatMapName}_data`);
+      const room = new SurfaceShadingNode(`room_${roomDbId}`, roomDbId);
+
+      //相同room內的設備
+      data.value
+        .filter(({ room_dbid }) => room_dbid === roomDbId)
+        .forEach(
+          ({
+            device_number: id,
+            device_coordinate_3d: position,
+            sensorTypes,
+          }) =>
+            room.addPoint(new SurfaceShadingPoint(id, position, sensorTypes))
+        );
+
+      shadingGroup.addChild(room);
+    });
+
+    // data.value.forEach(
+    //   ({
+    //     device_number: id,
+    //     room_dbid: roomDbId,
+    //     device_coordinate_3d: position,
+    //     sensorTypes,
+    //   }) => {
+    //     if (!id || roomDbId == -1 || !roomDbId) {
+    //       return;
+    //     }
+    //     if (!rooms.has(roomDbId)) {
+    //       const room = new SurfaceShadingNode(id, roomDbId);
+    //       shadingGroup.addChild(room);
+    //       rooms.set(roomDbId, room);
+    //     }
+    //     const room = rooms.get(roomDbId);
+    //     room.addPoint(new SurfaceShadingPoint(id, position, route.query.gas));
+    //   }
+    // );
+    const shadingData = new SurfaceShadingData(`${heatMapName}`);
     shadingData.addChild(shadingGroup);
     shadingData.initialize(forgeViewer.value?.model);
     await dataVizExtn.value.setupSurfaceShading(
@@ -75,25 +118,24 @@ export default function useForgeHeatmap() {
       shadingData
     );
     dataVizExtn.value.registerSurfaceShadingColors(
-      heatMapName,
-      [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]
+      route.query?.gas,
+      store.heatmapConfig?.color
     );
     dataVizExtn.value.renderSurfaceShading(
       heatMapName,
-      route.query.gas,
+      route.query?.gas,
       getSensorValue
     );
   };
 
   watch(
-    () => route.query,
+    data,
     (newValue, oldValue) => {
-      if (newValue.gas !== oldValue.gas) {
-        // createHeatMap(newValue.gas);
-      } else if (!newValue.gas) {
-        dataVizExtn.value?.removeSurfaceShading();
-      }
-    }
+      debugger;
+      dataVizExtn.value?.removeSurfaceShading();
+      createHeatMap(route.query.gas);
+    },
+    { deep: true }
   );
 
   return { createHeatMap, updateViewExtension };
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index a1d83c1..8e1b4a7 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -1,12 +1,11 @@
 import { watch, inject, markRaw, ref, computed, provide } from "vue";
 import useAlarmStore from "@/stores/useAlarmStore";
 import hexToRgb from "@/util/hexToRgb";
-import useSelectedFloor from "@/hooks/useSelectedFloor";
+import useSystemShowData from "@/hooks/useSystemShowData"
 import useForgeHeatmap from "./useForgeHeatmap";
 import useForgeFloor from "./useForgeFloor";
 
 export default function useForgeSprite() {
-  const store = useAlarmStore();
   const { subscribeData } = inject("system_deviceList");
   const { getCurrentInfoModalData, clearSelectedDeviceInfo } = inject(
     "system_selectedDevice"
@@ -42,7 +41,6 @@ export default function useForgeSprite() {
     console.log("onSpriteClicked", event.target);
     console.log("onSpriteClicked", data);
     // modalContent.value = data;
-    debugger;
     if (data) {
       getCurrentInfoModalData(
         event,
@@ -52,14 +50,7 @@ export default function useForgeSprite() {
     }
   }
 
-  const { selectedFloor } = useSelectedFloor();
-  const showData = computed(() =>
-    selectedFloor.value?.key === "main"
-      ? subscribeData.value
-      : subscribeData.value.filter(
-          ({ floor_guid }) => floor_guid === selectedFloor.value?.key
-        ) || []
-  );
+  const { flatSubData } = useSystemShowData()
 
   // 創建 sprites
   const createSprites = async () => {
@@ -77,7 +68,7 @@ export default function useForgeSprite() {
       );
       const viewableData = new DataVizCore.ViewableData();
       viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
-      showData.value?.forEach((d, index) => {
+      flatSubData.value?.forEach((d, index) => {
         if (d.device_coordinate_3d) {
           const position = d.device_coordinate_3d;
           style.color = new THREE.Color(hexToRgb(d.device_normal_color));
@@ -105,7 +96,7 @@ export default function useForgeSprite() {
   };
 
   watch(
-    () => showData,
+    () => flatSubData,
     () => {
       if (forgeViewer.value?.isLoadDone()) {
         createSprites();
diff --git a/src/hooks/useSystemShowData.js b/src/hooks/useSystemShowData.js
new file mode 100644
index 0000000..97f5457
--- /dev/null
+++ b/src/hooks/useSystemShowData.js
@@ -0,0 +1,27 @@
+import useSelectedFloor from "@/hooks/useSelectedFloor";
+import { computed, inject, watch } from "vue";
+
+function useSystemShowData() {
+  const { data } = inject("system_deviceList");
+  const { selectedFloor } = useSelectedFloor();
+
+  const showData = computed(() =>
+    selectedFloor.value?.key === "main"
+      ? data.value
+      : data.value.filter(
+          ({ floor_guid }) => floor_guid === selectedFloor.value?.key
+        ) || []
+  );
+
+  const flatSubData = computed(() => {
+    let items = [];
+    showData.value.forEach((device) => {
+      items = [...items, ...device.device_list];
+    });
+    return items;
+  });
+
+  return { showData, flatSubData };
+}
+
+export default useSystemShowData;
diff --git a/src/stores/useHeatmapBarStore.js b/src/stores/useHeatmapBarStore.js
new file mode 100644
index 0000000..39c6ea5
--- /dev/null
+++ b/src/stores/useHeatmapBarStore.js
@@ -0,0 +1,27 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+import { useRoute } from "vue-router";
+import { computed, ref, onMounted } from "vue";
+
+const useHeatmapBarStore = defineStore("heatmap", () => {
+  const route = useRoute();
+
+  const allHeatMaps = ref({});
+  const heatmapConfig = computed(() => allHeatMaps.value[route.query?.gas]);
+
+  const getConfig = async () => {
+    const res = await axios.get("/config.json");
+    console.log(res);
+    allHeatMaps.value = res.data.heatmap;
+  };
+
+  onMounted(() => {
+    getConfig();
+  });
+
+  const heat_bar_isShow = computed(() => Boolean(heatmapConfig.value));
+
+  return { heatmapConfig, heat_bar_isShow };
+});
+
+export default useHeatmapBarStore;
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index 0f03c46..f23d913 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -41,13 +41,11 @@ const getData = async () => {
     building_tag: buildingStore.selectedBuilding?.building_tag,
   })
   const devices = res.data.map(d => ({
-    ...d, key: d.full_name, device_list: d.device_list.map((dev, index) => ({
+    ...d, key: d.full_name, device_list: d.device_list.filter(({ device_coordinate_3d }) => device_coordinate_3d).map((dev, index) => ({
       ...dev,
       forge_dbid: parseInt(dev.forge_dbid),
       room_dbid: parseInt(dev.room_dbid),
-      device_coordinate_3d: dev.device_coordinate_3d
-        ? JSON.parse(dev.device_coordinate_3d)
-        : null,
+      device_coordinate_3d: JSON.parse(dev.device_coordinate_3d),
       alarmMsg: "",
       is_show: true,
       currentColor: dev.device_normal_point_color,
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index fa41938..f2fa590 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -1,18 +1,11 @@
 <script setup>
 import { computed, inject, watch } from "vue"
-import useSelectedFloor from "@/hooks/useSelectedFloor"
-
-const { data } = inject("system_deviceList")
+import useSystemShowData from "@/hooks/useSystemShowData"
 
 const { getCurrentInfoModalData } = inject("system_selectedDevice")
 
-const { selectedFloor } = useSelectedFloor()
+const { showData } = useSystemShowData()
 
-const showData = computed(() => selectedFloor.value?.key === 'main' ? data.value : data.value.filter(({ floor_guid }) => floor_guid === selectedFloor.value?.key) || [])
-
-watch(selectedFloor, (newValue) => {
-  console.log(newValue)
-})
 
 const fitToView = (forge_dbid) => {
   window.NOP_VIEWER.fitToView([forge_dbid])

From 521d5eb69693760da3c6d536c9f10f20ef19dce8 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Sun, 27 Oct 2024 20:21:10 -0400
Subject: [PATCH 6/9] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=A8=93=E5=B1=A4?=
 =?UTF-8?q?=E5=89=96=E9=9D=A2=E5=9C=96=E9=8C=AF=E8=AA=A4=E8=A8=8A=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/config.json                 | 20 +++++++++++++++
 src/hooks/forge/useForgeFloor.js   | 41 ++++++++++++++++--------------
 src/hooks/forge/useForgeHeatmap.js |  1 -
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/public/config.json b/public/config.json
index 3d0a81e..65d0c7c 100644
--- a/public/config.json
+++ b/public/config.json
@@ -19,6 +19,26 @@
       "range": [0, 1000],
       "color": ["#FFFFE0", "#FFD700"],
       "unit": "ppm"
+    },
+    "CH2O": {
+      "range": [0, 100],
+      "color": ["#90EE90", "#006400"],
+      "unit": "ppb"
+    },
+    "PM1": {
+      "range": [0, 20],
+      "color": ["#E6E6FA", "#800080"],
+      "unit": "µg/m³"
+    },
+    "PM2.5": {
+      "range": [0, 55],
+      "color": ["#FFB6C1", "#FF0000"],
+      "unit": "µg/m³"
+    },
+    "PM10": {
+      "range": [0, 150],
+      "color": ["#FFDDC1", "#FF1493"],
+      "unit": "µg/m³"
     }
   }
 }
diff --git a/src/hooks/forge/useForgeFloor.js b/src/hooks/forge/useForgeFloor.js
index ea9fee4..60cf9f7 100644
--- a/src/hooks/forge/useForgeFloor.js
+++ b/src/hooks/forge/useForgeFloor.js
@@ -53,7 +53,7 @@ function useForgeFloor() {
   });
 
   const hideDbIdFn = () => {
-    const tree = forgeViewer.value.model.getInstanceTree();
+    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]));
@@ -69,26 +69,29 @@ function useForgeFloor() {
   };
 
   const showLevels = () => {
-    const currentFloorName = selectedFloor.value.title.replaceAll(/U/gi, "");
+    if (forgeViewer.value) {
+      const currentFloorName =
+        selectedFloor.value?.title?.replaceAll(/U/gi, "") || "";
 
-    const level = levelList.value.find(({ name }) =>
-      name.includes(currentFloorName)
-    );
-    console.log(currentFloorName, level);
+      const level = levelList.value.find(({ name }) =>
+        name.includes(currentFloorName)
+      );
+      console.log(currentFloorName, level);
 
-    if (!level) {
-      forgeViewer.value.impl.toggleGhosting(true);
-      forgeViewer.value.fitToView([forgeViewer.value.model.getRootId()]);
-      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);
-      forgeViewer.value.fitToView([level.dbId]);
+      if (!level) {
+        forgeViewer.value?.impl.toggleGhosting(true);
+        forgeViewer.value?.fitToView([forgeViewer.value.model.getRootId()]);
+        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);
+        forgeViewer.value.fitToView([level.dbId]);
+      }
     }
   };
 
diff --git a/src/hooks/forge/useForgeHeatmap.js b/src/hooks/forge/useForgeHeatmap.js
index 1abbfe5..3f9166a 100644
--- a/src/hooks/forge/useForgeHeatmap.js
+++ b/src/hooks/forge/useForgeHeatmap.js
@@ -131,7 +131,6 @@ export default function useForgeHeatmap() {
   watch(
     data,
     (newValue, oldValue) => {
-      debugger;
       dataVizExtn.value?.removeSurfaceShading();
       createHeatMap(route.query.gas);
     },

From 5db42f4054034f9a9d2ca5d8b6fcca48117e3ad5 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Sun, 27 Oct 2024 22:49:49 -0400
Subject: [PATCH 7/9] =?UTF-8?q?=E4=BF=AE=E6=AD=A3production=E8=B7=AF?=
 =?UTF-8?q?=E5=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/useHeatmapBarStore.js           | 6 +++++-
 src/views/system/components/SystemCard.vue | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/stores/useHeatmapBarStore.js b/src/stores/useHeatmapBarStore.js
index 39c6ea5..6533620 100644
--- a/src/stores/useHeatmapBarStore.js
+++ b/src/stores/useHeatmapBarStore.js
@@ -10,7 +10,11 @@ const useHeatmapBarStore = defineStore("heatmap", () => {
   const heatmapConfig = computed(() => allHeatMaps.value[route.query?.gas]);
 
   const getConfig = async () => {
-    const res = await axios.get("/config.json");
+    const api =
+      import.meta.env.MODE === "production"
+        ? "/dist/config.json"
+        : "/config.json";
+    const res = await axios.get(api);
     console.log(res);
     allHeatMaps.value = res.data.heatmap;
   };
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index f2fa590..89a18b4 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -8,6 +8,9 @@ const { showData } = useSystemShowData()
 
 
 const fitToView = (forge_dbid) => {
+  // console.log(forge_dbid)
+  // window.NOP_VIEWER.hide(forge_dbid + 3);
+  // window.NOP_VIEWER.impl.invalidate(true);
   window.NOP_VIEWER.fitToView([forge_dbid])
 }
 </script>
@@ -35,7 +38,7 @@ const fitToView = (forge_dbid) => {
                     <span>{{ device.device_status }}</span>
                   </div>
                   <button class="btn-text border-0 "
-                    @click.stop.prevent="(e) => getCurrentInfoModalData(e, { left: e.clientX, top: e.clientY }, device)">{{
+                    @click.prevent="(e) => getCurrentInfoModalData(e, { left: e.clientX, top: e.clientY }, device)">{{
                       $t("system.details") }}</button>
                 </div>
               </div>

From afe89dde888da0bfc81c330ad99e23fbaef9add6 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Mon, 28 Oct 2024 15:05:46 +0800
Subject: [PATCH 8/9] =?UTF-8?q?=E4=BB=8B=E9=9D=A2=E8=AA=BF=E6=95=B4=20|=20?=
 =?UTF-8?q?=E6=AD=B7=E5=8F=B2=E8=B3=87=E6=96=99:sidebar=E6=90=9C=E5=B0=8B?=
 =?UTF-8?q?=E7=AF=A9=E9=81=B8=20|=20button-group=E5=8A=A0=E4=B8=8A?=
 =?UTF-8?q?=E6=A8=A3=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .env.production                               |   4 +-
 src/assets/index.css                          |  12 ++
 src/components/customUI/ButtonGroup.vue       |  34 +++-
 src/components/customUI/Pagination.vue        |   2 +-
 src/components/customUI/Table.vue             |   9 +-
 src/components/navbar/NavbarItem.vue          | 131 +++++++++-----
 src/config/cn.json                            |   3 +-
 src/config/tw.json                            |   3 +-
 src/config/us.json                            | 167 +++++++++---------
 src/fontawsomeIconRegister.js                 |   6 +-
 .../components/AssetTableAddModal.vue         |   2 +-
 .../components/AssetTableModalLeftInfo.vue    |   3 +-
 .../components/AssetTableModalLeftInfoIoT.vue |   3 +-
 .../components/AssetTableModalRightInfo.vue   |   7 +-
 .../accountManagement/components/Account.vue  |  26 ++-
 .../accountManagement/components/Role.vue     |   8 +-
 .../components/AlertQuery/AlertSearch.vue     |   5 +-
 .../AlertSetting/AlertNotifyTableAddModal.vue |   2 +-
 .../AlertOutliersTableAddModal.vue            |   2 +-
 .../dashboard/components/DashboardSysCard.vue |  41 +++--
 .../graphManagement/components/GraphModal.vue |   6 +-
 .../components/HistoryActionButton.vue        |   8 +-
 .../history/components/HistorySearchTime.vue  |  16 +-
 .../history/components/HistorySidebar.vue     |  29 ++-
 .../components/OperationActionButton.vue      |   9 +-
 .../operation/components/OperationSearch.vue  |   2 +-
 .../components/OperationTableModal.vue        |   2 +-
 28 files changed, 334 insertions(+), 210 deletions(-)

diff --git a/.env.development b/.env.development
index 70caef8..013064f 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
 VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
-VITE_FORGE_BASEURL = "http://localhost:5173"
\ No newline at end of file
+VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"
\ No newline at end of file
diff --git a/.env.production b/.env.production
index a7e4527..013064f 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
-VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
-VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
\ No newline at end of file
+VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
+VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"
\ No newline at end of file
diff --git a/src/assets/index.css b/src/assets/index.css
index b6ae254..34de754 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -65,4 +65,16 @@
   .btn-text-without-border {
     @apply active:border-0 focus:border-0 focus-visible:border-0 active:outline-none focus:outline-none focus-visible:outline-none;
   }
+
+  .btn-add {
+    @apply text-white border border-cyan-400 bg-cyan-400 hover:bg-[theme("colors.cyan.500")]
+  }
+
+  .btn-search {
+    @apply text-white border border-sky-400 bg-sky-400 hover:bg-[theme("colors.sky.500")]
+  }
+
+  .btn-export {
+    @apply text-white border border-emerald-400 bg-emerald-400 hover:bg-[theme("colors.emerald.500")]
+  }
 }
\ No newline at end of file
diff --git a/src/components/customUI/ButtonGroup.vue b/src/components/customUI/ButtonGroup.vue
index 4a90fd6..5235a03 100644
--- a/src/components/customUI/ButtonGroup.vue
+++ b/src/components/customUI/ButtonGroup.vue
@@ -5,24 +5,40 @@ import { twMerge } from "tailwind-merge";
 const props = defineProps({
   items: Array,
   withLine: Boolean,
+  withBtnClass: { type: Boolean, default: false },
   // this is for change active button
   onclick: Function,
-  className: String
+  className: String,
 });
 </script>
 
 <template>
   <div class="flex flex-wrap text-white items-center">
-    <button v-for="item in items" :class="twMerge(
-      'btn my-1',
-      item.active ? 'btn-success' : 'btn-outline-success',
-      withLine ? 'line' : 'mx-2 first:ml-0 ',
-      className
-    )
-      " :disabled="item.disabled" :key="item.key" @click.stop.prevent="(e) => {
+    <button
+      v-for="item in items"
+      :class="
+        twMerge(
+          'btn my-1',
+          withBtnClass
+            ? item.btn
+            : item.active
+            ? 'btn-success'
+            : 'btn-outline-success',
+          withLine ? 'line' : 'mx-2 first:ml-0 ',
+          className
+        )
+      "
+      :disabled="item.disabled"
+      :key="item.key"
+      @click.stop.prevent="
+        (e) => {
           item.onClick ? item.onClick(e, item) : onclick(e, item);
         }
-        ">
+      "
+    >
+      <span v-if="withBtnClass">
+        <font-awesome-icon :icon="['fas', item.icon]" class=" text-lg" />
+      </span>
       <slot name="buttonContent" v-bind="{ record: item }">
         {{ item.title }}
       </slot>
diff --git a/src/components/customUI/Pagination.vue b/src/components/customUI/Pagination.vue
index c7cb3fb..d95ed64 100644
--- a/src/components/customUI/Pagination.vue
+++ b/src/components/customUI/Pagination.vue
@@ -123,7 +123,7 @@ const pageInput = computed(() => {
 
     <span
       v-if="totalPage < 6"
-      class="absolute -bottom-8 -translate-x-1/2 text-base text-center"
+      class="absolute -bottom-8 text-base text-center"
     >
       {{ dataSource.length }} {{ $t("table.in_otal") }}</span
     >
diff --git a/src/components/customUI/Table.vue b/src/components/customUI/Table.vue
index 2b1335c..eb97e06 100644
--- a/src/components/customUI/Table.vue
+++ b/src/components/customUI/Table.vue
@@ -161,7 +161,7 @@ watch(
   <div :class="withStyle ? 'content-box' : 'py-5'">
     <div class="content-decoration">
       <slot name="beforeTable"></slot>
-      <form ref="form">
+      <form ref="form " class="overflow-x-auto">
         <table
           :class="
             twMerge(
@@ -322,14 +322,17 @@ watch(
 <style lang="css" scoped>
 /**資料框**/
 .content-box {
-  @apply border border-info p-1 relative mb-4 bg-transparent;
+  @apply border border-info p-1 relative mb-4 bg-transparent ;
 }
 
 .content-box .table {
   @apply rounded-none;
 }
 
-.table th,
+.table th {
+  @apply bg-cyan-600 bg-opacity-30 border-r border-b border-white text-lg font-semibold text-white text-center px-2 py-3;
+}
+
 .table td {
   @apply border-r border-b border-white text-lg font-semibold text-white text-center px-2 py-3;
 }
diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue
index 718a1aa..82b01d4 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -5,10 +5,13 @@ import { getAuth, getAllSysSidebar } from "@/apis/building";
 import useBuildingStore from "@/stores/useBuildingStore";
 import useUserInfoStore from "@/stores/useUserInfoStore";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { twMerge } from "tailwind-merge";
+
 const { locale } = useI18n();
 const store = useUserInfoStore();
 const buildingStore = useBuildingStore();
-
+const route = useRoute();
 const openKeys = ref([]); // 追蹤當前打開的子菜單
 
 const iniFroList = async () => {
@@ -18,9 +21,9 @@ const iniFroList = async () => {
     res.data.map((d) =>
       AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
         ? {
-          ...d,
-          ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
-        }
+            ...d,
+            ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
+          }
         : d
     )
   );
@@ -71,38 +74,93 @@ onMounted(() => {
 <template>
   <ul class="px-1 menu-box my-2">
     <li class="flex flex-col items-center justify-center">
-      <router-link :to="{ name: 'dashboard' }" class="flex flex-col justify-center items-center btn-group text-white">
-        <font-awesome-icon :icon="['fas', 'home']" size="2x" class="w-10 m-auto" />
+      <router-link
+        :to="{ name: 'dashboard' }"
+        class="flex flex-col justify-center items-center btn-group text-white"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'home']"
+          size="2x"
+          class="w-10 m-auto"
+        />
         {{ $t("home") }}
       </router-link>
     </li>
-    <li v-for="page in authPages" class="flex flex-col items-center justify-center">
-      <a v-if="page.authCode === 'PF1'" @click="showDrawer"
-        class="flex flex-col justify-center items-center btn-group text-white cursor-pointer">
-        <font-awesome-icon :icon="['fas', page.icon]" size="2x" class="w-10 m-auto" />
+    <li
+      v-for="page in authPages"
+      class="flex flex-col items-center justify-center"
+    >
+      <a
+        v-if="page.authCode === 'PF1'"
+        @click="showDrawer"
+        :class="
+          twMerge(
+            'flex flex-col justify-center items-center btn-group text-white cursor-pointer',
+            route.fullPath.includes('/system')
+              ? 'router-link-active router-link-exact-active'
+              : ''
+          )
+        "
+      >
+        <font-awesome-icon
+          :icon="['fas', page.icon]"
+          size="2x"
+          class="w-10 m-auto"
+        />
         {{ page.subName }}
       </a>
-      <router-link v-else :to="page.navigate" type="link"
-        class="flex flex-col justify-center items-center btn-group text-white">
-        <font-awesome-icon :icon="['fas', page.icon]" size="2x" class="w-10 m-auto" />
+      <router-link
+        v-else
+        :to="page.navigate"
+        type="link"
+        class="flex flex-col justify-center items-center btn-group text-white"
+      >
+        <font-awesome-icon
+          :icon="['fas', page.icon]"
+          size="2x"
+          class="w-10 m-auto"
+        />
         {{ page.subName }}
       </router-link>
     </li>
   </ul>
-  <a-drawer :width="250" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
-    :maskStyle="{ opacity: 0 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
-    <a-menu mode="inline" theme="dark" class="text-lg bg-transparent" :openKeys="openKeys"
-      @openChange="handleOpenChange">
-      <a-sub-menu v-for="main in buildingStore.mainSubSys" :key="main.main_system_tag" :title="main.full_name">
-        <a-menu-item v-for="sub in main.history_Sub_systems" :key="sub.sub_system_tag" @click="() => onClose()">
-          <router-link :to="{
-            name: 'sub_system',
-            params: {
-              main_system_id: main.main_system_tag,
-              sub_system_id: sub.sub_system_tag,
-              floor_id: 'main'
-            },
-          }">
+  <a-drawer
+    :width="250"
+    placement="left"
+    :open="open"
+    :closable="false"
+    @close="onClose"
+    class="sub-drawer"
+    :maskStyle="{ opacity: 0 }"
+    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
+  >
+    <a-menu
+      mode="inline"
+      theme="dark"
+      class="text-lg bg-transparent"
+      :openKeys="openKeys"
+      @openChange="handleOpenChange"
+    >
+      <a-sub-menu
+        v-for="main in buildingStore.mainSubSys"
+        :key="main.main_system_tag"
+        :title="main.full_name"
+      >
+        <a-menu-item
+          v-for="sub in main.history_Sub_systems"
+          :key="sub.sub_system_tag"
+          @click="() => onClose()"
+        >
+          <router-link
+            :to="{
+              name: 'sub_system',
+              params: {
+                main_system_id: main.main_system_tag,
+                sub_system_id: sub.sub_system_tag,
+                floor_id: 'main',
+              },
+            }"
+          >
             {{ sub.full_name }}
           </router-link>
         </a-menu-item>
@@ -115,24 +173,13 @@ onMounted(() => {
   color: #93c0dc;
 }
 
-:deep(.ant-menu-submenu-title:active) {
-  color: #35759d !important;
-  background-color: transparent !important;
-}
-
-:deep .ant-menu-item:not(.ant-menu-item-selected) {
-  &::before {
-    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10 grayscale;
-    content: "";
-    background: url(@ASSET/img/chart-data-background03.svg) center center;
-  }
-
-  &:active {
-    background-color: transparent !important;
+:deep(.ant-menu-submenu-selected) {
+  .ant-menu-submenu-title {
+    @apply text-blue-300 ;
   }
 }
 
-:deep .ant-menu-item-selected {
+:deep(.ant-menu-item-selected) {
   @apply bg-transparent relative;
 
   &::before {
diff --git a/src/config/cn.json b/src/config/cn.json
index c59069d..9ed1f53 100644
--- a/src/config/cn.json
+++ b/src/config/cn.json
@@ -180,7 +180,8 @@
     "new_category": "新类别",
     "index": "编号",
     "oriOrgName": "档案",
-    "operation": "功能"
+    "operation": "功能",
+    "upload": "图资上传"
   },
   "assetManagement": {
     "title": "资产管理",
diff --git a/src/config/tw.json b/src/config/tw.json
index c09a5ed..81c4a60 100644
--- a/src/config/tw.json
+++ b/src/config/tw.json
@@ -180,7 +180,8 @@
     "new_category": "新類別",
     "index": "編號",
     "oriOrgName": "檔案",
-    "operation": "功能"
+    "operation": "功能",
+    "upload": "圖資上傳"
   },
   "assetManagement": {
     "title": "資產管理",
diff --git a/src/config/us.json b/src/config/us.json
index 170c361..f4e198c 100644
--- a/src/config/us.json
+++ b/src/config/us.json
@@ -22,9 +22,9 @@
     "category": "Category",
     "value": "Value",
     "date": "Record Time",
-    "point": "Point",
+    "point": "Character",
     "combinations": "Common combinations",
-    "date_range": "Date range",
+    "date_range": "Date Range",
     "time_range": "Time interval",
     "start_date": "Start date",
     "start_time": "Start time",
@@ -73,26 +73,26 @@
     "confirm": "Confirm"
   },
   "alert": {
-    "query_title": "Alarm record query",
-    "setting_title": "Alarm settings",
-    "offnormal": "off normal",
-    "normal": "normal",
-    "unacked": "unacked",
-    "acked": "acked",
-    "30days": "Last 30 days",
-    "start_date": "Start date",
-    "end_date": "End date",
-    "building_and_floor": "Building - floor",
+    "query_title": "Alarm Record Query",
+    "setting_title": "Alarm Settings",
+    "offnormal": "Off Normal",
+    "normal": "Normal",
+    "unacked": "Unacked",
+    "acked": "Acked",
+    "30days": "Last 30 Days",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "building_and_floor": "Building - Floor",
     "uuid": "Exception ID",
     "alarmClass": "Exception Category",
-    "device_name": "Device name",
-    "device_number": "Device number",
-    "date": "Occurrence date",
-    "time": "Occurrence time",
-    "error_msg": "Abnormal cause",
+    "device_name": "Device Name",
+    "device_number": "Device Number",
+    "date": "Occurrence Date",
+    "time": "Occurrence Time",
+    "error_msg": "Abnormal Cause",
     "ack_state": "Ack Confirm",
-    "repair_order_number": "Repair order number",
-    "repair_order": "Repair order",
+    "repair_order_number": "Repair Order Number",
+    "repair_order": "Repair Order",
     "form_number": "Form Number",
     "start_time": "Estimated Start Time",
     "item": "Item",
@@ -102,59 +102,59 @@
     "repair_item_code": "Repair Item Code (Device Number)",
     "responsible_vendor": "Responsible Vendor",
     "status": "Status",
-    "not_completed": "Not completed",
+    "not_completed": "Not Completed",
     "completed": "Completed",
     "worker_id": "Worker ID",
     "notice": "Notice",
     "result_description": "Result Description",
     "upload_file": "Upload File",
     "enable": "Enable",
-    "not_enabled": "Not enabled",
+    "not_enabled": "Not Enabled",
     "qualifications": "Qualifications",
-    "upper_limit": "Upper limit",
-    "lower_limit": "Lower limit",
-    "highDelay": "Max duration (s)",
-    "lowDelay": "Min duration (s)",
-    "warning_method": "Warning method",
-    "warning_time": "Warning time",
+    "upper_limit": "Upper Limit",
+    "lower_limit": "Lower Limit",
+    "highDelay": "Max Duration (s)",
+    "lowDelay": "Min Duration (s)",
+    "warning_method": "Warning Method",
+    "warning_time": "Warning Time",
     "operation": "Function",
-    "alarm_settings": "Abnormal alarm settings",
-    "time_setting": "Time setting",
-    "yes": "yes",
-    "no": "no",
-    "no_notify": "No notification",
+    "alarm_settings": "Abnormal Alarm Settings",
+    "time_setting": "Time Setting",
+    "yes": "Yes",
+    "no": "No",
+    "no_notify": "No Notification",
     "notify_name": "Name",
-    "notify_phone": "Phone number",
-    "notify_email": "email",
-    "notify_items": "Notification items",
-    "notify_list": "Notification list",
-    "choose": "choose"
+    "notify_phone": "Phone Number",
+    "notify_email": "Email",
+    "notify_items": "Notification Items",
+    "notify_list": "Notification List",
+    "choose": "Choose"
   },
   "operation": {
-    "title": "Operation and maintenance management",
+    "title": "Operation And Maintenance Management",
     "project": "Project",
     "location": "Location",
     "uuid": "Exception ID",
     "form_number": "Form Number",
-    "device_name": "Device name",
+    "device_name": "Device Name",
     "status": "Status",
     "staff": "Staff",
-    "start_time": "Estimated start time",
-    "upload": "File upload",
-    "finish_time": "Completion time",
+    "start_time": "Estimated Start Time",
+    "upload": "File Upload",
+    "finish_time": "Completion Time",
     "operation": "Function",
-    "vendor": "company",
-    "contact_person": "Contact person",
+    "vendor": "Company",
+    "contact_person": "Contact Person",
     "phone": "Phone",
-    "email": "email",
-    "created_at": "Creation date",
-    "maintainance": "Maintainance",
+    "email": "Email",
+    "created_at": "Creation Date",
+    "maintenance": "Maintenance",
     "repair": "Repair",
     "company_info": "Company Info",
     "repair_item": "Repair Item",
     "repair_item_code": "Repair Item Code (Device Number)",
     "responsible_vendor": "Responsible Vendor",
-    "not_completed": "Not completed",
+    "not_completed": "Not Completed",
     "completed": "Completed",
     "worker_id": "Worker ID",
     "notice": "Notice",
@@ -163,36 +163,37 @@
     "name": "Name",
     "city": "City",
     "address": "Address",
-    "tax_id_number": "tax ID number",
+    "tax_id_number": "Tax ID Number",
     "remark": "Remark",
     "date": "Date",
-    "serial": "Order number",
+    "serial": "Order Number",
     "today": "Today",
     "yesterday": "Yesterday",
-    "start_created_at": "Start date",
-    "end_created_at": "End date",
+    "start_created_at": "Start Date",
+    "end_created_at": "End Date",
     "enter_text": "Please enter text",
     "enter_serial": "Please enter the order number"
   },
   "graphManagement": {
-    "title": "Data and Publication Management",
+    "title": "Data And Publication Management",
     "category": "Category",
-    "new_category": "New category",
-    "index": "serial number",
-    "oriOrgName": "file",
-    "operation": "Function"
+    "new_category": "New Category",
+    "index": "Serial Number",
+    "oriOrgName": "File",
+    "operation": "Function",
+    "upload": "Upload"
   },
   "assetManagement": {
     "title": "Asset Management",
-    "add_category": "Add category",
+    "add_category": "Add Category",
     "system_name": "Name",
     "system_value": "Code",
     "system_parent": "Category",
-    "device_number": "Device number",
-    "device_name": "Device name",
-    "asset_number": "Asset number",
+    "device_number": "Device Number",
+    "device_name": "Device Name",
+    "asset_number": "Asset Number",
     "floor": "Location",
-    "add_floor": "Add floor",
+    "add_floor": "Add Floor",
     "add_floor_text": "Floor map must be uploaded first",
     "device_coordinate": "Coordinate",
     "brand_and_modal": "Brand/Model",
@@ -200,44 +201,44 @@
     "modal": "Model",
     "company_and_contact": "Company/Contact Person",
     "company": "Company",
-    "buying_date": "Purchase time",
-    "oriFile": "File upload",
-    "created_at": "Creation time",
+    "buying_date": "Purchase Time",
+    "oriFile": "File Upload",
+    "created_at": "Creation Time",
     "operation": "Function",
-    "device_list": "Device list",
-    "edit_device": "Edit device",
-    "add_device": "Add device",
+    "device_list": "Device List",
+    "edit_device": "Edit Device",
+    "add_device": "Add Device",
     "operate_text": "Display name",
     "fill_text": "Please fill it in by system personnel",
-    "equipment_point": "Equipment point",
+    "equipment_point": "Equipment Point",
     "point": "Point",
-    "add_sensor": "Add new sensor",
-    "associated_device": "Associated devices",
+    "add_sensor": "Add New Sensor",
+    "associated_device": "Associated Devices",
     "choose": "Choose",
-    "index": "serial number",
-    "floor_plan": "Floor plan"
+    "index": "Serial Number",
+    "floor_plan": "Floor Plan"
   },
   "accountManagement": {
     "account_title": "Account Management",
     "role_title": "Role Management",
-    "index": "serial number",
+    "index": "Serial Number",
     "name": "Name",
     "account": "Account",
     "password": "Password",
     "role": "Role",
-    "role_name": "Role name",
-    "role_permissions": "Role permissions",
-    "role_permissions_setting": "Role permissions settings",
-    "permission_name": "Permission name",
-    "basic_permissions": "Basic permissions",
-    "production_permissions": "Production setting permissions",
-    "email": "email",
+    "role_name": "Role Name",
+    "role_permissions": "Role Permissions",
+    "role_permissions_setting": "Role Permissions Settings",
+    "permission_name": "Permission Name",
+    "basic_permissions": "Basic Ppermissions",
+    "production_permissions": "Production Setting Permissions",
+    "email": "Email",
     "phone": "Phone",
-    "created_at": "Created time",
+    "created_at": "Created Time",
     "operation": "Function",
     "name_placeholder": "Please enter user name",
     "role_placeholder": "Please enter the role name",
-    "change_password": "Change password",
+    "change_password": "Change Password",
     "choose": "Choose"
   },
   "button": {
diff --git a/src/fontawsomeIconRegister.js b/src/fontawsomeIconRegister.js
index 4d6b408..a2eae5a 100644
--- a/src/fontawsomeIconRegister.js
+++ b/src/fontawsomeIconRegister.js
@@ -56,7 +56,8 @@ import {
   faWind,
   faEye,
   faEyeSlash,
-  faGlobe
+  faGlobe,
+  faDownload
 } from "@fortawesome/free-solid-svg-icons";
 
 /* add icons to the library */
@@ -114,7 +115,8 @@ library.add(
   faWind,
   faEye,
   faEyeSlash,
-  faGlobe
+  faGlobe,
+  faDownload
 );
 
 export default library;
diff --git a/src/views/AssetManagement/components/AssetTableAddModal.vue b/src/views/AssetManagement/components/AssetTableAddModal.vue
index cfc13dc..9c424fd 100644
--- a/src/views/AssetManagement/components/AssetTableAddModal.vue
+++ b/src/views/AssetManagement/components/AssetTableAddModal.vue
@@ -102,7 +102,7 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
   <Modal
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
index b7e9d27..0f90497 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfo.vue
@@ -193,9 +193,10 @@ const openCompanyAddModal = () => {
     <OperationTableModal type="asset" />
     <button
       type="button"
-      class="btn btn-success btn-sm ml-2 mt-7"
+      class="btn btn-add ml-2 mt-7"
       @click="openCompanyAddModal"
     >
+      <font-awesome-icon :icon="['fas', 'plus']" />
       {{ $t("button.add") }}
     </button>
   </div>
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
index 0331363..96f54d1 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue
@@ -192,9 +192,10 @@ const deleteItem = (value) => {
       </span>
       <button
         type="button"
-        class="btn btn-sm btn-success"
+        class="btn btn-sm btn-add"
         @click.stop.prevent="openModal"
       >
+      <font-awesome-icon :icon="['fas', 'plus']" />
         {{ $t("assetManagement.add_sensor") }}
       </button>
     </div>
diff --git a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
index c944e97..caa94ad 100644
--- a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
+++ b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
@@ -169,11 +169,8 @@ const onCancel = () => {
       >
         <template #topLeft>{{ $t("assetManagement.floor") }}</template>
       </Select>
-      <button
-        type="button"
-        class="btn btn-success mt-10 ml-5"
-        @click="openModal"
-      >
+      <button type="button" class="btn btn-add mt-10 ml-5" @click="openModal">
+        <font-awesome-icon :icon="['fas', 'plus']" />
         {{ $t("assetManagement.add_floor") }}
       </button>
     </div>
diff --git a/src/views/accountManagement/components/Account.vue b/src/views/accountManagement/components/Account.vue
index 09d3ba8..dff89f2 100644
--- a/src/views/accountManagement/components/Account.vue
+++ b/src/views/accountManagement/components/Account.vue
@@ -142,13 +142,6 @@ const removeAccount = async (id) => {
   <AccountPasswordModal :reset="resetModalForm" :account="formState" />
   <Table :columns="columns" :dataSource="dataSource" :loading="loading">
     <template #beforeTable>
-      <button
-        class="btn btn-success mr-3"
-        @click.stop.prevent="() => openModal(null)"
-      >
-        <font-awesome-icon :icon="['fas', 'plus']" />
-        {{ $t("button.add") }}
-      </button>
       <div class="flex items-center mb-8">
         <Input
           :placeholder="t('accountManagement.name_placeholder')"
@@ -161,18 +154,21 @@ const removeAccount = async (id) => {
           name="Role_full_name"
           :value="searchData"
         />
-        <button
-          class="btn btn-outline-success ml-5"
-          @click.stop.prevent="onSearch"
-        >
+        <button class="btn btn-search ml-5" @click.stop.prevent="onSearch">
+          <font-awesome-icon :icon="['fas', 'search']" />
           {{ $t("button.search") }}
         </button>
-        <button
-          class="btn btn-outline-success mx-4"
-          @click.stop.prevent="onReset"
-        >
+        <button class="btn btn-neutral mx-4" @click.stop.prevent="onReset">
           {{ $t("button.reset") }}
         </button>
+
+        <button
+          class="btn btn-add ml-10"
+          @click.stop.prevent="() => openModal(null)"
+        >
+          <font-awesome-icon :icon="['fas', 'plus']" />
+          {{ $t("button.add") }}
+        </button>
       </div>
     </template>
     <template #bodyCell="{ record, column, index }">
diff --git a/src/views/accountManagement/components/Role.vue b/src/views/accountManagement/components/Role.vue
index 557b6c5..9a593a0 100644
--- a/src/views/accountManagement/components/Role.vue
+++ b/src/views/accountManagement/components/Role.vue
@@ -102,13 +102,11 @@ const onSearch = () => {
           name="Full_name"
           :value="searchRole"
         />
-        <button
-          class="btn btn-outline-info mx-3"
-          @click.stop.prevent="onSearch"
-        >
+        <button class="btn btn-search mx-3" @click.stop.prevent="onSearch">
+          <font-awesome-icon :icon="['fas', 'search']" />
           {{ $t("button.search") }}
         </button>
-        <button class="btn btn-success ml-10" @click.stop.prevent="add">
+        <button class="btn btn-add ml-10" @click.stop.prevent="add">
           <font-awesome-icon :icon="['fas', 'plus']" /> {{ $t("button.add") }}
         </button>
       </div>
diff --git a/src/views/alert/components/AlertQuery/AlertSearch.vue b/src/views/alert/components/AlertQuery/AlertSearch.vue
index e9e8a9d..eda135d 100644
--- a/src/views/alert/components/AlertQuery/AlertSearch.vue
+++ b/src/views/alert/components/AlertQuery/AlertSearch.vue
@@ -15,7 +15,10 @@ const { search } = inject("alert_table");
       <AlertSearchNormalBtns />
       <AlertSearchAckBtns />
       <AlertSearchTimeRange />
-      <button class="btn btn-success ml-8" @click.stop.prevent="search">{{ $t("button.query")}}</button>
+      <button class="btn btn-search ml-8" @click.stop.prevent="search">
+        <font-awesome-icon :icon="['fas', 'search']" class=" text-lg" />
+        {{ $t("button.search")}}
+      </button>
     </div>
     <div class="w-full flex flex-wrap items-center justify-start">
       <AlertSearchTypesButton />
diff --git a/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue b/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
index 4252752..d8c074a 100644
--- a/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
+++ b/src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue
@@ -88,7 +88,7 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
   <Modal
diff --git a/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue b/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
index be648cc..1e8a749 100644
--- a/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
+++ b/src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue
@@ -127,7 +127,7 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
   <Modal
diff --git a/src/views/dashboard/components/DashboardSysCard.vue b/src/views/dashboard/components/DashboardSysCard.vue
index 3960ff9..daeaded 100644
--- a/src/views/dashboard/components/DashboardSysCard.vue
+++ b/src/views/dashboard/components/DashboardSysCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { twMerge } from "tailwind-merge";
 const router = useRouter();
 // 假資料
 const mockData = ref([
@@ -33,42 +34,42 @@ const mockData = ref([
     sub_system_tag: "ECP3",
   },
   {
-    title: "Elevator system",
+    title: "Elevator System",
     icon: "building",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "High voltage switchboard",
+    title: "High Voltage Switchboard",
     icon: "charging-station",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Low voltage switchboard",
+    title: "Low Voltage Switchboard",
     icon: "charging-station",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Water supply system",
+    title: "Water Supply System",
     icon: "tint",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Sewage and wastewater equipment",
+    title: "Sewage And Wastewater Equipment",
     icon: "water",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Emergency generator",
+    title: "Emergency Generator",
     icon: "car-battery",
     isError: false,
     main_system_tag: null,
@@ -82,35 +83,35 @@ const mockData = ref([
     sub_system_tag: null,
   },
   {
-    title: "CCTV system",
+    title: "CCTV System",
     icon: "video",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Access control system",
+    title: "Access Control System",
     icon: "door-open",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Shutdown system",
+    title: "Shutdown System",
     icon: "car",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Emergency rescue system",
+    title: "Emergency Rescue System",
     icon: "exclamation-triangle",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Air supply and exhaust system",
+    title: "Air Supply Aand Exhaust System",
     icon: "wind",
     isError: false,
     main_system_tag: null,
@@ -124,7 +125,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
     params: {
       main_system_id: mainSystemId,
       sub_system_id: subSystemId,
-      floor_id: 'main'
+      floor_id: "main",
     },
   });
 };
@@ -135,10 +136,14 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
     <div
       v-for="(item, index) in mockData"
       :key="index"
-      :class="[
-    'w-full sm:w-1/2 lg:w-1/4 relative my-2 cursor-pointer',
-    item.sub_system_tag ? '' : 'grayscale opacity-70 cursor-not-allowed'
-  ]"
+      :class="
+        twMerge(
+          'w-full sm:w-1/2 lg:w-1/4 relative my-2 ',
+          item.sub_system_tag
+            ? 'saturate-200 cursor-pointer text-base'
+            : 'grayscale opacity-70 cursor-not-allowed text-sm'
+        )
+      "
       @click="navigateToSubSystem(item.main_system_tag, item.sub_system_tag)"
     >
       <img
@@ -155,7 +160,9 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
           ></FontAwesomeIcon>
         </div>
         <div class="icon-text">
-          <div class="text-slate-300 text-sm">{{ item.title }}</div>
+          <div class="text-slate-300">
+            {{ item.title }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/views/graphManagement/components/GraphModal.vue b/src/views/graphManagement/components/GraphModal.vue
index 1260374..ae0e807 100644
--- a/src/views/graphManagement/components/GraphModal.vue
+++ b/src/views/graphManagement/components/GraphModal.vue
@@ -8,6 +8,8 @@ import {
   addGraphTableDataWithoutSubSys,
   editGraphTableDataWithoutSubSys,
 } from "@/apis/graph";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
 
 const props = defineProps({
@@ -121,10 +123,10 @@ watch(
 </script>
 
 <template>
-  <button class="btn btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
-  <Modal id="graph_add_item" title="圖資上傳" :onCancel="onCancel" width="800">
+  <Modal id="graph_add_item" :title="t('graphManagement.upload')" :onCancel="onCancel" width="800">
     <template #modalContent>
       <form ref="form" class="mt-5">
         <div class="mb-2">
diff --git a/src/views/history/components/HistoryActionButton.vue b/src/views/history/components/HistoryActionButton.vue
index 59ab1fa..6ac9b90 100644
--- a/src/views/history/components/HistoryActionButton.vue
+++ b/src/views/history/components/HistoryActionButton.vue
@@ -76,15 +76,19 @@ const isSearchButtonDisabled = computed(() => {
 
 const submitBtns = computed(() => [
   {
-    title: t("button.query"),
+    title: t("button.search"),
     key: "submit",
     active: false,
     onClick: submit,
+    icon: "search",
+    btn: "btn-search",
     disabled: isSearchButtonDisabled.value,
   },
   {
     title:  t("button.export"),
     key: "export",
+    icon: "download",
+    btn: "btn-export",
     active: false,
     onClick: (e) => submit(e, "export"),
     disabled: isSearchButtonDisabled.value,
@@ -120,7 +124,7 @@ watch(
     status="info"
     :cancel="cancelToastOpen"
   />
-  <ButtonGroup class="ml-5" :items="submitBtns" :withLine="false" />
+  <ButtonGroup class="ml-5" :items="submitBtns" :withLine="false" :withBtnClass="true"/>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/history/components/HistorySearchTime.vue b/src/views/history/components/HistorySearchTime.vue
index e766ae8..6771d8a 100644
--- a/src/views/history/components/HistorySearchTime.vue
+++ b/src/views/history/components/HistorySearchTime.vue
@@ -29,14 +29,14 @@ const initializeItems = () => {
         : true,
       Type: 1,
     },
-    {
-      title: t("history.time_range"),
-      key: "startMonthTime",
-      active: searchParams.value.Type
-        ? parseInt(searchParams.value.Type) === 2
-        : false,
-      Type: 2,
-    },
+    // {
+    //   title: t("history.time_range"),
+    //   key: "startMonthTime",
+    //   active: searchParams.value.Type
+    //     ? parseInt(searchParams.value.Type) === 2
+    //     : false,
+    //   Type: 2,
+    // },
   ]);
 
   itemsForStartTime.value = [
diff --git a/src/views/history/components/HistorySidebar.vue b/src/views/history/components/HistorySidebar.vue
index 8b36257..d8060a6 100644
--- a/src/views/history/components/HistorySidebar.vue
+++ b/src/views/history/components/HistorySidebar.vue
@@ -10,6 +10,8 @@ const { searchParams, changeParams } = useSearchParam();
 
 const selectedBuilding = ref([]);
 const deviceData = ref([]);
+const searchTerm = ref(""); //搜尋文字
+const activeSearchTerm = ref(""); 
 
 const getDeviceData = async (sub_tag, renew) => {
   const res = await getHistorySideBar(sub_tag);
@@ -162,6 +164,28 @@ const changeSelected = (Device_list, renew = false) => {
     });
   }
 };
+
+const filteredDeviceData = computed(() => {
+  if (!activeSearchTerm.value) return deviceData.value;
+  return deviceData.value.map((building) => ({
+    ...building,
+    floors: building.floors.map((floor) => ({
+      ...floor,
+      devices: floor.devices.filter((device) =>
+        device.device_name.includes(activeSearchTerm.value)
+      ),
+    })).filter(floor => floor.devices.length > 0)
+  })).filter(building => building.floors.length > 0);
+});
+
+const handleSearch = (e) => {
+  e.preventDefault();
+  activeSearchTerm.value = searchTerm.value;
+};
+
+const handleInput = (e) => {
+  searchTerm.value = e.target.value;
+};
 </script>
 
 <template>
@@ -175,12 +199,15 @@ const changeSelected = (Device_list, renew = false) => {
       />
       <input
         type="text"
+        :value="searchTerm"
+        @input="handleInput"
         :placeholder="t('button.enter_text')"
         class="text-white bg-transparent w-full"
+        @keyup.enter="handleSearch"
       />
     </label>
     <ul class="menu text-lg">
-      <template v-for="building in deviceData" :key="building.building_tag">
+      <template v-for="building in filteredDeviceData" :key="building.building_tag">
         <li>
           <details :open="selectedBuilding.includes(building.building_tag)">
             <summary>
diff --git a/src/views/operation/components/OperationActionButton.vue b/src/views/operation/components/OperationActionButton.vue
index f31a516..2128ec1 100644
--- a/src/views/operation/components/OperationActionButton.vue
+++ b/src/views/operation/components/OperationActionButton.vue
@@ -29,8 +29,10 @@ const exportFile = async () => {
 
 const submitBtns = computed(() => [
   {
-    title: t("button.query"),
+    title: t("button.search"),
     key: "submit",
+    icon: "search",
+    btn: "btn-search",
     active: false,
     onClick: search,
     disabled: isSearchDisabled.value,
@@ -38,6 +40,8 @@ const submitBtns = computed(() => [
   {
     title: t("button.export"),
     key: "export",
+    icon: "download",
+    btn: "btn-export",
     active: false,
     onClick: exportFile,
     disabled: isSearchDisabled.value,
@@ -84,10 +88,11 @@ watch(
   <ButtonGroup
     :items="submitBtns"
     :withLine="false"
+    :withBtnClass="true"
     class="ml-5 mr-8 xl:mr-10"
   />
 
-  <button class="btn btn-info" @click.stop.prevent="() => openModal()">
+  <button class="btn btn-add" @click.stop.prevent="() => openModal()">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
 </template>
diff --git a/src/views/operation/components/OperationSearch.vue b/src/views/operation/components/OperationSearch.vue
index c0d3711..4b8cf2b 100644
--- a/src/views/operation/components/OperationSearch.vue
+++ b/src/views/operation/components/OperationSearch.vue
@@ -38,7 +38,7 @@ const setButtonItems = () => {
       params: ["work_type", "sub_system_tag"],
     },
     {
-      title: t('operation.maintainance'),
+      title: t('operation.maintenance'),
       key: "maintain",
       active: searchParams.value.work_type === "1",
       work_type: 1,
diff --git a/src/views/operation/components/OperationTableModal.vue b/src/views/operation/components/OperationTableModal.vue
index 48db046..f7708af 100644
--- a/src/views/operation/components/OperationTableModal.vue
+++ b/src/views/operation/components/OperationTableModal.vue
@@ -229,7 +229,7 @@ watch(
           "work_type"
         )
       ) {
-        const work_types = [t("operation.maintainance"), t("operation.repair")];
+        const work_types = [t("operation.maintenance"), t("operation.repair")];
         formState.value[searchParams.value?.work_type - 1].work_type =
           searchParams.value.work_type;
         formState.value[searchParams.value?.work_type - 1].work_type_name =

From c1ac580b28a33e24356c19218262bc8b81e2a209 Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Mon, 28 Oct 2024 16:17:57 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=E9=A6=96=E9=A0=81=E7=B3=BB=E7=B5=B1?=
 =?UTF-8?q?=E5=B0=8F=E5=8D=A1=E9=A1=8F=E8=89=B2=E6=94=B9=E8=AE=8A=E3=80=81?=
 =?UTF-8?q?=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7:sidebar=E9=A1=8F=E8=89=B2?=
 =?UTF-8?q?=E6=94=B9=E8=AE=8A=E3=80=81modal=E7=9A=84=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E9=83=BD=E7=B6=AD=E6=8C=81=E5=9C=A8=E4=B8=AD=E9=96=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navbar/NavbarItem.vue                | 6 +++---
 src/views/dashboard/components/DashboardSysCard.vue | 4 ++--
 src/views/system/System.vue                         | 4 +---
 src/views/system/components/SystemCard.vue          | 4 ++--
 src/views/system/components/SystemInfoModal.vue     | 2 +-
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue
index 82b01d4..db47cef 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -175,7 +175,7 @@ onMounted(() => {
 
 :deep(.ant-menu-submenu-selected) {
   .ant-menu-submenu-title {
-    @apply text-blue-300 ;
+    @apply text-info;
   }
 }
 
@@ -183,7 +183,7 @@ onMounted(() => {
   @apply bg-transparent relative;
 
   &::before {
-    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10;
+    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat saturate-200 z-10;
     content: "";
     background: url(@ASSET/img/chart-data-background03.svg) center center;
   }
@@ -193,7 +193,7 @@ onMounted(() => {
   }
 
   a {
-    color: #89d2ff !important;
+    color: #35ecec !important;
     text-shadow: 0px 0px 1px #fff;
   }
 }
diff --git a/src/views/dashboard/components/DashboardSysCard.vue b/src/views/dashboard/components/DashboardSysCard.vue
index daeaded..72bcebf 100644
--- a/src/views/dashboard/components/DashboardSysCard.vue
+++ b/src/views/dashboard/components/DashboardSysCard.vue
@@ -140,7 +140,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
         twMerge(
           'w-full sm:w-1/2 lg:w-1/4 relative my-2 ',
           item.sub_system_tag
-            ? 'saturate-200 cursor-pointer text-base'
+            ? 'saturate-200 cursor-pointer text-base text-info'
             : 'grayscale opacity-70 cursor-not-allowed text-sm'
         )
       "
@@ -160,7 +160,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
           ></FontAwesomeIcon>
         </div>
         <div class="icon-text">
-          <div class="text-slate-300">
+          <div class="">
             {{ item.title }}
           </div>
         </div>
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index f23d913..5ba65fc 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -155,9 +155,7 @@ const isMobile = (e) => {
 const getCurrentInfoModalData = (e, position, value) => {
   const mobile = isMobile(e);
   selectedDevice.value = {
-    initPos: mobile
-      ? { left: `50%`, top: `50%` }
-      : { left: `${position.left}px`, top: `${position.top}px` },
+    initPos: { left: `50%`, top: `50%` },
     value,
     isMobile: mobile,
   };;
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index 89a18b4..d395b92 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -24,8 +24,8 @@ const fitToView = (forge_dbid) => {
         <p class="title">{{ d.full_name }}</p>
         <div class="grid grid-cols-3 gap-5">
           <div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
-            <div class="item h-36" @click="() => fitToView(device.forge_dbid)">
-              <div class="left w-4/5 h-full flex flex-wrap justify-center">
+            <div class="item" @click="() => fitToView(device.forge_dbid)">
+              <div class="left h-full flex flex-wrap justify-center">
                 <div class="sec02 w-full">
                   <img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
                   <span class="w-8 h-8" v-else></span>
diff --git a/src/views/system/components/SystemInfoModal.vue b/src/views/system/components/SystemInfoModal.vue
index 125a217..7b9b845 100644
--- a/src/views/system/components/SystemInfoModal.vue
+++ b/src/views/system/components/SystemInfoModal.vue
@@ -33,7 +33,7 @@ watch(
 
 <template>
   <Modal id="system_info_modal" :onCancel="onCancel" width="600" :draggable="!data?.isMobile" :backdrop="false"
-    :modalStyle="position" :class="data?.isMobile ? '-translate-x-1/2 -translate-y-1/2' : ''">
+    :modalStyle="position" class="-translate-x-1/2 -translate-y-1/2">
     <template #modalContent>
       <SystemInfoModalContent />
     </template>