feat:新增功能

1.panel图表按时间查询功能（查询时间默认最近1小时）
2.panel图表按图表名称查询功能
3.panel图表刷新功能（完成的是图表上的刷新图标，定期刷新还未完成）
fix:修改BUG
1.修改图表数据查询接口URL

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

@@ -15,14 +15,14 @@
 
       <line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
       ref="editChart" 
-      @on-refresh-data=""
+      @on-refresh-data="refreshChart"
       @on-remove-chart-block="removeChart"
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId" 
       :editChartId="'editChartId' + item.id"></line-chart-block>
 
       <chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
-      @on-refresh-data=""
+      @on-refresh-data="refreshChart"
       @on-remove-chart-block="removeChart" 
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId" 
@@ -34,7 +34,7 @@
 </template>
 <script>
 import axios from 'axios';
-//import bus from '../../libs/bus';
+import bus from '../../libs/bus';
 import lineChartBlock from './line-chart-block';
 import chartTable from './chart-table';
 
@@ -81,7 +81,11 @@ export default {
       };
       if (!param.query) delete param.query;
       //根据panelId获得panel下的所有图表
-      this.$get('panel/'+ params.panelId+'/charts').then(response => {
+      let searchTitleStr = '';
+      if(this.filter.searchName&&this.filter.searchName!=''){
+        searchTitleStr = '?title='+this.filter.searchName;
+      }
+      this.$get('panel/'+ params.panelId+'/charts'+searchTitleStr).then(response => {
         if (response.code === 200) {
           if(response.data.list){
             this.dataList = response.data.list;
@@ -117,13 +121,13 @@ export default {
       } else {
         let startTime = '';
         let endTime = '';
-        if (filterType === 'refresh') {//刷新：需要根据刷新周期来？？？
+        if (filterType === 'refresh') {//刷新
           const now = new Date();
           const origin = new Date(this.filter.end_time);
           const numInterval = now.getTime() - origin.getTime();
-          if (numInterval >= 6000) {
+          if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
             startTime = this.getNewTime(this.filter.start_time, numInterval);
-            endTime = bus.timeFormate(now, 'yyyy/MM/dd-hh:mm:ss');
+            endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
           } else {
             startTime = this.filter.start_time;
             endTime = this.filter.end_time;
@@ -132,15 +136,10 @@ export default {
            startTime = this.filter.start_time;
            endTime = this.filter.end_time;
         }
-        //测试数据----之后会要去掉
-        startTime='2020-01-02T10:10:30.781Z';
-        endTime = '2020-01-02T20:10:30.781Z';
-
-
         this.$nextTick(() => {
           const axiosArr = chartItem.elements.map((ele) => {
             const filterItem = ele;
-            return  this.$get('http://192.168.40.247:9090/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step=3600s');
+            return  this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step=3600s');
           });
           // 一个图表的所有element单独获取数据
           axios.all(axiosArr).then((res) => {
@@ -200,8 +199,7 @@ export default {
                           }
                           */
                           let t_date = new Date(dpsItem[0] * 1000);
-                          let timeTmp = [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+                          let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm');
-                            + [t_date.getHours(), t_date.getMinutes()].join(':');
                           tableData.push({//表格数据
                             label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
                             metric: queryItem.metric.__name__,//metric列
@@ -272,7 +270,7 @@ export default {
     getNewTime(time, num) {
       const date = new Date(time);
       const newDate = new Date(parseInt(date.getTime(), 10) + num);
-      return bus.timeFormate(newDate, 'yyyy/MM/dd-hh:mm:ss');
+      return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
     },
     // 删除图表
     removeChart(chartId) {
@@ -289,7 +287,6 @@ export default {
         this.$emit('on-edit-chart', chart);
       }
     },
-    /*
     // 刷新列表中的一个图表
     refreshChart(chartId) {
       this.dataList.forEach((item, index) => {
@@ -298,6 +295,7 @@ export default {
         }
       });
     },
+    /*
     // 刷新数据
     refreshData() {
       this.getData(this.filter);

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

@@ -61,4 +61,8 @@
     font-size: 24px;
     font-weight: 600;
   }
+  .chart-table-col{
+    width: 100%;
+  }
+
 }

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

@@ -11,13 +11,13 @@
         <div class="edit">
           <!-- v-if="firstShow" -->
           <div class="list-icon">
-            <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
+            <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" >
               <i class="el-icon-refresh-right"></i>
             </span>
-                <span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
+                <span @click="editChart" :title="$t('dashboard.edit')" class="set-icon">
               <i class="el-icon-edit-outline"></i>
             </span>
-                <span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
+                <span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" >
               <i class="el-icon-delete"></i>
             </span>
                 <span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
@@ -30,10 +30,10 @@
     <div class="mt-10">
       <!--
       <el-table  size="small"   :loading="tableLoading">-->
-      <el-table :data="seriesItem"  height="350" border style="width: 100%">
+      <el-table :data="seriesItem"  height="350" border class="chart-table-col" v-loading="tableLoading">
         <el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')"  sortable></el-table-column>
         <el-table-column  prop="label" :label="$t('dashboard.panel.chartTableColumn.label')"  sortable></el-table-column>
-        <el-table-column  prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="125" sortable></el-table-column>
+        <el-table-column  prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" sortable></el-table-column>
         <el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
       </el-table>
     </div>
@@ -67,11 +67,6 @@ export default {
       type: Number,
       default: 0,
     },
-    // 展示设置内容
-    showSetting: {
-      type: Boolean,
-      default: true,
-    },
   },
   data() {
     return {

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

@@ -5,7 +5,7 @@
   <div class="line-chart-block" >
 
     <div class="edit">
-      <div class="list-icon" v-if="firstShow">
+      <div class="list-icon" >
         <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
           <i class="el-icon-refresh-right"></i>
         </span>
@@ -103,7 +103,7 @@ export default {
         end_time: '',
       },
       stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-      firstShow: false, // 默认不显示操作按钮,
+     // firstShow: false, // 默认不显示操作按钮,
     };
   },
   computed: {
@@ -120,19 +120,12 @@ export default {
   methods: {
     // chartSite用于区分是全屏显示还是局部显示
     initChart(chartInfo, dataArg, ele, chartSite,legend) {
-      this.firstShow = true; // 展示操作按键
+      //this.firstShow = true; // 展示操作按键
       const self = this;
       this.chartType = ''; // 图表类型
       if ( chartInfo.type === 4) {//line,bar
         this.chartType = 'line';
       }
-      //alert(ele.style.height);
-     // ele.style.height= chartInfo.height;
-
-      //alert(chartInfo.height);
-
-      //alert(ele.style.height);
-      //var myEchart = echarts.init(document.getElementById('lineChartArea'));
       this.echartStore = echarts.init(ele);
       var chartWidth = ele.clientWidth;
       var option = {
@@ -324,6 +317,7 @@ export default {
         });
         */
         this.echartStore.setOption(option);//创建图表
+        this.echartStore.hideLoading();
       } else if (chartSite === 'screen') { // 全屏显示
         option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
           const obj = Object.assign(item);
@@ -370,6 +364,7 @@ export default {
         });
         // eslint-disable-next-line
         this.echartStore.setOption(option);//显示全屏界面
+        this.echartStore.hideLoading();
       }
       this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
     },
@@ -397,7 +392,11 @@ export default {
     editChart() {
       this.$emit('on-edit-chart-block', this.data.id);
     },
-
+    // 重新请求数据 刷新操作
+    refreshChart() {
+      this.echartStore.showLoading();
+      this.$emit('on-refresh-data', this.data.id);
+    },
     /*
     handleClose(done) {
       /*
@@ -422,11 +421,7 @@ export default {
         },
       });
     },
-    // 重新请求数据 刷新操作-> console, create-board
+
-    refreshChart() {
-      this.highchartStore.showLoading();
-      this.$emit('on-refresh-data', this.data.id);
-    },
     // 全屏查看
     showAllScreen() {
       // 初始化同步时间

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

@@ -20,6 +20,9 @@ const cn = {
     title:'仪表盘',
     panel:{
       title:'看板',
+      searchItem:{
+        name:'标题'
+      },
       //面板-侧滑框
       createPanelTitle: "创建面板",
       createPanelTitleSec:"创建新面板",
@@ -67,7 +70,14 @@ const cn = {
       recSevenDay:'近7日',
       recOneMonth:'近一个月',
       curMonth:'本月',
-      lastMonth:'上月'
+      lastMonth:'上月',
+      refreshInterval:{
+        never:'从不',
+        oneMinute:'1分钟',
+        threeMinutes:'3分钟',
+        fiveMinutes:'5分钟',
+        tenMinutes:'10分钟',
+      }
     },
     metric:{
       name:"指标名称",

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

@@ -25,6 +25,9 @@ const en = {
     title:'Dashboard',
     panel:{
       title:'Panel',
+      searchItem:{
+        name:'Title'
+      },
       //面板-侧滑框
       createPanelTitle: "Create Panel",
       createPanelTitleSec:"Create New Panel",
@@ -72,7 +75,14 @@ const en = {
       recSevenDay:'recent week',
       recOneMonth:'recent month',
       curMonth:'this month',
-      lastMonth:'last month'
+      lastMonth:'last month',
+      refreshInterval:{
+        never:'never',
+        oneMinute:'1 min',
+        threeMinutes:'3 mins',
+        fiveMinutes:'5 mins',
+        tenMinutes:'10 mins',
+      }
     },
     metric:{
       name:"Metric",
@@ -111,7 +121,6 @@ const en = {
   },
   tip: {
     confirmDelete: "Confirm Delete?",
-    assetConfirmDelete: 'Its associated Endpoints and Alert Rules will also be deleted, confirm delete?',
     yes: "Yes",
     no: "No",
     deleteSuccess: "Successfully Deleted",

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

@@ -337,7 +337,6 @@
         // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
         //alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
         this.subCount += 1;
-        //alert(this.elements.length);
         if (this.subCount === this.elements.length) {
           this.subCount = 0;
           // 保存完成,进行删除操作

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

@@ -65,6 +65,20 @@
     color: #F98D9A;
   }
   /* end--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-select-width{
+    width: 150px;
+  }
+  .panel-refresh-interval{
+    margin-right: 5px;
+    float: right;
+  }
+  .panel-refresh-interval-select{
+    width: 95px;
+  }
+  .panel-calendar{
+    float: right;
+    margin-right: 1px;
+  }
 
 </style>
 <template>
@@ -81,8 +95,8 @@
         <button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
           <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
         </button>
-        <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+        <div class="top-tool-search float-right"><search-input  ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input></div>
-        <el-select class="right-box-row-with-btn" popper-class="" v-model="showPanel.id" placeholder=""  size="small" @change="panelChange">
+        <el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder=""  size="small" @change="panelChange">
           <el-option  >
             <span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
           </el-option>
@@ -99,12 +113,27 @@
             <span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
           </el-option>
         </el-select>
-        <div class="float-right" style="margin-right: 10px;">
+        <div class="panel-refresh-interval" >
+          <div class="block">
+            <!--
+              <button type="button"  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
+                <span class="top-tool-btn-txt"><i class="el-icon-refresh-right"></i></span>
+              </button>
+            -->
+            <el-select  class="panel-refresh-interval-select" placeholder="" v-model="interval" @change="selectInterval" size="small">
+              <el-option v-for="item in intervalList"
+                         :value="item.value"
+                         :label="item.name"
+                         :key="item.value">{{item.name}}</el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="panel-calendar" >
           <div class="block">
             <el-date-picker size="small" ref="calendar"
                             format="yyyy/MM/dd HH:mm"
               @change="dateChange"
-              v-model="value2"
+              v-model="searchTime"
               type="datetimerange"
               :picker-options="pickerOptions"
               :range-separator="$t('dashboard.panel.to')"
@@ -132,6 +161,7 @@
 <script>
   import ChartBox from "./chartBox";
   import ChartList from '../../charts/chart-list';
+  import bus from '../../../libs/bus';
 
   export default {
     name: "panel",
@@ -222,7 +252,24 @@
               }
             }]
         },
-        value2: [new Date(), new Date()],
+        searchTime: [new Date().setHours(new Date().getHours()-1),new Date()],
+        intervalList: [{
+          value: 0,
+          name: this.$t("dashboard.panel.refreshInterval.never"),
+        }, {
+          value: 60,
+          name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
+        }, {
+          value: 180,
+          name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
+        }, {
+          value: 300,
+          name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
+        }, {
+          value: 600,
+          name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
+        }],
+        interval: 0,
         showPanel:{//panel下拉列表
           id:'',
           name:''
@@ -252,30 +299,27 @@
         panelData: [],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
-          searchLabelList: [{
+          searchLabelList: [
+            /*
+            {
             id: 1,
-            name: this.$t("dashboard.panel.panelForm.panelId"),
+            name: this.$t("dashboard.panel.searchItem.name"),
-            type: 'input',
-            label: 'id',
-            disabled: false
-          },{
-            id: 2,
-            name: this.$t("dashboard.panel.panelForm.panelName"),
             type: 'input',
             label: 'name',
             disabled: false
-          }],
+          }
+          */],
         },
         searchLabel: {}, //搜索参数
-
         //---图表相关参数--start
         dataList: [], // 数据列表
-        searchName: '', //  搜索名称
+        //searchName: '', //  搜索名称
         filter: { // 过滤条件
           //productId: 0,
           panelId: 0,
           start_time: '',
           end_time: '',
+          searchName:''
         },
         panelId: 0,
         //removeModal: false, // 删除弹出
@@ -290,6 +334,7 @@
     methods: {
       //面板相关操作
       panelChange(){
+        this.$refs.searchInput.select();
         this.filter.panelId = this.showPanel.id;
         this.getData(this.filter);
       },
@@ -383,11 +428,27 @@
       },
       // 获取数据,用在子页面
       getData(params) {
+        if( params.start_time===''||params.end_time===''){
+          let now = new Date();
+          let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let startTimeTmp = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+          params.start_time = startTimeTmp;
+          params.end_time = endTimeTmp;
+        }
         this.$refs.chartList.initData(params);
       },
 
       /*图表相关操作--end*/
-
+      /*时间条件查询--start*/
+      // 选择日期变化
+      dateChange() {
+        this.$refs.searchInput.select();
+        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*/
       //公用操作
       jumpTo(data,id) {
         this.$store.state.assetData.moduleData = data
@@ -400,9 +461,7 @@
         });
       },
       getTableData: function() {
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$get('panel').then(response => {
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.$get('panel', this.searchLabel).then(response => {
           if (response.code === 200) {
             this.panelData = response.data.list;
             if( response.data.list.length>0 ){
@@ -433,19 +492,26 @@
         this.getTableData();
       },
       search: function(searchObj) {
-        console.info(searchObj);
         this.searchLabel = {};
+        let containTitle = false;
         for (let item in searchObj) {
           if (searchObj[item]) {
             this.$set(this.searchLabel, item, searchObj[item]);
+            if(item==='name'){
+              this.filter.searchName = searchObj[item];//此处就一个条件
+              containTitle= true;
             }
           }
-        this.getTableData();
+        }
+        if(!containTitle){
+          this.filter.searchName =  '';
+        }
+        this.filter.panelId = this.showPanel.id;
+        this.getData(this.filter);
       }
     },
     created() {
       this.getTableData();
-      this.getData(this.filter);
     },
     mounted: function() {
     },