feat:语音仪表盘

.env.development

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

README.md

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

package.json

@@ -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.6.3",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@tato30/vue-pdf": "^1.10.0",
-    "@vueuse/core": "~10.10.1",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/xterm": "^5.5.0",
-    "ant-design-vue": "^3.2.20",
-    "antdv-pro-layout": "~3.3.5",
-    "antdv-pro-modal": "^3.1.0",
-    "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": "^23.8.1",
+    "@ant-design/icons-vue": "7.0.1",
+    "@antv/g6": "4.8.24",
+    "@codemirror/lang-javascript": "6.2.3",
+    "@codemirror/lang-yaml": "6.1.2",
+    "@codemirror/merge": "6.10.0",
+    "@codemirror/theme-one-dark": "6.1.2",
+    "@tato30/vue-pdf": "1.11.3",
+    "@vueuse/core": "13.0.0",
+    "@xterm/addon-fit": "0.10.0",
+    "@xterm/xterm": "5.5.0",
+    "ant-design-vue": "4.2.6",
+    "antdv-pro-layout": "4.2.0",
+    "antdv-pro-modal": "4.0.6",
+    "codemirror": "6.0.1",
+    "crypto-js": "4.2.0",
+    "dayjs": "1.11.13",
+    "echarts": "5.6.0",
+    "file-saver": "2.0.5",
+    "grid-layout-plus": "1.0.6",
+    "intl-tel-input": "25.2.0",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "nprogress": "^0.2.0",
-    "p-queue": "~8.0.1",
-    "pinia": "^2.1.7",
-    "vue": "~3.3.13",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.4.0",
-    "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/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.0.5",
-    "less": "^4.2.0",
-    "typescript": "~5.4.5",
-    "unplugin-vue-components": "~0.26.0",
-    "vite": "~5.3.1",
-    "vite-plugin-compression": "~0.5.1",
-    "vue-tsc": "~2.0.22"
+    "@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>

public/wiregasm/worker.js

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

src/App.vue

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

src/api/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/neData/udm_auth.ts

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

src/api/neData/udm_sub.ts

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

src/api/neUser/exportFile.ts

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

src/api/perfManage/customData.ts

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

src/api/perfManage/customTarget.ts

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

src/api/perfManage/perfThreshold.ts

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

src/api/tool/neFile.ts

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

src/api/trace/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/assets/svg/dark.svg

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

src/assets/svg/light.svg

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

src/components/CronModal/index.vue

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

src/components/GlobalMask/index.vue

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

src/components/IntlTelInput/index.vue

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

src/components/TableColumnsDnd/index.vue

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

src/components/TerminalRedis/index.vue

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

src/components/TerminalSSH/index.vue

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

src/components/TerminalSSHView/index.vue

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

src/components/TerminalTelnet/index.vue

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

src/components/TerminalText/index.vue

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

src/components/UploadModal/index.vue

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

src/constants/cache-keys-constants.ts

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

src/constants/ne-constants.ts

@@ -4,6 +4,7 @@ export const NE_TYPE_LIST = [
   'IMS',
   'AMF',
   'AUSF',
+  'UDR',
   'UDM',
   'SMF',
   'PCF',
@@ -16,7 +17,11 @@ export const NE_TYPE_LIST = [
   'N3IWF',
   'MOCNGW',
   'SMSC',
+  'SMSF',
   'CBC',
+  'CHF',
+  'HLR',
+  'SGWC',
 ];
 
 /**

src/hooks/useTheme.ts

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

src/i18n/locales/en-US.ts

@@ -6,7 +6,7 @@ export default {
 
   // 通用
   common: {
-    title: 'Core Network Management Platform',
+    title: 'Login Platform',
     desc: 'Core Network Management Platform',
     loading: 'Please wait...',
     inputPlease: 'Please input',
@@ -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...',
@@ -192,6 +191,7 @@ export default {
       lockPasswd: "Unlock Password",
       lockPasswdTip: "No password can be set",
       fullscreen: "Full Screen",
+      theme: "Theme light/dark mode",
       logout: "Logout",
       profile: "Profile",
       settings: "Settings",
@@ -221,12 +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',
@@ -317,6 +316,8 @@ export default {
         color: "Style color scheme",
         colorActions: "Overall style color scheme setting",
         colorRandomly: "Randomization",
+        theme: "Theme dark and light modes",
+        themeActions: "Toggle light/dark mode",
         navTheme: "Dark Menu",
         navThemeActions: "Menus that can only change the navigation mode",
         fixedHeader: "Fixed top navigation bar",
@@ -348,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",
@@ -576,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",
@@ -655,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',
@@ -758,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",
@@ -781,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}.",
@@ -842,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",
@@ -855,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',
@@ -865,9 +740,10 @@ export default {
         checkExport : 'Check Export',
         checkExportConfirm: 'Confirm exporting the checked authenticated user data?',
         import: 'Import',
+        importFail: 'Failure Record',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
-        loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. Please wait a moment!!!!',
+        loadDataTip: 'Successfully fetched loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
         startIMSI: 'Start IMSI',
         batchAddText: 'Batch Add',
         batchDelText: 'Batch Delete',
@@ -893,9 +769,10 @@ export default {
         checkExport : 'Check Export',
         checkExportConfirm: 'Are you sure to export the data of the checked subscribers?',
         import: 'Import',
+        importFail: 'Failure Record',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
-        loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. Please wait a moment!!!!',
+        loadDataTip: 'Successfully fetched loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
         numAdd: 'Number of releases',
         numDel: 'Number of deleted',
         checkDel: 'Check Delete',
@@ -1054,6 +931,14 @@ export default {
         realTimeData: "Real Time Data",
       },
       customTarget:{
+        TourTitle1:'Calculate element selection',
+        TourDes1:'Select the metric corresponding to the selected NE type for the calculation formula',
+        TourTitle2:'Calculate symbol selection',
+        TourDes2:'Select a calculation symbol',
+        TourTitle3:'Calculation formula',
+        TourDes3:'The calculation formula is automatically composed from the calculation elements and calculation symbols selected earlier',
+        TourTitle4:'Result unit',
+        TourDes4:'Units are optional. PS: Formula automatically × 100% when the % sign',
         kpiId:' Custom Indicator',
         kpiIdTip:'This Ne has no custom indicators',
         period:' Granularity',
@@ -1062,7 +947,9 @@ export default {
         expression:'Expression',
         description:' Description',
         kpiSet:' Statistical Settings',
-        delCustomTip:'Confirm deletion of data item with record number {num}?',
+        sixHoursAgo:'Six hours ago',
+        threeHoursAgo:'Three hours ago.',
+        delCustomTip:'Confirm deletion of data item with record Custom Indicator {num}?',
         delCustom:' Successfully delete record number {num} custom indicator',
         addCustom:' Add custom indicator',
         editCustom:' Edit Custom indicator',
@@ -1074,8 +961,15 @@ export default {
         element:'Element',
         granularity:'Granularity',
         unit:'Unit',
+        expressionModal:'Expression Modal',
+        expressionErrorTip:'Please check the expression, the wrong indicator is {kpiId}',
+        expressionNoIdTip:'Please check the expression, no valid indicator is found',
+        unitSelect:'To better display the image, the same unit needs to be selected. The current unit is:',
       },
       kpiKeyTarget:{
+        "time":"Time",
+        "rawData":"Table Data",
+        "statistics":"NE metrics",
         "fullWidthLayout":"Full Width",
         "twoColumnLayout":"Two Column",
         "saveLayout": "Save Layout",
@@ -1088,6 +982,15 @@ export default {
         "layout3": "Layout 3"
       },
       kpiOverView:{
+        "kpiName":"NE Metrics Name",
+        "maxValue":"Max",
+        "maxValueTip":"The max value of metric data within the user's filtered time range.",
+        "minValue":"Min",
+        "minValueTip":"The min value of metric data within the user's filtered time range.",
+        "avgValue":"Avg",
+        "avgValueTip":"The average value of metric data within the user's filtered time range.",
+        "totalValue":"Sum",
+        "totalValueTip":"The sum value of metric data within the user's filtered time range.",
         "kpiChartTitle":"Overview of NE metrics",
         "changeLine":"Change to Line Charts",
         "changeBar":"Change to Bar Charts",
@@ -1096,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',
@@ -1165,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: {
@@ -1298,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

@@ -6,7 +6,7 @@ export default {
 
   // 通用
   common: {
-    title: '核心网管理平台',
+    title: '登录平台',
     desc: '核心网管理平台',
     loading: '请稍等...',
     inputPlease: '请输入',
@@ -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:'正在重启，请稍等...',
@@ -192,6 +191,7 @@ export default {
       lockPasswd: "解锁密码",
       lockPasswdTip: "可不设置密码",
       fullscreen: "全屏显示",
+      theme: "主题明/暗模式",
       logout: "退出登录",
       profile: "个人中心",
       settings: "个人设置",
@@ -221,13 +221,12 @@ export default {
       capability: '用户容量',
       serialNum: '序列号',
       expiryDate: '许可证到期日期',
-      neStatus:'网元状态异常',
+      neStatus:'状态异常',
       runStatus:'运行状态',
-      mark:'简略信息',
+      mark:'信息',
       object:'对象',
       versionNum:'版本号',
-      systemStatus:'系统状态',
-      realNeStatus:'网元状态',
+      realNeStatus:'状态',
       reloadTime:'刷新时间',
       Critical:'严重告警',
       Major:'主要告警',
@@ -317,6 +316,8 @@ export default {
         color: "风格配色",
         colorActions: "整体风格配色设置",
         colorRandomly: "随机",
+        theme: "主题明暗模式",
+        themeActions: "切换浅色/暗黑模式",
         navTheme: "深色菜单",
         navThemeActions: "只能改变导航模式的菜单",
         fixedHeader: "固定顶部导航栏",
@@ -348,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: "核心网系统看板",
@@ -576,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: "事件类型",
@@ -655,7 +503,7 @@ export default {
         delTip: '确认删除网元信息数据项吗?',
         oam: {
           title: 'OAM配置',
-          sync: '同步到网元',
+          restart: '下发后重启网元',
           oamEnable: '服务',
           oamPort: '端口',
           snmpEnable: '服务',
@@ -758,6 +606,7 @@ export default {
         upgradeDone: '更新完成，服务正在重载',
         upgradeFail: '更新失败，请检查软件文件是否存在且服务终端环境是否可用！',
         upgradeModal: '网元版本更新',
+        noPath: '软件包文件未发现',
       },
       neLicense: {
         status: "许可证状态",
@@ -781,7 +630,9 @@ export default {
         treeSelectTip: "左侧配置导航中选择配置项信息！",
         neType: "网元类型",
         neTypePleace: "请选择网元类型",
+        neIdSyncPleace: "请选择同步网元",
         noConfigData: "暂无配置项数据",
+        noConfigdDisabled: "配置项网元未正常服务",
         updateValue: "【 {num} 】 属性值修改成功",
         updateValueErr: "属性值修改失败",
         updateItem: "修改 Index 为 {num} 记录成功",
@@ -855,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:'鉴权信息',
@@ -865,9 +740,10 @@ export default {
         checkExport : '勾选导出',
         checkExportConfirm: '确认导出已勾选的鉴权用户数据吗？',
         import: '导入',
+        importFail: '失败记录',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
-        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，请稍候!!!',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
         startIMSI: '起始IMSI',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
@@ -893,9 +769,10 @@ export default {
         checkExport : '勾选导出',
         checkExportConfirm: '确认导出已勾选的签约用户数据吗？',
         import: '导入',
+        importFail: '失败记录',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
-        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，请稍候!!!',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
         numAdd: '放号个数',
         numDel: '删除个数',
         checkDel:'勾选删除',
@@ -1054,6 +931,14 @@ export default {
         realTimeData: "实时数据",
       },
       customTarget:{
+        TourTitle1:'计算元素选择',
+        TourDes1:'选择已经勾选网元类型对应的指标用于计算公式',
+        TourTitle2:'计算符号选择',
+        TourDes2:'选择计算符号',
+        TourTitle3:'计算公式',
+        TourDes3:'由前面选择的计算元素和计算符号自动组成计算公式',
+        TourTitle4:'结果单位',
+        TourDes4:'单位可选可填。PS：%符号时公式自动×100%',
         kpiId:'自定义指标项',
         kpiIdTip:'该网元没有自定义指标',
         period:'颗粒度',
@@ -1062,7 +947,9 @@ export default {
         expression:'计算公式',
         description:'描述',
         kpiSet:'统计设置',
-        delCustomTip:'确认删除记录编号为 {num} 的数据项?',
+        sixHoursAgo:'6小时前',
+        threeHoursAgo:'3小时前',
+        delCustomTip:'确认删除自定义指标项为 {num} 的数据项?',
         delCustom:'成功删除记录编号为 {num} 自定义指标',
         addCustom:'添加自定义指标',
         editCustom:'编辑自定义指标',
@@ -1074,8 +961,15 @@ export default {
         element:'元素',
         granularity:'颗粒度',
         unit:'单位',
-        },
+        expressionModal:'表达式模块',
+        expressionErrorTip:'请检查表达式,错误的指标为{kpiId}',
+        expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
+        unitSelect:'为更好展示图需选择相同单位,当前单位为:',
+      },
       kpiKeyTarget:{
+        "time":"时间",
+        "rawData":"表格数据",
+        "statistics":"指标",
         "fullWidthLayout":"全宽布局",
         "twoColumnLayout":"两列布局",
         "saveLayout": "保存布局",
@@ -1088,34 +982,23 @@ export default {
         "layout3": "布局3"
       },
       kpiOverView:{
+        "kpiName":"指标名",
+        "maxValue":"最大值",
+        "maxValueTip":"用户筛选时间范围内度量数据的最大值。",
+        "minValue":"最小值",
+        "minValueTip":"用户筛选时间范围内度量数据的最小值。",
+        "avgValue":"平均值",
+        "avgValueTip":"用户筛选时间范围内度量数据的平均值。",
+        "totalValue":"总值",
+        "totalValueTip":"用户筛选时间范围内度量数据的总值。",
         "kpiChartTitle":"网元指标概览",
         "changeLine":"切换为折线图",
         "changeBar":"切换为柱状图",
         "chooseShowMetrics":"选择需要显示的指标",
         "chooseMetrics":"选择指标",
-
       },
     },
     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: '命令',
@@ -1166,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} 的数据项?',
@@ -1190,6 +1069,15 @@ export default {
         traceFile: "跟踪文件",
         errMsg: "错误信息",
         imsiORmsisdn: "imsi 或 msisdn 是空值，不能开始任务",
+        dataView: "跟踪数据",
+        protocolOrInterface: "协议/接口",
+        msgNe: '消息网元',
+        msgEvent: '消息事件',
+        msgType: '消息类型',
+        msgDirect: '消息方向',
+        msgLen: '消息长度',
+        rowTime: '消息时间',
+        taskInfo: '任务信息',
       },
     },
     faultManage: {
@@ -1299,6 +1187,7 @@ export default {
         size: "文件大小",
         modifiedTime: "修改时间",
         fileName: "文件名称",
+        downTipZip: "确认将目录 【{fileName}】 下载为ZIP文件?",
         downTip: "确认下载文件名为 【{fileName}】 文件?",
         downTipErr: "文件获取失败",
         dirCd: "进入目录",
@@ -1335,8 +1224,8 @@ export default {
         filter: "全局过滤",
         startTime: '开始时间',
         endTime: '结束时间',
-        today: '昨天',
-        yesterday: '今天',
+        today: '今天',
+        yesterday: '昨天',
         week: '本周',
         month: '本月',
         avgLoad: '平均负载',

src/layouts/BasicLayout.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import {
   ProLayout,
-  WaterMark,
   getMenuData,
   clearMenuItem,
-  type MenuDataItem,
+  MenuDataItem,
 } from 'antdv-pro-layout';
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
@@ -12,26 +11,25 @@ import GlobalMask from '@/components/GlobalMask/index.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
 import {
   computed,
-  reactive,
-  watch,
+  nextTick,
   onMounted,
   onUnmounted,
-  nextTick,
+  reactive,
+  watch,
 } from 'vue';
+import { useRouter } from 'vue-router';
 import useLayoutStore from '@/store/modules/layout';
+import useAppStore from '@/store/modules/app';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
-import useAlarmStore from '@/store/modules/alarm';
-import useAppStore from '@/store/modules/app';
-import { useRouter } from 'vue-router';
-import { MENU_PATH_INLINE } from '@/constants/menu-constants';
-const { proConfig, waterMarkContent } = useLayoutStore();
 import useI18n from '@/hooks/useI18n';
+import useAlarmStore from '@/store/modules/alarm';
 import { getServerTime } from '@/api';
+import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-
 import { parseDateToStr } from '@/utils/date-utils';
 import { parseUrlPath } from '@/plugins/file-static-url';
+const { proConfig, waterMarkContent } = useLayoutStore();
 const { t, currentLocale } = useI18n();
 const routerStore = useRouterStore();
 const tabsStore = useTabsStore();
@@ -39,7 +37,7 @@ const appStore = useAppStore();
 const router = useRouter();
 
 /**菜单面板 */
-let layoutState = reactive({
+const layoutState = reactive({
   collapsed: false, // 是否展开菜单面板
   openKeys: ['/'], // 打开菜单key
   selectedKeys: ['/index'], // 选中高亮菜单key
@@ -247,7 +245,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <WaterMark :content="waterMarkContent" :z-index="100">
+  <a-watermark :content="waterMarkContent" :z-index="100">
     <ProLayout
       v-model:collapsed="layoutState.collapsed"
       v-model:selectedKeys="layoutState.selectedKeys"
@@ -290,10 +288,10 @@ onUnmounted(() => {
         </RouterLink>
       </template>
 
-      <!--插槽-顶部左侧，只对side布局有效-->
+      <!--插槽-渲染顶部内容区域，仅布局side有效-->
       <template #headerContentRender></template>
 
-      <!--插槽-顶部右侧-->
+      <!--插槽-渲染顶部内容右端区域-->
       <template #headerContentRightRender>
         <RightContent />
       </template>
@@ -364,7 +362,7 @@ onUnmounted(() => {
 
     <!-- 全局遮罩 -->
     <GlobalMask />
-  </WaterMark>
+  </a-watermark>
 </template>
 
 <style lang="less" scoped>
@@ -413,6 +411,19 @@ onUnmounted(() => {
   }
 }
 
+.theme-light.theme-menu-light .app-name {
+  color: #141414 !important;
+}
+.theme-light.theme-menu-dark .app-name {
+  color: #fff !important;
+}
+.theme-dark.theme-menu-light .app-name {
+  color: #fff !important;
+}
+.theme-dark.theme-menu-dark .app-name {
+  color: #fff !important;
+}
+
 .footer {
   z-index: 16;
   margin: 0px;
@@ -427,6 +438,7 @@ onUnmounted(() => {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
+    align-items: center;
     padding: 4px 16px;
     background: #fff;
     box-shadow: 0 1px 4px #0015291f;
@@ -434,6 +446,10 @@ onUnmounted(() => {
     height: 32px;
   }
 
+  [data-theme='dark'] &-fixed {
+    background: #141414;
+  }
+
   & #serverTimeDom {
     color: inherit;
     opacity: 0.85;

src/layouts/components/RightContent.vue

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

src/layouts/components/Tabs.vue

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

src/main.ts

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

src/plugins/file-static-url.ts

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

src/plugins/http-fetch.ts

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

src/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/layout.ts

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

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

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

src/typings/vite-env.d.ts

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

src/utils/date-utils.ts

@@ -20,6 +20,9 @@ export const YYYYMMDDHHMMSS = 'YYYYMMDDHHmmss';
 /**年-月-日 时:分:秒 列如：2022-12-30 01:01:59 */
 export const YYYY_MM_DD_HH_MM_SS = 'YYYY-MM-DD HH:mm:ss';
 
+/**年-月-日 时:分:秒 列如：2022-12-30T01:01:59+08:00 */
+export const YYYY_MM_DD_HH_MM_SSZ = 'YYYY-MM-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/account/components/base-info.vue

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

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

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

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

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

src/views/account/profile.vue

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

src/views/configManage/backupManage/index.vue

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

src/views/configManage/neOverview/index.vue

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

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

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

src/views/dashboard/amfUE/index.vue

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

src/views/dashboard/imsCDR/index.vue

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

src/views/dashboard/mmeUE/index.vue

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

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

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

src/views/dashboard/mocn/index.vue

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

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

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

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

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

src/views/dashboard/overview/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',
@@ -136,7 +140,7 @@ export default function useWS() {
         sortField: 'timestamp',
         sortOrder: 'desc',
         pageNum: 1,
-        pageSize: 5,
+        pageSize: 20,
       },
     });
     // MME_UE会话事件
@@ -149,7 +153,7 @@ export default function useWS() {
         sortField: 'timestamp',
         sortOrder: 'desc',
         pageNum: 1,
-        pageSize: 5,
+        pageSize: 20,
       },
     });
     // IMS_CDR会话事件
@@ -163,23 +167,33 @@ export default function useWS() {
         sortField: 'timestamp',
         sortOrder: 'desc',
         pageNum: 1,
-        pageSize: 5,
+        pageSize: 20,
       },
     });
   }
 
-  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,6 +213,7 @@ function loadData() {
 
   clearInterval(interval10s.value);
   interval10s.value = setInterval(() => {
+    if (!interval10s.value) return;
     if (upfTFActive.value === '0') {
       upfTFSend('7');
       upfTFActive.value = '7';
@@ -176,6 +228,7 @@ function loadData() {
 
   clearInterval(interval5s.value);
   interval5s.value = setInterval(() => {
+    if (!interval5s.value || !initFlag) return;
     fnGetSkim(); // 获取概览信息
     fnGetNeState(); // 获取网元状态
   }, 5_000);
@@ -186,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(() => {
@@ -197,6 +341,7 @@ onBeforeUnmount(() => {
   interval10s.value = null;
   clearInterval(interval5s.value);
   interval5s.value = null;
+  initFlag = false;
 });
 </script>
 
@@ -226,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
@@ -244,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" />
@@ -257,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" />
@@ -269,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
@@ -278,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">
@@ -292,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">
@@ -306,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
@@ -315,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">
@@ -329,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">
@@ -363,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>
@@ -486,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

@@ -1,10 +1,10 @@
 <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/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { 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 {
@@ -16,10 +16,13 @@ import {
   exportSMFDataCDR,
   listSMFDataCDR,
 } from '@/api/neData/smf';
-import { parseDateToStr } from '@/utils/date-utils';
 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 });
@@ -28,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({
@@ -39,9 +60,9 @@ let queryParams = reactive({
   sortField: 'timestamp',
   sortOrder: 'desc',
   /**开始时间 */
-  startTime: '',
+  startTime: undefined as undefined | number,
   /**结束时间 */
-  endTime: '',
+  endTime: undefined as undefined | number,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -52,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();
@@ -87,7 +106,7 @@ let tableState: TabeStateType = reactive({
 });
 
 /**表格字段列 */
-let tableColumns: ColumnsType = [
+let tableColumns = ref<ColumnsType>([
   {
     title: t('common.rowId'),
     dataIndex: 'id',
@@ -95,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,
@@ -138,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');
     },
   },
   {
@@ -159,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');
     },
   },
   {
@@ -180,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,
@@ -198,7 +229,7 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: t('views.dashboard.cdr.smfInvocationTime'), // 调用时间
+    title: t('views.dashboard.cdr.invocationTime'), // 调用时间
     dataIndex: 'cdrJSON',
     align: 'left',
     width: 200,
@@ -212,7 +243,7 @@ let tableColumns: ColumnsType = [
     key: 'id',
     align: 'left',
   },
-];
+]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -307,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;
@@ -314,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)) {
       // 取消勾选
@@ -407,7 +458,9 @@ function fnRealTime() {
         subGroupID: `1006_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
@@ -417,12 +470,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -511,6 +558,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
               />
             </a-form-item>
           </a-col>
@@ -534,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>
@@ -592,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') }}
@@ -670,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 />
@@ -700,7 +761,7 @@ onBeforeUnmount(() => {
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.time') }}: </span>
-                <span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
+                <span>{{ record.cdrJSON.invocationTimestamp }}</span>
               </div>
               <a-divider orientation="left">
                 {{ t('views.dashboard.cdr.rowInfo') }}
@@ -743,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>
@@ -815,10 +885,12 @@ onBeforeUnmount(() => {
               </div>
               <div>
                 <span>Network Function IPv4: </span>
-                <span>{{
-                  record.cdrJSON.nFunctionConsumerInformation
-                    .networkFunctionIPv4Address
-                }}</span>
+                <span>
+                  {{
+                    record.cdrJSON.nFunctionConsumerInformation
+                      ?.networkFunctionIPv4Address
+                  }}
+                </span>
               </div>
             </a-col>
           </a-row>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useDictStore from '@/store/modules/dict';
 import useI18n from '@/hooks/useI18n';
 import {
@@ -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,10 +195,13 @@ let tableColumns: ColumnsType = [
     title: t('views.dashboard.cdr.time'),
     dataIndex: 'cdrJSON',
     align: 'left',
-    width: 150,
+    width: 200,
     customRender(opt) {
       const cdrJSON = opt.value;
-      return parseDateToStr(+cdrJSON.updateTime * 1000);
+      if (typeof cdrJSON.updateTime === 'number') {
+        return parseDateToStr(+cdrJSON.updateTime * 1000);
+      }
+      return cdrJSON.updateTime;
     },
   },
   {
@@ -279,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;
@@ -286,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)) {
       // 取消勾选
@@ -379,7 +424,9 @@ function fnRealTime() {
         subGroupID: `1007_${queryParams.neId}`,
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   } else {
@@ -389,12 +436,6 @@ function fnRealTime() {
   }
 }
 
-/**接收数据后回调 */
-function wsError(ev: any) {
-  // 接收数据后回调
-  console.error(ev);
-}
-
 /**接收数据后回调 */
 function wsMessage(res: Record<string, any>) {
   const { code, requestId, data } = res;
@@ -489,6 +530,7 @@ onBeforeUnmount(() => {
                 v-model:value="queryParams.neId"
                 :options="neOtions"
                 :placeholder="t('common.selectPlease')"
+                @change="fnQueryReset()"
               />
             </a-form-item>
           </a-col>
@@ -551,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>
@@ -595,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') }}
@@ -662,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',
@@ -686,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 />
@@ -701,52 +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>{{ parseDateToStr(+record.timestamp * 1000) }}</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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   listAct,
   updateConfirm,
@@ -144,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,
   },
 
   {
@@ -211,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,
   },
 ];
 
@@ -328,15 +317,15 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**显示过滤设置是否显示 */
-  visibleByShowSet: boolean;
+  openByShowSet: boolean;
   /**告警帮助文档是否显示 */
   helpShowView: boolean;
   /**个性化设置置是否显示 */
-  visibleByMyselfSet: boolean;
+  openByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -349,11 +338,11 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByShowSet: false,
+  openByView: false,
+  openByEdit: false,
+  openByShowSet: false,
   helpShowView: false,
-  visibleByMyselfSet: false,
+  openByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -405,7 +394,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /** 告警帮助文档详细信息 */
@@ -434,7 +423,7 @@ function fnModalOk() {
       duration: 3,
     });
     modalState.confirmLoading = false;
-    modalState.visibleByView = false;
+    modalState.openByView = false;
     return false;
   }
   const result = updateConfirm(from);
@@ -446,7 +435,7 @@ function fnModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.visibleByView = false;
+        modalState.openByView = false;
         fnGetList();
       } else {
         message.error({
@@ -476,7 +465,7 @@ function fnShowModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.visibleByShowSet = false;
+        modalState.openByShowSet = false;
         fnGetList();
       } else {
         message.error({
@@ -604,7 +593,7 @@ function fnShowSet() {
         : {};
       modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson);
       modalState.title = t('views.faultManage.activeAlarm.showSet');
-      modalState.visibleByShowSet = true;
+      modalState.openByShowSet = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -617,11 +606,14 @@ function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
     if (typeof item !== 'object' || item === null) {
       return item; // 如果不是对象，直接返回原值
     }
-    return Object.keys(item).reduce((newItem: Record<string, any>, key: string) => {
-      const title = titleMapping[key] || key;
-      newItem[title] = item[key];
-      return newItem;
-    }, {}); // 确保初始值是一个空对象
+    return Object.keys(item).reduce(
+      (newItem: Record<string, any>, key: string) => {
+        const title = titleMapping[key] || key;
+        newItem[title] = item[key];
+        return newItem;
+      },
+      {}
+    ); // 确保初始值是一个空对象
   });
 }
 
@@ -704,9 +696,9 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByShowSet = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByShowSet = false;
   modalState.helpShowView = false;
 }
 
@@ -837,7 +829,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -877,7 +869,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -912,7 +904,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnCancelConfirm()"
@@ -956,12 +948,12 @@ onMounted(() => {
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -1006,7 +998,7 @@ onMounted(() => {
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -1018,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'">
@@ -1084,7 +1076,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.helpShowView"
+      :open="modalState.helpShowView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       :body-style="{ padding: '0px' }"
@@ -1111,7 +1103,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1124,7 +1116,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -1143,7 +1135,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -1162,7 +1154,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1181,7 +1173,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -1200,7 +1192,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -1208,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
@@ -1226,18 +1210,8 @@ onMounted(() => {
         >
           {{ modalState.from.locationInfo }}
         </a-form-item>
-
-        <a-row :gutter="16"> </a-row>
-
-        <a-row :gutter="16">
-          <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-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1272,7 +1246,7 @@ onMounted(() => {
           {{ modalState.from.specificProblem }}
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1286,12 +1260,12 @@ 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>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackTime')"
@@ -1318,7 +1292,7 @@ onMounted(() => {
       :width="800"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByShowSet"
+      :open="modalState.openByShowSet"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnShowModalOk"
@@ -1326,7 +1300,7 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateShowFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1351,7 +1325,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1382,7 +1356,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1418,7 +1392,7 @@ onMounted(() => {
       :width="800"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByMyselfSet"
+      :open="modalState.openByMyselfSet"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnShowModalOk"
@@ -1426,7 +1400,7 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateShowFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1450,7 +1424,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1481,7 +1455,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"

src/views/faultManage/event/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listAct, exportAll } from '@/api/faultManage/eventAlarm';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -117,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',
   },
 ];
 
@@ -211,13 +198,13 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**显示过滤设置是否显示 */
-  visibleByShowSet: boolean;
+  openByShowSet: boolean;
   /**个性化设置置是否显示 */
-  visibleByMyselfSet: boolean;
+  openByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -230,10 +217,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByShowSet: false,
-  visibleByMyselfSet: false,
+  openByView: false,
+  openByEdit: false,
+  openByShowSet: false,
+  openByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -285,7 +272,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**表格状态 */
@@ -310,12 +297,12 @@ const onSelectChange = (
 
 // key替换中文title
 function mapKeysWithReduce(data: any, titleMapping: any) {
-  return data.map((item:any) => {
-    return Object.keys(item).reduce((newItem:any, key:any) => {
+  return data.map((item: any) => {
+    return Object.keys(item).reduce((newItem: any, key: any) => {
       const title = titleMapping[key] || key;
       newItem[title] = item[key];
       return newItem;
-    });
+    }, {});
   });
 }
 
@@ -360,7 +347,7 @@ function fnExportAll() {
 
           writeSheet(res.data, 'alarm', sortData).then(fileBlob => {
             saveAs(fileBlob, `evnet_${Date.now()}.xlsx`);
-            
+
             message.success({
               content: t('common.msgSuccess', { msg: t('common.export') }),
               key,
@@ -384,8 +371,8 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -508,7 +495,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -550,7 +537,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -570,7 +557,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnExportAll()"
@@ -579,12 +566,12 @@ onMounted(() => {
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -625,11 +612,11 @@ onMounted(() => {
             </a-dropdown>
           </a-tooltip>
           <TableColumnsDnd
-            cache-id="alarmActive"
+            cache-id="alarmEvent"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -641,7 +628,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: 2500, y: 400 }"
+        :scroll="{ x: tableColumns.length * 120, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -689,7 +676,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @cancel="fnModalCancel"
@@ -706,7 +693,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -725,7 +712,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -744,7 +731,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -763,7 +750,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -790,9 +777,7 @@ onMounted(() => {
           {{ modalState.from.locationInfo }}
         </a-form-item>
 
-        <a-row :gutter="16"> </a-row>
-
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -819,7 +804,7 @@ onMounted(() => {
           {{ modalState.from.addInfo }}
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.specificProblemId')"