From defe8c47553e7fcbb3586bcd2e18f68db49a075f Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 5 Jan 2024 11:58:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=93=E6=89=91=E7=BD=91=E7=AE=A1?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2=E5=A4=9A=E8=AF=AD=E8=A8=80?= =?UTF-8?q?=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/locales/en-US.ts | 16 +++ src/i18n/locales/zh-CN.ts | 16 +++ src/views/monitor/topology/graph.ts | 68 +++++----- src/views/monitor/topology/index.vue | 177 ++------------------------- 4 files changed, 82 insertions(+), 195 deletions(-) diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 09d76d80..037f400f 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -1025,6 +1025,22 @@ export default { kbps: "Network entry/exit", commandstats: "Command Statistics", }, + topology: { + showAllHide: "Show all hidden items", + collapseAll: "Collapse all clusters", + expandAll: "Expanded clusters", + foldAll: "Folded Cluster", + hideEdge: "hidden edge", + hideNode: "hidden node", + state: "State", + normalcy: "Normalcy", + exceptions: "Exceptions", + refreshTime: "RefreshTime", + name: "Name", + version: "Version", + validityPeriod: "Validity Period", + switchLayout: "Switch Layout", + }, topologyBuild: { graphMode: "Graph Model", graphGroup: "Graph Group name", diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 3df7ac21..6642a52a 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -1025,6 +1025,22 @@ export default { kbps: "网络入口/出口", commandstats: "命令统计", }, + topology: { + showAllHide: "显示所有隐藏项", + collapseAll: "折叠所有群组", + expandAll: "展开集群", + foldAll: "折叠集群", + hideEdge: "隐藏边", + hideNode: "隐藏节点", + state: "状态", + normalcy: "正常", + exceptions: "异常", + refreshTime: "刷新时间", + name: "网元名称", + version: "网元版本", + validityPeriod: "有效期", + switchLayout: "切换布局", + }, topologyBuild: { graphMode: "图模式", graphGroup: "图组名", diff --git a/src/views/monitor/topology/graph.ts b/src/views/monitor/topology/graph.ts index 4486d4cf..0a1a2577 100644 --- a/src/views/monitor/topology/graph.ts +++ b/src/views/monitor/topology/graph.ts @@ -262,7 +262,6 @@ registerNode( } const style = cfg.style || {}; const colorSet = cfg.colorSet || colorSets[0]; - console.log('=== ', cfg); // halo for hover group.addShape('circle', { @@ -316,13 +315,13 @@ registerNode( // 网元状态标识 if (cfg.info) { const neInfo: any = cfg.info; - const hasNeState = neInfo.serverState.neId; + const neOnline = neInfo.serverState.online; const neStateShape = group.addShape('circle', { attrs: { x: r - 3, y: -r + 3, r: 5, - fill: hasNeState ? '#6DD400' : 'red', + fill: neOnline ? '#6DD400' : 'red', lineWidth: 0.5, stroke: '#FFFFFF', }, @@ -1008,7 +1007,7 @@ const getForceLayoutConfig = ( onLayoutEnd: () => { if (largeGraphMode) { graph.getEdges().forEach((edge: any) => { - console.log('onLayoutEnd', edge.oriLabel); + // console.log('onLayoutEnd', edge.oriLabel); if (!edge.oriLabel) return; edge.update({ label: labelFormatter(edge.oriLabel, labelMaxLength), @@ -1341,7 +1340,7 @@ const bindListener = (graph: any) => { stopLayout(); if (!shiftKeydown) clearFocusItemState(graph); const { item } = evt; - console.log(item); + // console.log(item); // highlight the clicked edge graph.setItemState(item, 'focus', true); }); @@ -1349,16 +1348,20 @@ const bindListener = (graph: any) => { // click canvas to cancel all the focus state graph.on('canvas:click', (evt: any) => { clearFocusItemState(graph); - console.log( - graph.getGroup(), - graph.getGroup().getBBox(), - graph.getGroup().getCanvasBBox() - ); + // console.log( + // graph.getGroup(), + // graph.getGroup().getBBox(), + // graph.getGroup().getCanvasBBox() + // ); }); }; // 导出渲染函数 -export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) { +export function randerGroph( + t: any, + graphG6Dom: HTMLElement | undefined, + data: any +) { if (!graphG6Dom) return; // graphG6Dom.value.style.backgroundColor = '#2b2f33'; @@ -1437,10 +1440,10 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) { " >
- 1. 显示所有隐藏项 + 1. ${t('views.monitor.topology.showAllHide')}
- 2. 折叠所有集群 + 2. ${t('views.monitor.topology.collapseAll')}
`; } @@ -1460,10 +1463,10 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) { " >
- 1. 展开集群 + 1. ${t('views.monitor.topology.expandAll')}
- 2. 隐藏节点 + 2. ${t('views.monitor.topology.hideNode')}
`; @@ -1478,10 +1481,10 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) { " >
- 1. 折叠集群 + 1. ${t('views.monitor.topology.foldAll')}
- 2. 隐藏节点 + 2. ${t('views.monitor.topology.hideNode')}
`; @@ -1497,7 +1500,7 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) { " >
- 1. 隐藏边 + 1. ${t('views.monitor.topology.hideEdge')}
`; @@ -1606,11 +1609,6 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) { return `
ID：${node.id}
`; } const serverState = neInfo.serverState; - console.log(neInfo); - const hasNeID = serverState.neId; - if (!hasNeID) { - return '
状态：异常
'; - } return `
-
状态： - ${hasNeID ? '正常' : '异常'} +
${t('views.monitor.topology.state')}： + ${ + neInfo.serverState.online + ? t('views.monitor.topology.normalcy') + : t('views.monitor.topology.exceptions') + }
-
刷新时间： +
${t('views.monitor.topology.refreshTime')}： ${serverState.refreshTime ?? '--'}
-
ID：${hasNeID}
-
名称：${serverState.neName ?? '--'}
-
版本： +
========================
+
ID：${serverState.neId}
+
${t('views.monitor.topology.name')}： + ${serverState.neName ?? '--'} +
+
IP：${serverState.neIP}
+
${t('views.monitor.topology.version')}： ${serverState.version ?? '--'}
-
SN：${serverState.sn ?? '--'}
-
有效期： +
SN：${serverState.sn ?? '--'}
+
${t('views.monitor.topology.validityPeriod')}： ${serverState.expire ?? '--'}
diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue index f749874a..79c984e0 100644 --- a/src/views/monitor/topology/index.vue +++ b/src/views/monitor/topology/index.vue @@ -25,14 +25,18 @@ const graphG6Data = reactive>({ /**查询全部网元数据列表 */ function fnRanderData() { if (!graphG6Dom.value) return; - graphG6.value = randerGroph(graphG6Dom.value, graphG6Data); + graphG6.value = randerGroph(t, graphG6Dom.value, graphG6Data); } +/**网元状态定时器 */ +const stateTimeout = ref(null); + /**查询网元状态 */ async function fnGetState() { + clearTimeout(stateTimeout.value); for (const node of graphG6Data.nodes) { const ne = node.info; - if (ne.neType === 'OMC') continue; + // if (ne.neType === 'OMC') continue; const result = await stateNe(ne.neType, ne.neId); if (result.code === RESULT_CODE_SUCCESS) { ne.serverState = result.data; @@ -40,16 +44,12 @@ async function fnGetState() { ne.serverState.refreshTime, 'HH:mm:ss' ); + // 修改网元状态颜色 + const neShape = graphG6.value.findById(ne.neName); + graphG6.value.setItemState(neShape, 'neState', ne.serverState.online); } - // 修改网元状态颜色 - const neShape = graphG6.value.findById(ne.neName); - graphG6.value.setItemState( - neShape, - 'neState', - result.code === RESULT_CODE_SUCCESS - ); } - setTimeout(() => fnGetState(), 30_000); + stateTimeout.value = setTimeout(() => fnGetState(), 30_000); } /**查询全部网元数据列表 */ @@ -73,15 +73,6 @@ function fnGetList(refresh: boolean = false) { // 根网管 if (item.neType === 'OMC') { rootNode = item.neName; - item.serverState = { - neId: item.neId, - neName: item.neName, - neType: item.neType, - expire: '-', - refreshTime: '-', - sn: '-', - version: '-', - }; nodes.push({ id: item.neName, label: item.neName, @@ -134,7 +125,6 @@ function fnGetList(refresh: boolean = false) { } graphG6Data.nodes = nodes; graphG6Data.edges = edges; - console.log(graphG6Data); return true; } else { message.warning({ @@ -157,7 +147,7 @@ function fnGetList(refresh: boolean = false) { } onMounted(() => { - // 获取网元列表 + // 获取网元列表G fnGetList(); }); @@ -170,151 +160,16 @@ onMounted(() => { size="small" > - +
- - @@ -325,10 +180,4 @@ onMounted(() => { height: calc(100vh - 300px); background-color: rgb(43, 47, 51); } -.charts { - width: 100%; - height: 500px; - background-color: rgb(238, 237, 237); - margin-top: 32px; -}