Merge remote-tracking branch 'origin/main' into lichang

src/api/configManage/configParam.ts

@@ -38,13 +38,13 @@ export async function getParamConfigTopTab(neType: string) {
 }
 
 /**
- * 查询配置参数标签栏对应信息
+ * 查询配置参数标签栏对应信息和规则
  * @param neType 网元类型
  * @param topTag
  * @param neId
  * @returns object { wrRule, dataArr }
  */
-async function getParamConfigInfo(
+async function getParamConfigInfoAndRule(
   neType: string,
   topTag: string,
   neId: string
@@ -57,7 +57,6 @@ async function getParamConfigInfo(
       params: {
         SQL: `SELECT param_json FROM param_config WHERE ne_type = '${neType}' AND top_tag='${topTag}'`,
       },
-      timeout: 1_000,
     }),
     // 获取对应信息
     request({
@@ -66,7 +65,6 @@ async function getParamConfigInfo(
       params: {
         ne_id: neId,
       },
-      timeout: 1_000,
     }),
   ]).then(resArr => {
     let wrRule: Record<string, any> = {};
@@ -120,7 +118,11 @@ export async function getParamConfigInfoForm(
   topTag: string,
   neId: string
 ) {
-  const { wrRule, dataArr } = await getParamConfigInfo(neType, topTag, neId);
+  const { wrRule, dataArr } = await getParamConfigInfoAndRule(
+    neType,
+    topTag,
+    neId
+  );
 
   // 拼装数据
   const result = {
@@ -187,6 +189,35 @@ export async function getParamConfigInfoForm(
   return result;
 }
 
+/**
+ * 查询配置参数标签栏对应信息
+ * @param neType 网元类型
+ * @param topTag
+ * @param neId
+ * @returns object
+ */
+export async function getParamConfigInfo(
+  neType: string,
+  topTag: string,
+  neId: string
+) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/systemManagement/v1/elementType/${neType.toLowerCase()}/objectType/config/${topTag}`,
+    method: 'get',
+    params: {
+      ne_id: neId,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    return Object.assign(result, {
+      data: parseObjLineToHump(result.data.data),
+    });
+  }
+  return result;
+}
+
 /**
  * 查询配置参数标签栏对应信息子节点
  * @param neType 网元类型

src/api/faultManage/actAlarm.ts

@@ -294,7 +294,7 @@ export async function exportAll(query: Record<string, any>) {
  * @returns bolb
  */
 export async function origGet() {
-  let totalSQL = `select count(*) as value,orig_severity as name from alarm WHERE alarm_status='1'   group by orig_severity`;
+  let totalSQL = `select count(*) as value,orig_severity as name from alarm WHERE alarm_status='1'  and orig_severity!='Event' group by orig_severity`;
 
   // 发起请求
   const result = await request({
@@ -332,7 +332,7 @@ export async function top3Sel(filterFlag?: string) {
   let filter = ` WHERE alarm_status='1'and orig_severity='${filterFlag}'`;
   if (!filterFlag) filter = "WHERE alarm_status='1'";
 
-  let top3SQL = `select count(*) as value,ne_type as name   from alarm ${filter} group by ne_type ORDER BY value  desc limit 0,3 `;
+  let top3SQL = `select count(*) as value,ne_type as name   from alarm ${filter} and orig_severity!='Event' group by ne_type ORDER BY value  desc limit 0,3 `;
 
   // 发起请求
   const result = await request({

src/api/faultManage/eventAlarm.ts

@@ -0,0 +1,139 @@
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
+import { parseDateToStr } from '@/utils/date-utils';
+import useUserStore from '@/store/modules/user';
+
+
+
+/**
+ * 查询列表
+ * @param query 查询参数
+ * @returns object
+ */
+export async function listAct(query: Record<string, any>) {
+  let totalSQL = `select count(*)  as total from alarm_event where 1=1  `;
+  let rowsSQL = `select * from alarm_event where 1=1  `;
+  // 查询
+  let querySQL = '';
+  if (query.alarmCode) {
+    querySQL += ` and alarm_code = '${query.alarmCode}' `;
+  }
+
+  if (query.alarmType) {
+    querySQL += ` and alarm_type = '${query.alarmType}' `;
+  }
+
+  if (query.pvFlag) {
+    querySQL += ` and pv_flag = '${query.pvFlag}' `;
+  }
+
+
+
+  if (query.neId) {
+    querySQL += ` and ne_id like '%${query.neId}%' `;
+  }
+
+  if (query.neName) {
+    querySQL += ` and ne_name like '%${query.neName}%' `;
+  }
+
+  if (query.neType) {
+    querySQL += ` and ne_type like '%${query.neType}%' `;
+  }
+
+  if (query.beginTime && query.endTime) {
+    querySQL += ` and event_time BETWEEN '${query.beginTime}' and ' ${query.endTime}'`;
+  }
+
+  // 分页
+  const pageNum = (query.pageNum - 1) * query.pageSize;
+  const limtSql = ` order by event_time desc limit ${pageNum},${query.pageSize} `;
+
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/alarm_event`,
+    method: 'get',
+    params: {
+      SQL: totalSQL + querySQL,
+      rowsSQL: rowsSQL + querySQL + limtSql,
+    },
+  });
+
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS) {
+    const data: DataList = {
+      total: 0,
+      rows: [],
+      code: result.code,
+      msg: result.msg,
+    };
+    result.data.data.forEach((item: any) => {
+      console.log(item)
+      const itemData = item['alarm_event'];
+      if (Array.isArray(itemData)) {
+        if (itemData.length === 1 && itemData[0]['total'] >= 0) {
+          data.total = itemData[0]['total'];
+        } else {
+          data.rows = itemData.map(v => parseObjLineToHump(v));
+        }
+      }
+    });
+    return data;
+  }
+  return result;
+}
+
+
+
+
+
+
+
+/**
+ * 事件告警导出
+ * @param query 查询参数
+ * @returns bolb
+ */
+export async function exportAll(query: Record<string, any>) {
+  let rowsSQL = `select * from alarm_event where 1=1`;
+  // 查询
+  let querySQL = '';
+  querySQL += query.alarm_code
+    ? ` and alarm_code = '${query.alarm_code}' `
+    : '';
+  querySQL += query.alarm_type
+    ? ` and alarm_type = '${query.alarm_type}' `
+    : '';
+  querySQL += query.pv_flag ? ` and pv_flag = '${query.pv_flag}' ` : '';
+  querySQL += query.orig_severity
+    ? ` and orig_severity in('${query.orig_severity}' )`
+    : '';
+  querySQL += query.ne_id ? ` and ne_id like '%${query.ne_id}%' ` : '';
+  querySQL += query.ne_name ? ` and ne_name like '%${query.ne_name}%' ` : '';
+  querySQL += query.ne_type ? ` and ne_type like '%${query.ne_type}%' ` : '';
+  querySQL +=
+    query.beginTime && query.endTime
+      ? ` and event_time BETWEEN '${query.beginTime}' and ' ${query.endTime}'`
+      : '';
+
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/alarm_event`,
+    method: 'get',
+    params: {
+      rowsSQL: rowsSQL + querySQL,
+    },
+  });
+
+  if (result.code === RESULT_CODE_SUCCESS) {
+    let v = result.data.data[0];
+    const vArr = parseObjLineToHump(v['alarm_event']);
+    result.data = vArr == null ? [] : vArr;
+  }
+  return result;
+}
+
+
+
+

src/i18n/locales/en-US.ts

@@ -481,21 +481,21 @@ export default {
         neType: 'NE Type',
         neTypePleace: "Please select the network element type",
         noConfigData: "No data on configuration items",
-        updateValue: "The value of the {num} attribute was modified successfully.",
+        updateValue: "[ {num} ] parameter value modified successfully.",
         updateValueErr: "Attribute value modification failure",
         updateItem: "Modify Index to {num}.",
         updateItemErr: "Record modification failure",
         delItemOk: "Deleting Index as {num} succeeded",
         addItemOk: "Add Index as {num} Record Succeeded",
         addItemErr: "Record addition failure",
-        requireUn: "{display} input value is of unknown type",
+        requireUn: "[ {display} ] input value is of unknown type",
-        requireString: "The {display} parameter value is invalid.",
+        requireString: "[ {display} ] parameter value is invalid.",
-        requireInt: "{display} Parameter value not in reasonable range {filter}",
+        requireInt: "[ {display} ] parameter value not in reasonable range {filter}",
-        requireIpv4: "{display} not a legitimate IPV4 address",
+        requireIpv4: "[ {display} ] not a legitimate IPV4 address",
-        requireIpv6: "{display} Not a legitimate IPV6 address.",
+        requireIpv6: "[ {display} ] not a legitimate IPV6 address.",
-        requireEnum: "{display} is not a reasonable enumeration value.",
+        requireEnum: "[ {display} ] is not a reasonable enumeration value.",
-        requireBool: "{display} is not a reasonable boolean value.",
+        requireBool: "[ {display} ] is not a reasonable boolean value.",
-        editOkTip: "Confirm updating the value of this {num} attribute?",
+        editOkTip: "Confirm updating the value of this [ {num} ] attribute?",
         updateItemTip: "Confirm updating the data item with Index [{num}]?",
         delItemTip: "Confirm deleting the data item with Index [{num}]?",
         arrayMore: "Expand",
@@ -1147,6 +1147,7 @@ export default {
         showSet:'Show filter settings',
         exportSure:'Confirm whether to export all active alarm information',
         viewIdInfo:'View {alarmId} record information',
+        closeModal:'Close',
       },
       historyAlarm:{
         exportSure:'Confirm whether to export all historical alarm information',
@@ -1159,6 +1160,9 @@ export default {
         noChange:'There is no change in the alarm forwarding settings.',
         forwardSet:'Alarm Forwarding Setting',
       },
+      eventAlarm:{
+        exportSure:'Confirm whether to export all event alarm information',
+      }
     },
     logManage:{
       alarm:{
@@ -1955,14 +1959,14 @@ export default {
       cmdOpTip: "Select the item to be operated in the left command navigation!",
       cmdNoTip: "{num} no optional command operation",
       require: "Mandatory parameter: {num}",
-      requireUn: "{display} input value is of unknown type",
+      requireUn: "[ {display} ] input value is of unknown type",
-      requireString: "The {display} parameter value is invalid.",
+      requireString: "[ {display} ] parameter value is invalid.",
-      requireInt: "{display} Parameter value not in reasonable range {filter}",
+      requireInt: "[ {display} ] parameter value not in reasonable range {filter}",
-      requireIpv4: "{display} not a legitimate IPV4 address",
+      requireIpv4: "[ {display} ] not a legitimate IPV4 address",
-      requireIpv6: "{display} Not a legitimate IPV6 address.",
+      requireIpv6: "[ {display} ] not a legitimate IPV6 address.",
-      requireEnum: "{display} is not a reasonable enumeration value.",
+      requireEnum: "[ {display} ] is not a reasonable enumeration value.",
-      requireBool: "{display} is not a reasonable boolean value.",
+      requireBool: "[ {display} ] is not a reasonable boolean value.",
-      requireFile: "{display} is not a value that matches the parameter file type.",
+      requireFile: "[ {display} ] is not a value that matches the parameter file type.",
       cmdQuickEntry: "Command Quick Entry",
       cmdQuickEntryHelp: "Line feed (Shift + Enter), Execute (Enter)",
       cmdParamPanel: "Parameter Panel",

src/i18n/locales/zh-CN.ts

@@ -481,21 +481,21 @@ export default {
         neType: "网元类型",
         neTypePleace: "请选择网元类型",
         noConfigData: "暂无配置项数据",
-        updateValue: "{num} 属性值修改成功",
+        updateValue: "【 {num} 】 属性值修改成功",
         updateValueErr: "属性值修改失败",
         updateItem: "修改 Index 为 {num} 记录成功",
         updateItemErr: "记录修改失败",
         delItemOk: "删除 Index 为 {num} 记录成功",
         addItemOk: "新增 Index 为 {num} 记录成功",
         addItemErr: "记录新增失败",
-        requireUn: "{display} 输入值是未知类型",
+        requireUn: "【 {display} 】输入值是未知类型",
-        requireString: "{display} 参数值不合理",
+        requireString: "【 {display} 】参数值不合理",
-        requireInt: "{display} 参数值不在合理范围 {filter}",
+        requireInt: "【 {display} 】参数值不在合理范围 {filter}",
-        requireIpv4: "{display} 不是合法的IPV4地址",
+        requireIpv4: "【 {display} 】不是合法的IPV4地址",
-        requireIpv6: "{display} 不是合法的IPV6地址",
+        requireIpv6: "【 {display} 】不是合法的IPV6地址",
-        requireEnum: "{display} 不是合理的枚举值",
+        requireEnum: "【 {display} 】不是合理的枚举值",
-        requireBool: "{display} 不是合理的布尔类型的值",
+        requireBool: "【 {display} 】不是合理的布尔类型的值",
-        editOkTip: "确认更新该{num}属性值吗？",
+        editOkTip: "确认更新该【 {num} 】属性值吗？",
         updateItemTip: "确认更新Index为 【{num}】 的数据项？",
         delItemTip: "确认删除Index为 【{num}】 的数据项？",
         arrayMore: "展开",
@@ -1147,6 +1147,7 @@ export default {
         showSet:'显示过滤设置',
         exportSure:'确认是否导出全部活动告警信息',
         viewIdInfo:'查看{alarmId} 记录信息',
+        closeModal:'关闭',
       },
       historyAlarm:{
         exportSure:'确认是否导出全部历史告警信息?',
@@ -1158,6 +1159,9 @@ export default {
         save:'保存设置',
         noChange:'告警前转接口设置无变更',
         forwardSet:'告警前转接口设置',
+      },
+      eventAlarm:{
+        exportSure:'确认是否导出全部事件告警信息?',
       }
     },
     logManage:{
@@ -1955,14 +1959,14 @@ export default {
       cmdOpTip: "左侧命令导航中选择要操作项！",
       cmdNoTip: "{num} 无可选命令操作",
       require: "必填参数：{num}",
-      requireUn: "{display} 输入值是未知类型",
+      requireUn: "【 {display} 】输入值是未知类型",
-      requireString: "{display} 参数值不合理",
+      requireString: "【 {display} 】参数值不合理",
-      requireInt: "{display} 参数值不在合理范围 {filter}",
+      requireInt: "【 {display} 】参数值不在合理范围 {filter}",
-      requireIpv4: "{display} 不是合法的IPV4地址",
+      requireIpv4: "【 {display} 】不是合法的IPV4地址",
-      requireIpv6: "{display} 不是合法的IPV6地址",
+      requireIpv6: "【 {display} 】不是合法的IPV6地址",
-      requireEnum: "{display} 不是合理的枚举值",
+      requireEnum: "【 {display} 】不是合理的枚举值",
-      requireBool: "{display} 不是合理的布尔类型的值",
+      requireBool: "【 {display} 】不是合理的布尔类型的值",
-      requireFile: "{display} 不是符合参数文件类型的值",
+      requireFile: "【 {display} 】不是符合参数文件类型的值",
       cmdQuickEntry: "命令快速输入",
       cmdQuickEntryHelp: "换行(Shift + Enter) 执行发送(Enter)",
       cmdParamPanel: "参数面板",

src/utils/regular-utils.ts

@@ -84,13 +84,14 @@ export function validURL(str: string) {
     // http:// is appended so url.Parse will succeed, strTemp used so it does not impact rxURL.MatchString
     strTemp = 'http://' + str;
   }
-  debugger;
+
+  let u = { host: '', pathname: '' };
   try {
     new URL(strTemp);
   } catch (error) {
     return false;
   }
-  const u = new URL(strTemp);
+  
   if (u.host.startsWith('.')) {
     return false;
   }

src/views/configManage/configParamTreeTable/hooks/useOptions.ts

@@ -0,0 +1,157 @@
+import useI18n from '@/hooks/useI18n';
+import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+
+export default function useOptions() {
+  const { t } = useI18n();
+
+  /**规则校验 */
+  function ruleVerification(row: Record<string, any>): (string | boolean)[] {
+    let result = [true, ''];
+    const type = row.type;
+    const value = row.value;
+    const filter = row.filter;
+    const display = row.display;
+
+    // 子嵌套的不检查
+    if (row.array) {
+      return result;
+    }
+
+    // 可选的同时没有值不检查
+    if (row.optional === 'true' && !value) {
+      return result;
+    }
+    switch (type) {
+      case 'int':
+        if (filter && filter.indexOf('~') !== -1) {
+          const filterArr = filter.split('~');
+          const minInt = parseInt(filterArr[0]);
+          const maxInt = parseInt(filterArr[1]);
+          const valueInt = parseInt(value);
+          if (valueInt < minInt || valueInt > maxInt) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireInt', {
+                display,
+                filter,
+              }),
+            ];
+          }
+        }
+        break;
+      case 'ipv4':
+        if (!regExpIPv4.test(value)) {
+          return [
+            false,
+            t('views.configManage.configParamForm.requireIpv4', { display }),
+          ];
+        }
+        break;
+      case 'ipv6':
+        if (!regExpIPv6.test(value)) {
+          return [
+            false,
+            t('views.configManage.configParamForm.requireIpv6', { display }),
+          ];
+        }
+        break;
+      case 'enum':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.keys(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireEnum', { display }),
+            ];
+          }
+        }
+        break;
+      case 'bool':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.values(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireBool', { display }),
+            ];
+          }
+        }
+        break;
+      case 'string':
+        // 字符串长度判断
+        if (filter && filter.indexOf('~') !== -1) {
+          try {
+            const filterArr = filter.split('~');
+            let rule = new RegExp(
+              '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
+            );
+            if (!rule.test(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        // 字符串http判断
+        if (value.startsWith('http')) {
+          try {
+            if (!validURL(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        break;
+      case 'regex':
+        if (filter) {
+          try {
+            let regex = new RegExp(filter);
+            if (!regex.test(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        break;
+
+      default:
+        return [
+          false,
+          t('views.configManage.configParamForm.requireUn', { display }),
+        ];
+    }
+    return result;
+  }
+
+  return { ruleVerification };
+}

src/views/configManage/configParamTreeTable/hooks/useSMFOptions.ts

@@ -0,0 +1,22 @@
+import { getParamConfigInfo } from '@/api/configManage/configParam';
+import { ref } from 'vue';
+
+export default function useSMFOptions() {
+  /**upfId可选择 */
+  const optionsUPFIds = ref<{ value: string; label: string }[]>([]);
+
+  /**初始加载upfId */
+  function initUPFIds() {
+    getParamConfigInfo('smf', 'upfConfig', '001').then(res => {
+      optionsUPFIds.value = [];
+      for (const s of res.data) {
+        optionsUPFIds.value.push({
+          value: s.id,
+          label: s.id,
+        });
+      }
+    });
+  }
+
+  return { initUPFIds, optionsUPFIds };
+}

src/views/configManage/configParamTreeTable/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch, toRaw, nextTick } from 'vue';
+import { reactive, ref, onMounted, watchEffect, toRaw, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { Modal, message } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
@@ -13,11 +13,14 @@ import {
   addParamConfigInfo,
 } from '@/api/configManage/configParam';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+import useOptions from './hooks/useOptions';
+import useSMFOptions from './hooks/useSMFOptions';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { DataNode } from 'ant-design-vue/lib/tree';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
+const { ruleVerification } = useOptions();
+const { initUPFIds, optionsUPFIds } = useSMFOptions();
 
 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -25,6 +28,14 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 /**网元类型选择 type,id */
 let neTypeSelect = ref<string[]>(['', '']);
 
+/**左侧导航是否可收起 */
+let collapsible = ref<boolean>(true);
+
+/**改变收起状态 */
+function changeCollapsible() {
+  collapsible.value = !collapsible.value;
+}
+
 /**对象信息状态类型 */
 type TreeStateType = {
   /**网元 loading */
@@ -333,14 +344,6 @@ let arrayState: ArrayStateType = reactive({
   dataRule: {},
 });
 
-/**监听表格字段列排序变化关闭展开 */
-watch(
-  () => arrayState.columnsDnd,
-  () => {
-    arrayEditClose();
-  }
-);
-
 /**多列表编辑 */
 function arrayEdit(rowIndex: Record<string, any>) {
   const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
@@ -945,155 +948,6 @@ function arrayAddInit(data: any[], dataRule: any) {
   return ruleFrom;
 }
 
-/**规则校验 */
-function ruleVerification(row: Record<string, any>): (string | boolean)[] {
-  let result = [true, ''];
-  const type = row.type;
-  const value = row.value;
-  const filter = row.filter;
-  const display = row.display;
-
-  // 子嵌套的不检查
-  if (row.array) {
-    return result;
-  }
-
-  // 可选的同时没有值不检查
-  if (row.optional === 'true' && !value) {
-    return result;
-  }
-  switch (type) {
-    case 'int':
-      if (filter && filter.indexOf('~') !== -1) {
-        const filterArr = filter.split('~');
-        const minInt = parseInt(filterArr[0]);
-        const maxInt = parseInt(filterArr[1]);
-        const valueInt = parseInt(value);
-        if (valueInt < minInt || valueInt > maxInt) {
-          return [
-            false,
-            t('views.configManage.configParamForm.requireInt', {
-              display,
-              filter,
-            }),
-          ];
-        }
-      }
-      break;
-    case 'ipv4':
-      if (!regExpIPv4.test(value)) {
-        return [
-          false,
-          t('views.configManage.configParamForm.requireIpv4', { display }),
-        ];
-      }
-      break;
-    case 'ipv6':
-      if (!regExpIPv6.test(value)) {
-        return [
-          false,
-          t('views.configManage.configParamForm.requireIpv6', { display }),
-        ];
-      }
-      break;
-    case 'enum':
-      if (filter && filter.indexOf('{') === 1) {
-        let filterJson: Record<string, any> = {};
-        try {
-          filterJson = JSON.parse(filter); //string---json
-        } catch (error) {
-          console.error(error);
-        }
-
-        if (!Object.keys(filterJson).includes(`${value}`)) {
-          return [
-            false,
-            t('views.configManage.configParamForm.requireEnum', { display }),
-          ];
-        }
-      }
-      break;
-    case 'bool':
-      if (filter && filter.indexOf('{') === 1) {
-        let filterJson: Record<string, any> = {};
-        try {
-          filterJson = JSON.parse(filter); //string---json
-        } catch (error) {
-          console.error(error);
-        }
-
-        if (!Object.values(filterJson).includes(`${value}`)) {
-          return [
-            false,
-            t('views.configManage.configParamForm.requireBool', { display }),
-          ];
-        }
-      }
-      break;
-    case 'string':
-      // 字符串长度判断
-      if (filter && filter.indexOf('~') !== -1) {
-        try {
-          const filterArr = filter.split('~');
-          let rule = new RegExp(
-            '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
-          );
-          if (!rule.test(value)) {
-            return [
-              false,
-              t('views.configManage.configParamForm.requireString', {
-                display,
-              }),
-            ];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      // 字符串http判断
-      if (value.startsWith('http')) {
-        try {
-          if (!validURL(value)) {
-            return [
-              false,
-              t('views.configManage.configParamForm.requireString', {
-                display,
-              }),
-            ];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-
-      break;
-    case 'regex':
-      if (filter) {
-        try {
-          let regex = new RegExp(filter);
-          if (!regex.test(value)) {
-            return [
-              false,
-              t('views.configManage.configParamForm.requireString', {
-                display,
-              }),
-            ];
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-      break;
-
-    default:
-      return [
-        false,
-        t('views.configManage.configParamForm.requireUn', { display }),
-      ];
-  }
-  return result;
-}
-
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**添加框是否显示 */
@@ -1155,6 +1009,18 @@ function fnModalCancel() {
   modalState.data = [];
 }
 
+watchEffect(() => {
+  // 监听表格字段列排序变化关闭展开
+  if (arrayState.columnsDnd) {
+    arrayEditClose();
+  }
+
+  // SMF需要选择配置的UPF id
+  if (modalState.visible && neTypeSelect.value[0] === 'SMF') {
+    initUPFIds();
+  }
+});
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -1197,7 +1063,13 @@ onMounted(() => {
 <template>
   <PageContainer>
     <a-row :gutter="16">
-      <a-col :lg="6" :md="6" :xs="24" style="margin-bottom: 24px">
+      <a-col
+        :lg="6"
+        :md="6"
+        :xs="24"
+        style="margin-bottom: 24px"
+        v-show="collapsible"
+      >
         <!-- 网元类型 -->
         <a-card
           size="small"
@@ -1225,7 +1097,7 @@ onMounted(() => {
           </a-form>
         </a-card>
       </a-col>
-      <a-col :lg="18" :md="18" :xs="24">
+      <a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
         <a-card
           size="small"
           :bordered="false"
@@ -1233,6 +1105,13 @@ onMounted(() => {
           :loading="treeState.selectLoading"
         >
           <template #title>
+            <a-button type="text" @click.prevent="changeCollapsible()">
+              <template #icon>
+                <MenuFoldOutlined v-show="collapsible" />
+                <MenuUnfoldOutlined v-show="!collapsible" />
+              </template>
+            </a-button>
+
             <a-typography-text strong v-if="treeState.selectNode.topDisplay">
               {{ treeState.selectNode.topDisplay }}
             </a-typography-text>
@@ -1608,8 +1487,22 @@ onMounted(() => {
                   modalState.from[item.name] !== undefined
                 "
               >
+                <!-- 特殊SMF-upfid选择 -->
+                <a-select
+                  v-if="
+                    neTypeSelect[0] === 'SMF' &&
+                    modalState.from[item.name]['name'] === 'upfId'
+                  "
+                  v-model:value="modalState.from[item.name]['value']"
+                  :options="optionsUPFIds"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                  :allow-clear="true"
+                  style="width: 100%"
+                >
+                </a-select>
+                <!-- 常规 -->
                 <a-input-number
-                  v-if="item['type'] === 'int'"
+                  v-else-if="item['type'] === 'int'"
                   v-model:value="modalState.from[item.name]['value']"
                   :disabled="['read-only', 'read', 'ro'].includes(item.access)"
                   style="width: 100%"

src/views/dashboard/overview/components/AlarnTypeBar/index.vue

@@ -70,10 +70,10 @@ const alarmTypeType = ref<any>([
     value: 0,
     name: t('views.index.Warning'),
   },
-  {
+  // {
-    value: 0,
+  //   value: 0,
-    name: t('views.index.Event'),
+  //   name: t('views.index.Event'),
-  },
+  // },
 ]);
 
 /**告警类型Top数据 */
@@ -105,9 +105,9 @@ function initPicture() {
               case 'Warning':
                 index = 3;
                 break;
-              case 'Event':
+              // case 'Event':
-                index = 4;
+              //   index = 4;
-                break;
+              //   break;
             }
             alarmTypeType.value[index].value = Number(item.value);
           }
@@ -149,7 +149,7 @@ function initPicture() {
         legend: {
           orient: 'vertical',
           right: '2%',
-          top: '10%',
+          top: '12%',
           data: alarmTypeType.value.map((item: any) => item.name), //label数组
           textStyle: {
             color: '#A7D6F4', // 设置图例文字颜色

src/views/faultManage/event/index.vue

@@ -0,0 +1,858 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { listAct, exportAll } from '@/api/faultManage/eventAlarm';
+import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
+import saveAs from 'file-saver';
+import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
+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, currentLocale } = useI18n();
+
+/**字典数据 */
+let dict: {
+  /**活动告警类型 */
+  activeAlarmType: DictType[];
+  /**告警清除类型 */
+  activeClearType: DictType[];
+  /**告警清除类型 */
+  activeAckState: DictType[];
+  /**原始严重程度 */
+  activeAlarmSeverity: DictType[];
+} = reactive({
+  activeAlarmType: [],
+  activeClearType: [],
+  activeAckState: [],
+  activeAlarmSeverity: [],
+});
+
+/**表格字段列排序 */
+let tableColumnsDnd = ref<ColumnsType>([]);
+
+/**记录开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**告警设备类型 */
+  neType: '',
+  /**告警网元名称 */
+  neName: '',
+  /**告警网元标识 */
+  neId: '',
+  /**告警编号 */
+  alarmCode: '',
+  /**告警级别 */
+  origSeverity: undefined,
+  beginTime: '',
+  endTime: '',
+  /**告警产生时间 */
+  eventTime: '',
+  /**虚拟化标识 */
+  pvFlag: undefined,
+  /**告警类型 */
+  alarmType: undefined,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    /**告警设备类型 */
+    neType: '',
+    /**告警网元名称 */
+    neName: '',
+    /**告警网元标识 */
+    neId: '',
+    /**告警编号 */
+    alarmCode: '',
+    /**告警级别 */
+    origSeverity: undefined,
+    /**告警产生时间 */
+    eventTime: '',
+    /**虚拟化标识 */
+    pvFlag: undefined,
+    /**告警类型 */
+    alarmType: undefined,
+    /**当前页数 */
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.faultManage.activeAlarm.alarmId'),
+    dataIndex: 'alarmId',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.neId'),
+    dataIndex: 'neId',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.neName'),
+    dataIndex: 'neName',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.neType'),
+    dataIndex: 'neType',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.alarmCode'),
+    dataIndex: 'alarmCode',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.alarmTitle'),
+    dataIndex: 'alarmTitle',
+    align: 'left',
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.eventTime'),
+    dataIndex: 'eventTime',
+    align: 'center',
+    sorter: (a: any, b: any) => 1,
+    width: 5,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.pvFlag'),
+    dataIndex: 'pvFlag',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('common.operate'),
+    key: 'alarm_id',
+    align: 'center',
+    fixed: 'right',
+    width: 5,
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**显示过滤设置是否显示 */
+  visibleByShowSet: boolean;
+  /**个性化设置置是否显示 */
+  visibleByMyselfSet: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**表单数据 */
+  showSetFrom: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  visibleByEdit: false,
+  visibleByShowSet: false,
+  visibleByMyselfSet: false,
+  title: '全部信息',
+  from: {
+    alarmId: '',
+    alarmSeq: '',
+    neId: '',
+    neName: '',
+    neType: '',
+    alarmCode: '',
+    alarmTitle: '',
+    eventTime: '',
+    alarmType: '',
+    pvFlag: '',
+    objectName: '',
+    locationInfo: '',
+    province: '',
+    alarmStatus: '',
+    specificProblemId: '',
+    specificProblem: '',
+    addInfo: '',
+    clearType: '',
+    clearTime: '',
+    ackState: '',
+    ackUser: '',
+    ackTime: '',
+    origSeverity: '',
+  },
+  showSetFrom: {
+    ne_type: '',
+    ne_id: '',
+    alarm_type: '',
+    orig_severity: '',
+    alarm_code: '',
+    pv_flag: '',
+  },
+  // myselfSetFrom:{
+
+  // }
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 查看
+ * @param row 单行记录信息
+ */
+function fnModalVisibleByVive(row: Record<string, any>) {
+  modalState.from = Object.assign(modalState.from, row);
+  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;
+}
+
+/**表格状态 */
+const state = reactive<{
+  selectedRowKeys: (string | number)[];
+  selectedRow: Record<string, any>;
+  loading: boolean;
+}>({
+  selectedRowKeys: [], // Check here to configure the default column
+  selectedRow: {},
+  loading: false,
+});
+
+/**监听多选 */
+const onSelectChange = (
+  keys: (string | number)[],
+  record: Record<string, any>
+) => {
+  state.selectedRowKeys = keys;
+  state.selectedRow = record;
+};
+
+/**
+ * 导出全部
+ */
+function fnExportAll() {
+  Modal.confirm({
+    title: 'Tip',
+    content: t('views.faultManage.eventAlarm.exportSure'),
+    onOk() {
+      const key = 'exportAlarm';
+      message.loading({ content: t('common.loading'), key });
+      let sortArr: any = [];
+      tableColumnsDnd.value.forEach((item: any) => {
+        if (item.dataIndex) sortArr.push(item.dataIndex);
+      });
+
+      // 排序字段
+      const sortData = {
+        header: sortArr,
+      };
+
+      exportAll(queryParams).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          res.data = res.data.map((objA: any) => {
+            let filteredObj: any = {};
+            sortArr.forEach((key: any) => {
+              if (objA.hasOwnProperty(key)) {
+                filteredObj[key] = objA[key];
+              }
+            });
+            dict.activeAckState.map((item: any) => {
+              if (item.value === `${filteredObj.ackState}`)
+                filteredObj.ackState = item.label;
+            });
+
+            return filteredObj;
+          });
+          message.success({
+            content: t('common.msgSuccess', { msg: t('common.export') }),
+            key,
+            duration: 3,
+          });
+          writeSheet(res.data, 'alarm', sortData).then(fileBlob =>
+            saveAs(fileBlob, `alarm_${Date.now()}.xlsx`)
+          );
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 3,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+  queryParams.beginTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+
+  listAct(toRaw(queryParams)).then((res: any) => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (state.selectedRowKeys.length > 0) {
+        state.selectedRowKeys = [];
+      }
+      ////
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+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>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <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.faultManage.activeAlarm.neType')"
+              name="ne_type"
+            >
+              <a-input v-model:value="queryParams.neType" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.neName')"
+              name="ne_name"
+            >
+              <a-input v-model:value="queryParams.neName" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.neId')"
+              name="ne_id"
+            >
+              <a-input v-model:value="queryParams.neId" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarm_code"
+            >
+              <a-input
+                v-model:value="queryParams.alarmCode"
+                allow-clear
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.pvFlag')"
+              name="pv_flag"
+            >
+              <a-select
+                v-model:value="queryParams.pvFlag"
+                :placeholder="t('common.selectPlease')"
+                :options="[
+                  { label: 'PNF', value: 'PNF' },
+                  { label: 'VNF', value: 'VNF' },
+                ]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.eventTime')"
+              name="eventTime"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+                show-time
+                style="width: 400px"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmType')"
+              name="alarm_type"
+            >
+              <a-select
+                v-model:value="queryParams.alarmType"
+                :placeholder="t('common.selectPlease')"
+                :options="dict.activeAlarmType"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <div class="button-container">
+          <a-button
+            type="primary"
+            @click.prevent="fnExportAll()"
+            :disabled="tableState.data.length <= 0"
+          >
+            <template #icon> <export-outlined /> </template>
+            {{ t('views.faultManage.activeAlarm.exportAll') }}
+          </a-button>
+        </div>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <div class="button-container">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+          <TableColumnsDnd
+            cache-id="alarmActive"
+            :columns="tableColumns"
+            v-model:columns-dnd="tableColumnsDnd"
+          ></TableColumnsDnd>
+        </div>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumnsDnd"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :row-selection="{
+          columnWidth: 2,
+          selectedRowKeys: state.selectedRowKeys,
+          onChange: onSelectChange,
+        }"
+        :pagination="tablePagination"
+        :scroll="{ x: 2500, y: 400 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'origSeverity'">
+            <DictTag
+              :options="dict.activeAlarmSeverity"
+              :value="record.origSeverity"
+            />
+          </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">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record)"
+                >
+                  <template #icon><InfoCircleOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 详情框 -->
+    <a-modal
+      width="800px"
+      :body-style="{ height: '520px', overflowY: 'scroll' }"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByView"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @cancel="fnModalCancel"
+    >
+      <template v-slot:footer>
+        <a-button @click="fnModalCancel">{{
+          t('views.faultManage.activeAlarm.closeModal')
+        }}</a-button>
+      </template>
+
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 8 }"
+        :label-wrap="true"
+      >
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmId')"
+              name="alarmId"
+            >
+              {{ modalState.from.alarmId }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmSeq')"
+              name="alarmSeq"
+            >
+              {{ modalState.from.alarmSeq }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.neId')"
+              name="neId"
+            >
+              {{ modalState.from.neId }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.neName')"
+              name="neName"
+            >
+              {{ modalState.from.neName }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.neType')"
+              name="neType"
+            >
+              {{ modalState.from.neType }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarmCode"
+            >
+              {{ modalState.from.alarmCode }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmTitle')"
+              name="alarmTitle"
+            >
+              {{ modalState.from.alarmTitle }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.eventTime')"
+              name="eventTime"
+            >
+              {{ modalState.from.eventTime }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.faultManage.activeAlarm.locationInfo')"
+          name="locationInfo"
+          :label-col="{ span: 4 }"
+        >
+          {{ modalState.from.locationInfo }}
+        </a-form-item>
+
+        <a-row :gutter="16"> </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.province')"
+              name="province"
+            >
+              {{ modalState.from.province }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmType')"
+              name="alarmType"
+            >
+              {{ modalState.from.alarmType }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.faultManage.activeAlarm.addInfo')"
+          name="addInfo"
+          :label-col="{ span: 4 }"
+        >
+          {{ modalState.from.addInfo }}
+        </a-form-item>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.specificProblemId')"
+              name="specificProblemId"
+            >
+              {{ modalState.from.specificProblemId }}
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.objectName')"
+              name="objectName"
+            >
+              {{ modalState.from.objectName }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.faultManage.activeAlarm.specificProblem')"
+          name="specificProblem"
+          :label-col="{ span: 4 }"
+        >
+          {{ modalState.from.specificProblem }}
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
+
+<style lang="less">
+.full-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>