feat:新功能

1 panel图表错误提示信息参考grafana：全屏，预览部分
2 panel时间选择：custom部分（panel列表，全屏，预览）

nezha-fronted/src/components/charts/chart-list.vue

@@ -587,6 +587,7 @@ export default {
               let errorMsg = "";
               res.forEach((response, innerPos) => {
                 if (response.status === 'success') {
+                  errorMsg = "";
                   if (response.data.result) {
                     // console.log(response.data.result)
                     // 循环处理每个elements下获取的数据列

nezha-fronted/src/components/charts/chart-table.scss

@@ -78,46 +78,6 @@
     text-align: center;
     width: 100%;
     line-height: 28px;
-    .panel-info-corner {
-      color: #767980;
-      cursor: pointer;
-      position: absolute;
-      display: none;
-      left: 0;
-      width: 28px;
-      height: 28px;
-      z-index: 2;
-      top: 0;
-    }
-    .panel-info-corner--error {
-      display: block;
-      color: #fff;
-    }
-    .panel-info-corner .fa {
-      position: relative;
-      top: -6px;
-      left: -6px;
-      font-size: 75%;
-      z-index: 3;
-    }
-    .fa {
-      display: inline-block;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .panel-info-corner--error .panel-info-corner-inner {
-      border-left: 28px solid #e02f44;
-      border-right: none;
-      border-bottom: 28px solid rgba(0,0,0,0);
-    }
-    .panel-info-corner-inner {
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
     .nz-chart-top{
       width:100%;
     }

nezha-fronted/src/components/charts/chart-table.vue

@@ -20,7 +20,7 @@
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
-            close-delay="10"
+            :close-delay=10
             placement="top-start"
             trigger="hover"
             popper-class="chart-error-popper">
@@ -72,8 +72,10 @@
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
               <div class="float-right panel-calendar dialog-tool">
+                <!--
                 <el-date-picker prefix-icon=" " size="mini" class="nz-dashboard-picker" ref="calendar" format="yyyy/MM/dd HH:mm" @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')" align="right">
-                </el-date-picker>
+                </el-date-picker>-->
+                <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
                 <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
               </div>
             </div>
@@ -112,11 +114,13 @@ import bus from '../../libs/bus';
 import {Loading} from 'element-ui';
 import chartDataFormat from './chartDataFormat'
 import loading from "../common/loading";
+import timePicker from '../common/timePicker'
 
 export default {
     name: 'chartTable',
   components: {
     'loading': loading,
+    'time-picker':timePicker
   },
     props: {
         // 看板id
@@ -216,7 +220,7 @@ export default {
             }],
             searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
             oldSearchTime: [],
-            pickerOptions: {
+            /*pickerOptions: {
                 shortcuts: [{
                     text: this.$t("dashboard.panel.recOne"),
                     onClick(picker) {
@@ -295,7 +299,7 @@ export default {
                         picker.$emit('pick', [start, end]);
                     }
                 }]
-            },
+            },*/
         };
     },
     created() {
@@ -543,6 +547,7 @@ export default {
             //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.showTable = false;
+            this.searchTime = [...time];
             this.seriesItemScreen = [];
             for(let i=0;i<8;i++){
               this.seriesItemScreen.push({//表格数据
@@ -568,8 +573,12 @@ export default {
             //this.searchTime = this.oldSearchTime;
           //alert(JSON.stringify(this.oldSearchTime));
             this.searchTime = [];
-            this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
+            //this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
-            this.searchTime[1] = this.oldSearchTime[1];
+            //this.searchTime[1] = this.oldSearchTime[1];
+            this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+            this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+            this.$refs.calendarPanel.setCustomTime(this.searchTime);
+
             this.seriesItemScreen = this.seriesItem;
             this.screenModal = true;
             //this.startLoading('screen');

nezha-fronted/src/components/charts/chartPreview.vue

@@ -28,9 +28,24 @@
                :modal-append-to-body='false'
                @close="handleClose"
                @opened="initDialog">
+      <el-popover
+        v-if="isError"
+        placement="top-start"
+        :close-delay=10
+        trigger="hover"
+        popper-class="chart-error-popper">
+        <div >{{errorContent}}</div>
+        <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa-model" ></i>
+              <span class="panel-info-corner-inner"></span>
+          </span>
+      </el-popover>
       <div slot="title">
         <span class="nz-dialog-title">{{chart.title}}</span>
         <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url'">
+
+          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
+          <!--
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
@@ -41,7 +56,7 @@
                           :start-placeholder="$t('dashboard.panel.startTime')"
                           :end-placeholder="$t('dashboard.panel.endTime')"
                           align="right">
-          </el-date-picker>
+          </el-date-picker>-->
         </div>
       </div>
 
@@ -96,11 +111,13 @@
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
+  import timePicker from '../common/timePicker'
 
   export default {
     name: 'chartPreview',
     components: {
       'loading': loading,
+      'time-picker':timePicker
     },
     props: {
       panelId:Number,
@@ -111,6 +128,8 @@
         //data: {}, // 该图表信息,chartItem
         dailogWidth:'80%',
         //seriesItem: [], // 保存信息
+        isError:false,
+        errorContent:'',
         seriesItemScreen:[],
         pageSizes:[50,100,200],
         screenPageObj:{
@@ -149,13 +168,17 @@
         showLegend:true,
         tableShow:true,
         urlShow:true,
-        searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
+        searchTime: [
+          new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
+          new Date(bus.computeTimezone(new Date().getTime()))
+        ],
         //oldSearchTime:[],
         minHeight:200,
         chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
         titleHeight:50,
         legendHeight:80,
         //oldChartBoxCss:'',
+        /*
         pickerOptions: {
           shortcuts: [
             {
@@ -236,7 +259,7 @@
                 picker.$emit('pick', [start, end]);
               }
             }]
-        },
+        },*/
       };
     },
     computed: {
@@ -245,7 +268,9 @@
     methods: {
       // 全屏查看
       show(chartInfo) {
-        this.searchTime = [new Date().setHours(new Date().getHours()-1),new Date()];
+        this.isError = false;
+        this.searchTime = [new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
+          new Date(bus.computeTimezone(new Date().getTime()))];
         this.chart=chartInfo;
 
         let chartType= chartInfo.type;
@@ -388,6 +413,8 @@ console.log('=======',this.chart);
                 };
                 res.forEach((response, innerPos) => {
                   if (response.status === 'success') {
+                    this.isError = false;
+                    this.errorContent = "";
                     if (response.data.result) {
                       // console.log(response.data.result)
                       // 循环处理每个elements下获取的数据列
@@ -472,12 +499,14 @@ console.log('=======',this.chart);
                       });
                     }
                   }else{
+                    alert('error')
+                    this.isError = true;
                     if(response.msg){
-                      this.$message.error(response.msg);
+                      this.errorContent = response.msg;
                     }else if(response.error){
-                      this.$message.error(response.error);
+                      this.errorContent = response.error;
                     }else {
-                      this.$message.error(response);
+                      this.errorContent = response;
                     }
                   }
                 });
@@ -940,6 +969,7 @@ console.log('=======',this.chart);
       },
       */
       dateChange(time) {
+        this.searchTime = [...time];
         let chartType = this.chart.type;
         if (chartType === 'table') {
           this.seriesItemScreen = [];
@@ -997,6 +1027,8 @@ console.log('=======',this.chart);
               }
               res.forEach((response,pos) => {
                 if (response.status === 'success') {
+                  this.isError = false;
+                  this.errorContent = "";
                   if (response.data.result) {
                     // 循环处理每个elements下获取的数据列
                     response.data.result.forEach((queryItem,innerPos) => {
@@ -1063,6 +1095,15 @@ console.log('=======',this.chart);
                       }
                     });
                   }
+                }else{
+                  this.isError = true;
+                  if(response.msg){
+                    this.errorContent = response.msg;
+                  }else if(response.error){
+                    this.errorContent = response.error;
+                  }else {
+                    this.errorContent = response;
+                  }
                 }
               });
               this.initChart(this.chart,series, this.$refs.screenShowArea,legend);

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

@@ -74,8 +74,62 @@
     }
   }
 }
+.panel-info-corner {
+  color: #767980;
+  cursor: pointer;
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  z-index: 2;
+  top: 0;
+}
+.panel-info-corner--error {
+  display: block;
+  color: #fff;
+}
+.panel-info-corner .fa {
+  position: relative;
+  top: -6px;
+  left: -6px;
+  font-size: 75%;
+  z-index: 3;
+}
+.panel-info-corner .fa-model {
+  position: relative;
+  top: -3px;
+  left: 4px;
+  font-size: 75%;
+  z-index: 3;
+}
+.fa , .fa-model{
+  display: inline-block;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.panel-info-corner--error .panel-info-corner-inner {
+  border-left: 28px solid #e02f44;
+  border-right: none;
+  border-bottom: 28px solid rgba(0,0,0,0);
+}
+.panel-info-corner-inner {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
 .chart-error-popper[x-placement^=top] .popper__arrow::after {
   border-top-color: #e02f44;
+  bottom:0px;
+}
+.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #e02f44;
+}
+.popper__arrow::after{
+  border:solid 3px yellow
 }
 .chart-error-popper{
   background-color:#e02f44;
@@ -123,46 +177,6 @@
      text-align: center;
      width: 100%;
      line-height: 28px;
-    .panel-info-corner {
-      color: #767980;
-      cursor: pointer;
-      position: absolute;
-      display: none;
-      left: 0;
-      width: 28px;
-      height: 28px;
-      z-index: 2;
-      top: 0;
-    }
-    .panel-info-corner--error {
-      display: block;
-      color: #fff;
-    }
-    .panel-info-corner .fa {
-      position: relative;
-      top: -6px;
-      left: -6px;
-      font-size: 75%;
-      z-index: 3;
-    }
-    .fa {
-      display: inline-block;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .panel-info-corner--error .panel-info-corner-inner {
-      border-left: 28px solid #e02f44;
-      border-right: none;
-      border-bottom: 28px solid rgba(0,0,0,0);
-    }
-    .panel-info-corner-inner {
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
 
     .nz-chart-top{
       width:100%;

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

@@ -27,7 +27,7 @@
       <el-popover
         v-if="isError"
         placement="top-start"
-        close-delay="10"
+        :close-delay=10
         trigger="hover"
         popper-class="chart-error-popper">
         <div >{{errorContent}}</div>
@@ -91,11 +91,27 @@
                :visible.sync="screenModal"
                width="90%"
                @close="screenModal = false"
+               style="margin-top: 1vh !important;"
                @opened="initDialog">
+      <el-popover
+        v-if="isError"
+        placement="top-start"
+        :close-delay=10
+        trigger="hover"
+        popper-class="chart-error-popper">
+        <div >{{errorContent}}</div>
+        <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa-model" ></i>
+              <span class="panel-info-corner-inner"></span>
+          </span>
+      </el-popover>
       <div slot="title" >
         <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
         <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
         <div class="float-right panel-calendar dialog-tool">
+
+          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
+          <!--
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
@@ -106,7 +122,7 @@
                           :start-placeholder="$t('dashboard.panel.startTime')"
                           :end-placeholder="$t('dashboard.panel.endTime')"
                           align="right">
-          </el-date-picker>
+          </el-date-picker>-->
           <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
       </div>
@@ -133,11 +149,13 @@
   import loading from "../common/loading";
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
+  import timePicker from '../common/timePicker'
 
   export default {
     name: 'lineChartBlock',
     components: {
       'loading': loading,
+      'time-picker':timePicker
     },
     props: {
       editChartId: {
@@ -215,7 +233,7 @@
         chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
         titleHeight:28,
         legendHeight:80,
-        pickerOptions: {
+        /*pickerOptions: {
           shortcuts: [
             {
               text:  this.$t("dashboard.panel.recOne"),
@@ -295,7 +313,7 @@
                 picker.$emit('pick', [start, end]);
               }
             }]
-        },
+        },*/
       };
     },
     computed: {
@@ -1268,7 +1286,10 @@
         // 初始化同步时间
         this.filter.start_time = this.stableFilter.start_time;
         this.filter.end_time = this.stableFilter.end_time;
-        this.searchTime = this.oldSearchTime;
+        //this.searchTime = this.oldSearchTime;
+        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+        this.$refs.calendarPanel.setCustomTime(this.searchTime);
         this.screenModal = true;
         this.isGreyScreen=[];
 
@@ -1283,6 +1304,7 @@
         //this.dateChange();
       },
       dateChange(time) {
+        this.searchTime = [...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();
@@ -1345,6 +1367,8 @@
               }
               res.forEach((response,pos) => {
                 if (response.status === 'success') {
+                  this.isError = false;
+                  this.errorContent = "";
                   if (response.data.result) {
                     // 循环处理每个elements下获取的数据列
                     response.data.result.forEach((queryItem,innerPos) => {
@@ -1428,6 +1452,15 @@
                       }
                     });
                   }
+                }else{
+                  this.isError = true;
+                  if(response.msg){
+                    this.errorContent = response.msg;
+                  }else if(response.error){
+                    this.errorContent = response.error;
+                  }else {
+                    this.errorContent = response;
+                  }
                 }
               });
               /*

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

@@ -152,7 +152,7 @@ const en = {
       },
       startTime:'Start time', //'开始时间'
       endTime:'End time',//'结束时间'
-      to:'To', //To
+      to:'to', //To
       recOne:'Last 1 hour', //'最近1小时'
       recFour:'Last 4 hours',//'最近4小时'
       recOneDay:'Last 1 day',//'最近1日'

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

@@ -12,10 +12,10 @@
     line-height:24px;
     padding-left:5px;
     margin-left:0px;
-    margin-top: 3px;
+    margin-top: 0px !important;
     text-align:left;
     border-radius:4px;
-    width:160px;
+    min-width:120px;
     height:24px;
     border:solid 1px  #d8dce1;
     white-space: nowrap;
@@ -29,10 +29,56 @@
     line-height:22px;
     text-align:center;
   }
+  .panel-time-picker-hidden{
+    width:0px;
+    padding:0px !important;
+    visibility: 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: #FFF !important;
+  }
+
+  .panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
+    display:none;
+  }
 </style>
 <template>
   <div class="calendar top-tools" id="panel-calender">
-    <el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
+    <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"
+                    popper-class="panel-time-picker-popper"
+                    :range-separator="$t('dashboard.panel.to')"
+                    :start-placeholder="$t('dashboard.panel.startTime')"
+                    :end-placeholder="$t('dashboard.panel.endTime')" 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" ref="timePickerDropdown"   class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
       <el-popover
         placement="bottom-end"
         min-width="120px"
@@ -41,19 +87,19 @@
         trigger="hover"
         id="panel-calender-popover">
         <el-row  :gutter="10" class="calendar-popover">
-          <el-col :span="24">{{searchTime[0]}}</el-col>
+          <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">to</el-col>
+          <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">{{searchTime[1]}}</el-col>
+          <el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
-        </el-row>
-        <el-row  :gutter="10" class="el-dropdown-link" slot="reference">
-          <el-col :span="3" ><i class="el-icon-time"></i></el-col>
-          <el-col :span="17" class="panel-list-title" >{{showTime.text}}</el-col>
-          <el-col :span="4" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
         </el-row>
+        <div  class="el-dropdown-link" slot="reference">
+          <i class="el-icon-time" style="width:20px;"></i>
+          <span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
+          <i class="el-icon-arrow-down el-icon--right"  style="padding-left:0px !important;width:20px;"></i>
+        </div>
       </el-popover>
       <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
         <!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>  -->
@@ -63,12 +109,11 @@
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
-    <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+    <!--
-                    format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
+    <button type="button" style="border-radius: 1px 1px 1px 1px" @click="left()" v-show="isCustom"
-                    :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
+            class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-left-button" >
-                    :start-placeholder="$t('dashboard.panel.startTime')"
+      <i style="font-size: 12px" class="el-icon-arrow-left"></i>
-                    :end-placeholder="$t('dashboard.panel.endTime')" align="right">
+    </button>-->
-    </el-date-picker>
   </div>
 </template>
 
@@ -82,6 +127,7 @@ export default {
   data() {
     return {
       isPopoverDisabled:false,
+      isCustom:false,
       searchTime:[
         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')
@@ -90,10 +136,6 @@ export default {
         id: 1,
         text: this.$t("dashboard.panel.lastFiveMin"),
       },
-      oldTime:{
-        id: 1,
-        text: this.$t("dashboard.panel.lastFiveMin"),
-      },
       timeData: [
         {
           id:0,
@@ -169,32 +211,83 @@ export default {
     };
   },
   methods: {
-    timeChange(val) {
+    dateChange(val){
-      this.showTime = val;
+      let startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss');
+      let endTime = bus.timeFormate(val[1], '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]);
+      /*
+            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.$set(this.showTime, 'id', 0);
+        this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+      }
+    },
+    //left(){},
+    //right(){},
+    timeChange(val) {
+      this.$set(this.showTime, 'id', val.id);
+      this.$set(this.showTime, 'text', val.text);
       if (!val) {
+        this.isCustom = false;
         return false;
       }else {
-        let id = val.id;
-        if(id===0){
-
-        }else {
-          this.oldTime = val;
-        }
         this.setSearchTime(val.type,val.value);
+        //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];
+        }*/
+
+        let id = val.id;
+        if(id===0){//custom
+          this.isCustom = true;
+          this.$refs.calendar.focus();
+        }else {
+          this.isCustom = false;
+          this.$emit('change', this.searchTime);
+        }
       }
-      this.$emit('change', this.searchTime);
     },
     setSearchTime(type,val){
       if(type==='minute'){
-        this.searchTime[0] = 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 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');
-        this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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);
       }else if(type==='hour'){
-        this.searchTime[0] = 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 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');
-          this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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);
       }else if(type==='date'){
-        this.searchTime[0] = 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 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');
-          this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'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);
       }
     },
     popoverClick(val){
@@ -204,7 +297,24 @@ export default {
         this.isPopoverDisabled = false;
       }
     },
-  }
+  },
+  mounted: function () {
+    /*
+    if(this.isCustom){
+      if(this.timeGroup.length===2){
+        this.$set(this.searchTime, 0, this.timeGroup[0]);
+        this.$set(this.searchTime, 1, this.timeGroup[1]);
+
+        this.$set(this.showTime, 'id', 0);
+        this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+      }
+    }else{
+      let timeObj = this.timeData.find((item)=>{return item.id===this.timeDataId});
+      this.$set(this.showTime, 'id', this.timeDataId);
+      this.$set(this.showTime, 'text', timeObj.text);
+      this.setSearchTime(timeObj.type,timeObj.value);
+    }*/
+  },
 };
 </script>
 

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

@@ -41,15 +41,14 @@
 
           <div class="panel-calendar margin-r-20">
             <div class="block">
-              <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
+              <!--
+<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm" @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')" align="right">
               </el-date-picker>
-              <!--
-
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
               -->
             </div>
           </div>
@@ -104,7 +103,7 @@
   import ChartBox from "./chartBox";
   import ChartList from '../../charts/chart-list';
   import bus from '../../../libs/bus';
-  //import timePicker from '../../common/timePicker'
+  import timePicker from '../../common/timePicker'
 
   export default {
     name: "panel",
@@ -116,6 +115,7 @@
           show: false,
           title: this.$t('dashboard.panel.createPanelTitle')
         },
+        /*
         pickerOptions: {
           shortcuts: [{
             text: this.$t("dashboard.panel.recOne"),
@@ -195,7 +195,7 @@
               picker.$emit('pick', [start, end]);
             }
           }]
-        },
+        },*/
         searchTime: [
           new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
           new Date(bus.computeTimezone(new Date().getTime()))
@@ -278,7 +278,7 @@
     components: {
       'chart-box': ChartBox,
       'chart-list': ChartList,
-      //'time-picker':timePicker
+      'time-picker':timePicker
     },
     methods: {
       //刷新
@@ -838,7 +838,6 @@
   .nz-dashboard-picker {
   }
 
-
 </style>
 <style lang="scss">
   .panel .top-tools input {