Merge remote-tracking branch 'origin/main' into lichang

.env.development

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

.env.production

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

README.md

@@ -5,6 +5,13 @@
 - 图标来源 [@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

@@ -16,31 +16,30 @@
     "@antv/g6": "~4.8.24",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-yaml": "^6.1.1",
-    "@codemirror/merge": "^6.7.2",
+    "@codemirror/merge": "^6.6.3",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@tato30/vue-pdf": "^1.11.2",
-    "@vueuse/core": "11.2.0",
+    "@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": "^4.2.5",
-    "antdv-pro-layout": "^4.1.9",
-    "antdv-pro-modal": "^4.0.5",
+    "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": "^24.6.0",
+    "intl-tel-input": "^23.8.1",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
     "nprogress": "^0.2.0",
     "p-queue": "~8.0.1",
-    "pinia": "2.2.6",
-    "vue": "^3.5.12",
-    "vue-i18n": "^10.0.4",
-    "vue-router": "^4.4.5",
+    "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"
   },
@@ -48,14 +47,14 @@
     "@types/crypto-js": "^4.2.2",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.7.7",
+    "@types/node": "^18.0.0",
     "@types/nprogress": "^0.2.3",
-    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "less": "^4.2.0",
-    "typescript": "^5.6.3",
-    "unplugin-vue-components": "^0.27.4",
-    "vite": "5.4.10",
+    "typescript": "~5.4.5",
+    "unplugin-vue-components": "~0.26.0",
+    "vite": "~5.3.1",
     "vite-plugin-compression": "~0.5.1",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "~2.0.22"
   }
 }

public/wiregasm/worker.js

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

src/App.vue

@@ -1,48 +1,22 @@
 <script setup lang="ts">
-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 { 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 dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import useLayoutStore from '@/store/modules/layout';
+import 'dayjs/locale/zh-cn';
+import { ref, watch } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 const { t, currentLocale } = useI18n();
-const { themeConfig, initPrimaryColor, changeConf } = useLayoutStore();
+const appStore = useAppStore();
+
 dayjs.extend(advancedFormat);
-// dayjs.locale('zh-cn'); // 默认中文
-let locale = ref(enUS); // 国际化初始中文
+dayjs.locale('zh-cn'); // 默认中文
+usePrimaryColor(); // 载入用户自定义主题色
 
-// 偏好设置
-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;'
-  );
-});
+let locale = ref(zhCN); // 国际化初始中文
 
 // 国际化切换语言
 function fnChangeLocale(v: string) {
@@ -63,18 +37,26 @@ 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>
-  <a-config-provider :theme="themeConfig" :locale="locale">
+  <ConfigProvider :locale="locale">
     <RouterView />
-  </a-config-provider>
+  </ConfigProvider>
 </template>
 
 <style lang="css">
 #app {
   height: 100%;
 }
+
 body .ant-pro-basicLayout {
   display: flex;
   flex-direction: column;
@@ -104,23 +86,56 @@ body .ant-pro-basicLayout {
   transform: translate(-2em, 0);
 }
 
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
+/**强制改表格边距 */
+.ant-table.ant-table-small .ant-table-tbody > tr > td,
+.ant-table.ant-table-small .ant-table-thead > tr > th {
+  padding: 6px !important;
 }
 
-[data-theme='dark']::view-transition-old(root) {
-  z-index: 1;
-}
-[data-theme='dark']::view-transition-new(root) {
-  z-index: 999;
+/** ==== 表格头按钮区域 S === **/
+/* 默认 */
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
 }
 
-::view-transition-old(root) {
-  z-index: 999;
+.button-container > button,
+.button-container > span {
+  margin-right: 12px;
+  margin-bottom: 12px;
 }
-::view-transition-new(root) {
-  z-index: 1;
+
+.button-container > button:last-child,
+.button-container > span:last-child {
+  margin-right: 0;
 }
+/* 平板端  */
+@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/configManage/config.ts

@@ -0,0 +1,55 @@
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+  RESULT_MSG_ERROR,
+} from '@/constants/result-constants';
+import { language, request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
+
+/**
+ * 查询配置详细
+ * @param tag 配置ID
+ * @returns object
+ */
+export async function getConfigInfo(tag: string) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/omc_db/config`,
+    method: 'get',
+    params: {
+      SQL: `SELECT * FROM config WHERE config_tag = '${tag}'`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    return Object.assign(result, {
+      data: parseObjLineToHump(data['config'][0]),
+    });
+  }
+  return result;
+}
+
+/**
+ * 修改配置
+ * @param data 配置对象
+ * @returns object
+ */
+export async function updateConfig(tag: string, data: Record<string, any>) {
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/omc_db/config?WHERE=config_tag='${tag}'`,
+    method: 'put',
+    data: { data },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && result.data.data) {
+    let rows = result.data.data.affectedRows;
+    if (rows) {
+      delete result.data;
+      return result;
+    } else {
+      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR[language] };
+    }
+  }
+  return result;
+}

src/api/configManage/configParam.ts

@@ -2,8 +2,315 @@ import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
   RESULT_MSG_ERROR,
+  RESULT_MSG_SUCCESS,
 } from '@/constants/result-constants';
 import { language, request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
+
+/**
+ * 查询配置参数标签栏
+ * @param neType 网元类型
+ * @returns object
+ */
+export async function getParamConfigTopTab(neType: string) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/param_config`,
+    method: 'get',
+    params: {
+      SQL: `SELECT id,top_display,top_tag,method FROM param_config WHERE ne_type = '${neType}' ORDER BY id ASC`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    data = data['param_config'];
+    if (Array.isArray(data)) {
+      return Object.assign(result, {
+        data: parseObjLineToHump(data),
+      });
+    }
+    return Object.assign(result, {
+      data: [],
+    });
+  }
+  return result;
+}
+
+/**
+ * 查询配置参数标签栏对应信息和规则
+ * @param neType 网元类型
+ * @param topTag
+ * @param neId
+ * @returns object { wrRule, dataArr }
+ */
+async function getParamConfigInfoAndRule(
+  neType: string,
+  topTag: string,
+  neId: string
+) {
+  return await Promise.allSettled([
+    // 获取参数规则
+    request({
+      url: `/api/rest/databaseManagement/v1/elementType/omc_db/objectType/param_config`,
+      method: 'get',
+      params: {
+        SQL: `SELECT param_json FROM param_config WHERE ne_type = '${neType}' AND top_tag='${topTag}'`,
+      },
+    }),
+    // 获取对应信息
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/${neType.toLowerCase()}/objectType/config/${topTag}`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+    }),
+  ]).then(resArr => {
+    let wrRule: Record<string, any> = {};
+    // 规则数据
+    if (resArr[0].status === 'fulfilled') {
+      const itemV = resArr[0].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        const data = itemData[0]['param_config'];
+        if (Array.isArray(data)) {
+          const v = data[0]['param_json'];
+          try {
+            itemData = parseObjLineToHump(JSON.parse(v));
+            wrRule = itemData;
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      }
+    }
+    let dataArr: Record<string, any>[] = [];
+    // 对应信息
+    if (resArr[1].status === 'fulfilled') {
+      const itemV = resArr[1].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        dataArr = parseObjLineToHump(itemData);
+      }
+    }
+    return { wrRule, dataArr };
+  });
+}
+
+/**
+ * 查询配置参数标签栏对应信息-表单结构处理
+ * @param neType 网元类型
+ * @param topTag
+ * @param neId
+ * @returns object
+ */
+export async function getParamConfigInfoForm(
+  neType: string,
+  topTag: string,
+  neId: string
+) {
+  const { wrRule, dataArr } = await getParamConfigInfoAndRule(
+    neType,
+    topTag,
+    neId
+  );
+
+  // 拼装数据
+  const result = {
+    code: RESULT_CODE_SUCCESS,
+    msg: RESULT_MSG_SUCCESS,
+    data: {
+      type: 'list' as 'list' | 'array',
+      data: [] as Record<string, any>[],
+      dataRule: {},
+    },
+  };
+
+  // kv单列表
+  if (Reflect.has(wrRule, 'list')) {
+    result.data.type = 'list';
+    const ruleArr = Object.freeze(wrRule['list']);
+
+    // 列表项数据
+    const dataList = [];
+    for (const item of dataArr) {
+      for (const key in item) {
+        // 规则为准
+        for (const rule of ruleArr) {
+          if (rule['name'] === key) {
+            const ruleItem = Object.assign({ optional: 'true' }, rule, {
+              value: item[key],
+            });
+            dataList.push(ruleItem);
+            break;
+          }
+        }
+      }
+    }
+    result.data.data = dataList;
+  }
+  // 多列表
+  if (Reflect.has(wrRule, 'array')) {
+    result.data.type = 'array';
+    const ruleArr = Object.freeze(wrRule['array']);
+    // 列表项数据
+    const dataArray = [];
+    for (const item of dataArr) {
+      const index = item['index'];
+      let record: Record<string, any>[] = [];
+      for (const key in item) {
+        // 规则为准
+        for (const rule of ruleArr) {
+          if (rule['name'] === key) {
+            const ruleItem = Object.assign({ optional: 'true' }, rule, {
+              value: item[key],
+            });
+            record.push(ruleItem);
+            break;
+          }
+        }
+      }
+      dataArray.push({ title: `Index-${index}`, key: index, record });
+    }
+    result.data.data = dataArray;
+
+    // 无数据时，用于新增
+    result.data.dataRule = { title: `Index-0`, key: 0, record: ruleArr };
+  }
+  return result;
+}
+
+/**
+ * 查询配置参数标签栏对应信息
+ * @param neType 网元类型
+ * @param topTag
+ * @param neId
+ * @returns object
+ */
+export async function getParamConfigInfo(
+  neType: string,
+  topTag: string,
+  neId: string
+) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/systemManagement/v1/elementType/${neType.toLowerCase()}/objectType/config/${topTag}`,
+    method: 'get',
+    params: {
+      ne_id: neId,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    return Object.assign(result, {
+      data: parseObjLineToHump(result.data.data),
+    });
+  }
+  return result;
+}
+
+/**
+ * 查询配置参数标签栏对应信息子节点
+ * @param neType 网元类型
+ * @param topTag
+ * @param neId
+ * @param loc 子节点（index/字段） 1/dnnList
+ * @returns
+ */
+export async function getParamConfigInfoChild(
+  neType: string,
+  topTag: string,
+  neId: string,
+  loc: string
+) {
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/systemManagement/v1/elementType/${neType.toLowerCase()}/objectType/config/${topTag}`,
+    method: 'get',
+    params: {
+      ne_id: neId,
+      loc: loc,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    return Object.assign(result, {
+      data: parseObjLineToHump(result.data.data),
+    });
+  }
+  return result;
+}
+
+/**
+ * 修改配置参数标签栏对应信息
+ * @param args 对象 {neType,neId,topTag,loc}
+ * @param data 对象 {修改的数据kv}
+ * @returns object
+ */
+export function updateParamConfigInfo(
+  type: 'list' | 'array',
+  args: Record<string, any>,
+  data: Record<string, any>
+) {
+  let url = `/api/rest/systemManagement/v1/elementType/${args.neType.toLowerCase()}/objectType/config/${
+    args.topTag
+  }?ne_id=${args.neId}`;
+
+  // 多列表需要loc
+  if (type === 'array') {
+    url += `&loc=${args.loc}`;
+  }
+
+  return request({
+    url,
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 新增配置参数标签栏对应信息
+ * @param args 对象 {neType,neId,topTag,loc}
+ * @param data 行记录对象
+ * @returns object
+ */
+export function addParamConfigInfo(
+  args: Record<string, any>,
+  data: Record<string, any>
+) {
+  return request({
+    url: `/api/rest/systemManagement/v1/elementType/${args.neType.toLowerCase()}/objectType/config/${
+      args.topTag
+    }?ne_id=${args.neId}&loc=${args.loc}`,
+    method: 'post',
+    data: data,
+  });
+}
+
+/**
+ * 删除配置参数标签栏对应信息
+ * @param args 对象 {neType,neId,topTag,loc}
+ * loc 多层表的定位信息{index0}/{paraName1}/{index1}
+ * @param data 行记录对象
+ * @returns object
+ */
+export function delParamConfigInfo(args: Record<string, any>) {
+  return request({
+    url: `/api/rest/systemManagement/v1/elementType/${args.neType.toLowerCase()}/objectType/config/${
+      args.topTag
+    }?ne_id=${args.neId}&loc=${args.loc}`,
+    method: 'delete',
+  });
+}
 
 /**
  * 更新网元配置重新载入
@@ -36,50 +343,141 @@ export async function updateNeConfigReload(neType: string, neId: string) {
 
 /**
  * 从参数配置PCF中获取对应信息提供给PCC用户策略输入框
+ * @param neType 网元类型
+ * @param topTag
  * @param neId
- * @returns object {pccRules,sessionRules,qosTemplate,headerEnrichTemplate,serviceAreaRestriction}
+ * @returns object { wrRule, dataArr }
  */
 export async function getPCCRule(neId: any) {
-  const paramNameArr = [
-    'pccRules',
-    'sessionRules',
-    'qosTemplate',
-    'headerEnrichTemplate',
-    'serviceAreaRestriction',
-  ];
-  const reqArr = [];
-  for (const paramName of paramNameArr) {
-    reqArr.push(
-      request({
-        url: `/ne/config/data`,
-        params: { neType: 'PCF', neId, paramName },
-        method: 'get',
-      })
-    );
-  }
-  return await Promise.allSettled(reqArr).then(resArr => {
+  return await Promise.allSettled([
+    // 获取参数规则
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/pccRules`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    // 获取对应信息
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/sessionRules`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/qosTemplate`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/headerEnrichTemplate`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+    request({
+      url: `/api/rest/systemManagement/v1/elementType/pcf/objectType/config/serviceAreaRestriction`,
+      method: 'get',
+      params: {
+        ne_id: neId,
+      },
+      timeout: 1_000,
+    }),
+  ]).then(resArr => {
+    let pccJson: any = new Map();
+    let sessJson: any = new Map();
+    let qosJson: any = new Map();
+    let headerJson: any = new Map();
+    let sarJson: any = new Map();
     // 规则数据
-    const obj: any = {};
-    resArr.forEach((item, i: number) => {
-      if (item.status === 'fulfilled') {
-        const res = item.value;
-        if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-          const key = paramNameArr[i];
-          obj[key] = res.data.map((item: any) => {
-            if ('qosTemplate' === key) {
-              return { value: item.qosId, label: item.qosId };
-            }
-            if ('headerEnrichTemplate' === key) {
-              return { value: item.templateName, label: item.templateName };
-            }
-            if ('serviceAreaRestriction' === key) {
-              return { value: item.name, label: item.name };
-            }
-            return { value: item.ruleId, label: item.ruleId };
-          });
-        }
+    if (resArr[0].status === 'fulfilled') {
+      const itemV = resArr[0].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          pccJson.set(item.ruleId, { value: item.ruleId, label: item.ruleId });
+        });
       }
-    });
-    return obj;
+    }
+
+    if (resArr[1].status === 'fulfilled') {
+      const itemV = resArr[1].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          sessJson.set(item.ruleId, { value: item.ruleId, label: item.ruleId });
+        });
+      }
+    }
+
+    if (resArr[2].status === 'fulfilled') {
+      const itemV = resArr[2].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          qosJson.set(item.qosId, { value: item.qosId, label: item.qosId });
+        });
+      }
+    }
+
+    if (resArr[3].status === 'fulfilled') {
+      const itemV = resArr[3].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          headerJson.set(item.templateName, {
+            value: item.templateName,
+            label: item.templateName,
+          });
+        });
+      }
+    }
+
+    if (resArr[4].status === 'fulfilled') {
+      const itemV = resArr[4].value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data?.data)
+      ) {
+        let itemData = itemV.data.data;
+        itemData.forEach((item: any) => {
+          sarJson.set(item.name, { value: item.name, label: item.name });
+        });
+      }
+    }
+
+    pccJson = Array.from(pccJson.values());
+    sessJson = Array.from(sessJson.values());
+    qosJson = Array.from(qosJson.values());
+    headerJson = Array.from(headerJson.values());
+    sarJson = Array.from(sarJson.values());
+
+    return { pccJson, sessJson, qosJson, headerJson, sarJson };
   });
 }

src/api/configManage/license.ts

@@ -0,0 +1,72 @@
+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 listLicense(query: Record<string, any>) {
+  let totalSQL = 'select count(id) as total from ne_license ';
+  let rowsSQL = ' select * from ne_license ';
+
+  // 查询
+  let querySQL = 'where 1=1';
+  if (query.neType) {
+    querySQL += ` and ne_type like '%${query.neType}%' `;
+  }
+
+  // 分页
+  const pageNum = (query.pageNum - 1) * query.pageSize;
+  const limtSql = ` order by create_time desc limit ${pageNum},${query.pageSize} `;
+
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/ne_license`,
+    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['ne_license'];
+      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;
+}
+
+/**
+ * 上传文件
+ * @param data 表单数据对象
+ * @returns object
+ */
+export function uploadLicense(data: FormData) {
+  return request({
+    url: `/api/rest/systemManagement/v1/elementType/${data.get(
+      'nfType'
+    )}/objectType/license?neId=${data.get('nfId')}`,
+    method: 'post',
+    data,
+    dataType: 'form-data',
+    timeout: 180_000,
+  });
+}

src/api/neData/udm_auth.ts

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

src/api/tool/iperf.ts

@@ -1,20 +0,0 @@
-import { request } from '@/plugins/http-fetch';
-
-// iperf 版本信息
-export function iperfV(data: Record<string, string>) {
-  return request({
-    url: '/tool/iperf/v',
-    method: 'get',
-    params: data,
-  });
-}
-
-// iperf 软件安装
-export function iperfI(data: Record<string, string>) {
-  return request({
-    url: '/tool/iperf/i',
-    method: 'post',
-    data: data,
-    timeout: 60_000,
-  });
-}

src/api/tool/neFile.ts

@@ -1,7 +1,7 @@
 import { request } from '@/plugins/http-fetch';
 
 /**
- * 查询网元端文件列表
+ * 查询文件列表列表
  * @param query 查询参数
  * @returns object
  */
@@ -14,7 +14,7 @@ export function listNeFiles(query: Record<string, any>) {
 }
 
 /**
- * 从网元到本地获取文件
+ * 从网元端获取文件
  * @param query 查询参数
  * @returns object
  */
@@ -27,24 +27,3 @@ export function getNeFile(query: Record<string, any>) {
     timeout: 180_000,
   });
 }
-
-// 从网元到本地获取目录压缩为ZIP
-export function getNeDirZip(data: Record<string, any>) {
-  return request({
-    url: '/ne/action/pullDirZip',
-    method: 'get',
-    params: data,
-    responseType: 'blob',
-    timeout: 60_000,
-  });
-}
-
-// 查看网元端文件内容
-export function getNeViewFile(data: Record<string, any>) {
-  return request({
-    url: '/ne/action/viewFile',
-    method: 'get',
-    params: data,
-    timeout: 60_000,
-  });
-}

src/api/tool/ping.ts

@@ -1,10 +0,0 @@
-import { request } from '@/plugins/http-fetch';
-
-// ping 网元端版本信息
-export function pingV(data: Record<string, string>) {
-  return request({
-    url: '/tool/ping/v',
-    method: 'get',
-    params: data,
-  });
-}

src/api/trace/packet.ts

@@ -1,64 +0,0 @@
-import { request } from '@/plugins/http-fetch';
-
-/**
- * 信令跟踪网卡设备列表
- * @returns
- */
-export function packetDevices() {
-  return request({
-    url: '/trace/packet/devices',
-    method: 'get',
-  });
-}
-
-/**
- * 信令跟踪开始
- * @param data 对象
- * @returns
- */
-export function packetStart(data: Record<string, any>) {
-  return request({
-    url: '/trace/packet/start',
-    method: 'post',
-    data: data,
-  });
-}
-
-/**
- * 信令跟踪结束
- * @param data 对象
- * @returns
- */
-export function packetStop(taskNo: string) {
-  return request({
-    url: '/trace/packet/stop',
-    method: 'post',
-    data: { taskNo },
-  });
-}
-
-/**
- * 信令跟踪过滤
- * @param data 对象
- * @returns
- */
-export function packetFilter(taskNo: string, expr: string) {
-  return request({
-    url: '/trace/packet/filter',
-    method: 'put',
-    data: { taskNo, expr },
-  });
-}
-
-/**
- * 信令跟踪续期保活
- * @param data 对象
- * @returns
- */
-export function packetKeep(taskNo: string, duration: number = 120) {
-  return request({
-    url: '/trace/packet/keep-alive',
-    method: 'put',
-    data: { taskNo, duration },
-  });
-}

src/api/trace/pcap.ts

@@ -6,7 +6,6 @@ export function dumpStart(data: Record<string, string>) {
     url: '/trace/tcpdump/start',
     method: 'post',
     data: data,
-    timeout: 60_000,
   });
 }
 
@@ -16,6 +15,16 @@ export function dumpStop(data: Record<string, string>) {
     url: '/trace/tcpdump/stop',
     method: 'post',
     data: data,
+  });
+}
+
+// 网元抓包PACP 下载
+export function dumpDownload(data: Record<string, any>) {
+  return request({
+    url: '/trace/tcpdump/download',
+    method: 'get',
+    params: data,
+    responseType: 'blob',
     timeout: 60_000,
   });
 }
@@ -26,6 +35,5 @@ export function traceUPF(data: Record<string, string>) {
     url: '/trace/tcpdump/upf',
     method: 'post',
     data: data,
-    timeout: 60_000,
   });
 }

src/assets/svg/dark.svg

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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')"
-    :open="props.open"
+    :visible="props.visible"
     :body-style="{ padding: '0 24px' }"
     @cancel="fnCronModal(false)"
     @ok="fnCronModal(true)"
@@ -35,7 +35,6 @@
   </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';
@@ -45,9 +44,9 @@ import { reactive, computed, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 
-const emit = defineEmits(['cancel', 'ok', 'update:open']);
+const emit = defineEmits(['cancel', 'ok', 'update:visible']);
 const props = defineProps({
-  open: {
+  visible: {
     type: Boolean,
     required: true,
   },
@@ -76,7 +75,7 @@ const cronStr = computed(() => {
 
 /**监听是否显示，初始cron属性 */
 watch(
-  () => props.open,
+  () => props.visible,
   val => {
     if (!val) return;
     const arr = props.cron.split(' ');
@@ -99,7 +98,7 @@ watch(
  * @param val modal触发事件
  */
 function fnCronModal(val: boolean) {
-  emit('update:open', false);
+  emit('update:visible', false);
   if (val) {
     emit('ok', cronStr.value);
   } else {

src/components/GlobalMask/index.vue

@@ -12,7 +12,7 @@ const router = useRouter();
 const { t } = useI18n();
 
 /**显示遮罩 */
-const isOpen = computed(() => !['none', 'lock'].includes(maskStore.type));
+const isVisible = computed(() => !['none', 'lock'].includes(maskStore.type));
 
 // 用户无操作一段时间后进行锁屏
 function idleTimeout(time: number, callback: Function) {
@@ -67,7 +67,7 @@ onUnmounted(() => {});
 </script>
 <template>
   <a-modal
-    v-model:open="isOpen"
+    v-model:visible="isVisible"
     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 { Iti } from 'intl-tel-input';
-import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
+import intlTelInput, { Iti, SomeOptions } from 'intl-tel-input';
 import 'intl-tel-input/build/css/intlTelInput.min.css';
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import 'intl-tel-input/build/js/utils.js';
+import { ref, onMounted, onBeforeUnmount, nextTick, watch } 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 number = itiRef.value?.getNumber() || '';
+  const num = 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 = {
-    number,
+    num,
     countryIso,
     validity: false,
     errorCode: -1,
@@ -69,11 +69,21 @@ function fnChange() {
     data.errorCode = errorCode;
   }
   // console.log(data);
-
-  emit('update:value', number);
+  emit('update:value', num);
   emit('update:change', data);
 }
 
+watch(
+  () => props.value,
+  v => {
+    if (v) {
+      itiRef.value?.setNumber(v);
+    } else {
+      itiRef.value?.setNumber('');
+    }
+  }
+);
+
 onMounted(() => {
   nextTick(async () => {
     if (inputRef.value) {
@@ -96,13 +106,7 @@ onMounted(() => {
         formatOnDisplay: true,
         autoPlaceholder: 'polite',
         i18n: i18n,
-      });
-      if (props.value) {
-        itiRef.value.setNumber(props.value);
-      }
-      if (props.disabled) {
-        itiRef.value.setDisabled(props.disabled);
-      }
+      } as SomeOptions);
       inputRef.value.addEventListener('countrychange', fnChange);
     }
   });
@@ -120,7 +124,8 @@ onBeforeUnmount(() => {
   <input
     type="tel"
     class="ant-input"
-    ref="inputRef" 
+    ref="inputRef"
+    :value="value"
     :disabled="disabled"
     :placeholder="placeholder"
     :maxlength="maxlength"
@@ -137,32 +142,4 @@ 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,6 +2,7 @@
 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();
@@ -36,7 +37,7 @@ const props = defineProps({
 });
 
 /**表格字段列 */
-const tableColumns = reactive(props.columns);
+const tableColumns = reactive<ColumnsType>(props.columns);
 
 /**表格字段列勾选状态 */
 const state = reactive<{
@@ -55,9 +56,7 @@ const state = reactive<{
 function fnTableColumnsCheckAllChange(e: any) {
   const checked = e.target.checked;
   state.indeterminate = false;
-  state.columnsTitleList = checked
-    ? tableColumns.map(s => `${s.title as string}`)
-    : [];
+  state.columnsTitleList = checked ? tableColumns.map(s => `${s.title}`) : [];
 }
 
 /**表格字段列拖拽操作 */

src/components/TerminalRedis/index.vue

@@ -1,225 +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';
-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 terminalCmd = ref<string>('');
-
-/**终端输入渲染 */
-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: false, // 禁止输入
-  });
-  // 挂载
-  xterm.open(container);
-  // 自适应尺寸
-  const fitAddon = new FitAddon();
-  xterm.loadAddon(fitAddon);
-  // 终端输入字符按键监听
-  xterm.onKey(({ key, domEvent }) => {
-    // console.log(key, domEvent);
-    // 单键输入
-    switch (domEvent.key) {
-      case 'Enter':
-        const cmdStr = terminalCmd.value.trim();
-        // 发送文本
-        terminal.value.scrollToBottom();
-        terminal.value.writeln('\r\n');
-        ws.send({
-          requestId: `redis_${props.hostId}`,
-          type: 'redis',
-          data: `${cmdStr}\r\n`,
-        });
-        terminalCmd.value = '';
-
-        // 退出登录
-        if ('quit' === cmdStr) {
-          setTimeout(() => {
-            ws.close();
-          }, 1000);
-        }
-        break;
-      case 'Backspace':
-        // 处理退格键，删除最后一个字符
-        xterm.write('\b \b');
-        break;
-      default:
-        xterm.write(key);
-        terminalCmd.value += key;
-        return;
-    }
-  });
-  // 创建 ResizeObserver 实例
-  var observer = new ResizeObserver(entries => {
-    fitAddon.fit();
-  });
-  // 监听元素大小变化
-  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" :id="id" class="terminal"></div>
-  </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: 'resize',
+      type: 'ssh_resize',
       data: { cols, rows },
     });
   });

src/components/TerminalSSHView/index.vue

@@ -13,11 +13,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  /**ws连接地址，必传 如/ws/view */
-  url: {
-    type: String,
-    required: true,
-  },
   /**网元类型，必传 */
   neType: {
     type: String,
@@ -38,16 +33,6 @@ const props = defineProps({
     type: Number,
     default: 40,
   },
-  /**ws发送requestId前缀 如ssh_id */
-  prefix: {
-    type: String,
-    default: 'ssh',
-  },
-  /**消息处理函数 */
-  processMessages: {
-    type: Function,
-    default: undefined,
-  },
 });
 
 /**终端输入DOM节点实例对象 */
@@ -158,54 +143,32 @@ function wsMessage(res: Record<string, any>) {
   }
   if (!requestId) return;
   if (terminal.value != null) {
-    let text = '';
-    // 处理消息
-    if (props.processMessages) {
-      text = props.processMessages(data); 
-    }else{
-      text = processMessage(data);
-    }
-    // 无消息是则不输出
-    if (text === '') {
+    // 查找的开始输出标记
+    const parts: string[] = data.split('\u001b[?2004l\r');
+    if (parts.length > 0) {
+      let text = parts[parts.length - 1];
+      // 找到最后输出标记
+      const 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;
+      }
+      // console.log({ parts, text });
+      terminal.value.write(text);
       return;
     }
-    terminal.value.write(text);
+    // 无标记
+    terminal.value.write(data);
   }
 }
 
-/**终端消息处理*/
-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) {
     // 建立链接
     const options: OptionsType = {
-      url: props.url,
+      url: '/ws/view',
       params: {
         neType: props.neType,
         neId: props.neId,
@@ -222,7 +185,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (ws.state() === WebSocket.OPEN) ws.close();
+  ws.close();
 });
 
 // 给组件设置属性 ref="xxxTerminal"
@@ -237,7 +200,7 @@ defineExpose({
   /**发送命令 */
   send: (type: string, data: Record<string, any>) => {
     ws.send({
-      requestId: `${props.prefix}_${props.id}`,
+      requestId: `ssh_${props.id}`,
       type,
       data,
     });
@@ -245,7 +208,7 @@ defineExpose({
   /**模拟按下 Ctrl+C */
   ctrlC: () => {
     ws.send({
-      requestId: `${props.prefix}_${props.id}`,
+      requestId: `ssh_${props.id}`,
       type: 'ctrl-c',
     });
   },

src/components/TerminalTelnet/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue/es';
+import { message } from 'ant-design-vue/lib';
 import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { FitAddon } from '@xterm/addon-fit';
 import { Terminal } from '@xterm/xterm';
@@ -160,7 +160,7 @@ function handleRanderXterm(container: HTMLElement | undefined) {
     // console.log('尺寸', cols, rows);
     ws.send({
       requestId: `telnet_resize_${props.hostId}`,
-      type: 'resize',
+      type: 'telnet_resize',
       data: { cols, rows },
     });
   });

src/components/TerminalText/index.vue

@@ -0,0 +1,97 @@
+<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,11 +1,10 @@
 <script setup lang="ts">
-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 { 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 useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['upload', 'close', 'update:open']);
+const emit = defineEmits(['upload', 'close', 'update:visible']);
 const props = defineProps({
   /**窗口标题 */
   title: {
@@ -18,7 +17,7 @@ const props = defineProps({
     default: false,
   },
   /**是否弹出显示，必传 */
-  open: {
+  visible: {
     type: Boolean,
     required: true,
   },
@@ -81,7 +80,7 @@ function fnUpload(up: UploadRequestOption) {
     :drag="true"
     :destroyOnClose="true"
     :title="props.title"
-    :open="props.open"
+    :visible="props.visible"
     :keyboard="false"
     :mask-closable="false"
     :confirm-loading="props.loading"

src/constants/ne-constants.ts

@@ -16,9 +16,7 @@ export const NE_TYPE_LIST = [
   'N3IWF',
   'MOCNGW',
   'SMSC',
-  'SMSF',
   'CBC',
-  'CHF',
 ];
 
 /**

src/hooks/useTheme.ts

@@ -1,5 +1,5 @@
 import { onBeforeMount } from 'vue';
-import { ConfigProvider, message } from 'ant-design-vue/es';
+import { ConfigProvider, message } from 'ant-design-vue/lib';
 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: 'Login Platform',
+    title: 'Core Network Management Platform',
     desc: 'Core Network Management Platform',
     loading: 'Please wait...',
     inputPlease: 'Please input',
@@ -192,7 +192,6 @@ 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",
@@ -318,8 +317,6 @@ 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",
@@ -570,8 +567,6 @@ export default {
         rowInfo: "Info",
         type: "Type",
         duration: "Duration",
-        seizureTime: "Call Start Time",
-        releaseTime: "Hangup Time",
         caller: "Caller",
         called: "Called",
         result: "Result",
@@ -690,12 +685,11 @@ export default {
         addrPlease: "Please fill in the host IP address correctly",
         port: "Port",
         portPlease: "Please fill in the host port number correctly",
-        user: "User",
-        userPlease: "Please fill in the host user correctly",
-        database: "DataBase",
+        user: "Login User",
+        userPlease: "Please fill in the host login user correctly",
         authMode: "Auth Mode",
         password: "Password",
-        passwordPlease: "Please fill in the host password correctly",
+        passwordPlease: "Please fill in the host login password correctly",
         privateKey: "Private Key",
         privateKeyPlease: "Please fill in the private key characters correctly ~/.ssh/id_rsa",
         passPhrase: "Private Key Cipher",
@@ -870,7 +864,7 @@ export default {
         import: 'Import',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
-        loadDataTip: 'Successfully fetched loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
+        loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. Please wait a moment!!!!',
         startIMSI: 'Start IMSI',
         batchAddText: 'Batch Add',
         batchDelText: 'Batch Delete',
@@ -898,7 +892,7 @@ export default {
         import: 'Import',
         loadDataConfirm: 'Are you sure you want to reload the data?',
         loadData: 'Load Data',
-        loadDataTip: 'Successfully fetched loaded data: {num} items, the system is internally updating the data, it will take about {timer} seconds, please wait!!!!!.',
+        loadDataTip: 'Successfully fetched load data: {num} entries, the system is internally updating the data. Please wait a moment!!!!',
         numAdd: 'Number of releases',
         numDel: 'Number of deleted',
         checkDel: 'Check Delete',
@@ -1057,14 +1051,6 @@ 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',
@@ -1073,9 +1059,7 @@ export default {
         expression:'Expression',
         description:' Description',
         kpiSet:' Statistical Settings',
-        sixHoursAgo:'Six hours ago',
-        threeHoursAgo:'Three hours ago.',
-        delCustomTip:'Confirm deletion of data item with record Custom Indicator {num}?',
+        delCustomTip:'Confirm deletion of data item with record number {num}?',
         delCustom:' Successfully delete record number {num} custom indicator',
         addCustom:' Add custom indicator',
         editCustom:' Edit Custom indicator',
@@ -1087,35 +1071,7 @@ 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',
-      },
-      kpiKeyTarget:{
-        "time":"Time",
-        "rawData":"Table Data",
-        "statistics":"NE metrics",
-        "fullWidthLayout":"Full Width",
-        "twoColumnLayout":"Two Column",
-        "saveLayout": "Save Layout",
-        "restoreSaved": "Restore Layout",
-        "saveSuccess": " '{name}' saved successfully",
-        "restoreSavedSuccess": " '{name}' restored successfully",
-        "noSavedLayout": "No saved layout found for '{name}'",
-        "layout1": "Layout 1",
-        "layout2": "Layout 2",
-        "layout3": "Layout 3"
-      },
-      kpiOverView:{
-        "kpiName":"NE Metrics Name",
-        "maxValue":"Max Value",
-        "minValue":"Min Value",
-        "kpiChartTitle":"Overview of NE metrics",
-        "changeLine":"Change to Line Charts",
-        "changeBar":"Change to Bar Charts",
-        "chooseShowMetrics":"Select the metric you want to display",
-        "chooseMetrics":"Select an indicator",
-      },
+      }
     },
     traceManage: {
       analysis: {
@@ -1154,8 +1110,8 @@ export default {
         fileUPFTip: 'UPF internal packet capture and analysis packet',
         textStart: "Start",
         textStop: "Stop",
-        textLog: "LogFile",
-        textLogMsg: "LogFile Info",
+        textLog: "Log",
+        textLogMsg: "Log Info",
         textDown: "Download",
         downTip: "Are you sure you want to download the {title} capture data file?",
         downOk: "{title} file download complete",
@@ -1331,7 +1287,7 @@ export default {
       },
       exportFile:{
         fileName:'File Source',
-        downTip: "Confirm the download file name is [{fileName}] File?",
+        downTip: "Confirm the download file name is [{fileName}] File?", 
         downTipErr: "Failed to get file",
         deleteTip: "Confirm the delete file name is [{fileName}] File?",
         deleteTipErr: "Failed to delete file",
@@ -1826,10 +1782,6 @@ export default {
         reset: "System Reset",
         resetInstruction: "A system reset will erase all data in the current system, please proceed with caution!!!!",
         resetTipContent: 'Are you sure you want to clear all data from the current system and insist on continuing?',
-        homeInstruction:'Set the home page',
-        home: 'Home Page',
-        homeTip:'Do you want to submit the current interface as the system interface?',
-        homeSet:'Home Page Settings',
       },
       role:{
         allScopeOptions:'All data permissions',
@@ -2160,7 +2112,7 @@ export default {
         realTimeStop:"Stop",
         realTime:"Real Time Speed",
         pid:"PID",
-        name:"Program name",
+        name:"APP Name",
         username:"User Name",
         runTime:"Run Time",
         numThreads:"Thread",
@@ -2169,11 +2121,13 @@ export default {
         diskWrite:"Disk Write",
       },
       net:{
-        localAddr:"Local Address",
-        remoteAddr:"Foreign Address",
-        status:"State",
-        proto:"Proto",
-        port:"Port",
+        PID:"PID",
+        name:"name",
+        localAddr:"localAddr",
+        remoteAddr:"remoteAddr",
+        status:"status",
+        type:"type",
+        port:"port",
       },
     },
   },

src/i18n/locales/zh-CN.ts

@@ -6,7 +6,7 @@ export default {
 
   // 通用
   common: {
-    title: '登录平台',
+    title: '核心网管理平台',
     desc: '核心网管理平台',
     loading: '请稍等...',
     inputPlease: '请输入',
@@ -192,7 +192,6 @@ export default {
       lockPasswd: "解锁密码",
       lockPasswdTip: "可不设置密码",
       fullscreen: "全屏显示",
-      theme: "主题明/暗模式",
       logout: "退出登录",
       profile: "个人中心",
       settings: "个人设置",
@@ -318,8 +317,6 @@ export default {
         color: "风格配色",
         colorActions: "整体风格配色设置",
         colorRandomly: "随机",
-        theme: "主题明暗模式",
-        themeActions: "切换浅色/暗黑模式",
         navTheme: "深色菜单",
         navThemeActions: "只能改变导航模式的菜单",
         fixedHeader: "固定顶部导航栏",
@@ -570,8 +567,6 @@ export default {
         rowInfo: "记录信息",
         type: "记录类型",
         duration: "通话时长",
-        seizureTime: "呼叫开始时间",
-        releaseTime: "挂断结束时间",
         caller: "主叫",
         called: "被叫",
         result: "结果",
@@ -691,11 +686,10 @@ export default {
         port: "端口",
         portPlease: "请正确填写主机端口号",
         user: "用户名",
-        userPlease: "请正确填写主机用户",
-        database: "数据库",
+        userPlease: "请正确填写主机登录用户",
         authMode: "认证模式",
         password: "密码",
-        passwordPlease: "请正确填写主机密码",
+        passwordPlease: "请正确填写主机登录密码",
         privateKey: "私钥",
         privateKeyPlease: "请正确填写私钥字符内容 ~/.ssh/id_rsa",
         passPhrase: "私钥密码",
@@ -870,7 +864,7 @@ export default {
         import: '导入',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
-        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，请稍候!!!',
         startIMSI: '起始IMSI',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
@@ -898,7 +892,7 @@ export default {
         import: '导入',
         loadDataConfirm: '确认要重新加载数据吗？',
         loadData: '加载数据',
-        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，大约需要{timer}秒，请稍候!!!',
+        loadDataTip: '成功获取加载数据：{num}条，系统内部正在进行数据更新，请稍候!!!',
         numAdd: '放号个数',
         numDel: '删除个数',
         checkDel:'勾选删除',
@@ -1057,14 +1051,6 @@ export default {
         realTimeData: "实时数据",
       },
       customTarget:{
-        TourTitle1:'计算元素选择',
-        TourDes1:'选择已经勾选网元类型对应的指标用于计算公式',
-        TourTitle2:'计算符号选择',
-        TourDes2:'选择计算符号',
-        TourTitle3:'计算公式',
-        TourDes3:'由前面选择的计算元素和计算符号自动组成计算公式',
-        TourTitle4:'结果单位',
-        TourDes4:'单位可选可填。PS：%符号时公式自动×100%',
         kpiId:'自定义指标项',
         kpiIdTip:'该网元没有自定义指标',
         period:'颗粒度',
@@ -1073,9 +1059,7 @@ export default {
         expression:'计算公式',
         description:'描述',
         kpiSet:'统计设置',
-        sixHoursAgo:'6小时前',
-        threeHoursAgo:'3小时前',
-        delCustomTip:'确认删除自定义指标项为 {num} 的数据项?',
+        delCustomTip:'确认删除记录编号为 {num} 的数据项?',
         delCustom:'成功删除记录编号为 {num} 自定义指标',
         addCustom:'添加自定义指标',
         editCustom:'编辑自定义指标',
@@ -1087,35 +1071,7 @@ export default {
         element:'元素',
         granularity:'颗粒度',
         unit:'单位',
-        expressionModal:'表达式模块',
-        expressionErrorTip:'请检查表达式,错误的指标为{kpiId}',
-        expressionNoIdTip:'请检查表达式,没有找到任何有效的指标',
-      },
-      kpiKeyTarget:{
-        "time":"时间",
-        "rawData":"表格数据",
-        "statistics":"指标",
-        "fullWidthLayout":"全宽布局",
-        "twoColumnLayout":"两列布局",
-        "saveLayout": "保存布局",
-        "restoreSaved": "恢复布局",
-        "saveSuccess": " {name} 保存成功",
-        "restoreSavedSuccess": " {name} 恢复成功",
-        "noSavedLayout": "没有找到保存的布局 {name}",
-        "layout1": "布局1",
-        "layout2": "布局2",
-        "layout3": "布局3"
-      },
-      kpiOverView:{
-        "kpiName":"指标名",
-        "maxValue":"最大值",
-        "minValue":"最小值",
-        "kpiChartTitle":"网元指标概览",
-        "changeLine":"切换为折线图",
-        "changeBar":"切换为柱状图",
-        "chooseShowMetrics":"选择需要显示的指标",
-        "chooseMetrics":"选择指标",
-      },
+        }
     },
     traceManage: {
       analysis: {
@@ -1154,8 +1110,8 @@ export default {
         fileUPFTip: 'UPF内部抓包分析包',
         textStart: "开始",
         textStop: "停止",
-        textLog: "日志文件",
-        textLogMsg: "日志文件信息",
+        textLog: "日志",
+        textLogMsg: "日志信息",
         textDown: "下载",
         downTip: "确认要下载 {title} 抓包数据文件吗？",
         downOk: "{title} 文件下载完成",
@@ -1170,7 +1126,7 @@ export default {
         stopNotRun: "{title} 任务未运行",
       },
       task: {
-        traceId: '跟踪编号',
+        traceId: '跟踪编号', 
         trackType: '跟踪类型',
         trackTypePlease: '请选择跟踪类型',
         creater: '创建人',
@@ -1331,7 +1287,7 @@ export default {
       },
       exportFile:{
         fileName:'文件来源',
-        downTip: "确认下载文件名为 【{fileName}】 文件?",
+        downTip: "确认下载文件名为 【{fileName}】 文件?", 
         downTipErr: "文件获取失败",
         deleteTip: "确认删除文件名为 【{fileName}】 文件?",
         deleteTipErr: "文件删除失败",
@@ -1356,8 +1312,8 @@ export default {
         filter: "全局过滤",
         startTime: '开始时间',
         endTime: '结束时间',
-        today: '今天',
-        yesterday: '昨天',
+        today: '昨天',
+        yesterday: '今天',
         week: '本周',
         month: '本月',
         avgLoad: '平均负载',
@@ -1826,10 +1782,6 @@ export default {
         reset: "系统重置",
         resetInstruction: "系统重置将会清除当前系统内所有数据，请谨慎操作！！！",
         resetTipContent: '确认要清除当前系统内所有数据并坚持继续吗?',
-        homeInstruction:'设置系统首页界面',
-        home: '系统首页',
-        homeTip:'确认要提交当前界面为系统界面吗?',
-        homeSet:'系统首页设置',
       },
       role:{
         allScopeOptions:'全部数据权限',
@@ -2153,7 +2105,7 @@ export default {
         hostSelectMore: "加载更多 {num}",
         hostSelectHeader: "主机列表",
       },
-      ps:{
+      ps:{ 
         realTimeHigh:"高",
         realTimeLow:"低",
         realTimeRegular:"常规",
@@ -2169,11 +2121,13 @@ export default {
         diskWrite:"磁盘写入",
       },
       net:{
-        localAddr:"本地地址",
-        remoteAddr:"远程地址",
+        PID:"PID",
+        name:"名称",
+        localAddr:"localAddr",
+        remoteAddr:"remoteAddr",
         status:"状态",
-        proto:"协议",
-        port:"端口",
+        type:"类型",
+        port:"接口",
       },
     },
   },

src/layouts/BasicLayout.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import {
   ProLayout,
+  WaterMark,
   getMenuData,
   clearMenuItem,
-  MenuDataItem,
+  type MenuDataItem,
 } from 'antdv-pro-layout';
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
@@ -11,25 +12,26 @@ import GlobalMask from '@/components/GlobalMask/index.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
 import {
   computed,
-  nextTick,
-  onMounted,
-  onUnmounted,
   reactive,
   watch,
+  onMounted,
+  onUnmounted,
+  nextTick,
 } 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 useI18n from '@/hooks/useI18n';
 import useAlarmStore from '@/store/modules/alarm';
-import { getServerTime } from '@/api';
+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 { getServerTime } from '@/api';
 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();
@@ -37,7 +39,7 @@ const appStore = useAppStore();
 const router = useRouter();
 
 /**菜单面板 */
-const layoutState = reactive({
+let layoutState = reactive({
   collapsed: false, // 是否展开菜单面板
   openKeys: ['/'], // 打开菜单key
   selectedKeys: ['/index'], // 选中高亮菜单key
@@ -245,7 +247,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <a-watermark :content="waterMarkContent" :z-index="100">
+  <WaterMark :content="waterMarkContent" :z-index="100">
     <ProLayout
       v-model:collapsed="layoutState.collapsed"
       v-model:selectedKeys="layoutState.selectedKeys"
@@ -288,10 +290,10 @@ onUnmounted(() => {
         </RouterLink>
       </template>
 
-      <!--插槽-渲染顶部内容区域，仅布局side有效-->
+      <!--插槽-顶部左侧，只对side布局有效-->
       <template #headerContentRender></template>
 
-      <!--插槽-渲染顶部内容右端区域-->
+      <!--插槽-顶部右侧-->
       <template #headerContentRightRender>
         <RightContent />
       </template>
@@ -362,7 +364,7 @@ onUnmounted(() => {
 
     <!-- 全局遮罩 -->
     <GlobalMask />
-  </a-watermark>
+  </WaterMark>
 </template>
 
 <style lang="less" scoped>
@@ -411,19 +413,6 @@ 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;
@@ -438,7 +427,6 @@ 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;
@@ -446,10 +434,6 @@ onUnmounted(() => {
     height: 32px;
   }
 
-  [data-theme='dark'] &-fixed {
-    background: #141414;
-  }
-
   & #serverTimeDom {
     color: inherit;
     opacity: 0.85;

src/layouts/components/RightContent.vue

@@ -1,22 +1,16 @@
 <script setup lang="ts">
-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 { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
 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();
@@ -63,13 +57,6 @@ 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);
@@ -78,7 +65,7 @@ function fnChangeLocale(e: any) {
 
 <template>
   <a-space :size="12" align="center">
-    <a-tooltip placement="bottomRight">
+    <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.alarm') }}</template>
       <a-button type="text" style="color: inherit" @click="fnClickAlarm">
         <template #icon>
@@ -96,7 +83,7 @@ function fnChangeLocale(e: any) {
 
     <!-- 锁屏操作 -->
     <span v-perms:has="['system:setting:lock']">
-      <a-tooltip placement="bottomRight">
+      <a-tooltip placement="bottom">
         <template #title>{{ t('loayouts.rightContent.lock') }}</template>
         <a-button type="text" style="color: inherit" @click="fnClickLock()">
           <template #icon>
@@ -105,11 +92,10 @@ function fnChangeLocale(e: any) {
         </a-button>
         <ProModal
           :drag="true"
-          :center-y="true"
           :width="400"
           :minHeight="200"
           :mask-closable="false"
-          v-model:open="lockConfirm"
+          v-model:visible="lockConfirm"
           :title="t('loayouts.rightContent.lockTip')"
           @ok="fnClickLockToPage()"
         >
@@ -133,7 +119,7 @@ function fnChangeLocale(e: any) {
       </a-tooltip>
     </span>
 
-    <a-tooltip placement="bottomRight">
+    <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
       <a-button type="text" style="color: inherit" @click="toggle">
         <template #icon>
@@ -143,27 +129,14 @@ 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="bottomRight"
+      placement="bottom"
       trigger="click"
       v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
     >
-      <a-button type="text" style="color: inherit">
-        <template #icon> <TranslationOutlined /> </template>
+      <a-button size="small" type="default">
+        {{ t('i18n') }}
+        <DownOutlined />
       </a-button>
       <template #overlay>
         <a-menu @click="fnChangeLocale">
@@ -231,11 +204,4 @@ 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: fixedHeader ? width : '100%', top: headerRender === false ? 0 : undefined }"
+      :style="{ width: width, 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 placement="bottomRight" trigger="click">
+            <a-dropdown trigger="click" placement="bottomRight">
               <a-button type="ghost" shape="circle" size="small">
                 <template #icon><DownOutlined /></template>
               </a-button>
@@ -199,18 +199,7 @@ 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,15 +4,16 @@ import App from './App.vue';
 import router from './router';
 import directive from './directive';
 import i18n from './i18n';
-
-import 'antdv-pro-modal/dist/style.css';
+import ProModal from "antdv-pro-modal";
 import 'antdv-pro-layout/dist/style.css';
-import 'ant-design-vue/dist/reset.css';
+import 'antdv-pro-modal/dist/style.css';
+import 'ant-design-vue/dist/antd.variable.min.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,26 +19,3 @@ 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

@@ -187,6 +187,7 @@ function beforeRequest(options: OptionsType): OptionsType | Promise<any> {
       const separator = options.url.includes('?') ? '&' : '?';
       // 请求加密
       if (options.crypto) {
+        debugger;
         const data = encryptAES(JSON.stringify(paramStr), APP_DATA_API_KEY);
         options.url += `${separator}data=${encodeURIComponent(data)}`;
       } else {

src/store/modules/layout.ts

@@ -1,23 +1,16 @@
-import { theme } from 'ant-design-vue/es';
-import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
+import { CACHE_LOCAL_PROCONFIG } from '@/constants/cache-keys-constants';
+import { localGetJSON, localSetJSON } from '@/utils/cache-local-utils';
 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';
@@ -36,33 +29,10 @@ 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);
 
@@ -80,6 +50,7 @@ const proConfigLocal: LayoutStore['proConfig'] = localGetJSON(
 
 const useLayoutStore = defineStore('layout', {
   state: (): LayoutStore => ({
+    visible: false,
     proConfig: {
       layout: proConfigLocal.layout,
       theme: proConfigLocal.theme,
@@ -92,27 +63,13 @@ 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,
   }),
-  getters: {
-    getColorPrimary(): string {
-      let color = '#1890ff';
-      if (this.themeConfig.token) {
-        color = this.themeConfig.token.colorPrimary || color;
-      }
-      return color;
-    },
-  },
   actions: {
+    /**改变显示状态 */
+    changeVisibleLayoutSetting() {
+      this.visible = !this.visible;
+    },
     /**修改水印文字 */
     changeWaterMark(text: string) {
       this.waterMarkContent = text;
@@ -120,48 +77,10 @@ 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/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 { setToken, removeToken } from '@/plugins/auth-token';
+import { getToken, 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

@@ -8,8 +8,3 @@ declare module '*.vue' {
 }
 
 declare module 'vue3-smooth-dnd';
-
-declare module 'intl-tel-input/intlTelInputWithUtils' {
-  import intlTelInput from 'intl-tel-input';
-  export default intlTelInput;
-}

src/utils/parse-utils.ts

@@ -172,16 +172,15 @@ export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
 
 /**
  * 字节数转换单位
- * @param bits 字节Bit大小 64009540 = 512.08 MB
- * @returns xx B / KB / MB / GB / TB / PB / EB / ZB / YB
+ * @param bits 字节Bit大小
+ * @returns MB
  */
 export function parseSizeFromBits(bits: number | string): string {
   bits = Number(bits) || 0;
   if (bits <= 0) return '0 B';
-  bits = bits * 8;
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
   const unitIndex = Math.floor(Math.log2(bits) / 10);
-  const value = (bits / Math.pow(1000, unitIndex)).toFixed(2);
+  const value = (bits / Math.pow(1024, unitIndex)).toFixed(2);
   const unti = units[unitIndex];
   return `${value} ${unti}`;
 }

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-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 { 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 { 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: '0',
+    sex: undefined,
   },
   /**表单提交点击状态 */
   formClick: false,
@@ -169,7 +169,7 @@ onMounted(() => {
           <IntlTelInput
             v-model:value="stateForm.form.phonenumber"
             allow-clear
-            :maxlength="20"
+            :maxlength="16"
             :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/es';
+import { Modal, message } from 'ant-design-vue/lib';
 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: 4 }">
+    <a-form-item :wrapper-col="{ span: 3 }">
       <a-button
         block
         type="primary"

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

@@ -1,32 +1,22 @@
 <script lang="ts" setup>
-import { viewTransitionTheme } from 'antdv-pro-layout';
+import { ref } from 'vue';
+import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
 import useLayoutStore from '@/store/modules/layout';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const { proConfig, changeConf, themeConfig, changePrimaryColor } =
-  useLayoutStore();
+const { proConfig, changeConf } = useLayoutStore();
 
-let timerId: any = null;
+let color = ref<string>(getLocalColor());
 
 /**改变主题色 */
 function fnColorChange(e: Event) {
   const target = e.target as HTMLInputElement;
-  // 需要防抖函数处理
-  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);
+  if (target.nodeName === 'INPUT') {
+    changePrimaryColor(target.value ?? '#1890ff');
+  } else {
+    changePrimaryColor();
+  }
+  color.value = getLocalColor();
 }
 </script>
 
@@ -66,31 +56,13 @@ function changeTheme(e: any) {
       <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="themeConfig?.token?.colorPrimary"
-            @input="fnColorChange"
-          />
+          <input type="color" :value="color" @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/es';
+import { message } from 'ant-design-vue/lib';
 import { getUserProfile } from '@/api/profile';
 import { reactive, ref, onMounted } from 'vue';
 import { parseDateToStr } from '@/utils/date-utils';
@@ -205,7 +205,6 @@ 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

@@ -0,0 +1,518 @@
+<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/configParamTreeTable/hooks/useOptions.ts

@@ -0,0 +1,165 @@
+import useI18n from '@/hooks/useI18n';
+import { regExpIPv4, regExpIPv6, validURL } from '@/utils/regular-utils';
+
+export default function useOptions() {
+  const { t } = useI18n();
+
+  /**规则校验 */
+  function ruleVerification(row: Record<string, any>): (string | boolean)[] {
+    let result = [true, ''];
+    const type = row.type;
+    const value = row.value;
+    const filter = row.filter;
+    const display = row.display;
+
+    // 子嵌套的不检查
+    if (row.array) {
+      return result;
+    }
+
+    // 可选的同时没有值不检查
+    if (row.optional === 'true' && !value) {
+      return result;
+    }
+    switch (type) {
+      case 'int':
+        // filter: "0~128"
+
+        if (filter && filter.indexOf('~') !== -1) {
+          const filterArr = filter.split('~');
+          const minInt = parseInt(filterArr[0]);
+          const maxInt = parseInt(filterArr[1]);
+          const valueInt = parseInt(value);
+          if (valueInt < minInt || valueInt > maxInt) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireInt', {
+                display,
+                filter,
+              }),
+            ];
+          }
+        }
+        break;
+      case 'ipv4':
+        if (!regExpIPv4.test(value)) {
+          return [
+            false,
+            t('views.configManage.configParamForm.requireIpv4', { display }),
+          ];
+        }
+        break;
+      case 'ipv6':
+        if (!regExpIPv6.test(value)) {
+          return [
+            false,
+            t('views.configManage.configParamForm.requireIpv6', { display }),
+          ];
+        }
+        break;
+      case 'enum':
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.keys(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireEnum', { display }),
+            ];
+          }
+        }
+        break;
+      case 'bool':
+        // filter: '{"0":"false", "1":"true"}'
+        
+        if (filter && filter.indexOf('{') === 1) {
+          let filterJson: Record<string, any> = {};
+          try {
+            filterJson = JSON.parse(filter); //string---json
+          } catch (error) {
+            console.error(error);
+          }
+
+          if (!Object.values(filterJson).includes(`${value}`)) {
+            return [
+              false,
+              t('views.configManage.configParamForm.requireBool', { display }),
+            ];
+          }
+        }
+        break;
+      case 'string':
+        // filter: "0~128"
+
+        // 字符串长度判断
+        if (filter && filter.indexOf('~') !== -1) {
+          try {
+            const filterArr = filter.split('~');
+            let rule = new RegExp(
+              '^\\S{' + filterArr[0] + ',' + filterArr[1] + '}$'
+            );
+            if (!rule.test(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        // 字符串http判断
+        if (value.startsWith('http')) {
+          try {
+            if (!validURL(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        break;
+      case 'regex':
+        // filter: "^[0-9]{3}$"
+
+        if (filter) {
+          try {
+            let regex = new RegExp(filter);
+            if (!regex.test(value)) {
+              return [
+                false,
+                t('views.configManage.configParamForm.requireString', {
+                  display,
+                }),
+              ];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+        break;
+
+      default:
+        return [
+          false,
+          t('views.configManage.configParamForm.requireUn', { display }),
+        ];
+    }
+    return result;
+  }
+
+  return { ruleVerification };
+}

src/views/configManage/configParamTreeTable/hooks/useSMFOptions.ts

@@ -0,0 +1,22 @@
+import { getParamConfigInfo } from '@/api/configManage/configParam';
+import { ref } from 'vue';
+
+export default function useSMFOptions() {
+  /**upfId可选择 */
+  const optionsUPFIds = ref<{ value: string; label: string }[]>([]);
+
+  /**初始加载upfId */
+  function initUPFIds() {
+    getParamConfigInfo('smf', 'upfConfig', '001').then(res => {
+      optionsUPFIds.value = [];
+      for (const s of res.data) {
+        optionsUPFIds.value.push({
+          value: s.id,
+          label: s.id,
+        });
+      }
+    });
+  }
+
+  return { initUPFIds, optionsUPFIds };
+}

src/views/configManage/license/index.vue

@@ -0,0 +1,500 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { Form, 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 { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { uploadLicense, listLicense } from '@/api/configManage/license';
+import useI18n from '@/hooks/useI18n';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { parseDateToStr } from '@/utils/date-utils';
+const neInfoStore = useNeInfoStore();
+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('views.configManage.license.neType'),
+    dataIndex: 'neType',
+    align: 'center',
+    width: 2,
+  },
+  {
+    title: t('views.configManage.license.neId'),
+    dataIndex: 'neId',
+    align: 'center',
+    width: 2,
+  },
+  {
+    title: t('views.configManage.license.serialNum'),
+    dataIndex: 'serialNum',
+    align: 'center',
+    width: 3,
+  },
+  {
+    title: t('views.configManage.license.comment'),
+    dataIndex: 'remark',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.configManage.license.createTime'),
+    dataIndex: 'createTime',
+    align: 'center',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    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;
+}
+
+/**查询信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listLicense(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;
+  /**网元版本历史框是否显示 */
+  visibleByHistory: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  visibleByHistory: false,
+  title: '任务设置',
+  from: {
+    neType: undefined,
+    comment: '',
+    file: undefined,
+    fileList: [],
+  },
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit() {
+  modalState.title = t('common.uploadText');
+  modalState.visibleByEdit = true;
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    neType: [
+      {
+        required: true,
+        message: t('views.configManage.license.neTypePlease'),
+      },
+    ],
+    comment: [
+      {
+        required: true,
+        message: t('views.configManage.license.updateCommentPlease'),
+      },
+    ],
+    file: [
+      {
+        required: true,
+        message: t('views.configManage.license.updateFilePlease'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      let formData = new FormData();
+      formData.append('nfType', from.neType[0]);
+      formData.append('nfId', from.neType[1]);
+      formData.append('comment', from.comment);
+      formData.append('file', from.file);
+      const hide = message.loading(t('common.loading'), 0);
+      uploadLicense(formData)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            modalState.visibleByEdit = false;
+            modalStateFrom.resetFields();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+          // 获取列表数据
+          fnGetList();
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.visibleByHistory = false;
+  modalStateFrom.resetFields();
+}
+
+/**上传前检查或转换压缩 */
+function fnBeforeUploadFile(file: FileType) {
+  if (modalState.confirmLoading) return false;
+  const fileName = file.name;
+  const suff = fileName.substring(fileName.lastIndexOf('.'));
+  if (!['.ini'].includes(suff)) {
+    message.error(
+      t('views.configManage.softwareManage.onlyAble', { fileText: '(.ini)' }),
+      3
+    );
+
+    return false;
+  }
+
+  return true;
+}
+
+/**上传文件 */
+function fnUploadFile(up: UploadRequestOption) {
+  // 改为完成状态
+  const file = modalState.from.fileList[0];
+  file.percent = 100;
+  file.status = 'done';
+  // 预置到表单
+  modalState.from.file = up.file;
+}
+
+onMounted(() => {
+  // 获取网元网元列表
+  neInfoStore.fnNelist().then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      // 获取列表数据
+      fnGetList();
+    } else {
+      message.warning({
+        content: t('common.noData'),
+        duration: 2,
+      });
+    }
+  });
+});
+</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.license.neType')"
+              name="neType "
+            >
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="neInfoStore.getNeSelectOtions"
+                allow-clear
+                :placeholder="t('views.configManage.license.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><UploadOutlined /></template>
+            {{ t('common.uploadText') }}
+          </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()">
+              <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: 1000 }"
+      >
+      </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.license.neType')"
+          name="neType"
+          v-bind="modalStateFrom.validateInfos.neType"
+        >
+          <a-cascader
+            v-model:value="modalState.from.neType"
+            :options="useNeInfoStore().getNeCascaderOptions"
+            :allow-clear="false"
+            :placeholder="t('views.configManage.license.neTypePlease')"
+          />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.configManage.license.updateComment')"
+          name="comment"
+          v-bind="modalStateFrom.validateInfos.comment"
+        >
+          <a-textarea
+            v-model:value="modalState.from.comment"
+            :maxlength="200"
+            :show-count="true"
+            :placeholder="t('views.configManage.license.updateCommentPlease')"
+          />
+        </a-form-item>
+        <a-form-item
+          :label="t('views.configManage.license.updateFile')"
+          name="file"
+          v-bind="modalStateFrom.validateInfos.file"
+        >
+          <a-upload
+            name="file"
+            v-model:file-list="modalState.from.fileList"
+            accept=".ini"
+            list-type="text"
+            :max-count="1"
+            :show-upload-list="true"
+            :before-upload="fnBeforeUploadFile"
+            :custom-request="fnUploadFile"
+          >
+            <a-button type="default" :loading="modalState.confirmLoading">
+              {{ t('views.configManage.license.selectFile') }}
+            </a-button>
+          </a-upload>
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

src/views/configManage/neManage/index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ProModal } from 'antdv-pro-modal';
-import { message, Modal, Form } 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 { message, Modal, Form } 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 {
   listNeInfo,
   getNeInfo,
@@ -21,8 +20,8 @@ import {
 } from '@/api/configManage/neManage';
 import { updateNeConfigReload } from '@/api/configManage/configParam';
 import useI18n from '@/hooks/useI18n';
-import { FileType } from 'ant-design-vue/es/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -195,11 +194,11 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  openByView: boolean;
+  visibleByView: boolean;
   /**新增框或修改框是否显示 */
-  openByEdit: boolean;
+  visibleByEdit: boolean;
   /**导入是否显示 */
-  openByImport: boolean;
+  visibleByImport: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -212,9 +211,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  openByView: false,
-  openByEdit: false,
-  openByImport: false,
+  visibleByView: false,
+  visibleByEdit: false,
+  visibleByImport: false,
   title: '网元',
   from: {
     id: undefined,
@@ -327,7 +326,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
   if (!row) {
     modalStateFrom.resetFields();
     modalState.title = t('views.configManage.neManage.addNe');
-    modalState.openByEdit = true;
+    modalState.visibleByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -338,7 +337,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
       if (res.code === RESULT_CODE_SUCCESS) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.configManage.neManage.editNe');
-        modalState.openByEdit = true;
+        modalState.visibleByEdit = true;
       } else {
         message.error(t('views.configManage.neManage.getInfo'), 2);
       }
@@ -371,7 +370,7 @@ function fnModalOk() {
                 content: t('common.msgSuccess', { msg: modalState.title }),
                 duration: 3,
               });
-              modalState.openByEdit = false;
+              modalState.visibleByEdit = false;
               modalStateFrom.resetFields();
               fnGetList(1);
             }
@@ -419,7 +418,7 @@ function fnImportModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 3,
             });
-            modalState.openByEdit = false;
+            modalState.visibleByEdit = false;
             modalStateFrom.resetFields();
           } else {
             message.error({
@@ -445,8 +444,8 @@ function fnImportModalOk() {
  * 进行表达规则校验
  */
 function fnImportModalCancel() {
-  modalState.openByView = false;
-  modalState.openByImport = false;
+  modalState.visibleByView = false;
+  modalState.visibleByImport = false;
   importStateFrom.resetFields();
 }
 
@@ -455,8 +454,8 @@ function fnImportModalCancel() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalState.openByView = false;
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -708,7 +707,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
   if (type === 'import') {
     modalState.importFrom = Object.assign(modalState.importFrom, row);
     modalState.title = t('views.configManage.neManage.import');
-    modalState.openByImport = true;
+    modalState.visibleByImport = true;
   }
 }
 
@@ -979,7 +978,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByEdit"
+      :visible="modalState.visibleByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -991,7 +990,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.neType')"
@@ -1008,7 +1007,7 @@ onMounted(() => {
                       <template #title>{{
                         t('views.configManage.neManage.neTypeTip')
                       }}</template>
-                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -1029,7 +1028,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.uid')"
@@ -1069,7 +1068,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.ip')"
@@ -1091,7 +1090,7 @@ onMounted(() => {
                     <template #title>
                       <div>{{ t('views.configManage.neManage.portTip') }}</div>
                     </template>
-                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1099,7 +1098,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.neName')"
@@ -1121,14 +1120,14 @@ onMounted(() => {
                     <template #title>
                       <div>{{ t('views.configManage.neManage.macTip') }}</div>
                     </template>
-                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                   </a-tooltip> </template
               ></a-input>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.vendorName')"
@@ -1145,7 +1144,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.province')"
@@ -1180,14 +1179,14 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByImport"
+      :visible="modalState.visibleByImport"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnImportModalOk"
       @cancel="fnImportModalCancel"
     >
       <a-form name="importStateFrom" layout="horizontal">
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.neType')"

src/views/configManage/neOverview/index.vue

@@ -1,442 +0,0 @@
-<script setup lang="ts">
-import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/es/table';
-import { message } from 'ant-design-vue/es';
-import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
-import useI18n from '@/hooks/useI18n';
-import { TooltipComponent } from 'echarts/components';
-import { GaugeChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-import * as echarts from 'echarts/core';
-import { TitleComponent, LegendComponent } from 'echarts/components';
-import { PieChart } from 'echarts/charts';
-import { LabelLayout } from 'echarts/features';
-import { useRoute } from 'vue-router';
-import useAppStore from '@/store/modules/app';
-import useDictStore from '@/store/modules/dict';
-import { listAllNeInfo } from '@/api/ne/neInfo';
-import { parseDateToStr } from '@/utils/date-utils';
-const { getDict } = useDictStore();
-const appStore = useAppStore();
-const route = useRoute();
-const { t } = useI18n();
-
-echarts.use([
-  TooltipComponent,
-  GaugeChart,
-  TitleComponent,
-  LegendComponent,
-  PieChart,
-  CanvasRenderer,
-  LabelLayout,
-]);
-
-/**图DOM节点实例对象 */
-const statusBar = ref<HTMLElement | undefined>(undefined);
-
-/**图实例对象 */
-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'),
-    dataIndex: 'neName',
-    align: 'left',
-  },
-  {
-    title: t('views.index.realNeStatus'),
-    dataIndex: 'serverState',
-    align: 'left',
-    key: 'status',
-  },
-  {
-    title: t('views.index.reloadTime'),
-    dataIndex: 'serverState',
-    align: 'left',
-    customRender(opt) {
-      if (opt.value?.refreshTime) return parseDateToStr(opt.value?.refreshTime);
-      return '-';
-    },
-  },
-  {
-    title: t('views.index.version'),
-    dataIndex: 'serverState',
-    align: 'left',
-    customRender(opt) {
-      return opt.value?.version || '-';
-    },
-  },
-  {
-    title: t('views.index.serialNum'),
-    dataIndex: 'serverState',
-    align: 'left',
-    customRender(opt) {
-      return opt.value?.sn || '-';
-    },
-  },
-  {
-    title: t('views.index.expiryDate'),
-    dataIndex: 'serverState',
-    align: 'left',
-    customRender(opt) {
-      return opt.value?.expire || '-';
-    },
-  },
-  {
-    title: t('views.index.ipAddress'),
-    dataIndex: 'serverState',
-    align: 'left',
-    customRender(opt) {
-      return opt.value?.neIP || '-';
-    },
-  },
-];
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**记录数据 */
-  data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: 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: '-',
-});
-
-/**查询网元状态列表 */
-function fnGetList(one: boolean) {
-  if (tableState.loading) return;
-  one && (tableState.loading = true);
-  listAllNeInfo({ bandStatus: true }).then(res => {
-    tableState.data = res.data;
-    tableState.loading = false;
-    var rightNum = 0;
-    var errorNum = 0;
-    res.data.forEach((item: any) => {
-      if (item.serverState.online) {
-        rightNum++;
-      } else {
-        errorNum++;
-      }
-    });
-    const optionData: any = {
-      title: {
-        text: '',
-        subtext: '',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        left: 'left',
-      },
-      color: indexColor.value.map(item => item.tagClass),
-      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);
-
-  // 创建 ResizeObserver 实例
-  var observer = new ResizeObserver(entries => {
-    if (statusBarChart.value) {
-      statusBarChart.value.resize();
-    }
-  });
-  // 监听元素大小变化
-  observer.observe(container);
-}
-
-/**抽屉 网元详细信息 */
-const open = ref(false);
-const closeDrawer = () => {
-  open.value = false;
-};
-/**抽屉 网元详细信息 */
-
-/**监听表格行事件*/
-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;
-
-        // 将KB转换为MB
-        const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
-        const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
-        const sysMemUsageInMB =
-          Math.round((sysMemUsageInKB / 1024) * 100) / 100;
-
-        //渲染详细信息
-        pronInfo = {
-          hostName: pronData.hostname,
-          osInfo: pronData.os,
-          ipAddress: pronData.neIP,
-          version: pronData.version,
-          cpuUse:
-            pronData.neName +
-            ':' +
-            pronData.cpu?.nfCpuUsage / 100 +
-            '%; ' +
-            'SYS:' +
-            pronData.cpu?.sysCpuUsage / 100 +
-            '%',
-          memoryUse:
-            'Total:' +
-            totalMemInMB +
-            'MB; ' +
-            pronData.name +
-            ':' +
-            nfUsedMemInMB +
-            'MB; SYS:' +
-            sysMemUsageInMB +
-            'MB',
-          capability: pronData.capability,
-          serialNum: pronData.sn,
-          expiryDate: pronData.expire,
-        };
-      }
-      open.value = true;
-    },
-  };
-}
-let timer: any;
-
-/**
- * 国际化翻译转换
- */
-function fnLocale() {
-  let title = route.meta.title as string;
-  if (title.indexOf('router.') !== -1) {
-    title = t(title);
-  }
-  appStore.setTitle(title);
-}
-
-onMounted(() => {
-  getDict('index_status')
-    .then(res => {
-      if (res.length > 0) {
-        indexColor.value = res;
-      }
-    })
-    .finally(() => {
-      fnLocale();
-      fnGetList(true);
-      timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次
-    });
-});
-
-// 在组件卸载之前清除定时器
-
-onBeforeUnmount(() => {
-  clearInterval(timer);
-});
-</script>
-
-<template>
-  <PageContainer :breadcrumb="{}">
-    <div>
-      <a-drawer :open="open" @close="closeDrawer" :width="700">
-        <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
-          <a-descriptions-item :label="t('views.index.hostName')">{{
-            pronInfo.hostName
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.osInfo')">{{
-            pronInfo.osInfo
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.ipAddress')">{{
-            pronInfo.ipAddress
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.version')">{{
-            pronInfo.version
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.capability')">{{
-            pronInfo.capability
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.cpuUse')">{{
-            pronInfo.cpuUse
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.memoryUse')">{{
-            pronInfo.memoryUse
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.serialNum')">{{
-            pronInfo.serialNum
-          }}</a-descriptions-item>
-          <a-descriptions-item :label="t('views.index.expiryDate')">{{
-            pronInfo.expiryDate
-          }}</a-descriptions-item>
-        </a-descriptions>
-      </a-drawer>
-    </div>
-
-    <a-row :gutter="16">
-      <a-col :lg="14" :md="16" :xs="24">
-        <!-- 表格列表 -->
-        <a-table
-          class="table"
-          row-key="id"
-          size="small"
-          :columns="tableColumns"
-          :loading="tableState.loading"
-          :data-source="tableState.data"
-          :pagination="false"
-          :scroll="{ x: true }"
-          :customRow="rowClick"
-        >
-          <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>
-            </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"
-          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"
-          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>
-        </a-card>
-      </a-col>
-    </a-row>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped></style>

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

@@ -0,0 +1,280 @@
+<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,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/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 { 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 useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,

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/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 { 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 useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -161,13 +161,6 @@ let tableColumns: ColumnsType = [
       return cdrJSON.calledParty;
     },
   },
-  {
-    title: t('views.dashboard.cdr.result'),
-    dataIndex: 'cdrJSON',
-    key: 'cause',
-    align: 'left',
-    width: 150,
-  },
   {
     title: t('views.dashboard.cdr.duration'),
     dataIndex: 'cdrJSON',
@@ -182,29 +175,20 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: t('views.dashboard.cdr.seizureTime'),
+    title: t('views.dashboard.cdr.result'),
     dataIndex: 'cdrJSON',
+    key: 'cause',
     align: 'left',
-    width: 200,
-    customRender(opt) {
-      const cdrJSON = opt.value;
-      if (typeof cdrJSON.seizureTime === 'number') {
-        return parseDateToStr(+cdrJSON.seizureTime * 1000);
-      }
-      return cdrJSON.seizureTime;
-    },
+    width: 150,
   },
   {
-    title: t('views.dashboard.cdr.releaseTime'),
+    title: t('views.dashboard.cdr.time'),
     dataIndex: 'cdrJSON',
-    align: 'left',
-    width: 200,
+    align: 'center',
+    width: 150,
     customRender(opt) {
       const cdrJSON = opt.value;
-      if (typeof cdrJSON.releaseTime === 'number') {
-        return parseDateToStr(+cdrJSON.releaseTime * 1000);
-      }
-      return cdrJSON.releaseTime;
+      return parseDateToStr(+cdrJSON.releaseTime * 1000);
     },
   },
   {
@@ -571,7 +555,9 @@ onBeforeUnmount(() => {
               <a-select
                 v-model:value="recordTypes"
                 mode="multiple"
-                :options="['MOC', 'MTC'].map(v => ({ value: v }))"
+                :options="
+                  ['MOC', 'MTC', 'MOSM', 'MTSM'].map(v => ({ value: v }))
+                "
                 :placeholder="t('common.selectPlease')"
                 @change="fnQueryRecordTypeChange"
               ></a-select>
@@ -739,91 +725,61 @@ onBeforeUnmount(() => {
           </template>
         </template>
         <template #expandedRowRender="{ record }">
-          <a-row :gutter="16">
-            <a-col :lg="5" :md="12" :xs="24">
-              <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.releaseTime === 'number'
-                      ? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
-                      : record.cdrJSON.releaseTime
-                  }}
-                </span>
-              </div>
-            </a-col>
-            <a-col :lg="6" :md="12" :xs="24">
-              <a-divider orientation="left">
-                {{ t('views.dashboard.cdr.rowInfo') }}
-              </a-divider>
-              <div>
-                <span>{{ t('views.dashboard.cdr.type') }}: </span>
+          <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>
+              <DictTag
+                :options="dict.cdrCallType"
+                :value="record.cdrJSON.callType"
+              />
+            </div>
+            <div>
+              <span>{{ t('views.dashboard.cdr.duration') }}: </span>
+              <span v-if="record.cdrJSON.callType !== 'sms'">
+                {{ parseDuration(record.cdrJSON.callDuration) }}
+              </span>
+              <span v-else> - </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.callType !== 'sms'">
                 <DictTag
-                  :options="dict.cdrCallType"
-                  :value="record.cdrJSON.callType"
+                  :options="dict.cdrSipCode"
+                  :value="record.cdrJSON.cause"
+                  value-default="0"
                 />
-              </div>
-              <div>
-                <span>{{ t('views.dashboard.cdr.duration') }}: </span>
-                <span v-if="record.cdrJSON.callType !== 'sms'">
-                  {{ parseDuration(record.cdrJSON.callDuration) }}
-                </span>
-                <span v-else> - </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.callType !== 'sms'">
-                  <DictTag
-                    :options="dict.cdrSipCode"
-                    :value="record.cdrJSON.cause"
-                    value-default="0"
-                  />
-                </span>
-                <span v-else>
-                  {{ t('views.dashboard.cdr.resultOk') }}
-                </span>
-              </div>
-              <div>
-                <span>{{ t('views.dashboard.cdr.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>
-                  {{
-                    typeof record.cdrJSON.releaseTime === 'number'
-                      ? parseDateToStr(+record.cdrJSON.releaseTime * 1000)
-                      : record.cdrJSON.releaseTime
-                  }}
-                </span>
-              </div>
-            </a-col>
-          </a-row>
+              </span>
+              <span v-else>
+                {{ t('views.dashboard.cdr.resultOk') }}
+              </span>
+            </div>
+          </div>
         </template>
       </a-table>
     </a-card>

src/views/dashboard/mmeUE/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/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 { 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 useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -415,8 +415,7 @@ onMounted(() => {
       dict.ueAauthCode = resArr[0].value;
     }
     if (resArr[1].status === 'fulfilled') {
-      const ueEventType: any[] = JSON.parse(JSON.stringify(resArr[1]));
-      dict.ueEventType = ueEventType.map(item => {
+      dict.ueEventType = resArr[1].value.map(item => {
         if (item.value === 'cm-state') {
           item.label = item.label.replace('CM', 'ECM');
         }

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

@@ -1,14 +1,13 @@
 <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:open']);
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
 const props = defineProps({
   title: {
     type: String,
     default: '标题',
   },
-  open: {
+  visible: {
     type: Boolean,
     default: false,
   },
@@ -28,13 +27,13 @@ let dataState = reactive({
 function fnModalOk() {
   dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
   emit('ok');
-  emit('update:open', false);
+  emit('update:visible', false);
 }
 
 /**弹框取消按钮事件 */
 function fnModalCancel() {
   emit('cancel');
-  emit('update:open', false);
+  emit('update:visible', false);
 }
 
 /**显示弹框时初始数据 */
@@ -49,7 +48,7 @@ function init() {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.open,
+  () => props.visible,
   val => {
     if (val) init();
   }
@@ -61,7 +60,7 @@ watch(
     :drag="true"
     :width="800"
     :title="props.title"
-    :open="props.open"
+    :visible="props.visible"
     :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';
@@ -157,26 +157,22 @@ async function fnGetSkim() {
 /**初始数据函数 */
 function loadData() {
   fnGetNeState(); // 获取网元状态
-  userActivitySend();
-  upfTFSend('0');
-  upfTFSend('7');
-  upfTFSend('30');
+  userActivitySend(); 
+  upfTFSend(0);
+  upfTFSend(7);
+  upfTFSend(30);
 
-  clearInterval(interval10s.value);
   interval10s.value = setInterval(() => {
-    if (upfTFActive.value === '0') {
-      upfTFSend('7');
-      upfTFActive.value = '7';
-    } else if (upfTFActive.value === '7') {
-      upfTFSend('30');
-      upfTFActive.value = '30';
-    } else if (upfTFActive.value === '30') {
-      upfTFSend('0');
-      upfTFActive.value = '0';
+    upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
+    if (upfTFActive.value === 0) {
+      upfTFSend(7);
+    } else if (upfTFActive.value === 1) {
+      upfTFSend(30);
+    } else if (upfTFActive.value === 2) {
+      upfTFSend(0);
     }
   }, 10_000);
 
-  clearInterval(interval5s.value);
   interval5s.value = setInterval(() => {
     fnGetSkim(); // 获取概览信息
     fnGetNeState(); // 获取网元状态
@@ -208,7 +204,7 @@ onBeforeUnmount(() => {
 /**MOCN状态 */
 const mocnState = reactive({
   title: 'Set MOCN Data',
-  open: false,
+  visible: false,
   data: {
     /**基站数 */
     baseNum: 0,
@@ -220,7 +216,7 @@ const mocnState = reactive({
 });
 /**MOCN 右击设置 */
 function fnRightClick() {
-  mocnState.open = true;
+  mocnState.visible = true;
 }
 </script>
 
@@ -429,12 +425,12 @@ function fnRightClick() {
             <div class="filter">
               <span
                 :data-key="v"
-                :class="{ active: upfTFActive === v }"
-                v-for="v in ['0', '7', '30']"
+                :class="{ active: upfTFActive === i }"
+                v-for="(v, i) in ['0', '7', '30']"
                 :key="v"
                 @click="
                   () => {
-                    upfTFActive = v;
+                    upfTFActive = i;
                   }
                 "
               >
@@ -454,14 +450,14 @@ function fnRightClick() {
                   <ArrowUpOutlined style="color: #597ef7" />
                   {{ t('views.dashboard.overview.upfFlowTotal.up') }}
                 </span>
-                <h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
+                <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
               </div>
               <div class="item">
                 <span>
                   <ArrowDownOutlined style="color: #52c41a" />
                   {{ t('views.dashboard.overview.upfFlowTotal.down') }}
                 </span>
-                <h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
+                <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
               </div>
             </div>
           </div>
@@ -543,9 +539,9 @@ function fnRightClick() {
         </div>
       </div>
     </div>
-    <Setting
+    <setting
       :title="mocnState.title"
-      v-model:open="mocnState.open"
+      v-model:visible="mocnState.visible"
     ></setting>
   </div>
 </template>

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

@@ -2,10 +2,9 @@
 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/es';
+import { message } from 'ant-design-vue/lib';
 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 {
@@ -187,12 +186,6 @@ 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/hooks/useUPFTotalFlow.ts

@@ -36,63 +36,47 @@ 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 = {
   /**上行 N3 */
-  up: number;
-  upFrom: string;
+  up: string;
   /**下行 N6 */
-  down: number;
-  downFrom: string;
+  down: string;
   /**请求标记 */
   requestFlag: boolean;
 };
 
 /**UPF-总流量数 */
-export const upfTotalFlow = ref<Record<string, TFType>>({
-  '0': {
-    up: 0,
-    upFrom: '0 B',
-    down: 0,
-    downFrom: '0 B',
+export const upfTotalFlow = ref<TFType[]>([
+  // 0天 当天24小时
+  {
+    up: '0 B',
+    down: '0 B',
     requestFlag: false,
   },
-  '7': {
-    up: 0,
-    upFrom: '0 B',
-    down: 0,
-    downFrom: '0 B',
+  {
+    up: '0 B',
+    down: '0 B',
     requestFlag: false,
   },
-  '30': {
-    up: 0,
-    upFrom: '0 B',
-    down: 0,
-    downFrom: '0 B',
+  {
+    up: '0 B',
+    down: '0 B',
     requestFlag: false,
   },
-});
+]);
 
 /**UPF-总流量数 数据解析 */
-export function upfTFParse(day: string, data: Record<string, number>) {
+export function upfTFParse(data: Record<string, string>) {
   let { up, down } = data;
-  upfTotalFlow.value[day] = {
-    up: up,
-    upFrom: parseSizeFromBits(up),
-    down: down,
-    downFrom: parseSizeFromBits(down),
-    requestFlag: false,
-  };
+  up = parseSizeFromBits(up);
+  down = parseSizeFromBits(down);
+  return { up, down };
 }
 
 /**UPF-总流量数 选中 */
-export const upfTFActive = ref<string>('0');
+export const upfTFActive = ref<number>(0);
 
 /**属性复位 */
 export function upfTotalFlowReset() {
@@ -102,14 +86,23 @@ export function upfTotalFlowReset() {
     lineYDown: [],
     cap: 0,
   };
-  for (const key of Object.keys(upfTotalFlow.value)) {
-    upfTotalFlow.value[key] = {
-      up: 0,
-      upFrom: '0 B',
-      down: 0,
-      downFrom: '0 B',
+  upfTotalFlow.value = [
+    // 0天 当天24小时
+    {
+      up: '0 B',
+      down: '0 B',
       requestFlag: false,
-    };
-  }
-  upfTFActive.value = '0';
+    },
+    {
+      up: '0 B',
+      down: '0 B',
+      requestFlag: false,
+    },
+    {
+      up: '0 B',
+      down: '0 B',
+      requestFlag: false,
+    },
+  ];
+  upfTFActive.value = 0;
 }

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

@@ -25,6 +25,12 @@ export default function useWS() {
     ws.send(data);
   }
 
+  /**接收数据后回调 */
+  function wsError(ev: any) {
+    // 接收数据后回调
+    console.error(ev);
+  }
+
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
     // console.log(res);
@@ -44,7 +50,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);
         }
@@ -63,13 +69,22 @@ export default function useWS() {
         break;
       //UPF-总流量数
       case 'upf_001_0':
-        upfTFParse('0', data);
+        const v0 = upfTFParse(data);
+        upfTotalFlow.value[0].up = v0.up;
+        upfTotalFlow.value[0].down = v0.down;
+        upfTotalFlow.value[0].requestFlag = false;
         break;
       case 'upf_001_7':
-        upfTFParse('7', data);
+        const v7 = upfTFParse(data);
+        upfTotalFlow.value[1].up = v7.up;
+        upfTotalFlow.value[1].down = v7.down;
+        upfTotalFlow.value[1].requestFlag = false;
         break;
       case 'upf_001_30':
-        upfTFParse('30', data);
+        const v30 = upfTFParse(data);
+        upfTotalFlow.value[2].up = v30.up;
+        upfTotalFlow.value[2].down = v30.down;
+        upfTotalFlow.value[2].requestFlag = false;
         break;
     }
 
@@ -85,7 +100,7 @@ export default function useWS() {
         }
         break;
       // AMF_UE会话事件
-      case '1010':
+      case '1010_001':
         if (data.data) {
           queue.add(() => eventItemParseAndPush('amf_ue', data.data));
         }
@@ -106,12 +121,20 @@ export default function useWS() {
   }
 
   /**UPF-总流量数 发消息*/
-  function upfTFSend(day: '0' | '7' | '30') {
+  function upfTFSend(day: 0 | 7 | 30) {
     // 请求标记检查避免重复发送
-    if (upfTotalFlow.value[day].requestFlag) {
+    let index = 0;
+    if (day === 0) {
+      index = 0;
+    } else if (day === 7) {
+      index = 1;
+    } else if (day === 30) {
+      index = 2;
+    }
+    if (upfTotalFlow.value[index].requestFlag) {
       return;
     }
-    upfTotalFlow.value[day].requestFlag = true;
+    upfTotalFlow.value[index].requestFlag = true;
 
     ws.send({
       requestId: `upf_001_${day}`,
@@ -119,7 +142,7 @@ export default function useWS() {
       data: {
         neType: 'UPF',
         neId: '001',
-        day: Number(day),
+        day: day,
       },
     });
   }
@@ -128,7 +151,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 +159,7 @@ export default function useWS() {
         sortField: 'timestamp',
         sortOrder: 'desc',
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 5,
       },
     });
     // MME_UE会话事件
@@ -149,7 +172,7 @@ export default function useWS() {
         sortField: 'timestamp',
         sortOrder: 'desc',
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 5,
       },
     });
     // IMS_CDR会话事件
@@ -163,7 +186,7 @@ export default function useWS() {
         sortField: 'timestamp',
         sortOrder: 'desc',
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 5,
       },
     });
   }
@@ -175,16 +198,14 @@ export default function useWS() {
         /**订阅通道组
          *
          * 指标UPF (GroupID:12_neId)
-         * AMF_UE会话事件(GroupID:1010)
+         * AMF_UE会话事件(GroupID:1010_neId)
          * MME_UE会话事件(GroupID:1011_neId)
          * IMS_CDR会话事件(GroupID:1005_neId)
          */
-        subGroupID: '12_001,1010,1011_001,1005_001',
+        subGroupID: '12_001,1010_001,1011_001,1005_001',
       },
       onmessage: wsMessage,
-      onerror: (ev: any) => {
-        console.error(ev);
-      },
+      onerror: wsError,
     };
     ws.connect(options);
   });

src/views/dashboard/overview/index.vue

@@ -156,28 +156,24 @@ async function fnGetSkim() {
 function loadData() {
   fnGetNeState(); // 获取网元状态
   userActivitySend();
-  upfTFSend('0');
-  upfTFSend('7');
-  upfTFSend('30');
+  upfTFSend(0);
+  upfTFSend(7);
+  upfTFSend(30);
 
   clearInterval(interval10s.value);
   interval10s.value = setInterval(() => {
-    if (!interval10s.value) return
-    if (upfTFActive.value === '0') {
-      upfTFSend('7');
-      upfTFActive.value = '7';
-    } else if (upfTFActive.value === '7') {
-      upfTFSend('30');
-      upfTFActive.value = '30';
-    } else if (upfTFActive.value === '30') {
-      upfTFSend('0');
-      upfTFActive.value = '0';
+    upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
+    if (upfTFActive.value === 0) {
+      upfTFSend(7);
+    } else if (upfTFActive.value === 1) {
+      upfTFSend(30);
+    } else if (upfTFActive.value === 2) {
+      upfTFSend(0);
     }
   }, 10_000);
 
   clearInterval(interval5s.value);
   interval5s.value = setInterval(() => {
-    if (!interval5s.value) return
     fnGetSkim(); // 获取概览信息
     fnGetNeState(); // 获取网元状态
   }, 5_000);
@@ -415,12 +411,12 @@ onBeforeUnmount(() => {
             <div class="filter">
               <span
                 :data-key="v"
-                :class="{ active: upfTFActive === v }"
-                v-for="v in ['0', '7', '30']"
+                :class="{ active: upfTFActive === i }"
+                v-for="(v, i) in ['0', '7', '30']"
                 :key="v"
                 @click="
                   () => {
-                    upfTFActive = v;
+                    upfTFActive = i;
                   }
                 "
               >
@@ -440,14 +436,14 @@ onBeforeUnmount(() => {
                   <ArrowUpOutlined style="color: #597ef7" />
                   {{ t('views.dashboard.overview.upfFlowTotal.up') }}
                 </span>
-                <h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
+                <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
               </div>
               <div class="item">
                 <span>
                   <ArrowDownOutlined style="color: #52c41a" />
                   {{ t('views.dashboard.overview.upfFlowTotal.down') }}
                 </span>
-                <h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
+                <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
               </div>
             </div>
           </div>

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/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 { 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 useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import {
@@ -16,6 +16,7 @@ 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';
@@ -699,7 +700,7 @@ onBeforeUnmount(() => {
               </div>
               <div>
                 <span>{{ t('views.dashboard.cdr.time') }}: </span>
-                <span>{{ record.cdrJSON.invocationTimestamp }}</span>
+                <span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
               </div>
               <a-divider orientation="left">
                 {{ t('views.dashboard.cdr.rowInfo') }}
@@ -812,15 +813,6 @@ onBeforeUnmount(() => {
                   }}
                 </span>
               </div>
-              <div>
-                <span>Network Function IPv4: </span>
-                <span>
-                  {{
-                    record.cdrJSON.nFunctionConsumerInformation
-                      ?.networkFunctionIPv4Address
-                  }}
-                </span>
-              </div>
             </a-col>
           </a-row>
         </template>

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/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 { 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 useDictStore from '@/store/modules/dict';
 import useI18n from '@/hooks/useI18n';
 import {
@@ -176,10 +176,7 @@ let tableColumns: ColumnsType = [
     width: 150,
     customRender(opt) {
       const cdrJSON = opt.value;
-      if (typeof cdrJSON.updateTime === 'number') {
-        return parseDateToStr(+cdrJSON.updateTime * 1000);
-      }
-      return cdrJSON.updateTime;
+      return parseDateToStr(+cdrJSON.updateTime * 1000);
     },
   },
   {
@@ -718,13 +715,7 @@ onBeforeUnmount(() => {
             </div>
             <div>
               <span>{{ t('views.dashboard.cdr.time') }}: </span>
-              <span>
-                {{
-                  typeof record.cdrJSON.updateTime === 'number'
-                    ? parseDateToStr(+record.cdrJSON.updateTime * 1000)
-                    : record.cdrJSON.updateTime
-                }}
-              </span>
+              <span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
             </div>
             <a-divider orientation="left">
               {{ t('views.dashboard.cdr.rowInfo') }}

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

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-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 { 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 {
   listAct,
   updateConfirm,
@@ -329,15 +328,15 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  openByView: boolean;
+  visibleByView: boolean;
   /**新增框或修改框是否显示 */
-  openByEdit: boolean;
+  visibleByEdit: boolean;
   /**显示过滤设置是否显示 */
-  openByShowSet: boolean;
+  visibleByShowSet: boolean;
   /**告警帮助文档是否显示 */
   helpShowView: boolean;
   /**个性化设置置是否显示 */
-  openByMyselfSet: boolean;
+  visibleByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -350,11 +349,11 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  openByView: false,
-  openByEdit: false,
-  openByShowSet: false,
+  visibleByView: false,
+  visibleByEdit: false,
+  visibleByShowSet: false,
   helpShowView: false,
-  openByMyselfSet: false,
+  visibleByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -406,7 +405,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.openByView = true;
+  modalState.visibleByView = true;
 }
 
 /** 告警帮助文档详细信息 */
@@ -435,7 +434,7 @@ function fnModalOk() {
       duration: 3,
     });
     modalState.confirmLoading = false;
-    modalState.openByView = false;
+    modalState.visibleByView = false;
     return false;
   }
   const result = updateConfirm(from);
@@ -447,7 +446,7 @@ function fnModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.openByView = false;
+        modalState.visibleByView = false;
         fnGetList();
       } else {
         message.error({
@@ -477,7 +476,7 @@ function fnShowModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.openByShowSet = false;
+        modalState.visibleByShowSet = false;
         fnGetList();
       } else {
         message.error({
@@ -605,7 +604,7 @@ function fnShowSet() {
         : {};
       modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson);
       modalState.title = t('views.faultManage.activeAlarm.showSet');
-      modalState.openByShowSet = true;
+      modalState.visibleByShowSet = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -613,19 +612,13 @@ function fnShowSet() {
 }
 
 // key替换中文title
-function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
-  return data.map((item: any) => {
-    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;
-      },
-      {}
-    ); // 确保初始值是一个空对象
+function mapKeysWithReduce(data: any, titleMapping: 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;
+    });
   });
 }
 
@@ -680,7 +673,6 @@ function fnExportAll() {
 
             return filteredObj;
           });
-          console.log(mappArr);
 
           res.data = mapKeysWithReduce(res.data, mappArr);
           writeSheet(res.data, 'alarm', sortData).then(fileBlob => {
@@ -708,9 +700,9 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalState.openByView = false;
-  modalState.openByShowSet = false;
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
+  modalState.visibleByShowSet = false;
   modalState.helpShowView = false;
 }
 
@@ -841,7 +833,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -881,7 +873,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -916,7 +908,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-button
             type="primary"
             @click.prevent="fnCancelConfirm()"
@@ -960,12 +952,12 @@ onMounted(() => {
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
-        </a-space>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -1010,7 +1002,7 @@ onMounted(() => {
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->
@@ -1088,7 +1080,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.helpShowView"
+      :visible="modalState.helpShowView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       :body-style="{ padding: '0px' }"
@@ -1115,7 +1107,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByView"
+      :visible="modalState.visibleByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1128,7 +1120,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :label-wrap="true"
       >
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -1147,7 +1139,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -1166,7 +1158,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1185,7 +1177,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -1204,7 +1196,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -1231,9 +1223,9 @@ onMounted(() => {
           {{ modalState.from.locationInfo }}
         </a-form-item>
 
-        <a-row> </a-row>
+        <a-row :gutter="16"> </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -1276,7 +1268,7 @@ onMounted(() => {
           {{ modalState.from.specificProblem }}
         </a-form-item>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1295,7 +1287,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackTime')"
@@ -1322,7 +1314,7 @@ onMounted(() => {
       :width="800"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByShowSet"
+      :visible="modalState.visibleByShowSet"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnShowModalOk"
@@ -1330,7 +1322,7 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateShowFrom" layout="horizontal">
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1355,7 +1347,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1386,7 +1378,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1422,7 +1414,7 @@ onMounted(() => {
       :width="800"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByMyselfSet"
+      :visible="modalState.visibleByMyselfSet"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnShowModalOk"
@@ -1430,7 +1422,7 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateShowFrom" layout="horizontal">
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1454,7 +1446,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1485,7 +1477,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"

src/views/faultManage/event/index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-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 { 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 { listAct, exportAll } from '@/api/faultManage/eventAlarm';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -212,13 +211,13 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  openByView: boolean;
+  visibleByView: boolean;
   /**新增框或修改框是否显示 */
-  openByEdit: boolean;
+  visibleByEdit: boolean;
   /**显示过滤设置是否显示 */
-  openByShowSet: boolean;
+  visibleByShowSet: boolean;
   /**个性化设置置是否显示 */
-  openByMyselfSet: boolean;
+  visibleByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -231,10 +230,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  openByView: false,
-  openByEdit: false,
-  openByShowSet: false,
-  openByMyselfSet: false,
+  visibleByView: false,
+  visibleByEdit: false,
+  visibleByShowSet: false,
+  visibleByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -286,7 +285,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.openByView = true;
+  modalState.visibleByView = true;
 }
 
 /**表格状态 */
@@ -311,8 +310,8 @@ 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;
@@ -361,7 +360,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,
@@ -385,8 +384,8 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalState.openByView = false;
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -509,7 +508,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -551,7 +550,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -571,7 +570,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-button
             type="primary"
             @click.prevent="fnExportAll()"
@@ -580,12 +579,12 @@ onMounted(() => {
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
-        </a-space>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -630,7 +629,7 @@ onMounted(() => {
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->
@@ -642,7 +641,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120, y: 400 }"
+        :scroll="{ x: 2500, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -690,7 +689,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByView"
+      :visible="modalState.visibleByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @cancel="fnModalCancel"
@@ -707,7 +706,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :label-wrap="true"
       >
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -726,7 +725,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -745,7 +744,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -764,7 +763,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -791,7 +790,9 @@ onMounted(() => {
           {{ modalState.from.locationInfo }}
         </a-form-item>
 
-        <a-row>
+        <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')"
@@ -818,7 +819,7 @@ onMounted(() => {
           {{ modalState.from.addInfo }}
         </a-form-item>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.specificProblemId')"

src/views/faultManage/fault-setting/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message } from 'ant-design-vue/es';
+import { Form, message } from 'ant-design-vue/lib';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
   getForwardSet,
@@ -177,7 +177,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row>
+    <a-row :gutter="16">
       <a-col :span="8" v-if="false">
         <!-- 日志设置 -->
         <a-card :title="alarmState.title" :loading="alarmState.fromLoading">

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

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-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 { 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 {
   listAct,
   updateConfirm,
@@ -263,13 +262,13 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  openByView: boolean;
+  visibleByView: boolean;
   /**新增框或修改框是否显示 */
-  openByEdit: boolean;
+  visibleByEdit: boolean;
   /**显示过滤设置是否显示 */
-  openByShowSet: boolean;
+  visibleByShowSet: boolean;
   /**个性化设置置是否显示 */
-  openByMyselfSet: boolean;
+  visibleByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -282,10 +281,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  openByView: false,
-  openByEdit: false,
-  openByShowSet: false,
-  openByMyselfSet: false,
+  visibleByView: false,
+  visibleByEdit: false,
+  visibleByShowSet: false,
+  visibleByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -337,7 +336,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.openByView = true;
+  modalState.visibleByView = true;
 }
 
 /**
@@ -352,7 +351,7 @@ function fnModalOk() {
       duration: 3,
     });
     modalState.confirmLoading = false;
-    modalState.openByView = false;
+    modalState.visibleByView = false;
     return false;
   }
   const result = updateConfirm(from);
@@ -364,7 +363,7 @@ function fnModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.openByView = false;
+        modalState.visibleByView = false;
         fnGetList();
       } else {
         message.error({
@@ -428,19 +427,13 @@ function fnCancelConfirm() {
 }
 
 // key替换中文title
-function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
-  return data.map((item: any) => {
-    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;
-      },
-      {}
-    );
+function mapKeysWithReduce(data: any, titleMapping: 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;
+    });
   });
 }
 
@@ -522,9 +515,9 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalState.openByView = false;
-  modalState.openByShowSet = false;
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
+  modalState.visibleByShowSet = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -648,7 +641,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -688,7 +681,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -809,7 +802,7 @@ onMounted(() => {
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120, y: 400 }"
+        :scroll="{ x: 2500, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -857,7 +850,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByView"
+      :visible="modalState.visibleByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -869,7 +862,7 @@ onMounted(() => {
         layout="horizontal"
         :label-col="{ span: 8 }"
       >
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -888,7 +881,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -907,7 +900,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -926,7 +919,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -945,7 +938,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -972,7 +965,7 @@ onMounted(() => {
         >
           {{ modalState.from.locationInfo }}
         </a-form-item>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -1013,7 +1006,7 @@ onMounted(() => {
         >
           {{ modalState.from.specificProblem }}
         </a-form-item>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.clearType')"
@@ -1032,7 +1025,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1051,7 +1044,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackTime')"

src/views/index.vue

@@ -1,77 +1,446 @@
 <script setup lang="ts">
-import {
-  defineAsyncComponent,
-  onMounted,
-  ref,
-  shallowRef,
-  type Component,
-} from 'vue';
-import { getConfigKey, changeValue } from '@/api/system/config';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { PageContainer } from 'antdv-pro-layout';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message } from 'ant-design-vue/lib';
+import { reactive, toRaw, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
+import { listMain } from '@/api/index';
+import useI18n from '@/hooks/useI18n';
+import { TooltipComponent } from 'echarts/components';
+import { GaugeChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import * as echarts from 'echarts/core';
+import { TitleComponent, LegendComponent } from 'echarts/components';
+import { PieChart } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+import { useRoute } from 'vue-router';
+import useAppStore from '@/store/modules/app';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
+const appStore = useAppStore();
+const route = useRoute();
+const { t } = useI18n();
 
-const currentComponent = shallowRef<Component | null>(null);
+echarts.use([
+  TooltipComponent,
+  GaugeChart,
+  TitleComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout,
+]);
 
-const spinning = ref<boolean>(true);
+/**图DOM节点实例对象 */
+const statusBar = ref<HTMLElement | undefined>(undefined);
 
-/**匹配views里面所有的.vue或.tsx文件 */
-const views = import.meta.glob('../views/**/*.{vue,tsx}') as Record<
-  string,
-  () => Promise<Component>
->;
+/**图实例对象 */
+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'),
+    dataIndex: 'name',
+    align: 'center',
+    key: 'status',
+  },
+  {
+    title: t('views.index.realNeStatus'),
+    dataIndex: 'status',
+    align: 'center',
+    customRender(opt) {
+      if (opt.value == 'Normal') return t('views.index.normal');
+      return t('views.index.abnormal');
+    },
+  },
+  {
+    title: t('views.index.reloadTime'),
+    dataIndex: 'refresh',
+    align: 'center',
+  },
+  {
+    title: t('views.index.version'),
+    dataIndex: 'version',
+    align: 'center',
+  },
+  {
+    title: t('views.index.serialNum'),
+    dataIndex: 'serialNum',
+    align: 'center',
+  },
+  {
+    title: t('views.index.expiryDate'),
+    dataIndex: 'expiryDate',
+    align: 'center',
+  },
+  {
+    title: t('views.index.ipAddress'),
+    dataIndex: 'ipAddress',
+    key: 'groupName',
+    align: 'center',
+  },
+];
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: string;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+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;
+  /**数据库信息 */
+  dbInfo: string;
+  /**IP地址 */
+  ipAddress: string;
+  /**端口 */
+  port: number;
+  /**版本 */
+  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',
+  dbInfo: 'db v9.9.9',
+  ipAddress: '-',
+  port: 33030,
+  version: '-',
+  cpuUse: '-',
+  memoryUse: '-',
+  capability: 0,
+  serialNum: '-',
+  expiryDate: '-',
+});
+
+/**查询网元状态列表 */
+function fnGetList(one: boolean) {
+  if (tableState.loading) return;
+  one && (tableState.loading = true);
+  listMain().then(res => {
+    tableState.data = res;
+    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++;
+      }
+    }
+
+    const optionData: any = {
+      title: {
+        text: '',
+        subtext: '',
+        left: 'center',
+      },
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+      },
+      color: indexColor.value.map(item => item.tagClass),
+      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);
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(entries => {
+    if (statusBarChart.value) {
+      statusBarChart.value.resize();
+    }
+  });
+  // 监听元素大小变化
+  observer.observe(container);
+}
+
+/**抽屉 网元详细信息 */
+const visible = ref(false);
+const closeDrawer = () => {
+  visible.value = false;
+};
+/**抽屉 网元详细信息 */
+
+/**监听表格行事件*/
+function rowClick(record: any, index: any) {
+  return {
+    onClick: (event: any) => {
+      if (
+        toRaw(record).status == '异常' ||
+        toRaw(record).status == 'Abnormal'
+      ) {
+        message.error(t('views.index.neStatus'), 2);
+        return false;
+      } else {
+        let pronData = toRaw(record);
+        const totalMemInKB = pronData.memUsage?.totalMem;
+        const nfUsedMemInKB = pronData.memUsage?.nfUsedMem;
+        const sysMemUsageInKB = pronData.memUsage?.sysMemUsage;
+
+        // 将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.osInfo,
+          dbInfo: pronData.dbInfo,
+          ipAddress: pronData.ipAddress,
+          port: pronData.port,
+          version: pronData.version,
+          cpuUse:
+            pronData.name +
+            ':' +
+            pronData.cpuUsage?.nfCpuUsage / 100 +
+            '%; ' +
+            'SYS:' +
+            pronData.cpuUsage?.sysCpuUsage / 100 +
+            '%',
+          memoryUse:
+            'Total:' +
+            totalMemInMB +
+            'MB; ' +
+            pronData.name +
+            ':' +
+            nfUsedMemInMB +
+            'MB; SYS:' +
+            sysMemUsageInMB +
+            'MB',
+          capability: pronData.capability,
+          serialNum: pronData.serialNum,
+          expiryDate: pronData.expiryDate,
+        };
+      }
+      visible.value = true;
+    },
+  };
+}
+let timer: any;
 
 /**
- * 查找页面模块
- * @param dirName 组件路径
- * @returns 路由懒加载函数
+ * 国际化翻译转换
  */
-function findView(dirName: string): () => Promise<Component> {
-  for (const dir in views) {
-    let viewDirName = '';
-    const component = dir.match(/\/(.+)\.(vue|tsx)/);
-    if (component && component.length === 3) {
-      viewDirName = component[1];
-    }
-    if (viewDirName === dirName) {
-      return views[dir];
-    }
+function fnLocale() {
+  let title = route.meta.title as string;
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
   }
-  return () => import('@/views/configManage/neOverview/index.vue');
+  appStore.setTitle(title);
 }
 
 onMounted(() => {
-  //获取当前系统设置的首页路径
-  getConfigKey('sys.homePage').then(res => {
-    spinning.value = false;
-    if (res.code === RESULT_CODE_SUCCESS && res.data) {
-      console.log(spinning);
-      if (res.data) {
-        const asyncComponent = findView(`${res.data}`);
-        currentComponent.value = defineAsyncComponent(asyncComponent);
+  getDict('index_status')
+    .then(res => {
+      if (res.length > 0) {
+        indexColor.value = res;
       }
-    } else {
-      currentComponent.value = defineAsyncComponent(
-        () => import('@/views/configManage/neOverview/index.vue')
-      );
-    }
-  });
+    })
+    .finally(() => {
+      fnLocale();
+      fnGetList(true);
+      timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次
+    });
+});
+
+// 在组件卸载之前清除定时器
+
+onBeforeUnmount(() => {
+  clearInterval(timer);
 });
 </script>
 
 <template>
-  <a-spin
-    size="large"
-    :spinning="spinning"
-    style="
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      min-height: 362px;
-    "
-  >
-    <component :is="currentComponent" />
-  </a-spin>
+  <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.dbInfo')">{{
+            pronInfo.dbInfo
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.ipAddress')">{{
+            pronInfo.ipAddress
+          }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.port')">{{
+            pronInfo.port
+          }}</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.capability')">{{
+            pronInfo.capability
+          }}</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"
+          :columns="tableColumns"
+          :loading="tableState.loading"
+          :data-source="tableState.data"
+          :pagination="false"
+          :scroll="{ x: true }"
+          :customRow="rowClick"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <div v-if="record.status == '正常' || record.status == 'Normal'">
+                <a-tag color="blue">{{ record.name }}</a-tag>
+              </div>
+              <div v-else>
+                <a-tag color="pink">{{ record.name }}</a-tag>
+              </div>
+            </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">
+          <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
+        </a-card>
+        <a-card :title="t('views.index.mark')" style="margin-top: 16px">
+          <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>
+        </a-card>
+      </a-col>
+    </a-row>
+  </PageContainer>
 </template>
 
 <style lang="less" scoped></style>

src/views/logManage/alarm/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/es/config-provider';
-import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/es/table';
+import { 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 { listAlarm } from '@/api/logManage/alarm';

src/views/logManage/exportFile/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/es/config-provider';
-import { ColumnsType } from 'ant-design-vue/es/table';
-import { Modal, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { Modal, message } from 'ant-design-vue/lib';
 import { parseDateToStr } from '@/utils/date-utils';
 import {
   getBakFile,
@@ -277,27 +277,34 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-form :model="queryParams" name="queryParams" layout="horizontal">
-          <a-row :gutter="16" align="middle">
-            <a-col>
-              <span>{{ t('views.logManage.exportFile.fileName') }}:</span>&nbsp;
-              <a-select
-                v-model:value="logSelect"
-                :options="fileList"
-                @change="fnNeChange"
-                :allow-clear="false"
-                style="width: 200px"
-              />
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.logManage.exportFile.fileName')"
+                name="fileName"
+                style="margin-bottom: 0"
+              >
+                <a-select
+                  v-model:value="logSelect"
+                  :options="fileList"
+                  @change="fnNeChange"
+                  :allow-clear="false"
+                />
+              </a-form-item>
             </a-col>
-            <template v-if="queryParams.path">
-              <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
-              <a-col>
+            <a-col :lg="16" :md="18" :xs="24" v-if="queryParams.path">
+              <a-form-item
+                :label="t('views.logManage.neFile.nePath')"
+                name="configName"
+                style="margin-bottom: 0"
+              >
                 <a-breadcrumb>
                   <a-breadcrumb-item>
                     {{ queryParams.path }}
                   </a-breadcrumb-item>
                 </a-breadcrumb>
-              </a-col>
-            </template>
+              </a-form-item>
+            </a-col>
           </a-row>
         </a-form>
       </template>

src/views/logManage/forwarding/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/es/config-provider';
-import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/es/table';
+import { 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 { listForwarding } from '@/api/logManage/forwarding';

src/views/logManage/logSet/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, Modal, message } from 'ant-design-vue/es';
+import { Form, Modal, message } from 'ant-design-vue/lib';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
   backupDownload,
@@ -411,7 +411,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row>
+    <a-row :gutter="16">
       <a-col :span="8">
         <!-- 日志设置 -->
         <a-card :title="logSetState.title" :loading="logSetState.fromLoading">

src/views/logManage/mml/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/es/config-provider';
-import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/es/table';
+import { 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 { listMML } from '@/api/logManage/mml';
@@ -62,12 +62,12 @@ let tableState: TabeStateType = reactive({
 });
 
 /**表格字段列 */
-let tableColumns: ColumnsType = reactive([
+let tableColumns: ColumnsType = [
   {
     title: t('common.rowId'),
     dataIndex: 'id',
     align: 'left',
-    width: 80,
+    width: 100,
   },
   {
     title: t('views.logManage.mml.account'),
@@ -108,9 +108,9 @@ let tableColumns: ColumnsType = reactive([
     dataIndex: 'mml',
     key: 'mml',
     align: 'left',
-    ellipsis: true,
+    width: 200,
   },
-]);
+];
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -161,11 +161,7 @@ function fnGetList(pageNum?: number) {
     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
-      ) {
+      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -293,15 +289,16 @@ onMounted(() => {
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
-        :pagination="tablePagination" 
+        :pagination="tablePagination"
+        :scroll="{ x: tableColumns.length * 100 }"
       >
         <template #bodyCell="{ column, record }">
-          <!-- <template v-if="column.key === 'mml'">
+          <template v-if="column.key === 'mml'">
             <a-tooltip placement="topLeft">
               <template #title>{{ record.result }}</template>
               <div class="mmlText">{{ record.mml }}</div>
             </a-tooltip>
-          </template> -->
+          </template>
         </template>
       </a-table>
     </a-card>

src/views/logManage/neFile/components/ViewDrawer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { reactive, watch, ref } from 'vue';
+import { reactive, onMounted, watch, ref, nextTick } from 'vue';
 import { ProModal } from 'antdv-pro-modal';
 import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:open']);
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
 const props = defineProps({
-  open: {
+  visible: {
     type: Boolean,
     default: false,
     required: true,
@@ -34,7 +34,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type StateType = {
   /**框是否显示 */
-  open: boolean;
+  visible: boolean;
   /**标题 */
   title: string;
   /**查看命令 */
@@ -43,7 +43,7 @@ type StateType = {
 
 /**对话框对象信息状态 */
 let state: StateType = reactive({
-  open: false,
+  visible: false,
   title: '文件查看',
   form: {
     follow: true,
@@ -54,21 +54,21 @@ let state: StateType = reactive({
 });
 
 function onClose() {
-  state.open = false;
+  state.visible = false;
   emit('cancel');
-  emit('update:open', false);
+  emit('update:visible', false);
 }
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.open,
+  () => props.visible,
   val => {
     if (val) {
       if (props.neType && props.neId) {
         const filePath = props.filePath;
         const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
         state.title = fileName;
-        state.open = true;
+        state.visible = true;
       }
     }
   }
@@ -86,20 +86,19 @@ function fnInit() {
 function fnReload() {
   if (!viewTerminal.value) return;
   viewTerminal.value.ctrlC();
+
   if (state.form.showType !== 'lines') {
     state.form.lines = 10;
   } else {
     state.form.char = 0;
   }
   viewTerminal.value.clear();
-  setTimeout(() => {
-    viewTerminal.value.send('tail', {
-      filePath: props.filePath,
-      lines: state.form.lines,
-      char: state.form.char,
-      follow: state.form.follow,
-    });
-  }, 1000);
+  viewTerminal.value.send('tail', {
+    filePath: props.filePath,
+    lines: state.form.lines,
+    char: state.form.char,
+    follow: state.form.follow,
+  });
 }
 </script>
 
@@ -114,25 +113,23 @@ function fnReload() {
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :open="state.open"
+    :visible="state.visible"
     :title="state.title"
-    :body-style="{ overflow: 'hidden' }"
+    :body-style="{ padding: '12px', overflow: 'hidden' }"
     :footer="null"
     @cancel="onClose"
   >
     <TerminalSSHView
       ref="viewTerminal"
       :id="`V${Date.now()}`"
-      prefix="tail"
-      url="/ws/view"
+      style="height: calc(100% - 36px)"
       :ne-type="neType"
       :ne-id="neId"
-      style="height: calc(100% - 36px)"
       @connect="fnInit()"
     ></TerminalSSHView>
     <!-- 命令控制属性 -->
     <a-form name="form" layout="horizontal">
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item :label="t('views.logManage.neFile.viewAs')">
             <a-input-group compact>

src/views/logManage/neFile/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/es/config-provider';
-import { ColumnsType } from 'ant-design-vue/es/table';
-import { Modal, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { ColumnsType } from 'ant-design-vue/lib/table';
+import { Modal, message } from 'ant-design-vue/lib';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -204,13 +204,11 @@ function fnDirCD(dir: string, index?: number) {
 
 /**网元类型选择对应修改 */
 function fnNeChange(keys: any, _: any) {
-  if (!Array.isArray(keys)) return;
-  const neType = keys[0];
-  const neId = keys[1];
   // 不是同类型时需要重新加载
-  if (queryParams.neType !== neType || queryParams.neId !== neId) {
+  if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
+    const neType = keys[0];
     queryParams.neType = neType;
-    queryParams.neId = neId;
+    queryParams.neId = keys[1];
     if (neType === 'IMS') {
       nePathArr.value = ['/var/log/ims'];
       queryParams.search = '';
@@ -260,7 +258,7 @@ function fnGetList(pageNum?: number) {
 
 /**抽屉状态 */
 const viewDrawerState = reactive({
-  open: false,
+  visible: false,
   /**文件路径 /var/log/amf.log */
   filePath: '',
   /**网元类型 */
@@ -274,7 +272,7 @@ function fnDrawerOpen(row: Record<string, any>) {
   viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
   viewDrawerState.neType = neTypeSelect.value[0];
   viewDrawerState.neId = neTypeSelect.value[1];
-  viewDrawerState.open = !viewDrawerState.open;
+  viewDrawerState.visible = !viewDrawerState.visible;
 }
 
 onMounted(() => {
@@ -300,33 +298,43 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-row :gutter="16" align="middle">
-          <a-col>
-            <span>{{ t('views.logManage.neFile.neType') }}:</span>&nbsp;
-            <a-cascader
-              v-model:value="neTypeSelect"
-              :options="neInfoStore.getNeCascaderOptions"
-              @change="fnNeChange"
-              :allow-clear="false"
-              :placeholder="t('views.logManage.neFile.neTypePlease')"
-              :disabled="downLoading || tableState.loading"
-            />
-          </a-col>
-          <template v-if="nePathArr.length > 0">
-            <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
-            <a-col>
-              <a-breadcrumb>
-                <a-breadcrumb-item
-                  v-for="(path, index) in nePathArr"
-                  :key="path"
-                  @click="fnDirCD(path, index)"
-                >
-                  {{ path }}
-                </a-breadcrumb-item>
-              </a-breadcrumb>
+        <a-form :model="queryParams" name="queryParams" layout="horizontal">
+          <a-row :gutter="16">
+            <a-col :lg="8" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.logManage.neFile.neType')"
+                name="neType"
+                style="margin-bottom: 0"
+              >
+                <a-cascader
+                  v-model:value="neTypeSelect"
+                  :options="neInfoStore.getNeCascaderOptions"
+                  @change="fnNeChange"
+                  :allow-clear="false"
+                  :placeholder="t('views.logManage.neFile.neTypePlease')"
+                  :disabled="downLoading || tableState.loading"
+                />
+              </a-form-item>
             </a-col>
-          </template>
-        </a-row>
+            <a-col :lg="16" :md="18" :xs="24" v-if="nePathArr.length > 0">
+              <a-form-item
+                :label="t('views.logManage.neFile.nePath')"
+                name="configName"
+                style="margin-bottom: 0"
+              >
+                <a-breadcrumb>
+                  <a-breadcrumb-item
+                    v-for="(path, index) in nePathArr"
+                    :key="path"
+                    @click="fnDirCD(path, index)"
+                  >
+                    {{ path }}
+                  </a-breadcrumb-item>
+                </a-breadcrumb>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -387,7 +395,7 @@ onMounted(() => {
 
     <!-- 文件内容查看抽屉 -->
     <ViewDrawer
-      v-model:open="viewDrawerState.open"
+      v-model:visible="viewDrawerState.visible"
       :file-path="viewDrawerState.filePath"
       :ne-type="viewDrawerState.neType"
       :ne-id="viewDrawerState.neId"

src/views/login.vue

@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import svgLight from '@/assets/svg/light.svg';
-import svgDark from '@/assets/svg/dark.svg';
-import { message } from 'ant-design-vue/es';
-import { reactive, onMounted, computed, toRaw } from 'vue';
+import { message } from 'ant-design-vue/lib';
+import { reactive, onMounted, computed } from 'vue';
 import useUserStore from '@/store/modules/user';
 import useAppStore from '@/store/modules/app';
 import { getCaptchaImage } from '@/api/login';
 import { useRouter, useRoute } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
-import useLayoutStore from '@/store/modules/layout';
-import { viewTransitionTheme } from 'antdv-pro-layout';
+import { toRaw } from 'vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseUrlPath } from '@/plugins/file-static-url';
-const { t, changeLocale, optionsLocale } = useI18n();
-const layoutStore = useLayoutStore();
+const { t, changeLocale, optionsLocale, currentLocale } = useI18n();
 const appStore = useAppStore();
 const router = useRouter();
 const route = useRoute();
@@ -89,12 +85,28 @@ function fnGetCaptcha() {
   });
 }
 
+// LOGO地址
+const logoUrl = computed(() => {
+  let url =
+    appStore.logoType === 'brand'
+      ? parseUrlPath(appStore.filePathBrand)
+      : parseUrlPath(appStore.filePathIcon);
+
+  if (url.indexOf('{language}') === -1) {
+    return url;
+  }
+  // 语言参数替换
+  const local = currentLocale.value;
+  const lang = local.split('_')[0];
+  return url.replace('{language}', lang);
+});
+
 // 判断是否有背景地址
 const calcBG = computed(() => {
   const bgURL = parseUrlPath(appStore.loginBackground);
   if (bgURL && bgURL !== '#') {
     return {
-      backgroundImage: `url('${bgURL}')`,
+      backgroundImage: `url(${bgURL})`,
       backgroundPosition: 'center',
       backgroundSize: 'cover',
     };
@@ -113,13 +125,6 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
-/**改变主题色 */
-function fnClickTheme(e: any) {
-  viewTransitionTheme(isDarkMode => {
-    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
-  }, e);
-}
-
 onMounted(() => {
   fnLocale();
   fnGetCaptcha();
@@ -141,9 +146,21 @@ function fnChangeLocale(e: any) {
       <div class="animation animation5"></div>
     </section>
 
+    <header class="header">
+      <div class="header-left">
+        <template v-if="appStore.logoType === 'icon'">
+          <img :src="logoUrl" class="logo-icon" :alt="appStore.appName" />
+          <span class="title">{{ appStore.appName }}</span>
+        </template>
+        <template v-if="appStore.logoType === 'brand'">
+          <img :src="logoUrl" class="logo-brand" :alt="appStore.appName" />
+        </template>
+      </div>
+    </header>
+
     <a-card :bordered="false" class="login-card">
-      <div class="title">
-        {{ t('common.title') }}
+      <div class="desc">
+        {{ t('common.desc') }}
       </div>
       <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
         <a-form-item
@@ -192,7 +209,7 @@ function fnChangeLocale(e: any) {
           </a-input-password>
         </a-form-item>
 
-        <a-row v-if="state.captcha.enabled">
+        <a-row :gutter="8" v-if="state.captcha.enabled">
           <a-col :span="16">
             <a-form-item
               name="code"
@@ -230,6 +247,7 @@ function fnChangeLocale(e: any) {
         </a-row>
 
         <a-row
+          :gutter="8"
           justify="space-between"
           align="middle"
           style="margin-bottom: 16px"
@@ -256,26 +274,18 @@ function fnChangeLocale(e: any) {
           {{ t('views.login.loginBtn') }}
         </a-button>
 
-        <a-row justify="end" align="middle" style="margin-top: 18px">
-          <a-col :span="3">
-            <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-col>
-          <a-col :span="3" v-if="appStore.i18nOpen">
-            <a-dropdown trigger="click" placement="bottomRight">
-              <a-button type="text">
-                <template #icon> <TranslationOutlined /> </template>
+        <a-row
+          :gutter="8"
+          justify="space-between"
+          align="middle"
+          style="margin-top: 18px"
+          v-if="appStore.i18nOpen"
+        >
+          <a-col :offset="18" :span="6">
+            <a-dropdown trigger="click">
+              <a-button size="small" type="default">
+                {{ t('i18n') }}
+                <DownOutlined />
               </a-button>
               <template #overlay>
                 <a-menu @click="fnChangeLocale">
@@ -289,6 +299,10 @@ function fnChangeLocale(e: any) {
         </a-row>
       </a-form>
     </a-card>
+
+    <footer class="footer">
+      <div class="footer-copyright">{{ appStore.copyright }}</div>
+    </footer>
   </div>
 </template>
 
@@ -301,7 +315,7 @@ function fnChangeLocale(e: any) {
 
   // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
 
-  background-image: url(@/assets/background_light.jpg);
+  background-image: url(@/assets/background.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
@@ -349,9 +363,43 @@ function fnChangeLocale(e: any) {
   }
 }
 
-[data-theme='dark'] .container {
-  background-image: url(@/assets/background_dark.jpg);
-  background-color: #141414;
+.header {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: rgb(255 255 255 / 85%);
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .logo-icon {
+    height: 40px;
+    width: 40px;
+    margin-right: 14px;
+    vertical-align: top;
+    border-style: none;
+    border-radius: 6.66px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+  .logo-brand {
+    height: 48px;
+    width: 174px;
+    vertical-align: top;
+    border-style: none;
+    border-radius: 2px;
+  }
+  .title {
+    position: relative;
+    top: 6px;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 600;
+    font-size: 24px;
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+  }
 }
 
 .login-card {
@@ -361,10 +409,10 @@ function fnChangeLocale(e: any) {
   margin-left: 60%;
   border-radius: 6px;
 
-  & .title {
-    text-align: left;
+  & .desc {
+    text-align: center;
     margin-bottom: 18px;
-    color: #141414;
+    color: #666;
     font-weight: 600;
     font-size: 18px;
   }
@@ -374,15 +422,25 @@ function fnChangeLocale(e: any) {
   }
 }
 
-[data-theme='dark'] .login-card {
-  & .title {
-    color: #999;
-  }
-}
-
 @media (max-width: 992px) {
   .login-card {
     margin: 0 auto;
   }
 }
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  height: 36px;
+  padding: 8px 16px 0;
+  text-align: left;
+  background-color: rgb(255 255 255 / 85%);
+  width: 100%;
+
+  &-copyright {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.75);
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+  }
+}
 </style>

src/views/mmlManage/mmlSet/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message } from 'ant-design-vue/es';
+import { Form, message } from 'ant-design-vue/lib';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getOperationSet, updateOperationSet } from '@/api/mmlManage/mmlSet';
 import { regExpIPv4 } from '@/utils/regular-utils';
@@ -90,7 +90,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row>
+    <a-row :gutter="16">
       <a-col :span="8">
         <!-- 接口设置 -->
         <a-card

src/views/mmlManage/neOperate/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/es';
+import { Modal, message } from 'ant-design-vue/lib';
 import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -9,7 +9,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
 import { getMMLByNE, sendMMlByNE } from '@/api/mmlManage/neOperate';
 import { uploadFileToNE } from '@/api/tool/file';
-import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
 

src/views/mmlManage/omcOperate/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/es';
+import { Modal, message } from 'ant-design-vue/lib';
 import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -9,7 +9,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
 import { getMMLByOMC, sendMMlByOMC } from '@/api/mmlManage/omcOperate';
 import { uploadFileToNE } from '@/api/tool/file';
-import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 const { t } = useI18n();
 
 /**网元参数 */

src/views/mmlManage/udmOperate/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/es';
+import { Modal, message } from 'ant-design-vue/lib';
 import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
 import { getMMLByUDM, sendMMlByUDM } from '@/api/mmlManage/udmOperate';
-import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 import { uploadFileToNE } from '@/api/tool/file';
 const { t } = useI18n();
 

src/views/monitor/cache/index.vue

@@ -9,8 +9,8 @@ import {
   clearCacheSafe,
 } from '@/api/monitor/cache';
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/es/table/Table';
-import { message } from 'ant-design-vue/es';
+import { ColumnsType } from 'ant-design-vue/lib/table/Table';
+import { message } from 'ant-design-vue/lib';
 import { hasPermissions } from '@/plugins/auth-user';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
@@ -268,7 +268,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row :gutter="16">
+    <a-row :gutter="20">
       <a-col :lg="8" :md="8" :xs="24">
         <a-card
           :title="t('views.monitor.cache.cacheList')"

src/views/monitor/job/index.vue

@@ -2,11 +2,10 @@
 import { useRouter, useRoute } from 'vue-router';
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ProModal } from 'antdv-pro-modal';
-import { message, Modal, Form } 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 { message, Modal, Form } 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 {
   exportJob,
   listJob,
@@ -191,9 +190,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  openByView: boolean;
+  visibleByView: boolean;
   /**新增框或修改框是否显示 */
-  openByEdit: boolean;
+  visibleByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -201,13 +200,13 @@ type ModalStateType = {
   /**确定按钮 loading */
   confirmLoading: boolean;
   /**cron生成框是否显示 */
-  openByCron: boolean;
+  visibleByCron: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  openByView: false,
-  openByEdit: false,
+  visibleByView: false,
+  visibleByEdit: false,
   title: '任务',
   from: {
     jobId: undefined,
@@ -223,7 +222,7 @@ let modalState: ModalStateType = reactive({
     remark: '',
   },
   confirmLoading: false,
-  openByCron: false,
+  visibleByCron: false,
 });
 
 /**对话框内表单属性和校验规则 */
@@ -274,7 +273,7 @@ function fnModalVisibleByVive(jobId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.monitor.job.viewJob');
-      modalState.openByView = true;
+      modalState.visibleByView = true;
     } else {
       message.error(t('views.monitor.job.viewInfoErr'), 2);
     }
@@ -289,7 +288,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
   if (!jobId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.monitor.job.addJob');
-    modalState.openByEdit = true;
+    modalState.visibleByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -300,7 +299,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.monitor.job.editJob');
-        modalState.openByEdit = true;
+        modalState.visibleByEdit = true;
       } else {
         message.error(t('views.monitor.job.viewInfoErr'), 2);
       }
@@ -329,7 +328,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.openByEdit = false;
+            modalState.visibleByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -354,8 +353,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.openByEdit = false;
-  modalState.openByView = false;
+  modalState.visibleByEdit = false;
+  modalState.visibleByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -363,7 +362,7 @@ function fnModalCancel() {
  * 对话框弹出cron生成回调
  */
 function fnModalCron(opt: boolean, cronStr?: string) {
-  modalState.openByCron = opt;
+  modalState.visibleByCron = opt;
   if (cronStr) {
     modalState.from.cronExpression = cronStr;
   }
@@ -652,7 +651,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -696,12 +695,12 @@ onMounted(() => {
             <template #icon><SyncOutlined /></template>
             {{ t('views.monitor.job.resetQueue') }}
           </a-button>
-        </a-space>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -741,7 +740,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->
@@ -849,12 +848,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :open="modalState.openByView"
+      :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.monitor.job.jobName')" name="jobName">
               {{ modalState.from.jobName }}
@@ -870,7 +869,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.invokeTarget')"
@@ -892,7 +891,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.cronExpression')"
@@ -964,7 +963,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :open="modalState.openByEdit"
+      :visible="modalState.visibleByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -976,7 +975,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.jobName')"
@@ -1003,7 +1002,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.jobGroup')"
@@ -1048,7 +1047,7 @@ onMounted(() => {
                 <template #title>
                   <div>{{ t('views.monitor.job.invokeTargetTip') }}</div>
                 </template>
-                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
               </a-tooltip>
             </template>
           </a-input>
@@ -1074,7 +1073,7 @@ onMounted(() => {
                     {{ t('views.monitor.job.cronExpressionTip1') }}
                   </div>
                 </template>
-                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
               </a-tooltip>
             </template>
             <template #addonAfter>
@@ -1122,7 +1121,7 @@ onMounted(() => {
 
     <!-- 生成cron表达式 -->
     <CronModal
-      v-model:open="modalState.openByCron"
+      v-model:visible="modalState.visibleByCron"
       :cron="modalState.from.cronExpression"
       @ok="fnModalCron(false, $event)"
     ></CronModal>

src/views/monitor/job/log.vue

@@ -2,11 +2,10 @@
 import { useRoute, useRouter } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-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 { 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 {
   exportJobLog,
   listJobLog,
@@ -217,7 +216,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  open: boolean;
+  visibleByView: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -226,7 +225,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  open: false,
+  visibleByView: false,
   title: '任务日志',
   from: {
     jobLogId: undefined,
@@ -247,14 +246,14 @@ let modalState: ModalStateType = reactive({
 function fnModalVisibleByVive(row: Record<string, string>) {
   modalState.from = Object.assign(modalState.from, row);
   modalState.title = t('views.monitor.jobLog.viewLog');
-  modalState.open = true;
+  modalState.visibleByView = true;
 }
 
 /**
  * 对话框弹出关闭执行函数
  */
 function fnModalCancel() {
-  modalState.open = false;
+  modalState.visibleByView = false;
 }
 
 /**
@@ -504,7 +503,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-button type="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.close') }}
@@ -536,12 +535,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </a-space>
+        </div>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-space :size="8" align="center">
+        <div class="button-container">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -581,7 +580,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </a-space>
+        </div>
       </template>
 
       <!-- 表格列表 -->
@@ -636,12 +635,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :open="modalState.open"
+      :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('common.rowId')" name="jobLogId">
               {{ modalState.from.jobLogId }}
@@ -663,7 +662,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.jobLog.jobName')"
@@ -684,7 +683,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.jobLog.invokeTarget')"

src/views/monitor/monitor/index.vue

@@ -466,7 +466,7 @@ onMounted(() => {
       </a-form>
     </a-card>
 
-    <a-row>
+    <a-row :gutter="16">
       <a-col :lg="24" :md="24" :xs="24">
         <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
           <!-- 插槽-卡片左侧侧 -->

src/views/monitor/online/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/es';
+import { message, Modal } from 'ant-design-vue/lib';
 import { forceLogout, listOnline } from '@/api/monitor/online';
 import { parseDateToStr } from '@/utils/date-utils';
-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 { 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 { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();

src/views/monitor/system/info.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/es/table';
+import { ColumnsType } from 'ant-design-vue/lib/table';
 import { getSystemInfo } from '@/api/monitor/system';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';

src/views/monitor/topology/index.vue

@@ -4,10 +4,9 @@ import { PageContainer } from 'antdv-pro-layout';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listAllNeInfo, stateNeInfo } from '@/api/ne/neInfo';
-import { message } from 'ant-design-vue/es';
+import { message } from 'ant-design-vue/lib';
 import { randerGroph, switchLayout } from './graph';
 import { parseDateToStr } from '@/utils/date-utils';
-import { parseBasePath } from '@/plugins/file-static-url';
 const { t } = useI18n();
 
 /**图DOM节点实例对象 */
@@ -24,18 +23,16 @@ const graphG6Data = reactive<Record<string, any>>({
 
 /**查询全部网元数据列表 */
 function fnRanderData() {
-  if (!graphG6Dom.value) return false;
+  if (!graphG6Dom.value) return;
   graphG6.value = randerGroph(t, graphG6Dom.value, graphG6Data);
-  return true;
 }
 
 /**网元状态调度器 */
-const interval = ref<boolean>(true);
+const interval10s = ref<any>(null);
 
 /**查询网元状态 */
 async function fnGetState() {
   for (const node of graphG6Data.nodes) {
-    if (!interval.value) return;
     const ne = node.info;
     // if (ne.neType === 'OMC') continue;
     const result = await stateNeInfo(ne.neType, ne.neId);
@@ -64,7 +61,7 @@ function fnGetList(refresh: boolean = false) {
         res.data.length > 0
       ) {
         // 根网管
-        let rootNodeInfo = { neName: 'OMC_001' };
+        let rootNodeInfo = { neName: "OMC_001" };
         const nodes = [];
         const edges = [];
         for (const item of res.data) {
@@ -90,7 +87,7 @@ function fnGetList(refresh: boolean = false) {
                   x: -30,
                   y: -30,
                   // 可更换为其他图片地址
-                  img: parseBasePath('/svg/service_db.svg'),
+                  img: '/svg/service_db.svg',
                   width: 60,
                   height: 60,
                 },
@@ -105,7 +102,7 @@ function fnGetList(refresh: boolean = false) {
                 icon: {
                   x: -24,
                   y: -24,
-                  img: parseBasePath('/svg/service.svg'),
+                  img: '/svg/service.svg',
                   width: 48,
                   height: 48,
                 },
@@ -142,31 +139,17 @@ function fnGetList(refresh: boolean = false) {
       }
     })
     .then(hasNeList => {
-      if (!hasNeList) return false;
+      if (!hasNeList) return; 
       if (refresh) {
         // graphG6.value.get('canvas').set('localRefresh', true);
         graphG6.value.destroy();
         // graphG6.value.clear();
       }
-      return fnRanderData();
-    })
-    .then(randerGroph => {
-      if (!randerGroph) return;
-      repeatFn();
-    });
-}
-
-/**递归刷新网元状态 */
-function repeatFn() {
-  if (!interval.value) {
-    return;
-  }
-  fnGetState()
-    .finally(() => {
-      repeatFn(); // 递归调用自己
-    })
-    .catch(error => {
-      console.error(error);
+      fnRanderData();
+      fnGetState();
+      interval10s.value = setInterval(() => {
+        fnGetState(); // 获取网元状态
+      }, 10_000);
     });
 }
 
@@ -176,7 +159,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  interval.value = false;
+  clearInterval(interval10s.value);
 });
 </script>
 

src/views/monitor/topologyArchitecture/index.vue

@@ -6,7 +6,7 @@ import {
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
 import { listAllNeInfo } from '@/api/ne/neInfo';
-import { message } from 'ant-design-vue/es';
+import { message } from 'ant-design-vue/lib';
 import { getGraphData } from '@/api/monitor/topology';
 import { parseDateToStr } from '@/utils/date-utils';
 import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
@@ -24,7 +24,6 @@ import {
 import useNeOptions from '@/views/ne/neInfo/hooks/useNeOptions';
 import useI18n from '@/hooks/useI18n';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { parseBasePath } from '@/plugins/file-static-url';
 const { t } = useI18n();
 const { fnNeRestart, fnNeStop, fnNeLogFile } = useNeOptions();
 const ws = new WS();
@@ -166,7 +165,7 @@ const graphNodeTooltip = new Tooltip({
         </span></div>
         <div><strong>${t('views.monitor.topology.expiryDate')}：</strong><span>
         ${neState.expire ?? '--'}
-        </span></div>
+        </span></div> 
         </div>
         `;
   },
@@ -292,11 +291,6 @@ 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 : {});
@@ -353,11 +347,11 @@ function fnGraphDataLoad(reload: boolean = false) {
       }
       clearInterval(interval10s.value);
       interval10s.value = null;
-      fnGetState();
-      interval10s.value = setInterval(async () => {
-        if (!interval10s.value) return;
-        fnGetState(); // 获取网元状态
-      }, 20_000);
+      fnGetState().finally(() => {
+        interval10s.value = setInterval(() => {
+          fnGetState(); // 获取网元状态
+        }, 10_000);
+      });
     });
 }
 
@@ -365,7 +359,7 @@ function fnGraphDataLoad(reload: boolean = false) {
 const interval10s = ref<any>(null);
 
 /**查询网元状态 */
-function fnGetState() {
+async function fnGetState() {
   // 获取节点状态
   for (const node of graphState.data.nodes) {
     if (notNeNodes.includes(node.id)) continue;
@@ -512,20 +506,16 @@ onBeforeUnmount(() => {
     >
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <div class="button-container" style="margin-bottom: -12px">
           <span>
             {{ t('views.monitor.topologyBuild.graphGroup') }}：
             {{ graphState.group }}
           </span>
-        </a-space>
+        </div>
       </template>
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-button
-          type="default"
-          size="small"
-          @click.prevent="fnGraphDataLoad(true)"
-        >
+        <a-button type="default" @click.prevent="fnGraphDataLoad(true)">
           <template #icon><ReloadOutlined /></template>
           {{ t('common.reloadText') }}
         </a-button>

src/views/monitor/topologyBuild/components/GraphEditModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { reactive, watch } from 'vue';
-import { ProModal } from 'antdv-pro-modal';
 import useI18n from '@/hooks/useI18n';
 import {
   graphEvent,
@@ -54,21 +53,21 @@ watch(graphEvent, v => {
     edgeState.form.id = '#';
     modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd');
     modalState.formType = 'edge';
-    modalState.open = true;
+    modalState.visible = true;
   }
   if (type === 'canvas-create-node') {
     nodeState.origin = {};
     nodeState.form.id = '';
     modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd');
     modalState.formType = 'node';
-    modalState.open = true;
+    modalState.visible = true;
   }
   if (type === 'canvas-create-combo') {
     comboState.origin = {};
     comboState.form.id = '';
     modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
     modalState.formType = 'combo';
-    modalState.open = true;
+    modalState.visible = true;
   }
   // 边
   if (type === 'edge-edit' && item) {
@@ -77,7 +76,7 @@ watch(graphEvent, v => {
     edgeState.form = Object.assign(edgeState.form, edge);
     modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
     modalState.formType = 'edge';
-    modalState.open = true;
+    modalState.visible = true;
   }
   // 节点
   if (type === 'node-edit' && item) {
@@ -86,7 +85,7 @@ watch(graphEvent, v => {
     nodeState.form = Object.assign(nodeState.form, node);
     modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
     modalState.formType = 'node';
-    modalState.open = true;
+    modalState.visible = true;
   }
   // 分组
   if (type === 'combo-edit' && item) {
@@ -99,14 +98,14 @@ watch(graphEvent, v => {
     }
     modalState.title = t('views.monitor.topologyBuild.comboTitleEdit');
     modalState.formType = 'combo';
-    modalState.open = true;
+    modalState.visible = true;
   }
 });
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**对话框是否显示 */
-  open: boolean;
+  visible: boolean;
   /**标题 */
   title: string;
   /**图元素表单类型 */
@@ -117,7 +116,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  open: false,
+  visible: false,
   title: '图信息',
   formType: 'edge',
   confirmLoading: false,
@@ -133,21 +132,21 @@ function fnModalOk() {
   // 边编辑确认
   if (type === 'edge') {
     handleOkEdge().then(result => {
-      modalState.open = !result;
+      modalState.visible = !result;
       modalState.confirmLoading = false;
     });
   }
   // 节点编辑确认
   if (type === 'node') {
     handleOkNode().then(result => {
-      modalState.open = !result;
+      modalState.visible = !result;
       modalState.confirmLoading = false;
     });
   }
   // 分租编辑确认
   if (type === 'combo') {
     handleOkcombo().then(result => {
-      modalState.open = !result;
+      modalState.visible = !result;
       modalState.confirmLoading = false;
     });
   }
@@ -158,7 +157,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.open = false;
+  modalState.visible = false;
   const type = modalState.formType;
   // 边编辑还原
   if (type === 'edge') {
@@ -180,10 +179,10 @@ function fnModalCancel() {
     :drag="true"
     :width="800"
     :destroyOnClose="true"
-    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
+    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
-    :open="modalState.open"
+    :visible="modalState.visible"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -241,7 +240,7 @@ function fnModalCancel() {
       </a-form-item>
 
       <!-- 圆形尺寸 -->
-      <a-row v-if="comboState.form.type.startsWith('circle')">
+      <a-row :gutter="16" v-if="comboState.form.type.startsWith('circle')">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -270,7 +269,7 @@ function fnModalCancel() {
       </a-row>
 
       <!-- 矩形尺寸 -->
-      <a-row v-if="comboState.form.type.startsWith('rect')">
+      <a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -309,7 +308,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formStyleFill')"
@@ -397,7 +396,7 @@ function fnModalCancel() {
         </a-input>
       </a-form-item>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -425,7 +424,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -458,7 +457,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -526,7 +525,7 @@ function fnModalCancel() {
         </a-select>
       </a-form-item>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.nodeFormX')"
@@ -553,7 +552,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col
           :lg="12"
           :md="12"
@@ -654,7 +653,7 @@ function fnModalCancel() {
       </a-row>
 
       <template v-if="!nodeState.form.type.startsWith('image')">
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -729,7 +728,7 @@ function fnModalCancel() {
         </a-input>
       </a-form-item>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -757,7 +756,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -792,7 +791,7 @@ function fnModalCancel() {
           {{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
         </a-divider>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormClipShow')"
@@ -836,7 +835,7 @@ function fnModalCancel() {
 
         <!-- 裁剪功能 -->
         <template v-if="nodeState.form.clipCfg.show">
-          <a-row>
+          <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipType')"
@@ -852,7 +851,10 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁圆形 -->
-          <a-row v-if="nodeState.form.clipCfg.type.startsWith('circle')">
+          <a-row
+            :gutter="16"
+            v-if="nodeState.form.clipCfg.type.startsWith('circle')"
+          >
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
@@ -870,7 +872,10 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁矩形 -->
-          <a-row v-if="nodeState.form.clipCfg.type.startsWith('rect')">
+          <a-row
+            :gutter="16"
+            v-if="nodeState.form.clipCfg.type.startsWith('rect')"
+          >
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="
@@ -906,7 +911,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁椭圆 -->
-          <a-row v-if="nodeState.form.clipCfg.type === 'ellipse'">
+          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="
@@ -942,7 +947,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 裁剪图形坐标 -->
-          <a-row>
+          <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipX')"
@@ -987,7 +992,7 @@ function fnModalCancel() {
           {{ t('views.monitor.topologyBuild.nodeFormIcon') }}
         </a-divider>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormIconShow')"
@@ -1011,7 +1016,7 @@ function fnModalCancel() {
           </a-col>
         </a-row>
 
-        <a-row>
+        <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormIconWidth')"
@@ -1042,7 +1047,7 @@ function fnModalCancel() {
           </a-col>
         </a-row>
 
-        <a-row v-if="nodeState.form.type === 'triangle'">
+        <a-row :gutter="16" v-if="nodeState.form.type === 'triangle'">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormIconOffset')"
@@ -1082,7 +1087,7 @@ function fnModalCancel() {
         </a-select>
       </a-form-item>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.edgeFormSource')"
@@ -1113,7 +1118,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -1141,7 +1146,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
@@ -1180,7 +1185,7 @@ function fnModalCancel() {
         </a-input>
       </a-form-item>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -1208,7 +1213,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -1241,7 +1246,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row>
+      <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelPosition')"

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

@@ -1,4 +1,4 @@
-import { message, Form } from 'ant-design-vue/es';
+import { message, Form } from 'ant-design-vue/lib';
 import { reactive, toRaw, watch } from 'vue';
 import { graphG6, selectSourceTargetOptions } from './useGraph';
 import useI18n from '@/hooks/useI18n';