feat:新增功能

1.panel图表的表格展示功能
2.panel图表按时间查询功能（进行中，显示了时间选择组件和快捷日期，未实现查询功能）
fix:修改BUG
1.panel图表修改时，删除第一个metric时，删除的是第二个metric
2.panel图表新增时的标题为编辑时的标题

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

@@ -20,14 +20,14 @@
       @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="refreshChart"
+      @on-refresh-data=""
       @on-remove-chart-block="removeChart" 
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId" 
       :editChartId="'editChartId' + item.id"></chart-table>
-      -->
+
     </div>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
   </div>
@@ -36,7 +36,7 @@
 import axios from 'axios';
 //import bus from '../../libs/bus';
 import lineChartBlock from './line-chart-block';
-//import chartTable from './chart-table';
+import chartTable from './chart-table';
 
 export default {
   name: 'chartList',
@@ -44,7 +44,7 @@ export default {
   },
   components: {
     lineChartBlock,
-    //chartTable,
+    chartTable,
   },
   data() {
     return {
@@ -189,6 +189,7 @@ export default {
                         seriesItem.theData.name = host;
                         seriesItem.metric_name = seriesItem.theData.name;
                         // 将秒改为毫秒
+                        //alert('table=='+JSON.stringify(queryItem))
                         seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
                           /*曲线汇总暂不需要
                           if (sumData.data[dpsIndex]) {
@@ -198,15 +199,19 @@ export default {
                             sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
                           }
                           */
+                          let t_date = new Date(dpsItem[0] * 1000);
+                          let timeTmp = [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+                            + [t_date.getHours(), t_date.getMinutes()].join(':');
+                          tableData.push({//表格数据
+                            label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                            metric: queryItem.metric.__name__,//metric列
+                            time: timeTmp,//采集时间
+                            value: dpsItem[1],//数值
+                          });
                           return [dpsItem[0] * 1000, dpsItem[1]];
                         });
-                        tableData.push({//表格数据
-                          name: host.slice(host.indexOf(', ') + 1),
-                          metric: queryItem.metric.__name__,
-                          time: (dpsArr[dpsArr.length - 1][0]) * 1000,
-                          value: dpsArr[dpsArr.length - 1][1],
-                        });
                         series.push(seriesItem.theData);
+
                       } else if (chartItem.elements && chartItem.elements[innerPos]) {
                         // 无数据提示
                         /*
@@ -229,7 +234,7 @@ export default {
                   this.filter.panelId, this.filter);
               } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
                 if (series.length && chartItem.type === 4) {//曲线汇总
-                  series.push(sumData);
+                  //series.push(sumData);//后续需要
                 }
                 this.$refs.editChart[index].setData(chartItem, series,
                   this.filter.panelId, this.filter,legend);

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

@@ -9,8 +9,9 @@
   padding: 10px;
   margin-bottom: 10px;
   .table-title {
-    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
+    font-family:  Arial;
-    font-size: 14px;
+    font-size: 18px;
+    font-weight:bold;
   }
   .edit {
     // position: absolute;

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

@@ -11,26 +11,34 @@
         <div class="edit">
           <!-- v-if="firstShow" -->
           <div class="list-icon">
-            <span @click="refreshChart" title="刷新" class="set-icon" v-if="showSetting">
+            <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
-              <Icon type="refresh"></Icon>
+              <i class="el-icon-refresh-right"></i>
             </span>
-            <span @click="editChart" title="编辑" class="set-icon" v-if="showSetting">
+                <span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
-              <Icon type="compose"></Icon>
+              <i class="el-icon-edit-outline"></i>
             </span>
-            <span @click="removeChart" title="删除" class="set-icon" v-if="showSetting">
+                <span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
-              <Icon type="trash-a"></Icon>
+              <i class="el-icon-delete"></i>
             </span>
-            <span @click="showAllScreen" title="全屏" class="set-icon">
+                <span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
-              <Icon type="arrow-expand"></Icon>
+              <i class="el-icon-full-screen"></i>
             </span>
           </div>
         </div>
       </div>
     </div>
     <div class="mt-10">
-      <Table border size="small" :height="350" :data="seriesItem" :columns="columns" :loading="tableLoading"></Table>
+      <!--
+      <el-table  size="small"   :loading="tableLoading">-->
+      <el-table :data="seriesItem"  height="350" border style="width: 100%">
+        <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="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
+      </el-table>
     </div>
-    <Modal title="查看" v-model="screenModal" width="96%">
+    <!--全屏
+    <el-dialog title="查看" v-model="screenModal" width="96%">
       <div class="clearfix">
         <div class="float-left table-title">
           {{data.title}}
@@ -42,13 +50,12 @@
       <div class="mt-10">
         <Table border size="small" :height="350" :data="seriesItem" :columns="columns" :loading="tableLoading"></Table>
       </div>
-    </Modal>
+    </el-dialog>
+    -->
   </div>
 </template>
 <script>
-// import axios from 'axios';
 import bus from '../../libs/bus';
-// import { getQueryChart } from '../../models/service';
 
 export default {
   name: 'chartTable',
@@ -95,7 +102,7 @@ export default {
         width: 200,
         sortable: true,
       }, {
-        title: 'tag',
+        title: 'Label',//tag
         key: 'name',
         minWidth: 200,
         sortable: true,

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

@@ -51,6 +51,23 @@ const cn = {
         metric:"指标",
         addMetric:"添加指标",
       },
+      chartTableColumn:{
+        metric:'指标',
+        label:'标签',
+        time:'时间',
+        value:'值',
+      },
+      startTime:'开始时间',
+      endTime:'结束时间',
+      to:'至',
+      recOne:'近1小时',
+      recFour:'近4小时',
+      recOneDay:'近1日',
+      yesterday:'昨日',
+      recSevenDay:'近7日',
+      recOneMonth:'近一个月',
+      curMonth:'本月',
+      lastMonth:'上月'
     },
     metric:{
       name:"指标名称",

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

@@ -56,6 +56,23 @@ const en = {
         metric:"Metric",
         addMetric:"Add Metric",
       },
+      chartTableColumn:{
+        metric:'metric',
+        label:'label',
+        time:'time',
+        value:'value',
+      },
+      startTime:'startTime',
+      endTime:'endTime',
+      to:'To',
+      recOne:'recent hour',
+      recFour:'recent 4 hours',
+      recOneDay:'recent day',
+      yesterday:'yesterday',
+      recSevenDay:'recent week',
+      recOneMonth:'recent month',
+      curMonth:'this month',
+      lastMonth:'last month'
     },
     metric:{
       name:"Metric",

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

@@ -125,7 +125,6 @@
 
           <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
             <chart-metric ref="chartTag"
-                           :product-id="productId"
                            :pointer="index"
                            :metric-list="metricList"
                            :count-total="elements.length"
@@ -325,7 +324,9 @@
       },
       // 删除指标,第一步, 新方法
       deleteTarget(index) {
+        //alert('box第一步，循环所有的metric，为什么要循环？？');
         this.deleteIndex = index;
+       // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
         this.$refs.chartTag.forEach((item) => {
           // 子组件保存内容到bus
           item.subSave();
@@ -334,13 +335,18 @@
       // subSave保存成功后回调,第二步
       subOk() {
         // 每个模块均有返回,当全部模块返回完成时,将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;
           // 保存完成,进行删除操作
+          //alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
+          //alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
           this.elements.splice(this.deleteIndex, 1);
-          this.elementTarget.splice(this.deleteIndex, 1);
+          this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
           bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
+          //alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
           this.$nextTick(() => {
             this.$refs.chartTag.forEach((item, index) => {
               item.setSubdata(index); // 将数据从bus重新赋值

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

@@ -83,7 +83,7 @@
     <el-row  v-show="tableShow == 2">
       <el-col span="22">
         <el-form-item prop="expression" ><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
-          <el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
+          <el-input size="mini" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
         </el-form-item>
       </el-col>
       <el-col  span="2">
@@ -193,22 +193,37 @@ export default {
   methods: {
     // 删除该选项,第一步,传递要删除的参数
     deleteTarget() {
+      //alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
       this.$emit('on-delete-target', this.pointer);
     },
     // 第二步,on-delete-target回调，保存数据
     subSave() {
+      //alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
       bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo;
+      //alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
       this.$emit('sub-save-ok');
     },
     // 第三步,将数据重新赋值,sub-save-ok回调
     setSubdata(index) {
-      if (index === this.pointer) {
+      //alert('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-        this.elementInfo.metric = bus.chartAddInfo.metricTarget[this.pointer].metric;
+      //alert('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
+      this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
+      //alert('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
+      //alert('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
+      if(this.elementInfo.type==='expert'){
+        //alert('metric第三步，expert');
+        // 当该项expression为空时，重置一下
+        if (!this.elementInfo.expression && this.$refs.metricExpression) {
+          this.$refs.metricExpression.reset();
+        }
+        this.clickTabelShow(2,'expert');
+      }else {
+       // alert('metric第三步，normal');
         // 当该项metric为空时，重置一下
         if (!this.elementInfo.metric && this.$refs.metricSelect) {
           this.$refs.metricSelect.reset();
         }
-        this.elementInfo.tagList = bus.chartAddInfo.metricTarget[this.pointer].tagList;
+        this.clickTabelShow(1,'normal');
       }
     },
 
@@ -293,6 +308,7 @@ export default {
       //alert('metricSetData'+JSON.stringify(data));
       this.setDataFlag = true;
       this.target = Object.assign({}, data);
+      //this.pointer =
       if(this.target.type==='expert'){
         this.tableShow = 2;
         this.elementInfo.type = this.target.type;

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

@@ -66,7 +66,6 @@
   }
   /* end--Panel-自定义可编辑的el-select下拉框样式*/
 
-
 </style>
 <template>
   <div class="panel">
@@ -100,6 +99,21 @@
             <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="block">
+            <el-date-picker size="small" ref="calendar"
+                            format="yyyy/MM/dd HH:mm"
+              @change="dateChange"
+              v-model="value2"
+              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>
+          </div>
+        </div>
       </div>
       <div class="table-list"  >
         <div class="box-content">
@@ -127,6 +141,88 @@
           show: false,
           title: this.$t('dashboard.panel.createPanelTitle')
         },
+        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);
+              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]);
+              }
+            }]
+        },
+        value2: [new Date(), new Date()],
         showPanel:{//panel下拉列表
           id:'',
           name:''
@@ -238,6 +334,7 @@
       },
       /*图表相关操作--start*/
       toAddChart:function(){
+        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
         this.$refs.addChartModal.show(true);
         this.$refs.addChartModal.createData(this.showPanel.id);//初始化创建图表需要的初始数据
       },