feat: support filter of alarmType and faultLevel

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>