From 30f5bb12db8aed6c2e6d185c866aabce1e661668 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Mon, 12 Jun 2023 16:51:27 +0800
Subject: [PATCH] add date_pick function to prometheus plugin

---
 prometheus/web/package.json                 |   4 +-
 prometheus/web/src/App.vue                  |  14 +-
 prometheus/web/src/components/MyEcharts.vue | 157 ++++++++++++++++----
 prometheus/web/src/components/MyGrid.vue    |  12 +-
 prometheus/web/src/components/index.ts      |  96 ++++++++----
 prometheus/web/src/shims-vue.d.ts           |   1 +
 prometheus/web/src/styles/main.scss         |  15 +-
 prometheus/web/src/utils/datePicker.ts      |  38 +++++
 prometheus/web/src/views/HomeView.vue       | 115 ++++++--------
 9 files changed, 297 insertions(+), 155 deletions(-)
 create mode 100644 prometheus/web/src/utils/datePicker.ts

diff --git a/prometheus/web/package.json b/prometheus/web/package.json
index af25f6c0..c8158f4b 100644
--- a/prometheus/web/package.json
+++ b/prometheus/web/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "view",
+  "name": "prometheus",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -36,4 +36,4 @@
     "not dead",
     "not ie 11"
   ]
-}
+}
\ No newline at end of file
diff --git a/prometheus/web/src/App.vue b/prometheus/web/src/App.vue
index 088b059e..51c7c397 100644
--- a/prometheus/web/src/App.vue
+++ b/prometheus/web/src/App.vue
@@ -13,18 +13,6 @@ provide('echarts', echarts);
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+  background-color: #F0F2F5;
 }
 </style>
diff --git a/prometheus/web/src/components/MyEcharts.vue b/prometheus/web/src/components/MyEcharts.vue
index 45f58f48..3b9912e7 100644
--- a/prometheus/web/src/components/MyEcharts.vue
+++ b/prometheus/web/src/components/MyEcharts.vue
@@ -7,10 +7,10 @@
 </template>
   
 <script setup lang='ts' scoped>
-import { inject, ref, onMounted, reactive, watch, markRaw, nextTick } from 'vue'
+import { inject, ref, onMounted, reactive, watch, markRaw, nextTick, computed } from 'vue'
 import { getPromeCurrent, getPromeRange } from '@/api/prometheus';
 import ChartTable from './chartTable.vue';
-import { filterProm, deepClone, handle_byte, startTime, endTime, line_opt, gauge_opt } from './index';
+import { filterProm, deepClone, handle_byte, line_opt, gauge_opt } from './index';
 import { formatDate } from '@/utils/dateFormat';
 import { useMacStore } from '@/store/mac';
 let macIp = ref('');
@@ -22,7 +22,7 @@ const char_value = ref('0.00');
 const line_arr = ref([] as any[]); // 存放多请求的折线图数据集合
 let line_option = reactive(deepClone(line_opt));
 let gauge_option = reactive(deepClone(gauge_opt));
-
+let seriesCount = 0;
 interface tableItem {
   prop: string,
   label: string
@@ -35,6 +35,16 @@ const props = defineProps({
     default: {},
     required: true
   },
+  startTime: {
+    type: Number,
+    default: (new Date() as any) / 1000 - 60 * 60 * 2,
+    required: false,
+  },
+  endTime: {
+    type: Number,
+    default: (new Date() as any) / 1000,
+    required: false,
+  },
 })
 const search_step = 15; // 查询区间数据的步长
 const isChart = props.query.isChart;
@@ -56,7 +66,7 @@ const getPromeData = (item: any) => {
       // 1.使用new promise来进行异步处理,避免乱序
       proms.push(
         new Promise((resolve, reject) => {
-          getPromeRange({ query: sqlItem.sql.replace(/{macIp}/g, macIp.value), start: sqlItem.start || '', end: sqlItem.end || endTime, step: sqlItem.step || search_step }).then(res => {
+          getPromeRange({ query: sqlItem.sql.replace(/{macIp}/g, macIp.value), start: props.startTime, end: props.endTime, step: sqlItem.step || search_step }).then(res => {
             return resolve(filterProm(res) && filterProm(res))
           }).catch(err => {
             return reject(err)
@@ -89,22 +99,24 @@ const getPromeData = (item: any) => {
 
 // 过滤基础数据类型
 const filterCurrentData = (item: any, result: any) => {
-  switch (item.type) {
-    case 'value':
-      set_value_type(item, result[0]);
-      break;
-    case 'gauge':
-      set_gauge_type(item, result[0]);
-      break;
-    case 'table':
-      if (result.length != props.query.sqls.length) {
-        return false;
-      } else if (result.length > 0) {
-        set_table_type(item, result);
-      }
-      break;
-    default:
-      break;
+  if (result[0]) {
+    switch (item.type) {
+      case 'value':
+        set_value_type(item, result[0]);
+        break;
+      case 'gauge':
+        set_gauge_type(item, result[0]);
+        break;
+      case 'table':
+        if (result.length != props.query.sqls.length) {
+          return false;
+        } else if (result.length > 0) {
+          set_table_type(item, result);
+        }
+        break;
+      default:
+        break;
+    }
   }
 }
 
@@ -141,6 +153,9 @@ const handle_line_data = (values: any, target: string) => {
 
 // 设置折线类型的数据
 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;
   let series = {
     name: '', type: 'line', smooth: false, showSymbol: false,
@@ -149,18 +164,82 @@ const set_line_type = (item: any, result: any) => {
   line_arr.value.forEach((line: any, lineIndex: number) => {
     let legendName = deepClone(item.sqls[lineIndex].series_name);
     if (line instanceof Array) {
-      // 如果是数组
-      line.forEach(lineItem => {
-        series.name = lineItem.metric && deepClone(lineItem.metric.device) || '';
-        series.data = deepClone(handle_line_data(lineItem.values, item.target));
+      // 1.如果是数组
+      if (line.length > 0) {
+        // 数组有数据
+        line.forEach(lineItem => {
+
+          let init_series: string = lineItem.metric && deepClone(lineItem.metric.device) || '';
+          // 针对此应用折现图系列名字进行汉化操作
+          switch (init_series) {
+            case 'dm-0':
+              series.name = '/';
+              break;
+            case 'dm-1':
+              series.name = 'swap';
+              break;
+            case 'dm-2':
+              break;
+            case 'sr0':
+              series.name = '光驱';
+              break;
+            default:
+              if (init_series.includes('sd')) {
+                series.name = '硬盘' + init_series;
+              } else if (init_series.includes('vd')) {
+                series.name = '磁盘' + init_series;
+              }
+              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))
+          }
+        })
+      } else {
+        seriesCount++;
+        let time_text = formatDate(new Date(), "YYYY-MM-DD HH:ii:ss")
+        series.name = '系列' + (lineIndex + 1)
+        series.data = [{ time: (new Date() as any) / 1000, value: [time_text, 0.00] }];
         line_option.series.push(deepClone(series))
-      })
+      }
     } else {
-      series.name = legendName;
-      series.data = deepClone(handle_line_data(line.values, item.target));
-      line_option.series.push(deepClone(series))
+      // 2.如果是对象
+      if (line.values && line.values.length > 0) {
+        seriesCount++;
+        series.name = legendName;
+        series.data = deepClone(handle_line_data(line.values, item.target));
+        line_option.series.push(deepClone(series))
+      }
     }
   })
+
+  // 配置提示框的样式和数据
+  let tipWidth = seriesCount < 4 ? 180 : Math.ceil(seriesCount / 4) * 180;
+  line_option.tooltip.extraCssText += `width:${tipWidth}px;`;
+  line_option.tooltip.formatter = (data: any) => {
+    let result = '';
+    let content = '';
+    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) => {
+      if (item.data.empty) {
+        result = ''
+      } else {
+        content +=
+          `<span style='font-size:10px;width:144px;  display:flex;justify-content:space-between;'>
+                  <span style='display:inline-block; width:70%; text-align:left;'>${item.marker} ${item.seriesName}</span>
+                  <span style='display:inline-block; width:30%; text-align:center;'>${item.data.value[1]}${value_unit}</span> 
+                </span>`
+        result = `<span style='font-size:12px;float:left;'>${item.axisValueLabel}</span> <br/>${startDiv}${content}${endDiv}`;
+      }
+    })
+    return result;
+  }
+
   option.value = line_option;
 }
 
@@ -179,6 +258,14 @@ const set_value_type = (item: any, result: any) => {
       // 字节KB系列
       char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'KB') : 0.00) + 'K';
       break;
+    case 'num_series':
+      // 数值描述符
+      let num = (result && result.value ? parseFloat(result.value[1]) : 0) / 1000;
+      if (num <= 1) {
+        char_value.value = num * 1000 + '';
+      } else {
+        char_value.value = num.toFixed(item.float);
+      }
 
     default:
       break;
@@ -272,6 +359,10 @@ onMounted(() => {
   window.addEventListener('resize', resize)
 })
 
+const timeChange = computed(() => {
+  return props.startTime + '' + props.endTime;
+})
+
 watch(() => option.value, (new_option) => {
   if (myChart.value.getOption()) {
     myChart.value.dispose();
@@ -282,6 +373,14 @@ watch(() => option.value, (new_option) => {
   deep: true
 })
 
+watch(() => timeChange, (newVal) => {
+  if (newVal) {
+    getPromeData(props.query);
+  }
+}, {
+  deep: true
+})
+
 watch(() => line_arr.value, (new_line_arr) => {
   if (new_line_arr.length != props.query.sqls.length) {
     return false;
@@ -313,7 +412,7 @@ defineExpose({
     align-items: center;
     font-weight: bold;
     font-size: 20px;
-    color: #67e0e3;
+    color: #222;
     user-select: none;
   }
 }
diff --git a/prometheus/web/src/components/MyGrid.vue b/prometheus/web/src/components/MyGrid.vue
index c2c770a6..41ecdcdc 100644
--- a/prometheus/web/src/components/MyGrid.vue
+++ b/prometheus/web/src/components/MyGrid.vue
@@ -6,13 +6,13 @@
       <grid-item v-for="(item, indexVar) in layout" :key="indexVar" :h="item.h" :i="item.i" :static="item.static"
         :w="item.w" :x="item.x" :y="item.y" @resize="SizeAutoChange" @resized="SizeAutoChange">
         <div class="drag">
-          <span class="title">{{item.title}}</span>
+          <span class="title">{{ item.title }}</span>
         </div>
         <div class="noDrag">
-          <my-echarts v-if="item.isChart" :ref="el => { if (el) chart[indexVar] = el }" :options="item.option"
+          <my-echarts v-if="item.isChart" :ref="(el: any) => { if (el) chart[indexVar] = el }" :options="item.option"
             style="padding-top: 30px;">
           </my-echarts>
-          <span v-else class="noDrag-text">{{item.value}}</span>
+          <span v-else class="noDrag-text">{{ item.value }}</span>
         </div>
 
       </grid-item>
@@ -97,8 +97,8 @@ const layoutConfig = {
 
 .vue-grid-item {
   box-sizing: border-box;
-  background-color: rgb(20, 22, 25);
-  border: 1px solid rgb(32, 34, 38);
+  background-color: rgb(249, 251, 255);
+  border: 1px solid rgb(251, 252, 255);
   border-radius: 4px;
 
 
@@ -117,7 +117,7 @@ const layoutConfig = {
       width: 30%;
       margin: 0 auto;
       height: 100%;
-      color: rgb(187, 208, 217);
+      color: rgb(0, 0, 0);
       font-size: 16px;
       font-weight: bold;
 
diff --git a/prometheus/web/src/components/index.ts b/prometheus/web/src/components/index.ts
index e67ff625..7a6aa334 100644
--- a/prometheus/web/src/components/index.ts
+++ b/prometheus/web/src/components/index.ts
@@ -63,34 +63,58 @@ export const bar_opt = {
 export const line_opt = {
   color: e_colors,
   tooltip: {
+    show: true,
     trigger: 'axis',
-    position: [10, 60],
-    formatter: function (params: any) {
-      params = params[0];
-      return (
-        params.value[0] + ' ' +
-        params.value[1]
-      );
-    },
+    transitionDuration: 0.4,
+    backgroundColor: 'rgba(255,255,255,1)',
+    extraCssText: 'min-height:130px;',
+    formatter: () => { },
     axisPointer: {
       animation: false
     }
   },
   legend: {
     show: true,
-    orient: 'vertical',
+    orient: 'horizontal',
     right: 10,
-    top: 20,
+    top: 0,
     textStyle: {
       color: '#888'
     },
-    icon: 'roundRect',
+    icon: 'circle',
   },
+  dataZoom: [
+    {
+      show: true,
+      type: 'slider',
+      realtime: true,
+      start: 65,
+      end: 100,
+      height: 18,
+      showDetail: false,
+      backgroundColor: "#fff",
+      borderColor: "#DDE0E7",
+      brushSelect: false,
+      dataBackground: {
+        lineStyle: {
+          color: '#000'
+        }
+      },
+      handleSize: "90%",
+      // 长方形： path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z
+      // 圆形带横条：M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z
+      // 小圆形：path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z
+      handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", //icon图标
+      handleStyle: {
+        // color: '#B9C2CB',
+      }
+    }
+  ],
   grid: {
-    top: '4%',
+    top: '12%',
     left: '2%',
-    right: '20%',
-    bottom: '2%',
+    right: '2%',
+    bottom: '18%',
     containLabel: true
   },
   xAxis: {
@@ -104,7 +128,7 @@ export const line_opt = {
     splitLine: {
       show: true,
       lineStyle: {
-        color: ['#333']
+        color: ['#eee']
       }
     },
     min: 0,
@@ -121,7 +145,7 @@ export const line_opt = {
     z: 1,
     zlevel: 1,
     lineStyle: {
-      width: 1
+      width: 2
     },
     areaStyle: {
       opacity: 0.1,
@@ -134,32 +158,46 @@ export const gauge_opt = {
   series: [
     {
       type: 'gauge',
-      center: ['50%', '60%'],
+      center: ['50%', '70%'],
       radius: '110%',
-      startAngle: 200,
-      endAngle: -20,
+      startAngle: 180,
+      endAngle: 0,
       min: 0,
       max: 100,
       tooltip: {
 
       },
       progress: {
-        show: false,
+        show: true,
+        roundCap: true,
+        width: 10,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: '#2988f1' // 0% 处的颜色#6bccff
+            }, {
+              offset: 1, color: '#6bccff' // 100% 处的颜色
+            }],
+            global: false // 缺省为 false
+          }
+        }
       },
       pointer: {
-        show: true,
+        show: false,
         itemStyle: {
           color: 'inherit'
         }
       },
       axisLine: {
+        show: true,
+        roundCap: true,
         lineStyle: {
-          width: 6,
-          color: [
-            [0.3, '#67e0e3'],
-            [0.7, '#E6A23C'],
-            [1, '#fd666d']
-          ]
+          width: 10,
         }
       },
       axisTick: {
@@ -179,11 +217,11 @@ export const gauge_opt = {
       },
       detail: {
         valueAnimation: true,
-        offsetCenter: [0, '50%'],
+        offsetCenter: [0, 0],
         fontSize: 20,
         fontWeight: 'bolder',
         formatter: '{value}',
-        color: 'inherit'
+        color: '#222'
       },
       data: [
         {
diff --git a/prometheus/web/src/shims-vue.d.ts b/prometheus/web/src/shims-vue.d.ts
index 084ab4d7..90e85c54 100644
--- a/prometheus/web/src/shims-vue.d.ts
+++ b/prometheus/web/src/shims-vue.d.ts
@@ -14,4 +14,5 @@ declare module 'vue-grid-layout';
 declare module 'marked';
 declare module '@kangc/v-md-editor/lib/preview'
 declare module '@kangc/v-md-editor/lib/theme/vuepress.js'
+declare module 'element-plus/dist/locale/zh-cn.mjs'
 
diff --git a/prometheus/web/src/styles/main.scss b/prometheus/web/src/styles/main.scss
index 1f396059..1b299425 100644
--- a/prometheus/web/src/styles/main.scss
+++ b/prometheus/web/src/styles/main.scss
@@ -68,20 +68,17 @@ a {
 }
 // 头部设置
 .el-table thead {
-  background-color: rgb(32, 34, 38);
-  color: #26d0ce;
+  background-color: #f9f9f9;//rgb(32, 34, 38);
+  color: #222;
 }
 /* 表格内背景颜色 */
-.el-table th,
-.el-table tr,
-.el-table td {
-  background-color: transparent !important;
-  // border: 0 !important; //去除表格
+.el-table th {
+  background-color: #FAFAFA !important;
   text-align: center !important; // 文字居中
 }
 .el-table td {
-  color: #ccc;
-  //  border-bottom: 1px solid #444 !important; //去除表格
+  text-align: center !important;
+  color: #222;
 }
 
 /*去除底部灰条.el-table::before*/
diff --git a/prometheus/web/src/utils/datePicker.ts b/prometheus/web/src/utils/datePicker.ts
new file mode 100644
index 00000000..a58d5321
--- /dev/null
+++ b/prometheus/web/src/utils/datePicker.ts
@@ -0,0 +1,38 @@
+export let pickerOptions = [
+  {
+    text: '前1分钟',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 60 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: '前30分钟',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 60 * 30 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: '前1小时',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000)
+      return [start, end]
+    },
+  },
+  {
+    text: '前1天',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24)
+      return [start, end]
+    },
+  },
+]
\ No newline at end of file
diff --git a/prometheus/web/src/views/HomeView.vue b/prometheus/web/src/views/HomeView.vue
index d4ded2db..1825abbf 100644
--- a/prometheus/web/src/views/HomeView.vue
+++ b/prometheus/web/src/views/HomeView.vue
@@ -1,35 +1,32 @@
 <template>
-  <div style="width: 100%; height: 100%; overflow: auto; background-color: #0b0c0e;">
-    <el-select v-model="macIp" @change="handleChangeIp">
-      <el-option v-for="item in macIps" :key="item.labels.instance" :label="item.labels.instance"
-        :value="item.labels.instance"></el-option>
-    </el-select>
+  <div style="width: 100%; height: 100%; overflow: auto;">
+    <el-form ref="form" :inline="true" class="flex">
+      <el-form-item label="机器 IP:">
+        <!-- ip选择器 -->
+        <el-select v-model="macIp" @change="handleChangeIp">
+          <el-option v-for="item in macIps" :key="item.labels.instance" :label="item.labels.instance"
+            :value="item.labels.instance"></el-option>
+        </el-select></el-form-item>
+      <!-- 时间选择器 -->
+      <el-form-item label="监控时间:">
+        <el-config-provider :locale="zhCn">
+          <el-date-picker v-model="dateRange" type="datetimerange" :shortcuts="pickerOptions" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDate">
+          </el-date-picker></el-config-provider>
+      </el-form-item>
+    </el-form>
     <grid-layout :col-num="16" :is-draggable="grid.draggable" :is-resizable="grid.resizable" :layout="layout"
-      :row-height="30" :use-css-transforms="true" :vertical-compact="true" drag-allow-from=".drag"
-      drag-ignore-from=".noDrag">
+      :row-height="30" :use-css-transforms="true" :vertical-compact="true">
       <template v-for="(item, indexVar) in layout">
         <grid-item :key="indexVar" :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"
-          v-if="item.display">
+          drag-allow-from=".drag" drag-ignore-from=".noDrag" v-if="item.display">
           <div class="drag">
             <span class="drag-title">{{ item.title }}</span>
-            <!-- 下拉选择 -->
-            <!-- <el-dropdown class="drag-more">
-              <el-icon>
-                <ArrowDown />
-              </el-icon>
-              <template #dropdown>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item @click.native="handleEdit(item, indexVar)" :icon="Edit">Edit</el-dropdown-item>
-                  <el-dropdown-item @click.native="handleDelete(indexVar)" :icon="Delete">Delete
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown> -->
           </div>
           <div class="noDrag">
-            <my-echarts :ref="el => { if (el) chart[indexVar] = el }" :query="item.query"
-              style="width:100%;height:100%;">
+            <my-echarts :ref="(el: any) => { if (el) chart[indexVar] = el }" :query="item.query" :startTime="startTime"
+              :endTime="endTime" style="width:100%;height:100%;">
             </my-echarts>
           </div>
 
@@ -41,17 +38,23 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
-import { Delete, Plus, Edit, ArrowDown } from '@element-plus/icons-vue';
 import MyEcharts from '@/components/MyEcharts.vue';
-import { getMacIp, getPromRules } from '@/api/prometheus';
+import { getPromRules } from '@/api/prometheus';
 import { useMacStore } from '@/store/mac';
 import { useLayoutStore } from '@/store/charts';
+import { pickerOptions } from '../utils/datePicker';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 const layoutStore = useLayoutStore();
 let layout = reactive(layoutStore.layout_option);
 const macIp = ref('');
 const macIps = ref([] as any)
 const chart = ref([] as any);
+let dateRange = ref([new Date() as any - 2 * 60 * 60 * 1000, new Date() as any - 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 grid = reactive({
   draggable: true,
   resizable: true,
@@ -63,25 +66,11 @@ const dialog = reactive({
   type: '',
   display: false
 })
-// 关闭dialog 
-const handleCancle = (type?: string) => {
-  dialog.type = '';
-  dialog.title = '';
-  dialog.display = false;
-  if (type === 'success') {
-    getMacIp();
-  }
-}
 
-/* getMacIp().then(res => {
-  if (res.data.url != '') {
-    useMacStore().setMacIp('10.1.167.93:9100'); //res.data.reverse_dest.split('//')[1]
-  }
-})
-getMacIp(); */
 getPromRules().then(res => {
   if (res.data.status === 'success') {
     macIps.value = res.data.data && res.data.data.activeTargets;
+    macIp.value = macIps.value[0];
     // 默认显示数组第一个的监控数据
     useMacStore().setMacIp(macIps.value[0].labels.instance)
   }
@@ -94,6 +83,17 @@ const handleChangeIp = (ip: string) => {
   }
 }
 
+// 选择展示时间范围
+const changeDate = (value: number[]) => {
+  if (value) {
+    startTime.value = (new Date(value[0]) as any) / 1000;
+    endTime.value = (new Date(value[1]) as any) / 1000;
+  } else {
+    startTime.value = (new Date() as any) / 1000 - 60 * 60 * 2;
+    endTime.value = (new Date() as any) / 1000;
+  }
+}
+
 // echarts大小随grid改变
 const SizeAutoChange = (i: string, isChart?: boolean) => {
   if (isChart) {
@@ -101,22 +101,6 @@ const SizeAutoChange = (i: string, isChart?: boolean) => {
   }
 }
 
-// 新增echart
-const handleAdd = () => {
-  dialog.type = 'add';
-  dialog.title = '新增图表';
-  dialog.display = true;
-}
-
-// 编辑echart
-const handleEdit = (item: any, index: number) => {
-
-}
-// 删除echart
-const handleDelete = (index: number) => {
-  layout[index].display = false;
-}
-
 onMounted(() => {
   // 页面dom加载完成后初始化图表大小
   chart.value.forEach((item: any, index: number) => {
@@ -135,10 +119,10 @@ onMounted(() => {
 
   .vue-grid-item {
     box-sizing: border-box;
-    background-color: rgb(20, 22, 25);
-    border: 1px solid rgb(32, 34, 38);
+    background-color: #fff;
+    // border: 1px solid rgb(32, 34, 38);
     border-radius: 4px;
-
+    box-shadow: 0 1px 5px rgba(45, 47, 51, 0.1);
 
     .drag {
       width: 100%;
@@ -157,13 +141,12 @@ onMounted(() => {
         user-select: none;
         width: 88%;
         height: 100%;
-        color: rgb(187, 208, 217);
+        color: #303133; //rgb(187, 208, 217);
         font-size: 12px;
         font-weight: bold;
 
         &:hover {
-          color: #fff;
-          cursor: pointer;
+          cursor: move;
         }
       }
 
@@ -178,11 +161,9 @@ onMounted(() => {
       }
 
       &:hover {
-        background: rgba(32,
-            34,
-            38);
-
-
+        background: rgba(253,
+            186,
+            74, .6)
       }
     }
 
-- 
Gitee