---完善活动告警

src/api/faultManage/actAlarm.ts

@@ -2,7 +2,9 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
 import { parseObjLineToHump } from '@/utils/parse-utils';
 import { toRaw } from '@vue/reactivity';
-
+import { stringify } from 'querystring';
+import { parseDateToStr } from '@/utils/date-utils';
+import useUserStore from '@/store/modules/user';
 /**
  * <20><>ѯ<EFBFBD>б<EFBFBD>
  * @param query <20><>ѯ<EFBFBD><D1AF><EFBFBD><EFBFBD>
@@ -73,3 +75,63 @@ export async function listAct(query: Record<string, any>) {
   }
   return result;
 }
+
+/**
+ * ȷ<>ϸ澯<CFB8><E6BEAF>Ϣ
+ * @param data <20><>Ȩ<EFBFBD><C8A8><EFBFBD><EFBFBD>
+ * @returns object
+ */
+export function updateConfirm(data: Record<string, any>) {
+  var time = new Date();
+  const userName = useUserStore().userName;
+  let finalData = {
+    alarm: {
+      ack_time: parseDateToStr(time),
+      ack_user: userName,
+      ack_state: '1',
+    },
+  };
+
+  return request({
+    url: `/databaseManagement/v1/update/omc_db/alarm?WHERE=id='${data.id}'`,
+    method: 'put',
+    data: finalData,
+  });
+}
+
+/**
+ * ȡ<><C8A1>ȷ<EFBFBD>ϸ澯
+ * @param data <20><>Ȩ<EFBFBD><C8A8><EFBFBD><EFBFBD>
+ * @returns object
+ */
+export function cancelConfirm(data: (string | number)[]) {
+  var time = new Date();
+  const userName = useUserStore().userName;
+  let finalData = {
+    alarm: {
+      ack_time: parseDateToStr(time),
+      ack_user: '',
+      ack_state: '0',
+    },
+  };
+
+  return request({
+    url: `/databaseManagement/v1/update/omc_db/alarm?WHERE=id in(${data.join(
+      ','
+    )})`,
+    method: 'put',
+    data: finalData,
+  });
+}
+
+/**
+ * <20>ֹ<EFBFBD>ͬ<EFBFBD><CDAC>
+ * @param data <20><>Ȩ<EFBFBD><C8A8><EFBFBD><EFBFBD>
+ * @returns object
+ */
+export function listSync() {
+  return request({
+    url: `/faultManagement/v1/elementType/all/objectType/alarms)`,
+    method: 'get',
+  });
+}

src/i18n/locales/en-US.ts

@@ -258,6 +258,7 @@ export default {
         pvFlag: 'Virtualization Identity',
         alarmType: 'Alarm Type',
         confirm: 'Confirm',
+        updateConfirm: 'Cancel Confirmation',
         handSync: 'Manual synchronization',
         clear: 'Clear',
         mySelf: 'Personalization',
@@ -279,7 +280,21 @@ export default {
         clearUser:'clear User',
         clearType:'clear Type',
         ackState:'Alarm confirmation status',
-        ackUser:'Alarm confirmation user'
+        ackUser:'Alarm confirmation user',
+        alarmSeq:'Alarm sequence number',
+        objectName:'Location object',
+        locationInfo:'Alarm positioning information',
+        province:'Network Element Service Province',
+        addInfo:'Alarm auxiliary information',
+        specificProblemId:'Alarm issue reason ID',
+        specificProblem:'Reason for alarm problem',
+        clearTime:'Alarm clearing time',
+        alarmStatus:'Alarm status',
+        ackTime:'Alarm confirmation time',
+        ackError:'Please do not confirm again',
+        syncMyself:'Manual synchronization',
+        realTitle:'Alarm Title',
+        objectNf:'Applicable network elements',
       },
     },
     monitor: {

src/i18n/locales/zh-CN.ts

@@ -258,6 +258,7 @@ export default {
         pvFlag: '虚拟化标识',
         alarmType: '告警类型',
         confirm: '确认',
+        updateConfirm: '取消确认',
         handSync: '手动同步',
         clear: '清除',
         mySelf: '个性化设置',
@@ -279,7 +280,21 @@ export default {
         clearUser:'告警清除用户',
         clearType:'告警清除类型',
         ackState:'告警确认状态',
-        ackUser:'告警确认用户'
+        ackUser:'告警确认用户',
+        alarmSeq:'告警流水编号',
+        objectName:'定位对象',
+        locationInfo:'告警定位信息',
+        province:'网元服务省份',
+        addInfo:'告警辅助信息',
+        specificProblemId:'告警问题原因ID',
+        specificProblem:'告警问题原因',
+        clearTime:'告警清除时间',
+        alarmStatus:'告警状态',
+        ackTime:'告警确认时间',
+        ackError:'请勿重复确认',
+        syncMyself:'手工同步',
+        realTitle:'告警标题',
+        objectNf:'适用网元',
       },
     },
     monitor: {

src/utils/execl-utils.ts

@@ -20,7 +20,11 @@ export const xlsxUrl = `${
  * });
  */
 export async function readLoalXlsx(id: string): Promise<Record<string, any>[]> {
-  const fileBolb = await (await fetch(`${xlsxUrl}/${id}.xlsx`)).arrayBuffer();
+  let fileBolb = await (await fetch(`${xlsxUrl}/${id}.xlsx`)).arrayBuffer();
+  console.log(fileBolb.byteLength)
+  if(!fileBolb.byteLength){
+     fileBolb = await (await fetch(`${xlsxUrl}/all.xlsx`)).arrayBuffer();
+  }
   return readSheet(fileBolb, 0);
 }
 

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

@@ -3,25 +3,27 @@ import { useRoute } from 'vue-router';
 import dayjs, { Dayjs } from 'dayjs';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from '@ant-design-vue/pro-layout';
-import { message } from 'ant-design-vue/lib';
+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 useUserStore from '@/store/modules/user';
-import { listAct } from '@/api/faultManage/actAlarm';
+import {
+  listAct,
+  updateConfirm,
+  cancelConfirm,
+  listSync,
+} from '@/api/faultManage/actAlarm';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { parseStrToDate } from '@/utils/execl-utils';
+import { readLoalXlsx } from '@/utils/execl-utils';
 const { t } = useI18n();
 const route = useRoute();
 
 /**路由标题 */
 let title = ref<string>((route.meta.title as string) ?? '标题');
 
-/**网元参数 */
-let neOtions = ref<Record<string, any>[]>([]);
-
 /**查询参数 */
 let queryParams = reactive({
   /**告警设备类型 */
@@ -82,6 +84,15 @@ let tableState: TabeStateType = reactive({
   selectedRowKeys: [],
 });
 
+/**帮助文档表格状态 */
+let alarmTableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
@@ -157,7 +168,7 @@ let tableColumns: ColumnsType = [
   },
   {
     title: t('views.faultManage.activeAlarm.pvFlag'),
-    dataIndex: 'alarm_id',
+    dataIndex: 'pvFlag',
     align: 'center',
   },
   {
@@ -187,6 +198,76 @@ let tableColumns: ColumnsType = [
   },
 ];
 
+/**帮助文档表格字段列 */
+let alarmTableColumns: ColumnsType = [
+  {
+    title: t('views.faultManage.activeAlarm.alarmTitle'),
+    dataIndex: '告警名称',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.locationInfo'),
+    dataIndex: '告警定位信息',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.addInfo'),
+    dataIndex: '告警帮助信息',
+    align: 'center',
+  
+  },
+  {
+    title: t('views.faultManage.activeAlarm.alarmType'),
+    dataIndex: '告警类型',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.origLevel'),
+    dataIndex: '告警级别',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.alarmCode'),
+    dataIndex: '告警编号',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.specificProblem'),
+    dataIndex: '告警问题原因',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.clearType'),
+    dataIndex: '清除类型',
+    align: 'center',
+  },
+  {
+    title: t('views.faultManage.activeAlarm.realTitle'),
+    dataIndex: '英文标题',
+    align: 'center',
+  },
+
+  {
+    title: t('views.faultManage.activeAlarm.objectNf'),
+    dataIndex: '适用网元',
+    align: 'center',
+  },
+];
+
+/**告警帮助文档 */
+let pronInfo: any = reactive({
+  告警名称: '',
+  告警定位信息: '',
+  告警帮助信息: '',
+  告警类型: '',
+  告警级别: '',
+  告警编号: '',
+  告警问题原因: '',
+  清除类型: '',
+  英文标题: '',
+  适用网元: '',
+});
+
 /**表格分页器参数 */
 let tablePagination = reactive({
   /**当前页数 */
@@ -283,7 +364,7 @@ let modalState: ModalStateType = reactive({
   from: {
     alarmId: '',
     alarmSeq: '',
-    neId:'',
+    neId: '',
     neName: '',
     neType: '',
     alarmCode: '',
@@ -313,26 +394,144 @@ let modalState: ModalStateType = reactive({
  * @param row 单行记录信息
  */
 function fnModalVisibleByVive(row: Record<string, any>) {
-
-  console.log(toRaw(row))
-  return false;
-  const imsiIdx = row.imsi.lastIndexOf('-');
-  if (imsiIdx != -1) {
-    row.imsi = row.imsi.substring(imsiIdx + 1);
-  }
-  const msisdnIdx = row.msisdn.lastIndexOf('-');
-  if (msisdnIdx != -1) {
-    row.msisdn = row.msisdn.substring(msisdnIdx + 1);
-  }
   modalState.from = Object.assign(modalState.from, row);
-  modalState.title = `${row.imsi} 记录信息`;
+  modalState.title = `查看${row.alarmId} 记录信息`;
   modalState.visibleByView = true;
 }
-function fnModalVisibleBy() {
-  parseStrToDate();
 
+/**抽屉 网元详细信息 */
+const visible = ref(false);
+const closeDrawer = () => {
+  visible.value = false;
+};
+/**抽屉 告警帮助文档详细信息 */
+function fnModalVisibleBy(code: string) {
+  const result = readLoalXlsx(code);
+
+  result
+    .then(res => {
+      console.log(res);
+      if (!res.length) {
+        visible.value = false;
+      }
+      alarmTableState.data = res;
+      visible.value = true;
+
+      tableState.loading = false;
+    })
+    .catch(error => console.log(error));
 }
 
+/**
+ * 对话框弹出确认执行  确认查阅函数
+ */
+function fnModalOk() {
+  modalState.confirmLoading = true;
+  const from = toRaw(modalState.from);
+  if (from.ackState) {
+    message.error({
+      content: t('views.faultManage.activeAlarm.ackError'),
+      duration: 3,
+    });
+    modalState.visibleByView = false;
+    return false;
+  }
+  const result = updateConfirm(from);
+  const hide = message.loading({ content: t('common.loading') });
+  result
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.msgSuccess', { msg: modalState.title }),
+          duration: 3,
+        });
+        modalState.visibleByView = false;
+        fnGetList();
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
+}
+
+/**表格状态 */
+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 fnCancelConfirm() {
+  Modal.confirm({
+    title: 'Tip',
+    content: `确认是否取消确认告警?`,
+    onOk() {
+      const hide = message.loading('请稍等...', 0);
+      cancelConfirm(state.selectedRowKeys).then(res => {
+        hide();
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `取消确认告警成功`,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 手工同步
+ */
+function fnSync() {
+  const hide = message.loading('请稍等...', 0);
+  listSync().then(res => {
+    hide();
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success({
+        content: `手工同步成功`,
+        duration: 2,
+      });
+      console.log(toRaw(res));
+      return false;
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+    } else {
+      message.error({
+        content: `${res.msg}`,
+        duration: 2,
+      });
+    }
+  });
+}
 
 /**
  * 对话框弹出关闭执行函数
@@ -350,8 +549,8 @@ function fnGetList() {
   listAct(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
+      if (state.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
+        state.selectedRowKeys = [];
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
@@ -510,7 +709,27 @@ onMounted(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-button
+            type="primary"
+            @click.prevent="fnCancelConfirm()"
+            :disabled="state.selectedRowKeys.length <= 0"
+          >
+            <template #icon>
+              <CloseOutlined />
+            </template>
+            {{ t('views.faultManage.activeAlarm.updateConfirm') }}
+          </a-button>
+
+          <a-button type="primary" @click.prevent="fnSync()">
+            <template #icon>
+              <ReloadOutlined />
+            </template>
+            {{ t('views.faultManage.activeAlarm.syncMyself') }}
+          </a-button>
+        </a-space>
+      </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
@@ -557,6 +776,63 @@ onMounted(() => {
         </a-space>
       </template>
 
+      <div>
+        <a-drawer
+          :visible="visible"
+          @close="closeDrawer"
+          :height="700"
+          placement="bottom"
+        >
+          <!-- <a-descriptions
+            bordered
+            :column="1"
+            :label-style="{ width: '160px' }"
+          >
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.alarmTitle')">{{
+              pronInfo['告警名称']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.locationInfo')">{{
+              pronInfo['告警定位信息']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.addInfo')">{{
+              pronInfo['告警帮助信息']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.alarmType')">{{
+              pronInfo['告警类型']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.origLevel')">{{
+              pronInfo['告警级别']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.alarmCode')">{{
+              pronInfo['告警编号']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.specificProblem')">{{
+              pronInfo['告警问题原因']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.clearType')">{{
+              pronInfo['清除类型']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.realTitle')">{{
+              pronInfo['英文标题']
+            }}</a-descriptions-item>
+            <a-descriptions-item :label="t('views.faultManage.activeAlarm.objectNf')">{{
+              pronInfo['适用网元']
+            }}</a-descriptions-item>
+          </a-descriptions> -->
+          <a-table
+            class="table"
+            row-key="id"
+            :columns="alarmTableColumns"
+            :loading="alarmTableState.loading"
+            :data-source="alarmTableState.data"
+            :size="alarmTableState.size"
+            :pagination="false"
+            :scroll="{ x: true , y: 450  }"
+          >
+          </a-table>
+        </a-drawer>
+      </div>
+
       <!-- 表格列表 -->
       <a-table
         class="table"
@@ -565,6 +841,10 @@ onMounted(() => {
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
+        :row-selection="{
+          selectedRowKeys: state.selectedRowKeys,
+          onChange: onSelectChange,
+        }"
         :pagination="tablePagination"
         :scroll="{ x: true }"
       >
@@ -584,9 +864,11 @@ onMounted(() => {
                 <template #title>帮助文档</template>
                 <a-button
                   type="link"
-                  @click.prevent="fnModalVisibleBy()"
+                  @click.prevent="fnModalVisibleBy(record.alarmCode)"
                 >
-                  <template #icon><QuestionCircleOutlined style="color:crimson;"/></template>
+                  <template #icon
+                    ><QuestionCircleOutlined style="color: crimson"
+                  /></template>
                 </a-button>
               </a-tooltip>
             </a-space>
@@ -598,62 +880,348 @@ onMounted(() => {
     <!-- 详情框 -->
     <a-modal
       width="800px"
+      :keyboard="false"
+      :mask-closable="false"
       :visible="modalState.visibleByView"
       :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form layout="horizontal">
+      <a-form name="modalStateFrom" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="8" :md="8" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="IMSI" name="imsi">
+            <a-form-item
-              {{ modalState.from.imsi }}
+              :label="t('views.faultManage.activeAlarm.alarmId')"
+              name="alarmId"
+            >
+              <a-input
+                v-model:value="modalState.from.alarmId"
+                disabled
+                allow-clear
+              >
+              </a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="8" :md="8" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="MSISDN" name="msisdn">
+            <a-form-item
-              {{ modalState.from.msisdn }}
+              :label="t('views.faultManage.activeAlarm.alarmSeq')"
-            </a-form-item>
+              name="alarmSeq"
-          </a-col>
+            >
-          <a-col :lg="8" :md="8" :xs="24">
+              <a-input
-            <a-form-item label="RatType" name="ratType">
+                v-model:value="modalState.from.alarmSeq"
-              {{ modalState.from.ratType }}
+                disabled
+                allow-clear
+              >
+              </a-input>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-descriptions
+        <a-row :gutter="16">
-          :title="v.dnn"
+          <a-col :lg="12" :md="12" :xs="24">
-          :column="2"
+            <a-form-item
-          size="small"
+              :label="t('views.faultManage.activeAlarm.neId')"
-          bordered
+              name="neId"
-          v-for="v in modalState.from.pduSessionInfo"
+            >
-          :key="v.dnn"
+              <a-input
+                v-model:value="modalState.from.neId"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.neName')"
+              name="neName"
+            >
+              <a-input
+                v-model:value="modalState.from.neName"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </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"
+            >
+              <a-input
+                v-model:value="modalState.from.neType"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarmCode"
+            >
+              <a-input
+                v-model:value="modalState.from.alarmCode"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </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"
+            >
+              <a-input
+                v-model:value="modalState.from.alarmTitle"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.eventTime')"
+              name="eventTime"
+            >
+              <a-input
+                v-model:value="modalState.from.eventTime"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </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"
+            >
+              <a-input
+                v-model:value="modalState.from.alarmTitle"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmType')"
+              name="alarmType"
+            >
+              <a-input
+                v-model:value="modalState.from.alarmType"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </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.pvFlag')"
+              name="pvFlag"
+            >
+              <a-input
+                v-model:value="modalState.from.pvFlag"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.objectName')"
+              name="objectName"
+            >
+              <a-input
+                v-model:value="modalState.from.objectName"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.faultManage.activeAlarm.locationInfo')"
+          name="locationInfo"
         >
-          <a-descriptions-item label="IPV4">{{ v.ipv4 }}</a-descriptions-item>
+          <a-textarea
-          <a-descriptions-item label="IPV6">{{ v.ipv6 }}</a-descriptions-item>
+            v-model:value="modalState.from.locationInfo"
-          <a-descriptions-item label="TAI">{{ v.tai }}</a-descriptions-item>
+            placeholder="Autosize height with minimum and maximum number of lines"
-          <a-descriptions-item label="SST_SD">
+            :auto-size="{ minRows: 1, maxRows: 5 }"
-            {{ v.sstSD }}</a-descriptions-item
+            disabled
+          />
+        </a-form-item>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.province')"
+              name="province"
+            >
+              <a-input
+                v-model:value="modalState.from.province"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.origLevel')"
+              name="origSeverity"
+            >
+              <a-input
+                v-model:value="modalState.from.origSeverity"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.faultManage.activeAlarm.addInfo')"
+          name="addInfo"
+        >
+          <a-textarea
+            v-model:value="modalState.from.addInfo"
+            :auto-size="{ minRows: 1, maxRows: 5 }"
+            disabled
+          />
+        </a-form-item>
+        <a-form-item
+          :label="t('views.faultManage.activeAlarm.specificProblemId')"
+          name="specificProblemId"
+        >
+          <a-input
+            v-model:value="modalState.from.specificProblemId"
+            disabled
+            allow-clear
           >
-          <a-descriptions-item label="UPF_N3_IP">
+          </a-input>
-            {{ v.upfN3IP }}
+        </a-form-item>
-          </a-descriptions-item>
+
-          <a-descriptions-item label="RAN_N3_IP">
+        <a-form-item
-            {{ v.ranN3IP }}
+          :label="t('views.faultManage.activeAlarm.specificProblem')"
-          </a-descriptions-item>
+          name="specificProblem"
-          <a-descriptions-item label="ActiveTime">
+        >
-            {{ v.activeTime }}
+          <a-textarea
-          </a-descriptions-item>
+            v-model:value="modalState.from.specificProblem"
-          <a-descriptions-item label="pduSessionId">
+            :auto-size="{ minRows: 1, maxRows: 5 }"
-            {{ v.pduSessionID }}
+            disabled
-          </a-descriptions-item>
+          />
-        </a-descriptions>
+        </a-form-item>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.clearType')"
+              name="clearType"
+            >
+              <a-input
+                v-model:value="modalState.from.clearType"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.clearTime')"
+              name="clearTime"
+            >
+              <a-input
+                v-model:value="modalState.from.clearTime"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </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.ackUser')"
+              name="ackUser"
+            >
+              <a-input
+                v-model:value="modalState.from.ackUser"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.ackState')"
+              name="ackState"
+            >
+              <a-input
+                v-model:value="modalState.from.ackState"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </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.ackTime')"
+              name="ackTime"
+            >
+              <a-input
+                v-model:value="modalState.from.ackTime"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmStatus')"
+              name="alarmStatus"
+            >
+              <a-input
+                v-model:value="modalState.from.alarmStatus"
+                disabled
+                allow-clear
+              >
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">
-          {{ t('common.close') }}
-        </a-button>
-      </template>
     </a-modal>
   </PageContainer>
 </template>