feat:语音仪表盘

This reverts commit 3abb4dd4bd.

.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.241115"
+VITE_APP_VERSION = "2.250509"
 
 # 接口基础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.241115"
+VITE_APP_VERSION = "2.250509"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

package.json

@@ -12,50 +12,50 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
-    "@antv/g6": "~4.8.24",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-yaml": "^6.1.1",
-    "@codemirror/merge": "^6.7.2",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@tato30/vue-pdf": "^1.11.2",
-    "@vueuse/core": "11.2.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/xterm": "^5.5.0",
-    "ant-design-vue": "^4.2.5",
-    "antdv-pro-layout": "^4.1.9",
-    "antdv-pro-modal": "^4.0.5",
-    "codemirror": "^6.0.1",
-    "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.11",
-    "echarts": "~5.5.0",
-    "file-saver": "^2.0.5",
-    "grid-layout-plus": "^1.0.5",
-    "intl-tel-input": "^24.6.0",
+    "@ant-design/icons-vue": "7.0.1",
+    "@antv/g6": "4.8.24",
+    "@codemirror/lang-javascript": "6.2.3",
+    "@codemirror/lang-yaml": "6.1.2",
+    "@codemirror/merge": "6.10.0",
+    "@codemirror/theme-one-dark": "6.1.2",
+    "@tato30/vue-pdf": "1.11.3",
+    "@vueuse/core": "13.0.0",
+    "@xterm/addon-fit": "0.10.0",
+    "@xterm/xterm": "5.5.0",
+    "ant-design-vue": "4.2.6",
+    "antdv-pro-layout": "4.2.0",
+    "antdv-pro-modal": "4.0.6",
+    "codemirror": "6.0.1",
+    "crypto-js": "4.2.0",
+    "dayjs": "1.11.13",
+    "echarts": "5.6.0",
+    "file-saver": "2.0.5",
+    "grid-layout-plus": "1.0.6",
+    "intl-tel-input": "25.2.0",
     "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.2.6",
-    "vue": "^3.5.12",
-    "vue-i18n": "^10.0.4",
-    "vue-router": "^4.4.5",
-    "vue3-smooth-dnd": "^0.0.6",
-    "xlsx": "~0.18.5"
+    "p-queue": "8.0.1",
+    "pinia": "2.3.0",
+    "vue": "3.5.13",
+    "vue-i18n": "11.1.2",
+    "vue-router": "4.5.0",
+    "vue3-smooth-dnd": "0.0.6",
+    "xlsx": "0.18.5"
   },
   "devDependencies": {
-    "@types/crypto-js": "^4.2.2",
-    "@types/file-saver": "^2.0.7",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.7.7",
-    "@types/nprogress": "^0.2.3",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "less": "^4.2.0",
-    "typescript": "^5.6.3",
-    "unplugin-vue-components": "^0.27.4",
-    "vite": "5.4.10",
-    "vite-plugin-compression": "~0.5.1",
-    "vue-tsc": "^2.1.8"
+    "@types/crypto-js": "4.2.2",
+    "@types/file-saver": "2.0.7",
+    "@types/js-cookie": "3.0.6",
+    "@types/node": "^18.0.0",
+    "@types/nprogress": "0.2.3",
+    "@vitejs/plugin-vue": "5.2.3",
+    "less": "4.2.2",
+    "typescript": "5.8.2",
+    "unplugin-vue-components": "0.28.0",
+    "vite": "6.2.2",
+    "vite-plugin-compression": "0.5.1",
+    "vue-tsc": "2.2.8"
   }
 }

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>

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/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/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/analysis.ts

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

src/api/trace/packet.ts

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

src/api/trace/task.ts

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

src/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/components/TerminalRedis/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+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';
@@ -31,8 +32,91 @@ const terminalDom = ref<HTMLElement | undefined>(undefined);
 /**终端输入实例对象 */
 const terminal = ref<any>(null);
 
-/**终端输入命令 */
-const terminalCmd = ref<string>('');
+/**终端输入文字状态 */
+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) {
@@ -49,47 +133,13 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     scrollback: 1000,
     scrollSensitivity: 15,
     tabStopWidth: 4,
-    disableStdin: false, // 禁止输入
+    disableStdin: true, // 禁止输入
   });
   // 挂载
   xterm.open(container);
   // 自适应尺寸
   const fitAddon = new FitAddon();
   xterm.loadAddon(fitAddon);
-  // 终端输入字符按键监听
-  xterm.onKey(({ key, domEvent }) => {
-    // console.log(key, domEvent);
-    // 单键输入
-    switch (domEvent.key) {
-      case 'Enter':
-        const cmdStr = terminalCmd.value.trim();
-        // 发送文本
-        terminal.value.scrollToBottom();
-        terminal.value.writeln('\r\n');
-        ws.send({
-          requestId: `redis_${props.hostId}`,
-          type: 'redis',
-          data: `${cmdStr}\r\n`,
-        });
-        terminalCmd.value = '';
-
-        // 退出登录
-        if ('quit' === cmdStr) {
-          setTimeout(() => {
-            ws.close();
-          }, 1000);
-        }
-        break;
-      case 'Backspace':
-        // 处理退格键，删除最后一个字符
-        xterm.write('\b \b');
-        break;
-      default:
-        xterm.write(key);
-        terminalCmd.value += key;
-        return;
-    }
-  });
   // 创建 ResizeObserver 实例
   var observer = new ResizeObserver(entries => {
     fitAddon.fit();
@@ -213,7 +263,21 @@ defineExpose({
 
 <template>
   <div class="terminal">
-    <div ref="terminalDom" :id="id" class="terminal"></div>
+    <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>
 

src/components/TerminalTelnet/index.vue

@@ -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)) {
@@ -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/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

@@ -4,6 +4,7 @@ export const NE_TYPE_LIST = [
   'IMS',
   'AMF',
   'AUSF',
+  'UDR',
   'UDM',
   'SMF',
   'PCF',
@@ -19,6 +20,8 @@ export const NE_TYPE_LIST = [
   'SMSF',
   'CBC',
   'CHF',
+  'HLR',
+  'SGWC',
 ];
 
 /**

src/i18n/locales/en-US.ts

@@ -16,7 +16,6 @@ export default {
     errorFields: 'Please fill in the required information in {num} correctly!',
     tablePaginationTotal: 'Total {total} items',
     noData: "No Data",
-    zebra:'Tabular zebra pattern',
     ok: 'Ok',
     cancel: 'Cancel',
     close: 'Close',
@@ -131,7 +130,7 @@ export default {
     },
     LockScreen: {
       inputPlacePwd:'Lock Screen Password',
-      validSucc:'Validation Passed',
+      enter:'Enter',
       validError:'Validation Failure',
       backLogin:'Logout to Relogin',
       backReload:'Restarting now, please wait...',
@@ -222,12 +221,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',
@@ -351,163 +349,6 @@ 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'
-      },
-      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',
-        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",
-      },
-    },
     dashboard: {
       overview:{
         title: "Core Network Dashboard",
@@ -579,14 +420,18 @@ 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',
       },
       ue: {
         eventType: "Event Type",
@@ -658,7 +503,7 @@ export default {
         delTip: 'Confirm deletion of network element information data items?',
         oam: {
           title: 'OAM Configuration',
-          sync: 'Sync to NE',
+          restart: 'Restart NE',
           oamEnable: 'Service',
           oamPort: 'Port',
           snmpEnable: 'Service',
@@ -761,6 +606,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",
@@ -784,7 +630,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}.",
@@ -845,7 +693,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",
@@ -858,6 +706,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',
@@ -868,6 +740,7 @@ 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 loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
@@ -896,6 +769,7 @@ 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 loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
@@ -1090,6 +964,7 @@ export default {
         expressionModal:'Expression Modal',
         expressionErrorTip:'Please check the expression, the wrong indicator is {kpiId}',
         expressionNoIdTip:'Please check the expression, no valid indicator is found',
+        unitSelect:'To better display the image, the same unit needs to be selected. The current unit is:',
       },
       kpiKeyTarget:{
         "time":"Time",
@@ -1108,8 +983,14 @@ export default {
       },
       kpiOverView:{
         "kpiName":"NE Metrics Name",
-        "maxValue":"Max Value",
-        "minValue":"Min Value",
+        "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",
@@ -1118,25 +999,6 @@ export default {
       },
     },
     traceManage: {
-      analysis: {
-        imsi: 'IMSI',
-        imsiPlease: 'Please enter IMSI',
-        msisdn: 'MSISDN',
-        msisdnPlease: 'Please enter MSISDN',
-        trackTaskId: 'Task ID',
-        srcIp: 'Source IP Address',
-        dstIp: 'Destination IP Address',
-        signalType: 'Signaling Type',
-        msgDirect: 'Message Direction',
-        msgType: 'Message Type',
-        rowTime: 'Record Time',
-        signalData: 'Signaling Data',
-        signalDetail: 'Signaling Details',
-        noData: 'No information content',
-        taskTitle: 'Task {num}',
-        taskDownText: 'Download HTML',
-        taskDownTip: 'Confirm downloading the signaling details HTML file?',
-      },
       pcap: {
         capArgPlease: 'Please enter tcpdump -i any support parameter',
         cmd: 'Command',
@@ -1187,30 +1049,35 @@ export default {
         imsiTip: 'Mobile communication IMSI number',
         srcIp: 'Source IP Address',
         srcIpPlease: 'Please enter the IP address',
-        srcIpTip: 'Current sender IPv4 address',
+        srcIpTip: 'sending IPv4 address',
         dstIp: 'Destination IP Address',
         dstIpPlease: 'Please enter the IP address',
-        dstIpTip: 'IPv4 address of the receiving end of the other party',
+        dstIpTip: 'receiving end IPv4 address',
         interfaces: 'Signaling Interface',
         interfacesPlease: 'Please enter the signaling interface',
-        signalPort: 'Signal Port',
-        signalPortPlease: 'Please enter the signaling port',
-        signalPortTip: 'Port of the side corresponding to the destination IP address or source IP address',
-        rangePicker: 'Start/End Time',
+        rangePicker: 'Task Time',
         rangePickerPlease: 'Please select the start and end time of the task',
         remark: 'Remark',
         remarkPlease: 'Task description can be entered',
         addTask: 'Add Task',
-        editTask: 'Modify Task',
         viewTask: 'View Task',
         errorTaskInfo: 'Failed to obtain task information',
         delTaskTip: 'Are you sure to delete the data item with record ID {id} ?',
         stopTask: 'Successful cessation of tasks {id}',
         stopTaskTip: 'Confirm stopping the task with record ID {id} ?',
-        pcapView: "Tracking Data Analysis",
-        traceFile: "Tracking File",
+        pcapView: "Track Data Analysis",
+        traceFile: "Track File",
         errMsg: "Error Message",
         imsiORmsisdn: "imsi or msisdn is null, cannot start task",
+        dataView: "Track Data",
+        protocolOrInterface: "Protocol/Interface",
+        msgNe: 'Network Element',
+        msgEvent: 'Event',
+        msgType: 'Type',
+        msgDirect: 'Direction',
+        msgLen: 'Length',
+        rowTime: 'Time',
+        taskInfo: 'Task information',
       },
     },
     faultManage: {
@@ -1320,12 +1187,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

@@ -16,7 +16,6 @@ export default {
     errorFields: '请正确填写 {num} 处必填信息！',
     tablePaginationTotal: '总共 {total} 条',
     noData: "暂无数据",
-    zebra:'表格斑马纹',
     ok: '确定',
     cancel: '取消',
     close: '关闭',
@@ -131,7 +130,7 @@ export default {
     },
     LockScreen: {
       inputPlacePwd:'请输入锁屏密码',
-      validSucc:'校验通过',
+      enter:'进入',
       validError:'校验失败',
       backLogin:'退出并重新登录',
       backReload:'正在重启，请稍等...',
@@ -222,13 +221,12 @@ export default {
       capability: '用户容量',
       serialNum: '序列号',
       expiryDate: '许可证到期日期',
-      neStatus:'网元状态异常',
+      neStatus:'状态异常',
       runStatus:'运行状态',
-      mark:'简略信息',
+      mark:'信息',
       object:'对象',
       versionNum:'版本号',
-      systemStatus:'系统状态',
-      realNeStatus:'网元状态',
+      realNeStatus:'状态',
       reloadTime:'刷新时间',
       Critical:'严重告警',
       Major:'主要告警',
@@ -351,163 +349,6 @@ 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:'操作失败'
-      },
-      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:'回退前版本',
-        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: "展开",
-      },
-    },
     dashboard: {
       overview:{
         title: "核心网系统看板",
@@ -579,14 +420,18 @@ 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 下行链路',
       },
       ue: {
         eventType: "事件类型",
@@ -658,7 +503,7 @@ export default {
         delTip: '确认删除网元信息数据项吗?',
         oam: {
           title: 'OAM配置',
-          sync: '同步到网元',
+          restart: '下发后重启网元',
           oamEnable: '服务',
           oamPort: '端口',
           snmpEnable: '服务',
@@ -761,6 +606,7 @@ export default {
         upgradeDone: '更新完成，服务正在重载',
         upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
         upgradeModal: '网元版本更新',
+        noPath: '软件包文件未发现',
       },
       neLicense: {
         status: "许可证状态",
@@ -784,7 +630,9 @@ export default {
         treeSelectTip: "左侧配置导航中选择配置项信息！",
         neType: "网元类型",
         neTypePleace: "请选择网元类型",
+        neIdSyncPleace: "请选择同步网元",
         noConfigData: "暂无配置项数据",
+        noConfigdDisabled: "配置项网元未正常服务",
         updateValue: "【 {num} 】 属性值修改成功",
         updateValueErr: "属性值修改失败",
         updateItem: "修改 Index 为 {num} 记录成功",
@@ -858,6 +706,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:'鉴权信息',
@@ -868,6 +740,7 @@ export default {
         checkExport : '勾选导出',
         checkExportConfirm: '确认导出已勾选的鉴权用户数据吗？',
         import: '导入',
+        importFail: '失败记录',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
         loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
@@ -896,6 +769,7 @@ export default {
         checkExport : '勾选导出',
         checkExportConfirm: '确认导出已勾选的签约用户数据吗？',
         import: '导入',
+        importFail: '失败记录',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
         loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
@@ -1090,6 +964,7 @@ export default {
         expressionModal:'表达式模块',
         expressionErrorTip:'请检查表达式,错误的指标为{kpiId}',
         expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
+        unitSelect:'为更好展示图需选择相同单位,当前单位为:',
       },
       kpiKeyTarget:{
         "time":"时间",
@@ -1109,7 +984,13 @@ export default {
       kpiOverView:{
         "kpiName":"指标名",
         "maxValue":"最大值",
+        "maxValueTip":"用户筛选时间范围内度量数据的最大值。",
         "minValue":"最小值",
+        "minValueTip":"用户筛选时间范围内度量数据的最小值。",
+        "avgValue":"平均值",
+        "avgValueTip":"用户筛选时间范围内度量数据的平均值。",
+        "totalValue":"总值",
+        "totalValueTip":"用户筛选时间范围内度量数据的总值。",
         "kpiChartTitle":"网元指标概览",
         "changeLine":"切换为折线图",
         "changeBar":"切换为柱状图",
@@ -1118,25 +999,6 @@ export default {
       },
     },
     traceManage: {
-      analysis: {
-        imsi: 'IMSI',
-        imsiPlease: '请输入IMSI',
-        msisdn: 'MSISDN',
-        msisdnPlease: '请输入MSISDN',
-        trackTaskId: '跟踪任务标记',
-        srcIp: '源IP地址',
-        dstIp: '目标IP地址',
-        signalType: '信令类型',
-        msgDirect: '消息元',
-        msgType: '消息类型',
-        rowTime: '记录时间',
-        signalData: '信令数据',
-        signalDetail: '信令详情',
-        noData: '无信息内容',
-        taskTitle: '任务 {num}',
-        taskDownText: '下载HTML',
-        taskDownTip: '确认下载信令详情HTML文件?',
-      },
       pcap: {
         capArgPlease: '请输入tcpdump -i any支持参数',
         cmd: '命令',
@@ -1187,21 +1049,17 @@ export default {
         imsiTip: '移动通信IMSI编号',
         srcIp: '源IP地址',
         srcIpPlease: '请输入源IP地址',
-        srcIpTip: '当前发送端IPv4地址',
+        srcIpTip: '发送端IPv4地址',
         dstIp: '目标IP地址',
         dstIpPlease: '请输入目标IP地址',
-        dstIpTip: '对方接收端IPv4地址',
+        dstIpTip: '接收端IPv4地址',
         interfaces: '信令接口',
         interfacesPlease: '请输入信令接口',
-        signalPort: '信令端口',
-        signalPortPlease: '请输入信令端口',
-        signalPortTip: '目标IP地址或源IP地址对应一方的端口',
-        rangePicker: '开始结束时间',
+        rangePicker: '任务时间',
         rangePickerPlease: '请选择任务时间开始结束时间',
         remark: '说明',
         remarkPlease: '可输入任务说明',
         addTask: '添加任务',
-        editTask: '修改任务',
         viewTask: '查看任务',
         errorTaskInfo: '获取任务信息失败',
         delTaskTip: '确认删除记录编号为 {id} 的数据项?',
@@ -1211,6 +1069,15 @@ export default {
         traceFile: "跟踪文件",
         errMsg: "错误信息",
         imsiORmsisdn: "imsi 或 msisdn 是空值，不能开始任务",
+        dataView: "跟踪数据",
+        protocolOrInterface: "协议/接口",
+        msgNe: '消息网元',
+        msgEvent: '消息事件',
+        msgType: '消息类型',
+        msgDirect: '消息方向',
+        msgLen: '消息长度',
+        rowTime: '消息时间',
+        taskInfo: '任务信息',
       },
     },
     faultManage: {
@@ -1320,6 +1187,7 @@ export default {
         size: "文件大小",
         modifiedTime: "修改时间",
         fileName: "文件名称",
+        downTipZip: "确认将目录 【{fileName}】 下载为ZIP文件?",
         downTip: "确认下载文件名为 【{fileName}】 文件?",
         downTipErr: "文件获取失败",
         dirCd: "进入目录",

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/plugins/ws-websocket.ts

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

src/router/index.ts

@@ -182,7 +182,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) {

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/mask.ts

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

src/store/modules/neinfo.ts

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

src/typings/vite-env.d.ts

@@ -7,8 +7,10 @@ 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-DDTHH: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/configManage/neOverview/index.vue

@@ -2,7 +2,14 @@
 import { PageContainer } from 'antdv-pro-layout';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { message } from 'ant-design-vue/es';
-import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
+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,12 +101,13 @@ let tableColumns: ColumnsType = [
     },
   },
 ];
+
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
   loading: boolean;
   /**记录数据 */
-  data: object[];
+  data: Record<string, any>[];
   /**勾选记录 */
   selectedRowKeys: (string | number)[];
 };
@@ -121,114 +119,92 @@ let tableState: TabeStateType = reactive({
   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;
-    res.data.forEach((item: any) => {
-      if (item.serverState.online) {
-        rightNum++;
-      } else {
-        errorNum++;
-      }
-    });
-    const optionData: any = {
-      title: {
-        text: '',
-        subtext: '',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      color: indexColor.value.map(item => item.tagClass),
+  } 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);
+    }
+
+    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 => {
@@ -240,66 +216,43 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   observer.observe(container);
 }
 
-/**抽屉 网元详细信息 */
-const open = ref(false);
-const closeDrawer = () => {
-  open.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,
-        };
-      }
-      open.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;
 
 /**
  * 国际化翻译转换
@@ -312,63 +265,48 @@ 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 :open="open" @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.capability')">{{
-            pronInfo.capability
-          }}</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">
         <!-- 表格列表 -->
@@ -377,20 +315,20 @@ onBeforeUnmount(() => {
           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>
@@ -404,7 +342,8 @@ onBeforeUnmount(() => {
           <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
         </a-card>
         <a-card
-          :title="t('views.index.mark')"
+          :loading="tableState.loading"
+          :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
           style="margin-top: 16px"
           size="small"
         >
@@ -413,25 +352,33 @@ onBeforeUnmount(() => {
             :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/dashboard/amfUE/index.vue

@@ -11,14 +11,21 @@ import {
   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

@@ -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>
@@ -584,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>
@@ -628,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') }}
@@ -724,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 />
@@ -740,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>
@@ -763,7 +812,7 @@ onBeforeUnmount(() => {
                 </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>

src/views/dashboard/mmeUE/index.vue

@@ -1,4 +1,5 @@
 <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/es';
@@ -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();
@@ -40,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({
@@ -52,9 +58,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -72,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();
@@ -149,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);
     },
   },
   {
@@ -260,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)) {
       // 取消勾选
@@ -332,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);
 
@@ -348,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 {
@@ -363,12 +394,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -415,7 +440,7 @@ onMounted(() => {
       dict.ueAauthCode = resArr[0].value;
     }
     if (resArr[1].status === 'fulfilled') {
-      const ueEventType: any[] = JSON.parse(JSON.stringify(resArr[1]));
+      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');
@@ -481,6 +506,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
               />
             </a-form-item>
           </a-col>
@@ -498,7 +524,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"
@@ -507,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')"
@@ -523,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>
@@ -572,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') }}
@@ -670,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 />
@@ -685,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="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.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/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/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 = {

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

@@ -1,6 +1,6 @@
 import { RESULT_CODE_ERROR } from '@/constants/result-constants';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { onBeforeUnmount, onMounted } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
 import {
   eventListParse,
   eventItemParseAndPush,
@@ -12,9 +12,15 @@ import {
   upfFlowParse,
   upfTotalFlowReset,
 } from './useUPFTotalFlow';
-import { topologyReset, neStateParse } from './useTopology';
+import { topologyReset, neStateParse, neStateRequestMap } from './useTopology';
 import PQueue from 'p-queue';
 
+/**UPF-的Id */
+export const upfWhoId = ref<any>('');
+
+/**UPF-的RmUid */
+export const upfWhoRmUid = ref<any>('');
+
 /**websocket连接 */
 export default function useWS() {
   const ws = new WS();
@@ -27,13 +33,12 @@ export default function useWS() {
 
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
-    // console.log(res);
+    //console.log(res);
     const { code, requestId, data } = res;
     if (code === RESULT_CODE_ERROR) {
       console.warn(res.msg);
       return;
     }
-
     // 网元状态
     if (requestId && requestId.startsWith('neState')) {
       const neType = requestId.split('_')[1];
@@ -44,7 +49,7 @@ export default function useWS() {
     // 普通信息
     switch (requestId) {
       // AMF_UE会话事件
-      case 'amf_1010':
+      case 'amf_1010_001':
         if (Array.isArray(data.rows)) {
           eventListParse('amf_ue', data);
         }
@@ -72,20 +77,19 @@ export default function useWS() {
         upfTFParse('30', data);
         break;
     }
-
     // 订阅组信息
     if (!data?.groupId) {
       return;
     }
     switch (data.groupId) {
       // kpiEvent 指标UPF
-      case '12_001':
+      case '10_UPF_' + upfWhoId.value:
         if (data.data) {
           upfFlowParse(data.data);
         }
         break;
       // AMF_UE会话事件
-      case '1010':
+      case '1010_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('amf_ue', data.data));
         }
@@ -128,7 +132,7 @@ export default function useWS() {
   function userActivitySend() {
     // AMF_UE会话事件
     ws.send({
-      requestId: 'amf_1010',
+      requestId: 'amf_1010_001',
       type: 'amf_ue',
       data: {
         neType: 'AMF',
@@ -168,18 +172,28 @@ export default function useWS() {
     });
   }
 
-  onMounted(() => {
+  /**重新发送至UPF 10_UPF_neId */
+  function reSendUPF(neId: string) {
+    upfWhoId.value = neId;
+    //初始时时无需还原全部属性以及关闭
+    if (ws.state() === WebSocket.OPEN) {
+      ws.close();
+      // userActivityReset();
+      upfTotalFlowReset();
+      neStateRequestMap.value = new Map();
+      //topologyReset();
+    }
     const options: OptionsType = {
       url: '/ws',
       params: {
         /**订阅通道组
          *
-         * 指标UPF (GroupID:12_neId)
-         * AMF_UE会话事件(GroupID:1010)
+         * 指标UPF (GroupID:10_neType_neId)
+         * AMF_UE会话事件(GroupID:1010_neId)
          * MME_UE会话事件(GroupID:1011_neId)
          * IMS_CDR会话事件(GroupID:1005_neId)
          */
-        subGroupID: '12_001,1010,1011_001,1005_001',
+        subGroupID: '10_UPF_' + neId + ',1010_001,1011_001,1005_001',
       },
       onmessage: wsMessage,
       onerror: (ev: any) => {
@@ -187,18 +201,20 @@ export default function useWS() {
       },
     };
     ws.connect(options);
-  });
+  }
 
   onBeforeUnmount(() => {
     ws.close();
     userActivityReset();
     upfTotalFlowReset();
     topologyReset();
+    upfWhoId.value = '';
   });
 
   return {
     wsSend,
     userActivitySend,
     upfTFSend,
+    reSendUPF,
   };
 }

src/views/dashboard/overview/index.vue

@@ -26,10 +26,15 @@ import useWS from './hooks/useWS';
 import useAppStore from '@/store/modules/app';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { useRouter } from 'vue-router';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { message } from 'ant-design-vue';
+import { upfWhoId } from './hooks/useWS';
+
+const neInfoStore = useNeInfoStore();
 const router = useRouter();
 const appStore = useAppStore();
 const { t } = useI18n();
-const { wsSend, userActivitySend, upfTFSend } = useWS();
+const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 
 /**概览状态类型 */
 type SkimStateType = {
@@ -60,10 +65,14 @@ let skimState: SkimStateType = reactive({
   enbUeNum: 0,
 });
 
+/**网元参数 */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+
 /**总览节点 */
 const viewportDom = ref<HTMLElement | null>(null);
 const { isFullscreen, toggle } = useFullscreen(viewportDom);
 
+let initFlag = false;
 /**10s调度器 */
 const interval10s = ref<any>(null);
 
@@ -94,62 +103,104 @@ function fnGetNeState() {
 
 /**获取概览信息 */
 async function fnGetSkim() {
-  const resArr = await Promise.allSettled([
-    listUDMSub({
-      neid: '001',
-      pageNum: 1,
-      pageSize: 1,
-    }),
-    listUENumBySMF('001'),
-    listUENumByIMS('001'),
-    listBase5G({
-      neType: 'AMF',
-      neId: '001',
-    }),
-    listBase5G({
-      neType: 'MME',
-      neId: '001',
-    }),
+  const neHandlers = new Map([
+    // [
+    //   'UDM',
+    //   {
+    //     request: (neId: string) =>
+    //       listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
+    //     process: (res: any) =>
+    //       res.code === RESULT_CODE_SUCCESS &&
+    //       (skimState.udmSubNum += res.total),
+    //   },
+    // ],
+    [
+      'SMF',
+      {
+        request: (neId: string) => listUENumBySMF(neId),
+        process: (res: any) =>
+          res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
+      },
+    ],
+    [
+      'IMS',
+      {
+        request: (neId: string) => listUENumByIMS(neId),
+        process: (res: any) =>
+          res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
+      },
+    ],
+    [
+      'AMF',
+      {
+        request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
+        process: (res: any) => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            skimState.gnbNum += res.total;
+            skimState.gnbUeNum += res.rows.reduce(
+              (sum: number, item: any) => sum + item.ueNum,
+              0
+            );
+          }
+        },
+      },
+    ],
+    [
+      'MME',
+      {
+        request: (neId: string) => listBase5G({ neType: 'MME', neId }),
+        process: (res: any) => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            skimState.enbNum += res.total;
+            skimState.enbUeNum += res.rows.reduce(
+              (sum: number, item: any) => sum + item.ueNum,
+              0
+            );
+          }
+        },
+      },
+    ],
   ]);
 
-  if (resArr[0].status === 'fulfilled') {
-    const res0 = resArr[0].value;
-    if (res0.code === RESULT_CODE_SUCCESS) {
-      skimState.udmSubNum = res0.total;
+  const requests = neCascaderOptions.value.flatMap(
+    (ne: any) =>
+      ne.children
+        ?.map((child: any) => {
+          const handler = neHandlers.get(child.neType);
+          return handler
+            ? {
+                promise: handler.request(child.neId),
+                process: handler.process,
+              }
+            : null;
+        })
+        .filter(Boolean) || []
+  );
+
+  const results = await Promise.allSettled(requests.map(r => r.promise));
+
+  // 重置
+  Object.assign(skimState, {
+    udmSubNum: 0,
+    smfUeNum: 0,
+    imsUeNum: 0,
+    gnbNum: 0,
+    gnbUeNum: 0,
+    enbNum: 0,
+    enbUeNum: 0,
+  });
+  results.forEach((result, index) => {
+    if (result.status === 'fulfilled') {
+      requests[index].process(result.value);
     }
-  }
-  if (resArr[1].status === 'fulfilled') {
-    const res1 = resArr[1].value;
-    if (res1.code === RESULT_CODE_SUCCESS) {
-      skimState.smfUeNum = res1.data;
+  });
+
+  // UDM
+  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      skimState.udmSubNum = res.total;
     }
-  }
-  if (resArr[2].status === 'fulfilled') {
-    const res2 = resArr[2].value;
-    if (res2.code === RESULT_CODE_SUCCESS) {
-      skimState.imsUeNum = res2.data;
-    }
-  }
-  if (resArr[3].status === 'fulfilled') {
-    const res3 = resArr[3].value;
-    if (res3.code === RESULT_CODE_SUCCESS) {
-      skimState.gnbNum = res3.total;
-      skimState.gnbUeNum = 0;
-      res3.rows.map((item: any) => {
-        skimState.gnbUeNum += item.ueNum;
-      });
-    }
-  }
-  if (resArr[4].status === 'fulfilled') {
-    const res4 = resArr[4].value;
-    if (res4.code === RESULT_CODE_SUCCESS) {
-      skimState.enbNum = res4.total;
-      skimState.enbUeNum = 0;
-      res4.rows.map((item: any) => {
-        skimState.enbUeNum += item.ueNum;
-      });
-    }
-  }
+  });
 }
 
 /**初始数据函数 */
@@ -162,7 +213,7 @@ function loadData() {
 
   clearInterval(interval10s.value);
   interval10s.value = setInterval(() => {
-    if (!interval10s.value) return
+    if (!interval10s.value) return;
     if (upfTFActive.value === '0') {
       upfTFSend('7');
       upfTFActive.value = '7';
@@ -177,7 +228,7 @@ function loadData() {
 
   clearInterval(interval5s.value);
   interval5s.value = setInterval(() => {
-    if (!interval5s.value) return
+    if (!interval5s.value || !initFlag) return;
     fnGetSkim(); // 获取概览信息
     fnGetNeState(); // 获取网元状态
   }, 5_000);
@@ -188,10 +239,101 @@ function fnToRouter(name: string, query?: any) {
   router.push({ name, query });
 }
 
-onMounted(() => {
-  fnGetSkim().then(() => {
-    loadData();
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+// UPF实时流量下拉框选择
+function fnSelectNe(value: any, option: any) {
+  upfWhoId.value = value;
+  reSendUPF(value);
+  // upfTotalFlow.value.map((item: any) => {
+  //   item.requestFlag = false;
+  // });
+
+  for (var key in upfTotalFlow.value) {
+    upfTotalFlow.value[key].requestFlag = false;
+  }
+  // loadData();
+}
+
+let udmNeId = ref<string>('001');
+let udmOtions = ref<Record<string, any>[]>([]);
+/**用户数量-选择UDM */
+function fnSelectUDM(e: any) {
+  udmNeId.value = e.key;
+  listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      skimState.udmSubNum = res.total;
+    }
   });
+}
+
+// 定义一个方法返回 views 容器
+const getPopupContainer = () => {
+  // 使用 ref 或其他方式来引用你的 views 容器
+  // 如果 views 容器直接在这个组件内部，你可以使用 ref
+  // 但在这个例子中，我们假设它是通过类名来获取的
+  return document.querySelector('.viewport');
+};
+
+onMounted(() => {
+  neInfoStore
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          // UPF
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'UPF') {
+              arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            //queryParams.neRealId = arr[0].value;
+            fnSelectNe(arr[0].value, arr[0]);
+          }
+
+          // UDM
+          let arr1: Record<string, any>[] = [];
+          res.data.forEach((v: any) => {
+            if (v.neType === 'UDM') {
+              arr1.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
+            }
+          });
+          udmOtions.value = arr1;
+          if (arr1.length > 0) {
+            fnSelectUDM({ key: arr1[0].value });
+          }
+
+          // 过滤不可用的网元
+          neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
+            (item: any) => {
+              return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(item.value);
+            }
+          );
+          if (neCascaderOptions.value.length === 0) {
+            message.warning({
+              content: t('common.noData'),
+              duration: 2,
+            });
+            return;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      initFlag = true;
+      fnGetSkim().then(() => {
+        loadData();
+      });
+    });
 });
 
 onBeforeUnmount(() => {
@@ -199,6 +341,7 @@ onBeforeUnmount(() => {
   interval10s.value = null;
   clearInterval(interval5s.value);
   interval5s.value = null;
+  initFlag = false;
 });
 </script>
 
@@ -228,17 +371,28 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('Sub_2010')"
               :title="t('views.dashboard.overview.toRouter')"
             >
-              <div>
+              <div @click="fnToRouter('Sub_2010')">
                 <UserOutlined
                   style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
                 />
                 {{ skimState.udmSubNum }}
               </div>
               <span>
-                {{ t('views.dashboard.overview.skim.users') }}
+                <a-dropdown :trigger="['click']">
+                  <div class="toDeep-text">
+                    {{ t('views.dashboard.overview.skim.users') }}
+                    <DownOutlined style="margin-left: 12px; font-size: 12px" />
+                  </div>
+                  <template #overlay>
+                    <a-menu @click="fnSelectUDM">
+                      <a-menu-item v-for="v in udmOtions" :key="v.value" :disabled="udmNeId === v.value">
+                        {{ v.label }}
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
               </span>
             </div>
             <div
@@ -246,6 +400,7 @@ onBeforeUnmount(() => {
               @click="fnToRouter('Ims_2080')"
               :title="t('views.dashboard.overview.toRouter')"
               style="margin: 0 12px"
+              v-perms:has="['dashboard:overview:imsUeNum']"
             >
               <div>
                 <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
@@ -259,6 +414,7 @@ onBeforeUnmount(() => {
               class="item toRouter"
               @click="fnToRouter('Ue_2081')"
               :title="t('views.dashboard.overview.toRouter')"
+              v-perms:has="['dashboard:overview:smfUeNum']"
             >
               <div>
                 <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
@@ -271,7 +427,7 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
-      <div class="skim panel base">
+      <div class="skim panel base" v-perms:has="['dashboard:overview:gnbBase']">
         <div class="inner">
           <h3>
             <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 5G
@@ -280,7 +436,7 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -294,7 +450,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -308,7 +464,7 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </div>
-      <div class="skim panel base">
+      <div class="skim panel base" v-perms:has="['dashboard:overview:enbBase']">
         <div class="inner">
           <h3>
             <GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp; 4G
@@ -317,7 +473,7 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -331,7 +487,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -365,12 +521,23 @@ onBeforeUnmount(() => {
         <div class="inner">
           <h3
             class="toRouter"
-            @click="fnToRouter('GoldTarget_2104')"
             :title="t('views.dashboard.overview.toRouter')"
+            style="display: flex; align-items: center"
           >
             <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.upfFlow.title') }}
+            <span @click="fnToRouter('GoldTarget_2104')">{{
+              t('views.dashboard.overview.upfFlow.title')
+            }}</span>
+            <a-select
+              v-model:value="upfWhoId"
+              :options="neOtions"
+              :get-Popup-Container="getPopupContainer"
+              class="toDeep"
+              style="width: 100px; color: #fff; margin-left: auto"
+              @change="fnSelectNe"
+            />
           </h3>
+
           <div class="chart">
             <UPFFlow />
           </div>
@@ -488,4 +655,30 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 @import url('./css/index.css');
+.toDeep {
+  --editor-background-color: blue;
+}
+
+.toDeep :deep(.ant-select-selector) {
+  background-color: #101129;
+  border: none;
+}
+
+.toDeep :deep(.ant-select-arrow) {
+  color: #fff;
+}
+
+.toDeep :deep(.ant-select-selection-item) {
+  color: #fff;
+}
+.toDeep-text {
+  color: #4c9bfd !important;
+  font-size: 0.844rem !important;
+  position: relative !important;
+  line-height: 2rem !important;
+  white-space: nowrap !important;
+  text-align: start !important;
+  text-overflow: ellipsis !important;
+  overflow: hidden !important;
+}
 </style>

src/views/dashboard/sgwcCDR/index.vue

@@ -0,0 +1,850 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { Modal, message } 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 useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import {
+  delSGWCDataCDR,
+  exportSGWCDataCDR,
+  listSGWCDataCDR,
+} from '@/api/neData/sgwc';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import PQueue from 'p-queue';
+import saveAs from 'file-saver';
+import { useClipboard } from '@vueuse/core';
+import dayjs, { type Dayjs } from 'dayjs';
+const { copy } = useClipboard({ legacy: true });
+const { t } = useI18n();
+const ws = new WS();
+const queue = new PQueue({ concurrency: 1, autoStart: true });
+
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**开始结束时间 */
+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({
+  /**网元类型 */
+  neType: 'SGWC',
+  neId: '001',
+  imsi: '',
+  msisdn: '',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    imsi: '',
+    msisdn: '',
+    startTime: undefined,
+    endTime: undefined,
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
+  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: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.dashboard.cdr.chargingID'), // 计费ID
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.chargingID;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.sgwcServedIMSI'), // IMSI
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.servedIMSI;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.sgwcServedMSISDN'), // MSISDN
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.servedMSISDN;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.sgwcVolumeGPRSUplink'), // GPRS 上行链路
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      const listOfTrafficVolumes = cdrJSON.listOfTrafficVolumes;
+      if (
+        !Array.isArray(listOfTrafficVolumes) ||
+        listOfTrafficVolumes.length < 1
+      ) {
+        return 0;
+      }
+      let dataVolumeGPRSUplink = 0;
+      for (const used of listOfTrafficVolumes) {
+        const v = +used.dataVolumeGPRSUplink;
+        dataVolumeGPRSUplink += isNaN(v) ? 0 : v;
+      }
+      return dataVolumeGPRSUplink;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.sgwcVolumeGPRSDownlink'), // GPRS 下行链路
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 180,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      const listOfTrafficVolumes = cdrJSON.listOfTrafficVolumes;
+      if (
+        !Array.isArray(listOfTrafficVolumes) ||
+        listOfTrafficVolumes.length < 1
+      ) {
+        return 0;
+      }
+      let dataVolumeGPRSDownlink = 0;
+      for (const used of listOfTrafficVolumes) {
+        const v = +used.dataVolumeGPRSDownlink;
+        dataVolumeGPRSDownlink += isNaN(v) ? 0 : v;
+      }
+      return dataVolumeGPRSDownlink;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.durationTime'), // 持续时间
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 100,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.duration;
+    },
+  },
+  {
+    title: t('views.dashboard.cdr.invocationTime'), // 操作时间
+    dataIndex: 'cdrJSON',
+    align: 'left',
+    width: 200,
+    customRender(opt) {
+      const cdrJSON = opt.value;
+      return cdrJSON.recordOpeningTime;
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+];
+
+/**表格分页器参数 */
+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 fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**最大ID值 */
+  maxId: number;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  confirmLoading: false,
+  maxId: 0,
+});
+
+/**
+ * 记录删除
+ * @param id  编号
+ */
+function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = id;
+  if (id === '0') {
+    msg = `${id}...  ${tableState.selectedRowKeys.length}`;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.delTip', { msg }),
+    onOk() {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delSGWCDataCDR(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**
+ * 复制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;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  // 时间范围
+  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;
+  }
+  listSGWCDataCDR(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;
+      // 遍历处理cdr字符串数据
+      tableState.data = res.rows.map(item => {
+        let cdrJSON = item.cdrJSON;
+        if (!cdrJSON) {
+          Reflect.set(item, 'cdrJSON', {});
+        }
+
+        try {
+          cdrJSON = JSON.parse(cdrJSON);
+          Reflect.set(item, 'cdrJSON', cdrJSON);
+        } catch (error) {
+          console.error(error);
+          Reflect.set(item, 'cdrJSON', {});
+        }
+
+        return item;
+      });
+
+      // 取最大值ID用作实时累加
+      if (res.total > 0) {
+        modalState.maxId = Number(res.rows[0].id);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**列表导出 */
+function fnExportList() {
+  if (modalState.confirmLoading) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.cdr.exportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const querys = toRaw(queryParams);
+      querys.pageSize = 10000;
+      exportSGWCDataCDR(querys)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            saveAs(res.data, `sgwc_cdr_event_export_${Date.now()}.xlsx`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**实时数据开关 */
+const realTimeData = ref<boolean>(false);
+
+/**
+ * 实时数据
+ */
+function fnRealTime() {
+  realTimeData.value = !realTimeData.value;
+  if (realTimeData.value) {
+    tableState.seached = false;
+    // 建立链接
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * CDR会话事件-SGWC (GroupID:1008)
+         */
+        subGroupID: `1008_${queryParams.neId}`,
+      },
+      onmessage: wsMessage,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
+    };
+    ws.connect(options);
+  } else {
+    ws.close();
+    tableState.seached = true;
+    fnGetList(1);
+  }
+}
+
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+  // cdrEvent CDR会话事件
+  if (data.groupId === `1008_${queryParams.neId}`) {
+    const cdrEvent = data.data;
+    queue.add(async () => {
+      modalState.maxId += 1;
+      tableState.data.unshift({
+        id: modalState.maxId,
+        neType: cdrEvent.neType,
+        neName: cdrEvent.neName,
+        rmUID: cdrEvent.rmUID,
+        timestamp: cdrEvent.timestamp,
+        cdrJSON: cdrEvent.CDR,
+      });
+      tablePagination.total += 1;
+      if (tableState.data.length > 100) {
+        tableState.data.pop();
+      }
+      await new Promise(resolve => setTimeout(resolve, 800));
+    });
+  }
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  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 === 'SGWC') {
+              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();
+    });
+});
+
+onBeforeUnmount(() => {
+  if (ws.state() !== -1) {
+    ws.close();
+  }
+});
+</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="SGWC" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.sgwcServedIMSI')"
+              name="imsi"
+            >
+              <a-input
+                v-model:value="queryParams.imsi"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="40"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.dashboard.cdr.sgwcServedMSISDN')"
+              name="msisdn"
+            >
+              <a-input
+                v-model:value="queryParams.msisdn"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="40"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :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')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                :presets="rangePickerPresets"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-popconfirm
+            placement="bottomLeft"
+            :title="
+              !realTimeData
+                ? t('views.dashboard.cdr.realTimeDataStart')
+                : t('views.dashboard.cdr.realTimeDataStop')
+            "
+            ok-text="Yes"
+            cancel-text="No"
+            @confirm="fnRealTime()"
+          >
+            <a-button type="primary" :danger="realTimeData">
+              <template #icon><FundOutlined /> </template>
+              {{
+                !realTimeData
+                  ? t('views.dashboard.cdr.realTimeDataStart')
+                  : t('views.dashboard.cdr.realTimeDataStop')
+              }}
+            </a-button>
+          </a-popconfirm>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['cdr:ne:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+
+          <a-button type="dashed" @click.prevent="fnExportList()">
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </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"
+              :disabled="realTimeData"
+            />
+          </a-tooltip>
+          <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: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === '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 />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+        <template #expandedRowRender="{ record }">
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="24" :offset="2">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.cdr.cdrInfo') }}
+              </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>
+              <div>
+                <span>{{ t('views.dashboard.cdr.time') }}: </span>
+                <span>{{ record.cdrJSON.recordOpeningTime }}</span>
+              </div>
+              <a-divider orientation="left">
+                {{ t('views.dashboard.cdr.rowInfo') }}
+              </a-divider>
+              <div>
+                <span>Record Type: </span>
+                <span>{{ record.cdrJSON.recordType }}</span>
+              </div>
+              <div>
+                <span>Record Opening Time: </span>
+                <span>{{ record.cdrJSON.recordOpeningTime }}</span>
+              </div>
+              <div>
+                <span>Charging ID: </span>
+                <span>{{ record.cdrJSON.chargingID }}</span>
+              </div>
+              <div>
+                <span>Duration: </span>
+                <span>{{ record.cdrJSON.duration }}</span>
+              </div>
+              <div>
+                <span>Record Access Point Name NI: </span>
+                <span>{{ record.cdrJSON.accessPointNameNI }}</span>
+              </div>
+              <div>
+                <span>Record Cause For Rec Closing: </span>
+                <span>{{ record.cdrJSON.causeForRecClosing }}</span>
+              </div>
+              <div>
+                <span>Record Sequence Number: </span>
+                <span>{{ record.cdrJSON.recordSequenceNumber }}</span>
+              </div>
+              <div>
+                <span>Local Record Sequence Number: </span>
+                <span>{{ record.cdrJSON.localRecordSequenceNumber }}</span>
+              </div>
+            </a-col>
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-divider orientation="left"> Server Information </a-divider>
+              <div>
+                <span>IMSI: </span>
+                <span> {{ record.cdrJSON.servedIMSI }} </span>
+              </div>
+              <div>
+                <span>MSISDN: </span>
+                <span> {{ record.cdrJSON.servedMSISDN }} </span>
+              </div>
+              <div v-if="record.cdrJSON.pGWAddressUsed">
+                <span>PGW Address: </span>
+                <span> {{ record.cdrJSON.pGWAddressUsed }} </span>
+              </div>
+              <div v-if="record.cdrJSON.GGSNAddress">
+                <span>GGSN Address: </span>
+                <span> {{ record.cdrJSON.GGSNAddress }} </span>
+              </div>
+              <div v-if="record.cdrJSON.sGWAddress">
+                <span>SGW Address: </span>
+                <span> {{ record.cdrJSON.sGWAddress }} </span>
+              </div>
+              <div v-if="record.cdrJSON.SGSNAddress">
+                <span>SGSN Address: </span>
+                <span> {{ record.cdrJSON.SGSNAddress }} </span>
+              </div>
+              <div>
+                <span>RAT Type: </span>
+                <span> {{ record.cdrJSON.rATType }} </span>
+              </div>
+              <a-divider orientation="left"> PDPPD Information </a-divider>
+              <div>
+                <span>PDPPDN Type: </span>
+                <span> {{ record.cdrJSON.pdpPDNType }} </span>
+              </div>
+              <div>
+                <span>PDPPDN Address: </span>
+                <span> {{ record.cdrJSON.servedPDPPDNAddress }} </span>
+              </div>
+              <div>
+                <span>Node Address: </span>
+                <span>
+                  {{ record.cdrJSON.servingNodeAddress?.join(', ') }}
+                </span>
+              </div>
+              <div>
+                <span>Node Type: </span>
+                <span>
+                  <template v-for="item in record.cdrJSON.servingNodeType">
+                    {{ item.servingNodeType }}
+                  </template>
+                </span>
+              </div>
+            </a-col>
+          </a-row>
+        </template>
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

src/views/dashboard/smfCDR/index.vue

@@ -19,6 +19,10 @@ import {
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import PQueue from 'p-queue';
 import saveAs from 'file-saver';
+import dayjs, { Dayjs } from 'dayjs';
+import { useClipboard } from '@vueuse/core';
+import { parseSizeFromByte } from '@/utils/parse-utils';
+const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const ws = new WS();
 const queue = new PQueue({ concurrency: 1, autoStart: true });
@@ -27,7 +31,25 @@ const queue = new PQueue({ concurrency: 1, autoStart: true });
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -38,9 +60,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -51,12 +73,10 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     subscriberID: '',
-    startTime: '',
-    endTime: '',
     pageNum: 1,
     pageSize: 20,
   });
-  queryRangePicker.value = ['', ''];
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -86,7 +106,7 @@ let tableState: TabeStateType = reactive({
 });
 
 /**表格字段列 */
-let tableColumns: ColumnsType = [
+let tableColumns = ref<ColumnsType>([
   {
     title: t('common.rowId'),
     dataIndex: 'id',
@@ -94,7 +114,7 @@ let tableColumns: ColumnsType = [
     width: 100,
   },
   {
-    title: t('views.dashboard.cdr.smfChargingID'), // 计费ID
+    title: t('views.dashboard.cdr.chargingID'), // 计费ID
     dataIndex: 'cdrJSON',
     align: 'left',
     width: 100,
@@ -137,11 +157,15 @@ let tableColumns: ColumnsType = [
       ) {
         return 0;
       }
-      const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
-      if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
-        return 0;
+      let dataVolumeUplink = 0;
+      for (const v of listOfMultipleUnitUsage) {
+        if (Array.isArray(v.usedUnitContainer)) {
+          for (const used of v.usedUnitContainer) {
+            dataVolumeUplink += +used.dataVolumeUplink;
+          }
+        }
       }
-      return usedUnitContainer[0].dataVolumeUplink;
+      return parseSizeFromByte(dataVolumeUplink, 'MB');
     },
   },
   {
@@ -158,11 +182,15 @@ let tableColumns: ColumnsType = [
       ) {
         return 0;
       }
-      const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
-      if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
-        return 0;
+      let dataVolumeDownlink = 0;
+      for (const v of listOfMultipleUnitUsage) {
+        if (Array.isArray(v.usedUnitContainer)) {
+          for (const used of v.usedUnitContainer) {
+            dataVolumeDownlink += +used.dataVolumeDownlink;
+          }
+        }
       }
-      return usedUnitContainer[0].dataVolumeDownlink;
+      return parseSizeFromByte(dataVolumeDownlink, 'MB');
     },
   },
   {
@@ -179,15 +207,19 @@ let tableColumns: ColumnsType = [
       ) {
         return 0;
       }
-      const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
-      if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
-        return 0;
+      let dataTotalVolume = 0;
+      for (const v of listOfMultipleUnitUsage) {
+        if (Array.isArray(v.usedUnitContainer)) {
+          for (const used of v.usedUnitContainer) {
+            dataTotalVolume += +used.dataTotalVolume;
+          }
+        }
       }
-      return usedUnitContainer[0].dataTotalVolume;
+      return parseSizeFromByte(dataTotalVolume, 'MB');
     },
   },
   {
-    title: t('views.dashboard.cdr.smfDuration'), // 持续时间
+    title: t('views.dashboard.cdr.durationTime'), // 持续时间
     dataIndex: 'cdrJSON',
     align: 'left',
     width: 100,
@@ -197,7 +229,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: t('views.dashboard.cdr.smfInvocationTime'), // 调用时间
+    title: t('views.dashboard.cdr.invocationTime'), // 调用时间
     dataIndex: 'cdrJSON',
     align: 'left',
     width: 200,
@@ -211,7 +243,7 @@ let tableColumns: ColumnsType = [
     key: 'id',
     align: 'left',
   },
-];
+]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -306,6 +338,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;
@@ -313,11 +357,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];
+
   listSMFDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -406,7 +458,9 @@ function fnRealTime() {
         subGroupID: `1006_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
@@ -416,12 +470,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -510,6 +558,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
               />
             </a-form-item>
           </a-col>
@@ -533,12 +582,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>
@@ -591,6 +640,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') }}
@@ -669,11 +719,23 @@ onBeforeUnmount(() => {
         <template #bodyCell="{ column, record }">
           <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,24 +804,33 @@ onBeforeUnmount(() => {
               <a-divider orientation="left">
                 List Of Multiple Unit Usage
               </a-divider>
+
               <div v-for="u in record.cdrJSON.listOfMultipleUnitUsage">
-                <div>RatingGroup: {{ u.ratingGroup }}</div>
-                <div v-for="udata in u.usedUnitContainer">
+                <!-- <div>RatingGroup: {{ u.ratingGroup }}</div> -->
+                <div
+                  v-for="(udata, i) in u.usedUnitContainer"
+                  style="display: flex"
+                >
+                  <!-- <strong style="margin-right: 12px">
+                    {{ i }}
+                  </strong> -->
                   <div>
-                    <span>Data Total Volume: </span>
-                    <span>{{ udata.dataTotalVolume }}</span>
-                  </div>
-                  <div>
-                    <span>Data Volume Downlink: </span>
-                    <span>{{ udata.dataVolumeDownlink }}</span>
-                  </div>
-                  <div>
-                    <span>Data Volume Uplink: </span>
-                    <span>{{ udata.dataVolumeUplink }}</span>
-                  </div>
-                  <div>
-                    <span>Time: </span>
-                    <span>{{ udata.time }}</span>
+                    <div>
+                      <span>Data Total Volume: </span>
+                      <span>{{ udata.dataTotalVolume }}</span>
+                    </div>
+                    <div>
+                      <span>Data Volume Downlink: </span>
+                      <span>{{ udata.dataVolumeDownlink }}</span>
+                    </div>
+                    <div>
+                      <span>Data Volume Uplink: </span>
+                      <span>{{ udata.dataVolumeUplink }}</span>
+                    </div>
+                    <!-- <div>
+                      <span>Time: </span>
+                      <span>{{ udata.time }}</span>
+                    </div> -->
                   </div>
                 </div>
               </div>

src/views/dashboard/smfCDRByIMSI/index.vue

@@ -0,0 +1,699 @@
+<script setup lang="ts">
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+} from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+]);
+
+import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { OptionsType, WS } from '@/plugins/ws-websocket';
+import useI18n from '@/hooks/useI18n';
+import { listSMFDataCDR } from '@/api/neData/smf';
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+} from '@/constants/result-constants';
+import { parseSizeFromByte } from '@/utils/parse-utils';
+import { message } from 'ant-design-vue';
+import useNeInfoStore from '@/store/modules/neinfo';
+import dayjs, { Dayjs } from 'dayjs';
+const { t, currentLocale } = useI18n();
+const ws = new WS();
+
+/**图DOM节点实例对象 */
+const cdrChartDom = ref<HTMLElement | undefined>(undefined);
+/**图实例对象 */
+let cdrChart: echarts.ECharts | null = null;
+/**图表配置 */
+const option = {
+  title: {
+    text: 'Data Usage Report',
+    left: 'left',
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      animation: true,
+    },
+    formatter: (params: any) => {
+      const title = params[0].name;
+      let uplinkValue = 0;
+      let downlinkValue = 0;
+      if (params[0].seriesName === 'Uplink') {
+        uplinkValue = params[0].value;
+      } else {
+        downlinkValue = params[0].value;
+      }
+      if (params[1].seriesName === 'Uplink') {
+        uplinkValue = params[1].value;
+      } else {
+        downlinkValue = params[1].value;
+      }
+      const uplinkValueF = parseSizeFromByte(uplinkValue, 'MB');
+      const downlinkValueF = parseSizeFromByte(downlinkValue, 'MB');
+      return `
+      <div style="font-weight: bold;">${title}</div>
+      <div>Downlink: ${downlinkValueF}</div>
+      <div>Uplink: ${uplinkValueF}</div>
+      `;
+    },
+  },
+  toolbox: {
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none',
+      },
+      saveAsImage: {},
+    },
+  },
+  axisPointer: {
+    link: [
+      {
+        xAxisIndex: 'all',
+      },
+    ],
+  },
+  dataZoom: [
+    {
+      show: false,
+      realtime: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0, 1],
+    },
+    {
+      type: 'inside',
+      realtime: true,
+      start: 0,
+      end: 100,
+      xAxisIndex: [0, 1],
+    },
+  ],
+  grid: [
+    {
+      left: '10%',
+      right: 50,
+      height: '40%',
+    },
+    {
+      left: '10%',
+      right: 50,
+      top: '50%',
+      height: '40%',
+    },
+  ],
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { onZero: true },
+      data: [], // x轴初始数据
+      axisLabel: {
+        show: false, // 显示标签
+        rotate: 15, // 设置倾斜角度（如15度）
+      },
+    },
+    {
+      gridIndex: 1,
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { onZero: true },
+      data: [], // x轴初始数据
+      axisLabel: {
+        show: false, // 隐藏第二个 x 轴的标签
+      },
+      position: 'top',
+    },
+  ],
+  yAxis: [
+    {
+      name: 'Downlink (Byte)',
+      type: 'value',
+    },
+    {
+      gridIndex: 1,
+      name: 'Uplink (Byte)',
+      type: 'value',
+      inverse: true,
+    },
+  ],
+  series: [
+    {
+      name: 'Downlink',
+      type: 'line',
+      data: [], // y轴初始数据
+      symbol: 'circle', // 数据点形状
+      symbolSize: 6, // 数据点大小
+      smooth: true, // 平滑曲线
+      color: 'rgb(0, 190, 99)',
+      areaStyle: {
+        color: {
+          colorStops: [
+            { offset: 0, color: 'rgba(0, 190, 99, .5)' },
+            { offset: 1, color: 'rgba(0, 190, 99, 0.5)' },
+          ],
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          type: 'linear',
+          global: false,
+        },
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+    },
+    {
+      name: 'Uplink',
+      type: 'line',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      data: [], // y轴初始数据
+      symbol: 'circle', // 数据点形状
+      symbolSize: 6, // 数据点大小
+      smooth: true, // 平滑曲线
+      color: 'rgb(17, 178, 255)',
+      areaStyle: {
+        color: {
+          colorStops: [
+            { offset: 0, color: 'rgba(17, 178, 255, .5)' },
+            { offset: 1, color: 'rgba(17, 178, 255, 0.5)' },
+          ],
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          type: 'linear',
+          global: false,
+        },
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+    },
+  ],
+};
+/**绘制图表 */
+function fnRanderChart() {
+  const container: HTMLElement | undefined = cdrChartDom.value;
+  if (!container) return;
+  const locale = currentLocale.value.split('_')[0];
+  cdrChart = echarts.init(container, 'light', {
+    // https://github.com/apache/echarts/tree/release/src/i18n 取值langEN.ts ==> EN
+    locale: locale.toUpperCase(),
+  });
+  cdrChart.setOption(option);
+  // cdrChart.showLoading('default', {
+  //   text: 'Please enter IMSI to query user traffic',
+  //   fontSize: 16, // 字体大小
+  // });
+
+  // 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
+  var observer = new ResizeObserver(entries => {
+    if (cdrChart && !cdrChart.isDisposed) {
+      cdrChart.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+}
+
+/**网元可选 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**开始结束时间 */
+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({
+  /**网元类型 */
+  neType: 'SMF',
+  neId: '001',
+  subscriberID: '',
+  dnn: '',
+  sortField: 'timestamp',
+  sortOrder: 'desc',
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 1000,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams.subscriberID = '';
+  queryParams.dnn = '';
+  queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
+  fnGetList(1);
+}
+
+let state = reactive({
+  /**表格数据 */
+  data: [] as any[],
+  /**表格总数 */
+  total: 0,
+  /**表格加载状态 */
+  loading: false,
+  /**数据总量 up,down */
+  dataUsage: ['0 B', '0 B'],
+});
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (state.loading) return;
+  state.loading = true;
+  if (!queryParams.subscriberID) {
+    message.warning('Please enter IMSI to query user traffic');
+    state.loading = false;
+    return;
+  }
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  if (cdrChart) {
+    cdrChart.showLoading('default', {
+      text: 'Loading...',
+      fontSize: 16, // 字体大小
+    });
+  }
+
+  // 时间范围
+  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;
+  }
+
+  listSMFDataCDR(toRaw(queryParams))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+        state.total = res.total;
+        // 遍历处理cdr字符串数据
+        state.data = res.rows
+          .map(item => {
+            let cdrJSON = item.cdrJSON;
+            if (!cdrJSON) {
+              Reflect.set(item, 'cdrJSON', {});
+            }
+
+            try {
+              cdrJSON = JSON.parse(cdrJSON);
+              Reflect.set(item, 'cdrJSON', cdrJSON);
+            } catch (error) {
+              console.error(error);
+              Reflect.set(item, 'cdrJSON', {});
+            }
+
+            return item;
+          })
+          .reverse();
+      }
+    })
+    .finally(() => {
+      state.loading = false;
+      fnRanderChartDataLoad();
+    });
+}
+
+/**图表配置数据x轴 */
+let dataTimeXAxisData: string[] = [];
+/**图表配置数据y轴 */
+let dataVolumeUplinkYSeriesData: number[] = [];
+let dataVolumeDownlinkYSeriesData: number[] = [];
+/**图表数据渲染 */
+function fnRanderChartDataLoad() {
+  if (!cdrChart) return;
+  dataTimeXAxisData = [];
+  dataVolumeUplinkYSeriesData = [];
+  dataVolumeDownlinkYSeriesData = [];
+  if (state.data.length > 0) {
+    // 处理数据渲染图表
+    for (const item of state.data) {
+      if (!item.cdrJSON.invocationTimestamp) {
+        break;
+      }
+      // 时间
+      const dataTime = item.cdrJSON.invocationTimestamp;
+      const listOfMultipleUnitUsage = item.cdrJSON.listOfMultipleUnitUsage;
+      if (
+        !Array.isArray(listOfMultipleUnitUsage) ||
+        listOfMultipleUnitUsage.length < 1
+      ) {
+        return 0;
+      }
+      // 数据
+      let dataVolumeUplink = 0;
+      let dataVolumeDownlink = 0;
+      for (const v of listOfMultipleUnitUsage) {
+        if (Array.isArray(v.usedUnitContainer)) {
+          for (const used of v.usedUnitContainer) {
+            dataVolumeUplink += +used.dataVolumeUplink;
+            dataVolumeDownlink += +used.dataVolumeDownlink;
+          }
+        }
+      }
+
+      dataTimeXAxisData.push(dataTime);
+      dataVolumeUplinkYSeriesData.push(dataVolumeUplink);
+      dataVolumeDownlinkYSeriesData.push(dataVolumeDownlink);
+    }
+    // 绘制图数据
+    fnRanderChartDataUpdate();
+  } else {
+    message.warning('No Data');
+    cdrChart.hideLoading();
+    cdrChart.setOption({
+      title: {
+        text: `Data Volume Uplink	/ Downlink By IMSI ${queryParams.subscriberID}`,
+      },
+      xAxis: [
+        {
+          data: dataTimeXAxisData,
+        },
+        {
+          data: dataTimeXAxisData,
+        },
+      ],
+      series: [
+        {
+          data: dataVolumeUplinkYSeriesData,
+        },
+        {
+          data: dataVolumeDownlinkYSeriesData,
+        },
+      ],
+    });
+  }
+}
+/**图表数据渲染 */
+function fnRanderChartDataUpdate() {
+  if (cdrChart == null) return;
+  // 绘制图数据
+  cdrChart.setOption({
+    title: {
+      text: `Data Usage Report of IMSI ${queryParams.subscriberID}`,
+    },
+    xAxis: [
+      {
+        data: dataTimeXAxisData,
+      },
+      {
+        data: dataTimeXAxisData,
+      },
+    ],
+    series: [
+      {
+        data: dataVolumeUplinkYSeriesData,
+      },
+      {
+        data: dataVolumeDownlinkYSeriesData,
+      },
+    ],
+  });
+  cdrChart.hideLoading();
+
+  // 累加总量
+  let uplinkTotal = 0;
+  let downlinkTotal = 0;
+  for (let index = 0; index < dataVolumeUplinkYSeriesData.length; index++) {
+    uplinkTotal += dataVolumeUplinkYSeriesData[index];
+    downlinkTotal += dataVolumeDownlinkYSeriesData[index];
+  }
+  state.dataUsage = [
+    parseSizeFromByte(uplinkTotal, 'MB'),
+    parseSizeFromByte(downlinkTotal, 'MB'),
+  ];
+}
+
+/**
+ * 实时数据
+ */
+function fnRealTime() {
+  if (ws.state() === WebSocket.OPEN) {
+    ws.close();
+  }
+  // 建立链接
+  const options: OptionsType = {
+    url: '/ws',
+    params: {
+      /**订阅通道组
+       *
+       * CDR会话事件-SMF (GroupID:1006)
+       */
+      subGroupID: `1006_${queryParams.neId}`,
+    },
+    onmessage: (res: Record<string, any>) => {
+      const { code, requestId, data } = res;
+      if (code === RESULT_CODE_ERROR) {
+        console.warn(res.msg);
+        return;
+      }
+
+      // 订阅组信息
+      if (!data?.groupId) {
+        return;
+      }
+      // cdrEvent CDR会话事件
+      if (data.groupId === `1006_${queryParams.neId}`) {
+        const cdrEvent = data.data;
+        // 对应结束时间内
+        if (queryParams.endTime) {
+          const endTime = Math.round(queryParams.endTime / 1000);
+          if (cdrEvent.timestamp > endTime) {
+            return;
+          }
+        }
+        const cdrJSON = cdrEvent.CDR;
+        if (!cdrJSON.invocationTimestamp) {
+          return;
+        }
+        // 对应IMSI
+        if (
+          cdrJSON.subscriberIdentifier.subscriptionIDData !==
+          queryParams.subscriberID
+        ) {
+          return;
+        }
+
+        // 时间
+        const dataTime = cdrJSON.invocationTimestamp;
+        const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
+        if (
+          !Array.isArray(listOfMultipleUnitUsage) ||
+          listOfMultipleUnitUsage.length < 1
+        ) {
+          return 0;
+        }
+        // 数据
+        let dataVolumeUplink = 0;
+        let dataVolumeDownlink = 0;
+        for (const v of listOfMultipleUnitUsage) {
+          if (Array.isArray(v.usedUnitContainer)) {
+            for (const used of v.usedUnitContainer) {
+              dataVolumeUplink += +used.dataVolumeUplink;
+              dataVolumeDownlink += +used.dataVolumeDownlink;
+            }
+          }
+        }
+        // 添加数据
+        dataTimeXAxisData.push(dataTime);
+        dataVolumeUplinkYSeriesData.push(dataVolumeUplink);
+        dataVolumeDownlinkYSeriesData.push(dataVolumeDownlink);
+        fnRanderChartDataUpdate();
+      }
+    },
+    onerror: (ev: any) => {
+      console.error(ev);
+    },
+  };
+  ws.connect(options);
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  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((v: any) => {
+            if (v.neType === 'SMF') {
+              arr.push({ value: v.neId, label: v.neName });
+            }
+          });
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            queryParams.neId = arr[0].value;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      fnRanderChart();
+      fnRealTime();
+    });
+});
+
+onBeforeUnmount(() => {
+  ws.close();
+  if (cdrChart) {
+    cdrChart.clear();
+    cdrChart.dispose();
+  }
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      :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="SMF" name="neId ">
+              <a-select
+                v-model:value="queryParams.neId"
+                :options="neOtions"
+                :placeholder="t('common.selectPlease')"
+                @change="fnRealTime()"
+                :disabled="state.loading"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="IMSI" name="subscriberID" :required="true">
+              <a-input
+                v-model:value="queryParams.subscriberID"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="40"
+                :disabled="state.loading"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item label="DNN" name="dnn">
+              <a-input
+                v-model:value="queryParams.dnn"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="40"
+                :disabled="state.loading"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button
+                  type="primary"
+                  @click.prevent="fnGetList(1)"
+                  :loading="state.loading"
+                >
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button
+                  type="default"
+                  @click.prevent="fnQueryReset"
+                  :disabled="state.loading"
+                >
+                  <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')"
+              name="queryRangePicker"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                :presets="rangePickerPresets"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                :disabled="state.loading"
+              ></a-range-picker>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false">
+      <!-- 图数据 -->
+      <div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
+
+      <a-descriptions title="Data Usage" bordered :column="2">
+        <a-descriptions-item label="Total Uplink">
+          {{ state.dataUsage[0] }}
+        </a-descriptions-item>
+        <a-descriptions-item label="Total Downlink">
+          {{ state.dataUsage[1] }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>

src/views/dashboard/smscCDR/index.vue

@@ -21,6 +21,10 @@ 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';
+import { hasPermissions } from '@/plugins/auth-user';
+import dayjs, { type Dayjs } from 'dayjs';
+const { copy } = useClipboard({ legacy: true });
 const { getDict } = useDictStore();
 const { t } = useI18n();
 const ws = new WS();
@@ -38,7 +42,25 @@ let dict: {
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
+  dayjs().startOf('hour'),
+  dayjs().endOf('hour'),
+]);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
@@ -51,9 +73,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -67,12 +89,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();
@@ -144,7 +166,7 @@ let tableColumns: ColumnsType = [
     dataIndex: 'cdrJSON',
     key: 'callerParty',
     align: 'left',
-    width: 120,
+    width: 150,
     customRender(opt) {
       const cdrJSON = opt.value;
       return cdrJSON.callerParty;
@@ -155,7 +177,7 @@ let tableColumns: ColumnsType = [
     dataIndex: 'cdrJSON',
     key: 'calledParty',
     align: 'left',
-    width: 120,
+    width: 150,
     customRender(opt) {
       const cdrJSON = opt.value;
       return cdrJSON.calledParty;
@@ -173,7 +195,7 @@ let tableColumns: ColumnsType = [
     title: t('views.dashboard.cdr.time'),
     dataIndex: 'cdrJSON',
     align: 'left',
-    width: 150,
+    width: 200,
     customRender(opt) {
       const cdrJSON = opt.value;
       if (typeof cdrJSON.updateTime === 'number') {
@@ -282,6 +304,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;
@@ -289,11 +323,19 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.startTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.startTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.startTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
+
   listSMSCDataCDR(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       // 取消勾选
@@ -382,7 +424,9 @@ function fnRealTime() {
         subGroupID: `1007_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
@@ -392,12 +436,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -492,6 +530,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
               />
             </a-form-item>
           </a-col>
@@ -554,12 +593,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>
@@ -598,6 +637,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') }}
@@ -665,7 +705,7 @@ onBeforeUnmount(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
+        :scroll="{ x: tableColumns.length * 180, y: 'calc(100vh - 480px)' }"
         :row-selection="{
           type: 'checkbox',
           columnWidth: '48px',
@@ -689,11 +729,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 />
@@ -704,58 +756,79 @@ onBeforeUnmount(() => {
           </template>
         </template>
         <template #expandedRowRender="{ record }">
-          <div style="width: 46%; padding-left: 32px; padding-bottom: 16px">
-            <a-divider orientation="left">
-              {{ t('views.dashboard.cdr.cdrInfo') }}
-            </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>
-            <div>
-              <span>{{ t('views.dashboard.cdr.time') }}: </span>
-              <span>
-                {{
-                  typeof record.cdrJSON.updateTime === 'number'
-                    ? parseDateToStr(+record.cdrJSON.updateTime * 1000)
-                    : record.cdrJSON.updateTime
-                }}
-              </span>
-            </div>
-            <a-divider orientation="left">
-              {{ t('views.dashboard.cdr.rowInfo') }}
-            </a-divider>
-            <div>
-              <span>{{ t('views.dashboard.cdr.type') }}: </span>
-              <span>{{ record.cdrJSON.serviceType }}</span>
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.cdr.caller') }}: </span>
-              <span>{{ record.cdrJSON.callerParty }}</span>
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.cdr.called') }}: </span>
-              <span>{{ record.cdrJSON.calledParty }}</span>
-            </div>
-            <div>
-              <span>{{ t('views.dashboard.cdr.result') }}: </span>
-              <span v-if="record.cdrJSON.result === 0">
-                {{ t('views.dashboard.cdr.resultFail') }},
-                <DictTag
-                  :options="dict.cdrCauseCode"
-                  :value="record.cdrJSON.cause"
-                  value-default="0"
-                />
-              </span>
-              <span v-else>
-                {{ t('views.dashboard.cdr.resultOk') }}
-              </span>
-            </div>
-          </div>
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="22" :offset="2">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.cdr.cdrInfo') }}
+              </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>
+              <div>
+                <span>{{ t('views.dashboard.cdr.time') }}: </span>
+                <span>
+                  {{
+                    typeof record.cdrJSON.updateTime === 'number'
+                      ? parseDateToStr(+record.cdrJSON.updateTime * 1000)
+                      : record.cdrJSON.updateTime
+                  }}
+                </span>
+              </div>
+            </a-col>
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-divider orientation="left">
+                {{ t('views.dashboard.cdr.rowInfo') }}
+              </a-divider>
+              <div>
+                <span>{{ t('views.dashboard.cdr.type') }}: </span>
+                <span>{{ record.cdrJSON.serviceType }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.caller') }}: </span>
+                <span>{{ record.cdrJSON.callerParty }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.called') }}: </span>
+                <span>{{ record.cdrJSON.calledParty }}</span>
+              </div>
+              <div>
+                <span>{{ t('views.dashboard.cdr.result') }}: </span>
+                <span v-if="record.cdrJSON.result === 0">
+                  {{ t('views.dashboard.cdr.resultFail') }},
+                  <DictTag
+                    :options="dict.cdrCauseCode"
+                    :value="record.cdrJSON.cause"
+                    value-default="0"
+                  />
+                </span>
+                <span v-else>
+                  {{ t('views.dashboard.cdr.resultOk') }}
+                </span>
+              </div>
+            </a-col>
+            <a-col
+              :lg="16"
+              :md="16"
+              :xs="22"
+              :offset="2"
+              v-if="
+                record.cdrJSON?.smsContent &&
+                hasPermissions(['cdr:smsc:content'])
+              "
+            >
+              <a-divider orientation="left"> Content </a-divider>
+              <a-typography-paragraph
+                copyable
+                :content="record.cdrJSON.smsContent"
+              >
+              </a-typography-paragraph>
+            </a-col>
+          </a-row>
         </template>
       </a-table>
     </a-card>

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

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

src/views/faultManage/event/index.vue

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

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

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

src/views/index.vue

@@ -43,7 +43,6 @@ onMounted(() => {
   getConfigKey('sys.homePage').then(res => {
     spinning.value = false;
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
-      console.log(spinning);
       if (res.data) {
         const asyncComponent = findView(`${res.data}`);
         currentComponent.value = defineAsyncComponent(asyncComponent);

src/views/logManage/exportFile/index.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { ColumnsType } from 'ant-design-vue/es/table';
-import { Modal, message } from 'ant-design-vue/es';
+import { Form, Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import {
   getBakFile,
   getBakFileList,
   downFile,
   delFile,
+  updateFTPInfo,
+  getFTPInfo,
+  putFTPInfo,
 } from '@/api/logManage/exportFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 import saveAs from 'file-saver';
+import { regExpIPv4 } from '@/utils/regular-utils';
 const { t } = useI18n();
 
 /**网元参数 */
@@ -269,6 +274,131 @@ onMounted(() => {
   //   fnGetList();
   // });
 });
+
+/**对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**FTP日志对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: '设置远程备份配置',
+  from: {
+    username: '',
+    password: '',
+    toIp: '',
+    toPort: 22,
+    enable: false,
+    dir: '',
+  },
+  confirmLoading: false,
+});
+
+/**FTP日志对象信息内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    toIp: [
+      {
+        required: true,
+        pattern: regExpIPv4,
+        message: 'Please enter the service login IP',
+      },
+    ],
+    username: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: 'Please enter the service login user name',
+      },
+    ],
+    dir: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: 'Please enter the service address target file directory',
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param configId 参数编号id, 不传为新增
+ */
+function fnModalVisibleByEdit() {
+  if (modalState.confirmLoading) return;
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  getFTPInfo().then(res => {
+    modalState.confirmLoading = false;
+    hide();
+    if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      modalState.from = Object.assign(modalState.from, res.data);
+      modalState.title = 'Setting Remote Backup';
+      modalState.openByEdit = true;
+    } else {
+      message.error(res.msg, 3);
+      modalState.title = 'Setting Remote Backup';
+      modalState.openByEdit = false;
+    }
+  });
+}
+
+/**FTP对象保存 */
+function fnModalOk() {
+  modalStateFrom.validate().then(() => {
+    modalState.confirmLoading = true;
+    const from = toRaw(modalState.from);
+    updateFTPInfo(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(`Configuration saved successfully`, 3);
+          fnModalCancel();
+        } else {
+          message.warning(`Configuration save exception`, 3);
+        }
+      })
+      .finally(() => {
+        modalState.confirmLoading = false;
+      });
+  });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalStateFrom.resetFields();
+}
+
+/**
+ * 同步文件到FTP
+ * @param row
+ */
+function fnSyncFileToFTP(row: Record<string, any>) {
+  putFTPInfo(row.filePath, row.fileName)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('common.operateOk'), 3);
+      } else {
+        message.warning(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      modalState.confirmLoading = false;
+    });
+}
 </script>
 
 <template>
@@ -305,6 +435,12 @@ onMounted(() => {
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>Setting Remote Backup</template>
+            <a-button type="text" @click.prevent="fnModalVisibleByEdit()">
+              <template #icon><DeliveredProcedureOutlined /></template>
+            </a-button>
+          </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
@@ -328,6 +464,14 @@ onMounted(() => {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'fileName'">
             <a-space :size="8" align="center">
+              <a-button
+                type="link"
+                :loading="downLoading"
+                @click.prevent="fnSyncFileToFTP(record)"
+                v-if="record.fileType === 'file'"
+              >
+                <template #icon><CloudServerOutlined /></template>
+              </a-button>
               <a-button
                 type="link"
                 :loading="downLoading"
@@ -349,6 +493,106 @@ onMounted(() => {
         </template>
       </a-table>
     </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="modalState.openByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+      >
+        <a-form-item label="Enable" name="enable" :label-col="{ span: 3 }">
+          <a-switch
+            v-model:checked="modalState.from.enable"
+            :checked-children="t('common.switch.open')"
+            :un-checked-children="t('common.switch.shut')"
+          />
+        </a-form-item>
+
+        <template v-if="modalState.from.enable">
+          <a-row>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                label="Service IP"
+                name="toIp"
+                v-bind="modalStateFrom.validateInfos.toIp"
+              >
+                <a-input
+                  v-model:value="modalState.from.toIp"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                label="Service Port"
+                name="toPort"
+                v-bind="modalStateFrom.validateInfos.toPort"
+              >
+                <a-input-number
+                  v-model:value="modalState.from.toPort"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                label="UserName"
+                name="username"
+                v-bind="modalStateFrom.validateInfos.username"
+              >
+                <a-input
+                  v-model:value="modalState.from.username"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                label="Password"
+                name="password"
+                v-bind="modalStateFrom.validateInfos.password"
+              >
+                <a-input-password
+                  v-model:value="modalState.from.password"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                ></a-input-password>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-form-item
+            label="Save Dir"
+            name="dir"
+            v-bind="modalStateFrom.validateInfos.dir"
+            :label-col="{ span: 3 }"
+          >
+            <a-input
+              v-model:value="modalState.from.dir"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+            ></a-input>
+          </a-form-item>
+        </template>
+      </a-form>
+    </ProModal>
   </PageContainer>
 </template>
 

src/views/monitor/topology/index.vue

@@ -50,6 +50,7 @@ async function fnGetState() {
       graphG6.value.setItemState(neShape, 'neState', ne.serverState.online);
     }
   }
+  await new Promise(resolve => setTimeout(resolve, 15_000));
 }
 
 /**查询全部网元数据列表 */

src/views/monitor/topologyArchitecture/index.vue

@@ -92,13 +92,13 @@ const graphNodeMenu = new Menu({
       ${neState.neName ?? '--'}
       </h3>
       <div id="restart" style="cursor: pointer; margin-bottom: 4px">
-        > ${t('views.configManage.neManage.restart')}
+        > ${t('views.ne.common.restart')}
       </div>
       <div id="stop" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.configManage.neManage.stop')}
+        > ${t('views.ne.common.stop')}
       </div>
       <div id="log" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.configManage.neManage.log')}
+        > ${t('views.ne.common.log')}
       </div>
     </div>
     `;

src/views/monitor/topologyBuild/hooks/registerEdge.ts

@@ -130,26 +130,17 @@ export function edgeLineAnimateState() {
 
         // circle-move 圆点沿边运动
         if (name === 'circle-move') {
-          let back1 = group.find(
-            (ele: any) => ele.get('name') === 'circle-stroke1'
+          const backArr = group.findAll((ele: any) =>
+            ele.get('name').startsWith('circle-stroke')
           );
-          if (back1) {
-            back1.remove();
-            back1.destroy();
-          }
-          let back2 = group.find(
-            (ele: any) => ele.get('name') === 'circle-stroke2'
-          );
-          if (back2) {
-            back2.remove();
-            back2.destroy();
-          }
           if (value) {
+            if (backArr.length > 0) return;
+
             // 第一个矩形边
             const fillColor = typeof value === 'string' ? value : '#1890ff';
             // 边缘路径的起始位置
             const startPoint = keyShape.getPoint(0);
-            back1 = group.addShape('circle', {
+            const back1 = group.addShape('circle', {
               attrs: {
                 x: startPoint.x,
                 y: startPoint.y,
@@ -159,6 +150,7 @@ export function edgeLineAnimateState() {
               // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
               name: 'circle-stroke1',
             });
+            back1.show();
             back1.animate(
               (ratio: any) => {
                 // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置
@@ -177,7 +169,7 @@ export function edgeLineAnimateState() {
             );
             // 第二个矩形边
             const endPoint = keyShape.getPoint(1);
-            back2 = group.addShape('circle', {
+            const back2 = group.addShape('circle', {
               zIndex: -2,
               attrs: {
                 x: endPoint.x,
@@ -188,7 +180,7 @@ export function edgeLineAnimateState() {
               // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
               name: 'circle-stroke2',
             });
-
+            back2.show();
             back2.animate(
               (ratio: any) => {
                 // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置
@@ -205,6 +197,14 @@ export function edgeLineAnimateState() {
                 duration: 2 * 1000, // 执行一次的持续时间
               }
             );
+          } else {
+            if (backArr.length <= 0) return;
+            backArr.forEach((ele: any) => {
+              ele.hide();
+              ele.remove();
+              ele.destroy();
+            });
+            backArr.length = 0;
           }
           return;
         }
@@ -212,11 +212,7 @@ export function edgeLineAnimateState() {
         // line-dash 虚线运动
         if (name === 'line-dash') {
           if (value) {
-            keyShape.stopAnimate();
-            keyShape.attr({
-              lineDash: null,
-              lineDashOffset: null,
-            });
+            if (keyShape.cfg.animating) return;
             let index = 0;
             keyShape.animate(
               () => {
@@ -234,6 +230,12 @@ export function edgeLineAnimateState() {
                 duration: 3000, // 执行一次的持续时间
               }
             );
+          } else {
+            keyShape.stopAnimate();
+            keyShape.attr({
+              lineDash: null,
+              lineDashOffset: null,
+            });
           }
           return;
         }
@@ -246,6 +248,7 @@ export function edgeLineAnimateState() {
             back.remove();
             back.destroy();
           }
+
           const { path, stroke, lineWidth } = keyShape.attr();
           back = group.addShape('path', {
             attrs: {

src/views/monitor/topologyBuild/hooks/registerNode.ts

@@ -300,12 +300,23 @@ export function nodeImageAnimateState() {
             ele.get('name').startsWith('circle-shape')
           );
           if (value) {
-            if (Array.isArray(backArr) && backArr.length === 3) return;
+            const fillColor = typeof value === 'string' ? value : '#f5222d';
+            // 移除
+            if (Array.isArray(backArr) && backArr.length >= 3) {
+              for (const back of backArr) {
+                back.stopAnimate();
+                back.hide();
+                back.remove();
+                back.destroy();
+              }
+              backArr.length = 0;
+            }
+
+            // 根据大小确定半径
             const size = Array.isArray(model?.size) ? model?.size : [40, 40];
             const x = size[0] / 2;
             const y = -size[1] / 2;
             const r = 3;
-            const fillColor = typeof value === 'string' ? value : '#f5222d';
 
             // 第一个背景圆
             const back1 = group.addShape('circle', {

src/views/ne-data/base-station/components/history.vue

@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { reactive, ref, toRaw, watch } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { saveAs } from 'file-saver';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import { exportNBState, listNBState } from '@/api/neData/nb-state';
+import { Dayjs } from 'dayjs';
+const { t } = useI18n();
+const emit = defineEmits(['cancel', 'update:open']);
+const props = defineProps({
+  title: {
+    type: String,
+    default: '标题',
+  },
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  /**网元ID */
+  neId: {
+    type: String,
+    default: false,
+  },
+  neType: {
+    type: String,
+    default: false,
+  },
+});
+
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
+/**状态字典 */
+const nbStateOptions = ref<DictType[]>([
+  {
+    value: 'ON',
+    label: t('views.neData.baseStation.online'),
+    tagType: 'green',
+    tagClass: '',
+  },
+  {
+    value: 'OFF',
+    label: t('views.neData.baseStation.offline'),
+    tagType: 'red',
+    tagClass: '',
+  },
+]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元 */
+  neType: '',
+  neId: '',
+  /**排序字段 */
+  sortField: 'id',
+  sortOrder: 'desc',
+  /**状态 */
+  status: undefined as undefined | string,
+  /**开始时间 */
+  startTime: undefined as undefined | number,
+  /**结束时间 */
+  endTime: undefined as undefined | number,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    status: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    pageNum: 1,
+    pageSize: 20,
+  });
+  queryRangePicker.value = undefined;
+  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 = ref<ColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: t('views.neData.baseStation.name'),
+    dataIndex: 'name',
+    align: 'left',
+    resizable: true,
+    width: 120,
+    minWidth: 100,
+    maxWidth: 250,
+    ellipsis: true,
+  },
+  {
+    title: t('views.neData.baseStation.position'),
+    dataIndex: 'position',
+    align: 'left',
+    resizable: true,
+    width: 150,
+    minWidth: 100,
+    maxWidth: 400,
+    ellipsis: true,
+  },
+  {
+    title: t('views.neData.baseStation.address'),
+    dataIndex: 'address',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.neData.baseStation.nbName'),
+    dataIndex: 'nbName',
+    align: 'left',
+    resizable: true,
+    width: 100,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: t('views.neData.baseStation.state'),
+    dataIndex: 'state',
+    key: 'state',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: t('views.neData.baseStation.time'),
+    dataIndex: 'time',
+    align: 'left',
+    width: 150,
+  },
+]);
+
+/**表格分页器参数 */
+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: total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**列表导出 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neData.baseStation.exportTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      const querys = toRaw(queryParams);
+      exportNBState(querys)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            saveAs(res.data, `nb_state_history_records_export_${Date.now()}.xlsx`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**查询字典数据列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+
+  // 时间范围
+  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;
+  }
+
+  listNBState(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;
+  });
+}
+
+/**弹框取消按钮事件 */
+function fnModalCancel() {
+  emit('update:open', false);
+  emit('cancel');
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.open,
+  val => {
+    if (val) {
+      queryParams.neType = props.neType;
+      queryParams.neId = props.neId;
+      // 获取列表数据
+      fnGetList();
+    }
+  }
+);
+</script>
+
+<template>
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
+    :width="1200"
+    :title="props.title"
+    :open="props.open"
+    :keyboard="false"
+    :mask-closable="false"
+    @cancel="fnModalCancel"
+    :footer="null"
+  >
+    <!-- 表格搜索栏 -->
+    <a-form :model="queryParams" name="queryParams" layout="horizontal">
+      <a-row :gutter="16" style="margin-left: 0; margin-right: 0">
+        <a-col :lg="6" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.neData.baseStation.state')"
+            name="status"
+          >
+            <a-select
+              v-model:value="queryParams.status"
+              allow-clear
+              :placeholder="t('common.selectPlease')"
+              :options="nbStateOptions"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="16" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.neData.baseStation.time')"
+            name="queryRangePicker"
+          >
+            <a-range-picker
+              v-model:value="queryRangePicker"
+              :bordered="true"
+              :allow-clear="true"
+              style="width: 100%"
+              :show-time="{ format: 'HH:mm:ss' }"
+              format="YYYY-MM-DD HH:mm:ss"
+            ></a-range-picker>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="24" :md="24" :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-button type="dashed" @click.prevent="fnExportList()">
+                <template #icon><ExportOutlined /></template>
+                {{ t('common.export') }}
+              </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"
+      :pagination="tablePagination"
+      :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
+      @resizeColumn="(w:number, col:any) => (col.width = w)"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'state'">
+          <DictTag
+            :options="nbStateOptions"
+            :value="record.state"
+            value-default="OFF"
+          />
+        </template>
+      </template>
+    </a-table>
+  </ProModal>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import ListComponent from './list.vue';
+import TopologyComponent from './topology.vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const value = ref<string>('list');
+</script>
+
+<template>
+  <PageContainer>
+    <template #extra>
+      <a-radio-group v-model:value="value" button-style="solid">
+        <a-radio-button value="list">
+          {{ t('views.neData.baseStation.list') }}
+        </a-radio-button>
+        <a-radio-button value="topology">
+          {{ t('views.neData.baseStation.topology') }}
+        </a-radio-button>
+      </a-radio-group>
+    </template>
+
+    <div v-show="value === 'list'">
+      <ListComponent></ListComponent>
+    </div>
+    <div v-if="value === 'topology'">
+      <TopologyComponent></TopologyComponent>
+    </div>
+  </PageContainer>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,958 @@
+<script setup lang="ts">
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  computed,
+  defineAsyncComponent,
+} from 'vue';
+import { Form, message, Modal } from 'ant-design-vue';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { ProModal } from 'antdv-pro-modal';
+import UploadModal from '@/components/UploadModal/index.vue';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+const { t, currentLocale } = useI18n();
+import {
+  addAMFNbState,
+  delAMFNbState,
+  editAMFNbState,
+  listAMFNbStatelist,
+} from '@/api/neData/amf';
+import {
+  addMMENbState,
+  delMMENbState,
+  editMMENbState,
+  listMMENbStatelist,
+} from '@/api/neData/mme';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import saveAs from 'file-saver';
+import { readSheet, writeSheet } from '@/utils/execl-utils';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+// 异步加载组件
+const HistoryModal = defineAsyncComponent(
+  () => import('./components/history.vue')
+);
+
+const nbState = ref<DictType[]>([
+  {
+    value: 'ON',
+    label: t('views.neData.baseStation.online'),
+    tagType: 'green',
+    tagClass: '',
+  },
+  {
+    value: 'OFF',
+    label: t('views.neData.baseStation.offline'),
+    tagType: 'red',
+    tagClass: '',
+  },
+]);
+
+/**网元参数 */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+/**网元数据 */
+let neTypeAndId = ref<string[]>([]);
+/**查询参数 */
+let queryParams = reactive({
+  /**网元ID */
+  neId: '',
+  /**IMSI */
+  state: undefined,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    state: undefined,
+  });
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: Record<string, any>[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<ColumnsType>([
+  // {
+  //   title: t('common.rowId'),
+  //   dataIndex: 'index',
+  //   align: 'left',
+  //   width: 80,
+  // },
+  {
+    title: t('views.neData.baseStation.name'),
+    dataIndex: 'name',
+    align: 'left',
+    resizable: true,
+    width: 120,
+    minWidth: 100,
+    maxWidth: 250,
+    ellipsis: true,
+  },
+  {
+    title: t('views.neData.baseStation.position'),
+    dataIndex: 'position',
+    align: 'left',
+    resizable: true,
+    width: 150,
+    minWidth: 100,
+    maxWidth: 400,
+    ellipsis: true,
+  },
+  {
+    title: t('views.neData.baseStation.address'),
+    dataIndex: 'address',
+    align: 'left',
+    resizable: true,
+    width: 100,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: t('views.neData.baseStation.nbName'),
+    dataIndex: 'nbName',
+    align: 'left',
+    resizable: true,
+    width: 100,
+    minWidth: 100,
+    maxWidth: 200,
+  },
+  {
+    title: t('views.neData.baseStation.ueNum'),
+    dataIndex: 'ueNum',
+    align: 'left',
+    resizable: true,
+    width: 80,
+    minWidth: 80,
+    maxWidth: 120,
+  },
+  {
+    title: t('views.neData.baseStation.state'),
+    dataIndex: 'state',
+    key: 'state',
+    align: 'left',
+    resizable: true,
+    width: 80,
+    minWidth: 80,
+    maxWidth: 120,
+  },
+  {
+    title: t('views.neData.baseStation.time'),
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      const record = opt.value;
+      if (record.state === 'OFF') {
+        return record.offTime || '-';
+      }
+      return record.onTime || '-';
+    },
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = {
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: true,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+  },
+};
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**
+ * 记录删除
+ * @param index ID
+ */
+function fnRecordDelete(index: string) {
+  const [neType, neId] = neTypeAndId.value;
+  if (!neId) return;
+  let msg = `Delete index as:${index}`;
+  if (index === '0') {
+    msg = `Remove the index checkbox:${tableState.selectedRowKeys.length}`;
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: msg,
+    onOk() {
+      const reqArr = [];
+      if (index === '0') {
+        if (tableState.selectedRowKeys.length <= 0) {
+          return;
+        }
+        for (const v of tableState.selectedRowKeys) {
+          if (neType === 'MME') {
+            reqArr.push(delMMENbState(neId, v));
+          }
+          if (neType === 'AMF') {
+            reqArr.push(delAMFNbState(neId, v));
+          }
+        }
+      } else {
+        if (neType === 'MME') {
+          reqArr.push(delMMENbState(neId, index));
+        }
+        if (neType === 'AMF') {
+          reqArr.push(delAMFNbState(neId, index));
+        }
+      }
+      if (reqArr.length <= 0) return;
+      Promise.all(reqArr).then(res => {
+        const resArr = res.filter(
+          (item: any) => item.code !== RESULT_CODE_SUCCESS
+        );
+        if (resArr.length <= 0) {
+          message.success({
+            content: `${t('common.operateOk')}`,
+            duration: 3,
+          });
+          fnGetList();
+        } else {
+          message.error({
+            content: `${t('common.operateErr')}`,
+            duration: 3,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**查询列表 */
+function fnGetList() {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  const [neType, neId] = neTypeAndId.value;
+  queryParams.neId = neId;
+  let req = null;
+  if (neType === 'MME') {
+    req = listMMENbStatelist(toRaw(queryParams));
+  }
+  if (neType === 'AMF') {
+    req = listAMFNbStatelist(toRaw(queryParams));
+  }
+  if (req === null) {
+    tableState.data = [];
+    tableState.loading = false;
+    return;
+  }
+  req.then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tableState.data = res.data.filter((item: any) => {
+        // 状态过滤
+        if (queryParams.state) {
+          return item.state === queryParams.state;
+        }
+        return true;
+      });
+    } else {
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+const stateNum = computed(() => {
+  let onNum = 0;
+  let offNum = 0;
+  tableState.data.forEach((item: any) => {
+    if (item.state === 'ON') {
+      onNum += 1;
+    }
+    if (item.state === 'OFF') {
+      offNum += 1;
+    }
+  });
+  return [onNum, offNum];
+});
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**历史框 */
+  openByHistory: boolean;
+  /**导入框 */
+  openByImport: boolean;
+  importMsgArr: string[];
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: 'NB Config List',
+  from: {
+    address: '',
+    index: undefined,
+    name: '',
+    nbName: undefined,
+    offTime: undefined,
+    onTime: undefined,
+    position: '',
+    state: undefined,
+    ueNum: undefined,
+  },
+  confirmLoading: false,
+  openByHistory: false,
+  openByImport: false,
+  importMsgArr: [],
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    address: [
+      { required: true, message: t('views.neData.baseStation.addressPlease') },
+    ],
+    name: [
+      { required: true, message: t('views.neData.baseStation.namePlease') },
+    ],
+    position: [
+      { required: true, message: t('views.neData.baseStation.positionPlease') },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(edit?: string | number) {
+  if (!edit) {
+    modalStateFrom.resetFields(); //重置表单
+    modalState.title = t('views.neData.baseStation.addRadio');
+    modalState.openByEdit = true;
+    // 获取最大index
+    if (tableState.data.length <= 0) {
+      modalState.from.index = 1;
+    } else {
+      const last = tableState.data[tableState.data.length - 1];
+      modalState.from.index = last.index + 1;
+    }
+  }
+  // 编辑
+  if (edit === '0') {
+    const row = tableState.data.find((row: any) => {
+      return row.index === tableState.selectedRowKeys[0];
+    });
+    modalStateFrom.resetFields(); //重置表单
+    Object.assign(modalState.from, row);
+    modalState.title = t('views.neData.baseStation.editRadio');
+    modalState.openByEdit = true;
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const [neType, neId] = neTypeAndId.value;
+  if (!neId) return;
+  const from = JSON.parse(JSON.stringify(modalState.from));
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      let result: any = null;
+      if (neType === 'MME') {
+        result = from.state
+          ? editMMENbState(neId, from)
+          : addMMENbState(neId, from);
+      }
+      if (neType === 'AMF') {
+        result = from.state
+          ? editAMFNbState(neId, from)
+          : addAMFNbState(neId, from);
+      }
+      if (result === null) {
+        return;
+      }
+      result
+        .then((res: any) => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            fnModalCancel();
+            fnGetList();
+          } else {
+            message.error({
+              content: t('common.operateErr'),
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalState.openByHistory = false;
+  modalStateFrom.resetFields();
+}
+
+/**导出当前列表 */
+function fnExportList() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.neData.baseStation.exportTip'),
+    onOk: async () => {
+      if (modalState.confirmLoading) return;
+      modalState.confirmLoading = true;
+
+      let rows: Record<string, any>[] = [];
+      // 勾选的网元数据
+      if (tableState.selectedRowKeys.length > 0) {
+        rows = tableState.data.filter(item =>
+          tableState.selectedRowKeys.includes(item.index)
+        );
+      } else {
+        rows = tableState.data;
+      }
+
+      const dataArr: Record<string, any>[] = [];
+      for (const row of rows) {
+        let data: any = {};
+        data[t('views.neData.baseStation.name')] = row.name;
+        data[t('views.neData.baseStation.position')] = row.position;
+        data[t('views.neData.baseStation.address')] = row.address;
+        data[t('views.neData.baseStation.nbName')] = row.nbName;
+        data[t('views.neData.baseStation.ueNum')] = row.ueNum;
+        nbState.value.find(item => {
+          if (item.value === row.state) {
+            data[t('views.neData.baseStation.state')] = item.label;
+          }
+        });
+        data[t('views.neData.baseStation.time')] = row.time || '-';
+        dataArr.push(data);
+      }
+
+      // 导出
+      writeSheet(dataArr, 'Sheet1', {
+        header: [
+          t('views.neData.baseStation.name'),
+          t('views.neData.baseStation.position'),
+          t('views.neData.baseStation.address'),
+          t('views.neData.baseStation.nbName'),
+          t('views.neData.baseStation.ueNum'),
+          t('views.neData.baseStation.state'),
+          t('views.neData.baseStation.time'),
+        ],
+      }).then(fileBlob =>
+        saveAs(fileBlob, `nb_state_records_export_${Date.now()}.xlsx`)
+      );
+
+      modalState.confirmLoading = false;
+      tableState.selectedRowKeys = [];
+    },
+  });
+}
+
+/**对话框弹出历史窗口 */
+function fnHistoryView() {
+  modalState.openByHistory = true;
+}
+
+/**对话框表格信息导入弹出窗口 */
+function fnModalImportOpen() {
+  modalState.openByImport = true;
+}
+function fnModalImportClose() {
+  modalState.openByImport = false;
+  fnQueryReset();
+}
+
+/**对话框表格信息导入上传 */
+function fnModalImportUpload(file: File) {
+  const hide = message.loading(t('common.loading'), 0);
+  const [neType, neId] = neTypeAndId.value;
+  modalState.importMsgArr = [];
+
+  // 获取最大index
+  let index = 0;
+  if (tableState.data.length <= 0) {
+    index = 1;
+  } else {
+    const last = tableState.data[tableState.data.length - 1];
+    index = last.index + 1;
+  }
+
+  const reader = new FileReader();
+  reader.onload = function (e: any) {
+    const arrayBuffer = e.target.result;
+    readSheet(arrayBuffer).then(async rows => {
+      console.log(rows);
+      if (rows.length <= 0) {
+        hide();
+        message.error({
+          content: t('views.neData.baseStation.importDataEmpty'),
+          duration: 3,
+        });
+        return;
+      }
+      // 开始导入
+      modalState.confirmLoading = true;
+      for (const row of rows) {
+        const rowId = row[t('common.rowId')];
+        const name = row[t('views.neData.baseStation.name')];
+        const position = row[t('views.neData.baseStation.position')];
+        const address = row[t('views.neData.baseStation.address')];
+        let result: any = null;
+        // 检查IP地址是否定义
+        const hasAddress = tableState.data.find(
+          item => item.address === address
+        );
+        if (hasAddress) {
+          // 定义则更新名称位置
+          if (neType === 'MME') {
+            result = await editMMENbState(
+              neId,
+              Object.assign({}, hasAddress, {
+                name,
+                position,
+              })
+            );
+          }
+          if (neType === 'AMF') {
+            result = await editAMFNbState(
+              neId,
+              Object.assign({}, hasAddress, {
+                name,
+                position,
+              })
+            );
+          }
+          let msg = `${t('common.rowId')}: ${rowId} ${t(
+            'views.neData.baseStation.editRadio'
+          )}${t('common.operateErr')}`;
+          if (result.code === RESULT_CODE_SUCCESS) {
+            msg = `${t('common.rowId')}: ${rowId} ${t(
+              'views.neData.baseStation.editRadio'
+            )}${t('common.operateOk')}`;
+          }
+          modalState.importMsgArr.push(msg);
+        } else {
+          // 未定义则新增
+          const form = {
+            index,
+            name: `${name}`,
+            position: `${position}`,
+            address: `${address}`,
+          };
+          if (neType === 'MME') {
+            result = await addMMENbState(neId, form);
+          }
+          if (neType === 'AMF') {
+            result = await addAMFNbState(neId, form);
+          }
+          let msg = `${t('common.rowId')}: ${rowId} ${t(
+            'views.neData.baseStation.addRadio'
+          )}${t('common.operateErr')}`;
+          if (result.code === RESULT_CODE_SUCCESS) {
+            index += 1;
+            msg = `${t('common.rowId')}: ${rowId} ${t(
+              'views.neData.baseStation.addRadio'
+            )}${t('common.operateOk')}`;
+          }
+          modalState.importMsgArr.push(msg);
+        }
+      }
+
+      hide();
+      modalState.confirmLoading = false;
+    });
+  };
+  reader.onerror = function (e) {
+    hide();
+    console.error('reader file error:', e);
+  };
+  reader.readAsArrayBuffer(file);
+}
+
+/**对话框表格信息导入模板 */
+async function fnModalImportTemplate() {
+  const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL;
+  const xlsxUrl = `${
+    baseUrl.length === 1 && baseUrl.indexOf('/') === 0
+      ? ''
+      : baseUrl.indexOf('/') === -1
+      ? '/' + baseUrl
+      : baseUrl
+  }/nbStateImput`;
+  const lang = currentLocale.value.split('_')[0];
+  saveAs(
+    `${xlsxUrl}/${lang}.xlsx`,
+    `nb_state_records_import_template_${Date.now()}.xlsx`
+  );
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          useNeInfoStore().neCascaderOptions.forEach(item => {
+            if (['AMF', 'MME'].includes(item.value)) {
+              arr.push(JSON.parse(JSON.stringify(item)));
+            }
+          });
+          neCascaderOptions.value = arr;
+          // 无查询参数neType时 默认选择AMF
+          const queryNeType = (route.query.neType as string) || 'AMF';
+          const item = arr.find(s => s.value === queryNeType);
+          if (item && item.children) {
+            const info = item.children[0];
+            neTypeAndId.value = [info.neType, info.neId];
+          } else {
+            const info = neCascaderOptions.value[0].children[0];
+            neTypeAndId.value = [info.neType, info.neId];
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <div>
+    <a-card
+      :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.ne.common.neType')" name="neType ">
+              <a-cascader
+                v-model:value="neTypeAndId"
+                :options="neCascaderOptions"
+                :allow-clear="false"
+                :placeholder="t('common.selectPlease')"
+                @change="fnGetList"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="4" :md="6" :xs="24">
+            <a-form-item
+              :label="t('views.neData.baseStation.state')"
+              name="state"
+            >
+              <a-select
+                v-model:value="queryParams.state"
+                :options="nbState"
+                :placeholder="t('common.selectPlease')"
+                @change="fnGetList"
+              />
+            </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()">
+                  <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>
+              <PlusOutlined />
+            </template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            :disabled="tableState.selectedRowKeys.length != 1"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnModalVisibleByEdit('0')"
+          >
+            <template #icon><FormOutlined /></template>
+            {{ t('common.editText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+          <a-button type="dashed" @click.prevent="fnModalImportOpen()">
+            <template #icon><ImportOutlined /></template>
+            {{ t('common.import') }}
+          </a-button>
+          <a-button type="dashed" @click.prevent="fnExportList()">
+            <template #icon><ExportOutlined /></template>
+            {{ t('common.export') }}
+          </a-button>
+          <a-button type="default" @click.prevent="fnHistoryView()">
+            <template #icon><ContainerOutlined /></template>
+            {{ t('views.neData.baseStation.history') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <div>
+            <template
+              v-if="
+                queryParams.state === undefined || queryParams.state === 'ON'
+              "
+            >
+              {{ t('views.neData.baseStation.online') }}:
+              <strong style="color: green">{{ stateNum[0] }} </strong>
+            </template>
+            <template
+              v-if="
+                queryParams.state === undefined || queryParams.state === 'OFF'
+              "
+            >
+              &nbsp;
+              {{ t('views.neData.baseStation.offline') }}:
+              <strong style="color: red">
+                {{ stateNum[1] }}
+              </strong>
+            </template>
+          </div>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="index"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+        :scroll="{ x: tableColumns.length * 120, y: 'calc(100vh - 480px)' }"
+        @resizeColumn="(w:number, col:any) => (col.width = w)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'state'">
+            <DictTag
+              :options="nbState"
+              :value="record.state"
+              value-default="OFF"
+            />
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="500"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="modalState.openByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-form-item
+          :label="t('views.neData.baseStation.name')"
+          name="name"
+          v-bind="modalStateFrom.validateInfos.name"
+        >
+          <a-input
+            v-model:value="modalState.from.name"
+            allow-clear
+            :maxlength="64"
+          >
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('views.neData.baseStation.position')"
+          name="position"
+          v-bind="modalStateFrom.validateInfos.position"
+        >
+          <a-input
+            v-model:value="modalState.from.position"
+            allow-clear
+            :maxlength="64"
+          >
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          v-if="!modalState.from.state"
+          :label="t('views.neData.baseStation.address')"
+          name="address"
+          v-bind="modalStateFrom.validateInfos.address"
+        >
+          <a-input
+            v-model:value="modalState.from.address"
+            allow-clear
+            :maxlength="64"
+          >
+          </a-input>
+        </a-form-item>
+      </a-form>
+    </ProModal>
+
+    <!-- 状态历史框 -->
+    <HistoryModal
+      v-model:open="modalState.openByHistory"
+      :title="t('views.neData.baseStation.history')"
+      :ne-type="neTypeAndId[0]"
+      :ne-id="neTypeAndId[1]"
+      @cancel="fnModalCancel"
+    ></HistoryModal>
+
+    <!-- 上传导入表格数据文件框 -->
+    <UploadModal
+      :title="t('common.import')"
+      @upload="fnModalImportUpload"
+      @close="fnModalImportClose"
+      v-model:open="modalState.openByImport"
+      :ext="['.xls', '.xlsx']"
+      :size="10"
+    >
+      <template #default>
+        <a-row justify="space-between" align="middle">
+          <a-col :span="12"> </a-col>
+          <a-col :span="6">
+            <a-button
+              type="link"
+              :title="t('views.system.user.downloadObj')"
+              @click.prevent="fnModalImportTemplate"
+            >
+              {{ t('views.system.user.downloadObj') }}
+            </a-button>
+          </a-col>
+        </a-row>
+        <a-textarea
+          :disabled="true"
+          :hidden="modalState.importMsgArr.length <= 0"
+          :value="modalState.importMsgArr.join('\r\n')"
+          :auto-size="{ minRows: 2, maxRows: 8 }"
+          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
+        />
+      </template>
+    </UploadModal>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

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

@@ -0,0 +1,642 @@
+<script setup lang="ts">
+import { reactive, onMounted, ref, onBeforeUnmount, useTemplateRef } from 'vue';
+import { Graph, GraphData, Menu, Tooltip, Util } from '@antv/g6';
+import { listAMFNbStatelist } from '@/api/neData/amf';
+import { parseBasePath } from '@/plugins/file-static-url';
+import { edgeLineAnimateState } from '@/views/monitor/topologyBuild/hooks/registerEdge';
+import { nodeImageAnimateState } from '@/views/monitor/topologyBuild/hooks/registerNode';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { stateNeInfo } from '@/api/ne/neInfo';
+import { parseDateToStr } from '@/utils/date-utils';
+import { useFullscreen } from '@vueuse/core';
+import { listMMENbStatelist } from '@/api/neData/mme';
+const { t } = useI18n();
+
+/**图DOM节点实例对象 */
+const graphG6Dom = useTemplateRef('graphG6Dom');
+
+/**图数据 */
+const graphData = reactive<Record<string, any>>({
+  nodes: [
+    {
+      id: 'omc',
+      label: 'OMC',
+      img: parseBasePath('/svg/service_db.svg'),
+    },
+    {
+      id: 'amf1',
+      label: 'amf1',
+      img: parseBasePath('/svg/service.svg'),
+    },
+    {
+      id: 'amf2',
+      label: 'amf2',
+      img: parseBasePath('/svg/service.svg'),
+    },
+    {
+      id: 'base1',
+      label: 'base1',
+      img: parseBasePath('/svg/base.svg'),
+    },
+    {
+      id: 'base2',
+      label: 'base2',
+      img: parseBasePath('/svg/base.svg'),
+    },
+  ],
+  edges: [
+    {
+      source: 'omc',
+      target: 'amf1',
+    },
+    {
+      source: 'omc',
+      target: 'amf2',
+    },
+    {
+      source: 'amf1',
+      target: 'base1',
+    },
+    {
+      source: 'amf2',
+      target: 'base1',
+    },
+    {
+      source: 'amf2',
+      target: 'base2',
+    },
+  ],
+});
+
+/**图实例对象 */
+const graphG6 = ref<any>(null);
+
+/**图节点右击菜单 */
+const graphNodeMenu = new Menu({
+  offsetX: 6,
+  offseY: 10,
+  itemTypes: ['node'],
+  getContent(evt) {
+    if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
+    const { id, label, nType, nInfo }: any = evt.item?.getModel();
+    if (['GNB', 'ENB'].includes(nType)) {
+      return `
+      <div
+        style="
+          display: flex;
+          flex-direction: column;
+          width: 140px;
+        "
+      >
+        <span>
+        ${t('views.neData.baseStation.name')}:
+        ${label ?? '--'}
+        </span>
+      </div>
+      `;
+    }
+    return `
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        width: 140px;
+      "
+    >
+      <span>
+      ${t('views.monitor.topology.name')}:
+      ${label ?? '--'}
+      </span>
+    </div>
+    `;
+  },
+});
+
+/**图节点展示 */
+const graphNodeTooltip = new Tooltip({
+  offsetX: 10,
+  offsetY: 20,
+  getContent(evt) {
+    if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
+    const { id, label, nType, nInfo }: any = evt.item?.getModel();
+    if (['GNB', 'ENB'].includes(nType)) {
+      return `
+        <div
+        style="
+            display: flex;
+            flex-direction: column;
+            width: 256px;
+        "
+        >
+        <div><strong>${t('views.neData.baseStation.state')}：</strong><span>
+        ${
+          nInfo.state === 'ON'
+            ? t('views.neData.baseStation.online')
+            : t('views.neData.baseStation.offline')
+        }
+        </span></div>
+        <div><strong>${t('views.neData.baseStation.time')}：</strong><span>
+        ${nInfo.state === 'ON' ? nInfo.onTime ?? '--' : nInfo.offTime ?? '--'}
+        </span></div>
+        <div>==============================</div>
+        <div><strong>ID：</strong><span>${nInfo.index}</span></div>
+        <div><strong>${t('views.neData.baseStation.address')}：</strong><span>
+        ${nInfo.address ?? '--'}</span></div>
+        <div><strong>${t('views.neData.baseStation.nbName')}：</strong><span>
+        ${nInfo.nbName ?? '--'}</span></div>
+        <div><strong>${t('views.neData.baseStation.ueNum')}：</strong><span>
+        ${nInfo.ueNum ?? '--'}</span></div>
+        <div><strong>${t('views.neData.baseStation.name')}：</strong><span>
+        ${nInfo.name ?? '--'}
+        </span></div>
+        <div><strong>${t(
+          'views.neData.baseStation.position'
+        )}：</strong><span style="word-wrap: break-word;">
+        ${nInfo.position}
+        </span></div>
+        </div>
+        `;
+    }
+    return `
+        <div
+        style="
+            display: flex;
+            flex-direction: column;
+            width: 200px;
+        "
+        >
+        <div><strong>${t('views.monitor.topology.state')}：</strong><span>
+        ${
+          nInfo.online
+            ? t('views.monitor.topology.normalcy')
+            : t('views.monitor.topology.exceptions')
+        }
+        </span></div>
+        <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
+        ${nInfo.refreshTime ?? '--'}
+        </span></div>
+        <div>========================</div>
+        <div><strong>ID：</strong><span>${nInfo.neId}</span></div>
+        <div><strong>${t('views.monitor.topology.name')}：</strong><span>
+        ${nInfo.neName ?? '--'}
+        </span></div>
+        <div><strong>IP：</strong><span>${nInfo.neIP}</span></div>
+        <div><strong>${t('views.monitor.topology.version')}：</strong><span>
+        ${nInfo.version ?? '--'}
+        </span></div>
+        <div><strong>${t('views.monitor.topology.serialNum')}：</strong><span>
+        ${nInfo.sn ?? '--'}
+        </span></div>
+        <div><strong>${t('views.monitor.topology.expiryDate')}：</strong><span>
+        ${nInfo.expire ?? '--'}
+        </span></div>
+        </div>
+        `;
+  },
+  itemTypes: ['node'],
+});
+
+/**注册自定义边或节点 */
+function registerEdgeNode() {
+  // 边
+  edgeLineAnimateState();
+  // 节点
+  nodeImageAnimateState();
+}
+
+/**
+ * format the string
+ * @param {string} str The origin string
+ * @param {number} maxWidth max width
+ * @param {number} fontSize font size
+ * @return {string} the processed result
+ */
+function fittingString(str: string, maxWidth: number, fontSize: number) {
+  let currentWidth = 0;
+  let res = str;
+  const pattern = new RegExp('[\u4E00-\u9FA5]+'); // distinguish the Chinese charactors and letters
+  str.split('').forEach((letter, i) => {
+    if (currentWidth > maxWidth) return;
+    if (pattern.test(letter)) {
+      // Chinese charactors
+      currentWidth += fontSize;
+    } else {
+      // get the width of single letter according to the fontSize
+      currentWidth += Util.getLetterWidth(letter, fontSize);
+    }
+    if (currentWidth > maxWidth) {
+      res = `${str.substring(0, i)}\n${str.substring(i)}`;
+    }
+  });
+  return res;
+}
+
+/**图事件 */
+function graphEvent(graph: Graph) {
+  graph.on('edge:mouseenter', evt => {
+    const { item } = evt;
+    if (!item) return;
+    graph.setItemState(item, 'circle-move', '#b5d6fb');
+  });
+  graph.on('edge:mouseleave', evt => {
+    const { item } = evt;
+    if (!item) return;
+    graph.setItemState(item, 'circle-move', false);
+    graph.setItemState(item, 'circle-move:#b5d6fb', false);
+  });
+}
+
+/**图数据渲染 */
+function handleRanderGraph(container: HTMLElement | null, data: GraphData) {
+  if (!container) return;
+  const { clientHeight, clientWidth } = container;
+
+  // 注册自定义边或节点
+  registerEdgeNode();
+
+  const graph = new Graph({
+    container: container,
+    width: clientWidth,
+    height: clientHeight,
+    fitCenter: false,
+    fitView: true,
+    fitViewPadding: [40, 40, 40, 40],
+    modes: {
+      // default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
+      default: [
+        'zoom-canvas',
+        'drag-canvas',
+        'drag-node',
+        {
+          type: 'drag-combo',
+          onlyChangeComboSize: true, // 不改变层级关系
+        },
+        {
+          type: 'collapse-expand-combo',
+          trigger: 'dblclick',
+          relayout: true, // 收缩展开后，不重新布局
+        },
+      ],
+    },
+    groupByTypes: false,
+    plugins: [graphNodeMenu, graphNodeTooltip],
+    layout: {
+      type: 'dagre',
+      rankdir: 'TB', // 布局的方向，TB：从上到下，BT：从下到上，LR：从左到右，RL：从右到左
+      //align: 'UL', // 节点对齐方式 UL、UR、DL、DR
+      controlPoints: true,
+      nodesep: 20,
+      ranksep: 40,
+    },
+    animate: true,
+    defaultNode: {
+      type: 'image-animate-state',
+      labelCfg: {
+        offset: 8,
+        position: 'bottom',
+        style: { fill: '#ffffff', fontSize: 14, fontWeight: 500 },
+      },
+      size: 48,
+      img: parseBasePath('/svg/cloud.svg'),
+      width: 48,
+      height: 48,
+    },
+    defaultEdge: {
+      type: 'line-animate-state',
+      labelCfg: {
+        autoRotate: true,
+        refY: 10,
+        refX: 40,
+      },
+      style: {
+        stroke: '#fafafa',
+        lineWidth: 1.5,
+      },
+    },
+    defaultCombo: {
+      labelCfg: {
+        offset: 16,
+        position: 'bottom',
+        style: { fill: '#ffffff', fontSize: 14, fontWeight: 500 },
+      },
+      style: {
+        stroke: '#BDEFDB',
+        fill: '#BDEFDB',
+        opacity: 0.25,
+      },
+      collapsedSubstituteIcon: {
+        show: true,
+        img: parseBasePath('/svg/service.svg'),
+        width: 48,
+        height: 48,
+      },
+    },
+  });
+  graph.data(data);
+  graph.render();
+  graphEvent(graph);
+
+  // 创建 ResizeObserver 实例
+  const observer = new ResizeObserver(function (entries) {
+    // 当元素大小发生变化时触发回调函数
+    entries.forEach(function (entry) {
+      if (!graph) {
+        return;
+      }
+      graph.changeSize(entry.contentRect.width, entry.contentRect.height);
+      graph.fitCenter();
+    });
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+
+  return graph;
+}
+
+/**
+ * 获取图组数据渲染到画布
+ */
+async function fnGraphDataLoad() {
+  // 加载基础网元
+  await useNeInfoStore().fnNelist();
+  const dataNe = await fnGraphDataBase();
+  Object.assign(graphData, dataNe);
+  graphG6.value = handleRanderGraph(graphG6Dom.value, dataNe);
+  // 添加基站
+  const dataNb = await fnGraphDataNb(dataNe);
+  Object.assign(graphData, dataNb);
+  // graphG6.value.clear();
+  graphG6.value.read(dataNb);
+  // 添加状态
+  interval.value = true;
+  repeatFn();
+}
+
+/**图数据网元构建 */
+async function fnGraphDataBase() {
+  const data: GraphData = {
+    nodes: [],
+    edges: [],
+  };
+  // 添加基础网元
+  for (const item of useNeInfoStore().getNeSelectOtions) {
+    if ('OMC' === item.value) {
+      if (item.children?.length === 0) continue;
+      // 是否存在OMC保证唯一
+      const hasOMC = data.nodes?.findIndex(v => v.neType === 'OMC');
+      if (hasOMC !== -1) continue;
+      // 根网元
+      const omcInfo = item.children[0];
+      const node = {
+        id: 'OMC',
+        label: omcInfo.neName,
+        img: parseBasePath('/svg/service_db.svg'),
+        nInfo: { online: false, neId: omcInfo.neId, neType: omcInfo.neType },
+        nType: 'OMC',
+      };
+      // 添加OMC节点
+      data.nodes?.push(node);
+      continue;
+    }
+    if (['AMF', 'MME'].includes(item.value)) {
+      if (item.children?.length === 0) continue;
+      for (const child of item.children) {
+        const id = `${child.neType}_${child.neId}`;
+        const node = {
+          id: id,
+          label: child.neName,
+          img: parseBasePath('/svg/service.svg'),
+          nInfo: { online: false, neId: child.neId, neType: child.neType },
+          nType: item.value,
+        };
+        // 添加节点
+        data.nodes?.push(node);
+        data.edges?.push({
+          source: 'OMC',
+          target: id,
+        });
+      }
+      item.children.forEach((v: any) => {});
+      continue;
+    }
+  }
+  return data;
+}
+
+/**图数据基站构建 */
+async function fnGraphDataNb(data: GraphData) {
+  const arr = data.nodes?.filter((v: any) => ['AMF', 'MME'].includes(v.nType));
+  if (arr === undefined || arr.length === 0) return data;
+  for (const item of arr) {
+    if (item.nType === 'AMF') {
+      const neId = (item.nInfo as any).neId;
+      const res = await listAMFNbStatelist({ neId });
+      if (res.code !== RESULT_CODE_SUCCESS || !Array.isArray(res.data)) {
+        continue;
+      }
+      for (const nb of res.data) {
+        const id = `${item.id}_${nb.index}`;
+        data.nodes?.push({
+          id: id,
+          label: fittingString(`${nb.name}`, 80, 14),
+          img: parseBasePath('/svg/base5G.svg'),
+          nInfo: nb,
+          nType: 'GNB',
+        });
+        data.edges?.push({
+          source: item.id,
+          target: id,
+        });
+      }
+    }
+    if (item.nType === 'MME') {
+      const neId = (item.nInfo as any).neId;
+      const res = await listMMENbStatelist({ neId });
+      if (res.code !== RESULT_CODE_SUCCESS || !Array.isArray(res.data)) {
+        continue;
+      }
+      for (const nb of res.data) {
+        const id = `${item.id}_${nb.index}`;
+        data.nodes?.push({
+          id: id,
+          label: fittingString(`${nb.name}`, 80, 14),
+          img: parseBasePath('/svg/base4G.svg'),
+          nInfo: nb,
+          nType: 'ENB',
+        });
+        data.edges?.push({
+          source: item.id,
+          target: id,
+        });
+      }
+    }
+  }
+  return data;
+}
+
+/**
+ * 图状态构建
+ * @param reload 是否重载状态
+ */
+async function fnGraphState(reload: boolean = false) {
+  // 节点状态
+  if (!Array.isArray(graphData.nodes)) return;
+
+  const onc = graphData.nodes.find((v: any) => v.nType === 'OMC');
+  if (onc) {
+    const { id, nInfo } = onc as any;
+    if (!nInfo) return;
+    const res = await stateNeInfo(nInfo.neType, nInfo.neId);
+    if (res.code === RESULT_CODE_SUCCESS) {
+      Object.assign(nInfo, res.data, {
+        refreshTime: parseDateToStr(res.data.refreshTime, 'HH:mm:ss'),
+      });
+    }
+    const stateColor = nInfo.online ? '#52c41a' : '#f5222d'; // 状态颜色
+    graphG6.value.setItemState(id, 'top-right-dot', stateColor);
+  }
+
+  graphData.nodes
+    .filter((v: any) => ['AMF', 'MME'].includes(v.nType))
+    .forEach(async (v: any) => {
+      const { id, nInfo } = v;
+      if (!nInfo) return;
+      const res = await stateNeInfo(nInfo.neType, nInfo.neId);
+      if (res.code === RESULT_CODE_SUCCESS) {
+        Object.assign(nInfo, res.data, {
+          refreshTime: parseDateToStr(res.data.refreshTime, 'HH:mm:ss'),
+        });
+      }
+      const stateColor = nInfo.online ? '#52c41a' : '#f5222d'; // 状态颜色
+      graphG6.value.setItemState(id, 'top-right-dot', stateColor);
+
+      // 重载时更新下级基站状态
+      if (reload && nInfo.neType === 'AMF') {
+        const res = await listAMFNbStatelist({ neId: nInfo.neId });
+        if (res.code == RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+          for (const nb of res.data) {
+            const nbItem = graphData.nodes.find(
+              (v: any) => v.id === `${id}_${nb.index}`
+            );
+            if (nbItem) {
+              Object.assign(nbItem.nInfo, nb);
+              const stateColor = nb.state === 'ON' ? '#52c41a' : '#f5222d'; // 状态颜色
+              graphG6.value.setItemState(
+                nbItem.id,
+                'top-right-dot',
+                stateColor
+              );
+            }
+          }
+        }
+      }
+      if (reload && nInfo.neType === 'MME') {
+        const res = await listMMENbStatelist({ neId: nInfo.neId });
+        if (res.code == RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+          for (const nb of res.data) {
+            const nbItem = graphData.nodes.find(
+              (v: any) => v.id === `${id}_${nb.index}`
+            );
+            if (nbItem) {
+              Object.assign(nbItem.nInfo, nb);
+              const stateColor = nb.state === 'ON' ? '#52c41a' : '#f5222d'; // 状态颜色
+              graphG6.value.setItemState(
+                nbItem.id,
+                'top-right-dot',
+                stateColor
+              );
+            }
+          }
+        }
+      }
+    });
+
+  if (reload) {
+    await new Promise(resolve => setTimeout(resolve, 15_000));
+    return;
+  }
+  // 非重载时使用初始获取的状态
+  graphData.nodes
+    .filter((v: any) => ['GNB', 'ENB'].includes(v.nType))
+    .forEach(async (v: any) => {
+      const { id, nInfo } = v;
+      if (!nInfo) return;
+      const stateColor = nInfo.state === 'ON' ? '#52c41a' : '#f5222d'; // 状态颜色
+      graphG6.value.setItemState(id, 'top-right-dot', stateColor);
+    });
+}
+
+/**递归调度器 */
+const interval = ref<boolean>(false);
+
+/**递归刷新图状态 */
+function repeatFn(reload: boolean = false) {
+  if (!interval.value || !graphG6Dom.value) {
+    return;
+  }
+  fnGraphState(reload)
+    .finally(() => {
+      repeatFn(true); // 递归调用自己
+    })
+    .catch(error => {
+      console.error(error);
+    });
+}
+
+const viewportDom = ref<HTMLElement | null>(null);
+const { isFullscreen, toggle } = useFullscreen(viewportDom);
+function fullscreen() {
+  toggle();
+
+  if (!graphG6Dom.value) return;
+  if (isFullscreen.value) {
+    graphG6Dom.value.style.height = 'calc(100vh - 300px)';
+  } else {
+    graphG6Dom.value.style.height = '100vh';
+  }
+  const { clientHeight, clientWidth } = graphG6Dom.value;
+  graphG6.value.changeSize(clientHeight, clientWidth);
+  graphG6.value.fitView(40);
+}
+
+onMounted(() => {
+  fnGraphDataLoad();
+});
+
+onBeforeUnmount(() => {
+  interval.value = false;
+});
+</script>
+
+<template>
+  <a-card :bordered="false" :body-style="{ padding: '0' }" ref="viewportDom">
+    <!-- 插槽-卡片左侧侧 -->
+    <template #title>
+      <a-space :size="8" align="center">
+        {{ t('views.neData.baseStation.topologyTitle') }}
+      </a-space>
+    </template>
+    <!-- 插槽-卡片右侧 -->
+    <template #extra>
+      <a-button type="default" @click.prevent="fullscreen()">
+        <template #icon>
+          <FullscreenExitOutlined v-if="isFullscreen" />
+          <FullscreenOutlined v-else />
+        </template>
+        {{ t('loayouts.rightContent.fullscreen') }}
+      </a-button>
+    </template>
+
+    <div ref="graphG6Dom" class="chart"></div>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: calc(100vh - 300px);
+  background-color: rgb(43, 47, 51);
+}
+</style>

src/views/ne/neConfig/index.vue

@@ -195,9 +195,7 @@ function fnActiveConfigNode(key: string | number) {
       }, 300);
     } else {
       message.warning({
-        content: `${param.paramDisplay} ${t(
-          'views.configManage.configParamForm.noConfigData'
-        )}`,
+        content: `${param.paramDisplay} ${t('views.ne.neConfig.noConfigData')}`,
         duration: 3,
       });
     }
@@ -209,7 +207,7 @@ function fnGetNeConfig() {
   const neType = neTypeSelect.value[0];
   if (!neType) {
     message.warning({
-      content: t('views.configManage.configParamForm.neTypePleace'),
+      content: t('views.ne.neConfig.neTypePleace'),
       duration: 3,
     });
     return;
@@ -416,7 +414,7 @@ onMounted(() => {
         <!-- 网元类型 -->
         <a-card size="small" :bordered="false" :loading="treeState.loading">
           <template #title>
-            {{ t('views.configManage.configParamForm.treeTitle') }}
+            {{ t('views.ne.neConfig.treeTitle') }}
           </template>
           <a-form layout="vertical" autocomplete="off">
             <a-form-item name="neId ">
@@ -427,7 +425,7 @@ onMounted(() => {
                 @change="fnGetNeConfig"
               />
             </a-form-item>
-            <a-form-item name="listeningPort">
+            <a-form-item name="treeStateData">
               <a-tree
                 :tree-data="treeState.data"
                 :selected-keys="[treeState.selectNode.paramName]"
@@ -461,12 +459,12 @@ onMounted(() => {
               {{ treeState.selectNode.paramDisplay }}
             </a-typography-text>
             <a-typography-text type="danger" v-else>
-              {{ t('views.configManage.configParamForm.treeSelectTip') }}
+              {{ t('views.ne.neConfig.treeSelectTip') }}
             </a-typography-text>
           </template>
           <template #extra>
             <a-space :size="8" align="center" v-show="!treeState.selectLoading">
-              <a-tooltip>
+              <a-tooltip placement="topRight">
                 <template #title>{{ t('common.reloadText') }}</template>
                 <a-button
                   type="default"
@@ -549,10 +547,9 @@ onMounted(() => {
                           <template #title> {{ t('common.ok') }} </template>
                           <a-popconfirm
                             :title="
-                              t(
-                                'views.configManage.configParamForm.editOkTip',
-                                { num: record['display'] }
-                              )
+                              t('views.ne.neConfig.editOkTip', {
+                                num: record['display'],
+                              })
                             "
                             placement="topRight"
                             :disabled="listState.confirmLoading"
@@ -610,7 +607,7 @@ onMounted(() => {
           </a-table>
 
           <!-- array类型 -->
-          <template v-if="treeState.selectNode.paramType === 'array'">
+          <template v-else-if="treeState.selectNode.paramType === 'array'">
             <a-table
               class="table"
               row-key="index"
@@ -689,9 +686,7 @@ onMounted(() => {
                           "
                         >
                           <template #icon><BarsOutlined /></template>
-                          {{
-                            t('views.configManage.configParamForm.arrayMore')
-                          }}
+                          {{ t('views.ne.neConfig.arrayMore') }}
                         </a-button>
                         <!--特殊字段拓展显示-->
                         <span
@@ -792,11 +787,7 @@ onMounted(() => {
                           <template v-if="text.array">
                             <a-button type="default" size="small">
                               <template #icon><BarsOutlined /></template>
-                              {{
-                                t(
-                                  'views.configManage.configParamForm.arrayMore'
-                                )
-                              }}
+                              {{ t('views.ne.neConfig.arrayMore') }}
                             </a-button>
                           </template>
 
@@ -816,6 +807,10 @@ onMounted(() => {
               </template>
             </a-table>
           </template>
+
+          <template v-else>
+            <a-alert type="warning" show-icon message="No Data" />
+          </template>
         </a-card>
       </a-col>
     </a-row>

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

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

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

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

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

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

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

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

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

@@ -113,7 +113,7 @@ let modalState: ModalStateType = reactive({
     neAddress: '',
     dn: '',
     vendorName: '',
-    province: '',
+    province: 'Area',
     remark: '',
     // 主机
     hosts: [

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

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

src/views/ne/neInfo/index.vue

@@ -237,8 +237,13 @@ function fnModalEditOk(from: Record<string, any>) {
         item.neName = from.neName;
         item.ip = from.ip;
         item.port = from.port;
-        if (item.status !== '2') {
-          item.status = res.data.online ? '1' : '0';
+        if (res.data.online) {
+          item.status = '1';
+          if (res.data.standby) {
+            item.status = '3';
+          }
+        } else {
+          item.status = '0';
         }
         Object.assign(item.serverState, res.data);
         const resouresUsage = parseResouresUsage(item.serverState);
@@ -357,33 +362,38 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  listNeInfo(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.map(item => {
-        let resouresUsage = {
-          sysDiskUsage: 0,
-          sysMemUsage: 0,
-          sysCpuUsage: 0,
-          nfCpuUsage: 0,
-        };
-        const neState = item.serverState;
-        if (neState) {
-          resouresUsage = parseResouresUsage(neState);
-        } else {
-          item.serverState = { online: false };
+  listNeInfo(toRaw(queryParams))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+        // 取消勾选
+        if (tableState.selectedRowKeys.length > 0) {
+          tableState.selectedRowKeys = [];
         }
-        Reflect.set(item, 'resoures', resouresUsage);
-        return item;
-      });
-    }
-    tableState.loading = false;
-  });
+        tablePagination.total = res.total;
+        // 遍历处理资源情况数值
+        tableState.data = res.rows.map(item => {
+          let resouresUsage = {
+            sysDiskUsage: 0,
+            sysMemUsage: 0,
+            sysCpuUsage: 0,
+            nfCpuUsage: 0,
+          };
+          const neState = item.serverState;
+          if (neState) {
+            resouresUsage = parseResouresUsage(neState);
+          } else {
+            item.serverState = { online: false };
+          }
+          Reflect.set(item, 'resoures', resouresUsage);
+          return item;
+        });
+      }
+      tableState.loading = false;
+    })
+    .finally(() => {
+      // 刷新缓存的网元信息
+      useNeInfoStore().fnRefreshNelist();
+    });
 }
 
 /**解析网元状态携带的资源利用率 */
@@ -441,13 +451,8 @@ onMounted(() => {
     }
   });
 
-  // 刷新缓存的网元信息
-  useNeInfoStore()
-    .fnRefreshNelist()
-    .finally(() => {
-      // 获取列表数据
-      fnGetList();
-    });
+  // 获取列表数据
+  fnGetList();
 });
 </script>
 
@@ -662,15 +667,7 @@ onMounted(() => {
               </a-divider>
               <div>
                 <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
-                <a-tag
-                  :color="record.serverState.online ? 'processing' : 'error'"
-                >
-                  {{
-                    record.serverState.online
-                      ? t('views.ne.common.normalcy')
-                      : t('views.ne.common.exceptions')
-                  }}
-                </a-tag>
+                <DictTag :options="dict.neInfoStatus" :value="record.status" />
               </div>
               <div>
                 <span>{{ t('views.ne.neVersion.version') }}：</span>

src/views/ne/neLicense/index.vue

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

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

@@ -54,7 +54,7 @@ let modalState: ModalStateType = reactive({
     neAddress: '',
     dn: '-',
     vendorName: '-',
-    province: '-',
+    province: 'Area',
     // 主机
     hosts: [
       {

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

@@ -50,9 +50,10 @@ let fromState = ref({
     ims_sip_ip: '192.168.8.110',
     upf_type: 'LightUPF',
     upf_driver_type: 'vmxnet3',
-    upf_card_name: 'eth0',
+    upfn3_card_name: 'eth0',
     upfn3_pci: '0000:00:00.0',
     upfn3_mac: '00:00:00:00:00:00',
+    upfn6_card_name: 'eth0',
     upfn6_pci: '0000:00:00.0',
     upfn6_mac: '00:00:00:00:00:00',
   },
@@ -243,7 +244,12 @@ watch(
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
+          <a-col
+            :lg="12"
+            :md="12"
+            :xs="24"
+            v-if="fromState.external.upf_type === 'LightUPF'"
+          >
             <a-form-item label="UE_POOL" name="external.ue_pool">
               <a-input
                 v-model:value="fromState.external.ue_pool"
@@ -260,9 +266,63 @@ watch(
               </a-input>
             </a-form-item>
           </a-col>
+          <a-col
+            :lg="12"
+            :md="12"
+            :xs="24"
+            v-if="fromState.external.upf_type === 'StandardUPF'"
+          >
+            <a-form-item label="DRIVER_TYPE" name="external.upf_driver_type">
+              <a-select
+                v-model:value="fromState.external.upf_driver_type"
+                :placeholder="t('common.selectPlease')"
+              >
+                <a-select-option value="vmxnet3">vmxnet3</a-select-option>
+                <a-select-option value="dpdk">dpdk</a-select-option>
+                <a-select-option value="host">host</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
         </a-row>
 
-        <a-row>
+        <a-row v-if="fromState.external.upf_type === 'LightUPF'">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="N3_IP" name="external.upfn3_ip">
+              <a-input
+                v-model:value="fromState.external.upfn3_ip"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> netwrok ip </template>
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="N3_GW" name="external.upfn3_gw">
+              <a-input
+                v-model:value="fromState.external.upfn3_gw"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> geteway </template>
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row v-if="fromState.external.upf_type === 'StandardUPF'">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="N3_IP" name="external.upfn3_ip">
               <a-input
@@ -294,13 +354,6 @@ watch(
                 </template>
               </a-input>
             </a-form-item>
-          </a-col>
-          <a-col
-            :lg="12"
-            :md="12"
-            :xs="24"
-            v-if="fromState.external.upf_type === 'StandardUPF'"
-          >
             <a-form-item label="N3_PCI" name="external.upfn3_pci">
               <a-input
                 v-model:value="fromState.external.upfn3_pci"
@@ -338,84 +391,86 @@ watch(
                 </template>
               </a-input>
             </a-form-item>
+            <a-form-item label="N3_NIC_NAME" name="external.upfn3_card_name">
+              <a-input
+                v-model:value="fromState.external.upfn3_card_name"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      use `ip a` show info, to inet name
+                      <br />
+                      or <br />
+                      use `lshw -class network -businfo` show device name
+                    </template>
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="N6_IP" name="external.upfn6_ip">
+              <a-input
+                v-model:value="fromState.external.upfn6_ip"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="N6_GW" name="external.upfn6_gw">
+              <a-input
+                v-model:value="fromState.external.upfn6_gw"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="N6_PCI" name="external.upfn6_pci">
+              <a-input
+                v-model:value="fromState.external.upfn6_pci"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="N6_MAC" name="external.upfn6_mac">
+              <a-input
+                v-model:value="fromState.external.upfn6_mac"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="N6_NIC_NAME" name="external.upfn6_card_name">
+              <a-input
+                v-model:value="fromState.external.upfn6_card_name"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      use `ip a` show info, to inet name
+                      <br />
+                      or <br />
+                      use `lshw -class network -businfo` show device name
+                    </template>
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
           </a-col>
         </a-row>
-        <template v-if="fromState.external.upf_type === 'StandardUPF'">
-          <a-row>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item label="N6_IP" name="external.upfn6_ip">
-                <a-input
-                  v-model:value="fromState.external.upfn6_ip"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                  :maxlength="50"
-                >
-                </a-input>
-              </a-form-item>
-              <a-form-item label="N6_GW" name="external.upfn6_gw">
-                <a-input
-                  v-model:value="fromState.external.upfn6_gw"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                  :maxlength="50"
-                >
-                </a-input>
-              </a-form-item>
-              <a-form-item label="DRIVER_TYPE" name="external.upf_driver_type">
-                <a-select
-                  v-model:value="fromState.external.upf_driver_type"
-                  :placeholder="t('common.selectPlease')"
-                >
-                  <a-select-option value="vmxnet3">vmxnet3</a-select-option>
-                  <a-select-option value="dpdk">dpdk</a-select-option>
-                  <a-select-option value="host">host</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item label="N6_PCI" name="external.upfn6_pci">
-                <a-input
-                  v-model:value="fromState.external.upfn6_pci"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                  :maxlength="50"
-                >
-                </a-input>
-              </a-form-item>
-              <a-form-item label="N6_MAC" name="external.upfn6_mac">
-                <a-input
-                  v-model:value="fromState.external.upfn6_mac"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                  :maxlength="50"
-                >
-                </a-input>
-              </a-form-item>
-              <a-form-item label="NIC_NAME" name="external.upf_card_name">
-                <a-input
-                  v-model:value="fromState.external.upf_card_name"
-                  allow-clear
-                  :placeholder="t('common.inputPlease')"
-                  :maxlength="50"
-                >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        use `ip a` show info, to inet name
-                        <br />
-                        or <br />
-                        use `lshw -class network -businfo` show device name
-                      </template>
-                      <InfoCircleOutlined
-                        style="opacity: 0.45; color: inherit"
-                      />
-                    </a-tooltip>
-                  </template>
-                </a-input>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </template>
       </a-col>
 
       <a-col :lg="8" :md="8" :xs="24">

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

@@ -166,8 +166,8 @@ function fnBeforeUploadFile(file: FileType) {
   const suff = fileName.substring(fileName.lastIndexOf('.'));
   if (!['.deb', '.rpm'].includes(suff)) {
     message.error(
-      t('views.configManage.softwareManage.onlyAble', {
-        fileText: '(.deb、.rpm)',
+      t('views.ne.neSoftware.fileTypeNotEq', {
+        txt: '(.deb、.rpm)',
       }),
       3
     );
@@ -238,8 +238,8 @@ function fnBeforeUploadFileDep(file: FileType) {
   const suff = fileName.substring(fileName.lastIndexOf('.'));
   if (!['.deb', '.rpm'].includes(suff)) {
     message.error(
-      t('views.configManage.softwareManage.onlyAble', {
-        fileText: '(.deb、.rpm)',
+      t('views.ne.neSoftware.fileTypeNotEq', {
+        txt: '(.deb、.rpm)',
       }),
       3
     );

src/views/ne/neSoftware/components/UploadMoreFile.vue

@@ -171,8 +171,8 @@ function fnBeforeUploadFile(file: FileType) {
   const suff = fileName.substring(fileName.lastIndexOf('.'));
   if (!['.deb', '.rpm'].includes(suff)) {
     message.error(
-      t('views.configManage.softwareManage.onlyAble', {
-        fileText: '(.deb、.rpm)',
+      t('views.ne.neSoftware.fileTypeNotEq', {
+        txt: '(.deb、.rpm)',
       }),
       3
     );
@@ -286,8 +286,8 @@ function fnBeforeUploadFileDep(file: FileType) {
   const suff = fileName.substring(fileName.lastIndexOf('.'));
   if (!['.deb', '.rpm'].includes(suff)) {
     message.error(
-      t('views.configManage.softwareManage.onlyAble', {
-        fileText: '(.deb、.rpm)',
+      t('views.ne.neSoftware.fileTypeNotEq', {
+        txt: '(.deb、.rpm)',
       }),
       3
     );

src/views/ne/neVersion/index.vue

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

src/views/neUser/auth/index.vue

@@ -25,6 +25,7 @@ import {
   listUDMAuth,
 } from '@/api/neData/udm_auth';
 import { uploadFile } from '@/api/tool/file';
+import { getNeViewFile } from '@/api/tool/neFile';
 const { t } = useI18n();
 
 /**网元参数 */
@@ -98,12 +99,6 @@ let tableColumns = ref<ColumnsType>([
     align: 'center',
     width: 80,
   },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    align: 'center',
-    width: 80,
-  },
   // {
   //   title: 'KI',
   //   dataIndex: 'ki',
@@ -598,6 +593,8 @@ type ModalUploadImportStateType = {
   loading: boolean;
   /**上传结果信息 */
   msg: string;
+  /**含失败信息 */
+  hasFail: boolean;
   /**导入类型 */
   typeOptions: { label: string; value: string }[];
   /**表单 */
@@ -610,6 +607,7 @@ let uploadImportState: ModalUploadImportStateType = reactive({
   title: t('components.UploadModal.uploadTitle'),
   loading: false,
   msg: '',
+  hasFail: false,
   typeOptions: [
     { label: 'Default', value: 'default' },
     { label: 'K4', value: 'k4' },
@@ -626,9 +624,37 @@ function fnModalUploadImportTypeChange() {
   uploadImportState.msg = '';
 }
 
+/**对话框表格信息导入失败原因 */
+function fnModalUploadImportFailReason() {
+  const neId = queryParams.neId;
+  if (!neId) return;
+  const hide = message.loading(t('common.loading'), 0);
+  getNeViewFile({
+    neType: 'UDM',
+    neId: neId,
+    path: '/tmp',
+    fileName: 'import_authdata_err_records.txt',
+  })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('common.operateOk'), 3);
+        const blob = new Blob([res.data], {
+          type: 'text/plain',
+        });
+        saveAs(blob, `import_authdata_err_records_${Date.now()}.txt`);
+      } else {
+        message.error(`${res.msg}`, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+    });
+}
+
 /**对话框表格信息导入弹出窗口 */
 function fnModalUploadImportOpen() {
   uploadImportState.msg = '';
+  uploadImportState.hasFail = false;
   uploadImportState.from.typeVal = 'default';
   uploadImportState.from.typeData = undefined;
   uploadImportState.loading = false;
@@ -675,6 +701,14 @@ function fnModalUploadImportUpload(file: File) {
     .then(res => {
       if (!res) return;
       uploadImportState.msg = res.msg;
+      const regex = /fail num: (\d+)/;
+      const match = res.msg.match(regex);
+      if (match) {
+        const failNum = Number(match[1]);
+        uploadImportState.hasFail = failNum > 0;
+      } else {
+        uploadImportState.hasFail = false;
+      }
     })
     .finally(() => {
       hide();
@@ -973,25 +1007,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.neUser.auth.numAdd')"
-              name="num"
-              v-bind="modalStateFrom.validateInfos.num"
-              v-show="!modalState.from.id"
-            >
-              <a-input-number
-                v-model:value="modalState.from.num"
-                style="width: 100%"
-                :min="1"
-                :max="10000"
-                placeholder="<=10000"
-              ></a-input-number>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row>
+        <a-row v-show="!modalState.from.id">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               label="IMSI"
@@ -1019,11 +1035,20 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="Status" name="status">
-              <a-select value="1">
-                <a-select-option value="1">Active</a-select-option>
-                <a-select-option value="0">Inactive</a-select-option>
-              </a-select>
+            <a-form-item
+              :label="t('views.neUser.auth.numAdd')"
+              name="num"
+              v-bind="modalStateFrom.validateInfos.num"
+              :label-col="{ span: 10 }"
+              :labelWrap="false"
+            >
+              <a-input-number
+                v-model:value="modalState.from.num"
+                style="width: 100%"
+                :min="1"
+                :max="10000"
+                placeholder="<=10000"
+              ></a-input-number>
             </a-form-item>
           </a-col>
         </a-row>
@@ -1056,6 +1081,8 @@ onMounted(() => {
               label="Algo Index"
               name="algo"
               v-bind="modalStateFrom.validateInfos.algoIndex"
+              :label-col="{ span: 10 }"
+              :labelWrap="false"
             >
               <a-input-number
                 v-model:value="modalState.from.algoIndex"
@@ -1141,7 +1168,7 @@ onMounted(() => {
       <a-form
         name="modalStateBatchDelFrom"
         layout="horizontal"
-        :label-col="{ span: 6 }"
+        :label-col="{ span: 8 }"
         :labelWrap="true"
       >
         <a-row>
@@ -1210,13 +1237,23 @@ onMounted(() => {
           v-model:value="uploadImportState.from.typeData"
           :placeholder="t('common.inputPlease')"
         />
-        <a-textarea
-          :disabled="true"
-          :hidden="!uploadImportState.msg"
-          :value="uploadImportState.msg"
-          :auto-size="{ minRows: 2, maxRows: 8 }"
-          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
-        />
+        <a-alert
+          :message="uploadImportState.msg"
+          :type="uploadImportState.hasFail ? 'warning' : 'info'"
+          v-show="uploadImportState.msg.length > 0"
+        >
+          <template #action>
+            <a-button
+              size="small"
+              type="link"
+              danger
+              @click="fnModalUploadImportFailReason"
+              v-if="uploadImportState.hasFail"
+            >
+              {{ t('views.neUser.auth.importFail') }}
+            </a-button>
+          </template>
+        </a-alert>
       </template>
     </UploadModal>
   </PageContainer>

src/views/neUser/base5G/index.vue

@@ -314,6 +314,7 @@ onMounted(() => {
                 v-model:value="queryParams.neType"
                 :options="neCascaderOptions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnGetList(1)"
               />
             </a-form-item>
           </a-col>

src/views/neUser/exportFile/index.vue

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

src/views/neUser/sub/index.vue

@@ -25,6 +25,7 @@ import {
   updateUDMSub,
 } from '@/api/neData/udm_sub';
 import { uploadFile } from '@/api/tool/file';
+import { getNeViewFile } from '@/api/tool/neFile';
 const { t } = useI18n();
 
 /**网元参数 */
@@ -276,7 +277,7 @@ let modalState: ModalStateType = reactive({
     //
     smData: '',
     smfSel: 'def_snssai',
-    cag: 'def_cag',
+    cag: '',
     // 非字段
     num: 1,
     remark: '',
@@ -544,8 +545,22 @@ function transformFormData(data: any) {
               smStaticIpArr.push(dnnParts);
             }
             if (!dnnParts.includes('/') && !dnnParts.includes(':')) {
-              //IPV4 没有/ 也没有：
-              smStaticIpArr.push(dnnParts);
+              const pattern = /^(\d{1,3}\.){3}\d{1,3}$/;
+              if (pattern.test(dnnParts)) {
+                // 验证数值范围
+                const isValid = dnnParts.split('.').every((num: any) => {
+                  const n = parseInt(num, 10);
+                  return n >= 0 && n <= 255;
+                });
+
+                // 只有当验证通过时才添加 IP
+                if (isValid) {
+                  smStaticIpArr.push(dnnParts);
+                }
+              } else {
+                //无/ 无:也有可能为dnn的字符串
+                smallRowJson.dnn += '-' + dnnParts;
+              }
             }
 
             if (dnnParts.includes('/') && !dnnParts.includes(':')) {
@@ -958,6 +973,8 @@ type ModalUploadImportStateType = {
   loading: boolean;
   /**上传结果信息 */
   msg: string;
+  /**含失败信息 */
+  hasFail: boolean;
 };
 
 /**对话框表格信息导入对象信息状态 */
@@ -966,11 +983,40 @@ let uploadImportState: ModalUploadImportStateType = reactive({
   title: t('components.UploadModal.uploadTitle'),
   loading: false,
   msg: '',
+  hasFail: false,
 });
 
+/**对话框表格信息导入失败原因 */
+function fnModalUploadImportFailReason() {
+  const neId = queryParams.neId;
+  if (!neId) return;
+  const hide = message.loading(t('common.loading'), 0);
+  getNeViewFile({
+    neType: 'UDM',
+    neId: neId,
+    path: '/tmp',
+    fileName: 'import_udmuser_err_records.txt',
+  })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('common.operateOk'), 3);
+        const blob = new Blob([res.data], {
+          type: 'text/plain',
+        });
+        saveAs(blob, `import_udmuser_err_records_${Date.now()}.txt`);
+      } else {
+        message.error(`${res.msg}`, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+    });
+}
+
 /**对话框表格信息导入弹出窗口 */
 function fnModalUploadImportOpen() {
   uploadImportState.msg = '';
+  uploadImportState.hasFail = false;
   uploadImportState.loading = false;
   uploadImportState.open = true;
 }
@@ -1014,6 +1060,14 @@ function fnModalUploadImportUpload(file: File) {
     .then(res => {
       if (!res) return;
       uploadImportState.msg = res.msg;
+      const regex = /fail num: (\d+)/;
+      const match = res.msg.match(regex);
+      if (match) {
+        const failNum = Number(match[1]);
+        uploadImportState.hasFail = failNum > 0;
+      } else {
+        uploadImportState.hasFail = false;
+      }
     })
     .finally(() => {
       hide();
@@ -1222,7 +1276,9 @@ onMounted(() => {
             :loading="modalState.loadDataLoading"
             @click.prevent="fnRecordDelete('0')"
           >
-            <template #icon><DeleteOutlined /></template>
+            <template #icon>
+              <DeleteOutlined />
+            </template>
             {{ t('views.neUser.sub.checkDel') }}
           </a-button>
 
@@ -1238,7 +1294,9 @@ onMounted(() => {
               type="default"
               :disabled="tableState.selectedRowKeys.length <= 0"
             >
-              <template #icon><ExportOutlined /></template>
+              <template #icon>
+                <ExportOutlined />
+              </template>
               {{ t('views.neUser.sub.checkExport') }}
             </a-button>
           </a-popconfirm>
@@ -1260,19 +1318,24 @@ onMounted(() => {
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
+              <template #icon>
+                <ReloadOutlined />
+              </template>
             </a-button>
           </a-tooltip>
           <TableColumnsDnd
             cache-id="udmSubData"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
-          ></TableColumnsDnd>
+          >
+          </TableColumnsDnd>
           <a-tooltip placement="topRight">
             <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown placement="bottomRight" trigger="click">
               <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
               </a-button>
               <template #overlay>
                 <a-menu
@@ -1306,7 +1369,7 @@ onMounted(() => {
         :pagination="tablePagination"
         :scroll="{ y: 'calc(100vh - 480px)' }"
         @change="fnTableChange"
-        @resizeColumn="(w:number, col:any) => (col.width = w)"
+        @resizeColumn="(w: number, col: any) => (col.width = w)"
         :row-selection="{
           type: 'checkbox',
           selectedRowKeys: tableState.selectedRowKeys,
@@ -1380,12 +1443,13 @@ onMounted(() => {
         :labelWrap="true"
       >
         <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
+          <a-col :lg="12" :md="12" :xs="24" v-show="!modalState.from.id">
             <a-form-item
               :label="t('views.neUser.sub.numAdd')"
               name="num"
               v-bind="modalStateFrom.validateInfos.num"
-              v-show="!modalState.from.id"
+              :label-col="{ span: 12 }"
+              :labelWrap="false"
             >
               <a-input-number
                 v-model:value="modalState.from.num"
@@ -1504,7 +1568,11 @@ onMounted(() => {
               <a-row>
                 <a-col :span="4">
                   <a-tooltip title="Add DNN">
-                    <a-button shape="circle" @click="addSmallRow(row.id)">
+                    <a-button
+                      shape="circle"
+                      @click="addSmallRow(row.id)"
+                      style="margin-left: 10px"
+                    >
                       <template #icon><plus-square-outlined /></template>
                     </a-button>
                   </a-tooltip>
@@ -1526,7 +1594,7 @@ onMounted(() => {
             :key="String(smallRow.id)"
           >
             <a-row>
-              <a-col :lg="6" :md="7" :xs="24">
+              <a-col :lg="6" :md="6" :xs="24">
                 <a-form-item
                   label="DNN/APN"
                   name="dnn"
@@ -1537,7 +1605,7 @@ onMounted(() => {
                   <a-input v-model:value="smallRow.dnn" allow-clear></a-input>
                 </a-form-item>
               </a-col>
-              <a-col :lg="8" :md="6" :xs="24">
+              <a-col :lg="8" :md="8" :xs="24">
                 <a-form-item
                   label="Static IP"
                   name="smStaticIp"
@@ -1550,16 +1618,21 @@ onMounted(() => {
                 </a-form-item>
               </a-col>
               <a-col :lg="8" :md="8" :xs="24">
-                <a-form-item label="Routing Behind MS IP" name="msIp">
+                <a-form-item
+                  label="Routing Behind MS IP"
+                  style="margin-left: 10px"
+                  name="msIp"
+                >
                   <a-input v-model:value="smallRow.msIp" allow-clear></a-input>
                 </a-form-item>
               </a-col>
-              <a-col :lg="1" :md="1" :xs="24" v-if="smallIndex !== 0">
+              <a-col :lg="2" :md="2" :xs="24" v-if="smallIndex !== 0">
                 <a-tooltip title="Delete DNN">
                   <a-button
                     danger
                     shape="circle"
                     @click="delDNN(smallIndex, row.id)"
+                    style="margin-left: 10px"
                   >
                     <template #icon><close-square-outlined /></template>
                   </a-button>
@@ -1975,7 +2048,7 @@ onMounted(() => {
       <a-form
         name="modalStateBatchDelFrom"
         layout="horizontal"
-        :label-col="{ span: 6 }"
+        :label-col="{ span: 8 }"
         :labelWrap="true"
       >
         <a-row>
@@ -2034,13 +2107,23 @@ onMounted(() => {
       :size="10"
     >
       <template #default>
-        <a-textarea
-          :disabled="true"
-          :hidden="!uploadImportState.msg"
-          :value="uploadImportState.msg"
-          :auto-size="{ minRows: 2, maxRows: 8 }"
-          style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
-        />
+        <a-alert
+          :message="uploadImportState.msg"
+          :type="uploadImportState.hasFail ? 'warning' : 'info'"
+          v-show="uploadImportState.msg.length > 0"
+        >
+          <template #action>
+            <a-button
+              size="small"
+              type="link"
+              danger
+              @click="fnModalUploadImportFailReason"
+              v-if="uploadImportState.hasFail"
+            >
+              {{ t('views.neUser.auth.importFail') }}
+            </a-button>
+          </template>
+        </a-alert>
       </template>
     </UploadModal>
   </PageContainer>

src/views/neUser/ue/index.vue

@@ -6,7 +6,7 @@ import { message } 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 { listSMFSubscribers } from '@/api/neData/smf';
+import { listSMFSubList } from '@/api/neData/smf';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -224,7 +224,7 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  listSMFSubscribers(toRaw(queryParams)).then(res => {
+  listSMFSubList(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       tablePagination.total = res.total;
       tableState.data = res.rows;

src/views/perfManage/customTarget/index.vue

@@ -154,7 +154,9 @@ function fnTableSize({ key }: MenuInfo) {
 function fnRecordDelete(row: Record<string, any>) {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.perfManage.customTarget.delCustomTip', { num: row.kpiId }),
+    content: t('views.perfManage.customTarget.delCustomTip', {
+      num: row.kpiId,
+    }),
     onOk() {
       const key = 'delThreshold';
       message.loading({ content: t('common.loading'), key });
@@ -385,8 +387,10 @@ function fnModalOk() {
         message.error(t('views.perfManage.customTarget.expressionNoIdTip'), 3);
         return false;
       }
-      modalState.from.expression = result;
-      const from = toRaw(modalState.from);
+      //modalState.from.expression = result;
+      //const from = toRaw(modalState.from);
+      const from = { ...toRaw(modalState.from) };
+      from.expression = result;
       //return false;
       modalState.confirmLoading = true;
       const perfTask = from.id ? updateCustom(from) : addCustom(from);
@@ -434,7 +438,6 @@ function fnModalCancel() {
  * 选择性能指标,填充进当前计算公式的值
  */
 function fnSelectPer(s: any, option: any) {
-  console.log(option);
   modalState.from.expression += `'${option.label}'`;
 }
 
@@ -695,7 +698,6 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-
         <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
@@ -724,6 +726,7 @@ onMounted(() => {
         >
           <a-input
             v-model:value="modalState.from.expression"
+            :disabled="modalState.from.id"
             :maxlength="1024"
             autocomplete="off"
             allow-clear
@@ -780,7 +783,6 @@ onMounted(() => {
                   },
                 ]"
               >
-
               </a-auto-complete>
             </a-form-item>
           </a-col>

src/views/perfManage/goldTarget/index.vue

@@ -23,6 +23,7 @@ import {
   nextTick,
   onBeforeUnmount,
   h,
+  watch,
 } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal, TableColumnType } from 'ant-design-vue/es';
@@ -43,6 +44,8 @@ import { generateColorRGBA } from '@/utils/generate-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { useRoute } from 'vue-router';
 import { LineOutlined } from '@ant-design/icons-vue';
+import useLayoutStore from '@/store/modules/layout';
+const layoutStore = useLayoutStore();
 const neInfoStore = useNeInfoStore();
 const route = useRoute();
 const { t, currentLocale } = useI18n();
@@ -216,12 +219,25 @@ const statsColumns: TableColumnType<any>[] = [
     key: 'title',
     width: '65%',
   },
+  {
+    title: t('views.perfManage.kpiOverView.totalValue'),
+    dataIndex: 'total',
+    key: 'total',
+    width: '24%',
+    sortDirections: ['ascend', 'descend'],
+  },
+  {
+    title: t('views.perfManage.kpiOverView.avgValue'),
+    dataIndex: 'avg',
+    key: 'avg',
+    width: '24%',
+    sortDirections: ['ascend', 'descend'],
+  },
   {
     title: t('views.perfManage.kpiOverView.maxValue'),
     dataIndex: 'max',
     key: 'max',
     width: '17%',
-    sorter: (a: any, b: any) => a.max - b.max, // 添加排序函数
     sortDirections: ['ascend', 'descend'],
   },
   {
@@ -229,7 +245,6 @@ const statsColumns: TableColumnType<any>[] = [
     dataIndex: 'min',
     key: 'min',
     width: '17%',
-    sorter: (a: any, b: any) => a.min - b.min, // 添加排序函数
     sortDirections: ['ascend', 'descend'],
   },
 ];
@@ -389,11 +404,23 @@ function fnGetList() {
           const values = tableState.data.map((item: any) => {
             return item[columns.key] ? Number(item[columns.key]) : 0;
           });
+
+          // 计算总值
+          const total = Number(
+            values.reduce((sum, val) => sum + val, 0).toFixed(2)
+          );
+
+          // 计算平均值
+          const avg =
+            values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
+
           kpiStats.value.push({
             kpiId: columns.key,
             title: columns.title,
             max: values.length > 0 ? Math.max(...values) : 0,
             min: values.length > 0 ? Math.min(...values) : 0,
+            avg: avg,
+            total: total,
           });
         }
       }
@@ -418,6 +445,7 @@ function fnRanderChart() {
       position: function (pt: any) {
         return [pt[0], '10%'];
       },
+      confine: true, // 限制 tooltip 显示范围
     },
     xAxis: {
       //x类别轴
@@ -500,6 +528,9 @@ function fnRanderChartData() {
       key: `${columns.key}`,
       type: 'line',
       symbol: 'none',
+      symbolSize: 6,
+      smooth: 0.6,
+      showSymbol: true,
       sampling: 'lttb',
       itemStyle: {
         color: color,
@@ -549,8 +580,34 @@ function fnRanderChartData() {
       xAxis: {
         type: 'category',
         boundaryGap: false,
+        axisLabel: {
+          color:
+            document.documentElement.getAttribute('data-theme') === 'dark'
+              ? '#CACADA'
+              : '#333',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: getSplitLineColor(),
+          },
+        },
         data: chartDataXAxisData,
       },
+      yAxis: {
+        axisLabel: {
+          color:
+            document.documentElement.getAttribute('data-theme') === 'dark'
+              ? '#CACADA'
+              : '#333',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: getSplitLineColor(),
+          },
+        },
+      },
       series: chartDataYSeriesData,
     },
     {
@@ -647,29 +704,38 @@ function wsMessage(res: Record<string, any>) {
 }
 
 // 添加一个变量来跟踪当前选中的行
-const selectedRow = ref<string | null>(null);
+const selectedRow = ref<string[]>([]);
 
 // 添加处理行点击的方法
 function handleRowClick(record: any) {
-  if (selectedRow.value === record.kpiId) {
-    // 如果点击的是当前选中的行，则取消选中
-    selectedRow.value = null;
-    // 更新图表，显示所有指标
-    for (let key in chartLegendSelected) {
-      chartLegendSelected[key] = true;
-    }
+  const index = selectedRow.value.indexOf(record.kpiId);
+
+  // 如果已经选中，取消选中
+  if (index > -1) {
+    selectedRow.value.splice(index, 1);
+    chartLegendSelected[record.title] = false;
   } else {
-    // 选中新行
-    selectedRow.value = record.kpiId;
-    // 更新图表，只显示选中的指标
-    for (let key in chartLegendSelected) {
-      if (key === record.title) {
-        chartLegendSelected[key] = true;
-      } else {
+    // 添加新的选中项
+    selectedRow.value.push(record.kpiId);
+
+    // 如果只有一个选中项，重置为 false
+    if (selectedRow.value.length === 1) {
+      Object.keys(chartLegendSelected).forEach(key => {
         chartLegendSelected[key] = false;
-      }
+      });
     }
+
+    chartLegendSelected[record.title] = true;
   }
+
+  // 如果没有选中项，设置所有图例为 true
+  if (selectedRow.value.length === 0) {
+    Object.keys(chartLegendSelected).forEach(key => {
+      chartLegendSelected[key] = true;
+    });
+  }
+
+  // 更新图表设置
   kpiChart.value.setOption({
     legend: {
       selected: chartLegendSelected,
@@ -677,6 +743,63 @@ function handleRowClick(record: any) {
   });
 }
 
+// 添加一个函数来获取当前主题下的网格线颜色
+function getSplitLineColor() {
+  return document.documentElement.getAttribute('data-theme') === 'dark'
+    ? '#333333'
+    : '#E8E8E8'; // 亮色模式返回 undefined，使用默认颜色
+}
+
+// 监听主题变化
+watch(
+  () => layoutStore.proConfig.theme, // 监听的值
+  newValue => {
+    if (kpiChart.value) {
+      const splitLineColor = getSplitLineColor();
+      // 绘制图数据
+      kpiChart.value.setOption({
+        tooltip: {
+          trigger: 'axis',
+          position: function (pt: any) {
+            return [pt[0], '10%'];
+          },
+          confine: true, // 限制 tooltip 显示范围
+          backgroundColor:
+            newValue === 'dark'
+              ? 'rgba(48, 48, 48, 0.8)'
+              : 'rgba(255, 255, 255, 0.9)',
+          borderColor: newValue === 'dark' ? '#555' : '#ddd',
+          textStyle: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+        },
+        xAxis: {
+          axisLabel: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: splitLineColor,
+            },
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: splitLineColor,
+            },
+          },
+        },
+      });
+    }
+  }
+);
+
 onMounted(() => {
   // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
   // 获取网元网元列表
@@ -714,11 +837,16 @@ onMounted(() => {
         }
 
         // 查询当前小时
-        const nowDate: Date = new Date();
-        nowDate.setMinutes(0, 0, 0);
-        queryRangePicker.value[0] = `${nowDate.getTime()}`;
-        nowDate.setMinutes(59, 59, 59);
-        queryRangePicker.value[1] = `${nowDate.getTime()}`;
+        const now = new Date();
+        now.setMinutes(0, 0, 0);
+        // 设置起始时间为整点前一小时
+        const startTime = new Date(now);
+        startTime.setHours(now.getHours() - 1);
+        queryRangePicker.value[0] = `${startTime.getTime()}`;
+        // 设置结束时间为整点
+        const endTime = new Date(now);
+        endTime.setMinutes(59, 59, 59);
+        queryRangePicker.value[1] = `${endTime.getTime()}`;
         fnGetListTitle();
         // 绘图
         fnRanderChart();
@@ -800,7 +928,9 @@ onBeforeUnmount(() => {
                   :loading="tableState.loading"
                   @click.prevent="fnGetListTitle()"
                 >
-                  <template #icon><SearchOutlined /></template>
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
                   {{ t('common.search') }}
                 </a-button>
               </a-space>
@@ -819,7 +949,9 @@ onBeforeUnmount(() => {
             :loading="tableState.loading"
             @click.prevent="fnChangShowType()"
           >
-            <template #icon> <AreaChartOutlined /> </template>
+            <template #icon>
+              <AreaChartOutlined />
+            </template>
             {{
               tableState.showTable
                 ? t('views.perfManage.goldTarget.kpiChartTitle')
@@ -846,12 +978,13 @@ onBeforeUnmount(() => {
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
+              <template #icon>
+                <ReloadOutlined />
+              </template>
             </a-button>
           </a-tooltip>
           <TableColumnsDnd
             v-if="tableColumns.length > 0"
-            :cache-id="`kpiTarget_${state.neType[0]}`"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
@@ -859,7 +992,9 @@ onBeforeUnmount(() => {
             <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown trigger="click" placement="bottomRight">
               <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
               </a-button>
               <template #overlay>
                 <a-menu
@@ -921,7 +1056,7 @@ onBeforeUnmount(() => {
         :size="tableState.size"
         :pagination="tablePagination"
         :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
-        @resizeColumn="(w:number, col:any) => (col.width = w)"
+        @resizeColumn="(w: number, col: any) => (col.width = w)"
         :show-expand-column="false"
         @change="fnTableChange"
       >
@@ -948,12 +1083,67 @@ onBeforeUnmount(() => {
             :scroll="{ y: 250 }"
             size="small"
             :custom-row="
-              record => ({
+              (record:any) => ({
                 onClick: () => handleRowClick(record),
-                class: record.kpiId === selectedRow ? 'selected-row' : '',
+                class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
               })
             "
-          />
+          >
+            <template #headerCell="{ column }">
+              <template v-if="column.key === 'total'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.totalValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.totalValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+              <template v-if="column.key === 'avg'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.avgValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.avgValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+              <template v-if="column.key === 'max'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.maxValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.maxValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+              <template v-if="column.key === 'min'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.minValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.minValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+            </template>
+          </a-table>
         </div>
       </div>
     </a-card>

src/views/perfManage/kpiCReport/index.vue

@@ -23,6 +23,7 @@ import {
   nextTick,
   onBeforeUnmount,
   h,
+  watch,
 } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal, TableColumnType } from 'ant-design-vue/es';
@@ -45,6 +46,8 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { LineOutlined } from '@ant-design/icons-vue';
 import { useRoute } from 'vue-router';
 import dayjs, { Dayjs } from 'dayjs';
+import useLayoutStore from '@/store/modules/layout';
+const layoutStore = useLayoutStore();
 const neInfoStore = useNeInfoStore();
 const route = useRoute();
 const { t, currentLocale } = useI18n();
@@ -82,12 +85,19 @@ let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**时间选择 */
 const ranges = ref([
-  {label:t('views.perfManage.customTarget.sixHoursAgo'),value:[dayjs().subtract(6, 'hours'),
-      dayjs(),]},
-  {label:t('views.perfManage.customTarget.threeHoursAgo'),value:[dayjs().subtract(3, 'hours'),
-      dayjs(),]},
-  {label:t('views.monitor.monitor.today'),value:[dayjs().startOf('day'), dayjs()]},
-])
+  {
+    label: t('views.perfManage.customTarget.sixHoursAgo'),
+    value: [dayjs().subtract(6, 'hours'), dayjs()],
+  },
+  {
+    label: t('views.perfManage.customTarget.threeHoursAgo'),
+    value: [dayjs().subtract(3, 'hours'), dayjs()],
+  },
+  {
+    label: t('views.monitor.monitor.today'),
+    value: [dayjs().startOf('day'), dayjs()],
+  },
+]);
 
 /**表格字段列 */
 let tableColumns = ref<any[]>([]);
@@ -203,6 +213,13 @@ const kpiColors = new Map<string, string>();
 //legend表格数据
 const kpiStats: any = ref([]);
 
+// 添加一个函数来获取当前主题下的网格线颜色
+function getSplitLineColor() {
+  return document.documentElement.getAttribute('data-theme') === 'dark'
+    ? '#333333'
+    : '#E8E8E8'; // 亮色模式返回 undefined，使用默认颜色
+}
+
 // 添加表格列定义
 const statsColumns: TableColumnType<any>[] = [
   {
@@ -223,22 +240,33 @@ const statsColumns: TableColumnType<any>[] = [
     title: t('views.perfManage.kpiOverView.kpiName'),
     dataIndex: 'title',
     key: 'title',
-    width: '65%',
   },
+  // {
+  //   title: t('views.perfManage.kpiOverView.totalValue'),
+  //   dataIndex: 'total',
+  //   key: 'total',
+  //   width: '12%',
+  //   sortDirections: ['ascend', 'descend'],
+  // },
+  // {
+  //   title: t('views.perfManage.kpiOverView.avgValue'),
+  //   dataIndex: 'avg',
+  //   key: 'avg',
+  //   width: '24%',
+  //   sortDirections: ['ascend', 'descend'],
+  // },
   {
     title: t('views.perfManage.kpiOverView.maxValue'),
     dataIndex: 'max',
     key: 'max',
-    width: '17%',
-    sorter: (a: any, b: any) => a.max - b.max, // 添加排序函数
+    width: '200px',
     sortDirections: ['ascend', 'descend'],
   },
   {
     title: t('views.perfManage.kpiOverView.minValue'),
     dataIndex: 'min',
     key: 'min',
-    width: '17%',
-    sorter: (a: any, b: any) => a.min - b.min, // 添加排序函数
+    width: '200px',
     sortDirections: ['ascend', 'descend'],
   },
 ];
@@ -304,6 +332,8 @@ function fnGetListTitle() {
   var language = currentLocale.value.split('_')[0];
   if (language === 'zh') language = 'cn';
 
+  if (!state.neType[0]) return false;
+
   // 获取表头文字
   listCustom({ neType: state.neType[0], status: 'Active' })
     .then(res => {
@@ -316,6 +346,7 @@ function fnGetListTitle() {
           tableState.data = [];
           tableColumns.value = [];
           tableColumnsDnd.value = [];
+          kpiStats.value = []; //清空数据
           fnRanderChartData();
           return false;
         }
@@ -331,6 +362,7 @@ function fnGetListTitle() {
             dataIndex: kpiValue,
             align: 'left',
             key: kpiValue,
+            unit: item[`unit`],
             resizable: true,
             width: 100,
             minWidth: 150,
@@ -390,6 +422,11 @@ function fnGetList() {
             content: t('common.noData'),
             duration: 2,
           });
+          tableState.data = [];
+          // tableColumns.value = [];
+          // tableColumnsDnd.value = [];
+          kpiStats.value = []; //清空数据
+          fnRanderChartData();
           return false;
         }
         return true;
@@ -413,11 +450,42 @@ function fnGetList() {
           const values = tableState.data.map((item: any) => {
             return item[columns.key] ? Number(item[columns.key]) : 0;
           });
+
+          // 计算总值
+          const total = Number(
+            values.reduce((sum, val) => sum + val, 0).toFixed(2)
+          );
+          // 计算平均值
+          const avg =
+            values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
           kpiStats.value.push({
             kpiId: columns.key,
             title: columns.title,
+            unit: columns.unit,
             max: values.length > 0 ? Math.max(...values) : 0,
             min: values.length > 0 ? Math.min(...values) : 0,
+            avg,
+            total: total,
+          });
+        }
+      } else {
+        kpiStats.value = [];
+        for (const columns of tableColumns.value) {
+          if (
+            columns.key === 'neName' ||
+            columns.key === 'startIndex' ||
+            columns.key === 'timeGroup'
+          ) {
+            continue;
+          }
+          kpiStats.value.push({
+            kpiId: columns.key,
+            title: columns.title,
+            unit: columns.unit,
+            max: 0,
+            min: 0,
+            avg: 0,
+            total: 0,
           });
         }
       }
@@ -441,6 +509,21 @@ function fnRanderChart() {
       position: function (pt: any) {
         return [pt[0], '10%'];
       },
+      confine: true, // 限制 tooltip 显示范围
+      backgroundColor:
+        document.documentElement.getAttribute('data-theme') === 'dark'
+          ? 'rgba(48, 48, 48, 0.8)'
+          : 'rgba(255, 255, 255, 0.9)',
+      borderColor:
+        document.documentElement.getAttribute('data-theme') === 'dark'
+          ? '#555'
+          : '#ddd',
+      textStyle: {
+        color:
+          document.documentElement.getAttribute('data-theme') === 'dark'
+            ? '#CACADA'
+            : '#333',
+      },
     },
     xAxis: {
       type: 'category',
@@ -519,6 +602,9 @@ function fnRanderChartData() {
       key: `${columns.key}`,
       type: 'line',
       symbol: 'none',
+      symbolSize: 6,
+      smooth: 0.6,
+      showSymbol: true,
       sampling: 'lttb',
       itemStyle: {
         color: color,
@@ -548,6 +634,7 @@ function fnRanderChartData() {
 
   for (const item of orgData) {
     const keys = Object.keys(item);
+    //console.log(keys,item);
     for (const y of chartDataYSeriesData) {
       for (const key of keys) {
         if (y.key === key) {
@@ -557,8 +644,10 @@ function fnRanderChartData() {
       }
     }
   }
-  ///console.log(queryParams.sortOrder, chartDataXAxisData);
-  console.log(chartDataXAxisData, chartDataYSeriesData);
+  chartDataXAxisData = Array.from(new Set(chartDataXAxisData));
+
+  //console.log(queryParams.sortOrder, chartDataXAxisData);
+  //console.log(chartDataXAxisData, chartDataYSeriesData);
 
   // 绘制图数据
   kpiChart.value.setOption(
@@ -569,8 +658,34 @@ function fnRanderChartData() {
       xAxis: {
         type: 'category',
         boundaryGap: false,
+        axisLabel: {
+          color:
+            document.documentElement.getAttribute('data-theme') === 'dark'
+              ? '#CACADA'
+              : '#333',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: getSplitLineColor(),
+          },
+        },
         data: chartDataXAxisData,
       },
+      yAxis: {
+        axisLabel: {
+          color:
+            document.documentElement.getAttribute('data-theme') === 'dark'
+              ? '#CACADA'
+              : '#333',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: getSplitLineColor(),
+          },
+        },
+      },
       series: chartDataYSeriesData,
     },
     {
@@ -579,18 +694,6 @@ function fnRanderChartData() {
   );
 }
 
-/**图表折线显示全部 */
-function fnLegendSelected(bool: any) {
-  for (const key of Object.keys(chartLegendSelected)) {
-    chartLegendSelected[key] = bool;
-  }
-  kpiChart.value.setOption({
-    legend: {
-      selected: chartLegendSelected,
-    },
-  });
-}
-
 /**图表实时统计 */
 function fnRealTimeSwitch(bool: any) {
   if (bool) {
@@ -667,29 +770,54 @@ function wsMessage(res: Record<string, any>) {
 }
 
 // 添加一个变量来跟踪当前选中的行
-const selectedRow = ref<string | null>(null);
+const selectedRow = ref<string[]>([]);
 
+const selectedUnit = ref<string | null>(null);
 // 添加处理行点击的方法
 function handleRowClick(record: any) {
-  if (selectedRow.value === record.kpiId) {
-    // 如果点击的是当前选中的行，则取消选中
-    selectedRow.value = null;
-    // 更新图表，显示所有指标
-    for (let key in chartLegendSelected) {
-      chartLegendSelected[key] = true;
+  const index = selectedRow.value.indexOf(record.kpiId);
+  // 如果已经选中，取消选中
+  if (index > -1) {
+    selectedRow.value.splice(index, 1);
+    chartLegendSelected[record.title] = false;
+    // 如果取消选中的是最后一个，重置 selectedUnit
+    if (selectedRow.value.length === 0) {
+      selectedUnit.value = null;
     }
   } else {
-    // 选中新行
-    selectedRow.value = record.kpiId;
-    // 更新图表，只显示选中的指标
-    for (let key in chartLegendSelected) {
-      if (key === record.title) {
-        chartLegendSelected[key] = true;
-      } else {
-        chartLegendSelected[key] = false;
-      }
+    // 检查单位是否一致
+    if (selectedUnit.value && selectedUnit.value !== record.unit) {
+      message.error(
+        `${t('views.perfManage.customTarget.unitSelect')} ${selectedUnit.value}`
+      );
+      return;
     }
+
+    // 添加新的选中项
+    selectedRow.value.push(record.kpiId);
+
+    // 设置选中的单位
+    if (!selectedUnit.value) {
+      selectedUnit.value = record.unit;
+    }
+
+    // 如果只有一个选中项，重置为 false
+    if (selectedRow.value.length === 1) {
+      Object.keys(chartLegendSelected).forEach(key => {
+        chartLegendSelected[key] = false;
+      });
+    }
+    chartLegendSelected[record.title] = true;
   }
+
+  // 如果没有选中项，设置所有图例为 true
+  if (selectedRow.value.length === 0) {
+    Object.keys(chartLegendSelected).forEach(key => {
+      chartLegendSelected[key] = true;
+    });
+  }
+
+  // 更新图表设置
   kpiChart.value.setOption({
     legend: {
       selected: chartLegendSelected,
@@ -697,57 +825,127 @@ function handleRowClick(record: any) {
   });
 }
 
+// 监听主题变化
+watch(
+  () => layoutStore.proConfig.theme, // 监听的值
+  newValue => {
+    if (kpiChart.value) {
+      const splitLineColor = getSplitLineColor();
+      // 绘制图数据
+      kpiChart.value.setOption({
+        tooltip: {
+          trigger: 'axis',
+          position: function (pt: any) {
+            return [pt[0], '10%'];
+          },
+          confine: true, // 限制 tooltip 显示范围
+          backgroundColor:
+            newValue === 'dark'
+              ? 'rgba(48, 48, 48, 0.8)'
+              : 'rgba(255, 255, 255, 0.9)',
+          borderColor: newValue === 'dark' ? '#555' : '#ddd',
+          textStyle: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+        },
+        xAxis: {
+          axisLabel: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: splitLineColor,
+            },
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: splitLineColor,
+            },
+          },
+        },
+      });
+    }
+  }
+);
+
 onMounted(() => {
   // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
   // 获取网元网元列表
-  neInfoStore.fnNelist().then(res => {
+  listCustom({ status: 'Active' }).then((res: any) => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      if (res.data.length > 0) {
-        // 过滤不可用的网元
-        neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
-          (item: any) => {
-            return !['OMC', 'NSSF', 'NEF', 'NRF', 'LMF', 'N3IWF'].includes(
-              item.value
+      if (!res.data.length) {
+        message.warning({
+          content: '无可用的自定义指标,请先添加自定义指标',
+          duration: 2,
+        });
+        return false;
+      }
+      let typeArr: any = [];
+      res.data.forEach((item: any) => {
+        typeArr.push(item.neType);
+      });
+      typeArr = Array.from(new Set(typeArr));
+      neInfoStore.fnNelist().then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+          if (res.data.length > 0) {
+            // 过滤不可用的网元
+            neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
+              (item: any) => {
+                return typeArr.includes(item.value);
+              }
             );
+            if (neCascaderOptions.value.length === 0) {
+              message.warning({
+                content: t('common.noData'),
+                duration: 2,
+              });
+              return;
+            }
+            // 无查询参数neType时 默认选择UPF
+            const queryNeType = (route.query.neType as string) || 'IMS';
+            const item = neCascaderOptions.value.find(
+              s => s.value === queryNeType
+            );
+            if (item && item.children) {
+              const info = item.children[0];
+              state.neType = [info.neType, info.neId];
+              queryParams.neType = info.neType;
+              queryParams.neId = info.neId;
+            } else {
+              const info = neCascaderOptions.value[0].children[0];
+              state.neType = [info.neType, info.neId];
+              queryParams.neType = info.neType;
+              queryParams.neId = info.neId;
+            }
+
+            // 查询当前小时
+            const now = new Date();
+            now.setMinutes(0, 0, 0);
+            // 设置起始时间为整点前一小时
+            const startTime = new Date(now);
+            startTime.setHours(now.getHours() - 1);
+            queryRangePicker.value[0] = `${startTime.getTime()}`;
+            // 设置结束时间为整点
+            const endTime = new Date(now);
+            endTime.setMinutes(59, 59, 59);
+            queryRangePicker.value[1] = `${endTime.getTime()}`;
+            fnGetListTitle();
+            // 绘图
+            fnRanderChart();
           }
-        );
-        if (neCascaderOptions.value.length === 0) {
+        } else {
           message.warning({
             content: t('common.noData'),
             duration: 2,
           });
-          return;
         }
-        // 无查询参数neType时 默认选择UPF
-        const queryNeType = (route.query.neType as string) || 'UPF';
-        const item = neCascaderOptions.value.find(s => s.value === queryNeType);
-        if (item && item.children) {
-          const info = item.children[0];
-          state.neType = [info.neType, info.neId];
-          queryParams.neType = info.neType;
-          queryParams.neId = info.neId;
-        } else {
-          const info = neCascaderOptions.value[0].children[0];
-          state.neType = [info.neType, info.neId];
-          queryParams.neType = info.neType;
-          queryParams.neId = info.neId;
-        }
-
-        // 查询当前小时
-
-        const now = new Date();
-        now.setMinutes(0, 0, 0);
-        queryRangePicker.value[0] = `${now.getTime()}`;
-        now.setMinutes(59, 59, 59);
-        queryRangePicker.value[1] = `${now.getTime()}`;
-        fnGetListTitle();
-        // 绘图
-        fnRanderChart();
-      }
-    } else {
-      message.warning({
-        content: t('common.noData'),
-        duration: 2,
       });
     }
   });
@@ -774,6 +972,7 @@ onBeforeUnmount(() => {
                 v-model:value="state.neType"
                 :options="neCascaderOptions"
                 :allow-clear="false"
+                @change="fnGetListTitle()"
                 :placeholder="t('common.selectPlease')"
               />
             </a-form-item>
@@ -804,7 +1003,9 @@ onBeforeUnmount(() => {
                   :loading="tableState.loading"
                   @click.prevent="fnGetListTitle()"
                 >
-                  <template #icon><SearchOutlined /></template>
+                  <template #icon>
+                    <SearchOutlined />
+                  </template>
                   {{ t('common.search') }}
                 </a-button>
               </a-space>
@@ -823,7 +1024,9 @@ onBeforeUnmount(() => {
             :loading="tableState.loading"
             @click.prevent="fnChangShowType()"
           >
-            <template #icon> <AreaChartOutlined /> </template>
+            <template #icon>
+              <AreaChartOutlined />
+            </template>
             {{
               tableState.showTable
                 ? t('views.perfManage.goldTarget.kpiChartTitle')
@@ -850,12 +1053,13 @@ onBeforeUnmount(() => {
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
+              <template #icon>
+                <ReloadOutlined />
+              </template>
             </a-button>
           </a-tooltip>
           <TableColumnsDnd
             v-if="tableColumns.length > 0"
-            :cache-id="`kpiTarget_${state.neType[0]}`"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
@@ -863,7 +1067,9 @@ onBeforeUnmount(() => {
             <template #title>{{ t('common.sizeText') }}</template>
             <a-dropdown trigger="click" placement="bottomRight">
               <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
+                <template #icon>
+                  <ColumnHeightOutlined />
+                </template>
               </a-button>
               <template #overlay>
                 <a-menu
@@ -925,7 +1131,7 @@ onBeforeUnmount(() => {
         :size="tableState.size"
         :pagination="tablePagination"
         :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
-        @resizeColumn="(w:number, col:any) => (col.width = w)"
+        @resizeColumn="(w: number, col: any) => (col.width = w)"
         :show-expand-column="false"
         @change="fnTableChange"
       >
@@ -946,13 +1152,75 @@ onBeforeUnmount(() => {
             :pagination="false"
             :scroll="{ y: 250 }"
             size="small"
-            :custom-row="
-              record => ({
-                onClick: () => handleRowClick(record),
-                class: record.kpiId === selectedRow ? 'selected-row' : '',
-              })
-            "
-          />
+            :custom-row="(record:any) => ({
+              onClick: () => handleRowClick(record),
+              class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
+            })
+              "
+          >
+            <template #headerCell="{ column }">
+              <template v-if="column.key === 'total'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.totalValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.totalValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+              <template v-if="column.key === 'avg'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.avgValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.avgValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+              <template v-if="column.key === 'max'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.maxValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.maxValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+              <template v-if="column.key === 'min'">
+                <span>
+                  {{ t('views.perfManage.kpiOverView.minValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>
+                        {{ t('views.perfManage.kpiOverView.minValueTip') }}
+                      </span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'avg'">
+                <span v-if="record.unit !== '%'">-</span>
+              </template>
+              <template v-if="column.key === 'total'">
+                <span v-if="record.unit == '%'">-</span>
+              </template>
+            </template>
+          </a-table>
         </div>
       </div>
     </a-card>