ref: 重构抓包功能页面

src/api/traceManage/pcap.ts

@@ -1,33 +1,27 @@
 import { request } from '@/plugins/http-fetch';
 
-// 网元抓包生成pcap
+// 网元抓包PACP 开始
-export function tcpdumpNeTask(
+export function dumpStart(data: Record<string, string>) {
-  signal: AbortSignal,
-  data: Record<string, string>
-) {
   return request({
-    url: '/tcpdump/ne',
+    url: '/tcpdump/start',
     method: 'post',
     data: data,
-    signal: signal,
   });
 }
 
-// 网元抓包pcap文件下载
+// 网元抓包PACP 结束
-export function tcpdumpPcapDownload(data: Record<string, string>) {
+export function dumpStop(data: Record<string, string>) {
   return request({
-    url: '/tcpdump/download',
+    url: '/tcpdump/stop',
     method: 'post',
     data: data,
-    responseType: 'blob',
-    timeout: 180_000,
   });
 }
 
-// 网元抓包生成pcap
+// UPF标准版内部抓包
-export function tcpdumpNeUPFTask(data: Record<string, string>) {
+export function traceUPF(data: Record<string, string>) {
   return request({
-    url: '/tcpdump/neUPF',
+    url: '/tcpdump/traceUPF',
     method: 'post',
     data: data,
   });

src/i18n/locales/en-US.ts

@@ -685,33 +685,29 @@ export default {
         taskDownTip: 'Confirm downloading the signaling details HTML file?',
       },
       pcap: {
-        cardTitle: 'PCAP Capture',
+        capArgPlease: 'Please enter tcpdump -i any support parameter',
-        neType: 'Type',
+        cmd: 'Command',
-        neTypePlease: 'Please select the type of network element',
+        execCmd: "Generic tcpdump packet capture command",
-        neIp: 'IP Address',
+        execCmdsSctp: "Generic tcpdump filter sctp and port commands",
-        capArg: 'Capture Parameters',
+        execUPFCmdA: 'Suitable for anomalous packet capture of other NE',
-        capArgPlease: 'Please enter tcpdump any support parameters!',
+        execUPFCmdB: 'Suitable for UPF anomaly packet capture analysis',
-        capTime: 'Duration in seconds',
+        textStart: "Start",
-        capTimePlease: 'Please enter the duration, up to 120 seconds',
+        textStartBatch: "Batch Start",
-        capLog: 'Execution Log',
+        textStop: "Stop",
-        capDownText: 'Download PCAP file',
+        textStopBatch: "Batch Stop",
-        runText: 'Execute',
+        textLog: "Log",
-        runTimeText: 'Execute {s} seconds',
+        textLogMsg: "Log Info",
-        stopText: 'Interrupt',
+        textDown: "Download",
-        capArgUPFPlease: 'Please select the packet capture command supported by UPF',
+        downOk: "{title} file download complete",
-        capStart: 'Start capturing packets',
+        downErr: "{title} file download exception",
-        capStop: 'Stop capturing packets',
+        textSelect: "check list",
-        execTimeout: 'Execution timeout',
+        startTip: "Are you sure you want to start the {title} packet grabbing task?",
-        execSuccess: 'Execution completed',
+        startOk: "{title} the mission has begun",
-        execFailed: 'Execution failed',
+        startErr: "{title} mission anomaly",
-        execBreak: 'Break Execution',
+        stopTip: "Are you sure you want to stop the {title} grabbing task?",
-        noFileName: 'Invalid file name',
+        stopOk: "{title} mandate closed",
-        execUPFStartA: 'Executed, please stop capturing packets according to the situation',
+        stopErr: "{title} mission anomaly",
-        execUPFStart: 'Execution successful, please stop capturing packets according to the situation',
+        stopNotRun: "{title} not running",
-        execUPFStopA: 'Stopped, please start capturing packets according to the situation',
-        execUPFStop: 'Execution successful, packet capture stopped',
-        execUPFCmdA: 'Suitable for other network element anomalies',
-        execUPFCmdB: 'Suitable for UPF anomalies',
       },
       task: {
         neTypePlease: 'Query network element type',

src/i18n/locales/zh-CN.ts

@@ -685,33 +685,29 @@ export default {
         taskDownTip: '确认下载信令详情HTML文件?',
       },
       pcap: {
-        cardTitle: 'PCAP捕获',
+        capArgPlease: '请输入tcpdump -i any支持参数',
-        neType: '网元类型',
+        cmd: '命令',
-        neTypePlease: '请选择网元类型',
+        execCmd: "通用tcpdump抓包命令",
-        neIp: '网元IP地址',
+        execCmdsSctp: "过滤sctp和port命令",
-        capArg: '抓包参数',
-        capArgPlease: '请输入tcpdump any支持参数!',
-        capTime: "时长（秒's）",
-        capTimePlease: '请输入持续时长，最长120秒',
-        capLog: '执行日志',
-        capDownText: '下载PCAP文件',
-        runText: '执行',
-        runTimeText: '执行 {s} 秒',
-        stopText: '中断',
-        capArgUPFPlease: '请选择UPF支持的抓包命令',
-        capStart: '开始抓包',
-        capStop: '停止抓包',
-        execTimeout: '执行超时',
-        execSuccess: '执行完成',
-        execFailed: '执行失败',
-        execBreak: '中断执行',
-        noFileName: '无效文件名',
-        execUPFStartA: '已经执行, 请根据情况停止抓包',
-        execUPFStart: '执行成功, 请根据情况停止抓包',
-        execUPFStopA: '已经停止, 请根据情况开始抓包',
-        execUPFStop: '执行成功, 抓包已停止',
         execUPFCmdA: '适合其他网元异常，UPF配合抓包的情况',
         execUPFCmdB: '适合UPF异常需要抓包分析的情况',
+        textStart: "开始",
+        textStartBatch: "批量开始",
+        textStop: "停止",
+        textStopBatch: "批量停止",
+        textLog: "日志",
+        textLogMsg: "日志信息",
+        textDown: "下载",
+        downOk: "{title} 文件下载完成",
+        downErr: "{title} 文件下载异常",
+        textSelect: "勾选的",
+        startTip: "确认要开始 {title} 抓包任务吗？",
+        startOk: "{title} 任务已开始",
+        startErr: "{title} 任务异常",
+        stopTip: "确认要停止 {title} 抓包任务吗？",
+        stopOk: "{title} 任务已结束",
+        stopErr: "{title} 任务异常",
+        stopNotRun: "{title} 任务未运行",
       },
       task: {
         neTypePlease: '请选择网元类型',

src/views/traceManage/pcap/index.vue

@@ -1,57 +1,48 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, toRaw } from 'vue';
+import { onMounted, reactive } from 'vue';
+import { message, Modal } from 'ant-design-vue/lib';
+import { ColumnsType } from 'ant-design-vue/lib/table';
 import { PageContainer } from 'antdv-pro-layout';
+import { dumpStart, dumpStop, traceUPF } from '@/api/traceManage/pcap';
+import { listNe } from '@/api/ne/ne';
+import { getNeFile } from '@/api/tool/neFile';
 import saveAs from 'file-saver';
-import useNeInfoStore from '@/store/modules/neinfo';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import {
-  RESULT_CODE_ERROR,
-  RESULT_CODE_SUCCESS,
-} from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
-import { message, Form } from 'ant-design-vue/lib';
-import {
-  tcpdumpNeTask,
-  tcpdumpNeUPFTask,
-  tcpdumpPcapDownload,
-} from '@/api/traceManage/pcap';
-import { ref } from 'vue';
-const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**网元类型 */
-  neType: string[];
   /**表单数据 */
   from: Record<string, any>;
+  /**tcpdump命令组 */
+  cmdOptions: Record<string, any>[];
   /**UPF命令组 */
-  upfCmdOptions: Record<string, any>[];
+  cmdOptionsUPF: Record<string, any>[];
-  /**UPF是否执行过 */
+  /**详情框是否显示 */
-  upfExec: boolean;
+  visibleByView: boolean;
-  /**确定按钮 loading */
+  /**详情框内容 */
-  confirmLoading: boolean;
+  logMsg: string;
-  /**执行日志 */
-  execLogMsg: string;
-  /**文件名 */
-  fileName: string;
-  /**下载文件按钮 */
-  downBtn: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  neType: [],
+  from: {},
-  from: {
+  cmdOptions: [
-    ip: '',
+    {
-    timestamp: '', // 时间戳记录文件时间
+      label: t('views.traceManage.pcap.execCmd'),
-    // 普通网元
+      start: '-n -s 0 -v -w',
-    cmd: '-n -s 0 -v -w',
+      stop: '',
-    timeout: 60,
+      value: 'any',
-    // upf
+    },
-    upfStart: '',
+    {
-    upfStop: '',
+      label: t('views.traceManage.pcap.execCmdsSctp'),
-  },
+      start: 'sctp or tcp port 3030 or 8088',
-  upfCmdOptions: [
+      stop: '',
+      value: 'any2',
+    },
+  ],
+  cmdOptionsUPF: [
     {
       label: t('views.traceManage.pcap.execUPFCmdA'),
       start: 'pcap trace rx tx max 100000 intfc any',
@@ -65,411 +56,434 @@ let modalState: ModalStateType = reactive({
       value: 'pcap dispatch',
     },
   ],
-  upfExec: false,
+  visibleByView: false,
-  confirmLoading: false,
+  logMsg: '',
-  execLogMsg: '',
-  fileName: '',
-  downBtn: false,
 });
 
-/**网元类型选择对应修改 */
+/**表格状态类型 */
-function fnNeChange(_: any, item: any) {
+type TabeStateType = {
-  modalState.from.ip = item[1].ip;
+  /**加载等待 */
-  modalState.execLogMsg = '';
+  loading: boolean;
-  modalState.fileName = '';
+  /**记录数据 */
-  modalState.downBtn = false;
+  data: object[];
-  runTime.value = 0;
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.configManage.neManage.neType'),
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.configManage.neManage.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.configManage.neManage.neName'),
+    dataIndex: 'neName',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.configManage.neManage.ip'),
+    dataIndex: 'ip',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.traceManage.pcap.cmd'),
+    key: 'cmd',
+    dataIndex: 'serverState',
+    align: 'left',
+    width: 300,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+    fixed: 'right',
+  },
+];
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
 }
 
-/**对话框内表单属性和校验规则 */
+/**查询全部网元数据列表 */
-const modalStateFrom = Form.useForm(
+function fnGetList() {
-  modalState.from,
+  if (tableState.loading) return;
-  reactive({
+  tableState.loading = true;
-    cmd: [
+  listNe({
-      { required: true, message: t('views.traceManage.pcap.capArgPlease') },
+    bandStatus: false,
-    ],
-    timeout: [
-      { required: true, message: t('views.traceManage.pcap.capTimePlease') },
-    ],
-    upfStart: [
-      { required: true, message: t('views.traceManage.pcap.capArgUPFPlease') },
-    ],
-    upfStop: [
-      { required: true, message: t('views.traceManage.pcap.capArgUPFPlease') },
-    ],
-  })
-);
-
-// 创建 AbortController 实例
-let controller = new AbortController();
-let timeoutId: any = 0;
-let runTime = ref<number>(0);
-
-/**普通抓包执行 */
-function fnStart() {
-  modalStateFrom
-    .validate(['cmd', 'timeout'])
-    .then(() => {
-      modalState.confirmLoading = true;
-      modalState.from.timestamp = `${Date.now()}`;
-      const from = toRaw(modalState.from);
-      controller = new AbortController();
-      const signal = controller.signal;
-      timeoutId = setInterval(() => {
-        runTime.value++;
-        if (runTime.value >= from.timeout + 5) {
-          clearInterval(timeoutId);
-          runTime.value = 0;
-          message.warning({
-            content: t('views.traceManage.pcap.execTimeout'),
-            duration: 3,
-          });
-          // 超时终止请求
-          controller.abort();
-        }
-      }, 1000);
-
-      tcpdumpNeTask(signal, {
-        neType: modalState.neType[0],
-        neId: modalState.neType[1],
-        timestamp: from.timestamp,
-        timeout: from.timeout,
-        cmd: from.cmd,
-      })
-        .then(res => {
-          console.log(res)
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('views.traceManage.pcap.execSuccess'),
-              duration: 3,
-            });
-            const msg = res.data.msg;
-            let logmsg = res.data.cmd + '\n\n' + msg;
-            logmsg = logmsg.replace(' \n', '\n\n');
-            modalState.execLogMsg = logmsg;
-            modalState.fileName = res.data.fileName;
-            // 正常抓包时才显示文件下载
-            modalState.downBtn =
-              msg.indexOf('tcpdump: listening on any,') !== -1;
-          } else if (
-            res.code === RESULT_CODE_ERROR &&
-            res.msg.includes('imeout')
-          ) {
-            message.warning({
-              content: t('views.traceManage.pcap.execBreak'),
-              duration: 3,
-            });
-          } else {
-            message.error({
-              content: t('views.traceManage.pcap.execFailed'),
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          clearInterval(timeoutId);
-          runTime.value = 0;
-          modalState.confirmLoading = false;
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**普通抓包中断 */
-function fnStop() {
-  controller.abort(); // 终止请求
-  clearInterval(timeoutId);
-  runTime.value = 0;
-}
-
-/**下载PCAP文件 */
-function fnDownPCAP() {
-  if (!modalState.fileName) {
-    message.warning({
-      content: t('views.traceManage.pcap.noFileName'),
-      duration: 2,
-    });
-    return;
-  }
-  const key = 'tcpdumpPcapDownload';
-  message.loading({ content: t('common.loading'), key });
-  tcpdumpPcapDownload({
-    neType: modalState.neType[0],
-    neId: modalState.neType[1],
-    fileName: modalState.fileName,
   }).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
+    if (
-      message.success({
+      res.code === RESULT_CODE_SUCCESS &&
-        content: t('views.traceManage.pcap.execSuccess'),
+      Array.isArray(res.data) &&
-        key,
+      res.data.length > 0
-        duration: 3,
+    ) {
-      });
+      tableState.data = res.data;
-      saveAs(res.data, modalState.fileName);
+      // 初始网元参数表单
+      const { start, stop } = modalState.cmdOptions[0];
+      for (const item of res.data) {
+        modalState.from[item.id] = {
+          loading: false,
+          title: item.neName, // 网元名
+          cmdStart: start,
+          cmdStop: stop, // upf需要停止命令
+          out: '',
+          log: '',
+          data: {
+            neType: item.neType,
+            neId: item.neId,
+          },
+        };
+      }
     } else {
-      message.error({
+      message.warning({
-        content: `${res.msg}`,
+        content: t('common.noData'),
-        key,
+        duration: 2,
-        duration: 3,
       });
     }
+    tableState.loading = false;
   });
 }
 
-/**UPF抓包命令选择 */
+/**抓包命令选择 */
-function fnUPFSelectCmd(value: any, option: any) {
+function fnSelectCmd(id: any, option: any) {
-  modalState.from.upfStart = option.start;
+  modalState.from[id].cmdStart = option.start;
-  modalState.from.upfStop = option.stop;
+  modalState.from[id].cmdStop = option.stop;
 }
 
-/**UPF抓包执行 */
+/**
-function fnUPF(runType: 'start' | 'stop') {
+ * 开始
-  modalStateFrom
+ * @param row 行记录
-    .validate([runType === 'start' ? 'upfStart' : 'upfStop'])
+ */
-    .then(() => {
+function fnRecordStart(row?: Record<string, any>) {
-      modalState.confirmLoading = true;
+  let neIDs: string[] = [];
-      if (runType === 'start') {
+  if (row) {
-        modalState.downBtn = false;
+    neIDs = [`${row.id}`];
-        modalState.from.timestamp = `${Date.now()}`;
+  } else {
-      }
+    row = {
-      const from = toRaw(modalState.from);
+      neName: t('views.traceManage.pcap.textSelect'),
-      tcpdumpNeUPFTask({
+    };
-        neType: modalState.neType[0],
+    neIDs = tableState.selectedRowKeys.map(s => `${s}`);
-        neId: modalState.neType[1],
+  }
-        timestamp: from.timestamp,
+
-        runType: runType === 'start' ? 'start_str' : 'stop_str',
+  Modal.confirm({
-        cmd: runType === 'start' ? from.upfStart : from.upfStop,
+    title: t('common.tipTitle'),
-      })
+    content: t('views.traceManage.pcap.startTip', { title: row.neName }),
-        .then(res => {
+    onOk() {
-          if (res.code === RESULT_CODE_SUCCESS) {
+      const hide = message.loading(t('common.loading'), 0);
-            let logmsg = res.data.cmd + '\n\n' + res.data.msg;
+      const fromArr = neIDs.map(id => modalState.from[id]);
-            logmsg = logmsg.replace(' \n', '\n\n');
+      const reqArr = fromArr.map(from => {
-            modalState.execLogMsg = logmsg;
+        const data = Object.assign({ cmd: from.cmdStart }, from.data);
-            modalState.fileName = res.data.fileName;
+        if (from.data.neType === 'UPF' && from.cmdStart.startsWith('pcap')) {
-            if (runType === 'start') {
+          return traceUPF(data);
-              modalState.upfExec = true;
+        }
-              if (res.data.msg.includes('already')) {
+        return dumpStart(data);
-                message.warning({
+      });
-                  content: t('views.traceManage.pcap.execUPFStartA'),
+      Promise.allSettled(reqArr)
-                  duration: 10,
+        .then(resArr => {
+          resArr.forEach((res, idx) => {
+            const title = fromArr[idx].title;
+            if (res.status === 'fulfilled') {
+              const resV = res.value;
+              if (resV.code === RESULT_CODE_SUCCESS) {
+                fromArr[idx].out = resV.data.out;
+                fromArr[idx].log = resV.data.log;
+                fromArr[idx].loading = true;
+                message.success({
+                  content: t('views.traceManage.pcap.startOk', { title }),
+                  duration: 3,
                 });
               } else {
-                message.success({
-                  content: t('views.traceManage.pcap.execUPFStart'),
-                  duration: 10,
-                });
-              }
-            }
-            if (runType === 'stop') {
-              modalState.upfExec = false;
-              if (res.data.msg.includes('already')) {
                 message.warning({
-                  content: t('views.traceManage.pcap.execUPFStopA'),
+                  content: `${resV.msg}`,
-                  duration: 10,
+                  duration: 3,
                 });
-              } else {
-                message.success({
-                  content: t('views.traceManage.pcap.execUPFStop'),
-                  duration: 10,
-                });
-                modalState.downBtn = true;
               }
+            } else {
+              message.error({
+                content: t('views.traceManage.pcap.startErr', { title }),
+                duration: 3,
+              });
             }
-          } else {
+          });
-            message.error({
-              content: t('views.traceManage.pcap.execFailed'),
-              duration: 3,
-            });
-          }
         })
         .finally(() => {
-          modalState.confirmLoading = false;
+          hide();
         });
+    },
+  });
+}
+
+/**
+ * 停止
+ * @param row 行记录
+ */
+function fnRecordStop(row?: Record<string, any>) {
+  let neIDs: string[] = [];
+  if (row) {
+    neIDs = [`${row.id}`];
+  } else {
+    row = {
+      neName: t('views.traceManage.pcap.textSelect'),
+    };
+    neIDs = tableState.selectedRowKeys.map(s => `${s}`);
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.traceManage.pcap.stopTip', { title: row.neName }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const fromArr = neIDs.map(id => modalState.from[id]);
+      const reqArr = fromArr.map(from => {
+        if (from.data.neType === 'UPF' && from.cmdStart.startsWith('pcap')) {
+          return traceUPF(Object.assign({ cmd: from.cmdStop }, from.data));
+        }
+        return dumpStop(Object.assign({ fileName: from.out }, from.data));
+      });
+      Promise.allSettled(reqArr)
+        .then(resArr => {
+          resArr.forEach((res, idx) => {
+            const title = fromArr[idx].title;
+            if (res.status === 'fulfilled') {
+              const resV = res.value;
+              if (resV.code === RESULT_CODE_SUCCESS) {
+                fromArr[idx].out = resV.data.out;
+                fromArr[idx].log = resV.data.log;
+                fromArr[idx].loading = false;
+                message.success({
+                  content: t('views.traceManage.pcap.stopOk', { title }),
+                  duration: 3,
+                });
+              } else if (resV.msg.indexOf('not run') > 0) {
+                message.warning({
+                  content: t('views.traceManage.pcap.stopNotRun', { title }),
+                  duration: 3,
+                });
+              } else {
+                message.warning({
+                  content: `${resV.msg}`,
+                  duration: 3,
+                });
+              }
+            } else {
+              message.error({
+                content: t('views.traceManage.pcap.stopErr', { title }),
+                duration: 3,
+              });
+            }
+          });
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**下载PCAP文件 */
+function fnDownPCAP(id: number | string) {
+  const from = modalState.from[id];
+  if (!from) return;
+  const hide = message.loading(t('common.loading'), 0);
+  const data = Object.assign(
+    {
+      path: '/tmp',
+      fileName: `${from.out}.pcap`,
+    },
+    from.data
+  );
+  getNeFile(data)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('views.traceManage.pcap.downOk', { title: from.out }),
+          duration: 3,
+        });
+        saveAs(res.data, data.fileName);
+      } else {
+        message.error({
+          content: t('views.traceManage.pcap.downErr', { title: from.out }),
+          duration: 3,
+        });
+      }
     })
-    .catch(e => {
+    .finally(() => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+      hide();
     });
 }
 
+/**
+ * 对话框弹出显示为 查看
+ * @param dictId 字典编号id
+ */
+function fnModalVisibleByVive(id: string | number) {
+  const from = modalState.from[id];
+  if (!from) return;
+  modalState.visibleByView = true;
+  modalState.logMsg = from.log;
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByView = false;
+  modalState.logMsg = '';
+}
+
 onMounted(() => {
-  // 获取网元网元列表
+  // 获取网元列表
-  useNeInfoStore()
+  fnGetList();
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        if (res.data.length > 0) {
-          const info = res.data[0];
-          modalState.neType = [info.neType, info.neId];
-          modalState.from.ip = info.ip;
-        }
-      } else {
-        message.warning({
-          content: 'No Data',
-          duration: 2,
-        });
-      }
-    });
-});
-
-onUnmounted(() => {
-  fnStop();
-  if (modalState.neType[0] === 'UPF') {
-    fnUPF('stop');
-  }
 });
 </script>
 
 <template>
   <PageContainer>
-    <a-card :title="t('views.traceManage.pcap.cardTitle')">
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <a-row :gutter="16">
+      <!-- 插槽-卡片左侧侧 -->
-        <a-col :lg="12" :md="12" :xs="24">
+      <template #title>
-          <a-form
+        <a-space :size="8" align="center">
-            name="modalState"
+          <a-button type="primary" @click.prevent="fnRecordStart()">
-            :model="modalState"
+            {{ t('views.traceManage.pcap.textStartBatch') }}
-            layout="horizontal"
+          </a-button>
-            autocomplete="off"
+          <a-button danger @click.prevent="fnRecordStop()">
-            :label-col="{ span: 5 }"
+            {{ t('views.traceManage.pcap.textStopBatch') }}
-            labelWrap
+          </a-button>
-          >
+        </a-space>
-            <a-form-item
+      </template>
-              :label="t('views.traceManage.pcap.neType')"
-              name="neType"
-            >
-              <a-cascader
-                v-model:value="modalState.neType"
-                :options="neInfoStore.getNeCascaderOptions"
-                @change="fnNeChange"
-                :allow-clear="false"
-                :placeholder="t('views.traceManage.pcap.neTypePlease')"
-                :disabled="modalState.confirmLoading || modalState.upfExec"
-              />
-            </a-form-item>
-            <a-form-item :label="t('views.traceManage.pcap.neIp')" name="ip">
-              <span style="font-weight: bold">{{ modalState.from.ip }}</span>
-            </a-form-item>
 
-            <template v-if="modalState.neType[0] === 'UPF'">
+      <!-- 插槽-卡片右侧 -->
-              <a-form-item
+      <template #extra>
-                :label="t('views.traceManage.pcap.capArg')"
+        <a-space :size="8" align="center">
-                name="upfStart"
+          <a-tooltip>
-                v-bind="modalStateFrom.validateInfos.upfStart"
+            <template #title>{{ t('common.reloadText') }}</template>
-              >
+            <a-button type="text" @click.prevent="fnGetList()">
-                <a-auto-complete
+              <template #icon><ReloadOutlined /></template>
-                  v-model:value="modalState.from.upfStart"
+            </a-button>
-                  :options="modalState.upfCmdOptions"
+          </a-tooltip>
-                  :placeholder="t('views.traceManage.pcap.capArgUPFPlease')"
+        </a-space>
-                  :disabled="modalState.confirmLoading"
+      </template>
-                  allow-clear
+
-                  @select="fnUPFSelectCmd"
+      <!-- 表格列表 -->
-                />
+      <a-table
-              </a-form-item>
+        class="table"
-              <a-form-item :wrapperCol="{ offset: 5 }">
+        row-key="id"
-                <a-space :size="8">
+        size="small"
-                  <a-button
+        :columns="tableColumns"
-                    type="primary"
+        :loading="tableState.loading"
-                    :disabled="modalState.upfExec"
+        :data-source="tableState.data"
-                    :loading="modalState.confirmLoading"
+        :pagination="false"
-                    @click.prevent="fnUPF('start')"
+        :scroll="{ x: tableColumns.length * 120 }"
-                  >
+        :row-selection="{
-                    <template #icon><ApiOutlined /></template>
+          type: 'checkbox',
-                    {{ t('views.traceManage.pcap.capStart') }}
+          selectedRowKeys: tableState.selectedRowKeys,
-                  </a-button>
+          onChange: fnTableSelectedRowKeys,
-                  <a-button
+        }"
-                    type="dashed"
+      >
-                    danger
+        <template #bodyCell="{ column, record }">
-                    :disabled="!modalState.upfExec"
+          <template v-if="column.key === 'cmd'">
-                    :loading="modalState.confirmLoading"
+            <a-auto-complete
-                    @click.prevent="fnUPF('stop')"
+              v-model:value="modalState.from[record.id].cmdStart"
-                  >
+              :options="
-                    {{ t('views.traceManage.pcap.capStop') }}
+                record.neType === 'UPF'
-                  </a-button>
+                  ? modalState.cmdOptions.concat(modalState.cmdOptionsUPF)
-                </a-space>
+                  : modalState.cmdOptions
-              </a-form-item>
+              "
-            </template>
+              :placeholder="t('views.traceManage.pcap.capArgPlease')"
-            <template v-else>
+              :disabled="modalState.from[record.id].loading"
-              <a-form-item
+              allow-clear
-                :label="t('views.traceManage.pcap.capArg')"
+              @select="(_: any, option: any) => fnSelectCmd(record.id, option)"
-                name="cmd"
+              style="width: 100%"
-                v-bind="modalStateFrom.validateInfos.cmd"
+            />
-              >
+          </template>
-                <a-input
+          <template v-if="column.key === 'id'">
-                  v-model:value="modalState.from.cmd"
+            <a-space :size="8" align="start" direction="horizontal">
-                  allow-clear
-                  :placeholder="t('views.traceManage.pcap.capArgPlease')"
-                >
-                </a-input>
-              </a-form-item>
-              <a-form-item
-                :label="t('views.traceManage.pcap.capTime')"
-                name="timeout"
-                v-bind="modalStateFrom.validateInfos.timeout"
-              >
-                <a-input-number
-                  v-model:value="modalState.from.timeout"
-                  :placeholder="t('views.traceManage.pcap.capTimePlease')"
-                  :min="5"
-                  :max="120"
-                />
-              </a-form-item>
-              <a-form-item :wrapperCol="{ offset: 5 }">
-                <a-space :size="8">
-                  <a-button
-                    type="primary"
-                    :disabled="modalState.confirmLoading"
-                    :loading="modalState.confirmLoading"
-                    @click.prevent="fnStart"
-                  >
-                    <template #icon><ApiOutlined /></template>
-                    {{
-                      runTime != 0
-                        ? t('views.traceManage.pcap.runTimeText', {
-                            s: runTime,
-                          })
-                        : t('views.traceManage.pcap.runText')
-                    }}
-                  </a-button>
-                  <a-button
-                    type="dashed"
-                    danger
-                    :disabled="!modalState.confirmLoading"
-                    @click.prevent="fnStop"
-                  >
-                    {{ t('views.traceManage.pcap.stopText') }}
-                  </a-button>
-                </a-space>
-              </a-form-item>
-            </template>
-          </a-form>
-        </a-col>
-        <a-col :offset="2" :lg="10" :md="10" :xs="24">
-          <a-form layout="vertical" autocomplete="off">
-            <a-form-item
-              :label="t('views.traceManage.pcap.capLog')"
-              name="execLogMsg"
-              v-show="!!modalState.execLogMsg"
-            >
-              <a-textarea
-                v-model:value="modalState.execLogMsg"
-                :auto-size="{ minRows: 10, maxRows: 15 }"
-                :disabled="true"
-              />
-            </a-form-item>
-            <a-form-item v-show="modalState.downBtn">
               <a-button
                 type="primary"
-                :title="modalState.fileName"
+                size="small"
-                @click.prevent="fnDownPCAP"
+                :loading="modalState.from[record.id].loading"
+                @click.prevent="fnRecordStart(record)"
+              >
+                <template #icon><PlayCircleOutlined /> </template>
+                {{ t('views.traceManage.pcap.textStart') }}
+              </a-button>
+
+              <a-button
+                type="default"
+                danger
+                size="small"
+                @click.prevent="fnRecordStop(record)"
+              >
+                <template #icon><CloseSquareOutlined /> </template>
+                {{ t('views.traceManage.pcap.textStop') }}
+              </a-button>
+
+              <a-button
+                type="primary"
+                ghost
+                size="small"
+                @click.prevent="fnModalVisibleByVive(record.id)"
+                v-if="modalState.from[record.id].log"
+              >
+                <template #icon><FileTextOutlined /> </template>
+                {{ t('views.traceManage.pcap.textLog') }}
+              </a-button>
+
+              <a-button
+                type="primary"
+                ghost
+                size="small"
+                @click.prevent="fnDownPCAP(record.id)"
+                v-if="
+                  !modalState.from[record.id].loading &&
+                  modalState.from[record.id].out
+                "
               >
                 <template #icon><DownloadOutlined /></template>
-                {{ t('views.traceManage.pcap.capDownText') }}
+                {{ t('views.traceManage.pcap.textDown') }}
               </a-button>
-            </a-form-item>
+            </a-space>
-          </a-form>
+          </template>
-        </a-col>
+        </template>
-      </a-row>
+      </a-table>
     </a-card>
+
+    <!-- 详情框 -->
+    <a-modal
+      width="800px"
+      :visible="modalState.visibleByView"
+      :footer="null"
+      :maskClosable="false"
+      :keyboard="false"
+      :title="t('views.traceManage.pcap.textLogMsg')"
+      @cancel="fnModalCancel"
+    >
+      <a-textarea
+        v-model:value="modalState.logMsg"
+        :auto-size="{ minRows: 2, maxRows: 24 }"
+        :disabled="true"
+        style="color: rgba(0, 0, 0, 0.85)"
+      />
+    </a-modal>
   </PageContainer>
 </template>