From 08a4e15174cfbff5debf023489efdcd6786ab559 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Wed, 19 Jun 2024 13:54:37 +0800
Subject: [PATCH] frontend: add css3 animate for logChart

---
 web/src/components/PGTopo.vue |  1 -
 web/src/request/api.ts        |  2 +-
 web/src/views/TopoDisplay.vue | 60 +++++++++++++++++++++++++++++++----
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/web/src/components/PGTopo.vue b/web/src/components/PGTopo.vue
index ac91c72..2c9e940 100644
--- a/web/src/components/PGTopo.vue
+++ b/web/src/components/PGTopo.vue
@@ -467,7 +467,6 @@ watch(() => props.graph_mode, (newData) => {
 
 .container {
   width: 100%;
-  height: 100%;
   background-color: white;
 }
 </style>
diff --git a/web/src/request/api.ts b/web/src/request/api.ts
index 16caf4e..a24d38e 100755
--- a/web/src/request/api.ts
+++ b/web/src/request/api.ts
@@ -1,5 +1,5 @@
 import request from './request';
-let baseURL = '/plugin/topology';
+let baseURL = 'plugin/topology';
 // 请求批次信息
 export function getBatchList() {
   return request({
diff --git a/web/src/views/TopoDisplay.vue b/web/src/views/TopoDisplay.vue
index 8a9633d..a509c16 100644
--- a/web/src/views/TopoDisplay.vue
+++ b/web/src/views/TopoDisplay.vue
@@ -20,22 +20,27 @@
       </template>
     </el-page-header>
     <!-- 展示topo图 -->
-    <PGTopo style="width: 100%;height: 100%;" :graph_mode="graphMode" :time_interval="timeInterval" />
+    <PGTopo style="width: 100%;height: calc(100% - 50px);" :graph_mode="graphMode" :time_interval="timeInterval" />
     <!-- 嵌套抽屉组件展示数据 -->
     <nodeDetail />
     <!-- 嵌套抽屉组件展示日志信息 -->
-    <LogChart />
+    <Transition name="fade">
+      <LogChart v-if="showLogChart" />
+    </Transition>
+    <el-icon class="upLog" @click="showLogChart = !showLogChart">
+      <ArrowUpBold class="up_log_up" v-if="!showLogChart" />
+      <ArrowDownBold class="up_log_down" v-else />
+    </el-icon>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
-import { onMounted, reactive, ref, watch, watchEffect, nextTick } from 'vue';
+import { onMounted, ref, watch, watchEffect, nextTick } from 'vue';
 import PGTopo from '@/components/PGTopo.vue';
-// import topodata from '@/assets/cluster2024-3-15.json'
-// import topodata from '@/utils/test.json';
 import nodeDetail from './nodeDetail.vue';
-import LogChart from './logs/index.vue';
+import LogChart from './topoLogs/index.vue';
 
 import { getCustomTopo, getTopoData, getUuidTopo } from "@/request/api";
 import { useTopoStore } from '@/stores/topo';
@@ -51,6 +56,8 @@ const loading = ref(false);
 let request_type: string
 let request_id: string | number
 
+let showLogChart = ref(false);
+
 onMounted(() => {
   loading.value = true;
 })
@@ -124,6 +131,12 @@ watch(() => timeInterval.value, (newdata) => {
   topoTimer(request_id, newdata);
 })
 
+watch(() => useTopoStore().node_log_id, (new_log_id) => {
+  if (new_log_id) {
+    showLogChart.value = true;
+  }
+})
+
 function changeInterval(command: string) {
   timeInterval.value = command;
 }
@@ -186,7 +199,40 @@ function topoTimer(request_id: any, interval: string) {
 .topoContaint {
   width: 96%;
   height: 100%;
-
   margin: 0 auto;
+
+  @keyframes bounce {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  .upLog {
+    position: relative;
+    left: 50%;
+    cursor: pointer;
+    font-size: 20px;
+    animation: bounce 2s infinite;
+
+    &:hover {
+      color: #409efc;
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: all .5s ease-in-out;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    transform: translateY(100%);
+  }
 }
 </style>
\ No newline at end of file
-- 
Gitee