From cf933dbbd4dbc313e5c1480d33616595966c127e Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 20 Oct 2020 17:03:15 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E7=82=B9=E5=87=BB=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=9C=AA=E6=94=B9=E5=8F=98=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/panelTab.vue        | 28 +++++++++++++++++--
 .../src/components/common/pickTime.vue        |  2 +-
 .../src/components/common/timePicker.vue      |  9 +++++-
 .../page/dashboard/explore/explore.vue        | 28 +++++++++++++++++--
 .../src/components/page/dashboard/panel.vue   | 26 ++++++++++++++++-
 5 files changed, 86 insertions(+), 7 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index dd804eb0a..0af3a670f 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -27,7 +27,7 @@
             <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" @click="focusInput" style="float: right"></i>
           </el-input>
         </div>
-        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'"></pick-time>
+        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'" ref="pickTime"></pick-time>
         <export-excel
           export-file-name="chart"
           export-url="/panel/export"
@@ -67,7 +67,7 @@
           </el-input>
         </div>
 
-        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
+        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
         <button @click="addChart" :title="$t('overall.createChart')"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-create-square nz-icon"></i>
@@ -309,12 +309,36 @@
       // 选择日期变化
       dateChange(val) {
         // this.searchTime = [...val];
+        let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
+        this.setSearchTime(nowTimeType.type,nowTimeType.value);
         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.getData(this.filter);
       },
       /*时间条件查询--end*/
+      setSearchTime(type,val){//设置searchTime
+        if(type==='minute'){
+          let 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');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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'){
+          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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'){
+          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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");
+        }
+        this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
+      },
       //公用操作
       getTableData(linkId) {
         if (this.from == "alertRule" || this.from == "endpoint") {
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 321b29bc6..3e9531401 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="interval-refresh ">
-    <time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty"></time-picker>
+    <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>
       <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
         <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">
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 2230e3e63..1d08cd3f5 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -223,6 +223,12 @@ export default {
           value:30,
         }
       ],
+      nowTimeType:{
+        id:4,
+        text:this.$t("dashboard.panel.lastOneHour"),
+        type:'hour',
+        value:1,
+      },
     };
   },
   methods: {
@@ -260,6 +266,7 @@ export default {
     //left(){},
     //right(){},
     timeChange(val) {
+      this.nowTimeType=val;
       this.$set(this.showTime, 'id', val.id);
       this.$set(this.showTime, 'text', val.text);
       if (!val) {
@@ -354,7 +361,7 @@ export default {
           }
         }
       }
-    }
+    },
   },
   mounted: function () {
     /*
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index 47b39c8b0..68f581022 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -4,7 +4,7 @@
         <!-- 顶部工具栏 -->
         <div class="top-tools" style="z-index: 1">
           <div class="top-tool-main-right">
-            <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
+            <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange" ref="pickTime">
               <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
             </pick-time>
             <button :disabled="saveDisabled" type="button" @click="saveChart"
@@ -424,13 +424,37 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
           }, 200)
       },
       expressionChange: function () {
-        //console.log(this.filterTime)
+        let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
+        console.log(this.filterTime,nowTimeType);
+        this.setSearchTime(nowTimeType.type,nowTimeType.value);
         if (this.expressions && this.expressions.length >= 1) {
           this.queryTableData();
           this.queryChartData()
           this.storeHistory();
         }
       },
+      setSearchTime(type,val){//设置searchTime
+        if(type==='minute'){
+          let 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');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+          this.$set(this.filterTime, 0, startTime);
+          this.$set(this.filterTime, 1, endTime);
+          this.$set(this.filterTime, 2, val + "m");
+        }else if(type==='hour'){
+          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+          this.$set(this.filterTime, 0, startTime);
+          this.$set(this.filterTime, 1, endTime);
+          this.$set(this.filterTime, 2, val + "h");
+        }else if(type==='date'){
+          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
+          this.$set(this.filterTime, 0, startTime);
+          this.$set(this.filterTime, 1, endTime);
+          this.$set(this.filterTime, 2, val + "d");
+        }
+        this.$refs.pickTime.$refs.timePicker.searchTime=this.filterTime;
+      },
       storeHistory:function(){
         let expire=24;
         let historyJson=localStorage.getItem(this.historyParam.key);
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index d92a41252..a0e837d22 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -57,7 +57,7 @@
             </el-input>
           </div>
 
-          <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
+          <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
           <export-excel
             export-file-name="chart"
             export-url="/panel/export"
@@ -384,11 +384,35 @@
       /*时间条件查询--start*/
       // 选择日期变化
       dateChange(val) {
+        let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
+        this.setSearchTime(nowTimeType.type,nowTimeType.value);
         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.getData(this.filter);
       },
+      setSearchTime(type,val){//设置searchTime
+        if(type==='minute'){
+          let 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');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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'){
+          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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'){
+          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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");
+        }
+        this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
+      },
       /*时间条件查询--end*/
       //公用操作
       jumpTo(data, id) {