diff --git a/.env.development b/.env.development index eeb7c994..f7fd3800 100644 --- a/.env.development +++ b/.env.development @@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC" VITE_APP_CODE = "OMC" # 应用版本 -VITE_APP_VERSION = "2.241102" +VITE_APP_VERSION = "2.241130" # 接口基础URL地址-不带/后缀 VITE_API_BASE_URL = "/omc-api" diff --git a/.env.production b/.env.production index 9adcf8b4..b1d3eba1 100644 --- a/.env.production +++ b/.env.production @@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network OMC" VITE_APP_CODE = "OMC" # 应用版本 -VITE_APP_VERSION = "2.241102" +VITE_APP_VERSION = "2.241130" # 接口基础URL地址-不带/后缀 VITE_API_BASE_URL = "/omc-api" diff --git a/README.md b/README.md index 2dc4d7d9..df0cdf8d 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,6 @@ - 图标来源 [@ant-design/icons-vue](https://ant.design/components/icon) - 菜单图标使用自定义 iconfont `font_8d5l8fzk5b87iudi.js`图标文件 -## 测试环境 - -```text -Nginx: http://192.168.2.166:3188/#/index -后端暴露端口: http://192.168.2.166:33030 -``` - ## 程序命令 项目目录下 `.env.[环境]` 文件对应环境的一些配置，启动前请检查文件内是否配置正确。 diff --git a/package.json b/package.json index 71bbe0a8..ac642491 100644 --- a/package.json +++ b/package.json @@ -16,31 +16,31 @@ "@antv/g6": "~4.8.24", "@codemirror/lang-javascript": "^6.2.2", "@codemirror/lang-yaml": "^6.1.1", - "@codemirror/merge": "^6.6.3", + "@codemirror/merge": "^6.7.2", "@codemirror/theme-one-dark": "^6.1.2", - "@tato30/vue-pdf": "^1.10.0", - "@vueuse/core": "~10.10.1", + "@tato30/vue-pdf": "^1.11.2", + "@vueuse/core": "11.2.0", "@xterm/addon-fit": "^0.10.0", "@xterm/xterm": "^5.5.0", - "ant-design-vue": "^3.2.20", - "antdv-pro-layout": "~3.3.5", - "antdv-pro-modal": "^3.1.0", + "ant-design-vue": "^4.2.5", + "antdv-pro-layout": "^4.1.9", + "antdv-pro-modal": "^4.0.5", "codemirror": "^6.0.1", "crypto-js": "^4.2.0", "dayjs": "^1.11.11", "echarts": "~5.5.0", "file-saver": "^2.0.5", "grid-layout-plus": "^1.0.5", - "intl-tel-input": "^23.8.1", + "intl-tel-input": "^24.6.0", "js-base64": "^3.7.7", "js-cookie": "^3.0.5", "localforage": "^1.10.0", "nprogress": "^0.2.0", "p-queue": "~8.0.1", - "pinia": "^2.1.7", - "vue": "~3.3.13", - "vue-i18n": "^9.13.1", - "vue-router": "^4.4.0", + "pinia": "2.2.6", + "vue": "^3.5.12", + "vue-i18n": "^10.0.4", + "vue-router": "^4.4.5", "vue3-smooth-dnd": "^0.0.6", "xlsx": "~0.18.5" }, @@ -48,14 +48,14 @@ "@types/crypto-js": "^4.2.2", "@types/file-saver": "^2.0.7", "@types/js-cookie": "^3.0.6", - "@types/node": "^18.0.0", + "@types/node": "^22.7.7", "@types/nprogress": "^0.2.3", - "@vitejs/plugin-vue": "^5.0.5", + "@vitejs/plugin-vue": "^5.1.4", "less": "^4.2.0", - "typescript": "~5.4.5", - "unplugin-vue-components": "~0.26.0", - "vite": "~5.3.1", + "typescript": "^5.6.3", + "unplugin-vue-components": "^0.27.4", + "vite": "5.4.10", "vite-plugin-compression": "~0.5.1", - "vue-tsc": "~2.0.22" + "vue-tsc": "^2.1.8" } } diff --git a/public/wiregasm/worker.js b/public/wiregasm/worker.js index 74baa7e5..8d6b9b4f 100644 --- a/public/wiregasm/worker.js +++ b/public/wiregasm/worker.js @@ -1,7 +1,7 @@ // load the Wiregasm library importScripts( - '/wiregasm/wiregasm_new.js', // self-compilation es5 - '/wiregasm/wiregasm_load.js' + 'wiregasm_new.js', // self-compilation es5 + 'wiregasm_load.js' // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.js' ); @@ -16,11 +16,11 @@ const fetchPackages = async () => { console.log('Fetching packages'); let [wasmBuffer, dataBuffer] = await Promise.all([ await inflateRemoteBuffer( - '/wiregasm/wiregasm.wasm' + 'wiregasm.wasm' // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.wasm' ), await inflateRemoteBuffer( - '/wiregasm/wiregasm.data' + 'wiregasm.data' // 'https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.data' ), ]); diff --git a/src/App.vue b/src/App.vue index 020167b8..5f8c12ec 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,22 +1,48 @@ diff --git a/src/api/neData/udm_auth.ts b/src/api/neData/udm_auth.ts index abc2450d..17faa266 100644 --- a/src/api/neData/udm_auth.ts +++ b/src/api/neData/udm_auth.ts @@ -23,6 +23,7 @@ export function listUDMAuth(query: Record) { url: '/neData/udm/auth/list', method: 'get', params: query, + timeout: 30_000, }); } diff --git a/src/api/neData/udm_sub.ts b/src/api/neData/udm_sub.ts index b554c22d..9f1500b5 100644 --- a/src/api/neData/udm_sub.ts +++ b/src/api/neData/udm_sub.ts @@ -23,6 +23,7 @@ export function listUDMSub(query: Record) { url: '/neData/udm/sub/list', method: 'get', params: query, + timeout: 30_000, }); } diff --git a/src/assets/background_dark.jpg b/src/assets/background_dark.jpg new file mode 100644 index 00000000..e47b1a76 Binary files /dev/null and b/src/assets/background_dark.jpg differ diff --git a/src/assets/background.jpg b/src/assets/background_light.jpg similarity index 100% rename from src/assets/background.jpg rename to src/assets/background_light.jpg diff --git a/src/assets/svg/dark.svg b/src/assets/svg/dark.svg new file mode 100644 index 00000000..9b27cc61 --- /dev/null +++ b/src/assets/svg/dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/light.svg b/src/assets/svg/light.svg new file mode 100644 index 00000000..161b3bd9 --- /dev/null +++ b/src/assets/svg/light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/CronModal/index.vue b/src/components/CronModal/index.vue index abd76ff7..5a7adf60 100644 --- a/src/components/CronModal/index.vue +++ b/src/components/CronModal/index.vue @@ -3,7 +3,7 @@ :drag="true" :destroyOnClose="true" :title="t('components.CronModal.title')" - :visible="props.visible" + :open="props.open" :body-style="{ padding: '0 24px' }" @cancel="fnCronModal(false)" @ok="fnCronModal(true)" @@ -35,6 +35,7 @@ diff --git a/src/layouts/components/Tabs.vue b/src/layouts/components/Tabs.vue index b72f87b9..341bcd01 100644 --- a/src/layouts/components/Tabs.vue +++ b/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 }); tabsStore.tabOpen(v), { immediate: true }); - + @@ -199,7 +199,18 @@ watch(router.currentRoute, v => tabsStore.tabOpen(v), { immediate: true }); } } +[data-theme='dark'] .tabs { + background: #141414; +} + .tabs :deep(.ant-tabs-nav:before) { border-bottom: none; } +.tabs :deep(.ant-tabs-nav-list .ant-tabs-tab) { + border-radius: 8px; +} +.tabs :deep(.ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active) { + border-bottom-right-radius: unset; + border-bottom-left-radius: unset; +} diff --git a/src/main.ts b/src/main.ts index 358d7988..f770c37a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,16 +4,15 @@ import App from './App.vue'; import router from './router'; import directive from './directive'; import i18n from './i18n'; -import ProModal from "antdv-pro-modal"; -import 'antdv-pro-layout/dist/style.css'; + import 'antdv-pro-modal/dist/style.css'; -import 'ant-design-vue/dist/antd.variable.min.css'; +import 'antdv-pro-layout/dist/style.css'; +import 'ant-design-vue/dist/reset.css'; const app = createApp(App); app.use(store); app.use(router); app.use(directive); app.use(i18n); -app.use(ProModal); app.mount('#app'); diff --git a/src/plugins/file-static-url.ts b/src/plugins/file-static-url.ts index f0d1e275..4dfcfbfb 100644 --- a/src/plugins/file-static-url.ts +++ b/src/plugins/file-static-url.ts @@ -19,3 +19,26 @@ export function parseUrlPath(path: string) { : import.meta.env.VITE_API_BASE_URL; return `${baseUrl}${path}?r=${Math.random().toFixed(2)}`; } + +/** + * 解析静态文件相对路径 + * @param path 静态资源文件 + * @returns + */ +export function parseBasePath(path: string) { + if (!path || path === '#') { + return '#'; + } + if (validHttp(path)) { + return path; + } + // 兼容旧前端可改配置文件 + const baseUrl = import.meta.env.VITE_HISTORY_BASE_URL; + let scriptUrl = + baseUrl.length === 1 && baseUrl.indexOf('/') === 0 + ? '' + : baseUrl.indexOf('/') === -1 + ? '/' + baseUrl + : baseUrl; + return `${scriptUrl}${path}?r=${Math.random().toFixed(2)}`; +} diff --git a/src/plugins/http-fetch.ts b/src/plugins/http-fetch.ts index df9da37b..7a4a8849 100644 --- a/src/plugins/http-fetch.ts +++ b/src/plugins/http-fetch.ts @@ -198,7 +198,7 @@ function beforeRequest(options: OptionsType): OptionsType | Promise { if (options.method === 'get') return options; // 非get参数提交 - let body = options.data + let body = options.data; if (body instanceof FormData) { options.body = body; } else if (body) { diff --git a/src/router/index.ts b/src/router/index.ts index 4ac48d3f..0768bb11 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -182,7 +182,12 @@ router.beforeEach(async (to, from, next) => { next({ name: 'Index' }); } - const token = getToken(); + let token = getToken(); + + // 免用户登录认证 + // if (!appStore.loginAuth) { + // token = '== Not Login Auth =='; + // } // 没有token if (!token) { diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index f44eae2f..fe11126c 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -20,6 +20,8 @@ type AppStore = { buildTime: string; /**系统引导使用 */ bootloader: boolean; + // 用户登录认证 + loginAuth: boolean; // 序列号 serialNum: string; /**应用版权声明 */ @@ -52,6 +54,7 @@ const useAppStore = defineStore('app', { version: `-`, buildTime: `-`, bootloader: false, + loginAuth: false, serialNum: `-`, copyright: `Copyright ©2023 For ${import.meta.env.VITE_APP_NAME}`, logoType: 'icon', @@ -85,6 +88,7 @@ const useAppStore = defineStore('app', { if (this.bootloader) { removeToken(); } + this.loginAuth = res.data.loginAuth === 'true'; this.serialNum = res.data.serialNum; this.appName = res.data.title; this.copyright = res.data.copyright; diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts index c297498b..80395ccf 100644 --- a/src/store/modules/layout.ts +++ b/src/store/modules/layout.ts @@ -1,16 +1,23 @@ -import { CACHE_LOCAL_PROCONFIG } from '@/constants/cache-keys-constants'; -import { localGetJSON, localSetJSON } from '@/utils/cache-local-utils'; +import { theme } from 'ant-design-vue/es'; +import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context'; import { defineStore } from 'pinia'; +import { + CACHE_LOCAL_PRIMARY_COLOR, + CACHE_LOCAL_PROCONFIG, +} from '@/constants/cache-keys-constants'; +import { + localGet, + localGetJSON, + localSetJSON, +} from '@/utils/cache-local-utils'; /**布局参数类型 */ type LayoutStore = { - /**布局设置抽屉显示 */ - visible: boolean; /**布局配置 */ proConfig: { /**导航布局 */ layout: 'side' | 'top' | 'mix'; - /**全局主题色，需要导入样式文件 */ + /**全局主题色*/ theme: 'dark' | 'light'; /**菜单导航主题色 */ menuTheme: 'dark' | 'light'; @@ -29,10 +36,33 @@ type LayoutStore = { /**内容区域-导航标签项 */ tabRender: any | boolean | undefined; }; + /**主题配置 */ + themeConfig: ThemeConfig; /**水印内容 */ waterMarkContent: string; }; +/** + * 获取随机颜色范围 + * @returns 颜色 + */ +function getRandomColor(): string { + const colors: string[] = [ + '#f5222d', + '#fa541c', + '#fa8c16', + '#a0d911', + '#13c2c2', + '#1890ff', + '#722ed1', + '#eb2f96', + '#faad14', + '#52c41a', + ]; + const i = Math.floor(Math.random() * 10); + return colors[i]; +} + /**判断是否关闭内容区域 */ const proRender = (render: any) => (render === false ? false : undefined); @@ -50,7 +80,6 @@ const proConfigLocal: LayoutStore['proConfig'] = localGetJSON( const useLayoutStore = defineStore('layout', { state: (): LayoutStore => ({ - visible: false, proConfig: { layout: proConfigLocal.layout, theme: proConfigLocal.theme, @@ -63,13 +92,27 @@ const useLayoutStore = defineStore('layout', { menuHeaderRender: proRender(proConfigLocal.menuHeaderRender), tabRender: proRender(proConfigLocal.tabRender), }, + themeConfig: { + algorithm: [theme.darkAlgorithm], + // algorithm: themeColor["dark"], + token: { + // colorBgContainer: "#fff", + colorPrimary: localGet(CACHE_LOCAL_PRIMARY_COLOR) || '#1890ff', + // borderRadius: 6, + }, + }, waterMarkContent: import.meta.env.VITE_APP_NAME, }), - actions: { - /**改变显示状态 */ - changeVisibleLayoutSetting() { - this.visible = !this.visible; + getters: { + getColorPrimary(): string { + let color = '#1890ff'; + if (this.themeConfig.token) { + color = this.themeConfig.token.colorPrimary || color; + } + return color; }, + }, + actions: { /**修改水印文字 */ changeWaterMark(text: string) { this.waterMarkContent = text; @@ -77,10 +120,48 @@ const useLayoutStore = defineStore('layout', { /**修改布局设置 */ changeConf(key: string, value: boolean | string | number | undefined) { if (Reflect.has(this.proConfig, key)) { + // console.log(key, value); + if (key === 'theme') { + // const themeColor = { + // light: theme.defaultAlgorithm, + // compact: theme.compactAlgorithm, + // dark: theme.darkAlgorithm, + // }; + if (value === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + this.themeConfig.algorithm = [theme.darkAlgorithm]; + } else { + document.documentElement.setAttribute('data-theme', 'light'); + this.themeConfig.algorithm = [theme.defaultAlgorithm]; + } + } Reflect.set(this.proConfig, key, value); localSetJSON(CACHE_LOCAL_PROCONFIG, this.proConfig); } }, + /**主题色初始化 */ + initPrimaryColor() { + // 主题色初始化 + this.changePrimaryColor(this.getColorPrimary); + // 明暗模式初始化 + const themeMode = this.proConfig.theme; + document.documentElement.setAttribute('data-theme', themeMode); + this.changeConf('theme', themeMode); + }, + /** + * 主题色变更 + * @param color 颜色 + */ + changePrimaryColor(color?: string) { + if (!color) { + color = getRandomColor(); + } + + if (this.themeConfig && this.themeConfig.token) { + this.themeConfig.token.colorPrimary = color; + localStorage.setItem(CACHE_LOCAL_PRIMARY_COLOR, color); + } + }, }, }); diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 1a9b1932..a7bb65a6 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -1,7 +1,7 @@ import defaultAvatar from '@/assets/images/default_avatar.png'; import useLayoutStore from './layout'; import { login, logout, getInfo } from '@/api/login'; -import { getToken, setToken, removeToken } from '@/plugins/auth-token'; +import { setToken, removeToken } from '@/plugins/auth-token'; import { defineStore } from 'pinia'; import { TOKEN_RESPONSE_FIELD } from '@/constants/token-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; @@ -133,10 +133,10 @@ const useUserStore = defineStore('user', { } // 水印文字信息=用户昵称 手机号 - let waterMarkContent = this.userName; - if (this.phonenumber) { - waterMarkContent = `${this.userName} ${this.phonenumber}`; - } + // let waterMarkContent = this.userName; + // if (this.phonenumber) { + // waterMarkContent = `${this.userName} ${this.phonenumber}`; + // } // useLayoutStore().changeWaterMark(waterMarkContent); useLayoutStore().changeWaterMark(''); } diff --git a/src/utils/generate-utils.ts b/src/utils/generate-utils.ts index 57e009e5..ec39385b 100644 --- a/src/utils/generate-utils.ts +++ b/src/utils/generate-utils.ts @@ -13,13 +13,41 @@ export function generateColorHEX(): string { * @returns rgb(24 144 255) / rgba(0,0,0,.85) */ export function generateColorRGBA(hasAlpha: boolean = false) { - const red = Math.floor(Math.random() * 256); - const green = Math.floor(Math.random() * 256); - const blue = Math.floor(Math.random() * 256); + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + + let red: number; + let green: number; + let blue: number; + + if (isDark) { + // 暗色模式下生成较亮的颜色 + red = Math.floor(Math.random() * 156) + 100; // 100-255 + green = Math.floor(Math.random() * 156) + 100; // 100-255 + blue = Math.floor(Math.random() * 156) + 100; // 100-255 + + // 确保至少有一个通道的值较高，使颜色更明亮 + const brightChannel = Math.floor(Math.random() * 3); + switch (brightChannel) { + case 0: + red = Math.min(255, red + 50); + break; + case 1: + green = Math.min(255, green + 50); + break; + case 2: + blue = Math.min(255, blue + 50); + break; + } + } else { + // 亮色模式下生成正常的颜色 + red = Math.floor(Math.random() * 256); // 0-255 + green = Math.floor(Math.random() * 256); // 0-255 + blue = Math.floor(Math.random() * 256); // 0-255 + } if (hasAlpha) { const alpha = Math.floor(Math.random() * 100); - return `rgb(${red}, ${green}, ${blue}, 0.${alpha})`; + return `rgba(${red}, ${green}, ${blue}, 0.${alpha})`; } return `rgb(${red}, ${green}, ${blue})`; diff --git a/src/views/account/components/base-info.vue b/src/views/account/components/base-info.vue index 3cb9b463..77d99f9f 100644 --- a/src/views/account/components/base-info.vue +++ b/src/views/account/components/base-info.vue @@ -1,7 +1,7 @@ @@ -56,13 +66,31 @@ function fnColorChange(e: Event) { + + {{ t('views.account.settings.theme') }} + + + {{ t('views.account.settings.navTheme') }} diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue index 8c2116e1..29fcde82 100644 --- a/src/views/dashboard/overview/components/Topology/index.vue +++ b/src/views/dashboard/overview/components/Topology/index.vue @@ -2,9 +2,10 @@ import { onMounted, ref } from 'vue'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { listAllNeInfo } from '@/api/ne/neInfo'; -import { message } from 'ant-design-vue/lib'; +import { message } from 'ant-design-vue/es'; import { getGraphData } from '@/api/monitor/topology'; import { Graph, GraphData, Tooltip } from '@antv/g6'; +import { parseBasePath } from '@/plugins/file-static-url'; import { edgeLineAnimateState } from '@/views/monitor/topologyBuild/hooks/registerEdge'; import { nodeImageAnimateState } from '@/views/monitor/topologyBuild/hooks/registerNode'; import { @@ -186,6 +187,12 @@ function fnGraphDataLoad(reload: boolean = false) { const nf: Record[] = nodes.filter( (node: Record) => { 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 : {}); diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index ebf91f6f..aedba319 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -176,6 +176,7 @@ function loadData() { clearInterval(interval10s.value); interval10s.value = setInterval(() => { + if (!interval10s.value) return if (upfTFActive.value === '0') { upfTFSend('7'); upfTFActive.value = '7'; @@ -190,6 +191,7 @@ function loadData() { clearInterval(interval5s.value); interval5s.value = setInterval(() => { + if (!interval5s.value) return fnGetSkim(); // 获取概览信息 fnGetNeState(); // 获取网元状态 }, 5_000); diff --git a/src/views/dashboard/smfCDR/index.vue b/src/views/dashboard/smfCDR/index.vue index 652cae9c..23e3a37d 100644 --- a/src/views/dashboard/smfCDR/index.vue +++ b/src/views/dashboard/smfCDR/index.vue @@ -1,10 +1,10 @@ diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index ecb17082..289a4ba1 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/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/lib'; +import { message } from 'ant-design-vue/es'; import { getGraphData } from '@/api/monitor/topology'; import { parseDateToStr } from '@/utils/date-utils'; import { Graph, GraphData, Menu, Tooltip } from '@antv/g6'; @@ -24,6 +24,7 @@ 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(); @@ -165,7 +166,7 @@ const graphNodeTooltip = new Tooltip({
${t('views.monitor.topology.expiryDate')}： ${neState.expire ?? '--'} -
+ `; }, @@ -291,6 +292,11 @@ function fnGraphDataLoad(reload: boolean = false) { const nf: Record[] = nodes.filter( (node: Record) => { 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 : {}); @@ -347,11 +353,11 @@ function fnGraphDataLoad(reload: boolean = false) { } clearInterval(interval10s.value); interval10s.value = null; - fnGetState().finally(() => { - interval10s.value = setInterval(() => { - fnGetState(); // 获取网元状态 - }, 10_000); - }); + fnGetState(); + interval10s.value = setInterval(async () => { + if (!interval10s.value) return; + fnGetState(); // 获取网元状态 + }, 20_000); }); } @@ -359,7 +365,7 @@ function fnGraphDataLoad(reload: boolean = false) { const interval10s = ref(null); /**查询网元状态 */ -async function fnGetState() { +function fnGetState() { // 获取节点状态 for (const node of graphState.data.nodes) { if (notNeNodes.includes(node.id)) continue; @@ -506,16 +512,20 @@ onBeforeUnmount(() => { >