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/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 { ndmDeviceAlarmLogDefaultExportByTemplate } from '@/apis/requests';
-import type { StationAlarms } from '@/composables/query';
-import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
-import { DeviceType, DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
+import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO, NdmDeviceAlarmLogVO, PageQueryExtra } from '@/apis/models';
+import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import type { StationAlarmCounts } from '@/composables/query';
+import { DeviceType, DeviceTypeCode, DeviceTypeName, getDeviceTypeVal, type DeviceTypeVal } 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 { computed, h, reactive, toRefs, watch } from 'vue';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
+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(() => {
-  return Object.values(DeviceType).reduce((count, deviceType) => {
-    return count + (stationAlarms.value?.[deviceType].length ?? 0);
-  }, 0);
-});
+const alarmCount = computed(() => stationAlarmCounts.value?.unclassified ?? 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 ?? '', {
-      model: {},
-      extra: {
-        createdTime_precisest: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
-        createdTime_preciseed: dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss'),
+    const now = dayjs();
+    const res = await postNdmDeviceAlarmLogPage(station.value?.code ?? '', {
+      model: {
+        stationCode: station.value?.code,
+        alarmCategory: filterFields.alarmCategory,
+        alarmConfirm: filterFields.alarmConfirm,
       },
-      current: 1,
-      size: JAVA_INTEGER_MAX_VALUE,
+      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;
+    return res;
   },
-  onSuccess: (data) => {
-    downloadByData(data, `${station.value?.name}-设备告警记录.xlsx`);
+  onSuccess: (res) => {
+    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 onModalClose = () => {};
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
+  mutationFn: async () => {
+    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(() => {
-  let count = 0;
-  Object.values(DeviceType).forEach((deviceType) => {
-    count += stationAlarms.value?.[deviceType].length ?? 0;
-  });
-  return count;
+const alarmCount = computed(() => {
+  return stationAlarmCounts.value?.unclassified ?? 0;
 });
 
 // 打开对话框
@@ -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
-            ?.filter((device) => {
-              const nvr = device as NdmNvrResultVO;
-              return !!nvr.clusterList?.trim() && nvr.clusterList !== nvr.ipAddress;
-            })
-            .map<TreeOption>((nvrCluster) => {
-              return {
-                label: `${nvrCluster.name}`,
-                key: nvrCluster.id,
-                prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
-                suffix: () => `${nvrCluster.ipAddress}`,
-                children: nvrs
-                  .filter((nvr) => {
-                    return nvrCluster.clusterList?.includes(nvr.ipAddress ?? '');
-                  })
-                  .map<TreeOption>((nvr) => {
-                    return {
-                      label: `${nvr.name}`,
-                      key: nvr.id,
-                      prefix: () => renderDeviceNodePrefix(nvr, stationCode),
-                      suffix: () => `${nvr.ipAddress}`,
-                      // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-                      device: nvr,
-                      stationCode,
-                    };
-                  }),
-                // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
-                device: nvrCluster,
-                stationCode,
-              };
-            }),
+          children: nvrClusters.map<TreeOption>((nvrCluster) => {
+            return {
+              label: `${nvrCluster.name}`,
+              key: nvrCluster.id,
+              prefix: () => renderDeviceNodePrefix(nvrCluster, stationCode),
+              suffix: () => `${nvrCluster.ipAddress}`,
+              children: nvrSingletons.map<TreeOption>((nvr) => {
+                return {
+                  label: `${nvr.name}`,
+                  key: nvr.id,
+                  prefix: () => renderDeviceNodePrefix(nvr, stationCode),
+                  suffix: () => `${nvr.ipAddress}`,
+                  // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+                  device: nvr,
+                  stationCode,
+                };
+              }),
+              // 当选择设备时，能获取到设备的所有信息，以及设备所属的车站
+              device: nvrCluster,
+              stationCode,
+            };
+          }),
         };
       }
       return {