perf: 重构跟踪任务

src/api/trace/task.ts

@@ -0,0 +1,89 @@
+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 listTraceTask(query: Record<string, any>) {
+  return request({
+    url: '/trace/task/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 查询跟踪任务信息
+ * @param id 网元ID
+ * @returns object
+ */
+export async function getTraceTask(id: string | number) {
+  return request({
+    url: `/trace/task/${id}`,
+    method: 'get',
+  });
+}
+
+/**
+ * 新增任务
+ * @param data 网元对象
+ * @returns object
+ */
+export function addTraceTask(data: Record<string, any>) {
+  return request({
+    url: `/trace/task`,
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 修改任务
+ * @param data 网元对象
+ * @returns object
+ */
+export function updateTraceTask(data: Record<string, any>) {
+  return request({
+    url: `/trace/task`,
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 跟踪任务删除
+ * @param ids ID多个逗号分隔
+ * @returns object
+ */
+export async function delTraceTask(ids: string) {
+  return request({
+    url: `/trace/task/${ids}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 获取网元跟踪接口列表
+ * @returns object
+ */
+export async function getNeTraceInterfaceAll() {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/ne_info`,
+    method: 'get',
+    params: {
+      SQL: `SELECT ne_type,interface FROM trace_info GROUP BY ne_type,interface`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    return Object.assign(result, {
+      data: parseObjLineToHump(data['trace_info']),
+    });
+  }
+  return result;
+}

src/api/traceManage/task.ts

@@ -1,154 +0,0 @@
-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 listTraceTask(query: Record<string, any>) {
-  let totalSQL = 'select count(*) as total from trace_task where 1=1 ';
-  let rowsSQL = 'select * from trace_task where 1=1 ';
-
-  // 查询
-  let querySQL = '';
-  if (query.imsi) {
-    querySQL += ` and imsi like '%${query.imsi}%' `;
-  }
-  if (query.beginTime) {
-    querySQL += ` and start_time >= '${query.beginTime}' `;
-  }
-  if (query.endTime) {
-    querySQL += ` and end_time <= '${query.endTime}' `;
-  }
-
-  // 分页
-  const pageNum = (query.pageNum - 1) * query.pageSize;
-  const limtSql = ` limit ${pageNum},${query.pageSize} `;
-
-  // 排序
-  let sortSql = ' order by start_time ';
-  if (query.sortOrder === 'asc') {
-    sortSql += ' asc ';
-  } else {
-    sortSql += ' desc ';
-  }
-
-  // 发起请求
-  const result = await request({
-    url: `/api/rest/databaseManagement/v1/select/omc_db/trace_task`,
-    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['trace_task'];
-      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 id 网元ID
- * @returns object
- */
-export async function getTraceTask(id: string | number) {
-  // 发起请求
-  const result = await request({
-    url: `/api/rest/databaseManagement/v1/select/omc_db/trace_task`,
-    method: 'get',
-    params: {
-      SQL: `select * from trace_task where id = ${id}`,
-    },
-  });
-  // 解析数据
-  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
-    let data = result.data.data[0];
-    return Object.assign(result, {
-      data: parseObjLineToHump(data['trace_task'][0]),
-    });
-  }
-  return result;
-}
-
-/**
- * 新增任务
- * @param data 网元对象
- * @returns object
- */
-export function addTraceTask(data: Record<string, any>) {
-  return request({
-    url: `/api/rest/traceManagement/v1/subscriptions`,
-    method: 'post',
-    data: data,
-  });
-}
-
-/**
- * 修改任务
- * @param data 网元对象
- * @returns object
- */
-export function updateTraceTask(data: Record<string, any>) {
-  return request({
-    url: `/api/rest/traceManagement/v1/subscriptions`,
-    method: 'put',
-    data: data,
-  });
-}
-
-/**
- * 删除任务
- * @param noticeId 网元ID
- * @returns object
- */
-export async function delTraceTask(id: string) {
-  return request({
-    url: `/api/rest/traceManagement/v1/subscriptions?id=${id}`,
-    method: 'delete',
-  });
-}
-
-/**
- * 获取网元跟踪接口列表
- * @returns object
- */
-export async function getNeTraceInterfaceAll() {
-  // 发起请求
-  const result = await request({
-    url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/ne_info`,
-    method: 'get',
-    params: {
-      SQL: `SELECT ne_type,interface FROM trace_info GROUP BY ne_type,interface`,
-    },
-  });
-  // 解析数据
-  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
-    let data = result.data.data[0];
-    return Object.assign(result, {
-      data: parseObjLineToHump(data['trace_info']),
-    });
-  }
-  return result;
-}

src/i18n/locales/en-US.ts

@@ -149,6 +149,7 @@ export default {
     page403: 'No Access',
     page404: 'Match Page Not Found',
     helpDoc: 'System User Documentation',
+    traceTaskHLR: 'Tracking Tasks HLR',
     lockScreen: 'Lock Screen',
     account: {
       index: "Personal Center",
@@ -1143,25 +1144,24 @@ export default {
         imsiPlease: 'Please enter IMSI',
         imsiTip: 'Mobile communication IMSI number',
         srcIp: 'Source IP Address',
-        srcIpPlease: 'Please enter the source IP address',
+        srcIpPlease: 'Please enter the IP address',
         srcIpTip: 'Current sender IPv4 address',
         dstIp: 'Destination IP Address',
-        dstIpPlease: 'Please enter the destination IP address',
+        dstIpPlease: 'Please enter the IP address',
         dstIpTip: 'IPv4 address of the receiving end of the other party',
         interfaces: 'Signaling Interface',
         interfacesPlease: 'Please enter the signaling interface',
         signalPort: 'Signal Port',
         signalPortPlease: 'Please enter the signaling port',
-        signalPortTip: 'Port corresponding to the interface',
+        signalPortTip: 'Port of the side corresponding to the destination IP address or source IP address',
         rangePicker: 'Start/End Time',
         rangePickerPlease: 'Please select the start and end time of the task',
-        remark: 'Task Description',
+        remark: 'Remark',
         remarkPlease: 'Task description can be entered',
         addTask: 'Add Task',
         editTask: 'Modify Task',
         viewTask: 'View Task',
         errorTaskInfo: 'Failed to obtain task information',
-        delTask: 'Successfully deleted task {id}',
         delTaskTip: 'Are you sure to delete the data item with record ID {id} ?',
         stopTask: 'Successful cessation of tasks {id}',
         stopTaskTip: 'Confirm stopping the task with record ID {id} ?',

src/i18n/locales/zh-CN.ts

@@ -149,6 +149,7 @@ export default {
     page403: '没有访问权限',
     page404: '找不到匹配页面',
     helpDoc: '系统使用文档',
+    traceTaskHLR: '跟踪任务 HLR',
     lockScreen: '锁屏',
     account: {
       index: "个人中心",
@@ -1152,16 +1153,15 @@ export default {
         interfacesPlease: '请输入信令接口',
         signalPort: '信令端口',
         signalPortPlease: '请输入信令端口',
-        signalPortTip: '接口对应的端口',
+        signalPortTip: '目标IP地址或源IP地址对应一方的端口',
         rangePicker: '开始结束时间',
         rangePickerPlease: '请选择任务时间开始结束时间',
-        remark: '任务说明',
+        remark: '说明',
         remarkPlease: '可输入任务说明',
         addTask: '添加任务',
         editTask: '修改任务',
         viewTask: '查看任务',
         errorTaskInfo: '获取任务信息失败',
-        delTask: '成功删除任务 {id}',
         delTaskTip: '确认删除记录编号为 {id} 的数据项?',
         stopTask: '成功停止任务 {id}',
         stopTaskTip: '确认停止记录编号为 {id} 的任务?',

src/views/perfManage/perfReport/index.vue

@@ -9,7 +9,7 @@ import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { saveAs } from 'file-saver';
 import useI18n from '@/hooks/useI18n';
-import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
+import { getTraceRawInfo, listTraceData } from '@/api/trace/analysis';
 const { t } = useI18n();
 
 /**查询参数 */

src/views/perfManage/perfSet/index.vue

@@ -9,7 +9,7 @@ import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { saveAs } from 'file-saver';
 import useI18n from '@/hooks/useI18n';
-import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
+import { getTraceRawInfo, listTraceData } from '@/api/trace/analysis';
 const { t } = useI18n();
 
 /**查询参数 */

src/views/traceManage/analysis/index.vue

@@ -9,7 +9,7 @@ import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { saveAs } from 'file-saver';
 import useI18n from '@/hooks/useI18n';
-import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
+import { getTraceRawInfo, listTraceData } from '@/api/trace/analysis';
 const { t } = useI18n();
 
 /**查询参数 */

src/views/traceManage/pcap/index.vue

@@ -9,7 +9,7 @@ import {
   dumpStop,
   dumpDownload,
   traceUPF,
-} from '@/api/traceManage/pcap';
+} from '@/api/trace/pcap';
 import { listAllNeInfo } from '@/api/ne/neInfo';
 import { getNeFile } from '@/api/tool/neFile';
 import saveAs from 'file-saver';

src/views/traceManage/task/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { Form, message, Modal } from 'ant-design-vue/lib';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
@@ -8,7 +8,6 @@ import { ColumnsType } from 'ant-design-vue/lib/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
-import useUserStore from '@/store/modules/user';
 import useNeInfoStore from '@/store/modules/neinfo';
 import {
   addTraceTask,
@@ -16,9 +15,11 @@ import {
   getTraceTask,
   listTraceTask,
   updateTraceTask,
-} from '@/api/traceManage/task';
+} from '@/api/trace/task';
 import useDictStore from '@/store/modules/dict';
 import { regExpIPv4, regExpPort } from '@/utils/regular-utils';
+import dayjs, { Dayjs } from 'dayjs';
+import { parseObjHumpToLine } from '@/utils/parse-utils';
 const neInfoStore = useNeInfoStore();
 const { getDict } = useDictStore();
 const { t } = useI18n();
@@ -31,15 +32,18 @@ let dict: {
   traceType: [],
 });
 
+/**网元类型_多neId */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+
 /**查询参数 */
 let queryParams = reactive({
   /**网元类型 */
   neType: '',
   /**记录时间 */
-  beginTime: '',
+  startTime: '',
   endTime: '',
   /**排序字段 */
-  sortField: 'startTime',
+  sortField: 'start_time',
   /**排序方式 */
   sortOrder: 'asc',
   /**当前页数 */
@@ -52,9 +56,9 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     neType: '',
-    beginTime: '',
+    startTime: '',
     endTime: '',
-    sortField: 'startTime',
+    sortField: 'start_time',
     sortOrder: 'asc',
     pageNum: 1,
     pageSize: 20,
@@ -114,11 +118,6 @@ let tableColumns: ColumnsType = [
     key: 'traceType',
     align: 'center',
   },
-  {
-    title: t('views.traceManage.task.creater'),
-    dataIndex: 'accountId',
-    align: 'center',
-  },
   {
     title: t('views.traceManage.task.startTime'),
     dataIndex: 'startTime',
@@ -178,11 +177,16 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
 function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
   const { field, order } = sorter;
   if (order) {
-    queryParams.sortField = field;
+    queryParams.sortField = parseObjHumpToLine(field);
     queryParams.sortOrder = order.replace('end', '');
   } else {
     queryParams.sortOrder = 'asc';
@@ -191,32 +195,40 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
 }
 
 /**
- * 备份信息删除
+ * 记录删除
- * @param row 记录编号ID
+ * @param id  编号
  */
 function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = t('views.traceManage.task.delTaskTip', { id: id });
+  if (id === '0') {
+    const mun = `...${tableState.selectedRowKeys.length}`;
+    msg = `${t('views.traceManage.task.delTaskTip', { id: mun })} `;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.traceManage.task.delTaskTip', { num: id }),
+    content: msg,
     onOk() {
-      const key = 'delTraceTask';
+      modalState.confirmLoading = true;
-      message.loading({ content: t('common.loading'), key });
+      const hide = message.loading(t('common.loading'), 0);
-      delTraceTask(id).then(res => {
+      delTraceTask(id)
-        if (res.code === RESULT_CODE_SUCCESS) {
+        .then(res => {
-          message.success({
+          if (res.code === RESULT_CODE_SUCCESS) {
-            content: t('views.traceManage.task.delTask', { num: id }),
+            message.success(t('common.operateOk'), 3);
-            key,
+            fnGetList();
-            duration: 2,
+          } else {
-          });
+            message.error({
-          fnGetList();
+              content: `${res.msg}`,
-        } else {
+              duration: 3,
-          message.error({
+            });
-            content: `${res.msg}`,
+          }
-            key: key,
+        })
-            duration: 2,
+        .finally(() => {
-          });
+          hide();
-        }
+          modalState.confirmLoading = false;
-      });
+        });
     },
   });
 }
@@ -251,8 +263,6 @@ function fnGetList(pageNum?: number) {
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**详情框是否显示 */
-  visibleByView: boolean;
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
   /**标题 */
@@ -266,7 +276,25 @@ type ModalStateType = {
   /**任务开始结束时间 */
   timeRangePicker: [string, string];
   /**表单数据 */
-  from: Record<string, any>;
+  from: {
+    id?: string;
+    neType: string;
+    neId: string;
+    /**1-Interface,2-Device,3-User */
+    traceType: string;
+    startTime?: number;
+    endTime?: number;
+    remark?: string;
+    /**1接口跟踪 */
+    interfaces?: string;
+    /**2设备跟踪 */
+    srcIp?: string;
+    dstIp?: string;
+    signalPort?: number;
+    /**3用户跟踪 */
+    imsi?: string;
+    msisdn?: string;
+  };
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -284,18 +312,19 @@ let modalState: ModalStateType = reactive({
     id: '',
     neType: '',
     neId: '',
-    traceType: 'Device',
+    traceType: '3',
-    startTime: '',
+    startTime: undefined,
-    endTime: '',
+    endTime: undefined,
-    comment: '',
+    remark: '',
-    // 跟踪类型用户
+    /**1接口跟踪 */
-    imsi: '',
+    interfaces: '',
-    msisdn: '',
+    /**2设备跟踪 */
-    // 跟踪类型接口
     srcIp: '',
     dstIp: '',
-    interfaces: '',
+    signalPort: undefined,
-    signalPort: '',
+    /**3用户跟踪 */
+    imsi: '',
+    msisdn: '',
   },
   confirmLoading: false,
 });
@@ -322,7 +351,7 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.rangePickerPlease'),
       },
     ],
-    // 跟踪用户
+    // 用户跟踪
     imsi: [
       {
         required: true,
@@ -331,11 +360,18 @@ const modalStateFrom = Form.useForm(
     ],
     msisdn: [
       {
-        required: true,
+        required: false,
         message: t('views.traceManage.task.msisdnPlease'),
       },
     ],
-    // 跟踪接口
+    // 接口跟踪
+    interfaces: [
+      {
+        required: true,
+        message: t('views.traceManage.task.interfacesPlease'),
+      },
+    ],
+    // 数据跟踪
     srcIp: [
       {
         required: true,
@@ -350,15 +386,9 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.dstIpPlease'),
       },
     ],
-    interfaces: [
-      {
-        required: true,
-        message: t('views.traceManage.task.interfacesPlease'),
-      },
-    ],
     signalPort: [
       {
-        required: true,
+        required: false,
         pattern: regExpPort,
         message: t('views.traceManage.task.signalPortPlease'),
       },
@@ -370,18 +400,29 @@ const modalStateFrom = Form.useForm(
 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 fnTraceTypeChange(v: any, _: any) {
+  // 网元信令接口可选列表
+  if (v === '1' && modalState.from.neType) {
+    modalState.from.interfaces = '';
+    modalState.neTypeInterfaceSelect = [];
+    fnSelectInterfaceInit(modalState.from.neType);
+  }
+}
+
 /**开始结束时间选择对应修改 */
-function fnRangePickerChange(_: any, item: any) {
+function fnRangePickerChange(item: any, _: any) {
-  modalState.from.startTime = item[0];
+  modalState.from.startTime = +item[0];
-  modalState.from.endTime = item[1];
+  modalState.from.endTime = +item[1];
+}
+function fnRangePickerDisabledDate(current: Dayjs) {
+  return current && current < dayjs().subtract(1, 'day').endOf('day');
 }
 
 /**信令接口选择对应修改 */
@@ -402,39 +443,6 @@ function fnSelectInterfaceInit(neType: string) {
     });
 }
 
-/**
- * 对话框弹出显示为 新增或者修改
- * @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, 不传为新增
@@ -481,13 +489,16 @@ function fnModalVisibleByEdit(id?: string) {
 function fnModalOk() {
   const from = toRaw(modalState.from);
   let valids = ['traceType', 'neId', 'endTime'];
-  if (from.traceType === 'UE') {
+  if (from.traceType === '1') {
+    valids = valids.concat(['interfaces']);
+  }
+  if (from.traceType === '2') {
+    valids = valids.concat(['srcIp', 'dstIp', 'signalPort']);
+  }
+  if (from.traceType === '3') {
     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 => {
@@ -525,7 +536,6 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
   modalState.visibleByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
@@ -542,15 +552,40 @@ onMounted(() => {
       dict.traceType = resArr[0].value;
     }
   });
-  Promise.allSettled([
+
-    // 获取网元网元列表
+  // 获取网元网元列表
-    neInfoStore.fnNelist(),
+  useNeInfoStore()
-    // 获取跟踪接口列表
+    .fnNelist()
-    neInfoStore.fnNeTraceInterface(),
+    .then(res => {
-  ]).finally(() => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-    // 获取列表数据
+        if (res.data.length > 0) {
-    fnGetList();
+          // 过滤不可用的网元
-  });
+          neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
+            (item: any) => {
+              return ['UDM'].includes(item.value);
+            }
+          );
+          if (neCascaderOptions.value.length === 0) {
+            message.warning({
+              content: t('common.noData'),
+              duration: 2,
+            });
+            return;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取跟踪接口列表
+      neInfoStore.fnNeTraceInterface();
+      // 获取列表数据
+      fnGetList();
+    });
 });
 </script>
 
@@ -571,7 +606,7 @@ onMounted(() => {
             >
               <a-auto-complete
                 v-model:value="queryParams.neType"
-                :options="neInfoStore.getNeSelectOtions"
+                :options="neCascaderOptions"
                 allow-clear
                 :placeholder="t('views.traceManage.task.neTypePlease')"
               />
@@ -580,13 +615,13 @@ onMounted(() => {
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.traceManage.task.startTime')"
-              name="beginTime"
+              name="startTime"
             >
               <a-date-picker
                 show-time
-                v-model:value="queryParams.beginTime"
+                v-model:value="queryParams.startTime"
-                value-format="YYYY-MM-DD HH:mm:ss"
                 format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
                 :placeholder="t('views.traceManage.task.startTime')"
                 style="width: 100%"
               />
@@ -600,8 +635,8 @@ onMounted(() => {
               <a-date-picker
                 show-time
                 v-model:value="queryParams.endTime"
-                value-format="YYYY-MM-DD HH:mm:ss"
                 format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
                 :placeholder="t('views.traceManage.task.endTime')"
                 style="width: 100%"
               />
@@ -628,10 +663,23 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+        <a-space :size="8" align="center">
-          <template #icon><PlusOutlined /></template>
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-          {{ t('common.addText') }}
+            <template #icon><PlusOutlined /></template>
-        </a-button>
+            {{ t('common.addText') }}
+          </a-button>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -690,6 +738,12 @@ onMounted(() => {
         :pagination="tablePagination"
         :scroll="{ x: true }"
         @change="fnTableChange"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'traceType'">
@@ -697,15 +751,6 @@ onMounted(() => {
           </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
@@ -719,6 +764,7 @@ onMounted(() => {
                 <template #title>{{ t('common.deleteText') }}</template>
                 <a-button
                   type="link"
+                  danger
                   @click.prevent="fnRecordDelete(record.id)"
                 >
                   <template #icon><DeleteOutlined /></template>
@@ -730,117 +776,6 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 详情框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :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="neInfoStore.getNeCascaderOptions"
-                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.remark')"
-          name="comment"
-        >
-          {{ modalState.from.comment }}
-        </a-form-item>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">{{
-          t('common.close')
-        }}</a-button>
-      </template>
-    </ProModal>
-
     <!-- 新增框或修改框 -->
     <ProModal
       :drag="true"
@@ -854,89 +789,124 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 4 }"
+        :label-wrap="true"
+      >
         <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')"
+              :label-col="{ span: 8 }"
               name="neType"
               v-bind="modalStateFrom.validateInfos.neId"
             >
               <a-cascader
                 v-model:value="modalState.neType"
-                :options="neInfoStore.getNeCascaderOptions"
+                :options="neCascaderOptions"
                 @change="fnNeChange"
                 :allow-clear="false"
                 :placeholder="t('views.traceManage.task.neTypePlease')"
               />
             </a-form-item>
           </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.trackType')"
+              :label-col="{ span: 8 }"
+              name="traceType"
+              v-bind="modalStateFrom.validateInfos.traceType"
+            >
+              <a-select
+                v-model:value="modalState.from.traceType"
+                :options="dict.traceType"
+                @change="fnTraceTypeChange"
+                :allow-clear="false"
+                :placeholder="t('views.traceManage.task.trackTypePlease')"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
         </a-row>
 
-        <!-- 用户跟踪 -->
+        <a-form-item
-        <template v-if="modalState.from.traceType === 'UE'">
+          :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="x"
+            style="width: 100%"
+            :disabled-date="fnRangePickerDisabledDate"
+            :placeholder="[
+              t('views.traceManage.task.startTime'),
+              t('views.traceManage.task.endTime'),
+            ]"
+          ></a-range-picker>
+        </a-form-item>
+        <a-form-item :label="t('views.traceManage.task.remark')" name="remark">
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 1, maxRows: 6 }"
+            :maxlength="450"
+            :show-count="true"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
+          />
+        </a-form-item>
+
+        <!-- 接口跟踪 -->
+        <template v-if="modalState.from.traceType === '1'">
           <a-form-item
-            :label="t('views.traceManage.task.msisdn')"
+            :label="t('views.traceManage.task.interfaces')"
-            name="msisdn"
+            name="interfaces"
-            v-bind="modalStateFrom.validateInfos.msisdn"
+            v-bind="modalStateFrom.validateInfos.interfaces"
           >
-            <a-input
+            <a-select
-              v-model:value="modalState.from.msisdn"
+              mode="multiple"
-              allow-clear
+              :placeholder="t('views.traceManage.task.interfacesPlease')"
-              :placeholder="t('views.traceManage.task.msisdnPlease')"
+              v-model:value="modalState.neTypeInterfaceSelect"
+              :options="modalState.neTypeInterface"
+              @change="fnSelectInterface"
             >
-              <template #prefix>
+            </a-select>
-                <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'">
+        <template v-if="modalState.from.traceType === '2'">
+          <a-form-item
+            :label="t('views.traceManage.task.signalPort')"
+            name="signalPort"
+            v-bind="modalStateFrom.validateInfos.signalPort"
+          >
+            <a-input-number
+              v-model:value="modalState.from.signalPort"
+              style="width: 100%"
+              :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-number>
+          </a-form-item>
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.traceManage.task.srcIp')"
+                :label-col="{ span: 8 }"
                 name="srcIp"
                 v-bind="modalStateFrom.validateInfos.srcIp"
               >
@@ -959,6 +929,7 @@ onMounted(() => {
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.traceManage.task.dstIp')"
+                :label-col="{ span: 8 }"
                 name="dstIp"
                 v-bind="modalStateFrom.validateInfos.dstIp"
               >
@@ -979,34 +950,44 @@ onMounted(() => {
               </a-form-item>
             </a-col>
           </a-row>
+        </template>
+
+        <!-- 用户跟踪 -->
+        <template v-if="modalState.from.traceType === '3'">
           <a-form-item
-            :label="t('views.traceManage.task.interfaces')"
+            :label="t('views.traceManage.task.imsi')"
-            name="interfaces"
+            name="imsi"
-            v-bind="modalStateFrom.validateInfos.interfaces"
+            v-bind="modalStateFrom.validateInfos.imsi"
-          >
-            <a-select
-              mode="multiple"
-              :placeholder="t('views.traceManage.task.interfacesPlease')"
-              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"
+              v-model:value="modalState.from.imsi"
               allow-clear
-              :placeholder="t('views.traceManage.task.signalPortPlease')"
+              :placeholder="t('views.traceManage.task.imsiPlease')"
             >
               <template #prefix>
                 <a-tooltip placement="topLeft">
                   <template #title>
-                    <div>{{ t('views.traceManage.task.signalPortTip') }}</div>
+                    <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>
+          <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>
@@ -1014,39 +995,6 @@ onMounted(() => {
             </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.remark')"
-          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.remarkPlease')"
-          />
-        </a-form-item>
       </a-form>
     </ProModal>
   </PageContainer>