取消隐藏分页

.env.development

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
 VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.250208"
+VITE_APP_VERSION = "2.250412"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

.env.production

@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
 VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.250208"
+VITE_APP_VERSION = "2.250412"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

public/default/config.js

@@ -1,6 +1,6 @@
 /**
  * =============== Configuration File Description ===============
- * 
+ *
  * - Nginx Deployment
  * Delete the file with the same name under the same level of loading.js, Nginx proxy address: /omc-api
  *
@@ -10,12 +10,19 @@
  *
  */
 (function () {
-  // host = ip:port
+  // baseUrl = protocol://ip:port
-  // const host = '192.168.8.100:33030';
+  // baseUrl = 'http://192.168.8.100:33030';
-  const host = `${window.location.hostname}:33030`;
+  const protocol = window.location.protocol
-  
+  let wsprotocol = "ws:"
+  const hostname = window.location.hostname
+  let host = `${hostname}:33030`;
+  if (protocol === 'https:') {
+    host = `${hostname}:33443`;
+    wsprotocol = "wss:"
+  }
+
   // Service Address
-  sessionStorage.setItem('baseUrl', `http://${host}`);
+  sessionStorage.setItem('baseUrl', `${protocol}//${host}`);
   // websocket Address
-  sessionStorage.setItem('wsUrl', `ws://${host}`);
+  sessionStorage.setItem('wsUrl', `${wsprotocol}//${host}`);
 })();

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/faultManage/actAlarm.ts

@@ -1,7 +1,7 @@
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
 import { parseObjLineToHump } from '@/utils/parse-utils';
-import { parseDateToStr } from '@/utils/date-utils';
+import { parseDateToStr, YYYY_MM_DD_HH_MM_SS } from '@/utils/date-utils';
 import useUserStore from '@/store/modules/user';
 
 /**
@@ -122,7 +122,7 @@ export function updateConfirm(data: Record<string, any>) {
   const userName = useUserStore().userName;
   let finalData = {
     alarm: {
-      ack_time: parseDateToStr(time),
+      ack_time: parseDateToStr(time, YYYY_MM_DD_HH_MM_SS),
       ack_user: userName,
       ack_state: '1',
     },
@@ -145,7 +145,7 @@ export function cancelConfirm(data: (string | number)[]) {
   const userName = useUserStore().userName;
   let finalData = {
     alarm: {
-      ack_time: parseDateToStr(time),
+      ack_time: parseDateToStr(time, YYYY_MM_DD_HH_MM_SS),
       ack_user: '',
       ack_state: '0',
     },
@@ -216,7 +216,7 @@ export function clearAlarm(data: Record<string, any>) {
   const userName = useUserStore().userName;
   let finalData = {
     data: {
-      clear_time: parseDateToStr(time),
+      clear_time: parseDateToStr(time, YYYY_MM_DD_HH_MM_SS),
       clear_type: '2',
       alarm_status: '0',
       clear_user: userName,

src/api/faultManage/eventAlarm.ts

@@ -1,8 +1,6 @@
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
 import { parseObjLineToHump } from '@/utils/parse-utils';
-import { parseDateToStr } from '@/utils/date-utils';
-import useUserStore from '@/store/modules/user';
 
 /**
  * 查询列表

src/api/faultManage/historyAlarm.ts

@@ -1,7 +1,7 @@
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
 import { parseObjLineToHump } from '@/utils/parse-utils';
-import { parseDateToStr } from '@/utils/date-utils';
+import { parseDateToStr, YYYY_MM_DD_HH_MM_SS } from '@/utils/date-utils';
 import useUserStore from '@/store/modules/user';
 
 /**
@@ -79,7 +79,7 @@ export function updateConfirm(data: Record<string, any>) {
   const userName = useUserStore().userName;
   let finalData = {
     alarm: {
-      ack_time: parseDateToStr(time),
+      ack_time: parseDateToStr(time, YYYY_MM_DD_HH_MM_SS),
       ack_user: userName,
       ack_state: '1',
     },
@@ -101,7 +101,7 @@ export function cancelConfirm(data: (string | number)[]) {
   var time = new Date();
   let finalData = {
     alarm: {
-      ack_time: parseDateToStr(time),
+      ack_time: parseDateToStr(time, YYYY_MM_DD_HH_MM_SS),
       ack_user: '',
       ack_state: '0',
     },

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/neUser/exportFile.ts

@@ -0,0 +1,51 @@
+import { CACHE_SESSION_CRYPTO_API } from '@/constants/cache-keys-constants';
+import { sessionGet } from '@/utils/cache-session-utils';
+import { request } from '@/plugins/http-fetch';
+/**
+ * 获取下拉框数据
+ * @returns object
+ */
+export function getBakFile() {
+  return request({
+    url: '/ue/table/list',
+    method: 'get',
+  });
+}
+/**
+ * 获取对应类型的文件列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function getBakFileList(query: Record<string, any>) {
+  return request({
+    url: '/ue/file/list',
+    method: 'get',
+    params: query,
+  });
+}
+/**
+ * 下载远端文件
+ * @param query 查询参数
+ * @returns object
+ */
+export function downFile(query: Record<string, any>) {
+  return request({
+    url: `/ue/file/${query.fileName}`,
+    method: 'get',
+    params: query,
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+/**
+ * 删除远端获取文件
+ * @param query 查询参数
+ * @returns object
+ */
+export function delFile(query: Record<string, any>) {
+  return request({
+    url: `/ue/file/${query.fileName}`,
+    method: 'delete',
+    params: query,
+  });
+}

src/api/perfManage/customTarget.ts

@@ -1,7 +1,4 @@
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
-import { parseObjLineToHump } from '@/utils/parse-utils';
-import { parseDateToStr } from '@/utils/date-utils';
 
 /**
  * 查询自定义指标

src/api/perfManage/perfThreshold.ts

@@ -1,7 +1,6 @@
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
 import { parseObjLineToHump } from '@/utils/parse-utils';
-import { parseDateToStr } from '@/utils/date-utils';
 
 /**
  * 查询任务列表

src/api/tool/neFile.ts

@@ -24,7 +24,7 @@ export function getNeFile(query: Record<string, any>) {
     method: 'get',
     params: query,
     responseType: 'blob',
-    timeout: 180_000,
+    timeout: 600_000,
   });
 }
 
@@ -35,7 +35,7 @@ export function getNeDirZip(data: Record<string, any>) {
     method: 'get',
     params: data,
     responseType: 'blob',
-    timeout: 60_000,
+    timeout: 600_000,
   });
 }
 

src/api/trace/task.ts

@@ -76,7 +76,7 @@ export function filePullTask(traceId: string) {
     method: 'get',
     params: { traceId },
     responseType: 'blob',
-    timeout: 60_000,
+    timeout: 600_000,
   });
 }
 

src/api/trace/taskHLR.ts

@@ -78,6 +78,6 @@ export function filePullTaskHLR(query: Record<string, any>) {
     method: 'get',
     params: query,
     responseType: 'blob',
-    timeout: 60_000,
+    timeout: 600_000,
   });
 }

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',
+  'MF',
-  'HLR',
+  'IMS',
-  'SGWC',
+  'SMSC',
 ];
 
 /**

src/i18n/locales/en-US.ts

@@ -350,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',
@@ -433,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",
@@ -607,6 +714,7 @@ export default {
         upgradeDone: 'Update complete, service being reloaded',
         upgradeFail: 'The update fails, please check whether the software file exists and whether the service terminal environment is available!',
         upgradeModal: 'Network Element Version Updates',
+        noPath: 'Package File Not Found',
       },
       neLicense: {
         status: "License Status",
@@ -693,7 +801,7 @@ export default {
         installSourceUpload: 'New Upload',
         installSelect: 'Select Record',
         installUpload: 'Upload File',
-        installText: 'Installed',
+        installText: 'Install',
         licenseTitle: "Licenses",
         licenseDesc: "Network element service authorization certification",
         licenseResultTitle: "Whether to authorize activation immediately",
@@ -964,6 +1072,7 @@ export default {
         expressionModal:'Expression Modal',
         expressionErrorTip:'Please check the expression, the wrong indicator is {kpiId}',
         expressionNoIdTip:'Please check the expression, no valid indicator is found',
+        unitSelect:'To better display the image, the same unit needs to be selected. The current unit is:',
       },
       kpiKeyTarget:{
         "time":"Time",
@@ -1200,12 +1309,13 @@ export default {
         size: "Size",
         modifiedTime: "Modified Time",
         fileName: "File Name",
+        downTipZip: "Confirm downloading the directory [{fileName}] as a ZIP file?",
         downTip: "Confirm the download file name is [{fileName}] File?",
         downTipErr: "Failed to get file",
         dirCd: "Enter Dir",
         viewAs: 'View Action',
         reload: "Reload",
-        follow: 'Monitoring Content',
+        follow: 'Enable Instant Update',
         tailChar: 'End Characters',
         tailLines: 'End Lines',
       },

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: '中文',
@@ -350,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:'用户信息',
@@ -433,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: "事件类型",
@@ -607,6 +718,7 @@ export default {
         upgradeDone: '更新完成，服务正在重载',
         upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
         upgradeModal: '网元版本更新',
+        noPath: '软件包文件未发现',
       },
       neLicense: {
         status: "许可证状态",
@@ -964,6 +1076,7 @@ export default {
         expressionModal:'表达式模块',
         expressionErrorTip:'请检查表达式,错误的指标为{kpiId}',
         expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
+        unitSelect:'为更好展示图需选择相同单位,当前单位为:',
       },
       kpiKeyTarget:{
         "time":"时间",
@@ -1200,6 +1313,7 @@ export default {
         size: "文件大小",
         modifiedTime: "修改时间",
         fileName: "文件名称",
+        downTipZip: "确认将目录 【{fileName}】 下载为ZIP文件?",
         downTip: "确认下载文件名为 【{fileName}】 文件?",
         downTipErr: "文件获取失败",
         dirCd: "进入目录",

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');
+const menuData = computed(() => {
-if (rootRoute) {
+  const rootRoute = router.getRoutes().find(r => r.name === 'Root');
-  const children = routerStore.setRootRouterData(rootRoute.children);
+  if (rootRoute) {
-  const buildRouterData = routerStore.buildRouterData;
+    const children = routerStore.setRootRouterData(rootRoute.children);
-  if (buildRouterData.length > 0) {
+    const buildRouterData = routerStore.buildRouterData;
-    rootRoute.children = children.concat(buildRouterData);
+    if (buildRouterData.length > 0) {
-  } else {
+      rootRoute.children = children.concat(buildRouterData);
-    rootRoute.children = children;
+    } else {
+      rootRoute.children = children;
+    }
   }
-}
+  const neTypes = neListStore.getNeSelectOtions.map(v => v.value);
-
+  let routes = clearMenuItem(router.getRoutes());
-const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
+  routes = routerStore.clearMenuItemByNeList(routes, neTypes);
+  const { menuData } = getMenuData(routes);
+  return menuData;
+});
 
 /**面包屑数据对象，排除根节点和首页不显示 */
 const breadcrumb = computed(() => {

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已完成
+        } catch (error) {
-          next({ ...to, replace: true });
+          console.error('Route guard error:', error);
-        } catch (error: any) {
+          next(`/login?redirect=${to.fullPath}`);
-          console.error(`[${to.path}]: ${error.message}`);
+        }
-          await user.fnLogOut();
+      } else if (
-          next({ name: 'Login' });
+        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/neinfo.ts

@@ -109,6 +109,32 @@ const useNeInfoStore = defineStore('neinfo', {
       }
       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

@@ -20,6 +20,9 @@ export const YYYYMMDDHHMMSS = 'YYYYMMDDHHmmss';
 /**年-月-日 时:分:秒 列如：2022-12-30 01:01:59 */
 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-DD HH:mm:ssZZ';
+
 /**
  * 格式时间字符串
  * @param dateStr 时间字符串
@@ -36,12 +39,12 @@ export function parseStrToDate(
 /**
  * 格式时间
  * @param date 可转的Date对象
- * @param formatStr 时间格式 默认YYYY-MM-DD HH:mm:ss
+ * @param formatStr 时间格式 默认YYYY-MM-DD HH:mm:ssZZ
  * @returns 时间格式字符串
  */
 export function parseDateToStr(
   date: string | number | Date,
-  formatStr: string = YYYY_MM_DD_HH_MM_SS
+  formatStr: string = YYYY_MM_DD_HH_MM_SSZ
 ): string {
   return dayjs(date).format(formatStr);
 }

src/utils/parse-utils.ts

@@ -192,17 +192,31 @@ export function parseSizeFromBits(bits: number | string): string {
 /**
  * 字节数转换单位
  * @param byte 字节Byte大小 64009540 = 512.08 MB
+ * @param unit 指定单位 B / KB / MB / GB / TB / PB / EB / ZB / YB
  * @returns xx B / KB / MB / GB / TB / PB / EB / ZB / YB
  */
-export function parseSizeFromByte(byte: number | string): string {
+export function parseSizeFromByte(
+  byte: number | string,
+  unit?: string
+): string {
   byte = Number(byte) || 0;
   if (byte <= 0) return '0 B';
   const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-  const unitIndex = Math.floor(Math.log2(byte) / 10);
+  let unitIndex = 0;
-  const unti = units[unitIndex];
+  let unitStr = 'B';
+  if (unit) {
+    const index = units.indexOf(unit);
+    if (index > -1) {
+      unitIndex = index;
+      unitStr = unit;
+    }
+  } else {
+    unitIndex = Math.floor(Math.log2(byte) / 10);
+    unitStr = units[unitIndex];
+  }
   const value = byte / Math.pow(1000, unitIndex);
   if (unitIndex > 0) {
-    return `${value.toFixed(2)} ${unti}`;
+    return `${value.toFixed(2)} ${unitStr}`;
   }
-  return `${value} ${unti}`;
+  return `${value} ${unitStr}`;
 }

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/imsCDR/index.vue

@@ -22,6 +22,7 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
 import saveAs from 'file-saver';
 import PQueue from 'p-queue';
 import { useClipboard } from '@vueuse/core';
+import dayjs, { type Dayjs } from 'dayjs';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const { getDict } = useDictStore();
@@ -43,7 +44,25 @@ let dict: {
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -56,9 +75,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -72,12 +91,12 @@ function fnQueryReset() {
     recordType: '',
     callerParty: '',
     calledParty: '',
-    startTime: '',
+    startTime: undefined,
-    endTime: '',
+    endTime: undefined,
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -328,11 +347,17 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
+  // 时间范围
-    queryRangePicker.value = ['', ''];
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
   listIMSDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -595,12 +620,12 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                allow-clear
+                :presets="rangePickerPresets"
-                bordered
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
                 :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>

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/css/index.css

@@ -16,6 +16,8 @@
 .column {
   flex: 3;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 边框 */
@@ -86,6 +88,7 @@
 .topology {
   /* min-height: 27.8rem; */
   height: 56.4%;
+  flex: 1;
 }
 .topology .inner h3 {
   display: flex;
@@ -179,6 +182,7 @@
 .userActivity {
   /* min-height: 35.8rem; */
   height: 54.6%;
+  flex: 1;
 }
 .userActivity .inner .chart {
   width: 100%;
@@ -259,6 +263,7 @@
 .alarmType {
   /* min-height: 25rem; */
   height: 46%;
+  flex: 1;
 }
 .alarmType .inner .chart {
   width: 100%;

src/views/dashboard/overview/hooks/useUPFTotalFlow.ts

@@ -36,11 +36,6 @@ export function upfFlowParse(data: Record<string, string>) {
     upfFlowData.value.lineYDown.shift();
     upfFlowData.value.cap -= 1;
   }
-  // UPF-总流量数0天 当天24小时
-  upfTFParse('0', {
-    up: upfTotalFlow.value['0'].up + +data['UPF.03'],
-    down: upfTotalFlow.value['0'].down + +data['UPF.06'],
-  });
 }
 
 type TFType = {

src/views/dashboard/overview/hooks/useWS.ts

@@ -83,25 +83,25 @@ export default function useWS() {
     }
     switch (data.groupId) {
       // kpiEvent 指标UPF
-      case '12_' + upfWhoId.value:
+      case '10_UPF_' + upfWhoId.value:
         if (data.data) {
           upfFlowParse(data.data);
         }
         break;
       // AMF_UE会话事件
-      case '1010':
+      case '1010_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('amf_ue', data.data));
         }
         break;
       // MME_UE会话事件
-      case '1011':
+      case '1011_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('mme_ue', data.data));
         }
         break;
       // IMS_CDR会话事件
-      case '1005':
+      case '1005_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
         }
@@ -172,13 +172,13 @@ export default function useWS() {
     });
   }
 
-  /**重新发送至UPF 12_neId */
+  /**重新发送至UPF 10_UPF_neId */
   function reSendUPF(neId: string) {
     upfWhoId.value = neId;
     //初始时时无需还原全部属性以及关闭
     if (ws.state() === WebSocket.OPEN) {
       ws.close();
-      userActivityReset();
+      // userActivityReset();
       upfTotalFlowReset();
       neStateRequestMap.value = new Map();
       //topologyReset();
@@ -188,12 +188,12 @@ export default function useWS() {
       params: {
         /**订阅通道组
          *
-         * 指标UPF (GroupID:12_neId)
+         * 指标UPF (GroupID:10_neType_neId)
          * AMF_UE会话事件(GroupID:1010_neId)
          * MME_UE会话事件(GroupID:1011_neId)
          * IMS_CDR会话事件(GroupID:1005_neId)
          */
-        subGroupID: '12_' + neId + ',1010,1011,1005',
+        subGroupID: '10_UPF_' + neId + ',1010_001,1011_001,1005_001',
       },
       onmessage: wsMessage,
       onerror: (ev: any) => {

src/views/dashboard/overview/index.vue

@@ -1,634 +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;
-};
 
-/**概览状态信息 */
+import DashboardCards from './components/mfOverview/DashboardCards.vue';
-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);
-
-/**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);
-    }
-  });
-}
-
-/**初始数据函数 */
-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) return;
-    fnGetSkim(); // 获取概览信息
-    fnGetNeState(); // 获取网元状态
-  }, 5_000);
-}
-
-/**栏目信息跳转 */
-function fnToRouter(name: string, query?: any) {
-  router.push({ name, query });
-}
-
-/**网元参数 */
-let neOtions = ref<Record<string, any>[]>([]);
-
-/**UPF网元Id */
-let queryParams = reactive({
-  /**45G类型 */
-  neRealId: '',
-});
-
-// UPF实时流量下拉框选择
-function fnSelectNe(value: any, option: any) {
-  queryParams.neRealId = value;
-  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();
-}
-
-// 定义一个方法返回 views 容器
-const getPopupContainer = () => {
-  // 使用 ref 或其他方式来引用你的 views 容器
-  // 如果 views 容器直接在这个组件内部，你可以使用 ref
-  // 但在这个例子中，我们假设它是通过类名来获取的
-  return document.querySelector('.viewport');
-};
 
 onMounted(() => {
-  neInfoStore
-    .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 === '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]);
-          }
-
-          // 过滤不可用的网元
-          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(() => {
-      fnGetSkim().then(() => {
-        loadData();
-      });
-    });
 });
 
 onBeforeUnmount(() => {
-  clearInterval(interval10s.value);
+
-  interval10s.value = null;
-  clearInterval(interval5s.value);
-  interval5s.value = null;
 });
 </script>
 
 <template>
-  <div class="viewport" ref="viewportDom">
+  <div class="dashboard-page">
-    <div class="brand">
+    <DashboardCards />
-      <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"
-              @click="fnToRouter('Sub_2010')"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
-              <div>
-                <UserOutlined
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
-                {{ skimState.udmSubNum }}
-              </div>
-              <span>
-                {{ t('views.dashboard.overview.skim.users') }}
-              </span>
-            </div>
-            <div
-              class="item toRouter"
-              @click="fnToRouter('Ims_2080')"
-              :title="t('views.dashboard.overview.toRouter')"
-              style="margin: 0 12px"
-            >
-              <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')"
-            >
-              <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">
-        <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('Base5G_2082', { 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('Base5G_2082', { 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">
-        <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('Base5G_2082', { 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('Base5G_2082', { 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="queryParams.neRealId"
-              :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>
 </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;
-}
 </style>

src/views/dashboard/sgwcCDR/index.vue

@@ -20,6 +20,7 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
 import PQueue from 'p-queue';
 import saveAs from 'file-saver';
 import { useClipboard } from '@vueuse/core';
+import dayjs, { type Dayjs } from 'dayjs';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const ws = new WS();
@@ -29,7 +30,25 @@ const queue = new PQueue({ concurrency: 1, autoStart: true });
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -41,9 +60,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -55,12 +74,12 @@ function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     imsi: '',
     msisdn: '',
-    startTime: '',
+    startTime: undefined,
-    endTime: '',
+    endTime: undefined,
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -310,11 +329,17 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
+  // 时间范围
-    queryRangePicker.value = ['', ''];
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
   listSGWCDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -554,12 +579,12 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                allow-clear
+                :presets="rangePickerPresets"
-                bordered
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
                 :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>
@@ -767,14 +792,22 @@ onBeforeUnmount(() => {
                 <span>MSISDN: </span>
                 <span> {{ record.cdrJSON.servedMSISDN }} </span>
               </div>
-              <div>
+              <div v-if="record.cdrJSON.pGWAddressUsed">
-                <span>PGW Address Used: </span>
+                <span>PGW Address: </span>
                 <span> {{ record.cdrJSON.pGWAddressUsed }} </span>
               </div>
-              <div>
+              <div v-if="record.cdrJSON.GGSNAddress">
+                <span>GGSN Address: </span>
+                <span> {{ record.cdrJSON.GGSNAddress }} </span>
+              </div>
+              <div v-if="record.cdrJSON.sGWAddress">
                 <span>SGW Address: </span>
                 <span> {{ record.cdrJSON.sGWAddress }} </span>
               </div>
+              <div v-if="record.cdrJSON.SGSNAddress">
+                <span>SGSN Address: </span>
+                <span> {{ record.cdrJSON.SGSNAddress }} </span>
+              </div>
               <div>
                 <span>RAT Type: </span>
                 <span> {{ record.cdrJSON.rATType }} </span>

src/views/dashboard/smfCDR/index.vue

@@ -21,6 +21,7 @@ import PQueue from 'p-queue';
 import saveAs from 'file-saver';
 import dayjs, { Dayjs } from 'dayjs';
 import { useClipboard } from '@vueuse/core';
+import { parseSizeFromByte } from '@/utils/parse-utils';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const ws = new WS();
@@ -164,7 +165,7 @@ let tableColumns = ref<ColumnsType>([
           }
         }
       }
-      return dataVolumeUplink;
+      return parseSizeFromByte(dataVolumeUplink, 'MB');
     },
   },
   {
@@ -189,7 +190,7 @@ let tableColumns = ref<ColumnsType>([
           }
         }
       }
-      return dataVolumeDownlink;
+      return parseSizeFromByte(dataVolumeDownlink, 'MB');
     },
   },
   {
@@ -214,7 +215,7 @@ let tableColumns = ref<ColumnsType>([
           }
         }
       }
-      return dataTotalVolume;
+      return parseSizeFromByte(dataTotalVolume, 'MB');
     },
   },
   {

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -69,8 +69,8 @@ const option = {
       } else {
         downlinkValue = params[1].value;
       }
-      const uplinkValueF = parseSizeFromByte(uplinkValue);
+      const uplinkValueF = parseSizeFromByte(uplinkValue, 'MB');
-      const downlinkValueF = parseSizeFromByte(downlinkValue);
+      const downlinkValueF = parseSizeFromByte(downlinkValue, 'MB');
       return `
       <div style="font-weight: bold;">${title}</div>
       <div>Downlink: ${downlinkValueF}</div>
@@ -229,7 +229,7 @@ function fnRanderChart() {
 
   // 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
   var observer = new ResizeObserver(entries => {
-    if (cdrChart) {
+    if (cdrChart && !cdrChart.isDisposed) {
       cdrChart.resize();
     }
   });
@@ -295,6 +295,8 @@ let state = reactive({
   total: 0,
   /**表格加载状态 */
   loading: false,
+  /**数据总量 up,down */
+  dataUsage: ['0 B', '0 B'],
 });
 
 /**查询列表, pageNum初始页数 */
@@ -455,6 +457,18 @@ function fnRanderChartDataUpdate() {
     ],
   });
   cdrChart.hideLoading();
+
+  // 累加总量
+  let uplinkTotal = 0;
+  let downlinkTotal = 0;
+  for (let index = 0; index < dataVolumeUplinkYSeriesData.length; index++) {
+    uplinkTotal += dataVolumeUplinkYSeriesData[index];
+    downlinkTotal += dataVolumeDownlinkYSeriesData[index];
+  }
+  state.dataUsage = [
+    parseSizeFromByte(uplinkTotal, 'MB'),
+    parseSizeFromByte(downlinkTotal, 'MB'),
+  ];
 }
 
 /**
@@ -549,9 +563,9 @@ onMounted(() => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
         if (res.data.length > 0) {
           let arr: Record<string, any>[] = [];
-          res.data.forEach(i => {
+          res.data.forEach((v: any) => {
-            if (i.neType === 'SMF') {
+            if (v.neType === 'SMF') {
-              arr.push({ value: i.neId, label: i.neName });
+              arr.push({ value: v.neId, label: v.neName });
             }
           });
           neOtions.value = arr;
@@ -669,6 +683,15 @@ onBeforeUnmount(() => {
     <a-card :bordered="false">
       <!-- 图数据 -->
       <div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
+
+      <a-descriptions title="Data Usage" bordered :column="2">
+        <a-descriptions-item label="Total Uplink">
+          {{ state.dataUsage[0] }}
+        </a-descriptions-item>
+        <a-descriptions-item label="Total Downlink">
+          {{ state.dataUsage[1] }}
+        </a-descriptions-item>
+      </a-descriptions>
     </a-card>
   </PageContainer>
 </template>

src/views/dashboard/smscCDR/index.vue

@@ -23,6 +23,7 @@ import saveAs from 'file-saver';
 import PQueue from 'p-queue';
 import { useClipboard } from '@vueuse/core';
 import { hasPermissions } from '@/plugins/auth-user';
+import dayjs, { type Dayjs } from 'dayjs';
 const { copy } = useClipboard({ legacy: true });
 const { getDict } = useDictStore();
 const { t } = useI18n();
@@ -41,7 +42,25 @@ let dict: {
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -54,9 +73,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -70,12 +89,12 @@ function fnQueryReset() {
     recordType: '',
     callerParty: '',
     calledParty: '',
-    startTime: '',
+    startTime: undefined,
-    endTime: '',
+    endTime: undefined,
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -304,11 +323,19 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
+
-    queryRangePicker.value = ['', ''];
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
+
-  queryParams.endTime = queryRangePicker.value[1];
   listSMSCDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -566,12 +593,12 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                allow-clear
+                :presets="rangePickerPresets"
-                bordered
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
                 :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>

src/views/faultManage/active-alarm/index.vue

@@ -145,66 +145,54 @@ let alarmTableState: TabeStateType = reactive({
 let tableColumns: ColumnsType = [
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
-    align: 'center',
+    align: 'left',
     key: 'origSeverity',
     dataIndex: 'origSeverity',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
     align: 'left',
-    width: 5,
+    width: 200,
   },
   {
     title: t('views.faultManage.activeAlarm.neType'),
     dataIndex: 'neType',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.eventTime'),
     dataIndex: 'eventTime',
-    align: 'center',
+    align: 'left',
     sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmCode'),
     dataIndex: 'alarmCode',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
     dataIndex: 'alarmType',
     key: 'alarmType',
     align: 'left',
-    width: 5,
+    width: 120,
   },
   {
     title: t('views.faultManage.activeAlarm.neName'),
     dataIndex: 'neName',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.neId'),
     dataIndex: 'neId',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.pvFlag'),
-    dataIndex: 'pvFlag',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.alarmId'),
-    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
   },
 
   {
@@ -212,20 +200,20 @@ let tableColumns: ColumnsType = [
     dataIndex: 'ackState',
     key: 'ackState',
     align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.ackUser'),
     dataIndex: 'ackUser',
     align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('common.operate'),
     key: 'alarm_id',
-    align: 'center',
+    align: 'left',
     fixed: 'right',
-    width: 5,
+    width: 100,
   },
 ];
 
@@ -1022,12 +1010,12 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :row-selection="{
-          columnWidth: 2,
+          columnWidth: 48,
           selectedRowKeys: state.selectedRowKeys,
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: 2500, y: 400 }"
+        :scroll="{ x: tableColumns.length * 150, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -1212,15 +1200,7 @@ onMounted(() => {
             >
               {{ modalState.from.alarmType }}
             </a-form-item>
-          </a-col>
+          </a-col> 
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.pvFlag')"
-              name="pvFlag"
-            >
-              {{ modalState.from.pvFlag }}
-            </a-form-item>
-          </a-col>
         </a-row>
 
         <a-form-item
@@ -1230,18 +1210,8 @@ onMounted(() => {
         >
           {{ modalState.from.locationInfo }}
         </a-form-item>
-
+ 
-        <a-row> </a-row>
-
         <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.province')"
-              name="province"
-            >
-              {{ modalState.from.province }}
-            </a-form-item>
-          </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1290,7 +1260,7 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackState')"
               name="ackState"
             >
-              {{ modalState.from.ackState }}
+            <DictTag :options="dict.activeAckState" :value="modalState.from.ackState" />
             </a-form-item>
           </a-col>
         </a-row>

src/views/faultManage/event/index.vue

@@ -118,61 +118,47 @@ let tableState: TabeStateType = reactive({
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
-  {
-    title: t('views.faultManage.activeAlarm.alarmId'),
-    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
-  },
   {
     title: t('views.faultManage.activeAlarm.neId'),
     dataIndex: 'neId',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.neName'),
     dataIndex: 'neName',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.neType'),
     dataIndex: 'neType',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmCode'),
     dataIndex: 'alarmCode',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
     align: 'left',
-    width: 5,
+    width: 200,
   },
   {
     title: t('views.faultManage.activeAlarm.eventTime'),
     dataIndex: 'eventTime',
-    align: 'center',
     sorter: (a: any, b: any) => 1,
-    width: 5,
+    align: 'left',
-  },
+    width: 200,
-  {
-    title: t('views.faultManage.activeAlarm.pvFlag'),
-    dataIndex: 'pvFlag',
-    align: 'center',
-    width: 5,
   },
   {
     title: t('common.operate'),
     key: 'alarm_id',
-    align: 'center',
+    align: 'left',
-    fixed: 'right',
-    width: 5,
   },
 ];
 
@@ -316,7 +302,7 @@ function mapKeysWithReduce(data: any, titleMapping: any) {
       const title = titleMapping[key] || key;
       newItem[title] = item[key];
       return newItem;
-    });
+    }, {});
   });
 }
 
@@ -626,7 +612,7 @@ onMounted(() => {
             </a-dropdown>
           </a-tooltip>
           <TableColumnsDnd
-            cache-id="alarmActive"
+            cache-id="alarmEvent"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>

src/views/faultManage/history-alarm/index.vue

@@ -122,108 +122,96 @@ let tableState: TabeStateType = reactive({
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
-  {
-    title: t('views.faultManage.activeAlarm.alarmId'),
-    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
-  },
   {
     title: t('views.faultManage.activeAlarm.neId'),
     dataIndex: 'neId',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.neName'),
     dataIndex: 'neName',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.neType'),
     dataIndex: 'neType',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
     align: 'left',
     dataIndex: 'origSeverity',
     key: 'origSeverity',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmCode'),
     dataIndex: 'alarmCode',
-    align: 'center',
+    align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
     align: 'left',
-    width: 5,
+    width: 200,
   },
   {
     title: t('views.faultManage.activeAlarm.eventTime'),
     dataIndex: 'eventTime',
-    align: 'center',
+    align: 'left',
     sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
     dataIndex: 'alarmType',
     key: 'alarmType',
     align: 'left',
-    width: 5,
+    width: 120,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.pvFlag'),
-    dataIndex: 'pvFlag',
-    align: 'center',
-    width: 5,
   },
   {
     title: t('views.faultManage.activeAlarm.clearUser'),
     dataIndex: 'clearUser',
     align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.clearType'),
     dataIndex: 'clearType',
     key: 'clearType',
     align: 'left',
-    width: 5,
+    width: 120,
   },
   {
     title: t('views.faultManage.activeAlarm.clearTime'),
     dataIndex: 'clearTime',
     align: 'left',
     sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.ackState'),
     dataIndex: 'ackState',
     key: 'ackState',
     align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.ackUser'),
     dataIndex: 'ackUser',
     align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('common.operate'),
     key: 'alarm_id',
-    align: 'center',
+    align: 'left',
     fixed: 'right',
-    width: 5,
+    width: 120,
   },
 ];
 
@@ -648,7 +636,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -688,22 +676,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16"> 
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.pvFlag')"
-              name="pv_flag"
-            >
-              <a-select
-                v-model:value="queryParams.pv_flag"
-                :placeholder="t('common.selectPlease')"
-                :options="[
-                  { label: 'PNF', value: 'PNF' },
-                  { label: 'VNF', value: 'VNF' },
-                ]"
-              />
-            </a-form-item>
-          </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -804,12 +777,12 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :row-selection="{
-          columnWidth: 3,
+          columnWidth: 48,
           selectedRowKeys: state.selectedRowKeys,
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120, y: 400 }"
+        :scroll="{ x: tableColumns.length * 150, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -863,6 +836,7 @@ onMounted(() => {
       @ok="fnModalOk"
       :ok-text="t('views.faultManage.activeAlarm.confirm')"
       @cancel="fnModalCancel"
+      :footer="null"
     >
       <a-form
         name="modalStateFrom"
@@ -946,15 +920,6 @@ onMounted(() => {
         </a-row>
 
         <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.pvFlag')"
-              name="pvFlag"
-            >
-              {{ modalState.from.pvFlag }}
-            </a-form-item>
-          </a-col>
-
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -973,14 +938,6 @@ onMounted(() => {
           {{ modalState.from.locationInfo }}
         </a-form-item>
         <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.province')"
-              name="province"
-            >
-              {{ modalState.from.province }}
-            </a-form-item>
-          </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1019,7 +976,10 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.clearType')"
               name="clearType"
             >
-              {{ modalState.from.clearType }}
+              <DictTag
+                :options="dict.activeClearType"
+                :value="modalState.from.clearType"
+              />
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
@@ -1046,7 +1006,10 @@ onMounted(() => {
               :label="t('views.faultManage.activeAlarm.ackState')"
               name="ackState"
             >
-              {{ modalState.from.ackState }}
+              <DictTag
+                :options="dict.activeAckState"
+                :value="modalState.from.ackState"
+              />
             </a-form-item>
           </a-col>
         </a-row>

src/views/ne-data/base-station/list.vue

@@ -30,6 +30,8 @@ import {
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import saveAs from 'file-saver';
 import { readSheet, writeSheet } from '@/utils/execl-utils';
+import { useRoute } from 'vue-router';
+const route = useRoute();
 // 异步加载组件
 const HistoryModal = defineAsyncComponent(
   () => import('./components/history.vue')
@@ -666,7 +668,8 @@ onMounted(() => {
           });
           neCascaderOptions.value = arr;
           // 无查询参数neType时 默认选择AMF
-          const item = arr.find(s => s.value === 'AMF');
+          const queryNeType = (route.query.neType as string) || 'AMF';
+          const item = arr.find(s => s.value === queryNeType);
           if (item && item.children) {
             const info = item.children[0];
             neTypeAndId.value = [info.neType, info.neId];

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

@@ -4,20 +4,19 @@ import {
   editNeConfigData,
 } from '@/api/ne/neConfig';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { Modal, message } from 'ant-design-vue/es';
+import { Modal,message } from 'ant-design-vue/es';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { reactive, watch } from 'vue';
 
 /**
  * 参数配置array类型
- * @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
+ * @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
  * @returns
  */
 export default function useConfigArray({
   t,
   treeState,
   neTypeSelect,
-  neIdSelect,
   fnActiveConfigNode,
   ruleVerification,
   modalState,
@@ -131,61 +130,29 @@ export default function useConfigArray({
       data[key] = from[key]['value'];
     }
 
-    // 请求
+    // 发送
-    const reqArr = [];
-    if (neTypeSelect.value[1].startsWith('SYNC')) {
-      for (const neId of neIdSelect.value) {
-        reqArr.push(
-          editNeConfigData({
-            neType: neTypeSelect.value[0],
-            neId: neId,
-            paramName: treeState.selectNode.paramName,
-            paramData: data,
-            loc: loc,
-          })
-        );
-      }
-    } else {
-      reqArr.push(
-        editNeConfigData({
-          neType: neTypeSelect.value[0],
-          neId: neTypeSelect.value[1],
-          paramName: treeState.selectNode.paramName,
-          paramData: data,
-          loc: loc,
-        })
-      );
-    }
-    // 无请求提示
-    if (reqArr.length === 0) {
-      message.warning({
-        content: t('views.ne.neConfig.neIdSyncPleace'),
-        duration: 3,
-      });
-      arrayEditClose();
-      return;
-    }
-
     const hide = message.loading(t('common.loading'), 0);
-    Promise.allSettled(reqArr)
+    editNeConfigData({
-      .then(resArr => {
+      neType: neTypeSelect.value[0],
-        const rejected = resArr.find(res => res.status === 'rejected');
+      neId: neTypeSelect.value[1],
-        if (rejected) {
+      paramName: treeState.selectNode.paramName,
-          message.warning({
+      paramData: data,
-            content: t('views.ne.neConfig.updateItemErr'),
+      loc: loc,
-            duration: 3,
+    })
-          });
+      .then(res => {
-        } else {
+        if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.ne.neConfig.updateItem', {
               num: modalState.title,
             }),
             duration: 3,
           });
-        }
-        const fulfilled = resArr.find(res => res.status === 'fulfilled');
-        if (fulfilled) {
           fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
         }
       })
       .finally(() => {
@@ -205,65 +172,28 @@ export default function useConfigArray({
         num: title,
       }),
       onOk() {
-        // 请求
+        delNeConfigData({
-        const reqArr = [];
+          neType: neTypeSelect.value[0],
-        if (neTypeSelect.value[1].startsWith('SYNC')) {
+          neId: neTypeSelect.value[1],
-          for (const neId of neIdSelect.value) {
+          paramName: treeState.selectNode.paramName,
-            reqArr.push(
+          loc: loc,
-              delNeConfigData({
+        }).then(res => {
-                neType: neTypeSelect.value[0],
+          if (res.code === RESULT_CODE_SUCCESS) {
-                neId: neId,
+            message.success({
-                paramName: treeState.selectNode.paramName,
+              content: t('views.ne.neConfig.delItemOk', {
-                loc: loc,
+                num: title,
-              })
+              }),
-            );
+              duration: 2,
-          }
+            });
-        } else {
-          reqArr.push(
-            delNeConfigData({
-              neType: neTypeSelect.value[0],
-              neId: neTypeSelect.value[1],
-              paramName: treeState.selectNode.paramName,
-              loc: loc,
-            })
-          );
-        }
-        // 无请求提示
-        if (reqArr.length === 0) {
-          message.warning({
-            content: t('views.ne.neConfig.neIdSyncPleace'),
-            duration: 3,
-          });
-          arrayEditClose();
-          return;
-        }
-
-        const hide = message.loading(t('common.loading'), 0);
-        Promise.allSettled(reqArr)
-          .then(resArr => {
-            const rejected = resArr.find(res => res.status === 'rejected');
-            if (rejected) {
-              message.error({
-                content: `${rejected.reason}`,
-                duration: 2,
-              });
-            } else {
-              message.success({
-                content: t('views.ne.neConfig.delItemOk', {
-                  num: title,
-                }),
-                duration: 2,
-              });
-            }
-            const fulfilled = resArr.find(res => res.status === 'fulfilled');
-            if (fulfilled) {
-              fnActiveConfigNode('#');
-            }
-          })
-          .finally(() => {
-            hide();
             arrayEditClose();
-          });
+            fnActiveConfigNode('#');
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        });
       },
     });
   }
@@ -334,61 +264,29 @@ export default function useConfigArray({
       data[key] = from[key]['value'];
     }
 
-    // 请求
+    // 发送
-    const reqArr = [];
-    if (neTypeSelect.value[1].startsWith('SYNC')) {
-      for (const neId of neIdSelect.value) {
-        reqArr.push(
-          addNeConfigData({
-            neType: neTypeSelect.value[0],
-            neId: neId,
-            paramName: treeState.selectNode.paramName,
-            paramData: data,
-            loc: `${from['index']['value']}`,
-          })
-        );
-      }
-    } else {
-      reqArr.push(
-        addNeConfigData({
-          neType: neTypeSelect.value[0],
-          neId: neTypeSelect.value[1],
-          paramName: treeState.selectNode.paramName,
-          paramData: data,
-          loc: `${from['index']['value']}`,
-        })
-      );
-    }
-    // 无请求提示
-    if (reqArr.length === 0) {
-      message.warning({
-        content: t('views.ne.neConfig.neIdSyncPleace'),
-        duration: 3,
-      });
-      arrayEditClose();
-      return;
-    }
-
     const hide = message.loading(t('common.loading'), 0);
-    Promise.allSettled(reqArr)
+    addNeConfigData({
-      .then(resArr => {
+      neType: neTypeSelect.value[0],
-        const rejected = resArr.find(res => res.status === 'rejected');
+      neId: neTypeSelect.value[1],
-        if (rejected) {
+      paramName: treeState.selectNode.paramName,
-          message.warning({
+      paramData: data,
-            content: t('views.ne.neConfig.addItemErr'),
+      loc: `${from['index']['value']}`,
-            duration: 3,
+    })
-          });
+      .then(res => {
-        } else {
+        if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.ne.neConfig.addItemOk', {
               num: modalState.title,
             }),
             duration: 3,
           });
-        }
-        const fulfilled = resArr.find(res => res.status === 'fulfilled');
-        if (fulfilled) {
           fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
         }
       })
       .finally(() => {

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

@@ -10,14 +10,13 @@ import { nextTick, reactive } from 'vue';
 
 /**
  * 参数配置array类型的嵌套array
- * @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
+ * @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
  * @returns
  */
 export default function useConfigArrayChild({
   t,
   treeState,
   neTypeSelect,
-  neIdSelect,
   fnActiveConfigNode,
   ruleVerification,
   modalState,
@@ -199,61 +198,29 @@ export default function useConfigArrayChild({
       data[key] = from[key]['value'];
     }
 
-    // 请求
+    // 发送
-    const reqArr = [];
-    if (neTypeSelect.value[1].startsWith('SYNC')) {
-      for (const neId of neIdSelect.value) {
-        reqArr.push(
-          editNeConfigData({
-            neType: neTypeSelect.value[0],
-            neId: neId,
-            paramName: treeState.selectNode.paramName,
-            paramData: data,
-            loc,
-          })
-        );
-      }
-    } else {
-      reqArr.push(
-        editNeConfigData({
-          neType: neTypeSelect.value[0],
-          neId: neTypeSelect.value[1],
-          paramName: treeState.selectNode.paramName,
-          paramData: data,
-          loc,
-        })
-      );
-    }
-    // 无请求提示
-    if (reqArr.length === 0) {
-      message.warning({
-        content: t('views.ne.neConfig.neIdSyncPleace'),
-        duration: 3,
-      });
-      arrayEditClose();
-      return;
-    }
-
     const hide = message.loading(t('common.loading'), 0);
-    Promise.allSettled(reqArr)
+    editNeConfigData({
-      .then(resArr => {
+      neType: neTypeSelect.value[0],
-        const rejected = resArr.find(res => res.status === 'rejected');
+      neId: neTypeSelect.value[1],
-        if (rejected) {
+      paramName: treeState.selectNode.paramName,
-          message.warning({
+      paramData: data,
-            content: t('views.ne.neConfig.updateItemErr'),
+      loc,
-            duration: 3,
+    })
-          });
+      .then(res => {
-        } else {
+        if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.ne.neConfig.updateItem', {
               num: modalState.title,
             }),
             duration: 3,
           });
-        }
-        const fulfilled = resArr.find(res => res.status === 'fulfilled');
-        if (fulfilled) {
           fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
         }
       })
       .finally(() => {
@@ -274,65 +241,28 @@ export default function useConfigArrayChild({
         num: title,
       }),
       onOk() {
-        // 请求
+        delNeConfigData({
-        const reqArr = [];
+          neType: neTypeSelect.value[0],
-        if (neTypeSelect.value[1].startsWith('SYNC')) {
+          neId: neTypeSelect.value[1],
-          for (const neId of neIdSelect.value) {
+          paramName: treeState.selectNode.paramName,
-            reqArr.push(
+          loc,
-              delNeConfigData({
+        }).then(res => {
-                neType: neTypeSelect.value[0],
+          if (res.code === RESULT_CODE_SUCCESS) {
-                neId: neId,
+            message.success({
-                paramName: treeState.selectNode.paramName,
+              content: t('views.ne.neConfig.delItemOk', {
-                loc,
+                num: title,
-              })
+              }),
-            );
+              duration: 2,
-          }
+            });
-        } else {
-          reqArr.push(
-            delNeConfigData({
-              neType: neTypeSelect.value[0],
-              neId: neTypeSelect.value[1],
-              paramName: treeState.selectNode.paramName,
-              loc,
-            })
-          );
-        }
-        // 无请求提示
-        if (reqArr.length === 0) {
-          message.warning({
-            content: t('views.ne.neConfig.neIdSyncPleace'),
-            duration: 3,
-          });
-          arrayEditClose();
-          return;
-        }
-
-        const hide = message.loading(t('common.loading'), 0);
-        Promise.allSettled(reqArr)
-          .then(resArr => {
-            const rejected = resArr.find(res => res.status === 'rejected');
-            if (rejected) {
-              message.error({
-                content: `${rejected.reason}`,
-                duration: 2,
-              });
-            } else {
-              message.success({
-                content: t('views.ne.neConfig.delItemOk', {
-                  num: title,
-                }),
-                duration: 2,
-              });
-            }
-            const fulfilled = resArr.find(res => res.status === 'fulfilled');
-            if (fulfilled) {
-              fnActiveConfigNode('#');
-            }
-          })
-          .finally(() => {
-            hide();
             arrayEditClose();
-          });
+            fnActiveConfigNode('#');
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        });
       },
     });
   }
@@ -379,61 +309,29 @@ export default function useConfigArrayChild({
       data[key] = from[key]['value'];
     }
 
-    // 请求
+    // 发送
-    const reqArr = [];
-    if (neTypeSelect.value[1].startsWith('SYNC')) {
-      for (const neId of neIdSelect.value) {
-        reqArr.push(
-          addNeConfigData({
-            neType: neTypeSelect.value[0],
-            neId: neId,
-            paramName: treeState.selectNode.paramName,
-            paramData: data,
-            loc,
-          })
-        );
-      }
-    } else {
-      reqArr.push(
-        addNeConfigData({
-          neType: neTypeSelect.value[0],
-          neId: neTypeSelect.value[1],
-          paramName: treeState.selectNode.paramName,
-          paramData: data,
-          loc,
-        })
-      );
-    }
-    // 无请求提示
-    if (reqArr.length === 0) {
-      message.warning({
-        content: t('views.ne.neConfig.neIdSyncPleace'),
-        duration: 3,
-      });
-      arrayEditClose();
-      return;
-    }
-
     const hide = message.loading(t('common.loading'), 0);
-    Promise.allSettled(reqArr)
+    addNeConfigData({
-      .then(resArr => {
+      neType: neTypeSelect.value[0],
-        const rejected = resArr.find(res => res.status === 'rejected');
+      neId: neTypeSelect.value[1],
-        if (rejected) {
+      paramName: treeState.selectNode.paramName,
-          message.warning({
+      paramData: data,
-            content: t('views.ne.neConfig.addItemErr'),
+      loc,
-            duration: 3,
+    })
-          });
+      .then(res => {
-        } else {
+        if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.ne.neConfig.addItemOk', {
               num: modalState.title,
             }),
             duration: 3,
           });
-        }
-        const fulfilled = resArr.find(res => res.status === 'fulfilled');
-        if (fulfilled) {
           fnActiveConfigNode('#');
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
         }
       })
       .finally(() => {

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

@@ -6,14 +6,13 @@ import { reactive, toRaw } from 'vue';
 
 /**
  * list类型参数处理
- * @param param 父级传入 {t, treeState, neTypeSelect, neIdSelect, ruleVerification}
+ * @param param 父级传入 {t, treeState, neTypeSelect, ruleVerification}
  * @returns
  */
 export default function useConfigList({
   t,
   treeState,
   neTypeSelect,
-  neIdSelect,
   ruleVerification,
 }: any) {
   /**单列表状态类型 */
@@ -84,64 +83,25 @@ export default function useConfigList({
       return;
     }
 
-    // 请求
+    // 发送
-    const reqArr = [];
-    if (neTypeSelect.value[1].startsWith('SYNC')) {
-      for (const neId of neIdSelect.value) {
-        reqArr.push(
-          editNeConfigData({
-            neType: neTypeSelect.value[0],
-            neId: neId,
-            paramName: treeState.selectNode.paramName,
-            paramData: {
-              [from['name']]: from['value'],
-            },
-          })
-        );
-      }
-    } else {
-      reqArr.push(
-        editNeConfigData({
-          neType: neTypeSelect.value[0],
-          neId: neTypeSelect.value[1],
-          paramName: treeState.selectNode.paramName,
-          paramData: {
-            [from['name']]: from['value'],
-          },
-        })
-      );
-    }
-    // 无请求提示
-    if (reqArr.length === 0) {
-      message.warning({
-        content: t('views.ne.neConfig.neIdSyncPleace'),
-        duration: 3,
-      });
-      listState.confirmLoading = false;
-      listState.editRecord = {};
-      return;
-    }
-
     listState.confirmLoading = true;
     const hide = message.loading(t('common.loading'), 0);
-    Promise.allSettled(reqArr)
+    editNeConfigData({
-      .then(resArr => {
+      neType: neTypeSelect.value[0],
-        const rejected = resArr.find(res => res.status === 'rejected');
+      neId: neTypeSelect.value[1],
-        if (rejected) {
+      paramName: treeState.selectNode.paramName,
-          message.warning({
+      paramData: {
-            content: t('views.ne.neConfig.updateValueErr'),
+        [from['name']]: from['value'],
-            duration: 3,
+      },
-          });
+    })
-        } else {
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
           message.success({
             content: t('views.ne.neConfig.updateValue', {
               num: from['display'],
             }),
             duration: 3,
           });
-        }
-        const fulfilled = resArr.find(res => res.status === 'fulfilled');
-        if (fulfilled) {
           // 改变表格数据
           const item = listState.data.find(
             (item: Record<string, any>) => from['name'] === item['name']
@@ -149,6 +109,11 @@ export default function useConfigList({
           if (item) {
             Object.assign(item, listState.editRecord);
           }
+        } else {
+          message.warning({
+            content: t('views.ne.neConfig.updateValueErr'),
+            duration: 3,
+          });
         }
       })
       .finally(() => {
@@ -169,7 +134,7 @@ export default function useConfigList({
     /**指定每页可以显示多少条 */
     pageSizeOptions: ['10', '20', '50', '100'],
     /**只有一页时是否隐藏分页器 */
-    hideOnSinglePage: true,
+    hideOnSinglePage: false,
     /**是否可以快速跳转至某页 */
     showQuickJumper: true,
     /**是否可以改变 pageSize */

src/views/ne/neConfigHA/hooks/useConfigArray.ts

@@ -0,0 +1,513 @@
+import {
+  addNeConfigData,
+  delNeConfigData,
+  editNeConfigData,
+} from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { Modal, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { reactive, watch } from 'vue';
+
+/**
+ * 参数配置array类型
+ * @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
+ * @returns
+ */
+export default function useConfigArray({
+  t,
+  treeState,
+  neTypeSelect,
+  neIdSelect,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  fnModalCancel,
+}: any) {
+  /**多列列表状态类型 */
+  type ArrayStateType = {
+    /**紧凑型 */
+    size: SizeType;
+    /**多列嵌套记录字段 */
+    columns: Record<string, any>[];
+    /**表格字段列排序 */
+    columnsDnd: Record<string, any>[];
+    /**多列记录数据 */
+    columnsData: Record<string, any>[];
+    /**多列嵌套展开key */
+    arrayChildExpandKeys: any[];
+
+    /**多列记录数据 */
+    data: Record<string, any>[];
+    /**多列记录规则 */
+    dataRule: Record<string, any>;
+  };
+
+  /**多列列表状态 */
+  let arrayState: ArrayStateType = reactive({
+    size: 'small',
+    columns: [],
+    columnsDnd: [],
+    columnsData: [],
+    arrayChildExpandKeys: [],
+    data: [],
+    dataRule: {},
+  });
+
+  /**多列表编辑 */
+  function arrayEdit(rowIndex: Record<string, any>) {
+    const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
+    if (!item) return;
+    const from = arrayInitEdit(item, arrayState.dataRule);
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(row, 'upfId')) {
+      const v = row.upfId.value;
+      if (typeof v === 'string') {
+        if (v === '') {
+          row.upfId.value = [];
+        } else if (v.includes(';')) {
+          row.upfId.value = v.split(';');
+        } else if (v.includes(',')) {
+          row.upfId.value = v.split(',');
+        } else {
+          row.upfId.value = [v];
+        }
+      }
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayEdit';
+    modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.open = true;
+
+    // 关闭嵌套
+    arrayState.arrayChildExpandKeys = [];
+  }
+
+  /**多列表编辑关闭 */
+  function arrayEditClose() {
+    arrayState.arrayChildExpandKeys = [];
+    fnModalCancel();
+  }
+
+  /**多列表编辑确认 */
+  function arrayEditOk(from: Record<string, any>) {
+    const loc = `${from['index']['value']}`;
+
+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(from, 'upfId')) {
+      const v = from.upfId.value;
+      if (Array.isArray(v)) {
+        from.upfId.value = v.join(';');
+      }
+    }
+
+    // 遍历提取属性和值
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 请求
+    const reqArr = [];
+    if (neTypeSelect.value[1].startsWith('SYNC')) {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          editNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc: loc,
+          })
+        );
+      }
+    } else {
+      reqArr.push(
+        editNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          paramData: data,
+          loc: loc,
+        })
+      );
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
+        } else {
+          message.success({
+            content: t('views.ne.neConfig.updateItem', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
+          fnActiveConfigNode('#');
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  /**多列表删除单行 */
+  function arrayDelete(rowIndex: Record<string, any>) {
+    const loc = `${rowIndex.value}`;
+    const title = `${treeState.selectNode.paramDisplay} Index-${loc}`;
+
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.ne.neConfig.delItemTip', {
+        num: title,
+      }),
+      onOk() {
+        // 请求
+        const reqArr = [];
+        if (neTypeSelect.value[1].startsWith('SYNC')) {
+          for (const neId of neIdSelect.value) {
+            reqArr.push(
+              delNeConfigData({
+                neType: neTypeSelect.value[0],
+                neId: neId,
+                paramName: treeState.selectNode.paramName,
+                loc: loc,
+              })
+            );
+          }
+        } else {
+          reqArr.push(
+            delNeConfigData({
+              neType: neTypeSelect.value[0],
+              neId: neTypeSelect.value[1],
+              paramName: treeState.selectNode.paramName,
+              loc: loc,
+            })
+          );
+        }
+        // 无请求提示
+        if (reqArr.length === 0) {
+          message.warning({
+            content: t('views.ne.neConfig.neIdSyncPleace'),
+            duration: 3,
+          });
+          arrayEditClose();
+          return;
+        }
+
+        const hide = message.loading(t('common.loading'), 0);
+        Promise.allSettled(reqArr)
+          .then(resArr => {
+            const rejected = resArr.find(res => res.status === 'rejected');
+            if (rejected) {
+              message.error({
+                content: `${rejected.reason}`,
+                duration: 2,
+              });
+            } else {
+              message.success({
+                content: t('views.ne.neConfig.delItemOk', {
+                  num: title,
+                }),
+                duration: 2,
+              });
+            }
+            const fulfilled = resArr.find(res => res.status === 'fulfilled');
+            if (fulfilled) {
+              fnActiveConfigNode('#');
+            }
+          })
+          .finally(() => {
+            hide();
+            arrayEditClose();
+          });
+      },
+    });
+  }
+
+  /**多列表新增单行 */
+  function arrayAdd() {
+    const from = arrayInitAdd(arrayState.data, arrayState.dataRule);
+
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(row, 'upfId')) {
+      const v = row.upfId.value;
+      if (typeof v === 'string') {
+        if (v === '') {
+          row.upfId.value = [];
+        } else if (v.includes(';')) {
+          row.upfId.value = v.split(';');
+        } else if (v.includes(',')) {
+          row.upfId.value = v.split(',');
+        } else {
+          row.upfId.value = [v];
+        }
+      }
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayAdd';
+    modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.open = true;
+  }
+
+  /**多列表新增单行确认 */
+  function arrayAddOk(from: Record<string, any>) {
+    // 特殊SMF-upfid选择
+    if (neTypeSelect.value[0] === 'SMF' && Reflect.has(from, 'upfId')) {
+      const v = from.upfId.value;
+      if (Array.isArray(v)) {
+        from.upfId.value = v.join(';');
+      }
+    }
+
+    // 遍历提取属性和值
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 请求
+    const reqArr = [];
+    if (neTypeSelect.value[1].startsWith('SYNC')) {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          addNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc: `${from['index']['value']}`,
+          })
+        );
+      }
+    } else {
+      reqArr.push(
+        addNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          paramData: data,
+          loc: `${from['index']['value']}`,
+        })
+      );
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
+        } else {
+          message.success({
+            content: t('views.ne.neConfig.addItemOk', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
+          fnActiveConfigNode('#');
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  /**多列表编辑行数据初始化 */
+  function arrayInitEdit(data: Record<string, any>, dataRule: any) {
+    const dataFrom = data.record;
+    const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
+    for (const row of ruleFrom.record) {
+      // 子嵌套的不初始
+      if (row.array) {
+        row.value = [];
+        continue;
+      }
+      // 查找项的值
+      const item = dataFrom.find((s: any) => s.name === row.name);
+      if (!item) {
+        continue;
+      }
+      // 可选的
+      row.optional = 'true';
+      // 根据规则类型转值
+      if (['enum', 'int'].includes(row.type)) {
+        row.value = Number(item.value);
+      } else if ('bool' === row.type) {
+        row.value = Boolean(item.value);
+      } else {
+        row.value = item.value;
+      }
+    }
+    ruleFrom.key = data.key;
+    ruleFrom.title = data.title;
+    return ruleFrom;
+  }
+
+  /**多列表新增行数据初始化 */
+  function arrayInitAdd(data: any[], dataRule: any) {
+    // 有数据时取得最后的index
+    let dataLastIndex = 0;
+    if (data.length !== 0) {
+      const lastFrom = Object.assign(
+        {},
+        JSON.parse(JSON.stringify(data.at(-1)))
+      );
+      if (lastFrom.record.length > 0) {
+        dataLastIndex = parseInt(lastFrom.key);
+        dataLastIndex += 1;
+      }
+    }
+
+    const ruleFrom = Object.assign({}, JSON.parse(JSON.stringify(dataRule)));
+    for (const row of ruleFrom.record) {
+      // 子嵌套的不初始
+      if (row.array) {
+        row.value = [];
+        continue;
+      }
+      // 可选的
+      row.optional = 'true';
+      // index值
+      if (row.name === 'index') {
+        let newIndex =
+          dataLastIndex !== 0 ? dataLastIndex : parseInt(row.value);
+        if (isNaN(newIndex)) {
+          newIndex = 0;
+        }
+        row.value = newIndex;
+        ruleFrom.key = newIndex;
+        ruleFrom.title = `Index-${newIndex}`;
+        continue;
+      }
+      // 根据规则类型转值
+      if (['enum', 'int'].includes(row.type)) {
+        row.value = Number(row.value);
+      }
+      if ('bool' === row.type) {
+        row.value = Boolean(row.value);
+      }
+
+      // 特殊SMF-upfid选择
+      if (neTypeSelect.value[0] === 'SMF' && row.name === 'upfId') {
+        const v = row.value;
+        if (typeof v === 'string') {
+          if (v === '') {
+            row.value = [];
+          } else if (v.includes(';')) {
+            row.value = v.split(';');
+          } else if (v.includes(',')) {
+            row.value = v.split(',');
+          } else {
+            row.value = [v];
+          }
+        }
+      }
+    }
+    return ruleFrom;
+  }
+
+  // 监听表格字段列排序变化关闭展开
+  watch(
+    () => arrayState.columnsDnd,
+    () => {
+      arrayEditClose();
+    }
+  );
+
+  return {
+    arrayState,
+    arrayEdit,
+    arrayEditClose,
+    arrayEditOk,
+    arrayDelete,
+    arrayAdd,
+    arrayAddOk,
+    arrayInitEdit,
+    arrayInitAdd,
+  };
+}

src/views/ne/neConfigHA/hooks/useConfigArrayChild.ts

@@ -0,0 +1,454 @@
+import {
+  addNeConfigData,
+  editNeConfigData,
+  delNeConfigData,
+} from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { Modal, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { nextTick, reactive } from 'vue';
+
+/**
+ * 参数配置array类型的嵌套array
+ * @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
+ * @returns
+ */
+export default function useConfigArrayChild({
+  t,
+  treeState,
+  neTypeSelect,
+  neIdSelect,
+  fnActiveConfigNode,
+  ruleVerification,
+  modalState,
+  arrayState,
+  arrayInitEdit,
+  arrayInitAdd,
+  arrayEditClose,
+}: any) {
+  /**多列嵌套列表状态类型 */
+  type ArrayChildStateType = {
+    /**标题 */
+    title: string;
+    /**层级index */
+    loc: string;
+    /**紧凑型 */
+    size: SizeType;
+    /**多列嵌套记录字段 */
+    columns: Record<string, any>[];
+    /**表格字段列排序 */
+    columnsDnd: Record<string, any>[];
+    /**多列记录数据 */
+    columnsData: Record<string, any>[];
+
+    /**多列嵌套记录数据 */
+    data: Record<string, any>[];
+    /**多列嵌套记录规则 */
+    dataRule: Record<string, any>;
+  };
+
+  /**多列嵌套表格状态 */
+  let arrayChildState: ArrayChildStateType = reactive({
+    title: '',
+    loc: '',
+    size: 'small',
+    columns: [],
+    columnsDnd: [],
+    columnsData: [],
+    data: [],
+    dataRule: {},
+  });
+
+  /**多列表展开嵌套行 */
+  function arrayChildExpand(
+    indexRow: Record<string, any>,
+    row: Record<string, any>
+  ) {
+    const loc = indexRow.value;
+    if (arrayChildState.loc === `${loc}/${row.name}`) {
+      arrayChildState.loc = '';
+      arrayState.arrayChildExpandKeys = [];
+      return;
+    }
+    arrayChildState.loc = '';
+    arrayState.arrayChildExpandKeys = [];
+    const from = Object.assign({}, JSON.parse(JSON.stringify(row)));
+    // 无数据时
+    if (!Array.isArray(from.value)) {
+      from.value = [];
+    }
+    const dataArr = Object.freeze(from.value);
+    const ruleArr = Object.freeze(from.array);
+
+    // 列表项数据
+    const dataArray: Record<string, any>[] = [];
+    for (const item of dataArr) {
+      const index = item['index'];
+      let record: Record<string, any>[] = [];
+      for (const key of Object.keys(item)) {
+        // 规则为准
+        for (const rule of ruleArr) {
+          if (rule['name'] === key) {
+            const ruleItem = Object.assign({ optional: 'true' }, rule, {
+              value: item[key],
+            });
+            record.push(ruleItem);
+            break;
+          }
+        }
+      }
+      // dataArray.push(record);
+      dataArray.push({ title: `Index-${index}`, key: index, record });
+    }
+    arrayChildState.data = dataArray;
+
+    // 无数据时，用于新增
+    arrayChildState.dataRule = {
+      title: `Index-0`,
+      key: 0,
+      record: ruleArr,
+    };
+
+    // 列表数据
+    const columnsData: Record<string, any>[] = [];
+    for (const v of arrayChildState.data) {
+      const row: Record<string, any> = {};
+      for (const item of v.record) {
+        row[item.name] = item;
+      }
+      columnsData.push(row);
+    }
+    arrayChildState.columnsData = columnsData;
+
+    // 列表字段
+    const columns: Record<string, any>[] = [];
+    for (const rule of arrayChildState.dataRule.record) {
+      columns.push({
+        title: rule.display,
+        dataIndex: rule.name,
+        align: 'left',
+        resizable: true,
+        width: 50,
+        minWidth: 50,
+        maxWidth: 250,
+      });
+    }
+    columns.push({
+      title: t('common.operate'),
+      dataIndex: 'index',
+      key: 'index',
+      align: 'center',
+      fixed: 'right',
+      width: 100,
+    });
+    arrayChildState.columns = columns;
+
+    nextTick(() => {
+      // 设置展开key
+      arrayState.arrayChildExpandKeys = [indexRow];
+      // 层级标识
+      arrayChildState.loc = `${loc}/${from['name']}`;
+      // 设置展开列表标题
+      arrayChildState.title = `${from['display']}`;
+    });
+  }
+
+  /**多列表嵌套行编辑 */
+  function arrayChildEdit(rowIndex: Record<string, any>) {
+    const item = arrayChildState.data.find(
+      (s: any) => s.key === rowIndex.value
+    );
+    if (!item) return;
+    const from = arrayInitEdit(item, arrayChildState.dataRule);
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayChildEdit';
+    modalState.title = `${arrayChildState.title} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.open = true;
+  }
+
+  /**多列表嵌套行编辑确认 */
+  function arrayChildEditOk(from: Record<string, any>) {
+    const loc = `${arrayChildState.loc}/${from['index']['value']}`;
+
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 请求
+    const reqArr = [];
+    if (neTypeSelect.value[1].startsWith('SYNC')) {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          editNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc,
+          })
+        );
+      }
+    } else {
+      reqArr.push(
+        editNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          paramData: data,
+          loc,
+        })
+      );
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.updateItemErr'),
+            duration: 3,
+          });
+        } else {
+          message.success({
+            content: t('views.ne.neConfig.updateItem', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
+          fnActiveConfigNode('#');
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  /**多列表嵌套行删除单行 */
+  function arrayChildDelete(rowIndex: Record<string, any>) {
+    const index = rowIndex.value;
+    const loc = `${arrayChildState.loc}/${index}`;
+    const title = `${arrayChildState.title} Index-${index}`;
+
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.ne.neConfig.delItemTip', {
+        num: title,
+      }),
+      onOk() {
+        // 请求
+        const reqArr = [];
+        if (neTypeSelect.value[1].startsWith('SYNC')) {
+          for (const neId of neIdSelect.value) {
+            reqArr.push(
+              delNeConfigData({
+                neType: neTypeSelect.value[0],
+                neId: neId,
+                paramName: treeState.selectNode.paramName,
+                loc,
+              })
+            );
+          }
+        } else {
+          reqArr.push(
+            delNeConfigData({
+              neType: neTypeSelect.value[0],
+              neId: neTypeSelect.value[1],
+              paramName: treeState.selectNode.paramName,
+              loc,
+            })
+          );
+        }
+        // 无请求提示
+        if (reqArr.length === 0) {
+          message.warning({
+            content: t('views.ne.neConfig.neIdSyncPleace'),
+            duration: 3,
+          });
+          arrayEditClose();
+          return;
+        }
+
+        const hide = message.loading(t('common.loading'), 0);
+        Promise.allSettled(reqArr)
+          .then(resArr => {
+            const rejected = resArr.find(res => res.status === 'rejected');
+            if (rejected) {
+              message.error({
+                content: `${rejected.reason}`,
+                duration: 2,
+              });
+            } else {
+              message.success({
+                content: t('views.ne.neConfig.delItemOk', {
+                  num: title,
+                }),
+                duration: 2,
+              });
+            }
+            const fulfilled = resArr.find(res => res.status === 'fulfilled');
+            if (fulfilled) {
+              fnActiveConfigNode('#');
+            }
+          })
+          .finally(() => {
+            hide();
+            arrayEditClose();
+          });
+      },
+    });
+  }
+
+  /**多列表嵌套行新增单行 */
+  function arrayChildAdd() {
+    const from = arrayInitAdd(arrayChildState.data, arrayChildState.dataRule);
+    // 处理信息
+    const row: Record<string, any> = {};
+    for (const v of from.record) {
+      if (Array.isArray(v.array)) {
+        continue;
+      }
+      row[v.name] = Object.assign({}, v);
+    }
+
+    modalState.from = row;
+    modalState.type = 'arrayChildAdd';
+    modalState.title = `${arrayChildState.title} ${from.title}`;
+    modalState.key = from.key;
+    modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
+    modalState.open = true;
+  }
+
+  /**多列表新增单行确认 */
+  function arrayChildAddOk(from: Record<string, any>) {
+    const loc = `${arrayChildState.loc}/${from['index']['value']}`;
+
+    let data: Record<string, any> = {};
+    for (const key in from) {
+      // 子嵌套的不插入
+      if (from[key]['array']) {
+        continue;
+      }
+      // 检查规则
+      const [ok, msg] = ruleVerification(from[key]);
+      if (!ok) {
+        message.warning({
+          content: `${msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      data[key] = from[key]['value'];
+    }
+
+    // 请求
+    const reqArr = [];
+    if (neTypeSelect.value[1].startsWith('SYNC')) {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          addNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: data,
+            loc,
+          })
+        );
+      }
+    } else {
+      reqArr.push(
+        addNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          paramData: data,
+          loc,
+        })
+      );
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      arrayEditClose();
+      return;
+    }
+
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.addItemErr'),
+            duration: 3,
+          });
+        } else {
+          message.success({
+            content: t('views.ne.neConfig.addItemOk', {
+              num: modalState.title,
+            }),
+            duration: 3,
+          });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
+          fnActiveConfigNode('#');
+        }
+      })
+      .finally(() => {
+        hide();
+        arrayEditClose();
+      });
+  }
+
+  return {
+    arrayChildState,
+    arrayChildExpand,
+    arrayChildEdit,
+    arrayChildEditOk,
+    arrayChildDelete,
+    arrayChildAdd,
+    arrayChildAddOk,
+  };
+}

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

@@ -0,0 +1,187 @@
+import { editNeConfigData } from '@/api/ne/neConfig';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { message } from 'ant-design-vue/es';
+import { reactive, toRaw } from 'vue';
+
+/**
+ * list类型参数处理
+ * @param param 父级传入 {t, treeState, neTypeSelect, neIdSelect, ruleVerification}
+ * @returns
+ */
+export default function useConfigList({
+  t,
+  treeState,
+  neTypeSelect,
+  neIdSelect,
+  ruleVerification,
+}: any) {
+  /**单列表状态类型 */
+  type ListStateType = {
+    /**紧凑型 */
+    size: SizeType;
+    /**单列记录字段 */
+    columns: Record<string, any>[];
+    /**单列记录数据 */
+    data: Record<string, any>[];
+    /**编辑行记录 */
+    editRecord: Record<string, any>;
+    /**确认提交等待 */
+    confirmLoading: boolean;
+  };
+
+  /**单列表状态 */
+  let listState: ListStateType = reactive({
+    size: 'small',
+    columns: [
+      {
+        title: 'Key',
+        dataIndex: 'display',
+        align: 'left',
+        width: '30%',
+      },
+      {
+        title: 'Value',
+        dataIndex: 'value',
+        align: 'left',
+        width: '70%',
+      },
+    ],
+    data: [],
+    confirmLoading: false,
+    editRecord: {},
+  });
+
+  /**单列表编辑 */
+  function listEdit(row: Record<string, any>) {
+    if (
+      listState.confirmLoading ||
+      ['read-only', 'read', 'ro'].includes(row.access)
+    ) {
+      return;
+    }
+
+    listState.editRecord = Object.assign({}, row);
+  }
+
+  /**单列表编辑关闭 */
+  function listEditClose() {
+    listState.confirmLoading = false;
+    listState.editRecord = {};
+  }
+
+  /**单列表编辑确认 */
+  function listEditOk() {
+    if (listState.confirmLoading) return;
+    const from = toRaw(listState.editRecord);
+    // 检查规则
+    const [ok, msg] = ruleVerification(from);
+    if (!ok) {
+      message.warning({
+        content: `${msg}`,
+        duration: 3,
+      });
+      return;
+    }
+
+    // 请求
+    const reqArr = [];
+    if (neTypeSelect.value[1].startsWith('SYNC')) {
+      for (const neId of neIdSelect.value) {
+        reqArr.push(
+          editNeConfigData({
+            neType: neTypeSelect.value[0],
+            neId: neId,
+            paramName: treeState.selectNode.paramName,
+            paramData: {
+              [from['name']]: from['value'],
+            },
+          })
+        );
+      }
+    } else {
+      reqArr.push(
+        editNeConfigData({
+          neType: neTypeSelect.value[0],
+          neId: neTypeSelect.value[1],
+          paramName: treeState.selectNode.paramName,
+          paramData: {
+            [from['name']]: from['value'],
+          },
+        })
+      );
+    }
+    // 无请求提示
+    if (reqArr.length === 0) {
+      message.warning({
+        content: t('views.ne.neConfig.neIdSyncPleace'),
+        duration: 3,
+      });
+      listState.confirmLoading = false;
+      listState.editRecord = {};
+      return;
+    }
+
+    listState.confirmLoading = true;
+    const hide = message.loading(t('common.loading'), 0);
+    Promise.allSettled(reqArr)
+      .then(resArr => {
+        const rejected = resArr.find(res => res.status === 'rejected');
+        if (rejected) {
+          message.warning({
+            content: t('views.ne.neConfig.updateValueErr'),
+            duration: 3,
+          });
+        } else {
+          message.success({
+            content: t('views.ne.neConfig.updateValue', {
+              num: from['display'],
+            }),
+            duration: 3,
+          });
+        }
+        const fulfilled = resArr.find(res => res.status === 'fulfilled');
+        if (fulfilled) {
+          // 改变表格数据
+          const item = listState.data.find(
+            (item: Record<string, any>) => from['name'] === item['name']
+          );
+          if (item) {
+            Object.assign(item, listState.editRecord);
+          }
+        }
+      })
+      .finally(() => {
+        hide();
+        listState.confirmLoading = false;
+        listState.editRecord = {};
+      });
+  }
+
+  /**表格分页器参数 */
+  let tablePagination = reactive({
+    /**当前页数 */
+    current: 1,
+    /**每页条数 */
+    pageSize: 10,
+    /**默认的每页条数 */
+    defaultPageSize: 10,
+    /**指定每页可以显示多少条 */
+    pageSizeOptions: ['10', '20', '50', '100'],
+    /**只有一页时是否隐藏分页器 */
+    hideOnSinglePage: true,
+    /**是否可以快速跳转至某页 */
+    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;
+    },
+  });
+
+  return { tablePagination, listState, listEdit, listEditClose, listEditOk };
+}

src/views/ne/neConfigHA/hooks/useOptions.ts

@@ -0,0 +1,192 @@
+import { getNeConfigData } from '@/api/ne/neConfig';
+import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+import { ref } from 'vue';
+
+/**
+ * 参数公共函数
+ * @param param 父级传入 {t}
+ * @returns
+ */
+export default function useOptions({ t }: any) {
+  /**规则校验 */
+  function ruleVerification(row: Record<string, any>): (string | boolean)[] {
+    let result = [true, ''];
+    const type = row.type;
+    const value = row.value;
+    const filter = row.filter;
+    const display = row.display;
+
+    // 子嵌套的不检查
+    if (row.array) {
+      return result;
+    }
+
+    // 可选的同时没有值不检查
+    if (row.optional === 'true' && !value) {
+      return result;
+    }
+    switch (type) {
+      case 'int':
+        // filter: "0~128"
+
+        if (filter && filter.indexOf('~') !== -1) {
+          const filterArr = filter.split('~');
+          const minInt = parseInt(filterArr[0]);
+          const maxInt = parseInt(filterArr[1]);
+          const valueInt = parseInt(value);
+          if (valueInt < minInt || valueInt > maxInt) {
+            return [
+              false,
+              t('views.ne.neConfig.requireInt', {
+                display,
+                filter,
+              }),
+            ];
+          }
+        }
+        break;
+      case 'ipv4':
+        if (!regExpIPv4.test(value)) {
+          return [
+            false,
+            t('views.ne.neConfig.requireIpv4', { display }),
+          ];
+        }
+        break;
+      case 'ipv6':
+        if (!regExpIPv6.test(value)) {
+          return [
+            false,
+            t('views.ne.neConfig.requireIpv6', { display }),
+          ];
+        }
+        break;
+      case 'enum':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.keys(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.ne.neConfig.requireEnum', { display }),
+            ];
+          }
+        }
+        break;
+      case 'bool':
+        // filter: '{"0":"false", "1":"true"}'
+
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.values(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.ne.neConfig.requireBool', { display }),
+            ];
+          }
+        }
+        break;
+      case 'string':
+        // filter: "0~128"
+
+        // 字符串长度判断
+        if (filter && filter.indexOf('~') !== -1) {
+          try {
+            const filterArr = filter.split('~');
+            let rule = new RegExp(
+              '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
+            );
+            if (!rule.test(value)) {
+              return [
+                false,
+                t('views.ne.neConfig.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        // 字符串http判断
+        if (value.startsWith('http')) {
+          try {
+            if (!validURL(value)) {
+              return [
+                false,
+                t('views.ne.neConfig.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        break;
+      case 'regex':
+        // filter: "^[0-9]{3}$"
+
+        if (filter) {
+          try {
+            let regex = new RegExp(filter);
+            if (!regex.test(value)) {
+              return [
+                false,
+                t('views.ne.neConfig.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        break;
+
+      default:
+        return [
+          false,
+          t('views.ne.neConfig.requireUn', { display }),
+        ];
+    }
+    return result;
+  }
+
+  /**upfId可选择 */
+  const smfByUPFIdOptions = ref<{ value: string; label: string }[]>([]);
+  /**加载smf配置的upfId */
+  function smfByUPFIdLoadData(neId: string) {
+    getNeConfigData({
+      neType: 'SMF',
+      neId: neId,
+      paramName: 'upfConfig',
+    }).then(res => {
+      smfByUPFIdOptions.value = [];
+      for (const s of res.data) {
+        smfByUPFIdOptions.value.push({
+          value: s.id,
+          label: s.id,
+        });
+      }
+    });
+  }
+
+  return {
+    ruleVerification,
+    smfByUPFIdLoadData,
+    smfByUPFIdOptions,
+  };
+}

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

@@ -78,14 +78,19 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
         const data = res.data;
+        const ipType = data?.oamConfig?.ipType || 'ipv4';
+        let omcIP = '127.0.0.1';
+        if (data.oamConfig && Reflect.has(data.oamConfig, ipType)) {
+          omcIP = data?.oamConfig[ipType];
+        }
         Object.assign(modalState.from, {
-          omcIP: data.oamConfig[data.oamConfig.ipType],
+          omcIP: omcIP,
-          oamEnable: data.oamConfig.enable,
+          oamEnable: data?.oamConfig?.enable || false,
-          oamPort: data.oamConfig.port,
+          oamPort: data?.oamConfig?.port || 33030,
-          snmpEnable: data.snmpConfig.enable,
+          snmpEnable: data?.snmpConfig?.enable || false,
-          snmpPort: data.snmpConfig.port,
+          snmpPort: data?.snmpConfig?.port || 4957,
-          kpiEnable: data.kpiConfig.enable,
+          kpiEnable: data?.kpiConfig?.enable || false,
-          kpiTimer: data.kpiConfig.timer,
+          kpiTimer: data?.kpiConfig?.timer || 60,
         });
         modalState.title = t('views.ne.neInfo.oam.title');
         modalState.openByEdit = true;

src/views/ne/neLicense/index.vue

@@ -105,7 +105,7 @@ let tableColumns = ref<TableColumnsType>([
     title: t('views.ne.common.serialNum'),
     dataIndex: 'serialNum',
     align: 'left',
-    width: 100,
+    width: 120,
   },
   {
     title: t('views.ne.common.expiryDate'),
@@ -126,12 +126,12 @@ let tableColumns = ref<TableColumnsType>([
   {
     title: t('common.updateTime'),
     dataIndex: 'updateTime',
-    align: 'center',
+    align: 'left',
     customRender(opt) {
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    width: 150,
+    width: 200,
   },
   {
     title: t('common.operate'),
@@ -413,7 +413,7 @@ onMounted(() => {
             :loading="modalState.confirmLoading"
             @click.prevent="fnRecordStateBatch()"
           >
-            <template #icon><CloudSyncOutlined /></template>
+            <template #icon><SyncOutlined /></template>
             {{ t('views.ne.neLicense.reloadBatch') }}
           </a-button>
         </a-space>
@@ -508,7 +508,7 @@ onMounted(() => {
               <a-tooltip placement="topRight">
                 <template #title>{{ t('views.ne.neLicense.reload') }}</template>
                 <a-button type="link" @click.prevent="fnRecordState(record)">
-                  <template #icon><CloudSyncOutlined /> </template>
+                  <template #icon><SyncOutlined /> </template>
                 </a-button>
               </a-tooltip>
               <a-tooltip placement="topRight">
@@ -517,7 +517,7 @@ onMounted(() => {
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record.id)"
                 >
-                  <template #icon><CloudUploadOutlined /> </template>
+                  <template #icon><UploadOutlined /> </template>
                 </a-button>
               </a-tooltip>
             </a-space>

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/ne/neVersion/index.vue

@@ -120,6 +120,7 @@ let tableColumns = ref<TableColumnsType>([
   {
     title: t('views.ne.neVersion.preVersion'),
     dataIndex: 'preVersion',
+    key: 'preVersion',
     align: 'left',
     width: 150,
     resizable: true,
@@ -304,6 +305,10 @@ function fnRecordVersion(
       message.warning(t('views.ne.neVersion.rollbackTipEmpty'), 3);
       return;
     }
+    if (row.prePath === '' || row.prePath === '-') {
+      message.warning(t('views.ne.neVersion.noPath'), 3);
+      return;
+    }
     if (row.preVersion === row.version) {
       contentTip = t('views.ne.neVersion.rollbackTipEqual');
     }
@@ -522,8 +527,7 @@ onMounted(() => {
             type="primary"
             :disabled="tableState.selectedRowKeys.length > 1"
             @click.prevent="
-              () =>
+              () => (modalState.openByMoreFile = !modalState.openByMoreFile)
-                (modalState.openByMoreFile = !modalState.openByMoreFile)
             "
           >
             <template #icon><UploadOutlined /></template>
@@ -615,6 +619,21 @@ onMounted(() => {
           <template v-if="column.key === 'status'">
             <DictTag :options="dictStatus" :value="record.status" />
           </template>
+          <template v-if="column.key === 'preVersion'">
+            {{ record.preVersion }}
+            <a-tooltip
+              placement="topRight"
+              v-if="
+                record.preVersion &&
+                (record.prePath === '' || record.prePath === '-')
+              "
+            >
+              <template #title>
+                {{ t('views.ne.neVersion.noPath') }}
+              </template>
+              <InfoCircleOutlined />
+            </a-tooltip>
+          </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip placement="topRight">

src/views/neUser/exportFile/index.vue

@@ -0,0 +1,356 @@
+<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 { ColumnsType } from 'ant-design-vue/es/table';
+import {  Modal, message } from 'ant-design-vue/es';
+import { parseDateToStr } from '@/utils/date-utils';
+import {
+  getBakFile,
+  getBakFileList,
+  downFile,
+  delFile,
+} from '@/api/neUser/exportFile';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import saveAs from 'file-saver';
+const { t } = useI18n();
+
+/**网元参数 */
+let logSelect = ref<string[]>([]);
+
+/**文件列表 */
+let fileList = ref<any>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**读取路径 */
+  path: '',
+  /**表名 */
+  tableName: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.logManage.neFile.fileMode'),
+    dataIndex: 'fileMode',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('views.logManage.neFile.owner'),
+    dataIndex: 'owner',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.group'),
+    dataIndex: 'group',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.size'),
+    dataIndex: 'size',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.modifiedTime'),
+    dataIndex: 'modifiedTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value * 1000);
+    },
+    width: 150,
+  },
+  {
+    title: t('views.logManage.neFile.fileName'),
+    dataIndex: 'fileName',
+    align: 'left',
+  },
+  {
+    title: t('common.operate'),
+    key: 'fileName',
+    align: 'center',
+    width: 100,
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+
+/**删除触发等待 */
+let delLoading = ref<boolean>(false);
+
+/**信息文件下载 */
+function fnDownloadFile(row: Record<string, any>) {
+  if (downLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.exportFile.downTip', {
+      fileName: row.fileName,
+    }),
+    onOk() {
+      downLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      downFile({
+        path: queryParams.path,
+        fileName: row.fileName,
+      })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.fileName}`);
+          } else {
+            message.error({
+              content: t('views.logManage.exportFile.downTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          downLoading.value = false;
+        });
+    },
+  });
+}
+
+function fnRecordDelete(row: Record<string, any>) {
+  if (delLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.exportFile.deleteTip', {
+      fileName: row.fileName,
+    }),
+    onOk() {
+      const key = 'delFile';
+      delLoading.value = true;
+      message.loading({ content: t('common.loading'), key });
+      delFile({
+        fileName: row.fileName,
+        path: queryParams.path,
+      })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('views.system.user.delSuss'),
+              key,
+              duration: 2,
+            });
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          delLoading.value = false;
+        });
+    },
+  });
+}
+
+/**网元类型选择对应修改 */
+function fnNeChange(keys: any, opt: any) {
+  queryParams.tableName = keys;
+  queryParams.path = opt.path;
+  fnGetList(1);
+}
+
+/**查询备份信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (queryParams.tableName === '') {
+    message.warning({
+      content: t('views.logManage.exportFile.selectTip'),
+      duration: 2,
+    });
+    return;
+  }
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  getBakFileList(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);
+      }
+    } else {
+      message.error(res.msg, 3);
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  getBakFile().then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      res.data.forEach((item: any) => {
+        fileList.value.push({
+          value: item.tableName,
+          label: item.tableDisplay,
+          path: item.filePath,
+        });
+      });
+    }
+  });
+  // .finally(() => {
+  //   fnGetList();
+  // });
+});
+
+</script>
+
+<template>
+  <PageContainer>
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-form :model="queryParams" name="queryParams" layout="horizontal">
+          <a-row :gutter="16" align="middle">
+            <a-col>
+              <span>{{ t('views.logManage.exportFile.fileName') }}:</span>&nbsp;
+              <a-select
+                v-model:value="logSelect"
+                :options="fileList"
+                @change="fnNeChange"
+                :allow-clear="false"
+                style="width: 200px"
+              />
+            </a-col>
+            <template v-if="queryParams.path">
+              <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
+              <a-col>
+                <a-breadcrumb>
+                  <a-breadcrumb-item>
+                    {{ queryParams.path }}
+                  </a-breadcrumb-item>
+                </a-breadcrumb>
+              </a-col>
+            </template>
+          </a-row>
+        </a-form>
+      </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-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="fileName"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 800 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'fileName'">
+            <a-space :size="8" align="center">
+              <a-button
+                type="link"
+                :loading="downLoading"
+                @click.prevent="fnDownloadFile(record)"
+                v-if="record.fileType === 'file'"
+              >
+                <template #icon><DownloadOutlined /></template>
+              </a-button>
+              <a-button
+                type="link"
+                :loading="delLoading"
+                @click.prevent="fnRecordDelete(record)"
+                v-if="record.fileType === 'file'"
+              >
+                <template #icon><DeleteOutlined /></template>
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>

src/views/perfManage/goldTarget/index.vue

@@ -985,7 +985,6 @@ onBeforeUnmount(() => {
           </a-tooltip>
           <TableColumnsDnd
             v-if="tableColumns.length > 0"
-            :cache-id="`kpiTarget_${state.neType[0]}`"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
@@ -1084,7 +1083,7 @@ onBeforeUnmount(() => {
             :scroll="{ y: 250 }"
             size="small"
             :custom-row="
-              record => ({
+              (record:any) => ({
                 onClick: () => handleRowClick(record),
                 class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
               })

src/views/perfManage/kpiCReport/index.vue

@@ -240,27 +240,33 @@ const statsColumns: TableColumnType<any>[] = [
     title: t('views.perfManage.kpiOverView.kpiName'),
     dataIndex: 'title',
     key: 'title',
-    width: '65%',
-  },
-  {
-    title: t('views.perfManage.kpiOverView.avgValue'),
-    dataIndex: 'avg',
-    key: 'avg',
-    width: '24%',
-    sortDirections: ['ascend', 'descend'],
   },
+  // {
+  //   title: t('views.perfManage.kpiOverView.totalValue'),
+  //   dataIndex: 'total',
+  //   key: 'total',
+  //   width: '12%',
+  //   sortDirections: ['ascend', 'descend'],
+  // },
+  // {
+  //   title: t('views.perfManage.kpiOverView.avgValue'),
+  //   dataIndex: 'avg',
+  //   key: 'avg',
+  //   width: '24%',
+  //   sortDirections: ['ascend', 'descend'],
+  // },
   {
     title: t('views.perfManage.kpiOverView.maxValue'),
     dataIndex: 'max',
     key: 'max',
-    width: '17%',
+    width: '200px',
     sortDirections: ['ascend', 'descend'],
   },
   {
     title: t('views.perfManage.kpiOverView.minValue'),
     dataIndex: 'min',
     key: 'min',
-    width: '17%',
+    width: '200px',
     sortDirections: ['ascend', 'descend'],
   },
 ];
@@ -356,6 +362,7 @@ function fnGetListTitle() {
             dataIndex: kpiValue,
             align: 'left',
             key: kpiValue,
+            unit: item[`unit`],
             resizable: true,
             width: 100,
             minWidth: 150,
@@ -416,8 +423,8 @@ function fnGetList() {
             duration: 2,
           });
           tableState.data = [];
-          tableColumns.value = [];
+          // tableColumns.value = [];
-          tableColumnsDnd.value = [];
+          // tableColumnsDnd.value = [];
           kpiStats.value = []; //清空数据
           fnRanderChartData();
           return false;
@@ -448,16 +455,37 @@ function fnGetList() {
           const total = Number(
             values.reduce((sum, val) => sum + val, 0).toFixed(2)
           );
-
           // 计算平均值
           const avg =
             values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
           kpiStats.value.push({
             kpiId: columns.key,
             title: columns.title,
+            unit: columns.unit,
             max: values.length > 0 ? Math.max(...values) : 0,
             min: values.length > 0 ? Math.min(...values) : 0,
             avg,
+            total: total,
+          });
+        }
+      } else {
+        kpiStats.value = [];
+        for (const columns of tableColumns.value) {
+          if (
+            columns.key === 'neName' ||
+            columns.key === 'startIndex' ||
+            columns.key === 'timeGroup'
+          ) {
+            continue;
+          }
+          kpiStats.value.push({
+            kpiId: columns.key,
+            title: columns.title,
+            unit: columns.unit,
+            max: 0,
+            min: 0,
+            avg: 0,
+            total: 0,
           });
         }
       }
@@ -606,7 +634,7 @@ function fnRanderChartData() {
 
   for (const item of orgData) {
     const keys = Object.keys(item);
-    //console.log(keys,item);//
+    //console.log(keys,item);
     for (const y of chartDataYSeriesData) {
       for (const key of keys) {
         if (y.key === key) {
@@ -744,25 +772,41 @@ function wsMessage(res: Record<string, any>) {
 // 添加一个变量来跟踪当前选中的行
 const selectedRow = ref<string[]>([]);
 
+const selectedUnit = ref<string | null>(null);
 // 添加处理行点击的方法
 function handleRowClick(record: any) {
   const index = selectedRow.value.indexOf(record.kpiId);
-
   // 如果已经选中，取消选中
   if (index > -1) {
     selectedRow.value.splice(index, 1);
     chartLegendSelected[record.title] = false;
+    // 如果取消选中的是最后一个，重置 selectedUnit
+    if (selectedRow.value.length === 0) {
+      selectedUnit.value = null;
+    }
   } else {
+    // 检查单位是否一致
+    if (selectedUnit.value && selectedUnit.value !== record.unit) {
+      message.error(
+        `${t('views.perfManage.customTarget.unitSelect')} ${selectedUnit.value}`
+      );
+      return;
+    }
+
     // 添加新的选中项
     selectedRow.value.push(record.kpiId);
 
+    // 设置选中的单位
+    if (!selectedUnit.value) {
+      selectedUnit.value = record.unit;
+    }
+
     // 如果只有一个选中项，重置为 false
     if (selectedRow.value.length === 1) {
       Object.keys(chartLegendSelected).forEach(key => {
         chartLegendSelected[key] = false;
       });
     }
-
     chartLegendSelected[record.title] = true;
   }
 
@@ -865,7 +909,7 @@ onMounted(() => {
               return;
             }
             // 无查询参数neType时 默认选择UPF
-            const queryNeType = (route.query.neType as string) || 'UPF';
+            const queryNeType = (route.query.neType as string) || 'IMS';
             const item = neCascaderOptions.value.find(
               s => s.value === queryNeType
             );
@@ -928,6 +972,7 @@ onBeforeUnmount(() => {
                 v-model:value="state.neType"
                 :options="neCascaderOptions"
                 :allow-clear="false"
+                @change="fnGetListTitle()"
                 :placeholder="t('common.selectPlease')"
               />
             </a-form-item>
@@ -1015,7 +1060,6 @@ onBeforeUnmount(() => {
           </a-tooltip>
           <TableColumnsDnd
             v-if="tableColumns.length > 0"
-            :cache-id="`kpiTarget_${state.neType[0]}`"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
@@ -1108,12 +1152,11 @@ onBeforeUnmount(() => {
             :pagination="false"
             :scroll="{ y: 250 }"
             size="small"
-            :custom-row="
+            :custom-row="(record:any) => ({
-              record => ({
+              onClick: () => handleRowClick(record),
-                onClick: () => handleRowClick(record),
+              class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
-                class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
+            })
-              })
+              "
-            "
           >
             <template #headerCell="{ column }">
               <template v-if="column.key === 'total'">
@@ -1169,6 +1212,14 @@ onBeforeUnmount(() => {
                 </span>
               </template>
             </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'avg'">
+                <span v-if="record.unit !== '%'">-</span>
+              </template>
+              <template v-if="column.key === 'total'">
+                <span v-if="record.unit == '%'">-</span>
+              </template>
+            </template>
           </a-table>
         </div>
       </div>

src/views/perfManage/kpiKeyTarget/index.vue

@@ -1333,7 +1333,7 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
                   :scroll="{ y: 'true' }"
                   :loading="chartStates[type].tableState.loading"
                   :custom-row="
-                    record => ({
+                    (record:any) => ({
                       onClick: () => handleRowClick(record, type),
                       class: selectedRows[type]?.includes(record.kpiId)
                         ? 'selected-row'
@@ -1348,7 +1348,9 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
                         <a-tooltip placement="bottom">
                           <template #title>
                             <span>
-                              {{ t('views.perfManage.kpiOverView.totalValueTip') }}
+                              {{
+                                t('views.perfManage.kpiOverView.totalValueTip')
+                              }}
                             </span>
                           </template>
                           <InfoCircleOutlined />
@@ -1361,7 +1363,9 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
                         <a-tooltip placement="bottom">
                           <template #title>
                             <span>
-                              {{ t('views.perfManage.kpiOverView.avgValueTip') }}
+                              {{
+                                t('views.perfManage.kpiOverView.avgValueTip')
+                              }}
                             </span>
                           </template>
                           <InfoCircleOutlined />
@@ -1374,7 +1378,9 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
                         <a-tooltip placement="bottom">
                           <template #title>
                             <span>
-                              {{ t('views.perfManage.kpiOverView.maxValueTip') }}
+                              {{
+                                t('views.perfManage.kpiOverView.maxValueTip')
+                              }}
                             </span>
                           </template>
                           <InfoCircleOutlined />
@@ -1387,7 +1393,9 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
                         <a-tooltip placement="bottom">
                           <template #title>
                             <span>
-                              {{ t('views.perfManage.kpiOverView.minValueTip') }}
+                              {{
+                                t('views.perfManage.kpiOverView.minValueTip')
+                              }}
                             </span>
                           </template>
                           <InfoCircleOutlined />

src/views/perfManage/kpiOverView/index.vue

@@ -42,7 +42,7 @@ interface ChartDataItem {
 const tableLoading = ref(false);
 const rangeLoading = ref(false);
 //网元类型定义
-const ALL_NE_TYPES = ['AMF', 'SMF', 'UPF', 'MME', 'IMS', 'SMSC'] as const;
+const ALL_NE_TYPES = ['AMF', 'UPF', 'IMS'] as const;
 type NeType = (typeof ALL_NE_TYPES)[number];
 
 echarts.use([
@@ -122,12 +122,16 @@ const toggleRealtime = () => {
 
 // 定义要筛选的指标 ID，按网元类型组织
 const TARGET_KPI_IDS: Record<NeType, string[]> = {
-  AMF: ['AMF.02', 'AMF.03', 'AMF.A.07', 'AMF.A.08'],
+  AMF: ['AMF.02', 'AMF.03'],
-  SMF: ['SMF.02', 'SMF.03', 'SMF.04', 'SMF.05'],
+  UPF: ['UPF.04', 'UPF.05'],
-  UPF: ['UPF.03', 'UPF.04', 'UPF.05', 'UPF.06'],
+  IMS: ['SCSCF.03', 'SCSCF.04', 'SCSCF.05', 'SCSCF.06', 'SCSCF.07', 'SCSCF.08'],
-  MME: ['MME.A.01', 'MME.A.02', 'MME.A.03'],
+
-  IMS: ['SCSCF.01', 'SCSCF.02', 'SCSCF.05', 'SCSCF.06'],
+  // AMF: ['AMF.02', 'AMF.03', 'AMF.A.07', 'AMF.A.08'],
-  SMSC: ['SMSC.A.01', 'SMSC.A.02', 'SMSC.A.03'],
+  // SMF: ['SMF.02', 'SMF.03', 'SMF.04', 'SMF.05'],
+  // UPF: ['UPF.03', 'UPF.04', 'UPF.05', 'UPF.06'],
+  // MME: ['MME.A.01', 'MME.A.02', 'MME.A.03'],
+  // IMS: ['SCSCF.01', 'SCSCF.02', 'SCSCF.05', 'SCSCF.06'],
+  // SMSC: ['SMSC.A.01', 'SMSC.A.02', 'SMSC.A.03'],
 };
 
 // 实时数据开关函数
@@ -189,13 +193,15 @@ const wsMessage = (res: Record<string, any>) => {
     return;
   }
   const { code, data } = res;
-  if (code === RESULT_CODE_ERROR || !data?.groupId) return;
+  if (code === RESULT_CODE_ERROR || !data?.groupId) {
+    tableLoading.value = false;
+    return;
+  }
   handleWebSocketMessage(data.data);
 };
 // 添加数据处理函数
 const processChartData = (rawData: any[]) => {
   const groupedData = new Map<string, any>(); //数据按时间分组
-
   rawData.forEach(item => {
     //合并相同时间点的数据
     const timeKey = item.timeGroup;
@@ -752,7 +758,22 @@ const kpiStats = ref<KPIStats[]>([]);
 // 添加一个计算函数来更新统计数据
 const updateKpiStats = () => {
   if (!chartData.value.length || !kpiColumns.value.length) {
-    kpiStats.value = [];
+    kpiStats.value = selectedKPIs.value.map(kpiId => {
+      // 找到对应的KPI标题
+      let title = kpiId;
+      const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
+      if (kpi) {
+        title = kpi.title;
+      }
+      return {
+        kpiId: kpiId,
+        title: title,
+        max: 0,
+        min: 0,
+        avg: 0,
+        total: 0,
+      };
+    });
     return;
   }
   kpiStats.value = selectedKPIs.value
@@ -980,6 +1001,7 @@ const tableRowConfig = computed(() => {
   </div>
 </template>
 <style scoped>
+/* 基础布局样式 */
 .kpi-overview {
   padding: 20px;
 }
@@ -1093,12 +1115,10 @@ const tableRowConfig = computed(() => {
   background-color: rgba(24, 144, 255, 0.2) !important;
 }
 
-[data-theme='dark'] :deep(.selected-row:hover) {
+:deep(.ant-checkbox-wrapper) {
-  background-color: rgba(24, 144, 255, 0.3) !important;
+  width: 100%;
-}
+  overflow: hidden;
-
+  text-overflow: ellipsis;
-/* 鼠标悬停样式 */
+  white-space: nowrap;
-:deep(.ant-table-tbody tr:hover) {
-  cursor: pointer;
 }
 </style>

src/views/system/dict/data.vue

@@ -131,6 +131,9 @@ type TabeStateType = {
   selectedRowKeys: (string | number)[];
 };
 
+//是否显示type框
+const drawerVisible = ref(true);
+
 /**表格状态 */
 let tableState: TabeStateType = reactive({
   loading: false,
@@ -502,9 +505,11 @@ onMounted(() => {
         message.error(t('views.system.dictData.typeDataErr'), 3);
       }
     });
+    drawerVisible.value = true;
   } else {
     // 获取列表数据
     fnGetList();
+    drawerVisible.value = false;
   }
 });
 </script>
@@ -881,7 +886,7 @@ onMounted(() => {
                 default-value="sys_oper_type"
                 :placeholder="t('common.selectPlease')"
                 :options="dict.sysDictType"
-                :disabled="true"
+                :disabled="drawerVisible"
               >
               </a-select>
             </a-form-item>

src/views/system/menu/index.vue

@@ -1119,6 +1119,21 @@ onMounted(() => {
           </a-col>
         </a-row>
 
+        <a-form-item
+          :label="t('views.system.menu.menuStatus')"
+          name="status"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+          v-if="modalState.from.menuType === MENU_TYPE_BUTTON"
+        >
+          <a-select
+            v-model:value="modalState.from.status"
+            default-value="0"
+            :options="dict.sysNormalDisable"
+          >
+          </a-select>
+        </a-form-item>
+
         <a-form-item
           :label="t('views.system.menu.formLoc')"
           name="component"

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/system/role/index.vue

@@ -32,8 +32,10 @@ import { hasPermissions } from '@/plugins/auth-user';
 import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
+import useUserStore from '@/store/modules/user';
 const { t } = useI18n();
 const { getDict } = useDictStore();
+const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
 const routePath = route.path;
@@ -144,7 +146,7 @@ let tableColumns: ColumnsType = [
     title: t('views.system.role.createTime'),
     dataIndex: 'createTime',
     align: 'center',
-    width: 150,
+    width: 200,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);
@@ -366,7 +368,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
       menuTreeSelect().then(res => {
         modalState.confirmLoading = false;
         hide();
-        if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.code === RESULT_CODE_SUCCESS) {
           menuTree.checkedKeys = parseTreeKeys(res.data, 'id');
           menuTree.expandedKeys = parseTreeNodeKeys(res.data, 'id');
           menuTree.treeData = res.data;
@@ -940,6 +942,7 @@ onMounted(() => {
               v-if="
                 dict.sysNormalDisable.length > 0 &&
                 record.roleId !== '1' &&
+                !userStore.roles?.includes(record.roleKey) &&
                 hasPermissions(['system:role:edit'])
               "
               v-model:checked="record.status"
@@ -968,7 +971,12 @@ onMounted(() => {
                   <template #icon><ProfileOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="record.roleId !== '1'">
+              <a-tooltip
+                v-if="
+                  record.roleId !== '1' &&
+                  !userStore.roles?.includes(record.roleKey)
+                "
+              >
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
@@ -978,7 +986,12 @@ onMounted(() => {
                   <template #icon><FormOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip v-if="record.roleId !== '1'">
+              <a-tooltip
+                v-if="
+                  record.roleId !== '1' &&
+                  !userStore.roles?.includes(record.roleKey)
+                "
+              >
                 <template #title>{{ t('common.deleteText') }}</template>
                 <a-button
                   type="link"
@@ -1000,7 +1013,7 @@ onMounted(() => {
                   <template #icon><SecurityScanOutlined /></template>
                 </a-button>
               </a-tooltip>
-              <a-tooltip placement="topRight" v-if="record.roleId !== '1'">
+              <a-tooltip placement="topRight" v-if="false">
                 <template #title>{{
                   t('views.system.role.distributeUser')
                 }}</template>

src/views/system/user/index.vue

@@ -157,7 +157,7 @@ let tableColumns: ColumnsType = [
     title: t('views.system.user.loginTime'),
     dataIndex: 'loginDate',
     align: 'left',
-    width: 150,
+    width: 200,
     customRender(opt) {
       if (+opt.value <= 0) return '';
       return parseDateToStr(+opt.value);

src/views/traceManage/pcap/file.vue

@@ -5,7 +5,7 @@ import { SizeType } from 'ant-design-vue/es/config-provider';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
-import { getNeFile, listNeFiles } from '@/api/tool/neFile';
+import { getNeDirZip, getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import ViewDrawer from '@/views/logManage/neFile/components/ViewDrawer.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -79,7 +79,7 @@ let tableColumns: ColumnsType = reactive([
       if (!opt.value) return '';
       return parseDateToStr(opt.value * 1000);
     },
-    width: 150,
+    width: 200,
   },
   {
     title: t('views.logManage.neFile.fileName'),
@@ -168,6 +168,45 @@ function fnDownloadFile(row: Record<string, any>) {
   });
 }
 
+/**信息文件下载 */
+function fnDownloadFileZIP(row: Record<string, any>) {
+  if (downLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.neFile.downTipZip', { fileName: row.fileName }),
+    onOk() {
+      downLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      getNeDirZip({
+        neType: queryParams.neType,
+        neId: queryParams.neId,
+        path: `${queryParams.path}/${row.fileName}`,
+        delTemp: true,
+      })
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.fileName}.zip`);
+          } else {
+            message.error({
+              content: t('views.logManage.neFile.downTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          downLoading.value = false;
+        });
+    },
+  });
+}
+
 /**tmp目录下，UPF标准版内部输出目录 */
 let tmp = ref<boolean>(false);
 
@@ -404,6 +443,15 @@ onMounted(() => {
                 <template #icon><DownloadOutlined /></template>
                 {{ t('common.downloadText') }}
               </a-button>
+              <a-button
+                type="link"
+                :loading="downLoading"
+                @click.prevent="fnDownloadFileZIP(record)"
+                v-if="record.fileType === 'dir'"
+              >
+                <template #icon><DownloadOutlined /></template>
+                {{ t('common.downloadText') }}
+              </a-button>
               <a-button
                 type="link"
                 :loading="downLoading"

src/views/traceManage/tshark/components/PacketTable.vue

@@ -234,24 +234,17 @@ watchEffect(() => {
   text-align: right;
 }
 .thead-item:nth-child(2),
-.tbody-item:nth-child(2) {
+.tbody-item:nth-child(2),
-  flex-basis: 8rem;
-  width: 8rem;
-}
 .thead-item:nth-child(3),
-.tbody-item:nth-child(3) {
+.tbody-item:nth-child(3),
-  flex-basis: 8rem;
-  width: 8rem;
-}
 .thead-item:nth-child(4),
-.tbody-item:nth-child(4) {
+.tbody-item:nth-child(4),
-  flex-basis: 8rem;
-  width: 8rem;
-}
 .thead-item:nth-child(5),
 .tbody-item:nth-child(5) {
-  flex-basis: 7rem;
+  flex-basis: 8rem;
-  width: 7rem;
+  width: 8rem;
+  overflow-y: auto;
+  text-wrap: nowrap;
 }
 .thead-item:nth-child(6),
 .tbody-item:nth-child(6) {
@@ -271,16 +264,36 @@ watchEffect(() => {
 }
 
 /* 修改滚动条的样式 */
+.thead-item:nth-child(2)::-webkit-scrollbar,
+.tbody-item:nth-child(2)::-webkit-scrollbar,
+.tbody-item:nth-child(3)::-webkit-scrollbar,
+.tbody-item:nth-child(4)::-webkit-scrollbar,
+.tbody-item:nth-child(5)::-webkit-scrollbar,
 .tbody-item:nth-child(7)::-webkit-scrollbar {
   width: 4px; /* 设置滚动条宽度 */
   height: 4px;
 }
+.thead-item:nth-child(2)::-webkit-scrollbar-track,
+.tbody-item:nth-child(2)::-webkit-scrollbar-track,
+.tbody-item:nth-child(3)::-webkit-scrollbar-track,
+.tbody-item:nth-child(4)::-webkit-scrollbar-track,
+.tbody-item:nth-child(5)::-webkit-scrollbar-track,
 .tbody-item:nth-child(7)::-webkit-scrollbar-track {
   background-color: #f0f0f0; /* 设置滚动条轨道背景颜色 */
 }
+.thead-item:nth-child(2)::-webkit-scrollbar-thumb,
+.tbody-item:nth-child(2)::-webkit-scrollbar-thumb,
+.tbody-item:nth-child(3)::-webkit-scrollbar-thumb,
+.tbody-item:nth-child(4)::-webkit-scrollbar-thumb,
+.tbody-item:nth-child(5)::-webkit-scrollbar-thumb,
 .tbody-item:nth-child(7)::-webkit-scrollbar-thumb {
   background-color: #bfbfbf; /* 设置滚动条滑块颜色 */
 }
+.thead-item:nth-child(2)::-webkit-scrollbar-thumb:hover,
+.tbody-item:nth-child(2)::-webkit-scrollbar-thumb:hover,
+.tbody-item:nth-child(3)::-webkit-scrollbar-thumb:hover,
+.tbody-item:nth-child(4)::-webkit-scrollbar-thumb:hover,
+.tbody-item:nth-child(5)::-webkit-scrollbar-thumb:hover,
 .tbody-item:nth-child(7)::-webkit-scrollbar-thumb:hover {
   background-color: #1890ff; /* 设置鼠标悬停时滚动条滑块颜色 */
 }

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, ''),
         },