From 6f9fc0eb5d0f0928e8baed1184cc54a4b066c449 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Wed, 19 Jun 2024 17:49:59 +0800
Subject: [PATCH] frontend: add log tabs in topodisplay page

---
 web/src/types/index.ts              |  7 +++-
 web/src/views/topoLogs/barChart.vue | 58 +++++++++++++++++++++--------
 web/src/views/topoLogs/index.vue    | 56 ++++++++++++++++++++++++----
 3 files changed, 97 insertions(+), 24 deletions(-)

diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 5801a66..0e33292 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -94,4 +94,9 @@ export interface TopoCustomFormType {
   node_rules: [[{ rule_condition: any, rule_type: string }, { rule_condition: any, rule_type: string }]];
   description: string;
   [key: string]: unknown;
-}
\ No newline at end of file
+}
+
+export type logData = {
+  name: string,
+  data: (string | number)[][]
+};
\ No newline at end of file
diff --git a/web/src/views/topoLogs/barChart.vue b/web/src/views/topoLogs/barChart.vue
index 5264d48..cf5dd05 100644
--- a/web/src/views/topoLogs/barChart.vue
+++ b/web/src/views/topoLogs/barChart.vue
@@ -3,42 +3,66 @@
 </template>
 
 <script setup lang="ts">
-import { markRaw, nextTick, onMounted, ref } from 'vue';
+import { markRaw, nextTick, onMounted, ref, watchEffect } from 'vue';
 import bar_option from './chart_options';
 import * as echarts from 'echarts';
+import type { logData } from '@/types/index';
 
 const chartDom = ref(null);
 const myChart = ref<any>(null);
+let isSecondClick = ref(false);
 
 let props = defineProps({
-  logs: {
-    type: Array,
+  results: {
+    type: Array as () => logData[],
     required: false,
     default: []
   }
 })
+let emit = defineEmits(["firstClick", "secondClick"]);
 
 onMounted(() => {
   myChart.value = markRaw(echarts.init(chartDom.value!))
-  /* option.value = bar_option;
-  myChart.value.setOption(option.value, true) */
-  handleBarData();
+  // 柱状图点击事件
+  myChart.value.on('click', function (bar_item_params: any) {
+    // console.log(`图的信息：${bar_item_params},图的纵坐标：${bar_item_params.value}`);
+    if (!isSecondClick.value) {
+      // 第一次点击
+      emit('firstClick', bar_item_params)
+      isSecondClick.value = true;
+    } else {
+      // 第二次点击
+      isSecondClick.value = true;
+      emit('secondClick', bar_item_params)
+    }
+  });
   window.addEventListener('resize', resize)
 })
+
+watchEffect(() => {
+  if (props.results) {
+    nextTick(() => {
+      handleBarData(props.results);
+    })
+  }
+})
+
 const resize = () => {
   nextTick(() => {
     myChart.value.resize()
   })
 }
 
-declare type serieItem = {
+interface serieItem {
   name: string,
   type: string,
   stack: string,
   data: any
 }
 // 处理柱状图数据
-const handleBarData = () => {
+const handleBarData = (_data: logData[]) => {
+  if (!_data.length) return;
+  bar_option.xAxis!.data = _data[0].data.map((item: any) => item[0]);
   let series: any = [];
   let seriesI: serieItem = {
     name: '',
@@ -46,14 +70,16 @@ const handleBarData = () => {
     stack: '',
     data: []
   };
-  bar_option.xAxis!.data = props.logs.map((item: any) => item[0]);
-  // 对接口数据进行处理
-  seriesI.name = '类别1';
-  seriesI.stack = 'A';
-  seriesI.data = props.logs.map(function (item: any) {
-    return item[1];
-  });
-  series.push(seriesI);
+
+  _data.forEach((item: any) => {
+    seriesI.stack = 'A';
+    seriesI.name = item.name;
+    seriesI.data = item.data.map(function (d_item: any) {
+      return d_item[1];
+    });
+    series.push(JSON.parse(JSON.stringify(seriesI)));
+  })
+
   setBorderRadius(series);
   bar_option.series = series;
   myChart.value.setOption(bar_option, true)
diff --git a/web/src/views/topoLogs/index.vue b/web/src/views/topoLogs/index.vue
index c2125cb..19fd5f1 100644
--- a/web/src/views/topoLogs/index.vue
+++ b/web/src/views/topoLogs/index.vue
@@ -1,25 +1,63 @@
 <!-- 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">
+        <barChart :results="logs" @firstClick="getLogData" @secondClick="handleShowLog" />
+      </el-tab-pane>
+      <el-tab-pane label="事件" name="event">
+        <barChart :results="event_logs" />
+      </el-tab-pane>
+    </el-tabs>
 
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { getLogData } from '../../request/elk'
+import { onMounted, ref, watch } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+
+import barChart from './barChart.vue';
+import { useTopoStore } from '@/stores/topo';
+import type { logData } from '@/types/index';
+
+// import result, { host_result } from './test';
+
+const activeName = ref('log');
+const logs = ref([] as logData[]);
+const event_logs = ref([] as logData[]);
 
 onMounted(() => {
-  getLogs();
+  getLogData();
 })
 
-const getLogs = () => {
-  getLogData({}).then((res: any) => {
+// 请求日志数据
+const getLogData = (_params?: any) => {
+  if (_params) {
+    // 点击主机bar
+    // logs.value = host_result;
+    return;
+  }
+  // logs.value = result;
+}
+
+const handleClick = (_tab: TabsPaneContext, _event: Event) => {
+  // console.log(tab.props)
 
-  })
 }
 
+// 相应点击进程柱状图事件
+const handleShowLog = (_process_info: any) => {
+  // console.log('进程信息：', process_info)
+}
+
+watch(() => useTopoStore().node_log_id, (new_node_id) => {
+  if (new_node_id) {
+    // 发送接口请求
+    getLogData({ log_id: new_node_id });
+  }
+})
 </script>
 
 
@@ -29,8 +67,12 @@ const getLogs = () => {
   height: 400px;
   position: fixed;
   bottom: 0;
-  border: 1px solid red;
   background-color: #fff;
 
+  &_tabs {
+    width: 100%;
+    height: 100%;
+  }
+
 }
 </style>
\ No newline at end of file
-- 
Gitee