From 34d1530638f1027b36ba92130a42f9555514c465 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Wed, 10 Jan 2024 10:04:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=93=E6=89=91=E7=BB=84=E5=9B=BE?= =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/locales/en-US.ts | 1 + src/i18n/locales/zh-CN.ts | 1 + .../monitor/topologyArchitecture/index.vue | 93 +++++-------------- 3 files changed, 27 insertions(+), 68 deletions(-) diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 84520452..5003c5d9 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -1046,6 +1046,7 @@ export default { expiryDate: 'Expiry Date', switchLayout: "Switch Layout", viewLogFile: "Viewing Log Files", + noData: "Can't find the corresponding plot data", }, topologyBuild: { graphMode: "Graph Model", diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index effb85fc..9a319e4a 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -1046,6 +1046,7 @@ export default { expiryDate: '许可证到期日期', switchLayout: "切换布局", viewLogFile: "查看日志文件", + noData: "找不到对应的图组数据", }, topologyBuild: { graphMode: "图模式", diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index 615c63a3..6d647dd8 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/src/views/monitor/topologyArchitecture/index.vue @@ -152,14 +152,8 @@ const graphNodeTooltip = new Tooltip({ itemTypes: ['node'], }); -/**图数据渲染 */ -function handleRanderGraph( - container: HTMLElement | undefined, - data: GraphData -) { - if (!container) return; - const { clientHeight, clientWidth } = container; - +/**注册自定义边或节点 */ +function registerEdgeNode() { // 边 edgeCubicAnimateLineDash(); edgeCubicAnimateCircleMove(); @@ -169,6 +163,18 @@ function handleRanderGraph( nodeCircleAnimateShapeStroke(); nodeRectAnimateState(); nodeImageAnimateState(); +} + +/**图数据渲染 */ +function handleRanderGraph( + container: HTMLElement | undefined, + data: GraphData +) { + if (!container) return; + const { clientHeight, clientWidth } = container; + + // 注册自定义边或节点 + registerEdgeNode(); const graph = new Graph({ container: container, @@ -199,67 +205,11 @@ function handleRanderGraph( graph.data(data); graph.render(); - // 图绑定事件 - fnGraphEvent(graph); - graphG6.value = graph; return graph; } -/**图绑定事件 */ -function fnGraphEvent(graph: Graph) { - // 鼠标进入节点事件 - graph.on('edge:mouseenter', (ev: any) => { - // 获得鼠标当前目标边 - const edge = ev.item; - // 该边的起始点 - const source = edge.getSource(); - // 该边的结束点 - const target = edge.getTarget(); - // 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。 - // edge.toFront(); - // source.toFront(); - // target.toFront(); - }); - - graph.on('edge:mouseleave', (ev: any) => { - // 获得图上所有边实例 - const edges = graph.getEdges(); - // 遍历边，将所有边的层级放置在后方，以恢复原样 - // edges.forEach(edge => { - // edge.toBack(); - // }); - }); - - graph.on('node:mouseenter', evt => { - // 获得鼠标当前目标节点 - const node = evt.item; - // 获取该节点的所有相关边 - const edges = node && graph.getEdges(); - // 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果 - // edges.forEach((edge: any) => { - // edge.toFront(); - // edge.getSource().toFront(); - // edge.getTarget().toFront(); - // }); - // graphEvent.value = { - // type: 'node:mouseenter', - // target: evt.target, - // item: evt.item, - // }; - }); - - graph.on('node:mouseleave', (ev: any) => { - // 获得图上所有边实例 - const edges = graph.getEdges(); - // 遍历边，将所有边的层级放置在后方，以恢复原样 - // edges.forEach(edge => { - // edge.toBack(); - // }); - }); -} - /** * 获取图组数据渲染到画布 * @param reload 是否重载数据 @@ -288,7 +238,7 @@ function fnGraphDataLoad(reload: boolean = false) { }; } else { message.warning({ - content: '找不到对应的图组数据', + content: t('views.monitor.topology.noData'), duration: 5, }); } @@ -477,12 +427,19 @@ onBeforeUnmount(() => { size="small" > - +