feat:新增功能

1.表格类型图表全屏显示增加时间选择器 fix:修改BUG 1.dashboard图表曲线图tooltip信息显示不全调整 2.dashboard图表图例tooltip信息显示不全调整 3.指标预览多图展示图表名称调整为metric(ip)
2020-01-16 16:56:28 +08:00
parent 405c9ab66b
commit 0f72442e9c
7 changed files with 234 additions and 16 deletions
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/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() {
--- a/nezha-fronted/src/components/charts/chart-table.scss
+++ b/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;
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/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) {
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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) { // 保存数据,用于同步时间
--- a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
+++ b/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,
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/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__') {
-              host += `${tag}="${queryItem.metric[tag]}",`;
-            }
-          });
+              if (tag !== '__name__') {
+                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]]);
          });
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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 ='';