From 0c52f2cf3b0df002a9612cbc012c136ef2889a99 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 21 Dec 2023 20:44:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=93=E6=89=91=E5=8F=98=E6=8D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/topology/graph.ts  | 17 ++++++++++++--
 src/views/monitor/topology/index.vue | 35 ++++++++++++++--------------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/views/monitor/topology/graph.ts b/src/views/monitor/topology/graph.ts
index 99f295b2..4486d4cf 100644
--- a/src/views/monitor/topology/graph.ts
+++ b/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();
+  }
+}
diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue
index 02a6ac55..3c855c77 100644
--- a/src/views/monitor/topology/index.vue
+++ b/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">
-        <a-tooltip>
-          <template #title>{{ t('common.reloadText') }}</template>
-          <a-button type="text" @click.prevent="fnGetList()">
-            <template #icon><ReloadOutlined /></template>
-          </a-button>
-        </a-tooltip>
+      <template #extra>
+        <a-button type="default" @click.prevent="switchLayout()">
+          <template #icon><RetweetOutlined /></template>
+          Switch Layout
+        </a-button>
       </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>