feat: 告警日志

src/api/logManage/alarm.ts

@@ -0,0 +1,72 @@
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
+
+/**
+ * 查询日志列表
+ * @param query 查询参数
+ * @returns object
+ */
+export async function listAlarm(query: Record<string, any>) {
+  let totalSQL = 'select count(*) as total from alarm_log where 1=1 ';
+  let rowsSQL = 'select * from alarm_log where 1=1 ';
+
+  // 查询
+  let querySQL = '';
+  if (query.neType) {
+    querySQL += ` and ne_type like '%${query.neType}%' `;
+  }
+  if (query.status) {
+    querySQL += ` and alarm_status = '${query.status}' `;
+  }
+  if (query.beginTime) {
+    querySQL += ` and log_time >= '${query.beginTime}' `;
+  }
+  if (query.endTime) {
+    querySQL += ` and log_time <= '${query.endTime}' `;
+  }
+
+  // 排序
+  let sortSql = ' order by log_time ';
+  if (query.sortOrder === 'asc') {
+    sortSql += ' asc ';
+  } else {
+    sortSql += ' desc ';
+  }
+
+  // 分页
+  const pageNum = (query.pageNum - 1) * query.pageSize;
+  const limtSql = ` limit ${pageNum},${query.pageSize} `;
+
+  // 发起请求
+  const result = await request({
+    url: `/databaseManagement/v1/select/omc_db/alarm_log`,
+    method: 'get',
+    params: {
+      totalSQL: totalSQL + querySQL,
+      rowsSQL: rowsSQL + querySQL + sortSql + 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) => {
+      const itemData = item['alarm_log'];
+      if (Array.isArray(itemData)) {
+        if (itemData.length === 1 && itemData[0]['total']) {
+          data.total = itemData[0]['total'];
+        } else {
+          data.rows = itemData.map(v => parseObjLineToHump(v));
+        }
+      }
+    });
+    return data;
+  }
+  return result;
+}

src/views/logManage/alarm/index.vue

@@ -2,24 +2,15 @@
 import { useRoute } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from '@ant-design-vue/pro-layout';
-import { Form, 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 { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
+import { listAlarm } from '@/api/logManage/alarm';
-import useUserStore from '@/store/modules/user';
 import useNeInfoStore from '@/store/modules/neinfo';
-import {
-  addTraceTask,
-  delTraceTask,
-  getTraceTask,
-  listTraceTask,
-  updateTraceTask,
-} from '@/api/traceManage/task';
 import useDictStore from '@/store/modules/dict';
-import { regExpIPv4, regExpPort } from '@/utils/regular-utils';
+import useI18n from '@/hooks/useI18n';
 const { getDict } = useDictStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -29,16 +20,24 @@ let title = ref<string>((route.meta.title as string) ?? '标题');
 
 /**字典数据 */
 let dict: {
-  /**跟踪类型 */
+  /**告警状态 */
-  traceType: DictType[];
+  alarmStatus: DictType[];
 } = reactive({
-  traceType: [],
+  alarmStatus: [],
 });
 
+/**记录开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
 /**查询参数 */
 let queryParams = reactive({
   /**网元类型 */
   neType: '',
+  /**告警状态 */
+  status: undefined,
+  /**记录时间 */
+  beginTime: '',
+  endTime: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -49,9 +48,13 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     neType: '',
+    status: undefined,
+    beginTime: '',
+    endTime: '',
     pageNum: 1,
     pageSize: 20,
   });
+  queryRangePicker.value = ['', ''];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -67,8 +70,6 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -77,7 +78,6 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: true,
   data: [],
-  selectedRowKeys: [],
 });
 
 /**表格字段列 */
@@ -88,29 +88,39 @@ let tableColumns: ColumnsType = [
     align: 'center',
   },
   {
-    title: t('views.traceManage.task.neType'),
+    title: '网元类型',
     dataIndex: 'neType',
     align: 'center',
   },
   {
-    title: t('views.traceManage.task.neID'),
+    title: '告警网元标识',
     dataIndex: 'neId',
     align: 'center',
   },
   {
-    title: t('views.traceManage.task.trackType'),
+    title: '告警唯一标识',
-    dataIndex: 'traceType',
+    dataIndex: 'alarmId',
-    key: 'traceType',
     align: 'center',
   },
   {
-    title: t('views.traceManage.task.trackType'),
+    title: '告警流水号',
-    dataIndex: 'accountId',
+    dataIndex: 'alarmSeq',
     align: 'center',
   },
   {
-    title: t('views.traceManage.task.startTime'),
+    title: '告警编号',
-    dataIndex: 'startTime',
+    dataIndex: 'alarmCode',
+    align: 'center',
+  },
+  {
+    title: '原始告警级别',
+    dataIndex: 'alarmStatus',
+    key: 'alarmStatus',
+    align: 'center',
+  },
+  {
+    title: '告警产生时间',
+    dataIndex: 'eventTime',
     align: 'center',
     customRender(opt) {
       if (!opt.value) return '';
@@ -118,19 +128,14 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: t('views.traceManage.task.endTime'),
+    title: '记录时间',
-    dataIndex: 'endTime',
+    dataIndex: 'logTime',
     align: 'center',
     customRender(opt) {
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
   },
-  {
-    title: t('common.operate'),
-    key: 'id',
-    align: 'center',
-  },
 ];
 
 /**表格分页器参数 */
@@ -166,47 +171,15 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
-/**
+/**查询备份信息列表 */
- * 备份信息删除
- * @param row 记录编号ID
- */
-function fnRecordDelete(id: string) {
-  Modal.confirm({
-    title: t('views.traceManage.task.tipTitle'),
-    content: t('views.traceManage.task.delTaskTip', { num: id }),
-    onOk() {
-      const key = 'delTraceTask';
-      message.loading({ content: t('common.loading'), key });
-      delTraceTask(id).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('views.traceManage.task.delTask', { num: id }),
-            key,
-            duration: 2,
-          });
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**查询信息列表 */
 function fnGetList() {
   if (tableState.loading) return;
   tableState.loading = true;
-  listTraceTask(toRaw(queryParams)).then(res => {
+  queryParams.beginTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+  listAlarm(toRaw(queryParams)).then(res => {
+    console.log(res);
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
       tablePagination.total = res.total;
       tableState.data = res.rows;
     }
@@ -214,310 +187,17 @@ function fnGetList() {
   });
 }
 
-/**对话框对象信息状态类型 */
-type ModalStateType = {
-  /**详情框是否显示 */
-  visibleByView: boolean;
-  /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**网元类型设备对象 */
-  neType: string[];
-  /**网元类型设备对象接口 */
-  neTypeInterface: Record<string, any>[];
-  /**网元类型设备对象接口选择 */
-  neTypeInterfaceSelect: string[];
-  /**任务开始结束时间 */
-  timeRangePicker: [string, string];
-  /**表单数据 */
-  from: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**对话框对象信息状态 */
-let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  title: '',
-  neType: [],
-  neTypeInterface: [],
-  neTypeInterfaceSelect: [],
-  timeRangePicker: ['', ''],
-  from: {
-    id: '',
-    neType: '',
-    neId: '',
-    traceType: 'Device',
-    startTime: '',
-    endTime: '',
-    comment: '',
-    // 跟踪类型用户
-    imsi: '',
-    msisdn: '',
-    // 跟踪类型接口
-    srcIp: '',
-    dstIp: '',
-    interfaces: '',
-    signalPort: '',
-  },
-  confirmLoading: false,
-});
-
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    traceType: [
-      {
-        required: true,
-        message: t('views.traceManage.task.trackTypePlease'),
-      },
-    ],
-    neId: [
-      {
-        required: true,
-        message: t('views.traceManage.task.neTypePlease'),
-      },
-    ],
-    endTime: [
-      {
-        required: true,
-        message: t('views.traceManage.task.rangePickerPlease'),
-      },
-    ],
-    // 跟踪用户
-    imsi: [
-      {
-        required: true,
-        message: t('views.traceManage.task.imsiPlease'),
-      },
-    ],
-    msisdn: [
-      {
-        required: true,
-        message: t('views.traceManage.task.msisdnPlease'),
-      },
-    ],
-    // 跟踪接口
-    srcIp: [
-      {
-        required: true,
-        pattern: regExpIPv4,
-        message: t('views.traceManage.task.srcIpPlease'),
-      },
-    ],
-    dstIp: [
-      {
-        required: true,
-        pattern: regExpIPv4,
-        message: t('views.traceManage.task.dstIpPlease'),
-      },
-    ],
-    interfaces: [
-      {
-        required: true,
-        message: t('views.traceManage.task.interfacesPlease'),
-      },
-    ],
-    signalPort: [
-      {
-        required: true,
-        pattern: regExpPort,
-        message: t('views.traceManage.task.signalPortPlease'),
-      },
-    ],
-  })
-);
-
-/**网元类型选择对应修改 */
-function fnNeChange(_: any, item: any) {
-  modalState.from.neType = item[1].neType;
-  modalState.from.neId = item[1].neId;
-
-  modalState.from.interfaces = '';
-  modalState.neTypeInterfaceSelect = [];
-  if (modalState.from.traceType !== 'Interface') return;
-  // 网元信令接口
-  fnSelectInterfaceInit(item[1].neType);
-}
-
-/**开始结束时间选择对应修改 */
-function fnRangePickerChange(_: any, item: any) {
-  modalState.from.startTime = item[0];
-  modalState.from.endTime = item[1];
-}
-
-/**信令接口选择对应修改 */
-function fnSelectInterface(s: any, _: any) {
-  modalState.from.interfaces = s.join(',');
-}
-
-/**信令接口选择初始 */
-function fnSelectInterfaceInit(neType: string) {
-  const interfaces = useNeInfoStore().traceInterfaceList;
-  modalState.neTypeInterface = interfaces
-    .filter(i => i.neType === neType)
-    .map(i => {
-      return {
-        value: i.interface,
-        label: i.interface,
-      };
-    });
-}
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
- */
-function fnModalVisibleByVive(id: string) {
-  if (modalState.confirmLoading) return;
-  const hide = message.loading(t('common.loading'), 0);
-  modalState.confirmLoading = true;
-  getTraceTask(id).then(res => {
-    modalState.confirmLoading = false;
-    hide();
-    if (res.code === RESULT_CODE_SUCCESS) {
-      modalState.neType = [res.data.neType, res.data.neId];
-      modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
-      modalState.from = Object.assign(modalState.from, res.data);
-      // 接口
-      if (res.data.traceType === 'Interface') {
-        if (
-          res.data.interfaces.length > 4 &&
-          res.data.interfaces.includes('[')
-        ) {
-          modalState.neTypeInterfaceSelect = JSON.parse(res.data.interfaces);
-        }
-        fnSelectInterfaceInit(res.data.neType);
-      }
-      modalState.title = t('views.traceManage.task.viewTask');
-      modalState.visibleByView = true;
-    } else {
-      message.error(t('views.traceManage.task.errorTaskInfo'), 3);
-    }
-  });
-}
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
- */
-function fnModalVisibleByEdit(id?: string) {
-  if (!id) {
-    modalStateFrom.resetFields();
-    modalState.title = t('views.traceManage.task.addTask');
-    modalState.visibleByEdit = true;
-  } else {
-    if (modalState.confirmLoading) return;
-    const hide = message.loading(t('common.loading'), 0);
-    modalState.confirmLoading = true;
-    getTraceTask(id).then(res => {
-      modalState.confirmLoading = false;
-      hide();
-      if (res.code === RESULT_CODE_SUCCESS && res.data) {
-        modalState.neType = [res.data.neType, res.data.neId];
-        modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
-        modalState.from = Object.assign(modalState.from, res.data);
-        // 接口
-        if (res.data.traceType === 'Interface') {
-          if (
-            res.data.interfaces.length > 4 &&
-            res.data.interfaces.includes('[')
-          ) {
-            modalState.neTypeInterfaceSelect = JSON.parse(res.data.interfaces);
-          }
-          fnSelectInterfaceInit(res.data.neType);
-        }
-        modalState.title = t('views.traceManage.task.editTask');
-        modalState.visibleByEdit = true;
-      } else {
-        message.error(t('views.traceManage.task.errorTaskInfo'), 3);
-      }
-    });
-  }
-}
-
-/**
- * 对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnModalOk() {
-  const from = toRaw(modalState.from);
-  let valids = ['traceType', 'neId', 'endTime'];
-  if (from.traceType === 'UE') {
-    valids = valids.concat(['imsi', 'msisdn']);
-  }
-  if (from.traceType === 'Interface') {
-    valids = valids.concat(['srcIp', 'dstIp', 'interfaces', 'signalPort']);
-  }
-  from.accountId = useUserStore().userName;
-  modalStateFrom
-    .validate(valids)
-    .then(e => {
-      modalState.confirmLoading = true;
-      const traceTask = from.id ? updateTraceTask(from) : addTraceTask(from);
-      const hide = message.loading(t('common.loading'), 0);
-      traceTask
-        .then(res => {
-          console.log(res);
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: modalState.title }),
-              duration: 3,
-            });
-            modalState.visibleByEdit = false;
-            modalStateFrom.resetFields();
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          hide();
-          modalState.confirmLoading = false;
-          fnGetList();
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.visibleByView = false;
-  modalState.visibleByEdit = false;
-  modalState.confirmLoading = false;
-  modalStateFrom.resetFields();
-  modalState.timeRangePicker = ['', ''];
-  modalState.neTypeInterfaceSelect = [];
-  modalState.neType = [];
-  modalState.neTypeInterface = [];
-}
-
 onMounted(() => {
   // 初始字典数据
-  Promise.allSettled([getDict('trace_type')]).then(resArr => {
+  Promise.allSettled([getDict('alarm_status')]).then(resArr => {
     if (resArr[0].status === 'fulfilled') {
-      dict.traceType = resArr[0].value;
+      dict.alarmStatus = resArr[0].value;
     }
   });
-  Promise.allSettled([
+  // 获取网元网元列表
-    // 获取网元网元列表
+  useNeInfoStore().fnNelist();
-    useNeInfoStore().fnNelist(),
+  // 获取列表数据
-    // 获取跟踪接口列表
+  fnGetList();
-    useNeInfoStore().fnNeTraceInterface(),
-  ]).finally(() => {
-    // 获取列表数据
-    fnGetList();
-  });
 });
 </script>
 
@@ -532,15 +212,41 @@ 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.traceManage.task.neType')" name="neType ">
+            <a-form-item label="网元类型" name="accountName">
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="useNeInfoStore().getNeSelectOtions"
                 allow-clear
-                :placeholder="t('views.traceManage.task.neTypePlease')"
+                placeholder="查询网元类型"
               />
             </a-form-item>
           </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="告警状态" name="status">
+              <a-select
+                v-model:value="queryParams.status"
+                allow-clear
+                placeholder="请选择告警状态"
+                :options="dict.alarmStatus"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item label="记录时间" name="queryRangePicker">
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                show-time
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+                :placeholder="['记录开始', '记录结束']"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item>
               <a-space :size="8">
@@ -561,17 +267,12 @@ onMounted(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
-      <template #title>
+      <template #title> </template>
-        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-          <template #icon><PlusOutlined /></template>
-          {{ t('common.addText') }}
-        </a-button>
-      </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center">
-          <a-tooltip placement="topRight">
+          <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
               v-model:checked="tableState.seached"
@@ -580,13 +281,13 @@ onMounted(() => {
               size="small"
             />
           </a-tooltip>
-          <a-tooltip placement="topRight">
+          <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 placement="topRight">
+          <a-tooltip>
             <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown trigger="click" placement="bottomRight">
               <a-button type="text">
@@ -597,15 +298,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>
@@ -625,333 +326,12 @@ onMounted(() => {
         :scroll="{ x: true }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'traceType'">
+          <template v-if="column.key === 'alarmStatus'">
-            <DictTag :options="dict.traceType" :value="record.traceType" />
+            <DictTag :options="dict.alarmStatus" :value="record.alarmStatus" />
-          </template>
-          <template v-if="column.key === 'id'">
-            <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByVive(record.id)"
-                >
-                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.editText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByEdit(record.id)"
-                >
-                  <template #icon><FormOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.deleteText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnRecordDelete(record.id)"
-                >
-                  <template #icon><DeleteOutlined /></template>
-                </a-button>
-              </a-tooltip>
-            </a-space>
           </template>
         </template>
       </a-table>
     </a-card>
-
-    <!-- 详情框 -->
-    <a-modal
-      width="800px"
-      :visible="modalState.visibleByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-    >
-      <a-form layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.trackType')"
-              name="traceType"
-            >
-              <DictTag
-                :options="dict.traceType"
-                :value="modalState.from.traceType"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.traceManage.task.neType')" name="neType">
-              <a-cascader
-                :value="modalState.neType"
-                :options="useNeInfoStore().getNeCascaderOtions"
-                disabled
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <!-- 用户跟踪 -->
-        <template v-if="modalState.from.traceType === 'UE'">
-          <a-form-item :label="t('views.traceManage.task.msisdn')" name="msisdn">
-            {{ modalState.from.msisdn }}
-          </a-form-item>
-          <a-form-item :label="t('views.traceManage.task.imsi')" name="imsi">
-            {{ modalState.from.imsi }}
-          </a-form-item>
-        </template>
-
-        <!-- 接口跟踪 -->
-        <template v-if="modalState.from.traceType === 'Interface'">
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.traceManage.task.srcIp')" name="srcIp">
-                {{ modalState.from.srcIp }}
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.traceManage.task.dstIp')" name="dstIp">
-                {{ modalState.from.dstIp }}
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-form-item :label="t('views.traceManage.task.interfaces')" name="endTime">
-            {{ modalState.neTypeInterfaceSelect }}
-          </a-form-item>
-          <a-form-item :label="t('views.traceManage.task.signalPort')" name="endTime">
-            {{ modalState.from.signalPort }}
-          </a-form-item>
-        </template>
-
-        <a-form-item :label="t('views.traceManage.task.rangePicker')" name="endTime">
-          <a-range-picker
-            disabled
-            :value="modalState.timeRangePicker"
-            allow-clear
-            bordered
-            :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            style="width: 100%"
-          ></a-range-picker>
-        </a-form-item>
-        <a-form-item :label="t('views.traceManage.task.comment')" name="comment">
-          {{ modalState.from.comment }}
-        </a-form-item>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">{{
-          t('common.close')
-        }}</a-button>
-      </template>
-    </a-modal>
-
-    <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form name="modalStateFrom" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.trackType')"
-              name="traceType"
-              v-bind="modalStateFrom.validateInfos.traceType"
-            >
-              <a-select
-                v-model:value="modalState.from.traceType"
-                :placeholder="t('views.traceManage.task.trackTypePlease')"
-                :options="dict.traceType"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.neType')"
-              name="neType"
-              v-bind="modalStateFrom.validateInfos.neId"
-            >
-              <a-cascader
-                v-model:value="modalState.neType"
-                :options="useNeInfoStore().getNeCascaderOtions"
-                @change="fnNeChange"
-                :allow-clear="false"
-                :placeholder="t('views.traceManage.task.neTypePlease')"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <!-- 用户跟踪 -->
-        <template v-if="modalState.from.traceType === 'UE'">
-          <a-form-item
-            :label="t('views.traceManage.task.msisdn')"
-            name="msisdn"
-            v-bind="modalStateFrom.validateInfos.msisdn"
-          >
-            <a-input
-              v-model:value="modalState.from.msisdn"
-              allow-clear
-              :placeholder="t('views.traceManage.task.msisdnPlease')"
-            >
-              <template #prefix>
-                <a-tooltip placement="topLeft">
-                  <template #title>
-                    <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
-                  </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                </a-tooltip>
-              </template>
-            </a-input>
-          </a-form-item>
-          <a-form-item
-            :label="t('views.traceManage.task.imsi')"
-            name="imsi"
-            v-bind="modalStateFrom.validateInfos.imsi"
-          >
-            <a-input
-              v-model:value="modalState.from.imsi"
-              allow-clear
-              :placeholder="t('views.traceManage.task.imsiPlease')"
-            >
-              <template #prefix>
-                <a-tooltip placement="topLeft">
-                  <template #title>
-                    <div>{{ t('views.traceManage.task.imsiTip') }}</div>
-                  </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                </a-tooltip>
-              </template>
-            </a-input>
-          </a-form-item>
-        </template>
-
-        <!-- 接口跟踪 -->
-        <template v-if="modalState.from.traceType === 'Interface'">
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.traceManage.task.srcIp')"
-                name="srcIp"
-                v-bind="modalStateFrom.validateInfos.srcIp"
-              >
-                <a-input
-                  v-model:value="modalState.from.srcIp"
-                  allow-clear
-                  placeholder="t('views.traceManage.task.srcIpPlease')"
-                >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        <div>{{ t('views.traceManage.task.srcIpTip') }}</div>
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.traceManage.task.dstIp')"
-                name="dstIp"
-                v-bind="modalStateFrom.validateInfos.dstIp"
-              >
-                <a-input
-                  v-model:value="modalState.from.dstIp"
-                  allow-clear
-                  :placeholder="t('views.traceManage.task.dstIpPlease')"
-                >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        <div>{{ t('views.traceManage.task.dstIpTip') }}</div>
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-form-item
-            :label="t('views.traceManage.task.interfaces')"
-            name="interfaces"
-            v-bind="modalStateFrom.validateInfos.interfaces"
-          >
-            <a-select
-              mode="multiple"
-              placeholder="Please select"
-              v-model:value="modalState.neTypeInterfaceSelect"
-              :options="modalState.neTypeInterface"
-              @change="fnSelectInterface"
-            >
-            </a-select>
-          </a-form-item>
-          <a-form-item
-            :label="t('views.traceManage.task.signalPort')"
-            name="signalPort"
-            v-bind="modalStateFrom.validateInfos.signalPort"
-          >
-            <a-input
-              v-model:value="modalState.from.signalPort"
-              allow-clear
-              :placeholder="t('views.traceManage.task.signalPortPlease')"
-            >
-              <template #prefix>
-                <a-tooltip placement="topLeft">
-                  <template #title>
-                    <div>t('views.traceManage.task.signalPortTip')</div>
-                  </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                </a-tooltip>
-              </template>
-            </a-input>
-          </a-form-item>
-        </template>
-
-        <a-form-item
-          :label="t('views.traceManage.task.rangePicker')"
-          name="endTime"
-          v-bind="modalStateFrom.validateInfos.endTime"
-        >
-          <a-range-picker
-            v-model:value="modalState.timeRangePicker"
-            @change="fnRangePickerChange"
-            allow-clear
-            bordered
-            :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            :placeholder="[
-              t('views.traceManage.task.startTime'),
-              t('views.traceManage.task.endTime'),
-            ]"
-            style="width: 100%"
-          ></a-range-picker>
-        </a-form-item>
-        <a-form-item :label="t('views.traceManage.task.comment')" name="comment">
-          <a-textarea
-            v-model:value="modalState.from.comment"
-            :auto-size="{ minRows: 2, maxRows: 6 }"
-            :maxlength="250"
-            :show-count="true"
-            :placeholder="t('views.traceManage.task.commentPlease')"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
   </PageContainer>
 </template>