feat: 网元跟踪数据支持下载pcap文件

src/views/traceManage/task/analyze.vue

@@ -2,6 +2,7 @@
 import { onBeforeUnmount, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
+import { message, Modal } from 'ant-design-vue/lib';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
 import PacketTable from '../tshark/components/PacketTable.vue';
@@ -14,6 +15,7 @@ import { filePullTask } from '@/api/trace/task';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
 import useTabsStore from '@/store/modules/tabs';
+import saveAs from 'file-saver';
 const route = useRoute();
 const router = useRouter();
 const tabsStore = useTabsStore();
@@ -42,6 +44,44 @@ function fnClose() {
   }
 }
 
+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+
+/**信息文件下载 */
+function fnDownloadFile() {
+  if (downLoading.value) return;
+  const fileName = `trace_${traceId.value}.pcap`
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.neFile.downTip', { fileName }),
+    onOk() {
+      downLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      filePullTask(traceId.value)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${fileName}`);
+          } else {
+            message.error({
+              content: t('views.logManage.neFile.downTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          downLoading.value = false;
+        });
+    },
+  });
+}
+
 /**获取PCAP文件 */
 function fnFilePCAP() {
   filePullTask(traceId.value).then(res => {
@@ -120,8 +160,16 @@ onBeforeUnmount(() => {
             <template #icon><CloseOutlined /></template>
             {{ t('common.close') }}
           </a-button>
+          <a-button
+            type="primary"
+            :loading="downLoading"
+            @click.prevent="fnDownloadFile()"
+          >
+            <template #icon><DownloadOutlined /></template>
+            {{ t('common.downloadText') }}
+          </a-button>
           <span>
-            跟踪编号：
+            {{ t('views.traceManage.task.traceId') }}:&nbsp;
             <strong>{{ traceId }}</strong>
           </span>
         </a-space>