feat: apply new stores to UI and hope it works

src/components/station-card.vue

@@ -4,31 +4,29 @@ import DeviceParamsConfigModal from './device-params-config-modal.vue';
 import OfflineDeviceDetailModal from './offline-device-detail-modal.vue';
 import type { Station } from '@/apis/domains';
 import { DeviceType } from '@/enums/device-type';
-import { useStationDevicesQuery } from '@/composables/query';
+import { type StationAlarms, type StationDevices } from '@/composables/query';
 import { ControlOutlined } from '@vicons/antd';
 import { Video as VideoIcon } from '@vicons/carbon';
 import axios from 'axios';
 import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars, NSpace, NTooltip } from 'naive-ui';
 import { toRefs, computed, ref } from 'vue';
-import { useStationAlarmsQuery } from '@/composables/query';
 
 interface Props {
   station: Station;
+  stationDevices: StationDevices;
+  stationAlarms: StationAlarms;
 }
 
 const props = defineProps<Props>();
 
-const { station } = toRefs(props);
+const { station, stationDevices, stationAlarms } = toRefs(props);
 const { code, name, online } = toRefs(station.value);
 
-const { data: stationDevices } = useStationDevicesQuery(code.value);
-const { data: stationAlarms } = useStationAlarmsQuery(station.value.code);
-
 // 计算总离线设备数量
 const offlineDeviceCount = computed(() => {
   let count = 0;
   Object.values(DeviceType).forEach((deviceType) => {
-    const offlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '20') ?? [];
+    const offlineDeviceList = stationDevices.value[deviceType].filter((device) => device.deviceStatus === '20');
     count += offlineDeviceList.length;
   });
   return count;
@@ -36,14 +34,14 @@ const offlineDeviceCount = computed(() => {
 const deviceCount = computed(() => {
   let count = 0;
   Object.values(DeviceType).forEach((deviceType) => {
-    count += stationDevices.value?.[deviceType].length ?? 0;
+    count += stationDevices.value[deviceType].length;
   });
   return count;
 });
 const devicAlarmCount = computed(() => {
   let count = 0;
   Object.values(DeviceType).forEach((deviceType) => {
-    count += stationAlarms.value?.[deviceType].length ?? 0;
+    count += stationAlarms.value[deviceType].length;
   });
   return count;
 });

src/pages/dashboard-page.vue

@@ -3,15 +3,21 @@ import StationCard from '@/components/station-card.vue';
 import { NGrid, NGi } from 'naive-ui';
 import { useStationStore } from '@/stores/station';
 import { storeToRefs } from 'pinia';
+import { useLineDevicesStore } from '@/stores/line-devices';
+import { useLineAlarmsStore } from '@/stores/line-alarms';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
+const lineDevicesStore = useLineDevicesStore();
+const { lineDevices } = storeToRefs(lineDevicesStore);
+const lineAlarmsStore = useLineAlarmsStore();
+const { lineAlarms } = storeToRefs(lineAlarmsStore);
 </script>
 
 <template>
   <NGrid :cols="8" :x-gap="6" :y-gap="6" style="padding: 8px">
     <NGi v-for="station in stationList" :key="station.name">
-      <StationCard :station="station" />
+      <StationCard :station="station" :station-devices="lineDevices[station.code]" :station-alarms="lineAlarms[station.code]" />
     </NGi>
   </NGrid>
 </template>

src/pages/device-page.vue

@@ -1,8 +1,8 @@
 <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';
 import { ChevronBack } from '@vicons/ionicons5';
 import { destr } from 'destr';
@@ -49,7 +49,8 @@ const deviceTabPanes = Object.keys(DeviceType).map((key) => {
 // 获取车站和设备数据
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
-const { data: lineDevices } = useLineDevicesQuery();
+const lineDevicesStore = useLineDevicesStore();
+const { lineDevices } = storeToRefs(lineDevicesStore);
 
 // ========== 设备树数据 ==========
 const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
@@ -57,7 +58,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[] | undefined;
+      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，进一步形成子树结构
@@ -106,15 +107,18 @@ 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>((device) => ({
-          label: `${device.name}`,
-          key: device.id,
-          prefix: () => renderDeviceNodePrefix(device, stationCode),
-          suffix: () => `${device.ipAddress}`,
-          // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-          device,
-          stationCode,
-        })),
+        children: lineDevices.value[stationCode][paneName].map<TreeOption>((dev) => {
+          const device = dev as NdmDeviceResultVO;
+          return {
+            label: `${device.name}`,
+            key: device.id,
+            prefix: () => renderDeviceNodePrefix(device, stationCode),
+            suffix: () => `${device.ipAddress}`,
+            // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+            device,
+            stationCode,
+          };
+        }),
       };
     });
   });
@@ -175,7 +179,7 @@ const setDeviceTreePropsFromRouteQuery = (query: LocationQuery) => {
 
   selectedTab.value = devType;
   selectedKeys.value = [devDBId];
-  const stnDevices = lineDevices.value?.[stnCode];
+  const stnDevices = lineDevices.value[stnCode];
   const devices = stnDevices?.[devType];
   // 如果没找到，那还是赋值为原来选择的设备
   selectedDevice.value = devices?.find((device) => device.id === devDBId) ?? selectedDevice.value;
@@ -205,7 +209,7 @@ const searchPattern = computed(() => {
   const search = searchInput.value;
   const status = statusInput.value;
   if (!search && !status) return ''; // 如果pattern非空会导致NTree组件认为筛选完成，UI上发生全量匹配
-  return JSON.stringify({ search: searchInput.value, status: statusInput.value, timestamp: stationStore.updatedTime });
+  return JSON.stringify({ search: searchInput.value, status: statusInput.value });
 });
 const searchFilter = (pattern: string, node: TreeOption): boolean => {
   const { search, status } = destr<{ search: string; status: string }>(pattern);
@@ -225,7 +229,7 @@ const onClickLocateDeviceTree = () => {
   const stationCode = route.query['stationCode'] as string | undefined;
   let expanded: string[] | undefined = stationCode ? [stationCode] : undefined;
   if (selectedTab.value === DeviceType.Nvr && stationCode) {
-    const nvrs = (lineDevices.value?.[stationCode]?.[DeviceType.Nvr] ?? []) as NdmNvrResultVO[];
+    const nvrs = lineDevices.value[stationCode][DeviceType.Nvr];
     const clusterKeys = nvrs.filter((nvr) => !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress).map((nvr) => String(nvr.id));
     expanded = [...(expanded ?? []), ...clusterKeys];
   }