From 520810b1cebf16e611e175f133e17438f379eb7c Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Mon, 21 Oct 2024 23:21:29 -0400
Subject: [PATCH 1/2] =?UTF-8?q?forge=20sprite=20=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forge/ForgeForSystem.vue       |  12 +-
 src/components/navbar/NavbarItem.vue          | 104 +++++------------
 src/hooks/forge/useForgeSprite.js             | 106 ++++++++++++------
 src/hooks/useSelectedFloor.js                 |  17 +++
 src/router/index.js                           |   7 +-
 src/views/system/System.vue                   |  10 +-
 src/views/system/SystemFloor.vue              |   4 +-
 src/views/system/components/SystemCard.vue    |  15 ++-
 .../system/components/SystemFloorBar.vue      |  13 +--
 src/views/system/components/SystemSubBar.vue  |   2 +-
 10 files changed, 154 insertions(+), 136 deletions(-)
 create mode 100644 src/hooks/useSelectedFloor.js

diff --git a/src/components/forge/ForgeForSystem.vue b/src/components/forge/ForgeForSystem.vue
index 000e6f6..b39106a 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 } = useForgeSprite()
+const { updateDataVisualization, createSprites, hideAllObjects, forgeClickListener } = useForgeSprite()
 
 const forgeDom = ref(null);
 
@@ -162,9 +162,13 @@ const initForge = async () => {
         "Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
         viewer.isLoadDone()
       );
-      // updateForgeViewer(viewer);
-      // createSprites()
-      hideAllObjects();
+
+      if (viewer.isLoadDone()) {
+        // updateForgeViewer(viewer);
+        hideAllObjects();
+        createSprites();
+        forgeClickListener();
+      }
     })
 
 };
diff --git a/src/components/navbar/NavbarItem.vue b/src/components/navbar/NavbarItem.vue
index 54f6a3a..22c93b0 100644
--- a/src/components/navbar/NavbarItem.vue
+++ b/src/components/navbar/NavbarItem.vue
@@ -18,9 +18,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,85 +71,38 @@ 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="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" />
         {{ 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,
-              },
-            }"
-          >
+  <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>
@@ -166,16 +119,19 @@ onMounted(() => {
   color: #35759d !important;
   background-color: transparent !important;
 }
+
 ::v-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;
   }
 }
+
 ::v-deep .ant-menu-item-selected {
   @apply bg-transparent relative;
 
@@ -184,9 +140,11 @@ onMounted(() => {
     content: "";
     background: url(@ASSET/img/chart-data-background03.svg) center center;
   }
+
   &:active {
     background-color: transparent !important;
   }
+
   a {
     color: #89d2ff !important;
     text-shadow: 0px 0px 1px #fff;
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index a75784e..4e257da 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -1,6 +1,8 @@
-import { watch, inject, markRaw, ref } from "vue";
+import { watch, inject, markRaw, ref, computed } from "vue";
 import useAlarmStore from "@/stores/useAlarmStore";
 import hexToRgb from "@/util/hexToRgb";
+import { useRoute } from "vue-router";
+import useSelectedFloor from "@/hooks/useSelectedFloor";
 
 export default function useForgeSprite() {
   const store = useAlarmStore();
@@ -12,7 +14,7 @@ export default function useForgeSprite() {
       forgeViewer.value = markRaw(viewer);
     }
 
-    const dataVisualization = await NOP_VIEWER.loadExtension(
+    const dataVisualization = await viewer.loadExtension(
       "Autodesk.DataVisualization"
     );
     dataVizExtn.value = markRaw(dataVisualization);
@@ -20,41 +22,78 @@ export default function useForgeSprite() {
 
   const onSpriteClicked = (event) => {
     event.hasStopped = true;
-    const data = deviceList.value.find((d) => d.spriteDbId === event.dbId);
-    modalContent.value = data;
-    store.getDbIdStore(data.forge_dbid);
-    toggleModal(event.originalEvent);
+    console.log("onSpriteClicked", event);
+    // const data = deviceList.value.find((d) => d.spriteDbId === event.dbId);
+    // modalContent.value = data;
   };
+
+  const { selectedFloor } = useSelectedFloor();
+  const showData = computed(() =>
+    selectedFloor.value?.key === "main"
+      ? subscribeData.value
+      : subscribeData.value.filter(
+          ({ floor_guid }) => floor_guid === selectedFloor.value?.key
+        ) || []
+  );
+
   // 創建 sprites
   const createSprites = async () => {
-    const DataVizCore = Autodesk.DataVisualization.Core;
-    const viewableType = DataVizCore.ViewableType.SPRITE;
-    let spriteColor = new THREE.Color(0xffffff);
-    const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
-    const spriteIconUrl = `${BASEURL}/hotspot.svg`;
-    const style = new DataVizCore.ViewableStyle(
-      viewableType,
-      spriteColor,
-      spriteIconUrl
-    );
-    const viewableData = new DataVizCore.ViewableData();
-    viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
-    subscribeData.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));
-        const viewable = new DataVizCore.SpriteViewable(
-          position,
-          style,
-          d.spriteDbId
-        );
-        viewableData.addViewable(viewable);
-      }
-    });
-    await viewableData.finish();
-    dataVizExtn.value.addViewables(viewableData);
+    if (dataVizExtn.value) {
+      dataVizExtn.value.removeAllViewables();
+      const DataVizCore = Autodesk.DataVisualization.Core;
+      const viewableType = DataVizCore.ViewableType.SPRITE;
+      let spriteColor = new THREE.Color(0xffffff);
+      const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
+      const spriteIconUrl = `${BASEURL}/hotspot.svg`;
+      const style = new DataVizCore.ViewableStyle(
+        viewableType,
+        spriteColor,
+        spriteIconUrl
+      );
+      const viewableData = new DataVizCore.ViewableData();
+      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(
+            position,
+            style,
+            d.spriteDbId
+          );
+          viewableData.addViewable(viewable);
+        }
+      });
+      // await viewableData.finish();
+      // dataVizExtn.value.addViewables(viewableData);
+      // console.log(dataVizExtn.value);
+      viewableData.then(
+        () => {
+          dataVizExtn.value.addViewables(viewableData);
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+  };
 
-    forgeViewer.value.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
+  watch(
+    () => showData,
+    () => {
+      forgeViewer.value?.isLoadDone() && createSprites();
+    },
+    {
+      deep: true,
+    }
+  );
+
+  const forgeClickListener = () => {
+    forgeViewer.value.addEventListener(
+      Autodesk.DataVisualization.Core.MOUSE_CLICK,
+      onSpriteClicked
+    );
     forgeViewer.value.addEventListener(
       Autodesk.Viewing.SELECTION_CHANGED_EVENT,
       onSpriteClicked
@@ -99,5 +138,6 @@ export default function useForgeSprite() {
     createSprites,
     updateDataVisualization,
     hideAllObjects,
+    forgeClickListener,
   };
 }
diff --git a/src/hooks/useSelectedFloor.js b/src/hooks/useSelectedFloor.js
new file mode 100644
index 0000000..986c62d
--- /dev/null
+++ b/src/hooks/useSelectedFloor.js
@@ -0,0 +1,17 @@
+import { useRoute } from "vue-router";
+import { computed, inject, ref, watch } from "vue";
+
+function useSelectedFloor() {
+  const { currentFloor } = inject("system_deviceList");
+  const route = useRoute();
+  const selectedFloor = computed(() =>
+    currentFloor.value?.find(({ key }) => key == route.params.floor_id)
+  );
+
+  return {
+    selectedFloor,
+    currentFloor,
+  };
+}
+
+export default useSelectedFloor;
diff --git a/src/router/index.js b/src/router/index.js
index b3593f9..759b37e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,15 +38,10 @@ const router = createRouter({
       component: System,
       children: [
         {
-          path: "",
+          path: ":floor_id",
           name: "sub_system",
           component: SystemMain,
         },
-        {
-          path: "floor/:floor_id",
-          name: "floor",
-          component: SystemFloor,
-        },
       ],
     },
     {
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index 5862f30..8f3596c 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -7,6 +7,7 @@ import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
 import { getSystemDevices, getSystemRealTime } from "@/apis/system";
 import SystemSubBar from './components/SystemSubBar.vue';
 import SystemInfoModal from './components/SystemInfoModal.vue';
+import SystemMain from "./SystemMain.vue"
 
 const buildingStore = useBuildingStore()
 
@@ -41,7 +42,7 @@ const getData = async () => {
       forge_dbid: parseInt(dev.forge_dbid),
       device_coordinate_3d: dev.device_coordinate_3d
         ? JSON.parse(dev.device_coordinate_3d)
-        : { x: 0, y: 0 },
+        : null,
       alarmMsg: "",
       is_show: true,
       currentColor: dev.device_normal_point_color,
@@ -79,7 +80,7 @@ watch(raw_data, (newValue) => {
 });
 
 const updateDataByGas = (gas) => {
-  console.log(`updateDataByGas`, gas)
+
   const update_values = raw_data.value.map((d) => (
     {
       ...d,
@@ -98,8 +99,8 @@ watch(() => buildingStore.selectedBuilding, (newBuilding) => {
   deep: true,
 })
 
-watch(route, (newRoute, oldRoute) => {
-  if (buildingStore.selectedBuilding && newRoute.params.sub_system_id !== oldRoute?.params.sub_system_id) {
+watch(() => route.params.sub_system_id, (newRoute, oldRoute) => {
+  if (buildingStore.selectedBuilding && newRoute !== oldRoute) {
     getData()
   }
 })
@@ -195,6 +196,7 @@ provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCu
       </div>
     </div>
     <div class="col-span-1 h-full">
+
       <ForgeForSystem :initialData="{}" />
     </div>
   </div>
diff --git a/src/views/system/SystemFloor.vue b/src/views/system/SystemFloor.vue
index 12166e0..fe79b61 100644
--- a/src/views/system/SystemFloor.vue
+++ b/src/views/system/SystemFloor.vue
@@ -3,6 +3,8 @@ import { useRoute } from 'vue-router';
 import EffectScatter from "@/components/chart/EffectScatter.vue";
 import { computed, inject, ref, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';
+import useSelectedFloor from "@/hooks/useSelectedFloor"
+
 const route = useRoute()
 
 const { currentFloor, subscribeData } = inject("system_deviceList")
@@ -34,7 +36,7 @@ const defaultOption = (map, data = []) => ({
   },
 });
 
-const selectedFloor = computed(() => currentFloor.value?.find(({ key }) => key == route.params.floor_id))
+const { selectedFloor } = useSelectedFloor()
 
 watch([selectedFloor, () => asset_floor_chart, subscribeData], ([newValue, newChart, newData]) => {
   if (newValue && newChart.value) {
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index 65abbd3..6ae249c 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -1,17 +1,26 @@
 <script setup>
-import { inject } from "vue"
+import { computed, inject, watch } from "vue"
+import useSelectedFloor from "@/hooks/useSelectedFloor"
 
 const { data } = inject("system_deviceList")
 
 const { getCurrentInfoModalData } = inject("system_selectedDevice")
 
+const { selectedFloor } = useSelectedFloor()
+
+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)
+})
+
 </script>
 
 <template>
   <!-- <InfoModal :data="currentInfoModalData" /> -->
 
-  <template v-if="data.length > 0">
-    <div class="equipment-show" v-for="d in data" :key="d.full_name">
+  <template v-if="showData.length > 0">
+    <div class="equipment-show" v-for="d in showData" :key="d.full_name">
       <template v-if="d.device_list.length > 0">
         <p class="title">{{ d.full_name }}</p>
         <div class="grid grid-cols-3 gap-5">
diff --git a/src/views/system/components/SystemFloorBar.vue b/src/views/system/components/SystemFloorBar.vue
index 9c99387..ddb72a5 100644
--- a/src/views/system/components/SystemFloorBar.vue
+++ b/src/views/system/components/SystemFloorBar.vue
@@ -19,7 +19,7 @@ const getFloors = async () => {
     {
       title: "總覽",
       key: "main",
-      active: route.params.floor_id ? false : true,
+      active: route.params.floor_id === "main",
     },
     ...data.floors.map((d, idx) => ({
       title: d.full_name,
@@ -36,20 +36,11 @@ const getFloors = async () => {
 const onClick = (item) => {
   changeActiveBtn(item)
 
-  if (item.key == "main") {
-    router.push({
+  router.push({
       name: 'sub_system', params: {
-        ...route.params
-      }, query: { gas: route.query.gas }
-    })
-  } else {
-    router.push({
-      name: 'floor', params: {
         ...route.params, floor_id: item.key
       }, query: { gas: route.query.gas }
     })
-  }
-
 
 }
 
diff --git a/src/views/system/components/SystemSubBar.vue b/src/views/system/components/SystemSubBar.vue
index 2820a31..9006946 100644
--- a/src/views/system/components/SystemSubBar.vue
+++ b/src/views/system/components/SystemSubBar.vue
@@ -14,7 +14,7 @@ watch(() => buildingStore, (newValue) => {
   newValue.selectedSystem?.points?.length > 0 && setItems(newValue.selectedSystem.points.map(d => ({
     title: d.full_name,
     key: d.points,
-    active: route.query.gas ? route.query.gas === d.points : d.points === "Temp",
+    active: route.query.gas ? route.query.gas === d.points : d.points === "temp",
   })))
 }, {
   deep: true,

From 46e5c8bbe3a2222f6de02aa1cfc92d041464c459 Mon Sep 17 00:00:00 2001
From: JouChun <aafree2014@gmail.com>
Date: Tue, 22 Oct 2024 00:49:36 -0400
Subject: [PATCH 2/2] =?UTF-8?q?=E5=B9=B3=E9=9D=A2=E5=9C=96=E5=8F=8A?=
 =?UTF-8?q?=E7=86=B1=E9=BB=9E=E9=A1=AF=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +-
 src/hooks/forge/useForgeSprite.js             |  2 +-
 src/views/system/System.vue                   | 35 +++++++++-----
 src/views/system/SystemFloor.vue              | 27 +++++++----
 .../system/components/SystemFloorBar.vue      |  8 ++--
 src/views/system/components/SystemMode.vue    | 47 +++++++++++++++++++
 src/views/system/components/SystemSubBar.vue  | 29 +++++++++---
 7 files changed, 118 insertions(+), 32 deletions(-)
 create mode 100644 src/views/system/components/SystemMode.vue

diff --git a/.env.development b/.env.development
index de90992..70caef8 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://ibms-cvilux.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
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index 4e257da..f1c5398 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -68,7 +68,7 @@ export default function useForgeSprite() {
       // await viewableData.finish();
       // dataVizExtn.value.addViewables(viewableData);
       // console.log(dataVizExtn.value);
-      viewableData.then(
+      viewableData.finish().then(
         () => {
           dataVizExtn.value.addViewables(viewableData);
         },
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index 8f3596c..3ea8806 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -7,7 +7,10 @@ import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
 import { getSystemDevices, getSystemRealTime } from "@/apis/system";
 import SystemSubBar from './components/SystemSubBar.vue';
 import SystemInfoModal from './components/SystemInfoModal.vue';
-import SystemMain from "./SystemMain.vue"
+import SystemMain from "./SystemMain.vue";
+import SystemMode from './components/SystemMode.vue';
+import SystemFloor from './SystemFloor.vue';
+import { twMerge } from 'tailwind-merge';
 
 const buildingStore = useBuildingStore()
 
@@ -81,12 +84,17 @@ watch(raw_data, (newValue) => {
 
 const updateDataByGas = (gas) => {
 
-  const update_values = raw_data.value.map((d) => (
-    {
-      ...d,
-      device_list: d.device_list.filter(({ points }) => points.some(({ points: p }) => p === gas))
-    }
-  ))
+  let update_values = []
+  if (gas === "all") {
+    update_values = raw_data.value
+  } else {
+    update_values = raw_data.value.map((d) => (
+      {
+        ...d,
+        device_list: d.device_list.filter(({ points }) => points.some(({ points: p }) => p === gas))
+      }
+    ))
+  }
   data.value = update_values
   subscribeData.value = getSubData(update_values);
 }
@@ -191,13 +199,18 @@ provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCu
         </div>
         <SystemSubBar class="mt-2 mb-4" />
       </div>
-      <div class="h-full max-h-[75vh] pr-2 overflow-y-auto relative">
+      <div class="h-full max-h-[75vh] pr-2 overflow-y-auto">
         <RouterView />
       </div>
     </div>
-    <div class="col-span-1 h-full">
-
-      <ForgeForSystem :initialData="{}" />
+    <div class="col-span-1 h-full flex flex-col justify-between">
+      <SystemMode />
+      <div class="min-h-[75vh] relative">
+        <SystemFloor v-show="route.query.mode === '2D'" />
+        <div :class="twMerge('absolute h-full w-full', route.query.mode === '3D' ? 'opacity-100' : 'opacity-0')">
+          <ForgeForSystem :initialData="{}" />
+        </div>
+      </div>
     </div>
   </div>
 
diff --git a/src/views/system/SystemFloor.vue b/src/views/system/SystemFloor.vue
index fe79b61..417d39f 100644
--- a/src/views/system/SystemFloor.vue
+++ b/src/views/system/SystemFloor.vue
@@ -38,15 +38,15 @@ const defaultOption = (map, data = []) => ({
 
 const { selectedFloor } = useSelectedFloor()
 
-watch([selectedFloor, () => asset_floor_chart, subscribeData], ([newValue, newChart, newData]) => {
-  if (newValue && newChart.value) {
+watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValue]) => {
+  if (newValue && newChart.value && oldValue?.key !== newValue.key) {
     asset_floor_chart.value.updateSvg(
       {
         full_name: newValue?.title,
         path: `${FILE_BASEURL}/${newValue.map_url}`,
       },
 
-      defaultOption(newValue?.title, newData.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]))
+      defaultOption(newValue?.title, subscribeData.value.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]))
     );
     newChart.value.chart.on("click", function (params) {
       console.log(params, params.data[2])
@@ -60,14 +60,25 @@ watch([selectedFloor, () => asset_floor_chart, subscribeData], ([newValue, newCh
   immediate: true,
   deep: true,
 })
+
+watch(subscribeData, (newData) => {
+  if (selectedFloor.value && asset_floor_chart.value) {
+    asset_floor_chart.value.chart.setOption({
+      series: {
+        data: newData.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]),
+      },
+    })
+  }
+}, {
+  immediate: true,
+  deep: true,
+})
 </script>
 
 <template>
-  <Loading class="absolute" />
-  <EffectScatter id="system_floor_chart" ref="asset_floor_chart" :class="twMerge('absolute z-50',
-    selectedFloor?.key ? 'opacity-100 bg-white' : 'opacity-0'
-  )
-    " />
+  <!-- <Loading class="absolute" /> -->
+  <EffectScatter id="system_floor_chart" ref="asset_floor_chart" class="min-h-[75vh] bg-white" />
+
   <!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
 </template>
 
diff --git a/src/views/system/components/SystemFloorBar.vue b/src/views/system/components/SystemFloorBar.vue
index 12f67cf..7f21eca 100644
--- a/src/views/system/components/SystemFloorBar.vue
+++ b/src/views/system/components/SystemFloorBar.vue
@@ -37,10 +37,10 @@ const onClick = (item) => {
   changeActiveBtn(item)
 
   router.push({
-      name: 'sub_system', params: {
-        ...route.params, floor_id: item.key
-      }, query: { gas: route.query.gas }
-    })
+    name: 'sub_system', params: {
+      ...route.params, floor_id: item.key
+    }, query: { ...route.query, gas: route.query.gas }
+  })
 
 }
 
diff --git a/src/views/system/components/SystemMode.vue b/src/views/system/components/SystemMode.vue
new file mode 100644
index 0000000..266acc4
--- /dev/null
+++ b/src/views/system/components/SystemMode.vue
@@ -0,0 +1,47 @@
+<script setup>
+import useActiveBtn from "@/hooks/useActiveBtn"
+import useSearchParam from "@/hooks/useSearchParam"
+import ButtonConnectedGroup from "@/components/customUI/ButtonConnectedGroup.vue";
+import { onMounted, watch } from "vue";
+import { useRoute } from "vue-router"
+
+const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
+const route = useRoute()
+
+const { changeParams, searchParams } = useSearchParam();
+
+watch(selectedBtn, (newValue) => {
+  console.log(newValue)
+  newValue && changeParams({ ...searchParams.value, mode: newValue.key })
+}, {
+  deep: true,
+  immediate: true,
+
+})
+
+watch(() => route.params, (newValue, oldValue) => {
+  if (newValue.sub_system_id && newValue.floor_id) {
+    setItems([{
+      title: "2D",
+      key: "2D",
+      active: route.query.mode === "2D",
+      disabled: newValue.floor_id === "main"
+    }, {
+      title: "3D",
+      key: "3D",
+      active: route.query.mode === "3D" || !route.query.mode
+    }])
+  }
+}, {
+  immediate: true,
+})
+
+
+</script>
+
+<template>
+  <ButtonConnectedGroup :items="items" className="btn-xs rounded-md mb-5"
+    :onclick="(e, item) => changeActiveBtn(item)" />
+</template>
+
+<style lang='scss' scoped></style>
\ No newline at end of file
diff --git a/src/views/system/components/SystemSubBar.vue b/src/views/system/components/SystemSubBar.vue
index 9006946..a5875b3 100644
--- a/src/views/system/components/SystemSubBar.vue
+++ b/src/views/system/components/SystemSubBar.vue
@@ -11,24 +11,39 @@ const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
 const route = useRoute()
 
 watch(() => buildingStore, (newValue) => {
-  newValue.selectedSystem?.points?.length > 0 && setItems(newValue.selectedSystem.points.map(d => ({
-    title: d.full_name,
-    key: d.points,
-    active: route.query.gas ? route.query.gas === d.points : d.points === "temp",
-  })))
+  newValue.selectedSystem?.points?.length > 0 && setItems([
+    {
+      title: "All",
+      key: "all",
+      active: route.query.gas === "all" || !route.query.gas,
+    },
+    ...newValue.selectedSystem.points.map(d => ({
+      title: d.full_name,
+      key: d.points,
+      active: route.query.gas === d.points,
+    }))
+  ])
 }, {
   deep: true,
   immediate: true
 })
 
 
-const { changeParams } = useSearchParam();
+const { changeParams, searchParams } = useSearchParam();
 const onClick = (item) => {
-  changeParams({ gas: item.key })
   changeActiveBtn(item)
   updateDataByGas(item.key)
 }
 
+watch(selectedBtn, (newValue) => {
+  console.log(newValue)
+  newValue && changeParams({ ...searchParams.value, gas: newValue.key })
+}, {
+  deep: true,
+  immediate: true,
+
+})
+
 </script>
 
 <template>