平面圖及熱點顯示

.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"

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);
         },

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>
 

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>
 

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 }
+  })
 
 }
 

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>

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>