feat: 跟踪任务添加标题，编号后面加任务详情

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>