fix: useLineDevicesQuery disabled in DevicePage

src/pages/device-page.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
 import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
+import { useLineDevicesQuery } from '@/composables/query';
 import { DeviceType, DeviceTypeName, type DeviceTypeVal, type DeviceTypeKey } from '@/enums/device-type';
 import { useLineDevicesStore } from '@/stores/line-devices';
 import { useStationStore } from '@/stores/station';
@@ -33,6 +34,8 @@ import { h, onMounted, useTemplateRef } from 'vue';
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter, type LocationQuery } from 'vue-router';
 
+useLineDevicesQuery();
+
 const route = useRoute();
 const router = useRouter();
 
@@ -58,7 +61,7 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
   deviceTabPanes.forEach(({ name: paneName /* , tab: paneTab */ }) => {
     treeData[paneName] = stationList.value.map<TreeOption>((station) => {
       const { name: stationName, code: stationCode } = station;
-      const devices = lineDevices.value[stationCode][paneName] as NdmDeviceResultVO[];
+      const devices = lineDevices.value[stationCode]?.[paneName] ?? ([] as NdmDeviceResultVO[]);
       const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
       const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
       // 对于录像机，需要根据clusterList字段以分号分隔设备IP，进一步形成子树结构
@@ -107,18 +110,19 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
         key: stationCode,
         prefix: () => renderStationNodePrefix(station),
         suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
-        children: lineDevices.value[stationCode][paneName].map<TreeOption>((dev) => {
+        children:
-          const device = dev as NdmDeviceResultVO;
+          lineDevices.value[stationCode]?.[paneName]?.map<TreeOption>((dev) => {
-          return {
+            const device = dev as NdmDeviceResultVO;
-            label: `${device.name}`,
+            return {
-            key: device.id,
+              label: `${device.name}`,
-            prefix: () => renderDeviceNodePrefix(device, stationCode),
+              key: device.id,
-            suffix: () => `${device.ipAddress}`,
+              prefix: () => renderDeviceNodePrefix(device, stationCode),
-            // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+              suffix: () => `${device.ipAddress}`,
-            device,
+              // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-            stationCode,
+              device,
-          };
+              stationCode,
-        }),
+            };
+          }) ?? [],
       };
     });
   });
@@ -187,7 +191,7 @@ const setDeviceTreePropsFromRouteQuery = (query: LocationQuery) => {
 // 页面加载时，需要设置选中的设备
 onMounted(() => {
   setDeviceTreePropsFromRouteQuery(route.query);
-  scrollDeviceTreeToSelectedDevice();
+  // scrollDeviceTreeToSelectedDevice();
 });
 // 页面加载时设备数据可能不存在，因此当设备数据更新时，需要重新设置选中的设备
 watch(lineDevices, () => setDeviceTreePropsFromRouteQuery(route.query), { immediate: true });