feat: ui

src/composables/query/use-line-alarms-query.ts

@@ -0,0 +1,18 @@
+import { useStationStore } from '@/stores/station';
+import { useQuery } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+export function useLineDevicesQuery() {
+  const stationStore = useStationStore();
+  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
+
+  return useQuery({
+    queryKey: ['line-devices', updatedTime],
+    enabled: computed(() => onlineStationList.value.length > 0),
+    queryFn: async () => {
+      if (!stationList?.value) {
+      }
+    },
+  });
+}

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

@@ -0,0 +1,150 @@
+import { useQuery } from '@tanstack/vue-query';
+import type { PageParams } from '@/apis/models/base/page';
+import {
+  postNdmCameraPage,
+  postNdmDecoderPage,
+  postNdmKeyboardPage,
+  postNdmMediaServerPage,
+  postNdmNvrPage,
+  postNdmSecurityBoxPage,
+  postNdmSwitchPage,
+  postNdmVideoServerPage,
+} from '@/apis/requests/device';
+import { useStationStore } from '@/stores/station';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { DeviceType } from '@/enums/device-type';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models/device';
+
+// 定义设备数据类型
+interface StationDevices {
+  // ndmCameraList: any[];
+  // ndmDecoderList: any[];
+  // ndmKeyboardList: any[];
+  // ndmMedisServerList: any[];
+  // ndmNvrList: any[];
+  // ndmSecurityBoxList: any[];
+  // ndmSwitchList: any[];
+  // ndmVideoServerList: any[];
+  [DeviceType.Camera]: NdmCameraResultVO[];
+  [DeviceType.Decoder]: NdmDecoderResultVO[];
+  [DeviceType.Keyboard]: NdmKeyboardResultVO[];
+  [DeviceType.MediaServer]: NdmMediaServerResultVO[];
+  [DeviceType.Nvr]: NdmNvrResultVO[];
+  [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
+  [DeviceType.Switch]: NdmSwitchResultVO[];
+  [DeviceType.VideoServer]: NdmVideoServerResultVO[];
+}
+
+export function useLineDevicesQuery() {
+  const stationStore = useStationStore();
+  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
+
+  return useQuery({
+    queryKey: ['line-devices', updatedTime],
+    enabled: computed(() => onlineStationList.value.length > 0),
+    placeholderData: (prev) => prev,
+    queryFn: async (): Promise<Record<string, StationDevices>> => {
+      const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
+
+      const lineDevices: Record<string, StationDevices> = {};
+
+      // 如果没有车站列表，返回空对象
+      if (!stationList?.value) {
+        return lineDevices;
+      }
+
+      // 遍历所有车站
+      for (const station of stationList.value) {
+        // 如果车站离线，设置空数组
+        if (!station.online) {
+          lineDevices[station.code] = {
+            // ndmCameraList: [],
+            // ndmDecoderList: [],
+            // ndmKeyboardList: [],
+            // ndmMedisServerList: [],
+            // ndmNvrList: [],
+            // ndmSecurityBoxList: [],
+            // ndmSwitchList: [],
+            // ndmVideoServerList: [],
+            [DeviceType.Camera]: [],
+            [DeviceType.Decoder]: [],
+            [DeviceType.Keyboard]: [],
+            [DeviceType.MediaServer]: [],
+            [DeviceType.Nvr]: [],
+            [DeviceType.SecurityBox]: [],
+            [DeviceType.Switch]: [],
+            [DeviceType.VideoServer]: [],
+          };
+          continue;
+        }
+
+        try {
+          // 并行获取该车站的所有设备类型数据
+          const [cameraData, decoderData, keyboardData, mediaServerData, nvrData, securityBoxData, switchData, videoServerData] = await Promise.all([
+            postNdmCameraPage(station.code, pageQuery),
+            postNdmDecoderPage(station.code, pageQuery),
+            postNdmKeyboardPage(station.code, pageQuery),
+            postNdmMediaServerPage(station.code, pageQuery),
+            postNdmNvrPage(station.code, pageQuery),
+            postNdmSecurityBoxPage(station.code, pageQuery),
+            postNdmSwitchPage(station.code, pageQuery),
+            postNdmVideoServerPage(station.code, pageQuery),
+          ]);
+
+          // 存储该车站的设备数据
+          lineDevices[station.code] = {
+            // ndmCameraList: cameraData.records ?? [],
+            // ndmDecoderList: decoderData.records ?? [],
+            // ndmKeyboardList: keyboardData.records ?? [],
+            // ndmMedisServerList: mediaServerData.records ?? [],
+            // ndmNvrList: nvrData.records ?? [],
+            // ndmSecurityBoxList: securityBoxData.records ?? [],
+            // ndmSwitchList: switchData.records ?? [],
+            // ndmVideoServerList: videoServerData.records ?? [],
+            [DeviceType.Camera]: cameraData.records ?? [],
+            [DeviceType.Decoder]: decoderData.records ?? [],
+            [DeviceType.Keyboard]: keyboardData.records ?? [],
+            [DeviceType.MediaServer]: mediaServerData.records ?? [],
+            [DeviceType.Nvr]: nvrData.records ?? [],
+            [DeviceType.SecurityBox]: securityBoxData.records ?? [],
+            [DeviceType.Switch]: switchData.records ?? [],
+            [DeviceType.VideoServer]: videoServerData.records ?? [],
+          };
+        } catch (error) {
+          console.error(`获取车站 ${station.name} 设备数据失败:`, error);
+          // 如果获取失败，设置空数组
+          lineDevices[station.code] = {
+            // ndmCameraList: [],
+            // ndmDecoderList: [],
+            // ndmKeyboardList: [],
+            // ndmMedisServerList: [],
+            // ndmNvrList: [],
+            // ndmSecurityBoxList: [],
+            // ndmSwitchList: [],
+            // ndmVideoServerList: [],
+            [DeviceType.Camera]: [],
+            [DeviceType.Decoder]: [],
+            [DeviceType.Keyboard]: [],
+            [DeviceType.MediaServer]: [],
+            [DeviceType.Nvr]: [],
+            [DeviceType.SecurityBox]: [],
+            [DeviceType.Switch]: [],
+            [DeviceType.VideoServer]: [],
+          };
+        }
+      }
+
+      return lineDevices;
+    },
+  });
+}

src/composables/query/use-station-list-query.ts

@@ -5,29 +5,39 @@ import { useStationStore } from '@/stores/station';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
+import { getAppEnvConfig } from '@/utils/env';
+import { useQueryControlStore } from '@/stores/query-control';
+import { computed } from 'vue';
 
 export function useStationListQuery() {
   const stationStore = useStationStore();
-  const { stationList } = storeToRefs(stationStore);
-  useQuery({
+  const { updatedTime, stationList } = storeToRefs(stationStore);
+  const queryControlStore = useQueryControlStore();
+  const { pollingEnabled } = storeToRefs(queryControlStore);
+
+  return useQuery({
     queryKey: ['station-list'],
+    enabled: computed(() => pollingEnabled.value),
     queryFn: async () => {
       const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`);
 
-      stationList.value = ndmStationList.map<Station>((record) => ({
+      const stations = ndmStationList.map<Station>((record) => ({
         code: record.code ?? '',
         name: record.name ?? '',
         online: false,
       }));
 
-      const pingResultList = await Promise.allSettled(stationList.value.map((station) => ndmVerify(station.code)));
+      const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code)));
 
-      stationList.value = stationList.value.map((station, index) => ({
+      stationList.value = stations.map((station, index) => ({
         ...station,
         online: pingResultList[index].status === 'fulfilled',
       }));
 
+      updatedTime.value = dayjs().toJSON();
+
       return stationList.value;
     },
+    refetchInterval: getAppEnvConfig().requestInterval * 1000,
   });
 }