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'),
       },

src/enums/alarm-type.ts

@@ -0,0 +1,5 @@
+export const AlarmType: Record<string, string> = {
+  1: '设备告警',
+  2: '环境告警',
+  3: '性能告警',
+};

src/enums/fault-level.ts

@@ -0,0 +1,6 @@
+export const FaultLevel: Record<string, string> = {
+  1: '严重',
+  2: '重要',
+  3: '一般',
+  4: '提示',
+};

src/pages/alarm-page.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { FaultLevel } from '@/enums/fault-level';
+import { AlarmType } from '@/enums/alarm-type';
 import { DeviceType, DeviceTypeCode, DeviceTypeName, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
-import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui';
+import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption, TagProps } from 'naive-ui';
+import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker, NTag } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, reactive, onBeforeMount, h, computed, watch } from 'vue';
 
@@ -35,6 +37,8 @@ const searchFields = reactive({
   stationCode_in: [] as string[],
   deviceType_in: [] as string[],
   deviceName_like: '',
+  alarmType_in: [] as string[],
+  faultLevel_in: [] as string[],
   // deviceId_likeRight: '',
   alarmDate: [dayjs().startOf('date').valueOf(), dayjs().endOf('date').valueOf()] as [number, number],
 });
@@ -42,7 +46,9 @@ const resetSearchFields = () => {
   searchFields.stationCode_in = [];
   searchFields.deviceType_in = [];
   searchFields.deviceName_like = '';
-  searchFields.alarmDate = [dayjs().startOf('date').subtract(7, 'day').valueOf(), dayjs().endOf('date').valueOf()];
+  searchFields.alarmType_in = [];
+  searchFields.faultLevel_in = [];
+  searchFields.alarmDate = [dayjs().startOf('date').subtract(1, 'week').valueOf(), dayjs().endOf('date').valueOf()];
 };
 const onDateChange = (value: [number, number] | null) => {
   if (!value || value.length !== 2) {
@@ -77,9 +83,39 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     },
   },
   { title: '设备名称', key: 'deviceName' },
-  { title: '告警类型', key: 'alarmType', align: 'center' },
-  { title: '故障级别', key: 'faultLevel', align: 'center' },
-  { title: '故障编码', key: 'faultCode', align: 'center' },
+  {
+    title: '告警类型',
+    key: 'alarmType',
+    align: 'center',
+    render: (rowData) => {
+      const { alarmType } = rowData;
+      if (!alarmType) {
+        return '';
+      }
+      return h(NTag, { type: 'default' }, { default: () => AlarmType[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] });
+    },
+  },
+  // { title: '故障编码', key: 'faultCode', align: 'center' },
   // { title: '故障位置', key: 'faultLocation' },
   { title: '故障描述', key: 'faultDescription' },
   { title: '修复建议', key: 'alarmRepairSuggestion' },
@@ -135,13 +171,15 @@ const { mutate: getAlarmList, isPending: isTableLoading } = useMutation({
         deviceType_in: searchFields.deviceType_in.flatMap((deviceType) => {
           return DeviceTypeCode[deviceType as DeviceTypeVal];
         }),
+        alarmType_in: searchFields.alarmType_in,
+        faultLevel_in: searchFields.faultLevel_in,
         alarmDate_ge: searchFields.alarmDate[0],
         alarmDate_le: searchFields.alarmDate[1],
       },
       current: tablePagination.page ?? 1,
       size: tablePagination.pageSize ?? 10,
-      order: 'descending',
       sort: 'id',
+      order: 'descending',
     });
     return res;
   },
@@ -225,6 +263,38 @@ onBeforeMount(() => getAlarmList());
           <NFormItemGi :span="1" label="设备名称" label-placement="left">
             <NInput v-model:value="searchFields.deviceName_like" placeholder="请输入设备名称" clearable />
           </NFormItemGi>
+          <NFormItemGi :span="1" label="告警类型" label-placement="left">
+            <NSelect
+              v-model:value="searchFields.alarmType_in"
+              :options="[
+                ...Object.keys(AlarmType).map<SelectOption>((alarmTypeKey) => {
+                  return {
+                    label: AlarmType[alarmTypeKey],
+                    value: alarmTypeKey,
+                  };
+                }),
+              ]"
+              placeholder="请选择告警类型"
+              multiple
+              clearable
+            />
+          </NFormItemGi>
+          <NFormItemGi :span="1" label="告警级别" label-placement="left">
+            <NSelect
+              v-model:value="searchFields.faultLevel_in"
+              :options="[
+                ...Object.keys(FaultLevel).map<SelectOption>((faultLevel) => {
+                  return {
+                    label: FaultLevel[faultLevel],
+                    value: faultLevel,
+                  };
+                }),
+              ]"
+              placeholder="请选择告警级别"
+              multiple
+              clearable
+            />
+          </NFormItemGi>
           <NFormItemGi :span="1" label="告警发生时间" label-placement="left">
             <NDatePicker v-model:value="searchFields.alarmDate" type="datetimerange" @update:value="onDateChange" />
           </NFormItemGi>