2D/3D暫時設定 | VITE_FORGE_BASEURL改成VITE_FILE_API_BASEURL | 首頁語言更新

.env.production

@@ -1,4 +1,4 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
 VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
 VITE_MQTT_BASEURL = "wss://mqttwss.mjm-staging.developers-homelab.net"
-VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"
+# VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"

src/components/forge/index.vue

@@ -93,8 +93,8 @@ const createSprites = async (dataVizExtn) => {
   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 BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
-  const spriteIconUrl = `${BASEURL}/hotspot.svg`;
+  const spriteIconUrl = `${BASEURL}/dist/hotspot.svg`;
   const style = new DataVizCore.ViewableStyle(
     viewableType,
     spriteColor,

src/hooks/forge/useForgeSprite.js

@@ -72,8 +72,8 @@ export default function useForgeSprite() {
       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 BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
-      const spriteIconUrl = `${BASEURL}/hotspot.svg`;
+      const spriteIconUrl = `${BASEURL}/dist/hotspot.svg`;
       const style = new DataVizCore.ViewableStyle(
         viewableType,
         spriteColor,

src/views/dashboard/Dashboard.vue

@@ -22,6 +22,8 @@ const formState = ref({
   floor_guid: "all",
   department_id: "all",
 });
+// 控制顯示2D/3D切換與內容
+const showForgeArea = ref(true);
 
 const getEnergyCostData = async (params) => {
   const res = await getEnergyCost(params);
@@ -67,18 +69,20 @@ watch(
 );
 
 onMounted(() => {
-  setItems([
+  if (showForgeArea.value) {
-    {
+    setItems([
-      title: "2D",
+      {
-      key: "2D",
+        title: "2D",
-      active: false,
+        key: "2D",
-    },
+        active: false,
-    {
+      },
-      title: "3D",
+      {
-      key: "3D",
+        title: "3D",
-      active: true,
+        key: "3D",
-    },
+        active: true,
-  ]);
+      },
+    ]);
+  }
 });
 
 onUnmounted(() => {
@@ -90,31 +94,45 @@ onUnmounted(() => {
   <div class="flex flex-wrap items-center">
     <!-- 建築圖 -->
     <div class="w-full xl:w-1/3 relative">
-      <ButtonConnectedGroup
+      <template v-if="showForgeArea">
-        :items="items"
+        <ButtonConnectedGroup
-        className="btn-xs absolute right-3 top-6 z-20 bg-slate-800 p-0 rounded-lg "
+          :items="items"
-        :onclick="(e, item) => changeActiveBtn(item)"
+          className="btn-xs absolute right-3 top-6 z-20 bg-slate-800 p-0 rounded-lg "
-      />
+          :onclick="(e, item) => changeActiveBtn(item)"
-      <div class="area-img-box relative">
-        <img
-        alt="build"
-        src="/build_img.jpg"
-        :class="
-          twMerge(
-            'absolute w-full h-full transition-opacity duration-300',
-            selectedBtn?.key == '2D' ? 'opacity-100  z-10' : 'opacity-0  z-0'
-          )
-        "
-      />
-        <Forge
-        :class="
-          twMerge(
-            'absolute transition-opacity duration-300',
-            selectedBtn?.key == '3D' ? 'opacity-100  z-10' : 'opacity-0  z-0'
-          )
-        "
         />
-      </div>
+        <div class="area-img-box relative">
+          <!-- setting頁面要新增讓他能上傳圖片 -->
+          <img
+            alt="build"
+            src="/build_img.jpg"
+            :class="
+              twMerge(
+                'absolute w-full h-full transition-opacity duration-300',
+                selectedBtn?.key == '2D'
+                  ? 'opacity-100  z-10'
+                  : 'opacity-0  z-0'
+              )
+            "
+          />
+          <Forge
+            :class="
+              twMerge(
+                'absolute transition-opacity duration-300',
+                selectedBtn?.key == '3D'
+                  ? 'opacity-100  z-10'
+                  : 'opacity-0  z-0'
+              )
+            "
+          />
+        </div>
+      </template>
+      <template v-else>
+        <img
+          alt="build"
+          src="/build_img.jpg"
+          class="area-img-box w-full h-[460px] block relative rounded-sm mt-3"
+        />
+      </template>
     </div>
 
     <div class="w-full xl:w-2/3">

src/views/dashboard/components/DashboardElecCompare.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, computed } from "vue";
 import * as echarts from "echarts";
 import BarChart from "@/components/chart/BarChart.vue";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+const { locale, t } = useI18n();
 const props = defineProps({
   energyCostData: {
     type: Object,
@@ -14,7 +14,7 @@ const props = defineProps({
 
 const chartData = ref([]); // 初始化為空陣列
 
-const labels = [
+const labels = computed(() => [
   t("dashboard.today"),
   t("dashboard.yesterday"),
   t("dashboard.this_week"),
@@ -23,7 +23,7 @@ const labels = [
   t("dashboard.last_month"),
   t("dashboard.this_year"),
   t("dashboard.last_year"),
-];
+]);
 const barWidth = 30; // Set barWidth
 
 const barChartOptions = ref({
@@ -33,22 +33,13 @@ const barChartOptions = ref({
     axisLine: { lineStyle: { color: "#fff" } },
   },
   yAxis: { type: "value", show: false },
-  grid: {
-    left: "-10%",
-    right: "0%",
-    bottom: "3%",
-    top: "10%",
-    containLabel: true,
-  },
   series: [], // 初始化為空陣列
   tooltip: {
     trigger: "axis",
     axisPointer: { type: "shadow" },
     formatter: function (params) {
       let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
-      const filteredParams = params.filter(
+      const filteredParams = params.filter((item) => item.seriesType === "bar");
-        (item) => item.seriesType === "bar"
-      );
       filteredParams.forEach((item) => {
         tooltipText += `<div>${item.marker} ${
           item.value ? item.value : "-"
@@ -60,178 +51,187 @@ const barChartOptions = ref({
   },
 });
 
+function updateChartData(newEnergyCostData) {
+  if (newEnergyCostData && newEnergyCostData.compare) {
+    // 從 props.energyCostData.compare 中提取資料
+    const compareData = newEnergyCostData.compare;
+
+    // 轉換資料格式
+    chartData.value = [
+      {
+        category: t("dashboard.daily_relative_change"),
+        this: compareData.day.current,
+        last: compareData.day.last,
+        change: compareData.day.percentage,
+      },
+      {
+        category: t("dashboard.weekly_relative_change"),
+        this: compareData.week.current,
+        last: compareData.week.last,
+        change: compareData.week.percentage,
+      },
+      {
+        category: t("dashboard.monthly_relative_change"),
+        this: compareData.month.current,
+        last: compareData.month.last,
+        change: compareData.month.percentage,
+      },
+      {
+        category: t("dashboard.yearly_relative_change"),
+        this: compareData.year.current,
+        last: compareData.year.last,
+        change: compareData.year.percentage,
+      },
+    ];
+
+    // 更新 barChartOptions
+    barChartOptions.value = {
+      xAxis: {
+        type: "category",
+        data: chartData.value.map((item) => item.category),
+        axisLine: { lineStyle: { color: "#fff" } },
+      },
+      yAxis: { type: "value", show: false },
+      grid: {
+        left: "-10%",
+        right: "1%",
+        bottom: "3%",
+        top: "4%",
+        containLabel: true,
+      },
+      series: [
+        {
+          name: "當前週期",
+          data: chartData.value.map((item) => item.this),
+          type: "bar",
+          barWidth: barWidth,
+          barGap: "-10%",
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#186B80" },
+              { offset: 1, color: "#50C3E3" },
+            ]),
+            shadowBlur: 5,
+            shadowColor: "rgba(0, 0, 0, 0.3)",
+            shadowOffsetY: 2,
+            shadowOffsetX: 5,
+          },
+          z: 3,
+        },
+        {
+          name: "對比週期",
+          data: chartData.value.map((item) => item.last),
+          type: "bar",
+          barWidth: barWidth,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#988F2C" },
+              { offset: 1, color: "#FFF26D" },
+            ]),
+            shadowBlur: 5,
+            shadowColor: "rgba(0, 0, 0, 0.3)",
+            shadowOffsetY: 2,
+            shadowOffsetX: 5,
+          },
+        },
+        {
+          // this top
+          z: 6,
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: chartData.value.map((item) => item.this),
+          symbol: "diamond",
+          symbolOffset: ["-45%", "-50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#50C3E3",
+          },
+        },
+        {
+          // this bot
+          z: 6,
+          type: "pictorialBar",
+          symbolPosition: "start",
+          data: chartData.value.map((item) => item.this),
+          symbol: "diamond",
+          symbolOffset: ["-45%", "50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#50C3E3",
+          },
+        },
+        {
+          // last top
+          z: 3,
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: chartData.value.map((item) => item.last),
+          symbol: "diamond",
+          symbolOffset: ["45%", "-50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#FFF26D",
+          },
+        },
+        {
+          // last bot
+          z: 3,
+          type: "pictorialBar",
+          symbolPosition: "start",
+          data: chartData.value.map((item) => item.last),
+          symbol: "diamond",
+          symbolOffset: ["45%", "50%"],
+          symbolSize: [barWidth, barWidth * 0.5],
+          itemStyle: {
+            borderWidth: 0,
+            color: "#FFF26D",
+          },
+        },
+      ],
+      tooltip: {
+        trigger: "axis",
+        axisPointer: { type: "shadow" },
+        formatter: function (params) {
+          let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
+          const filteredParams = params.filter(
+            (item) => item.seriesType === "bar"
+          );
+          filteredParams.forEach((item) => {
+            tooltipText += `<div>${item.marker} ${
+              item.value ? item.value : "-"
+            }</div>`;
+          });
+
+          return tooltipText;
+        },
+      },
+    };
+  }
+}
 // 使用 watch 監聽 energyCostData 的變化
 watch(
   () => props.energyCostData,
   (newEnergyCostData) => {
-    if (newEnergyCostData && newEnergyCostData.compare) {
+    updateChartData(newEnergyCostData);
-      // 從 props.energyCostData.compare 中提取資料
-      const compareData = newEnergyCostData.compare;
-
-      // 轉換資料格式
-      chartData.value = [
-        {
-          category: t("dashboard.daily_relative_change"),
-          this: compareData.day.current,
-          last: compareData.day.last,
-          change: compareData.day.percentage,
-        },
-        {
-          category: t("dashboard.weekly_relative_change"),
-          this: compareData.week.current,
-          last: compareData.week.last,
-          change: compareData.week.percentage,
-        },
-        {
-          category: t("dashboard.monthly_relative_change"),
-          this: compareData.month.current,
-          last: compareData.month.last,
-          change: compareData.month.percentage,
-        },
-        {
-          category: t("dashboard.yearly_relative_change"),
-          this: compareData.year.current,
-          last: compareData.year.last,
-          change: compareData.year.percentage,
-        },
-      ];
-
-      // 更新 barChartOptions
-      barChartOptions.value = {
-        xAxis: {
-          type: "category",
-          data: chartData.value.map((item) => item.category),
-          axisLine: { lineStyle: { color: "#fff" } },
-        },
-        yAxis: { type: "value", show: false },
-        grid: {
-          left: "-10%",
-          right: "0%",
-          bottom: "3%",
-          top: "10%",
-          containLabel: true,
-        },
-        series: [
-          {
-            name: "當前週期",
-            data: chartData.value.map((item) => item.this),
-            type: "bar",
-            barWidth: barWidth,
-            barGap: "-10%",
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#186B80" },
-                { offset: 1, color: "#50C3E3" },
-              ]),
-              shadowBlur: 5,
-              shadowColor: "rgba(0, 0, 0, 0.3)",
-              shadowOffsetY: 2,
-              shadowOffsetX: 5,
-            },
-            z: 3,
-          },
-          {
-            name: "對比週期",
-            data: chartData.value.map((item) => item.last),
-            type: "bar",
-            barWidth: barWidth,
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#988F2C" },
-                { offset: 1, color: "#FFF26D" },
-              ]),
-              shadowBlur: 5,
-              shadowColor: "rgba(0, 0, 0, 0.3)",
-              shadowOffsetY: 2,
-              shadowOffsetX: 5,
-            },
-          },
-          {
-            // this top
-            z: 6,
-            type: "pictorialBar",
-            symbolPosition: "end",
-            data: chartData.value.map((item) => item.this),
-            symbol: "diamond",
-            symbolOffset: ["-45%", "-50%"],
-            symbolSize: [barWidth, barWidth * 0.5],
-            itemStyle: {
-              borderWidth: 0,
-              color: "#50C3E3",
-            },
-          },
-          {
-            // this bot
-            z: 6,
-            type: "pictorialBar",
-            symbolPosition: "start",
-            data: chartData.value.map((item) => item.this),
-            symbol: "diamond",
-            symbolOffset: ["-45%", "50%"],
-            symbolSize: [barWidth, barWidth * 0.5],
-            itemStyle: {
-              borderWidth: 0,
-              color: "#50C3E3",
-            },
-          },
-          {
-            // last top
-            z: 3,
-            type: "pictorialBar",
-            symbolPosition: "end",
-            data: chartData.value.map((item) => item.last),
-            symbol: "diamond",
-            symbolOffset: ["45%", "-50%"],
-            symbolSize: [barWidth, barWidth * 0.5],
-            itemStyle: {
-              borderWidth: 0,
-              color: "#FFF26D",
-            },
-          },
-          {
-            // last bot
-            z: 3,
-            type: "pictorialBar",
-            symbolPosition: "start",
-            data: chartData.value.map((item) => item.last),
-            symbol: "diamond",
-            symbolOffset: ["45%", "50%"],
-            symbolSize: [barWidth, barWidth * 0.5],
-            itemStyle: {
-              borderWidth: 0,
-              color: "#FFF26D",
-            },
-          },
-        ],
-        tooltip: {
-          trigger: "axis",
-          axisPointer: { type: "shadow" },
-          formatter: function (params) {
-            let tooltipText = `<div>${params[0].axisValueLabel}</div>`;
-            const filteredParams = params.filter(
-              (item) => item.seriesType === "bar"
-            );
-            filteredParams.forEach((item) => {
-              tooltipText += `<div>${item.marker} ${
-                item.value ? item.value : "-"
-              }</div>`;
-            });
-
-            return tooltipText;
-          },
-        },
-      };
-    }
   },
   { immediate: true } // 立即執行一次，確保初始資料載入
 );
+
+watch(locale, () => {
+  updateChartData(props.energyCostData);
+});
 </script>
 
 <template>
   <div class="flex flex-wrap">
     <div class="w-full chart-data relative px-8 py-3">
       <div class="flex flex-wrap items-center justify-between">
-        <h2 class="font-light">{{ $t("dashboard.relative_energy_consumption") }}</h2>
+        <h2 class="font-light">
+          {{ $t("dashboard.relative_energy_consumption") }}
+        </h2>
       </div>
       <div class="h-[180px]">
         <BarChart
@@ -302,4 +302,4 @@ watch(
   content: "";
   background: url(@ASSET/img/chart-data-background02.svg) center center;
 }
-</style>
+</style>

src/views/dashboard/components/DashboardElecTrends.vue

@@ -96,9 +96,9 @@ const generateCylinderChartOption = (data) => {
     ],
     grid: {
       left: "0%",
-      right: "0%",
+      right: "1%",
       bottom: "3%",
-      top: "15%",
+      top: "10%",
       containLabel: true,
     },
     tooltip: {
@@ -118,7 +118,9 @@ const processEnergyData = () => {
     return;
   }
 
-  const dailyData = props.energyCostData.trend;
+  const dailyData = [...props.energyCostData.trend].sort(
+    (a, b) => new Date(a.time) - new Date(b.time)
+  );
 
   chartData.value = dailyData.map((item) => ({
     date: dayjs(item.time).format("MM/DD"), 

src/views/dashboard/components/DashboardStat.vue

@@ -5,7 +5,7 @@ import useBuildingStore from "@/stores/useBuildingStore";
 import { twMerge } from "tailwind-merge";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+const { locale, t } = useI18n();
 const store = useBuildingStore();
 const energyData = ref([]);
 let intervalId = null;
@@ -63,6 +63,29 @@ watch(
   { immediate: true }
 );
 
+watch(locale, () => {
+  if (energyData.value.length) {
+    energyData.value = [
+      {
+        ...energyData.value[0],
+        label: t("dashboard.today_electricity_consumption"),
+      },
+      {
+        ...energyData.value[1],
+        label: t("dashboard.yesterday_electricity_consumption"),
+      },
+      {
+        ...energyData.value[2],
+        label: t("dashboard.instant_power"),
+      },
+      {
+        ...energyData.value[3],
+        label: t("dashboard.instant_contract_capacity_ratio"),
+      },
+    ];
+  }
+});
+
 onUnmounted(() => {
   clearInterval(intervalId);
 });

src/views/system/System.vue

@@ -1,25 +1,25 @@
 <script setup>
-import { RouterView, useRoute } from 'vue-router';
+import { RouterView, useRoute } from "vue-router";
 import { computed, watch, provide, ref, onMounted, onBeforeUnmount } from "vue";
-import SystemFloorBar from './components/SystemFloorBar.vue';
+import SystemFloorBar from "./components/SystemFloorBar.vue";
-import SystemDeptBar from './components/SystemDeptBar.vue';
+import SystemDeptBar from "./components/SystemDeptBar.vue";
 import useBuildingStore from "@/stores/useBuildingStore";
 import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
 import { getSystemDevices, getSystemRealTime } from "@/apis/system";
 import { getOperationCompanyList } from "@/apis/operation";
 import { getAssetSingle, getAssetFloorList } from "@/apis/asset";
-import SystemSubBar from './components/SystemSubBar.vue';
+import SystemSubBar from "./components/SystemSubBar.vue";
-import SystemInfoModal from './components/SystemInfoModal.vue';
+import SystemInfoModal from "./components/SystemInfoModal.vue";
 import SystemMain from "./SystemMain.vue";
-import SystemMode from './components/SystemMode.vue';
+import SystemMode from "./components/SystemMode.vue";
-import SystemFloor from './SystemFloor.vue';
+import SystemFloor from "./SystemFloor.vue";
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from "tailwind-merge";
 import dayjs from "dayjs";
 
-const buildingStore = useBuildingStore()
+const buildingStore = useBuildingStore();
 
 const statusList = computed(() => {
-  const sub = buildingStore.selectedSystem
+  const sub = buildingStore.selectedSystem;
 
   if (sub) {
     return {
@@ -28,11 +28,11 @@ const statusList = computed(() => {
       device_close_color: sub.device_close_color,
       device_close_text: sub.device_close_text,
       device_error_color: sub.device_error_color,
-      device_error_text: sub.device_error_text
+      device_error_text: sub.device_error_text,
-    }
+    };
   }
-  return null
+  return null;
-})
+});
 
 const raw_data = ref([]);
 const data = ref([]); // filter data
@@ -41,6 +41,7 @@ const floors = ref([]);
 const deptData = ref([]);
 const companyOptions = ref([]);
 const selected_dbid = ref([]);
+const showForgeArea = ref(true); // 控制2D/3D切換與內容顯示
 
 const getFloors = async () => {
   const res = await getAssetFloorList();
@@ -53,77 +54,75 @@ const getCompany = async () => {
 };
 
 const getData = async () => {
-  if (!route.params.sub_system_id) return
+  if (!route.params.sub_system_id) return;
   const res = await getSystemDevices({
     sub_system_tag: route.params.sub_system_id,
     building_guid: buildingStore.selectedBuilding?.building_guid,
-    department_id_list:deptData.value,
+    department_id_list: deptData.value,
-  })
+  });
-  const devices = res.data.map(d => ({
+  const devices = res.data.map((d) => ({
     ...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) : "",
+      device_coordinate_3d: dev.device_coordinate_3d
+        ? JSON.parse(dev.device_coordinate_3d)
+        : "",
       alarmMsg: "",
       is_show: true,
       currentColor: dev.device_normal_point_color,
       spriteDbId: 10 + dev.main_id,
       sensorTypes: dev.points ? dev.points.map(({ points }) => points) : [],
       floor_guid: d.floor_guid,
-      is2DActive: false
+      is2DActive: false,
     })),
   }));
 
-  raw_data.value = devices
+  raw_data.value = devices;
-  data.value = devices
+  data.value = devices;
-  console.log("devices", res.data,devices)
+  console.log("devices", res.data, devices);
-}
+};
 
 const subscribeData = ref([]); // flat data
 
 const getSubData = (value) => {
   let items = [];
   value.forEach((device) => {
-    items = [
+    items = [...items, ...device.device_list];
-      ...items,
-      ...device.device_list
-    ];
   });
-  return items
+  return items;
-}
+};
 
 watch(raw_data, (newValue) => {
   if (route.query.gas) {
-    updateDataByGas(route.query.gas)
+    updateDataByGas(route.query.gas);
   } else {
-    const items = getSubData(newValue)
+    const items = getSubData(newValue);
     data.value = newValue;
     subscribeData.value = items;
   }
 });
 
 const updateDataByGas = (gas) => {
-
+  let update_values = [];
-  let update_values = []
   if (gas === "all") {
-    update_values = raw_data.value
+    update_values = raw_data.value;
   } else {
     update_values = raw_data.value.map((d) => ({
       ...d,
       device_list: d.device_list.filter(({ points }) => {
         if (points) {
-          return points.some(({ points: p }) => p === gas)
+          return points.some(({ points: p }) => p === gas);
         }
-        return false
+        return false;
-      })
+      }),
-    }))
+    }));
   }
-  data.value = update_values
+  data.value = update_values;
   subscribeData.value = getSubData(update_values);
-}
+};
 
 watch(
   () => buildingStore.selectedBuilding,
@@ -169,14 +168,16 @@ const currentFloor = ref(null);
 
 const updateCurrentFloor = (floor) => {
   currentFloor.value = floor;
-}
+};
 
-const realtimeData = ref([])
+const realtimeData = ref([]);
-const timeId = ref(null)
+const timeId = ref(null);
 const getAllDeviceRealtime = async () => {
-   // 立即執行一次
+  // 立即執行一次
-   const fetchData = async () => {
+  const fetchData = async () => {
-    const res = await getSystemRealTime(subscribeData.value.map(d => d.device_number));
+    const res = await getSystemRealTime(
+      subscribeData.value.map((d) => d.device_number)
+    );
     console.log(res.data);
     realtimeData.value = res.data;
   };
@@ -184,14 +185,25 @@ const getAllDeviceRealtime = async () => {
 
   // 然後設定每 10 秒更新一次
   timeId.value = setInterval(fetchData, 10000);
-}
+};
 
-watch(subscribeData, (newValue) => {
+watch(
-  timeId.value && clearInterval(timeId.value)
+  subscribeData,
-  newValue.length > 0 && getAllDeviceRealtime()
+  (newValue) => {
-}, { deep: true, immediate: true })
+    timeId.value && clearInterval(timeId.value);
+    newValue.length > 0 && getAllDeviceRealtime();
+  },
+  { deep: true, immediate: true }
+);
 
-provide("system_deviceList", { data, subscribeData, currentFloor, updateCurrentFloor, updateDataByGas, realtimeData })
+provide("system_deviceList", {
+  data,
+  subscribeData,
+  currentFloor,
+  updateCurrentFloor,
+  updateDataByGas,
+  realtimeData,
+});
 
 const selectedDevice = ref(null);
 const selectedDeviceCog = ref({});
@@ -227,7 +239,6 @@ const getCurrentInfoModalData = async (e, position, value) => {
           : "",
       };
     }
- 
   }
   const mobile = isMobile(e);
   selectedDevice.value = {
@@ -235,17 +246,30 @@ const getCurrentInfoModalData = async (e, position, value) => {
     value,
     isMobile: mobile,
   };
-  document.getElementById('system_info_modal').showModal();
+  document.getElementById("system_info_modal").showModal();
 };
 
-const selectedDeviceRealtime = computed(() => realtimeData.value?.find(({ device_number }) => device_number === selectedDevice.value?.value?.device_number)?.data)
+const selectedDeviceRealtime = computed(
+  () =>
+    realtimeData.value?.find(
+      ({ device_number }) =>
+        device_number === selectedDevice.value?.value?.device_number
+    )?.data
+);
 
 const clearSelectedDeviceInfo = () => {
-
   selectedDevice.value.value = null;
-}
+};
 
-provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, selected_dbid, deptData })
+provide("system_selectedDevice", {
+  selectedDeviceRealtime,
+  selectedDevice,
+  getCurrentInfoModalData,
+  clearSelectedDeviceInfo,
+  selectedDeviceCog,
+  selected_dbid,
+  deptData,
+});
 
 onBeforeUnmount(() => {
   clearInterval(timeId.value);
@@ -255,7 +279,9 @@ onBeforeUnmount(() => {
 <template>
   <SystemInfoModal :data="selectedDevice" />
   <div class="border border-info px-4 py-2">
-    <h5 class="text-md font-extrabold me-4">{{ buildingStore.selectedSystem?.full_name }}</h5>
+    <h5 class="text-md font-extrabold me-4">
+      {{ buildingStore.selectedSystem?.full_name }}
+    </h5>
     <SystemFloorBar />
     <SystemDeptBar />
   </div>
@@ -263,19 +289,34 @@ onBeforeUnmount(() => {
     <div class="col-span-1 h-[calc(100vh-170px)] flex flex-col justify-start">
       <div>
         <div class="flex mb-4 items-center">
-          <span class="flex items-center mr-3" v-if="statusList?.device_normal_text">
+          <span
-            <span class="w-7 h-7 rounded-full inline-block mr-1"
+            class="flex items-center mr-3"
-              :style="{ backgroundColor: statusList.device_normal_color }"></span>
+            v-if="statusList?.device_normal_text"
+          >
+            <span
+              class="w-7 h-7 rounded-full inline-block mr-1"
+              :style="{ backgroundColor: statusList.device_normal_color }"
+            ></span>
             <span>{{ statusList.device_normal_text }}</span>
           </span>
-          <span class="flex items-center mr-3" v-if="statusList?.device_close_text">
+          <span
-            <span class="w-7 h-7 rounded-full inline-block mr-1"
+            class="flex items-center mr-3"
-              :style="{ backgroundColor: statusList.device_close_color }"></span>
+            v-if="statusList?.device_close_text"
+          >
+            <span
+              class="w-7 h-7 rounded-full inline-block mr-1"
+              :style="{ backgroundColor: statusList.device_close_color }"
+            ></span>
             <span>{{ statusList.device_close_text }}</span>
           </span>
-          <span class="flex items-center mr-3" v-if="statusList?.device_error_text">
+          <span
-            <span class="w-7 h-7 rounded-full inline-block mr-1"
+            class="flex items-center mr-3"
-              :style="{ backgroundColor: statusList.device_error_color }"></span>
+            v-if="statusList?.device_error_text"
+          >
+            <span
+              class="w-7 h-7 rounded-full inline-block mr-1"
+              :style="{ backgroundColor: statusList.device_error_color }"
+            ></span>
             <span>{{ statusList.device_error_text }}</span>
           </span>
         </div>
@@ -286,18 +327,57 @@ onBeforeUnmount(() => {
       </div>
     </div>
     <div class="col-span-1 h-full flex flex-col justify-between">
-      <SystemMode />
+      <template v-if="showForgeArea">
-      <div class="h-full relative">
+        <SystemMode />
-        <SystemFloor
+        <div class="h-full relative">
-          :class="twMerge('absolute h-full w-full', route.query.mode === '2D' ? 'opacity-100 z-10' : 'opacity-0 z-0')" />
+          <SystemFloor
-        <div
+            :class="
-          :class="twMerge('absolute h-full w-full', route.query.mode === '3D' ? 'opacity-100 z-10' : 'opacity-0 z-0')">
+              twMerge(
-          <ForgeForSystem :initialData="{}" />
+                'absolute h-full w-full',
+                route.query.mode === '2D' ? 'opacity-100 z-10' : 'opacity-0 z-0'
+              )
+            "
+          />
+          <div
+            :class="
+              twMerge(
+                'absolute h-full w-full',
+                route.query.mode === '3D' ? 'opacity-100 z-10' : 'opacity-0 z-0'
+              )
+            "
+          >
+            <ForgeForSystem :initialData="{}" />
+          </div>
         </div>
-      </div>
+      </template>
+      <template v-else>
+        <div class="h-full relative">
+          <img
+            alt="build"
+            src="/build_img.jpg"
+            :class="
+              twMerge(
+                'absolute w-full h-full transition-opacity duration-300',
+                route.params.floor_id === 'main'
+                  ? 'opacity-100  z-10'
+                  : 'opacity-0  z-0'
+              )
+            "
+          />
+          <SystemFloor
+            :class="
+              twMerge(
+                'absolute h-full w-full',
+                route.params.floor_id !== 'main'
+                  ? 'opacity-100 z-10'
+                  : 'opacity-0 z-0'
+              )
+            "
+          />
+        </div>
+      </template>
     </div>
   </div>
-
 </template>
 
-<style lang='scss' scoped></style>
+<style lang="scss" scoped></style>

src/views/system/components/SystemFloorBar.vue

@@ -47,8 +47,6 @@ watch(
   () => store.floorList,
   (newValue) => {
     if (newValue) {
-      console.log('newValue',newValue);
-      
       const floorList = [
         {
           title: "All",