fix: 拓扑变换布局

src/views/monitor/topology/graph.ts

@@ -1700,9 +1700,8 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
     edges: processedEdges,
   });
   layout.instance.execute();
-  // console.log(processedEdges)
+
   bindListener(graph);
-  // graph.data({ nodes: aggregatedData.nodes, edges: processedEdges });
   graph.data({ nodes: aggregatedData.nodes, edges: processedEdges });
   graph.render();
 
@@ -1740,3 +1739,17 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
 
   return graph;
 }
+
+let gridLayout = false;
+export function switchLayout() {
+  gridLayout = !gridLayout;
+  if (gridLayout) {
+    stopLayout();
+    graph.updateLayout({
+      type: 'grid',
+      begin: [20, 20],
+    });
+  } else {
+    layout.instance.execute();
+  }
+}

src/views/monitor/topology/index.vue

@@ -6,7 +6,7 @@ import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listNe, stateNe } from '@/api/ne/ne';
 import message from 'ant-design-vue/lib/message';
-import { randerGroph } from './graph';
+import { randerGroph, switchLayout } from './graph';
 import { parseDateToStr } from '@/utils/date-utils';
 const { t } = useI18n();
 
@@ -40,11 +40,16 @@ async function fnGetState() {
         ne.serverState.refreshTime,
         'HH:mm:ss'
       );
-      const node = graphG6.value.findById(ne.neName);
-      console.log('查询网元状态', node);
-      graphG6.value.setItemState(node, 'neState', true);
     }
+    // 修改网元状态颜色
+    const neShape = graphG6.value.findById(ne.neName);
+    graphG6.value.setItemState(
+      neShape,
+      'neState',
+      result.code === RESULT_CODE_SUCCESS
+    );
   }
+  setTimeout(() => fnGetState(), 30_000);
 }
 
 /**查询全部网元数据列表 */
@@ -75,7 +80,7 @@ function fnGetList(refresh: boolean = false) {
                 expire: '2024-03-31',
                 refreshTime: '10:31:47',
                 sn: '13770707',
-                version: '2.2312.9',
+                version: '2.2312.8',
               };
               nodes.push({
                 id: item.neName,
@@ -151,10 +156,6 @@ function fnGetList(refresh: boolean = false) {
     });
 }
 
-function fnAdd() {
-  fnGetList(true);
-}
-
 onMounted(() => {
   // 获取网元列表
   fnGetList();
@@ -171,7 +172,7 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title v-if="false">
         <div class="button-container" style="margin-bottom: -12px">
-          <a-button type="primary" @click.prevent="fnAdd">
+          <a-button type="primary">
             <template #icon>
               <PlusOutlined />
             </template>
@@ -219,13 +220,11 @@ onMounted(() => {
         </div>
       </template>
       <!-- 插槽-卡片右侧 -->
-      <template #extra v-if="false">
+      <template #extra>
-        <a-tooltip>
+        <a-button type="default" @click.prevent="switchLayout()">
-          <template #title>{{ t('common.reloadText') }}</template>
+          <template #icon><RetweetOutlined /></template>
-          <a-button type="text" @click.prevent="fnGetList()">
+          Switch Layout
-            <template #icon><ReloadOutlined /></template>
+        </a-button>
-          </a-button>
-        </a-tooltip>
       </template>
 
       <div ref="graphG6Dom" class="chart"></div>
@@ -243,7 +242,7 @@ onMounted(() => {
           <div><span>刷新时间：</span><span>18:37:22</span></div>
           <div><span>ID：</span><span>neID</span></div>
           <div><span>名称：</span><span>neName</span></div>
-          <div><span>版本：</span><span>2.2312.9</span></div>
+          <div><span>版本：</span><span>2.2312.8</span></div>
           <div><span>SN：</span><span>13770707</span></div>
           <div><span>有效期：</span><span>2024-03-31</span></div>
         </div>