From f6c4c5ed4bcbc7817a4468fa7472265ea7a9cc04 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Wed, 18 Oct 2023 10:23:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=BB=E5=8A=A1=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86(=E5=B0=9A=E6=9C=AA=E5=AE=8C=E6=88=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/perfManage/taskManage.ts          | 140 ++++
 src/i18n/locales/en-US.ts                 |  15 +
 src/i18n/locales/zh-CN.ts                 |  15 +
 src/views/perfManage/taskManage/index.vue | 958 ++++++++++++++++------
 4 files changed, 872 insertions(+), 256 deletions(-)
 create mode 100644 src/api/perfManage/taskManage.ts

diff --git a/src/api/perfManage/taskManage.ts b/src/api/perfManage/taskManage.ts
new file mode 100644
index 00000000..6b2820ed
--- /dev/null
+++ b/src/api/perfManage/taskManage.ts
@@ -0,0 +1,140 @@
+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 listPerfTask(query: Record<string, any>) {
+  let totalSQL = 'select count(*) as total from measure_task where 1=1 ';
+  let rowsSQL = 'select * from measure_task where 1=1 ';
+
+  // 查询
+  let querySQL = '';
+  if (query.neType) {
+    querySQL += ` and ne_type like '%${query.neType}%' `;
+  }
+
+  // 分页
+  const pageNum = (query.pageNum - 1) * query.pageSize;
+  const limtSql = ` limit ${pageNum},${query.pageSize} `;
+
+  // 发起请求
+  const result = await request({
+    url: `/databaseManagement/v1/select/omc_db/measure_task`,
+    method: 'get',
+    params: {
+      totalSQL: totalSQL + querySQL,
+      rowsSQL: rowsSQL + querySQL + limtSql,
+    },
+  });
+
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS) {
+    const data: DataList = {
+      total: 0,
+      rows: [],
+      code: result.code,
+      msg: result.msg,
+    };
+    result.data.data.forEach((item: any) => {
+      const itemData = item['measure_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: `/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: `/traceManagement/v1/subscriptions`,
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 修改任务
+ * @param data 网元对象
+ * @returns object
+ */
+export function updateTraceTask(data: Record<string, any>) {
+  return request({
+    url: `/traceManagement/v1/subscriptions`,
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 删除任务
+ * @param noticeId 网元ID
+ * @returns object
+ */
+export async function delTraceTask(id: string) {
+  return request({
+    url: `/traceManagement/v1/subscriptions?id=${id}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 获取网元跟踪接口列表
+ * @returns object
+ */
+export async function getNePerformanceList() {
+  // 发起请求
+  const result = await request({
+    url: `/databaseManagement/v1/elementType/omc_db/objectType/measure_title`,
+    method: 'get',
+    params: {
+      SQL: `SELECT * FROM measure_title`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    return Object.assign(result, {
+      data: parseObjLineToHump(data['measure_title']),
+    });
+  }
+  return result;
+}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 86f7c4cd..61a182d9 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -109,6 +109,10 @@ export default {
         start: 'Start',
         export: 'Export',
         import: 'Import',
+        selectPlease:'Please select the source of the import file',
+        server:'Server File',
+        local:'Local File',
+        fileSelect:'Please select the current import file',
       },
       backupManage: {
         setBackupTask: 'Set automatic backup time',
@@ -200,6 +204,17 @@ export default {
         neType: 'IMS Type',
       },
     },
+    perfManage: {
+      taskManage:{
+        taskId: 'Task ID',
+        neType: 'Type',
+        size: 'Measurement Dimensionality',
+        taskStatus: 'Task Status',
+        addUser: 'Creator',
+        addTime: 'Creation time',
+        granulOption:'Particle',
+      },
+    },
     traceManage: {
       analysis: {
         imsi: 'IMSI',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 86711ff1..ec0c5847 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -109,6 +109,10 @@ export default {
         start: '启动',
         export: '导出',
         import: '导入',
+        selectPlease:'请选择导入文件来源',
+        server:'服务器文件',
+        local:'本地文件',
+        fileSelect:'请选择当前导入文件',
       },
       backupManage: {
         setBackupTask: '设置自动备份时间',
@@ -200,6 +204,17 @@ export default {
         neType: 'IMS网元类型',
       },
     },
+    perfManage: {
+      taskManage:{
+        taskId: '任务ID',
+        neType: '网元类型',
+        size: '测量粒度',
+        taskStatus: '任务状态',
+        addUser: '创建人',
+        addTime: '创建时间',
+        granulOption:'测量粒度',
+      },
+    },
     traceManage: {
       analysis: {
         imsi: 'IMSI',
diff --git a/src/views/perfManage/taskManage/index.vue b/src/views/perfManage/taskManage/index.vue
index d62c2c8f..2624935b 100644
--- a/src/views/perfManage/taskManage/index.vue
+++ b/src/views/perfManage/taskManage/index.vue
@@ -1,28 +1,55 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
-import { reactive, ref, onMounted, toRaw, nextTick } from 'vue';
+import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from '@ant-design-vue/pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
+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 { saveAs } from 'file-saver';
 import useI18n from '@/hooks/useI18n';
-import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
-const { t } = useI18n();
+import useUserStore from '@/store/modules/user';
+import useNeInfoStore from '@/store/modules/neinfo';
+import {
+  addTraceTask,
+  delTraceTask,
+  getTraceTask,
+  listPerfTask,
+  updateTraceTask,
+} from '@/api/perfManage/taskManage';
+import useDictStore from '@/store/modules/dict';
+import { regExpIPv4, regExpPort } from '@/utils/regular-utils';
+const { getDict } = useDictStore();
+const { t, currentLocale } = useI18n();
 const route = useRoute();
 
 /**路由标题 */
 let title = ref<string>((route.meta.title as string) ?? '标题');
 
+/**字典数据 */
+let dict: {
+  /**跟踪类型 */
+  traceType: DictType[];
+} = reactive({
+  traceType: [],
+});
+
+/**表格所需option */
+const taskManageOption = reactive({
+  granulOption: [
+    { label: '15M', value: '15M' },
+    { label: '30M', value: '30M' },
+    { label: '60M', value: '60M' },
+    { label: '24H', value: '24H' },
+  ],
+  timeSlotAll: [{ label: '', value: '' }],
+});
+
 /**查询参数 */
 let queryParams = reactive({
-  /**移动号 */
-  imsi: '',
-  /**移动号 */
-  msisdn: '',
+  /**网元类型 */
+  neType: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -32,7 +59,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
-    imsi: '',
+    neType: '',
     pageNum: 1,
     pageSize: 20,
   });
@@ -51,6 +78,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -59,53 +88,40 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: true,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: t('views.traceManage.analysis.trackTaskId'),
-    dataIndex: 'taskId',
+    title: t('views.perfManage.taskManage.taskId'),
+    dataIndex: 'id',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.imsi'),
-    dataIndex: 'imsi',
+    title: t('views.perfManage.taskManage.neType'),
+    dataIndex: 'neType',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.msisdn'),
-    dataIndex: 'msisdn',
+    title: t('views.perfManage.taskManage.size'),
+    dataIndex: 'granulOption',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.srcIp'),
-    dataIndex: 'srcAddr',
+    title: t('views.perfManage.taskManage.taskStatus'),
+    dataIndex: 'status',
+    key: 'status',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.dstIp'),
-    dataIndex: 'dstAddr',
+    title: t('views.perfManage.taskManage.addUser'),
+    dataIndex: 'accountId',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.signalType'),
-    dataIndex: 'ifType',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msgType'),
-    dataIndex: 'msgType',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msgDirect'),
-    dataIndex: 'msgDirect',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.rowTime'),
-    dataIndex: 'timestamp',
+    title: t('views.perfManage.taskManage.addTime'),
+    dataIndex: 'createTime',
     align: 'center',
     customRender(opt) {
       if (!opt.value) return '';
@@ -152,12 +168,47 @@ 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;
-  listTraceData(toRaw(queryParams)).then(res => {
+  listPerfTask(toRaw(queryParams)).then(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;
     }
@@ -165,178 +216,383 @@ function fnGetList() {
   });
 }
 
-/**抽屉对象信息状态类型 */
+/**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**抽屉框是否显示 */
-  visible: boolean;
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
   /**标题 */
   title: string;
+  /**网元类型设备对象 */
+  neType: string[];
+  /**网元类型设备对象接口 */
+  neTypeInterface: Record<string, any>[];
+  /**网元类型性能测量集 */
+  neTypPerformance: Record<string, any>[];
+  /**网元类型性能测量集选择 */
+  neTypPerformanceList: [];
+  /**网元类型设备对象接口选择 */
+  neTypeInterfaceSelect: string[];
+  /**任务开始结束时间 */
+  timeRangePicker: [string, string];
+  /**时间段多选 */
+  timeSlotAll: [];
   /**表单数据 */
   from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
 };
 
-/**抽屉对象信息状态 */
+/**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  visibleByView: false,
+  visibleByEdit: false,
   title: '',
+  neType: [],
+  neTypeInterface: [],
+  neTypPerformance: [],
+  neTypPerformanceList: [],
+  neTypeInterfaceSelect: [],
+  timeRangePicker: ['', ''],
+  timeSlotAll: [],
   from: {
-    rawData: '',
-    rawDataHTML: '',
-    downBtn: false,
+    id: '',
+    neType: '',
+    neId: '',
+    granulOption: '',
+    traceType: 'Device',
+    startTime: '',
+    endTime: '',
+    comment: '',
+    // 跟踪类型用户
+    imsi: '',
+    msisdn: '',
+    // 跟踪类型接口
+    srcIp: '',
+    dstIp: '',
+
+    kpiSet: '',
+    periods: [],
+    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 = [];
+  modalState.neTypPerformanceList = [];
+
+  // 网元信令接口
+  fnSelectInterfaceInit(item[1].neType);
+}
+
+function fnPeriodsSelect(item: any, timeString: any) {
+  console.log(item);
+  console.log(timeString);
+
+  taskManageOption.timeSlotAll.push({
+    label: timeString.join(','),
+    value: item.join(','),
+  });
+  modalState.from.timeSlotAll.push(timeString.join(','));
+}
+
+/**开始结束时间选择对应修改 */
+function fnRangePickerChange(_: any, item: any) {
+  console.log(item);
+  modalState.from.startTime = item[0];
+  modalState.from.endTime = item[1];
+}
+
+/**时间段选择后回调 */
+function fnChange(open: any) {
+  console.log(open);
+  if (!open) {
+    modalState.from.periods.push(modalState.from.timeSlotAll);
+  }
+}
+
+/**性能测量数据集对应修改 */
+function fnSelectInterface(s: any, option: any) {
+  modalState.from.kpiSet = s.join(',');
+  const groupedData = option.reduce((groups: any, item: any) => {
+    const { kpiCode, ...rest } = item;
+    if (!groups[kpiCode]) {
+      groups[kpiCode] = [];
+    }
+    groups[kpiCode].push(rest);
+    return groups;
+  }, {});
+  let kpiGroup = []; //最终上报给网元的kpi_set数据
+  let kpisArr = []; //整理kpis数据所用
+  //进行打包网元所需的规范数据
+  for (var key in groupedData) {
+    for (let i = 0; i < groupedData[key].length; i++) {
+      //  console.log(i, groupedKpi[key][i].name)
+      kpisArr.push(groupedData[key][i].value);
+    }
+    kpiGroup.push({ Code: key, KPIs: kpisArr });
+    kpisArr = [];
+  }
+  modalState.from.kpiSet = JSON.stringify(kpiGroup);
+}
+
+/**性能测量数据集选择初始 */
+function fnSelectInterfaceInit(neType: string) {
+  //console.logg(currentLocale.value); //当前语言
+  const performance = useNeInfoStore().perMeasurementList.filter(
+    i => i.neType === neType
+  );
+  //进行分组选择
+  const groupedData = performance.reduce((groups: any, item: any) => {
+    const { kpiCode, ...rest } = item;
+    if (!groups[kpiCode]) {
+      groups[kpiCode] = [];
+    }
+    groups[kpiCode].push(rest);
+    return groups;
+  }, {});
+  modalState.neTypPerformance = Object.keys(groupedData).map(kpiCode => {
+    return {
+      label: kpiCode,
+      options: groupedData[kpiCode].map((item: any) => {
+        return {
+          value: item.kpiId,
+          label:
+            currentLocale.value === 'zh_CN'
+              ? JSON.parse(item.titleJson).cn
+              : JSON.parse(item.titleJson).en,
+          kpiCode: kpiCode,
+        };
+      }),
+    };
+  });
+}
+
 /**
- * 对话框弹出显示
- * @param row 记录信息
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisible(row: Record<string, any>) {
-  // 进制转数据
-  const hexString = parseBase64Data(row.rawMsg);
-  const rawData = convertToReadableFormat(hexString);
-  modalState.from.rawData = rawData;
-  // RAW解析HTML
-  getTraceRawInfo(row.id).then(res => {
+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) {
-      const htmlString = rawDataHTMLScript(res.msg);
-      modalState.from.rawDataHTML = htmlString;
-      modalState.from.downBtn = true;
+      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 {
-      modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
+      message.error(t('views.traceManage.task.errorTaskInfo'), 3);
     }
   });
-  modalState.title = t('views.traceManage.analysis.taskTitle', {
-    num: row.imsi,
-  });
-  modalState.visible = true;
 }
 
 /**
- * 对话框弹出关闭
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisibleClose() {
-  modalState.visible = false;
-  modalState.from.downBtn = false;
-  modalState.from.rawDataHTML = '';
-  modalState.from.rawData = '';
+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);
+      }
+    });
+  }
 }
 
-// 将Base64编码解码为字节数组
-function parseBase64Data(hexData: string) {
-  // 将Base64编码解码为字节数组
-  const byteString = atob(hexData);
-  const byteArray = new Uint8Array(byteString.length);
-  for (let i = 0; i < byteString.length; i++) {
-    byteArray[i] = byteString.charCodeAt(i);
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const from = toRaw(modalState.from);
+  let valids = ['traceType', 'neId', 'endTime'];
+  if (from.traceType === 'UE') {
+    valids = valids.concat(['imsi', 'msisdn']);
   }
-
-  // 将每一个字节转换为2位16进制数表示，并拼接起来
-  let hexString = '';
-  for (let i = 0; i < byteArray.length; i++) {
-    const hex = byteArray[i].toString(16);
-    hexString += hex.length === 1 ? '0' + hex : hex;
+  if (from.traceType === 'Interface') {
+    valids = valids.concat(['srcIp', 'dstIp', 'interfaces', 'signalPort']);
   }
-  return hexString;
+  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 => {
+          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);
+    });
 }
 
-// 转换十六进制字节流为可读格式和ASCII码表示
-function convertToReadableFormat(hexString: string) {
-  let result = '';
-  let asciiResult = '';
-  let arr = [];
-  let row = 100;
-  for (let i = 0; i < hexString.length; i += 2) {
-    const hexChars = hexString.substring(i, i + 2);
-    const decimal = parseInt(hexChars, 16);
-    const asciiChar =
-      decimal >= 32 && decimal <= 126 ? String.fromCharCode(decimal) : '.';
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByView = false;
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  modalState.timeRangePicker = ['', ''];
+  modalState.neTypeInterfaceSelect = [];
+  modalState.neTypPerformanceList = [];
 
-    result += hexChars + ' ';
-    asciiResult += asciiChar;
-
-    if ((i + 2) % 32 === 0) {
-      arr.push({
-        row: row,
-        code: result,
-        asciiText: asciiResult,
-      });
-      result = '';
-      asciiResult = '';
-      row += 10;
-    }
-    if (2 + i == hexString.length) {
-      arr.push({
-        row: row,
-        code: result,
-        asciiText: asciiResult,
-      });
-      result = '';
-      asciiResult = '';
-      row += 10;
-    }
-  }
-  return arr;
-}
-
-// 信息详情HTMl内容处理
-function rawDataHTMLScript(htmlString: string) {
-  // 删除所有 <a> 标签
-  // const withoutATags = htmlString.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '');
-  // 删除所有 <script> 标签
-  let withoutScriptTags = htmlString.replace(
-    /<script\b[^>]*>([\s\S]*?)<\/script>/gi,
-    ''
-  );
-  // 默认全展开
-  // const withoutHiddenElements = withoutScriptTags.replace(
-  //   /style="display:none"/gi,
-  //   'style="background:#ffffff"'
-  // );
-
-  function set_node(node: any, str: string) {
-    if (!node) return;
-    node.style.display = str;
-    node.style.background = '#ffffff';
-  }
-  Reflect.set(window, 'set_node', set_node);
-  function toggle_node(node: any) {
-    node = document.getElementById(node);
-    if (!node) return;
-    set_node(node, node.style.display != 'none' ? 'none' : 'block');
-  }
-  Reflect.set(window, 'toggle_node', toggle_node);
-  function hide_node(node: any) {
-    node = document.getElementById(node);
-    if (!node) return;
-    set_node(node, 'none');
-  }
-  Reflect.set(window, 'hide_node', hide_node);
-
-  // 展开第一个
-  withoutScriptTags = withoutScriptTags.replace(
-    'id="f1c" style="display:none"',
-    'id="f1c" style="display:block"'
-  );
-  return withoutScriptTags;
-}
-
-/**信息文件下载 */
-function fnDownloadFile() {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.traceManage.analysis.taskDownTip'),
-    onOk() {
-      const blob = new Blob([modalState.from.rawDataHTML], {
-        type: 'text/plain',
-      });
-      saveAs(blob, `${modalState.title}_${Date.now()}.html`);
-    },
-  });
+  modalState.neType = [];
+  modalState.neTypeInterface = [];
 }
 
 onMounted(() => {
-  // 获取列表数据
-  fnGetList();
+  // 初始字典数据
+  Promise.allSettled([getDict('trace_type')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.traceType = resArr[0].value;
+    }
+  });
+  Promise.allSettled([
+    // 获取网元网元列表
+    useNeInfoStore().fnNelist(),
+    // 获取性能测量集列表
+    useNeInfoStore().fnNeTaskPerformance(),
+  ]).finally(() => {
+    // 获取列表数据
+    fnGetList();
+  });
 });
 </script>
 
@@ -352,26 +608,15 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.traceManage.analysis.imsi')"
-              name="imsi"
+              :label="t('views.traceManage.task.neType')"
+              name="neType "
             >
-              <a-input
-                v-model:value="queryParams.imsi"
-                :allow-clear="true"
-                :placeholder="t('views.traceManage.analysis.imsiPlease')"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.analysis.msisdn')"
-              name="imsi"
-            >
-              <a-input
-                v-model:value="queryParams.msisdn"
-                :allow-clear="true"
-                :placeholder="t('views.traceManage.analysis.msisdnPlease')"
-              ></a-input>
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="useNeInfoStore().getNeSelectOtions"
+                allow-clear
+                :placeholder="t('views.traceManage.task.neTypePlease')"
+              />
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -394,12 +639,17 @@ onMounted(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
+      <template #title>
+        <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>
+          <a-tooltip placement="topRight">
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
               v-model:checked="tableState.seached"
@@ -408,15 +658,15 @@ onMounted(() => {
               size="small"
             />
           </a-tooltip>
-          <a-tooltip>
+          <a-tooltip placement="topRight">
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList">
               <template #icon><ReloadOutlined /></template>
             </a-button>
           </a-tooltip>
-          <a-tooltip>
+          <a-tooltip placement="topRight">
             <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown trigger="click">
+            <a-dropdown trigger="click" placement="bottomRight">
               <a-button type="text">
                 <template #icon><ColumnHeightOutlined /></template>
               </a-button>
@@ -453,14 +703,38 @@ onMounted(() => {
         :scroll="{ x: true }"
       >
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'traceType'">
+            <DictTag :options="dict.traceType" :value="record.traceType" />
+          </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>查看详情</template>
-                <a-button type="link" @click.prevent="fnModalVisible(record)">
+                <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>
@@ -470,39 +744,233 @@ onMounted(() => {
     <!-- 详情框 -->
     <a-modal
       width="800px"
+      :visible="modalState.visibleByView"
       :title="modalState.title"
-      :visible="modalState.visible"
-      @cancel="fnModalVisibleClose"
+      @cancel="fnModalCancel"
     >
-      <div class="raw-title">
-        {{ t('views.traceManage.analysis.signalData') }}
-      </div>
-      <a-row
-        class="raw"
-        :gutter="16"
-        v-for="v in modalState.from.rawData"
-        :key="v.row"
-      >
-        <a-col class="num" :span="2">{{ v.row }}</a-col>
-        <a-col class="code" :span="12">{{ v.code }}</a-col>
-        <a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
-      </a-row>
-      <a-divider />
-      <div class="raw-title">
-        {{ t('views.traceManage.analysis.signalDetail') }}
-        <a-button
-          type="dashed"
-          size="small"
-          @click.prevent="fnDownloadFile"
-          v-if="modalState.from.downBtn"
+      <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"
         >
-          <template #icon>
-            <DownloadOutlined />
-          </template>
-          {{ t('views.traceManage.analysis.taskDownText') }}
-        </a-button>
-      </div>
-      <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
+          <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.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>
+
+        <a-form-item
+          :label="t('views.traceManage.task.interfaces')"
+          name="interfaces"
+          v-bind="modalStateFrom.validateInfos.interfaces"
+          v-show="modalState.neType.length !== 0"
+        >
+          <a-select
+            mode="multiple"
+            placeholder="Please select"
+            v-model:value="modalState.neTypPerformanceList"
+            :options="modalState.neTypPerformance"
+            @change="fnSelectInterface"
+          >
+          </a-select>
+        </a-form-item>
+
+        <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-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.taskManage.granulOption')"
+              name="granulOption"
+              v-bind="modalStateFrom.validateInfos.granulOption"
+            >
+              <a-select
+                v-model:value="modalState.from.granulOption"
+                :options="taskManageOption.granulOption"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.traceManage.task.interfaces')"
+          name="interfaces"
+          v-bind="modalStateFrom.validateInfos.interfaces"
+          v-if="
+            modalState.from.granulOption &&
+            modalState.from.granulOption !== '24H'
+          "
+        >
+          <a-select
+            mode="multiple"
+            placeholder="Please select"
+            v-model:value="modalState.from.periods"
+            :options="taskManageOption.timeSlotAll"
+            :open="false"
+          >
+          </a-select>
+          <a-time-range-picker
+            format="HH:mm"
+            value-format="HH:MM:00"
+            @change="fnPeriodsSelect"
+            @open-change="fnChange"
+          />
+        </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>
@@ -511,26 +979,4 @@ onMounted(() => {
 .table :deep(.ant-pagination) {
   padding: 0 24px;
 }
-
-.raw {
-  &-title {
-    color: #000000d9;
-    font-size: 24px;
-    line-height: 1.8;
-  }
-  .num {
-    background-color: #e5e5e5;
-  }
-  .code {
-    background-color: #e7e6ff;
-  }
-  .txt {
-    background-color: #ffe3e5;
-  }
-
-  &-html {
-    max-height: 300px;
-    overflow-y: scroll;
-  }
-}
 </style>