--新增性能门限

src/api/perfManage/perfThreshold.ts

@@ -0,0 +1,189 @@
+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 listPerfThreshold(query: Record<string, any>) {
+  let totalSQL = 'select count(*) as total from measure_threshold where 1=1 ';
+  let rowsSQL = 'select * from measure_threshold where 1=1 ';
+
+  // 查询
+  let querySQL = '';
+  if (query.neType) {
+    querySQL += ` and ne_type like '%${query.neType}%' `;
+  }
+
+  // 排序
+  let sortSql = ' order by create_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/measure_threshold`,
+    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['measure_threshold'];
+      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 getPerfThre(id: string | number) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/measure_threshold`,
+    method: 'get',
+    params: {
+      SQL: `select * from measure_threshold 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['measure_threshold'][0]),
+    });
+  }
+  return result;
+}
+
+/**
+ * 新增性能门限
+ * @param data 网元对象
+ * @returns object
+ */
+export function addPerfThre(data: Record<string, any>) {
+  let obj: any = {
+    ne_type: data.neType,
+    kpi_set: data.performanceArr,
+    status: 'Inactive',
+    orig_severity: data.origSeverity,
+    threshold: data.threshold,
+  };
+
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/measure_threshold`,
+    method: 'post',
+    data: { measure_task: [obj] },
+  });
+}
+
+/**
+ * 修改性能测量任务
+ * @param data 网元对象
+ * @returns object
+ */
+export function updatePerfThre(data: Record<string, any>) {
+  let obj: any = {
+    ne_type: data.neType,
+    kpi_set: data.performanceArr,
+    status: 'Inactive',
+    orig_severity: data.origSeverity,
+    threshold: data.threshold,
+  };
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/measure_task?WHERE=id=${data.id}`,
+    method: 'put',
+    data: { data: obj },
+  });
+}
+
+/**
+ * 删除性能门限
+ * @param noticeId 网元ID
+ * @returns object
+ */
+export async function delPerfThre(data: Record<string, any>) {
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/measure_threshold?WHERE=id=${data.id}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 获取网元跟踪接口列表
+ * @returns object
+ */
+export async function getNePerformanceList() {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/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;
+}
+
+/**
+ * 激活任务
+ * @param
+ * @returns bolb
+ */
+export function threRun(data: Record<string, any>) {
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/measure_threshold?WHERE=id=${data.id}`,
+    method: 'put',
+    data: { data: { status: 'Active' } },
+  });
+}
+
+/**
+ * 挂起任务
+ * @param
+ * @returns bolb
+ */
+export function threStop(data: Record<string, any>) {
+  return request({
+    url: `/api/rest/databaseManagement/v1/omc_db/measure_threshold?WHERE=id=${data.id}`,
+    method: 'put',
+    data: { data: { status: 'Inactive' } },
+  });
+}

src/api/perfManage/taskManage.ts

@@ -18,6 +18,13 @@ export async function listPerfTask(query: Record<string, any>) {
     querySQL += ` and ne_type like '%${query.neType}%' `;
   }
 
+    // 排序
+    let sortSql = ' order by create_time ';
+    if (query.sortOrder === 'asc') {
+      sortSql += ' asc ';
+    } else {
+      sortSql += ' desc ';
+    }
   // 分页
   const pageNum = (query.pageNum - 1) * query.pageSize;
   const limtSql = ` limit ${pageNum},${query.pageSize} `;
@@ -28,7 +35,7 @@ export async function listPerfTask(query: Record<string, any>) {
     method: 'get',
     params: {
       totalSQL: totalSQL + querySQL,
-      rowsSQL: rowsSQL + querySQL + limtSql,
+      rowsSQL: rowsSQL + querySQL + sortSql+ limtSql,
     },
   });
 
@@ -171,7 +178,7 @@ export async function delPerfTask(data: Record<string, any>) {
 }
 
 /**
- * 获取网元跟踪接口列表
+ * 获取性能测量指标列表
  * @returns object
  */
 export async function getNePerformanceList() {

src/i18n/locales/en-US.ts

@@ -224,7 +224,17 @@ export default {
         addTask:'Add Task',
         stopTask:'Stop Task',
         errorTaskInfo: 'Failed to obtain task information',
+        granulOptionPlease:'Please select the measurement granularity',
       },
+      perfThreshold:{
+        thresholdValue:'Threshold Value',
+        alarmType:'Alarm Type',
+        delThre:'Successfully deleted threshold {num}',
+        delThreTip:'Are you sure to delete the data item with record number {num}?',
+        editThre:'Update Threshold',
+        addThre:'Add Threshold',
+        errorThreInfo: 'Failed to obtain threshold information',
+      }
     },
     traceManage: {
       analysis: {

src/i18n/locales/zh-CN.ts

@@ -224,7 +224,17 @@ export default {
         addTask:'新增任务',
         stopTask:'挂起',
         errorTaskInfo: '获取任务信息失败',
+        granulOptionPlease:'请选择测量粒度',
       },
+      perfThreshold:{
+        thresholdValue:'门限值',
+        alarmType:'告警类型',
+        delThre:'成功删除性能门限 {num}',
+        delThreTip:'确认删除记录编号为 {num} 的数据项?',
+        editThre:'修改性能门限',
+        addThre:'新增性能门限',
+        errorThreInfo: '获取性能门限信息失败',
+      }
     },
     traceManage: {
       analysis: {

src/views/perfManage/perfThreshold/index.vue

@@ -1,23 +1,42 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, ref, toRaw } from 'vue';
 import { PageContainer } from '@ant-design-vue/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 useUserStore from '@/store/modules/user';
-const { t } = useI18n();
+import useNeInfoStore from '@/store/modules/neinfo';
+import {
+  addPerfThre,
+  delPerfThre,
+  getPerfThre,
+  listPerfThreshold,
+  updatePerfThre,
+  threStop,
+  threRun,
+} from '@/api/perfManage/perfThreshold';
+import { regExpIPv4 } from '@/utils/regular-utils';
+const { t, currentLocale } = useI18n();
+
+/**表格所需option */
+const perfThresholdOption = reactive({
+  origSeverity: [
+    { label: t('views.faultManage.activeAlarm.critical'), value: 'Critical' },
+    { label: t('views.faultManage.activeAlarm.major'), value: 'Major' },
+    { label: t('views.faultManage.activeAlarm.minor'), value: 'Minor' },
+    { label: t('views.faultManage.activeAlarm.warning'), value: 'Warning' },
+    { label: t('views.faultManage.activeAlarm.eventAlarm'), value: 'Event' },
+  ],
+});
 
 /**查询参数 */
 let queryParams = reactive({
-  /**移动号 */
+  /**网元类型 */
-  imsi: '',
+  neType: '',
-  /**移动号 */
-  msisdn: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -27,7 +46,7 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
-    imsi: '',
+    neType: '',
     pageNum: 1,
     pageSize: 20,
   });
@@ -46,6 +65,8 @@ type TabeStateType = {
   seached: boolean;
   /**记录数据 */
   data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
 };
 
 /**表格状态 */
@@ -54,59 +75,42 @@ let tableState: TabeStateType = reactive({
   size: 'middle',
   seached: true,
   data: [],
+  selectedRowKeys: [],
 });
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: t('views.traceManage.analysis.trackTaskId'),
+    title: t('common.rowId'),
-    dataIndex: 'taskId',
+    dataIndex: 'id',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.imsi'),
+    title: t('views.perfManage.taskManage.neType'),
-    dataIndex: 'imsi',
+    dataIndex: 'neType',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.msisdn'),
+    title: '统计设置',
-    dataIndex: 'msisdn',
+    dataIndex: 'kpiSet',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.srcIp'),
+    title: '门限值',
-    dataIndex: 'srcAddr',
+    dataIndex: 'threshold',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.dstIp'),
+    title: '告警级别',
-    dataIndex: 'dstAddr',
+    dataIndex: 'origSeverity',
     align: 'center',
   },
   {
-    title: t('views.traceManage.analysis.signalType'),
+    title: '状态',
-    dataIndex: 'ifType',
+    dataIndex: 'status',
+    key: 'status',
     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,12 +151,49 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
-/**查询备份信息列表 */
+/**
+ * 性能门限删除
+ * @param row 记录编号ID
+ */
+function fnRecordDelete(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.perfManage.perfThreshold.delThreTip', { num: row.id }),
+    onOk() {
+      const key = 'delThreshold';
+      message.loading({ content: t('common.loading'), key });
+      delPerfThre(row).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.perfManage.perfThreshold.delThre', {
+              num: row.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 => {
+  listPerfThreshold(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;
     }
@@ -160,178 +201,276 @@ function fnGetList() {
   });
 }
 
-/**抽屉对象信息状态类型 */
+/**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**抽屉框是否显示 */
+  /**详情框是否显示 */
-  visible: boolean;
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
   /**标题 */
   title: string;
+  /**网元类型设备对象 */
+  neType: string[];
+  /**网元类型性能测量集 */
+  neTypPerformance: Record<string, any>[];
   /**表单数据 */
   from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
 };
 
-/**抽屉对象信息状态 */
+/**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  visibleByView: false,
+  visibleByEdit: false,
   title: '',
+  neType: [],
+  neTypPerformance: [],
   from: {
-    rawData: '',
+    id: '',
-    rawDataHTML: '',
+    neType: '',
-    downBtn: false,
+    origSeverity: '',
+    kpiSet: '',
+    threshold: '',
   },
+  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 => {
+
-    if (res.code === RESULT_CODE_SUCCESS) {
+    kpiSet: [
-      const htmlString = rawDataHTMLScript(res.msg);
+      {
-      modalState.from.rawDataHTML = htmlString;
+        required: true,
-      modalState.from.downBtn = true;
+        message: t('views.perfManage.taskManage.performanceSelect'),
-    } else {
+      },
-      modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
+    ],
+  })
+);
+
+/**性能测量数据集选择初始 */
+function fnSelectPerformanceInit(value: any) {
+  //console.logg(currentLocale.value); //当前语言
+  const performance = useNeInfoStore().perMeasurementList.filter(
+    i => i.neType === 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.perfThreshold.addThre');
-  modalState.from.rawData = '';
+    modalState.visibleByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    getPerfThre(id).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('views.perfManage.perfThreshold.editThre');
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(t('views.perfManage.perfThreshold.errorThreInfo'), 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++) {
+  console.log(modalState.from)
-    byteArray[i] = byteString.charCodeAt(i);
+  modalStateFrom
-  }
+    .validate()
-
+    .then(e => {
-  // 将每一个字节转换为2位16进制数表示，并拼接起来
+      const from = toRaw(modalState.from);
-  let hexString = '';
+      modalState.confirmLoading = true;
-  for (let i = 0; i < byteArray.length; i++) {
+      const perfTask = from.id ? updatePerfThre(from) : addPerfThre(from);
-    const hex = byteArray[i].toString(16);
+      const hide = message.loading(t('common.loading'), 0);
-    hexString += hex.length === 1 ? '0' + hex : hex;
+      perfTask
-  }
+        .then(res => {
-  return hexString;
+          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 = [];
+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 =
-      decimal >= 32 && decimal <= 126 ? String.fromCharCode(decimal) : '.';
-
-    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> 标签
+ * @param row 网元编号ID
-  // const withoutATags = htmlString.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '');
+ */
-  // 删除所有 <script> 标签
+function fnRecordRun(row: Record<string, any>) {
-  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'),
+    title: '提示',
-    content: t('views.traceManage.analysis.taskDownTip'),
+    content: `确认激活编号为 【${row.id}】 的性能门限?`,
     onOk() {
-      const blob = new Blob([modalState.from.rawDataHTML], {
+      const key = 'taskRun';
-        type: 'text/plain',
+      message.loading({ content: '请稍等...', key });
+      threRun(row).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `激活成功`,
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
       });
-      saveAs(blob, `${modalState.title}_${Date.now()}.html`);
     },
   });
 }
 
+/**
+ * 挂起性能门限
+ * @param row 网元编号ID
+ */
+function fnRecordStop(row: Record<string, any>) {
+  Modal.confirm({
+    title: '提示',
+    content: `确认挂起编号为 【${row.id}】 的性能门限?`,
+    onOk() {
+      const key = 'taskStop';
+      message.loading({ content: '请稍等...', key });
+      threStop(row).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `挂起成功`,
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 记录多项选择
+ */
+function fnTaskModalVisible(type: string | number, row: Record<string, any>) {
+  if (type === 'run') {
+    if (row.status === 'Active') {
+      var key = 'Active';
+      message.error({
+        content: `禁止激活已激活的性能门限`,
+        key: key,
+        duration: 2,
+      });
+      return false;
+    }
+    fnRecordRun(row);
+  }
+
+  if (type === 'stop') {
+    if (row.status === 'Inactive') {
+      var key = 'stop';
+      message.error({
+        content: `禁止挂起未激活的性能门限`,
+        key: key,
+        duration: 2,
+      });
+      return false;
+    }
+    fnRecordStop(row);
+  }
+}
+
 onMounted(() => {
-  // 获取列表数据
+  Promise.allSettled([
-  fnGetList();
+    // 获取网元网元列表
+    useNeInfoStore().fnNelist(),
+    // 获取性能测量集列表
+    useNeInfoStore().fnNeTaskPerformance(),
+  ]).finally(() => {
+    // 获取列表数据
+    fnGetList();
+  });
 });
 </script>
 
@@ -347,26 +486,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">
@@ -389,12 +517,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"
@@ -403,15 +536,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>
@@ -451,53 +584,127 @@ 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)"
+                  :disabled="record.status !== 'Inactive'"
+                >
+                  <template #icon><FormOutlined /></template>
                 </a-button>
               </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record)"
+                  :disabled="record.status !== 'Inactive'"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.moreText') }}</template>
+                <a-dropdown
+                  placement="bottomRight"
+                  :trigger="['hover', 'click']"
+                >
+                  <a-button type="link">
+                    <template #icon><EllipsisOutlined /> </template>
+                  </a-button>
+                  <template #overlay>
+                    <a-menu
+                      @click="({ key }:any) => fnTaskModalVisible(key, record)"
+                    >
+                      <a-menu-item key="run">
+                        <ThunderboltOutlined />
+                        {{ t('views.configManage.softwareManage.runBtn') }}
+                      </a-menu-item>
+                      <a-menu-item key="stop">
+                        <UndoOutlined />
+                        {{ t('views.perfManage.taskManage.stopTask') }}
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </a-tooltip>
             </a-space>
           </template>
         </template>
       </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-row>
-          @click.prevent="fnDownloadFile"
+
-          v-if="modalState.from.downBtn"
+        <a-form-item
+          :label="t('views.perfManage.taskManage.performanceList')"
+          name="kpiSet"
+          v-show="modalState.from.neType"
+          v-bind="modalStateFrom.validateInfos.kpiSet"
         >
-          <template #icon>
+          <a-select
-            <DownloadOutlined />
+            placeholder="Please select"
-          </template>
+            v-model:value="modalState.from.kpiSet"
-          {{ t('views.traceManage.analysis.taskDownText') }}
+            :options="modalState.neTypPerformance"
-        </a-button>
+          >
-      </div>
+          </a-select>
-      <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
+        </a-form-item>
+
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.perfThreshold.thresholdValue')"
+              name="threshold"
+              v-bind="modalStateFrom.validateInfos.threshold"
+            >
+              <a-input v-model:value="modalState.from.threshold" allow-clear>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.alarmType')"
+              name="origSeverity"
+            >
+              <a-select
+                v-model:value="modalState.from.origSeverity"
+                style="width: 100%"
+                :options="perfThresholdOption.origSeverity"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
     </a-modal>
   </PageContainer>
 </template>
@@ -506,26 +713,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>

src/views/perfManage/taskManage/index.vue

@@ -19,9 +19,16 @@ import {
   taskStop,
   taskRun,
 } from '@/api/perfManage/taskManage';
-import { regExpIPv4} from '@/utils/regular-utils';
 const { t, currentLocale } = useI18n();
 
+const generateOptions = (start: any, end: any) => {
+  const options = [];
+  for (let i = start; i <= end; i++) {
+    options.push({ label: i.toString(), value: i.toString() });
+  }
+  return options;
+};
+
 /**表格所需option */
 const taskManageOption = reactive({
   granulOption: [
@@ -45,38 +52,7 @@ const taskManageOption = reactive({
       { label: '星期六', value: '6' },
       { label: '星期天', value: '7' },
     ],
-    Monthly: [
+    Monthly: generateOptions(1, 30),
-      { label: '1', value: '1' },
-      { label: '2', value: '2' },
-      { label: '3', value: '3' },
-      { label: '4', value: '4' },
-      { label: '5', value: '5' },
-      { label: '6', value: '6' },
-      { label: '7', value: '7' },
-      { label: '8', value: '8' },
-      { label: '9', value: '9' },
-      { label: '10', value: '10' },
-      { label: '11', value: '11' },
-      { label: '12', value: '12' },
-      { label: '13', value: '13' },
-      { label: '14', value: '14' },
-      { label: '15', value: '15' },
-      { label: '16', value: '16' },
-      { label: '17', value: '17' },
-      { label: '18', value: '18' },
-      { label: '19', value: '19' },
-      { label: '20', value: '20' },
-      { label: '21', value: '21' },
-      { label: '22', value: '22' },
-      { label: '23', value: '23' },
-      { label: '24', value: '24' },
-      { label: '25', value: '25' },
-      { label: '26', value: '26' },
-      { label: '27', value: '27' },
-      { label: '28', value: '28' },
-      { label: '29', value: '29' },
-      { label: '30', value: '30' },
-    ],
   },
 });
 
@@ -206,7 +182,7 @@ function fnTableSize({ key }: MenuInfo) {
 }
 
 /**
- * 备份信息删除
+ * 测量任务删除
  * @param row 记录编号ID
  */
 function fnRecordDelete(row: Record<string, any>) {
@@ -323,17 +299,10 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.neTypePlease'),
       },
     ],
-    endTime: [
+    granulOption: [
       {
         required: true,
-        message: t('views.traceManage.task.rangePickerPlease'),
+        message: t('views.perfManage.taskManage.granulOptionPlease'),
-      },
-    ],
-    dstIp: [
-      {
-        required: true,
-        pattern: regExpIPv4,
-        message: t('views.traceManage.task.dstIpPlease'),
       },
     ],
     performanceArr: [
@@ -379,7 +348,7 @@ function fnChange(open: any) {
 }
 
 /**性能测量数据集对应修改 */
-function fnSelectInterface(s: any, option: any) {
+function fnSelectPer(s: any, option: any) {
   modalState.from.kpiSet = s.join(',');
   const groupedData = option.reduce((groups: any, item: any) => {
     const { kpiCode, ...rest } = item;
@@ -556,32 +525,39 @@ function fnModalVisibleByEdit(id?: string) {
  * 进行表达规则校验
  */
 function fnModalOk() {
-  const from = toRaw(modalState.from);
+  modalStateFrom
-  from.accountId = useUserStore().userName;
+    .validate()
-  console.log(from);
+    .then(e => {
-  modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
-  const perfTask = from.id ? updatePerfTask(from) : addPerfTask(from);
+      from.accountId = useUserStore().userName;
-  const hide = message.loading(t('common.loading'), 0);
+      console.log(from);
-  perfTask
+      modalState.confirmLoading = true;
-    .then(res => {
+      const perfTask = from.id ? updatePerfTask(from) : addPerfTask(from);
-      if (res.code === RESULT_CODE_SUCCESS) {
+      const hide = message.loading(t('common.loading'), 0);
-        message.success({
+      perfTask
-          content: t('common.msgSuccess', { msg: modalState.title }),
+        .then(res => {
-          duration: 3,
+          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();
         });
-        modalState.visibleByEdit = false;
-        modalStateFrom.resetFields();
-      } else {
-        message.error({
-          content: `${res.msg}`,
-          duration: 3,
-        });
-      }
     })
-    .finally(() => {
+    .catch(e => {
-      hide();
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-      modalState.confirmLoading = false;
-      fnGetList();
     });
 }
 
@@ -838,14 +814,18 @@ onMounted(() => {
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record.id)"
-                  :disabled="record.status === 'Active'"
+                  :disabled="record.status !== 'Inactive'"
                 >
                   <template #icon><FormOutlined /></template>
                 </a-button>
               </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordDelete(record)">
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record)"
+                  :disabled="record.status !== 'Inactive'"
+                  >
                   <template #icon><DeleteOutlined /></template>
                 </a-button>
               </a-tooltip>
@@ -1031,7 +1011,7 @@ onMounted(() => {
             placeholder="Please select"
             v-model:value="modalState.neTypPerformanceList"
             :options="modalState.neTypPerformance"
-            @change="fnSelectInterface"
+            @change="fnSelectPer"
           >
           </a-select>
         </a-form-item>