perf:pickTime组件整合timePicker 组件

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -159,7 +159,7 @@
       <div slot="title">
         {{$t("project.endpoint.dialogTitle")}}
         <div class="float-right panel-calendar dialog-tool" style="display: flex">
-          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime"></pick-time>
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;"></pick-time>
            <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
         </div>
       </div>

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

@@ -1,19 +1,8 @@
 <template>
-  <div class="interval-refresh">
-    <el-date-picker size="mini" ref="calendar"
-                    format="yyyy/MM/dd HH:mm:ss"
-                    @change="dateChange"
-                    v-model="searchTime"
-                    type="datetimerange"
-                    :picker-options="pickerOptions"
-                    :range-separator="$t('dashboard.panel.to')"
-                    :start-placeholder="$t('dashboard.panel.startTime')"
-                    :end-placeholder="$t('dashboard.panel.endTime')"
-                    style="margin-right: 20px"
-                    align="right">
-    </el-date-picker>
-    <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh">
-      <button style="border-right: 1px solid rgba(162,162,162,0.50);height: 100%" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
+  <div class="interval-refresh ">
+    <time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
+      <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">
           <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
           <span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
         </button>
@@ -23,7 +12,7 @@
               {{i.name}}
             </li>
           </ul>
-        <button type="button" style="border-radius: 0 4px 4px 0;height: 100%" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
+          <button type="button" style="border-radius: 0 4px 4px 0;" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
             <span class="nz-btn nz-btn-text">{{interval.value != -1?interval.name:''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
           </button>
         </el-popover>
@@ -33,9 +22,12 @@
 
 <script>
   import bus from "../../libs/bus";
-
+  import timePicker from "./timePicker";
   export default {
     name: "intervalRefresh",
+    components:{
+      'time-picker':timePicker,
+    },
     model:{
       event:'change',
       prop:'timeRange'
@@ -57,88 +49,6 @@
     data(){
       return{
         searchTime:[],
-        pickerOptions: {
-          shortcuts: [
-            {
-              text: this.$t("dashboard.panel.recOne"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setHours(start.getHours() - 1);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recFour"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setHours(start.getHours() - 4);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recOneDay"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 1);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.yesterday"),
-              onClick(picker) {
-                const start = new Date();
-                const end = new Date();
-                start.setDate(start.getDate() - 1);
-                start.setHours(0);
-                start.setMinutes(0);
-                start.setSeconds(0);
-                end.setDate(end.getDate() - 1);
-                end.setHours(23);
-                end.setMinutes(59);
-                end.setSeconds(59);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recSevenDay"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 7);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.recOneMonth"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(start.getDate() - 30);
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.curMonth"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(1);
-                start.setHours(0);
-                start.setMinutes(0);
-                start.setSeconds(0)
-                picker.$emit('pick', [start, end]);
-              }
-            }, {
-              text: this.$t("dashboard.panel.lastMonth"),
-              onClick(picker) {
-                const end = new Date();
-                const start = new Date();
-                start.setDate(1);
-                start.setMonth(start.getMonth() - 1);
-                end.setDate(0);
-                start.setStart();
-                end.setEnd();
-                picker.$emit('pick', [start, end]);
-              }
-            }],
-        },
         visible: false,
         intervalTimer: null,
         intervalList: [{
@@ -171,12 +81,12 @@
       selectInterval(val) {
         this.visible = false;
         clearInterval(this.intervalTimer);
-        if (val && val.value != -1) {
         this.interval = val;
+        if (val && val.value != -1) {
           const start = new Date(this.searchTime[1]);
           const now = new Date();
           const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
-          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
+          if (interval >= 60) { //如果结束时间到现在超过30s，则
             this.getIntervalData(interval);
           }
           this.intervalTimer = setInterval(() => {
@@ -191,6 +101,8 @@
         end.setSeconds(end.getSeconds() + interval);
 
         this.searchTime = this.timeFormate([start,end])
+        this.$refs.timePicker.setCostomTime(this.searchTime);
+        this.$emit('change',this.searchTime)
         //刷新数据
         this.refreshDataFunc();
       },
@@ -200,8 +112,8 @@
         return [startTime, endTime];
       },
       dateChange(time) {
-        let timeRange=this.timeFormate(time);
-        this.$emit('change',timeRange)
+        this.searchTime=time;
+        this.$emit('change',this.searchTime)
         this.refreshDataFunc();
       },
     }
@@ -211,6 +123,10 @@
 <style scoped lang="scss">
 .interval-refresh{
   display: flex;
+  align-items: center;
+}
+.interval-refresh .time-picker{
+  margin-right: 20px;
 }
 .popover_ul{
   text-align: center;

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

@@ -67,7 +67,7 @@
 <template>
   <div class="calendar top-tools" id="panel-calender">
     <el-date-picker prefix-icon=" " class="panel-time-picker-hidden hidden" size="mini" ref="calendar"
-                    format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
+                    format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="searchTime" type="datetimerange"
                     popper-class="panel-time-picker-popper"
                     :range-separator="$t('dashboard.panel.to')"
                     :start-placeholder="$t('dashboard.panel.startTime')"
@@ -290,6 +290,12 @@ export default {
         this.$set(this.searchTime, 1, endTime);
       }
     },
+    setCostomTime:function(costomTime){
+      this.searchTime=Object.assign(costomTime);
+      let val=Object.assign(this.timeData[0]);
+      this.$set(this.showTime, 'id', val.id);
+      this.$set(this.showTime, 'text', val.text);
+    },
     popoverClick(val){
       if(val){
         this.isPopoverDisabled = true;

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

@@ -13,14 +13,16 @@
         <div class="main-list main-and-sub-transition">
             <!-- 顶部工具栏 -->
             <div class="top-tools" style="z-index: 1">
+              <div class="top-tool-main-right">
+                <pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
+                  <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
+                </pick-time>
                 <button :disabled="saveDisabled" type="button" @click="saveChart"
                         class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
                         :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
                   {{$t('dashboard.metric.saveChart')}}
                 </button>
-              <pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
-                <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
-              </pick-time>
+              </div>
             </div>
             <div style="height: calc(100% - 50px);width: 100%;" >
               <el-scrollbar style="height: 100%" class="el-scrollbar-large">
@@ -40,7 +42,7 @@
               </div>
               <div class="chart-view right-margin" v-show="!showIntroduce"
                    :class="{'shrink-view':!chartVisible || !defaultChartVisible}">
-                <div class="view-title" @click="changeChartVisible"><i class="el-icon-caret-top"></i>&nbsp;graph</div>
+                <div class="view-title" @click="changeChartVisible" style="float: left"><i class="el-icon-caret-top" ></i>&nbsp;graph</div>
                 <div class="chart-room">
                   <chart ref="exploreChart"></chart>
                 </div>
@@ -210,7 +212,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         promqlCount: 1,
         promqlKeys: [],
         expressions: [''],
-        filterTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+        filterTime: [
+          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
+          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
+        ],
         showIntroduce: true,
         defaultChartVisible: true,
         defaultTableVisible: true,