From 438f562db3f6f1475face62f8a14ec1c6ae24590 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Thu, 13 Jun 2024 10:24:58 +0800
Subject: [PATCH] web: add log tabs

---
 web/src/views/TopoDisplay.vue    |  2 +-
 web/src/views/topoLogs/index.vue | 28 ++++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/web/src/views/TopoDisplay.vue b/web/src/views/TopoDisplay.vue
index 8a9633d..8c3218c 100644
--- a/web/src/views/TopoDisplay.vue
+++ b/web/src/views/TopoDisplay.vue
@@ -35,7 +35,7 @@ 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';
diff --git a/web/src/views/topoLogs/index.vue b/web/src/views/topoLogs/index.vue
index c2125cb..092d33e 100644
--- a/web/src/views/topoLogs/index.vue
+++ b/web/src/views/topoLogs/index.vue
@@ -1,25 +1,30 @@
 <!-- elk插件展示日志页面 -->
 <template>
   <div class="log_containt">
+    <el-tabs v-model="activeName" class="log_containt_tabs shadow" @tab-click="handleClick">
+      <el-tab-pane label="日志" name="log">
+        Log bar
+      </el-tab-pane>
+      <el-tab-pane label="事件" name="event">
+        Event bar
+      </el-tab-pane>
+    </el-tabs>
 
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { getLogData } from '../../request/elk'
+import { onMounted, ref } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
 
-onMounted(() => {
-  getLogs();
-})
+const activeName = ref('log')
 
-const getLogs = () => {
-  getLogData({}).then((res: any) => {
-
-  })
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
 }
 
+
 </script>
 
 
@@ -29,8 +34,11 @@ const getLogs = () => {
   height: 400px;
   position: fixed;
   bottom: 0;
-  border: 1px solid red;
   background-color: #fff;
 
+  &_tabs {
+    height: 100%;
+  }
+
 }
 </style>
\ No newline at end of file
-- 
Gitee