perf: optimize query and device tree

src/composables/query/alarm/use-line-alarm-counts-query.ts

@@ -7,7 +7,7 @@ import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
 import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import { sleep } from '@/utils/sleep';
+import { sleep, sleepFrame, sleepIdle } from '@/utils/sleep';
 import type { Station } from '@/apis/domains';
 import { DeviceType, getDeviceTypeVal } from '@/enums/device-type';
 import type { StationAlarmCounts } from './domains';
@@ -94,7 +94,7 @@ function useStationAlarmCountsMutation() {
     },
     onSuccess: async (stationAlarmCounts, { station }) => {
       lineAlarmCounts.value[station.code] = stationAlarmCounts;
-      await sleep();
+      await sleepFrame();
     },
     onError: (error, { station }) => {
       console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);

src/composables/query/device/use-line-devices-query.ts

@@ -8,7 +8,7 @@ import type { StationDevices } from './domains';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { LINE_DEVICES_QUERY_KEY } from '@/constants';
 import { ndmClient } from '@/apis/client';
-import { sleep } from '@/utils/sleep';
+import { sleep, sleepFrame, sleepIdle } from '@/utils/sleep';
 import type { Station } from '@/apis/domains';
 
 const createEmptyStationDevices = (): StationDevices => {
@@ -77,7 +77,7 @@ function useStationDevicesMutation() {
     },
     onSuccess: async (stationDevices, { station }) => {
       lineDevices.value[station.code] = stationDevices;
-      await sleep();
+      await sleepFrame();
     },
     onError: (error, { station }) => {
       console.error(`获取车站 ${station.name} 设备数据失败:`, error);

src/pages/device-page.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useDeviceSelection } from '@/composables/device';
-import { useLineDevicesQuery } from '@/composables/query';
+import { useLineDevicesQuery, type LineDevices } from '@/composables/query';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
 import { ChevronBack } from '@vicons/ionicons5';
 import { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import DeviceTree from '@/components/device-page/device-tree.vue';
@@ -19,6 +19,20 @@ const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
 const { lineDevices } = storeToRefs(lineDevicesStore);
 
+const route = useRoute();
+const router = useRouter();
+
+const onClickBack = () => router.push({ path: `${route.query['from']}` });
+
+const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
+
+const localLineDevices = ref<LineDevices>({});
+
+// 页面初始化
+onMounted(() => {
+  initFromRoute(lineDevices.value);
+});
+
 // 加载条控制
 watch(
   lineDevicesFetching,
@@ -27,35 +41,15 @@ watch(
       window.$loadingBar.start();
     } else {
       window.$loadingBar.finish();
+      // 当设备数据更新时，需要重新配置设备树及其属性
+      localLineDevices.value = lineDevices.value;
+      initFromRoute(lineDevices.value);
     }
   },
   {
     immediate: true,
   },
 );
-
-const route = useRoute();
-const router = useRouter();
-
-const onClickBack = () => router.push({ path: `${route.query['from']}` });
-
-const { selectedStationCode, selectedDeviceType, selectedDevice, selectDevice, initFromRoute } = useDeviceSelection();
-
-// 页面初始化
-onMounted(() => {
-  initFromRoute(lineDevices.value);
-});
-
-// 当设备数据更新时，需要重新配置设备树
-watch(
-  lineDevices,
-  () => {
-    initFromRoute(lineDevices.value);
-  },
-  {
-    deep: true,
-  },
-);
 </script>
 
 <template>
@@ -63,7 +57,7 @@ watch(
     <NLayoutSider bordered :width="600" :collapsed-width="0" show-trigger="bar">
       <DeviceTree
         :station-list="stationList"
-        :line-devices="lineDevices"
+        :line-devices="localLineDevices"
         :selected-station-code="selectedStationCode"
         :selected-device-type="selectedDeviceType"
         :selected-device="selectedDevice"