取消隐藏分页

package.json

@@ -8,54 +8,54 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "7.0.1",
+    "@ant-design/icons-vue": "^7.0.1",
     "@antv/g6": "4.8.24",
-    "@codemirror/lang-javascript": "6.2.3",
-    "@codemirror/lang-yaml": "6.1.2",
-    "@codemirror/merge": "6.10.0",
-    "@codemirror/theme-one-dark": "6.1.2",
-    "@tato30/vue-pdf": "1.11.3",
-    "@vueuse/core": "13.0.0",
-    "@xterm/addon-fit": "0.10.0",
-    "@xterm/xterm": "5.5.0",
-    "ant-design-vue": "4.2.6",
-    "antdv-pro-layout": "4.2.0",
-    "antdv-pro-modal": "4.0.6",
-    "codemirror": "6.0.1",
-    "crypto-js": "4.2.0",
-    "dayjs": "1.11.13",
-    "echarts": "5.6.0",
-    "file-saver": "2.0.5",
-    "grid-layout-plus": "1.0.6",
-    "intl-tel-input": "25.2.0",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/merge": "^6.8.0",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@tato30/vue-pdf": "^1.11.3",
+    "@vueuse/core": "^12.5.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "ant-design-vue": "^4.2.6",
+    "antdv-pro-layout": "^4.2.0",
+    "antdv-pro-modal": "^4.0.6",
+    "codemirror": "^6.0.1",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.11",
+    "echarts": "~5.6.0",
+    "file-saver": "^2.0.5",
+    "grid-layout-plus": "^1.0.6",
+    "intl-tel-input": "~25.2.0",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "nprogress": "^0.2.0",
-    "p-queue": "8.0.1",
-    "pinia": "2.3.0",
-    "vue": "3.5.13",
-    "vue-i18n": "11.1.2",
-    "vue-router": "4.5.0",
-    "vue3-smooth-dnd": "0.0.6",
-    "xlsx": "0.18.5"
+    "p-queue": "~8.0.1",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.0",
+    "vue-router": "^4.5.0",
+    "vue3-smooth-dnd": "^0.0.6",
+    "xlsx": "~0.18.5"
   },
   "devDependencies": {
-    "@types/crypto-js": "4.2.2",
-    "@types/file-saver": "2.0.7",
-    "@types/js-cookie": "3.0.6",
+    "@types/crypto-js": "^4.2.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^18.0.0",
-    "@types/nprogress": "0.2.3",
-    "@vitejs/plugin-vue": "5.2.3",
-    "less": "4.2.2",
-    "typescript": "5.8.2",
-    "unplugin-vue-components": "0.28.0",
-    "vite": "6.2.2",
-    "vite-plugin-compression": "0.5.1",
-    "vue-tsc": "2.2.8"
+    "@types/nprogress": "^0.2.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "less": "^4.2.1",
+    "typescript": "~5.6.3",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.1.0",
+    "vite-plugin-compression": "~0.5.1",
+    "vue-tsc": "^2.2.0"
   }
 }

src/api/agentManage/callback.ts

@@ -0,0 +1,27 @@
+import { request } from '@/plugins/http-fetch';
+
+
+/**
+ * 查询工单列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listCallBack(query: Record<string, any>) {
+  return request({
+    url: '/psap/v1/mf/ticket/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 切换进行中状态
+ * @param
+ * @returns bolb
+ */
+export function updateStatus(data: Record<string, any>) {
+  return request({
+    url: `psap/v1/mf/ticket/${data.ticketId}/status`,
+    method: 'PATCH',
+  });
+}

src/api/agentManage/callings.ts

@@ -0,0 +1,16 @@
+import { request } from '@/plugins/http-fetch';
+
+
+/**
+ * 查询定时任务调度列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listCallings(query: Record<string, any>) {
+  return request({
+    url: '/psap/v1/mf/callings/list',
+    method: 'get',
+    params: query,
+  });
+}
+

src/api/cbc/cbe.ts

@@ -0,0 +1,75 @@
+import { request } from '@/plugins/http-fetch';
+
+
+
+/**
+ * CBC列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listCBC(query: Record<string, any>) {
+  return request({
+    url: `/psap/v1/cbc/${query.neId}/message/list`,
+    method: 'get',
+    params: query,
+    timeout: 30_000,
+  });
+}
+
+
+
+/**
+ * CBC签约用户新增
+ * @param data 签约对象
+ * @returns object
+ */
+export function addCBC(data: Record<string, any>) {
+  return request({
+    url: `/psap/v1/cbc/${data.neId}/message`,
+    method: 'post',
+    data: data,
+    timeout: 180_000,
+  });
+}
+
+
+
+
+export function updateCBCStatus(data:any) {
+  return request({
+    url: `/psap/v1/cbc/${data.neId}/message/${data.id}/${data.status}`,
+    method: 'put',
+    timeout: 180_000,
+  });
+}
+
+
+export function updateCBC(data:any) {
+  return request({
+    url: `/psap/v1/cbc/${data.neId}/message/${data.id}`,
+    method: 'put',
+    data,
+    timeout: 180_000,
+  });
+}
+
+
+
+/**
+ * CBC删除
+ * @param data 签约对象
+ * @returns object
+ */
+export function delCBC(neId: string, id: string) {
+  return request({
+    url: `/psap/v1/cbc/${neId}/message/${id}`,
+    method: 'delete',
+    timeout: 180_000,
+  });
+}
+
+
+
+
+
+

src/api/neData/mf.ts

@@ -0,0 +1,43 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询IMS-CDR会话事件
+ * @param query 查询参数
+ * @returns object
+ */
+export function listMFDataCDR(query: Record<string, any>) {
+  return request({
+    url: '/neData/mf/cdr/list',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * IMS-CDR会话删除
+ * @param id 信息ID
+ * @returns object
+ */
+export function delMFDataCDR(cdrIds: string | number) {
+  return request({
+    url: `/neData/mf/cdr/${cdrIds}`,
+    method: 'delete',
+    timeout: 60_000,
+  });
+}
+
+/**
+ * IMS-CDR会话列表导出
+ * @param data 查询列表条件
+ * @returns object
+ */
+export function exportMFDataCDR(data: Record<string, any>) {
+  return request({
+    url: '/neData/mf/cdr/export',
+    method: 'post',
+    data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}

src/api/trace/analysis.ts

@@ -0,0 +1,71 @@
+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,18 +62,3 @@ 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,4 +1,6 @@
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
 
 /**
  * 查询跟踪任务列表
@@ -79,26 +81,24 @@ export function filePullTask(traceId: string) {
 }
 
 /**
- * 跟踪任务数据列表
- * @param query 查询参数
+ * 获取网元跟踪接口列表
  * @returns object
  */
-export async function listTraceData(query: Record<string, any>) {
-  return request({
-    url: '/trace/data/list',
-    method: 'get',
-    params: query,
-  });
-}
-
-/**
- * 查询跟踪任务数据信息
- * @param id ID
- * @returns object
- */
-export async function getTraceData(id: string | number) {
-  return request({
-    url: `/trace/data/${id}`,
+export async function getNeTraceInterfaceAll() {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/ne_info`,
     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/constants/ne-constants.ts

@@ -1,27 +1,10 @@
 /**网元列表,默认顺序 */
 export const NE_TYPE_LIST = [
   'OMC',
-  'IMS',
-  'AMF',
-  'AUSF',
-  'UDR',
-  'UDM',
-  'SMF',
-  'PCF',
-  'NSSF',
-  'NRF',
-  'UPF',
-  'LMF',
-  'NEF',
-  'MME',
-  'N3IWF',
-  'MOCNGW',
-  'SMSC',
-  'SMSF',
   'CBC',
-  'CHF',
-  'HLR',
-  'SGWC',
+  'MF',
+  'IMS',
+  'SMSC',
 ];
 
 /**

src/i18n/locales/en-US.ts

@@ -16,6 +16,7 @@ export default {
     errorFields: 'Please fill in the required information in {num} correctly!',
     tablePaginationTotal: 'Total {total} items',
     noData: "No Data",
+    zebra:'Tabular zebra pattern',
     ok: 'Ok',
     cancel: 'Cancel',
     close: 'Close',
@@ -130,7 +131,7 @@ export default {
     },
     LockScreen: {
       inputPlacePwd:'Lock Screen Password',
-      enter:'Enter',
+      validSucc:'Validation Passed',
       validError:'Validation Failure',
       backLogin:'Logout to Relogin',
       backReload:'Restarting now, please wait...',
@@ -349,11 +350,89 @@ export default {
         description: "No data yet, try refreshing",
       },
     },
+    agentManage:{
+      callings:{
+        callerIdNumber:'Caller Number',
+        calleeIdNumber:'Callee Number',
+        startTime:'Start Time',
+        answeredTime:'Answered Time(s)',
+        callDuration:'Call Duration',
+        msdData:'MSD Info',
+      },
+      callback:{
+        callerIdNumber:'Caller Number',
+        calleeIdNumber:'Callee Number',
+        status:'Status',
+        ticketId:'Ticket ID',
+        startTime:'Created Time',
+        updateTime:'Update Time',
+        msdData:'MSD Info',
+        agentName: 'Agent Name',
+        comment: 'Comment',
+        agentEmail: 'Agent Email',
+        agentMobile: 'Agent Mobile',
+        title: ' Ticket List',
+      }
+    },
+    cbc:{
+      cbe:{
+        neType:'CBC Object',
+        title: ' CBC Event',
+        delTip: 'Confirm deletion of the event data item numbered [{num}]?',
+        eventName: 'Event Name',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        repetitionPeriod: 'Repetition Period',
+        numOfBcast: 'Number of Broadcasts',
+        msgPWSType: 'Message Type',
+        messageId: 'Message ID',
+        displayMode: 'Display Mode',
+        geoScope:' Geographic Scope',
+        emergencyUserAlert: 'Emergency User Alert',
+        activatePopup: 'Activate Popup',
+        warningType: 'Warning Type',
+        language:' Language',
+        warningMessageText:' Broadcast Content',
+        status: 'Status',
+        warningAreaType: 'Warning Area Type',
+        taiListTip:'TAI List cannot be empty',
+        taiSonTip:'TAI List each item MCC, MNC, TAC cannot be empty',
+        eutraListTip:'EUTRA CellId List cannot be empty',
+        eutraSonTip:'EUTRA CellId List each item MCC, MNC, CellId cannot be empty',
+        nrTip:'NR CellId List cannot be empty',
+        nrSonTip:'NR CellId List each item MCC, MNC, CellId cannot be empty',
+        areaTip:'Area ID List cannot be empty',
+        areaSonTip:'Area ID List each item AreaID cannot be empty',
+        messageIdProfile:'Message ID Profile',
+        serialNumProfile:'Serial Num Profile',
+        warningTypeProfile:'Warning Type Profile',
+        warningMessageProfile:'Warning Message Profile',
+        etws:'Earthquake and Tsunami Warning System',
+        cmas:'Commercial Mobile Alert System',
+        createdAt:'Create Time',
+        eventNameHelp:'If it is CMAS, the recommended prefix is cmas_xxx. If it is ETWS, the recommended prefix is etws_xxx',
+        repetitionPeriodHelp:'Unit is seconds',
+        numOfBcastHelp:'Unit is seconds',
+        cellListTip:'CellId List cannot be empty',
+        cellListSonTip:'MCC、MNC、 Cannot be empty, and at least one EUTRA CellId/NR CellId must be filled in',
+        letupSure:'Do you confirm the status of the broadcast event with the modification number 【{id}】?',
+        tacHelp:'The TAC value is a decimal string, separated by ";" for multiple TAC values.',
+        cellIdHelp:'The CellId value is a hexadecimal string, separated by ";" for multiple CellId values.',
+        areaId:'The areaId value is a hexadecimal string.',
+        detail:'Detail',
+      }
+    },
     dashboard: {
       overview:{
         title: "Core Network Dashboard",
         fullscreen: "Click on the full-screen display",
         toRouter: "Click to jump to the detail page",
+        psapTitle:'PSAP Dashboard',
+        onlineUser:'Online User',
+        totalUser:'Total User',
+        parallelUser:'Parallel User',
+        userTitle:'User Statistics',
+        sysTitle:'System Resources',
         skim: {
           users: "Users",
           userTitle:'User Information',
@@ -432,6 +511,35 @@ export default {
         sgwcServedMSISDN: 'MSISDN',
         sgwcVolumeGPRSUplink: 'GPRS Uplink',
         sgwcVolumeGPRSDownlink: 'GPRS Downlink',
+        recordPath:'Record Path',
+        msd:' MSD',
+        automaticActivation: 'Automatic Activation',
+        positionCanBeTrusted: 'Position Can Be Trusted',
+        testCall: 'Test Call',
+        vehicleType:'Vehicle Type',
+        messageIdentifier: 'Message Identifier',
+        numberOfOccupants: 'Number Of Occupants',
+        n1latitudeDelta:'Latitude Delta',
+        n1longitudeDelta: 'Longitude Delta',
+        n2latitudeDelta:'Latitude Delta',
+        n2longitudeDelta: 'Longitude Delta',
+        timestamp: 'Timestamp',
+        vehicleDirection: 'Vehicle Direction',
+        isovds: 'Vehicle Descriptor Section',
+        isovisModelyear:'Vehicle Identifier Section Year',
+        isovisSeqPlant: 'Vehicle Identifier Section Plant & Serial',
+        isowmi: 'World Manufacturer Identifier',
+        positionLatitude: 'Position Latitude',
+        positionLongitude: 'Position Longitude',
+        dieselTankPresent: 'Diesel Tank Present',
+        electricEnergyStorage: 'Electric Energy Storage',
+        gasolineTankPresent: 'Gasoline Tank Present',
+        control:'Control',
+        recentVehicleLocationN1:'Recent Vehicle Location N1',
+        recentVehicleLocationN2:'Recent Vehicle Location N2',
+        vehicleIdentificationNumber:'Vehicle Identification Number',
+        vehicleLocation:'Vehicle Location',
+        vehiclePropulsionStorageType:'Vehicle Propulsion Storage Type',
       },
       ue: {
         eventType: "Event Type",
@@ -503,7 +611,7 @@ export default {
         delTip: 'Confirm deletion of network element information data items?',
         oam: {
           title: 'OAM Configuration',
-          restart: 'Restart NE',
+          sync: 'Sync to NE',
           oamEnable: 'Service',
           oamPort: 'Port',
           snmpEnable: 'Service',
@@ -999,6 +1107,25 @@ export default {
       },
     },
     traceManage: {
+      analysis: {
+        imsi: 'IMSI',
+        imsiPlease: 'Please enter IMSI',
+        msisdn: 'MSISDN',
+        msisdnPlease: 'Please enter MSISDN',
+        trackTaskId: 'Task ID',
+        srcIp: 'Source IP Address',
+        dstIp: 'Destination IP Address',
+        signalType: 'Signaling Type',
+        msgDirect: 'Message Direction',
+        msgType: 'Message Type',
+        rowTime: 'Record Time',
+        signalData: 'Signaling Data',
+        signalDetail: 'Signaling Details',
+        noData: 'No information content',
+        taskTitle: 'Task {num}',
+        taskDownText: 'Download HTML',
+        taskDownTip: 'Confirm downloading the signaling details HTML file?',
+      },
       pcap: {
         capArgPlease: 'Please enter tcpdump -i any support parameter',
         cmd: 'Command',
@@ -1049,35 +1176,30 @@ export default {
         imsiTip: 'Mobile communication IMSI number',
         srcIp: 'Source IP Address',
         srcIpPlease: 'Please enter the IP address',
-        srcIpTip: 'sending IPv4 address',
+        srcIpTip: 'Current sender IPv4 address',
         dstIp: 'Destination IP Address',
         dstIpPlease: 'Please enter the IP address',
-        dstIpTip: 'receiving end IPv4 address',
+        dstIpTip: 'IPv4 address of the receiving end of the other party',
         interfaces: 'Signaling Interface',
         interfacesPlease: 'Please enter the signaling interface',
-        rangePicker: 'Task Time',
+        signalPort: 'Signal Port',
+        signalPortPlease: 'Please enter the signaling port',
+        signalPortTip: 'Port of the side corresponding to the destination IP address or source IP address',
+        rangePicker: 'Start/End Time',
         rangePickerPlease: 'Please select the start and end time of the task',
         remark: 'Remark',
         remarkPlease: 'Task description can be entered',
         addTask: 'Add Task',
+        editTask: 'Modify Task',
         viewTask: 'View Task',
         errorTaskInfo: 'Failed to obtain task information',
         delTaskTip: 'Are you sure to delete the data item with record ID {id} ?',
         stopTask: 'Successful cessation of tasks {id}',
         stopTaskTip: 'Confirm stopping the task with record ID {id} ?',
-        pcapView: "Track Data Analysis",
-        traceFile: "Track File",
+        pcapView: "Tracking Data Analysis",
+        traceFile: "Tracking File",
         errMsg: "Error Message",
         imsiORmsisdn: "imsi or msisdn is null, cannot start task",
-        dataView: "Track Data",
-        protocolOrInterface: "Protocol/Interface",
-        msgNe: 'Network Element',
-        msgEvent: 'Event',
-        msgType: 'Type',
-        msgDirect: 'Direction',
-        msgLen: 'Length',
-        rowTime: 'Time',
-        taskInfo: 'Task information',
       },
     },
     faultManage: {

src/i18n/locales/zh-CN.ts

@@ -1,3 +1,7 @@
+import { language } from "@/plugins/http-fetch";
+import { eventData } from "@/views/dashboard/overview/hooks/useUserActivity";
+import { start, status } from "nprogress";
+
 export default {
   // 语言
   i18n: '中文',
@@ -16,6 +20,7 @@ export default {
     errorFields: '请正确填写 {num} 处必填信息！',
     tablePaginationTotal: '总共 {total} 条',
     noData: "暂无数据",
+    zebra:'表格斑马纹',
     ok: '确定',
     cancel: '取消',
     close: '关闭',
@@ -130,7 +135,7 @@ export default {
     },
     LockScreen: {
       inputPlacePwd:'请输入锁屏密码',
-      enter:'进入',
+      validSucc:'校验通过',
       validError:'校验失败',
       backLogin:'退出并重新登录',
       backReload:'正在重启，请稍等...',
@@ -349,11 +354,89 @@ export default {
         description: "暂无数据，尝试刷新看看",
       },
     },
+    agentManage:{
+      callings:{
+        callerIdNumber:'主叫号码',
+        calleeIdNumber:'被叫号码',
+        startTime:'开始时间',
+        answeredTime:'接听时间(s)',
+        callDuration:'通话时长',
+        msdData:'MSD内容',
+      },
+      callback:{
+        callerIdNumber:'主叫号码',
+        calleeIdNumber:'被叫号码',
+        status:'状态',
+        ticketId:'工单编号',
+        startTime:'创建时间',
+        updateTime:'更新时间',
+        msdData:'MSD内容',
+        agentName: '座席名称',
+        comment: '备注',
+        agentEmail: '座席邮箱',
+        agentMobile: '座席手机',
+        title: '工单列表',
+      }
+    },
+    cbc:{
+      cbe:{
+        neType:'CBC网元对象',
+        title: '广播事件',
+        delTip: '确认删除编号为【{num}】的CBC事件吗？',
+        eventName: '事件名称',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        repetitionPeriod: '广播周期',
+        numOfBcast: '广播次数',
+        msgPWSType: '消息类型',
+        messageId: '消息编号',
+        displayMode: '显示模式',
+        geoScope:'广播覆盖范围',
+        emergencyUserAlert: '紧急用户提示',
+        activatePopup: '弹窗提示',
+        warningType: '预警类型标识',
+        language:'语言',
+        warningMessageText:'广播内容',
+        status: '状态',
+        warningAreaType: '预警区域类型',
+        taiListTip:'TAI List 不能为空',
+        taiSonTip:'TAI List 每项的 MCC、MNC、TAC 都不能为空',
+        eutraListTip:'EUTRA CellId List 不能为空',
+        eutraSonTip:'EUTRA CellId List 每项的 MCC、MNC、CellId 都不能为空',
+        nrTip:'NR CellId List 不能为空',
+        nrSonTip:'NR CellId List 每项的 MCC、MNC、CellId 都不能为空',
+        areaTip:'Area ID List 不能为空',
+        areaSonTip:'Area ID List 每项的 AreaID 都不能为空',
+        messageIdProfile:'消息标识配置',
+        serialNumProfile:'序列号配置',
+        warningTypeProfile:'预警类型配置',
+        warningMessageProfile:'预警消息配置',
+        etws:'地震海啸预警',
+        cmas:'公共预警广播',
+        createdAt:'创建时间',
+        eventNameHelp:'如果为CMAS,推荐前缀为cmas_xxx,如果为ETWS,推荐前缀为etws_xxx',
+        repetitionPeriodHelp:'单位是秒',
+        numOfBcastHelp:'单位是秒',
+        cellListTip:'CellId List不能为空',
+        cellListSonTip:'MCC、MNC、不能为空以及EUTRA CellId/NR CellId至少填写一个',
+        letupSure:'确认修改编号为 【{id}】 的广播事件的状态嘛?',
+        tacHelp:'TAC值是十进制字符串,通过";"分隔多个TAC值',
+        cellIdHelp:'CellId值是十六进制字符串,通过";"分隔多个CellId值',
+        areaId:'areaId值是十六进制字符串',
+        detail:'详情',
+      }
+    },
     dashboard: {
       overview:{
         title: "核心网系统看板",
         fullscreen: "点击全屏显示",
         toRouter: "点击跳转详情页面",
+        psapTitle:'PSAP看板',
+        onlineUser:'在线座席数',
+        totalUser:'总座席数',
+        parallelUser:'并行通话数',
+        userTitle:'用户统计',
+        sysTitle:'系统资源',
         skim: {
           users: "用户数",
           userTitle:'用户信息',
@@ -432,6 +515,35 @@ export default {
         sgwcServedMSISDN: 'MSISDN',
         sgwcVolumeGPRSUplink: 'GPRS 上行链路',
         sgwcVolumeGPRSDownlink: 'GPRS 下行链路',
+        recordPath:'录音文件路径',
+        msd:'最小数据集',
+        automaticActivation: '自动激活',
+        positionCanBeTrusted: '位置可信',
+        testCall: '测试呼叫',
+        vehicleType:'车辆类型',
+        messageIdentifier: '消息标识',
+        numberOfOccupants: '乘员数量',
+        n1latitudeDelta:'纬度增量',
+        n1longitudeDelta: '经度增量',
+        n2latitudeDelta:' 纬度增量',
+        n2longitudeDelta: '经度增量',
+        timestamp: '时间戳',
+        vehicleDirection: '车辆行驶方向',
+        isovds: '车辆描述段',
+        isovisModelyear:'车辆标识段年份',
+        isovisSeqPlant: '车辆标识段的工厂编码与生产序号',
+        isowmi: '世界制造商标识',
+        positionLatitude: '位置纬度',
+        positionLongitude: '位置经度',
+        dieselTankPresent: '柴油罐存在',
+        electricEnergyStorage: '电力储能',
+        gasolineTankPresent: '汽油罐存在',
+        control:'控制',
+        recentVehicleLocationN1:'最近车辆位置N1',
+        recentVehicleLocationN2:'最近车辆位置N2',
+        vehicleIdentificationNumber:'车辆识别号码',
+        vehicleLocation:'车辆位置',
+        vehiclePropulsionStorageType:'车辆推进存储类型',
       },
       ue: {
         eventType: "事件类型",
@@ -503,7 +615,7 @@ export default {
         delTip: '确认删除网元信息数据项吗?',
         oam: {
           title: 'OAM配置',
-          restart: '下发后重启网元',
+          sync: '同步到网元',
           oamEnable: '服务',
           oamPort: '端口',
           snmpEnable: '服务',
@@ -999,6 +1111,25 @@ export default {
       },
     },
     traceManage: {
+      analysis: {
+        imsi: 'IMSI',
+        imsiPlease: '请输入IMSI',
+        msisdn: 'MSISDN',
+        msisdnPlease: '请输入MSISDN',
+        trackTaskId: '跟踪任务标记',
+        srcIp: '源IP地址',
+        dstIp: '目标IP地址',
+        signalType: '信令类型',
+        msgDirect: '消息元',
+        msgType: '消息类型',
+        rowTime: '记录时间',
+        signalData: '信令数据',
+        signalDetail: '信令详情',
+        noData: '无信息内容',
+        taskTitle: '任务 {num}',
+        taskDownText: '下载HTML',
+        taskDownTip: '确认下载信令详情HTML文件?',
+      },
       pcap: {
         capArgPlease: '请输入tcpdump -i any支持参数',
         cmd: '命令',
@@ -1049,17 +1180,21 @@ export default {
         imsiTip: '移动通信IMSI编号',
         srcIp: '源IP地址',
         srcIpPlease: '请输入源IP地址',
-        srcIpTip: '发送端IPv4地址',
+        srcIpTip: '当前发送端IPv4地址',
         dstIp: '目标IP地址',
         dstIpPlease: '请输入目标IP地址',
-        dstIpTip: '接收端IPv4地址',
+        dstIpTip: '对方接收端IPv4地址',
         interfaces: '信令接口',
         interfacesPlease: '请输入信令接口',
-        rangePicker: '任务时间',
+        signalPort: '信令端口',
+        signalPortPlease: '请输入信令端口',
+        signalPortTip: '目标IP地址或源IP地址对应一方的端口',
+        rangePicker: '开始结束时间',
         rangePickerPlease: '请选择任务时间开始结束时间',
         remark: '说明',
         remarkPlease: '可输入任务说明',
         addTask: '添加任务',
+        editTask: '修改任务',
         viewTask: '查看任务',
         errorTaskInfo: '获取任务信息失败',
         delTaskTip: '确认删除记录编号为 {id} 的数据项?',
@@ -1069,15 +1204,6 @@ export default {
         traceFile: "跟踪文件",
         errMsg: "错误信息",
         imsiORmsisdn: "imsi 或 msisdn 是空值，不能开始任务",
-        dataView: "跟踪数据",
-        protocolOrInterface: "协议/接口",
-        msgNe: '消息网元',
-        msgEvent: '消息事件',
-        msgType: '消息类型',
-        msgDirect: '消息方向',
-        msgLen: '消息长度',
-        rowTime: '消息时间',
-        taskInfo: '任务信息',
       },
     },
     faultManage: {

src/layouts/BasicLayout.vue

@@ -29,12 +29,15 @@ import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseDateToStr } from '@/utils/date-utils';
 import { parseUrlPath } from '@/plugins/file-static-url';
+import useNeInfoStore from '@/store/modules/neinfo';
+
 const { proConfig, waterMarkContent } = useLayoutStore();
 const { t, currentLocale } = useI18n();
 const routerStore = useRouterStore();
 const tabsStore = useTabsStore();
 const appStore = useAppStore();
 const router = useRouter();
+const neListStore = useNeInfoStore();
 
 /**菜单面板 */
 const layoutState = reactive({
@@ -65,18 +68,23 @@ watch(
 );
 
 // 动态路由添加到菜单面板
-const rootRoute = router.getRoutes().find(r => r.name === 'Root');
-if (rootRoute) {
-  const children = routerStore.setRootRouterData(rootRoute.children);
-  const buildRouterData = routerStore.buildRouterData;
-  if (buildRouterData.length > 0) {
-    rootRoute.children = children.concat(buildRouterData);
-  } else {
-    rootRoute.children = children;
+const menuData = computed(() => {
+  const rootRoute = router.getRoutes().find(r => r.name === 'Root');
+  if (rootRoute) {
+    const children = routerStore.setRootRouterData(rootRoute.children);
+    const buildRouterData = routerStore.buildRouterData;
+    if (buildRouterData.length > 0) {
+      rootRoute.children = children.concat(buildRouterData);
+    } else {
+      rootRoute.children = children;
+    }
   }
-}
-
-const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
+  const neTypes = neListStore.getNeSelectOtions.map(v => v.value);
+  let routes = clearMenuItem(router.getRoutes());
+  routes = routerStore.clearMenuItemByNeList(routes, neTypes);
+  const { menuData } = getMenuData(routes);
+  return menuData;
+});
 
 /**面包屑数据对象，排除根节点和首页不显示 */
 const breadcrumb = computed(() => {

src/plugins/ws-websocket.ts

@@ -119,15 +119,17 @@ export class WS {
       };
       // 用于指定当从服务器接受到信息时的回调函数。
       ws.onmessage = ev => {
-        if (ev.type !== 'message') return;
         // 解析文本消息
-        try {
-          const jsonData = JSON.parse(ev.data);
-          if (typeof options.onmessage === 'function') {
-            options.onmessage(jsonData);
+        if (ev.type === 'message') {
+          const data = ev.data;
+          try {
+            const jsonData = JSON.parse(data);
+            if (typeof options.onmessage === 'function') {
+              options.onmessage(jsonData);
+            }
+          } catch (error) {
+            console.error('websocket message formatting error', error);
           }
-        } catch (error) {
-          console.error('websocket message formatting error', error);
         }
       };
       // 用于指定连接关闭后的回调函数。
@@ -219,7 +221,7 @@ export class WS {
     this.heartInterval = window.setInterval(() => {
       this.send({
         requestId: `${Date.now()}`,
-        type: 'PING',
+        type: 'ping',
       });
     }, heartTimer);
   }

src/router/index.ts

@@ -13,6 +13,7 @@ import { validHttp } from '@/utils/regular-utils';
 import useUserStore from '@/store/modules/user';
 import useAppStore from '@/store/modules/app';
 import useRouterStore from '@/store/modules/router';
+import useNeInfoStore from '@/store/modules/neinfo';
 
 // NProgress Configuration
 NProgress.configure({ showSpinner: false });
@@ -144,10 +145,17 @@ const router = createRouter({
 });
 
 /**全局路由-后置守卫 */
+// 在路由后置守卫中清理计数器
 router.afterEach((to, from, failure) => {
   NProgress.done();
+
+  // 清理成功导航的重定向计数
+  if (!failure) {
+    const redirectKey = `${from.path}->${to.path}`;
+    redirectCount.delete(redirectKey);
+  }
+
   const title = to.meta?.title;
-  // 设置标题
   if (!failure && title) {
     useAppStore().setTitle(to.meta.title);
   }
@@ -163,10 +171,27 @@ const WHITE_LIST: string[] = [
   '/trace-task-hlr',
 ];
 
+const redirectCount = new Map<string, number>();
+const MAX_REDIRECT_COUNT = 3; // 最大重定向次数
+
 /**全局路由-前置守卫 */
 router.beforeEach(async (to, from, next) => {
   NProgress.start();
 
+  // 检查是否是 F5 刷新（from.name 为 null 且 to.path 不是根路径）
+  const isRefresh = !from.name && from.path === '/';
+
+  // 重定向计数检查
+  const redirectKey = `${from.path}->${to.path}`;
+  const currentCount = redirectCount.get(redirectKey) || 0;
+
+  if (currentCount > MAX_REDIRECT_COUNT) {
+    console.warn(`检测到重定向循环: ${redirectKey}，强制跳转到首页`);
+    redirectCount.delete(redirectKey);
+    next({ name: 'Index', replace: true });
+    return;
+  }
+  
   // 获取系统配置信息
   const appStore = useAppStore();
   if (!appStore.loginBackground) {
@@ -202,39 +227,321 @@ router.beforeEach(async (to, from, next) => {
 
   // 有Token
   if (token) {
-    // 防止重复访问登录页面
     if (to.path === '/login') {
       next({ name: 'Index' });
     } else {
-      // 判断当前用户是否有角色信息
       const user = useUserStore();
       if (user.roles && user.roles.length === 0) {
         try {
-          // 获取用户信息
+          await useNeInfoStore().fnNelist();
           await user.fnGetInfo();
-          // 获取路由信息
           const accessRoutes = await useRouterStore().generateRoutes();
-          // 根据后台配置生成可访问的路由表
+
           if (accessRoutes && accessRoutes.length !== 0) {
             for (const route of accessRoutes) {
-              // 动态添加可访问路由表，http开头会异常
               if (!validHttp(route.path)) {
                 router.addRoute(route);
               }
             }
+
+            // F5 刷新时，如果目标路由有效，直接跳转，不进行重定向
+            if (isRefresh && await isRouteAccessible(to, accessRoutes)) {
+              console.log(`F5 刷新，目标路由有效，直接跳转: ${to.path}`);
+              next({ ...to, replace: true });
+              return;
+            }
+
+            if (await isRouteAccessible(to, accessRoutes)) {
+              next({ ...to, replace: true });
+            } else {
+              // F5 刷新时，如果目标路由无效，优先跳转到首页
+              if (isRefresh) {
+                console.log(`F5 刷新，目标路由无效，跳转到首页: ${to.path}`);
+                next({ name: 'Index', replace: true });
+                return;
+              }
+
+              const validRedirect = findValidRedirect(to, accessRoutes);
+              if (validRedirect && validRedirect !== to.path) {
+                redirectCount.set(redirectKey, currentCount + 1);
+                console.log(`重定向到有效路由: ${to.path} -> ${validRedirect}`);
+                next({ path: validRedirect, replace: true });
+              } else {
+                next({ name: 'Index', replace: true });
+              }
+            }
+          } else {
+            next({ name: 'Index', replace: true });
           }
-          // 刷新替换原先路由，确保addRoutes已完成
-          next({ ...to, replace: true });
-        } catch (error: any) {
-          console.error(`[${to.path}]: ${error.message}`);
-          await user.fnLogOut();
-          next({ name: 'Login' });
+        } catch (error) {
+          console.error('Route guard error:', error);
+          next(`/login?redirect=${to.fullPath}`);
+        }
+      } else if (
+        to.meta.neType &&
+        to.meta.neType.length > 0 &&
+        !useNeInfoStore().fnHasNe(to.meta.neType)
+      ) {
+        // 找到有效的替代路由
+        const validRedirect = findValidAlternative(to);
+        if (validRedirect && validRedirect !== to.path) {
+          redirectCount.set(redirectKey, currentCount + 1);
+          console.log(`403 重定向: ${to.path} -> ${validRedirect}`);
+          next({ path: validRedirect, replace: true });
+        } else {
+          console.log(`无有效替代路由，跳转到权限错误页面: ${to.path}`);
+          next({ name: 'NotPermission' });
         }
       } else {
+        // 清除重定向计数
+        redirectCount.clear();
         next();
       }
     }
   }
 });
 
+/**
+ * 检查路由是否可访问
+ */
+async function isRouteAccessible(to: any, accessRoutes: any[]): Promise<boolean> {
+  // 检查路由是否存在于 accessRoutes 中
+  const routeExists = findRouteInAccessRoutes(to.path, accessRoutes);
+
+  console.log(`检查路由可访问性: ${to.path}`, routeExists ? '找到' : '未找到');
+
+  if (!routeExists) return false;
+
+  // 检查网元类型
+  if (to.meta?.neType && to.meta.neType.length > 0) {
+    const hasNe = useNeInfoStore().fnHasNe(to.meta.neType);
+    console.log(`网元类型检查: ${to.meta.neType}`, hasNe ? '有效' : '无效');
+    return hasNe;
+  }
+
+  return true;
+}
+
+/**
+ * 在访问路由中查找指定路径
+ */
+function findRouteInAccessRoutes(targetPath: string, routes: any[], parentPath: string = ''): any {
+  for (const route of routes) {
+    // 构建完整路径
+    let fullPath = route.path;
+
+    // 如果不是绝对路径，需要拼接父路径
+    if (!fullPath.startsWith('/')) {
+      const cleanParentPath = parentPath.replace(/\/$/, ''); // 移除末尾斜杠
+      const cleanRoutePath = fullPath.replace(/^\//, ''); // 移除开头斜杠
+      fullPath = cleanParentPath + '/' + cleanRoutePath;
+    }
+
+    // 标准化路径，移除多余的斜杠
+    fullPath = fullPath.replace(/\/+/g, '/');
+
+    console.log(`匹配路径: ${targetPath} vs ${fullPath}`);
+
+    if (fullPath === targetPath) {
+      return route;
+    }
+
+    // 递归查找子路由
+    if (route.children && route.children.length > 0) {
+      const found = findRouteInAccessRoutes(targetPath, route.children, fullPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找有效的重定向目标
+ */
+function findValidRedirect(to: any, accessRoutes: any[]): string | null {
+  const neStore = useNeInfoStore();
+
+  console.log(`查找重定向目标: ${to.path}`);
+
+  // 1. 查找父路由的 redirect
+  const parentRoute = findParentRouteWithRedirect(to.path, accessRoutes);
+
+  if (parentRoute?.redirect) {
+    console.log(`找到父路由重定向: ${parentRoute.path} -> ${parentRoute.redirect}`);
+
+    // 验证 redirect 目标是否有效
+    const redirectTarget = findRouteInAccessRoutes(parentRoute.redirect, accessRoutes);
+    if (redirectTarget &&
+      (!redirectTarget.meta?.neType || neStore.fnHasNe(redirectTarget.meta.neType))) {
+      return parentRoute.redirect;
+    }
+  }
+
+  // 2. 查找同级的第一个有效路由
+  const siblingRoute = findFirstValidSibling(to.path, accessRoutes);
+  if (siblingRoute) {
+    console.log(`找到同级有效路由: ${siblingRoute}`);
+    return siblingRoute;
+  }
+
+  // 3. 查找根级别的第一个有效路由
+  const rootRoute = findFirstValidRootRoute(accessRoutes);
+  if (rootRoute) {
+    console.log(`找到根级有效路由: ${rootRoute}`);
+    return rootRoute;
+  }
+
+  return null;
+}
+
+/**
+ * 查找具有 redirect 的父路由
+ */
+function findParentRouteWithRedirect(targetPath: string, routes: any[], parentPath: string = ''): any {
+  for (const route of routes) {
+    let fullPath = route.path;
+
+    if (!fullPath.startsWith('/')) {
+      const cleanParentPath = parentPath.replace(/\/$/, '');
+      const cleanRoutePath = fullPath.replace(/^\//, '');
+      fullPath = cleanParentPath + '/' + cleanRoutePath;
+    }
+
+    fullPath = fullPath.replace(/\/+/g, '/');
+
+    // 检查是否是父路径且有 redirect
+    if (targetPath.startsWith(fullPath) &&
+      route.redirect &&
+      fullPath !== targetPath) {
+      return { ...route, path: fullPath };
+    }
+
+    // 递归查找
+    if (route.children && route.children.length > 0) {
+      const found = findParentRouteWithRedirect(targetPath, route.children, fullPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找同级的第一个有效路由
+ */
+function findFirstValidSibling(targetPath: string, routes: any[], parentPath: string = ''): string | null {
+  const neStore = useNeInfoStore();
+
+  // 获取父路径
+  const parentRouteResult = findParentOfTarget(targetPath, routes, parentPath);
+  if (!parentRouteResult) return null;
+
+  const { parentRoute, parentFullPath } = parentRouteResult;
+
+  if (parentRoute.children) {
+    for (const sibling of parentRoute.children) {
+      let siblingFullPath = sibling.path;
+
+      if (!siblingFullPath.startsWith('/')) {
+        const cleanParentPath = parentFullPath.replace(/\/$/, '');
+        const cleanSiblingPath = siblingFullPath.replace(/^\//, '');
+        siblingFullPath = cleanParentPath + '/' + cleanSiblingPath;
+      }
+
+      siblingFullPath = siblingFullPath.replace(/\/+/g, '/');
+
+      if (siblingFullPath !== targetPath &&
+        (!sibling.meta?.neType || neStore.fnHasNe(sibling.meta.neType))) {
+        return siblingFullPath;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 查找目标路径的父路由
+ */
+function findParentOfTarget(targetPath: string, routes: any[], parentPath: string = ''): { parentRoute: any, parentFullPath: string } | null {
+  for (const route of routes) {
+    let fullPath = route.path;
+
+    if (!fullPath.startsWith('/')) {
+      const cleanParentPath = parentPath.replace(/\/$/, '');
+      const cleanRoutePath = fullPath.replace(/^\//, '');
+      fullPath = cleanParentPath + '/' + cleanRoutePath;
+    }
+
+    fullPath = fullPath.replace(/\/+/g, '/');
+
+    // 检查子路由
+    if (route.children && route.children.length > 0) {
+      for (const child of route.children) {
+        let childFullPath = child.path;
+
+        if (!childFullPath.startsWith('/')) {
+          const cleanParentPath = fullPath.replace(/\/$/, '');
+          const cleanChildPath = childFullPath.replace(/^\//, '');
+          childFullPath = cleanParentPath + '/' + cleanChildPath;
+        }
+
+        childFullPath = childFullPath.replace(/\/+/g, '/');
+
+        if (childFullPath === targetPath) {
+          return { parentRoute: route, parentFullPath: fullPath };
+        }
+      }
+
+      // 递归查找
+      const found = findParentOfTarget(targetPath, route.children, fullPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找根级别的第一个有效路由
+ */
+function findFirstValidRootRoute(routes: any[]): string | null {
+  const neStore = useNeInfoStore();
+
+  for (const route of routes) {
+    if (!route.meta?.neType || neStore.fnHasNe(route.meta.neType)) {
+      if (route.children && route.children.length > 0) {
+        // 如果有子路由，返回第一个有效子路由的完整路径
+        for (const child of route.children) {
+          let childFullPath = child.path;
+
+          if (!childFullPath.startsWith('/')) {
+            const cleanParentPath = route.path.replace(/\/$/, '');
+            const cleanChildPath = childFullPath.replace(/^\//, '');
+            childFullPath = cleanParentPath + '/' + cleanChildPath;
+          }
+
+          childFullPath = childFullPath.replace(/\/+/g, '/');
+
+          if (!child.meta?.neType || neStore.fnHasNe(child.meta.neType)) {
+            return childFullPath;
+          }
+        }
+      } else {
+        return route.path;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 查找有效的替代路由（用于 403 情况）
+ */
+function findValidAlternative(to: any): string | null {
+  const routerStore = useRouterStore();
+  const buildRoutes = routerStore.buildRouterData;
+
+  return findValidRedirect(to, buildRoutes);
+}
+
 export default router;

src/store/modules/mask.ts

@@ -20,7 +20,7 @@ type MaskStateType = {
 const useMaskStore = defineStore('mask', {
   state: (): MaskStateType => ({
     type: (localGet(CACHE_LOCAL_MASK) || 'none') as MaskStateType['type'],
-    lockPasswd: atob(localGet(CACHE_LOCAL_LOCK_PASSWD) || ''),
+    lockPasswd: localGet(CACHE_LOCAL_LOCK_PASSWD) || '',
     lockTimeout: 0,
   }),
   getters: {},
@@ -59,7 +59,7 @@ const useMaskStore = defineStore('mask', {
         }, 5_000);
       }
       if (type === 'lock') {
-        localSet(CACHE_LOCAL_LOCK_PASSWD, btoa(this.lockPasswd));
+        localSet(CACHE_LOCAL_LOCK_PASSWD, this.lockPasswd);
       } else {
         localRemove(CACHE_LOCAL_LOCK_PASSWD);
       }

src/store/modules/neinfo.ts

@@ -2,6 +2,7 @@ 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';
 
 /**网元信息类型 */
@@ -12,6 +13,8 @@ type NeInfo = {
   neCascaderOptions: Record<string, any>[];
   /**选择器单级父类型 */
   neSelectOtions: Record<string, any>[];
+  /**跟踪接口列表 */
+  traceInterfaceList: Record<string, any>[];
   /**性能测量数据集 */
   perMeasurementList: Record<string, any>[];
 };
@@ -21,6 +24,7 @@ const useNeInfoStore = defineStore('neinfo', {
     neList: [],
     neCascaderOptions: [],
     neSelectOtions: [],
+    traceInterfaceList: [],
     perMeasurementList: [],
   }),
   getters: {
@@ -57,7 +61,7 @@ const useNeInfoStore = defineStore('neinfo', {
       const res = await listAllNeInfo({
         bandStatus: false,
       });
-      if (res.code === RESULT_CODE_SUCCESS) {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
         // 原始列表
         this.neList = JSON.parse(JSON.stringify(res.data));
 
@@ -75,6 +79,24 @@ 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() {
       // 有数据不请求
@@ -82,11 +104,37 @@ const useNeInfoStore = defineStore('neinfo', {
         return { code: 1, data: this.perMeasurementList, msg: 'success' };
       }
       const res = await getNePerformanceList();
-      if (res.code === RESULT_CODE_SUCCESS) {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
         this.perMeasurementList = res.data;
       }
       return res;
     },
+    /**
+     * 含有网元
+     * @param metaNeType ['udm', 'ims', 'udm+ims', 'SGWC'] 支持大小写
+     * @returns boolean
+     */
+    fnHasNe(metaNeType: string[]) {
+      if (this.neList.length > 0) {
+        const neTypes = this.neSelectOtions.map(item => item.value);
+        let match = false; // 匹配
+        for (const netype of metaNeType) {
+          if (netype.indexOf('+') > -1) {
+            metaNeType = netype.split('+');
+            match = true;
+            break;
+          }
+        }
+
+        if (match) {
+          // 同时匹配
+          return metaNeType.every(item => neTypes.includes(item.toUpperCase()));
+        }
+        // 有一种
+        return metaNeType.some(item => neTypes.includes(item.toUpperCase()));
+      }
+      return false;
+    },    
   },
 });
 

src/store/modules/router.ts

@@ -3,9 +3,11 @@ import type {
   RouteComponent,
   RouteLocationRaw,
   RouteMeta,
+  RouteRecord,  
   RouteRecordRaw,
 } from 'vue-router';
 import { getRouters } from '@/api/router';
+import useNeInfoStore from '@/store/modules/neinfo';
 import BasicLayout from '@/layouts/BasicLayout.vue';
 import BlankLayout from '@/layouts/BlankLayout.vue';
 import LinkLayout from '@/layouts/LinkLayout.vue';
@@ -48,19 +50,95 @@ const useRouterStore = defineStore('router', {
     async generateRoutes() {
       const res = await getRouters();
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        const buildRoutes = buildRouters(res.data.concat());
+        // 获取当前网元类型
+        const neTypes = useNeInfoStore().getNeSelectOtions.map(v => v.value);
+        // 先过滤
+        const filteredRoutes = this.clearMenuItemByNeList(res.data.concat(), neTypes);
+        // 再 build
+        const buildRoutes = buildRouters(filteredRoutes);
         this.buildRouterData = buildRoutes;
         return buildRoutes;
       }
       return [];
     },
+    /**
+     * 根据网元类型过滤菜单
+     * @param routes 经过clearMenuItem(router.getRoutes())处理
+     * @param neTypes 网元类型
+     * @returns 过滤后的菜单
+     */
+    clearMenuItemByNeList(
+      routes: RouteRecord[] | RouteRecordRaw[],
+      neTypes: string[]
+    ): RouteRecordRaw[] {
+      return routes
+        .map((item: RouteRecord | RouteRecordRaw) => {
+          const finalItem = { ...item };
+          // 过滤网元类型
+          if (
+            Array.isArray(finalItem.meta?.neType) &&
+            finalItem.meta?.neType.length > 0
+          ) {
+            let metaNeType: string[] = finalItem.meta.neType;
+            let match = false; // 匹配
+            for (const netype of metaNeType) {
+              if (netype.indexOf('+') > -1) {
+                metaNeType = netype.split('+');
+                match = true;
+                break;
+              }
+            }
+
+            if (match && !metaNeType.every(item => neTypes.includes(item))) {
+              // 同时匹配
+              return null;
+            } else if (!metaNeType.some(item => neTypes.includes(item))) {
+              // 有一种
+              return null;
+            }
+          }
+
+          // 有子菜单进行递归
+          if (finalItem.children && finalItem.children.length > 0) {
+            const children = this.clearMenuItemByNeList(
+              finalItem.children,
+              neTypes
+            );
+            // 如果子菜单都被过滤掉了，就不显示
+            if (children.length === 0) {
+              return null;
+            }
+            finalItem.children = children;
+            
+            // 只重定向到第一个可用的子菜单
+            // finalItem.redirect = finalItem.children[0].path;
+            // console.log(`finalItem.redirect`, finalItem.redirect);
+            // 如果有子菜单，且没有重定向，则设置重定向到第一个子菜单
+            if (children.length > 0) {
+              let childPath = children[0].path;
+              if (!childPath.startsWith('/')) {
+                // 确保父路径以 / 结尾，子路径不以 / 开头
+                const parentPath = finalItem.path.replace(/\/$/, '');
+                childPath = parentPath + '/' + childPath.replace(/^\//, '');
+              }
+              finalItem.redirect = childPath;
+            }
+
+            return finalItem;
+          }
+
+          delete finalItem.children;
+          return finalItem;
+        })
+        .filter(item => item) as RouteRecordRaw[];
+    },    
   },
 });
 
 /**异步路由类型 */
 type RecordRaws = {
   path: string;
-  name: string;
+  name?: string;
   meta: RouteMeta;
   redirect: RouteLocationRaw;
   component: string;
@@ -75,17 +153,18 @@ type RecordRaws = {
  * @param recordRaws 异步路由列表
  * @returns 可添加的路由列表
  */
-function buildRouters(recordRaws: RecordRaws[]): RouteRecordRaw[] {
+function buildRouters(recordRaws: RouteRecordRaw[]): RouteRecordRaw[] {
   const routers: RouteRecordRaw[] = [];
   for (const item of recordRaws) {
     // 过滤旧前端菜单 是layui的菜单跳过
     if (['', '/page"'].includes(item.path)) {
       continue;
     }
+
     // 路由页面组件
     let component: RouteComponent = {};
     if (item.component) {
-      const comp = item.component;
+      const comp = item.component as unknown as string; // 添加类型断言
       if (comp === MENU_COMPONENT_LAYOUT_BASIC) {
         component = BasicLayout;
       } else if (comp === MENU_COMPONENT_LAYOUT_BLANK) {
@@ -102,6 +181,17 @@ function buildRouters(recordRaws: RecordRaws[]): RouteRecordRaw[] {
     let children: RouteRecordRaw[] = [];
     if (item.children && item.children.length > 0) {
       children = buildRouters(item.children);
+
+      // 如果没有 redirect 但有子菜单，设置 redirect 到第一个子菜单
+      if (!item.redirect && children.length > 0) {
+        let childPath = children[0].path;
+        if (!childPath?.startsWith('/')) {
+          childPath = item.path.replace(/\/$/, '') + '/' + (childPath || '').replace(/^\//, '');
+        }
+
+        // 修改 item 的 redirect（需要类型断言）
+        (item as any).redirect = childPath;
+      }
     }
 
     // 对元数据特殊参数进行处理
@@ -109,7 +199,9 @@ function buildRouters(recordRaws: RecordRaws[]): RouteRecordRaw[] {
     if (!metaIcon.startsWith('icon-')) {
       metaIcon = '';
     }
-    item.meta = Object.assign(item.meta, {
+
+    // 更新 meta（需要类型断言）
+    (item as any).meta = Object.assign(item.meta || {}, {
       icon: metaIcon,
     });
 

src/typings/router.d.ts

@@ -9,5 +9,7 @@ declare module 'vue-router' {
     permissions?: string[];
     /**角色 */
     roles?: string[];
+    /**网元类型信息 */
+    neType?: string[];    
   }
 }

src/utils/date-utils.ts

@@ -21,7 +21,7 @@ export const YYYYMMDDHHMMSS = 'YYYYMMDDHHmmss';
 export const YYYY_MM_DD_HH_MM_SS = 'YYYY-MM-DD HH:mm:ss';
 
 /**年-月-日 时:分:秒 列如：2022-12-30T01:01:59+08:00 */
-export const YYYY_MM_DD_HH_MM_SSZ = 'YYYY-MM-DDTHH:mm:ssZZ';
+export const YYYY_MM_DD_HH_MM_SSZ = 'YYYY-MM-DD HH:mm:ssZZ';
 
 /**
  * 格式时间字符串

src/views/agentManage/callback/index.vue

@@ -0,0 +1,647 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+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, parseStrToDate } from '@/utils/date-utils';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { listCallBack, updateStatus } from '@/api/agentManage/callback';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+import { message } from 'ant-design-vue';
+import { ProModal } from 'antdv-pro-modal';
+import { create } from 'domain';
+import { commentProps } from 'ant-design-vue/es/comment';
+
+const { getDict } = useDictStore();
+const { t } = useI18n();
+let dictStatus = ref<DictType[]>([]);
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+/**开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neId: '001',
+  /**记录时间 */
+  startTime: '',
+  endTime: '',
+  callerNumber: '',
+  agentName: '',
+  status: undefined,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neId: '001',
+    status: undefined,
+    beginTime: '',
+    endTime: '',
+    callerNumber: '',
+    agentName: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = ['', ''];
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.agentManage.callback.ticketId'),
+    dataIndex: 'ticketId',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callback.agentName'),
+    dataIndex: 'agentName',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callback.callerIdNumber'),
+    dataIndex: 'callerNumber',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callback.calleeIdNumber'),
+    dataIndex: 'calleeNumber',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callback.status'),
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    width: 4,
+  },
+  {
+    title: t('views.agentManage.callback.startTime'),
+    dataIndex: 'createdAt',
+    align: 'center',
+    width: 6,
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value / 1000);
+    },
+  },
+  {
+    title: t('views.agentManage.callback.updateTime'),
+    dataIndex: 'updatedAt',
+    align: 'center',
+    width: 6,
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value / 1000);
+    },
+  },
+  // {
+  //   title: t('views.agentManage.callback.msdData'),
+  //   dataIndex: 'msdData',
+  //   align: 'center',
+  //   width: 6,
+  // },
+  {
+    title: t('common.operate'),
+    key: 'callbackId',
+    align: 'left',
+    width: 6,
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**查询备份信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+
+  if (!queryRangePicker.value) {
+    queryRangePicker.value = ['', ''];
+  }
+  queryParams.startTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+
+  listCallBack(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      tablePagination.total = res.total;
+      tableState.data = res.data;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**详情框是否显示 */
+  openByView: boolean;
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**更新加载数据按钮 loading */
+  loadDataLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByView: false,
+  openByEdit: false,
+  title: 'callback',
+  from: {
+    id: undefined,
+    ticketId: '',
+    agentName: '',
+    callerNumber: '',
+    calleeNumber: '',
+    agentEmail: '',
+    agentMobile: '',
+    status: '',
+    createdAt: '',
+    comment: '',
+  },
+  confirmLoading: false,
+  loadDataLoading: false,
+});
+
+function fnModalVisibleByEdit(record: any) {
+  modalState.title = t('common.viewText') + t('views.agentManage.callback.title');
+  modalState.openByEdit = true;
+  modalState.from = Object.assign(modalState.from, record, {
+    createdAt: record.createdAt ? parseDateToStr(record.createdAt / 1000) : '',
+  });
+}
+
+function fnModalOk() {
+  const from = Object.assign({}, toRaw(modalState.from));
+
+  modalState.confirmLoading = true;
+  const hide = message.loading(t('common.loading'), 0);
+  updateStatus(from)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.msgSuccess', { msg: modalState.title }),
+          duration: 3,
+        });
+        fnGetList(1);
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      fnModalCancel();
+      modalState.confirmLoading = false;
+    });
+}
+
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  //modalState.openByView = false;
+  //modalStateFrom.resetFields();
+}
+
+onMounted(() => {
+  getDict('callback_status').then(res => {
+    dictStatus.value = res;
+  });
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'MF') {
+              arr.push({ value: i.neId, label: i.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .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-form-item label="PSAP对象" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.callerIdNumber')"
+              name="callerNumber"
+            >
+              <a-input
+                v-model:value="queryParams.callerNumber"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.agentName')"
+              name="agentName"
+            >
+              <a-input
+                v-model:value="queryParams.agentName"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon>
+                    <ClearOutlined />
+                  </template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.status')"
+              name="status"
+            >
+              <a-select
+                v-model:value="queryParams.status"
+                :options="dictStatus"
+                :allow-clear="true"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="8" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.startTime')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                allow-clear
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon>
+                <ReloadOutlined />
+              </template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click" placement="bottomRight">
+              <a-button type="text">
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 1500, y: 400 }"
+      >
+        <template #bodyCell="{ column, record }">
+
+          <template v-if="column.key === 'status'">
+            <DictTag :options="dictStatus" :value="record.status" />
+          </template>
+
+          <template v-if="column.key === 'callbackId'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record)"
+                >
+                  <template #icon><InfoCircleOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      style="top: 0px"
+      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="modalState.openByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @cancel="fnModalCancel"
+      @ok="fnModalOk"
+      :okText=" t('views.faultManage.activeAlarm.confirm') "
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.ticketId')"
+              name="ticketId"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.ticketId"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.agentName')"
+              name="agentName"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.agentName"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.callerIdNumber')"
+              name="callerNumber"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.callerNumber"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.calleeIdNumber')"
+              name="calleeNumber"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.calleeNumber"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.agentEmail')"
+              name="agentEmail"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.agentEmail"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.agentMobile')"
+              name="agentMobile"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.agentMobile"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.status')"
+              name="status"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.status"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.agentManage.callback.startTime')"
+              name="createdAt"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.createdAt"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item
+          :label="t('views.agentManage.callback.comment')"
+          :label-col="{ span: 3 }"
+          name="comment"
+        >
+          <a-input
+            :disabled="true"
+            v-model:value="modalState.from.comment"
+          ></a-input>
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+
+.alarmTitleText {
+  max-width: 300px;
+  cursor: pointer;
+}
+</style>

src/views/agentManage/callings/index.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+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 { listCallings } from '@/api/agentManage/callings';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+
+
+
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neId: '001',
+  /**记录时间 */
+  beginTime: '',
+  endTime: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.agentManage.callings.callerIdNumber'),
+    dataIndex: 'callerIdNumber',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callings.calleeIdNumber'),
+    dataIndex: 'calleeIdNumber',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callings.startTime'),
+    dataIndex: 'createdTime',
+    align: 'center',
+    width: 6,
+  },
+  {
+    title: t('views.agentManage.callings.answeredTime'),
+    dataIndex: 'answeredTime',
+    align: 'center',
+    width: 4,
+  },
+  {
+    title: t('views.agentManage.callings.callDuration'),
+    dataIndex: 'callDuration',
+    align: 'center',
+    width: 5,
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**查询备份信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if(pageNum){
+    queryParams.pageNum = pageNum;
+  }
+
+
+  listCallings(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      tablePagination.total = res.total;
+      tableState.data = res.data;
+      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <PageContainer>
+
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click" placement="bottomRight">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 1500, y: 400 }"
+      >
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+.alarmTitleText {
+  max-width: 300px;
+  cursor: pointer;
+}
+</style>

src/views/dashboard/overview/components/mfOverview/DashboardCards.vue

@@ -0,0 +1,561 @@
+<script setup lang="ts">
+import {
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+  markRaw,
+  useTemplateRef, ref
+} from 'vue';
+import TrendChart from './TrendChart.vue';
+import useI18n from '@/hooks/useI18n';
+import { listNeInfo } from '@/api/ne/neInfo';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { getNeConfigData } from '@/api/ne/neConfig';
+import { listCallings } from '@/api/agentManage/callings';
+import { useRouter } from 'vue-router';
+import useUserStore from '@/store/modules/user';
+
+const { t } = useI18n();
+const router = useRouter();
+
+/**10s调度器 */
+const interval10s = ref<any>(null);
+
+// 模拟数据
+const activeCallsData = ref([]);
+const mosData = ref([]);
+const failedCallsData = ref([]);
+
+// 新增三个卡片的模拟数据
+const networkCpuData = ref([]);
+const systemCpuData = ref([]);
+const systemStorageData = ref([]);
+const systemMemData = ref([]);
+
+
+// 是否是第一次加载资源数据
+const isFirstLoad = ref(true);
+
+// 更新图表数据的函数
+function updateChartData(newValue: number, dataArray: any) {
+  // 如果是第一次加载，用当前值填充整个数组
+  if (isFirstLoad.value) {
+    dataArray.value = Array(7).fill(newValue);
+  } else {
+    // 非第一次加载，正常更新数据（移除第一个，添加新值）
+    const newData = [...dataArray.value];
+    newData.shift();
+    newData.push(newValue);
+    dataArray.value = newData;
+  }
+}
+
+// 是否是第一次加载用户数据
+const isFirstLoadUser = ref(true);
+function updateUserChartData(newValue: number, dataArray: any) {
+  // 如果是第一次加载，用当前值填充整个数组
+  if (isFirstLoadUser.value) {
+    dataArray.value = Array(7).fill(newValue);
+  } else {
+    // 非第一次加载，正常更新数据（移除第一个，添加新值）
+    const newData = [...dataArray.value];
+    newData.shift();
+    newData.push(newValue);
+    dataArray.value = newData;
+  }
+}
+
+// 是否是第一次加载并行用户数据
+const isFirstLoadFailed = ref(true);
+function updateFailedChartData(newValue: number, dataArray: any) {
+  // 如果是第一次加载，用当前值填充整个数组
+  if (isFirstLoadFailed.value) {
+    dataArray.value = Array(7).fill(newValue);
+  } else {
+    // 非第一次加载，正常更新数据（移除第一个，添加新值）
+    const newData = [...dataArray.value];
+    newData.shift();
+    newData.push(newValue);
+    dataArray.value = newData;
+  }
+}
+
+// 当前资源使用率
+const currentNfCpuUsage = ref(0);
+const currentSysCpuUsage = ref(0);
+const currentSysDiskUsage = ref(0);
+const currentSysMemUsage = ref(0);
+
+// 上一次的资源使用率
+const prevNfCpuUsage = ref(0);
+const prevSysCpuUsage = ref(0);
+const prevSysDiskUsage = ref(0);
+const prevSysMemUsage = ref(0);
+
+// 资源变化百分比
+const nfCpuChange = ref(0);
+const sysCpuChange = ref(0);
+const sysDiskChange = ref(0);
+const sysMemChange = ref(0);
+
+
+// 当前资源使用率
+const activeCalls = ref(0);
+const onlineCount = ref(0);
+const failedCallsCount = ref(0);
+
+// 上一次的资源使用率
+const prevActiveCalls = ref(0);
+const prevOnlineCount = ref(0);
+const prevFailedCallsCount = ref(0);
+
+
+
+// 用户数变化百分比
+const activeCallsChange = ref(0);
+const onlineCountChange = ref(0);
+const failedCallsCountChange = ref(0);
+
+
+
+
+/**解析网元状态携带的资源利用率 */
+function parseResouresUsage(neState: Record<string, any>) {
+  let sysCpuUsage = 0;
+  let nfCpuUsage = 0;
+  if (neState.cpu) {
+    nfCpuUsage = neState.cpu.nfCpuUsage;
+    const nfCpu = +(nfCpuUsage / 100);
+    nfCpuUsage = +nfCpu.toFixed(2);
+    if (nfCpuUsage > 100) {
+      nfCpuUsage = 100;
+    }
+
+    sysCpuUsage = neState.cpu.sysCpuUsage;
+    const sysCpu = +(sysCpuUsage / 100);
+    sysCpuUsage = +sysCpu.toFixed(2);
+    if (sysCpuUsage > 100) {
+      sysCpuUsage = 100;
+    }
+  }
+
+  let sysMemUsage = 0;
+  if (neState.mem) {
+    const men = neState.mem.sysMemUsage;
+    sysMemUsage = +(men / 100).toFixed(2);
+    if (sysMemUsage > 100) {
+      sysMemUsage = 100;
+    }
+  }
+
+  let sysDiskUsage = 0;
+  if (neState.disk && Array.isArray(neState.disk.partitionInfo)) {
+    let disks: any[] = neState.disk.partitionInfo;
+    disks = disks.sort((a, b) => +b.used - +a.used);
+    if (disks.length > 0) {
+      const { total, used } = disks[0];
+      sysDiskUsage = +((used / total) * 100).toFixed(2);
+    }
+  }
+  return {
+    sysDiskUsage,
+    sysMemUsage,
+    sysCpuUsage,
+    nfCpuUsage,
+  };
+}
+
+// 计算变化百分比
+function calculateChange(current: number, previous: number): number {
+  if (previous === 0) return 0;
+  return Number(((current - previous) * 100 / previous).toFixed(1));
+}
+
+let tableState: any = [];
+
+
+function fnGetList() {
+  listNeInfo({
+    neType: 'MF',
+    bandStatus: true,
+    pageNum: 1,
+    pageSize: 20,
+  })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows) && res.rows.length > 0) {
+        // 获取第一个网元的资源使用情况
+        const item = res.rows[0];
+        let resouresUsage = {
+          sysDiskUsage: 0,
+          sysMemUsage: 0,
+          sysCpuUsage: 0,
+          nfCpuUsage: 0,
+        };
+
+        const neState = item.serverState;
+        if (neState) {
+          resouresUsage = parseResouresUsage(neState);
+        }
+
+        // 保存上一次的值
+        prevNfCpuUsage.value = currentNfCpuUsage.value;
+        prevSysCpuUsage.value = currentSysCpuUsage.value;
+        prevSysDiskUsage.value = currentSysDiskUsage.value;
+        prevSysMemUsage.value = currentSysMemUsage.value;
+
+        // 更新当前值
+        currentNfCpuUsage.value = resouresUsage.nfCpuUsage;
+        currentSysCpuUsage.value = resouresUsage.sysCpuUsage;
+        currentSysDiskUsage.value = resouresUsage.sysDiskUsage;
+        currentSysMemUsage.value = resouresUsage.sysMemUsage;
+
+
+        // 计算变化百分比
+        nfCpuChange.value = calculateChange(currentNfCpuUsage.value, prevNfCpuUsage.value);
+        sysCpuChange.value = calculateChange(currentSysCpuUsage.value, prevSysCpuUsage.value);
+        sysDiskChange.value = calculateChange(currentSysDiskUsage.value, prevSysDiskUsage.value);
+        sysMemChange.value = calculateChange(currentSysMemUsage.value, prevSysMemUsage.value);
+
+        // 更新图表数据
+        updateChartData(currentNfCpuUsage.value, networkCpuData);
+        updateChartData(currentSysCpuUsage.value, systemCpuData);
+        updateChartData(currentSysDiskUsage.value, systemStorageData);
+        updateChartData(currentSysMemUsage.value, systemMemData);
+
+        // 第一次加载完成后，设置标志为false
+        if (isFirstLoad.value) {
+          isFirstLoad.value = false;
+        }
+
+      }
+    })
+
+  // 获取网元端的配置数据
+  getNeConfigData({
+    neType: 'MF',
+    neId: '001',
+    paramName: 'agents',
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const neData = res.data;
+
+      prevActiveCalls.value = activeCalls.value;
+      prevOnlineCount.value = onlineCount.value;
+
+
+      // 更新 activeCallsData 和 mosData
+      activeCalls.value = neData.length; // 数组长度
+      onlineCount.value = neData.filter((item: any) => item.online).length; // online 为 true 的数量
+
+      activeCallsChange.value = prevActiveCalls.value ? prevActiveCalls.value - activeCalls.value : 0;
+      onlineCountChange.value = prevOnlineCount.value ? prevOnlineCount.value - onlineCount.value : 0;
+      // 更新图表数据
+      updateUserChartData(activeCalls.value ? activeCalls.value : 0, activeCallsData);
+      updateUserChartData(onlineCount.value ? onlineCount.value : 0, mosData);
+
+      // 第一次加载完成后，设置标志为false
+      if (isFirstLoadUser.value) {
+        isFirstLoadUser.value = false;
+      }
+    }
+  })
+    .catch(error => {
+      updateUserChartData(0, activeCallsData);
+      updateUserChartData(0, mosData);
+
+      // 第一次加载完成后，设置标志为false
+      if (isFirstLoadUser.value) {
+        isFirstLoadUser.value = false;
+      }
+    });
+
+
+
+
+  listCallings({ neId: '001' }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const callData: any = res.data;
+      prevFailedCallsCount.value = failedCallsCount.value;
+
+
+      failedCallsCount.value = res.total; // 数组长度
+
+      failedCallsCountChange.value = prevFailedCallsCount.value ? prevFailedCallsCount.value - failedCallsCount.value : 0;
+
+      // 更新图表数据
+      updateFailedChartData(failedCallsCount.value, failedCallsData);
+
+      // 第一次加载完成后，设置标志为false
+      if (isFirstLoadFailed.value) {
+        isFirstLoadFailed.value = false;
+      }
+
+    }
+  });
+}
+
+/**栏目信息跳转 */
+function fnToRouter(name: string, query?: any) {
+    if (useUserStore().roles.includes('agent')) {
+    return;
+    }
+  router.push({ name, query });
+}
+
+onMounted(() => {
+  // 初始获取数据
+  fnGetList();
+
+  // 设置10秒定时器
+  interval10s.value = setInterval(() => {
+    fnGetList();
+  }, 10000);
+});
+
+// 组件销毁前清除定时器
+onBeforeUnmount(() => {
+  if (interval10s.value) {
+    clearInterval(interval10s.value);
+    interval10s.value = null;
+  }
+});
+
+
+</script>
+
+<template>
+  <a-card>
+    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px;    text-align: center;">
+      {{ t('views.dashboard.overview.psapTitle') }}</div>
+
+    <div class="row-title">{{ t('views.dashboard.overview.userTitle') }}</div>
+    <a-row :gutter="[48, 48]">
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card"
+          @click="fnToRouter('NeConfig_2146', { neType: 'MF', treeName: 'agents' })">
+          <div class="card-title">{{ t('views.dashboard.overview.totalUser') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="activeCallsData" color="#4CAF50" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ activeCalls }}
+                <a-icon :class="['trend-icon', activeCallsChange >= 0 ? 'up' : 'down']"
+                  :type="activeCallsChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ activeCallsChange >= 0 ? '+' : '' }}{{ activeCallsChange }}% last 10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card"
+          @click="fnToRouter('NeConfig_2146', { neType: 'MF', treeName: 'agents' })">
+          <div class="card-title">{{ t('views.dashboard.overview.onlineUser') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="mosData" color="#2196F3" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ onlineCount }}
+                <a-icon :class="['trend-icon', onlineCountChange >= 0 ? 'up' : 'down']"
+                  :type="onlineCountChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ onlineCountChange >= 0 ? '+' : '' }}{{ onlineCountChange }} last 10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+
+
+      <a-col :xs="24" :sm="24" :lg="8">
+        <a-card :bordered="false" class="metric-card" @click="fnToRouter('Callings_20001')">
+          <div class="card-title">{{ t('views.dashboard.overview.parallelUser') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="failedCallsData" color="#F44336" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ failedCallsCount }}
+                <a-icon :class="['trend-icon', failedCallsCountChange >= 0 ? 'up' : 'down']"
+                  :type="failedCallsCountChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ failedCallsCountChange >= 0 ? '+' : '' }}{{ failedCallsCountChange }} last
+                10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+    </a-row>
+
+    <div class="row-title" style="margin-top: 100px;"> {{ t('views.dashboard.overview.sysTitle') }} </div>
+
+
+
+    <a-row :gutter="[48, 48]">
+      <a-col :xs="24" :sm="24" :lg="6">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">{{ t('views.dashboard.overview.resources.neCpu') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="networkCpuData" color="#FF9800" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ currentNfCpuUsage }}%
+                <a-icon :class="['trend-icon', nfCpuChange >= 0 ? 'up' : 'down']"
+                  :type="nfCpuChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ nfCpuChange >= 0 ? '+' : '' }}{{ nfCpuChange }}% last 10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xs="24" :sm="24" :lg="6">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">{{ t('views.dashboard.overview.resources.sysCpu') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="systemCpuData" color="#9C27B0" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ currentSysCpuUsage }}%
+                <a-icon :class="['trend-icon', sysCpuChange >= 0 ? 'up' : 'down']"
+                  :type="sysCpuChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ sysCpuChange >= 0 ? '+' : '' }}{{ sysCpuChange }}% last 10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+
+      <a-col :xs="24" :sm="24" :lg="6">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">{{ t('views.dashboard.overview.resources.sysMem') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="systemMemData" color="#CDDC39" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ currentSysMemUsage }}%
+                <a-icon :class="['trend-icon', sysMemChange >= 0 ? 'up' : 'down']"
+                  :type="sysMemChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ sysMemChange >= 0 ? '+' : '' }}{{ sysMemChange }}% last 10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xs="24" :sm="24" :lg="6">
+        <a-card :bordered="false" class="metric-card">
+          <div class="card-title">{{ t('views.dashboard.overview.resources.sysDisk') }}</div>
+          <div class="card-content">
+            <div class="trend-chart">
+              <TrendChart :data="systemStorageData" color="#00BCD4" />
+            </div>
+            <div class="metric-info">
+              <div class="metric-value">
+                {{ currentSysDiskUsage }}%
+                <a-icon :class="['trend-icon', sysDiskChange >= 0 ? 'up' : 'down']"
+                  :type="sysDiskChange >= 0 ? 'arrow-up' : 'arrow-down'" />
+              </div>
+              <div class="metric-change">{{ sysDiskChange >= 0 ? '+' : '' }}{{ sysDiskChange }}% last 10s</div>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+
+
+
+    </a-row>
+  </a-card>
+</template>
+
+<style scoped>
+.row-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  border-left: 3px solid #1890ff;
+}
+
+.dashboard-cards {
+  padding: 16px;
+}
+
+.metric-card {
+  border-radius: 8px;
+  height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+}
+
+.trend-chart {
+  flex: 1;
+  height: 50px;
+}
+
+.metric-info {
+  margin-left: 16px;
+  text-align: right;
+  min-width: 90px;
+}
+
+.full-width {
+  width: 100%;
+  text-align: center;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.metric-change {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.trend-icon {
+  margin-left: 8px;
+  font-size: 16px;
+}
+
+.up {
+  color: #4CAF50;
+}
+
+.down {
+  color: #F44336;
+}
+
+.right {
+  color: #2196F3;
+}
+</style>

src/views/dashboard/overview/components/mfOverview/TrendChart.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="trend-chart-container" ref="chartContainer"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, PropType } from 'vue';
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
+
+echarts.use([LineChart, GridComponent, SVGRenderer]);
+
+// 定义props
+const props = defineProps({
+  data: {
+    type: Array as PropType<number[]>,
+    required: true
+  },
+  color: {
+    type: String,
+    default: '#4CAF50'
+  }
+});
+
+const chartContainer = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartContainer.value) return;
+
+  chart = echarts.init(chartContainer.value);
+
+  const option = {
+    grid: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    xAxis: {
+      type: 'category',
+      show: false,
+      data: ['40m', '', '', '', '', '', 'now']
+    },
+    yAxis: {
+      type: 'value',
+      show: false
+    },
+    series: [
+      {
+        data: props.data,
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: props.color,
+          width: 2
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: props.color + '40' // 40% 透明度
+              },
+              {
+                offset: 1,
+                color: props.color + '00' // 0% 透明度
+              }
+            ]
+          }
+        }
+      }
+    ],
+    animation: false
+  };
+
+  chart.setOption(option);
+};
+
+onMounted(() => {
+  initChart();
+
+  window.addEventListener('resize', () => {
+    chart?.resize();
+  });
+});
+
+watch(() => props.data, () => {
+  chart?.setOption({
+    series: [{ data: props.data }]
+  });
+});
+</script>
+
+<style scoped>
+.trend-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/dashboard/overview/index.vue

@@ -1,684 +1,30 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
-import svgBase from '@/assets/svg/base.svg';
-import svgUserIMS from '@/assets/svg/userIMS.svg';
-import svgUserSMF from '@/assets/svg/userSMF.svg';
-import useI18n from '@/hooks/useI18n';
-import Topology from './components/Topology/index.vue';
-import NeResources from './components/NeResources/index.vue';
-import UserActivity from './components/UserActivity/index.vue';
-import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
-import UPFFlow from './components/UPFFlow/index.vue';
-import { listUDMSub } from '@/api/neData/udm_sub';
-import { listUENumBySMF } from '@/api/neUser/smf';
-import { listUENumByIMS } from '@/api/neUser/ims';
-import { listBase5G } from '@/api/neUser/base5G';
-import {
-  graphNodeClickID,
-  graphState,
-  notNeNodes,
-  graphNodeStateNum,
-  neStateRequestMap,
-} from './hooks/useTopology';
-import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
-import { useFullscreen } from '@vueuse/core';
-import useWS from './hooks/useWS';
-import useAppStore from '@/store/modules/app';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { useRouter } from 'vue-router';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { message } from 'ant-design-vue';
-import { upfWhoId } from './hooks/useWS';
 
-const neInfoStore = useNeInfoStore();
-const router = useRouter();
-const appStore = useAppStore();
-const { t } = useI18n();
-const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 
-/**概览状态类型 */
-type SkimStateType = {
-  /**UDM签约用户数量 */
-  udmSubNum: number;
-  /**SMF在线用户数 */
-  smfUeNum: number;
-  /**IMS在线用户数 */
-  imsUeNum: number;
-  /**5G基站数量 */
-  gnbNum: number;
-  /**5G在线用户数量 */
-  gnbUeNum: number;
-  /**4G基站数量 */
-  enbNum: number;
-  /**4G在线用户数量 */
-  enbUeNum: number;
-};
 
-/**概览状态信息 */
-let skimState: SkimStateType = reactive({
-  udmSubNum: 0,
-  smfUeNum: 0,
-  imsUeNum: 0,
-  gnbNum: 0,
-  gnbUeNum: 0,
-  enbNum: 0,
-  enbUeNum: 0,
-});
-
-/**网元参数 */
-let neCascaderOptions = ref<Record<string, any>[]>([]);
-
-/**总览节点 */
-const viewportDom = ref<HTMLElement | null>(null);
-const { isFullscreen, toggle } = useFullscreen(viewportDom);
-
-let initFlag = false;
-/**10s调度器 */
-const interval10s = ref<any>(null);
-
-/**5s调度器 */
-const interval5s = ref<any>(null);
-
-/**查询网元状态 */
-function fnGetNeState() {
-  // 获取节点状态
-  for (const node of graphState.data.nodes) {
-    if (notNeNodes.includes(node.id)) continue;
-    const { neType, neId } = node.neInfo;
-    if (!neType || !neId) continue;
-    // 请求标记检查避免重复发送
-    if (neStateRequestMap.value.get(neType)) continue;
-    neStateRequestMap.value.set(neType, true);
-
-    wsSend({
-      requestId: `neState_${neType}_${neId}`,
-      type: 'ne_state',
-      data: {
-        neType: neType,
-        neId: neId,
-      },
-    });
-  }
-}
-
-/**获取概览信息 */
-async function fnGetSkim() {
-  const neHandlers = new Map([
-    // [
-    //   'UDM',
-    //   {
-    //     request: (neId: string) =>
-    //       listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
-    //     process: (res: any) =>
-    //       res.code === RESULT_CODE_SUCCESS &&
-    //       (skimState.udmSubNum += res.total),
-    //   },
-    // ],
-    [
-      'SMF',
-      {
-        request: (neId: string) => listUENumBySMF(neId),
-        process: (res: any) =>
-          res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
-      },
-    ],
-    [
-      'IMS',
-      {
-        request: (neId: string) => listUENumByIMS(neId),
-        process: (res: any) =>
-          res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
-      },
-    ],
-    [
-      'AMF',
-      {
-        request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
-        process: (res: any) => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            skimState.gnbNum += res.total;
-            skimState.gnbUeNum += res.rows.reduce(
-              (sum: number, item: any) => sum + item.ueNum,
-              0
-            );
-          }
-        },
-      },
-    ],
-    [
-      'MME',
-      {
-        request: (neId: string) => listBase5G({ neType: 'MME', neId }),
-        process: (res: any) => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            skimState.enbNum += res.total;
-            skimState.enbUeNum += res.rows.reduce(
-              (sum: number, item: any) => sum + item.ueNum,
-              0
-            );
-          }
-        },
-      },
-    ],
-  ]);
-
-  const requests = neCascaderOptions.value.flatMap(
-    (ne: any) =>
-      ne.children
-        ?.map((child: any) => {
-          const handler = neHandlers.get(child.neType);
-          return handler
-            ? {
-                promise: handler.request(child.neId),
-                process: handler.process,
-              }
-            : null;
-        })
-        .filter(Boolean) || []
-  );
-
-  const results = await Promise.allSettled(requests.map(r => r.promise));
-
-  // 重置
-  Object.assign(skimState, {
-    udmSubNum: 0,
-    smfUeNum: 0,
-    imsUeNum: 0,
-    gnbNum: 0,
-    gnbUeNum: 0,
-    enbNum: 0,
-    enbUeNum: 0,
-  });
-  results.forEach((result, index) => {
-    if (result.status === 'fulfilled') {
-      requests[index].process(result.value);
-    }
-  });
-
-  // UDM
-  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      skimState.udmSubNum = res.total;
-    }
-  });
-}
-
-/**初始数据函数 */
-function loadData() {
-  fnGetNeState(); // 获取网元状态
-  userActivitySend();
-  upfTFSend('0');
-  upfTFSend('7');
-  upfTFSend('30');
-
-  clearInterval(interval10s.value);
-  interval10s.value = setInterval(() => {
-    if (!interval10s.value) return;
-    if (upfTFActive.value === '0') {
-      upfTFSend('7');
-      upfTFActive.value = '7';
-    } else if (upfTFActive.value === '7') {
-      upfTFSend('30');
-      upfTFActive.value = '30';
-    } else if (upfTFActive.value === '30') {
-      upfTFSend('0');
-      upfTFActive.value = '0';
-    }
-  }, 10_000);
-
-  clearInterval(interval5s.value);
-  interval5s.value = setInterval(() => {
-    if (!interval5s.value || !initFlag) return;
-    fnGetSkim(); // 获取概览信息
-    fnGetNeState(); // 获取网元状态
-  }, 5_000);
-}
-
-/**栏目信息跳转 */
-function fnToRouter(name: string, query?: any) {
-  router.push({ name, query });
-}
-
-/**网元参数 */
-let neOtions = ref<Record<string, any>[]>([]);
-
-// UPF实时流量下拉框选择
-function fnSelectNe(value: any, option: any) {
-  upfWhoId.value = value;
-  reSendUPF(value);
-  // upfTotalFlow.value.map((item: any) => {
-  //   item.requestFlag = false;
-  // });
-
-  for (var key in upfTotalFlow.value) {
-    upfTotalFlow.value[key].requestFlag = false;
-  }
-  // loadData();
-}
-
-let udmNeId = ref<string>('001');
-let udmOtions = ref<Record<string, any>[]>([]);
-/**用户数量-选择UDM */
-function fnSelectUDM(e: any) {
-  udmNeId.value = e.key;
-  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      skimState.udmSubNum = res.total;
-    }
-  });
-}
-
-// 定义一个方法返回 views 容器
-const getPopupContainer = () => {
-  // 使用 ref 或其他方式来引用你的 views 容器
-  // 如果 views 容器直接在这个组件内部，你可以使用 ref
-  // 但在这个例子中，我们假设它是通过类名来获取的
-  return document.querySelector('.viewport');
-};
+import DashboardCards from './components/mfOverview/DashboardCards.vue';
 
 onMounted(() => {
-  neInfoStore
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        if (res.data.length > 0) {
-          // UPF
-          let arr: Record<string, any>[] = [];
-          res.data.forEach(i => {
-            if (i.neType === 'UPF') {
-              arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
-            }
-          });
-          neOtions.value = arr;
-          if (arr.length > 0) {
-            //queryParams.neRealId = arr[0].value;
-            fnSelectNe(arr[0].value, arr[0]);
-          }
-
-          // UDM
-          let arr1: Record<string, any>[] = [];
-          res.data.forEach((v: any) => {
-            if (v.neType === 'UDM') {
-              arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
-            }
-          });
-          udmOtions.value = arr1;
-          if (arr1.length > 0) {
-            fnSelectUDM({ key: arr1[0].value });
-          }
-
-          // 过滤不可用的网元
-          neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
-            (item: any) => {
-              return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(item.value);
-            }
-          );
-          if (neCascaderOptions.value.length === 0) {
-            message.warning({
-              content: t('common.noData'),
-              duration: 2,
-            });
-            return;
-          }
-        }
-      } else {
-        message.warning({
-          content: t('common.noData'),
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      initFlag = true;
-      fnGetSkim().then(() => {
-        loadData();
-      });
-    });
 });
 
 onBeforeUnmount(() => {
-  clearInterval(interval10s.value);
-  interval10s.value = null;
-  clearInterval(interval5s.value);
-  interval5s.value = null;
-  initFlag = false;
+
 });
 </script>
 
 <template>
-  <div class="viewport" ref="viewportDom">
-    <div class="brand">
-      <div
-        class="brand-title"
-        @click="toggle"
-        :title="t('views.dashboard.overview.fullscreen')"
-      >
-        {{ t('views.dashboard.overview.title') }}
-        <FullscreenExitOutlined v-if="isFullscreen" />
-        <FullscreenOutlined v-else />
-      </div>
-      <div class="brand-desc">{{ appStore.appName }}</div>
-    </div>
-
-    <div class="column">
-      <!--概览-->
-      <div class="skim panel">
-        <div class="inner">
-          <h3>
-            <IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.skim.userTitle') }}
-          </h3>
-          <div class="data">
-            <div
-              class="item toRouter"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div @click="fnToRouter('Sub_2010')">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.udmSubNum }}
-              </div>
-              <span>
-                <a-dropdown :trigger="['click']">
-                  <div class="toDeep-text">
-                    {{ t('views.dashboard.overview.skim.users') }}
-                    <DownOutlined style="margin-left: 12px; font-size: 12px" />
-                  </div>
-                  <template #overlay>
-                    <a-menu @click="fnSelectUDM">
-                      <a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
-                        {{ v.label }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ims_2080')"
-              :title="t('views.dashboard.overview.toRouter')"
-              style="margin: 0 12px"
-              v-perms:has="['dashboard:overview:imsUeNum']"
-            >
-              <div>
-                <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
-                {{ skimState.imsUeNum }}
-              </div>
-              <span>
-                {{ t('views.dashboard.overview.skim.imsUeNum') }}
-              </span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ue_2081')"
-              :title="t('views.dashboard.overview.toRouter')"
-              v-perms:has="['dashboard:overview:smfUeNum']"
-            >
-              <div>
-                <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
-                {{ skimState.smfUeNum }}
-              </div>
-              <span>
-                {{ t('views.dashboard.overview.skim.smfUeNum') }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="skim panel base" v-perms:has="['dashboard:overview:gnbBase']">
-        <div class="inner">
-          <h3>
-            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 5G
-            {{ t('views.dashboard.overview.skim.baseTitle') }}
-          </h3>
-          <div class="data">
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <img
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
-                {{ skimState.gnbNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.gnbUeNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="skim panel base" v-perms:has="['dashboard:overview:enbBase']">
-        <div class="inner">
-          <h3>
-            <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 4G
-            {{ t('views.dashboard.overview.skim.baseTitle') }}
-          </h3>
-          <div class="data">
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <img
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
-                {{ skimState.enbNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div style="align-items: flex-start">
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.enbUeNum }}
-              </div>
-              <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 用户行为 -->
-      <div class="userActivity panel">
-        <div class="inner">
-          <h3>
-            <WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.userActivity.title') }}
-          </h3>
-          <div class="chart">
-            <UserActivity />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
-      <!-- 实时流量 -->
-      <div class="upfFlow panel">
-        <div class="inner">
-          <h3
-            class="toRouter"
-            :title="t('views.dashboard.overview.toRouter')"
-            style="display: flex; align-items: center"
-          >
-            <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            <span @click="fnToRouter('GoldTarget_2104')">{{
-              t('views.dashboard.overview.upfFlow.title')
-            }}</span>
-            <a-select
-              v-model:value="upfWhoId"
-              :options="neOtions"
-              :get-Popup-Container="getPopupContainer"
-              class="toDeep"
-              style="width: 100px; color: #fff; margin-left: auto"
-              @change="fnSelectNe"
-            />
-          </h3>
-
-          <div class="chart">
-            <UPFFlow />
-          </div>
-        </div>
-      </div>
-      <!-- 网络拓扑 -->
-      <div class="topology panel">
-        <div class="inner">
-          <h3
-            class="toRouter"
-            @click="fnToRouter('TopologyArchitecture_2128')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
-            <span>
-              <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-              {{ t('views.dashboard.overview.topology.title') }}
-            </span>
-            <span>
-              {{ t('views.dashboard.overview.topology.normal') }}:
-              <span class="normal"> {{ graphNodeStateNum[0] }} </span>
-              {{ t('views.dashboard.overview.topology.abnormal') }}:
-              <span class="abnormal"> {{ graphNodeStateNum[1] }} </span>
-            </span>
-          </h3>
-          <div class="chart">
-            <Topology />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column">
-      <!-- 流量统计 -->
-      <div class="upfFlowTotal panel">
-        <div class="inner">
-          <h3>
-            <span>
-              <SwapOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-              {{ t('views.dashboard.overview.upfFlowTotal.title') }}
-            </span>
-
-            <!-- 筛选 -->
-            <div class="filter">
-              <span
-                :data-key="v"
-                :class="{ active: upfTFActive === v }"
-                v-for="v in ['0', '7', '30']"
-                :key="v"
-                @click="
-                  () => {
-                    upfTFActive = v;
-                  }
-                "
-              >
-                {{
-                  v === '0'
-                    ? '24' + t('common.units.hour')
-                    : v + t('common.units.day')
-                }}
-              </span>
-            </div>
-          </h3>
-          <div class="chart">
-            <!-- 数据 -->
-            <div class="data">
-              <div class="item">
-                <span>
-                  <ArrowUpOutlined style="color: #597ef7" />
-                  {{ t('views.dashboard.overview.upfFlowTotal.up') }}
-                </span>
-                <h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
-              </div>
-              <div class="item">
-                <span>
-                  <ArrowDownOutlined style="color: #52c41a" />
-                  {{ t('views.dashboard.overview.upfFlowTotal.down') }}
-                </span>
-                <h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 告警统计 -->
-      <div class="alarmType panel">
-        <div class="inner">
-          <h3
-            class="toRouter"
-            @click="fnToRouter('HistoryAlarm_2097')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
-            <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
-          </h3>
-          <div class="chart">
-            <AlarnTypeBar />
-          </div>
-        </div>
-      </div>
-      <!-- 资源情况 -->
-      <div class="resources panel">
-        <div class="inner">
-          <h3>
-            <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.resources.title') }}：
-            {{ graphNodeClickID }}
-          </h3>
-          <div class="chart">
-            <NeResources />
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="dashboard-page">
+    <DashboardCards />
   </div>
 </template>
 
 <style lang="less" scoped>
+.cardClass {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+}
+
 @import url('./css/index.css');
-.toDeep {
-  --editor-background-color: blue;
-}
-
-.toDeep :deep(.ant-select-selector) {
-  background-color: #101129;
-  border: none;
-}
-
-.toDeep :deep(.ant-select-arrow) {
-  color: #fff;
-}
-
-.toDeep :deep(.ant-select-selection-item) {
-  color: #fff;
-}
-.toDeep-text {
-  color: #4c9bfd !important;
-  font-size: 0.844rem !important;
-  position: relative !important;
-  line-height: 2rem !important;
-  white-space: nowrap !important;
-  text-align: start !important;
-  text-overflow: ellipsis !important;
-  overflow: hidden !important;
-}
 </style>

src/views/ne/neConfig/hooks/useConfigList.ts

@@ -134,7 +134,7 @@ export default function useConfigList({
     /**指定每页可以显示多少条 */
     pageSizeOptions: ['10', '20', '50', '100'],
     /**只有一页时是否隐藏分页器 */
-    hideOnSinglePage: true,
+    hideOnSinglePage: false,
     /**是否可以快速跳转至某页 */
     showQuickJumper: true,
     /**是否可以改变 pageSize */

src/views/ne/neConfig/index.vue

@@ -13,6 +13,9 @@ import useConfigList from './hooks/useConfigList';
 import useConfigArray from './hooks/useConfigArray';
 import useConfigArrayChild from './hooks/useConfigArrayChild';
 import { getAllNeConfig, getNeConfigData } from '@/api/ne/neConfig';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
 const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
@@ -76,6 +79,7 @@ function fnSelectConfigNode(_: any, info: any) {
   if (treeState.selectNode.paramName == key) {
     return;
   }
+
   fnActiveConfigNode(key);
 }
 
@@ -168,15 +172,44 @@ function fnActiveConfigNode(key: string | number) {
         // 列表字段
         const columns: Record<string, any>[] = [];
         for (const rule of arrayState.dataRule.record) {
-          columns.push({
-            title: rule.display,
-            dataIndex: rule.name,
-            align: 'left',
-            resizable: true,
-            width: 150,
-            minWidth: 100,
-            maxWidth: 350,
-          });
+          if (rule.name === 'name') {
+            columns.push({
+              title: rule.display,
+              dataIndex: rule.name,
+              align: 'left',
+              resizable: true,
+              width: 150,
+              minWidth: 100,
+              maxWidth: 350,
+              customFilterDropdown: true,
+              onFilter: (value: any, record: any) => {
+                const regex = new RegExp('^[0-9]{4,8}$');
+                const name = record.name.value?.toString().trim() || '';
+                const filterValue = value?.toString().trim();
+                return regex.test(name) && name.includes(filterValue); // 正则匹配且模糊查询
+              },
+              onFilterDropdownOpenChange: (visible: any) => {
+                if (visible) {
+                  setTimeout(() => {
+                    searchInput.value.focus();
+                  }, 100);
+                }
+              },
+            });
+          } else {
+            columns.push({
+              title: rule.display,
+              dataIndex: rule.name,
+              align: 'left',
+              resizable: true,
+              width: 150,
+              minWidth: 100,
+              maxWidth: 350,
+            });
+          }
+
+
+
         }
         columns.push({
           title: t('common.operate'),
@@ -203,7 +236,7 @@ function fnActiveConfigNode(key: string | number) {
 }
 
 /**查询配置可选属性值列表 */
-function fnGetNeConfig() {
+function fnGetNeConfig(routeSelect?: string) {
   const neType = neTypeSelect.value[0];
   if (!neType) {
     message.warning({
@@ -240,7 +273,8 @@ function fnGetNeConfig() {
         const item = JSON.parse(JSON.stringify(treeState.data[0]));
         treeState.selectNode = item;
         treeState.selectLoading = false;
-        fnActiveConfigNode(item.key);
+        // fnActiveConfigNode(((route.query.treeName as string)||item.key));
+        fnActiveConfigNode(routeSelect || item.key);
       }
     }
   });
@@ -362,6 +396,25 @@ const {
   arrayEditClose,
 });
 
+const state = reactive({
+  searchText: '',
+  searchedColumn: '',
+});
+
+const searchInput = ref();
+
+const handleSearch = (selectedKeys: any, confirm: any, dataIndex: any) => {
+  confirm();
+  state.searchText = selectedKeys[0];
+  state.searchedColumn = dataIndex;
+};
+
+const handleReset = (clearFilters: any) => {
+  clearFilters({ confirm: true });
+  state.searchText = '';
+};
+
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -381,7 +434,7 @@ onMounted(() => {
           return;
         }
         // 默认选择AMF
-        const item = neCascaderOptions.value.find(s => s.value === 'AMF');
+        const item = neCascaderOptions.value.find(s => s.value === ((route.query.neType as string) || 'MF'));
         if (item && item.children) {
           const info = item.children[0];
           neTypeSelect.value = [info.neType, info.neId];
@@ -389,7 +442,7 @@ onMounted(() => {
           const info = neCascaderOptions.value[0].children[0];
           neTypeSelect.value = [info.neType, info.neId];
         }
-        fnGetNeConfig();
+        fnGetNeConfig((route.query.treeName as string));
       }
     } else {
       message.warning({
@@ -404,13 +457,7 @@ onMounted(() => {
 <template>
   <PageContainer>
     <a-row :gutter="16">
-      <a-col
-        :lg="6"
-        :md="6"
-        :xs="24"
-        style="margin-bottom: 24px"
-        v-show="collapsible"
-      >
+      <a-col :lg="6" :md="6" :xs="24" style="margin-bottom: 24px" v-show="collapsible">
         <!-- 网元类型 -->
         <a-card size="small" :bordered="false" :loading="treeState.loading">
           <template #title>
@@ -418,37 +465,22 @@ onMounted(() => {
           </template>
           <a-form layout="vertical" autocomplete="off">
             <a-form-item name="neId ">
-              <a-cascader
-                v-model:value="neTypeSelect"
-                :options="neCascaderOptions"
-                :allow-clear="false"
-                @change="fnGetNeConfig"
-              />
+              <a-cascader v-model:value="neTypeSelect" :options="neCascaderOptions" :allow-clear="false"
+                @change="fnGetNeConfig()" />
             </a-form-item>
             <a-form-item name="treeStateData">
-              <a-tree
-                :tree-data="treeState.data"
-                :selected-keys="[treeState.selectNode.paramName]"
-                @select="fnSelectConfigNode"
-              >
+              <a-tree :tree-data="treeState.data" :selected-keys="[treeState.selectNode.paramName]"
+                @select="fnSelectConfigNode">
               </a-tree>
             </a-form-item>
           </a-form>
         </a-card>
       </a-col>
       <a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
-        <a-card
-          size="small"
-          :bordered="false"
-          :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
-          :loading="treeState.selectLoading"
-        >
+        <a-card size="small" :bordered="false" :body-style="{ maxHeight: '700px', 'overflow-y': 'auto' }"
+          :loading="treeState.selectLoading">
           <template #title>
-            <a-button
-              type="text"
-              size="small"
-              @click.prevent="changeCollapsible()"
-            >
+            <a-button type="text" size="small" @click.prevent="changeCollapsible()">
               <template #icon>
                 <MenuFoldOutlined v-show="collapsible" />
                 <MenuUnfoldOutlined v-show="!collapsible" />
@@ -466,11 +498,7 @@ onMounted(() => {
             <a-space :size="8" align="center" v-show="!treeState.selectLoading">
               <a-tooltip placement="topRight">
                 <template #title>{{ t('common.reloadText') }}</template>
-                <a-button
-                  type="default"
-                  size="small"
-                  @click.prevent="fnActiveConfigNode('#')"
-                >
+                <a-button type="default" size="small" @click.prevent="fnActiveConfigNode('#')">
                   <template #icon>
                     <ReloadOutlined />
                   </template>
@@ -480,17 +508,9 @@ onMounted(() => {
           </template>
 
           <!-- 单列表格列表 -->
-          <a-table
-            v-if="treeState.selectNode.paramType === 'list'"
-            class="table"
-            row-key="name"
-            :size="listState.size"
-            :columns="listState.columns"
-            :data-source="listState.data"
-            :pagination="tablePagination"
-            :bordered="true"
-            :scroll="{ x: true, y: '500px' }"
-          >
+          <a-table v-if="treeState.selectNode.paramType === 'list'" class="table" row-key="name" :size="listState.size"
+            :columns="listState.columns" :data-source="listState.data" :pagination="tablePagination" :bordered="true"
+            :scroll="{ x: true, y: '500px' }">
             <template #bodyCell="{ column, text, record }">
               <template v-if="column.dataIndex === 'value'">
                 <a-tooltip placement="topLeft">
@@ -498,68 +518,30 @@ onMounted(() => {
                     {{ record.comment }}
                   </template>
                   <div class="editable-cell">
-                    <div
-                      v-if="
-                        listState.editRecord['display'] === record['display']
-                      "
-                      class="editable-cell__input-wrapper"
-                    >
-                      <a-input-number
-                        v-if="record['type'] === 'int'"
-                        v-model:value="listState.editRecord['value']"
-                        :disabled="listState.confirmLoading"
-                        style="width: 100%"
-                      ></a-input-number>
-                      <a-switch
-                        v-else-if="record['type'] === 'bool'"
-                        v-model:checked="listState.editRecord['value']"
-                        :checked-children="t('common.switch.open')"
-                        :un-checked-children="t('common.switch.shut')"
-                        :disabled="listState.confirmLoading"
-                      ></a-switch>
-                      <a-select
-                        v-else-if="record['type'] === 'enum'"
-                        v-model:value="listState.editRecord['value']"
-                        :allow-clear="true"
-                        :disabled="listState.confirmLoading"
-                        style="width: 100%"
-                      >
-                        <a-select-option
-                          :value="+v"
-                          :key="+v"
-                          v-for="(k, v) in JSON.parse(record['filter'])"
-                        >
+                    <div v-if="
+                      listState.editRecord['display'] === record['display']
+                    " class="editable-cell__input-wrapper">
+                      <a-input-number v-if="record['type'] === 'int'" v-model:value="listState.editRecord['value']"
+                        :disabled="listState.confirmLoading" style="width: 100%"></a-input-number>
+                      <a-switch v-else-if="record['type'] === 'bool'" v-model:checked="listState.editRecord['value']"
+                        :checked-children="t('common.switch.open')" :un-checked-children="t('common.switch.shut')"
+                        :disabled="listState.confirmLoading"></a-switch>
+                      <a-select v-else-if="record['type'] === 'enum'" v-model:value="listState.editRecord['value']"
+                        :allow-clear="true" :disabled="listState.confirmLoading" style="width: 100%">
+                        <a-select-option :value="+v" :key="+v" v-for="(k, v) in JSON.parse(record['filter'])">
                           {{ k }}
                         </a-select-option>
                       </a-select>
-                      <a-input
-                        v-else
-                        v-model:value="listState.editRecord['value']"
-                        :disabled="listState.confirmLoading"
-                      ></a-input>
-                      <a-space
-                        :size="8"
-                        align="center"
-                        direction="horizontal"
-                        style="margin-left: 18px"
-                      >
+                      <a-input v-else v-model:value="listState.editRecord['value']"
+                        :disabled="listState.confirmLoading"></a-input>
+                      <a-space :size="8" align="center" direction="horizontal" style="margin-left: 18px">
                         <a-tooltip placement="bottomRight">
                           <template #title> {{ t('common.ok') }} </template>
-                          <a-popconfirm
-                            :title="
-                              t('views.ne.neConfig.editOkTip', {
-                                num: record['display'],
-                              })
-                            "
-                            placement="topRight"
-                            :disabled="listState.confirmLoading"
-                            @confirm="listEditOk()"
-                          >
-                            <a-button
-                              type="text"
-                              class="editable-cell__icon-edit"
-                              :disabled="listState.confirmLoading"
-                            >
+                          <a-popconfirm :title="t('views.ne.neConfig.editOkTip', {
+                            num: record['display'],
+                          })
+                            " placement="topRight" :disabled="listState.confirmLoading" @confirm="listEditOk()">
+                            <a-button type="text" class="editable-cell__icon-edit" :disabled="listState.confirmLoading">
                               <template #icon>
                                 <CheckOutlined />
                               </template>
@@ -568,12 +550,8 @@ onMounted(() => {
                         </a-tooltip>
                         <a-tooltip placement="bottomRight">
                           <template #title> {{ t('common.cancel') }} </template>
-                          <a-button
-                            type="text"
-                            class="editable-cell__icon-edit"
-                            :disabled="listState.confirmLoading"
-                            @click.prevent="listEditClose()"
-                          >
+                          <a-button type="text" class="editable-cell__icon-edit" :disabled="listState.confirmLoading"
+                            @click.prevent="listEditClose()">
                             <template #icon>
                               <CloseOutlined />
                             </template>
@@ -581,24 +559,16 @@ onMounted(() => {
                         </a-tooltip>
                       </a-space>
                     </div>
-                    <div
-                      v-else
-                      class="editable-cell__text-wrapper"
-                      @dblclick="listEdit(record)"
-                    >
+                    <div v-else class="editable-cell__text-wrapper" @dblclick="listEdit(record)">
                       <template v-if="record['type'] === 'enum'">
                         {{ JSON.parse(record['filter'])[text] || '&nbsp;' }}
                       </template>
                       <template v-else>{{ `${text}` || '&nbsp;' }}</template>
-                      <EditOutlined
-                        class="editable-cell__icon"
-                        @click="listEdit(record)"
-                        style="margin-left: 18px"
+                      <EditOutlined class="editable-cell__icon" @click="listEdit(record)" style="margin-left: 18px"
                         v-if="
                           !listState.confirmLoading &&
                           !['read-only', 'read', 'ro'].includes(record.access)
-                        "
-                      />
+                        " />
                     </div>
                   </div>
                 </a-tooltip>
@@ -608,65 +578,77 @@ onMounted(() => {
 
           <!-- array类型 -->
           <template v-else-if="treeState.selectNode.paramType === 'array'">
-            <a-table
-              class="table"
-              row-key="index"
-              :columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
-              :data-source="arrayState.columnsData"
-              :size="arrayState.size"
-              :pagination="tablePagination"
-              :bordered="true"
-              :scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
-              @resizeColumn="(w:number, col:any) => (col.width = w)"
-              :show-expand-column="false"
-              v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
-            >
+            <a-table class="table" row-key="index"
+              :columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s: any) => s.key !== 'index') : arrayState.columnsDnd"
+              :data-source="arrayState.columnsData" :size="arrayState.size" :pagination="tablePagination"
+              :bordered="true" :scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
+              @resizeColumn="(w: number, col: any) => (col.width = w)" :show-expand-column="false"
+              v-model:expanded-row-keys="arrayState.arrayChildExpandKeys">
               <!-- 多列新增操作 -->
               <template #title>
                 <a-space :size="16" align="center">
-                  <a-button
-                    type="primary"
-                    @click.prevent="arrayAdd()"
-                    size="small"
-                    v-if="treeState.selectNode.paramPerms.includes('post')"
-                  >
-                    <template #icon> <PlusOutlined /> </template>
+                  <a-button type="primary" @click.prevent="arrayAdd()" size="small"
+                    v-if="treeState.selectNode.paramPerms.includes('post')">
+                    <template #icon>
+                      <PlusOutlined />
+                    </template>
                     {{ t('common.addText') }}
                   </a-button>
-                  <TableColumnsDnd
-                    type="ghost"
-                    :cache-id="treeState.selectNode.key"
-                    :columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
-                    v-model:columns-dnd="arrayState.columnsDnd"
-                  ></TableColumnsDnd>
+                  <TableColumnsDnd type="ghost" :cache-id="treeState.selectNode.key"
+                    :columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s: any) => s.key !== 'index')] : arrayState.columns"
+                    v-model:columns-dnd="arrayState.columnsDnd"></TableColumnsDnd>
                 </a-space>
               </template>
 
+              <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+                <div style="padding: 8px">
+                  <a-input ref="searchInput" :placeholder="`Search ${column.dataIndex}`" :value="selectedKeys[0]"
+                    style="width: 188px; margin-bottom: 8px; display: block"
+                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+                    @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)" />
+                  <a-button type="primary" size="small" style="width: 90px; margin-right: 8px"
+                    @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
+                    <template #icon>
+                      <SearchOutlined />
+                    </template>
+                    Search
+                  </a-button>
+                  <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
+                    Reset
+                  </a-button>
+                </div>
+              </template>
+
+              <template #customFilterIcon="{ filtered }">
+                <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
+              </template>
+
               <!-- 多列数据渲染 -->
               <template #bodyCell="{ column, text, record }">
+
                 <template v-if="column?.key === 'index'">
                   <a-space :size="16" align="center">
-                    <a-tooltip
-                      v-if="treeState.selectNode.paramPerms.includes('put')"
-                    >
+                    <a-tooltip v-if="treeState.selectNode.paramPerms.includes('put')">
                       <template #title>{{ t('common.editText') }}</template>
                       <a-button type="link" @click.prevent="arrayEdit(text)">
-                        <template #icon><FormOutlined /></template>
+                        <template #icon>
+                          <FormOutlined />
+                        </template>
                       </a-button>
                     </a-tooltip>
-                    <a-tooltip
-                      v-if="
-                        treeState.selectNode.paramPerms.includes('delete') &&
-                        !(
-                          neTypeSelect[0] === 'IMS' &&
-                          treeState.selectNode.paramName === 'plmn' &&
-                          text['value'] === 0
-                        )
-                      "
-                    >
+                    <a-tooltip v-if="
+                      treeState.selectNode.paramPerms.includes('delete') &&
+                      !(
+                        neTypeSelect[0] === 'IMS' &&
+                        treeState.selectNode.paramName === 'plmn' &&
+                        text['value'] === 0
+                      )
+                    ">
                       <template #title>{{ t('common.deleteText') }}</template>
                       <a-button type="link" @click.prevent="arrayDelete(text)">
-                        <template #icon><DeleteOutlined /></template>
+                        <template #icon>
+                          <DeleteOutlined />
+                        </template>
                       </a-button>
                     </a-tooltip>
                   </a-space>
@@ -678,28 +660,24 @@ onMounted(() => {
                     </template>
                     <div class="editable-cell">
                       <template v-if="text.array">
-                        <a-button
-                          type="default"
-                          size="small"
-                          @click.prevent="
-                            arrayChildExpand(record['index'], text)
-                          "
-                        >
-                          <template #icon><BarsOutlined /></template>
+                        <a-button type="default" size="small" @click.prevent="
+                          arrayChildExpand(record['index'], text)
+                          ">
+                          <template #icon>
+                            <BarsOutlined />
+                          </template>
                           {{ t('views.ne.neConfig.arrayMore') }}
                         </a-button>
                         <!--特殊字段拓展显示-->
-                        <span
-                          v-if="
-                            text.name === 'dnnList' && Array.isArray(text.value)
-                          "
-                        >
+                        <span v-if="
+                          text.name === 'dnnList' && Array.isArray(text.value)
+                        ">
                           ({{
                             text.value.length > 4
                               ? `${text.value
-                                  .slice(0, 3)
-                                  .map((s: any) => s.dnn)
-                                  .join()}...${text.value.length}`
+                                .slice(0, 3)
+                                .map((s: any) => s.dnn)
+                                .join()}...${text.value.length}`
                               : text.value.map((s: any) => s.dnn).join()
                           }})
                         </span>
@@ -720,37 +698,23 @@ onMounted(() => {
 
               <!-- 多列嵌套类型 -->
               <template #expandedRowRender>
-                <a-table
-                  class="table"
-                  row-key="index"
-                  :columns="arrayChildState.columnsDnd"
-                  :data-source="arrayChildState.columnsData"
-                  :size="arrayChildState.size"
-                  :pagination="tablePagination"
-                  :bordered="true"
-                  :scroll="{
+                <a-table class="table" row-key="index" :columns="arrayChildState.columnsDnd"
+                  :data-source="arrayChildState.columnsData" :size="arrayChildState.size" :pagination="tablePagination"
+                  :bordered="true" :scroll="{
                     x: arrayChildState.columnsDnd.length * 200,
                     y: 200,
-                  }"
-                  @resizeColumn="(w:number, col:any) => (col.width = w)"
-                >
+                  }" @resizeColumn="(w: number, col: any) => (col.width = w)">
                   <template #title>
                     <a-space :size="16" align="center">
-                      <a-button
-                        type="primary"
-                        @click.prevent="arrayChildAdd"
-                        size="small"
-                      >
-                        <template #icon> <PlusOutlined /> </template>
+                      <a-button type="primary" @click.prevent="arrayChildAdd" size="small">
+                        <template #icon>
+                          <PlusOutlined />
+                        </template>
                         {{ t('common.addText') }} {{ arrayChildState.title }}
                       </a-button>
-                      <TableColumnsDnd
-                        type="ghost"
-                        :cache-id="`${treeState.selectNode.key}:${arrayChildState.loc}`"
-                        :columns="[...arrayChildState.columns]"
-                        v-model:columns-dnd="arrayChildState.columnsDnd"
-                        v-if="arrayChildState.loc"
-                      ></TableColumnsDnd>
+                      <TableColumnsDnd type="ghost" :cache-id="`${treeState.selectNode.key}:${arrayChildState.loc}`"
+                        :columns="[...arrayChildState.columns]" v-model:columns-dnd="arrayChildState.columnsDnd"
+                        v-if="arrayChildState.loc"></TableColumnsDnd>
                     </a-space>
                   </template>
                   <template #bodyCell="{ column, text, record }">
@@ -758,22 +722,20 @@ onMounted(() => {
                       <a-space :size="8" align="center">
                         <a-tooltip>
                           <template #title>{{ t('common.editText') }}</template>
-                          <a-button
-                            type="link"
-                            @click.prevent="arrayChildEdit(text)"
-                          >
-                            <template #icon><FormOutlined /></template>
+                          <a-button type="link" @click.prevent="arrayChildEdit(text)">
+                            <template #icon>
+                              <FormOutlined />
+                            </template>
                           </a-button>
                         </a-tooltip>
                         <a-tooltip>
                           <template #title>
                             {{ t('common.deleteText') }}
                           </template>
-                          <a-button
-                            type="link"
-                            @click.prevent="arrayChildDelete(text)"
-                          >
-                            <template #icon><DeleteOutlined /></template>
+                          <a-button type="link" @click.prevent="arrayChildDelete(text)">
+                            <template #icon>
+                              <DeleteOutlined />
+                            </template>
                           </a-button>
                         </a-tooltip>
                       </a-space>
@@ -786,7 +748,9 @@ onMounted(() => {
                         <div class="editable-cell">
                           <template v-if="text.array">
                             <a-button type="default" size="small">
-                              <template #icon><BarsOutlined /></template>
+                              <template #icon>
+                                <BarsOutlined />
+                              </template>
                               {{ t('views.ne.neConfig.arrayMore') }}
                             </a-button>
                           </template>
@@ -816,97 +780,46 @@ onMounted(() => {
     </a-row>
 
     <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :destroyOnClose="true"
-      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
-      :keyboard="false"
-      :mask-closable="false"
-      :open="modalState.open"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        class="form"
-        layout="horizontal"
-        autocomplete="off"
-        :validate-on-rule-change="false"
-        :validateTrigger="[]"
-        :label-col="{ span: 6 }"
-        :labelWrap="true"
-      >
-        <a-form-item
-          v-for="item in modalState.data"
-          :label="item.display"
-          :name="item.name"
-          :required="item.optional === 'false'"
-          style="margin-bottom: 4px"
-        >
+    <ProModal :drag="true" :width="800" :destroyOnClose="true"
+      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }" :keyboard="false" :mask-closable="false"
+      :open="modalState.open" :title="modalState.title" :confirm-loading="modalState.confirmLoading" @ok="fnModalOk"
+      @cancel="fnModalCancel">
+      <a-form class="form" layout="horizontal" autocomplete="off" :validate-on-rule-change="false" :validateTrigger="[]"
+        :label-col="{ span: 6 }" :labelWrap="true">
+        <a-form-item v-for="item in modalState.data" :label="item.display" :name="item.name"
+          :required="item.optional === 'false'" style="margin-bottom: 4px">
           <a-tooltip placement="topLeft">
             <template #title v-if="item.comment">
               {{ item.comment }}
             </template>
 
             <div>
-              <div
-                v-if="
-                  !Array.isArray(item.array) &&
-                  modalState.from[item.name] !== undefined
-                "
-              >
+              <div v-if="
+                !Array.isArray(item.array) &&
+                modalState.from[item.name] !== undefined
+              ">
                 <!-- 特殊SMF-upfid选择 -->
-                <a-select
-                  v-if="
-                    neTypeSelect[0] === 'SMF' &&
-                    modalState.from[item.name]['name'] === 'upfId'
-                  "
-                  v-model:value="modalState.from[item.name]['value']"
-                  :options="smfByUPFIdOptions"
-                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
-                  :token-separators="[',', ';']"
-                  mode="multiple"
-                  :max-tag-count="5"
-                  :allow-clear="true"
-                  style="width: 100%"
-                >
+                <a-select v-if="
+                  neTypeSelect[0] === 'SMF' &&
+                  modalState.from[item.name]['name'] === 'upfId'
+                " v-model:value="modalState.from[item.name]['value']" :options="smfByUPFIdOptions"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)" :token-separators="[',', ';']"
+                  mode="multiple" :max-tag-count="5" :allow-clear="true" style="width: 100%">
                 </a-select>
                 <!-- 常规 -->
-                <a-input-number
-                  v-else-if="item['type'] === 'int'"
-                  v-model:value="modalState.from[item.name]['value']"
-                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
-                  style="width: 100%"
-                ></a-input-number>
-                <a-switch
-                  v-else-if="item['type'] === 'bool'"
-                  v-model:checked="modalState.from[item.name]['value']"
-                  :checked-children="t('common.switch.open')"
-                  :un-checked-children="t('common.switch.shut')"
-                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
-                ></a-switch>
-                <a-select
-                  v-else-if="item['type'] === 'enum'"
-                  v-model:value="modalState.from[item.name]['value']"
-                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
-                  :allow-clear="true"
-                  style="width: 100%"
-                >
-                  <a-select-option
-                    :value="+v"
-                    :key="+v"
-                    v-for="(k, v) in JSON.parse(item['filter'])"
-                  >
+                <a-input-number v-else-if="item['type'] === 'int'" v-model:value="modalState.from[item.name]['value']"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)" style="width: 100%"></a-input-number>
+                <a-switch v-else-if="item['type'] === 'bool'" v-model:checked="modalState.from[item.name]['value']"
+                  :checked-children="t('common.switch.open')" :un-checked-children="t('common.switch.shut')"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"></a-switch>
+                <a-select v-else-if="item['type'] === 'enum'" v-model:value="modalState.from[item.name]['value']"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)" :allow-clear="true" style="width: 100%">
+                  <a-select-option :value="+v" :key="+v" v-for="(k, v) in JSON.parse(item['filter'])">
                     {{ k }}
                   </a-select-option>
                 </a-select>
-                <a-input
-                  v-else
-                  v-model:value="modalState.from[item.name]['value']"
-                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"
-                ></a-input>
+                <a-input v-else v-model:value="modalState.from[item.name]['value']"
+                  :disabled="['read-only', 'read', 'ro'].includes(item.access)"></a-input>
               </div>
               <div v-else>
                 {{ `${item.value || '&nbsp;'}` }}
@@ -925,19 +838,24 @@ onMounted(() => {
     display: none;
     cursor: pointer;
   }
+
   &__icon:hover {
     color: var(--ant-primary-color);
   }
+
   &__icon-edit:hover {
     color: var(--ant-primary-color);
   }
+
   &__text-wrapper {
     font-size: 16px;
     color: inherit;
   }
+
   &__text-wrapper:hover &__icon {
     display: inline-block;
   }
+
   &__input-wrapper {
     display: flex;
     justify-content: start;

src/views/ne/neInfo/components/EditModal.vue

@@ -104,12 +104,12 @@ let modalState: ModalStateType = reactive({
   from: {
     id: undefined,
     neId: '001',
-    neType: 'AMF',
+    neType: 'MF',
     neName: '',
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-    rmUid: '4400HXAMF001',
+    rmUid: '4400PSAPMF0001',
     neAddress: '',
     dn: '',
     vendorName: '',
@@ -321,14 +321,14 @@ function fnNeTypeChange(v: any) {
     });
   }
 
-  modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1AMF001
+  modalState.from.rmUid = `4400PSAP${v}${modalState.from.neId}`; // 4400HX1MF001
 }
 
 /**表单修改网元neId */
 function fnNeIdChange(e: any) {
   const v = e.target.value;
   if (v.length < 1) return;
-  modalState.from.rmUid = `4400HX${modalState.from.neType}${v}`; // 4400HX1AMF001
+  modalState.from.rmUid = `4400PSAP${modalState.from.neType}${v}`; // 4400HX1MF001
 }
 
 /**表单修改网元IP */

src/views/ne/neInfo/components/OAMModal.vue

@@ -4,7 +4,7 @@ import { ProModal } from 'antdv-pro-modal';
 import { message, Form } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { getOAMFile, saveOAMFile, serviceNeAction } from '@/api/ne/neInfo';
+import { getOAMFile, saveOAMFile } from '@/api/ne/neInfo';
 const { t } = useI18n();
 const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
@@ -29,8 +29,8 @@ type ModalStateType = {
   openByEdit: boolean;
   /**标题 */
   title: string;
-  /**是否重启 */
-  restart: boolean;
+  /**是否同步 */
+  sync: boolean;
   /**表单数据 */
   from: Record<string, any>;
   /**确定按钮 loading */
@@ -41,7 +41,7 @@ type ModalStateType = {
 let modalState: ModalStateType = reactive({
   openByEdit: false,
   title: 'OAM Configuration',
-  restart: false,
+  sync: true,
   from: {
     omcIP: '',
     oamEnable: true,
@@ -119,19 +119,12 @@ function fnModalOk() {
         neType: props.neType,
         neId: props.neId,
         content: from,
-        sync: true,
+        sync: modalState.sync,
       })
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success(t('common.operateOk'), 3);
             emit('ok');
-            if (modalState.restart) {
-              serviceNeAction({
-                neType: props.neType,
-                neId: props.neId,
-                action: 'restart',
-              });
-            }
             fnModalCancel();
           } else {
             message.error({
@@ -157,7 +150,6 @@ function fnModalOk() {
 function fnModalCancel() {
   modalState.openByEdit = false;
   modalState.confirmLoading = false;
-  modalState.restart = false;
   modalStateFrom.resetFields();
   emit('cancel');
   emit('update:open', false);
@@ -196,15 +188,15 @@ watch(
       :labelWrap="true"
     >
       <a-form-item
-        :label="t('views.ne.neInfo.oam.restart')"
-        name="restart"
+        :label="t('views.ne.neInfo.oam.sync')"
+        name="sync"
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
         <a-switch
           :checked-children="t('common.switch.open')"
           :un-checked-children="t('common.switch.shut')"
-          v-model:checked="modalState.restart"
+          v-model:checked="modalState.sync"
         ></a-switch>
       </a-form-item>
 

src/views/ne/neQuickSetup/components/NeInfoConfig.vue

@@ -187,7 +187,7 @@ function fnModalOk() {
           }
         },
         onOk: () => {
-          from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
+          from.rmUid = `4400PSAP${from.neType}${from.neId}`; // 4400HX1AMF001
           from.neName = `${from.neType}_${from.neId}`; // AMF_001
           const hide = message.loading(t('common.loading'), 0);
           const result =

src/views/system/quick-start/components/NeInfoConfig.vue

@@ -300,7 +300,7 @@ function fnModalVisibleByEdit(record?: any) {
 function fnModalOk() {
   modalState.confirmLoading = true;
   const from = toRaw(modalState.from);
-  from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
+  from.rmUid = `4400PSAP${from.neType}${from.neId}`; // 4400HX1AMF001
   from.neName = `${from.neType}_${from.neId}`; // AMF_001
   const result = from.id ? updateNeInfo(from) : addNeInfo(from);
   const hide = message.loading(t('common.loading'), 0);

src/views/tool/lockScreen/index.vue

@@ -79,7 +79,7 @@ onMounted(() => {
         </span>
       </div>
       <div class="lock-screen_login-from">
-        <a-input-group compact v-if="maskStore.lockPasswd">
+        <a-input-group compact>
           <a-input
             type="password"
             v-model:value="password"
@@ -92,10 +92,6 @@ onMounted(() => {
             <LoginOutlined />
           </a-button>
         </a-input-group>
-        <a-button type="primary" block @click="handleUnlock" v-else>
-          {{ t('components.LockScreen.enter') }}
-        </a-button>
-        
         <a-button type="text" class="logout" @click="handleBackLogin">
           {{ t('components.LockScreen.backLogin') }}
         </a-button>

src/views/traceManage/analysis/index.vue

@@ -1,60 +1,24 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw, ref } from 'vue';
+import { reactive, onMounted, toRaw } 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 useDictStore from '@/store/modules/dict';
-import useTabsStore from '@/store/modules/tabs';
-import { type Dayjs } from 'dayjs';
+import { saveAs } from 'file-saver';
 import useI18n from '@/hooks/useI18n';
-import { getTraceData, listTraceData } from '@/api/trace/task';
-import { decode } from 'js-base64';
-import { useRoute, useRouter } from 'vue-router';
+import { getTraceRawInfo, listTraceData } from '@/api/trace/analysis';
 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,
-  sortBy: 'timestamp',
-  sortOrder: 'asc',
-  /**开始时间 */
-  beginTime: undefined as undefined | number,
-  /**结束时间 */
-  endTime: undefined as undefined | number,
+  /**移动号 */
+  imsi: '',
+  /**移动号 */
+  msisdn: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -64,10 +28,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();
@@ -79,6 +43,8 @@ type TabeStateType = {
   loading: boolean;
   /**紧凑型 */
   size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
   /**记录数据 */
   data: object[];
 };
@@ -86,87 +52,66 @@ type TabeStateType = {
 /**表格状态 */
 let tableState: TabeStateType = reactive({
   loading: false,
-  size: 'small',
+  size: 'middle',
+  seached: true,
   data: [],
 });
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: t('common.rowId'),
-    dataIndex: 'id',
-    align: 'left',
-    width: 100,
+    title: t('views.traceManage.analysis.trackTaskId'),
+    dataIndex: 'taskId',
+    align: 'center',
   },
   {
-    title: t('views.traceManage.task.msgNe'),
-    dataIndex: 'msgNe',
-    align: 'left',
-    width: 150,
+    title: t('views.traceManage.analysis.imsi'),
+    dataIndex: 'imsi',
+    align: 'center',
   },
   {
-    title: t('views.traceManage.task.rowTime'),
+    title: t('views.traceManage.analysis.msisdn'),
+    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: 'left',
-    width: 250,
+    align: 'center',
     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}`;
+      return parseDateToStr(opt.value);
     },
-    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: 'left',
+    align: 'center',
   },
 ];
 
@@ -203,18 +148,6 @@ 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;
@@ -222,24 +155,10 @@ 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) {
-      const { total, rows } = res.data;
-      tablePagination.total = total;
-      tableState.data = rows;
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
       if (
         tablePagination.total <=
           (queryParams.pageNum - 1) * tablePagination.pageSize &&
@@ -279,17 +198,24 @@ let modalState: ModalStateType = reactive({
  * @param row 记录信息
  */
 function fnModalVisible(row: Record<string, any>) {
-  getTraceData(row.id).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      Object.assign(modalState.from, res.data);
-      // 进制转数据
-      const hexString = parseBase64Data(res.data.rawMsg);
-      const rawData = convertToReadableFormat(hexString);
-      modalState.from.rawData = rawData;
-      modalState.title = t('views.traceManage.task.taskInfo');
-      modalState.open = true;
-    }
+  // 进制转数据
+  const hexString = parseBase64Data(row.rawMsg);
+  const rawData = convertToReadableFormat(hexString);
+  modalState.from.rawData = rawData;
+  // RAW解析HTML
+  // getTraceRawInfo(row.id).then(res => {
+  //   if (res.code === RESULT_CODE_SUCCESS) {
+  //     const htmlString = rawDataHTMLScript(res.msg);
+  //     modalState.from.rawDataHTML = htmlString;
+  //     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;
 }
 
 /**
@@ -297,13 +223,15 @@ function fnModalVisible(row: Record<string, any>) {
  */
 function fnModalVisibleClose() {
   modalState.open = false;
+  modalState.from.downBtn = false;
+  modalState.from.rawDataHTML = '';
   modalState.from.rawData = '';
 }
 
 // 将Base64编码解码为字节数组
-function parseBase64Data(base64Data: string) {
+function parseBase64Data(hexData: string) {
   // 将Base64编码解码为字节数组
-  const byteString = decode(base64Data);
+  const byteString = atob(hexData);
   const byteArray = new Uint8Array(byteString.length);
   for (let i = 0; i < byteString.length; i++) {
     byteArray[i] = byteString.charCodeAt(i);
@@ -323,7 +251,7 @@ function convertToReadableFormat(hexString: string) {
   let result = '';
   let asciiResult = '';
   let arr = [];
-  let row = 10000;
+  let row = 100;
   for (let i = 0; i < hexString.length; i += 2) {
     const hexChars = hexString.substring(i, i + 2);
     const decimal = parseInt(hexChars, 16);
@@ -357,46 +285,100 @@ 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(() => {
-  // 初始字典数据
-  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();
-    });
+  // 获取列表数据
+  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="8" :md="12" :xs="24">
+          <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.traceManage.task.rowTime')"
-              name="queryRangePicker"
+              :label="t('views.traceManage.analysis.imsi')"
+              name="imsi"
             >
-              <a-range-picker
-                v-model:value="queryRangePicker"
-                :bordered="true"
-                :allow-clear="false"
-                style="width: 100%"
-                :show-time="{ format: 'HH:mm:ss' }"
-                format="YYYY-MM-DD HH:mm:ss"
-              ></a-range-picker>
+              <a-input
+                v-model:value="queryParams.imsi"
+                :allow-clear="true"
+                :placeholder="t('views.traceManage.analysis.imsiPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <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">
@@ -419,22 +401,20 @@ onMounted(() => {
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
-      <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 #title> </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()">
@@ -478,18 +458,11 @@ 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 placement="topRight">
+              <a-tooltip>
                 <template #title>{{ t('common.viewText') }}</template>
                 <a-button type="link" @click.prevent="fnModalVisible(record)">
                   <template #icon><ProfileOutlined /></template>
@@ -508,111 +481,35 @@ onMounted(() => {
       :title="modalState.title"
       :open="modalState.open"
       @cancel="fnModalVisibleClose"
-      :footer="false"
     >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 8 }"
-        :label-wrap="true"
+      <div class="raw-title">
+        {{ t('views.traceManage.analysis.signalData') }}
+      </div>
+      <a-row
+        class="raw"
+        v-for="v in modalState.from.rawData"
+        :key="v.row"
       >
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.msgType')"
-              name="msgType"
-            >
-              <DictTag
-                :options="dict.traceMsgType"
-                :value="modalState.from.msgType"
-              />
-            </a-form-item>
-          </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 }"
+        <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-divider />
+      <!-- <div class="raw-title">
+        {{ t('views.traceManage.analysis.signalDetail') }}
+        <a-button
+          type="dashed"
+          size="small"
+          @click.prevent="fnDownloadFile"
+          v-if="modalState.from.downBtn"
         >
-          {{ modalState.from.imsi }}
-        </a-form-item>
-
-        <a-form-item
-          v-if="modalState.from.ifType"
-          :label="t('views.traceManage.task.protocolOrInterface')"
-          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>
+          <template #icon>
+            <DownloadOutlined />
+          </template>
+          {{ t('views.traceManage.analysis.taskDownText') }}
+        </a-button>
+      </div> -->
+      <!-- <div class="raw-html" v-html="modalState.from.rawDataHTML"></div> -->
     </ProModal>
   </PageContainer>
 </template>
@@ -623,15 +520,24 @@ onMounted(() => {
 }
 
 .raw {
+  &-title {
+    color: #000000d9;
+    font-size: 24px;
+    line-height: 1.8;
+  }
   .num {
-    background-color: #f0f0f0;
+    background-color: #e5e5e5;
   }
   .code {
-    background-color: #0078d4;
-    color: #fff;
+    background-color: #e7e6ff;
   }
   .txt {
-    background-color: #d9d9d9;
+    background-color: #ffe3e5;
+  }
+
+  &-html {
+    max-height: 300px;
+    overflow-y: auto;
   }
 }
 </style>

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) {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       if (res.data.length === 0) {
         message.warning({
           content: t('common.noData'),
@@ -424,6 +424,16 @@ 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"
@@ -433,36 +443,24 @@ onMounted(() => {
                 <template #icon><DownloadOutlined /></template>
                 {{ t('common.downloadText') }}
               </a-button>
-              
               <a-button
                 type="link"
-                @click.prevent="fnDrawerOpen(record)"
-                v-if="
-                  record.fileType === 'file' && record.fileName.endsWith('.log')
-                "
+                :loading="downLoading"
+                @click.prevent="fnDownloadFileZIP(record)"
+                v-if="record.fileType === 'dir'"
               >
-                <template #icon><ProfileOutlined /></template>
-                {{ t('common.viewText') }}
+                <template #icon><DownloadOutlined /></template>
+                {{ t('common.downloadText') }}
+              </a-button>
+              <a-button
+                type="link"
+                :loading="downLoading"
+                @click.prevent="fnDirCD(record.fileName)"
+                v-if="record.fileType === 'dir'"
+              >
+                <template #icon><FolderOutlined /></template>
+                {{ t('views.logManage.neFile.dirCd') }}
               </a-button>
-
-              <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,14 +212,13 @@ 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) {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
       if (tableState.selectedRowKeys.length > 0) {
         tableState.selectedRowKeys = [];
       }
-      const { total, rows } = res.data;
-      tablePagination.total = total;
-      tableState.data = rows;
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
       if (
         tablePagination.total <=
           (queryParams.pageNum - 1) * tablePagination.pageSize &&
@@ -730,7 +729,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>
@@ -750,7 +749,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,32 +1,35 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive, ref, toRaw } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue';
-import { SizeType } from 'ant-design-vue/es/config-provider';
-import { ColumnsType } from 'ant-design-vue/es/table';
+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 { usePCAP, NO_SELECTION } from '../tshark/hooks/usePCAP';
 import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
-import { filePullTask, getTraceData, listTraceData } from '@/api/trace/task';
-import { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
-import * as wkUtil from '@/plugins/wk-worker';
-import * as wsUtil from '@/plugins/ws-websocket';
+import { filePullTask } from '@/api/trace/task';
+import { OptionsType, WS } 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 wsUtil.WS();
-const wk = new wkUtil.WK();
+const ws = new WS();
+const { t } = useI18n();
+const {
+  state,
+  handleSelectedTreeEntry,
+  handleSelectedFindSelection,
+  handleSelectedFrame,
+  handleScrollBottom,
+  handleFilterFrames,
+  handleLoadFile,
+} = usePCAP();
 
 /**跟踪编号 */
 const traceId = ref<string>(route.query.traceId as string);
@@ -41,17 +44,6 @@ function fnClose() {
   }
 }
 
-/**字典数据 */
-let dict: {
-  /**跟踪消息类型 */
-  traceMsgType: DictType[];
-  /**跟踪消息方向 */
-  traceMsgDirect: DictType[];
-} = reactive({
-  traceMsgType: [],
-  traceMsgDirect: [],
-});
-
 /**下载触发等待 */
 let downLoading = ref<boolean>(false);
 
@@ -90,266 +82,15 @@ function fnDownloadFile() {
   });
 }
 
-// =========== 表格数据 ==============
-/**表格状态类型 */
-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 => {
+/**获取PCAP文件 */
+function fnFilePCAP() {
+  filePullTask(traceId.value).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      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 });
+      handleLoadFile(res.data);
     }
   });
 }
-/**生成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;
@@ -360,6 +101,7 @@ function wsMessage(res: Record<string, any>) {
 
   // 建联时发送请求
   if (!requestId && data.clientId) {
+    fnFilePCAP();
     return;
   }
 
@@ -368,16 +110,13 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   if (data.groupId === `2_${traceId.value}`) {
-    // 第一页降序时实时添加记录
-    if (queryParams.pageNum === 1 && queryParams.sortOrder === 'desc') {
-      tableState.data.unshift(data);
-    }
-    tablePagination.total += 1;
+    fnFilePCAP();
   }
 }
+
 /**建立WS连接 */
 function fnWS() {
-  const options: wsUtil.OptionsType = {
+  const options: OptionsType = {
     url: '/ws',
     params: {
       /**订阅通道组
@@ -396,167 +135,15 @@ function fnWS() {
   ws.connect(options);
 }
 
-// =========== WK ==============
-const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
-
-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,
-    });
+watch(
+  () => state.initialized,
+  v => {
+    v && fnWS();
   }
-
-  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(() => {
-  wk.send({ type: 'close' }) && wk.close();
-  if (ws.state() <= WebSocket.OPEN) ws.close();
+  ws.close();
 });
 </script>
 
@@ -567,9 +154,8 @@ onBeforeUnmount(() => {
       :loading="!state.initialized"
       :body-style="{ padding: '12px' }"
     >
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="center">
+      <div class="toolbar">
+        <a-space :size="8" class="toolbar-oper">
           <a-button type="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.close') }}
@@ -587,65 +173,89 @@ onBeforeUnmount(() => {
             <strong>{{ traceId }}</strong>
           </span>
         </a-space>
-      </template>
 
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-tooltip>
-          <template #title>{{ t('common.reloadText') }}</template>
-          <a-button type="text" @click.prevent="fnGetList()">
-            <template #icon><ReloadOutlined /></template>
-          </a-button>
-        </a-tooltip>
-      </template>
+        <div class="toolbar-info">
+          <a-tag color="green" v-show="!!state.currentFilter">
+            {{ state.currentFilter }}
+          </a-tag>
+          <span> Matched Frame: {{ state.totalFrames }} </span>
+        </div>
+
+        <!-- 包信息 -->
+        <a-popover
+          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"
+      />
 
       <!-- 包数据表 -->
-      <a-table
-        class="table"
-        row-key="id"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :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"
-      >
+      <PacketTable
+        :columns="state.columns"
+        :data="state.packetFrames"
+        :selectedFrame="state.selectedFrame"
+        :onSelectedFrame="handleSelectedFrame"
+        :onScrollBottom="handleScrollBottom"
+      ></PacketTable>
+
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTree"
-            :selected="state.selectedTree"
-            :tree="state.packetFrame.tree"
+            :select="handleSelectedTreeEntry"
+            :selected="state.selectedTreeEntry"
+            :tree="state.selectedPacket.tree"
           />
         </a-col>
         <a-col :lg="12" :md="12" :xs="24" class="dump">
@@ -658,15 +268,15 @@ onBeforeUnmount(() => {
             <a-tab-pane
               :key="idx"
               :tab="v.name"
-              v-for="(v, idx) in state.packetFrame.data_sources"
+              v-for="(v, idx) in state.selectedPacket.data_sources"
               style="overflow: auto"
             >
               <DissectionDump
                 :base64="v.data"
                 :select="(pos:number)=>handleSelectedFindSelection(idx, pos)"
                 :selected="
-                  idx === state.selectedTree.idx
-                    ? state.selectedTree
+                  idx === state.selectedTreeEntry.idx
+                    ? state.selectedTreeEntry
                     : NO_SELECTION
                 "
               />
@@ -679,20 +289,24 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
+.toolbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
 }
-.table :deep(.table-striped-select) td {
-  background-color: #c2c2c2;
-  cursor: pointer;
+.toolbar-info {
+  flex: 1;
+  text-align: right;
+  padding-right: 8px;
 }
-.table :deep(.table-striped-recv) td {
-  background-color: #a9e2ff;
-  cursor: pointer;
+
+.summary {
+  display: flex;
+  flex-direction: column;
 }
-.table :deep(.table-striped-send) td {
-  background-color: #bcfbb3;
-  cursor: pointer;
+.summary-item > span:first-child {
+  font-weight: 600;
+  margin-right: 6px;
 }
 
 .tree {

src/views/traceManage/task/index.vue

@@ -20,7 +20,7 @@ import {
   updateTraceTask,
 } from '@/api/trace/task';
 import useDictStore from '@/store/modules/dict';
-import { regExpIPv4 } from '@/utils/regular-utils';
+import { regExpIPv4, regExpPort } from '@/utils/regular-utils';
 import dayjs, { Dayjs } from 'dayjs';
 import { parseObjHumpToLine } from '@/utils/parse-utils';
 const neInfoStore = useNeInfoStore();
@@ -33,11 +33,8 @@ const route = useRoute();
 let dict: {
   /**跟踪类型 */
   traceType: DictType[];
-  /**跟踪接口 */
-  traceInterfaces: DictType[];
 } = reactive({
   traceType: [],
-  traceInterfaces: [],
 });
 
 /**网元类型_多neId */
@@ -101,28 +98,40 @@ 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'),
@@ -132,7 +141,6 @@ let tableColumns: ColumnsType = [
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    width: 200,
   },
   {
     title: t('common.operate'),
@@ -238,14 +246,13 @@ function fnGetList(pageNum?: number) {
     queryParams.pageNum = pageNum;
   }
   listTraceTask(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
       if (tableState.selectedRowKeys.length > 0) {
         tableState.selectedRowKeys = [];
       }
-      const { total, rows } = res.data;
-      tablePagination.total = total;
-      tableState.data = rows;
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
       if (
         tablePagination.total <=
           (queryParams.pageNum - 1) * tablePagination.pageSize &&
@@ -266,15 +273,18 @@ type ModalStateType = {
   /**标题 */
   title: string;
   /**网元类型设备对象 */
-  neType: any[] | undefined;
+  neType: string[];
   /**网元类型设备对象接口 */
-  neTypeInterface: string[];
+  neTypeInterface: Record<string, any>[];
+  /**网元类型设备对象接口选择 */
+  neTypeInterfaceSelect: string[];
   /**任务开始结束时间 */
-  timeRangePicker: [Dayjs, Dayjs] | undefined;
+  timeRangePicker: [string, string];
   /**表单数据 */
   from: {
     id?: string;
-    neList: string; // 网元列表 neType_neId 例如 UDM_001,AMF_001
+    neType: string;
+    neId: string;
     /**1-Interface,2-Device,3-User */
     traceType: string;
     startTime?: number;
@@ -301,11 +311,13 @@ let modalState: ModalStateType = reactive({
   title: '',
   neType: [],
   neTypeInterface: [],
-  timeRangePicker: undefined,
+  neTypeInterfaceSelect: [],
+  timeRangePicker: ['', ''],
   from: {
-    id: undefined,
-    neList: '',
-    traceId: undefined,
+    id: '',
+    neType: '',
+    neId: '',
+    traceId: '',
     traceType: '3',
     startTime: undefined,
     endTime: undefined,
@@ -317,8 +329,8 @@ let modalState: ModalStateType = reactive({
     dstIp: '',
     signalPort: undefined,
     /**3用户跟踪 */
-    imsi: undefined,
-    // msisdn: undefined,
+    imsi: '',
+    msisdn: '',
   },
   confirmLoading: false,
 });
@@ -333,7 +345,7 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.trackTypePlease'),
       },
     ],
-    neList: [
+    neId: [
       {
         required: true,
         message: t('views.ne.common.neTypePlease'),
@@ -380,48 +392,43 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.dstIpPlease'),
       },
     ],
+    signalPort: [
+      {
+        required: false,
+        pattern: regExpPort,
+        message: t('views.traceManage.task.signalPortPlease'),
+      },
+    ],
   })
 );
 
 /**网元类型选择对应修改 */
-function fnNeChange(p: any, c: any) {
-  let neList: string[] = [];
-  for (let i = 0; i < p.length; i++) {
-    const v = p[i];
-    if (v.length === 1) {
-      c[i][0].children.forEach((item: any) => {
-        neList.push(`${item.neType}_${item.neId}`);
-      });
-    } else if (v.length === 2) {
-      neList.push(`${v[0]}_${v[1]}`);
-    }
-  }
-  if (neList.length > 0) {
-    modalState.from.neList = neList.join(',');
-  } else {
-    modalState.from.neList = '';
+function fnNeChange(_: any, item: any) {
+  modalState.from.neType = item[1].neType;
+  modalState.from.neId = item[1].neId;
+  // 网元信令接口可选列表
+  modalState.from.interfaces = '';
+  modalState.neTypeInterfaceSelect = [];
+  fnSelectInterfaceInit(item[1].neType);
+}
+
+/**跟踪类型选择对应修改 */
+function fnTraceTypeChange(v: any, _: any) {
+  // 网元信令接口可选列表
+  if (v === '1' && modalState.from.neType) {
+    modalState.from.interfaces = '';
+    modalState.neTypeInterfaceSelect = [];
+    fnSelectInterfaceInit(modalState.from.neType);
   }
 }
 
 /**开始结束时间选择对应修改 */
 function fnRangePickerChange(item: any, _: any) {
-  if (!item || item.length !== 2) {
-    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();
+  modalState.from.startTime = +item[0];
+  modalState.from.endTime = +item[1];
 }
 function fnRangePickerDisabledDate(current: Dayjs) {
-  return current && current < dayjs().startOf('day');
+  return current && current < dayjs().subtract(1, 'day').endOf('day');
 }
 
 /**信令接口选择对应修改 */
@@ -429,6 +436,19 @@ 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, 不传为新增
@@ -446,45 +466,20 @@ function fnModalOpenByEdit(id?: string) {
       modalState.confirmLoading = false;
       hide();
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
-        // 回显网元类型
-        const neType: any[] = [];
-        const neList = res.data.neList.split(',');
-        const neListMap: any = {};
-        for (const v of neList) {
-          const item: string[] = v.split('_');
-          if (!neListMap[item[0]]) {
-            neListMap[item[0]] = [];
-          }
-          neListMap[item[0]].push(item[1]);
-        }
-        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.neType = [res.data.neType, res.data.neId];
+        modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
         modalState.from = Object.assign(modalState.from, res.data);
-        modalState.title = t('views.traceManage.task.viewTask');
+        // 接口
+        if (res.data.traceType === 'Interface') {
+          if (
+            res.data.interfaces.length > 4 &&
+            res.data.interfaces.includes('[')
+          ) {
+            modalState.neTypeInterfaceSelect = JSON.parse(res.data.interfaces);
+          }
+          fnSelectInterfaceInit(res.data.neType);
+        }
+        modalState.title = t('views.traceManage.task.editTask');
         modalState.openByEdit = true;
       } else {
         message.error(t('views.traceManage.task.errorTaskInfo'), 3);
@@ -499,15 +494,15 @@ function fnModalOpenByEdit(id?: string) {
  */
 function fnModalOk() {
   const from = toRaw(modalState.from);
-  let valids = ['traceType', 'neList', 'endTime'];
+  let valids = ['traceType', 'neId', 'endTime'];
   if (from.traceType === '1') {
     valids = valids.concat(['interfaces']);
   }
   if (from.traceType === '2') {
-    valids = valids.concat(['srcIp', 'dstIp']);
+    valids = valids.concat(['srcIp', 'dstIp', 'signalPort']);
   }
   if (from.traceType === '3') {
-    valids = valids.concat(['imsi']);
+    valids = valids.concat(['imsi', 'msisdn']);
   }
 
   modalStateFrom
@@ -550,48 +545,46 @@ function fnModalCancel() {
   modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
+  modalState.timeRangePicker = ['', ''];
+  modalState.neTypeInterfaceSelect = [];
   modalState.neType = [];
   modalState.neTypeInterface = [];
-  modalState.timeRangePicker = undefined;
 }
 
-/**跳转内嵌详情页面 */
-function fnRecordView(traceId: any, type: 'analyze' | 'data') {
+/**跳转PCAP文件详情页面 */
+function fnRecordPCAPView(row: Record<string, any>) {
   router.push({
-    path: `${route.path}${MENU_PATH_INLINE}/${type}`,
-    query: { traceId },
+    path: `${route.path}${MENU_PATH_INLINE}/analyze`,
+    query: {
+      traceId: row.traceId,
+    },
   });
 }
 
 onMounted(() => {
   // 初始字典数据
-  Promise.allSettled([getDict('trace_type'), getDict('trace_interfaces')]).then(
-    resArr => {
-      if (resArr[0].status === 'fulfilled') {
-        dict.traceType = resArr[0].value;
-      }
-      if (resArr[1].status === 'fulfilled') {
-        dict.traceInterfaces = resArr[1].value;
-      }
+  Promise.allSettled([getDict('trace_type')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.traceType = resArr[0].value;
     }
-  );
+  });
 
   // 获取网元网元列表
   useNeInfoStore()
     .fnNelist()
     .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
         if (res.data.length > 0) {
           // 过滤不可用的网元
           neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
             (item: any) => {
-              return ['AMF', 'AUSF', 'SMF', 'UDM', 'PCF'].includes(item.value);
+              return ['UDM'].includes(item.value);
             }
           );
           if (neCascaderOptions.value.length === 0) {
             message.warning({
               content: t('common.noData'),
-              duration: 3,
+              duration: 2,
             });
             return;
           }
@@ -599,11 +592,13 @@ onMounted(() => {
       } else {
         message.warning({
           content: t('common.noData'),
-          duration: 3,
+          duration: 2,
         });
       }
     })
     .finally(() => {
+      // 获取跟踪接口列表
+      neInfoStore.fnNeTraceInterface();
       // 获取列表数据
       fnGetList();
     });
@@ -769,40 +764,21 @@ 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.viewText') }}</template>
+                <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
                   @click.prevent="fnModalOpenByEdit(record.id)"
                 >
-                  <template #icon><ProfileOutlined /></template>
+                  <template #icon><FormOutlined /></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">
@@ -833,14 +809,12 @@ 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">
@@ -848,13 +822,12 @@ onMounted(() => {
               :label="t('views.ne.common.neType')"
               :label-col="{ span: 8 }"
               name="neType"
-              v-bind="modalStateFrom.validateInfos.neList"
+              v-bind="modalStateFrom.validateInfos.neId"
             >
               <a-cascader
                 v-model:value="modalState.neType"
                 :options="neCascaderOptions"
                 @change="fnNeChange"
-                multiple
                 :allow-clear="false"
                 :placeholder="t('views.ne.common.neTypePlease')"
               />
@@ -870,6 +843,7 @@ onMounted(() => {
               <a-select
                 v-model:value="modalState.from.traceType"
                 :options="dict.traceType"
+                @change="fnTraceTypeChange"
                 :allow-clear="false"
                 :placeholder="t('views.traceManage.task.trackTypePlease')"
               >
@@ -886,9 +860,11 @@ 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="[
@@ -917,8 +893,8 @@ onMounted(() => {
             <a-select
               mode="multiple"
               :placeholder="t('views.traceManage.task.interfacesPlease')"
-              v-model:value="modalState.neTypeInterface"
-              :options="dict.traceInterfaces"
+              v-model:value="modalState.neTypeInterfaceSelect"
+              :options="modalState.neTypeInterface"
               @change="fnSelectInterface"
             >
             </a-select>
@@ -927,6 +903,26 @@ 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
@@ -945,9 +941,7 @@ 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>
@@ -970,9 +964,7 @@ 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>
@@ -998,12 +990,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"
@@ -1018,11 +1010,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;
   /**当前选中的帧数据 */
-  packetFrame: { tree: any[]; data_sources: any[] };
+  selectedPacket: { tree: any[]; data_sources: any[] };
   /**pcap包帧数据 */
-  packetFrameTreeMap: Map<string, any> | null;
-  /**当前选中的帧数据 */
-  selectedTree: typeof NO_SELECTION;
+  packetFrameData: Map<string, any> | null;
+  /**当前选中的帧数据-空占位 */
+  selectedTreeEntry: typeof NO_SELECTION;
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: number;
   /**处理完成状态 */
@@ -69,11 +69,11 @@ export function usePCAP() {
     filter: '',
     filterError: null,
     currentFilter: '',
-    selectedFrame: 0,
+    selectedFrame: 1,
     /**当前选中的帧数据 */
-    packetFrame: { tree: [], data_sources: [] },
-    packetFrameTreeMap: null, // 注意：Map 需要额外处理
-    selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
+    selectedPacket: { tree: [], data_sources: [] },
+    packetFrameData: null, // 注意：Map 需要额外处理
+    selectedTreeEntry: NO_SELECTION, // NO_SELECTION 需要定义
     /**选择帧的Dump数据标签 */
     selectedDataSourceIndex: 0,
     /**处理完成状态 */
@@ -91,9 +91,9 @@ export function usePCAP() {
     state.nextPageNum = 1;
     // 选择帧的数据
     state.selectedFrame = 0;
-    state.packetFrame = { tree: [], data_sources: [] };
-    state.packetFrameTreeMap = null;
-    state.selectedTree = NO_SELECTION;
+    state.selectedPacket = { tree: [], data_sources: [] };
+    state.packetFrameData = null;
+    state.selectedTreeEntry = NO_SELECTION;
     state.selectedDataSourceIndex = 0;
   }
 
@@ -121,23 +121,23 @@ export function usePCAP() {
   }
 
   /**帧数据点击选中 */
-  function handleSelectedTree(e: any) {
-    // console.log('fnSelectedTree', e);
-    state.selectedTree = e;
+  function handleSelectedTreeEntry(e: any) {
+    console.log('fnSelectedTreeEntry', e);
+    state.selectedTreeEntry = e;
   }
   /**报文数据点击选中 */
   function handleSelectedFindSelection(src_idx: number, pos: number) {
-    // console.log('fnSelectedFindSelection', pos);
-    if (state.packetFrameTreeMap == null) return;
+    console.log('fnSelectedFindSelection', pos);
+    if (state.packetFrameData == null) return;
     // find the smallest one
     let current = null;
-    for (let [k, pp] of state.packetFrameTreeMap) {
+    for (let [k, pp] of state.packetFrameData) {
       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
+          state.packetFrameData.get(current).length > pp.length
         ) {
           current = k;
         } else {
@@ -146,19 +146,19 @@ export function usePCAP() {
       }
     }
     if (current != null) {
-      state.selectedTree = state.packetFrameTreeMap.get(current);
+      state.selectedTreeEntry = state.packetFrameData.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.packetFrame = res.data;
-        state.packetFrameTreeMap = parseFrameData('root', res.data);
-        state.selectedTree = NO_SELECTION;
+        state.selectedPacket = res.data;
+        state.packetFrameData = parseFrameData('root', res.data);
+        state.selectedTreeEntry = NO_SELECTION;
         state.selectedDataSourceIndex = 0;
         break;
       case 'processed':
@@ -306,7 +306,7 @@ export function usePCAP() {
 
   return {
     state,
-    handleSelectedTree,
+    handleSelectedTreeEntry,
     handleSelectedFindSelection,
     handleSelectedFrame,
     handleScrollBottom,

src/views/traceManage/tshark/index.vue

@@ -8,12 +8,11 @@ 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,
-  handleSelectedTree,
+  handleSelectedTreeEntry,
   handleSelectedFindSelection,
   handleSelectedFrame,
   handleScrollBottom,
@@ -50,9 +49,8 @@ function fnUpload(up: UploadRequestOption) {
       :loading="!state.initialized"
       :body-style="{ padding: '12px' }"
     >
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="center">
+      <div class="toolbar">
+        <a-space :size="8" class="toolbar-oper">
           <a-upload
             name="file"
             list-type="picture"
@@ -66,94 +64,61 @@ function fnUpload(up: UploadRequestOption) {
           </a-upload>
           <a-button @click="handleLoadExample()">Example</a-button>
         </a-space>
-      </template>
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
+
+        <div class="toolbar-info">
           <a-tag color="green" v-show="!!state.currentFilter">
             {{ state.currentFilter }}
           </a-tag>
           <span> Matched Frame: {{ state.totalFrames }} </span>
-          <!-- 包信息 -->
-          <a-popover
-            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>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>
+
+        <!-- 包信息 -->
+        <a-popover
+          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>
-            </template>
-            <InfoCircleOutlined />
-          </a-popover>
-        </a-space>
-      </template>
+              <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>Duration:</span>
+                <span>{{ Math.round(state.summary.elapsed_time) }}s</span>
+              </div>
+            </div>
+          </template>
+          <InfoCircleOutlined />
+        </a-popover>
+      </div>
 
       <!-- 包数据表过滤 -->
       <a-input-group compact>
-        <a-auto-complete
+        <a-input
           v-model:value="state.filter"
-          :options="[
-            { 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)"
+          placeholder="display filter, example: tcp"
           :allow-clear="true"
+          style="width: calc(100% - 100px)"
+          @pressEnter="handleFilterFrames"
         >
-          <a-input
-            placeholder="display filter, example: tcp"
-            @pressEnter="handleFilterFrames"
-          >
-            <template #prefix>
-              <FilterOutlined />
-            </template>
-          </a-input>
-        </a-auto-complete>
+          <template #prefix>
+            <FilterOutlined />
+          </template>
+        </a-input>
         <a-button
           type="primary"
           html-type="submit"
@@ -178,18 +143,14 @@ function fnUpload(up: UploadRequestOption) {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row
-        :gutter="16"
-        style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
-        v-show="state.selectedFrame > 0"
-      >
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTree"
-            :selected="state.selectedTree"
-            :tree="state.packetFrame.tree"
+            :select="handleSelectedTreeEntry"
+            :selected="state.selectedTreeEntry"
+            :tree="state.selectedPacket.tree"
           />
         </a-col>
         <a-col :lg="12" :md="12" :xs="24" class="dump">
@@ -202,15 +163,15 @@ function fnUpload(up: UploadRequestOption) {
             <a-tab-pane
               :key="idx"
               :tab="v.name"
-              v-for="(v, idx) in state.packetFrame.data_sources"
+              v-for="(v, idx) in state.selectedPacket.data_sources"
               style="overflow: auto"
             >
               <DissectionDump
                 :base64="v.data"
                 :select="(pos:number)=>handleSelectedFindSelection(idx, pos)"
                 :selected="
-                  idx === state.selectedTree.idx
-                    ? state.selectedTree
+                  idx === state.selectedTreeEntry.idx
+                    ? state.selectedTreeEntry
                     : NO_SELECTION
                 "
               />
@@ -223,6 +184,17 @@ 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, toRaw } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref } 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 { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
-import * as wkUtil from '@/plugins/wk-worker';
-import * as wsUtil from '@/plugins/ws-websocket';
+import { filePullTask } from '@/api/trace/task';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
 import saveAs from 'file-saver';
 import {
@@ -19,20 +19,34 @@ import {
   packetStop,
   packetFilter,
   packetKeep,
-  packetPCAPFile,
 } from '@/api/trace/packet';
-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 ws = new WS();
 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;
   /**当前选中的帧数据 */
@@ -43,19 +57,63 @@ type StateType = {
   selectedTree: typeof NO_SELECTION;
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: number;
+
+  /**包总数 */
+  totalPackets: number;
+  /**包数据 */
+  packetList: any[];
 };
 
 const state = reactive<StateType>({
+  devices: [],
   initialized: false,
-  selectedFrame: 0,
+  keepTimer: null,
+  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();
@@ -78,9 +136,15 @@ 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;
@@ -102,274 +166,83 @@ function handleSelectedFindSelection(src_idx: number, pos: number) {
     state.selectedTree = state.packetFrameTreeMap.get(current);
   }
 }
-/**帧数据点击选中 */
-function handleSelectedTree(e: any) {
-  state.selectedTree = e;
+
+/**包数据表点击选中 */
+function handleSelectedFrame(num: number) {
+  console.log('fnSelectedFrame', num, state.totalPackets);
+  const packet = state.packetList.find((v: any) => v.number === num);
+  if (!packet) return;
+  const packetFrame = packet.frame;
+  state.selectedFrame = packet.number;
+  state.packetFrame = packetFrame;
+  state.packetFrameTreeMap = parseFrameTree('root', packetFrame);
+  state.selectedTree = NO_SELECTION;
+  state.selectedDataSourceIndex = 0;
 }
-
-/**接收数据后回调 */
-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;
-      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;
-  }
+/**包数据表滚动底部加载 */
+function handleScrollBottom(index: any) {
+  console.log('handleScrollBottom', index);
 }
-/**建立WK连接 */
-function fnWK() {
-  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() {
-  if (taskState.keepTimer) return;
-  taskState.keepTimer = true;
-  const hide = message.loading(t('common.loading'), 0);
-  // taskState.task.taskNo = 'laYlTbq';
-  taskState.task.taskNo = Number(Date.now()).toString(16);
-  taskState.task.filter = taskState.filter;
-  packetStart(toRaw(taskState.task))
-    .then(res => {
-      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() {
-  if (typeof taskState.keepTimer !== 'number') return;
-  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();
-      clearInterval(taskState.keepTimer);
-      taskState.keepTimer = null;
-
-      taskState.filter = '';
-      taskState.filterError = null;
-
-      taskState.stop = true;
-    })
-    .finally(() => {
-      hide();
-    });
-}
-
-/**跟踪数据表过滤 */
-function handleFilterFrames() {
-  packetFilter(taskState.task.taskNo, taskState.filter).then(res => {
+  // state.task.taskNo = 'laYlTbq';
+  state.task.taskNo = Number(Date.now()).toString(16);
+  state.task.outputPCAP = false;
+  packetStart(state.task).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      taskState.task.filter = taskState.filter;
-      taskState.filterError = null;
+      fnReset();
+      fnWS();
     } else {
-      taskState.filterError = res.msg;
+      message.error(t('common.operateErr'), 3);
     }
   });
 }
 
-/**选择网卡 */
+/**停止跟踪 */
+function fnStop() {
+  packetStop(state.task.taskNo).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      ws.close();
+      state.initialized = false;
+      state.filter = '';
+      state.filterError = null;
+    } else {
+      message.warning(res.msg, 3);
+    }
+  });
+}
+
+/**跟踪数据表过滤 */
+function handleFilterFrames() {
+  packetFilter(state.task.taskNo, state.filter).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      state.task.filter = state.filter;
+    } else {
+      state.filterError = res.msg;
+    }
+  });
+}
+
+/**开始跟踪 */
 function fnDevice(v: string) {
-  taskState.task.device = v;
+  state.task.device = v;
 }
 
 /**下载触发等待 */
 let downLoading = ref<boolean>(false);
+
 /**信息文件下载 */
 function fnDownloadPCAP() {
   if (downLoading.value) return;
-  const fileName = `packet_${taskState.task.taskNo}.pcap`;
+  const fileName = `trace_packet_${state.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);
-      packetPCAPFile(taskState.task.taskNo)
+      filePullTask(state.task.taskNo)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -394,203 +267,90 @@ function fnDownloadPCAP() {
   });
 }
 
-// =========== 表格数据 ==============
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**记录数据 */
-  data: Record<string, any>[];
-  /**总记录数 */
-  total: number;
-  /**选择帧编号 */
-  selectedNumber: number;
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  data: [],
-  total: 0,
-  selectedNumber: 0,
-});
-
-/**表格字段列 */
-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;
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
     return;
   }
-  tableState.selectedNumber = row.number;
-  const blob = generatePCAP(row.time / 1e3, row.data);
-  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);
+
+  // 建联时发送请求
+  if (!requestId && data.clientId) {
+    state.initialized = true;
+    state.keepTimer = setInterval(() => {
+      packetKeep(state.task.taskNo, 120);
+    }, 90 * 1000);
+    return;
   }
 
-  // 2. 创建PCAP文件头
-  const fileHeader = new Uint8Array([
-    0xd4,
-    0xc3,
-    0xb2,
-    0xa1, // magic_number (微秒级)
-    0x02,
-    0x00, // version_major (2)
-    0x04,
-    0x00, // version_minor (4)
-    0x00,
-    0x00,
-    0x00,
-    0x00, // thiszone (UTC)
-    0x00,
-    0x00,
-    0x00,
-    0x00, // sigfigs (固定0)
-    0xff,
-    0xff,
-    0x00,
-    0x00, // snaplen (最大捕获长度)
-    0x01,
-    0x00,
-    0x00,
-    0x00, // network (LINKTYPE_ETHERNET)
-  ]);
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+  if (data.groupId === `4_${state.task.taskNo}`) {
+    const packetData = data.data;
+    state.totalPackets = packetData.number;
+    state.packetList.push(packetData);
+  }
+}
 
-  // 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' });
+/**建立WS连接 */
+function fnWS() {
+  const options: OptionsType = {
+    url: '/ws',
+    params: {
+      /**订阅通道组
+       *
+       * 信令跟踪Packet (GroupID:4_taskNo)
+       */
+      subGroupID: `4_${state.task.taskNo}`,
+    },
+    onmessage: wsMessage,
+    onerror: (ev: any) => {
+      // 接收数据后回调
+      console.error(ev);
+    },
+  };
+  //建立连接
+  ws.connect(options);
 }
 
 onMounted(() => {
   packetDevices().then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      taskState.devices = res.data;
+      state.devices = res.data;
       if (res.data.length === 0) return;
-      taskState.task.device = res.data[0].id;
+      state.task.device = res.data[0].id;
     }
   });
-  fnWK();
 });
 
 onBeforeUnmount(() => {
-  clearInterval(taskState.keepTimer);
-  wk.send({ type: 'close' }) && wk.close();
-  if (ws.state() <= WebSocket.OPEN) ws.close();
+  clearInterval(state.keepTimer);
+  state.keepTimer = null;
+  if (ws.state() === WebSocket.OPEN) ws.close();
 });
 </script>
 
 <template>
   <PageContainer>
     <a-card :bordered="false" :body-style="{ padding: '12px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="end">
+      <div class="toolbar">
+        <a-space :size="8" class="toolbar-oper">
           <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="[taskState.task.device]"
+                :selectedKeys="[state.task.device]"
               >
-                <a-menu-item v-for="v in taskState.devices" :key="v.id">
+                <a-menu-item v-for="v in state.devices" :key="v.id">
                   <a-popover placement="rightTop" trigger="hover">
                     <template #content>
                       <div v-for="c in v.children">{{ c.id }}</div>
@@ -606,130 +366,79 @@ onBeforeUnmount(() => {
             <template #icon><DownOutlined /></template>
           </a-dropdown-button>
 
-          <a-button
-            danger
-            @click.prevent="fnStop()"
-            :disabled="taskState.stop || taskState.task.taskNo === ''"
-          >
+          <a-button danger @click.prevent="fnStop()" v-if="state.initialized">
             <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="taskState.stop && taskState.stopOutputPCAP"
+            v-if="state.task.outputPCAP"
           >
             <template #icon><DownloadOutlined /></template>
             {{ t('common.downloadText') }}
           </a-button>
-          <span>
-            Packets:
-            <strong>{{ tableState.total }}</strong>
-          </span>
-          <span>
-            Task No:
-            <strong>{{ taskState.task.taskNo }}</strong>
-          </span>
+          <a-tag
+            color="green"
+            v-show="!!state.task.filter && state.initialized"
+          >
+            {{ state.task.filter }}
+          </a-tag>
         </a-space>
-      </template>
+
+        <a-space :size="8" class="toolbar-info" v-show="state.initialized">
+          <span>
+            {{ t('views.traceManage.task.traceId') }}:&nbsp;
+            <strong>{{ state.task.taskNo }}</strong>
+          </span>
+          <span> Packets: {{ state.totalPackets }} </span>
+        </a-space>
+      </div>
 
       <!-- 包数据表过滤 -->
-      <a-input-group compact>
-        <a-auto-complete
-          v-model:value="taskState.filter"
-          :options="[
-            { 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)"
+      <a-input-group compact v-show="state.initialized">
+        <a-input
+          v-model:value="state.filter"
+          placeholder="display filter, example: tcp"
           :allow-clear="true"
+          style="width: calc(100% - 100px)"
+          @pressEnter="handleFilterFrames"
         >
-          <a-input
-            placeholder="BPF Basic Filter, example: tcp"
-            @pressEnter="handleFilterFrames"
-          >
-            <template #prefix>
-              <FilterOutlined />
-            </template>
-          </a-input>
-        </a-auto-complete>
+          <template #prefix>
+            <FilterOutlined />
+          </template>
+        </a-input>
         <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="taskState.filterError"
+        :message="state.filterError"
         type="error"
-        v-if="taskState.filterError != null"
+        v-if="state.filterError != null"
       />
 
       <!-- 包数据表 -->
-      <a-table
-        class="table"
-        row-key="number"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        size="small"
-        :pagination="false"
-        :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"
-      >
+      <PacketTable
+        :columns="state.columns"
+        :data="state.packetList"
+        :selectedFrame="state.selectedFrame"
+        :onSelectedFrame="handleSelectedFrame"
+        :onScrollBottom="handleScrollBottom"
+      ></PacketTable>
+
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTree"
+            :select="handleSelectedTreeEntry"
             :selected="state.selectedTree"
             :tree="state.packetFrame.tree"
           />
@@ -765,6 +474,28 @@ 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;

vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig(({ mode }) => {
         // https://cn.vitejs.dev/config/#server-proxy
         [env.VITE_API_BASE_URL]: {
           // target: 'http://192.168.2.166:33030',
-          target: 'http://192.168.5.58:33040',
+          target: 'http://192.168.2.223:43030',
           changeOrigin: true,
           rewrite: p => p.replace(env.VITE_API_BASE_URL, ''),
         },