feat:新增功能

1.表格类型图表全屏显示增加时间选择器
fix:修改BUG
1.dashboard图表曲线图tooltip信息显示不全调整
2.dashboard图表图例tooltip信息显示不全调整
3.指标预览多图展示图表名称调整为metric(ip)

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

@@ -26,6 +26,7 @@
 
       <chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
       @on-refresh-data="refreshChart"
+      @on-search-data="searchData"
       @on-remove-chart-block="removeChart" 
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId" 
@@ -135,7 +136,13 @@ export default {
             startTime = this.filter.start_time;
             endTime = this.filter.end_time;
           }
-        } else {
+          //this.$emit('@on-refresh-time', startTime,endTime);
+        } else if(filterType==='searchTime'){
+          startTime = this.filter.start_time;
+          endTime = this.filter.end_time;
+          //this.$emit('@on-refresh-time', startTime,endTime);
+          this.$parent.refreshTime(startTime,endTime);
+        }else {
            startTime = this.filter.start_time;
            endTime = this.filter.end_time;
         }
@@ -300,13 +307,24 @@ export default {
       }
     },
     // 刷新列表中的一个图表
-    refreshChart(chartId) {
+    refreshChart(chartId,searchTime) {
       this.dataList.forEach((item, index) => {
         if (item.id === chartId) {
           this.getChartData(item, index, 'refresh');
         }
       });
     },
+    searchData(chartId,searchTime){
+      if(searchTime){//全屏时间查询
+        this.filter.start_time=bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.end_time=bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+      }
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'searchTime');
+        }
+      });
+    }
     /*
     // 刷新数据
     refreshData() {

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

@@ -19,6 +19,7 @@
     // top: 5px;
     // z-index: 10;
     padding-right: 40px;
+    padding-bottom:9px;
     .set-icon {
       display: inline-block;
       cursor: pointer;

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

@@ -44,9 +44,20 @@
           {{data.title}}
         </div>
         <div class="float-right edit">
+          <el-date-picker size="small" 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>
           <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" @click.native="refreshChart">
               <i class="el-icon-refresh-right"></i>
-            </span>
+          </span>
         </div>
       </div>
       <div class="mt-10">
@@ -124,6 +135,89 @@ export default {
         sortable: true,
         render: (h, params) => h('span', this.getNumStr(params.row.value)),
       }],
+      searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
+      oldSearchTime:[],
+      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]);
+            }
+          }]
+      },
     };
   },
   computed: {
@@ -150,8 +244,16 @@ export default {
     removeChart() {
       this.$emit('on-remove-chart-block', this.data.id);
     },
+    dateChange(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.tableLoading = true;
+      this.$emit('on-search-data', this.data.id,this.searchTime);
+    },
     // 全屏查看
     showAllScreen() {
+      // 初始化同步时间
+      this.searchTime = this.oldSearchTime;
       this.screenModal = true;
     },
     // 设置数据, filter区分
@@ -164,6 +266,9 @@ export default {
       this.panelIdInner = panelId;
       this.data = chartItem;
       this.seriesItem = seriesItem;
+      this.searchTime[0] = filter.start_time;
+      this.searchTime[1] = filter.end_time;
+      this.oldSearchTime = this.searchTime;
     },
     // 获取格式
     getNumStr(num) {

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

@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <div class="line-area" ref="lineChartArea"  ></div>
+    <div class="line-area" ref="lineChartArea"  id="lineChartArea"></div>
     <!--
     <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
     <el-dialog class="line-chart-block-modal"
@@ -45,7 +45,7 @@
             </el-date-picker>
         </div>
       </el-row>
-      <div class="line-area " ref="screenShowArea" ></div>
+      <div class="line-area " ref="screenShowArea"  id="screenShowArea"></div>
       <div class=" element-bottom-border" ></div>
       <span slot="footer" class="dialog-footer" >
         <el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
@@ -214,12 +214,16 @@ export default {
       if ( chartInfo.type === 4) {//line,bar
         this.chartType = 'line';
       }
+      let chartId = '';
       if (chartSite === 'local') {
         this.echartStore = echarts.init(ele);
+        chartId='lineChartArea';
       }else if (chartSite === 'screen') {
         this.echartModalStore = echarts.init(ele);
+        chartId='screenShowArea';
       }
       var chartWidth = ele.clientWidth;
+      //let chartTitle = this.handleLineFeed(chartInfo.title,chartWidth);
       var option = {
         title: {
           text: chartInfo.title || null,
@@ -227,7 +231,7 @@ export default {
           useHTML: true,
           textStyle: {
             //display: 'inline-block',//无此属性
-            width: '300px',
+            width: '60%',
             fontStyle:'normal',
             fontWeight:'normal'
           }
@@ -243,7 +247,18 @@ export default {
         tooltip: {
           trigger: 'axis',
           confine:true,
-          //formatter:"{a}<br/>"+"<div style='display:block;word-break:break-all;word-wrap:break-word;white-space:pre-wrap'>"+"{b}"+"</div>"+"<br/>{c}",
+          formatter:function(params){
+            let str = `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'>`;
+            params.forEach((item, i) => {
+                if(i!==0){
+                  str +=`<br/>`;
+                }
+                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> ${item.seriesName}:${item.data[1]}`;
+            });
+            str +=`</div>`;
+            return str;
+           // return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${params[0].color};}'></span> ${params[0].seriesName}:${params[0].data[1]}</div>`;
+          },
         },
         legend: {
           type:'scroll',
@@ -279,10 +294,17 @@ export default {
             }else {
               var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
               return name.slice(0,charNum)+'...';
-              //return name;
             }
           },
-          tooltip:{show:true},
+          tooltip:{
+            show:true,
+            formatter:function(params){
+              //alert(params.length);
+              //alert(JSON.stringify(params));
+
+              return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
+            },
+          },
           data: legend,
           orient:'vertical',
           x:'center',
@@ -493,6 +515,54 @@ export default {
         this.echartModalStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
       }
     },
+    handleLineFeed(str,chartWidth){
+      let rlt='';
+      if(!str){
+        return '';
+      }
+      //计算宽度
+      var span = document.createElement("span");
+      var result = {};
+      result.width = span.offsetWidth;
+      result.height = span.offsetHeight;
+      span.style.visibility = "hidden";
+      span.style.fontSize = 14;
+      span.style.fontFamily = "Arial";
+      span.style.display = "inline-block";
+      document.body.appendChild(span);
+      if(typeof span.textContent != "undefined"){
+        span.textContent = str;
+      }else{
+        span.innerText = str;
+      }
+      var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+      document.body.removeChild(span);
+
+      if(txtWidth < chartWidth){
+        return str;
+      }else {
+        var charNum = `${(chartWidth-100)/(txtWidth/str.length)}`;
+        return str.slice(0,charNum)+'...';
+      }
+      /*
+      if(txtWidth < (chartWidth-30)){
+        return str;
+      }else {
+        var charNum = `${(chartWidth-200)/(txtWidth/str.length)}`;//一行的字符数
+        charNum = parseInt(charNum);
+        if(str.length>charNum){
+          let num = `${str.length/charNum}`;
+          num = parseInt(num)+1;
+          for(let i=0;i<num;i++){
+            rlt += str.substring(charNum*i,charNum*(i+1))+'\n';
+          }
+        }else {
+          return str;
+        }
+      }
+      */
+      //return rlt;
+    },
     // 设置数据, filter区分
     setData(chartItem, seriesItem, panelId, filter,legend) {
       if (filter) { // 保存数据,用于同步时间

nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue

@@ -124,6 +124,7 @@
               const elements = [];
               // 图表中每条线的名字,后半部分
               let host = `${queryItem.metric.__name__}`;//up,
+              let charTitle=`${queryItem.metric.__name__}`;//up,
               const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
               // 判断是否有数据
               if (queryItem.values.length > 0 && tagsArr.length > 0) {
@@ -132,11 +133,17 @@
                   if (tag !== '__name__') {
                     host += `${tag}="${queryItem.metric[tag]}",`;
                   }
+                  if (tag === 'asset') {
+                    let labVal= `${queryItem.metric[tag]}`;
+                    if(labVal!==''){
+                      charTitle += `(${queryItem.metric[tag]})`;
+                    }
+                  }
                 });
                 if(host.endsWith(',')){host = host.substr(0,host.length-1);}
                 host +="}";
               }
-              soleParam.title = host;
+              soleParam.title = charTitle;
               elements.push({
                 expression: host,
                 type: this.elementTarget.type,

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

@@ -264,7 +264,7 @@ export default {
     // 获取一个图表具体数据
     getChartData(response, params) {
       const chartItem = Object.assign({}, params);
-      chartItem.title = params.metric || '预览图';
+      chartItem.title = params.metric;
       const series = [];
       const legend = [];
       // 一个图表
@@ -278,11 +278,13 @@ export default {
             type:chartItem.type,
             //visible: true,
             //threshold: null,
+            chartTitle:''
           },
           metric_name: '',
         };
         // 图表中每条线的名字,后半部分
         let host = `${queryItem.metric.__name__}`;//up,
+        let charName = `${queryItem.metric.__name__}`;
         const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
         // 设置时间-数据格式对
         const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
@@ -290,15 +292,24 @@ export default {
         if (dpsArr.length > 0 && tagsArr.length > 0) {
             host +="{";
             tagsArr.forEach((tag, i) => {
-            if (tag !== '__name__') {
+              if (tag !== '__name__') {
-              host += `${tag}="${queryItem.metric[tag]}",`;
+                host += `${tag}="${queryItem.metric[tag]}",`;
-            }
+              }
-          });
+
+              if (tag === 'asset') {
+                let labVal= `${queryItem.metric[tag]}`;
+                if(labVal!==''){
+                  charName += `(${queryItem.metric[tag]})`;
+                }
+              }
+            });
           if(host.endsWith(',')){host = host.substr(0,host.length-1);}
           host +="}";
           legend.push(host);
+
           // 图表中每条线的名字,去掉最后的逗号与空格
           seriesItem.theData.name = host;
+          seriesItem.theData.chartTitle =charName;
           seriesItem.metric_name = seriesItem.theData.name;
           // 将秒改为毫秒
           seriesItem.theData.data = queryItem.values.map(dpsItem =>
@@ -331,7 +342,7 @@ export default {
           series.forEach((serieData, index) => {
             // 设置每个图表名称
             const chartInfoParams = Object.assign({}, chartItem);
-            chartInfoParams.title = serieData.name;
+            chartInfoParams.title = serieData.chartTitle;
             this.$refs.editChartMultiple[index]
               .setData(chartInfoParams, [serieData], 0, filterParams,[legend[index]]);
           });

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

@@ -154,6 +154,7 @@
         <div class="box-content">
           <chart-list
             @on-edit-chart="editData"
+            @on-refresh-time="refreshTime"
             @on-remove-chart="removeData" ref="chartList"></chart-list>
         </div>
       </div>
@@ -377,6 +378,11 @@
       panelReload(){
         this.getTableData();
       },
+      refreshTime(st,et){
+        const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+      },
       panelReloadForDel:function(){
         if(this.showPanel.id===this.panel.id){
           this.showPanel.id ='';