取消隐藏分页

.env.development

@@ -1,5 +1,5 @@
 # 历史路径-哈希带井号标识
-VITE_HISTORY_HASH = false
+VITE_HISTORY_HASH = true
 
 # 历史路径-前缀URL如：/h5
 VITE_HISTORY_BASE_URL = "/"
@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC"
 VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.241102"
+VITE_APP_VERSION = "2.250412"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

.env.production

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

README.md

@@ -5,13 +5,6 @@
 - 图标来源 [@ant-design/icons-vue](https://ant.design/components/icon)
 - 菜单图标使用自定义 iconfont `font_8d5l8fzk5b87iudi.js`图标文件
 
-## 测试环境
-
-```text
-Nginx: http://192.168.2.166:3188/#/index
-后端暴露端口: http://192.168.2.166:33030
-```
-
 ## 程序命令
 
 项目目录下 `.env.[环境]` 文件对应环境的一些配置，启动前请检查文件内是否配置正确。

package.json

@@ -13,34 +13,34 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
-    "@antv/g6": "~4.8.24",
+    "@antv/g6": "4.8.24",
     "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-yaml": "^6.1.1",
-    "@codemirror/merge": "^6.6.3",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/merge": "^6.8.0",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@tato30/vue-pdf": "^1.10.0",
-    "@vueuse/core": "~10.10.1",
+    "@tato30/vue-pdf": "^1.11.3",
+    "@vueuse/core": "^12.5.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
-    "ant-design-vue": "^3.2.20",
-    "antdv-pro-layout": "~3.3.5",
-    "antdv-pro-modal": "^3.1.0",
+    "ant-design-vue": "^4.2.6",
+    "antdv-pro-layout": "^4.2.0",
+    "antdv-pro-modal": "^4.0.6",
     "codemirror": "^6.0.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
-    "echarts": "~5.5.0",
+    "echarts": "~5.6.0",
     "file-saver": "^2.0.5",
-    "grid-layout-plus": "^1.0.5",
-    "intl-tel-input": "^23.8.1",
+    "grid-layout-plus": "^1.0.6",
+    "intl-tel-input": "~25.2.0",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "nprogress": "^0.2.0",
     "p-queue": "~8.0.1",
-    "pinia": "^2.1.7",
-    "vue": "~3.3.13",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.4.0",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.0",
+    "vue-router": "^4.5.0",
     "vue3-smooth-dnd": "^0.0.6",
     "xlsx": "~0.18.5"
   },
@@ -50,12 +50,12 @@
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^18.0.0",
     "@types/nprogress": "^0.2.3",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "less": "^4.2.0",
-    "typescript": "~5.4.5",
-    "unplugin-vue-components": "~0.26.0",
-    "vite": "~5.3.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "less": "^4.2.1",
+    "typescript": "~5.6.3",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.1.0",
     "vite-plugin-compression": "~0.5.1",
-    "vue-tsc": "~2.0.22"
+    "vue-tsc": "^2.2.0"
   }
 }

public/default/config.js

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

public/svg/base4G.svg

@@ -0,0 +1,28 @@
+<svg width="1024" height="1024" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
+
+ <g>
+  <title>background</title>
+  <rect fill="none" id="canvas_background" height="1026" width="1026" y="-1" x="-1"/>
+  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
+   <rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="768" width="1024"/>
+  </g>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <g stroke="null" id="svg_15">
+   <path stroke="null" id="svg_4" fill="#B5D6FB" d="m512.094844,961.632039c-1.327621,0 -2.560412,-0.405439 -3.793202,-1.114958l-405.588164,-251.575028c-2.275921,-1.419037 -3.698372,-4.054392 -3.698372,-6.892467l0,-90.007504c0,-2.838074 1.422451,-5.473429 3.698372,-6.892467l405.588164,-255.426701c1.137961,-0.709519 2.465582,-1.114958 3.793202,-1.114958s2.655242,0.405439 3.793202,1.114958l405.493334,255.426701c2.275921,1.419037 3.698372,4.054392 3.698372,6.892467l0,90.007504c0,2.838074 -1.422451,5.473429 -3.698372,6.892467l-405.588164,251.575028c-1.137961,0.709519 -2.465582,1.114958 -3.698372,1.114958z"/>
+   <path stroke="null" id="svg_5" fill="#0276F7" d="m512.094844,356.615382l405.398504,255.426701l0,90.007504l-66.096551,40.94936l-339.301952,210.625668l-339.491613,-210.625668l-66.096551,-40.94936l0,-90.007504l405.588164,-255.426701m0,-16.014849c-2.655242,0 -5.215653,0.709519 -7.586405,2.229916l-405.588164,255.426701c-4.551843,2.838074 -7.396745,8.108784 -7.396745,13.784933l0,90.007504c0,5.676149 2.844902,10.946859 7.491575,13.886293l66.096551,41.05072l339.491613,210.625668c2.275921,1.419037 4.931163,2.128556 7.491575,2.128556s5.215653,-0.709519 7.491575,-2.128556l339.301952,-210.625668l66.096551,-40.94936c4.646673,-2.838074 7.491575,-8.108784 7.491575,-13.886293l0,-90.007504c0,-5.676149 -2.844902,-10.946859 -7.396745,-13.784933l-405.398504,-255.426701c-2.370751,-1.520397 -5.025993,-2.331275 -7.586405,-2.331275z"/>
+   <path stroke="null" id="svg_6" fill="#FFFFFF" d="m106.50668,612.042083l405.493334,253.298145l405.493334,-253.298145l-405.398504,-255.426701l-405.588164,255.426701z"/>
+   <path stroke="null" id="svg_7" fill="#D4E4FC" d="m501.473877,64.192353l-254.9032,498.487506l263.343075,161.162085l266.662127,-162.074323l-275.102002,-497.575268z"/>
+   <path stroke="null" id="svg_8" fill="#0276F7" d="m229.975417,602.311542c-1.232791,0 -2.465582,-0.304079 -3.698372,-1.013598c-3.603542,-2.128556 -4.931163,-6.993826 -2.844902,-10.845499l279.653845,-532.13896c1.327621,-2.533995 3.793202,-4.054392 6.543274,-4.054392c2.655242,0 5.120823,1.520397 6.543274,4.054392l284.395348,532.13896c2.086261,3.851672 0.75864,8.716943 -2.750072,10.946859c-3.603542,2.128556 -8.155385,0.810878 -10.241646,-2.939434l-277.852074,-519.874424l-273.205401,519.671704c-1.422451,2.635355 -3.982862,4.054392 -6.543274,4.054392z"/>
+   <path stroke="null" id="svg_9" fill="#0276F7" d="m509.913752,755.567562c-4.172523,0 -7.491575,-3.547593 -7.491575,-8.007424l0,-666.744777c0,-4.459831 3.319052,-8.007424 7.491575,-8.007424s7.491575,3.547593 7.491575,8.007424l0,666.846137c0,4.358471 -3.413882,7.906065 -7.491575,7.906065z"/>
+   <path stroke="null" id="svg_10" fill="#0276F7" d="m509.913752,731.849369c-1.327621,0 -2.560412,-0.405439 -3.698372,-1.013598l-263.343075,-161.162085c-3.603542,-2.229916 -4.836333,-7.095186 -2.750072,-10.946859c2.086261,-3.851672 6.638104,-5.16935 10.241646,-2.939434l259.549873,158.83081l262.963755,-159.844408c3.603542,-2.229916 8.155385,-0.810878 10.241646,3.040794c2.086261,3.851672 0.75864,8.716943 -2.844902,10.946859l-266.662127,162.074323c-1.137961,0.709519 -2.465582,1.013598 -3.698372,1.013598z"/>
+   <path stroke="null" id="svg_11" fill="#0276F7" d="m509.913752,579.708306c-1.327621,0 -2.560412,-0.405439 -3.793202,-1.114958l-201.988026,-125.686154c-3.603542,-2.229916 -4.741503,-7.095186 -2.750072,-10.946859c2.086261,-3.851672 6.638104,-5.16935 10.241646,-2.838074l198.289654,123.354879l201.798366,-122.138561c3.603542,-2.229916 8.155385,-0.810878 10.241646,3.040794c2.086261,3.851672 0.75864,8.716943 -2.844902,10.845499l-205.496739,124.469837c-1.137961,0.709519 -2.465582,1.013598 -3.698372,1.013598zm-2.465582,-157.513132c-1.232791,0 -2.370751,-0.304079 -3.508712,-0.912238l-140.917468,-79.668804c-3.698372,-2.128556 -5.025993,-6.892467 -3.129392,-10.845499c1.896601,-3.953032 6.448444,-5.37207 10.146816,-3.344873l137.503586,77.742968l143.00373,-79.871524c3.698372,-2.027196 8.155385,-0.506799 10.146816,3.344873c1.896601,3.953032 0.47415,8.716943 -3.129392,10.845499l-146.512442,81.79736c-1.232791,0.608159 -2.370751,0.912238 -3.603542,0.912238zm2.465582,-148.49211c-1.232791,0 -2.465582,-0.304079 -3.508712,-0.912238l-82.312492,-47.436387c-3.603542,-2.128556 -5.025993,-6.993826 -3.034562,-10.845499c1.991431,-3.953032 6.543274,-5.27071 10.146816,-3.243514l78.708949,45.409191l78.329629,-47.537747c3.603542,-2.229916 8.155385,-0.810878 10.241646,3.040794c2.086261,3.851672 0.75864,8.716943 -2.844902,10.946859l-81.933171,49.666303c-1.232791,0.608159 -2.560412,0.912238 -3.793202,0.912238z"/>
+   <path stroke="null" id="svg_12" fill="#0276F7" d="m509.913752,579.708306l-0.28449,0l-263.248245,-9.021022c-4.172523,-0.10136 -7.396745,-3.851672 -7.207085,-8.210144c0.09483,-4.459831 4.077693,-7.703345 7.681235,-7.703345l263.343075,9.021022c4.172523,0.10136 7.396745,3.851672 7.207085,8.210144c-0.18966,4.257112 -3.508712,7.703345 -7.491575,7.703345zm0,152.141063c-1.612111,0 -3.224222,-0.608159 -4.646673,-1.723117c-3.224222,-2.736715 -3.793202,-7.804705 -1.232791,-11.250938l205.496739,-276.610899c2.560412,-3.446233 7.301915,-4.054392 10.526137,-1.317677c3.224222,2.736715 3.793202,7.804705 1.232791,11.250938l-205.496739,276.610899c-1.517281,2.027196 -3.698372,3.040794 -5.879464,3.040794z"/>
+   <path stroke="null" id="svg_13" fill="#0276F7" d="m509.913752,579.708306c-1.422451,0 -2.750072,-0.405439 -4.077693,-1.216318c-3.508712,-2.432635 -4.457013,-7.297906 -2.275921,-11.048218l144.14169,-239.310492c2.275921,-3.750313 6.922594,-4.763911 10.336476,-2.432635c3.508712,2.432635 4.457013,7.297906 2.275921,11.048218l-144.14169,239.310492c-1.422451,2.331275 -3.793202,3.648953 -6.258784,3.648953zm-2.465582,-157.513132c-1.043131,0 -2.086261,-0.20272 -3.129392,-0.709519c-3.793202,-1.824476 -5.405313,-6.588387 -3.698372,-10.642779l84.398753,-198.158413c1.706941,-4.054392 6.069124,-5.777509 9.957156,-3.953032c3.793202,1.824476 5.405313,6.588387 3.698372,10.642779l-84.303923,198.158413c-1.327621,2.939434 -4.077693,4.662551 -6.922594,4.662551z"/>
+   <path stroke="null" id="svg_14" fill="#0276F7" d="m591.846924,375.062866c-2.750072,0 -5.405313,-1.621757 -6.732934,-4.459831c-1.801771,-3.953032 -0.28449,-8.716943 3.413882,-10.642779l129.253371,-67.302908l-365.759539,-178.089172l20.862613,208.091673l133.994874,-64.262114c3.698372,-1.824476 8.155385,0 9.862326,4.054392c1.706941,4.054392 0,8.716943 -3.793202,10.541419l-143.38305,68.823305c-2.181091,1.013598 -4.646673,0.912238 -6.827764,-0.405439c-2.086261,-1.317677 -3.413882,-3.547593 -3.698372,-6.081588l-23.328195,-233.026185c-0.28449,-2.838074 0.853471,-5.676149 3.034562,-7.297906c2.181091,-1.621757 5.025993,-2.027196 7.491575,-0.810878l392.217126,190.961867c2.655242,1.317677 4.362183,4.054392 4.362183,7.196546c0,3.142154 -1.612111,5.980228 -4.172523,7.297906l-143.57271,74.600814c-1.043131,0.608159 -2.181091,0.810878 -3.224222,0.810878zm-283.921198,78.959286c-3.603542,0 -6.827764,-2.838074 -7.396745,-6.791107c-0.56898,-4.358471 2.181091,-8.412864 6.258784,-9.122382l199.617275,-31.826978c4.077693,-0.608159 7.870895,2.331275 8.534705,6.689747c0.56898,4.358471 -2.181091,8.412864 -6.258784,9.122382l-199.617275,31.826978c-0.47415,0.10136 -0.853471,0.10136 -1.137961,0.10136z"/>
+  </g>
+  <text stroke="null" font-style="italic" transform="matrix(6.577099502228161,0,0,7.449448263868419,-1073.2057632249744,-908.8606073938396) " xml:space="preserve" text-anchor="start" font-family="Arvo, sans-serif" font-size="24" id="svg_16" y="177.898525" x="178.621382" stroke-width="0" fill="#B5D6FB">4G</text>
+ </g>
+</svg>

public/svg/base5G.svg

@@ -0,0 +1,28 @@
+<svg width="1024" height="1024" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
+
+ <g>
+  <title>background</title>
+  <rect fill="none" id="canvas_background" height="1026" width="1026" y="-1" x="-1"/>
+  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
+   <rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="768" width="1024"/>
+  </g>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <g stroke="null" id="svg_15">
+   <path stroke="null" id="svg_4" fill="#B5D6FB" d="m512.094844,961.632039c-1.327621,0 -2.560412,-0.405439 -3.793202,-1.114958l-405.588164,-251.575028c-2.275921,-1.419037 -3.698372,-4.054392 -3.698372,-6.892467l0,-90.007504c0,-2.838074 1.422451,-5.473429 3.698372,-6.892467l405.588164,-255.426701c1.137961,-0.709519 2.465582,-1.114958 3.793202,-1.114958s2.655242,0.405439 3.793202,1.114958l405.493334,255.426701c2.275921,1.419037 3.698372,4.054392 3.698372,6.892467l0,90.007504c0,2.838074 -1.422451,5.473429 -3.698372,6.892467l-405.588164,251.575028c-1.137961,0.709519 -2.465582,1.114958 -3.698372,1.114958z"/>
+   <path stroke="null" id="svg_5" fill="#0276F7" d="m512.094844,356.615382l405.398504,255.426701l0,90.007504l-66.096551,40.94936l-339.301952,210.625668l-339.491613,-210.625668l-66.096551,-40.94936l0,-90.007504l405.588164,-255.426701m0,-16.014849c-2.655242,0 -5.215653,0.709519 -7.586405,2.229916l-405.588164,255.426701c-4.551843,2.838074 -7.396745,8.108784 -7.396745,13.784933l0,90.007504c0,5.676149 2.844902,10.946859 7.491575,13.886293l66.096551,41.05072l339.491613,210.625668c2.275921,1.419037 4.931163,2.128556 7.491575,2.128556s5.215653,-0.709519 7.491575,-2.128556l339.301952,-210.625668l66.096551,-40.94936c4.646673,-2.838074 7.491575,-8.108784 7.491575,-13.886293l0,-90.007504c0,-5.676149 -2.844902,-10.946859 -7.396745,-13.784933l-405.398504,-255.426701c-2.370751,-1.520397 -5.025993,-2.331275 -7.586405,-2.331275z"/>
+   <path stroke="null" id="svg_6" fill="#FFFFFF" d="m106.50668,612.042083l405.493334,253.298145l405.493334,-253.298145l-405.398504,-255.426701l-405.588164,255.426701z"/>
+   <path stroke="null" id="svg_7" fill="#D4E4FC" d="m501.473877,64.192353l-254.9032,498.487506l263.343075,161.162085l266.662127,-162.074323l-275.102002,-497.575268z"/>
+   <path stroke="null" id="svg_8" fill="#0276F7" d="m229.975417,602.311542c-1.232791,0 -2.465582,-0.304079 -3.698372,-1.013598c-3.603542,-2.128556 -4.931163,-6.993826 -2.844902,-10.845499l279.653845,-532.13896c1.327621,-2.533995 3.793202,-4.054392 6.543274,-4.054392c2.655242,0 5.120823,1.520397 6.543274,4.054392l284.395348,532.13896c2.086261,3.851672 0.75864,8.716943 -2.750072,10.946859c-3.603542,2.128556 -8.155385,0.810878 -10.241646,-2.939434l-277.852074,-519.874424l-273.205401,519.671704c-1.422451,2.635355 -3.982862,4.054392 -6.543274,4.054392z"/>
+   <path stroke="null" id="svg_9" fill="#0276F7" d="m509.913752,755.567562c-4.172523,0 -7.491575,-3.547593 -7.491575,-8.007424l0,-666.744777c0,-4.459831 3.319052,-8.007424 7.491575,-8.007424s7.491575,3.547593 7.491575,8.007424l0,666.846137c0,4.358471 -3.413882,7.906065 -7.491575,7.906065z"/>
+   <path stroke="null" id="svg_10" fill="#0276F7" d="m509.913752,731.849369c-1.327621,0 -2.560412,-0.405439 -3.698372,-1.013598l-263.343075,-161.162085c-3.603542,-2.229916 -4.836333,-7.095186 -2.750072,-10.946859c2.086261,-3.851672 6.638104,-5.16935 10.241646,-2.939434l259.549873,158.83081l262.963755,-159.844408c3.603542,-2.229916 8.155385,-0.810878 10.241646,3.040794c2.086261,3.851672 0.75864,8.716943 -2.844902,10.946859l-266.662127,162.074323c-1.137961,0.709519 -2.465582,1.013598 -3.698372,1.013598z"/>
+   <path stroke="null" id="svg_11" fill="#0276F7" d="m509.913752,579.708306c-1.327621,0 -2.560412,-0.405439 -3.793202,-1.114958l-201.988026,-125.686154c-3.603542,-2.229916 -4.741503,-7.095186 -2.750072,-10.946859c2.086261,-3.851672 6.638104,-5.16935 10.241646,-2.838074l198.289654,123.354879l201.798366,-122.138561c3.603542,-2.229916 8.155385,-0.810878 10.241646,3.040794c2.086261,3.851672 0.75864,8.716943 -2.844902,10.845499l-205.496739,124.469837c-1.137961,0.709519 -2.465582,1.013598 -3.698372,1.013598zm-2.465582,-157.513132c-1.232791,0 -2.370751,-0.304079 -3.508712,-0.912238l-140.917468,-79.668804c-3.698372,-2.128556 -5.025993,-6.892467 -3.129392,-10.845499c1.896601,-3.953032 6.448444,-5.37207 10.146816,-3.344873l137.503586,77.742968l143.00373,-79.871524c3.698372,-2.027196 8.155385,-0.506799 10.146816,3.344873c1.896601,3.953032 0.47415,8.716943 -3.129392,10.845499l-146.512442,81.79736c-1.232791,0.608159 -2.370751,0.912238 -3.603542,0.912238zm2.465582,-148.49211c-1.232791,0 -2.465582,-0.304079 -3.508712,-0.912238l-82.312492,-47.436387c-3.603542,-2.128556 -5.025993,-6.993826 -3.034562,-10.845499c1.991431,-3.953032 6.543274,-5.27071 10.146816,-3.243514l78.708949,45.409191l78.329629,-47.537747c3.603542,-2.229916 8.155385,-0.810878 10.241646,3.040794c2.086261,3.851672 0.75864,8.716943 -2.844902,10.946859l-81.933171,49.666303c-1.232791,0.608159 -2.560412,0.912238 -3.793202,0.912238z"/>
+   <path stroke="null" id="svg_12" fill="#0276F7" d="m509.913752,579.708306l-0.28449,0l-263.248245,-9.021022c-4.172523,-0.10136 -7.396745,-3.851672 -7.207085,-8.210144c0.09483,-4.459831 4.077693,-7.703345 7.681235,-7.703345l263.343075,9.021022c4.172523,0.10136 7.396745,3.851672 7.207085,8.210144c-0.18966,4.257112 -3.508712,7.703345 -7.491575,7.703345zm0,152.141063c-1.612111,0 -3.224222,-0.608159 -4.646673,-1.723117c-3.224222,-2.736715 -3.793202,-7.804705 -1.232791,-11.250938l205.496739,-276.610899c2.560412,-3.446233 7.301915,-4.054392 10.526137,-1.317677c3.224222,2.736715 3.793202,7.804705 1.232791,11.250938l-205.496739,276.610899c-1.517281,2.027196 -3.698372,3.040794 -5.879464,3.040794z"/>
+   <path stroke="null" id="svg_13" fill="#0276F7" d="m509.913752,579.708306c-1.422451,0 -2.750072,-0.405439 -4.077693,-1.216318c-3.508712,-2.432635 -4.457013,-7.297906 -2.275921,-11.048218l144.14169,-239.310492c2.275921,-3.750313 6.922594,-4.763911 10.336476,-2.432635c3.508712,2.432635 4.457013,7.297906 2.275921,11.048218l-144.14169,239.310492c-1.422451,2.331275 -3.793202,3.648953 -6.258784,3.648953zm-2.465582,-157.513132c-1.043131,0 -2.086261,-0.20272 -3.129392,-0.709519c-3.793202,-1.824476 -5.405313,-6.588387 -3.698372,-10.642779l84.398753,-198.158413c1.706941,-4.054392 6.069124,-5.777509 9.957156,-3.953032c3.793202,1.824476 5.405313,6.588387 3.698372,10.642779l-84.303923,198.158413c-1.327621,2.939434 -4.077693,4.662551 -6.922594,4.662551z"/>
+   <path stroke="null" id="svg_14" fill="#0276F7" d="m591.846924,375.062866c-2.750072,0 -5.405313,-1.621757 -6.732934,-4.459831c-1.801771,-3.953032 -0.28449,-8.716943 3.413882,-10.642779l129.253371,-67.302908l-365.759539,-178.089172l20.862613,208.091673l133.994874,-64.262114c3.698372,-1.824476 8.155385,0 9.862326,4.054392c1.706941,4.054392 0,8.716943 -3.793202,10.541419l-143.38305,68.823305c-2.181091,1.013598 -4.646673,0.912238 -6.827764,-0.405439c-2.086261,-1.317677 -3.413882,-3.547593 -3.698372,-6.081588l-23.328195,-233.026185c-0.28449,-2.838074 0.853471,-5.676149 3.034562,-7.297906c2.181091,-1.621757 5.025993,-2.027196 7.491575,-0.810878l392.217126,190.961867c2.655242,1.317677 4.362183,4.054392 4.362183,7.196546c0,3.142154 -1.612111,5.980228 -4.172523,7.297906l-143.57271,74.600814c-1.043131,0.608159 -2.181091,0.810878 -3.224222,0.810878zm-283.921198,78.959286c-3.603542,0 -6.827764,-2.838074 -7.396745,-6.791107c-0.56898,-4.358471 2.181091,-8.412864 6.258784,-9.122382l199.617275,-31.826978c4.077693,-0.608159 7.870895,2.331275 8.534705,6.689747c0.56898,4.358471 -2.181091,8.412864 -6.258784,9.122382l-199.617275,31.826978c-0.47415,0.10136 -0.853471,0.10136 -1.137961,0.10136z"/>
+  </g>
+  <text stroke="null" font-style="italic" transform="matrix(6.577099502228161,0,0,7.449448263868419,-1073.2057632249744,-908.8606073938396) " xml:space="preserve" text-anchor="start" font-family="Arvo, sans-serif" font-size="24" id="svg_16" y="177.898525" x="178.621382" stroke-width="0" fill="#D4E4FC">5G</text>
+ </g>
+</svg>

public/wiregasm/worker.js

@@ -1,7 +1,7 @@
 // load the Wiregasm library
 importScripts(
-  '/wiregasm/wiregasm_new.js', // self-compilation es5
-  '/wiregasm/wiregasm_load.js'
+  'wiregasm_new.js', // self-compilation es5
+  'wiregasm_load.js'
   // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.js'
 );
 
@@ -16,11 +16,11 @@ const fetchPackages = async () => {
   console.log('Fetching packages');
   let [wasmBuffer, dataBuffer] = await Promise.all([
     await inflateRemoteBuffer(
-      '/wiregasm/wiregasm.wasm'
+      'wiregasm.wasm'
       // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.wasm'
     ),
     await inflateRemoteBuffer(
-      '/wiregasm/wiregasm.data'
+      'wiregasm.data'
       // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.data'
     ),
   ]);

src/App.vue

@@ -1,22 +1,48 @@
 <script setup lang="ts">
-import { ConfigProvider } from 'ant-design-vue/lib';
-import { usePrimaryColor } from '@/hooks/useTheme';
-import zhCN from 'ant-design-vue/lib/locale/zh_CN';
-import enUS from 'ant-design-vue/lib/locale/en_US';
+import { onBeforeMount, ref, watch } from 'vue';
+import { message } from 'ant-design-vue/es';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import enUS from 'ant-design-vue/es/locale/en_US';
+import { usePrefersColorScheme, viewTransitionTheme } from 'antdv-pro-layout';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import 'dayjs/locale/zh-cn';
-import { ref, watch } from 'vue';
+import useLayoutStore from '@/store/modules/layout';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 const { t, currentLocale } = useI18n();
-const appStore = useAppStore();
-
+const { themeConfig, initPrimaryColor, changeConf } = useLayoutStore();
 dayjs.extend(advancedFormat);
-dayjs.locale('zh-cn'); // 默认中文
-usePrimaryColor(); // 载入用户自定义主题色
+// dayjs.locale('zh-cn'); // 默认中文
+let locale = ref(enUS); // 国际化初始中文
 
-let locale = ref(zhCN); // 国际化初始中文
+// 偏好设置
+const colorScheme = usePrefersColorScheme();
+watch(
+  () => colorScheme.value,
+  themeMode => {
+    viewTransitionTheme(() => {
+      changeConf('theme', themeMode);
+    });
+  }
+);
+
+onBeforeMount(() => {
+  // 全局message提示
+  message.config({
+    top: '100px', // 距离顶部位置100px
+    duration: 3,
+    maxCount: 15,
+  });
+  initPrimaryColor();
+
+  // 输出应用版本号
+  const appStore = useAppStore();
+  console.info(
+    `%c ${t('common.desc')} %c ${appStore.appCode} - ${appStore.appVersion} `,
+    'color: #fadfa3; background: #030307; padding: 4px 0;',
+    'color: #030307; background: #fadfa3; padding: 4px 0;'
+  );
+});
 
 // 国际化切换语言
 function fnChangeLocale(v: string) {
@@ -37,26 +63,18 @@ fnChangeLocale(currentLocale.value);
 watch(currentLocale, val => {
   fnChangeLocale(val);
 });
-
-// 输出应用版本号
-console.info(
-  `%c ${t('common.title')} %c ${appStore.appCode} - ${appStore.appVersion} `,
-  'color: #fadfa3; background: #030307; padding: 4px 0;',
-  'color: #030307; background: #fadfa3; padding: 4px 0;'
-);
 </script>
 
 <template>
-  <ConfigProvider :locale="locale">
+  <a-config-provider :theme="themeConfig" :locale="locale">
     <RouterView />
-  </ConfigProvider>
+  </a-config-provider>
 </template>
 
 <style lang="css">
 #app {
   height: 100%;
 }
-
 body .ant-pro-basicLayout {
   display: flex;
   flex-direction: column;
@@ -86,56 +104,23 @@ body .ant-pro-basicLayout {
   transform: translate(-2em, 0);
 }
 
-/**强制改表格边距 */
-.ant-table.ant-table-small .ant-table-tbody > tr > td,
-.ant-table.ant-table-small .ant-table-thead > tr > th {
-  padding: 6px !important;
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
 }
 
-/** ==== 表格头按钮区域 S === **/
-/* 默认 */
-.button-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
+[data-theme='dark']::view-transition-old(root) {
+  z-index: 1;
+}
+[data-theme='dark']::view-transition-new(root) {
+  z-index: 999;
 }
 
-.button-container > button,
-.button-container > span {
-  margin-right: 12px;
-  margin-bottom: 12px;
+::view-transition-old(root) {
+  z-index: 999;
 }
-
-.button-container > button:last-child,
-.button-container > span:last-child {
-  margin-right: 0;
+::view-transition-new(root) {
+  z-index: 1;
 }
-/* 平板端  */
-@media (max-width: 992px) {
-  .button-container {
-    flex-direction: row;
-    align-items: flex-start;
-    align-items: left;
-  }
-  .button-container > button,
-  .button-container > span {
-    margin-right: 12px;
-    margin-bottom: 12px;
-  }
-}
-/* 手机端  */
-@media (max-width: 576px) {
-  .button-container {
-    flex-direction: column;
-    align-items: flex-start;
-    align-items: left;
-  }
-  .button-container > button,
-  .button-container > span {
-    margin-right: 0px;
-    margin-bottom: 12px;
-  }
-}
-/** ==== 表格头按钮区域 E === **/
 </style>

src/api/agentManage/callback.ts

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

src/api/agentManage/callings.ts

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

src/api/cbc/cbe.ts

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

src/api/faultManage/actAlarm.ts

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

src/api/faultManage/eventAlarm.ts

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

src/api/faultManage/faultSetting.ts

@@ -63,7 +63,11 @@ export async function getAlarmSet() {
       }
     }
     if (Object.keys(resultData).length === 0) {
-      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR[language], data: {} };
+      return {
+        code: RESULT_CODE_ERROR,
+        msg: RESULT_MSG_ERROR[language],
+        data: {},
+      };
     }
     return {
       code: RESULT_CODE_SUCCESS,
@@ -117,7 +121,11 @@ export async function updateAlarmSet(data: Record<string, any>) {
     }
     // 无变更时
     if (resultNum === 0) {
-      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR[language], data: 0 };
+      return {
+        code: RESULT_CODE_ERROR,
+        msg: RESULT_MSG_ERROR[language],
+        data: 0,
+      };
     }
     return {
       code: RESULT_CODE_SUCCESS,
@@ -166,11 +174,10 @@ export async function getForwardSet() {
  */
 export async function updateForwardSet(data: Record<string, any>) {
   // return false;
-  console.log(data)
-  let obj:any=[
-    {interface:"Email",to_user:data.emailObj},
-    {interface:"SMS",to_user:data.smsObj}
-  ]
+  let obj: any = [
+    { interface: 'Email', to_user: data.emailObj },
+    { interface: 'SMS', to_user: data.smsObj },
+  ];
   const result = await request({
     url: `/api/rest/databaseManagement/v1/omc_db/config?WHERE=config_tag='forwardAlarm'`,
     method: 'put',

src/api/faultManage/historyAlarm.ts

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

src/api/logManage/exportFile.ts

@@ -1,3 +1,5 @@
+import { CACHE_SESSION_CRYPTO_API } from '@/constants/cache-keys-constants';
+import { sessionGet } from '@/utils/cache-session-utils';
 import { request } from '@/plugins/http-fetch';
 
 /**
@@ -51,3 +53,43 @@ export function delFile(query: Record<string, any>) {
     params: query,
   });
 }
+
+/**
+ * 更新FTP信息
+ * @param data 数据
+ * @returns object
+ */
+export function updateFTPInfo(data: Record<string, any>) {
+  return request({
+    url: `/lm/table/ftp`,
+    method: 'post',
+    data: data,
+    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
+  });
+}
+
+/**
+ * 获取FTP信息
+ * @param data 数据
+ * @returns object
+ */
+export function getFTPInfo() {
+  return request({
+    url: `/lm/table/ftp`,
+    method: 'get',
+    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
+  });
+}
+
+/**
+ * 发送FTP文件
+ * @param data 数据
+ * @returns object
+ */
+export function putFTPInfo(filePath: string, fileName: string) {
+  return request({
+    url: `/lm/table/ftp`,
+    method: 'put',
+    data: { filePath, fileName },
+  });
+}

src/api/login.ts

@@ -1,3 +1,5 @@
+import { CACHE_SESSION_CRYPTO_API } from '@/constants/cache-keys-constants';
+import { sessionGet } from '@/utils/cache-session-utils';
 import { request } from '@/plugins/http-fetch';
 
 // 登录方法
@@ -7,7 +9,7 @@ export function login(data: Record<string, string>) {
     method: 'post',
     data: data,
     whithToken: false,
-    crypto: true,
+    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
   });
 }
 
@@ -22,7 +24,7 @@ export function register(data: Record<string, any>) {
     method: 'post',
     data: data,
     whithToken: false,
-    crypto: true,
+    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
   });
 }
 

src/api/ne/neInfo.ts

@@ -1,3 +1,5 @@
+import { CACHE_SESSION_CRYPTO_API } from '@/constants/cache-keys-constants';
+import { sessionGet } from '@/utils/cache-session-utils';
 import { request } from '@/plugins/http-fetch';
 
 /**
@@ -36,7 +38,7 @@ export function addNeInfo(data: Record<string, any>) {
     url: `/ne/info`,
     method: 'post',
     data: data,
-    crypto: true,
+    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
     timeout: 30_000,
   });
 }
@@ -51,7 +53,7 @@ export function updateNeInfo(data: Record<string, any>) {
     url: `/ne/info`,
     method: 'put',
     data: data,
-    crypto: true,
+    crypto: sessionGet(CACHE_SESSION_CRYPTO_API) !== 'false',
     timeout: 30_000,
   });
 }

src/api/neData/amf.ts

@@ -10,6 +10,7 @@ export function listAMFDataUE(query: Record<string, any>) {
     url: '/neData/amf/ue/list',
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
 }
 
@@ -40,3 +41,90 @@ export function exportAMFDataUE(data: Record<string, any>) {
     timeout: 60_000,
   });
 }
+
+/**
+ * AMF-接入基站信息列表
+ * @param query 查询参数 neId=001&id=1
+ * @returns object
+ */
+export function listAMFNblist(query: Record<string, any>) {
+  return request({
+    url: '/neData/amf/nb/list',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * AMF-接入基站状态信息列表
+ * @param query 查询参数 neId=001&state=1
+ * @returns object
+ */
+export function listAMFNbStatelist(query: Record<string, any>) {
+  return request({
+    url: '/neData/amf/nb/list-cfg',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * AMF-接入基站状态信息新增
+ * @param neId 网元ID
+ * @param data 数据 { "index": 1, "name": "Gnb", "address": "192.168.8.1", "position": "Area-B" }
+ * @returns object
+ */
+export function addAMFNbState(neId: string, data: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'post',
+    data: {
+      neType: 'AMF',
+      neId: neId,
+      paramName: 'gnbList',
+      paramData: data,
+      loc: `${data.index}`,
+    },
+  });
+}
+
+/**
+ * AMF-接入基站状态信息修改
+ * @param neId 网元ID
+ * @param data 数据 { "index": 1, "name": "Gnb", "address": "192.168.8.1", "position": "Area-B" }
+ * @returns object
+ */
+export function editAMFNbState(neId: string, data: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'put',
+    data: {
+      neType: 'AMF',
+      neId: neId,
+      paramName: 'gnbList',
+      paramData: data,
+      loc: `${data.index}`,
+    },
+  });
+}
+
+/**
+ * AMF-接入基站状态信息删除
+ * @param neId 网元ID
+ * @param index 数据index
+ * @returns object
+ */
+export function delAMFNbState(neId: string, index: string | number) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'delete',
+    params: {
+      neType: 'AMF',
+      neId: neId,
+      paramName: 'gnbList',
+      loc: `${index}`,
+    },
+  });
+}

src/api/neData/ims.ts

@@ -10,6 +10,7 @@ export function listIMSDataCDR(query: Record<string, any>) {
     url: '/neData/ims/cdr/list',
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
 }
 

src/api/neData/mf.ts

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

src/api/neData/mme.ts

@@ -10,6 +10,7 @@ export function listMMEDataUE(query: Record<string, any>) {
     url: '/neData/mme/ue/list',
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
 }
 
@@ -40,3 +41,90 @@ export function exportMMEDataUE(data: Record<string, any>) {
     timeout: 60_000,
   });
 }
+
+/**
+ * MME-接入基站信息列表
+ * @param query 查询参数 neId=001&id=1
+ * @returns object
+ */
+export function listMMENblist(query: Record<string, any>) {
+  return request({
+    url: '/neData/mme/nb/list',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * MME-接入基站状态信息列表
+ * @param query 查询参数 neId=001&state=1
+ * @returns object
+ */
+export function listMMENbStatelist(query: Record<string, any>) {
+  return request({
+    url: '/neData/mme/nb/list-cfg',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * MME-接入基站状态信息新增
+ * @param neId 网元ID
+ * @param data 数据 { "index": 1, "name": "Enb", "address": "192.168.8.1", "position": "Area-B" }
+ * @returns object
+ */
+export function addMMENbState(neId: string, data: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'post',
+    data: {
+      neType: 'MME',
+      neId: neId,
+      paramName: 'enbList',
+      paramData: data,
+      loc: `${data.index}`,
+    },
+  });
+}
+
+/**
+ * MME-接入基站状态信息修改
+ * @param neId 网元ID
+ * @param data 数据 { "index": 1, "name": "Enb", "address": "192.168.8.1", "position": "Area-B" }
+ * @returns object
+ */
+export function editMMENbState(neId: string, data: Record<string, any>) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'put',
+    data: {
+      neType: 'MME',
+      neId: neId,
+      paramName: 'enbList',
+      paramData: data,
+      loc: `${data.index}`,
+    },
+  });
+}
+
+/**
+ * MME-接入基站状态信息删除
+ * @param neId 网元ID
+ * @param index 数据index
+ * @returns object
+ */
+export function delMMENbState(neId: string, index: string | number) {
+  return request({
+    url: `/ne/config/data`,
+    method: 'delete',
+    params: {
+      neType: 'MME',
+      neId: neId,
+      paramName: 'enbList',
+      loc: `${index}`,
+    },
+  });
+}

src/api/neData/nb-state.ts

@@ -0,0 +1,30 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 历史记录列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listNBState(query: Record<string, any>) {
+  return request({
+    url: '/neData/nb-state/list',
+    method: 'get',
+    params: query,
+    timeout: 60_000,
+  });
+}
+
+/**
+ * 历史记录列表导出
+ * @param data 查询列表条件
+ * @returns object
+ */
+export function exportNBState(data: Record<string, any>) {
+  return request({
+    url: '/neData/nb-state/export',
+    method: 'post',
+    data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}

src/api/neData/sgwc.ts

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

src/api/neData/smf.ts

@@ -10,6 +10,7 @@ export function listSMFDataCDR(query: Record<string, any>) {
     url: '/neData/smf/cdr/list',
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
 }
 
@@ -41,14 +42,27 @@ export function exportSMFDataCDR(data: Record<string, any>) {
   });
 }
 
+/**
+ * SMF-在线订阅用户数量
+ * @param query 查询参数
+ * @returns object
+ */
+export function listSMFSubNum(neId: string) {
+  return request({
+    url: '/neData/smf/sub/num',
+    method: 'get',
+    params: { neId },
+  });
+}
+
 /**
  * SMF-在线订阅用户列表信息
  * @param query 查询参数
  * @returns object
  */
-export function listSMFSubscribers(query: Record<string, any>) {
+export function listSMFSubList(query: Record<string, any>) {
   return request({
-    url: '/neData/smf/subscribers',
+    url: '/neData/smf/sub/list',
     method: 'get',
     params: query,
   });

src/api/neData/smsc.ts

@@ -10,6 +10,7 @@ export function listSMSCDataCDR(query: Record<string, any>) {
     url: '/neData/smsc/cdr/list',
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
 }
 

src/api/neData/udm_auth.ts

@@ -23,6 +23,7 @@ export function listUDMAuth(query: Record<string, any>) {
     url: '/neData/udm/auth/list',
     method: 'get',
     params: query,
+    timeout: 30_000,
   });
 }
 

src/api/neData/udm_sub.ts

@@ -23,6 +23,7 @@ export function listUDMSub(query: Record<string, any>) {
     url: '/neData/udm/sub/list',
     method: 'get',
     params: query,
+    timeout: 30_000,
   });
 }
 

src/api/neUser/exportFile.ts

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

src/api/perfManage/customData.ts

@@ -1,7 +1,4 @@
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
-import { parseObjLineToHump } from '@/utils/parse-utils';
-import { parseDateToStr } from '@/utils/date-utils';
 
 /**
  * 新 查询自定义指标数据
@@ -14,6 +11,7 @@ export async function listCustomData(query: Record<string, any>) {
     url: `/pm/kpiC/report`,
     method: 'get',
     params: query,
+    timeout: 60_000,
   });
   return result;
 }

src/api/perfManage/customTarget.ts

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

src/api/perfManage/perfThreshold.ts

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

src/api/tool/neFile.ts

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

src/api/trace/task.ts

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

src/api/trace/taskHLR.ts

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

src/assets/svg/dark.svg

@@ -0,0 +1 @@
+<svg width="1em" height="1em" class="icon-dark" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" style="vertical-align: -0.125em;color: rgba(255, 255, 255, 0.65);"><g id="Dark-\u9875\u9762-1" stroke="none" stroke-width="1px" fill="none" fill-rule="evenodd"><g id="Dark-\u9ED8\u8BA4" transform="translate(-9.000000, -49.500000)" fill="currentColor" fill-rule="nonzero"><g id="Dark-\u7F16\u7EC4-17" transform="translate(0.000000, 42.500000)"><g id="Dark-moon" transform="translate(9.268811, 7.500000)"><rect id="Dark-\u77E9\u5F62" opacity="0" x="0" y="0" width="16" height="16"></rect><path d="M8,1.33333333 C8.14933333,1.33333333 8.29688889,1.33844444 8.44266667,1.34866666 C8.14755556,1.98422221 8,2.64577777 8,3.33333333 C8,3.96533333 8.12333333,4.56955555 8.37,5.146 C8.61666667,5.72244445 8.94822222,6.21888889 9.36466667,6.63533333 C9.78111112,7.05177777 10.2775556,7.38333332 10.854,7.63 C11.4304444,7.87666668 12.0346667,8.00000001 12.6666667,8 C13.3542222,8 14.0157778,7.85244444 14.6513333,7.55733333 C14.6615556,7.70311111 14.6666667,7.85066667 14.6666667,8 C14.6666667,8.604 14.5868889,9.19422222 14.4273333,9.77066667 C14.2677778,10.3471111 14.0446667,10.8793333 13.758,11.3673333 C13.4713333,11.8553333 13.1233333,12.3042222 12.714,12.714 C12.3046667,13.1237778 11.8557778,13.4717778 11.3673333,13.758 C10.8788889,14.0442222 10.3466667,14.2673333 9.77066667,14.4273333 C9.19466667,14.5873333 8.60444445,14.6671111 8,14.6666685 C7.39555555,14.6662222 6.80533333,14.5864444 6.22933333,14.4273333 C5.65333333,14.2682222 5.1211111,14.0451111 4.63266666,13.758 C4.14422221,13.4708889 3.69533332,13.1228889 3.28599998,12.714 C2.87666665,12.3051111 2.52866665,11.8562222 2.24199998,11.3673333 C1.95533332,10.8784444 1.73222221,10.3462222 1.57266666,9.77066667 C1.4131111,9.19511112 1.33333333,8.6048889 1.33333333,8 C1.33333333,7.3951111 1.4131111,6.80488888 1.57266666,6.22933333 C1.73222221,5.65377778 1.95533332,5.12155555 2.24199998,4.63266666 C2.52866665,4.14377776 2.87666665,3.69488887 3.28599998,3.28599998 C3.69533332,2.8771111 4.14422221,2.5291111 4.63266666,2.24199998 C5.1211111,1.95488887 5.65333333,1.73177776 6.22933333,1.57266666 C6.80533333,1.41355555 7.39555555,1.33377778 8,1.33333333 Z M6.68733333,2.828 C6.11444444,2.97377778 5.58066667,3.20977778 5.086,3.536 C4.59133333,3.86222222 4.166,4.24933333 3.81,4.69733333 C3.454,5.14533333 3.17444444,5.65488889 2.97133333,6.226 C2.76822221,6.79711111 2.66666666,7.38822222 2.66666666,7.99933333 C2.66666666,8.72155555 2.80733332,9.41155555 3.08866666,10.0693333 C3.36999999,10.7271111 3.74933332,11.2948889 4.22666666,11.7726667 C4.70399999,12.2504444 5.27177777,12.6297778 5.92999998,12.9106667 C6.5882222,13.1915556 7.2782222,13.3322222 7.99999998,13.3326667 C8.6111111,13.3326667 9.20222221,13.2311111 9.77333331,13.028 C10.3444444,12.8248889 10.854,12.5453333 11.302,12.1893333 C11.75,11.8333333 12.1371111,11.408 12.4633333,10.9133333 C12.7895555,10.4186666 13.0255555,9.88488887 13.1713333,9.31199998 C13.022,9.32577777 12.8535555,9.33266666 12.666,9.33266666 C11.8535555,9.33266666 11.0775555,9.17377777 10.338,8.85599998 C9.59844443,8.5382222 8.96044443,8.11111109 8.42399998,7.57466666 C7.88755554,7.03822222 7.46044443,6.40022222 7.14266666,5.66066666 C6.82488889,4.92111109 6.66599999,4.14511109 6.66599998,3.33266666 C6.66599998,3.1451111 6.67288888,2.97666666 6.68666666,2.82733333 L6.68733333,2.828 Z" id="Dark-\u5F62\u72B6"></path></g></g></g></g></svg>

src/assets/svg/light.svg

@@ -0,0 +1 @@
+<svg width="1em" height="1em" class="icon-light" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg" style="vertical-align: -0.125em;color: rgba(0, 0, 0, 0.88);"><g id="Light-\u9875\u9762-1" stroke="none" stroke-width="1px" fill="none" fill-rule="evenodd"><g id="Light-\u4E3B\u9898\u5305" transform="translate(-2943.000000, -292.000000)" fill="currentColor" fill-rule="nonzero"><g id="Light-\u7F16\u7EC4-12" transform="translate(2415.000000, 222.000000)"><g id="Light-\u89C6\u56FE\u5207\u6362-\u7F16\u8F91\u6001" transform="translate(518.000000, 60.000000)"><g id="Light-eye" transform="translate(8.000000, 8.000000)"><g id="Light-sun" transform="translate(2.000000, 2.000000)"><rect id="Light-\u77E9\u5F62" opacity="0" x="0" y="0" width="13" height="13"></rect><path d="M6.5,9.75 C4.7051875,9.75 3.25,8.2948125 3.25,6.5 C3.25,4.7051875 4.7051875,3.25 6.5,3.25 C8.2948125,3.25 9.75,4.7051875 9.75,6.5 C9.75,8.2948125 8.2948125,9.75 6.5,9.75 Z M6.5,8.66666667 C7.69661696,8.66666667 8.66666667,7.69661696 8.66666667,6.5 C8.66666667,5.30338304 7.69661696,4.33333333 6.5,4.33333333 C5.30338305,4.33333333 4.33333336,5.30338305 4.33333336,6.5 C4.33333336,7.69661695 5.30338305,8.66666667 6.5,8.66666667 Z M5.95833333,1.08333333 C5.95833333,0.784179087 6.20084576,0.541666658 6.5,0.541666658 C6.79915424,0.541666658 7.04166667,0.784179087 7.04166667,1.08333333 L7.04166667,2.16666667 C7.04166667,2.46582091 6.79915424,2.70833334 6.5,2.70833334 C6.20084576,2.70833334 5.95833333,2.46582091 5.95833333,2.16666667 L5.95833333,1.08333333 L5.95833333,1.08333333 Z M5.95833333,10.8333333 C5.95833333,10.5341791 6.20084576,10.2916667 6.5,10.2916667 C6.79915424,10.2916667 7.04166667,10.5341791 7.04166667,10.8333333 L7.04166667,11.9166667 C7.04166667,12.2158209 6.79915424,12.4583333 6.5,12.4583333 C6.20084576,12.4583333 5.95833333,12.2158209 5.95833333,11.9166667 L5.95833333,10.8333333 L5.95833333,10.8333333 Z M1.08333333,7.04166667 C0.784179087,7.04166667 0.541666658,6.79915424 0.541666658,6.5 C0.541666658,6.20084576 0.784179087,5.95833333 1.08333333,5.95833333 L2.16666667,5.95833333 C2.46582091,5.95833333 2.70833334,6.20084576 2.70833334,6.5 C2.70833334,6.79915424 2.46582091,7.04166667 2.16666667,7.04166667 L1.08333333,7.04166667 L1.08333333,7.04166667 Z M10.8333333,7.04166667 C10.5341791,7.04166667 10.2916667,6.79915424 10.2916667,6.5 C10.2916667,6.20084576 10.5341791,5.95833333 10.8333333,5.95833333 L11.9166667,5.95833333 C12.2158209,5.95833333 12.4583333,6.20084576 12.4583333,6.5 C12.4583333,6.79915424 12.2158209,7.04166667 11.9166667,7.04166667 L10.8333333,7.04166667 L10.8333333,7.04166667 Z M2.05454167,2.82045833 C1.84926545,2.60791971 1.85220137,2.27007933 2.06114035,2.06114035 C2.27007933,1.85220137 2.60791971,1.84926545 2.82045833,2.05454167 L3.63295833,2.86704167 C3.83823455,3.07958029 3.83529863,3.41742067 3.62635965,3.62635965 C3.41742067,3.83529863 3.07958029,3.83823455 2.86704167,3.63295833 L2.05454167,2.82045833 L2.05454167,2.82045833 Z M9.36704167,10.1329583 C9.16176545,9.92041971 9.16470137,9.58257933 9.37364035,9.37364035 C9.58257933,9.16470137 9.92041971,9.16176545 10.1329583,9.36704167 L10.9454583,10.1795417 C11.1507346,10.3920803 11.1477986,10.7299207 10.9388596,10.9388596 C10.7299207,11.1477986 10.3920803,11.1507346 10.1795417,10.9454583 L9.36704167,10.1329583 L9.36704167,10.1329583 Z M2.82045833,10.9454583 C2.60791971,11.1507346 2.27007933,11.1477986 2.06114035,10.9388596 C1.85220137,10.7299207 1.84926545,10.3920803 2.05454167,10.1795417 L2.86704167,9.36704167 C3.07958029,9.16176545 3.41742067,9.16470137 3.62635965,9.37364035 C3.83529863,9.58257933 3.83823455,9.92041971 3.63295833,10.1329583 L2.82045833,10.9454583 L2.82045833,10.9454583 Z M10.1329583,3.63295833 C9.92041971,3.83823455 9.58257933,3.83529863 9.37364035,3.62635965 C9.16470137,3.41742067 9.16176545,3.07958029 9.36704167,2.86704167 L10.1795417,2.05454167 C10.3920803,1.84926545 10.7299207,1.85220137 10.9388596,2.06114035 C11.1477986,2.27007933 11.1507346,2.60791971 10.9454583,2.82045833 L10.1329583,3.63295833 L10.1329583,3.63295833 Z" id="Light-\u5F62\u72B6"></path></g></g></g></g></g></g></svg>

src/components/CronModal/index.vue

@@ -3,7 +3,7 @@
     :drag="true"
     :destroyOnClose="true"
     :title="t('components.CronModal.title')"
-    :visible="props.visible"
+    :open="props.open"
     :body-style="{ padding: '0 24px' }"
     @cancel="fnCronModal(false)"
     @ok="fnCronModal(true)"
@@ -35,6 +35,7 @@
   </ProModal>
 </template>
 <script lang="ts" setup>
+import { ProModal } from 'antdv-pro-modal';
 import CronSecond from './components/Second.vue';
 import CronMinute from './components/Minute.vue';
 import CronHour from './components/Hour.vue';
@@ -44,9 +45,9 @@ import { reactive, computed, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 
-const emit = defineEmits(['cancel', 'ok', 'update:visible']);
+const emit = defineEmits(['cancel', 'ok', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     required: true,
   },
@@ -75,7 +76,7 @@ const cronStr = computed(() => {
 
 /**监听是否显示，初始cron属性 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (!val) return;
     const arr = props.cron.split(' ');
@@ -98,7 +99,7 @@ watch(
  * @param val modal触发事件
  */
 function fnCronModal(val: boolean) {
-  emit('update:visible', false);
+  emit('update:open', false);
   if (val) {
     emit('ok', cronStr.value);
   } else {

src/components/GlobalMask/index.vue

@@ -12,7 +12,7 @@ const router = useRouter();
 const { t } = useI18n();
 
 /**显示遮罩 */
-const isVisible = computed(() => !['none', 'lock'].includes(maskStore.type));
+const isOpen = computed(() => !['none', 'lock'].includes(maskStore.type));
 
 // 用户无操作一段时间后进行锁屏
 function idleTimeout(time: number, callback: Function) {
@@ -67,7 +67,7 @@ onUnmounted(() => {});
 </script>
 <template>
   <a-modal
-    v-model:visible="isVisible"
+    v-model:open="isOpen"
     get-container="#app"
     :footer="null"
     :zIndex="1008"

src/components/IntlTelInput/index.vue

@@ -1,9 +1,9 @@
 <!-- https://github.com/jackocnr/intl-tel-input/blob/master/react/src/intl-tel-input/react.tsx -->
 <script lang="ts" setup>
-import intlTelInput, { Iti, SomeOptions } from 'intl-tel-input';
+import { Iti } from 'intl-tel-input';
+import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
 import 'intl-tel-input/build/css/intlTelInput.min.css';
-import 'intl-tel-input/build/js/utils.js';
-import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { currentLocale } = useI18n();
 const emit = defineEmits(['update:value', 'update:change']);
@@ -45,13 +45,13 @@ const itiRef = ref<Iti | null>(null);
 function fnChange() {
   if (!itiRef.value) return;
 
-  const num = itiRef.value?.getNumber() || '';
+  const number = itiRef.value?.getNumber() || '';
   const countryIso = itiRef.value?.getSelectedCountryData().iso2 || '';
   // note: this number will be in standard E164 format, but any container component can use
   // intlTelInputUtils.formatNumber() to convert this to another format
   // as well as intlTelInputUtils.getNumberType() etc. if need be
   let data = {
-    num,
+    number,
     countryIso,
     validity: false,
     errorCode: -1,
@@ -69,21 +69,11 @@ function fnChange() {
     data.errorCode = errorCode;
   }
   // console.log(data);
-  emit('update:value', num);
+
+  emit('update:value', number);
   emit('update:change', data);
 }
 
-watch(
-  () => props.value,
-  v => {
-    if (v) {
-      itiRef.value?.setNumber(v);
-    } else {
-      itiRef.value?.setNumber('');
-    }
-  }
-);
-
 onMounted(() => {
   nextTick(async () => {
     if (inputRef.value) {
@@ -106,7 +96,13 @@ onMounted(() => {
         formatOnDisplay: true,
         autoPlaceholder: 'polite',
         i18n: i18n,
-      } as SomeOptions);
+      });
+      if (props.value) {
+        itiRef.value.setNumber(props.value);
+      }
+      if (props.disabled) {
+        itiRef.value.setDisabled(props.disabled);
+      }
       inputRef.value.addEventListener('countrychange', fnChange);
     }
   });
@@ -124,8 +120,7 @@ onBeforeUnmount(() => {
   <input
     type="tel"
     class="ant-input"
-    ref="inputRef"
-    :value="value"
+    ref="inputRef" 
     :disabled="disabled"
     :placeholder="placeholder"
     :maxlength="maxlength"
@@ -142,4 +137,32 @@ onBeforeUnmount(() => {
 .iti .iti__country-container .iti__search-input {
   padding: 4px 8px;
 }
+
+.iti .ant-input {
+  box-sizing: border-box;
+  margin: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  padding: 4px 11px;
+  color: #000000d9;
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid #424242;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+.iti .ant-input:focus,
+.iti .ant-input-focused {
+  border-color: var(--ant-primary-color-hover);
+  box-shadow: 0 0 0 2px var(--ant-primary-color-outline);
+  border-right-width: 1px !important;
+  outline: 0;
+}
 </style>

src/components/TableColumnsDnd/index.vue

@@ -2,7 +2,6 @@
 import { reactive, watch, onMounted, PropType, nextTick } from 'vue';
 import { Container, Draggable } from 'vue3-smooth-dnd';
 import useI18n from '@/hooks/useI18n';
-import { type ColumnsType } from 'ant-design-vue/lib/table';
 import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
 import { CACHE_DB_TABLE_DND } from '@/constants/cache-keys-constants';
 const { t, currentLocale } = useI18n();
@@ -37,7 +36,7 @@ const props = defineProps({
 });
 
 /**表格字段列 */
-const tableColumns = reactive<ColumnsType>(props.columns);
+const tableColumns = reactive(props.columns);
 
 /**表格字段列勾选状态 */
 const state = reactive<{
@@ -56,7 +55,9 @@ const state = reactive<{
 function fnTableColumnsCheckAllChange(e: any) {
   const checked = e.target.checked;
   state.indeterminate = false;
-  state.columnsTitleList = checked ? tableColumns.map(s => `${s.title}`) : [];
+  state.columnsTitleList = checked
+    ? tableColumns.map(s => `${s.title as string}`)
+    : [];
 }
 
 /**表格字段列拖拽操作 */

src/components/TerminalRedis/index.vue

@@ -0,0 +1,289 @@
+<script lang="ts" setup>
+import { message } from 'ant-design-vue/es';
+import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { FitAddon } from '@xterm/addon-fit';
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { RESULT_CODE_ERROR } from '@/constants/result-constants';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+const ws = new WS();
+const emit = defineEmits(['connect', 'close', 'message']);
+const props = defineProps({
+  /**终端ID，必传 */
+  id: {
+    type: String,
+    required: true,
+  },
+  /**连接主机ID，必传 */
+  hostId: {
+    type: String,
+    required: true,
+  },
+  /**初始发送命令 */
+  initCmd: {
+    type: [String, Boolean],
+    default: false,
+  },
+});
+
+/**终端输入DOM节点实例对象 */
+const terminalDom = ref<HTMLElement | undefined>(undefined);
+
+/**终端输入实例对象 */
+const terminal = ref<any>(null);
+
+/**终端输入文字状态 */
+const terminalState = reactive<{
+  /**输入值 */
+  text: string;
+  /**历史 */
+  history: {
+    label?: string;
+    value: string;
+  }[];
+}>({
+  text: '',
+  history: [
+    {
+      value: 'info server',
+    },
+    {
+      value: 'info replication',
+    },
+    {
+      value: 'keys ausf:*',
+    },
+    {
+      value: 'quit',
+    },
+  ],
+});
+
+/**自动完成根据输入项进行筛选 */
+function fnAutoCompleteFilter(input: string, option: any) {
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+}
+
+/**自动完成按键触发 */
+function fnAutoCompleteKeydown(evt: KeyboardEvent) {
+  if (evt.key === 'Enter') {
+    // 阻止默认的换行行为
+    evt.preventDefault();
+    // 按下 Shift + Enter 键时换行
+    if (evt.shiftKey && evt.target) {
+      // 插入换行符
+      const textarea = evt.target as HTMLInputElement;
+      const start = textarea.selectionStart || 0;
+      const end = textarea.selectionEnd || 0;
+      const text = textarea.value;
+      textarea.value = text.substring(0, start) + '\n' + text.substring(end);
+      terminalState.text = textarea.value;
+      // 更新光标位置
+      textarea.selectionStart = textarea.selectionEnd = start + 1;
+    } else {
+      // ws未连接
+      if (ws.state() !== WebSocket.OPEN) {
+        message.error('disconnected');
+        return;
+      }
+
+      // 输入历史
+      const cmdStr = terminalState.text.trim().replace(/\n/g, '\r\n');
+      const hisIndex = terminalState.history.findIndex(
+        item => item.value === cmdStr
+      );
+      if (hisIndex === -1) {
+        terminalState.history.push({
+          value: cmdStr,
+        });
+      }
+
+      // 发送文本
+      terminal.value.scrollToBottom();
+      terminal.value.writeln('\r\n> ' + cmdStr);
+      ws.send({
+        requestId: `redis_${props.hostId}`,
+        type: 'redis',
+        data: `${cmdStr}\r\n`,
+      });
+      terminalState.text = '';
+
+      // 退出登录
+      if (['q', 'quit', 'exit'].includes(cmdStr)) {
+        setTimeout(() => {
+          ws.close();
+        }, 1000);
+      }
+    }
+  }
+}
+
+/**终端输入渲染 */
+function handleRanderXterm(container: HTMLElement | undefined) {
+  if (!container) return;
+  const xterm = new Terminal({
+    lineHeight: 1.2,
+    fontSize: 12,
+    fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
+    theme: {
+      background: '#000000',
+    },
+    cursorBlink: true, // 光标闪烁
+    cursorStyle: 'block',
+    scrollback: 1000,
+    scrollSensitivity: 15,
+    tabStopWidth: 4,
+    disableStdin: true, // 禁止输入
+  });
+  // 挂载
+  xterm.open(container);
+  // 自适应尺寸
+  const fitAddon = new FitAddon();
+  xterm.loadAddon(fitAddon);
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    fitAddon.fit();
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+  terminal.value = xterm;
+}
+
+/**连接打开后回调 */
+function wsOpen(ev: any) {
+  // console.info('wsOpen', ev);
+  nextTick(() => {
+    handleRanderXterm(terminalDom.value);
+
+    // 连接事件
+    emit('connect', {
+      timeStamp: ev.timeStamp,
+      cols: terminal.value.cols,
+      rows: terminal.value.rows,
+      hostId: props.hostId,
+      id: props.id,
+    });
+    // 初始发送命令
+    if (typeof props.initCmd === 'string') {
+      ws.send({
+        requestId: `redis_${props.hostId}`,
+        type: 'redis',
+        data: `${props.initCmd}\r\n`,
+      });
+    }
+  });
+}
+
+/**连接错误后回调 */
+function wsError(ev: any) {
+  console.error('wsError', ev);
+  if (terminal.value != null) {
+    let message = 'disconnected';
+    terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
+  } else if (terminalDom.value) {
+    terminalDom.value.style.background = '#000';
+    terminalDom.value.style.color = '#ff4d4f';
+    terminalDom.value.style.height = '60%';
+    terminalDom.value.innerText = 'disconnected';
+  }
+}
+
+/**连接关闭后回调 */
+function wsClose(code: number) {
+  // console.warn('wsClose', code);
+  if (terminal.value != null) {
+    let message = 'disconnected';
+    terminal.value.write(`\x1b[31m${message}\x1b[m\r\n`);
+  }
+  // 关闭事件
+  emit('close', {
+    code: code,
+    hostId: props.hostId,
+    id: props.id,
+  });
+}
+
+/**接收消息后回调 */
+function wsMessage(res: Record<string, any>) {
+  emit('message', res);
+  // console.log('wsMessage', res);
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+  if (!requestId) return;
+  if (data.indexOf('is empty') > 0) return;
+  if (terminal.value != null) {
+    // terminal.value.write(data.trim().replace(/\n/g, "\r\n"));
+    // 是否n结尾
+    if (/[\r\n]$/.test(data)) {
+      terminal.value.writeln(data.trim().replace(/\n/g, '\r\n'));
+    } else {
+      terminal.value.write(data.replace(/\n/g, '\r\n'));
+    }
+  }
+}
+
+onMounted(() => {
+  if (props.hostId) {
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws/redis',
+      params: {
+        hostId: props.hostId,
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+      onopen: wsOpen,
+      onclose: wsClose,
+    };
+    ws.connect(options);
+  }
+});
+
+onBeforeUnmount(() => {
+  ws.close();
+});
+
+// 给组件设置属性 ref="xxxTerminal"
+// setup内使用 const xxxTerminal = ref();
+defineExpose({
+  /**发送方法 */
+  send: (data: string) => {
+    ws.send({
+      requestId: `redis_${props.hostId}`,
+      type: 'redis',
+      data: `${data}\r\n`,
+    });
+  },
+});
+</script>
+
+<template>
+  <div class="terminal">
+    <div ref="terminalDom" style="height: calc(100% - 36px)" :id="id"></div>
+    <a-auto-complete
+      v-model:value="terminalState.text"
+      :dropdown-match-select-width="500"
+      style="width: 100%"
+      :options="terminalState.history"
+      :filter-option="fnAutoCompleteFilter"
+      :defaultActiveFirstOption="false"
+    >
+      <a-textarea
+        :auto-size="{ minRows: 1, maxRows: 6 }"
+        placeholder="Execute command. Shift+Enter to line feed, Enter to send"
+        @keypress="fnAutoCompleteKeydown"
+      />
+    </a-auto-complete>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.terminal {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/TerminalSSH/index.vue

@@ -126,7 +126,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     // console.log('尺寸', cols, rows);
     ws.send({
       requestId: `ssh_resize_${props.hostId}`,
-      type: 'ssh_resize',
+      type: 'resize',
       data: { cols, rows },
     });
   });

src/components/TerminalSSHView/index.vue

@@ -43,6 +43,11 @@ const props = defineProps({
     type: String,
     default: 'ssh',
   },
+  /**消息处理函数 */
+  processMessages: {
+    type: Function,
+    default: undefined,
+  },
 });
 
 /**终端输入DOM节点实例对象 */
@@ -153,32 +158,49 @@ function wsMessage(res: Record<string, any>) {
   }
   if (!requestId) return;
   if (terminal.value != null) {
-    // 查找的开始输出标记
-    const parts: string[] = data.split('\u001b[?2004l\r');
-    if (parts.length > 0) {
-      let text = parts[parts.length - 1];
-      // 找到最后输出标记
-      let lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
-      if (lestIndex !== -1) {
-        text = text.substring(0, lestIndex);
-      }
-      if (text === '' || text === '\r\n' || text.startsWith('^C\r\n')) {
-        return;
-      }
-      // 是否还有最后输出标记
-      lestIndex = text.lastIndexOf('\u001b[?2004h');
-      if (lestIndex !== -1) {
-        text = text.substring(0, lestIndex);
-      }
-      // console.log({ parts, text });
-      terminal.value.write(text);
+    let text = '';
+    // 处理消息
+    if (props.processMessages) {
+      text = props.processMessages(data); 
+    }else{
+      text = processMessage(data);
+    }
+    // 无消息是则不输出
+    if (text === '') {
       return;
     }
-    // 无标记
-    terminal.value.write(data);
+    terminal.value.write(text);
   }
 }
 
+/**终端消息处理*/
+function processMessage(data: string): string {
+  // 查找的开始输出标记
+  const parts: string[] = data.split('\u001b[?2004l\r');
+  if (parts.length > 0) {
+    if (parts[0].startsWith('^C') || parts[0].startsWith('\r')) {
+      return '';
+    }
+    let text = parts[parts.length - 1];
+    // 找到最后输出标记
+    let lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
+    if (lestIndex !== -1) {
+      text = text.substring(0, lestIndex);
+    }
+    if (text === '' || text === '\r\n' || text.startsWith('^C\r\n')) {
+      return '';
+    }
+    // 是否还有最后输出标记
+    lestIndex = text.lastIndexOf('\u001b[?2004h');
+    if (lestIndex !== -1) {
+      text = text.substring(0, lestIndex);
+    }
+    // console.log({ parts, text });
+    return text;
+  }
+  return data;
+}
+
 onMounted(() => {
   if (props.neType && props.neId) {
     // 建立链接

src/components/TerminalTelnet/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { FitAddon } from '@xterm/addon-fit';
 import { Terminal } from '@xterm/xterm';
@@ -80,16 +80,16 @@ function fnAutoCompleteFilter(input: string, option: any) {
 }
 
 /**自动完成按键触发 */
-function fnAutoCompleteKeydown(evt: any) {
+function fnAutoCompleteKeydown(evt: KeyboardEvent) {
   if (evt.key === 'Enter') {
     // 阻止默认的换行行为
     evt.preventDefault();
     // 按下 Shift + Enter 键时换行
-    if (evt.shiftKey) {
+    if (evt.shiftKey && evt.target) {
       // 插入换行符
-      const textarea = evt.target;
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
+      const textarea = evt.target as HTMLInputElement;
+      const start = textarea.selectionStart || 0;
+      const end = textarea.selectionEnd || 0;
       const text = textarea.value;
       textarea.value = text.substring(0, start) + '\n' + text.substring(end);
       terminalState.text = textarea.value;
@@ -121,7 +121,7 @@ function fnAutoCompleteKeydown(evt: any) {
         type: 'telnet',
         data: `${cmdStr}\r\n`,
       });
-      terminalState.text = ' ';
+      terminalState.text = '';
 
       // 退出登录
       if (['q', 'quit', 'exit'].includes(cmdStr)) {
@@ -160,7 +160,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     // console.log('尺寸', cols, rows);
     ws.send({
       requestId: `telnet_resize_${props.hostId}`,
-      type: 'telnet_resize',
+      type: 'resize',
       data: { cols, rows },
     });
   });
@@ -296,11 +296,12 @@ defineExpose({
       style="width: 100%"
       :options="terminalState.history"
       :filter-option="fnAutoCompleteFilter"
-      @keydown="fnAutoCompleteKeydown"
+      :defaultActiveFirstOption="false"
     >
       <a-textarea
         :auto-size="{ minRows: 1, maxRows: 6 }"
         placeholder="Execute command. Shift+Enter to line feed, Enter to send"
+        @keypress="fnAutoCompleteKeydown"
       />
     </a-auto-complete>
   </div>

src/components/TerminalText/index.vue

@@ -1,97 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { FitAddon } from '@xterm/addon-fit';
-import { Terminal } from '@xterm/xterm';
-import '@xterm/xterm/css/xterm.css';
-const emit = defineEmits(['update:value']);
-const props = defineProps({
-  /**终端ID，必传 */
-  id: {
-    type: String,
-    required: true,
-  },
-  /**窗口单行字符数 */
-  cols: {
-    type: Number,
-    default: 80,
-  },
-  /**窗口行数 */
-  rows: {
-    type: Number,
-    default: 40,
-  },
-  /**信息 */
-  value: {
-    type: String,
-    default: '',
-  },
-});
-
-/**终端输入DOM节点实例对象 */
-const terminalDom = ref<HTMLElement | undefined>(undefined);
-
-/**终端输入实例对象 */
-const terminal = ref<any>(null);
-
-/**终端输入渲染 */
-function handleRanderXterm(container: HTMLElement | undefined) {
-  if (!container) return;
-  const xterm = new Terminal({
-    cols: props.cols,
-    rows: props.rows,
-    lineHeight: 1.2,
-    fontSize: 12,
-    fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
-    theme: {
-      background: '#000000',
-    },
-    cursorBlink: false, // 光标闪烁
-    cursorStyle: 'block',
-    scrollback: 1000,
-    scrollSensitivity: 15,
-    tabStopWidth: 4,
-    disableStdin: true, // 禁止输入
-  });
-  // 挂载
-  xterm.open(container);
-  // 自适应尺寸
-  const fitAddon = new FitAddon();
-  xterm.loadAddon(fitAddon);
-
-  // 创建 ResizeObserver 实例
-  var observer = new ResizeObserver(entries => {
-    fitAddon.fit();
-  });
-  // 监听元素大小变化
-  observer.observe(container);
-
-  terminal.value = xterm;
-}
-
-onMounted(() => {
-  nextTick(() => {
-    handleRanderXterm(terminalDom.value);
-    // 初始发送命令
-    if (typeof props.value === 'string') {
-      terminal.value.write(props.value);
-    }
-  });
-});
-
-onBeforeUnmount(() => {
-  if (terminal.value != null) {
-    terminal.value.dispose();
-  }
-});
-</script>
-
-<template>
-  <div ref="terminalDom" :id="id" class="terminal"></div>
-</template>
-
-<style lang="css" scoped>
-.terminal {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/UploadModal/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue/lib';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { message } from 'ant-design-vue/es';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { ProModal } from 'antdv-pro-modal';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['upload', 'close', 'update:visible']);
+const emit = defineEmits(['upload', 'close', 'update:open']);
 const props = defineProps({
   /**窗口标题 */
   title: {
@@ -17,7 +18,7 @@ const props = defineProps({
     default: false,
   },
   /**是否弹出显示，必传 */
-  visible: {
+  open: {
     type: Boolean,
     required: true,
   },
@@ -80,7 +81,7 @@ function fnUpload(up: UploadRequestOption) {
     :drag="true"
     :destroyOnClose="true"
     :title="props.title"
-    :visible="props.visible"
+    :open="props.open"
     :keyboard="false"
     :mask-closable="false"
     :confirm-loading="props.loading"

src/constants/cache-keys-constants.ts

@@ -1,3 +1,6 @@
+/**会话缓存-接口加密 */
+export const CACHE_SESSION_CRYPTO_API = 'cache:session:cryptoApi';
+
 /**会话缓存-网络请求 */
 export const CACHE_SESSION_FATCH = 'cache:session:fatch';
 

src/constants/ne-constants.ts

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

src/hooks/useTheme.ts

@@ -1,5 +1,5 @@
 import { onBeforeMount } from 'vue';
-import { ConfigProvider, message } from 'ant-design-vue/lib';
+import { ConfigProvider, message } from 'ant-design-vue/es';
 import { CACHE_LOCAL_PRIMARY_COLOR } from '@/constants/cache-keys-constants';
 import { localGet, localSet } from '@/utils/cache-local-utils';
 

src/i18n/locales/en-US.ts

@@ -6,7 +6,7 @@ export default {
 
   // 通用
   common: {
-    title: 'Core Network Management Platform',
+    title: 'Login Platform',
     desc: 'Core Network Management Platform',
     loading: 'Please wait...',
     inputPlease: 'Please input',
@@ -192,6 +192,7 @@ export default {
       lockPasswd: "Unlock Password",
       lockPasswdTip: "No password can be set",
       fullscreen: "Full Screen",
+      theme: "Theme light/dark mode",
       logout: "Logout",
       profile: "Profile",
       settings: "Settings",
@@ -221,12 +222,11 @@ export default {
       capability: 'Capability',
       serialNum: 'Serial Number',
       expiryDate: 'Expiry Date',
-      neStatus: 'NE status is abnormal',
-      runStatus:'Running Status',
-      mark:'Brief Information',
+      neStatus: 'Status Abnormal',
+      runStatus: 'Runing Status',
+      mark:'Information',
       object:'Object',
       versionNum:'Version',
-      systemStatus:'Status',
       realNeStatus:'Status',
       reloadTime:'Refresh Time',
       Critical:'Critical',
@@ -317,6 +317,8 @@ export default {
         color: "Style color scheme",
         colorActions: "Overall style color scheme setting",
         colorRandomly: "Randomization",
+        theme: "Theme dark and light modes",
+        themeActions: "Toggle light/dark mode",
         navTheme: "Dark Menu",
         navThemeActions: "Menus that can only change the navigation mode",
         fixedHeader: "Fixed top navigation bar",
@@ -348,168 +350,89 @@ export default {
         description: "No data yet, try refreshing",
       },
     },
-    configManage: {
-      neManage: {
-        addNe:'Add Network Element',
-        delSure:'Confirm deleting the data item with network element name {msg}',
-        editNe:'Edit Network Element',
-        exportSure:'Confirm exporting the configuration information with the network element name {msg}',
-        exportTip:'Export successful, please go to backup management for download',
-        getInfo:'Failed to get network element information',
-        neType:'NE Type',
-        neTypePlease: 'Select network element type',
-        neId:'NE ID',
-        neName:'NE Name',
-        neTypeTip:'Fill in the type of network element created, such as:SMF',
-        uid:'RM UID',
-        uidTip:'Please enter a unique resource identifier',
-        ip:'IP Address',
-        mac:'NE MAC address',
-        macTip:'Able to locate the physical address (MAC) of the network element',
-        port:'Port',
-        portTip:'Maximum range 0~65535',
-        pvflag:'PV Flag',
-        pnf:'Physical Network Element',
-        vnf:'Virtual Network Element',
-        province:'Region',
-        vendorName:'Vendor Name',
-        dn:'Network Identification',
-        reload: 'Reload',
-        restart: 'Restart',
-        totalSure:'Confirm the network element with {operator} network element name {msg}',
-        stop: 'Stop',
-        start: 'Start',
-        log: 'Logs',
-        export: 'Export',
-        import: 'Import',
-        fileForm:'File Source',
-        selectPlease:'Please select the source of the import file',
-        server:'Server File',
-        local:'Local File',
-        fileSelect:'Please select the current import file',
-        sync:'Synchronize to NE',
-        open:'Open',
-        close:'Close',
-        addFail:'Add failed',
-        operFail:'Operation Failed'
+    agentManage:{
+      callings:{
+        callerIdNumber:'Caller Number',
+        calleeIdNumber:'Callee Number',
+        startTime:'Start Time',
+        answeredTime:'Answered Time(s)',
+        callDuration:'Call Duration',
+        msdData:'MSD Info',
       },
-      backupManage: {
-        setBackupTask: 'Set automatic backup time',
-        neTypePlease: 'Query network element type',
-        neType: 'NE Type',
-        neID: 'NE ID',
-        fileName: 'File Name',
-        createAt: 'Create at',
-        remark:'Remark',
-        edit:'Edit Backup File',
-        totalSure:'Confirm that {oper} records item number {id}?',
-      },
-      softwareManage: {
-        sendBtn: 'Distribute',
-        runBtn: 'Activate',
-        backBtn: 'Rollback',
-        historyBtn: 'Distribution Record',
-        neTypePlease: 'Select network element type',
-        neType: 'NE Type',
-        fileName: 'File Name',
-        version: 'Version',
-        versionPlease: 'Version number cannot be empty',
-        updateTime: 'Uploaded Time',
-        description: 'Description',
-        deleteTip: 'Are you sure to delete the data item with software [{fileName}]?',
-        downloadTip: 'Are you sure to download the data item with software [{fileName}]?',
-        updateComment: 'Comment',
-        updateCommentPlease: 'Please enter the software description',
-        updateFile: 'Software File',
-        updateFilePlease: 'Please upload the updated software file',
-        verifyFile: 'Verify File',
-        selectFile: 'SELECT FILE',
-        sendTitle: 'Distribute software version',
-        sendContent: 'Are you sure to send the file with the software package [{fileName}] to the corresponding network element?',
-        runTitle: 'Activate software version',
-        runContent: 'Are you sure to activate the software version of [{fileName}] that has been issued to the corresponding network element?',
-        backTitle: 'Fallback software version',
-        backContent: 'Confirm that the software version of [{fileName}] has been issued for the corresponding network element rollback?',
-        neId: 'Corresponding network element',
-        neIdPlease: 'Please select the corresponding network element',
-        versions:'Version',
-        upVersions:'Version before upgrade',
-        backVersions:'Version before rollback',
+      callback:{
+        callerIdNumber:'Caller Number',
+        calleeIdNumber:'Callee Number',
         status:'Status',
-        letUpTime:'Activation time',
-        createTime:'Creation time',
-        onlyAble:'Only upload file format {fileText} is supported',
-        nullVersion:'There is no rollback version for the current network element.',
-      },
-      license: {
-        neTypePlease: 'Select network element type',
-        neType: 'NE Type',
-        serialNum: 'Serial Num',
-        createTime: 'Time',
-        comment: 'Description',
-        updateComment: 'License Description',
-        updateCommentPlease: 'Please enter a license description',
-        updateFile: 'License File',
-        updateFilePlease: 'Please upload and update the License file',
-        selectFile: 'SELECT FILE',
-        neId: 'NE ID',
-        neIdPlease: 'Please select the corresponding network element',
-      },
-      configParam:{
-        dataNull:'No configuration item data yet',
-        editSuss:'Modification successful',
-        editFail:'Edit failed',
-        Unable:'Illegal operation of attribute value',
-        delSure:'Confirm to delete the data item with Index [{value}]?',
-        addSuss:'Add successfully',
-        addFail:'Add failed',
-        delArraySure:'Confirm to delete the data item with {arrayChildTitle} Index as [{value}]?',
-        parUnable:'The parameter value is not within the reasonable range',
-        ipv4Tip:'Not a legal IPV4 address',
-        ipv6Tip:'Not a legal IPV6 address',
-        enumTip:'Not a reasonable enumeration value',
-        boolTip:'Not a reasonable Boolean value',
-        default:'The input value is of unknown type',
-        reloadSuss:'Network element reloading completed',
-        reloadFail:'Network element reloading failed',
-        neNUll:'No network element list data yet',
-        reload:'Reload',
-        post:'Submit',
-        editSure:'Are you sure you want to update this attribute value? ',
-        arraryEdit:'Are you sure to submit the record whose updated Index is [{value}]? ',
-        addSure:'Are you sure to submit the new record of Index: [{value}]? '
-      },
-      configParamForm: {
-        treeTitle: "Navigation Configuration",
-        treeSelectTip: "Select configuration item information in the left configuration navigation!",
-        neType: 'NE Type',
-        neTypePleace: "Please select the network element type",
-        noConfigData: "No data on configuration items",
-        updateValue: "[ {num} ] parameter value modified successfully.",
-        updateValueErr: "Attribute value modification failure",
-        updateItem: "Modify Index to {num}.",
-        updateItemErr: "Record modification failure",
-        delItemOk: "Deleting Index as {num} succeeded",
-        addItemOk: "Add Index as {num} Record Succeeded",
-        addItemErr: "Record addition failure",
-        requireUn: "[ {display} ] input value is of unknown type",
-        requireString: "[ {display} ] parameter value is invalid.",
-        requireInt: "[ {display} ] parameter value not in reasonable range {filter}",
-        requireIpv4: "[ {display} ] not a legitimate IPV4 address",
-        requireIpv6: "[ {display} ] not a legitimate IPV6 address.",
-        requireEnum: "[ {display} ] is not a reasonable enumeration value.",
-        requireBool: "[ {display} ] is not a reasonable boolean value.",
-        editOkTip: "Confirm updating the value of this [ {num} ] attribute?",
-        updateItemTip: "Confirm updating the data item with Index [{num}]?",
-        delItemTip: "Confirm deleting the data item with Index [{num}]?",
-        arrayMore: "Expand",
-      },
+        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',
@@ -576,14 +499,47 @@ export default {
         resultFail: "Fail",
         delTip: "Confirm deletion of the data item numbered [{msg}]?",
         exportTip: "Do you confirm to export the current query conditions of the CDR data? (Maximum 10,000 items can be exported.)",
-        smfChargingID: 'Charging ID',
+        chargingID: 'Charging ID',
         smfSubscriptionIDData: 'Subscription ID Data',
         smfSubscriptionIDType: 'Subscription ID Type',
         smfDataVolumeUplink: 'Data Volume Uplink',
         smfDataVolumeDownlink: 'Data Volume Downlink',
         smfDataTotalVolume: 'Data Total Volume',
-        smfDuration: 'Duration',
-        smfInvocationTime: 'Invocation Time',
+        durationTime: 'Duration',
+        invocationTime: 'Invocation Time',
+        sgwcServedIMSI: 'IMSI',
+        sgwcServedMSISDN: 'MSISDN',
+        sgwcVolumeGPRSUplink: 'GPRS Uplink',
+        sgwcVolumeGPRSDownlink: 'GPRS Downlink',
+        recordPath:'Record Path',
+        msd:' MSD',
+        automaticActivation: 'Automatic Activation',
+        positionCanBeTrusted: 'Position Can Be Trusted',
+        testCall: 'Test Call',
+        vehicleType:'Vehicle Type',
+        messageIdentifier: 'Message Identifier',
+        numberOfOccupants: 'Number Of Occupants',
+        n1latitudeDelta:'Latitude Delta',
+        n1longitudeDelta: 'Longitude Delta',
+        n2latitudeDelta:'Latitude Delta',
+        n2longitudeDelta: 'Longitude Delta',
+        timestamp: 'Timestamp',
+        vehicleDirection: 'Vehicle Direction',
+        isovds: 'Vehicle Descriptor Section',
+        isovisModelyear:'Vehicle Identifier Section Year',
+        isovisSeqPlant: 'Vehicle Identifier Section Plant & Serial',
+        isowmi: 'World Manufacturer Identifier',
+        positionLatitude: 'Position Latitude',
+        positionLongitude: 'Position Longitude',
+        dieselTankPresent: 'Diesel Tank Present',
+        electricEnergyStorage: 'Electric Energy Storage',
+        gasolineTankPresent: 'Gasoline Tank Present',
+        control:'Control',
+        recentVehicleLocationN1:'Recent Vehicle Location N1',
+        recentVehicleLocationN2:'Recent Vehicle Location N2',
+        vehicleIdentificationNumber:'Vehicle Identification Number',
+        vehicleLocation:'Vehicle Location',
+        vehiclePropulsionStorageType:'Vehicle Propulsion Storage Type',
       },
       ue: {
         eventType: "Event Type",
@@ -758,6 +714,7 @@ export default {
         upgradeDone: 'Update complete, service being reloaded',
         upgradeFail: 'The update fails, please check whether the software file exists and whether the service terminal environment is available!',
         upgradeModal: 'Network Element Version Updates',
+        noPath: 'Package File Not Found',
       },
       neLicense: {
         status: "License Status",
@@ -781,7 +738,9 @@ export default {
         treeSelectTip: "Select configuration item information in the left configuration navigation!",
         neType: 'NE Type',
         neTypePleace: "Please select the network element type",
+        neIdSyncPleace: "Please select the synchronized network element",
         noConfigData: "No data on configuration items",
+        noConfigdDisabled: "The configuration item is not normal",
         updateValue: "[ {num} ] parameter value modified successfully.",
         updateValueErr: "Attribute value modification failure",
         updateItem: "Modify Index to {num}.",
@@ -842,7 +801,7 @@ export default {
         installSourceUpload: 'New Upload',
         installSelect: 'Select Record',
         installUpload: 'Upload File',
-        installText: 'Installed',
+        installText: 'Install',
         licenseTitle: "Licenses",
         licenseDesc: "Network element service authorization certification",
         licenseResultTitle: "Whether to authorize activation immediately",
@@ -855,6 +814,30 @@ export default {
         licenseTip2: '2. Clicking [Finish] will end the installation process.',
       },
     },
+    neData: {
+      baseStation: {
+        list: "List",
+        topology: "Topology",
+        nbName: "RanNodeName",
+        ueNum: "UE Number",
+        topologyTitle: "Radio State Graph",
+        name: "Name",
+        namePlease: "text content length 0~64",
+        position: "Position",
+        positionPlease: "location description. Prohibition of spaces, length of text content 0-64",
+        address: "IP Address",
+        addressPlease: "text content length 0~64",
+        state: "State",
+        online: "Online",
+        offline: "Offline",
+        time: "Change Time",
+        addRadio: "Add Radio Info",
+        editRadio: "Edit Radio Info",
+        history: "Status History",
+        exportTip: "Confirm exporting xlsx table files based on search criteria?",
+        importDataEmpty: "Imported data is empty",
+      },
+    },
     neUser: {
       auth: {
         authInfo:' Authentication Info',
@@ -865,9 +848,10 @@ export default {
         checkExport : 'Check Export',
         checkExportConfirm: 'Confirm exporting the checked authenticated user data?',
         import: 'Import',
+        importFail: 'Failure Record',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
-        loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. Please wait a moment!!!!',
+        loadDataTip: 'Successfully fetched loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
         startIMSI: 'Start IMSI',
         batchAddText: 'Batch Add',
         batchDelText: 'Batch Delete',
@@ -893,9 +877,10 @@ export default {
         checkExport : 'Check Export',
         checkExportConfirm: 'Are you sure to export the data of the checked subscribers?',
         import: 'Import',
+        importFail: 'Failure Record',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
-        loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. Please wait a moment!!!!',
+        loadDataTip: 'Successfully fetched loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
         numAdd: 'Number of releases',
         numDel: 'Number of deleted',
         checkDel: 'Check Delete',
@@ -1054,6 +1039,14 @@ export default {
         realTimeData: "Real Time Data",
       },
       customTarget:{
+        TourTitle1:'Calculate element selection',
+        TourDes1:'Select the metric corresponding to the selected NE type for the calculation formula',
+        TourTitle2:'Calculate symbol selection',
+        TourDes2:'Select a calculation symbol',
+        TourTitle3:'Calculation formula',
+        TourDes3:'The calculation formula is automatically composed from the calculation elements and calculation symbols selected earlier',
+        TourTitle4:'Result unit',
+        TourDes4:'Units are optional. PS: Formula automatically × 100% when the % sign',
         kpiId:' Custom Indicator',
         kpiIdTip:'This Ne has no custom indicators',
         period:' Granularity',
@@ -1062,7 +1055,9 @@ export default {
         expression:'Expression',
         description:' Description',
         kpiSet:' Statistical Settings',
-        delCustomTip:'Confirm deletion of data item with record number {num}?',
+        sixHoursAgo:'Six hours ago',
+        threeHoursAgo:'Three hours ago.',
+        delCustomTip:'Confirm deletion of data item with record Custom Indicator {num}?',
         delCustom:' Successfully delete record number {num} custom indicator',
         addCustom:' Add custom indicator',
         editCustom:' Edit Custom indicator',
@@ -1074,8 +1069,15 @@ export default {
         element:'Element',
         granularity:'Granularity',
         unit:'Unit',
+        expressionModal:'Expression Modal',
+        expressionErrorTip:'Please check the expression, the wrong indicator is {kpiId}',
+        expressionNoIdTip:'Please check the expression, no valid indicator is found',
+        unitSelect:'To better display the image, the same unit needs to be selected. The current unit is:',
       },
       kpiKeyTarget:{
+        "time":"Time",
+        "rawData":"Table Data",
+        "statistics":"NE metrics",
         "fullWidthLayout":"Full Width",
         "twoColumnLayout":"Two Column",
         "saveLayout": "Save Layout",
@@ -1088,6 +1090,15 @@ export default {
         "layout3": "Layout 3"
       },
       kpiOverView:{
+        "kpiName":"NE Metrics Name",
+        "maxValue":"Max",
+        "maxValueTip":"The max value of metric data within the user's filtered time range.",
+        "minValue":"Min",
+        "minValueTip":"The min value of metric data within the user's filtered time range.",
+        "avgValue":"Avg",
+        "avgValueTip":"The average value of metric data within the user's filtered time range.",
+        "totalValue":"Sum",
+        "totalValueTip":"The sum value of metric data within the user's filtered time range.",
         "kpiChartTitle":"Overview of NE metrics",
         "changeLine":"Change to Line Charts",
         "changeBar":"Change to Bar Charts",
@@ -1298,12 +1309,13 @@ export default {
         size: "Size",
         modifiedTime: "Modified Time",
         fileName: "File Name",
+        downTipZip: "Confirm downloading the directory [{fileName}] as a ZIP file?",
         downTip: "Confirm the download file name is [{fileName}] File?",
         downTipErr: "Failed to get file",
         dirCd: "Enter Dir",
         viewAs: 'View Action',
         reload: "Reload",
-        follow: 'Monitoring Content',
+        follow: 'Enable Instant Update',
         tailChar: 'End Characters',
         tailLines: 'End Lines',
       },

src/i18n/locales/zh-CN.ts

@@ -1,3 +1,7 @@
+import { language } from "@/plugins/http-fetch";
+import { eventData } from "@/views/dashboard/overview/hooks/useUserActivity";
+import { start, status } from "nprogress";
+
 export default {
   // 语言
   i18n: '中文',
@@ -6,7 +10,7 @@ export default {
 
   // 通用
   common: {
-    title: '核心网管理平台',
+    title: '登录平台',
     desc: '核心网管理平台',
     loading: '请稍等...',
     inputPlease: '请输入',
@@ -192,6 +196,7 @@ export default {
       lockPasswd: "解锁密码",
       lockPasswdTip: "可不设置密码",
       fullscreen: "全屏显示",
+      theme: "主题明/暗模式",
       logout: "退出登录",
       profile: "个人中心",
       settings: "个人设置",
@@ -221,13 +226,12 @@ export default {
       capability: '用户容量',
       serialNum: '序列号',
       expiryDate: '许可证到期日期',
-      neStatus:'网元状态异常',
+      neStatus:'状态异常',
       runStatus:'运行状态',
-      mark:'简略信息',
+      mark:'信息',
       object:'对象',
       versionNum:'版本号',
-      systemStatus:'系统状态',
-      realNeStatus:'网元状态',
+      realNeStatus:'状态',
       reloadTime:'刷新时间',
       Critical:'严重告警',
       Major:'主要告警',
@@ -317,6 +321,8 @@ export default {
         color: "风格配色",
         colorActions: "整体风格配色设置",
         colorRandomly: "随机",
+        theme: "主题明暗模式",
+        themeActions: "切换浅色/暗黑模式",
         navTheme: "深色菜单",
         navThemeActions: "只能改变导航模式的菜单",
         fixedHeader: "固定顶部导航栏",
@@ -348,168 +354,89 @@ export default {
         description: "暂无数据，尝试刷新看看",
       },
     },
-    configManage: {
-      neManage: {
-        addNe:'添加网元',
-        delSure:'确认删除网元名称为{msg}的数据项 ',
-        editNe:'修改网元',
-        exportSure:'确认导出网元名称为 {msg} 的配置信息',
-        exportTip:'导出成功,请到备份管理进行下载',
-        getInfo:'获取网元信息失败',
-        neType:'网元类型',
-        neTypePlease: '请输入网元类型',
-        neId:'网元内部标识',
-        neName:'网元名称',
-        neTypeTip:'填写创建的网元类型,如:SMF',
-        uid:'资源唯一标识',
-        uidTip:'请输入资源唯一标识',
-        ip:'IP地址',
-        mac:'网元物理地址',
-        macTip:'能够定位网元的物理地址(MAC)',
-        port:'端口',
-        portTip:'最大范围0~65535',
-        pvflag:'网元虚拟化标识',
-        pnf:'物理网元',
-        vnf:'虚拟网元',
-        province:'网元服务省份',
-        vendorName:'厂商名称',
-        dn:'网络标识',
-        reload: '重载',
-        restart: '重启',
-        totalSure:'确认{oper}网元名称为 {msg} 的网元',
-        stop: '停止',
-        start: '启动',
-        log: '日志',
-        export: '导出',
-        import: '导入',
-        fileForm:'文件来源',
-        selectPlease:'请选择导入文件来源',
-        server:'服务器文件',
-        local:'本地文件',
-        fileSelect:'请选择当前导入文件',
-        sync:'同步到网元',
-        open:'开',
-        close:'关',
-        addFail:'新增失败',
-        operFail:'操作失败'
+    agentManage:{
+      callings:{
+        callerIdNumber:'主叫号码',
+        calleeIdNumber:'被叫号码',
+        startTime:'开始时间',
+        answeredTime:'接听时间(s)',
+        callDuration:'通话时长',
+        msdData:'MSD内容',
       },
-      backupManage: {
-        setBackupTask: '设置自动备份时间',
-        neTypePlease: '查询网元类型',
-        neType: '网元类型',
-        neID: '网元内部标识',
-        fileName: '文件名',
-        createAt: '创建时间',
-        remark:'备份说明',
-        edit:'编辑备份文件',
-        totalSure:'确认{oper}记录编号为 {id} 的数据项?',
-      },
-      softwareManage: {
-        sendBtn: '下发',
-        runBtn: '激活',
-        backBtn: '回退',
-        historyBtn: '下发记录',
-        neTypePlease: '选择网元类型',
-        neType: '网元类型',
-        fileName: '文件名',
-        version: '版本号',
-        versionPlease: '版本号不能为空',
-        updateTime: '上传时间',
-        description: '功能描述',
-        deleteTip: '确认删除 【{fileName}】 的软件数据项?',
-        downloadTip: '确认下载 【{fileName}】 的软件数据项?',
-        updateComment: '软件说明',
-        updateCommentPlease: '请输入软件说明',
-        updateFile: '软件文件',
-        updateFilePlease: '请上传更新软件文件',
-        verifyFile: '校验文件',
-        selectFile: '选择文件',
-        sendTitle: '下发软件版本',
-        sendContent: '确认下发软件包为【{fileName}】的文件到对应网元?',
-        runTitle: '激活软件版本',
-        runContent: '确认在对应网元激活已下发【{fileName}】的软件版本?',
-        backTitle: '回退软件版本',
-        backContent: '确认在对应网元回退已下发【{fileName}】的软件版本?',
-        neId: '对应网元',
-        neIdPlease: '请选择对应网元',
-        versions:'版本',
-        upVersions:'升级前版本',
-        backVersions:'回退前版本',
+      callback:{
+        callerIdNumber:'主叫号码',
+        calleeIdNumber:'被叫号码',
         status:'状态',
-        letUpTime:'激活时间',
-        createTime:'创建时间',
-        onlyAble:'只支持上传文件格式 {fileText}',
-        nullVersion:'当前网元无可回退版本',
-      },
-      license: {
-        neTypePlease: '选择网元类型',
-        neType: '网元类型',
-        serialNum: '序列号',
-        createTime: '时间',
-        comment: '说明',
-        updateComment: 'License说明',
-        updateCommentPlease: '请输入License说明',
-        updateFile: 'License文件',
-        updateFilePlease: '请上传更新License文件',
-        selectFile: '选择文件',
-        neId: '网元内部标识',
-        neIdPlease: '请选择对应网元',
-      },
-      configParam:{
-        dataNull:'暂无配置项数据',
-        editSuss:'修改成功',
-        editFail:'修改失败',
-        unable:'非法操作属性值',
-        delSure:'确认删除Index为 【{value}】 的数据项?',
-        addSuss:'新增成功',
-        addFail:'新增失败',
-        delArraySure:'确认删除{arrayChildTitle} Index 为 【{value}】 的数据项?',
-        parUnable:'参数值不在合理范围',
-        ipv4Tip:'不是合法的IPV4地址',
-        ipv6Tip:'不是合法的IPV6地址',
-        enumTip:'不是合理的枚举值',
-        boolTip:'不是合理的布尔类型的值',
-        default:'输入值是未知类型',
-        reloadSuss:'网元重新加载完成',
-        reloadFail:'网元重新加载失败',
-        neNUll:'暂无网元列表数据',
-        reload:'重载',
-        post:'提交',
-        editSure:'确认更新该属性值吗？',
-        arraryEdit:'确认提交更新 Index 为 【{value}】 的记录吗？',
-        addSure:'确认提交新增 Index :【{value}】 的记录吗？',
-      },
-      configParamForm: {
-        treeTitle: "配置导航",
-        treeSelectTip: "左侧配置导航中选择配置项信息！",
-        neType: "网元类型",
-        neTypePleace: "请选择网元类型",
-        noConfigData: "暂无配置项数据",
-        updateValue: "【 {num} 】 属性值修改成功",
-        updateValueErr: "属性值修改失败",
-        updateItem: "修改 Index 为 {num} 记录成功",
-        updateItemErr: "记录修改失败",
-        delItemOk: "删除 Index 为 {num} 记录成功",
-        addItemOk: "新增 Index 为 {num} 记录成功",
-        addItemErr: "记录新增失败",
-        requireUn: "【 {display} 】输入值是未知类型",
-        requireString: "【 {display} 】参数值不合理",
-        requireInt: "【 {display} 】参数值不在合理范围 {filter}",
-        requireIpv4: "【 {display} 】不是合法的IPV4地址",
-        requireIpv6: "【 {display} 】不是合法的IPV6地址",
-        requireEnum: "【 {display} 】不是合理的枚举值",
-        requireBool: "【 {display} 】不是合理的布尔类型的值",
-        editOkTip: "确认更新该【 {num} 】属性值吗？",
-        updateItemTip: "确认更新Index为 【{num}】 的数据项？",
-        delItemTip: "确认删除Index为 【{num}】 的数据项？",
-        arrayMore: "展开",
-      },
+        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:'用户信息',
@@ -576,14 +503,47 @@ export default {
         resultFail: "失败",
         delTip: "确认删除编号为【{msg}】的数据项?",
         exportTip: "确认导出当前查询条件的话单数据吗？（导出最大支持一万条）",
-        smfChargingID: '计费ID',
+        chargingID: '计费ID',
         smfSubscriptionIDData: '订阅 ID 数据',
         smfSubscriptionIDType: '订阅 ID 类型',
         smfDataVolumeUplink: '数据量上行链路',
         smfDataVolumeDownlink: '数据量下行链路',
         smfDataTotalVolume: '数据总量',
-        smfDuration: '持续时间',
-        smfInvocationTime: '调用时间',
+        durationTime: '持续时间',
+        invocationTime: '调用时间',
+        sgwcServedIMSI: 'IMSI',
+        sgwcServedMSISDN: 'MSISDN',
+        sgwcVolumeGPRSUplink: 'GPRS 上行链路',
+        sgwcVolumeGPRSDownlink: 'GPRS 下行链路',
+        recordPath:'录音文件路径',
+        msd:'最小数据集',
+        automaticActivation: '自动激活',
+        positionCanBeTrusted: '位置可信',
+        testCall: '测试呼叫',
+        vehicleType:'车辆类型',
+        messageIdentifier: '消息标识',
+        numberOfOccupants: '乘员数量',
+        n1latitudeDelta:'纬度增量',
+        n1longitudeDelta: '经度增量',
+        n2latitudeDelta:' 纬度增量',
+        n2longitudeDelta: '经度增量',
+        timestamp: '时间戳',
+        vehicleDirection: '车辆行驶方向',
+        isovds: '车辆描述段',
+        isovisModelyear:'车辆标识段年份',
+        isovisSeqPlant: '车辆标识段的工厂编码与生产序号',
+        isowmi: '世界制造商标识',
+        positionLatitude: '位置纬度',
+        positionLongitude: '位置经度',
+        dieselTankPresent: '柴油罐存在',
+        electricEnergyStorage: '电力储能',
+        gasolineTankPresent: '汽油罐存在',
+        control:'控制',
+        recentVehicleLocationN1:'最近车辆位置N1',
+        recentVehicleLocationN2:'最近车辆位置N2',
+        vehicleIdentificationNumber:'车辆识别号码',
+        vehicleLocation:'车辆位置',
+        vehiclePropulsionStorageType:'车辆推进存储类型',
       },
       ue: {
         eventType: "事件类型",
@@ -758,6 +718,7 @@ export default {
         upgradeDone: '更新完成，服务正在重载',
         upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
         upgradeModal: '网元版本更新',
+        noPath: '软件包文件未发现',
       },
       neLicense: {
         status: "许可证状态",
@@ -781,7 +742,9 @@ export default {
         treeSelectTip: "左侧配置导航中选择配置项信息！",
         neType: "网元类型",
         neTypePleace: "请选择网元类型",
+        neIdSyncPleace: "请选择同步网元",
         noConfigData: "暂无配置项数据",
+        noConfigdDisabled: "配置项网元未正常服务",
         updateValue: "【 {num} 】 属性值修改成功",
         updateValueErr: "属性值修改失败",
         updateItem: "修改 Index 为 {num} 记录成功",
@@ -855,6 +818,30 @@ export default {
         licenseTip2: '2. 点击【结束】将结束安装过程',
       },
     },
+    neData: {
+      baseStation: {
+        list: "列表",
+        topology: "拓扑图",
+        nbName: "设备名称",
+        ueNum: "在线用户数",
+        topologyTitle: "基站状态关系图",
+        name: "基站名称",
+        namePlease: "文本内容长度0~64",
+        position: "基站位置",
+        positionPlease: "位置描述。禁止空格，文本内容长度0-64",
+        address: "IP地址",
+        addressPlease: "文本内容长度0~64",
+        state: "基站状态",
+        online: "在线",
+        offline: "离线",
+        time: "变更时间",
+        addRadio: "添加基站信息",
+        editRadio: "更新基站信息",
+        history: "历史记录",
+        exportTip: "确认根据搜索条件导出xlsx表格文件吗?",
+        importDataEmpty: "导入数据为空",
+      },
+    },
     neUser: {
       auth: {
         authInfo:'鉴权信息',
@@ -865,9 +852,10 @@ export default {
         checkExport : '勾选导出',
         checkExportConfirm: '确认导出已勾选的鉴权用户数据吗？',
         import: '导入',
+        importFail: '失败记录',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
-        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，请稍候!!!',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
         startIMSI: '起始IMSI',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
@@ -893,9 +881,10 @@ export default {
         checkExport : '勾选导出',
         checkExportConfirm: '确认导出已勾选的签约用户数据吗？',
         import: '导入',
+        importFail: '失败记录',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
-        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，请稍候!!!',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
         numAdd: '放号个数',
         numDel: '删除个数',
         checkDel:'勾选删除',
@@ -1054,6 +1043,14 @@ export default {
         realTimeData: "实时数据",
       },
       customTarget:{
+        TourTitle1:'计算元素选择',
+        TourDes1:'选择已经勾选网元类型对应的指标用于计算公式',
+        TourTitle2:'计算符号选择',
+        TourDes2:'选择计算符号',
+        TourTitle3:'计算公式',
+        TourDes3:'由前面选择的计算元素和计算符号自动组成计算公式',
+        TourTitle4:'结果单位',
+        TourDes4:'单位可选可填。PS：%符号时公式自动×100%',
         kpiId:'自定义指标项',
         kpiIdTip:'该网元没有自定义指标',
         period:'颗粒度',
@@ -1062,7 +1059,9 @@ export default {
         expression:'计算公式',
         description:'描述',
         kpiSet:'统计设置',
-        delCustomTip:'确认删除记录编号为 {num} 的数据项?',
+        sixHoursAgo:'6小时前',
+        threeHoursAgo:'3小时前',
+        delCustomTip:'确认删除自定义指标项为 {num} 的数据项?',
         delCustom:'成功删除记录编号为 {num} 自定义指标',
         addCustom:'添加自定义指标',
         editCustom:'编辑自定义指标',
@@ -1074,8 +1073,15 @@ export default {
         element:'元素',
         granularity:'颗粒度',
         unit:'单位',
-        },
+        expressionModal:'表达式模块',
+        expressionErrorTip:'请检查表达式,错误的指标为{kpiId}',
+        expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
+        unitSelect:'为更好展示图需选择相同单位,当前单位为:',
+      },
       kpiKeyTarget:{
+        "time":"时间",
+        "rawData":"表格数据",
+        "statistics":"指标",
         "fullWidthLayout":"全宽布局",
         "twoColumnLayout":"两列布局",
         "saveLayout": "保存布局",
@@ -1088,12 +1094,20 @@ export default {
         "layout3": "布局3"
       },
       kpiOverView:{
+        "kpiName":"指标名",
+        "maxValue":"最大值",
+        "maxValueTip":"用户筛选时间范围内度量数据的最大值。",
+        "minValue":"最小值",
+        "minValueTip":"用户筛选时间范围内度量数据的最小值。",
+        "avgValue":"平均值",
+        "avgValueTip":"用户筛选时间范围内度量数据的平均值。",
+        "totalValue":"总值",
+        "totalValueTip":"用户筛选时间范围内度量数据的总值。",
         "kpiChartTitle":"网元指标概览",
         "changeLine":"切换为折线图",
         "changeBar":"切换为柱状图",
         "chooseShowMetrics":"选择需要显示的指标",
         "chooseMetrics":"选择指标",
-
       },
     },
     traceManage: {
@@ -1299,6 +1313,7 @@ export default {
         size: "文件大小",
         modifiedTime: "修改时间",
         fileName: "文件名称",
+        downTipZip: "确认将目录 【{fileName}】 下载为ZIP文件?",
         downTip: "确认下载文件名为 【{fileName}】 文件?",
         downTipErr: "文件获取失败",
         dirCd: "进入目录",
@@ -1335,8 +1350,8 @@ export default {
         filter: "全局过滤",
         startTime: '开始时间',
         endTime: '结束时间',
-        today: '昨天',
-        yesterday: '今天',
+        today: '今天',
+        yesterday: '昨天',
         week: '本周',
         month: '本月',
         avgLoad: '平均负载',

src/layouts/BasicLayout.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import {
   ProLayout,
-  WaterMark,
   getMenuData,
   clearMenuItem,
-  type MenuDataItem,
+  MenuDataItem,
 } from 'antdv-pro-layout';
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
@@ -12,34 +11,36 @@ import GlobalMask from '@/components/GlobalMask/index.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
 import {
   computed,
-  reactive,
-  watch,
+  nextTick,
   onMounted,
   onUnmounted,
-  nextTick,
+  reactive,
+  watch,
 } from 'vue';
+import { useRouter } from 'vue-router';
 import useLayoutStore from '@/store/modules/layout';
+import useAppStore from '@/store/modules/app';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
-import useAlarmStore from '@/store/modules/alarm';
-import useAppStore from '@/store/modules/app';
-import { useRouter } from 'vue-router';
-import { MENU_PATH_INLINE } from '@/constants/menu-constants';
-const { proConfig, waterMarkContent } = useLayoutStore();
 import useI18n from '@/hooks/useI18n';
+import useAlarmStore from '@/store/modules/alarm';
 import { getServerTime } from '@/api';
+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();
 
 /**菜单面板 */
-let layoutState = reactive({
+const layoutState = reactive({
   collapsed: false, // 是否展开菜单面板
   openKeys: ['/'], // 打开菜单key
   selectedKeys: ['/index'], // 选中高亮菜单key
@@ -67,18 +68,23 @@ watch(
 );
 
 // 动态路由添加到菜单面板
-const rootRoute = router.getRoutes().find(r => r.name === 'Root');
-if (rootRoute) {
-  const children = routerStore.setRootRouterData(rootRoute.children);
-  const buildRouterData = routerStore.buildRouterData;
-  if (buildRouterData.length > 0) {
-    rootRoute.children = children.concat(buildRouterData);
-  } else {
-    rootRoute.children = children;
+const menuData = computed(() => {
+  const rootRoute = router.getRoutes().find(r => r.name === 'Root');
+  if (rootRoute) {
+    const children = routerStore.setRootRouterData(rootRoute.children);
+    const buildRouterData = routerStore.buildRouterData;
+    if (buildRouterData.length > 0) {
+      rootRoute.children = children.concat(buildRouterData);
+    } else {
+      rootRoute.children = children;
+    }
   }
-}
-
-const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
+  const neTypes = neListStore.getNeSelectOtions.map(v => v.value);
+  let routes = clearMenuItem(router.getRoutes());
+  routes = routerStore.clearMenuItemByNeList(routes, neTypes);
+  const { menuData } = getMenuData(routes);
+  return menuData;
+});
 
 /**面包屑数据对象，排除根节点和首页不显示 */
 const breadcrumb = computed(() => {
@@ -247,7 +253,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <WaterMark :content="waterMarkContent" :z-index="100">
+  <a-watermark :content="waterMarkContent" :z-index="100">
     <ProLayout
       v-model:collapsed="layoutState.collapsed"
       v-model:selectedKeys="layoutState.selectedKeys"
@@ -290,10 +296,10 @@ onUnmounted(() => {
         </RouterLink>
       </template>
 
-      <!--插槽-顶部左侧，只对side布局有效-->
+      <!--插槽-渲染顶部内容区域，仅布局side有效-->
       <template #headerContentRender></template>
 
-      <!--插槽-顶部右侧-->
+      <!--插槽-渲染顶部内容右端区域-->
       <template #headerContentRightRender>
         <RightContent />
       </template>
@@ -364,7 +370,7 @@ onUnmounted(() => {
 
     <!-- 全局遮罩 -->
     <GlobalMask />
-  </WaterMark>
+  </a-watermark>
 </template>
 
 <style lang="less" scoped>
@@ -413,6 +419,19 @@ onUnmounted(() => {
   }
 }
 
+.theme-light.theme-menu-light .app-name {
+  color: #141414 !important;
+}
+.theme-light.theme-menu-dark .app-name {
+  color: #fff !important;
+}
+.theme-dark.theme-menu-light .app-name {
+  color: #fff !important;
+}
+.theme-dark.theme-menu-dark .app-name {
+  color: #fff !important;
+}
+
 .footer {
   z-index: 16;
   margin: 0px;
@@ -427,6 +446,7 @@ onUnmounted(() => {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
+    align-items: center;
     padding: 4px 16px;
     background: #fff;
     box-shadow: 0 1px 4px #0015291f;
@@ -434,6 +454,10 @@ onUnmounted(() => {
     height: 32px;
   }
 
+  [data-theme='dark'] &-fixed {
+    background: #141414;
+  }
+
   & #serverTimeDom {
     color: inherit;
     opacity: 0.85;

src/layouts/components/RightContent.vue

@@ -1,16 +1,22 @@
 <script setup lang="ts">
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import svgLight from '@/assets/svg/light.svg';
+import svgDark from '@/assets/svg/dark.svg';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { viewTransitionTheme } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useFullscreen } from '@vueuse/core';
+import { hasPermissions } from '@/plugins/auth-user';
 import useI18n from '@/hooks/useI18n';
+import useLayoutStore from '@/store/modules/layout';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useAlarmStore from '@/store/modules/alarm';
 import useMaskStore from '@/store/modules/mask';
-import { hasPermissions } from '@/plugins/auth-user';
-import { ref } from 'vue';
 const { isFullscreen, toggle } = useFullscreen();
 const { t, changeLocale, optionsLocale } = useI18n();
+const layoutStore = useLayoutStore();
 const maskStore = useMaskStore();
 const userStore = useUserStore();
 const appStore = useAppStore();
@@ -57,6 +63,13 @@ function fnClickAlarm() {
   router.push({ name: 'ActiveAlarm_2088' });
 }
 
+/**改变主题色 */
+function fnClickTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
+}
+
 /**改变多语言 */
 function fnChangeLocale(e: any) {
   changeLocale(e.key);
@@ -65,7 +78,7 @@ function fnChangeLocale(e: any) {
 
 <template>
   <a-space :size="12" align="center">
-    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottomRight">
       <template #title>{{ t('loayouts.rightContent.alarm') }}</template>
       <a-button type="text" style="color: inherit" @click="fnClickAlarm">
         <template #icon>
@@ -83,7 +96,7 @@ function fnChangeLocale(e: any) {
 
     <!-- 锁屏操作 -->
     <span v-perms:has="['system:setting:lock']">
-      <a-tooltip placement="bottom">
+      <a-tooltip placement="bottomRight">
         <template #title>{{ t('loayouts.rightContent.lock') }}</template>
         <a-button type="text" style="color: inherit" @click="fnClickLock()">
           <template #icon>
@@ -92,10 +105,11 @@ function fnChangeLocale(e: any) {
         </a-button>
         <ProModal
           :drag="true"
+          :center-y="true"
           :width="400"
           :minHeight="200"
           :mask-closable="false"
-          v-model:visible="lockConfirm"
+          v-model:open="lockConfirm"
           :title="t('loayouts.rightContent.lockTip')"
           @ok="fnClickLockToPage()"
         >
@@ -119,7 +133,7 @@ function fnChangeLocale(e: any) {
       </a-tooltip>
     </span>
 
-    <a-tooltip placement="bottom">
+    <a-tooltip placement="bottomRight">
       <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
       <a-button type="text" style="color: inherit" @click="toggle">
         <template #icon>
@@ -129,14 +143,27 @@ function fnChangeLocale(e: any) {
       </a-button>
     </a-tooltip>
 
+    <a-tooltip placement="bottomRight">
+      <template #title>{{ t('loayouts.rightContent.theme') }}</template>
+      <a-button type="text" @click="fnClickTheme">
+        <template #icon>
+          <img
+            v-if="layoutStore.proConfig.theme === 'dark'"
+            :src="svgDark"
+            class="theme-icon"
+          />
+          <img v-else :src="svgLight" class="theme-icon" />
+        </template>
+      </a-button>
+    </a-tooltip>
+
     <a-dropdown
-      placement="bottom"
+      placement="bottomRight"
       trigger="click"
       v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
     >
-      <a-button size="small" type="default">
-        {{ t('i18n') }}
-        <DownOutlined />
+      <a-button type="text" style="color: inherit">
+        <template #icon> <TranslationOutlined /> </template>
       </a-button>
       <template #overlay>
         <a-menu @click="fnChangeLocale">
@@ -204,4 +231,11 @@ function fnChangeLocale(e: any) {
     overflow: hidden;
   }
 }
+
+.theme-icon {
+  width: 18px;
+  height: 18px;
+  margin-bottom: 4px;
+  color: inherit;
+}
 </style>

src/layouts/components/Tabs.vue

@@ -4,9 +4,9 @@ import { computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import useTabsStore from '@/store/modules/tabs';
 import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
 const tabsStore = useTabsStore();
 const router = useRouter();
+const { t } = useI18n();
 
 defineProps({
   /**标签栏宽度 */
@@ -112,7 +112,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
     <a-tabs
       class="tabs"
       :class="{ 'tabs-fixed': fixedHeader }"
-      :style="{ width: width, top: headerRender === false ? 0 : undefined }"
+      :style="{ width: fixedHeader ? width : '100%', top: headerRender === false ? 0 : undefined }"
       hide-add
       tab-position="top"
       type="editable-card"
@@ -150,7 +150,7 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
           </a-tooltip>
           <a-tooltip placement="topRight">
             <template #title>{{ t('loayouts.tabs.more') }}</template>
-            <a-dropdown trigger="click" placement="bottomRight">
+            <a-dropdown placement="bottomRight" trigger="click">
               <a-button type="ghost" shape="circle" size="small">
                 <template #icon><DownOutlined /></template>
               </a-button>
@@ -199,7 +199,18 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true });
   }
 }
 
+[data-theme='dark'] .tabs {
+  background: #141414;
+}
+
 .tabs :deep(.ant-tabs-nav:before) {
   border-bottom: none;
 }
+.tabs :deep(.ant-tabs-nav-list .ant-tabs-tab) {
+  border-radius: 8px;
+}
+.tabs :deep(.ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active) {
+  border-bottom-right-radius: unset;
+  border-bottom-left-radius: unset;
+}
 </style>

src/main.ts

@@ -4,16 +4,15 @@ import App from './App.vue';
 import router from './router';
 import directive from './directive';
 import i18n from './i18n';
-import ProModal from "antdv-pro-modal";
-import 'antdv-pro-layout/dist/style.css';
+
 import 'antdv-pro-modal/dist/style.css';
-import 'ant-design-vue/dist/antd.variable.min.css';
+import 'antdv-pro-layout/dist/style.css';
+import 'ant-design-vue/dist/reset.css';
 
 const app = createApp(App);
 app.use(store);
 app.use(router);
 app.use(directive);
 app.use(i18n);
-app.use(ProModal);
 
 app.mount('#app');

src/plugins/file-static-url.ts

@@ -19,3 +19,26 @@ export function parseUrlPath(path: string) {
     : import.meta.env.VITE_API_BASE_URL;
   return `${baseUrl}${path}?r=${Math.random().toFixed(2)}`;
 }
+
+/**
+ * 解析静态文件相对路径
+ * @param path 静态资源文件
+ * @returns
+ */
+export function parseBasePath(path: string) {
+  if (!path || path === '#') {
+    return '#';
+  }
+  if (validHttp(path)) {
+    return path;
+  }
+  // 兼容旧前端可改配置文件
+  const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
+  let scriptUrl =
+    baseUrl.length === 1 && baseUrl.indexOf('/') === 0
+      ? ''
+      : baseUrl.indexOf('/') === -1
+      ? '/' + baseUrl
+      : baseUrl;
+  return `${scriptUrl}${path}?r=${Math.random().toFixed(2)}`;
+}

src/plugins/http-fetch.ts

@@ -198,7 +198,7 @@ function beforeRequest(options: OptionsType): OptionsType | Promise<any> {
   if (options.method === 'get') return options;
 
   // 非get参数提交
-  let body = options.data
+  let body = options.data;
   if (body instanceof FormData) {
     options.body = body;
   } else if (body) {

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) {
@@ -182,7 +207,12 @@ router.beforeEach(async (to, from, next) => {
     next({ name: 'Index' });
   }
 
-  const token = getToken();
+  let token = getToken();
+
+  // 免用户登录认证
+  if (!appStore.loginAuth) {
+    token = '== Not Login Auth ==';
+  }
 
   // 没有token
   if (!token) {
@@ -197,39 +227,321 @@ router.beforeEach(async (to, from, next) => {
 
   // 有Token
   if (token) {
-    // 防止重复访问登录页面
     if (to.path === '/login') {
       next({ name: 'Index' });
     } else {
-      // 判断当前用户是否有角色信息
       const user = useUserStore();
       if (user.roles && user.roles.length === 0) {
         try {
-          // 获取用户信息
+          await useNeInfoStore().fnNelist();
           await user.fnGetInfo();
-          // 获取路由信息
           const accessRoutes = await useRouterStore().generateRoutes();
-          // 根据后台配置生成可访问的路由表
+
           if (accessRoutes && accessRoutes.length !== 0) {
             for (const route of accessRoutes) {
-              // 动态添加可访问路由表，http开头会异常
               if (!validHttp(route.path)) {
                 router.addRoute(route);
               }
             }
+
+            // F5 刷新时，如果目标路由有效，直接跳转，不进行重定向
+            if (isRefresh && await isRouteAccessible(to, accessRoutes)) {
+              console.log(`F5 刷新，目标路由有效，直接跳转: ${to.path}`);
+              next({ ...to, replace: true });
+              return;
+            }
+
+            if (await isRouteAccessible(to, accessRoutes)) {
+              next({ ...to, replace: true });
+            } else {
+              // F5 刷新时，如果目标路由无效，优先跳转到首页
+              if (isRefresh) {
+                console.log(`F5 刷新，目标路由无效，跳转到首页: ${to.path}`);
+                next({ name: 'Index', replace: true });
+                return;
+              }
+
+              const validRedirect = findValidRedirect(to, accessRoutes);
+              if (validRedirect && validRedirect !== to.path) {
+                redirectCount.set(redirectKey, currentCount + 1);
+                console.log(`重定向到有效路由: ${to.path} -> ${validRedirect}`);
+                next({ path: validRedirect, replace: true });
+              } else {
+                next({ name: 'Index', replace: true });
+              }
+            }
+          } else {
+            next({ name: 'Index', replace: true });
           }
-          // 刷新替换原先路由，确保addRoutes已完成
-          next({ ...to, replace: true });
-        } catch (error: any) {
-          console.error(`[${to.path}]: ${error.message}`);
-          await user.fnLogOut();
-          next({ name: 'Login' });
+        } catch (error) {
+          console.error('Route guard error:', error);
+          next(`/login?redirect=${to.fullPath}`);
+        }
+      } else if (
+        to.meta.neType &&
+        to.meta.neType.length > 0 &&
+        !useNeInfoStore().fnHasNe(to.meta.neType)
+      ) {
+        // 找到有效的替代路由
+        const validRedirect = findValidAlternative(to);
+        if (validRedirect && validRedirect !== to.path) {
+          redirectCount.set(redirectKey, currentCount + 1);
+          console.log(`403 重定向: ${to.path} -> ${validRedirect}`);
+          next({ path: validRedirect, replace: true });
+        } else {
+          console.log(`无有效替代路由，跳转到权限错误页面: ${to.path}`);
+          next({ name: 'NotPermission' });
         }
       } else {
+        // 清除重定向计数
+        redirectCount.clear();
         next();
       }
     }
   }
 });
 
+/**
+ * 检查路由是否可访问
+ */
+async function isRouteAccessible(to: any, accessRoutes: any[]): Promise<boolean> {
+  // 检查路由是否存在于 accessRoutes 中
+  const routeExists = findRouteInAccessRoutes(to.path, accessRoutes);
+
+  console.log(`检查路由可访问性: ${to.path}`, routeExists ? '找到' : '未找到');
+
+  if (!routeExists) return false;
+
+  // 检查网元类型
+  if (to.meta?.neType && to.meta.neType.length > 0) {
+    const hasNe = useNeInfoStore().fnHasNe(to.meta.neType);
+    console.log(`网元类型检查: ${to.meta.neType}`, hasNe ? '有效' : '无效');
+    return hasNe;
+  }
+
+  return true;
+}
+
+/**
+ * 在访问路由中查找指定路径
+ */
+function findRouteInAccessRoutes(targetPath: string, routes: any[], parentPath: string = ''): any {
+  for (const route of routes) {
+    // 构建完整路径
+    let fullPath = route.path;
+
+    // 如果不是绝对路径，需要拼接父路径
+    if (!fullPath.startsWith('/')) {
+      const cleanParentPath = parentPath.replace(/\/$/, ''); // 移除末尾斜杠
+      const cleanRoutePath = fullPath.replace(/^\//, ''); // 移除开头斜杠
+      fullPath = cleanParentPath + '/' + cleanRoutePath;
+    }
+
+    // 标准化路径，移除多余的斜杠
+    fullPath = fullPath.replace(/\/+/g, '/');
+
+    console.log(`匹配路径: ${targetPath} vs ${fullPath}`);
+
+    if (fullPath === targetPath) {
+      return route;
+    }
+
+    // 递归查找子路由
+    if (route.children && route.children.length > 0) {
+      const found = findRouteInAccessRoutes(targetPath, route.children, fullPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找有效的重定向目标
+ */
+function findValidRedirect(to: any, accessRoutes: any[]): string | null {
+  const neStore = useNeInfoStore();
+
+  console.log(`查找重定向目标: ${to.path}`);
+
+  // 1. 查找父路由的 redirect
+  const parentRoute = findParentRouteWithRedirect(to.path, accessRoutes);
+
+  if (parentRoute?.redirect) {
+    console.log(`找到父路由重定向: ${parentRoute.path} -> ${parentRoute.redirect}`);
+
+    // 验证 redirect 目标是否有效
+    const redirectTarget = findRouteInAccessRoutes(parentRoute.redirect, accessRoutes);
+    if (redirectTarget &&
+      (!redirectTarget.meta?.neType || neStore.fnHasNe(redirectTarget.meta.neType))) {
+      return parentRoute.redirect;
+    }
+  }
+
+  // 2. 查找同级的第一个有效路由
+  const siblingRoute = findFirstValidSibling(to.path, accessRoutes);
+  if (siblingRoute) {
+    console.log(`找到同级有效路由: ${siblingRoute}`);
+    return siblingRoute;
+  }
+
+  // 3. 查找根级别的第一个有效路由
+  const rootRoute = findFirstValidRootRoute(accessRoutes);
+  if (rootRoute) {
+    console.log(`找到根级有效路由: ${rootRoute}`);
+    return rootRoute;
+  }
+
+  return null;
+}
+
+/**
+ * 查找具有 redirect 的父路由
+ */
+function findParentRouteWithRedirect(targetPath: string, routes: any[], parentPath: string = ''): any {
+  for (const route of routes) {
+    let fullPath = route.path;
+
+    if (!fullPath.startsWith('/')) {
+      const cleanParentPath = parentPath.replace(/\/$/, '');
+      const cleanRoutePath = fullPath.replace(/^\//, '');
+      fullPath = cleanParentPath + '/' + cleanRoutePath;
+    }
+
+    fullPath = fullPath.replace(/\/+/g, '/');
+
+    // 检查是否是父路径且有 redirect
+    if (targetPath.startsWith(fullPath) &&
+      route.redirect &&
+      fullPath !== targetPath) {
+      return { ...route, path: fullPath };
+    }
+
+    // 递归查找
+    if (route.children && route.children.length > 0) {
+      const found = findParentRouteWithRedirect(targetPath, route.children, fullPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找同级的第一个有效路由
+ */
+function findFirstValidSibling(targetPath: string, routes: any[], parentPath: string = ''): string | null {
+  const neStore = useNeInfoStore();
+
+  // 获取父路径
+  const parentRouteResult = findParentOfTarget(targetPath, routes, parentPath);
+  if (!parentRouteResult) return null;
+
+  const { parentRoute, parentFullPath } = parentRouteResult;
+
+  if (parentRoute.children) {
+    for (const sibling of parentRoute.children) {
+      let siblingFullPath = sibling.path;
+
+      if (!siblingFullPath.startsWith('/')) {
+        const cleanParentPath = parentFullPath.replace(/\/$/, '');
+        const cleanSiblingPath = siblingFullPath.replace(/^\//, '');
+        siblingFullPath = cleanParentPath + '/' + cleanSiblingPath;
+      }
+
+      siblingFullPath = siblingFullPath.replace(/\/+/g, '/');
+
+      if (siblingFullPath !== targetPath &&
+        (!sibling.meta?.neType || neStore.fnHasNe(sibling.meta.neType))) {
+        return siblingFullPath;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 查找目标路径的父路由
+ */
+function findParentOfTarget(targetPath: string, routes: any[], parentPath: string = ''): { parentRoute: any, parentFullPath: string } | null {
+  for (const route of routes) {
+    let fullPath = route.path;
+
+    if (!fullPath.startsWith('/')) {
+      const cleanParentPath = parentPath.replace(/\/$/, '');
+      const cleanRoutePath = fullPath.replace(/^\//, '');
+      fullPath = cleanParentPath + '/' + cleanRoutePath;
+    }
+
+    fullPath = fullPath.replace(/\/+/g, '/');
+
+    // 检查子路由
+    if (route.children && route.children.length > 0) {
+      for (const child of route.children) {
+        let childFullPath = child.path;
+
+        if (!childFullPath.startsWith('/')) {
+          const cleanParentPath = fullPath.replace(/\/$/, '');
+          const cleanChildPath = childFullPath.replace(/^\//, '');
+          childFullPath = cleanParentPath + '/' + cleanChildPath;
+        }
+
+        childFullPath = childFullPath.replace(/\/+/g, '/');
+
+        if (childFullPath === targetPath) {
+          return { parentRoute: route, parentFullPath: fullPath };
+        }
+      }
+
+      // 递归查找
+      const found = findParentOfTarget(targetPath, route.children, fullPath);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找根级别的第一个有效路由
+ */
+function findFirstValidRootRoute(routes: any[]): string | null {
+  const neStore = useNeInfoStore();
+
+  for (const route of routes) {
+    if (!route.meta?.neType || neStore.fnHasNe(route.meta.neType)) {
+      if (route.children && route.children.length > 0) {
+        // 如果有子路由，返回第一个有效子路由的完整路径
+        for (const child of route.children) {
+          let childFullPath = child.path;
+
+          if (!childFullPath.startsWith('/')) {
+            const cleanParentPath = route.path.replace(/\/$/, '');
+            const cleanChildPath = childFullPath.replace(/^\//, '');
+            childFullPath = cleanParentPath + '/' + cleanChildPath;
+          }
+
+          childFullPath = childFullPath.replace(/\/+/g, '/');
+
+          if (!child.meta?.neType || neStore.fnHasNe(child.meta.neType)) {
+            return childFullPath;
+          }
+        }
+      } else {
+        return route.path;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 查找有效的替代路由（用于 403 情况）
+ */
+function findValidAlternative(to: any): string | null {
+  const routerStore = useRouterStore();
+  const buildRoutes = routerStore.buildRouterData;
+
+  return findValidRedirect(to, buildRoutes);
+}
+
 export default router;

src/store/modules/app.ts

@@ -1,9 +1,10 @@
 import { getSysConf } from '@/api';
-import { CACHE_LOCAL_I18N } from '@/constants/cache-keys-constants';
+import { CACHE_LOCAL_I18N, CACHE_SESSION_CRYPTO_API } from '@/constants/cache-keys-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { removeToken } from '@/plugins/auth-token';
 import { parseUrlPath } from '@/plugins/file-static-url';
 import { localGet, localSet } from '@/utils/cache-local-utils';
+import { sessionSet } from '@/utils/cache-session-utils';
 import { defineStore } from 'pinia';
 
 /**应用参数类型 */
@@ -20,6 +21,10 @@ type AppStore = {
   buildTime: string;
   /**系统引导使用 */
   bootloader: boolean;
+  // 用户登录认证
+  loginAuth: boolean;
+  // 用户接口加密
+  cryptoApi: boolean;
   // 序列号
   serialNum: string;
   /**应用版权声明 */
@@ -52,6 +57,8 @@ const useAppStore = defineStore('app', {
     version: `-`,
     buildTime: `-`,
     bootloader: false,
+    loginAuth: true,
+    cryptoApi: true,
     serialNum: `-`,
     copyright: `Copyright ©2023 For ${import.meta.env.VITE_APP_NAME}`,
     logoType: 'icon',
@@ -85,6 +92,9 @@ const useAppStore = defineStore('app', {
         if (this.bootloader) {
           removeToken();
         }
+        this.loginAuth = res.data.loginAuth !== 'false';
+        this.cryptoApi = res.data.cryptoApi !== 'false';
+        sessionSet(CACHE_SESSION_CRYPTO_API,  res.data.cryptoApi);
         this.serialNum = res.data.serialNum;
         this.appName = res.data.title;
         this.copyright = res.data.copyright;

src/store/modules/layout.ts

@@ -1,16 +1,23 @@
-import { CACHE_LOCAL_PROCONFIG } from '@/constants/cache-keys-constants';
-import { localGetJSON, localSetJSON } from '@/utils/cache-local-utils';
+import { theme } from 'ant-design-vue/es';
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 import { defineStore } from 'pinia';
+import {
+  CACHE_LOCAL_PRIMARY_COLOR,
+  CACHE_LOCAL_PROCONFIG,
+} from '@/constants/cache-keys-constants';
+import {
+  localGet,
+  localGetJSON,
+  localSetJSON,
+} from '@/utils/cache-local-utils';
 
 /**布局参数类型 */
 type LayoutStore = {
-  /**布局设置抽屉显示 */
-  visible: boolean;
   /**布局配置 */
   proConfig: {
     /**导航布局 */
     layout: 'side' | 'top' | 'mix';
-    /**全局主题色，需要导入样式文件 */
+    /**全局主题色*/
     theme: 'dark' | 'light';
     /**菜单导航主题色 */
     menuTheme: 'dark' | 'light';
@@ -29,10 +36,33 @@ type LayoutStore = {
     /**内容区域-导航标签项 */
     tabRender: any | boolean | undefined;
   };
+  /**主题配置 */
+  themeConfig: ThemeConfig;
   /**水印内容 */
   waterMarkContent: string;
 };
 
+/**
+ * 获取随机颜色范围
+ * @returns 颜色
+ */
+function getRandomColor(): string {
+  const colors: string[] = [
+    '#f5222d',
+    '#fa541c',
+    '#fa8c16',
+    '#a0d911',
+    '#13c2c2',
+    '#1890ff',
+    '#722ed1',
+    '#eb2f96',
+    '#faad14',
+    '#52c41a',
+  ];
+  const i = Math.floor(Math.random() * 10);
+  return colors[i];
+}
+
 /**判断是否关闭内容区域 */
 const proRender = (render: any) => (render === false ? false : undefined);
 
@@ -50,7 +80,6 @@ const proConfigLocal: LayoutStore['proConfig'] = localGetJSON(
 
 const useLayoutStore = defineStore('layout', {
   state: (): LayoutStore => ({
-    visible: false,
     proConfig: {
       layout: proConfigLocal.layout,
       theme: proConfigLocal.theme,
@@ -63,13 +92,27 @@ const useLayoutStore = defineStore('layout', {
       menuHeaderRender: proRender(proConfigLocal.menuHeaderRender),
       tabRender: proRender(proConfigLocal.tabRender),
     },
+    themeConfig: {
+      algorithm: [theme.darkAlgorithm],
+      // algorithm: themeColor["dark"],
+      token: {
+        // colorBgContainer: "#fff",
+        colorPrimary: localGet(CACHE_LOCAL_PRIMARY_COLOR) || '#1890ff',
+        // borderRadius: 6,
+      },
+    },
     waterMarkContent: import.meta.env.VITE_APP_NAME,
   }),
-  actions: {
-    /**改变显示状态 */
-    changeVisibleLayoutSetting() {
-      this.visible = !this.visible;
+  getters: {
+    getColorPrimary(): string {
+      let color = '#1890ff';
+      if (this.themeConfig.token) {
+        color = this.themeConfig.token.colorPrimary || color;
+      }
+      return color;
     },
+  },
+  actions: {
     /**修改水印文字 */
     changeWaterMark(text: string) {
       this.waterMarkContent = text;
@@ -77,10 +120,48 @@ const useLayoutStore = defineStore('layout', {
     /**修改布局设置 */
     changeConf(key: string, value: boolean | string | number | undefined) {
       if (Reflect.has(this.proConfig, key)) {
+        // console.log(key, value);
+        if (key === 'theme') {
+          // const themeColor = {
+          //   light: theme.defaultAlgorithm,
+          //   compact: theme.compactAlgorithm,
+          //   dark: theme.darkAlgorithm,
+          // };
+          if (value === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            this.themeConfig.algorithm = [theme.darkAlgorithm];
+          } else {
+            document.documentElement.setAttribute('data-theme', 'light');
+            this.themeConfig.algorithm = [theme.defaultAlgorithm];
+          }
+        }
         Reflect.set(this.proConfig, key, value);
         localSetJSON(CACHE_LOCAL_PROCONFIG, this.proConfig);
       }
     },
+    /**主题色初始化 */
+    initPrimaryColor() {
+      // 主题色初始化
+      this.changePrimaryColor(this.getColorPrimary);
+      // 明暗模式初始化
+      const themeMode = this.proConfig.theme;
+      document.documentElement.setAttribute('data-theme', themeMode);
+      this.changeConf('theme', themeMode);
+    },
+    /**
+     * 主题色变更
+     * @param color 颜色
+     */
+    changePrimaryColor(color?: string) {
+      if (!color) {
+        color = getRandomColor();
+      }
+
+      if (this.themeConfig && this.themeConfig.token) {
+        this.themeConfig.token.colorPrimary = color;
+        localStorage.setItem(CACHE_LOCAL_PRIMARY_COLOR, color);
+      }
+    },
   },
 });
 

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/store/modules/user.ts

@@ -1,7 +1,7 @@
 import defaultAvatar from '@/assets/images/default_avatar.png';
 import useLayoutStore from './layout';
 import { login, logout, getInfo } from '@/api/login';
-import { getToken, setToken, removeToken } from '@/plugins/auth-token';
+import { setToken, removeToken } from '@/plugins/auth-token';
 import { defineStore } from 'pinia';
 import { TOKEN_RESPONSE_FIELD } from '@/constants/token-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -133,10 +133,10 @@ const useUserStore = defineStore('user', {
         }
 
         // 水印文字信息=用户昵称 手机号
-        let waterMarkContent = this.userName;
-        if (this.phonenumber) {
-          waterMarkContent = `${this.userName} ${this.phonenumber}`;
-        }
+        // let waterMarkContent = this.userName;
+        // if (this.phonenumber) {
+        //   waterMarkContent = `${this.userName} ${this.phonenumber}`;
+        // }
         // useLayoutStore().changeWaterMark(waterMarkContent);
         useLayoutStore().changeWaterMark('');
       }

src/typings/router.d.ts

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

src/typings/vite-env.d.ts

@@ -7,4 +7,11 @@ declare module '*.vue' {
   export default component;
 }
 
+// "vue3-smooth-dnd": "^0.0.6"
 declare module 'vue3-smooth-dnd';
+
+// "intl-tel-input": "^25.2.0"
+declare module 'intl-tel-input/intlTelInputWithUtils' {
+  import intlTelInput from 'intl-tel-input';
+  export default intlTelInput;
+}

src/utils/date-utils.ts

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

src/utils/execl-utils.ts

@@ -42,7 +42,7 @@ export async function readLoalXlsx(
 /**
  * 读取表格数据 工作表
  * @param fileBolb 文件对象
- * @param index 文件保存路径
+ * @param index SheetName索引
  * @return 表格对象列表
  */
 export async function readSheet(

src/utils/generate-utils.ts

@@ -13,13 +13,41 @@ export function generateColorHEX(): string {
  * @returns rgb(24 144 255) / rgba(0,0,0,.85)
  */
 export function generateColorRGBA(hasAlpha: boolean = false) {
-  const red = Math.floor(Math.random() * 256);
-  const green = Math.floor(Math.random() * 256);
-  const blue = Math.floor(Math.random() * 256);
+  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+  let red: number;
+  let green: number;
+  let blue: number;
+
+  if (isDark) {
+    // 暗色模式下生成较亮的颜色
+    red = Math.floor(Math.random() * 156) + 100;    // 100-255
+    green = Math.floor(Math.random() * 156) + 100;  // 100-255
+    blue = Math.floor(Math.random() * 156) + 100;   // 100-255
+
+    // 确保至少有一个通道的值较高，使颜色更明亮
+    const brightChannel = Math.floor(Math.random() * 3);
+    switch (brightChannel) {
+      case 0:
+        red = Math.min(255, red + 50);
+        break;
+      case 1:
+        green = Math.min(255, green + 50);
+        break;
+      case 2:
+        blue = Math.min(255, blue + 50);
+        break;
+    }
+  } else {
+    // 亮色模式下生成正常的颜色
+    red = Math.floor(Math.random() * 256);    // 0-255
+    green = Math.floor(Math.random() * 256);  // 0-255
+    blue = Math.floor(Math.random() * 256);   // 0-255
+  }
 
   if (hasAlpha) {
     const alpha = Math.floor(Math.random() * 100);
-    return `rgb(${red}, ${green}, ${blue}, 0.${alpha})`;
+    return `rgba(${red}, ${green}, ${blue}, 0.${alpha})`;
   }
 
   return `rgb(${red}, ${green}, ${blue})`;

src/utils/parse-tree-utils.ts

@@ -126,7 +126,7 @@ export function parseDataToTreeExclude(
 }
 
 /**
- * 解析树结构数据转出一维id数组
+ * 解析树结构数据转出所有一维id数组
  *
  * @param data 数组数据
  * @param fieldId 读取节点字段 默认 'id'
@@ -158,7 +158,7 @@ export function parseTreeKeys(
 }
 
 /**
- * 解析树结构数据转出含子节点的一维id数组
+ * 解析树结构数据转出根节点的一维id数组
  *
  * @param data 数组数据
  * @param fieldId 读取节点字段 默认 'id'
@@ -221,3 +221,43 @@ export function parseDataToOptions(
 
   return options;
 }
+
+/**
+ * 解析树结构数据转出子节点关联根节点的一维id数组
+ *
+ * @param data 数组数据
+ * @param checkedKeys 子节点数组数据
+ * @param fieldId 读取节点字段 默认 'id'
+ * @param fieldChildren 读取子节点字段 默认 'children'
+ * @returns 层级数组
+ */
+export function parseTreeNodeKeysByChecked(
+  data: Record<string, any>[],
+  checkedKeys: (string | number)[],
+  fieldId: string = 'id',
+  fieldChildren: string = 'children'
+) {
+  // 节点id
+  let treeIds: (string | number)[] = [];
+  componet(data);
+  /**闭包递归函数 */
+  function componet(data: Record<string, any>[]) {
+    if (data.length <= 0) return false;
+    let hasKey = false;
+    for (const iterator of data) {
+      const key = iterator[fieldId];
+      if (checkedKeys.includes(key)) {
+        hasKey = true;
+      }
+      let nodes = iterator[fieldChildren];
+      if (Array.isArray(nodes) && nodes.length > 0) {
+        if (componet(nodes)) {
+          treeIds.push(key);
+          hasKey = true;
+        }
+      }
+    }
+    return hasKey;
+  }
+  return treeIds;
+}

src/utils/parse-utils.ts

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

src/views/account/components/base-info.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { Modal, message } from 'ant-design-vue/es';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import { onMounted, reactive, ref, toRaw } from 'vue';
 import { updateUserProfile, uploadAvatar } from '@/api/profile';
 import { regExpEmail, regExpMobile, regExpNick } from '@/utils/regular-utils';
@@ -27,7 +27,7 @@ let stateForm = reactive({
     nickName: '',
     email: '',
     phonenumber: '',
-    sex: undefined,
+    sex: '0',
   },
   /**表单提交点击状态 */
   formClick: false,
@@ -169,7 +169,7 @@ onMounted(() => {
           <IntlTelInput
             v-model:value="stateForm.form.phonenumber"
             allow-clear
-            :maxlength="16"
+            :maxlength="20"
             :placeholder="t('views.account.settings.phonenumberPleace')"
           ></IntlTelInput>
         </a-form-item>

src/views/account/components/reset-passwd.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { reactive } from 'vue';
 import { updateUserPwd } from '@/api/profile';
 import { regExpPasswd } from '@/utils/regular-utils';
@@ -147,7 +147,7 @@ function fnFinish() {
       </a-input-password>
     </a-form-item>
 
-    <a-form-item :wrapper-col="{ span: 3 }">
+    <a-form-item :wrapper-col="{ span: 4 }">
       <a-button
         block
         type="primary"

src/views/account/components/style-layout.vue

@@ -1,22 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
+import { viewTransitionTheme } from 'antdv-pro-layout';
 import useLayoutStore from '@/store/modules/layout';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const { proConfig, changeConf } = useLayoutStore();
+const { proConfig, changeConf, themeConfig, changePrimaryColor } =
+  useLayoutStore();
 
-let color = ref<string>(getLocalColor());
+let timerId: any = null;
 
 /**改变主题色 */
 function fnColorChange(e: Event) {
   const target = e.target as HTMLInputElement;
-  if (target.nodeName === 'INPUT') {
-    changePrimaryColor(target.value ?? '#1890ff');
-  } else {
-    changePrimaryColor();
-  }
-  color.value = getLocalColor();
+  // 需要防抖函数处理
+  clearTimeout(timerId);
+  timerId = setTimeout(() => {
+    if (target.nodeName === 'INPUT') {
+      changePrimaryColor(target.value ?? '#1890ff');
+    } else {
+      changePrimaryColor();
+    }
+  }, 300);
+}
+
+/**手动变更主题-过渡动画 */
+function changeTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
 }
 </script>
 
@@ -56,13 +66,31 @@ function fnColorChange(e: Event) {
       <template #extra>
         <a-space :size="16" align="end" direction="horizontal">
           <a-button type="primary" size="small" @click="fnColorChange">
-            <BgColorsOutlined />
             {{ t('views.account.settings.colorRandomly') }}
           </a-button>
-          <input type="color" :value="color" @input="fnColorChange" />
+          <input
+            type="color"
+            :value="themeConfig?.token?.colorPrimary"
+            @input="fnColorChange"
+          />
         </a-space>
       </template>
     </a-list-item>
+    <a-list-item>
+      {{ t('views.account.settings.theme') }}
+      <template #actions>
+        {{ t('views.account.settings.themeActions') }}
+      </template>
+      <template #extra>
+        <a-button
+          :type="proConfig.theme === 'dark' ? 'primary' : 'default'"
+          size="small"
+          @click="changeTheme"
+        >
+          {{ proConfig.theme }}
+        </a-button>
+      </template>
+    </a-list-item>
     <a-list-item>
       {{ t('views.account.settings.navTheme') }}
       <template #actions>

src/views/account/profile.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { getUserProfile } from '@/api/profile';
 import { reactive, ref, onMounted } from 'vue';
 import { parseDateToStr } from '@/utils/date-utils';
@@ -205,6 +205,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 16px 0;
   &-no {
     align-self: flex-start;
     font-size: 14px;

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

@@ -1,518 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { parseDateToStr } from '@/utils/date-utils';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import {
-  listNeBackup,
-  delNeBackup,
-  downloadNeBackup,
-} from '@/api/configManage/backupManage';
-import { saveAs } from 'file-saver';
-import useI18n from '@/hooks/useI18n';
-import { updateBackInfo } from '@/api/configManage/backupManage';
-import useNeInfoStore from '@/store/modules/neinfo';
-const { t } = useI18n();
-
-/**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
-  neType: '',
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**搜索栏 */
-  seached: boolean;
-  /**记录数据 */
-  data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'middle',
-  seached: true,
-  data: [],
-  selectedRowKeys: [],
-});
-
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('common.rowId'),
-    dataIndex: 'id',
-    align: 'center',
-    width: 1,
-  },
-  {
-    title: t('views.configManage.backupManage.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.backupManage.neID'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.backupManage.fileName'),
-    dataIndex: 'fileName',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.configManage.backupManage.remark'),
-    dataIndex: 'comment',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.configManage.backupManage.createAt'),
-    dataIndex: 'createTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    width: 3,
-  },
-  {
-    title: t('common.operate'),
-    key: 'id',
-    align: 'center',
-    fixed: 'right',
-    width: 2,
-  },
-];
-
-/**表格分页器参数 */
-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;
-}
-
-/**信息文件下载 */
-function fnDownloadFile(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.backupManage.totalSure', {
-      oper: t('common.downloadText'),
-      id: row.id,
-    }),
-    onOk() {
-      const key = 'downloadNeBackup';
-      message.loading({ content: t('common.loading'), key });
-      downloadNeBackup(toRaw(row)).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.downloadText') }),
-            key,
-            duration: 2,
-          });
-          saveAs(res.data, `${row.fileName}`);
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**
- * 备份信息删除
- * @param row 记录编号ID
- */
-function fnRecordDelete(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.backupManage.totalSure', {
-      oper: t('common.deleteText'),
-      id: row.id,
-    }),
-    onOk() {
-      const key = 'delNeBackup';
-      message.loading({ content: t('common.loading'), key });
-      delNeBackup(toRaw(row)).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
-            key,
-            duration: 2,
-          });
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**查询备份信息列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-  listNeBackup(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-      if (
-        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
-        queryParams.pageNum !== 1
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
-    }
-    tableState.loading = false;
-  });
-}
-
-/**对话框对象信息状态类型 */
-type ModalStateType = {
-  /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**对话框对象信息状态 */
-let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
-  title: '任务设置',
-  from: {
-    id: 0,
-    backupInfo: '',
-  },
-  confirmLoading: false,
-});
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
- */
-function fnModalVisibleByEdit(row: Record<string, any>) {
-  if (modalState.confirmLoading) return;
-  modalState.from.backupInfo = row.comment;
-  modalState.from.id = row.id;
-  modalState.title = t('views.configManage.backupManage.edit');
-  modalState.visibleByEdit = true;
-}
-
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    backupInfo: [
-      {
-        required: true,
-        message:
-          t('views.configManage.backupManage.remark') + t('common.unableNull'),
-      },
-    ],
-  })
-);
-/**
- * 对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnModalOk() {
-  modalStateFrom
-    .validate()
-    .then(e => {
-      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
-      const hide = message.loading(t('common.loading'), 0);
-      updateBackInfo(from)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: modalState.title }),
-              duration: 3,
-            });
-            modalState.visibleByEdit = false;
-            modalStateFrom.resetFields();
-            fnGetList();
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 3,
-            });
-            fnGetList();
-          }
-        })
-        .finally(() => {
-          hide();
-          modalState.confirmLoading = false;
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalStateFrom.resetFields();
-}
-
-onMounted(() => {
-  // 获取列表数据
-  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="t('views.configManage.backupManage.neType')"
-              name="neType "
-            >
-              <a-auto-complete
-                v-model:value="queryParams.neType"
-                :options="useNeInfoStore().getNeSelectOtions"
-                allow-clear
-                :placeholder="t('views.configManage.backupManage.neTypePlease')"
-              />
-            </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-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="center">
-          <!-- <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-            <template #icon><FieldTimeOutlined /></template>
-            {{ t('views.configManage.backupManage.setBackupTask') }}
-          </a-button> -->
-        </a-space>
-      </template>
-
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.reloadText') }}</template>
-            <a-button type="text" @click.prevent="fnGetList(1)">
-              <template #icon><ReloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown trigger="click">
-              <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: 1200, y: 400 }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'id'">
-            <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>{{ t('common.downloadText') }}</template>
-                <a-button type="link" @click.prevent="fnDownloadFile(record)">
-                  <template #icon><DownloadOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.deleteText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordDelete(record)">
-                  <template #icon><DeleteOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.editText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByEdit(record)"
-                >
-                  <template #icon><FormOutlined /></template>
-                </a-button>
-              </a-tooltip>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :destroyOnClose="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form name="modalStateFrom" layout="horizontal">
-        <a-form-item
-          :label="t('views.configManage.backupManage.remark')"
-          name="backupInfo"
-          v-bind="modalStateFrom.validateInfos.backupInfo"
-        >
-          <a-textarea
-            v-model:value="modalState.from.backupInfo"
-            :auto-size="{ minRows: 2, maxRows: 6 }"
-            :maxlength="250"
-            :show-count="true"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-</style>

src/views/configManage/neOverview/index.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { message } from 'ant-design-vue/lib';
-import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { message } from 'ant-design-vue/es';
+import {
+  reactive,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  markRaw,
+  useTemplateRef,
+} from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { TooltipComponent } from 'echarts/components';
 import { GaugeChart } from 'echarts/charts';
@@ -32,24 +39,12 @@ echarts.use([
 ]);
 
 /**图DOM节点实例对象 */
-const statusBar = ref<HTMLElement | undefined>(undefined);
+const statusBar = useTemplateRef<HTMLDivElement>('statusBar');
 
 /**图实例对象 */
 const statusBarChart = ref<any>(null);
 
-/**网元状态字典数据 */
-let indexColor = ref<DictType[]>([
-  { label: 'Normal', value: 'normal', tagType: '', tagClass: '#91cc75' },
-  {
-    label: 'Abnormal',
-    value: 'abnormal',
-    tagType: '',
-    tagClass: '#ee6666',
-  },
-]);
-
 /**表格字段列 */
-//customRender(){} ----单元格处理
 let tableColumns: ColumnsType = [
   {
     title: t('views.index.object'),
@@ -67,7 +62,9 @@ let tableColumns: ColumnsType = [
     dataIndex: 'serverState',
     align: 'left',
     customRender(opt) {
-      if (opt.value?.refreshTime) return parseDateToStr(opt.value?.refreshTime);
+      if (opt.value?.refreshTime) {
+        return parseDateToStr(opt.value?.refreshTime, 'HH:mm:ss');
+      }
       return '-';
     },
   },
@@ -104,16 +101,13 @@ let tableColumns: ColumnsType = [
     },
   },
 ];
+
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
   loading: boolean;
-  /**紧凑型 */
-  size: string;
-  /**搜索栏 */
-  seached: boolean;
   /**记录数据 */
-  data: object[];
+  data: Record<string, any>[];
   /**勾选记录 */
   selectedRowKeys: (string | number)[];
 };
@@ -121,122 +115,96 @@ type TabeStateType = {
 /**表格状态 */
 let tableState: TabeStateType = reactive({
   loading: false,
-  size: 'middle',
-  seached: false,
   data: [],
   selectedRowKeys: [],
 });
 
-/**表格状态 */
-let nfInfo: any = reactive({
-  obj: 'OMC',
-  version: appStore.version,
-  status: t('views.index.normal'),
-  outTimeDate: '',
-  serialNum: appStore.serialNum,
-});
-
-/**表格状态类型 */
-type nfStateType = {
-  /**主机名 */
-  hostName: string;
-  /**操作系统信息 */
-  osInfo: string;
-  /**IP地址 */
-  ipAddress: string;
-  /**版本 */
-  version: string;
-  /**CPU利用率 */
-  cpuUse: string;
-  /**内存使用 */
-  memoryUse: string;
-  /**用户容量 */
-  capability: number;
-  /**序列号 */
-  serialNum: string;
-  /**许可证到期日期 */
-  /*  selectedRowKeys: (string | number)[];*/
-  expiryDate: string;
-};
-/**网元详细信息 */
-let pronInfo: nfStateType = reactive({
-  hostName: '5gc',
-  osInfo: 'Linux 5gc 4.15.0-112-generic 2020 x86_64 GNU/Linux',
-  ipAddress: '-',
-  version: '-',
-  cpuUse: '-',
-  memoryUse: '-',
-  capability: 0,
-  serialNum: '-',
-  expiryDate: '-',
-});
+/**状态 */
+let serverState: any = ref({});
 
 /**查询网元状态列表 */
-function fnGetList(one: boolean) {
-  if (tableState.loading) return;
-  one && (tableState.loading = true);
-  listAllNeInfo({ bandStatus: true }).then(res => {
+async function fnGetList(reload: boolean = false) {
+  tableState.loading = !reload;
+  try {
+    const res = await listAllNeInfo({ bandStatus: true });
     tableState.data = res.data;
-    tableState.loading = false;
-    var rightNum = 0;
-    var errorNum = 0;
-    // if (res.length) nfInfo.serialNum = res[0].serialNum;
-    for (let i = 0; i < res.length; i++) {
-      if (res[i].status == '正常' || res[i].status == 'Normal') {
-        rightNum++;
-      } else {
-        errorNum++;
-      }
+  } catch (error) {
+    console.error(error);
+    tableState.data = [];
+  }
+  tableState.loading = false;
+  if (tableState.data.length == 0) {
+    return;
+  }
+
+  var rightNum = 0;
+  var errorNum = 0;
+  for (const v of tableState.data) {
+    if (v?.serverState?.online) {
+      rightNum++;
+    } else {
+      errorNum++;
+    }
+  }
+
+  // 初始
+  if (!reload) {
+    // 选择第一个
+    if (tableState.data.length > 0) {
+      const id = tableState.data[0].id;
+      fnTableSelectedRowKeys([id]);
+    } else {
+      fnTableSelectedRowKeys(tableState.selectedRowKeys);
     }
 
-    const optionData: any = {
-      title: {
-        text: '',
-        subtext: '',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      color: indexColor.value.map(item => item.tagClass),
+    if (statusBar.value) {
+      fnDesign(statusBar.value, rightNum, errorNum);
+    }
+  } else {
+    statusBarChart.value.setOption({
       series: [
         {
-          name: t('views.index.realNeStatus'),
-          type: 'pie',
-          radius: '70%',
-          center: ['50%', '50%'],
           data: [
             { value: rightNum, name: t('views.index.normal') },
             { value: errorNum, name: t('views.index.abnormal') },
           ],
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-
-          label: {},
         },
       ],
-    };
-
-    fnDesign(statusBar.value, optionData);
-  });
+    });
+  }
 }
 
-function fnDesign(container: HTMLElement | undefined, option: any) {
-  if (!container) return;
-
-  if (!statusBarChart.value) {
-    statusBarChart.value = markRaw(echarts.init(container, 'light'));
-  }
-  option && statusBarChart.value.setOption(option);
+function fnDesign(container: HTMLElement, rightNum: number, errorNum: number) {
+  /// 图表数据
+  const optionData: any = {
+    title: {
+      text: '',
+      subtext: '',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+    },
+    color: dict.indexStatus.map(item => item.tagClass),
+    series: [
+      {
+        name: t('views.index.runStatus'),
+        type: 'pie',
+        radius: '70%',
+        center: ['50%', '50%'],
+        data: [
+          { value: rightNum, name: t('views.index.normal') },
+          { value: errorNum, name: t('views.index.abnormal') },
+        ],
+      },
+    ],
+  };
+  statusBarChart.value = markRaw(echarts.init(container, 'light'));
+  statusBarChart.value.setOption(optionData);
 
   // 创建 ResizeObserver 实例
   var observer = new ResizeObserver(entries => {
@@ -248,66 +216,43 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   observer.observe(container);
 }
 
-/**抽屉 网元详细信息 */
-const visible = ref(false);
-const closeDrawer = () => {
-  visible.value = false;
-};
-/**抽屉 网元详细信息 */
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  if (keys.length <= 0) return;
+  const id = keys[0];
+  const row: any = tableState.data.find((item: any) => item.id === id);
+  if (!row) {
+    message.error(t('views.index.neStatus'), 2);
+    return;
+  }
+  const neState = row.serverState;
+  if (!neState?.online) {
+    message.error(t('views.index.neStatus'), 2);
+    return;
+  }
+  tableState.selectedRowKeys = keys;
+  // Mem 将KB转换为MB
+  const totalMemInKB = neState.mem?.totalMem;
+  const nfUsedMemInKB = neState.mem?.nfUsedMem;
+  const sysMemUsageInKB = neState.mem?.sysMemUsage;
+  const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
+  const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
+  const sysMemUsageInMB = Math.round((sysMemUsageInKB / 1024) * 100) / 100;
 
-/**监听表格行事件*/
-function rowClick(record: any, index: any) {
-  return {
-    onClick: (event: any) => {
-      let pronData = JSON.parse(JSON.stringify(record.serverState));
-      if (!pronData.online) {
-        message.error(t('views.index.neStatus'), 2);
-        return false;
-      } else {
-        const totalMemInKB = pronData.mem?.totalMem;
-        const nfUsedMemInKB = pronData.mem?.nfUsedMem;
-        const sysMemUsageInKB = pronData.mem?.sysMemUsage;
+  // CPU
+  const nfCpu = neState.cpu?.nfCpuUsage;
+  const sysCpu = neState.cpu?.sysCpuUsage;
+  const nfCpuP = Math.round(nfCpu) / 100;
+  const sysCpuP = Math.round(sysCpu) / 100;
 
-        // 将KB转换为MB
-        const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
-        const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
-        const sysMemUsageInMB =
-          Math.round((sysMemUsageInKB / 1024) * 100) / 100;
-
-        //渲染详细信息
-        pronInfo = {
-          hostName: pronData.hostname,
-          osInfo: pronData.os,
-          ipAddress: pronData.neIP,
-          version: pronData.version,
-          cpuUse:
-            pronData.neName +
-            ':' +
-            pronData.cpu?.nfCpuUsage / 100 +
-            '%; ' +
-            'SYS:' +
-            pronData.cpu?.sysCpuUsage / 100 +
-            '%',
-          memoryUse:
-            'Total:' +
-            totalMemInMB +
-            'MB; ' +
-            pronData.name +
-            ':' +
-            nfUsedMemInMB +
-            'MB; SYS:' +
-            sysMemUsageInMB +
-            'MB',
-          capability: pronData.capability,
-          serialNum: pronData.sn,
-          expiryDate: pronData.expire,
-        };
-      }
-      visible.value = true;
+  serverState.value = Object.assign(
+    {
+      cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
+      memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
     },
-  };
+    neState
+  );
 }
-let timer: any;
 
 /**
  * 国际化翻译转换
@@ -320,114 +265,120 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
+/**字典数据 */
+let dict: {
+  /**网元信息状态 */
+  neInfoStatus: DictType[];
+  /**主页状态 */
+  indexStatus: DictType[];
+} = reactive({
+  neInfoStatus: [],
+  indexStatus: [],
+});
+
+let timer: any;
 onMounted(() => {
-  getDict('index_status')
-    .then(res => {
-      if (res.length > 0) {
-        indexColor.value = res;
+  // 初始字典数据
+  Promise.allSettled([getDict('ne_info_status'), getDict('index_status')])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        dict.neInfoStatus = resArr[0].value;
+      }
+      if (resArr[1].status === 'fulfilled') {
+        dict.indexStatus = resArr[1].value;
       }
     })
-    .finally(() => {
+    .finally(async () => {
       fnLocale();
-      fnGetList(true);
-      timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次
+      await fnGetList(false);
+      timer = setInterval(() => {
+        if (!timer) return;
+        fnGetList(true);
+      }, 10_000); // 每隔10秒执行一次
     });
 });
 
 // 在组件卸载之前清除定时器
-
 onBeforeUnmount(() => {
   clearInterval(timer);
+  timer = null;
 });
 </script>
 
 <template>
   <PageContainer :breadcrumb="{}">
-    <div>
-      <a-drawer :visible="visible" @close="closeDrawer" :width="700">
-        <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
-          <a-descriptions-item :label="t('views.index.hostName')">{{
-            pronInfo.hostName
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.osInfo')">{{
-            pronInfo.osInfo
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.ipAddress')">{{
-            pronInfo.ipAddress
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.version')">{{
-            pronInfo.version
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.cpuUse')">{{
-            pronInfo.cpuUse
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.memoryUse')">{{
-            pronInfo.memoryUse
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.serialNum')">{{
-            pronInfo.serialNum
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.expiryDate')">{{
-            pronInfo.expiryDate
-          }}</a-descriptions-item>
-        </a-descriptions>
-      </a-drawer>
-    </div>
-
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
         <a-table
           class="table"
           row-key="id"
+          size="small"
           :columns="tableColumns"
-          :loading="tableState.loading"
           :data-source="tableState.data"
+          :loading="tableState.loading"
           :pagination="false"
           :scroll="{ x: true }"
-          :customRow="rowClick"
+          :row-selection="{
+            type: 'radio',
+            columnWidth: '48px',
+            selectedRowKeys: tableState.selectedRowKeys,
+            onChange: fnTableSelectedRowKeys,
+          }"
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'status'">
-              <div v-if="record.serverState.online">
-                <a-tag color="blue">{{ t('views.index.normal') }}</a-tag>
-              </div>
-              <div v-else>
-                <a-tag color="pink">{{ t('views.index.abnormal') }}</a-tag>
-              </div>
+              <DictTag :options="dict.neInfoStatus" :value="record.status" />
             </template>
           </template>
         </a-table>
       </a-col>
       <a-col :lg="10" :md="8" :xs="24">
-        <a-card :title="t('views.index.runStatus')" style="margin-bottom: 16px">
+        <a-card
+          :title="t('views.index.runStatus')"
+          style="margin-bottom: 16px"
+          size="small"
+        >
           <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
         </a-card>
-        <a-card :title="t('views.index.mark')" style="margin-top: 16px">
+        <a-card
+          :loading="tableState.loading"
+          :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
+          style="margin-top: 16px"
+          size="small"
+        >
           <a-descriptions
             bordered
             :column="1"
             :label-style="{ width: '160px' }"
           >
-            <a-descriptions-item :label="t('views.index.object')">{{
-              nfInfo.obj
-            }}</a-descriptions-item>
-            <template v-if="nfInfo.obj === 'OMC'">
-              <a-descriptions-item :label="t('views.index.versionNum')">{{
-                nfInfo.version
-              }}</a-descriptions-item>
-              <a-descriptions-item :label="t('views.index.systemStatus')">{{
-                nfInfo.status
-              }}</a-descriptions-item>
-            </template>
-            <template v-else>
-              <a-descriptions-item :label="t('views.index.serialNum')">{{
-                nfInfo.serialNum
-              }}</a-descriptions-item>
-              <a-descriptions-item :label="t('views.index.expiryDate')">{{
-                nfInfo.outTimeDate
-              }}</a-descriptions-item>
-            </template>
+            <a-descriptions-item :label="t('views.index.hostName')">
+              {{ serverState.hostname }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.osInfo')">
+              {{ serverState.os }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.ipAddress')">
+              {{ serverState.neIP }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.version')">
+              {{ serverState.version }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.capability')">
+              {{ serverState.capability }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.cpuUse')">
+              {{ serverState.cpuUse }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.memoryUse')">
+              {{ serverState.memoryUse }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.serialNum')">
+              {{ serverState.sn }}
+            </a-descriptions-item>
+            <a-descriptions-item :label="t('views.index.expiryDate')">
+              {{ serverState.expire }}
+            </a-descriptions-item>
           </a-descriptions>
         </a-card>
       </a-col>

src/views/configManage/softwareManage/components/software-history.vue

@@ -1,280 +0,0 @@
-<script setup lang="ts">
-import { reactive, toRaw, watch, ref } from 'vue';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { listNeVersion } from '@/api/configManage/softwareManage';
-import { parseDateToStr } from '@/utils/date-utils';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
-const props = defineProps({
-  title: {
-    type: String,
-    default: '标题',
-  },
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-/**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
-
-/**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
-  neType: '',
-  /**记录开始时间 */
-  beginTime: '',
-  /**记录结束时间 */
-  endTime: '',
-  /**状态 */
-  status: undefined,
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryRangePicker.value = ['', ''];
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    status: undefined,
-    beginTime: '',
-    endTime: '',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**记录数据 */
-  data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'small',
-  data: [],
-  selectedRowKeys: [],
-});
-
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('views.configManage.softwareManage.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: t('views.configManage.neManage.neId'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 200,
-  },
-  {
-    title: t('views.configManage.softwareManage.versions'),
-    dataIndex: 'version',
-    align: 'center',
-  },
-  {
-    title: t('views.configManage.softwareManage.upVersions'),
-    dataIndex: 'preVersion',
-    align: 'center',
-  },
-  {
-    title: t('views.configManage.softwareManage.backVersions'),
-    dataIndex: 'newVersion',
-    align: 'center',
-  },
-  {
-    title: t('views.configManage.softwareManage.status'),
-    dataIndex: 'status',
-    key: 'status',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: t('views.configManage.softwareManage.letUpTime'),
-    dataIndex: 'updateTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    width: 200,
-  },
-];
-
-/**表格分页器参数 */
-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();
-  },
-});
-
-/**查询角色未授权用户列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
-  }
-  queryParams.beginTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
-  listNeVersion(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-      if (
-        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
-        queryParams.pageNum !== 1
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
-    }
-    tableState.loading = false;
-  });
-}
-
-/**弹框取消按钮事件 */
-function fnModalCancel() {
-  emit('cancel');
-}
-
-/**显示弹框时初始数据 */
-function init() {
-  // 查询参数重置
-  fnQueryReset();
-}
-
-/**监听是否显示，初始数据 */
-watch(
-  () => props.visible,
-  val => {
-    if (val) init();
-  }
-);
-</script>
-
-<template>
-  <ProModal
-    :drag="true"
-    :forceFullscreen="true"
-    :destroyOnClose="true"
-    :title="props.title"
-    :visible="props.visible"
-    :keyboard="false"
-    :mask-closable="false"
-    @cancel="fnModalCancel"
-    :footer="false"
-  >
-    <!-- 表格搜索栏 -->
-    <a-form :model="queryParams" name="queryParams" layout="horizontal">
-      <a-row :gutter="16">
-        <a-col :lg="6" :md="6" :xs="24">
-          <a-form-item
-            :label="t('views.configManage.softwareManage.neType')"
-            name="neType"
-          >
-            <a-auto-complete
-              v-model:value="queryParams.neType"
-              :options="useNeInfoStore().getNeSelectOtions"
-              allow-clear
-              :placeholder="t('views.configManage.softwareManage.neTypePlease')"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :lg="6" :md="6" :xs="24">
-          <a-form-item
-            :label="t('views.configManage.softwareManage.createTime')"
-            name="queryRangePicker"
-          >
-            <a-range-picker
-              v-model:value="queryRangePicker"
-              allow-clear
-              bordered
-              value-format="YYYY-MM-DD"
-              style="width: 100%"
-            ></a-range-picker>
-          </a-form-item>
-        </a-col>
-        <a-col :lg="6" :md="6" :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-row>
-    </a-form>
-
-    <a-table
-      class="table"
-      row-key="id"
-      :columns="tableColumns"
-      :loading="tableState.loading"
-      :data-source="tableState.data"
-      :size="tableState.size"
-      :scroll="{ x: true }"
-      :pagination="tablePagination"
-    >
-    </a-table>
-  </ProModal>
-</template>
-
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-</style>

src/views/dashboard/amfUE/index.vue

@@ -1,24 +1,31 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
 import useDictStore from '@/store/modules/dict';
+import useNeInfoStore from '@/store/modules/neinfo';
 import { listAMFDataUE, delAMFDataUE, exportAMFDataUE } from '@/api/neData/amf';
+import { parseDateToStr } from '@/utils/date-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
+import dayjs, { Dayjs } from 'dayjs';
 import saveAs from 'file-saver';
 import PQueue from 'p-queue';
+import { useClipboard } from '@vueuse/core';
+const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const { getDict } = useDictStore();
 const ws = new WS();
 const queue = new PQueue({ concurrency: 1, autoStart: true });
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
 
 /**字典数据 */
 let dict: {
@@ -35,7 +42,10 @@ let dict: {
 });
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -47,9 +57,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -67,7 +77,7 @@ function fnQueryReset() {
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -141,9 +151,15 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.dashboard.ue.time'),
     dataIndex: 'eventJSON',
-    key: 'time',
     align: 'left',
     width: 150,
+    customRender(opt) {
+      const record = opt.value;
+      if (record?.time) {
+        return record.time;
+      }
+      return parseDateToStr(+record.timestamp * 1000);
+    },
   },
   {
     title: t('common.operate'),
@@ -252,11 +268,19 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
+
   listAMFDataUE(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -324,6 +348,18 @@ function fnExportList() {
   });
 }
 
+/**
+ * 复制CDR
+ * @param jsonStr JSON字符串
+ */
+function fnRecordCopy(jsonStr: string) {
+  if (!jsonStr) return;
+  const text = JSON.stringify(jsonStr, null, 2);
+  copy(text).then(() => {
+    message.success(t('common.copyOk'), 3);
+  });
+}
+
 /**实时数据开关 */
 const realTimeData = ref<boolean>(false);
 
@@ -333,31 +369,30 @@ const realTimeData = ref<boolean>(false);
 function fnRealTime() {
   realTimeData.value = !realTimeData.value;
   if (realTimeData.value) {
+    tableState.seached = false;
     // 建立链接
     const options: OptionsType = {
       url: '/ws',
       params: {
         /**订阅通道组
          *
-         * AMF_UE会话事件(GroupID:1010)
+         * AMF_UE会话事件(GroupID:1010_neId)
          */
-        subGroupID: '1010',
+        subGroupID: `1010_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
     ws.close();
+    tableState.seached = true;
+    fnGetList(1);
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -371,7 +406,7 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   // ueEvent AMF_UE会话事件
-  if (data.groupId === '1010') {
+  if (data.groupId === `1010_${queryParams.neId}`) {
     const ueEvent = data.data;
     queue.add(async () => {
       modalState.maxId += 1;
@@ -399,16 +434,40 @@ onMounted(() => {
     getDict('ue_auth_code'),
     getDict('ue_event_type'),
     getDict('ue_event_cm_state'),
-  ])
-    .then(resArr => {
-      if (resArr[0].status === 'fulfilled') {
-        dict.ueAauthCode = resArr[0].value;
-      }
-      if (resArr[1].status === 'fulfilled') {
-        dict.ueEventType = resArr[1].value;
-      }
-      if (resArr[2].status === 'fulfilled') {
-        dict.ueEventCmState = resArr[2].value;
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.ueAauthCode = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.ueEventType = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.ueEventCmState = resArr[2].value;
+    }
+  });
+
+  // 获取网元网元列表
+  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 === 'AMF') {
+              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(() => {
@@ -434,6 +493,16 @@ onBeforeUnmount(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="AMF" 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.dashboard.ue.eventType')"
@@ -448,7 +517,7 @@ onBeforeUnmount(() => {
               ></a-select>
             </a-form-item>
           </a-col>
-          <a-col :lg="4" :md="12" :xs="24">
+          <a-col :lg="6" :md="12" :xs="24">
             <a-form-item label="IMSI" name="imsi ">
               <a-input
                 v-model:value="queryParams.imsi"
@@ -457,6 +526,20 @@ onBeforeUnmount(() => {
               ></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="8" :md="12" :xs="24">
             <a-form-item
               :label="t('views.dashboard.cdr.time')"
@@ -473,20 +556,6 @@ onBeforeUnmount(() => {
               ></a-range-picker>
             </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-row>
       </a-form>
     </a-card>
@@ -522,6 +591,7 @@ onBeforeUnmount(() => {
             :disabled="tableState.selectedRowKeys.length <= 0"
             :loading="modalState.confirmLoading"
             @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['cdr:ne:remove']"
           >
             <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
@@ -544,6 +614,7 @@ onBeforeUnmount(() => {
               :checked-children="t('common.switch.show')"
               :un-checked-children="t('common.switch.hide')"
               size="small"
+              :disabled="realTimeData"
             />
           </a-tooltip>
           <a-tooltip>
@@ -604,7 +675,7 @@ onBeforeUnmount(() => {
             <span v-if="record.eventType === 'auth-result'">
               <DictTag
                 :options="dict.ueAauthCode"
-                :value="record.eventJSON.authCode"
+                :value="record.eventJSON.result"
               />
             </span>
             <span v-if="record.eventType === 'detach'">
@@ -613,37 +684,29 @@ onBeforeUnmount(() => {
             <span v-if="record.eventType === 'cm-state'">
               <DictTag
                 :options="dict.ueEventCmState"
-                :value="record.eventJSON.status"
+                :value="record.eventJSON.result"
               />
             </span>
           </template>
-          <template v-if="column.key === 'time'">
-            <span
-              v-if="record.eventType === 'auth-result'"
-              :title="record.eventJSON.authTime"
-            >
-              {{ record.eventJSON.authTime }}
-            </span>
-            <span
-              v-if="record.eventType === 'detach'"
-              :title="record.eventJSON.detachTime"
-            >
-              {{ record.eventJSON.detachTime }}
-            </span>
-            <span
-              v-if="record.eventType === 'cm-state'"
-              :title="record.eventJSON.changeTime"
-            >
-              {{ record.eventJSON.changeTime }}
-            </span>
-          </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.copyText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordCopy(record.eventJSON)"
+                >
+                  <template #icon>
+                    <CopyOutlined />
+                  </template>
+                </a-button>
+              </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']"
                 >
                   <template #icon>
                     <DeleteOutlined />
@@ -654,65 +717,60 @@ onBeforeUnmount(() => {
           </template>
         </template>
         <template #expandedRowRender="{ record }">
-          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
-            <a-divider orientation="left">
-              {{ t('views.dashboard.ue.ueInfo') }}
-            </a-divider>
-            <div>
-              <span>{{ t('views.ne.common.neName') }}: </span>
-              <span>{{ record.neName }}</span>
-            </div>
-            <div>
-              <span>{{ t('views.ne.common.rmUid') }}: </span>
-              <span>{{ record.rmUID }}</span>
-            </div>
-            <a-divider orientation="left">
-              {{ t('views.dashboard.ue.rowInfo') }}
-            </a-divider>
-            <div>
-              <span>{{ t('views.dashboard.ue.time') }}: </span>
-              <span
-                v-if="record.eventType === 'auth-result'"
-                :title="record.eventJSON.authTime"
-              >
-                {{ record.eventJSON.authTime }}
-              </span>
-              <span
-                v-if="record.eventType === 'detach'"
-                :title="record.eventJSON.detachTime"
-              >
-                {{ record.eventJSON.detachTime }}
-              </span>
-              <span
-                v-if="record.eventType === 'cm-state'"
-                :title="record.eventJSON.changeTime"
-              >
-                {{ record.eventJSON.changeTime }}
-              </span>
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.ue.eventType') }}: </span>
-              <DictTag :options="dict.ueEventType" :value="record.eventType" />
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.ue.result') }}: </span>
-              <span v-if="record.eventType === 'auth-result'">
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="24" :offset="2">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.ue.ueInfo') }}
+              </a-divider>
+              <div>
+                <span>{{ t('views.ne.common.neName') }}: </span>
+                <span>{{ record.neName }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.ne.common.rmUid') }}: </span>
+                <span>{{ record.rmUID }}</span>
+              </div>
+            </a-col>
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.ue.rowInfo') }}
+              </a-divider>
+              <div>
+                <span>{{ t('views.dashboard.ue.time') }}: </span>
+                <template v-if="record.eventJSON?.time">
+                  {{ record.eventJSON.time }}
+                </template>
+                <template v-else>
+                  {{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
+                </template>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.ue.eventType') }}: </span>
                 <DictTag
-                  :options="dict.ueAauthCode"
-                  :value="record.eventJSON.authCode"
+                  :options="dict.ueEventType"
+                  :value="record.eventType"
                 />
-              </span>
-              <span v-if="record.eventType === 'detach'">
-                {{ t('views.dashboard.ue.resultOk') }}
-              </span>
-              <span v-if="record.eventType === 'cm-state'">
-                <DictTag
-                  :options="dict.ueEventCmState"
-                  :value="record.eventJSON.status"
-                />
-              </span>
-            </div>
-          </div>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.ue.result') }}: </span>
+                <span v-if="record.eventType === 'auth-result'">
+                  <DictTag
+                    :options="dict.ueAauthCode"
+                    :value="record.eventJSON.result"
+                  />
+                </span>
+                <span v-if="record.eventType === 'detach'">
+                  {{ t('views.dashboard.ue.resultOk') }}
+                </span>
+                <span v-if="record.eventType === 'cm-state'">
+                  <DictTag
+                    :options="dict.ueEventCmState"
+                    :value="record.eventJSON.result"
+                  />
+                </span>
+              </div>
+            </a-col>
+          </a-row>
         </template>
       </a-table>
     </a-card>

src/views/dashboard/imsCDR/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -21,6 +21,9 @@ 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';
+const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const { getDict } = useDictStore();
 const ws = new WS();
@@ -41,7 +44,25 @@ let dict: {
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -54,9 +75,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -70,12 +91,12 @@ function fnQueryReset() {
     recordType: '',
     callerParty: '',
     calledParty: '',
-    startTime: '',
-    endTime: '',
+    startTime: undefined,
+    endTime: undefined,
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -307,6 +328,18 @@ function fnRecordDelete(id: string) {
   });
 }
 
+/**
+ * 复制CDR
+ * @param jsonStr JSON字符串
+ */
+function fnRecordCopy(jsonStr: string) {
+  if (!jsonStr) return;
+  const text = JSON.stringify(jsonStr, null, 2);
+  copy(text).then(() => {
+    message.success(t('common.copyOk'), 3);
+  });
+}
+
 /**查询列表, pageNum初始页数 */
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
@@ -314,11 +347,17 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
   listIMSDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -407,7 +446,9 @@ function fnRealTime() {
         subGroupID: `1005_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
@@ -417,12 +458,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -522,6 +557,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
               />
             </a-form-item>
           </a-col>
@@ -571,9 +607,7 @@ onBeforeUnmount(() => {
               <a-select
                 v-model:value="recordTypes"
                 mode="multiple"
-                :options="
-                  ['MOC', 'MTC', 'MOSM', 'MTSM'].map(v => ({ value: v }))
-                "
+                :options="['MOC', 'MTC'].map(v => ({ value: v }))"
                 :placeholder="t('common.selectPlease')"
                 @change="fnQueryRecordTypeChange"
               ></a-select>
@@ -586,12 +620,12 @@ onBeforeUnmount(() => {
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                allow-clear
-                bordered
+                :presets="rangePickerPresets"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
                 :show-time="{ format: 'HH:mm:ss' }"
                 format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                style="width: 100%"
               ></a-range-picker>
             </a-form-item>
           </a-col>
@@ -630,6 +664,7 @@ onBeforeUnmount(() => {
             :disabled="tableState.selectedRowKeys.length <= 0"
             :loading="modalState.confirmLoading"
             @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['cdr:ne:remove']"
           >
             <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
@@ -726,11 +761,23 @@ onBeforeUnmount(() => {
           </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.copyText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordCopy(record.cdrJSON)"
+                >
+                  <template #icon>
+                    <CopyOutlined />
+                  </template>
+                </a-button>
+              </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']"
                 >
                   <template #icon>
                     <DeleteOutlined />
@@ -742,7 +789,7 @@ onBeforeUnmount(() => {
         </template>
         <template #expandedRowRender="{ record }">
           <a-row :gutter="16">
-            <a-col :lg="5" :md="12" :xs="24">
+            <a-col :lg="8" :md="12" :xs="24" :offset="2">
               <a-divider orientation="left">
                 {{ t('views.dashboard.cdr.cdrInfo') }}
               </a-divider>
@@ -756,10 +803,16 @@ onBeforeUnmount(() => {
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.time') }}: </span>
-                <span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.releaseTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
+                      : record.cdrJSON.releaseTime
+                  }}
+                </span>
               </div>
             </a-col>
-            <a-col :lg="6" :md="12" :xs="24">
+            <a-col :lg="8" :md="12" :xs="24">
               <a-divider orientation="left">
                 {{ t('views.dashboard.cdr.rowInfo') }}
               </a-divider>
@@ -800,11 +853,23 @@ onBeforeUnmount(() => {
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.seizureTime') }}: </span>
-                <span>{{ record.cdrJSON.seizureTime }}</span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.seizureTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.seizureTime * 1000)
+                      : record.cdrJSON.seizureTime
+                  }}
+                </span>
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.releaseTime') }}: </span>
-                <span>{{ record.cdrJSON.releaseTime }}</span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.releaseTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
+                      : record.cdrJSON.releaseTime
+                  }}
+                </span>
               </div>
             </a-col>
           </a-row>

src/views/dashboard/mmeUE/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import dayjs, { Dayjs } from 'dayjs';
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -17,6 +18,8 @@ import { parseDateToStr } 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';
+const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const { getDict } = useDictStore();
 const ws = new WS();
@@ -25,9 +28,6 @@ const queue = new PQueue({ concurrency: 1, autoStart: true });
 /**网元可选 */
 let neOtions = ref<Record<string, any>[]>([]);
 
-/**event Type */
-let mmeEventType = ref<DictType[]>([]);
-
 /**字典数据 */
 let dict: {
   /**UE 事件认证代码类型 */
@@ -43,7 +43,10 @@ let dict: {
 });
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -55,9 +58,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -75,7 +78,7 @@ function fnQueryReset() {
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -152,8 +155,11 @@ let tableColumns: ColumnsType = [
     align: 'left',
     width: 150,
     customRender(opt) {
-      const cdrJSON = opt.value;
-      return parseDateToStr(+cdrJSON.timestamp * 1000);
+      const record = opt.value;
+      if (record?.time) {
+        return record.time;
+      }
+      return parseDateToStr(+record.timestamp * 1000);
     },
   },
   {
@@ -263,11 +269,19 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
+
   listMMEDataUE(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -335,6 +349,18 @@ function fnExportList() {
   });
 }
 
+/**
+ * 复制CDR
+ * @param jsonStr JSON字符串
+ */
+function fnRecordCopy(jsonStr: string) {
+  if (!jsonStr) return;
+  const text = JSON.stringify(jsonStr, null, 2);
+  copy(text).then(() => {
+    message.success(t('common.copyOk'), 3);
+  });
+}
+
 /**实时数据开关 */
 const realTimeData = ref<boolean>(false);
 
@@ -351,12 +377,14 @@ function fnRealTime() {
       params: {
         /**订阅通道组
          *
-         * MME_UE会话事件(GroupID:1011)
+         * MME_UE会话事件(GroupID:1011_neId)
          */
         subGroupID: `1011_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
@@ -366,12 +394,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -418,13 +440,12 @@ onMounted(() => {
       dict.ueAauthCode = resArr[0].value;
     }
     if (resArr[1].status === 'fulfilled') {
-      resArr[1].value.map(item => {
-        const realJson = JSON.parse(JSON.stringify(item));
-
-        if (realJson.value === 'cm-state') {
-          realJson.label = realJson.label.replace('CM', 'ECM');
+      const ueEventType: any[] = JSON.parse(JSON.stringify(resArr[1].value));
+      dict.ueEventType = ueEventType.map(item => {
+        if (item.value === 'cm-state') {
+          item.label = item.label.replace('CM', 'ECM');
         }
-        mmeEventType.value.push(realJson);
+        return item;
       });
     }
     if (resArr[2].status === 'fulfilled') {
@@ -485,6 +506,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
               />
             </a-form-item>
           </a-col>
@@ -496,13 +518,13 @@ onBeforeUnmount(() => {
               <a-select
                 v-model:value="eventTypes"
                 mode="multiple"
-                :options="mmeEventType"
+                :options="dict.ueEventType"
                 :placeholder="t('common.selectPlease')"
                 @change="fnQueryEventTypeChange"
               ></a-select>
             </a-form-item>
           </a-col>
-          <a-col :lg="4" :md="12" :xs="24">
+          <a-col :lg="6" :md="12" :xs="24">
             <a-form-item label="IMSI" name="imsi ">
               <a-input
                 v-model:value="queryParams.imsi"
@@ -511,6 +533,20 @@ onBeforeUnmount(() => {
               ></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="8" :md="12" :xs="24">
             <a-form-item
               :label="t('views.dashboard.cdr.time')"
@@ -527,20 +563,6 @@ onBeforeUnmount(() => {
               ></a-range-picker>
             </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-row>
       </a-form>
     </a-card>
@@ -576,6 +598,7 @@ onBeforeUnmount(() => {
             :disabled="tableState.selectedRowKeys.length <= 0"
             :loading="modalState.confirmLoading"
             @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['cdr:ne:remove']"
           >
             <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
@@ -653,7 +676,7 @@ onBeforeUnmount(() => {
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'eventType'">
-            <DictTag :options="mmeEventType" :value="record.eventType" />
+            <DictTag :options="dict.ueEventType" :value="record.eventType" />
           </template>
           <template v-if="column.key === 'result'">
             <span v-if="record.eventType === 'auth-result'">
@@ -674,11 +697,23 @@ onBeforeUnmount(() => {
           </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.copyText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordCopy(record.eventJSON)"
+                >
+                  <template #icon>
+                    <CopyOutlined />
+                  </template>
+                </a-button>
+              </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']"
                 >
                   <template #icon>
                     <DeleteOutlined />
@@ -689,48 +724,60 @@ onBeforeUnmount(() => {
           </template>
         </template>
         <template #expandedRowRender="{ record }">
-          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
-            <a-divider orientation="left">
-              {{ t('views.dashboard.ue.ueInfo') }}
-            </a-divider>
-            <div>
-              <span>{{ t('views.ne.common.neName') }}: </span>
-              <span>{{ record.neName }}</span>
-            </div>
-            <div>
-              <span>{{ t('views.ne.common.rmUid') }}: </span>
-              <span>{{ record.rmUID }}</span>
-            </div>
-            <a-divider orientation="left">
-              {{ t('views.dashboard.ue.rowInfo') }}
-            </a-divider>
-            <div>
-              <span>{{ t('views.dashboard.ue.time') }}: </span>
-              {{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.ue.eventType') }}: </span>
-              <DictTag :options="mmeEventType" :value="record.eventType" />
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.ue.result') }}: </span>
-              <span v-if="record.eventType === 'auth-result'">
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="24" :offset="2">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.ue.ueInfo') }}
+              </a-divider>
+              <div>
+                <span>{{ t('views.ne.common.neName') }}: </span>
+                <span>{{ record.neName }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.ne.common.rmUid') }}: </span>
+                <span>{{ record.rmUID }}</span>
+              </div>
+            </a-col>
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.ue.rowInfo') }}
+              </a-divider>
+              <div>
+                <span>{{ t('views.dashboard.ue.time') }}: </span>
+                <template v-if="record.eventJSON?.time">
+                  {{ record.eventJSON.time }}
+                </template>
+                <template v-else>
+                  {{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
+                </template>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.ue.eventType') }}: </span>
                 <DictTag
-                  :options="dict.ueAauthCode"
-                  :value="record.eventJSON.result"
+                  :options="dict.ueEventType"
+                  :value="record.eventType"
                 />
-              </span>
-              <span v-if="record.eventType === 'detach'">
-                {{ t('views.dashboard.ue.resultOk') }}
-              </span>
-              <span v-if="record.eventType === 'cm-state'">
-                <DictTag
-                  :options="dict.ueEventCmState"
-                  :value="record.eventJSON.result"
-                />
-              </span>
-            </div>
-          </div>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.ue.result') }}: </span>
+                <span v-if="record.eventType === 'auth-result'">
+                  <DictTag
+                    :options="dict.ueAauthCode"
+                    :value="record.eventJSON.result"
+                  />
+                </span>
+                <span v-if="record.eventType === 'detach'">
+                  {{ t('views.dashboard.ue.resultOk') }}
+                </span>
+                <span v-if="record.eventType === 'cm-state'">
+                  <DictTag
+                    :options="dict.ueEventCmState"
+                    :value="record.eventJSON.result"
+                  />
+                </span>
+              </div>
+            </a-col>
+          </a-row>
         </template>
       </a-table>
     </a-card>

src/views/dashboard/mocn/components/setting.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
 import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
   title: {
     type: String,
     default: '标题',
   },
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -27,13 +28,13 @@ let dataState = reactive({
 function fnModalOk() {
   dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
   emit('ok');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**弹框取消按钮事件 */
 function fnModalCancel() {
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**显示弹框时初始数据 */
@@ -48,7 +49,7 @@ function init() {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) init();
   }
@@ -60,7 +61,7 @@ watch(
     :drag="true"
     :width="800"
     :title="props.title"
-    :visible="props.visible"
+    :open="props.open"
     :keyboard="false"
     :mask-closable="false"
     @cancel="fnModalCancel"

src/views/dashboard/mocn/index.vue

@@ -8,7 +8,7 @@ import Topology from '../overview/components/Topology/index.vue';
 import NeResources from '../overview/components/NeResources/index.vue';
 import UserActivity from '../overview/components/UserActivity/index.vue';
 import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
-import setting from './components/setting.vue';
+import Setting from './components/setting.vue';
 import UPFFlow from '../overview/components/UPFFlow/index.vue';
 import { listUDMSub } from '@/api/neData/udm_sub';
 import { listUENumBySMF } from '@/api/neUser/smf';
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
 /**MOCN状态 */
 const mocnState = reactive({
   title: 'Set MOCN Data',
-  visible: false,
+  open: false,
   data: {
     /**基站数 */
     baseNum: 0,
@@ -220,7 +220,7 @@ const mocnState = reactive({
 });
 /**MOCN 右击设置 */
 function fnRightClick() {
-  mocnState.visible = true;
+  mocnState.open = true;
 }
 </script>
 
@@ -543,9 +543,9 @@ function fnRightClick() {
         </div>
       </div>
     </div>
-    <setting
+    <Setting
       :title="mocnState.title"
-      v-model:visible="mocnState.visible"
+      v-model:open="mocnState.open"
     ></setting>
   </div>
 </template>

src/views/dashboard/overview/components/Topology/index.vue

@@ -2,9 +2,10 @@
 import { onMounted, ref } from 'vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listAllNeInfo } from '@/api/ne/neInfo';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { getGraphData } from '@/api/monitor/topology';
 import { Graph, GraphData, Tooltip } from '@antv/g6';
+import { parseBasePath } from '@/plugins/file-static-url';
 import { edgeLineAnimateState } from '@/views/monitor/topologyBuild/hooks/registerEdge';
 import { nodeImageAnimateState } from '@/views/monitor/topologyBuild/hooks/registerNode';
 import {
@@ -186,6 +187,12 @@ function fnGraphDataLoad(reload: boolean = false) {
       const nf: Record<string, any>[] = nodes.filter(
         (node: Record<string, any>) => {
           Reflect.set(node, 'neState', { online: false });
+          // 图片路径处理
+          if (node.img) node.img = parseBasePath(node.img);
+          if (node.icon.show && node.icon?.img) {
+            node.icon.img = parseBasePath(node.icon.img);
+          }
+          // 遍历是否有网元数据
           const nodeID: string = node.id;
           const hasNe = res.neList.some(ne => {
             Reflect.set(node, 'neInfo', ne.neType === nodeID ? ne : {});

src/views/dashboard/overview/components/UserActivity/index.vue

@@ -77,8 +77,12 @@ onMounted(() => {
           <div></div>
           <div>
             {{ t('views.dashboard.overview.userActivity.time') }}:&nbsp;
-            <span :title="parseDateToStr(item.data.releaseTime * 1000)">
-              {{ parseDateToStr(item.data.releaseTime * 1000) }}
+            <span :title="item.data.releaseTime">
+              {{
+                typeof item.data.releaseTime === 'number'
+                  ? parseDateToStr(+item.data.releaseTime * 1000)
+                  : item.data.releaseTime
+              }}
             </span>
           </div>
         </div>
@@ -133,18 +137,12 @@ onMounted(() => {
           </div>
           <div>
             {{ t('views.dashboard.overview.userActivity.time') }}:
-            <span
-              v-if="item.type === 'auth-result'"
-              :title="item.data.authTime"
-            >
-              {{ item.data.authTime }}
-            </span>
-            <span v-if="item.type === 'detach'" :title="item.data.detachTime">
-              {{ item.data.detachTime }}
-            </span>
-            <span v-if="item.type === 'cm-state'" :title="item.data.changeTime">
-              {{ item.data.changeTime }}
-            </span>
+            <template v-if="item.data?.time">
+              {{ item.data.time }}
+            </template>
+            <template v-else>
+              {{ parseDateToStr(+item.data.timestamp * 1000) }}
+            </template>
           </div>
         </div>
 
@@ -163,7 +161,7 @@ onMounted(() => {
         <div v-if="item.type === 'auth-result'">
           {{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
           <span>
-            <DictTag :options="dict.ueAauthCode" :value="item.data.authCode" />
+            <DictTag :options="dict.ueAauthCode" :value="item.data.result" />
           </span>
         </div>
         <div v-if="item.type === 'detach'">
@@ -173,7 +171,7 @@ onMounted(() => {
         <div class="card-ue-w33" v-if="item.type === 'cm-state'">
           {{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
           <span>
-            <DictTag :options="dict.ueEventCmState" :value="item.data.status" />
+            <DictTag :options="dict.ueEventCmState" :value="item.data.result" />
           </span>
         </div>
       </div>
@@ -198,12 +196,16 @@ onMounted(() => {
             </span>
           </div>
           <div>
-            IMSI: <span :title="item.data.imsi">{{ item.data.imsi }}</span>
+            IMSI: <span :title="item.data?.imsi">{{ item.data?.imsi }}</span>
           </div>
           <div>
             {{ t('views.dashboard.overview.userActivity.time') }}:
-            <span :title="item.data.timestamp">
-              {{ parseDateToStr(+item.data.timestamp * 1000) }}
+            <span :title="item.data?.timestamp">
+              {{
+                typeof item.data?.timestamp === 'number'
+                  ? parseDateToStr(+item.data?.timestamp * 1000)
+                  : item.data?.timestamp
+              }}
             </span>
           </div>
         </div>

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

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

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

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

src/views/dashboard/overview/css/index.css

@@ -16,6 +16,8 @@
 .column {
   flex: 3;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 边框 */
@@ -79,13 +81,14 @@
 .upfFlow .inner .chart {
   width: 100%;
   height: 100%;
-  margin-top: 1rem;
+  margin-top: 0rem;
 }
 
 /* 网络拓扑 */
 .topology {
   /* min-height: 27.8rem; */
   height: 56.4%;
+  flex: 1;
 }
 .topology .inner h3 {
   display: flex;
@@ -179,6 +182,7 @@
 .userActivity {
   /* min-height: 35.8rem; */
   height: 54.6%;
+  flex: 1;
 }
 .userActivity .inner .chart {
   width: 100%;
@@ -259,6 +263,7 @@
 .alarmType {
   /* min-height: 25rem; */
   height: 46%;
+  flex: 1;
 }
 .alarmType .inner .chart {
   width: 100%;

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

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