From eae2dd5d30051973924dc3e496f524169492a922 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 21 Dec 2023 15:41:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=93=E6=89=91=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E7=AE=80=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/topology/graph.ts  |  20 +++-
 src/views/monitor/topology/index.vue | 162 ++++++++++++++-------------
 2 files changed, 98 insertions(+), 84 deletions(-)

diff --git a/src/views/monitor/topology/graph.ts b/src/views/monitor/topology/graph.ts
index b8868f66..99f295b2 100644
--- a/src/views/monitor/topology/graph.ts
+++ b/src/views/monitor/topology/graph.ts
@@ -317,7 +317,7 @@ registerNode(
       if (cfg.info) {
         const neInfo: any = cfg.info;
         const hasNeState = neInfo.serverState.neId;
-        group.addShape('circle', {
+        const neStateShape = group.addShape('circle', {
           attrs: {
             x: r - 3,
             y: -r + 3,
@@ -329,6 +329,21 @@ registerNode(
           // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
           name: 'ne-state',
         });
+
+        // 添加动画
+        neStateShape.animate(
+          {
+            // Magnifying and disappearing
+            r: 5,
+            opacity: 0.3,
+          },
+          {
+            duration: 1000,
+            easing: 'easeCubic',
+            delay: 0,
+            repeat: true, // repeat
+          }
+        );
       }
 
       if (cfg.label) {
@@ -1468,9 +1483,6 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
               <div id="hide" style="cursor: pointer; margin-bottom: 2px">
                 2. 隐藏节点
               </div>
-              <div id="restart" style="cursor: pointer; margin-bottom: 2px">
-                3. 重启
-              </div>
             </div>
             `;
           }
diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue
index 87a97a64..6c9b4074 100644
--- a/src/views/monitor/topology/index.vue
+++ b/src/views/monitor/topology/index.vue
@@ -169,7 +169,7 @@ onMounted(() => {
       size="small"
     >
       <!-- 插槽-卡片左侧侧 -->
-      <template #title>
+      <template #title v-if="false">
         <div class="button-container" style="margin-bottom: -12px">
           <a-button type="primary" @click.prevent="fnAdd">
             <template #icon>
@@ -219,7 +219,7 @@ onMounted(() => {
         </div>
       </template>
       <!-- 插槽-卡片右侧 -->
-      <template #extra>
+      <template #extra v-if="false">
         <a-tooltip>
           <template #title>{{ t('common.reloadText') }}</template>
           <a-button type="text" @click.prevent="fnGetList()">
@@ -230,90 +230,92 @@ onMounted(() => {
 
       <div ref="graphG6Dom" class="chart"></div>
 
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          width: 200px;
-          background: #e6f7ff;
-        "
-      >
-        <div><span>状态：</span><span>正常</span></div>
-        <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.8</span></div>
-        <div><span>SN：</span><span>13770707</span></div>
-        <div><span>有效期：</span><span>2024-03-31</span></div>
-      </div>
-      ===
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          width: 140px;
-          background: #e6f7ff;
-        "
-      >
-        <div id="show" style="cursor: pointer; margin-bottom: 2px">
-          1. 显示所有隐藏项
+      <template v-if="false">
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            width: 200px;
+            background: #e6f7ff;
+          "
+        >
+          <div><span>状态：</span><span>正常</span></div>
+          <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.8</span></div>
+          <div><span>SN：</span><span>13770707</span></div>
+          <div><span>有效期：</span><span>2024-03-31</span></div>
         </div>
-        <div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
-          2. 折叠所有集群
+        ===
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            width: 140px;
+            background: #e6f7ff;
+          "
+        >
+          <div id="show" style="cursor: pointer; margin-bottom: 2px">
+            1. 显示所有隐藏项
+          </div>
+          <div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
+            2. 折叠所有集群
+          </div>
         </div>
-      </div>
-      ===
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          width: 100px;
-          background: #e6f7ff;
-        "
-      >
-        <div id="expand" style="cursor: pointer; margin-bottom: 2px">
-          1. 展开集群
+        ===
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            width: 100px;
+            background: #e6f7ff;
+          "
+        >
+          <div id="expand" style="cursor: pointer; margin-bottom: 2px">
+            1. 展开集群
+          </div>
+          <div id="hide" style="cursor: pointer; margin-bottom: 2px">
+            2. 隐藏节点
+          </div>
         </div>
-        <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-          2. 隐藏节点
+        ===
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            width: 160px;
+            background: #e6f7ff;
+          "
+        >
+          <div id="collapse" style="cursor: pointer; margin-bottom: 2px">
+            1. 折叠集群
+          </div>
+          <div id="hide" style="cursor: pointer; margin-bottom: 2px">
+            2. 隐藏节点
+          </div>
+          <div id="restart" style="cursor: pointer; margin-bottom: 2px">
+            3. 重启
+          </div>
         </div>
-      </div>
-      ===
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          width: 160px;
-          background: #e6f7ff;
-        "
-      >
-        <div id="collapse" style="cursor: pointer; margin-bottom: 2px">
-          1. 折叠集群
+        ===
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            width: 100px;
+            background: #e6f7ff;
+          "
+        >
+          <div id="hide" style="cursor: pointer; margin-bottom: 2px">
+            1. 隐藏边
+          </div>
         </div>
-        <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-          2. 隐藏节点
+        <!-- 组件 -->
+        <div class="charts">
+          <ChartGraphG6></ChartGraphG6>
         </div>
-        <div id="restart" style="cursor: pointer; margin-bottom: 2px">
-          3. 重启
-        </div>
-      </div>
-      ===
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          width: 100px;
-          background: #e6f7ff;
-        "
-      >
-        <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-          1. 隐藏边
-        </div>
-      </div>
-      <!-- 组件 -->
-      <div class="charts">
-        <ChartGraphG6></ChartGraphG6>
-      </div>
+      </template>
     </a-card>
   </PageContainer>
 </template>