feat：chart 比较功能实现

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -745,7 +745,6 @@ export default {
         }
         interVal = Math.ceil(interVal) * Math.pow(1024, pow)
       }
-      console.log(interVal)
       interVal = !isNaN(interVal) ? interVal : 1
       return interVal
     }

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -131,7 +131,7 @@
             <div class="float-right panel-calendar dialog-tool">
 
 <!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>-->
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
+              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="true" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
             </div>
 <!--            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
@@ -354,11 +354,13 @@ export default {
     mouseLeaveFullChart () {
       if (this.echartModalStore) {
         setTimeout(() => {
+          if (this.echartModalStore) {
             this.echartModalStore.setOption({
               toolbox: {
                 show: false
               }
             })
+          }
         }, 300)
       }
     },
@@ -569,6 +571,8 @@ export default {
       if (chartInfo.type === 4) { // line,bar
         this.chartType = 'line'
       }
+      const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+      const minusFlag = this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length
       let minTime = null
       let maxTime = null
       if (dataArg.length > 0 && dataArg[0].data &&
@@ -590,7 +594,7 @@ export default {
       const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
       const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
       let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-      let maxValue = maxValueCopies.maxValue
+      const maxValue = maxValueCopies.maxValue
       // let minValue = maxValueCopies.minValue
       if (chartInfo.unit && dataArg.length > 0) {
         // maxValue = dataArg[0].data[0][1]
@@ -739,6 +743,13 @@ export default {
                 str += bus.timeFormate(tData)
                 str += '</div>'
               }
+              if (i === params.length / 2 && tip.alias.indexOf('process_') !== -1) {
+                const value = item.data[0] - minusTime
+                const tData = new Date(value)
+                str += '<div style="margin-bottom: 5px;margin-top: 5px">'
+                str += bus.timeFormate(tData)
+                str += '</div>'
+              }
               let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(2)) : ''
               if (val === 0) {
                 val = Number(item.data[1]).toExponential(2)
@@ -1035,6 +1046,7 @@ export default {
         })
       } else if (chartSite === 'screen') { // 全屏显示
         // eslint-disable-next-line
+        console.log(legend)
         if (legend) {
           this.screenLegendList = []
           this.isGreyScreen = []
@@ -1092,7 +1104,7 @@ export default {
               const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
               const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
               self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
-              self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
+              // self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
               self.echartModalStore.off('finished')
             })
           }, 100)
@@ -1358,7 +1370,8 @@ export default {
       // this.$refs.calendarPanel.setCustomTime(this.searchTime);
       this.screenModal = true
       this.isGreyScreen = []
-
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      // this.$refs.pickTime.$refs.timerPick.setCustomTime(this.searchTime)
       this.seriesItemScreen = this.seriesItem
       // this.seriesItemScreen = this.seriesItem;
       /*
@@ -1401,7 +1414,7 @@ export default {
     dateChange (time) {
       this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
       this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-      this.echartModalStore.clear()
+      // this.echartModalStore.clear()
       this.showLegend = false
       this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
       if (this.showSetting) {
@@ -1430,6 +1443,7 @@ export default {
         }
         const step = bus.getStep(startTime, endTime)
         if (type === 'list') { // 普通模式,主控台使用
+          console.log(123)
           axiosArr = this.data.elements.map((ele) => {
             const filterItem = ele
             let query = encodeURIComponent(filterItem.expression)
@@ -1440,6 +1454,21 @@ export default {
             }
             return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
           })
+          console.log(this.$refs.pickTime.$refs.multipleTime.searchTime)
+          if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
+            startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+            endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+            this.data.elements.forEach((ele) => {
+              const filterItem = ele
+              let query = encodeURIComponent(filterItem.expression)
+              if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+                !this.chartInfo.param && (this.chartInfo.param = {})
+                this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+                query += '&nullType=' + this.chartInfo.param.nullType
+              }
+              axiosArr.push(this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
+            })
+          }
         } else if (type === 'dashboard') { // 概览模式,指标概览中使用
           // 概览模式,需要区分单独一个和多个
           if (this.stableFilter.chartCount === 'multiple') {
@@ -1460,6 +1489,7 @@ export default {
         }
         // 一个图表
         axios.all(axiosArr).then((res) => {
+          console.log(res)
           if (res.length > 0) {
             const series = []
             const legend = []
@@ -1540,21 +1570,26 @@ export default {
                           host += `${tag}="${queryItem.metric[tag]}",`
                         }
                       })
+                      const elements = this.data.elements[pos] || this.data.elements[pos - this.data.elements.length] // 处理添加对比时的legend
                       if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
                       if (queryItem.metric.__name__) {
                         host += '}'
                       }
                       if (!host || host === '') {
-                        host = this.data.elements[pos].expression
+                        host = elements.expression
                       }
-                      let alias = this.dealLegendAlias(host, this.data.elements[pos].legend)
+                      let alias = this.dealLegendAlias(host, elements.legend)
                       if (!alias || alias === '') {
                         alias = host
                       }
-                      legend.push({ name: host + '-' + this.data.elements[pos].id + '-' + innerPos, alias: alias })
+                      if (pos >= this.data.elements.length) {
+                        legend.push({ name: 'process_' + host + '-' + elements.id + '-' + innerPos, alias: 'process_' + alias })
+                      } else {
+                        legend.push({ name: host + '-' + elements.id + '-' + innerPos, alias: alias })
+                      }
                       // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
 
-                      seriesItem.theData.name = host + '-' + this.data.elements[pos].id + '-' + innerPos
+                      seriesItem.theData.name = host + '-' + elements.id + '-' + innerPos
                       seriesItem.metric_name = seriesItem.theData.name
                       // 将秒改为毫秒
                       // alert('table=='+JSON.stringify(queryItem))
@@ -1588,6 +1623,19 @@ export default {
               }
             })
             this.setColor(legend.length)
+            console.log(series)
+            const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+            console.log(minusTime)
+            if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) {
+              series.forEach((item, index) => {
+                if (index >= series.length / 2) {
+                  console.log(123123);
+                  series[index].data.forEach((item1, index1) => {
+                    item1[0] = item1[0] + minusTime
+                  })
+                }
+              })
+            }
             this.seriesItemScreen = series
             // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
             this.initChart(this.data, series, this.$refs.screenShowArea, 'screen', legend)

nezha-fronted/src/components/common/language/cn.js

@@ -211,7 +211,7 @@ const cn = {
             staticTip: '双大括号中的内容将会在asset页面被替换'
           },
           singleStat: {
-            label: 'SingleStat'
+            label: 'Single value'
           },
           pie: {
             label: '饼图'
@@ -297,6 +297,17 @@ const cn = {
       lastTwo: '最近2天',
       lastSevenDay: '最近7天',
       lastThirtyDay: '最近30天',
+      beforeFiveMin: '之前5分钟',
+      beforeFifteenMin: '之前15分钟',
+      beforeThirtyMin: '之前30分钟',
+      beforeOneHour: '之前1小时',
+      beforeThreeHour: '之前3小时',
+      beforeSixHour: '之前6小时',
+      beforeTwelveHour: '之前12小时',
+      beforeTwentyFourHour: '之前24小时',
+      beforeTwoDay: '之前2天',
+      beforeSevenDay: '之前7天',
+      beforeThirtyDay: '之前30天',
       refreshInterval: {
         never: '关闭',
         oneMinute: '1分钟',

nezha-fronted/src/components/common/language/en.js

@@ -211,7 +211,7 @@ const en = {
             label: 'Line Chart' // "曲线图"
           },
           bar: {
-            label: 'Histogram' // "柱状图"
+            label: 'Bar' // "柱状图"
           },
           table: {
             label: 'Table' // "表格"
@@ -224,7 +224,7 @@ const en = {
             staticTip: 'The content in the double curly braces will be replaced on the Asset page'
           },
           singleStat: {
-            label: 'SingleStat'
+            label: 'Single value'
           },
           pie: {
             label: 'Pie'
@@ -304,6 +304,17 @@ const en = {
       lastTwoDay: 'Last 2 days',
       lastSevenDay: 'Last 7 days',
       lastThirtyDay: 'Last 30 days',
+      beforeFiveMin: 'Before 5 minutes',
+      beforeFifteenMin: 'Before 15 minutes',
+      beforeThirtyMin: 'Before 30 minutes',
+      beforeOneHour: 'Before 1 hour',
+      beforeThreeHour: 'Before 3 hours',
+      beforeSixHour: 'Before 6 hours',
+      beforeTwelveHour: 'Before 12 hours',
+      beforeTwentyFourHour: 'Before 24 hours',
+      beforeTwoDay: 'Before 2 days',
+      beforeSevenDay: 'Before 7 days',
+      beforeThirtyDay: 'Before 30 days',
       refreshInterval: {
         never: 'Off', // '从不'
         oneMinute: '1 minute', // 1 minute

nezha-fronted/src/components/common/multipleTime.vue

@@ -0,0 +1,418 @@
+<style scoped lang="scss">
+  .loading-font{
+    color:#232f3e !important;
+  }
+  popper-z-index{
+    z-index: 3000 !important;
+  }
+  .calendar{
+  }
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
+    color: #fff;
+  }
+  .calendar-dropdown-title {
+    line-height:28px;
+    padding-left:5px;
+    margin-left:0px;
+    margin-top: 0px !important;
+    text-align:left;
+    border-radius:2px;
+    min-width:80px;
+    height:28px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+  }
+  .calendar-popover{
+    line-height:22px;
+    text-align:center;
+  }
+  .panel-time-picker-hidden{
+    width:0px !important;
+    padding:0px !important;
+    border:0px !important;
+   height: 0 !important;
+    overflow: hidden;
+  }
+  .time-picker-button{
+    padding: 0 1px !important;
+    height:24px !important;
+    margin-top:0px !important;
+  }
+
+  .time-picker-left-button{
+    margin-right: 4px;
+  }
+
+  .time-picker-right-button{
+    margin-left: 4px;
+  }
+  .calendar-popover-text {}
+</style>
+<style lang="scss">
+  .panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
+    left: 85% !important;
+  }
+  .panel-time-picker-popper[x-placement^=bottom] {
+  }
+
+  .panel-time-picker-popper .el-date-table td.today span {
+    color: #232f3e !important;
+  }
+
+  .panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
+    display:none;
+  }
+
+  .dropdown--suffix {
+    padding: 0 8px;
+    color: #aaa;
+  }
+</style>
+<template>
+  <div class="calendar top-tools" id="panel-calender">
+    <el-date-picker prefix-icon=" " size="mini" ref="calendar"
+                    format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
+                    popper-class="panel-time-picker-popper"
+                    align="right">
+    </el-date-picker>
+    <!--
+    <button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
+            class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
+      <i style="font-size: 12px" class="el-icon-arrow-right"></i>
+    </button>-->
+    <el-dropdown @command="timeChange" @visible-change="popoverClick"   class="calendar-dropdown-title" ref="timePickerDropdown" trigger="click">
+      <el-popover
+        placement="bottom-end"
+        min-width="120px"
+        :visible-arrow="false"
+        :disabled="isPopoverDisabled"
+        trigger="hover"
+        popper-class="popper-z-index"
+        id="panel-calender-popover">
+        <template v-if="this.searchTime&&this.searchTime.length>1">
+          <el-row  :gutter="10" class="calendar-popover">
+            <el-col :span="24" class="calendar-popover-text">{{searchTime[0]}}</el-col>
+          </el-row>
+          <el-row  :gutter="10" class="calendar-popover">
+            <el-col :span="24" class="calendar-popover-text">{{$t('dashboard.panel.to')}}</el-col>
+          </el-row>
+          <el-row  :gutter="10" class="calendar-popover">
+            <el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
+          </el-row>
+        </template>
+        <template v-else>
+          <div style="text-align: center;width: 100%;color: #909399;font-family: NotoSans !important;font-size: 12px !important;">{{$t("dashboard.panel.noDate")}}</div>
+        </template>
+        <div  class="el-dropdown-link" slot="reference">
+          <i class="nz-icon nz-icon-time" style="width:20px;"></i>
+          <span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
+          <span class="dropdown--suffix">
+            <i class="el-icon-arrow-down"></i>
+          </span>
+        </div>
+      </el-popover>
+      <el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" slot="dropdown">
+        <!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>  -->
+        <template v-for="(item, index) in timeData" >
+          <el-dropdown-item v-if="item.id !== 12" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
+            {{item.text}}
+          </el-dropdown-item>
+        </template>
+
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+import bus from '../../libs/bus'
+
+export default {
+  name: 'multipleTime',
+  props: {
+    stepSearchTime: {},
+    defaultPick: Number,
+    showEmpty: { default: false, type: Boolean }
+  },
+  components: {},
+  data () {
+    return {
+      startTime: '',
+      searchTime: [],
+      showSelect: false,
+      step: '',
+      showTime: {
+        id: 4,
+        text: this.$t('dashboard.panel.beforeOneHour')
+      },
+      timeData: [
+        {
+          id: 0,
+          text: this.$t('dashboard.panel.customTimeRange')
+        },
+        {
+          id: 12,
+          text: this.$t('dashboard.panel.noDate')
+
+        },
+        {
+          id: 1,
+          text: this.$t('dashboard.panel.beforeFiveMin'),
+          type: 'minute',
+          value: 5
+        },
+        {
+          id: 2,
+          text: this.$t('dashboard.panel.beforeFifteenMin'),
+          type: 'minute',
+          value: 15
+        },
+        {
+          id: 3,
+          text: this.$t('dashboard.panel.beforeThirtyMin'),
+          type: 'minute',
+          value: 30
+        },
+        {
+          id: 4,
+          text: this.$t('dashboard.panel.beforeOneHour'),
+          type: 'hour',
+          value: 1
+        },
+        {
+          id: 5,
+          text: this.$t('dashboard.panel.beforeThreeHour'),
+          type: 'hour',
+          value: 3
+        },
+        {
+          id: 6,
+          text: this.$t('dashboard.panel.beforeSixHour'),
+          type: 'hour',
+          value: 6
+        },
+        {
+          id: 7,
+          text: this.$t('dashboard.panel.beforeTwelveHour'),
+          type: 'hour',
+          value: 12
+        },
+        {
+          id: 8,
+          text: this.$t('dashboard.panel.beforeTwentyFourHour'),
+          type: 'hour',
+          value: 24
+        },
+        {
+          id: 9,
+          text: this.$t('dashboard.panel.beforeTwoDay'),
+          type: 'date',
+          value: 2
+        },
+        {
+          id: 10,
+          text: this.$t('dashboard.panel.beforeSevenDay'),
+          type: 'date',
+          value: 7
+        },
+        {
+          id: 11,
+          text: this.$t('dashboard.panel.beforeThirtyDay'),
+          type: 'date',
+          value: 30
+        }
+      ],
+      nowTimeType: {
+        id: 4,
+        text: this.$t('dashboard.panel.beforeOneHour'),
+        type: 'hour',
+        value: 1
+      },
+      isPopoverDisabled: false,
+      isCustom: false,
+      valueArr: []
+    }
+  },
+  watch: {
+    stepSearchTime: {
+      immediate: true,
+      handler (n, o) {
+        if (n && this.searchTime[0]) {
+          if (this.showTime.value) {
+            this.setSearchTime(this.showTime.type, this.showTime.value)
+          } else {
+            const startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+            const endTime = bus.timeFormate(new Date(this.searchTime[0]).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss')
+            this.$set(this.searchTime, 0, startTime)
+            this.$set(this.searchTime, 1, endTime)
+          }
+        }
+      }
+    },
+    defaultPick: {
+      immediate: true,
+      handler (n, o) {
+        if (n && Number.isInteger(n)) {
+          const showTime = this.timeData.find(item => item.id == n)
+          if (showTime) {
+            this.showTime = Object.assign({}, showTime)
+          }
+          if (this.showEmpty && this.defaultPick === 12) {
+            this.searchTime = []
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    console.log(this.searchTime, 'this.searchTime')
+  },
+  methods: {
+    dateChange (val) {
+      const startTime = bus.timeFormate(val, 'yyyy-MM-dd hh:mm:ss')
+      const endTime = bus.timeFormate(new Date(val).getTime() + new Date(this.stepSearchTime[1]).getTime() - new Date(this.stepSearchTime[0]).getTime(), 'yyyy-MM-dd hh:mm:ss')
+      this.$set(this.searchTime, 0, startTime)
+      this.$set(this.searchTime, 1, endTime)
+
+      // let timerPicker = document.querySelector('#timePickerContent');
+      // timerPicker.innerText = this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1];
+      this.$set(this.showTime, 'id', 0)
+      this.$set(this.showTime, 'text', this.searchTime[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + this.searchTime[1])
+      this.$set(this.showTime, 'type', '')
+      this.$set(this.showTime, 'value', '')
+      /*
+            let tipElementList = document.getElementsByClassName('calendar-popover-text');
+            if(tipElementList && tipElementList.length===3){
+              console.log('-0-0-0',tipElementList);
+              tipElementList[0].innerHTML = this.searchTime[0];
+              tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
+              tipElementList[2].innerHTML = this.searchTime[1];
+              console.log('-0-0-2',tipElementList);
+            } */
+      this.$emit('change', this.searchTime)
+    },
+    setCustomTime (timeGroup) {
+      if (timeGroup.length === 2) {
+        this.$set(this.searchTime, 0, timeGroup[0])
+        this.$set(this.searchTime, 1, timeGroup[1])
+
+        this.nowTimeType = {
+          id: 4,
+          text: this.$t('dashboard.panel.beforeOneHour'),
+          type: 'hour',
+          value: 1
+        }
+        this.$set(this.showTime, 'id', this.nowTimeType.id)
+        this.$set(this.showTime, 'value', this.nowTimeType.value)
+        this.$set(this.showTime, 'type', this.nowTimeType.type)
+        this.$set(this.showTime, 'text', this.nowTimeType.text)
+      }
+    },
+    // left(){},
+    // right(){},
+    timeChange (val, from) {
+      this.nowTimeType = val
+      this.$set(this.showTime, 'id', val.id)
+      this.$set(this.showTime, 'text', val.text)
+      this.$set(this.showTime, 'value', val.value)
+      this.$set(this.showTime, 'type', val.type)
+      if (!val) {
+        this.isCustom = false
+        return false
+      } else {
+        this.setSearchTime(val.type, val.value)
+        if (this.searchTime[0]) {
+          this.startTime = this.searchTime[0]
+        }
+        // let timerPicker = document.querySelector('#timePickerContent');
+        // timerPicker.innerText = val.text;
+        /*
+        let tipElementList = document.getElementsByClassName('calendar-popover-text');
+        if(tipElementList && tipElementList.length===3){
+          tipElementList[0].innerHTML = this.searchTime[0];
+          tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
+          tipElementList[2].innerHTML = this.searchTime[1];
+        } */
+
+        const id = val.id
+        if (id === 0) { // custom
+          if (from === 'chart') {
+            this.isCustom = false
+            this.$emit('change', this.searchTime)
+          } else {
+            console.log(123123)
+            this.isCustom = true
+            this.$refs.calendar.focus()
+          }
+        } else {
+          this.isCustom = false
+          if (this.showEmpty && id === 12) {
+            this.searchTime = []
+          }
+          this.$emit('change', this.searchTime)
+        }
+      }
+    },
+    getCurrentTime () {
+      let timeTypeId = this.showTime.id
+      if (timeTypeId === 0) {
+        return this.searchTime
+      } else {
+        if (!timeTypeId) { timeTypeId = 4 }
+        const currentTime = this.timeData.find(item => item.id === timeTypeId)
+        this.setSearchTime(currentTime.type, currentTime.value)
+        return this.searchTime
+      }
+    },
+    setSearchTime (type, val) {
+      console.log(132, this.stepSearchTime ,val,new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60)
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+    },
+    setCostomTime: function (costomTime) {
+      this.searchTime = Object.assign(costomTime)
+      const val = Object.assign(this.timeData[0])
+      this.$set(this.showTime, 'id', val.id)
+      this.$set(this.showTime, 'text', val.text)
+      this.$set(this.showTime, 'type', val.type)
+      this.$set(this.showTime, 'value', val.value)
+    },
+    popoverClick (val) {
+      if (val) {
+        this.isPopoverDisabled = true
+      } else {
+        this.isPopoverDisabled = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bR4004{
+  border-radius: 4px 0 0 4px ;
+}
+</style>

nezha-fronted/src/components/common/pickTime.vue

@@ -2,6 +2,7 @@
   <div class="interval-refresh ">
     <time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty" v-model="this.searchTime"></time-picker>
     <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
+    <multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
       <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" style="height: 28px;line-height: 28px;vertical-align: middle;" v-show="useRefresh">
         <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc" :id="id+'-refresh'">
           <i style="font-size: 14px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
@@ -24,12 +25,14 @@
 <script>
 import bus from '../../libs/bus'
 import timePicker from './timePicker'
+import multipleTime from './multipleTime'
 import chartUnit from './chartUnit'
 export default {
   name: 'intervalRefresh',
   components: {
     'time-picker': timePicker,
-    'chart-unit': chartUnit
+    'chart-unit': chartUnit,
+    multipleTime
   },
   model: {
     event: 'change',
@@ -56,6 +59,10 @@ export default {
       type: Boolean,
       default: true
     },
+    showMultiple: {
+      type: Boolean,
+      default: false
+    },
     defaultPick: Number,
     showEmpty: { type: Boolean, default: false },
     id: String
@@ -118,6 +125,7 @@ export default {
       return [startTime, endTime]
     },
     dateChange (time) {
+      console.log(time)
       this.searchTime = time
       this.$emit('change', this.searchTime)
       this.refreshDataFunc()
@@ -162,4 +170,7 @@ export default {
   .sub-top-tools .interval-refresh {
     margin-top: -1px;
   }
+  .multiple-time{
+    margin-right: 10px;
+  }
 </style>

nezha-fronted/src/components/common/timePicker.vue

@@ -61,7 +61,7 @@
   }
 
   .panel-time-picker-popper .el-date-table td.today span {
-    color: #FFF !important;
+    color: #232f3e !important;
   }
 
   .panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
@@ -155,12 +155,13 @@ export default {
       timeData: [
         {
           id: 0,
-          text: this.$t('dashboard.panel.customTimeRange')
+          text: this.$t('dashboard.panel.customTimeRange'),
+          value: -1
         },
         {
           id: 12,
-          text: this.$t('dashboard.panel.noDate')
+          text: this.$t('dashboard.panel.noDate'),
-
+          value: 0
         },
         {
           id: 1,
@@ -260,15 +261,36 @@ export default {
       this.$emit('change', this.searchTime)
     },
     setCustomTime (timeGroup) {
-      if (timeGroup.length === 2) {
+      console.log(timeGroup)
+      if (!timeGroup[2] || timeGroup.length === 2) {
         this.$set(this.searchTime, 0, timeGroup[0])
         this.$set(this.searchTime, 1, timeGroup[1])
 
         this.nowTimeType = {
-          id: 4,
+          id: 0,
-          text: this.$t('dashboard.panel.lastOneHour'),
+          text: this.$t('dashboard.panel.customTimeRange')
-          type: 'hour',
+        }
-          value: 1
+        this.$set(this.showTime, 'id', this.nowTimeType.id)
+        this.$set(this.showTime, 'text', this.nowTimeType.text)
+      } else if (timeGroup[2]) {
+        const type = timeGroup[2].substr(timeGroup[2].length - 1, 1)
+        const value = timeGroup[2].substr(0, timeGroup[2].length - 1)
+        if (value == 30 && type === 'd') {
+          this.showTime = this.nowTimeType = {
+            id: 11,
+            text: this.$t('dashboard.panel.lastThirtyDay'),
+            type: 'date',
+            value: 30
+          }
+        } else if (value == 30 && type === 'm') {
+          this.showTime = this.nowTimeType = {
+            id: 3,
+            text: this.$t('dashboard.panel.lastThirtyMin'),
+            type: 'minute',
+            value: 30
+          }
+        } else {
+          this.showTime = this.nowTimeType = this.timeData.find(item => item.value == value)
         }
         this.$set(this.showTime, 'id', this.nowTimeType.id)
         this.$set(this.showTime, 'text', this.nowTimeType.text)
@@ -277,6 +299,7 @@ export default {
     // left(){},
     // right(){},
     timeChange (val, from) {
+      console.log(val, from)
       this.nowTimeType = val
       this.$set(this.showTime, 'id', val.id)
       this.$set(this.showTime, 'text', val.text)
@@ -305,6 +328,7 @@ export default {
             this.$refs.calendar.focus()
           }
         } else {
+          console.log(123123123)
           this.isCustom = false
           if (this.showEmpty && id === 12) {
             this.searchTime = []

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -190,7 +190,8 @@ export default {
         panelId: 0,
         start_time: '',
         end_time: '',
-        searchName: ''
+        searchName: '',
+        id: 4
       },
       panelId: 0,
       filterPanel: '',
@@ -273,7 +274,7 @@ export default {
     refreshTime (st, et) {
       const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
       const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
-      this.searchTime = [startTime, endTime]
+      this.searchTime = [startTime, endTime, '']
     },
     panelReloadForDel: function () {
       if (this.showPanel.id === this.panel.id) {
@@ -387,14 +388,16 @@ export default {
     // 选择日期变化
     dateChange (val) {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+      console.log(this.searchTime)
       this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
       this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
-      this.filter.panelId = this.showPanel.id
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.value = this.searchTime[2]
       this.getTableData()
       this.getData(this.filter)
     },
-    setSearchTime (type, val) { // 设置searchTime
+    setSearchTime (type, val, nowTimeType) { // 设置searchTime
       if (type === 'minute') {
         const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
         const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')