From a945e4dc5f4a6016d2ea8ee89d9596775a40ec06 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 10 Jun 2025 18:55:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E4=BF=A1=E4=BB=A4?=
 =?UTF-8?q?=E8=B7=9F=E8=B8=AA=E4=BB=A3=E7=A0=81=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts                     |   1 +
 src/i18n/locales/zh-CN.ts                     |   1 +
 src/views/traceManage/task/analyze.vue        |   5 +-
 .../task/components/TaskInfoIcon.vue          | 107 +++++++++++
 src/views/traceManage/task/data.vue           |   5 +-
 src/views/traceManage/task/index.vue          | 180 ++++++++++--------
 6 files changed, 221 insertions(+), 78 deletions(-)
 create mode 100644 src/views/traceManage/task/components/TaskInfoIcon.vue

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index e1343e85..30397ea9 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1087,6 +1087,7 @@ export default {
       },
       task: {
         traceId: 'Tracing No',
+        title: 'Tracing Title',
         trackType: 'Tracing Type',
         trackTypePlease: 'Please select a tracing type',
         creater: 'Created by',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index a5850a7c..9e0a5350 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1087,6 +1087,7 @@ export default {
       },
       task: {
         traceId: '跟踪编号',
+        title: '跟踪标题',
         trackType: '跟踪类型',
         trackTypePlease: '请选择跟踪类型',
         creater: '创建人',
diff --git a/src/views/traceManage/task/analyze.vue b/src/views/traceManage/task/analyze.vue
index 16aae17c..2e426606 100644
--- a/src/views/traceManage/task/analyze.vue
+++ b/src/views/traceManage/task/analyze.vue
@@ -7,6 +7,7 @@ import { SizeType } from 'ant-design-vue/es/config-provider';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
+import TaskInfoIcon from './components/TaskInfoIcon.vue';
 import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
@@ -586,6 +587,8 @@ onBeforeUnmount(() => {
             {{ t('views.traceManage.task.traceId') }}:&nbsp;
             <strong>{{ traceId }}</strong>
           </span>
+          <!-- 任务信息 -->
+          <TaskInfoIcon :trace-id="traceId" />
         </a-space>
       </template>
 
@@ -615,7 +618,7 @@ onBeforeUnmount(() => {
           return record.msgDirect === 0 ? 'table-striped-recv' : 'table-striped-send';
         }"
         :customRow="
-          record => {
+          (record:any) => {
             return {
               onClick: () => fnVisible(record),
             };
diff --git a/src/views/traceManage/task/components/TaskInfoIcon.vue b/src/views/traceManage/task/components/TaskInfoIcon.vue
new file mode 100644
index 00000000..093be150
--- /dev/null
+++ b/src/views/traceManage/task/components/TaskInfoIcon.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+import { parseDateToStr } from '@/utils/date-utils';
+import { getTraceTask } from '@/api/trace/task';
+const { t } = useI18n();
+const { getDict } = useDictStore();
+
+const props = defineProps({
+  traceId: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+/**字典数据 */
+let dict: {
+  /**跟踪类型 */
+  traceType: DictType[];
+  /**跟踪接口 */
+  traceInterfaces: DictType[];
+} = reactive({
+  traceType: [],
+  traceInterfaces: [],
+});
+
+const task = ref<Record<string, any>>({});
+
+/**查询任务信息 */
+function fnGetTaskInfo(id: string | number) {
+  getTraceTask(id).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      Object.assign(task.value, res.data);
+    }
+  });
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('trace_type'), getDict('trace_interfaces')])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        dict.traceType = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.traceInterfaces = resArr[1].value;
+      }
+    })
+    .finally(() => {
+      // 获取信息
+      fnGetTaskInfo(props.traceId);
+    });
+});
+</script>
+
+<template>
+  <!-- 任务信息 -->
+  <a-popover placement="bottomRight">
+    <template #content>
+      <div>
+        <strong>{{ t('views.ne.common.neType') }}:&nbsp;</strong>
+        <span v-for="v in task.neList.split(',')"> {{ v }} &nbsp;&nbsp; </span>
+      </div>
+      <div>
+        <strong> {{ t('views.traceManage.task.startTime') }}:&nbsp; </strong>
+        {{ parseDateToStr(task.startTime) }}
+      </div>
+      <div>
+        <strong> {{ t('views.traceManage.task.endTime') }}:&nbsp; </strong>
+        {{ parseDateToStr(task.endTime) }}
+      </div>
+      <div>
+        <strong>{{ t('views.traceManage.task.trackType') }}:&nbsp;</strong>
+        <DictTag :options="dict.traceType" :value="task.traceType" />
+      </div>
+      <!-- 接口跟踪 -->
+      <div v-if="task.traceType === '1'">
+        <strong>{{ t('views.traceManage.task.interfaces') }}:&nbsp;</strong>
+        <span v-for="v in task.interfaces.split(',')">
+          {{ v }} &nbsp;&nbsp;
+        </span>
+      </div>
+      <!-- 设备跟踪 -->
+      <div v-if="task.traceType === '2'">
+        <strong>{{ t('views.traceManage.task.srcIp') }}:&nbsp;</strong>
+        {{ task.srcIp }}
+      </div>
+      <div v-if="task.traceType === '2'">
+        <strong>{{ t('views.traceManage.task.dstIp') }}:&nbsp;</strong>
+        {{ task.dstIp }}
+      </div>
+      <!-- 用户跟踪 -->
+      <div v-if="task.traceType === '3'">
+        <strong>{{ t('views.traceManage.task.imsi') }}:&nbsp;</strong>
+        {{ task.imsi }}
+      </div>
+    </template>
+    <template #title>
+      <span>{{ task.title }}</span>
+    </template>
+    <QuestionCircleOutlined />
+  </a-popover>
+</template>
+
+<style lang="css" scoped></style>
diff --git a/src/views/traceManage/task/data.vue b/src/views/traceManage/task/data.vue
index f812ae34..ff7d0ddf 100644
--- a/src/views/traceManage/task/data.vue
+++ b/src/views/traceManage/task/data.vue
@@ -10,6 +10,7 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useDictStore from '@/store/modules/dict';
 import useTabsStore from '@/store/modules/tabs';
 import { type Dayjs } from 'dayjs';
+import TaskInfoIcon from './components/TaskInfoIcon.vue';
 import useI18n from '@/hooks/useI18n';
 import { getTraceData, listTraceData } from '@/api/trace/task';
 import { decode } from 'js-base64';
@@ -215,7 +216,7 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
   fnGetList(1);
 }
 
-/**查询备份信息列表, pageNum初始页数 */
+/**查询数据信息列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
@@ -429,6 +430,8 @@ onMounted(() => {
             {{ t('views.traceManage.task.traceId') }}:&nbsp;
             <strong>{{ traceId }}</strong>
           </span>
+          <!-- 任务信息 -->
+          <TaskInfoIcon :trace-id="traceId" />
         </a-space>
       </template>
 
diff --git a/src/views/traceManage/task/index.vue b/src/views/traceManage/task/index.vue
index 43ae3eda..f4fec982 100644
--- a/src/views/traceManage/task/index.vue
+++ b/src/views/traceManage/task/index.vue
@@ -40,6 +40,9 @@ let dict: {
   traceInterfaces: [],
 });
 
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
+
 /**网元类型_多neId */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
 
@@ -47,9 +50,12 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 let queryParams = reactive({
   /**网元类型 */
   neType: '',
-  /**记录时间 */
-  startTime: '',
-  endTime: '',
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**标题 */
+  title: '',
   /**排序字段 */
   sortField: 'start_time',
   /**排序方式 */
@@ -64,13 +70,15 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     neType: '',
-    startTime: '',
-    endTime: '',
+    startTime: undefined,
+    endTime: undefined,
+    title: '',
     sortField: 'start_time',
     sortOrder: 'asc',
     pageNum: 1,
     pageSize: 20,
   });
+  queryRangePicker.value = undefined;
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -107,6 +115,13 @@ let tableColumns: ColumnsType = [
     align: 'left',
     width: 150,
   },
+  {
+    title: t('views.traceManage.task.title'),
+    dataIndex: 'title',
+    align: 'left',
+    width: 200,
+    ellipsis: true,
+  },
   {
     title: t('views.traceManage.task.trackType'),
     dataIndex: 'traceType',
@@ -237,6 +252,19 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
+  }
+
   listTraceTask(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
       // 取消勾选
@@ -275,11 +303,12 @@ type ModalStateType = {
   from: {
     id?: string;
     neList: string; // 网元列表 neType_neId 例如 UDM_001,AMF_001
-    /**1-Interface,2-Device,3-User */
-    traceType: string;
     startTime?: number;
     endTime?: number;
+    title: string;
     remark?: string;
+    /**1-Interface,2-Device,3-User */
+    traceType: string;
     /**1接口跟踪 */
     interfaces?: string;
     /**2设备跟踪 */
@@ -306,10 +335,11 @@ let modalState: ModalStateType = reactive({
     id: undefined,
     neList: '',
     traceId: undefined,
-    traceType: '3',
     startTime: undefined,
     endTime: undefined,
+    title: '',
     remark: '',
+    traceType: '3',
     /**1接口跟踪 */
     interfaces: '',
     /**2设备跟踪 */
@@ -345,6 +375,12 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.rangePickerPlease'),
       },
     ],
+    title: [
+      {
+        required: true,
+        message: t('common.inputPlease'),
+      },
+    ],
     // 用户跟踪
     imsi: [
       {
@@ -499,7 +535,7 @@ function fnModalOpenByEdit(id?: string) {
  */
 function fnModalOk() {
   const from = toRaw(modalState.from);
-  let valids = ['traceType', 'neList', 'endTime'];
+  let valids = ['title', 'traceType', 'neList', 'endTime'];
   if (from.traceType === '1') {
     valids = valids.concat(['interfaces']);
   }
@@ -577,36 +613,20 @@ onMounted(() => {
   );
 
   // 获取网元网元列表
-  useNeInfoStore()
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        if (res.data.length > 0) {
-          // 过滤不可用的网元
-          neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
-            (item: any) => {
-              return ['AMF', 'AUSF', 'SMF', 'UDM', 'PCF'].includes(item.value);
-            }
-          );
-          if (neCascaderOptions.value.length === 0) {
-            message.warning({
-              content: t('common.noData'),
-              duration: 3,
-            });
-            return;
-          }
-        }
-      } else {
-        message.warning({
-          content: t('common.noData'),
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      // 获取列表数据
-      fnGetList();
+  neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
+    (item: any) => {
+      return ['AMF', 'AUSF', 'SMF', 'UDM', 'PCF', 'UPF'].includes(item.value); // 过滤不可用的网元
+    }
+  );
+  if (neCascaderOptions.value.length === 0) {
+    message.warning({
+      content: t('common.noData'),
+      duration: 3,
     });
+    return;
+  }
+  // 获取列表数据
+  fnGetList();
 });
 </script>
 
@@ -632,32 +652,15 @@ onMounted(() => {
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.traceManage.task.startTime')"
-              name="startTime"
+              :label="t('views.traceManage.task.title')"
+              name="title"
             >
-              <a-date-picker
-                show-time
-                v-model:value="queryParams.startTime"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                :placeholder="t('views.traceManage.task.startTime')"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.endTime')"
-              name="endTime"
-            >
-              <a-date-picker
-                show-time
-                v-model:value="queryParams.endTime"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                :placeholder="t('views.traceManage.task.endTime')"
-                style="width: 100%"
-              />
+              <a-input
+                v-model:value="queryParams.title"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              >
+              </a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -674,6 +677,22 @@ onMounted(() => {
               </a-space>
             </a-form-item>
           </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.rangePicker')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
         </a-row>
       </a-form>
     </a-card>
@@ -842,6 +861,28 @@ onMounted(() => {
         :label-wrap="true"
         :disabled="!!modalState.from.id"
       >
+        <a-form-item
+          :label="t('views.traceManage.task.title')"
+          name="title"
+          v-bind="modalStateFrom.validateInfos.title"
+        >
+          <a-input
+            v-model:value="modalState.from.title"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+          >
+          </a-input>
+        </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: 1, maxRows: 6 }"
+            :maxlength="450"
+            :show-count="true"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
+          />
+        </a-form-item>
+
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -891,21 +932,8 @@ onMounted(() => {
             format="YYYY-MM-DD HH:mm:ss"
             style="width: 100%"
             :disabled-date="fnRangePickerDisabledDate"
-            :placeholder="[
-              t('views.traceManage.task.startTime'),
-              t('views.traceManage.task.endTime'),
-            ]"
           ></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: 1, maxRows: 6 }"
-            :maxlength="450"
-            :show-count="true"
-            :placeholder="t('views.traceManage.task.remarkPlease')"
-          />
-        </a-form-item>
 
         <!-- 接口跟踪 -->
         <template v-if="modalState.from.traceType === '1'">