feat: 网元信令跟踪功能

src/api/trace/analysis.ts

@@ -1,71 +0,0 @@
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { request } from '@/plugins/http-fetch';
-import { parseObjLineToHump } from '@/utils/parse-utils';
-
-/**
- * 查询信令列表
- * @param query 查询参数
- * @returns object
- */
-export async function listTraceData(query: Record<string, any>) {
-  let totalSQL = 'select count(*) as total from trace_data where 1=1 ';
-  let rowsSQL = 'select * from trace_data where 1=1 ';
-
-  // 查询
-  let querySQL = '';
-  if (query.imsi) {
-    querySQL += ` and imsi like '%${query.imsi}%' `;
-  }
-  if (query.msisdn) {
-    querySQL += ` and msisdn like '%${query.msisdn}%' `;
-  }
-
-  // 分页
-  const pageNum = (query.pageNum - 1) * query.pageSize;
-  const limtSql = ` limit ${pageNum},${query.pageSize} `;
-
-  // 发起请求
-  const result = await request({
-    url: `/api/rest/databaseManagement/v1/omc_db/trace_data`,
-    method: 'get',
-    params: {
-      totalSQL: totalSQL + querySQL,
-      rowsSQL: rowsSQL + querySQL + limtSql,
-    },
-  });
-
-  // 解析数据
-  if (result.code === RESULT_CODE_SUCCESS) {
-    const data: DataList = {
-      total: 0,
-      rows: [],
-      code: result.code,
-      msg: result.msg,
-    };
-    result.data.data.forEach((item: any) => {
-      const itemData = item['trace_data'];
-      if (Array.isArray(itemData)) {
-        if (itemData.length === 1 && itemData[0]['total'] >= 0) {
-          data.total = itemData[0]['total'];
-        } else {
-          data.rows = itemData.map(v => parseObjLineToHump(v));
-        }
-      }
-    });
-    return data;
-  }
-  return result;
-}
-
-/**
- * 信令数据解析HTML
- * @param id 任务ID
- * @returns
- */
-export function getTraceRawInfo(id: Record<string, string>) {
-  return request({
-    url: `/api/rest/traceManagement/v1/decMessage/${id}`,
-    method: 'get',
-    responseType: 'text',
-  });
-}

src/api/trace/packet.ts

@@ -62,3 +62,18 @@ export function packetKeep(taskNo: string, duration: number = 120) {
     data: { taskNo, duration },
   });
 }
+
+/**
+ * 信令跟踪文件
+ * @param taskNo 对象
+ * @returns object
+ */
+export function packetPCAPFile(taskNo: string) {
+  return request({
+    url: '/trace/packet/filePull',
+    method: 'get',
+    params: { taskNo },
+    responseType: 'blob',
+    timeout: 680_000,
+  });
+}

src/api/trace/task.ts

@@ -1,6 +1,4 @@
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
-import { parseObjLineToHump } from '@/utils/parse-utils';
 
 /**
  * 查询跟踪任务列表
@@ -81,24 +79,26 @@ export function filePullTask(traceId: string) {
 }
 
 /**
- * 获取网元跟踪接口列表
+ * 跟踪任务数据列表
+ * @param query 查询参数
  * @returns object
  */
-export async function getNeTraceInterfaceAll() {
+export async function listTraceData(query: Record<string, any>) {
-  // 发起请求
+  return request({
-  const result = await request({
+    url: '/trace/data/list',
-    url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/ne_info`,
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 查询跟踪任务数据信息
+ * @param id ID
+ * @returns object
+ */
+export async function getTraceData(id: string | number) {
+  return request({
+    url: `/trace/data/${id}`,
     method: 'get',
-    params: {
-      SQL: `SELECT ne_type,interface FROM trace_info GROUP BY ne_type,interface`,
-    },
   });
-  // 解析数据
-  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
-    let data = result.data.data[0];
-    return Object.assign(result, {
-      data: parseObjLineToHump(data['trace_info']),
-    });
-  }
-  return result;
 }

src/store/modules/neinfo.ts

@@ -2,7 +2,6 @@ import { defineStore } from 'pinia';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listAllNeInfo } from '@/api/ne/neInfo';
 import { parseDataToOptions } from '@/utils/parse-tree-utils';
-import { getNeTraceInterfaceAll } from '@/api/trace/task';
 import { getNePerformanceList } from '@/api/perfManage/taskManage';
 
 /**网元信息类型 */
@@ -13,8 +12,6 @@ type NeInfo = {
   neCascaderOptions: Record<string, any>[];
   /**选择器单级父类型 */
   neSelectOtions: Record<string, any>[];
-  /**跟踪接口列表 */
-  traceInterfaceList: Record<string, any>[];
   /**性能测量数据集 */
   perMeasurementList: Record<string, any>[];
 };
@@ -24,7 +21,6 @@ const useNeInfoStore = defineStore('neinfo', {
     neList: [],
     neCascaderOptions: [],
     neSelectOtions: [],
-    traceInterfaceList: [],
     perMeasurementList: [],
   }),
   getters: {
@@ -61,7 +57,7 @@ const useNeInfoStore = defineStore('neinfo', {
       const res = await listAllNeInfo({
         bandStatus: false,
       });
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      if (res.code === RESULT_CODE_SUCCESS) {
         // 原始列表
         this.neList = JSON.parse(JSON.stringify(res.data));
 
@@ -79,24 +75,6 @@ const useNeInfoStore = defineStore('neinfo', {
       }
       return res;
     },
-    // 刷新跟踪接口列表
-    async fnRefreshNeTraceInterface() {
-      this.traceInterfaceList = [];
-      const res = await this.fnNeTraceInterface();
-      return res;
-    },
-    // 获取跟踪接口列表
-    async fnNeTraceInterface() {
-      // 有数据不请求
-      if (this.traceInterfaceList.length > 0) {
-        return { code: 1, data: this.traceInterfaceList, msg: 'success' };
-      }
-      const res = await getNeTraceInterfaceAll();
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        this.traceInterfaceList = res.data;
-      }
-      return res;
-    },
     // 获取性能测量数据集列表
     async fnNeTaskPerformance() {
       // 有数据不请求
@@ -104,7 +82,7 @@ const useNeInfoStore = defineStore('neinfo', {
         return { code: 1, data: this.perMeasurementList, msg: 'success' };
       }
       const res = await getNePerformanceList();
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      if (res.code === RESULT_CODE_SUCCESS) {
         this.perMeasurementList = res.data;
       }
       return res;

src/views/traceManage/pcap/file.vue

@@ -334,7 +334,7 @@ function fnDrawerOpen(row: Record<string, any>) {
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+    if (res.code === RESULT_CODE_SUCCESS) {
       if (res.data.length === 0) {
         message.warning({
           content: t('common.noData'),
@@ -424,16 +424,6 @@ onMounted(() => {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'fileName'">
             <a-space :size="8" align="center">
-              <a-tooltip
-                v-if="
-                  record.fileType === 'file' && record.fileName.endsWith('.log')
-                "
-              >
-                <template #title>{{ t('common.viewText') }}</template>
-                <a-button type="link" @click.prevent="fnDrawerOpen(record)">
-                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
               <a-button
                 type="link"
                 :loading="downLoading"
@@ -443,24 +433,36 @@ onMounted(() => {
                 <template #icon><DownloadOutlined /></template>
                 {{ t('common.downloadText') }}
               </a-button>
+              
               <a-button
                 type="link"
-                :loading="downLoading"
+                @click.prevent="fnDrawerOpen(record)"
-                @click.prevent="fnDownloadFileZIP(record)"
+                v-if="
-                v-if="record.fileType === 'dir'"
+                  record.fileType === 'file' && record.fileName.endsWith('.log')
+                "
               >
-                <template #icon><DownloadOutlined /></template>
+                <template #icon><ProfileOutlined /></template>
-                {{ t('common.downloadText') }}
+                {{ t('common.viewText') }}
-              </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>
+
+              <template v-if="record.fileType === 'dir'">
+                <a-button
+                  type="link"
+                  :loading="downLoading"
+                  @click.prevent="fnDownloadFileZIP(record)"
+                >
+                  <template #icon><DownloadOutlined /></template>
+                  {{ t('common.downloadText') }}
+                </a-button>
+                <a-button
+                  type="link"
+                  :loading="downLoading"
+                  @click.prevent="fnDirCD(record.fileName)"
+                >
+                  <template #icon><FolderOutlined /></template>
+                  {{ t('views.logManage.neFile.dirCd') }}
+                </a-button>
+              </template>
             </a-space>
           </template>
         </template>

src/views/traceManage/task-hlr/index.vue

@@ -212,13 +212,14 @@ function fnGetList(pageNum?: number) {
   queryParams.startTime = queryRangePicker.value[0];
   queryParams.endTime = queryRangePicker.value[1];
   listTaskHLR(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+    if (res.code === RESULT_CODE_SUCCESS) {
       // 取消勾选
       if (tableState.selectedRowKeys.length > 0) {
         tableState.selectedRowKeys = [];
       }
-      tablePagination.total = res.total;
+      const { total, rows } = res.data;
-      tableState.data = res.rows;
+      tablePagination.total = total;
+      tableState.data = rows;
       if (
         tablePagination.total <=
           (queryParams.pageNum - 1) * tablePagination.pageSize &&
@@ -729,7 +730,7 @@ onMounted(() => {
                 <template #title>
                   <div>{{ t('views.traceManage.task.imsiTip') }}</div>
                 </template>
-                <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>
@@ -749,7 +750,7 @@ onMounted(() => {
                 <template #title>
                   <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
                 </template>
-                <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>

src/views/traceManage/task/analyze.vue

@@ -1,35 +1,32 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref, toRaw } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/es';
+import { message, Modal } from 'ant-design-vue';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
-import PacketTable from '../tshark/components/PacketTable.vue';
-import { usePCAP, NO_SELECTION } from '../tshark/hooks/usePCAP';
 import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
-import { filePullTask } from '@/api/trace/task';
+import { filePullTask, getTraceData, listTraceData } from '@/api/trace/task';
-import { OptionsType, WS } from '@/plugins/ws-websocket';
+import { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
+import * as wkUtil from '@/plugins/wk-worker';
+import * as wsUtil from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
 import useTabsStore from '@/store/modules/tabs';
 import saveAs from 'file-saver';
+import { parseDateToStr } from '@/utils/date-utils';
+const { getDict } = useDictStore();
+const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const tabsStore = useTabsStore();
-const ws = new WS();
+const ws = new wsUtil.WS();
-const { t } = useI18n();
+const wk = new wkUtil.WK();
-const {
-  state,
-  handleSelectedTreeEntry,
-  handleSelectedFindSelection,
-  handleSelectedFrame,
-  handleScrollBottom,
-  handleFilterFrames,
-  handleLoadFile,
-} = usePCAP();
 
 /**跟踪编号 */
 const traceId = ref<string>(route.query.traceId as string);
@@ -44,6 +41,17 @@ function fnClose() {
   }
 }
 
+/**字典数据 */
+let dict: {
+  /**跟踪消息类型 */
+  traceMsgType: DictType[];
+  /**跟踪消息方向 */
+  traceMsgDirect: DictType[];
+} = reactive({
+  traceMsgType: [],
+  traceMsgDirect: [],
+});
+
 /**下载触发等待 */
 let downLoading = ref<boolean>(false);
 
@@ -82,15 +90,266 @@ function fnDownloadFile() {
   });
 }
 
-/**获取PCAP文件 */
+// =========== 表格数据 ==============
-function fnFilePCAP() {
+/**表格状态类型 */
-  filePullTask(traceId.value).then(res => {
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: object[];
+  /**点击选择行 */
+  row: Record<string, any>;
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+  row: {},
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.traceManage.task.msgNe'),
+    dataIndex: 'msgNe',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.traceManage.task.rowTime'),
+    dataIndex: 'timestamp',
+    align: 'left',
+    width: 250,
+    customRender(opt) {
+      if (!opt.value) return '';
+      const nanoseconds = opt.value; // 纳秒时间戳
+      const milliseconds = Math.floor(nanoseconds / 1000000);
+      const nanosecondsPart = (nanoseconds % 1000000)
+        .toString()
+        .padStart(6, '0');
+
+      return `${parseDateToStr(
+        milliseconds,
+        'YYYY-MM-DD HH:mm:ss.SSS'
+      )}.${nanosecondsPart}`;
+    },
+    sorter: true,
+  },
+  {
+    title: t('views.traceManage.task.protocolOrInterface'),
+    dataIndex: 'ifType',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.traceManage.task.msgEvent'),
+    dataIndex: 'msgEvent',
+    align: 'left',
+    ellipsis: true,
+  },
+  {
+    title: t('views.traceManage.task.msgType'),
+    dataIndex: 'msgType',
+    key: 'msgType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.traceManage.task.msgDirect'),
+    dataIndex: 'msgDirect',
+    key: 'msgDirect',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.traceManage.task.srcIp'),
+    dataIndex: 'srcAddr',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.traceManage.task.dstIp'),
+    dataIndex: 'dstAddr',
+    align: 'left',
+    width: 150,
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 10,
+  /**默认的每页条数 */
+  defaultPageSize: 10,
+  /**指定每页可以显示多少条 */
+  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();
+  },
+});
+
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { field, order } = sorter;
+  if (order) {
+    queryParams.sortBy = field;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
+/**查询参数 */
+let queryParams = reactive({
+  traceId: traceId.value,
+  sortBy: 'timestamp',
+  sortOrder: 'asc',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 10,
+});
+/**查询备份信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+
+  listTraceData(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      handleLoadFile(res.data);
+      const { total, rows } = res.data;
+      tablePagination.total = total;
+      tableState.data = rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
     }
+    tableState.loading = false;
   });
 }
 
+/**
+ * 查看帧数据
+ * @param row 记录信息
+ */
+function fnVisible(row: Record<string, any>) {
+  // 选中行重复点击时显示隐藏
+  if (row.id === tableState.row.id && state.selectedFrame !== 0) {
+    state.selectedFrame = 0;
+    return;
+  }
+  getTraceData(row.id).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      Object.assign(tableState.row, res.data);
+      const blob = generatePCAP(res.data.timestamp / 1e3, res.data.rawMsg);
+      wk.send({ type: 'process', file: blob });
+    }
+  });
+}
+/**生成PCAP-blob */
+function generatePCAP(timestamp: number, base64Data: string): Blob {
+  // 1. 转换数据
+  const binaryString = atob(base64Data);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  // 2. 创建PCAP文件头
+  const fileHeader = new Uint8Array([
+    0xd4,
+    0xc3,
+    0xb2,
+    0xa1, // magic_number (微秒级)
+    0x02,
+    0x00,
+    0x04,
+    0x00, // version_major(2) + version_minor(4)
+    0x00,
+    0x00,
+    0x00,
+    0x00, // thiszone (UTC)
+    0x00,
+    0x00,
+    0x00,
+    0x00, // sigfigs (固定0)
+    0x00,
+    0x00,
+    0x04,
+    0x00, // snaplen (1024)
+    0x71,
+    0x00,
+    0x00,
+    0x00, // network (LINKTYPE_LINUX_SLL)
+  ]);
+
+  // 3. 构造Linux cooked头
+  const cookedHeader = new Uint8Array(16);
+  const view = new DataView(cookedHeader.buffer);
+  view.setUint16(0, 0x0000, false); // 数据包类型（主机→网络）
+  view.setUint16(2, 0x0304, false); // 地址类型（ARPHRD_ETHER）
+  view.setUint16(4, 0x0008, false); // 协议类型（ETH_P_IP）
+  view.setUint16(14, 0x0800, false); // 数据包类型（PACKET_HOST）
+
+  // 4. 合并链路层头与数据
+  const fullData = new Uint8Array(cookedHeader.length + bytes.length);
+  fullData.set(cookedHeader);
+  fullData.set(bytes, cookedHeader.length);
+
+  // 5. 生成时间戳
+  const date = new Date(timestamp);
+  const secs = Math.floor(date.getTime() / 1000);
+  const usecs = (date.getTime() % 1000) * 1000;
+
+  // 6. 构造PCAP报文头
+  const packetHeader = new Uint8Array(16);
+  const headerView = new DataView(packetHeader.buffer);
+  headerView.setUint32(0, secs, true); // 时间戳秒
+  headerView.setUint32(4, usecs, true); // 时间戳微秒
+  headerView.setUint32(8, fullData.length, true); // 捕获长度
+  headerView.setUint32(12, fullData.length, true); // 原始长度
+
+  // 7. 合并所有数据
+  const finalData = new Uint8Array(
+    fileHeader.length + packetHeader.length + fullData.length
+  );
+  finalData.set(fileHeader);
+  finalData.set(packetHeader, fileHeader.length);
+  finalData.set(fullData, fileHeader.length + packetHeader.length);
+
+  // 8. 文件Blob对象
+  return new Blob([finalData], { type: 'application/octet-stream' });
+}
+
+// =========== WS ==============
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -101,7 +360,6 @@ function wsMessage(res: Record<string, any>) {
 
   // 建联时发送请求
   if (!requestId && data.clientId) {
-    fnFilePCAP();
     return;
   }
 
@@ -110,13 +368,16 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   if (data.groupId === `2_${traceId.value}`) {
-    fnFilePCAP();
+    // 第一页降序时实时添加记录
+    if (queryParams.pageNum === 1 && queryParams.sortOrder === 'desc') {
+      tableState.data.unshift(data);
+    }
+    tablePagination.total += 1;
   }
 }
-
 /**建立WS连接 */
 function fnWS() {
-  const options: OptionsType = {
+  const options: wsUtil.OptionsType = {
     url: '/ws',
     params: {
       /**订阅通道组
@@ -135,15 +396,167 @@ function fnWS() {
   ws.connect(options);
 }
 
-watch(
+// =========== WK ==============
-  () => state.initialized,
+const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
-  v => {
+
-    v && fnWS();
+type StateType = {
+  /**初始化 */
+  initialized: boolean;
+  /**当前选中的帧编号 */
+  selectedFrame: number;
+  /**当前选中的帧数据 */
+  packetFrame: { tree: any[]; data_sources: any[] };
+  /**pcap包帧数据 */
+  packetFrameTreeMap: Map<string, any> | null;
+  /**当前选中的帧数据 */
+  selectedTree: typeof NO_SELECTION;
+  /**选择帧的Dump数据标签 */
+  selectedDataSourceIndex: number;
+};
+
+const state = reactive<StateType>({
+  initialized: false,
+  selectedFrame: 0,
+  /**当前选中的帧数据 */
+  packetFrame: { tree: [], data_sources: [] },
+  packetFrameTreeMap: null, // 注意：Map 需要额外处理
+  selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
+  /**选择帧的Dump数据标签 */
+  selectedDataSourceIndex: 0,
+});
+
+/**解析帧数据为简单结构 */
+function parseFrameTree(id: string, node: Record<string, any>) {
+  let map = new Map();
+
+  if (node.tree && node.tree.length > 0) {
+    for (let i = 0; i < node.tree.length; i++) {
+      const subMap = parseFrameTree(`${id}-${i}`, node.tree[i]);
+      subMap.forEach((value, key) => {
+        map.set(key, value);
+      });
+    }
+  } else if (node.length > 0) {
+    map.set(id, {
+      id: id,
+      idx: node.data_source_idx,
+      start: node.start,
+      length: node.length,
+    });
   }
-);
+
+  return map;
+}
+/**报文数据点击选中 */
+function handleSelectedFindSelection(src_idx: number, pos: number) {
+  // console.log('fnSelectedFindSelection', pos);
+  if (state.packetFrameTreeMap == null) return;
+  // find the smallest one
+  let current = null;
+  for (let [k, pp] of state.packetFrameTreeMap) {
+    if (pp.idx !== src_idx) continue;
+
+    if (pos >= pp.start && pos <= pp.start + pp.length) {
+      if (
+        current != null &&
+        state.packetFrameTreeMap.get(current).length > pp.length
+      ) {
+        current = k;
+      } else {
+        current = k;
+      }
+    }
+  }
+  if (current != null) {
+    state.selectedTree = state.packetFrameTreeMap.get(current);
+  }
+}
+/**帧数据点击选中 */
+function handleSelectedTree(e: any) {
+  state.selectedTree = e;
+}
+
+/**接收数据后回调 */
+function wkMessage(res: Record<string, any>) {
+  // console.log('wkMessage', res);
+  switch (res.type) {
+    case 'status':
+      console.info(res.status);
+      break;
+    case 'error':
+      console.warn(res.error);
+      break;
+    case 'init':
+      wk.send({ type: 'columns' });
+      state.initialized = true;
+      fnGetList();
+      break;
+    case 'frames':
+      const { frames } = res.data;
+
+      // 有匹配的选择第一个
+      if (frames.length > 0) {
+        state.selectedFrame = frames[0].number;
+        wk.send({ type: 'select', number: state.selectedFrame });
+      }
+      break;
+    case 'selected':
+      // 去掉两层
+      res.data.tree.shift();
+      res.data.tree.shift();
+      state.packetFrame = res.data;
+      state.packetFrameTreeMap = parseFrameTree('root', res.data);
+      state.selectedTree = NO_SELECTION;
+      state.selectedDataSourceIndex = 0;
+      break;
+    case 'processed':
+      // setStatus(`Error: non-zero return code (${e.data.code})`);
+      // 加载数据
+      wk.send({
+        type: 'frames',
+        filter: '',
+        skip: 0,
+        limit: 1,
+      });
+      break;
+    default:
+      console.warn(res);
+      break;
+  }
+}
+/**建立WK连接 */
+function fnWK() {
+  const options: wkUtil.OptionsType = {
+    url: wkUrl,
+    onmessage: wkMessage,
+    onerror: (ev: any) => {
+      console.error(ev);
+    },
+  };
+  //建立连接
+  wk.connect(options);
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('trace_msg_type'), getDict('trace_msg_direct')])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        dict.traceMsgType = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.traceMsgDirect = resArr[1].value;
+      }
+    })
+    .finally(() => {
+      fnWK();
+      fnWS();
+    });
+});
 
 onBeforeUnmount(() => {
-  ws.close();
+  wk.send({ type: 'close' }) && wk.close();
+  if (ws.state() <= WebSocket.OPEN) ws.close();
 });
 </script>
 
@@ -154,8 +567,9 @@ onBeforeUnmount(() => {
       :loading="!state.initialized"
       :body-style="{ padding: '12px' }"
     >
-      <div class="toolbar">
+      <!-- 插槽-卡片左侧侧 -->
-        <a-space :size="8" class="toolbar-oper">
+      <template #title>
+        <a-space :size="8" align="center">
           <a-button type="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.close') }}
@@ -173,89 +587,65 @@ onBeforeUnmount(() => {
             <strong>{{ traceId }}</strong>
           </span>
         </a-space>
+      </template>
 
-        <div class="toolbar-info">
+      <!-- 插槽-卡片右侧 -->
-          <a-tag color="green" v-show="!!state.currentFilter">
+      <template #extra>
-            {{ state.currentFilter }}
+        <a-tooltip>
-          </a-tag>
+          <template #title>{{ t('common.reloadText') }}</template>
-          <span> Matched Frame: {{ state.totalFrames }} </span>
+          <a-button type="text" @click.prevent="fnGetList()">
-        </div>
+            <template #icon><ReloadOutlined /></template>
-
+          </a-button>
-        <!-- 包信息 -->
+        </a-tooltip>
-        <a-popover
+      </template>
-          trigger="click"
-          placement="bottomLeft"
-          v-if="state.summary.filename"
-        >
-          <template #content>
-            <div class="summary">
-              <div class="summary-item">
-                <span>Type:</span>
-                <span>{{ state.summary.file_type }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Encapsulation:</span>
-                <span>{{ state.summary.file_encap_type }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Packets:</span>
-                <span>{{ state.summary.packet_count }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Duration:</span>
-                <span>{{ Math.round(state.summary.elapsed_time) }}s</span>
-              </div>
-            </div>
-          </template>
-          <InfoCircleOutlined />
-        </a-popover>
-      </div>
-
-      <!-- 包数据表过滤 -->
-      <a-input-group compact>
-        <a-input
-          v-model:value="state.filter"
-          placeholder="display filter, example: tcp"
-          :allow-clear="true"
-          style="width: calc(100% - 100px)"
-          @pressEnter="handleFilterFrames"
-        >
-          <template #prefix>
-            <FilterOutlined />
-          </template>
-        </a-input>
-        <a-button
-          type="primary"
-          html-type="submit"
-          style="width: 100px"
-          @click="handleFilterFrames"
-        >
-          Filter
-        </a-button>
-      </a-input-group>
-      <a-alert
-        :message="state.filterError"
-        type="error"
-        v-if="state.filterError != null"
-      />
 
       <!-- 包数据表 -->
-      <PacketTable
+      <a-table
-        :columns="state.columns"
+        class="table"
-        :data="state.packetFrames"
+        row-key="id"
-        :selectedFrame="state.selectedFrame"
+        :columns="tableColumns"
-        :onSelectedFrame="handleSelectedFrame"
+        :loading="tableState.loading"
-        :onScrollBottom="handleScrollBottom"
+        :data-source="tableState.data"
-      ></PacketTable>
+        :size="tableState.size"
-
+        :pagination="tablePagination"
-      <a-row>
+        :row-class-name="(record:any) => {
+          if (record.id === tableState.row.id) {
+            return 'table-striped-select';
+          }
+          return record.msgDirect === 0 ? 'table-striped-recv' : 'table-striped-send';
+        }"
+        :customRow="
+          record => {
+            return {
+              onClick: () => fnVisible(record),
+            };
+          }
+        "
+        @change="fnTableChange"
+        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 300px)' }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'msgType'">
+            <DictTag :options="dict.traceMsgType" :value="record.msgType" />
+          </template>
+          <template v-if="column.key === 'msgDirect'">
+            <DictTag :options="dict.traceMsgDirect" :value="record.msgDirect" />
+          </template>
+        </template>
+      </a-table>
+      <!-- 帧数据 -->
+      <a-row
+        :gutter="16"
+        style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
+        v-show="state.selectedFrame == 1"
+      >
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTreeEntry"
+            :select="handleSelectedTree"
-            :selected="state.selectedTreeEntry"
+            :selected="state.selectedTree"
-            :tree="state.selectedPacket.tree"
+            :tree="state.packetFrame.tree"
           />
         </a-col>
         <a-col :lg="12" :md="12" :xs="24" class="dump">
@@ -268,15 +658,15 @@ onBeforeUnmount(() => {
             <a-tab-pane
               :key="idx"
               :tab="v.name"
-              v-for="(v, idx) in state.selectedPacket.data_sources"
+              v-for="(v, idx) in state.packetFrame.data_sources"
               style="overflow: auto"
             >
               <DissectionDump
                 :base64="v.data"
                 :select="(pos:number)=>handleSelectedFindSelection(idx, pos)"
                 :selected="
-                  idx === state.selectedTreeEntry.idx
+                  idx === state.selectedTree.idx
-                    ? state.selectedTreeEntry
+                    ? state.selectedTree
                     : NO_SELECTION
                 "
               />
@@ -289,24 +679,20 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.toolbar {
+.table :deep(.ant-pagination) {
-  display: flex;
+  padding: 0 24px;
-  align-items: center;
-  margin-bottom: 12px;
 }
-.toolbar-info {
+.table :deep(.table-striped-select) td {
-  flex: 1;
+  background-color: #c2c2c2;
-  text-align: right;
+  cursor: pointer;
-  padding-right: 8px;
 }
-
+.table :deep(.table-striped-recv) td {
-.summary {
+  background-color: #a9e2ff;
-  display: flex;
+  cursor: pointer;
-  flex-direction: column;
 }
-.summary-item > span:first-child {
+.table :deep(.table-striped-send) td {
-  font-weight: 600;
+  background-color: #bcfbb3;
-  margin-right: 6px;
+  cursor: pointer;
 }
 
 .tree {

src/views/traceManage/task/data.vue

@@ -1,24 +1,60 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { ProModal } from 'antdv-pro-modal';
-import { Modal } from 'ant-design-vue/es';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { saveAs } from 'file-saver';
+import useDictStore from '@/store/modules/dict';
+import useTabsStore from '@/store/modules/tabs';
+import { type Dayjs } from 'dayjs';
 import useI18n from '@/hooks/useI18n';
-import { getTraceRawInfo, listTraceData } from '@/api/trace/analysis';
+import { getTraceData, listTraceData } from '@/api/trace/task';
+import { decode } from 'js-base64';
+import { useRoute, useRouter } from 'vue-router';
 const { t } = useI18n();
+const { getDict } = useDictStore();
+const tabsStore = useTabsStore();
+const router = useRouter();
+const route = useRoute();
 
+/**跟踪编号 */
+const traceId = ref<string>(route.query.traceId as string);
+
+/**关闭跳转 */
+function fnClose() {
+  const to = tabsStore.tabClose(route.path);
+  if (to) {
+    router.push(to);
+  } else {
+    router.back();
+  }
+}
+
+/**字典数据 */
+let dict: {
+  /**跟踪消息类型 */
+  traceMsgType: DictType[];
+  /**跟踪消息方向 */
+  traceMsgDirect: DictType[];
+} = reactive({
+  traceMsgType: [],
+  traceMsgDirect: [],
+});
+
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
 /**查询参数 */
 let queryParams = reactive({
-  /**移动号 */
+  traceId: traceId.value,
-  imsi: '',
+  sortBy: 'timestamp',
-  /**移动号 */
+  sortOrder: 'asc',
-  msisdn: '',
+  /**开始时间 */
+  beginTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -28,10 +64,10 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
-    imsi: '',
     pageNum: 1,
     pageSize: 20,
   });
+  queryRangePicker.value = undefined;
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -43,8 +79,6 @@ type TabeStateType = {
   loading: boolean;
   /**紧凑型 */
   size: SizeType;
-  /**搜索栏 */
-  seached: boolean;
   /**记录数据 */
   data: object[];
 };
@@ -52,66 +86,87 @@ type TabeStateType = {
 /**表格状态 */
 let tableState: TabeStateType = reactive({
   loading: false,
-  size: 'middle',
+  size: 'small',
-  seached: true,
   data: [],
 });
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: t('views.traceManage.analysis.trackTaskId'),
+    title: t('common.rowId'),
-    dataIndex: 'taskId',
+    dataIndex: 'id',
-    align: 'center',
+    align: 'left',
+    width: 100,
   },
   {
-    title: t('views.traceManage.analysis.imsi'),
+    title: t('views.traceManage.task.msgNe'),
-    dataIndex: 'imsi',
+    dataIndex: 'msgNe',
-    align: 'center',
+    align: 'left',
+    width: 150,
   },
   {
-    title: t('views.traceManage.analysis.msisdn'),
+    title: t('views.traceManage.task.rowTime'),
-    dataIndex: 'msisdn',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.srcIp'),
-    dataIndex: 'srcAddr',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.dstIp'),
-    dataIndex: 'dstAddr',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.signalType'),
-    dataIndex: 'ifType',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msgType'),
-    dataIndex: 'msgType',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msgDirect'),
-    dataIndex: 'msgDirect',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.rowTime'),
     dataIndex: 'timestamp',
-    align: 'center',
+    align: 'left',
+    width: 250,
     customRender(opt) {
       if (!opt.value) return '';
-      return parseDateToStr(opt.value);
+      const nanoseconds = opt.value; // 纳秒时间戳
+      const milliseconds = Math.floor(nanoseconds / 1000000);
+      const nanosecondsPart = (nanoseconds % 1000000)
+        .toString()
+        .padStart(6, '0');
+
+      return `${parseDateToStr(
+        milliseconds,
+        'YYYY-MM-DD HH:mm:ss.SSS'
+      )}.${nanosecondsPart}`;
     },
+    sorter: true,
+  },
+  {
+    title: t('views.traceManage.task.protocolOrInterface'),
+    dataIndex: 'ifType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.traceManage.task.msgEvent'),
+    dataIndex: 'msgEvent',
+    align: 'left',
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: t('views.traceManage.task.msgType'),
+    dataIndex: 'msgType',
+    key: 'msgType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.traceManage.task.msgDirect'),
+    dataIndex: 'msgDirect',
+    key: 'msgDirect',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.traceManage.task.srcIp'),
+    dataIndex: 'srcAddr',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.traceManage.task.dstIp'),
+    dataIndex: 'dstAddr',
+    align: 'left',
+    width: 200,
   },
   {
     title: t('common.operate'),
     key: 'id',
-    align: 'center',
+    align: 'left',
   },
 ];
 
@@ -148,6 +203,18 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { field, order } = sorter;
+  if (order) {
+    queryParams.sortBy = field;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
 /**查询备份信息列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
@@ -155,10 +222,24 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.beginTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.beginTime = undefined;
+    queryParams.endTime = undefined;
+  }
+
   listTraceData(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+    if (res.code === RESULT_CODE_SUCCESS) {
-      tablePagination.total = res.total;
+      const { total, rows } = res.data;
-      tableState.data = res.rows;
+      tablePagination.total = total;
+      tableState.data = rows;
       if (
         tablePagination.total <=
           (queryParams.pageNum - 1) * tablePagination.pageSize &&
@@ -198,24 +279,17 @@ let modalState: ModalStateType = reactive({
  * @param row 记录信息
  */
 function fnModalVisible(row: Record<string, any>) {
-  // 进制转数据
+  getTraceData(row.id).then(res => {
-  const hexString = parseBase64Data(row.rawMsg);
+    if (res.code === RESULT_CODE_SUCCESS) {
-  const rawData = convertToReadableFormat(hexString);
+      Object.assign(modalState.from, res.data);
-  modalState.from.rawData = rawData;
+      // 进制转数据
-  // RAW解析HTML
+      const hexString = parseBase64Data(res.data.rawMsg);
-  // getTraceRawInfo(row.id).then(res => {
+      const rawData = convertToReadableFormat(hexString);
-  //   if (res.code === RESULT_CODE_SUCCESS) {
+      modalState.from.rawData = rawData;
-  //     const htmlString = rawDataHTMLScript(res.msg);
+      modalState.title = t('views.traceManage.task.taskInfo');
-  //     modalState.from.rawDataHTML = htmlString;
+      modalState.open = true;
-  //     modalState.from.downBtn = true;
+    }
-  //   } else {
-  //     modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
-  //   }
-  // });
-  modalState.title = t('views.traceManage.analysis.taskTitle', {
-    num: row.imsi,
   });
-  modalState.open = true;
 }
 
 /**
@@ -223,15 +297,13 @@ function fnModalVisible(row: Record<string, any>) {
  */
 function fnModalVisibleClose() {
   modalState.open = false;
-  modalState.from.downBtn = false;
-  modalState.from.rawDataHTML = '';
   modalState.from.rawData = '';
 }
 
 // 将Base64编码解码为字节数组
-function parseBase64Data(hexData: string) {
+function parseBase64Data(base64Data: string) {
   // 将Base64编码解码为字节数组
-  const byteString = atob(hexData);
+  const byteString = decode(base64Data);
   const byteArray = new Uint8Array(byteString.length);
   for (let i = 0; i < byteString.length; i++) {
     byteArray[i] = byteString.charCodeAt(i);
@@ -251,7 +323,7 @@ function convertToReadableFormat(hexString: string) {
   let result = '';
   let asciiResult = '';
   let arr = [];
-  let row = 100;
+  let row = 10000;
   for (let i = 0; i < hexString.length; i += 2) {
     const hexChars = hexString.substring(i, i + 2);
     const decimal = parseInt(hexChars, 16);
@@ -285,100 +357,46 @@ function convertToReadableFormat(hexString: string) {
   return arr;
 }
 
-// 信息详情HTMl内容处理
-function rawDataHTMLScript(htmlString: string) {
-  // 删除所有 <a> 标签
-  // const withoutATags = htmlString.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '');
-  // 删除所有 <script> 标签
-  let withoutScriptTags = htmlString.replace(
-    /<script\b[^>]*>([\s\S]*?)<\/script>/gi,
-    ''
-  );
-  // 默认全展开
-  // const withoutHiddenElements = withoutScriptTags.replace(
-  //   /style="display:none"/gi,
-  //   'style="background:#ffffff"'
-  // );
-
-  function set_node(node: any, str: string) {
-    if (!node) return;
-    node.style.display = str;
-    node.style.background = '#ffffff';
-  }
-  Reflect.set(window, 'set_node', set_node);
-  function toggle_node(node: any) {
-    node = document.getElementById(node);
-    if (!node) return;
-    set_node(node, node.style.display != 'none' ? 'none' : 'block');
-  }
-  Reflect.set(window, 'toggle_node', toggle_node);
-  function hide_node(node: any) {
-    node = document.getElementById(node);
-    if (!node) return;
-    set_node(node, 'none');
-  }
-  Reflect.set(window, 'hide_node', hide_node);
-
-  // 展开第一个
-  withoutScriptTags = withoutScriptTags.replace(
-    'id="f1c" style="display:none"',
-    'id="f1c" style="display:block"'
-  );
-  return withoutScriptTags;
-}
-
-/**信息文件下载 */
-function fnDownloadFile() {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.traceManage.analysis.taskDownTip'),
-    onOk() {
-      const blob = new Blob([modalState.from.rawDataHTML], {
-        type: 'text/plain',
-      });
-      saveAs(blob, `${modalState.title}_${Date.now()}.html`);
-    },
-  });
-}
-
 onMounted(() => {
-  // 获取列表数据
+  // 初始字典数据
-  fnGetList();
+  Promise.allSettled([getDict('trace_msg_type'), getDict('trace_msg_direct')])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        dict.traceMsgType = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.traceMsgDirect = resArr[1].value;
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
 });
 </script>
 
 <template>
   <PageContainer>
     <a-card
-      v-show="tableState.seached"
       :bordered="false"
       :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
     >
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="8" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.traceManage.analysis.imsi')"
+              :label="t('views.traceManage.task.rowTime')"
-              name="imsi"
+              name="queryRangePicker"
             >
-              <a-input
+              <a-range-picker
-                v-model:value="queryParams.imsi"
+                v-model:value="queryRangePicker"
-                :allow-clear="true"
+                :bordered="true"
-                :placeholder="t('views.traceManage.analysis.imsiPlease')"
+                :allow-clear="false"
-              ></a-input>
+                style="width: 100%"
-            </a-form-item>
+                :show-time="{ format: 'HH:mm:ss' }"
-          </a-col>
+                format="YYYY-MM-DD HH:mm:ss"
-          <a-col :lg="6" :md="12" :xs="24">
+              ></a-range-picker>
-            <a-form-item
-              :label="t('views.traceManage.analysis.msisdn')"
-              name="imsi"
-            >
-              <a-input
-                v-model:value="queryParams.msisdn"
-                :allow-clear="true"
-                :placeholder="t('views.traceManage.analysis.msisdnPlease')"
-              ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
@@ -401,20 +419,22 @@ onMounted(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-button type="default" @click.prevent="fnClose()">
+            <template #icon><CloseOutlined /></template>
+            {{ t('common.close') }}
+          </a-button>
+          <span>
+            {{ t('views.traceManage.task.traceId') }}:&nbsp;
+            <strong>{{ traceId }}</strong>
+          </span>
+        </a-space>
+      </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
@@ -458,11 +478,18 @@ onMounted(() => {
         :size="tableState.size"
         :pagination="tablePagination"
         :scroll="{ x: true }"
+        @change="fnTableChange"
       >
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'msgType'">
+            <DictTag :options="dict.traceMsgType" :value="record.msgType" />
+          </template>
+          <template v-if="column.key === 'msgDirect'">
+            <DictTag :options="dict.traceMsgDirect" :value="record.msgDirect" />
+          </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
-              <a-tooltip>
+              <a-tooltip placement="topRight">
                 <template #title>{{ t('common.viewText') }}</template>
                 <a-button type="link" @click.prevent="fnModalVisible(record)">
                   <template #icon><ProfileOutlined /></template>
@@ -481,35 +508,111 @@ onMounted(() => {
       :title="modalState.title"
       :open="modalState.open"
       @cancel="fnModalVisibleClose"
+      :footer="false"
     >
-      <div class="raw-title">
+      <a-form
-        {{ t('views.traceManage.analysis.signalData') }}
+        name="modalStateFrom"
-      </div>
+        layout="horizontal"
-      <a-row
+        :label-col="{ span: 8 }"
-        class="raw"
+        :label-wrap="true"
-        v-for="v in modalState.from.rawData"
-        :key="v.row"
       >
-        <a-col class="num" :span="2">{{ v.row }}</a-col>
+        <a-row>
-        <a-col class="code" :span="12">{{ v.code }}</a-col>
+          <a-col :lg="12" :md="12" :xs="24">
-        <a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
+            <a-form-item
-      </a-row>
+              :label="t('views.traceManage.task.msgType')"
-      <a-divider />
+              name="msgType"
-      <!-- <div class="raw-title">
+            >
-        {{ t('views.traceManage.analysis.signalDetail') }}
+              <DictTag
-        <a-button
+                :options="dict.traceMsgType"
-          type="dashed"
+                :value="modalState.from.msgType"
-          size="small"
+              />
-          @click.prevent="fnDownloadFile"
+            </a-form-item>
-          v-if="modalState.from.downBtn"
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.msgDirect')"
+              name="msgDirect"
+            >
+              <DictTag
+                :options="dict.traceMsgDirect"
+                :value="modalState.from.msgDirect"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.srcIp')"
+              name="srcAddr"
+            >
+              {{ modalState.from.srcAddr }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.dstIp')"
+              name="dstAddr"
+            >
+              {{ modalState.from.dstAddr }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.msgNe')"
+              name="msgNe"
+            >
+              {{ modalState.from.msgNe }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.msgEvent')"
+              name="msgEvent"
+            >
+              {{ modalState.from.msgEvent }}
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          v-if="modalState.from.imsi"
+          :label="t('views.traceManage.task.imsi')"
+          name="imsi"
+          :label-col="{ span: 4 }"
         >
-          <template #icon>
+          {{ modalState.from.imsi }}
-            <DownloadOutlined />
+        </a-form-item>
-          </template>
+
-          {{ t('views.traceManage.analysis.taskDownText') }}
+        <a-form-item
-        </a-button>
+          v-if="modalState.from.ifType"
-      </div> -->
+          :label="t('views.traceManage.task.protocolOrInterface')"
-      <!-- <div class="raw-html" v-html="modalState.from.rawDataHTML"></div> -->
+          name="ifType"
+          :label-col="{ span: 4 }"
+        >
+          {{ modalState.from.ifType }}
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.traceManage.task.msgLen')"
+          name="length"
+          :label-col="{ span: 4 }"
+        >
+          {{ modalState.from.length }}
+        </a-form-item>
+
+        <a-form-item>
+          <a-row class="raw" v-for="v in modalState.from.rawData" :key="v.row">
+            <a-col class="num" :span="2">{{ v.row }}</a-col>
+            <a-col class="code" :span="12">{{ v.code }}</a-col>
+            <a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
+          </a-row>
+        </a-form-item>
+      </a-form>
     </ProModal>
   </PageContainer>
 </template>
@@ -520,24 +623,15 @@ onMounted(() => {
 }
 
 .raw {
-  &-title {
-    color: #000000d9;
-    font-size: 24px;
-    line-height: 1.8;
-  }
   .num {
-    background-color: #e5e5e5;
+    background-color: #f0f0f0;
   }
   .code {
-    background-color: #e7e6ff;
+    background-color: #0078d4;
+    color: #fff;
   }
   .txt {
-    background-color: #ffe3e5;
+    background-color: #d9d9d9;
-  }
-
-  &-html {
-    max-height: 300px;
-    overflow-y: auto;
   }
 }
 </style>

src/views/traceManage/task/index.vue

@@ -20,7 +20,7 @@ import {
   updateTraceTask,
 } from '@/api/trace/task';
 import useDictStore from '@/store/modules/dict';
-import { regExpIPv4, regExpPort } from '@/utils/regular-utils';
+import { regExpIPv4 } from '@/utils/regular-utils';
 import dayjs, { Dayjs } from 'dayjs';
 import { parseObjHumpToLine } from '@/utils/parse-utils';
 const neInfoStore = useNeInfoStore();
@@ -33,8 +33,11 @@ const route = useRoute();
 let dict: {
   /**跟踪类型 */
   traceType: DictType[];
+  /**跟踪接口 */
+  traceInterfaces: DictType[];
 } = reactive({
   traceType: [],
+  traceInterfaces: [],
 });
 
 /**网元类型_多neId */
@@ -98,40 +101,28 @@ let tableState: TabeStateType = reactive({
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
-  {
-    title: t('views.ne.common.neType'),
-    dataIndex: 'neType',
-    align: 'left',
-    sorter: {
-      compare: (a, b) => 1,
-      multiple: 1,
-    },
-  },
-  {
-    title: t('views.ne.common.neId'),
-    dataIndex: 'neId',
-    align: 'left',
-  },
   {
     title: t('views.traceManage.task.traceId'),
     dataIndex: 'traceId',
     align: 'left',
+    width: 150,
   },
   {
     title: t('views.traceManage.task.trackType'),
     dataIndex: 'traceType',
     key: 'traceType',
     align: 'left',
+    width: 150,
   },
   {
     title: t('views.traceManage.task.startTime'),
     dataIndex: 'startTime',
     align: 'left',
+    width: 200,
     customRender(opt) {
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    sorter: true,
   },
   {
     title: t('views.traceManage.task.endTime'),
@@ -141,6 +132,7 @@ let tableColumns: ColumnsType = [
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
+    width: 200,
   },
   {
     title: t('common.operate'),
@@ -246,13 +238,14 @@ function fnGetList(pageNum?: number) {
     queryParams.pageNum = pageNum;
   }
   listTraceTask(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+    if (res.code === RESULT_CODE_SUCCESS) {
       // 取消勾选
       if (tableState.selectedRowKeys.length > 0) {
         tableState.selectedRowKeys = [];
       }
-      tablePagination.total = res.total;
+      const { total, rows } = res.data;
-      tableState.data = res.rows;
+      tablePagination.total = total;
+      tableState.data = rows;
       if (
         tablePagination.total <=
           (queryParams.pageNum - 1) * tablePagination.pageSize &&
@@ -273,18 +266,15 @@ type ModalStateType = {
   /**标题 */
   title: string;
   /**网元类型设备对象 */
-  neType: string[];
+  neType: any[] | undefined;
   /**网元类型设备对象接口 */
-  neTypeInterface: Record<string, any>[];
+  neTypeInterface: string[];
-  /**网元类型设备对象接口选择 */
-  neTypeInterfaceSelect: string[];
   /**任务开始结束时间 */
-  timeRangePicker: [string, string];
+  timeRangePicker: [Dayjs, Dayjs] | undefined;
   /**表单数据 */
   from: {
     id?: string;
-    neType: string;
+    neList: string; // 网元列表 neType_neId 例如 UDM_001,AMF_001
-    neId: string;
     /**1-Interface,2-Device,3-User */
     traceType: string;
     startTime?: number;
@@ -311,13 +301,11 @@ let modalState: ModalStateType = reactive({
   title: '',
   neType: [],
   neTypeInterface: [],
-  neTypeInterfaceSelect: [],
+  timeRangePicker: undefined,
-  timeRangePicker: ['', ''],
   from: {
-    id: '',
+    id: undefined,
-    neType: '',
+    neList: '',
-    neId: '',
+    traceId: undefined,
-    traceId: '',
     traceType: '3',
     startTime: undefined,
     endTime: undefined,
@@ -329,8 +317,8 @@ let modalState: ModalStateType = reactive({
     dstIp: '',
     signalPort: undefined,
     /**3用户跟踪 */
-    imsi: '',
+    imsi: undefined,
-    msisdn: '',
+    // msisdn: undefined,
   },
   confirmLoading: false,
 });
@@ -345,7 +333,7 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.trackTypePlease'),
       },
     ],
-    neId: [
+    neList: [
       {
         required: true,
         message: t('views.ne.common.neTypePlease'),
@@ -392,43 +380,48 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.dstIpPlease'),
       },
     ],
-    signalPort: [
-      {
-        required: false,
-        pattern: regExpPort,
-        message: t('views.traceManage.task.signalPortPlease'),
-      },
-    ],
   })
 );
 
 /**网元类型选择对应修改 */
-function fnNeChange(_: any, item: any) {
+function fnNeChange(p: any, c: any) {
-  modalState.from.neType = item[1].neType;
+  let neList: string[] = [];
-  modalState.from.neId = item[1].neId;
+  for (let i = 0; i < p.length; i++) {
-  // 网元信令接口可选列表
+    const v = p[i];
-  modalState.from.interfaces = '';
+    if (v.length === 1) {
-  modalState.neTypeInterfaceSelect = [];
+      c[i][0].children.forEach((item: any) => {
-  fnSelectInterfaceInit(item[1].neType);
+        neList.push(`${item.neType}_${item.neId}`);
-}
+      });
-
+    } else if (v.length === 2) {
-/**跟踪类型选择对应修改 */
+      neList.push(`${v[0]}_${v[1]}`);
-function fnTraceTypeChange(v: any, _: any) {
+    }
-  // 网元信令接口可选列表
+  }
-  if (v === '1' && modalState.from.neType) {
+  if (neList.length > 0) {
-    modalState.from.interfaces = '';
+    modalState.from.neList = neList.join(',');
-    modalState.neTypeInterfaceSelect = [];
+  } else {
-    fnSelectInterfaceInit(modalState.from.neType);
+    modalState.from.neList = '';
   }
 }
 
 /**开始结束时间选择对应修改 */
 function fnRangePickerChange(item: any, _: any) {
-  modalState.from.startTime = +item[0];
+  if (!item || item.length !== 2) {
-  modalState.from.endTime = +item[1];
+    modalState.from.startTime = undefined;
+    modalState.from.endTime = undefined;
+    return;
+  }
+  // 获取当前时间
+  const now = dayjs();
+  // 如果开始时间小于当前时间，则设置为当前时间
+  const startTime = item[0].isBefore(now) ? now : item[0];
+  const endTime = item[1].isBefore(now) ? now : item[1];
+  modalState.timeRangePicker = [startTime, endTime];
+
+  modalState.from.startTime = startTime.valueOf();
+  modalState.from.endTime = endTime.valueOf();
 }
 function fnRangePickerDisabledDate(current: Dayjs) {
-  return current && current < dayjs().subtract(1, 'day').endOf('day');
+  return current && current < dayjs().startOf('day');
 }
 
 /**信令接口选择对应修改 */
@@ -436,19 +429,6 @@ function fnSelectInterface(s: any, _: any) {
   modalState.from.interfaces = s.join(',');
 }
 
-/**信令接口选择初始 */
-function fnSelectInterfaceInit(neType: string) {
-  const interfaces = neInfoStore.traceInterfaceList;
-  modalState.neTypeInterface = interfaces
-    .filter(i => i.neType === neType)
-    .map(i => {
-      return {
-        value: i.interface,
-        label: i.interface,
-      };
-    });
-}
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
@@ -466,20 +446,45 @@ function fnModalOpenByEdit(id?: string) {
       modalState.confirmLoading = false;
       hide();
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
-        modalState.neType = [res.data.neType, res.data.neId];
+        // 回显网元类型
-        modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
+        const neType: any[] = [];
-        modalState.from = Object.assign(modalState.from, res.data);
+        const neList = res.data.neList.split(',');
-        // 接口
+        const neListMap: any = {};
-        if (res.data.traceType === 'Interface') {
+        for (const v of neList) {
-          if (
+          const item: string[] = v.split('_');
-            res.data.interfaces.length > 4 &&
+          if (!neListMap[item[0]]) {
-            res.data.interfaces.includes('[')
+            neListMap[item[0]] = [];
-          ) {
-            modalState.neTypeInterfaceSelect = JSON.parse(res.data.interfaces);
           }
-          fnSelectInterfaceInit(res.data.neType);
+          neListMap[item[0]].push(item[1]);
         }
-        modalState.title = t('views.traceManage.task.editTask');
+        for (const op of neCascaderOptions.value) {
+          const arr = neListMap[op.value];
+          if (!arr) {
+            continue;
+          }
+          const all = op.children.every((c: any) => {
+            return arr.includes(c.neId);
+          });
+          if (all) {
+            neType.push([op.value]);
+          } else {
+            arr.forEach((v: string) => {
+              neType.push([op.value, v]);
+            });
+          }
+        }
+        modalState.neType = neType;
+        // 回显时间
+        modalState.timeRangePicker = [
+          dayjs(res.data.startTime),
+          dayjs(res.data.endTime),
+        ];
+        // 回显接口
+        if (res.data.traceType === '1') {
+          modalState.neTypeInterface = res.data.interfaces.split(',');
+        }
+        modalState.from = Object.assign(modalState.from, res.data);
+        modalState.title = t('views.traceManage.task.viewTask');
         modalState.openByEdit = true;
       } else {
         message.error(t('views.traceManage.task.errorTaskInfo'), 3);
@@ -494,15 +499,15 @@ function fnModalOpenByEdit(id?: string) {
  */
 function fnModalOk() {
   const from = toRaw(modalState.from);
-  let valids = ['traceType', 'neId', 'endTime'];
+  let valids = ['traceType', 'neList', 'endTime'];
   if (from.traceType === '1') {
     valids = valids.concat(['interfaces']);
   }
   if (from.traceType === '2') {
-    valids = valids.concat(['srcIp', 'dstIp', 'signalPort']);
+    valids = valids.concat(['srcIp', 'dstIp']);
   }
   if (from.traceType === '3') {
-    valids = valids.concat(['imsi', 'msisdn']);
+    valids = valids.concat(['imsi']);
   }
 
   modalStateFrom
@@ -545,46 +550,48 @@ function fnModalCancel() {
   modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
-  modalState.timeRangePicker = ['', ''];
-  modalState.neTypeInterfaceSelect = [];
   modalState.neType = [];
   modalState.neTypeInterface = [];
+  modalState.timeRangePicker = undefined;
 }
 
-/**跳转PCAP文件详情页面 */
+/**跳转内嵌详情页面 */
-function fnRecordPCAPView(row: Record<string, any>) {
+function fnRecordView(traceId: any, type: 'analyze' | 'data') {
   router.push({
-    path: `${route.path}${MENU_PATH_INLINE}/analyze`,
+    path: `${route.path}${MENU_PATH_INLINE}/${type}`,
-    query: {
+    query: { traceId },
-      traceId: row.traceId,
-    },
   });
 }
 
 onMounted(() => {
   // 初始字典数据
-  Promise.allSettled([getDict('trace_type')]).then(resArr => {
+  Promise.allSettled([getDict('trace_type'), getDict('trace_interfaces')]).then(
-    if (resArr[0].status === 'fulfilled') {
+    resArr => {
-      dict.traceType = resArr[0].value;
+      if (resArr[0].status === 'fulfilled') {
+        dict.traceType = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.traceInterfaces = resArr[1].value;
+      }
     }
-  });
+  );
 
   // 获取网元网元列表
   useNeInfoStore()
     .fnNelist()
     .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      if (res.code === RESULT_CODE_SUCCESS) {
         if (res.data.length > 0) {
           // 过滤不可用的网元
           neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
             (item: any) => {
-              return ['UDM'].includes(item.value);
+              return ['AMF', 'AUSF', 'SMF', 'UDM', 'PCF'].includes(item.value);
             }
           );
           if (neCascaderOptions.value.length === 0) {
             message.warning({
               content: t('common.noData'),
-              duration: 2,
+              duration: 3,
             });
             return;
           }
@@ -592,13 +599,11 @@ onMounted(() => {
       } else {
         message.warning({
           content: t('common.noData'),
-          duration: 2,
+          duration: 3,
         });
       }
     })
     .finally(() => {
-      // 获取跟踪接口列表
-      neInfoStore.fnNeTraceInterface();
       // 获取列表数据
       fnGetList();
     });
@@ -764,21 +769,40 @@ onMounted(() => {
           </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
+              <div v-perms:has="['traceManage:task:data']">
+                <a-tooltip placement="topRight">
+                  <template #title>
+                    {{ t('views.traceManage.task.dataView') }}
+                  </template>
+                  <a-button
+                    type="link"
+                    @click.prevent="fnRecordView(record.traceId, 'data')"
+                  >
+                    <template #icon><ContainerOutlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </div>
+              <div v-perms:has="['traceManage:task:analyze']">
+                <a-tooltip placement="topRight">
+                  <template #title>
+                    {{ t('views.traceManage.task.pcapView') }}
+                  </template>
+                  <a-button
+                    type="link"
+                    @click.prevent="fnRecordView(record.traceId, 'analyze')"
+                  >
+                    <template #icon><BarsOutlined /></template>
+                  </a-button>
+                </a-tooltip>
+              </div>
+
               <a-tooltip placement="topRight">
-                <template #title>{{ t('common.editText') }}</template>
+                <template #title>{{ t('common.viewText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalOpenByEdit(record.id)"
                 >
-                  <template #icon><FormOutlined /></template>
+                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip placement="topRight">
-                <template #title>{{
-                  t('views.traceManage.task.pcapView')
-                }}</template>
-                <a-button type="link" @click.prevent="fnRecordPCAPView(record)">
-                  <template #icon><ContainerOutlined /></template>
                 </a-button>
               </a-tooltip>
               <a-tooltip placement="topRight">
@@ -809,12 +833,14 @@ onMounted(() => {
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
+      :footer="modalState.from.id ? null : undefined"
     >
       <a-form
         name="modalStateFrom"
         layout="horizontal"
         :label-col="{ span: 4 }"
         :label-wrap="true"
+        :disabled="!!modalState.from.id"
       >
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
@@ -822,12 +848,13 @@ onMounted(() => {
               :label="t('views.ne.common.neType')"
               :label-col="{ span: 8 }"
               name="neType"
-              v-bind="modalStateFrom.validateInfos.neId"
+              v-bind="modalStateFrom.validateInfos.neList"
             >
               <a-cascader
                 v-model:value="modalState.neType"
                 :options="neCascaderOptions"
                 @change="fnNeChange"
+                multiple
                 :allow-clear="false"
                 :placeholder="t('views.ne.common.neTypePlease')"
               />
@@ -843,7 +870,6 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.traceType"
                 :options="dict.traceType"
-                @change="fnTraceTypeChange"
                 :allow-clear="false"
                 :placeholder="t('views.traceManage.task.trackTypePlease')"
               >
@@ -860,11 +886,9 @@ onMounted(() => {
           <a-range-picker
             v-model:value="modalState.timeRangePicker"
             @change="fnRangePickerChange"
-            allow-clear
             bordered
             :show-time="{ format: 'HH:mm:ss' }"
             format="YYYY-MM-DD HH:mm:ss"
-            value-format="x"
             style="width: 100%"
             :disabled-date="fnRangePickerDisabledDate"
             :placeholder="[
@@ -893,8 +917,8 @@ onMounted(() => {
             <a-select
               mode="multiple"
               :placeholder="t('views.traceManage.task.interfacesPlease')"
-              v-model:value="modalState.neTypeInterfaceSelect"
+              v-model:value="modalState.neTypeInterface"
-              :options="modalState.neTypeInterface"
+              :options="dict.traceInterfaces"
               @change="fnSelectInterface"
             >
             </a-select>
@@ -903,26 +927,6 @@ onMounted(() => {
 
         <!-- 设备跟踪 -->
         <template v-if="modalState.from.traceType === '2'">
-          <a-form-item
-            :label="t('views.traceManage.task.signalPort')"
-            name="signalPort"
-            v-bind="modalStateFrom.validateInfos.signalPort"
-          >
-            <a-input-number
-              v-model:value="modalState.from.signalPort"
-              style="width: 100%"
-              :placeholder="t('views.traceManage.task.signalPortPlease')"
-            >
-              <template #prefix>
-                <a-tooltip placement="topLeft">
-                  <template #title>
-                    <div>{{ t('views.traceManage.task.signalPortTip') }}</div>
-                  </template>
-                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
-                </a-tooltip>
-              </template>
-            </a-input-number>
-          </a-form-item>
           <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
@@ -941,7 +945,9 @@ onMounted(() => {
                       <template #title>
                         <div>{{ t('views.traceManage.task.srcIpTip') }}</div>
                       </template>
-                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                      <InfoCircleOutlined
+                        style="opacity: 0.45; color: inherit"
+                      />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -964,7 +970,9 @@ onMounted(() => {
                       <template #title>
                         <div>{{ t('views.traceManage.task.dstIpTip') }}</div>
                       </template>
-                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                      <InfoCircleOutlined
+                        style="opacity: 0.45; color: inherit"
+                      />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -990,12 +998,12 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.imsiTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
           </a-form-item>
-          <a-form-item
+          <!-- <a-form-item
             :label="t('views.traceManage.task.msisdn')"
             name="msisdn"
             v-bind="modalStateFrom.validateInfos.msisdn"
@@ -1010,11 +1018,11 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
-          </a-form-item>
+          </a-form-item> -->
         </template>
       </a-form>
     </ProModal>

src/views/traceManage/tshark/hooks/usePCAP.ts

@@ -31,11 +31,11 @@ type StateType = {
   /**当前选中的帧编号 */
   selectedFrame: number;
   /**当前选中的帧数据 */
-  selectedPacket: { tree: any[]; data_sources: any[] };
+  packetFrame: { tree: any[]; data_sources: any[] };
   /**pcap包帧数据 */
-  packetFrameData: Map<string, any> | null;
+  packetFrameTreeMap: Map<string, any> | null;
-  /**当前选中的帧数据-空占位 */
+  /**当前选中的帧数据 */
-  selectedTreeEntry: typeof NO_SELECTION;
+  selectedTree: typeof NO_SELECTION;
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: number;
   /**处理完成状态 */
@@ -69,11 +69,11 @@ export function usePCAP() {
     filter: '',
     filterError: null,
     currentFilter: '',
-    selectedFrame: 1,
+    selectedFrame: 0,
     /**当前选中的帧数据 */
-    selectedPacket: { tree: [], data_sources: [] },
+    packetFrame: { tree: [], data_sources: [] },
-    packetFrameData: null, // 注意：Map 需要额外处理
+    packetFrameTreeMap: null, // 注意：Map 需要额外处理
-    selectedTreeEntry: NO_SELECTION, // NO_SELECTION 需要定义
+    selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
     /**选择帧的Dump数据标签 */
     selectedDataSourceIndex: 0,
     /**处理完成状态 */
@@ -91,9 +91,9 @@ export function usePCAP() {
     state.nextPageNum = 1;
     // 选择帧的数据
     state.selectedFrame = 0;
-    state.selectedPacket = { tree: [], data_sources: [] };
+    state.packetFrame = { tree: [], data_sources: [] };
-    state.packetFrameData = null;
+    state.packetFrameTreeMap = null;
-    state.selectedTreeEntry = NO_SELECTION;
+    state.selectedTree = NO_SELECTION;
     state.selectedDataSourceIndex = 0;
   }
 
@@ -121,23 +121,23 @@ export function usePCAP() {
   }
 
   /**帧数据点击选中 */
-  function handleSelectedTreeEntry(e: any) {
+  function handleSelectedTree(e: any) {
-    console.log('fnSelectedTreeEntry', e);
+    // console.log('fnSelectedTree', e);
-    state.selectedTreeEntry = e;
+    state.selectedTree = e;
   }
   /**报文数据点击选中 */
   function handleSelectedFindSelection(src_idx: number, pos: number) {
-    console.log('fnSelectedFindSelection', pos);
+    // console.log('fnSelectedFindSelection', pos);
-    if (state.packetFrameData == null) return;
+    if (state.packetFrameTreeMap == null) return;
     // find the smallest one
     let current = null;
-    for (let [k, pp] of state.packetFrameData) {
+    for (let [k, pp] of state.packetFrameTreeMap) {
       if (pp.idx !== src_idx) continue;
 
       if (pos >= pp.start && pos <= pp.start + pp.length) {
         if (
           current != null &&
-          state.packetFrameData.get(current).length > pp.length
+          state.packetFrameTreeMap.get(current).length > pp.length
         ) {
           current = k;
         } else {
@@ -146,19 +146,19 @@ export function usePCAP() {
       }
     }
     if (current != null) {
-      state.selectedTreeEntry = state.packetFrameData.get(current);
+      state.selectedTree = state.packetFrameTreeMap.get(current);
     }
   }
   /**包数据表点击选中 */
   function handleSelectedFrame(no: number) {
-    console.log('fnSelectedFrame', no, state.totalFrames);
+    // console.log('fnSelectedFrame', no, state.totalFrames);
     state.selectedFrame = no;
     wk.send({ type: 'select', number: state.selectedFrame });
   }
   /**包数据表滚动底部加载 */
   function handleScrollBottom() {
     const totalFetched = state.packetFrames.length;
-    console.log('fnScrollBottom', totalFetched);
+    // console.log('fnScrollBottom', totalFetched);
     if (!state.nextPageLoad && totalFetched < state.totalFrames) {
       state.nextPageLoad = true;
       state.nextPageNum++;
@@ -167,7 +167,7 @@ export function usePCAP() {
   }
   /**包数据表过滤 */
   function handleFilterFrames() {
-    console.log('fnFilterFinish', state.filter);
+    // console.log('fnFilterFinish', state.filter);
     wk.send({ type: 'check-filter', filter: state.filter });
   }
   /**包数据表加载 */
@@ -254,9 +254,9 @@ export function usePCAP() {
         }
         break;
       case 'selected':
-        state.selectedPacket = res.data;
+        state.packetFrame = res.data;
-        state.packetFrameData = parseFrameData('root', res.data);
+        state.packetFrameTreeMap = parseFrameData('root', res.data);
-        state.selectedTreeEntry = NO_SELECTION;
+        state.selectedTree = NO_SELECTION;
         state.selectedDataSourceIndex = 0;
         break;
       case 'processed':
@@ -306,7 +306,7 @@ export function usePCAP() {
 
   return {
     state,
-    handleSelectedTreeEntry,
+    handleSelectedTree,
     handleSelectedFindSelection,
     handleSelectedFrame,
     handleScrollBottom,

src/views/traceManage/tshark/index.vue

@@ -8,11 +8,12 @@ import DissectionDump from './components/DissectionDump.vue';
 import PacketTable from './components/PacketTable.vue';
 import { usePCAP, NO_SELECTION } from './hooks/usePCAP';
 import { parseSizeFromFile } from '@/utils/parse-utils';
+import { parseDateToStr } from '@/utils/date-utils';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const {
   state,
-  handleSelectedTreeEntry,
+  handleSelectedTree,
   handleSelectedFindSelection,
   handleSelectedFrame,
   handleScrollBottom,
@@ -49,8 +50,9 @@ function fnUpload(up: UploadRequestOption) {
       :loading="!state.initialized"
       :body-style="{ padding: '12px' }"
     >
-      <div class="toolbar">
+      <!-- 插槽-卡片左侧侧 -->
-        <a-space :size="8" class="toolbar-oper">
+      <template #title>
+        <a-space :size="8" align="center">
           <a-upload
             name="file"
             list-type="picture"
@@ -64,61 +66,94 @@ function fnUpload(up: UploadRequestOption) {
           </a-upload>
           <a-button @click="handleLoadExample()">Example</a-button>
         </a-space>
-
+      </template>
-        <div class="toolbar-info">
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
           <a-tag color="green" v-show="!!state.currentFilter">
             {{ state.currentFilter }}
           </a-tag>
           <span> Matched Frame: {{ state.totalFrames }} </span>
-        </div>
+          <!-- 包信息 -->
-
+          <a-popover
-        <!-- 包信息 -->
+            trigger="click"
-        <a-popover
+            placement="bottomLeft"
-          trigger="click"
+            v-if="state.summary.filename"
-          placement="bottomLeft"
+          >
-          v-if="state.summary.filename"
+            <template #content>
-        >
+              <div class="summary">
-          <template #content>
+                <div class="summary-item">
-            <div class="summary">
+                  <span>Type:</span>
-              <div class="summary-item">
+                  <span>{{ state.summary.file_type }}</span>
-                <span>Type:</span>
+                </div>
-                <span>{{ state.summary.file_type }}</span>
+                <div class="summary-item">
+                  <span>Size:</span>
+                  <span>{{
+                    parseSizeFromFile(state.summary.file_length)
+                  }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Encapsulation:</span>
+                  <span>{{ state.summary.file_encap_type }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Packets:</span>
+                  <span>{{ state.summary.packet_count }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Start Time:</span>
+                  <span>
+                    {{
+                      parseDateToStr(
+                        state.summary.start_time * 1000,
+                        'YYYY-MM-DD HH:mm:ss.SSS'
+                      )
+                    }}
+                  </span>
+                </div>
+                <div class="summary-item">
+                  <span>Stop Time:</span>
+                  <span>
+                    {{
+                      parseDateToStr(
+                        state.summary.stop_time * 1000,
+                        'YYYY-MM-DD HH:mm:ss.SSS'
+                      )
+                    }}
+                  </span>
+                </div>
+                <div class="summary-item">
+                  <span>Duration:</span>
+                  <span>{{ Math.round(state.summary.elapsed_time) }}s</span>
+                </div>
               </div>
-              <div class="summary-item">
+            </template>
-                <span>Size:</span>
+            <InfoCircleOutlined />
-                <span>{{ parseSizeFromFile(state.summary.file_length) }}</span>
+          </a-popover>
-              </div>
+        </a-space>
-              <div class="summary-item">
+      </template>
-                <span>Encapsulation:</span>
-                <span>{{ state.summary.file_encap_type }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Packets:</span>
-                <span>{{ state.summary.packet_count }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Duration:</span>
-                <span>{{ Math.round(state.summary.elapsed_time) }}s</span>
-              </div>
-            </div>
-          </template>
-          <InfoCircleOutlined />
-        </a-popover>
-      </div>
 
       <!-- 包数据表过滤 -->
       <a-input-group compact>
-        <a-input
+        <a-auto-complete
           v-model:value="state.filter"
-          placeholder="display filter, example: tcp"
+          :options="[
-          :allow-clear="true"
+            { value: 'http || tcp.port == 33030 || http2' },
+            { value: 'ip.src== 172.17.0.19 && ip.dst == 172.17.0.77' },
+            { value: 'sip || ngap' },
+          ]"
           style="width: calc(100% - 100px)"
-          @pressEnter="handleFilterFrames"
+          :allow-clear="true"
         >
-          <template #prefix>
+          <a-input
-            <FilterOutlined />
+            placeholder="display filter, example: tcp"
-          </template>
+            @pressEnter="handleFilterFrames"
-        </a-input>
+          >
+            <template #prefix>
+              <FilterOutlined />
+            </template>
+          </a-input>
+        </a-auto-complete>
         <a-button
           type="primary"
           html-type="submit"
@@ -143,14 +178,18 @@ function fnUpload(up: UploadRequestOption) {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row>
+      <a-row
+        :gutter="16"
+        style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
+        v-show="state.selectedFrame > 0"
+      >
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTreeEntry"
+            :select="handleSelectedTree"
-            :selected="state.selectedTreeEntry"
+            :selected="state.selectedTree"
-            :tree="state.selectedPacket.tree"
+            :tree="state.packetFrame.tree"
           />
         </a-col>
         <a-col :lg="12" :md="12" :xs="24" class="dump">
@@ -163,15 +202,15 @@ function fnUpload(up: UploadRequestOption) {
             <a-tab-pane
               :key="idx"
               :tab="v.name"
-              v-for="(v, idx) in state.selectedPacket.data_sources"
+              v-for="(v, idx) in state.packetFrame.data_sources"
               style="overflow: auto"
             >
               <DissectionDump
                 :base64="v.data"
                 :select="(pos:number)=>handleSelectedFindSelection(idx, pos)"
                 :selected="
-                  idx === state.selectedTreeEntry.idx
+                  idx === state.selectedTree.idx
-                    ? state.selectedTreeEntry
+                    ? state.selectedTree
                     : NO_SELECTION
                 "
               />
@@ -184,17 +223,6 @@ function fnUpload(up: UploadRequestOption) {
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.toolbar-info {
-  flex: 1;
-  text-align: right;
-  padding-right: 8px;
-}
-
 .summary {
   display: flex;
   flex-direction: column;

src/views/traceManage/wireshark/index.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal } from 'ant-design-vue/es';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
-import PacketTable from '../tshark/components/PacketTable.vue';
 import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
-import { filePullTask } from '@/api/trace/task';
+import { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
-import { OptionsType, WS } from '@/plugins/ws-websocket';
+import * as wkUtil from '@/plugins/wk-worker';
+import * as wsUtil from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
 import saveAs from 'file-saver';
 import {
@@ -19,34 +19,20 @@ import {
   packetStop,
   packetFilter,
   packetKeep,
+  packetPCAPFile,
 } from '@/api/trace/packet';
-const ws = new WS();
+import { parseDateToStr } from '@/utils/date-utils';
+import { ColumnsType } from 'ant-design-vue/es/table';
+const ws = new wsUtil.WS();
+const wk = new wkUtil.WK();
 const { t } = useI18n();
 
+// =========== WK ==============
 const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
 
 type StateType = {
-  /**网卡设备列表 */
-  devices: { id: string; label: string; children: any[] }[];
   /**初始化 */
   initialized: boolean;
-  /**保活调度器 */
-  keepTimer: any;
-  /**任务 */
-  task: {
-    taskNo: string;
-    device: string;
-    filter: string;
-    outputPCAP: boolean;
-  };
-  /**字段 */
-  columns: string[];
-
-  /**过滤条件 */
-  filter: string;
-  /**过滤条件错误信息 */
-  filterError: string | null;
-
   /**当前选中的帧编号 */
   selectedFrame: number;
   /**当前选中的帧数据 */
@@ -57,63 +43,19 @@ type StateType = {
   selectedTree: typeof NO_SELECTION;
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: number;
-
-  /**包总数 */
-  totalPackets: number;
-  /**包数据 */
-  packetList: any[];
 };
 
 const state = reactive<StateType>({
-  devices: [],
   initialized: false,
-  keepTimer: null,
+  selectedFrame: 0,
-  task: {
-    taskNo: 'laYlTbq',
-    device: '192.168.5.58',
-    filter: 'tcp and (port 33030 or 8080)',
-    outputPCAP: false,
-  },
-  columns: [
-    'No.',
-    'Time',
-    'Source',
-    'Destination',
-    'Protocol',
-    'Length',
-    'Info',
-  ],
-  filter: 'tcp and (port 33030 or 8080)',
-  filterError: null,
-  selectedFrame: 1,
   /**当前选中的帧数据 */
   packetFrame: { tree: [], data_sources: [] },
   packetFrameTreeMap: null, // 注意：Map 需要额外处理
   selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: 0,
-  // 包数据
-  totalPackets: 0,
-  packetList: [],
 });
 
-/**清除帧数据和报文信息状态 */
-function fnReset() {
-  state.initialized = false;
-  // 选择帧的数据
-  state.selectedFrame = 0;
-  state.packetFrame = { tree: [], data_sources: [] };
-  state.packetFrameTreeMap = null;
-  state.selectedTree = NO_SELECTION;
-  state.selectedDataSourceIndex = 0;
-  // 过滤条件
-  state.filter = 'tcp and (port 33030 or 8080)';
-  state.filterError = null;
-  // 包数据
-  state.totalPackets = 0;
-  state.packetList = [];
-}
-
 /**解析帧数据为简单结构 */
 function parseFrameTree(id: string, node: Record<string, any>) {
   let map = new Map();
@@ -136,15 +78,9 @@ function parseFrameTree(id: string, node: Record<string, any>) {
 
   return map;
 }
-
-/**帧数据点击选中 */
-function handleSelectedTreeEntry(e: any) {
-  console.log('fnSelectedTreeEntry', e);
-  state.selectedTree = e;
-}
 /**报文数据点击选中 */
 function handleSelectedFindSelection(src_idx: number, pos: number) {
-  console.log('fnSelectedFindSelection', pos);
+  // console.log('fnSelectedFindSelection', pos);
   if (state.packetFrameTreeMap == null) return;
   // find the smallest one
   let current = null;
@@ -166,83 +102,274 @@ function handleSelectedFindSelection(src_idx: number, pos: number) {
     state.selectedTree = state.packetFrameTreeMap.get(current);
   }
 }
+/**帧数据点击选中 */
+function handleSelectedTree(e: any) {
+  state.selectedTree = e;
+}
 
-/**包数据表点击选中 */
+/**接收数据后回调 */
-function handleSelectedFrame(num: number) {
+function wkMessage(res: Record<string, any>) {
-  console.log('fnSelectedFrame', num, state.totalPackets);
+  // console.log('wkMessage', res);
-  const packet = state.packetList.find((v: any) => v.number === num);
+  switch (res.type) {
-  if (!packet) return;
+    case 'status':
-  const packetFrame = packet.frame;
+      console.info(res.status);
-  state.selectedFrame = packet.number;
+      break;
-  state.packetFrame = packetFrame;
+    case 'error':
-  state.packetFrameTreeMap = parseFrameTree('root', packetFrame);
+      console.warn(res.error);
-  state.selectedTree = NO_SELECTION;
+      break;
-  state.selectedDataSourceIndex = 0;
+    case 'init':
+      wk.send({ type: 'columns' });
+      state.initialized = true;
+      break;
+    case 'frames':
+      const { frames } = res.data;
+
+      // 有匹配的选择第一个
+      if (frames.length > 0) {
+        state.selectedFrame = frames[0].number;
+        wk.send({ type: 'select', number: state.selectedFrame });
+      }
+      break;
+    case 'selected':
+      // 首行修改帧编号
+      const fristFrame = res.data.tree[0];
+      res.data.tree[0].label = fristFrame.label.replace(
+        'Frame 1:',
+        `Frame ${tableState.selectedNumber}:`
+      );
+      const item = fristFrame.tree.find(
+        (item: any) => item.label === 'Frame Number: 1'
+      );
+      if (item) {
+        item.label = `Frame Number:  ${tableState.selectedNumber}:`;
+      }
+
+      state.packetFrame = res.data;
+      state.packetFrameTreeMap = parseFrameTree('root', res.data);
+      state.selectedTree = NO_SELECTION;
+      state.selectedDataSourceIndex = 0;
+      break;
+    case 'processed':
+      // setStatus(`Error: non-zero return code (${e.data.code})`);
+      // 加载数据
+      wk.send({
+        type: 'frames',
+        filter: '',
+        skip: 0,
+        limit: 1,
+      });
+      break;
+    default:
+      console.warn(res);
+      break;
+  }
 }
-/**包数据表滚动底部加载 */
+/**建立WK连接 */
-function handleScrollBottom(index: any) {
+function fnWK() {
-  console.log('handleScrollBottom', index);
+  const options: wkUtil.OptionsType = {
+    url: wkUrl,
+    onmessage: wkMessage,
+    onerror: (ev: any) => {
+      console.error(ev);
+    },
+  };
+  //建立连接
+  wk.connect(options);
 }
 
+// =========== WS ==============
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+
+  // 建联时发送请求
+  if (!requestId && data.clientId) {
+    tableState.data = [];
+    tableState.total = 0;
+    taskState.keepTimer = setInterval(() => {
+      if (ws.state() != WebSocket.OPEN) {
+        clearInterval(taskState.keepTimer);
+        return;
+      }
+      packetKeep(taskState.task.taskNo, 120);
+    }, 90 * 1000);
+    return;
+  }
+
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+  if (data.groupId === `4_${taskState.task.taskNo}`) {
+    const packetData = data.data;
+    tableState.total = packetData.number;
+    tableState.data.unshift(packetData);
+    if (tableState.data.length > 100) {
+      tableState.data.pop();
+    }
+  }
+}
+/**建立WS连接 */
+function fnWS() {
+  const options: wsUtil.OptionsType = {
+    url: '/ws',
+    params: {
+      /**订阅通道组
+       *
+       * 信令跟踪Packet (GroupID:4_taskNo)
+       */
+      subGroupID: `4_${taskState.task.taskNo}`,
+    },
+    heartTimer: 30 * 1000,
+    onmessage: wsMessage,
+    onerror: (ev: any) => {
+      // 接收数据后回调
+      console.error(ev);
+    },
+  };
+  //建立连接
+  ws.connect(options);
+}
+
+// =========== 任务 ==============
+type TaskStateType = {
+  /**网卡设备列表 */
+  devices: { id: string; label: string; children: any[] }[];
+
+  /**任务 */
+  task: {
+    taskNo: string;
+    device: string;
+    filter: string;
+    outputPCAP: boolean;
+  };
+
+  /**过滤条件 */
+  filter: string;
+  /**过滤条件错误信息 */
+  filterError: string | null;
+
+  /**保活调度器 */
+  keepTimer: any;
+
+  /**停止标记 */
+  stop: boolean;
+  stopOutputPCAP: boolean;
+};
+
+const taskState = reactive<TaskStateType>({
+  devices: [],
+
+  task: {
+    taskNo: '',
+    device: '192.168.5.58',
+    filter: '',
+    outputPCAP: false,
+  },
+
+  filter: '',
+  filterError: null,
+
+  keepTimer: null,
+
+  stop: false,
+  stopOutputPCAP: false,
+});
+
 /**开始跟踪 */
 function fnStart() {
-  // state.task.taskNo = 'laYlTbq';
+  if (taskState.keepTimer) return;
-  state.task.taskNo = Number(Date.now()).toString(16);
+  taskState.keepTimer = true;
-  state.task.outputPCAP = false;
+  const hide = message.loading(t('common.loading'), 0);
-  packetStart(state.task).then(res => {
+  // taskState.task.taskNo = 'laYlTbq';
-    if (res.code === RESULT_CODE_SUCCESS) {
+  taskState.task.taskNo = Number(Date.now()).toString(16);
-      fnReset();
+  taskState.task.filter = taskState.filter;
-      fnWS();
+  packetStart(toRaw(taskState.task))
-    } else {
+    .then(res => {
-      message.error(t('common.operateErr'), 3);
+      if (res.code === RESULT_CODE_SUCCESS) {
-    }
+        // 清空选择帧的数据
-  });
+        state.selectedFrame = 0;
+        state.packetFrame = { tree: [], data_sources: [] };
+        state.packetFrameTreeMap = null;
+        state.selectedTree = NO_SELECTION;
+        state.selectedDataSourceIndex = 0;
+        // 开启
+        if (!state.initialized) {
+          fnWK();
+        }
+        clearInterval(taskState.keepTimer);
+        taskState.keepTimer = null;
+        fnWS();
+        // 记录状态
+        taskState.stop = false;
+        taskState.stopOutputPCAP = taskState.task.outputPCAP;
+      } else {
+        message.error(t('common.operateErr'), 3);
+      }
+    })
+    .finally(() => {
+      hide();
+    });
 }
 
 /**停止跟踪 */
 function fnStop() {
-  packetStop(state.task.taskNo).then(res => {
+  if (typeof taskState.keepTimer !== 'number') return;
-    if (res.code === RESULT_CODE_SUCCESS) {
+  const hide = message.loading(t('common.loading'), 0);
+  packetStop(taskState.task.taskNo)
+    .then(res => {
+      if (res.code !== RESULT_CODE_SUCCESS) {
+        message.warning(res.msg, 3);
+      }
+      // 关闭监听
       ws.close();
-      state.initialized = false;
+      clearInterval(taskState.keepTimer);
-      state.filter = '';
+      taskState.keepTimer = null;
-      state.filterError = null;
+
-    } else {
+      taskState.filter = '';
-      message.warning(res.msg, 3);
+      taskState.filterError = null;
-    }
+
-  });
+      taskState.stop = true;
+    })
+    .finally(() => {
+      hide();
+    });
 }
 
 /**跟踪数据表过滤 */
 function handleFilterFrames() {
-  packetFilter(state.task.taskNo, state.filter).then(res => {
+  packetFilter(taskState.task.taskNo, taskState.filter).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      state.task.filter = state.filter;
+      taskState.task.filter = taskState.filter;
+      taskState.filterError = null;
     } else {
-      state.filterError = res.msg;
+      taskState.filterError = res.msg;
     }
   });
 }
 
-/**开始跟踪 */
+/**选择网卡 */
 function fnDevice(v: string) {
-  state.task.device = v;
+  taskState.task.device = v;
 }
 
 /**下载触发等待 */
 let downLoading = ref<boolean>(false);
-
 /**信息文件下载 */
 function fnDownloadPCAP() {
   if (downLoading.value) return;
-  const fileName = `trace_packet_${state.task.taskNo}.pcap`;
+  const fileName = `packet_${taskState.task.taskNo}.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(state.task.taskNo)
+      packetPCAPFile(taskState.task.taskNo)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -267,90 +394,203 @@ function fnDownloadPCAP() {
   });
 }
 
-/**接收数据后回调 */
+// =========== 表格数据 ==============
-function wsMessage(res: Record<string, any>) {
+/**表格状态类型 */
-  const { code, requestId, data } = res;
+type TabeStateType = {
-  if (code === RESULT_CODE_ERROR) {
+  /**加载等待 */
-    console.warn(res.msg);
+  loading: boolean;
-    return;
+  /**记录数据 */
-  }
+  data: Record<string, any>[];
+  /**总记录数 */
+  total: number;
+  /**选择帧编号 */
+  selectedNumber: number;
+};
 
-  // 建联时发送请求
+/**表格状态 */
-  if (!requestId && data.clientId) {
+let tableState: TabeStateType = reactive({
-    state.initialized = true;
+  loading: false,
-    state.keepTimer = setInterval(() => {
+  data: [],
-      packetKeep(state.task.taskNo, 120);
+  total: 0,
-    }, 90 * 1000);
+  selectedNumber: 0,
-    return;
+});
-  }
 
-  // 订阅组信息
+/**表格字段列 */
-  if (!data?.groupId) {
+let tableColumns = ref<ColumnsType>([
+  {
+    title: 'Number',
+    dataIndex: 'number',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'Time',
+    dataIndex: 'time',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      if (!opt.value) return '';
+      const nanoseconds = opt.value; // 纳秒时间戳
+      const milliseconds = Math.floor(nanoseconds / 1000000);
+      const nanosecondsPart = (nanoseconds % 1000000)
+        .toString()
+        .padStart(6, '0');
+
+      return `${parseDateToStr(
+        milliseconds,
+        'HH:mm:ss.SSS'
+      )}.${nanosecondsPart}`;
+    },
+  },
+  {
+    title: 'Source',
+    dataIndex: 'source',
+    align: 'left',
+    width: 150,
+    ellipsis: true,
+  },
+  {
+    title: 'Destination',
+    dataIndex: 'destination',
+    align: 'left',
+    width: 150,
+    ellipsis: true,
+  },
+  {
+    title: 'Protocol',
+    dataIndex: 'protocol',
+    key: 'protocol',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'length',
+    dataIndex: 'length',
+    align: 'right',
+    width: 100,
+  },
+  {
+    title: 'Info',
+    dataIndex: 'info',
+    align: 'left',
+    ellipsis: true,
+  },
+]);
+
+/**
+ * 查看帧数据
+ * @param row 记录信息
+ */
+function fnVisible(row: Record<string, any>) {
+  // 选中行重复点击时显示隐藏
+  if (row.id === tableState.selectedNumber && state.selectedFrame !== 0) {
+    state.selectedFrame = 0;
     return;
   }
-  if (data.groupId === `4_${state.task.taskNo}`) {
+  tableState.selectedNumber = row.number;
-    const packetData = data.data;
+  const blob = generatePCAP(row.time / 1e3, row.data);
-    state.totalPackets = packetData.number;
+  wk.send({ type: 'process', file: blob });
-    state.packetList.push(packetData);
-  }
 }
+/**生成PCAP-blob */
+function generatePCAP(timestamp: number, base64Data: string): Blob {
+  // 1. 转换数据
+  const binaryString = atob(base64Data);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
 
-/**建立WS连接 */
+  // 2. 创建PCAP文件头
-function fnWS() {
+  const fileHeader = new Uint8Array([
-  const options: OptionsType = {
+    0xd4,
-    url: '/ws',
+    0xc3,
-    params: {
+    0xb2,
-      /**订阅通道组
+    0xa1, // magic_number (微秒级)
-       *
+    0x02,
-       * 信令跟踪Packet (GroupID:4_taskNo)
+    0x00, // version_major (2)
-       */
+    0x04,
-      subGroupID: `4_${state.task.taskNo}`,
+    0x00, // version_minor (4)
-    },
+    0x00,
-    onmessage: wsMessage,
+    0x00,
-    onerror: (ev: any) => {
+    0x00,
-      // 接收数据后回调
+    0x00, // thiszone (UTC)
-      console.error(ev);
+    0x00,
-    },
+    0x00,
-  };
+    0x00,
-  //建立连接
+    0x00, // sigfigs (固定0)
-  ws.connect(options);
+    0xff,
+    0xff,
+    0x00,
+    0x00, // snaplen (最大捕获长度)
+    0x01,
+    0x00,
+    0x00,
+    0x00, // network (LINKTYPE_ETHERNET)
+  ]);
+
+  // 3. 生成时间戳
+  const date = new Date(timestamp);
+  const secs = Math.floor(date.getTime() / 1000);
+  const usecs = (date.getTime() % 1000) * 1000;
+
+  // 4. 构造PCAP报文头
+  const packetHeader = new Uint8Array(16);
+  const headerView = new DataView(packetHeader.buffer);
+  headerView.setUint32(0, secs, true); // 时间戳秒
+  headerView.setUint32(4, usecs, true); // 时间戳微秒
+  headerView.setUint32(8, bytes.length, true); // 捕获长度
+  headerView.setUint32(12, bytes.length, true); // 原始长度
+
+  // 5. 合并所有数据
+  const finalData = new Uint8Array(
+    fileHeader.length + packetHeader.length + bytes.length
+  );
+  finalData.set(fileHeader);
+  finalData.set(packetHeader, fileHeader.length);
+  finalData.set(bytes, fileHeader.length + packetHeader.length);
+
+  // 6. 文件Blob对象
+  return new Blob([finalData], { type: 'application/octet-stream' });
 }
 
 onMounted(() => {
   packetDevices().then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      state.devices = res.data;
+      taskState.devices = res.data;
       if (res.data.length === 0) return;
-      state.task.device = res.data[0].id;
+      taskState.task.device = res.data[0].id;
     }
   });
+  fnWK();
 });
 
 onBeforeUnmount(() => {
-  clearInterval(state.keepTimer);
+  clearInterval(taskState.keepTimer);
-  state.keepTimer = null;
+  wk.send({ type: 'close' }) && wk.close();
-  if (ws.state() === WebSocket.OPEN) ws.close();
+  if (ws.state() <= WebSocket.OPEN) ws.close();
 });
 </script>
 
 <template>
   <PageContainer>
     <a-card :bordered="false" :body-style="{ padding: '12px' }">
-      <div class="toolbar">
+      <!-- 插槽-卡片左侧侧 -->
-        <a-space :size="8" class="toolbar-oper">
+      <template #title>
+        <a-space :size="8" align="end">
           <a-dropdown-button
             type="primary"
-            :disabled="state.initialized"
             @click="fnStart"
+            :disabled="!taskState.stop && taskState.task.taskNo !== ''"
           >
             <PlayCircleOutlined />
             Start Trace
             <template #overlay>
               <a-menu
                 @click="({ key }:any) => fnDevice(key)"
-                :selectedKeys="[state.task.device]"
+                :selectedKeys="[taskState.task.device]"
               >
-                <a-menu-item v-for="v in state.devices" :key="v.id">
+                <a-menu-item v-for="v in taskState.devices" :key="v.id">
                   <a-popover placement="rightTop" trigger="hover">
                     <template #content>
                       <div v-for="c in v.children">{{ c.id }}</div>
@@ -366,79 +606,130 @@ onBeforeUnmount(() => {
             <template #icon><DownOutlined /></template>
           </a-dropdown-button>
 
-          <a-button danger @click.prevent="fnStop()" v-if="state.initialized">
+          <a-button
+            danger
+            @click.prevent="fnStop()"
+            :disabled="taskState.stop || taskState.task.taskNo === ''"
+          >
             <template #icon><CloseCircleOutlined /></template>
             Stop Trace
           </a-button>
+
+          <a-checkbox
+            v-model:checked="taskState.task.outputPCAP"
+            :disabled="!taskState.stop && taskState.task.taskNo !== ''"
+          >
+            Output PCAP
+          </a-checkbox>
+
+          <a-tag color="processing" v-if="taskState.task.filter !== ''">
+            {{ taskState.task.filter }}
+          </a-tag>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="end">
           <a-button
             type="primary"
             :loading="downLoading"
             @click.prevent="fnDownloadPCAP()"
-            v-if="state.task.outputPCAP"
+            v-if="taskState.stop && taskState.stopOutputPCAP"
           >
             <template #icon><DownloadOutlined /></template>
             {{ t('common.downloadText') }}
           </a-button>
-          <a-tag
-            color="green"
-            v-show="!!state.task.filter && state.initialized"
-          >
-            {{ state.task.filter }}
-          </a-tag>
-        </a-space>
-
-        <a-space :size="8" class="toolbar-info" v-show="state.initialized">
           <span>
-            {{ t('views.traceManage.task.traceId') }}:&nbsp;
+            Packets:
-            <strong>{{ state.task.taskNo }}</strong>
+            <strong>{{ tableState.total }}</strong>
+          </span>
+          <span>
+            Task No:
+            <strong>{{ taskState.task.taskNo }}</strong>
           </span>
-          <span> Packets: {{ state.totalPackets }} </span>
         </a-space>
-      </div>
+      </template>
 
       <!-- 包数据表过滤 -->
-      <a-input-group compact v-show="state.initialized">
+      <a-input-group compact>
-        <a-input
+        <a-auto-complete
-          v-model:value="state.filter"
+          v-model:value="taskState.filter"
-          placeholder="display filter, example: tcp"
+          :options="[
-          :allow-clear="true"
+            { value: 'tcp and port 33030 and greater 100' },
+            {
+              value:
+                '(src 192.168.5.58 and dst port 33030) or (src 192.168.9.59 and dst port 33030)',
+            },
+            { value: 'src host 192.168.5.58 and dst host 192.168.5.58' },
+            { value: 'host 192.168.5.58 and greater 100 and less 2500' },
+          ]"
           style="width: calc(100% - 100px)"
-          @pressEnter="handleFilterFrames"
+          :allow-clear="true"
         >
-          <template #prefix>
+          <a-input
-            <FilterOutlined />
+            placeholder="BPF Basic Filter, example: tcp"
-          </template>
+            @pressEnter="handleFilterFrames"
-        </a-input>
+          >
+            <template #prefix>
+              <FilterOutlined />
+            </template>
+          </a-input>
+        </a-auto-complete>
         <a-button
           type="primary"
           html-type="submit"
           style="width: 100px"
           @click="handleFilterFrames"
+          :disabled="taskState.task.taskNo === '' || taskState.stop"
         >
           Filter
         </a-button>
       </a-input-group>
       <a-alert
-        :message="state.filterError"
+        :message="taskState.filterError"
         type="error"
-        v-if="state.filterError != null"
+        v-if="taskState.filterError != null"
       />
 
       <!-- 包数据表 -->
-      <PacketTable
+      <a-table
-        :columns="state.columns"
+        class="table"
-        :data="state.packetList"
+        row-key="number"
-        :selectedFrame="state.selectedFrame"
+        :columns="tableColumns"
-        :onSelectedFrame="handleSelectedFrame"
+        :loading="tableState.loading"
-        :onScrollBottom="handleScrollBottom"
+        :data-source="tableState.data"
-      ></PacketTable>
+        size="small"
-
+        :pagination="false"
-      <a-row>
+        :row-class-name="(record:any) => { 
+          return `table-striped-${record.protocol}`
+        }"
+        :customRow="
+          record => {
+            return {
+              onClick: () => fnVisible(record),
+            };
+          }
+        "
+        :scroll="{ x: tableColumns.length * 150, y: '400px' }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'protocol'">
+            <!-- <DictTag :options="dict.traceMsgType" :value="record.msgType" /> -->
+          </template>
+        </template>
+      </a-table>
+      <!-- 帧数据 -->
+      <a-row
+        :gutter="16"
+        style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
+        v-show="state.selectedFrame == 1"
+      >
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTreeEntry"
+            :select="handleSelectedTree"
             :selected="state.selectedTree"
             :tree="state.packetFrame.tree"
           />
@@ -474,28 +765,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.toolbar-oper {
-  flex: 1;
-}
-.toolbar-info {
-  text-align: right;
-  padding-right: 8px;
-}
-
-.summary {
-  display: flex;
-  flex-direction: column;
-}
-.summary-item > span:first-child {
-  font-weight: 600;
-  margin-right: 6px;
-}
-
 .tree {
   font-size: 0.8125rem;
   line-height: 1.5rem;