From 4c9fe192f25fe34d84bea92e7f43db2da909195f Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 22 Aug 2024 10:19:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=86=E5=8F=B2=E6=8A=93=E5=8C=85?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts            |   5 +-
 src/i18n/locales/zh-CN.ts            |   5 +-
 src/views/traceManage/pcap/file.vue  | 404 +++++++++++++++++++++++++++
 src/views/traceManage/pcap/index.vue |  40 ++-
 4 files changed, 448 insertions(+), 6 deletions(-)
 create mode 100644 src/views/traceManage/pcap/file.vue

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 258b565d..90599a57 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1088,13 +1088,16 @@ export default {
         cmd: 'Command',
         execCmd: "Common Command Options",
         execCmd2: "Filter Protocol Port Command",
-        execCmd3: "File Split By Time, Number Of Retained File (-G 10 -W 7)",
+        execCmd3: "File Split By Time units of seconds (-G 10), Generated Max File Number (-W 7)",
         execUPFCmdA: 'Standard Edition - UPF with other NE anomalous packet capture analysis',
         execUPFCmdB: 'Standard Edition - UPF anomalies requiring packet capture analysis',
         batchOper: 'Batch Operations',
         batchStartText: 'Batch Start',
         batchStopText: 'Batch Stop',
         batchDownText: 'Batch Download',
+        fileView: 'Historical Packet Capture Files',
+        fileUPF: 'Standard Edition',
+        fileUPFTip: 'UPF internal packet capture and analysis packet',
         textStart: "Start",
         textStop: "Stop",
         textLog: "Log",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 92996b74..6e365396 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1088,13 +1088,16 @@ export default {
         cmd: '命令',
         execCmd: "通用命令选项",
         execCmd2: "过滤协议端口命令",
-        execCmd3: "按时间分割的文件，保留的文件数量 (-G 10 -W 7)",
+        execCmd3: "分割文件按时间单位秒 (-G 10 )，最多生成文件数量 (-W 7)",
         execUPFCmdA: '标准版-UPF配合其他网元异常抓包分析',
         execUPFCmdB: '标准版-UPF异常需要抓包分析',
         batchOper: '批量操作',
         batchStartText: '批量开始',
         batchStopText: '批量停止',
         batchDownText: '批量下载',
+        fileView: '历史抓包文件',
+        fileUPF: '标准版',
+        fileUPFTip: 'UPF内部抓包分析包',
         textStart: "开始",
         textStop: "停止",
         textLog: "日志",
diff --git a/src/views/traceManage/pcap/file.vue b/src/views/traceManage/pcap/file.vue
new file mode 100644
index 00000000..02e25a82
--- /dev/null
+++ b/src/views/traceManage/pcap/file.vue
@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { Modal, message } from 'ant-design-vue/lib';
+import { parseDateToStr } from '@/utils/date-utils';
+import { getNeFile, listNeFiles } from '@/api/tool/neFile';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useTabsStore from '@/store/modules/tabs';
+import useI18n from '@/hooks/useI18n';
+import saveAs from 'file-saver';
+import { useRoute, useRouter } from 'vue-router';
+const tabsStore = useTabsStore();
+const neInfoStore = useNeInfoStore();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+// 获取地址栏参数
+const routeParams = route.query as Record<string, any>;
+
+/**网元参数 */
+let neTypeSelect = ref<string[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: '',
+  neId: '',
+  /**读取路径 */
+  path: '',
+  /**前缀过滤 */
+  search: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = reactive([
+  {
+    title: t('views.logManage.neFile.fileMode'),
+    dataIndex: 'fileMode',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('views.logManage.neFile.size'),
+    dataIndex: 'size',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.modifiedTime'),
+    dataIndex: 'modifiedTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value * 1000);
+    },
+    width: 150,
+  },
+  {
+    title: t('views.logManage.neFile.fileName'),
+    dataIndex: 'fileName',
+    align: 'left',
+    resizable: true,
+    width: 200,
+    minWidth: 100,
+    maxWidth: 350,
+  },
+  {
+    title: t('common.operate'),
+    key: 'fileName',
+    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();
+  },
+});
+
+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+
+/**信息文件下载 */
+function fnDownloadFile(row: Record<string, any>) {
+  if (downLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.neFile.downTip', { fileName: row.fileName }),
+    onOk() {
+      downLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      getNeFile({
+        neType: queryParams.neType,
+        neId: queryParams.neId,
+        path: queryParams.path,
+        fileName: row.fileName,
+        delTemp: true,
+      })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.fileName}`);
+          } else {
+            message.error({
+              content: t('views.logManage.neFile.downTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          downLoading.value = false;
+        });
+    },
+  });
+}
+
+/**tmp目录下，UPF标准版内部输出目录 */
+let tmp = ref<boolean>(false);
+
+/**UPF标准版内部抓包的输出目录 */
+function fnUPFTmp() {
+  fnDirCD('/tmp', 0);
+}
+
+/**关闭跳转 */
+function fnClose() {
+  const to = tabsStore.tabClose(route.path);
+  if (to) {
+    router.push(to);
+  } else {
+    router.back();
+  }
+}
+
+/**访问路径 */
+let nePathArr = ref<string[]>([]);
+
+/**进入目录 */
+function fnDirCD(dir: string, index?: number) {
+  if (index === undefined) {
+    nePathArr.value.push(dir);
+    queryParams.search = '';
+    fnGetList(1);
+    return;
+  }
+  if (index === 0) {
+    const neType = queryParams.neType;
+    if (neType === 'UPF' && tmp.value) {
+      nePathArr.value = ['/tmp'];
+      queryParams.search = `${neType}_${queryParams.neId}`;
+    } else {
+      nePathArr.value = [
+        `/tmp/omc/tcpdump/${neType.toLowerCase()}/${queryParams.neId}`,
+      ];
+      queryParams.search = '';
+    }
+
+    fnGetList(1);
+  } else {
+    nePathArr.value = nePathArr.value.slice(0, index + 1);
+    queryParams.search = '';
+    fnGetList(1);
+  }
+}
+
+/**网元类型选择对应修改 */
+function fnNeChange(keys: any, _: any) {
+  // 不是同类型时需要重新加载
+  if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
+    const neType = keys[0];
+    queryParams.neType = neType;
+    queryParams.neId = keys[1];
+    if (neType === 'UPF' && tmp.value) {
+      nePathArr.value = ['/tmp'];
+      queryParams.search = `${neType}_${keys[1]}`;
+    } else {
+      nePathArr.value = [`/tmp/omc/tcpdump/${neType.toLowerCase()}/${keys[1]}`];
+      queryParams.search = '';
+    }
+    fnGetList(1);
+  }
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (queryParams.neId === '') {
+    message.warning({
+      content: t('views.logManage.neFile.neTypePlease'),
+      duration: 2,
+    });
+    return;
+  }
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  queryParams.path = nePathArr.value.join('/');
+  listNeFiles(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      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);
+      }
+    } else {
+      message.error(res.msg, 3);
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  neInfoStore.fnNelist().then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      if (res.data.length === 0) {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      } else if (routeParams.neType && routeParams.neId) {
+        neTypeSelect.value = [routeParams.neType, routeParams.neId];
+        fnNeChange(neTypeSelect.value, undefined);
+      }
+    }
+  });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-form :model="queryParams" name="queryParams" layout="horizontal">
+          <a-row :gutter="16" :wrap="true">
+            <a-col>
+              <a-form-item style="margin-bottom: 0">
+                <a-button type="default" @click.prevent="fnClose()">
+                  <template #icon><CloseOutlined /></template>
+                  {{ t('common.close') }}
+                </a-button>
+              </a-form-item>
+            </a-col>
+            <a-col>
+              <a-form-item
+                :label="t('views.logManage.neFile.neType')"
+                name="neType"
+                style="margin-bottom: 0"
+              >
+                <a-cascader
+                  v-model:value="neTypeSelect"
+                  :options="neInfoStore.getNeCascaderOptions"
+                  @change="fnNeChange"
+                  :allow-clear="false"
+                  :placeholder="t('views.logManage.neFile.neTypePlease')"
+                  :disabled="downLoading || tableState.loading"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col v-if="nePathArr.length > 0">
+              <a-form-item
+                :label="t('views.logManage.neFile.nePath')"
+                name="configName"
+                style="margin-bottom: 0"
+              >
+                <a-breadcrumb>
+                  <a-breadcrumb-item
+                    v-for="(path, index) in nePathArr"
+                    :key="path"
+                    @click="fnDirCD(path, index)"
+                  >
+                    {{ path }}
+                  </a-breadcrumb-item>
+                </a-breadcrumb>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip placement="topRight" v-if="neTypeSelect[0] === 'UPF'">
+            <template #title>
+              {{ t('views.traceManage.pcap.fileUPFTip') }}
+            </template>
+            <a-checkbox v-model:checked="tmp" @change="fnUPFTmp()">
+              {{ t('views.traceManage.pcap.fileUPF') }}
+            </a-checkbox>
+          </a-tooltip>
+          <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="fileName"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 800 }"
+        @resizeColumn="(w:number, col:any) => (col.width = w)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'fileName'">
+            <a-space :size="8" align="center">
+              <a-button
+                type="link"
+                :loading="downLoading"
+                @click.prevent="fnDownloadFile(record)"
+                v-if="record.fileType === 'file'"
+              >
+                <template #icon><DownloadOutlined /></template>
+                {{ t('common.downloadText') }}
+              </a-button>
+              <a-button
+                type="link"
+                :loading="downLoading"
+                @click.prevent="fnDirCD(record.fileName)"
+                v-if="record.fileType === 'dir'"
+              >
+                <template #icon><FolderOutlined /></template>
+                {{ t('views.logManage.neFile.dirCd') }}
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/traceManage/pcap/index.vue b/src/views/traceManage/pcap/index.vue
index 05619e91..4a13d09d 100644
--- a/src/views/traceManage/pcap/index.vue
+++ b/src/views/traceManage/pcap/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, reactive } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { message, Modal } from 'ant-design-vue/lib';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import { PageContainer } from 'antdv-pro-layout';
@@ -14,6 +15,9 @@ import { getNeFile } from '@/api/tool/neFile';
 import saveAs from 'file-saver';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
+import { MENU_PATH_INLINE } from '@/constants/menu-constants';
+const router = useRouter();
+const route = useRoute();
 const { t } = useI18n();
 
 /**对话框对象信息状态类型 */
@@ -412,11 +416,18 @@ function fnDownPCAP(row?: Record<string, any>) {
         if (from.data.neType === 'UPF' && taskCode.startsWith('/tmp')) {
           const fileName = taskCode.substring(taskCode.lastIndexOf('/') + 1);
           reqArr.push(
-            getNeFile(Object.assign({ path: '/tmp', fileName }, from.data))
+            getNeFile(
+              Object.assign(
+                { path: '/tmp', fileName, delTemp: true },
+                from.data
+              )
+            )
           );
         } else {
           reqArr.push(
-            dumpDownload(Object.assign({ taskCode: taskCode }, from.data))
+            dumpDownload(
+              Object.assign({ taskCode: taskCode, delTemp: true }, from.data)
+            )
           );
         }
       }
@@ -483,7 +494,7 @@ function fnBatchOper(key: string) {
 
 /**
  * 对话框弹出显示为 查看
- * @param dictId 字典编号id
+ * @param dictId 编号id
  */
 function fnModalVisibleByVive(id: string | number) {
   const from = modalState.from[id];
@@ -501,6 +512,22 @@ function fnModalCancel() {
   modalState.logMsg = '';
 }
 
+/**跳转文件数据页面 */
+function fnFileView(row?: Record<string, any>) {
+  let query = undefined;
+  if (row) {
+    const from = modalState.from[row.id];
+    query = {
+      neId: from.data.neId,
+      neType: from.data.neType,
+    };
+  }
+  router.push({
+    path: `${route.path}${MENU_PATH_INLINE}/file`,
+    query: query,
+  });
+}
+
 onMounted(() => {
   // 获取网元列表
   fnGetList();
@@ -513,6 +540,11 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
+          <a-button @click="fnFileView()">
+            <FileSearchOutlined />
+            {{ t('views.traceManage.pcap.fileView') }}
+          </a-button>
+
           <a-dropdown trigger="click">
             <a-button :disabled="tableState.selectedRowKeys.length <= 0">
               {{ t('views.traceManage.pcap.batchOper') }}
@@ -661,7 +693,7 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 详情框 -->
+    <!-- 日志信息框 -->
     <ProModal
       :drag="true"
       :width="800"