自定义指标界面

src/api/perfManage/customTarget.ts

@@ -0,0 +1,146 @@
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
+import { parseDateToStr } from '@/utils/date-utils';
+
+/**
+ * 查询自定义指标
+ * @param query 查询参数
+ * @returns object
+ */
+export async function listCustom(query: Record<string, any>) {
+  let totalSQL = 'select count(*) as total from pm_custom_title where 1=1 ';
+  let rowsSQL = 'select * from pm_custom_title where 1=1 ';
+
+  // 查询
+  let querySQL = '';
+  if (query.neType) {
+    querySQL += ` and ne_type like '%${query.neType}%' `;
+  }
+
+  // 排序
+  let sortSql = ' order by update_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: `/api/rest/databaseManagement/v1/select/omc_db/pm_custom_title`,
+    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['pm_custom_title'];
+      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 getCustom(id: string | number) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/pm_custom_title`,
+    method: 'get',
+    params: {
+      SQL: `select * from pm_custom_title 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['pm_custom_title'][0]),
+    });
+  }
+  return result;
+}
+
+/**
+ * 新增自定义指标
+ * @param data 网元对象
+ * @returns object
+ */
+export function addCustom(data: Record<string, any>) {
+  let obj: any = {
+    title: data.title,
+    ne_type: data.neType,
+    kpi_id: data.kpiId,
+    object_type: data.objectType,
+    expression: data.expression,
+    period: data.period,
+    description: data.description,
+    kpi_set: data.kpiSet,
+  };
+
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/pm_custom_title`,
+    method: 'post',
+    data: { 'data': [obj] },
+  });
+}
+
+/**
+ * 修改自定义指标
+ * @param data 网元对象
+ * @returns object
+ */
+export function updateCustom(data: Record<string, any>) {
+  let obj: any = {
+    title: data.title,
+    ne_type: data.neType,
+    kpi_id: data.kpiId,
+    object_type: data.objectType,
+    expression: data.expression,
+    period: data.period,
+    description: data.description,
+    kpi_set: data.kpiSet,
+  };
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/pm_custom_title?WHERE=id=${data.id}`,
+    method: 'put',
+    data: { data: obj },
+  });
+}
+
+/**
+ * 删除自定义指标
+ * @returns object
+ */
+export async function delCustom(data: Record<string, any>) {
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/pm_custom_title?WHERE=id=${data.id}`,
+    method: 'delete',
+  });
+}
+

src/i18n/locales/en-US.ts

@@ -765,6 +765,20 @@ export default {
         exportEmpty: "Export data is empty",
         showChartSelected: "Show All",
         realTimeData: "Real Time 5s Data",
+      },
+      customTarget:{
+        kpiId:' Custom Indicator',
+        period:' Granularity',
+        title:' Custom Indicator Title',
+        objectType:' Object type',
+        expression:'Expression',
+        description:' Description',
+        kpiSet:' Statistical Settings',
+        delCustomTip:'Confirm deletion of data item with record number {num}?',
+        delCustom:' Successfully delete record number {num} custom indicator',
+        addCustom:' Add custom indicator',
+        editCustom:' Edit Custom indicator',
+        errorCustomInfo: 'Failed to get information',
       }
     },
     traceManage: {

src/i18n/locales/zh-CN.ts

@@ -765,7 +765,21 @@ export default {
         exportEmpty: "导出数据为空",
         showChartSelected: "显示全部",
         realTimeData: "实时5s数据",
-      }
+      },
+      customTarget:{
+        kpiId:'自定义指标项',
+        period:'颗粒度',
+        title:'自定义指标项标题',
+        objectType:'对象类型',
+        expression:'计算公式',
+        description:'描述',
+        kpiSet:'统计设置',
+        delCustomTip:'确认删除记录编号为 {num} 的数据项?',
+        delCustom:'成功删除记录编号为 {num} 自定义指标',
+        addCustom:'添加自定义指标',
+        editCustom:'编辑自定义指标',
+        errorCustomInfo: '获取信息失败',    
+        }
     },
     traceManage: {
       analysis: {

src/views/perfManage/customTarget/index.vue

@@ -1,23 +1,36 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { 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';
+import useDictStore from '@/store/modules/dict';
-const { t } = useI18n();
+import useNeInfoStore from '@/store/modules/neinfo';
+import {
+  addCustom,
+  delCustom,
+  getCustom,
+  listCustom,
+  updateCustom,
+} from '@/api/perfManage/customTarget';
+const { getDict } = useDictStore();
+const { t, currentLocale } = useI18n();
+
+/**字典数据 */
+let dict: {
+  /**原始严重程度 */
+  activeAlarmSeverity: DictType[];
+} = reactive({
+  activeAlarmSeverity: [],
+});
 
 /**查询参数 */
 let queryParams = reactive({
-  /**移动号 */
+  /**网元类型 */
-  imsi: '',
+  neType: '',
-  /**移动号 */
-  msisdn: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -27,7 +40,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
-    imsi: '',
+    neType: '',
     pageNum: 1,
     pageSize: 20,
   });
@@ -46,6 +59,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -54,59 +69,31 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: true,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: t('views.traceManage.analysis.trackTaskId'),
+    title: t('views.perfManage.taskManage.neType'),
-    dataIndex: 'taskId',
+    dataIndex: 'neType',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.imsi'),
+    title: t('views.perfManage.customTarget.kpiId'),
-    dataIndex: 'imsi',
+    dataIndex: 'kpiId',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.msisdn'),
+    title: t('views.perfManage.customTarget.kpiSet'),
-    dataIndex: 'msisdn',
+    dataIndex: 'kpiSet',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.srcIp'),
+    title: t('views.perfManage.customTarget.period'),
-    dataIndex: 'srcAddr',
+    dataIndex: 'threshold',
     align: 'center',
   },
-  {
-    title: t('views.traceManage.analysis.dstIp'),
-    dataIndex: 'dstAddr',
-    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',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-  },
   {
     title: t('common.operate'),
     key: 'id',
@@ -147,18 +134,59 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
-/**查询备份信息列表, pageNum初始页数 */
+/**
+ * 自定义指标删除
+ * @param row 记录编号ID
+ */
+function fnRecordDelete(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.perfManage.customTarget.delCustomTip', { num: row.id }),
+    onOk() {
+      const key = 'delThreshold';
+      message.loading({ content: t('common.loading'), key });
+      delCustom(row).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.perfManage.customTarget.delCustom', {
+              num: row.id,
+            }),
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**查询信息列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  listTraceData(toRaw(queryParams)).then(res => {
+  listCustom(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;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -167,178 +195,274 @@ function fnGetList(pageNum?: number) {
   });
 }
 
-/**抽屉对象信息状态类型 */
+/**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**抽屉框是否显示 */
+  /**详情框是否显示 */
-  visible: boolean;
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
   /**标题 */
   title: string;
+  /**网元类型设备对象 */
+  neType: string[];
+  /**网元类型性能测量集 */
+  neTypPerformance: Record<string, any>[];
+  /**网元类型对象类型集 */
+  objectTypeArr: Record<string, any>[];
+  /**已选择性能测量项 */
+  selectedPre: string[];
   /**表单数据 */
   from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
 };
 
-/**抽屉对象信息状态 */
+/**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  visibleByView: false,
+  visibleByEdit: false,
   title: '',
+  neType: [],
+  neTypPerformance: [],
+  objectTypeArr: [],
+  selectedPre: [],
   from: {
-    rawData: '',
+    id: '',
-    rawDataHTML: '',
+    neType: '',
-    downBtn: false,
+    objectType: '',
+    expression: '',
+    kpiSet: '',
+    title: '',
+    kpiId: '',
+    period: 900,
   },
+  confirmLoading: false,
 });
 
-/**
+/**对话框内表单属性和校验规则 */
- * 对话框弹出显示
+const modalStateFrom = Form.useForm(
- * @param row 记录信息
+  modalState.from,
- */
+  reactive({
-function fnModalVisible(row: Record<string, any>) {
+    neType: [
-  // 进制转数据
+      {
-  const hexString = parseBase64Data(row.rawMsg);
+        required: true,
-  const rawData = convertToReadableFormat(hexString);
+        message: t('views.traceManage.task.neTypePlease'),
-  modalState.from.rawData = rawData;
+      },
-  // RAW解析HTML
+    ],
-  getTraceRawInfo(row.id).then(res => {
+    objectType: [
-    if (res.code === RESULT_CODE_SUCCESS) {
+      {
-      const htmlString = rawDataHTMLScript(res.msg);
+        required: true,
-      modalState.from.rawDataHTML = htmlString;
+        message:
-      modalState.from.downBtn = true;
+          t('views.perfManage.customTarget.objectType') +
-    } else {
+          t('common.unableNull'),
-      modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
+      },
+    ],
+    expression: [
+      {
+        required: true,
+        message:
+          t('views.perfManage.customTarget.expression') +
+          t('common.unableNull'),
+      },
+    ],
+    kpiId: [
+      {
+        required: true,
+        message:
+          t('views.perfManage.customTarget.kpiId') + t('common.unableNull'),
+      },
+    ],
+    title: [
+      {
+        required: true,
+        message:
+          t('views.perfManage.customTarget.title') + t('common.unableNull'),
+      },
+    ],
+    period: [
+      {
+        required: true,
+        message:
+          t('views.perfManage.customTarget.period') + t('common.unableNull'),
+      },
+    ],
+  })
+);
+
+/**性能测量数据集选择初始 */
+function fnSelectPerformanceInit(value: any) {
+  const performance = useNeInfoStore().perMeasurementList.filter(
+    i => i.neType === value
+  );
+  if (modalState.from.objectType) modalState.from.objectType = '';
+
+  modalState.from.expression = '';
+  const arrSet = new Set<string>();
+  performance.forEach((data: any) => {
+    arrSet.add(data.objectType);
+  });
+  // 组装对象类型options
+  modalState.objectTypeArr = Array.from(arrSet).map((value: any) => ({
+    label: value,
+    value: value,
+  }));
+
+  //进行分组选择
+  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,
+        };
+      }),
+    };
   });
-  modalState.title = t('views.traceManage.analysis.taskTitle', {
-    num: row.imsi,
-  });
-  modalState.visible = true;
 }
 
 /**
- * 对话框弹出关闭
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisibleClose() {
+function fnModalVisibleByEdit(id?: string) {
-  modalState.visible = false;
+  if (!id) {
-  modalState.from.downBtn = false;
+    modalStateFrom.resetFields();
-  modalState.from.rawDataHTML = '';
+    modalState.title = t('views.perfManage.customTarget.addCustom');
-  modalState.from.rawData = '';
+    modalState.visibleByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    getCustom(id).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        fnSelectPerformanceInit(res.data.neType);
+        modalState.selectedPre = res.data.kpiSet
+          ? res.data.kpiSet.split(',')
+          : [];
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('views.perfManage.customTarget.editCustom');
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(t('views.perfManage.customTarget.errorCustomInfo'), 3);
+      }
+    });
+  }
 }
 
-// 将Base64编码解码为字节数组
+/**
-function parseBase64Data(hexData: string) {
+ * 对话框弹出确认执行函数
-  // 将Base64编码解码为字节数组
+ * 进行表达规则校验
-  const byteString = atob(hexData);
+ */
-  const byteArray = new Uint8Array(byteString.length);
+function fnModalOk() {
-  for (let i = 0; i < byteString.length; i++) {
+  modalStateFrom
-    byteArray[i] = byteString.charCodeAt(i);
+    .validate()
-  }
+    .then(e => {
-
+      // if (modalState.selectedPre.length === 0) {
-  // 将每一个字节转换为2位16进制数表示，并拼接起来
+      //   message.error({
-  let hexString = '';
+      //     content: `${res.msg}`,
-  for (let i = 0; i < byteArray.length; i++) {
+      //     duration: 3,
-    const hex = byteArray[i].toString(16);
+      //   });
-    hexString += hex.length === 1 ? '0' + hex : hex;
+      // }
-  }
+      modalState.from.kpiSet = modalState.selectedPre.join(',');
-  return hexString;
+      const from = toRaw(modalState.from);
+      //return false;
+      modalState.confirmLoading = true;
+      const perfTask = from.id ? updateCustom(from) : addCustom(from);
+      const hide = message.loading(t('common.loading'), 0);
+      perfTask
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            modalStateFrom.resetFields();
+            fnModalCancel();
+          } 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 = [];
+function fnModalCancel() {
-  let row = 100;
+  modalState.visibleByEdit = false;
-  for (let i = 0; i < hexString.length; i += 2) {
+  modalState.confirmLoading = false;
-    const hexChars = hexString.substring(i, i + 2);
+  modalStateFrom.resetFields();
-    const decimal = parseInt(hexChars, 16);
+  modalState.neType = [];
-    const asciiChar =
+  modalState.neTypPerformance = [];
-      decimal >= 32 && decimal <= 126 ? String.fromCharCode(decimal) : '.';
+  modalState.selectedPre = [];
-
-    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, '');
+function fnSelectPer(s: any, option: any) {
-  // 删除所有 <script> 标签
+  modalState.from.expression += s;
-  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'),
+function fnDelPer(s: any, option: any) {
-    content: t('views.traceManage.analysis.taskDownTip'),
+  modalState.from.expression = modalState.from.expression.replace(s, '');
-    onOk() {
-      const blob = new Blob([modalState.from.rawDataHTML], {
-        type: 'text/plain',
-      });
-      saveAs(blob, `${modalState.title}_${Date.now()}.html`);
-    },
-  });
 }
 
+// function checkText(e:any){
+//   console.log(e);
+//   const reg = /^[*+-/]*$/;
+
+// }
+
 onMounted(() => {
-  // 获取列表数据
+  // 初始字典数据
-  fnGetList();
+  Promise.allSettled([getDict('active_alarm_severity')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.activeAlarmSeverity = resArr[0].value;
+    }
+  });
+
+  Promise.allSettled([
+    // 获取网元网元列表
+    useNeInfoStore().fnNelist(),
+    // 获取性能测量集列表
+    useNeInfoStore().fnNeTaskPerformance(),
+  ]).finally(() => {
+    // 获取列表数据
+    fnGetList();
+  });
 });
 </script>
 
@@ -354,26 +478,15 @@ onMounted(() => {
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.traceManage.analysis.imsi')"
+              :label="t('views.traceManage.task.neType')"
-              name="imsi"
+              name="neType "
             >
-              <a-input
+              <a-auto-complete
-                v-model:value="queryParams.imsi"
+                v-model:value="queryParams.neType"
-                :allow-clear="true"
+                :options="useNeInfoStore().getNeSelectOtions"
-                :placeholder="t('views.traceManage.analysis.imsiPlease')"
+                allow-clear
-              ></a-input>
+                :placeholder="t('views.traceManage.task.neTypePlease')"
-            </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-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -396,12 +509,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"
@@ -410,15 +528,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>
@@ -458,9 +576,18 @@ onMounted(() => {
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>查看详情</template>
+                <template #title>{{ t('common.editText') }}</template>
-                <a-button type="link" @click.prevent="fnModalVisible(record)">
+                <a-button
-                  <template #icon><ProfileOutlined /></template>
+                  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)">
+                  <template #icon><DeleteOutlined /></template>
                 </a-button>
               </a-tooltip>
             </a-space>
@@ -469,42 +596,130 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 详情框 -->
+    <!-- 新增框或修改框 -->
     <a-modal
       width="800px"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByEdit"
       :title="modalState.title"
-      :visible="modalState.visible"
+      :confirm-loading="modalState.confirmLoading"
-      @cancel="fnModalVisibleClose"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
     >
-      <div class="raw-title">
+      <a-form name="modalStateFrom" layout="horizontal">
-        {{ t('views.traceManage.analysis.signalData') }}
+        <a-row :gutter="16">
-      </div>
+          <a-col :lg="12" :md="12" :xs="24">
-      <a-row
+            <a-form-item
-        class="raw"
+              :label="t('views.traceManage.task.neType')"
-        :gutter="16"
+              name="neType"
-        v-for="v in modalState.from.rawData"
+              v-bind="modalStateFrom.validateInfos.neType"
-        :key="v.row"
+            >
-      >
+              <a-select
-        <a-col class="num" :span="2">{{ v.row }}</a-col>
+                v-model:value="modalState.from.neType"
-        <a-col class="code" :span="12">{{ v.code }}</a-col>
+                :options="useNeInfoStore().getNeSelectOtions"
-        <a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
+                @change="fnSelectPerformanceInit"
-      </a-row>
+                :allow-clear="false"
-      <a-divider />
+                :placeholder="t('views.traceManage.task.neTypePlease')"
-      <div class="raw-title">
+              >
-        {{ t('views.traceManage.analysis.signalDetail') }}
+              </a-select>
-        <a-button
+            </a-form-item>
-          type="dashed"
+          </a-col>
-          size="small"
+          <a-col :lg="12" :md="12" :xs="24">
-          @click.prevent="fnDownloadFile"
+            <a-form-item
-          v-if="modalState.from.downBtn"
+              :label="t('views.perfManage.customTarget.objectType')"
+              name="kpiSobjectTypeet"
+              v-show="modalState.from.neType"
+              v-bind="modalStateFrom.validateInfos.objectType"
+            >
+              <a-select
+                placeholder="Please select"
+                v-model:value="modalState.from.objectType"
+                :options="modalState.objectTypeArr"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.customTarget.kpiId')"
+              name="kpiId"
+              v-bind="modalStateFrom.validateInfos.kpiId"
+            >
+              <a-input v-model:value="modalState.from.kpiId" allow-clear>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.customTarget.period')"
+              name="period"
+              v-bind="modalStateFrom.validateInfos.period"
+            >
+              <a-select
+                v-model:value="modalState.from.period"
+                :placeholder="t('common.selectPlease')"
+                :options="[
+                  { label: '5S', value: 5 },
+                  { label: '1M', value: 60 },
+                  { label: '5M', value: 300 },
+                  { label: '15M', value: 900 },
+                  { label: '30M', value: 1800 },
+                  { label: '60M', value: 3600 },
+                ]"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.perfManage.customTarget.title')"
+          name="title"
+          v-bind="modalStateFrom.validateInfos.title"
         >
-          <template #icon>
+          <a-input v-model:value="modalState.from.title" allow-clear> </a-input>
-            <DownloadOutlined />
+        </a-form-item>
-          </template>
+
-          {{ t('views.traceManage.analysis.taskDownText') }}
+        <a-form-item
-        </a-button>
+          :label="t('views.perfManage.customTarget.expression')"
-      </div>
+          name="expression"
-      <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
+          v-bind="modalStateFrom.validateInfos.expression"
+        >
+          <a-input v-model:value="modalState.from.expression" allow-clear >
+          </a-input>
+        </a-form-item>
+        <a-row :gutter="16">
+          <a-col :lg="21" :md="21" :xs="24">
+            <a-form-item name="perSelect">
+              <a-select
+                mode="multiple"
+                style="margin-left: 80px"
+                placeholder="Please select"
+                allow-clear
+                v-model:value="modalState.selectedPre"
+                :options="modalState.neTypPerformance"
+                @select="fnSelectPer"
+                @deselect="fnDelPer"
+              ></a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.perfManage.customTarget.description')"
+          name="description"
+        >
+          <a-textarea
+            v-model:value="modalState.from.description"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :maxlength="250"
+            :show-count="true"
+          />
+        </a-form-item>
+      </a-form>
     </a-modal>
   </PageContainer>
 </template>
@@ -513,26 +728,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: auto;
-  }
-}
 </style>