fix: 看板拓扑点击改变资源显示

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

@@ -18,23 +18,25 @@ import {
   nodeImageAnimateState,
   nodeRectAnimateState,
 } from '@/views/monitor/topologyBuild/hooks/registerNode';
+import { graphState, graphNodeClickID } from '../../hooks/useTopology';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
+// const { graphState } = useTopology();
 
 /**图DOM节点实例对象 */
 const graphG6Dom = ref<HTMLElement | undefined>(undefined);
 
 /**图状态 */
-const graphState = reactive<Record<string, any>>({
-  /**当前图组名 */
-  group: '5GC System Architecture2',
-  /**图数据 */
-  data: {
-    combos: [],
-    edges: [],
-    nodes: [],
-  },
-});
+// const graphState = reactive<Record<string, any>>({
+//   /**当前图组名 */
+//   group: '5GC System Architecture2',
+//   /**图数据 */
+//   data: {
+//     combos: [],
+//     edges: [],
+//     nodes: [],
+//   },
+// });
 
 /**非网元元素 */
 const notNeNodes = ['5GC', 'DN', 'UE', 'Base'];
@@ -42,52 +44,6 @@ const notNeNodes = ['5GC', 'DN', 'UE', 'Base'];
 /**图实例对象 */
 const graphG6 = ref<any>(null);
 
-/**图节点右击菜单 */
-const graphNodeMenu = new Menu({
-  offsetX: 6,
-  offseY: 10,
-  itemTypes: ['node'],
-  getContent(evt) {
-    if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
-    const { id, label, neState }: any = evt.item?.getModel();
-    if (notNeNodes.includes(id)) {
-      return `<div><span>${label || id}</span></div>`;
-    }
-    if (!neState) {
-      return `<div><span>${label || id}</span></div>`;
-    }
-    return `
-    <div
-      style="
-        display: flex;
-        flex-direction: column;
-        width: 140px;
-      "
-    >
-      <h3 style="margin-bottom: 8px">
-      ${t('views.monitor.topology.name')}:
-      ${neState.neName ?? '--'}
-      </h3>
-      <div id="restart" style="cursor: pointer; margin-bottom: 4px">
-        > ${t('views.configManage.neManage.restart')}
-      </div>
-      <div id="stop" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.configManage.neManage.stop')}
-      </div>
-      <div id="log" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.monitor.topology.viewLogFile')}
-      </div>
-    </div>
-    `;
-  },
-  handleMenuClick(target, item) {
-    const { neInfo }: any = item?.getModel();
-    const { neName, neType, neId } = neInfo;
-    const targetId = target.id;
-    console.log(targetId);
-  },
-});
-
 /**图节点展示 */
 const graphNodeTooltip = new Tooltip({
   offsetX: 10,
@@ -140,6 +96,18 @@ const graphNodeTooltip = new Tooltip({
   itemTypes: ['node'],
 });
 
+/**图绑定事件 */
+function fnGraphEvent(graph: Graph) {
+  // 节点点击
+  graph.on('node:click', evt => {
+    // 获得鼠标当前目标节点
+    const node = evt.item?.getModel();
+    if (node && node.id) {
+      graphNodeClickID.value = node.id;
+    }
+  });
+}
+
 /**注册自定义边或节点 */
 function registerEdgeNode() {
   // 边
@@ -184,7 +152,7 @@ function handleRanderGraph(
         fill: 'transparent',
       },
     },
-    plugins: [graphNodeMenu, graphNodeTooltip],
+    plugins: [graphNodeTooltip],
     animate: true, // 是否使用动画过度，默认为 false
     animateCfg: {
       duration: 500, // Number，一次动画的时长
@@ -194,6 +162,8 @@ function handleRanderGraph(
   graph.data(data);
   graph.render();
 
+  fnGraphEvent(graph);
+
   graphG6.value = graph;
 
   return graph;
@@ -233,7 +203,6 @@ function fnGraphDataLoad(reload: boolean = false) {
       }
     })
     .then(res => {
-      console.log('fnGraphDataLoad', res);
       if (!res) return;
       const { combos, edges, nodes } = res.graphData;
 
@@ -255,7 +224,6 @@ function fnGraphDataLoad(reload: boolean = false) {
           return false;
         }
       );
-      console.log(nf);
 
       // 边过滤
       const ef: Record<string, any>[] = edges.filter(
@@ -396,7 +364,7 @@ async function fnGetState() {
     }
   }
 
-  stateTimeout.value = setTimeout(() => fnGetState(), 30_000);
+  stateTimeout.value = setTimeout(() => fnGetState(), 5_000);
 }
 
 onMounted(() => {