fix: 拓扑组图多语言

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",

src/i18n/locales/zh-CN.ts

@@ -1046,6 +1046,7 @@ export default {
         expiryDate: '许可证到期日期',
         switchLayout: "切换布局",
         viewLogFile: "查看日志文件",
+        noData: "找不到对应的图组数据",
       },
       topologyBuild: {
         graphMode: "图模式",

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"
     >
       <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
+      <template #title>
+        <div class="button-container" style="margin-bottom: -12px">
+          <span>
+            {{ t('views.monitor.topologyBuild.graphGroup') }}：
+            {{ graphState.group }}
+          </span>
+        </div>
+      </template>
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-button type="default" @click.prevent="fnGraphDataLoad(true)">
-          <template #icon><RetweetOutlined /></template>
-          {{ t('views.monitor.topology.switchLayout') }}
+          <template #icon><ReloadOutlined /></template>
+          {{ t('common.reloadText') }}
         </a-button>
       </template>