feat: support filter of alarmType and faultLevel

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

@@ -3,12 +3,14 @@ import type { Station } from '@/apis/domains';
 import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO, NdmDeviceAlarmLogVO, PageQueryExtra } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
 import type { StationAlarmCounts } from '@/composables/query';
+import { FaultLevel } from '@/enums/fault-level';
+import { AlarmType } from '@/enums/alarm-type';
 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 DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps, type TagProps } from 'naive-ui';
 import { computed, h, reactive, ref, toRefs, watch } from 'vue';
 
 interface Props {
@@ -62,10 +64,46 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     filterOptions: Object.values(DeviceType).map((deviceType) => ({ label: DeviceTypeName[deviceType], value: deviceType })),
   },
   { title: '设备名称', key: 'deviceName' },
-  { title: '告警类型', key: 'alarmType', align: 'center' },
-  { title: '故障级别', key: 'faultLevel', align: 'center' },
-  { title: '故障编码', key: 'faultCode', align: 'center' },
-  { title: '故障位置', key: 'faultLocation' },
+  {
+    title: '告警类型',
+    key: 'alarmType',
+    align: 'center',
+    render: (rowData) => {
+      const { alarmType } = rowData;
+      if (!alarmType) {
+        return '';
+      }
+      return h(NTag, { type: 'default' }, { default: () => AlarmType[alarmType] });
+    },
+    filter: true,
+    filterMultiple: true,
+    filterOptions: Object.keys(AlarmType).map((alarmType) => ({ label: AlarmType[alarmType], value: alarmType })),
+  },
+  {
+    title: '故障级别',
+    key: 'faultLevel',
+    align: 'center',
+    render: (rowData) => {
+      const { faultLevel } = rowData;
+      if (!faultLevel) {
+        return '';
+      }
+      let type: TagProps['type'] = 'default';
+      if (faultLevel === '1') {
+        type = 'error';
+      } else if (faultLevel === '2') {
+        type = 'warning';
+      } else if (faultLevel === '3') {
+        type = 'info';
+      }
+      return h(NTag, { type }, { default: () => FaultLevel[faultLevel] });
+    },
+    filter: true,
+    filterMultiple: true,
+    filterOptions: Object.keys(FaultLevel).map((faultLevel) => ({ label: FaultLevel[faultLevel], value: faultLevel })),
+  },
+  // { title: '故障编码', key: 'faultCode', align: 'center' },
+  // { title: '故障位置', key: 'faultLocation' },
   { title: '故障描述', key: 'faultDescription' },
   { title: '修复建议', key: 'alarmRepairSuggestion' },
   {
@@ -104,11 +142,15 @@ const filterFields = reactive<NdmDeviceAlarmLogPageQuery & PageQueryExtra<NdmDev
   alarmCategory: '',
   alarmConfirm: '',
   deviceType_in: [] as string[],
+  alarmType_in: [] as string[],
+  faultLevel_in: [] as string[],
 });
 const resetFilterFields = () => {
   filterFields.alarmCategory = '';
   filterFields.alarmConfirm = '';
   filterFields.deviceType_in = [];
+  filterFields.alarmType_in = [];
+  filterFields.faultLevel_in = [];
 };
 
 const tablePagination = reactive<PaginationProps>({
@@ -154,6 +196,10 @@ const onUpdateFilters: DataTableProps['onUpdateFilters'] = (filterState) => {
   filterFields.alarmConfirm = filterState['alarmConfirm'] as string;
   const deviceTypeVals = filterState['deviceType'] as DeviceTypeVal[];
   filterFields.deviceType_in = deviceTypeVals.flatMap((typeVal) => DeviceTypeCode[typeVal]);
+  const alarmTypeKeys = filterState['alarmType'];
+  filterFields.alarmType_in = alarmTypeKeys;
+  const faultLevelVals = filterState['faultLevel'];
+  filterFields.faultLevel_in = faultLevelVals;
   getStaionAlarmList();
 };
 
@@ -168,6 +214,8 @@ const { mutate: getStaionAlarmList, isPending: isTableLoading } = useMutation({
       },
       extra: {
         deviceType_in: filterFields.deviceType_in,
+        alarmType_in: filterFields.alarmType_in,
+        faultLevel_in: filterFields.faultLevel_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'),
       },