取消隐藏分页

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/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',
@@ -434,7 +512,34 @@ export default {
         sgwcVolumeGPRSUplink: 'GPRS Uplink',
         sgwcVolumeGPRSDownlink: 'GPRS Downlink',
         recordPath:'Record Path',
-        msd:'MSD',
+        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",

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:'用户信息',
@@ -435,6 +517,33 @@ export default {
         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: "事件类型",

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

@@ -12,17 +12,15 @@ import {
 } from '@/constants/result-constants';
 import useDictStore from '@/store/modules/dict';
 import useNeInfoStore from '@/store/modules/neinfo';
-import {
+import { delMFDataCDR, exportMFDataCDR, listMFDataCDR } from '@/api/neData/mf';
-  delMFDataCDR,
-  exportMFDataCDR,
-  listMFDataCDR,
-} from '@/api/neData/mf';
 import { parseDateToStr, parseDuration } from '@/utils/date-utils';
 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';
+import { ProModal } from 'antdv-pro-modal';
+
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const { getDict } = useDictStore();
@@ -205,23 +203,23 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.dashboard.cdr.recordPath'),
     dataIndex: 'cdrJSON',
-    key: 'record_path',
+    key: 'recordPath',
     align: 'left',
     width: 100,
     customRender(opt) {
       const cdrJSON = opt.value;
-      return cdrJSON.record_path;
+      return cdrJSON.recordPath;
     },
   },
   {
     title: t('views.dashboard.cdr.msd'),
     dataIndex: 'cdrJSON',
-    key: 'msd',
+    key: 'msdData',
     align: 'left',
     width: 100,
     customRender(opt) {
       const cdrJSON = opt.value;
-      return cdrJSON.msd;
+      return cdrJSON.msdData;
     },
   },
   {
@@ -301,12 +299,64 @@ type ModalStateType = {
   confirmLoading: boolean;
   /**最大ID值 */
   maxId: number;
+  /**详情框是否显示 */
+  openByView: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  /**更新加载数据按钮 loading */
+  loadDataLoading: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
   confirmLoading: false,
   maxId: 0,
+  openByView: false,
+  title: 'mfCDR',
+  from: {
+    control: {
+      automaticActivation: true,
+      positionCanBeTrusted: true,
+      testCall: false,
+      vehicleType: '',
+    },
+
+    messageIdentifier: 0,
+    numberOfOccupants: 0,
+
+    recentVehicleLocationN1: {
+      latitudeDelta: 0,
+      longitudeDelta: 0,
+    },
+    recentVehicleLocationN2: {
+      latitudeDelta: 0,
+      longitudeDelta: 0,
+    },
+
+    timestamp: 0,
+    vehicleDirection: 0,
+    vehicleIdentificationNumber: {
+      isovds: '',
+      isovisModelyear: '',
+      isovisSeqPlant: '',
+      isowmi: '',
+    },
+
+    vehicleLocation: {
+      positionLatitude: 0,
+      positionLongitude: 0,
+    },
+
+    vehiclePropulsionStorageType: {
+      dieselTankPresent: false,
+      electricEnergyStorage: true,
+      gasolineTankPresent: true,
+    },
+  },
+  loadDataLoading: false,
 });
 
 /**
@@ -514,6 +564,41 @@ function wsMessage(res: Record<string, any>) {
   }
 }
 
+function fnModalVisibleByEdit(record: Record<string, any>) {
+  modalState.title = t('common.viewText') + t('views.dashboard.cdr.msd');
+  modalState.openByView = true;
+
+  let msdDataObj = {};
+
+  try {
+    msdDataObj = JSON.parse(record.cdrJSON.msdData);
+  } catch (e) {
+    msdDataObj = {};
+  }
+  modalState.from = Object.assign(modalState.from, msdDataObj);
+  // if (!record || !record.cdrJSON) return;
+  // const cdrJSON = record.cdrJSON;
+  // Modal.info({
+  //   title: t('views.dashboard.cdr.msdData'),
+  //   width: '80%',
+  //   content: (
+  //     <pre style="white-space: pre-wrap; word-break: break-all;">
+  //       {JSON.stringify(cdrJSON, null, 2)}
+  //     </pre>
+  //   ),
+  //   okText: t('common.copy'),
+  //   onOk() {
+  //     fnRecordCopy(JSON.stringify(cdrJSON, null, 2));
+  //   },
+  // });
+}
+
+function fnModalCancel() {
+  // modalState.openByEdit = false;
+  modalState.openByView = false;
+  //modalStateFrom.resetFields();
+}
+
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')]).then(
@@ -565,26 +650,46 @@ onBeforeUnmount(() => {
 
 <template>
   <PageContainer>
-    <a-card v-show="tableState.seached" :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
+    <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="MF" name="neId ">
-              <a-select v-model:value="queryParams.neId" :options="neOtions" :placeholder="t('common.selectPlease')"
+              <a-select
-                @change="fnQueryReset()" />
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
+              />
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item :label="t('views.dashboard.cdr.called')" name="calledParty">
+            <a-form-item
-              <a-input v-model:value="queryParams.calledParty" allow-clear
+              :label="t('views.dashboard.cdr.called')"
-                :placeholder="t('common.inputPlease')"></a-input>
+              name="calledParty"
+            >
+              <a-input
+                v-model:value="queryParams.calledParty"
+                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.dashboard.cdr.caller')" name="callerParty ">
+            <a-form-item
-              <a-input v-model:value="queryParams.callerParty" allow-clear
+              :label="t('views.dashboard.cdr.caller')"
-                :placeholder="t('common.inputPlease')"></a-input>
+              name="callerParty "
+            >
+              <a-input
+                v-model:value="queryParams.callerParty"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
             </a-form-item>
           </a-col>
           <a-col :lg="4" :md="12" :xs="24">
@@ -606,16 +711,33 @@ onBeforeUnmount(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item :label="t('views.dashboard.cdr.recordType')" name="recordType">
+            <a-form-item
-              <a-select v-model:value="recordTypes" mode="multiple" :options="['MOC', 'MTC'].map(v => ({ value: v }))"
+              :label="t('views.dashboard.cdr.recordType')"
-                :placeholder="t('common.selectPlease')" @change="fnQueryRecordTypeChange"></a-select>
+              name="recordType"
+            >
+              <a-select
+                v-model:value="recordTypes"
+                mode="multiple"
+                :options="['MOC', 'MTC'].map(v => ({ value: v }))"
+                :placeholder="t('common.selectPlease')"
+                @change="fnQueryRecordTypeChange"
+              ></a-select>
             </a-form-item>
           </a-col>
           <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item :label="t('views.dashboard.cdr.time')" name="queryRangePicker">
+            <a-form-item
-              <a-range-picker v-model:value="queryRangePicker" :presets="rangePickerPresets" :bordered="true"
+              :label="t('views.dashboard.cdr.time')"
-                :allow-clear="false" style="width: 100%" :show-time="{ format: 'HH:mm:ss' }"
+              name="queryRangePicker"
-                format="YYYY-MM-DD HH:mm:ss"></a-range-picker>
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                :presets="rangePickerPresets"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+              ></a-range-picker>
             </a-form-item>
           </a-col>
         </a-row>
@@ -626,10 +748,17 @@ onBeforeUnmount(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-popconfirm placement="bottomLeft" :title="!realTimeData
+          <a-popconfirm
-              ? t('views.dashboard.cdr.realTimeDataStart')
+            placement="bottomLeft"
-              : t('views.dashboard.cdr.realTimeDataStop')
+            :title="
-            " ok-text="Yes" cancel-text="No" @confirm="fnRealTime()">
+              !realTimeData
+                ? t('views.dashboard.cdr.realTimeDataStart')
+                : t('views.dashboard.cdr.realTimeDataStop')
+            "
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="fnRealTime()"
+          >
             <a-button type="primary" :danger="realTimeData">
               <template #icon>
                 <FundOutlined />
@@ -642,8 +771,14 @@ onBeforeUnmount(() => {
             </a-button>
           </a-popconfirm>
 
-          <a-button type="default" danger :disabled="tableState.selectedRowKeys.length <= 0"
+          <a-button
-            :loading="modalState.confirmLoading" @click.prevent="fnRecordDelete('0')" v-perms:has="['cdr:ne:remove']">
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['cdr:ne:remove']"
+          >
             <template #icon>
               <DeleteOutlined />
             </template>
@@ -664,8 +799,13 @@ onBeforeUnmount(() => {
         <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch v-model:checked="tableState.seached" :checked-children="t('common.switch.show')"
+            <a-switch
-              :un-checked-children="t('common.switch.hide')" size="small" :disabled="realTimeData" />
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+              :disabled="realTimeData"
+            />
           </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
@@ -684,7 +824,10 @@ onBeforeUnmount(() => {
                 </template>
               </a-button>
               <template #overlay>
-                <a-menu :selected-keys="[tableState.size as string]" @click="fnTableSize">
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
                   <a-menu-item key="default">
                     {{ t('common.size.default') }}
                   </a-menu-item>
@@ -702,21 +845,46 @@ onBeforeUnmount(() => {
       </template>
 
       <!-- 表格列表 -->
-      <a-table class="table" row-key="id" :columns="tableColumns" :loading="tableState.loading"
+      <a-table
-        :data-source="tableState.data" :size="tableState.size" :pagination="tablePagination"
+        class="table"
-        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }" :row-selection="{
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
+        :row-selection="{
           type: 'checkbox',
           columnWidth: '48px',
           selectedRowKeys: tableState.selectedRowKeys,
           onChange: fnTableSelectedRowKeys,
-        }">
+        }"
+      >
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'msdData'">
+            <a-button
+              type="link"
+              @click.prevent="fnModalVisibleByEdit(record)"
+              :disabled="!record.cdrJSON.msdData"
+            >
+              <template #icon><InfoCircleOutlined /></template>
+            </a-button>
+          </template>
+
           <template v-if="column.key === 'callType'">
-            <DictTag :options="dict.cdrCallType" :value="record.cdrJSON.callType" />
+            <DictTag
+              :options="dict.cdrCallType"
+              :value="record.cdrJSON.callType"
+            />
           </template>
           <template v-if="column.key === 'cause'">
             <span v-if="record.cdrJSON.callType !== 'sms'">
-              <DictTag :options="dict.cdrSipCode" :value="record.cdrJSON.cause" value-default="0" />
+              <DictTag
+                :options="dict.cdrSipCode"
+                :value="record.cdrJSON.cause"
+                value-default="0"
+              />
             </span>
             <span v-else>
               {{ t('views.dashboard.cdr.resultOk') }}
@@ -726,7 +894,10 @@ onBeforeUnmount(() => {
             <a-space :size="8" align="center">
               <a-tooltip>
                 <template #title>{{ t('common.copyText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordCopy(record.cdrJSON)">
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordCopy(record.cdrJSON)"
+                >
                   <template #icon>
                     <CopyOutlined />
                   </template>
@@ -734,7 +905,11 @@ onBeforeUnmount(() => {
               </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.deleteText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordDelete(record.id)" v-perms:has="['cdr:ne:remove']">
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.id)"
+                  v-perms:has="['cdr:ne:remove']"
+                >
                   <template #icon>
                     <DeleteOutlined />
                   </template>
@@ -774,7 +949,10 @@ onBeforeUnmount(() => {
               </a-divider>
               <div>
                 <span>{{ t('views.dashboard.cdr.type') }}: </span>
-                <DictTag :options="dict.cdrCallType" :value="record.cdrJSON.callType" />
+                <DictTag
+                  :options="dict.cdrCallType"
+                  :value="record.cdrJSON.callType"
+                />
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.duration') }}: </span>
@@ -794,7 +972,11 @@ onBeforeUnmount(() => {
               <div>
                 <span>{{ t('views.dashboard.cdr.result') }}: </span>
                 <span v-if="record.cdrJSON.callType !== 'sms'">
-                  <DictTag :options="dict.cdrSipCode" :value="record.cdrJSON.cause" value-default="0" />
+                  <DictTag
+                    :options="dict.cdrSipCode"
+                    :value="record.cdrJSON.cause"
+                    value-default="0"
+                  />
                 </span>
                 <span v-else>
                   {{ t('views.dashboard.cdr.resultOk') }}
@@ -825,6 +1007,323 @@ onBeforeUnmount(() => {
         </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.openByView"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @cancel="fnModalCancel"
+      :footer="null"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="vertical"
+        :label-col="{ style: { width: '100%' } }"
+        :labelWrap="false"
+      >
+        <a-row :gutter="[32, 4]">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.messageIdentifier')"
+              name="messageIdentifier"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.messageIdentifier"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.numberOfOccupants')"
+              name="ticketId"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.numberOfOccupants"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.timestamp')"
+              name="timestamp"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.timestamp"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.vehicleDirection')"
+              name="vehicleDirection"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.vehicleDirection"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-divider orientation="left">
+            {{ t('views.dashboard.cdr.control') }}
+          </a-divider>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.automaticActivation')"
+              name="automaticActivation"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.control.automaticActivation"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.positionCanBeTrusted')"
+              name="positionCanBeTrusted"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.control.positionCanBeTrusted"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.testCall')"
+              name="testCall"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.control.testCall"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.vehicleType')"
+              name="ticketId"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.control.vehicleType"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-divider orientation="left">
+            {{ t('views.dashboard.cdr.recentVehicleLocationN1') }}
+          </a-divider>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.n1latitudeDelta')"
+              name="n1latitudeDelta"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.recentVehicleLocationN1.latitudeDelta
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.n1longitudeDelta')"
+              name="n1longitudeDelta"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.recentVehicleLocationN1.longitudeDelta
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-divider orientation="left">
+            {{ t('views.dashboard.cdr.recentVehicleLocationN2') }}
+          </a-divider>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.n2latitudeDelta')"
+              name="n2latitudeDelta"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.recentVehicleLocationN2.latitudeDelta
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.n2longitudeDelta')"
+              name="n2longitudeDelta"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.recentVehicleLocationN2.longitudeDelta
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-divider orientation="left">
+            {{ t('views.dashboard.cdr.vehicleIdentificationNumber') }}
+          </a-divider>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.dashboard.cdr.isovds')" name="isovds">
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehicleIdentificationNumber.isovds
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.isovisModelyear')"
+              name="isovisModelyear"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehicleIdentificationNumber.isovisModelyear
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.isovisSeqPlant')"
+              name="isovisSeqPlant"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehicleIdentificationNumber.isovisSeqPlant
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.dashboard.cdr.isowmi')" name="isowmi">
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehicleIdentificationNumber.isowmi
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-divider orientation="left">
+            {{ t('views.dashboard.cdr.vehicleLocation') }}
+          </a-divider>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.positionLatitude')"
+              name="positionLatitude"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="modalState.from.vehicleLocation.positionLatitude"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.positionLongitude')"
+              name="positionLongitude"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehicleLocation.positionLongitude
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-divider orientation="left">
+            {{ t('views.dashboard.cdr.vehiclePropulsionStorageType') }}
+          </a-divider>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.dieselTankPresent')"
+              name="dieselTankPresent"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehiclePropulsionStorageType.dieselTankPresent
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.electricEnergyStorage')"
+              name="electricEnergyStorage"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehiclePropulsionStorageType
+                    .electricEnergyStorage
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.gasolineTankPresent')"
+              name="gasolineTankPresent"
+            >
+              <a-input
+                :disabled="true"
+                v-model:value="
+                  modalState.from.vehiclePropulsionStorageType
+                    .gasolineTankPresent
+                "
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </ProModal>
   </PageContainer>
 </template>
 

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

@@ -1,53 +1,370 @@
 <script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+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([10, 20, 30, 40, 30, 20, 0]);
+const activeCallsData = ref([]);
-const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
+const mosData = ref([]);
-const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
+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; color: #000; margin-bottom: 20px;">
+    <div style="font-size:32px; font-weight: bold;  margin-bottom: 20px;    text-align: center;">
-      Users</div>
+      {{ t('views.dashboard.overview.psapTitle') }}</div>
-    <a-row :gutter="[16, 16]">
+
+    <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">
+        <a-card :bordered="false" class="metric-card"
-          <div class="card-title">Online Users</div>
+          @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">
-                0
+                {{ activeCalls }}
-                <a-icon class="trend-icon up" type="arrow-up" />
+                <a-icon :class="['trend-icon', activeCallsChange >= 0 ? 'up' : 'down']"
+                  :type="activeCallsChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">-20 last 5m</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">
+        <a-card :bordered="false" class="metric-card"
-          <div class="card-title">Total Users</div>
+          @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">
-                70
+                {{ onlineCount }}
-                <a-icon class="trend-icon right" type="arrow-right" />
+                <a-icon :class="['trend-icon', onlineCountChange >= 0 ? 'up' : 'down']"
+                  :type="onlineCountChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+40 last 5m</div>
+              <div class="metric-change">{{ onlineCountChange >= 0 ? '+' : '' }}{{ onlineCountChange }} last 10s</div>
             </div>
           </div>
         </a-card>
@@ -56,26 +373,124 @@ const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
 
 
       <a-col :xs="24" :sm="24" :lg="8">
-        <a-card :bordered="false" class="metric-card">
+        <a-card :bordered="false" class="metric-card" @click="fnToRouter('Callings_20001')">
-          <div class="card-title">Parallel Users</div>
+          <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">
-                30
+                {{ failedCallsCount }}
+                <a-icon :class="['trend-icon', failedCallsCountChange >= 0 ? 'up' : 'down']"
+                  :type="failedCallsCountChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">-10 last 5m</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;
 }
@@ -105,6 +520,7 @@ const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
 .metric-info {
   margin-left: 16px;
   text-align: right;
+  min-width: 90px;
 }
 
 .full-width {

src/views/dashboard/overview/index.vue

@@ -3,7 +3,7 @@ import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 
 
 
-import DashboardCards from './components/MFOverview/DashboardCards.vue';
+import DashboardCards from './components/mfOverview/DashboardCards.vue';
 
 onMounted(() => {
 });

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

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

src/views/ne/neConfig/index.vue

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

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

@@ -109,7 +109,7 @@ let modalState: ModalStateType = reactive({
     ip: '',
     port: 33030,
     pvFlag: 'PNF',
-    rmUid: '4400HXMF001',
+    rmUid: '4400PSAPMF0001',
     neAddress: '',
     dn: '',
     vendorName: '',
@@ -321,14 +321,14 @@ function fnNeTypeChange(v: any) {
     });
   }
 
-  modalState.from.rmUid = `4400HX${v}${modalState.from.neId}`; // 4400HX1MF001
+  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}`; // 4400HX1MF001
+  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/neQuickSetup/components/NeInfoConfig.vue

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

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

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

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