From 5d35d950b3f39c7e955527ed412c6d147677985b Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 5 Sep 2024 17:29:12 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E9=85=8D=E7=BD=AE=E7=89=B9=E6=AE=8ASMF-upfid=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ne/neConfig/hooks/useConfigArray.ts | 65 +++++++++++++++++++
 src/views/ne/neConfig/index.vue               |  5 +-
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/views/ne/neConfig/hooks/useConfigArray.ts b/src/views/ne/neConfig/hooks/useConfigArray.ts
index da74fd28..988a819c 100644
--- 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;
   }
diff --git a/src/views/ne/neConfig/index.vue b/src/views/ne/neConfig/index.vue
index e9ef9ad8..405c85f7 100644
--- 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%"
                 >

From 147a3ed77bea920b6b1f291ca388cd327cbe51f7 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 5 Sep 2024 17:30:11 +0800
Subject: [PATCH 2/3] =?UTF-8?q?style:=20=E8=B7=9F=E8=B8=AA=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=A4=9A=E8=AF=AD=E8=A8=80=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts                 | 9 +++++++--
 src/i18n/locales/zh-CN.ts                 | 9 +++++++--
 src/views/perfManage/taskManage/index.vue | 4 ++--
 src/views/traceManage/task/index.vue      | 6 +++---
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 23c04e36..9bd7e61f 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1122,6 +1122,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',
@@ -1143,14 +1146,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: {
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 001c19a8..4a918462 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1122,6 +1122,9 @@ export default {
         trackType: '跟踪类型',
         trackTypePlease: '请选择跟踪类型',
         creater: '创建人',
+        textStop: "停止",
+        status: '状态',
+        time: '时间',
         startTime: '开始时间',
         endTime: '结束时间',
         msisdn: 'MSISDN',
@@ -1143,14 +1146,16 @@ export default {
         signalPortTip: '接口对应的端口',
         rangePicker: '开始结束时间',
         rangePickerPlease: '请选择任务时间开始结束时间',
-        comment: '任务说明',
-        commentPlease: '可输入任务说明',
+        remark: '任务说明',
+        remarkPlease: '可输入任务说明',
         addTask: '添加任务',
         editTask: '修改任务',
         viewTask: '查看任务',
         errorTaskInfo: '获取任务信息失败',
         delTask: '成功删除任务 {num}',
         delTaskTip: '确认删除记录编号为 {num} 的数据项?',
+        stopTask: '成功停止任务 {num}',
+        stopTaskTip: '确认停止记录编号为 {num} 的任务?',
       },
     },
     faultManage: {
diff --git a/src/views/perfManage/taskManage/index.vue b/src/views/perfManage/taskManage/index.vue
index 2db44f35..a2be812b 100644
--- 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>
diff --git a/src/views/traceManage/task/index.vue b/src/views/traceManage/task/index.vue
index d56dc00f..707c8d5c 100644
--- 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>

From e3f83a0b9863da10526f24ff4b0f4697d158523e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 5 Sep 2024 17:30:31 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E8=B7=9F=E8=B8=AA=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/traceManage/taskHLR.ts           |  52 ++
 src/views/traceManage/task-hlr/index.vue | 641 +++++++++++++++++++++++
 2 files changed, 693 insertions(+)
 create mode 100644 src/api/traceManage/taskHLR.ts
 create mode 100644 src/views/traceManage/task-hlr/index.vue

diff --git a/src/api/traceManage/taskHLR.ts b/src/api/traceManage/taskHLR.ts
new file mode 100644
index 00000000..4bdb9a88
--- /dev/null
+++ 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,
+  });
+}
diff --git a/src/views/traceManage/task-hlr/index.vue b/src/views/traceManage/task-hlr/index.vue
new file mode 100644
index 00000000..f69713c0
--- /dev/null
+++ 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>