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, sleepFrame, sleepIdle } from '@/utils/sleep';
+import { sleepFrame } from '@/utils/sleep';
 import type { Station } from '@/apis/domains';
 import { DeviceType, getDeviceTypeVal } from '@/enums/device-type';
 import type { StationAlarmCounts } from './domains';

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, sleepFrame, sleepIdle } from '@/utils/sleep';
+import { sleepFrame } from '@/utils/sleep';
 import type { Station } from '@/apis/domains';
 
 const createEmptyStationDevices = (): StationDevices => {

src/pages/device-page.vue

@@ -4,7 +4,7 @@ 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 { NEmpty, NIcon, NLayout, NLayoutContent, NLayoutSider, NPageHeader, NScrollbar, NSpin } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -33,6 +33,8 @@ onMounted(() => {
   initFromRoute(lineDevices.value);
 });
 
+watch(lineDevices, (devices) => initFromRoute(devices), { deep: true });
+
 // 加载条控制
 watch(
   lineDevicesFetching,
@@ -41,9 +43,9 @@ watch(
       window.$loadingBar.start();
     } else {
       window.$loadingBar.finish();
-      // 当设备数据更新时，需要重新配置设备树及其属性
+      // 当设备数据更新时，需要重新配置设备树
       localLineDevices.value = lineDevices.value;
-      initFromRoute(lineDevices.value);
+      // initFromRoute(lineDevices.value);
     }
   },
   {
@@ -84,6 +86,11 @@ watch(
               <DeviceRenderer :station-code="selectedStationCode" :device="selectedDevice" />
             </NScrollbar>
           </template>
+          <template v-else-if="lineDevicesFetching">
+            <div style="width: 100%; height: 100%; display: flex">
+              <NSpin style="margin: auto" />
+            </div>
+          </template>
           <template v-else>
             <div style="width: 100%; height: 100%; display: flex">
               <NEmpty description="选择设备查看诊断数据" style="margin: auto" />