Merge branch 'main' of http://192.168.2.166:3180/OMC/ems_frontend_vue3

2024-09-05 20:22:07 +08:00
parent 6874508d3f e3f83a0b98
commit 30caa79424
8 changed files with 781 additions and 10 deletions
--- a/src/api/traceManage/taskHLR.ts
+++ b/src/api/traceManage/taskHLR.ts
@@ -0,0 +1,52 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询跟踪任务列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listTaskHLR(query: Record<string, any>) {
+  return request({
+    url: '/trace/task/hlr/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 跟踪任务删除
+ * @param ids 任务ID
+ * @returns object
+ */
+export function delTaskHLR(ids: string | number) {
+  return request({
+    url: `/trace/task/hlr/${ids}`,
+    method: 'delete',
+  });
+}
+
+/**
+ * 跟踪任务创建
+ * @param data 对象
+ * @returns object
+ */
+export function startTaskHLR(data: Record<string, any>) {
+  return request({
+    url: '/trace/task/hlr/start',
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 跟踪任务停止
+ * @param data 对象
+ * @returns object
+ */
+export function stopTaskHLR(data: Record<string, any>) {
+  return request({
+    url: '/trace/task/hlr/stop',
+    method: 'post',
+    data: data,
+  });
+}
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1128,6 +1128,9 @@ export default {
        trackType: 'Tracing Type',
        trackTypePlease: 'Please select a tracing type',
        creater: 'Created by',
+        textStop: "Stop",
+        status: 'Status',
+        time: 'Time',
        startTime: 'Start Time',
        endTime: 'End Time',
        msisdn: 'MSISDN',
@@ -1149,14 +1152,16 @@ export default {
        signalPortTip: 'Port corresponding to the interface',
        rangePicker: 'Start/End Time',
        rangePickerPlease: 'Please select the start and end time of the task',
-        comment: 'Task Description',
-        commentPlease: 'Task description can be entered',
+        remark: 'Task Description',
+        remarkPlease: 'Task description can be entered',
        addTask: 'Add Task',
        editTask: 'Modify Task',
        viewTask: 'View Task',
        errorTaskInfo: 'Failed to obtain task information',
        delTask: 'Successfully deleted task {num}',
        delTaskTip: 'Are you sure to delete the data item with record number {num}?',
+        stopTask: 'Successful cessation of tasks {num}',
+        stopTaskTip: 'Confirm stopping the task with record number {num}?',
      },
    },
    faultManage: {
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1128,6 +1128,9 @@ export default {
        trackType: '跟踪类型',
        trackTypePlease: '请选择跟踪类型',
        creater: '创建人',
+        textStop: "停止",
+        status: '状态',
+        time: '时间',
        startTime: '开始时间',
        endTime: '结束时间',
        msisdn: 'MSISDN',
@@ -1149,14 +1152,16 @@ export default {
        signalPortTip: '接口对应的端口',
        rangePicker: '开始结束时间',
        rangePickerPlease: '请选择任务时间开始结束时间',
-        comment: '任务说明',
-        commentPlease: '可输入任务说明',
+        remark: '任务说明',
+        remarkPlease: '可输入任务说明',
        addTask: '添加任务',
        editTask: '修改任务',
        viewTask: '查看任务',
        errorTaskInfo: '获取任务信息失败',
        delTask: '成功删除任务 {num}',
        delTaskTip: '确认删除记录编号为 {num} 的数据项?',
+        stopTask: '成功停止任务 {num}',
+        stopTaskTip: '确认停止记录编号为 {num} 的任务?',
      },
    },
    faultManage: {
--- a/src/views/ne/neConfig/hooks/useConfigArray.ts
+++ b/src/views/ne/neConfig/hooks/useConfigArray.ts
@@ -67,6 +67,22 @@ export default function useConfigArray({
      row[v.name] = Object.assign({}, v);
    }

+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(row, 'upfId')) {
+      const v = row.upfId.value;
+      if (typeof v === 'string') {
+        if (v === '') {
+          row.upfId.value = [];
+        } else if (v.includes(';')) {
+          row.upfId.value = v.split(';');
+        } else if (v.includes(',')) {
+          row.upfId.value = v.split(',');
+        } else {
+          row.upfId.value = [v];
+        }
+      }
+    }
+
    modalState.from = row;
    modalState.type = 'arrayEdit';
    modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
@@ -87,6 +103,15 @@ export default function useConfigArray({
  /**多列表编辑确认 */
  function arrayEditOk(from: Record<string, any>) {
    const loc = `${from['index']['value']}`;
+
+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(from, 'upfId')) {
+      const v = from.upfId.value;
+      if (Array.isArray(v)) {
+        from.upfId.value = v.join(';');
+      }
+    }
+
    // 遍历提取属性和值
    let data: Record<string, any> = {};
    for (const key in from) {
@@ -187,6 +212,22 @@ export default function useConfigArray({
      row[v.name] = Object.assign({}, v);
    }

+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(row, 'upfId')) {
+      const v = row.upfId.value;
+      if (typeof v === 'string') {
+        if (v === '') {
+          row.upfId.value = [];
+        } else if (v.includes(';')) {
+          row.upfId.value = v.split(';');
+        } else if (v.includes(',')) {
+          row.upfId.value = v.split(',');
+        } else {
+          row.upfId.value = [v];
+        }
+      }
+    }
+
    modalState.from = row;
    modalState.type = 'arrayAdd';
    modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
@@ -197,6 +238,14 @@ export default function useConfigArray({

  /**多列表新增单行确认 */
  function arrayAddOk(from: Record<string, any>) {
+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(from, 'upfId')) {
+      const v = from.upfId.value;
+      if (Array.isArray(v)) {
+        from.upfId.value = v.join(';');
+      }
+    }
+
    // 遍历提取属性和值
    let data: Record<string, any> = {};
    for (const key in from) {
@@ -321,6 +370,22 @@ export default function useConfigArray({
      if ('bool' === row.type) {
        row.value = Boolean(row.value);
      }
+
+      // 特殊SMF-upfid选择
+      if (neTypeSelect.value[0] === 'SMF' && row.name === 'upfId') {
+        const v = row.value;
+        if (typeof v === 'string') {
+          if (v === '') {
+            row.value = [];
+          } else if (v.includes(';')) {
+            row.value = v.split(';');
+          } else if (v.includes(',')) {
+            row.value = v.split(',');
+          } else {
+            row.value = [v];
+          }
+        }
+      }
    }
    return ruleFrom;
  }
--- a/src/views/ne/neConfig/index.vue
+++ b/src/views/ne/neConfig/index.vue
@@ -589,7 +589,7 @@ onMounted(() => {
                      @dblclick="listEdit(record)"
                    >
                      <template v-if="record['type'] === 'enum'">
-                        {{ JSON.parse(record['filter'])[text] || '&nbsp;'}}
+                        {{ JSON.parse(record['filter'])[text] || '&nbsp;' }}
                      </template>
                      <template v-else>{{ `${text}` || '&nbsp;' }}</template>
                      <EditOutlined
@@ -870,6 +870,9 @@ onMounted(() => {
                  v-model:value="modalState.from[item.name]['value']"
                  :options="smfByUPFIdOptions"
                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
+                  :token-separators="[',', ';']"
+                  mode="multiple"
+                  :max-tag-count="5"
                  :allow-clear="true"
                  style="width: 100%"
                >
--- a/src/views/perfManage/taskManage/index.vue
+++ b/src/views/perfManage/taskManage/index.vue
@@ -1128,7 +1128,7 @@ onMounted(() => {
        </a-row>

        <a-form-item
-          :label="t('views.traceManage.task.comment')"
+          :label="t('views.traceManage.task.remark')"
          name="comment"
        >
          <a-textarea
@@ -1136,7 +1136,7 @@ onMounted(() => {
            :auto-size="{ minRows: 2, maxRows: 6 }"
            :maxlength="250"
            :show-count="true"
-            :placeholder="t('views.traceManage.task.commentPlease')"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
          />
        </a-form-item>
      </a-form>
--- a/src/views/traceManage/task-hlr/index.vue
+++ b/src/views/traceManage/task-hlr/index.vue
@@ -0,0 +1,641 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { Form, message, Modal } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { parseDateToStr } from '@/utils/date-utils';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import {
+  delTaskHLR,
+  listTaskHLR,
+  startTaskHLR,
+  stopTaskHLR,
+} from '@/api/traceManage/taskHLR';
+const { t } = useI18n();
+
+/**开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  imsi: '',
+  msisdn: '',
+  /**记录时间 */
+  startTime: '',
+  endTime: '',
+  /**排序字段 */
+  sortField: '',
+  /**排序方式 */
+  sortOrder: 'asc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    imsi: '',
+    msisdn: '',
+    startTime: '',
+    endTime: '',
+    sortField: '',
+    sortOrder: 'asc',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = reactive([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'right',
+  },
+  {
+    title: t('views.traceManage.task.imsi'),
+    dataIndex: 'imsi',
+    align: 'left',
+  },
+  {
+    title: t('views.traceManage.task.msisdn'),
+    dataIndex: 'msisdn',
+    align: 'left',
+  },
+  {
+    title: t('views.traceManage.task.status'),
+    dataIndex: 'status',
+    align: 'left',
+  },
+  {
+    title: t('views.traceManage.task.startTime'),
+    dataIndex: 'startTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+  },
+  {
+    title: t('views.traceManage.task.endTime'),
+    dataIndex: 'endTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**
+ * 信息删除
+ * @param row 记录编号ID
+ */
+function fnRecordDelete(id: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.traceManage.task.delTaskTip', { num: id }),
+    onOk() {
+      const key = 'delTraceTask';
+      message.loading({ content: t('common.loading'), key });
+      delTaskHLR(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,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**查询信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listTaskHLR(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
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**
+ * 信息停止
+ * @param row 记录编号ID
+ */
+function fnRecordStop(id: string) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.traceManage.task.stopTaskTip', { num: id }),
+    onOk() {
+      const key = 'delTraceTask';
+      message.loading({ content: t('common.loading'), key });
+      stopTaskHLR({ id }).then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: t('views.traceManage.task.stopTask', { num: id }),
+            key,
+            duration: 2,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key: key,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  visibleByView: boolean;
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**任务开始结束时间 */
+  timeRangePicker: [string, string];
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByView: false,
+  visibleByEdit: false,
+  title: '',
+  neType: [],
+  neTypeInterface: [],
+  neTypeInterfaceSelect: [],
+  timeRangePicker: ['', ''],
+  from: {
+    id: undefined,
+    startTime: 0,
+    endTime: 0,
+    remark: '',
+    // 跟踪类型用户
+    imsi: '',
+    msisdn: '',
+  },
+  confirmLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    endTime: [
+      {
+        required: false,
+        message: t('views.traceManage.task.rangePickerPlease'),
+      },
+    ],
+    // 跟踪用户
+    imsi: [
+      {
+        required: true,
+        message: t('views.traceManage.task.imsiPlease'),
+      },
+    ],
+    msisdn: [
+      {
+        required: false,
+        message: t('views.traceManage.task.msisdnPlease'),
+      },
+    ],
+  })
+);
+
+/**开始结束时间选择对应修改 */
+function fnRangePickerChange(item: any, _: any) {
+  modalState.from.startTime = +item[0];
+  modalState.from.endTime = +item[1];
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByVive(row: Record<string, any>) {
+  if (modalState.confirmLoading) return;
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  // getTraceTask(id).then(res => {
+  //   modalState.confirmLoading = false;
+  //   hide();
+  //   if (res.code === RESULT_CODE_SUCCESS) {
+  //     modalState.neType = [res.data.neType, res.data.neId];
+  //     modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
+  //     modalState.from = Object.assign(modalState.from, res.data);
+
+  //     modalState.confirmLoading = false;
+  //     hide();
+  //     modalState.title = t('views.traceManage.task.viewTask');
+  //     modalState.visibleByView = true;
+  //   } else {
+  //     message.error(t('views.traceManage.task.errorTaskInfo'), 3);
+  //   }
+  // });
+}
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param id 不传为新增
+ */
+function fnModalVisibleByEdit(id?: string) {
+  if (!id) {
+    fnModalCancel();
+    modalState.title = t('views.traceManage.task.addTask');
+    modalState.visibleByEdit = true;
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      const from = toRaw(modalState.from);
+      startTaskHLR(from)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            fnModalCancel();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+          fnGetList(1);
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByView = false;
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  modalStateFrom.resetFields();
+  modalState.timeRangePicker = ['', ''];
+}
+
+onMounted(() => {
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="IMSI" name="imsi ">
+              <a-input
+                v-model:value="queryParams.imsi"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="MSISDN" name="msisdn ">
+              <a-input
+                v-model:value="queryParams.msisdn"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.time')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                :placeholder="[
+                  t('views.traceManage.task.startTime'),
+                  t('views.traceManage.task.endTime'),
+                ]"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <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 placement="topRight">
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: true }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip v-if="record.status === '1'">
+                <template #title>
+                  {{ t('views.traceManage.task.textStop') }}
+                </template>
+                <a-button
+                  type="link"
+                  danger
+                  @click.prevent="fnRecordStop(record.id)"
+                >
+                  <template #icon><StopOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip v-if="record.status === '0'">
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByVive(record)"
+                >
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip v-if="record.status === '0'">
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.id)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :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"
+        :label-col="{ span: 4 }"
+        :label-wrap="true"
+      >
+        <!-- 用户跟踪 -->
+        <a-form-item
+          :label="t('views.traceManage.task.imsi')"
+          name="imsi"
+          v-bind="modalStateFrom.validateInfos.imsi"
+        >
+          <a-input
+            v-model:value="modalState.from.imsi"
+            allow-clear
+            :placeholder="t('views.traceManage.task.imsiPlease')"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>{{ t('views.traceManage.task.imsiTip') }}</div>
+                </template>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.traceManage.task.msisdn')"
+          name="msisdn"
+          v-bind="modalStateFrom.validateInfos.msisdn"
+        >
+          <a-input
+            v-model:value="modalState.from.msisdn"
+            allow-clear
+            :placeholder="t('views.traceManage.task.msisdnPlease')"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
+                </template>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.traceManage.task.rangePicker')"
+          name="endTime"
+          v-bind="modalStateFrom.validateInfos.endTime"
+        >
+          <a-range-picker
+            v-model:value="modalState.timeRangePicker"
+            allow-clear
+            bordered
+            :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="x"
+            :placeholder="[
+              t('views.traceManage.task.startTime'),
+              t('views.traceManage.task.endTime'),
+            ]"
+            style="width: 100%"
+            @change="fnRangePickerChange"
+          ></a-range-picker>
+        </a-form-item>
+        <a-form-item :label="t('views.traceManage.task.remark')" name="remark">
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :maxlength="250"
+            :show-count="true"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
+          />
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
--- a/src/views/traceManage/task/index.vue
+++ b/src/views/traceManage/task/index.vue
@@ -828,7 +828,7 @@ onMounted(() => {
          ></a-range-picker>
        </a-form-item>
        <a-form-item
-          :label="t('views.traceManage.task.comment')"
+          :label="t('views.traceManage.task.remark')"
          name="comment"
        >
          {{ modalState.from.comment }}
@@ -1036,7 +1036,7 @@ onMounted(() => {
          ></a-range-picker>
        </a-form-item>
        <a-form-item
-          :label="t('views.traceManage.task.comment')"
+          :label="t('views.traceManage.task.remark')"
          name="comment"
        >
          <a-textarea
@@ -1044,7 +1044,7 @@ onMounted(() => {
            :auto-size="{ minRows: 2, maxRows: 6 }"
            :maxlength="250"
            :show-count="true"
-            :placeholder="t('views.traceManage.task.commentPlease')"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
          />
        </a-form-item>
      </a-form>