fix: 告警列表类型改字典

src/i18n/locales/en-US.ts

@@ -693,17 +693,6 @@ export default {
         mySelf: 'Personalization',
         exportAll: 'Export All',
         disPlayFilfter: 'Display Filters',
-        autoConfirm: 'Automatic Confirm',
-        critical:'Critical',
-        major:'Major',
-        minor:'Minor',
-        warning:'Warning',
-        eventAlarm:'Event',
-        communicationAlarm:'CommunicationAlarm',
-        equipmentAlarm:'EquipmentAlarm',
-        processingFailure:'ProcessingFailure',
-        environmentalAlarm:'EnvironmentalAlarm',
-        qualityOfServiceAlarm:'QualityOfServiceAlarm',
         alarmId:'ID',
         alarmTitle:'Title',
         clearUser:'Clear User',

src/i18n/locales/zh-CN.ts

@@ -693,17 +693,6 @@ export default {
         mySelf: '个性化设置',
         exportAll: '导出全部',
         disPlayFilfter: '显示过滤',
-        autoConfirm: '自动确认配置',
-        critical:'严重告警',
-        major:'主要告警',
-        minor:'次要告警',
-        warning:'警告告警',
-        eventAlarm:'事件告警',
-        communicationAlarm:'通信告警',
-        equipmentAlarm:'设备告警',
-        processingFailure:'处理错误告警',
-        environmentalAlarm:'环境告警',
-        qualityOfServiceAlarm:'服务质量告警',
         alarmId:'告警唯一标识',
         alarmTitle:'告警名称',
         clearUser:'告警清除用户',

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

@@ -17,12 +17,31 @@ import {
   exportAll,
 } from '@/api/faultManage/actAlarm';
 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';
 import { readLoalXlsx } from '@/utils/execl-utils';
+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]>(['', '']);
 
@@ -37,15 +56,15 @@ let queryParams = reactive({
   /**告警编号 */
   alarmCode: '',
   /**告警级别 */
-  origSeverity: '',
+  origSeverity: undefined,
   beginTime: '',
   endTime: '',
   /**告警产生时间 */
-  eventTime: (queryRangePicker.value = ['', '']),
+  eventTime: '',
   /**虚拟化标识 */
-  pvFlag: '',
+  pvFlag: undefined,
   /**告警类型 */
-  alarmType: '',
+  alarmType: undefined,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -64,13 +83,13 @@ function fnQueryReset() {
     /**告警编号 */
     alarmCode: '',
     /**告警级别 */
-    origSeverity: '',
+    origSeverity: undefined,
     /**告警产生时间 */
-    eventTime: (queryRangePicker.value = ['', '']),
+    eventTime: '',
     /**虚拟化标识 */
-    pvFlag: '',
+    pvFlag: undefined,
     /**告警类型 */
-    alarmType: '',
+    alarmType: undefined,
     /**当前页数 */
   });
   tablePagination.current = 1;
@@ -122,19 +141,19 @@ let tableColumns: ColumnsType = [
     title: t('views.faultManage.activeAlarm.alarmId'),
     dataIndex: 'alarmId',
     align: 'center',
-    width: 8,
+    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.neId'),
     dataIndex: 'neId',
     align: 'center',
-    width: 8,
+    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.neName'),
     dataIndex: 'neName',
     align: 'center',
-    width: 8,
+    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.neType'),
@@ -157,7 +176,7 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
-    align: 'center',
+    align: 'left',
     width: 5,
   },
   {
@@ -165,25 +184,13 @@ let tableColumns: ColumnsType = [
     dataIndex: 'eventTime',
     align: 'center',
     sorter: (a: any, b: any) => 1,
-    width: 8,
+    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
     dataIndex: 'alarmType',
-    align: 'center',
+    key: 'alarmType',
-    customRender(opt) {
+    align: 'left',
-      let levelName: any = {
-        CommunicationAlarm: '通信告警',
-        EquipmentAlarm: '设备告警',
-        ProcessingFailure: '处理错误告警',
-        EnvironmentalAlarm: '环境告警',
-        QualityOfServiceAlarm: '服务质量告警',
-      };
-      if (levelName[opt.value]) {
-        return levelName[opt.value];
-      }
-      return opt.value;
-    },
     width: 5,
   },
   {
@@ -195,46 +202,27 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.clearUser'),
     dataIndex: 'clearUser',
-    align: 'center',
+    align: 'left',
-    width: 10,
+    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.clearType'),
     dataIndex: 'clearType',
-    align: 'center',
+    key: 'clearType',
-    customRender(opt) {
+    align: 'left',
-      let clearType: any = {
-        0: '未清除',
-        1: '自动清除',
-        2: '手动清除',
-      };
-      if (clearType[opt.value]) {
-        return clearType[opt.value];
-      }
-      return opt.value;
-    },
     width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.ackState'),
     dataIndex: 'ackState',
-    align: 'center',
+    key: 'ackState',
-    customRender(opt) {
+    align: 'left',
-      let ackState: any = {
-        0: '未确认',
-        1: '已确认',
-      };
-      if (ackState[opt.value]) {
-        return ackState[opt.value];
-      }
-      return opt.value;
-    },
     width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.ackUser'),
     dataIndex: 'ackUser',
-    align: 'center',
+    align: 'left',
     width: 5,
   },
   {
@@ -246,9 +234,6 @@ let tableColumns: ColumnsType = [
   },
 ];
 
-// //监听点击的是升序还是降序,还是取消排序
-// const change= (pagination, filters, sorter) => {console.log(sorter)}
-
 /**帮助文档表格字段列 */
 let alarmTableColumns: ColumnsType = [
   {
@@ -346,52 +331,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 = {
   /**详情框是否显示 */
@@ -408,8 +347,6 @@ type ModalStateType = {
   from: Record<string, any>;
   /**表单数据 */
   showSetFrom: Record<string, any>;
-  // /**表单数据 */
-  // myselfSetFrom: Record<string, any>;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -466,7 +403,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;
 }
 
@@ -672,7 +613,7 @@ function fnShowSet() {
         ? JSON.parse(res.data.data[0]['config'][0].value_json)
         : {};
       modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson);
-      modalState.title =  t('views.faultManage.activeAlarm.showSet');
+      modalState.title = t('views.faultManage.activeAlarm.showSet');
       modalState.visibleByShowSet = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
@@ -693,7 +634,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,
           });
@@ -711,6 +652,7 @@ function fnExportAll() {
     },
   });
 }
+
 /**
  * 对话框弹出关闭执行函数
  * 进行表达规则校验
@@ -725,7 +667,7 @@ function fnModalCancel() {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -759,6 +701,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>
@@ -774,21 +736,11 @@ 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"
             >
-              <a-input
+              <a-input v-model:value="queryParams.neType" allow-clear></a-input>
-                v-model:value="queryParams.neType"
-                allow-clear
-              ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -796,10 +748,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neName')"
               name="ne_name"
             >
-              <a-input
+              <a-input v-model:value="queryParams.neName" allow-clear></a-input>
-                v-model:value="queryParams.neName"
-                allow-clear
-              ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -807,10 +756,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.neId')"
               name="ne_id"
             >
-              <a-input
+              <a-input v-model:value="queryParams.neId" allow-clear></a-input>
-                v-model:value="queryParams.neId"
-                allow-clear
-              ></a-input>
             </a-form-item>
           </a-col>
 
@@ -848,10 +794,9 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="queryParams.origSeverity"
-                placeholder="Select alarm Type"
+                :placeholder="t('common.selectPlease')"
-                show-search
                 allow-clear
-                :options="actAlarmOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
               />
             </a-form-item>
           </a-col>
@@ -878,13 +823,12 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="queryParams.pvFlag"
-                placeholder="Select a person"
+                :placeholder="t('common.selectPlease')"
-                show-search
+                :options="[
-                :options="actAlarmOption.pvFlag"
+                  { 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">
@@ -894,9 +838,8 @@ onMounted(() => {
             >
               <a-select
                 v-model:value="queryParams.alarmType"
-                placeholder="Select alarm Type"
+                :placeholder="t('common.selectPlease')"
-                show-search
+                :options="dict.activeAlarmType"
-                :options="actAlarmOption.alarmType"
               />
             </a-form-item>
           </a-col>
@@ -979,15 +922,15 @@ onMounted(() => {
                   :selected-keys="[tableState.size as string]"
                   @click="fnTableSize"
                 >
-                  <a-menu-item key="default">{{
+                  <a-menu-item key="default">
-                    t('common.size.default')
+                    {{ t('common.size.default') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="middle">{{
+                  <a-menu-item key="middle">
-                    t('common.size.middle')
+                    {{ t('common.size.middle') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
-                  <a-menu-item key="small">{{
+                  <a-menu-item key="small">
-                    t('common.size.small')
+                    {{ t('common.size.small') }}
-                  }}</a-menu-item>
+                  </a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
@@ -995,27 +938,6 @@ onMounted(() => {
         </a-space>
       </template>
 
-      <div>
-        <a-drawer
-          :visible="visible"
-          @close="closeDrawer"
-          :height="700"
-          placement="bottom"
-        >
-          <a-table
-            class="table"
-            row-key="id"
-            :columns="alarmTableColumns"
-            :loading="alarmTableState.loading"
-            :data-source="alarmTableState.data"
-            :size="alarmTableState.size"
-            :pagination="false"
-            :scroll="{ x: 2000, y: 560 }"
-          >
-          </a-table>
-        </a-drawer>
-      </div>
-
       <!-- 表格列表 -->
       <a-table
         class="table"
@@ -1030,13 +952,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()]">{{
+            <a-tag :color="profile.color[record.origSeverity.toLowerCase()]">
-              record.origSeverity
+              {{ record.origSeverity }}
-            }}</a-tag>
+            </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">
@@ -1050,7 +987,9 @@ onMounted(() => {
                 </a-button>
               </a-tooltip>
               <a-tooltip>
-                <template #title>{{ t('views.faultManage.activeAlarm.helpFile') }}</template>
+                <template #title>
+                  {{ t('views.faultManage.activeAlarm.helpFile') }}
+                </template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleBy(record.alarmCode)"
@@ -1066,6 +1005,26 @@ onMounted(() => {
       </a-table>
     </a-card>
 
+    <!-- 帮助文档 -->
+    <a-drawer
+      :visible="visible"
+      @close="closeDrawer"
+      :height="700"
+      placement="bottom"
+    >
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="alarmTableColumns"
+        :loading="alarmTableState.loading"
+        :data-source="alarmTableState.data"
+        :size="alarmTableState.size"
+        :pagination="false"
+        :scroll="{ x: 2000, y: 560 }"
+      >
+      </a-table>
+    </a-drawer>
+
     <!-- 详情框 -->
     <a-modal
       width="800px"
@@ -1218,7 +1177,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.alarmType"
                 style="width: 100%"
-                :options="actAlarmOption.alarmType"
+                :options="dict.activeAlarmType"
                 disabled
               >
               </a-select>
@@ -1288,7 +1247,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.origSeverity"
                 style="width: 100%"
-                :options="actAlarmOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
                 disabled
               >
               </a-select>
@@ -1337,7 +1296,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.clearType"
                 style="width: 100%"
-                :options="actAlarmOption.clearType"
+                :options="dict.activeClearType"
                 disabled
               >
               </a-select>
@@ -1380,7 +1339,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.ackState"
                 style="width: 100%"
-                :options="actAlarmOption.ackState"
+                :options="dict.activeAckState"
                 disabled
               />
             </a-form-item>
@@ -1452,7 +1411,10 @@ onMounted(() => {
                 v-model:value="modalState.showSetFrom.pv_flag"
                 style="width: 100%"
                 allow-clear
-                :options="actAlarmOption.pvFlag"
+                :options="[
+                  { label: 'PNF', value: 'PNF' },
+                  { label: 'VNF', value: 'VNF' },
+                ]"
               />
             </a-form-item>
           </a-col>
@@ -1465,7 +1427,7 @@ onMounted(() => {
                 v-model:value="modalState.showSetFrom.alarm_type"
                 style="width: 100%"
                 allow-clear
-                :options="actAlarmOption.alarmType"
+                :options="dict.activeAlarmType"
               />
             </a-form-item>
           </a-col>
@@ -1480,7 +1442,7 @@ onMounted(() => {
                 v-model:value="modalState.showSetFrom.orig_severity"
                 style="width: 100%"
                 allow-clear
-                :options="actAlarmOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
               />
             </a-form-item>
           </a-col>
@@ -1547,7 +1509,10 @@ onMounted(() => {
                 v-model:value="modalState.showSetFrom.pv_flag"
                 style="width: 100%"
                 allow-clear
-                :options="actAlarmOption.pvFlag"
+                :options="[
+                  { label: 'PNF', value: 'PNF' },
+                  { label: 'VNF', value: 'VNF' },
+                ]"
               />
             </a-form-item>
           </a-col>
@@ -1560,7 +1525,7 @@ onMounted(() => {
                 v-model:value="modalState.showSetFrom.alarm_type"
                 style="width: 100%"
                 allow-clear
-                :options="actAlarmOption.alarmType"
+                :options="dict.activeAlarmType"
               />
             </a-form-item>
           </a-col>
@@ -1575,7 +1540,7 @@ onMounted(() => {
                 v-model:value="modalState.showSetFrom.orig_severity"
                 style="width: 100%"
                 allow-clear
-                :options="actAlarmOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
               />
             </a-form-item>
           </a-col>

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',
+    key: 'alarmType',
-    customRender(opt) {
+    align: 'left', 
-      let levelName: any = {
-        CommunicationAlarm: '通信告警',
-        EquipmentAlarm: '设备告警',
-        ProcessingFailure: '处理错误告警',
-        EnvironmentalAlarm: '环境告警',
-        QualityOfServiceAlarm: '服务质量告警',
-      };
-      if (levelName[opt.value]) {
-        return levelName[opt.value];
-      }
-      return opt.value;
-    },
     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',
+    key: 'clearType',
-    customRender(opt) {
+    align: 'left', 
-      let clearType: any = {
-        0: '未清除',
-        1: '自动清除',
-        2: '手动清除',
-      };
-      if (clearType[opt.value]) {
-        return clearType[opt.value];
-      }
-      return opt.value;
-    },
     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',
+    key: 'ackState',
-    customRender(opt) {
+    align: 'left', 
-      let ackState: any = {
-        0: '未确认',
-        1: '已确认',
-      };
-      if (ackState[opt.value]) {
-        return ackState[opt.value];
-      }
-      return opt.value;
-    },
     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
+              <a-input v-model:value="queryParams.ne_id" allow-clear></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"
+                :placeholder="t('common.selectPlease')"
-                show-search
                 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"
+                :placeholder="t('common.selectPlease')"
-                show-search
+                :options="[
-                :options="actAlarmOption.pvFlag"
+                  { 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"
+                :placeholder="t('common.selectPlease')"
-                show-search
+                :options="dict.activeAlarmSeverity"
-                :options="actAlarmOption.alarmType"
               />
             </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()]">{{
+            <a-tag :color="profile.color[record.origSeverity.toLowerCase()]">
-              record.origSeverity
+              {{ record.origSeverity }}
-            }}</a-tag>
+            </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>

src/views/perfManage/perfThreshold/index.vue

@@ -8,7 +8,7 @@ import { ColumnsType } from 'ant-design-vue/lib/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
-import useUserStore from '@/store/modules/user';
+import useDictStore from '@/store/modules/dict';
 import useNeInfoStore from '@/store/modules/neinfo';
 import {
   addPerfThre,
@@ -19,18 +19,15 @@ import {
   threStop,
   threRun,
 } from '@/api/perfManage/perfThreshold';
-import { regExpIPv4 } from '@/utils/regular-utils';
+const { getDict } = useDictStore();
 const { t, currentLocale } = useI18n();
 
-/**表格所需option */
+/**字典数据 */
-const perfThresholdOption = reactive({
+let dict: {
-  origSeverity: [
+  /**原始严重程度 */
-    { label: t('views.faultManage.activeAlarm.critical'), value: 'Critical' },
+  activeAlarmSeverity: DictType[];
-    { label: t('views.faultManage.activeAlarm.major'), value: 'Major' },
+} = reactive({
-    { label: t('views.faultManage.activeAlarm.minor'), value: 'Minor' },
+  activeAlarmSeverity: [],
-    { label: t('views.faultManage.activeAlarm.warning'), value: 'Warning' },
-    { label: t('views.faultManage.activeAlarm.eventAlarm'), value: 'Event' },
-  ],
 });
 
 /**查询参数 */
@@ -469,6 +466,13 @@ function fnTaskModalVisible(type: string | number, row: Record<string, any>) {
 }
 
 onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('active_alarm_severity')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.activeAlarmSeverity = resArr[0].value;
+    }
+  });
+
   Promise.allSettled([
     // 获取网元网元列表
     useNeInfoStore().fnNelist(),
@@ -705,7 +709,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.origSeverity"
                 style="width: 100%"
-                :options="perfThresholdOption.origSeverity"
+                :options="dict.activeAlarmSeverity"
               >
               </a-select>
             </a-form-item>