refactor:

- extend NdmDeviceAlarmLogVO
- only query alarm counts
- separate request and store update in useQuery
- refactor station card and alarm modal, data fetching is now inside modal
- optimize device tree
- optimize query station list
- make export size follow page size
- fix query sequence and make them follow stations -> devices -> alarms

src/apis/models/device/index.ts

@@ -26,3 +26,4 @@ export * from './video/ndm-video-server';
 export type NdmDeviceVO = NdmSecurityBoxVO | NdmSwitchVO | NdmNvrVO | NdmCameraVO | NdmDecoderVO | NdmKeyboardVO | NdmMediaServerVO | NdmVideoServerVO;
 export type NdmDeviceResultVO = Partial<NdmDeviceVO>;
 export type NdmServerVO = NdmMediaServerVO | NdmVideoServerVO;
+export type NdmServerResultVO = Partial<NdmServerVO>;

src/apis/models/device/log/ndm-device-alarm-log.ts

@@ -15,6 +15,7 @@ export interface NdmDeviceAlarmLogVO extends BaseModel {
   impactService: string;
   alarmType: string;
   deviceType: string;
+  stationCode: string;
 }
 
 export type NdmDeviceAlarmLogResultVO = Partial<NdmDeviceAlarmLogVO>;

src/apis/requests/station/ndm-verify.ts

@@ -8,3 +8,20 @@ export const ndmVerify = async (stationCode: string, signal?: AbortSignal) => {
     throw err;
   }
 };
+
+export interface BatchVerify {
+  name: string;
+  ipAddress: string;
+  stationCode: string;
+  verifyUrl: string;
+  onlineState: boolean;
+}
+
+export const batchVerify = async (signal?: AbortSignal) => {
+  const resp = await ndmClient.post<BatchVerify[]>('/api/ndm/ndmKeepAlive/batchVerify', {}, { retRaw: true, timeout: 5000, signal });
+  const [err, list] = resp;
+  if (err || !list) {
+    throw err;
+  }
+  return list;
+};

src/components/dashboard-page/device-alarm-detail-modal.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
-import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
+import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO, NdmDeviceAlarmLogVO, PageQueryExtra } from '@/apis/models';
-import { ndmDeviceAlarmLogDefaultExportByTemplate } from '@/apis/requests';
+import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import type { StationAlarms } from '@/composables/query';
+import type { StationAlarmCounts } from '@/composables/query';
-import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
+import { DeviceType, DeviceTypeCode, DeviceTypeName, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
-import { DeviceType, DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
 import { useQueryControlStore } from '@/stores/query-control';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
-import { computed, h, reactive, toRefs, watch } from 'vue';
+import { computed, h, reactive, ref, toRefs, watch } from 'vue';
 
 interface Props {
   station?: Station;
-  stationAlarms?: StationAlarms;
+  stationAlarmCounts?: StationAlarmCounts;
 }
 
 const props = defineProps<Props>();
-const { station, stationAlarms } = toRefs(props);
+const { station, stationAlarmCounts } = toRefs(props);
 const show = defineModel<boolean>('show', { required: true, default: false });
 
 watch(show, (newValue) => {
@@ -32,17 +31,13 @@ watch(show, (newValue) => {
   }
 });
 
-const alarmCount = computed(() => {
+const alarmCount = computed(() => stationAlarmCounts.value?.unclassified ?? 0);
-  return Object.values(DeviceType).reduce((count, deviceType) => {
-    return count + (stationAlarms.value?.[deviceType].length ?? 0);
-  }, 0);
-});
 
-const classifiedCounts = computed(() => {
+const classifiedAlarmCounts = computed(() => {
   return Object.values(DeviceType).map<{ label: string; count: number }>((deviceType) => {
     return {
       label: DeviceTypeName[deviceType],
-      count: stationAlarms.value?.[deviceType].length ?? 0,
+      count: stationAlarmCounts.value?.[deviceType] ?? 0,
     };
   });
 });
@@ -62,11 +57,9 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     render: (rowData) => {
       return DeviceTypeName[getDeviceTypeVal(rowData.deviceType)];
     },
+    filter: true,
     filterMultiple: true,
     filterOptions: Object.values(DeviceType).map((deviceType) => ({ label: DeviceTypeName[deviceType], value: deviceType })),
-    filter: (filterOptionValue, row) => {
-      return getDeviceTypeVal(row.deviceType) === filterOptionValue;
-    },
   },
   { title: '设备名称', key: 'deviceName' },
   { title: '告警类型', key: 'alarmType', align: 'center' },
@@ -82,14 +75,12 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     render: (rowData) => {
       return rowData.alarmCategory === '2' ? '是' : '否';
     },
+    filter: true,
     filterMultiple: false,
     filterOptions: [
       { label: '是', value: '2' },
       { label: '否', value: '1' },
     ],
-    filter: (filterOptionValue, row) => {
-      return row.alarmCategory === filterOptionValue;
-    },
   },
   { title: '恢复时间', key: 'updatedTime' },
   {
@@ -99,18 +90,27 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     render: (rowData) => {
       return rowData.alarmConfirm === '1' ? '已确认' : '未确认';
     },
+    filter: true,
     filterMultiple: false,
     filterOptions: [
       { label: '已确认', value: '1' },
       { label: '未确认', value: '2' },
     ],
-    filter: (filterOptionValue, row) => {
-      return row.alarmConfirm === filterOptionValue;
-    },
   },
   // { title: '设备ID', key: 'deviceId' },
 ];
 
+const filterFields = reactive<NdmDeviceAlarmLogPageQuery & PageQueryExtra<NdmDeviceAlarmLogVO>>({
+  alarmCategory: '',
+  alarmConfirm: '',
+  deviceType_in: [] as string[],
+});
+const resetFilterFields = () => {
+  filterFields.alarmCategory = '';
+  filterFields.alarmConfirm = '';
+  filterFields.deviceType_in = [];
+};
+
 const tablePagination = reactive<PaginationProps>({
   size: 'small',
   showSizePicker: true,
@@ -124,52 +124,126 @@ const tablePagination = reactive<PaginationProps>({
   },
   onUpdatePage: (page: number) => {
     tablePagination.page = page;
+    getStaionAlarmList();
   },
   onUpdatePageSize: (pageSize: number) => {
     tablePagination.pageSize = pageSize;
     tablePagination.page = 1;
+    getStaionAlarmList();
   },
 });
 
-const tableData = computed<DataTableRowData[]>(() => stationAlarms.value?.unclassified ?? []);
+const tableData = ref<DataTableRowData[]>([]);
 
-const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
+const exportTableData = () => {
+  downloadTableData();
+};
+
+const onAfterModalEnter = () => {
+  getStaionAlarmList();
+};
+
+const onAfterModalLeave = () => {
+  resetFilterFields();
+  tablePagination.page = 1;
+  tablePagination.pageSize = 10;
+  tablePagination.pageCount = 1;
+  tablePagination.itemCount = 0;
+  tableData.value = [];
+};
+
+const onUpdateFilters: DataTableProps['onUpdateFilters'] = (filterState) => {
+  filterFields.alarmCategory = filterState['alarmCategory'] as string;
+  filterFields.alarmConfirm = filterState['alarmConfirm'] as string;
+  const deviceTypeVals = filterState['deviceType'] as DeviceTypeVal[];
+  filterFields.deviceType_in = deviceTypeVals.flatMap((typeVal) => DeviceTypeCode[typeVal]);
+  getStaionAlarmList();
+};
+
+const { mutate: getStaionAlarmList, isPending: isTableLoading } = useMutation({
   mutationFn: async () => {
-    const data = await ndmDeviceAlarmLogDefaultExportByTemplate(station.value?.code ?? '', {
+    const now = dayjs();
-      model: {},
+    const res = await postNdmDeviceAlarmLogPage(station.value?.code ?? '', {
-      extra: {
+      model: {
-        createdTime_precisest: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+        stationCode: station.value?.code,
-        createdTime_preciseed: dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss'),
+        alarmCategory: filterFields.alarmCategory,
+        alarmConfirm: filterFields.alarmConfirm,
       },
-      current: 1,
+      extra: {
-      size: JAVA_INTEGER_MAX_VALUE,
+        deviceType_in: filterFields.deviceType_in,
+        createdTime_precisest: now.startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+        createdTime_preciseed: now.endOf('date').format('YYYY-MM-DD HH:mm:ss'),
+      },
+      current: tablePagination.page ?? 1,
+      size: tablePagination.pageSize ?? 10,
       order: 'descending',
       sort: 'id',
     });
-    return data;
+    return res;
   },
-  onSuccess: (data) => {
+  onSuccess: (res) => {
-    downloadByData(data, `${station.value?.name}-设备告警记录.xlsx`);
+    const { records, pages, size, total } = res;
+    tablePagination.pageSize = parseInt(size);
+    tablePagination.pageCount = parseInt(pages);
+    tablePagination.itemCount = parseInt(total);
+    tableData.value = records;
   },
   onError: (error) => {
     window.$message.error(error.message);
   },
 });
 
-const exportTableData = () => downloadTableData();
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
-
+  mutationFn: async () => {
-const onModalClose = () => {};
+    const now = dayjs();
+    const data = await ndmDeviceAlarmLogDefaultExportByTemplate(station.value?.code ?? '', {
+      model: {
+        stationCode: station.value?.code,
+        alarmCategory: filterFields.alarmCategory,
+        alarmConfirm: filterFields.alarmConfirm,
+      },
+      extra: {
+        deviceType_in: filterFields.deviceType_in,
+        createdTime_precisest: now.startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+        createdTime_preciseed: now.endOf('date').format('YYYY-MM-DD HH:mm:ss'),
+      },
+      current: tablePagination.page ?? 1,
+      size: tablePagination.pageSize ?? 10,
+      order: 'descending',
+      sort: 'id',
+    });
+    return data;
+  },
+  onSuccess: (data) => {
+    const now = dayjs();
+    const fmt = now.format('YYYY-MM-DD_HH:mm:ss');
+    console.log(fmt);
+    downloadByData(data, `${station.value?.name}-设备告警记录-${fmt}.xlsx`);
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" style="width: 100vw; height: 100vh" :title="`${station?.name} - 设备告警详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+  <NModal
+    v-model:show="show"
+    preset="card"
+    style="width: 100vw; height: 100vh"
+    :title="`${station?.name} - 设备告警详情`"
+    :close-on-esc="false"
+    :mask-closable="false"
+    @after-enter="onAfterModalEnter"
+    @after-leave="onAfterModalLeave"
+  >
     <div v-if="alarmCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
       <span>当前没有设备告警</span>
     </div>
     <div v-else style="height: 100%; display: flex; flex-direction: column">
       <div style="flex: 0 0 auto; margin-bottom: 16px">
         <NRow>
-          <NCol :span="3" v-for="item in classifiedCounts" :key="item.label">
+          <NCol :span="3" v-for="item in classifiedAlarmCounts" :key="item.label">
             <NStatistic :label="item.label + '告警'" :value="item.count" />
           </NCol>
         </NRow>
@@ -181,7 +255,17 @@ const onModalClose = () => {};
         </NSpace>
       </div>
       <div style="flex: 1 1 auto; min-height: 0">
-        <NDataTable :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" flex-height style="height: 100%" />
+        <NDataTable
+          :loading="isTableLoading"
+          :columns="tableColumns"
+          :data="tableData"
+          :pagination="tablePagination"
+          :single-line="false"
+          remote
+          flex-height
+          style="height: 100%"
+          @update:filters="onUpdateFilters"
+        />
       </div>
     </div>
   </NModal>

src/components/dashboard-page/station-card.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
 import { DeviceType } from '@/enums/device-type';
-import { type StationAlarms, type StationDevices } from '@/composables/query';
+import { type StationAlarmCounts, type StationDevices } from '@/composables/query';
 import { ControlOutlined } from '@vicons/antd';
 import { Video as VideoIcon } from '@vicons/carbon';
 import axios from 'axios';
@@ -11,7 +11,7 @@ import { toRefs, computed } from 'vue';
 interface Props {
   station: Station;
   stationDevices?: StationDevices;
-  stationAlarms?: StationAlarms;
+  stationAlarmCounts?: StationAlarmCounts;
 }
 
 const props = defineProps<Props>();
@@ -22,7 +22,7 @@ const emit = defineEmits<{
   'open-device-params-config-modal': [station: Station];
 }>();
 
-const { station, stationDevices, stationAlarms } = toRefs(props);
+const { station, stationDevices, stationAlarmCounts } = toRefs(props);
 
 // 计算总离线设备数量
 const offlineDeviceCount = computed(() => {
@@ -40,12 +40,8 @@ const deviceCount = computed(() => {
   });
   return count;
 });
-const devicAlarmCount = computed(() => {
+const alarmCount = computed(() => {
-  let count = 0;
+  return stationAlarmCounts.value?.unclassified ?? 0;
-  Object.values(DeviceType).forEach((deviceType) => {
-    count += stationAlarms.value?.[deviceType].length ?? 0;
-  });
-  return count;
 });
 
 // 打开对话框
@@ -148,7 +144,7 @@ const theme = useThemeVars();
               <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
             </template>
             <template #default>
-              <span class="font-small">{{ devicAlarmCount }}</span>
+              <span class="font-small">{{ alarmCount }}</span>
             </template>
             <template #suffix>
               <span class="font-xx-small">条</span>

src/components/device-page/device-tree.vue

@@ -11,7 +11,7 @@ const deviceTabPanes = Object.keys(DeviceType).map((key) => {
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
 import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
-import type { LineDevices } from '@/composables/query/device/use-line-devices-query';
+import type { LineDevices } from '@/composables/query';
 import { DeviceType, DeviceTypeName, getDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums/device-type';
 import { destr } from 'destr';
 import { NButton, NFlex, NInput, NRadio, NRadioGroup, NTab, NTabs, NTag, NTree, type TagProps, type TreeInst, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
@@ -67,44 +67,45 @@ const lineDeviceTreeData = computed<Record<string, TreeOption[]>>(() => {
       const onlineDevices = devices?.filter((device) => device.deviceStatus === '10');
       const offlineDevices = devices?.filter((device) => device.deviceStatus === '20');
       // 对于录像机，需要根据clusterList字段以分号分隔设备IP，进一步形成子树结构
+      const isCluster = (maybeNvrCluster: NdmNvrResultVO) => !!maybeNvrCluster.clusterList?.trim() && maybeNvrCluster.clusterList !== maybeNvrCluster.ipAddress;
       if (paneName === DeviceType.Nvr) {
-        const nvrs = devices as NdmNvrResultVO[] | undefined;
+        const nvrs = devices as NdmNvrResultVO[];
+        const nvrClusters: NdmNvrResultVO[] = [];
+        const nvrSingletons: NdmNvrResultVO[] = [];
+        for (const device of nvrs) {
+          if (isCluster(device)) {
+            nvrClusters.push(device);
+          } else {
+            nvrSingletons.push(device);
+          }
+        }
         return {
           label: stationName,
           key: stationCode,
           prefix: () => renderStationNodePrefix(station),
           suffix: () => `(${onlineDevices?.length ?? 0}/${offlineDevices?.length ?? 0}/${devices?.length ?? 0})`,
-          children: nvrs
+          children: nvrClusters.map<TreeOption>((nvrCluster) => {
-            ?.filter((device) => {
+            return {
-              const nvr = device as NdmNvrResultVO;
+              label: `${nvrCluster.name}`,
-              return !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress;
+              key: nvrCluster.id,
-            })
+              prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
-            .map<TreeOption>((nvrCluster) => {
+              suffix: () => `${nvrCluster.ipAddress}`,
-              return {
+              children: nvrSingletons.map<TreeOption>((nvr) => {
-                label: `${nvrCluster.name}`,
+                return {
-                key: nvrCluster.id,
+                  label: `${nvr.name}`,
-                prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
+                  key: nvr.id,
-                suffix: () => `${nvrCluster.ipAddress}`,
+                  prefix: () => renderDeviceNodePrefix(nvr, stationCode),
-                children: nvrs
+                  suffix: () => `${nvr.ipAddress}`,
-                  .filter((nvr) => {
+                  // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-                    return nvrCluster.clusterList?.includes(nvr.ipAddress ?? '');
+                  device: nvr,
-                  })
+                  stationCode,
-                  .map<TreeOption>((nvr) => {
+                };
-                    return {
+              }),
-                      label: `${nvr.name}`,
+              // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-                      key: nvr.id,
+              device: nvrCluster,
-                      prefix: () => renderDeviceNodePrefix(nvr, stationCode),
+              stationCode,
-                      suffix: () => `${nvr.ipAddress}`,
+            };
-                      // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+          }),
-                      device: nvr,
-                      stationCode,
-                    };
-                  }),
-                // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-                device: nvrCluster,
-                stationCode,
-              };
-            }),
         };
       }
       return {

src/composables/query/alarm/domains/index.ts

@@ -1 +1,34 @@
-export * from './station-alarms';
+import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
+import type { DeviceType } from '@/enums/device-type';
+
+export interface StationAlarms {
+  [DeviceType.Camera]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.Decoder]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.Keyboard]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.MediaServer]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.Nvr]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.SecurityBox]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.Switch]: NdmDeviceAlarmLogResultVO[];
+  [DeviceType.VideoServer]: NdmDeviceAlarmLogResultVO[];
+  unclassified: NdmDeviceAlarmLogResultVO[];
+}
+
+export interface LineAlarms {
+  [stationCode: string]: StationAlarms;
+}
+
+export interface StationAlarmCounts {
+  [DeviceType.Camera]: number;
+  [DeviceType.Decoder]: number;
+  [DeviceType.Keyboard]: number;
+  [DeviceType.MediaServer]: number;
+  [DeviceType.Nvr]: number;
+  [DeviceType.SecurityBox]: number;
+  [DeviceType.Switch]: number;
+  [DeviceType.VideoServer]: number;
+  unclassified: number;
+}
+
+export interface LineAlarmCounts {
+  [stationCode: string]: StationAlarmCounts;
+}

src/composables/query/alarm/domains/station-alarms.ts

@@ -1,14 +0,0 @@
-import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
-import type { DeviceType } from '@/enums/device-type';
-
-export interface StationAlarms {
-  [DeviceType.Camera]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Decoder]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Keyboard]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.MediaServer]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Nvr]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.SecurityBox]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Switch]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.VideoServer]: NdmDeviceAlarmLogResultVO[];
-  unclassified: NdmDeviceAlarmLogResultVO[];
-}

src/composables/query/alarm/index.ts

@@ -1,3 +1,3 @@
 export * from './domains';
 
-export * from './use-line-alarms-query';
+export * from './use-line-alarm-counts-query';

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

@@ -0,0 +1,104 @@
+import { LINE_ALARM_COUNTS_QUERY_KEY } from '@/constants';
+import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
+import { useQueryControlStore } from '@/stores/query-control';
+import { useStationStore } from '@/stores/station';
+import { useMutation, useQuery } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { sleep } from '@/utils/sleep';
+import type { Station } from '@/apis/domains';
+import { DeviceType, getDeviceTypeVal } from '@/enums/device-type';
+import type { StationAlarmCounts } from './domains';
+
+const createEmptyStationAlarmCounts = () => {
+  return {
+    [DeviceType.Camera]: 0,
+    [DeviceType.Decoder]: 0,
+    [DeviceType.Keyboard]: 0,
+    [DeviceType.MediaServer]: 0,
+    [DeviceType.Nvr]: 0,
+    [DeviceType.SecurityBox]: 0,
+    [DeviceType.Switch]: 0,
+    [DeviceType.VideoServer]: 0,
+    unclassified: 0,
+  };
+};
+
+export function useLineAlarmCountsQuery() {
+  const stationStore = useStationStore();
+  const { stationList } = storeToRefs(stationStore);
+  const queryControlStore = useQueryControlStore();
+  const { alarmQueryStamp } = storeToRefs(queryControlStore);
+  const { mutateAsync: getStationAlarmCounts } = useStationAlarmCountsMutation();
+
+  return useQuery({
+    queryKey: [LINE_ALARM_COUNTS_QUERY_KEY, alarmQueryStamp],
+    enabled: computed(() => alarmQueryStamp.value > 0),
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    queryFn: async ({ signal }) => {
+      console.time('useLineALarmCountsQuery');
+      for (const station of stationList.value) {
+        await getStationAlarmCounts({ station, signal });
+      }
+      console.timeEnd('useLineALarmCountsQuery');
+      return null;
+    },
+  });
+}
+
+interface StationAlarmCountsMutationParams {
+  station: Station;
+  signal?: AbortSignal;
+}
+
+function useStationAlarmCountsMutation() {
+  const lineAlarmCountsStore = useLineAlarmCountsStore();
+  const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
+
+  return useMutation<StationAlarmCounts, Error, StationAlarmCountsMutationParams>({
+    mutationFn: async ({ station, signal }) => {
+      const stationAlarmCounts = createEmptyStationAlarmCounts();
+      if (!station.online) {
+        return stationAlarmCounts;
+      }
+      const now = dayjs();
+      const todayStart = now.startOf('date').valueOf();
+      const todayEnd = now.endOf('date').valueOf();
+      const { records: alarmList, total } = await postNdmDeviceAlarmLogPage(
+        station.code,
+        {
+          model: {
+            stationCode: station.code,
+          },
+          extra: {
+            alarmDate_ge: todayStart,
+            alarmDate_le: todayEnd,
+          },
+          size: 50000,
+          current: 1,
+          sort: 'id',
+          order: 'descending',
+        },
+        signal,
+      );
+      for (const alarm of alarmList) {
+        stationAlarmCounts[getDeviceTypeVal(alarm.deviceType)]++;
+      }
+      stationAlarmCounts.unclassified = parseInt(total);
+      return stationAlarmCounts;
+    },
+    onSuccess: async (stationAlarmCounts, { station }) => {
+      lineAlarmCounts.value[station.code] = stationAlarmCounts;
+      await sleep();
+    },
+    onError: (error, { station }) => {
+      console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);
+      lineAlarmCounts.value[station.code] = createEmptyStationAlarmCounts();
+    },
+  });
+}

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

@@ -1,117 +0,0 @@
-import type { Station } from '@/apis/domains';
-import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import { DeviceType, getDeviceTypeVal } from '@/enums/device-type';
-import { useQueryControlStore } from '@/stores/query-control';
-import { useStationStore } from '@/stores/station';
-import { useQuery } from '@tanstack/vue-query';
-import dayjs from 'dayjs';
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-import type { StationAlarms } from './domains';
-import { useLineAlarmsStore } from '@/stores/line-alarms';
-import { CanceledError } from 'axios';
-import { LINE_ALARMS_QUERY_KEY } from '@/constants';
-import { sleep } from '@/utils/sleep';
-
-export interface LineAlarms {
-  [stationCode: Station['code']]: StationAlarms;
-}
-
-const createEmptyStationAlarms = (): StationAlarms => {
-  return {
-    [DeviceType.Camera]: [],
-    [DeviceType.Decoder]: [],
-    [DeviceType.Keyboard]: [],
-    [DeviceType.MediaServer]: [],
-    [DeviceType.Nvr]: [],
-    [DeviceType.SecurityBox]: [],
-    [DeviceType.Switch]: [],
-    [DeviceType.VideoServer]: [],
-    unclassified: [],
-  };
-};
-
-export function useLineAlarmsQuery() {
-  const stationStore = useStationStore();
-  const { stationList, onlineStationList } = storeToRefs(stationStore);
-  const queryControlStore = useQueryControlStore();
-  const { pollingEnabled } = storeToRefs(queryControlStore);
-  const lineAlarmsStore = useLineAlarmsStore();
-  const { lineAlarms } = storeToRefs(lineAlarmsStore);
-
-  return useQuery({
-    queryKey: [LINE_ALARMS_QUERY_KEY],
-    enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
-    staleTime: Infinity,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-    queryFn: async ({ signal }): Promise<LineAlarms> => {
-      console.time('useLineAlarmsQuery');
-
-      if (!stationList?.value) {
-        lineAlarms.value = {};
-        return lineAlarms.value;
-      }
-
-      for (const station of stationList.value) {
-        if (!station.online) {
-          lineAlarms.value[station.code] = createEmptyStationAlarms();
-          continue;
-        }
-
-        if (!lineAlarms.value[station.code]) {
-          lineAlarms.value[station.code] = createEmptyStationAlarms();
-        }
-
-        const stationAlarms = createEmptyStationAlarms();
-
-        const now = dayjs();
-        const todayStart = now.startOf('date').valueOf();
-        const todayEnd = now.endOf('date').valueOf();
-        try {
-          const { records: alarmList } = await postNdmDeviceAlarmLogPage(
-            station.code,
-            {
-              model: {},
-              extra: {
-                alarmDate_ge: todayStart,
-                alarmDate_le: todayEnd,
-                deviceId_likeRight: station.code,
-              },
-              size: 50000,
-              current: 1,
-              sort: 'id',
-              order: 'descending',
-            },
-            signal,
-          );
-          for (const alarm of alarmList) {
-            const deviceType = getDeviceTypeVal(alarm.deviceType);
-            stationAlarms[deviceType].push(alarm);
-          }
-          stationAlarms.unclassified = alarmList;
-          lineAlarms.value[station.code] = stationAlarms;
-          await sleep();
-        } catch (error) {
-          if (error instanceof CanceledError) return lineAlarms.value;
-          console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);
-          stationAlarms[DeviceType.Camera] = [];
-          stationAlarms[DeviceType.Decoder] = [];
-          stationAlarms[DeviceType.Keyboard] = [];
-          stationAlarms[DeviceType.MediaServer] = [];
-          stationAlarms[DeviceType.Nvr] = [];
-          stationAlarms[DeviceType.SecurityBox] = [];
-          stationAlarms[DeviceType.Switch] = [];
-          stationAlarms[DeviceType.VideoServer] = [];
-          stationAlarms.unclassified = [];
-        }
-      }
-
-      console.timeEnd('useLineAlarmsQuery');
-
-      return lineAlarms.value;
-    },
-    placeholderData: (prev) => prev,
-  });
-}

src/composables/query/device/domains/index.ts

@@ -1 +1,26 @@
-export * from './station-devices';
+import type {
+  NdmCameraResultVO,
+  NdmDecoderResultVO,
+  NdmKeyboardResultVO,
+  NdmMediaServerResultVO,
+  NdmNvrResultVO,
+  NdmSecurityBoxResultVO,
+  NdmSwitchResultVO,
+  NdmVideoServerResultVO,
+} from '@/apis/models';
+import type { DeviceType } from '@/enums/device-type';
+
+export interface StationDevices {
+  [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 interface LineDevices {
+  [stationCode: string]: StationDevices;
+}

src/composables/query/device/domains/station-devices.ts

@@ -1,22 +0,0 @@
-import type {
-  NdmCameraResultVO,
-  NdmDecoderResultVO,
-  NdmKeyboardResultVO,
-  NdmMediaServerResultVO,
-  NdmNvrResultVO,
-  NdmSecurityBoxResultVO,
-  NdmSwitchResultVO,
-  NdmVideoServerResultVO,
-} from '@/apis/models';
-import type { DeviceType } from '@/enums/device-type';
-
-export interface StationDevices {
-  [DeviceType.Camera]: NdmCameraResultVO[];
-  [DeviceType.Decoder]: NdmDecoderResultVO[];
-  [DeviceType.Keyboard]: NdmKeyboardResultVO[];
-  [DeviceType.MediaServer]: NdmMediaServerResultVO[];
-  [DeviceType.Nvr]: NdmNvrResultVO[];
-  [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
-  [DeviceType.Switch]: NdmSwitchResultVO[];
-  [DeviceType.VideoServer]: NdmVideoServerResultVO[];
-}

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

@@ -1,10 +1,7 @@
-import type { Station } from '@/apis/domains';
-// import type { PageParams } from '@/apis/models';
-// import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests';
 import { DeviceType } from '@/enums/device-type';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useMutation, useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import type { StationDevices } from './domains';
@@ -12,10 +9,7 @@ import { useLineDevicesStore } from '@/stores/line-devices';
 import { LINE_DEVICES_QUERY_KEY } from '@/constants';
 import { ndmClient } from '@/apis/client';
 import { sleep } from '@/utils/sleep';
-
+import type { Station } from '@/apis/domains';
-export interface LineDevices {
-  [stationCode: Station['code']]: StationDevices;
-}
 
 const createEmptyStationDevices = (): StationDevices => {
   return {
@@ -30,138 +24,64 @@ const createEmptyStationDevices = (): StationDevices => {
   };
 };
 
-const getNdmDevicesAll = async (stationCode: string, signal: AbortSignal) => {
+const getNdmDevicesAll = async (stationCode: string, signal?: AbortSignal) => {
   const resp = await ndmClient.get<StationDevices>(`/${stationCode}/api/ndm/ndmDevices/all`, { retRaw: true, signal });
-  const [err, stationDevices] = resp;
+  const [err, data] = resp;
-  if (err || !stationDevices) {
+  if (err || !data) {
     throw err;
   }
-  return stationDevices;
+  return data;
 };
 
 export function useLineDevicesQuery() {
   const stationStore = useStationStore();
-  const { stationList, onlineStationList } = storeToRefs(stationStore);
+  const { stationList } = storeToRefs(stationStore);
   const queryControlStore = useQueryControlStore();
-  const { pollingEnabled } = storeToRefs(queryControlStore);
+  const { deviceQueryStamp } = storeToRefs(queryControlStore);
-  const lineDevicesStore = useLineDevicesStore();
+  const { mutateAsync: getStationDevices } = useStationDevicesMutation();
-  const { lineDevices } = storeToRefs(lineDevicesStore);
-  const queryClient = useQueryClient();
 
   return useQuery({
-    queryKey: [LINE_DEVICES_QUERY_KEY],
+    queryKey: [LINE_DEVICES_QUERY_KEY, deviceQueryStamp],
-    enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
+    enabled: computed(() => deviceQueryStamp.value > 0),
     staleTime: Infinity,
     refetchOnMount: false,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
-    queryFn: async ({ signal }): Promise<LineDevices> => {
+    queryFn: async ({ signal }) => {
       console.time('useLineDevicesQuery');
-
-      // const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
-
-      // const lineDevices: LineDevices = {};
-
-      // 如果没有车站列表，返回空数据
-      if (!stationList?.value) {
-        lineDevices.value = {};
-        return lineDevices.value;
-      }
-
-      // 遍历所有车站
       for (const station of stationList.value) {
-        // 如果车站离线，设置空数据
+        await getStationDevices({ station, signal });
-        if (!station.online) {
-          lineDevices.value[station.code] = createEmptyStationDevices();
-          continue;
-        }
-
-        if (!lineDevices.value[station.code]) {
-          lineDevices.value[station.code] = createEmptyStationDevices();
-        }
-
-        // const stationDevices = createEmptyStationDevices();
-
-        // await Promise.allSettled([
-        //   postNdmCameraPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.Camera] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 摄像机数据失败:`, error);
-        //       stationDevices[DeviceType.Camera] = [];
-        //     }),
-        //   postNdmDecoderPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.Decoder] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 解码器数据失败:`, error);
-        //       stationDevices[DeviceType.Decoder] = [];
-        //     }),
-        //   postNdmKeyboardPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.Keyboard] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error);
-        //       stationDevices[DeviceType.Keyboard] = [];
-        //     }),
-        //   postNdmMediaServerPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.MediaServer] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error);
-        //       stationDevices[DeviceType.MediaServer] = [];
-        //     }),
-        //   postNdmNvrPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.Nvr] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 录像机数据失败:`, error);
-        //       stationDevices[DeviceType.Nvr] = [];
-        //     }),
-        //   postNdmSecurityBoxPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.SecurityBox] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 安防箱数据失败:`, error);
-        //       stationDevices[DeviceType.SecurityBox] = [];
-        //     }),
-        //   postNdmSwitchPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.Switch] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 交换机数据失败:`, error);
-        //       stationDevices[DeviceType.Switch] = [];
-        //     }),
-        //   postNdmVideoServerPage(station.code, pageQuery, signal)
-        //     .then(({ records }) => {
-        //       stationDevices[DeviceType.VideoServer] = records;
-        //     })
-        //     .catch((error) => {
-        //       console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error);
-        //       stationDevices[DeviceType.VideoServer] = [];
-        //     }),
-        // ]);
-
-        const stationDevices = await getNdmDevicesAll(station.code, signal);
-
-        lineDevices.value[station.code] = stationDevices;
-
-        await sleep();
       }
-
       console.timeEnd('useLineDevicesQuery');
-
+      queryControlStore.updateAlarmQueryStamp();
-      queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
+      return null;
-
+    },
-      return lineDevices.value;
+  });
+}
+
+interface StationDevicesMutationParams {
+  station: Station;
+  signal?: AbortSignal;
+}
+
+function useStationDevicesMutation() {
+  const lineDevicesStore = useLineDevicesStore();
+  const { lineDevices } = storeToRefs(lineDevicesStore);
+
+  return useMutation<StationDevices, Error, StationDevicesMutationParams>({
+    mutationFn: async ({ station, signal }) => {
+      if (!station.online) {
+        return createEmptyStationDevices();
+      }
+      return await getNdmDevicesAll(station.code, signal);
+    },
+    onSuccess: async (stationDevices, { station }) => {
+      lineDevices.value[station.code] = stationDevices;
+      await sleep();
+    },
+    onError: (error, { station }) => {
+      console.error(`获取车站 ${station.name} 设备数据失败:`, error);
+      lineDevices.value[station.code] = createEmptyStationDevices();
     },
-    placeholderData: (prev) => prev,
   });
 }

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

@@ -1,66 +1,63 @@
-import { userClient } from '@/apis/client';
 import type { Station } from '@/apis/domains';
-import { ndmVerify } from '@/apis/requests';
+import { batchVerify } from '@/apis/requests';
 import { STATION_LIST_QUERY_KEY } from '@/constants';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
 import { getAppEnvConfig } from '@/utils/env';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useMutation, useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 
 export function useStationListQuery() {
-  const stationStore = useStationStore();
-  const { stationList } = storeToRefs(stationStore);
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
-  const queryClient = useQueryClient();
+  const { mutateAsync: getStationList } = useStationListMutation();
 
   return useQuery({
     queryKey: [STATION_LIST_QUERY_KEY],
     enabled: computed(() => pollingEnabled.value),
     refetchInterval: getAppEnvConfig().requestInterval * 1000,
+    staleTime: getAppEnvConfig().requestInterval * 1000,
     queryFn: async ({ signal }) => {
-      // 主动登录校验
+      console.time('useStationListQuery');
-      const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000, signal });
+      await getStationList({ signal });
-      if (err) {
+      console.timeEnd('useStationListQuery');
-        throw err;
+      queryControlStore.updateDeviceQueryStamp();
-      }
+      return null;
+    },
+  });
+}
 
+interface StationListMutationParams {
+  signal?: AbortSignal;
+}
+
+function useStationListMutation() {
+  const stationStore = useStationStore();
+  const { stationList } = storeToRefs(stationStore);
+  return useMutation<Station[], Error, StationListMutationParams>({
+    mutationFn: async ({ signal }) => {
       const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal });
-
+      const stations = ndmStationList.map<Station>((station) => ({
-      let stations = ndmStationList.map<Station>((station) => ({
         code: station.code ?? '',
         name: station.name ?? '',
         online: false,
       }));
-
+      const verifyList = await batchVerify(signal);
-      const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code, signal)));
+      return stations.map((station) => {
-
+        return {
-      stations = stations.map((station, index) => ({
+          ...station,
-        ...station,
+          online: !!verifyList.find((stn) => stn.stationCode === station.code)?.onlineState,
-        online: pingResultList[index].status === 'fulfilled',
+        };
-      }));
+      });
-
+    },
-      const isSame =
+    onSuccess: (stations) => {
-        stationList.value.length === stations.length &&
+      const isSame = JSON.stringify(stationList.value) === JSON.stringify(stations);
-        stationList.value.every((oldStation, index) => {
-          const newStation = stations[index];
-          return oldStation.code === newStation.code && oldStation.name === newStation.name && oldStation.online === newStation.online;
-        });
-
       if (!isSame) {
         stationList.value.splice(0, stationList.value.length, ...stations);
       }
-
-      // queryClient.invalidateQueries({ queryKey: ['station-devices'] });
-      // queryClient.invalidateQueries({ queryKey: ['station-alarms'] });
-      queryClient.invalidateQueries({ queryKey: ['line-devices'] });
-      // queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
-
-      return stations;
     },
   });
 }

src/constants/query.ts

@@ -1,3 +1,4 @@
 export const STATION_LIST_QUERY_KEY = 'station-list';
 export const LINE_DEVICES_QUERY_KEY = 'line-devices';
+export const LINE_ALARM_COUNTS_QUERY_KEY = 'line-alarm-counts';
 export const LINE_ALARMS_QUERY_KEY = 'line-alarms';

src/pages/alarm-page.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
 import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useStationStore } from '@/stores/station';
@@ -140,18 +139,18 @@ const { mutate: getAlarmList, isPending: isTableLoading } = useMutation({
         alarmDate_ge: searchFields.alarmDate[0],
         alarmDate_le: searchFields.alarmDate[1],
       },
-      size: tablePagination.pageSize!,
+      current: tablePagination.page ?? 1,
-      current: tablePagination.page!,
+      size: tablePagination.pageSize ?? 10,
-      sort: 'id',
       order: 'descending',
+      sort: 'id',
     });
+    return res;
+  },
+  onSuccess: (res) => {
     const { records, pages, size, total } = res;
     tablePagination.pageSize = parseInt(size);
     tablePagination.pageCount = parseInt(pages);
     tablePagination.itemCount = parseInt(total);
-    return records;
-  },
-  onSuccess: (records) => {
     tableData.value = records;
   },
   onError: (error) => {
@@ -180,10 +179,10 @@ const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
         alarmDate_ge: searchFields.alarmDate[0],
         alarmDate_le: searchFields.alarmDate[1],
       },
-      current: 1,
+      current: tablePagination.page ?? 1,
-      size: JAVA_INTEGER_MAX_VALUE,
+      size: tablePagination.pageSize ?? 10,
-      sort: 'id',
       order: 'descending',
+      sort: 'id',
     });
     return data;
   },
@@ -255,7 +254,7 @@ onBeforeMount(() => getAlarmList());
 
     <!-- 表格区域：填满剩余空间 -->
     <div style="flex: 1 1 auto; min-height: 0; padding: 8px">
-      <NDataTable remote :columns="tableColumns" :data="tableData" :pagination="tablePagination" :loading="isTableLoading" :single-line="false" flex-height style="height: 100%" />
+      <NDataTable :loading="isTableLoading" :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" remote flex-height style="height: 100%" />
     </div>
   </div>
 </template>

src/pages/dashboard-page.vue

@@ -4,27 +4,27 @@ import DeviceAlarmDetailModal from '@/components/dashboard-page/device-alarm-det
 import DeviceParamsConfigModal from '@/components/dashboard-page/device-params-config-modal.vue';
 import OfflineDeviceDetailModal from '@/components/dashboard-page/offline-device-detail-modal.vue';
 import StationCard from '@/components/dashboard-page/station-card.vue';
-import { useLineAlarmsQuery, useLineDevicesQuery } from '@/composables/query';
+import { useLineAlarmCountsQuery, useLineDevicesQuery } from '@/composables/query';
 import { useStationStore } from '@/stores/station';
 import { useLineDevicesStore } from '@/stores/line-devices';
-import { useLineAlarmsStore } from '@/stores/line-alarms';
 import { NGrid, NGi } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
+import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 const lineDevicesStore = useLineDevicesStore();
 const { lineDevices } = storeToRefs(lineDevicesStore);
-const lineAlarmsStore = useLineAlarmsStore();
+const lineAlarmCountsStore = useLineAlarmCountsStore();
-const { lineAlarms } = storeToRefs(lineAlarmsStore);
+const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
 
 const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
-const { isFetching: lineAlarmsFetching } = useLineAlarmsQuery();
+const { isFetching: lineAlarmCountsFetching } = useLineAlarmCountsQuery();
 
 // 当设备查询或告警查询正在进行时，显示加载条
 watch(
-  [lineDevicesFetching, lineAlarmsFetching],
+  [lineDevicesFetching, lineAlarmCountsFetching],
   (fetchingList) => {
     if (fetchingList.some((pending) => pending)) {
       window.$loadingBar.start();
@@ -61,7 +61,7 @@ const openDeviceParamsConfigModal = (station: Station) => {
       <StationCard
         :station="station"
         :station-devices="lineDevices[station.code]"
-        :station-alarms="lineAlarms[station.code]"
+        :station-alarm-counts="lineAlarmCounts[station.code]"
         @open-offline-device-detail-modal="openOfflineDeviceDetailModal"
         @open-device-alarm-detail-modal="openDeviceAlarmDetailModal"
         @open-device-params-config-modal="openDeviceParamsConfigModal"
@@ -72,7 +72,7 @@ const openDeviceParamsConfigModal = (station: Station) => {
   <!-- 离线设备详情对话框 -->
   <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
   <!-- 设备告警详情对话框 -->
-  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarms="selectedStation?.code ? lineAlarms[selectedStation.code] : undefined" />
+  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarm-counts="selectedStation?.code ? lineAlarmCounts[selectedStation.code] : undefined" />
   <!-- 设备配置面板对话框 -->
   <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
 </template>

src/pages/vimp-log-page.vue

@@ -2,7 +2,6 @@
 import type { NdmVimpLogResultVO } from '@/apis/models/device';
 import { ndmVimpLogDefaultExportByTemplate, postNdmVimpLogPage } from '@/apis/requests';
 import { useStationListQuery } from '@/composables/query';
-import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
@@ -79,25 +78,25 @@ const tablePagination = reactive<PaginationProps>({
 
 const { mutate: getVimpLogList, isPending: isTableLoading } = useMutation({
   mutationFn: async () => {
-    if (!searchFields.stationCode) return [];
+    if (!searchFields.stationCode) throw Error('请选择车站');
     const res = await postNdmVimpLogPage(searchFields.stationCode, {
       model: {},
       extra: {
         createdTime_precisest: searchFields.createdTime[0],
         createdTime_preciseed: searchFields.createdTime[1],
       },
-      size: tablePagination.pageSize!,
+      current: tablePagination.page ?? 1,
-      current: tablePagination.page!,
+      size: tablePagination.pageSize ?? 10,
-      sort: 'id',
       order: 'descending',
+      sort: 'id',
     });
+    return res;
+  },
+  onSuccess: (res) => {
     const { records, pages, size, total } = res;
     tablePagination.pageSize = parseInt(size);
     tablePagination.pageCount = parseInt(pages);
     tablePagination.itemCount = parseInt(total);
-    return records;
-  },
-  onSuccess: (records) => {
     tableData.value = records;
   },
   onError: (error) => {
@@ -124,10 +123,10 @@ const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
         createdTime_precisest: searchFields.createdTime[0],
         createdTime_preciseed: searchFields.createdTime[1],
       },
-      current: 1,
+      current: tablePagination.page ?? 1,
-      size: JAVA_INTEGER_MAX_VALUE,
+      size: tablePagination.pageSize ?? 10,
-      sort: 'id',
       order: 'descending',
+      sort: 'id',
     });
     return data;
   },

src/stores/line-alarm-counts.ts

@@ -0,0 +1,11 @@
+import type { LineAlarmCounts } from '@/composables/query';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLineAlarmCountsStore = defineStore('ndm-line-alarm-counts-store', () => {
+  const lineAlarmCounts = ref<LineAlarmCounts>({});
+
+  return {
+    lineAlarmCounts,
+  };
+});

src/stores/query-control.ts

@@ -1,25 +1,25 @@
+import dayjs from 'dayjs';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
 export const useQueryControlStore = defineStore('ndm-query-control-store', () => {
   const pollingEnabled = ref(true);
-
-  const globalPollingEnabled = ref(true);
-
   const enablePolling = () => (pollingEnabled.value = true);
-
   const disablePolling = () => (pollingEnabled.value = false);
 
-  const enableGlobalPolling = () => (globalPollingEnabled.value = true);
+  const deviceQueryStamp = ref(0);
-
+  const alarmQueryStamp = ref(0);
-  const disableGlobalPolling = () => (globalPollingEnabled.value = false);
+  const updateDeviceQueryStamp = () => (deviceQueryStamp.value = dayjs().valueOf());
+  const updateAlarmQueryStamp = () => (alarmQueryStamp.value = dayjs().valueOf());
 
   return {
     pollingEnabled,
     enablePolling,
     disablePolling,
-    globalPollingEnabled,
+
-    enableGlobalPolling,
+    deviceQueryStamp,
-    disableGlobalPolling,
+    alarmQueryStamp,
+    updateDeviceQueryStamp,
+    updateAlarmQueryStamp,
   };
 });