fe.ems.vue3/src/views/traceManage/task/components/TaskInfoIcon.vue

<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({
  id: {
    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.id);
    });
});
</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>