fix: 告警列表类型改字典

src/views/faultManage/history-alarm/index.vue

@@ -13,11 +13,30 @@ import {
   exportAll,
 } from '@/api/faultManage/historyAlarm';
 import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
 import saveAs from 'file-saver';
 import { writeSheet } from '@/utils/execl-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+const { getDict } = useDictStore();
 const { t } = useI18n();
 
+/**字典数据 */
+let dict: {
+  /**活动告警类型 */
+  activeAlarmType: DictType[];
+  /**告警清除类型 */
+  activeClearType: DictType[];
+  /**告警清除类型 */
+  activeAckState: DictType[];
+  /**原始严重程度 */
+  activeAlarmSeverity: DictType[];
+} = reactive({
+  activeAlarmType: [],
+  activeClearType: [],
+  activeAckState: [],
+  activeAlarmSeverity: [],
+});
+
 /**记录开始结束时间 */
 let queryRangePicker = ref<[string, string]>(['', '']);
 
@@ -32,15 +51,15 @@ let queryParams = reactive({
   /**告警编号 */
   alarm_code: '',
   /**告警级别 */
-  orig_severity: '',
+  orig_severity: undefined,
   beginTime: '',
   endTime: '',
   /**告警产生时间 */
-  eventTime: (queryRangePicker.value = ['', '']),
+  eventTime: '',
   /**虚拟化标识 */
-  pv_flag: '',
+  pv_flag: undefined,
   /**告警类型 */
-  alarm_type: '',
+  alarm_type: undefined,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -59,13 +78,13 @@ function fnQueryReset() {
     /**告警编号 */
     alarm_code: '',
     /**告警级别 */
-    orig_severity: '',
+    orig_severity: undefined,
     /**告警产生时间 */
-    eventTime: (queryRangePicker.value = ['', '']),
+    eventTime: '',
     /**虚拟化标识 */
-    pv_flag: '',
+    pv_flag: undefined,
     /**告警类型 */
-    alarm_type: '',
+    alarm_type: undefined,
     /**当前页数 */
   });
   tablePagination.current = 1;
@@ -96,15 +115,6 @@ let tableState: TabeStateType = reactive({
   selectedRowKeys: [],
 });
 
-/**帮助文档表格状态 */
-let alarmTableState: TabeStateType = reactive({
-  loading: false,
-  size: 'middle',
-  seached: true,
-  data: [],
-  selectedRowKeys: [],
-});
-
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
@@ -133,7 +143,8 @@ let tableColumns: ColumnsType = [
   },
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
-    align: 'center',
+    align: 'left',
+    dataIndex: 'origLevel',
     key: 'origSeverity',
     width: 5,
   },
@@ -146,7 +157,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
-    align: 'center',
+    align: 'left',
     width: 5,
   },
   {
@@ -159,20 +170,8 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
     dataIndex: 'alarmType',
-    align: 'center',
-    customRender(opt) {
-      let levelName: any = {
-        CommunicationAlarm: '通信告警',
-        EquipmentAlarm: '设备告警',
-        ProcessingFailure: '处理错误告警',
-        EnvironmentalAlarm: '环境告警',
-        QualityOfServiceAlarm: '服务质量告警',
-      };
-      if (levelName[opt.value]) {
-        return levelName[opt.value];
-      }
-      return opt.value;
-    },
+    key: 'alarmType',
+    align: 'left', 
     width: 5,
   },
   {
@@ -184,53 +183,34 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.clearUser'),
     dataIndex: 'clearUser',
-    align: 'center',
+    align: 'left',
     width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.clearType'),
     dataIndex: 'clearType',
-    align: 'center',
-    customRender(opt) {
-      let clearType: any = {
-        0: '未清除',
-        1: '自动清除',
-        2: '手动清除',
-      };
-      if (clearType[opt.value]) {
-        return clearType[opt.value];
-      }
-      return opt.value;
-    },
+    key: 'clearType',
+    align: 'left', 
     width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.clearTime'),
     dataIndex: 'clearTime',
-    align: 'center',
+    align: 'left',
     sorter: (a: any, b: any) => 1,
-    width:  5,
+    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.ackState'),
     dataIndex: 'ackState',
-    align: 'center',
-    customRender(opt) {
-      let ackState: any = {
-        0: '未确认',
-        1: '已确认',
-      };
-      if (ackState[opt.value]) {
-        return ackState[opt.value];
-      }
-      return opt.value;
-    },
+    key: 'ackState',
+    align: 'left', 
     width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.ackUser'),
     dataIndex: 'ackUser',
-    align: 'center',
+    align: 'left',
     width: 5,
   },
   {
@@ -275,52 +255,6 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
-/**表格所需option */
-const actAlarmOption = reactive({
-  pvFlag: [
-    { label: 'PNF', value: 'PNF' },
-    { label: 'VNF', value: 'VNF' },
-  ],
-  alarmType: [
-    {
-      label: t('views.faultManage.activeAlarm.communicationAlarm'),
-      value: 'CommunicationAlarm',
-    },
-    {
-      label: t('views.faultManage.activeAlarm.equipmentAlarm'),
-      value: 'EquipmentAlarm',
-    },
-    {
-      label: t('views.faultManage.activeAlarm.processingFailure'),
-      value: 'ProcessingFailure',
-    },
-    {
-      label: t('views.faultManage.activeAlarm.environmentalAlarm'),
-      value: 'EnvironmentalAlarm',
-    },
-    {
-      label: t('views.faultManage.activeAlarm.qualityOfServiceAlarm'),
-      value: 'QualityOfServiceAlarm',
-    },
-  ],
-  origSeverity: [
-    { label: t('views.faultManage.activeAlarm.critical'), value: 'Critical' },
-    { label: t('views.faultManage.activeAlarm.major'), value: 'Major' },
-    { label: t('views.faultManage.activeAlarm.minor'), value: 'Minor' },
-    { label: t('views.faultManage.activeAlarm.warning'), value: 'Warning' },
-    { label: t('views.faultManage.activeAlarm.eventAlarm'), value: 'Event' },
-  ],
-  clearType: [
-    { label: '告警未清除', value: 0 },
-    { label: '自动清除', value: 1 },
-    { label: '手动清除', value: 2 },
-  ],
-  ackState: [
-    { label: '未确认', value: 0 },
-    { label: '已确认', value: 1 },
-  ],
-});
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
@@ -337,8 +271,6 @@ type ModalStateType = {
   from: Record<string, any>;
   /**表单数据 */
   showSetFrom: Record<string, any>;
-  // /**表单数据 */
-  // myselfSetFrom: Record<string, any>;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -395,7 +327,11 @@ let modalState: ModalStateType = reactive({
  */
 function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.from = Object.assign(modalState.from, row);
-  modalState.title = t('views.faultManage.activeAlarm.viewIdInfo',{alarmId:row.alarmId});
+  modalState.from.clearType = `${modalState.from.clearType}`;
+  modalState.from.ackState = `${modalState.from.ackState}`;
+  modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
+    alarmId: row.alarmId,
+  });
   modalState.visibleByView = true;
 }
 
@@ -499,7 +435,7 @@ function fnExportAll() {
       exportAll(queryParams).then(res => {
         if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
-            content:  t('common.msgSuccess', { msg: t('common.export') }),
+            content: t('common.msgSuccess', { msg: t('common.export') }),
             key,
             duration: 3,
           });
@@ -532,7 +468,7 @@ function fnModalCancel() {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -558,6 +494,26 @@ function fnGetList(pageNum?: number) {
 
 const profile = useUserStore().profile;
 onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('active_alarm_type'),
+    getDict('active_clear_type'),
+    getDict('active_ack_state'),
+    getDict('active_alarm_severity'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.activeAlarmType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.activeClearType = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.activeAckState = resArr[2].value;
+    }
+    if (resArr[3].status === 'fulfilled') {
+      dict.activeAlarmSeverity = resArr[3].value;
+    }
+  });
   fnGetList();
 });
 </script>
@@ -573,13 +529,6 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <!-- <a-form-item :label="t('views.neUser.ue.neType')" name="neId ">
-              <a-select
-                v-model:value="queryParams.neId"
-                :options="neOtions"
-                :placeholder="t('views.neUser.ue.neTypePlease')"
-              />
-            </a-form-item> -->
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
               name="ne_type"
@@ -606,10 +555,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neId')"
               name="ne_id"
             >
-              <a-input
-                v-model:value="queryParams.ne_id"
-                allow-clear
-              ></a-input>
+              <a-input v-model:value="queryParams.ne_id" allow-clear></a-input>
             </a-form-item>
           </a-col>
 
@@ -647,10 +593,9 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="queryParams.orig_severity"
-                placeholder="Select alarm Type"
-                show-search
+                :placeholder="t('common.selectPlease')"
                 allow-clear
-                :options="actAlarmOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
               />
             </a-form-item>
           </a-col>
@@ -677,13 +622,12 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="queryParams.pv_flag"
-                placeholder="Select a person"
-                show-search
-                :options="actAlarmOption.pvFlag"
+                :placeholder="t('common.selectPlease')"
+                :options="[
+                  { label: 'PNF', value: 'PNF' },
+                  { label: 'VNF', value: 'VNF' },
+                ]"
               />
-              <!-- <a-select-option value="'PNF'">PNF</a-select-option>
-                <a-select-option value="'VNF'">VNF</a-select-option>
-              </a-select> -->
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -693,9 +637,8 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="queryParams.alarm_type"
-                placeholder="Select alarm Type"
-                show-search
-                :options="actAlarmOption.alarmType"
+                :placeholder="t('common.selectPlease')"
+                :options="dict.activeAlarmSeverity"
               />
             </a-form-item>
           </a-col>
@@ -783,13 +726,28 @@ onMounted(() => {
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: 2000, y: 400 }"
+        :scroll="{ x: 2500, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
-            <a-tag :color="profile.color[record.origSeverity.toLowerCase()]">{{
-              record.origSeverity
-            }}</a-tag>
+            <a-tag :color="profile.color[record.origSeverity.toLowerCase()]">
+              {{ record.origSeverity }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'alarmType'">
+            <DictTag
+              :options="dict.activeAlarmType"
+              :value="record.alarmType"
+            />
+          </template>
+          <template v-if="column.key === 'clearType'">
+            <DictTag
+              :options="dict.activeClearType"
+              :value="record.clearType"
+            />
+          </template>
+          <template v-if="column.key === 'ackState'">
+            <DictTag :options="dict.activeAckState" :value="record.ackState" />
           </template>
           <template v-if="column.key === 'alarm_id'">
             <a-space :size="8" align="center">
@@ -960,7 +918,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.alarmType"
                 style="width: 100%"
-                :options="actAlarmOption.alarmType"
+                :options="dict.activeAlarmType"
                 disabled
               >
               </a-select>
@@ -1030,7 +988,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.origSeverity"
                 style="width: 100%"
-                :options="actAlarmOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
                 disabled
               >
               </a-select>
@@ -1079,7 +1037,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.clearType"
                 style="width: 100%"
-                :options="actAlarmOption.clearType"
+                :options="dict.activeClearType"
                 disabled
               >
               </a-select>
@@ -1122,7 +1080,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.ackState"
                 style="width: 100%"
-                :options="actAlarmOption.ackState"
+                :options="dict.activeAckState"
                 disabled
               />
             </a-form-item>