From 1d0603405f32a523a1eb4554f22caf5b3a712881 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Wed, 17 Jul 2024 16:38:05 +0800
Subject: [PATCH] feat: add metrics chart

---
 web/src/stores/charts.ts                  | 293 +++++++++++++++++++---
 web/src/views/{ => echarts}/MyEcharts.vue | 180 +++++++------
 web/src/views/echarts/chartTable.vue      |  54 ++++
 web/src/views/{ => echarts}/index.ts      |  36 ++-
 web/src/views/nodeDetail.vue              |  42 ++--
 5 files changed, 461 insertions(+), 144 deletions(-)
 rename web/src/views/{ => echarts}/MyEcharts.vue (74%)
 create mode 100644 web/src/views/echarts/chartTable.vue
 rename web/src/views/{ => echarts}/index.ts (81%)

diff --git a/web/src/stores/charts.ts b/web/src/stores/charts.ts
index 52a2906..ba3e0df 100644
--- a/web/src/stores/charts.ts
+++ b/web/src/stores/charts.ts
@@ -6,54 +6,120 @@ export const useLayoutStore = defineStore('layoutOption', {
     return {
       layout_option: [
         {
-          x: 0, y: 0, w: 1, h: 1, i: '0',
-          static: false, display: false, title: 'CPU总使用率',
+          x: 0, y: 0, w: 2, h: 1, i: '0',
+          static: true, display: true, title: '运行时间',
           query: {
-            sqls: [{ sql: '100 - (avg(irate(node_cpu_seconds_total{instance="{macIp}",mode="idle"}[5m])) * 100)' }],
+            sqls: [{ sql: '(time()-node_boot_time_seconds{group="",instance="{macIp}"})/(60*60*24)' }],
+            type: 'value', range: false, isValue: true, interval: 5,
+            target: 'value_series', unit: '天', float: 2
+          }
+        },
+        {
+          x: 2, y: 0, w: 2, h: 1, i: '1',
+          static: true, display: true, title: 'CPU核数',
+          query: {
+            sqls: [{ sql: 'count(count(node_cpu_seconds_total{group="",instance="{macIp}",mode="system"}) by (cpu))' }],
+            type: 'value', range: false, isValue: true, interval: 5,
+            target: 'value_series', unit: '个', float: 0
+          }
+        },
+        {
+          x: 4, y: 0, w: 2, h: 1, i: '2',
+          static: true, display: true, title: '内存总量',
+          query: {
+            sqls: [{ sql: 'node_memory_MemTotal_bytes{group="",instance="{macIp}"}' }],
+            type: 'value', range: false, isValue: true, interval: 5,
+            target: 'byte2GB_series', unit: 'GiB', float: 2,
+
+          }
+        },
+        {
+          x: 6, y: 0, w: 2, h: 1, i: '3',
+          static: true, display: true, title: '当前打开的文件描述符',
+          query: {
+            sqls: [{ sql: 'node_filefd_allocated{group="",instance="{macIp}"}' }],
+            type: 'value', range: false, isValue: true, interval: 5,
+            target: 'num_series', unit: 'K', float: 2, min: 0, max: 9,
+            color: []
+          }
+        },
+        {
+          x: 0, y: 1, w: 2, h: 2, i: '4',
+          static: true, display: true, title: 'CPU总使用率',
+          query: {
+            sqls: [{ sql: '100 - (avg(irate(node_cpu_seconds_total{group="",instance="{macIp}",mode="idle"}[5m])) * 100)' }],
             type: 'gauge', range: false, isChart: true, interval: 5,
             target: 'percent_series', unit: '%', float: 2, min: 0, max: 100,
-            color: [
-              [0.5, '#67e0e3'],
-              [0.8, '#E6A23C'],
-              [1, '#fd666d']
-            ]
+            color: [{
+              offset: 0, color: '#2988f1'
+            }, {
+              offset: 1, color: '#6bccff'
+            }]
           }
         },
         {
-          x: 1, y: 0, w: 1, h: 1, i: '1',
-          static: false, display: false, title: '内存使用率',
+          x: 2, y: 1, w: 2, h: 2, i: '5',
+          static: true, display: true, title: 'CPU iowait',
           query: {
-            sqls: [{ sql: '(1 - (node_memory_MemAvailable_bytes{instance="{macIp}"} / (node_memory_MemTotal_bytes{instance="{macIp}"})))* 100' }],
+            sqls: [{ sql: 'avg(irate(node_cpu_seconds_total{group="",instance="{macIp}",mode="iowait"}[5m])) * 100' }],
             type: 'gauge', range: false, isChart: true, interval: 5,
             target: 'percent_series', unit: '%', float: 2, min: 0, max: 100,
-            color: [
-              [0.8, '#67e0e3'],
-              [0.9, '#E6A23C'],
-              [1, '#fd666d']
-            ]
+            color: [{
+              offset: 0, color: '#965af2'
+            }, {
+              offset: 1, color: '#cc8dfa'
+            }]
+          }
+        },
+        {
+          x: 4, y: 1, w:2, h: 2, i: '6',
+          static: true, display: true, title: '内存使用率',
+          query: {
+            sqls: [{ sql: '(1 - (node_memory_MemAvailable_bytes{group="",instance="{macIp}"} / (node_memory_MemTotal_bytes{group="",instance="{macIp}"})))* 100' }],
+            type: 'gauge', range: false, isChart: true, interval: 5,
+            target: 'percent_series', unit: '%', float: 2, min: 0, max: 100,
+            color: [{
+              offset: 0, color: '#eb9509'
+            }, {
+              offset: 1, color: '#febf50'
+            }]
+          }
+        },
+        {
+          x: 6, y: 1, w: 2, h: 2, i: '7',
+          static: true, display: true, title: '根分区使用率',
+          query: {
+            sqls: [{ sql: '100 - ((node_filesystem_avail_bytes{group="",instance="{macIp}",mountpoint="/",fstype=~"ext4|xfs"} * 100) / node_filesystem_size_bytes {group="",instance="{macIp}",mountpoint="/",fstype=~"ext4|xfs"})' }],
+            type: 'gauge', range: false, isChart: true, interval: 5,
+            target: 'percent_series', unit: '%', float: 2, min: 0, max: 100,
+            color: [{
+              offset: 0, color: '#00c59d'
+            }, {
+              offset: 1, color: '#1de3cf'
+            }]
           }
         },
         {
-          x: 0, y: 1, w: 3, h: 2, i: '2',
-          static: false, display: false, title: '系统平均负载',
+          x: 0, y: 3, w: 8, h: 3, i: '8',
+          static: false, display: true, title: '系统平均负载',
           query: {
             type: 'line', range: true, isChart: true, interval: 5,
             target: 'value_series', unit: '', float: 2, min: 0, max: null,
             sqls: [
               {
-                sql: 'node_load1{instance="{macIp}"}',
+                sql: 'node_load1{group="",instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
                 series_name: '1分钟'
               },
               {
-                sql: 'node_load5{instance="{macIp}"}',
+                sql: 'node_load5{group="",instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
                 series_name: '5分钟'
               },
               {
-                sql: 'node_load15{instance="{macIp}"}',
+                sql: 'node_load15{group="",instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
                 series_name: '15分钟'
@@ -62,28 +128,28 @@ export const useLayoutStore = defineStore('layoutOption', {
           }
         },
         {
-          x: 0, y: 2, w: 3, h: 2, i: '3',
-          static: false, display: false, title: '内存信息',
+          x: 0, y: 3, w: 4, h: 3, i: '9',
+          static: false, display: true, title: '内存信息',
           query: {
             type: 'line', range: true, isChart: true,
             target: 'byte2GB_series', unit: 'GiB', float: 2, min: 0, max: null,
             sqls: [
               {
-                sql: 'node_memory_MemTotal_bytes{instance="{macIp}"}',
+                sql: 'node_memory_MemTotal_bytes{group="",instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
                 step: 15,
                 series_name: '总内存',
               },
               {
-                sql: 'node_memory_MemTotal_bytes{instance="{macIp}"} - node_memory_MemAvailable_bytes{instance="{macIp}"}',
+                sql: 'node_memory_MemTotal_bytes{group="",instance="{macIp}"} - node_memory_MemAvailable_bytes{group="",instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
                 step: 15,
                 series_name: '已用',
               },
               {
-                sql: 'node_memory_MemAvailable_bytes{instance="{macIp}"}',
+                sql: 'node_memory_MemAvailable_bytes{group="",instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
                 step: 15,
@@ -93,40 +159,187 @@ export const useLayoutStore = defineStore('layoutOption', {
             ]
           }
         },
-      ],
-      process_layout_option: [
         {
-          x: 0, y: 0, w: 3, h: 2, i: '0',
-          static: false, display: false, title: '***chart',
+          x: 4, y: 6, w: 4, h: 3, i: '10',
+          static: false, display: true, title: 'cpu使用率',
           query: {
             type: 'line', range: true, isChart: true,
-            target: 'byte2GB_series', unit: 'GiB', float: 2, min: 0, max: null,
+            target: 'percent_series', unit: '%', float: 2, min: 0, max: null,
             sqls: [
               {
-                sql: 'node_memory_MemTotal_bytes{instance="{macIp}"}',
+                sql: 'avg(irate(node_cpu_seconds_total{group="",instance="{macIp}",mode="system"}[1m])) by (instance)',
                 start: startTime,
                 end: endTime,
                 step: 15,
-                series_name: '总内存',
+                series_name: '系统cpu使用率',
+              },
+              {
+                sql: 'avg(irate(node_cpu_seconds_total{group="",instance="{macIp}",mode="user"}[1m])) by (instance)',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: '用户cpu使用率',
+              },
+              {
+                sql: 'avg(irate(node_cpu_seconds_total{group="",instance="{macIp}",mode="idle"}[1m])) by (instance)',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: '单核cpu空闲率',
               },
+              {
+                sql: 'avg(irate(node_cpu_seconds_total{group="",instance="{macIp}",mode="iowait"}[1m])) by (instance)',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: '磁盘io使用率',
+              },
+              /* {
+                sql: 'irate(node_disk_io_time_seconds_total{group="",instance="{macIp}",}[1m])',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: '',
+              }, */
             ]
           }
         },
-      ],
-      net_layout_option: [
         {
-          x: 0, y: 0, w: 3, h: 2, i: '0',
-          static: false, display: false, title: '***chart',
+          x: 0, y: 9, w: 4, h: 3, i: '11',
+          static: false, display: true, title: '磁盘总空间',
+          query: {
+            type: 'table', range: false, isChart: false, interval: 5,
+            target: 'more_query',
+            sqls: [{
+              sql: 'node_filesystem_size_bytes{group="",instance="{macIp}",fstype=~"ext4|xfs"}/10^9',
+              columnList: [
+                { prop: "filesystem", label: '文件系统' },
+                { prop: "zone", label: '分区' },
+                { prop: "size", label: '空间大小(GB)' },
+              ],
+              columnValue: [
+                { prop: 'filesystem', value: 'item.metric.fstype', type: '' },
+                { prop: 'zone', value: 'item.metric.mountpoint', type: '' },
+                { prop: 'size', value: 'item.value[1]', type: 'float' }
+              ]
+            }]
+          }
+        },
+        {
+          x: 4, y: 9, w: 4, h: 3, i: '12',
+          static: false, display: true, title: '各分区可用空间',
+          query: {
+            type: 'table', range: false, isChart: false, interval: 5,
+            target: 'more_query',
+            sqls: [{
+              sql: 'node_filesystem_avail_bytes {group="",instance="{macIp}",fstype=~"ext4|xfs"}',
+              columnList: [
+                { prop: "filesystem", label: '文件系统' },
+                { prop: "zone", label: '分区' },
+                { prop: "avail", label: '可用空间(GB)' },
+              ],
+              columnValue: [
+                { prop: 'filesystem', value: 'item.metric.fstype', type: '' },
+                { prop: 'zone', value: 'item.metric.mountpoint', type: '' },
+                { prop: 'avail', value: 'item.value[1]', type: 'byte', }
+              ]
+            },
+            {
+              sql: '1-(node_filesystem_free_bytes{group="",instance="{macIp}",fstype=~"ext4|xfs"} / node_filesystem_size_bytes{group="",instance="{macIp}",fstype=~"ext4|xfs"})',
+              columnList: [
+                { prop: "use", label: '使用率' },
+              ],
+              columnValue: [
+                { prop: 'use', value: 'item.value[1]', type: 'percent', }
+              ]
+            }]
+          }
+        },
+        {
+          x: 0, y: 12, w: 4, h: 3, i: '13',
+          static: false, display: true, title: '磁盘读取容量',
           query: {
             type: 'line', range: true, isChart: true,
-            target: 'byte2GB_series', unit: 'GiB', float: 2, min: 0, max: null,
+            target: 'byte2KB_series', unit: 'kB/s', float: 2, min: 0, max: null,
             sqls: [
               {
-                sql: 'node_memory_MemTotal_bytes{instance="{macIp}"}',
+                sql: 'rate(node_disk_read_bytes_total{group="",instance="{macIp}"}[1m])',
                 start: startTime,
                 end: endTime,
                 step: 15,
-                series_name: '总内存',
+                series_name: '读取',
+              },
+
+
+            ]
+          }
+        },
+        {
+          x: 4, y: 12, w: 4, h: 3, i: '14',
+          static: false, display: true, title: '磁盘写入容量',
+          query: {
+            type: 'line', range: true, isChart: true,
+            target: 'byte2KB_series', unit: 'kB/s', float: 2, min: 0, max: null,
+            sqls: [
+              {
+                sql: 'rate(node_disk_written_bytes_total{group="",instance="{macIp}"}[1m])',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: '写入',
+              },
+
+            ]
+          }
+        },
+        {
+          x: 0, y: 15, w: 8, h: 3, i: '15',
+          static: false, display: true, title: 'TCP连接情况',
+          query: {
+            type: 'line', range: true, isChart: true,
+            target: '', unit: '', float: 2, min: 0, max: null,
+            sqls: [
+              {
+                sql: 'node_netstat_Tcp_CurrEstab{group="",instance="{macIp}"}',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: 'ESTABLISHED',
+              },
+              {
+                sql: 'node_sockstat_TCP_tw{group="",instance="{macIp}"}',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: 'TCP_tw',
+              },
+              {
+                sql: 'irate(node_netstat_Tcp_ActiveOpens{group="",instance="{macIp}"}[1m])',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: 'ActiveOpens',
+              },
+              {
+                sql: 'irate(node_netstat_Tcp_PassiveOpens{group="",instance="{macIp}"}[1m])',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: 'PassiveOpens',
+              },
+              {
+                sql: 'node_sockstat_TCP_alloc{group="",instance="{macIp}"}',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: 'TCP_alloc',
+              },
+              {
+                sql: 'node_sockstat_TCP_inuse{group="",instance="{macIp}"}',
+                start: startTime,
+                end: endTime,
+                step: 15,
+                series_name: 'TCP_inuse',
               },
             ]
           }
diff --git a/web/src/views/MyEcharts.vue b/web/src/views/echarts/MyEcharts.vue
similarity index 74%
rename from web/src/views/MyEcharts.vue
rename to web/src/views/echarts/MyEcharts.vue
index ff0488a..7ecf076 100644
--- a/web/src/views/MyEcharts.vue
+++ b/web/src/views/echarts/MyEcharts.vue
@@ -1,22 +1,29 @@
 <template>
-  <div :style="{ 'width': '100%', 'height': '100%' }">
-    <div v-show="isChart" ref="chartDom" :style="{ 'width': '100%', 'height': '100%' }"></div>
+  <div class="cont">
+    <div v-show="isChart" class='echart' ref="chartDom"></div>
+    <span v-show="!isChart && (type === 'value')" class="text">{{ char_value }}<span class="text-unit">{{
+      char_value_unit
+    }}</span></span>
+    <chart-table class="table" v-show="!isChart && (type === 'table')" :columnList="columnList"
+      :tableData="tableData" />
   </div>
 </template>
 
 <script setup lang='ts' scoped>
-import { ref, onMounted, reactive, watch, markRaw, nextTick, computed } from 'vue'
+import { ref, onMounted, reactive, watch, markRaw, nextTick } from 'vue'
 import { getPromeCurrent, getPromeRange } from '@/request/prometheus';
-import { filterProm, deepClone, handle_byte, line_opt, gauge_opt } from './index';
+import ChartTable from './chartTable.vue';
+import { filterProm, deepClone, handle_byte, nestedArray, line_opt, gauge_opt, filterNonEmptyObjects } from './index';
 import { formatDate } from '@/utils/dateFormat';
 import { useMacStore } from '@/stores/mac';
 import * as echarts from "echarts";
-
 let macIp = ref('');
+
 const chartDom = ref(null)
 const option = ref({});
 const myChart = ref<any>(null);
 const char_value = ref('0.00');
+const char_value_unit = ref('');
 const line_arr = ref([] as any[]); // 存放多请求的折线图数据集合
 let line_option = reactive(deepClone(line_opt));
 let gauge_option = reactive(deepClone(gauge_opt));
@@ -33,18 +40,27 @@ const props = defineProps({
     default: {},
     required: true
   },
+  timeChange: {
+    type: Number,
+    default: 0
+  },
   startTime: {
     type: Number,
-    default: (new Date() as any) / 1000 - 60 * 60 * 2,
+    default: 0,//(new Date() as any) / 1000 - 60 * 60 * 2,
     required: false,
   },
   endTime: {
     type: Number,
-    default: (new Date() as any) / 1000,
+    default: 0,//(new Date() as any) / 1000,
     required: false,
   },
+  isNewTime: {
+    type: Boolean,
+    default: false,
+    required: false
+  }
 })
-const search_step = 15; // 查询区间数据的步长
+let search_step = 15; // 查询区间数据的步长
 const isChart = props.query.isChart;
 
 const type = props.query.type;
@@ -57,30 +73,18 @@ const resize = () => {
   }, 0);
 }
 
-onMounted(() => {
-  myChart.value = markRaw(echarts.init(chartDom.value))
-  if (props.query.isChart) {
-    myChart.value.setOption(option.value, true)
-  }
-  macIp.value = useMacStore().newIp + ':9100';
-  getPromeData(props.query);
-  /* setTimeout(() => {
-    macIp.value = useMacStore().macIp;
-    getPromeData(props.query);
-  }, 8) */
-  window.addEventListener("resize", () => { myChart.value.resize(); })
-  // window.addEventListener('resize', resize)
-})
-
 // 获取prometheus数据
-const getPromeData = (item: any) => {
+const getPromeData = (item: any, query_ip: String) => {
   if (item.range) {
+    // 计算step,控制数据点在11000以下
+    let new_step: number = (props.endTime - props.startTime) / 10000;
+    search_step = new_step > 15 ? Math.floor(new_step) : 15;
     let proms = [] as any;
-    item.sqls.forEach((sqlItem: any, index: number) => {
+    item.sqls.forEach((sqlItem: any, _index: number) => {
       // 1.使用new promise来进行异步处理,避免乱序
       proms.push(
         new Promise((resolve, reject) => {
-          getPromeRange({ query: sqlItem.sql.replace(/{macIp}/g, macIp.value), start: props.startTime, end: props.endTime, step: sqlItem.step || search_step }).then(res => {
+          getPromeRange({ query: sqlItem.sql.replace(/{macIp}/g, query_ip), start: props.startTime, end: props.endTime, step: search_step }).then((res: any) => {
             return resolve(filterProm(res) && filterProm(res))
           }).catch(err => {
             return reject(err)
@@ -95,10 +99,10 @@ const getPromeData = (item: any) => {
   }
   else if (!item.range) {
     let proms = [] as any;
-    item.sqls.forEach(async (sqlItem: any, index: number) => {
+    item.sqls.forEach(async (sqlItem: any, _index: number) => {
       proms.push(
         new Promise((resolve, reject) => {
-          getPromeCurrent({ query: sqlItem.sql.replace(/{macIp}/g, macIp.value) }).then(res => {
+          getPromeCurrent({ query: sqlItem.sql.replace(/{macIp}/g, query_ip) }).then(res => {
             return resolve(filterProm(res) && filterProm(res))
           }).catch(err => {
             return reject(err)
@@ -122,11 +126,10 @@ const filterCurrentData = (item: any, result: any) => {
         set_gauge_type(item, result[0]);
         break;
       case 'table':
-        if (result.length != props.query.sqls.length) {
+        if (result.length != props.query.sqls.length || filterNonEmptyObjects(result).length === 0) {
           return false;
-        } else if (result.length > 0) {
-          set_table_type(item, result);
         }
+        set_table_type(item, nestedArray(result))
         break;
       default:
         break;
@@ -166,15 +169,16 @@ const handle_line_data = (values: any, target: string) => {
 }
 
 // 设置折线类型的数据
-const set_line_type = (item: any, result: any) => {
+const set_line_type = (item: any, _result: any) => {
   seriesCount = 0;
   let value_unit = item.unit;
   line_option = reactive(deepClone(line_opt));
-  line_option.yAxis.axisLabel.formatter = '{value}' + item.unit;
+  line_option.yAxis.axisLabel.formatter = '{value}' + value_unit;
   let series = {
     name: '', type: 'line', smooth: false, showSymbol: false,
-    z: 1, zlevel: 1, lineStyle: { width: 1 }, areaStyle: { opacity: 0.1, }, data: [],
+    z: 1, zlevel: 1, lineStyle: { width: 2 }, areaStyle: { opacity: 0.1, }, data: [],
   } as any;
+  // 配置折线图的数据系列data
   line_arr.value.forEach((line: any, lineIndex: number) => {
     let legendName = deepClone(item.sqls[lineIndex].series_name);
     if (line instanceof Array) {
@@ -182,7 +186,7 @@ const set_line_type = (item: any, result: any) => {
       if (line.length > 0) {
         // 数组有数据
         line.forEach(lineItem => {
-
+          seriesCount++;
           let init_series: string = lineItem.metric && deepClone(lineItem.metric.device) || '';
           // 针对此应用折现图系列名字进行汉化操作
           switch (init_series) {
@@ -192,8 +196,6 @@ const set_line_type = (item: any, result: any) => {
             case 'dm-1':
               series.name = 'swap';
               break;
-            case 'dm-2':
-              break;
             case 'sr0':
               series.name = '光驱';
               break;
@@ -205,12 +207,8 @@ const set_line_type = (item: any, result: any) => {
               }
               break;
           }
-          if (init_series != 'dm-2') {
-            // 针对监控插件含有dm-2特殊处理
-            seriesCount++;
-            series.data = deepClone(handle_line_data(lineItem.values, item.target));
-            line_option.series.push(deepClone(series))
-          }
+          series.data = deepClone(handle_line_data(lineItem.values, item.target));
+          line_option.series.push(deepClone(series))
         })
       } else {
         seriesCount++;
@@ -239,7 +237,7 @@ const set_line_type = (item: any, result: any) => {
     let startDiv = `<div style='height:100px; width:100%; background-color:transparent; display:flex; 
       flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-items:start; display:-moz-flex; '>`;
     let endDiv = '</div>';
-    data.map((item: any, index: number) => {
+    data.map((item: any, _index: number) => {
       if (item.data.empty) {
         result = ''
       } else {
@@ -254,23 +252,25 @@ const set_line_type = (item: any, result: any) => {
     return result;
   }
 
+  // 赋值option实时渲染折线图
   option.value = line_option;
 }
 
 // 设置数值类型的数据
 const set_value_type = (item: any, result: any) => {
+  char_value_unit.value = item.unit;
   switch (item.target) {
     case 'value_series':
       // 数值系列
-      char_value.value = (result && result.value ? parseFloat(result.value[1]) : 0.00).toFixed(item.float) + item.unit;
+      char_value.value = (result && result.value ? parseFloat(result.value[1]) : 0.00).toFixed(item.float);
       break;
     case 'byte2GB_series':
       // 字节GB系列
-      char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'GB') : 0.00) + 'G';
+      char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'GB') : 0.00) + '';
       break;
     case 'byte2KB_series':
-      // 字节KB系列
-      char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'KB') : 0.00) + 'K';
+      // 字节GB系列
+      char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'KB') : 0.00) + '';
       break;
     case 'num_series':
       // 数值描述符
@@ -280,7 +280,7 @@ const set_value_type = (item: any, result: any) => {
       } else {
         char_value.value = num.toFixed(item.float);
       }
-
+      break;
     default:
       break;
   }
@@ -290,16 +290,16 @@ const set_value_type = (item: any, result: any) => {
 const set_gauge_type = (item: any, result: any) => {
   gauge_option.series[0].min = item.min || 0;
   gauge_option.series[0].max = item.max || 100;
-  gauge_option.series[0].axisLine.lineStyle.color = item.color;
+  gauge_option.series[0].progress.itemStyle.color.colorStops = item.color;
   gauge_option.series[0].detail.formatter = '{value}' + item.unit;
   switch (item.target) {
     case 'percent_series':
       // 百分比系列
-      gauge_option.series[0].data[0].value = result && result.value ? parseFloat(result.value[1]).toFixed(item.float) : 0;
+      gauge_option.series[0].data[0].value = (result && result.value ? parseFloat(result.value[1]) : 0.00).toFixed(item.float);
       break;
     case 'num_series':
       // 数值系列
-      let num = result && result.value ? parseFloat(result.value[1]) / 1000 : 0;
+      let num = (result && result.value ? parseFloat(result.value[1]) : 0) / 1000;
       if (num <= 1) {
         gauge_option.series[0].data[0].value = num * 1000;//(parseInt(result.value[1]) / 1000).toFixed(item.float);
       } else {
@@ -327,6 +327,7 @@ const set_table_type = (item: any, result: any) => {
     let cols = deepClone(sqlItem.columnValue);
     let tableItem = {} as any;
     result[index].forEach((item: any, resIndex: number) => {
+      let pointer = item; // 使用item跳过ts检查,无实际意义，可删除
       cols.forEach(async (vItem: any) => {
         switch (vItem.type) {
           case 'byte':
@@ -346,7 +347,7 @@ const set_table_type = (item: any, result: any) => {
       tableData1[`res${resIndex}.${index}`] = deepClone(tableItem);
     })
   })
-  result[0].forEach((key: any, index: number) => {
+  result[0].forEach((_key: any, index: number) => {
     let rowData = {} as any;
     for (let i = 0; i < item.sqls.length; i++) {
       let resString = 'res' + index + '.' + i;
@@ -357,14 +358,15 @@ const set_table_type = (item: any, result: any) => {
 
 }
 
-/* setInterval(() => {
-  getPromeData(props.query)
-}, 5000); */
 
-
-
-const timeChange = computed(() => {
-  return props.startTime + '' + props.endTime;
+onMounted(() => {
+  myChart.value = markRaw(echarts.init(chartDom.value))
+  macIp.value = useMacStore().newIp + ':9100';
+  getPromeData(props.query, macIp.value);
+  if (props.query.isChart) {
+    myChart.value.setOption(option.value, true)
+  }
+  window.addEventListener('resize', resize)
 })
 
 watch(() => option.value, (new_option) => {
@@ -372,17 +374,24 @@ watch(() => option.value, (new_option) => {
     myChart.value.dispose();
     myChart.value = markRaw(echarts.init(chartDom.value))
   }
-  myChart.value.setOption(new_option, true)
+  nextTick(() => {
+    myChart.value.setOption(new_option, true)
+  })
 }, {
   deep: true
 })
 
-watch(() => timeChange, (newVal) => {
+// 监听时间的变化
+watch(() => props.timeChange, (newVal) => {
   if (newVal) {
-    getPromeData(props.query);
+    // 加延迟防止ip还没监听到就调用接口
+    setTimeout(() => {
+      getPromeData(props.query, macIp.value);
+    }, 200)
   }
 }, {
-  deep: true
+  deep: true,
+  immediate: true
 })
 
 watch(() => line_arr.value, (new_line_arr) => {
@@ -394,10 +403,10 @@ watch(() => line_arr.value, (new_line_arr) => {
   deep: true
 })
 
-watch(() => useMacStore().newIp, (new_macIp, old_macIp) => {
+watch(() => useMacStore().newIp, (new_macIp, _old_macIp) => {
   if (new_macIp) {
     macIp.value = new_macIp + ':9100';
-    getPromeData(props.query);
+    getPromeData(props.query, macIp.value);
   }
 }, { deep: true })
 
@@ -406,26 +415,31 @@ defineExpose({
 })
 </script>
 
-<style scoped>
-.echart {
+<style lang='scss' scoped>
+.cont {
   width: 100%;
   height: 100%;
-}
 
-.table {
-  width: 100%;
-  height: 100%;
-}
+  .echart,
+  .text,
+  .table {
+    width: 96%;
+    height: 98%;
+  }
 
-.text {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: bold;
-  font-size: 20px;
-  color: #222;
-  user-select: none;
+  .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 28px;
+    color: #262626;
+    user-select: none;
+
+    &-unit {
+      font-size: 14px;
+      margin-top: 4%;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/web/src/views/echarts/chartTable.vue b/web/src/views/echarts/chartTable.vue
new file mode 100644
index 0000000..d34b722
--- /dev/null
+++ b/web/src/views/echarts/chartTable.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-table :data="tableData" stripe class="table" :cell-style="{ borderBottom: '1px solid #999 !important' }">
+    <el-table-column v-for="(col, index) in columnList" :prop="col!.prop" :label="col!.label" :key="index"
+      style="background-color: red;" />
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+interface tableItem {
+  prop: string,
+  label: string
+}
+
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: [],
+    required: true
+  },
+  columnList: {
+    type: Array,
+    default: [],
+    required: true
+  },
+})
+
+const tableData = ref([]);
+const columnList = ref<tableItem[]>([]);
+
+onMounted(() => {
+  tableData.value = props.tableData as any;
+  columnList.value = props.columnList as tableItem[];
+})
+
+watch(() => props.tableData, (new_data) => {
+  tableData.value = new_data as any;
+}, {
+  deep: true
+})
+
+watch(() => props.columnList, (new_cols) => {
+  columnList.value = new_cols as tableItem[];
+}, {
+  deep: true
+})
+
+</script>
+
+<style scoped lang="scss">
+.table {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/index.ts b/web/src/views/echarts/index.ts
similarity index 81%
rename from web/src/views/index.ts
rename to web/src/views/echarts/index.ts
index 7a6aa33..f5eaa13 100644
--- a/web/src/views/index.ts
+++ b/web/src/views/echarts/index.ts
@@ -4,7 +4,7 @@ export let endTime = (new Date() as any) / 1000;
 
 // 过滤prometheus接口返回的数据
 export const filterProm = (res: any) => {
-  if (res.data.status === 'success' && res.data.data.result.length > 0) {
+  if (res && res.data.status === 'success' && res.data.data.result.length > 0) {
     return res.data.data.result.length === 1 ? res.data.data.result[0] : res.data.data.result;
   } else {
     return [];
@@ -15,6 +15,37 @@ export const deepClone = (res: any) => {
   return JSON.parse(JSON.stringify(res))
 }
 
+// 测试数组是否为空,为空返回[],不为空返回有值元素的 ogject[]
+export const filterNonEmptyObjects = (arr:any[]) => {  
+  return arr.reduce((acc, innerArr) => {  
+    // 遍历内部数组中的每个元素  
+    if (!Array.isArray(innerArr)) {
+      acc.push(innerArr);
+    } else {
+      innerArr.forEach((item:any) => {  
+        // 检查当前项是否是一个非空对象  
+        if (item && typeof item === 'object' && Object.keys(item).length > 0) {  
+          // 如果是非空对象，则添加到累加器数组中  
+          acc.push(item);  
+        }  
+      });  
+    }
+    return acc;  
+  }, []); // 初始累加器数组为空数组  
+} 
+
+// 给对象数组的每个元素嵌套数组
+export const nestedArray = (arr:any) => {
+  return arr.map((item:any) => {
+    if (Array.isArray(item)) {
+      return item;
+    } else {
+      return [item];
+    }
+  })
+}
+
+
 // 处理字节类型数据
 export const handle_byte = (value: string, float: number, unit: string) => {
   let value2unit: string = '0.00';
@@ -35,7 +66,7 @@ export const handle_byte = (value: string, float: number, unit: string) => {
 }
 
 // echart颜色表
-let e_colors = ['#4980c9', '#67e0e3', '#ef6874', '#4ab92e', '#E6A23C', '#74a465', '#e24d42', '#ba43a9'];
+let e_colors = ['#2988f1', '#f8b238', '#b477f7', '#00c69e', '#ff79c2', '#40b85b', '#e24d42', '#ba43a9'];
 
 // 柱状图
 export const bar_opt = {
@@ -65,6 +96,7 @@ export const line_opt = {
   tooltip: {
     show: true,
     trigger: 'axis',
+    confine: true,
     transitionDuration: 0.4,
     backgroundColor: 'rgba(255,255,255,1)',
     extraCssText: 'min-height:130px;',
diff --git a/web/src/views/nodeDetail.vue b/web/src/views/nodeDetail.vue
index 80eeef5..45cd732 100644
--- a/web/src/views/nodeDetail.vue
+++ b/web/src/views/nodeDetail.vue
@@ -1,7 +1,7 @@
 <!-- 抽屉组件展示节点详情 -->
 <template>
   <!-- 外层抽屉组件 -->
-  <el-drawer class="drawer" v-model="display_drawer" :with-header="false" direction="rtl" size="560px"
+  <el-drawer class="drawer" v-model="display_drawer" :with-header="false" direction="rtl" size="1200px"
     :before-close="handleClose" :modal="true" :append-to-body="false">
     <div class="drawer_top_div">
       <el-descriptions title="节点信息" :column="1" class="info">
@@ -28,23 +28,25 @@
       <el-date-picker v-model="dateRange" type="datetimerange" :shortcuts="pickerOptions" range-separator="至"
         start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate">
       </el-date-picker>
-      <grid-layout :col-num="3" :is-draggable="grid.draggable" :is-resizable="grid.resizable" :layout.sync="layout"
-        :row-height="100" :use-css-transforms="true" :vertical-compact="true" :responsive="true">
-        <template v-for="(item, i) in layout">
-          <grid-item :key="i" :h="item.h" :i="item.i" :static="item.static" :w="item.w" :x="item.x" :y="item.y"
-            :min-w="2" :min-h="2" @resize="SizeAutoChange(item.i, item.query.isChart)" @resized="SizeAutoChange"
-            drag-allow-from=".drag" drag-ignore-from=".noDrag" v-if="item.display">
-            <div class="drag">
-              <span class="drag-title">{{ item.title }}</span>
-            </div>
-            <div class="noDrag">
-              <MyEcharts :query="item.query" :startTime="startTime" :endTime="endTime"
-                :style="{ 'width': '100%', 'height': '100%' }">
-              </MyEcharts>
-            </div>
-          </grid-item>
-        </template>
-      </grid-layout>
+      <el-scrollbar height="580px">
+        <grid-layout :is-draggable="grid.draggable" :is-resizable="grid.resizable" :layout.sync="layout"
+          :row-height="100" :use-css-transforms="true" :vertical-compact="true" :responsive="true" :margin="[10, 10]">
+          <template v-for="(item, i) in layout">
+            <grid-item :key="i" :h="item.h" :i="item.i" :static="item.static" :w="item.w" :x="item.x" :y="item.y"
+              :min-w="1" :min-h="1" @resize="SizeAutoChange(item.i, item.query.isChart)" @resized="SizeAutoChange"
+              drag-allow-from=".drag" drag-ignore-from=".noDrag" v-if="item.display">
+              <div class="drag">
+                <span class="drag-title">{{ item.title }}</span>
+              </div>
+              <div class="noDrag">
+                <MyEcharts :query="item.query" :timeChange="time_change" :startTime="startTime" :endTime="endTime"
+                  :style="{ 'width': '100%', 'height': '100%' }">
+                </MyEcharts>
+              </div>
+            </grid-item>
+          </template>
+        </grid-layout>
+      </el-scrollbar>
     </div>
 
     <!-- 嵌套抽屉组件 -->
@@ -66,7 +68,7 @@ import { ref, reactive, watch } from "vue";
 import { More, Odometer, Files, Collection } from '@element-plus/icons-vue';
 import { useLayoutStore } from '@/stores/charts';
 import { useTopoStore } from '@/stores/topo';
-import MyEcharts from '@/views/MyEcharts.vue';
+import MyEcharts from '@/views/echarts/MyEcharts.vue';
 import { pickerOptions } from '@/utils/datePicker';
 import { useMacStore } from "@/stores/mac";
 
@@ -201,11 +203,13 @@ function handleClose() {
 
 // 选择展示时间范围
 let dateRange = ref([new Date() as any - 2 * 60 * 60 * 1000, new Date() as any - 0])
+const time_change = ref(0);
 const startTime = ref(0);
 const endTime = ref(0);
 startTime.value = (new Date() as any) / 1000 - 60 * 60 * 2;
 endTime.value = (new Date() as any) / 1000;
 const changeDate = (value: number[]) => {
+  time_change.value = Math.random() * 1000;
   if (value) {
     startTime.value = (new Date(value[0]) as any) / 1000;
     endTime.value = (new Date(value[1]) as any) / 1000;
-- 
Gitee