fix:修改BUG

dashboard模块图表 1.tooltip去掉指定label功能去掉 2.图表高度调整 3.y轴刻度数值显示不全 4.metric的expert模式进行格式化，去掉空白字符 5.tooltip内容格式调整优化（一行显示，超出显示省略号，提示框显示位置等调整）
2020-02-14 17:57:15 +08:00
parent e7d0ff62e8
commit 0324219e40
6 changed files with 1115 additions and 1048 deletions
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -9,12 +9,13 @@
  }
  .list-width{
    width:98%;
+    overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
  }
 </style>
 <template>

  <div class="list-width">
-    <div class="chartBox" v-for="(item, index) in dataList" :key="item.id">
+    <div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="item.title+'_'+item.id">

      <line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
      ref="editChart" 
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -2,10 +2,12 @@
 .clearfix:after{
  display: block;
  content: "";
+  height:0;
+  visibility:hidden;
  clear: both;
 }
 .clearfix{
-  margin-bottom: 20px;
+  //margin-bottom: 20px;
 }
 .legend-shape{
  display:inline-block;
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -2,7 +2,7 @@
  @import './line-chart-block.scss';
 </style>
 <template>
-  <div class="line-chart-block">
+  <div class="line-chart-block" id="lineChartDiv">

    <!--<div class="edit">
      <div class="list-icon" v-if="firstShow">
@@ -27,7 +27,7 @@
      @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
    </div>

-    <div class="line-area" ref="lineChartArea"  id="lineChartArea"></div>
+    <div class="line-area" ref="lineChartArea"  id="lineChartArea" ></div>

    <div class="legend-container"   id="legendArea" ref="legendArea">
      <div v-for="(item, index) in legendList" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
@@ -72,11 +72,11 @@
  </div>
 </template>
 <script>
-import axios from 'axios';
-import echarts from 'echarts';
-import bus from '../../libs/bus';
+  import axios from 'axios';
+  import echarts from 'echarts';
+  import bus from '../../libs/bus';

-export default {
+  export default {
    name: 'lineChartBlock',
    components: {
      //calendarSelect,
@@ -229,7 +229,7 @@ export default {
        }
        return false;
      },
-*/
+  */
    },
    watch: {},
    methods: {
@@ -289,6 +289,7 @@ export default {
      },
      // chartSite用于区分是全屏显示还是局部显示
      initChart(chartInfo, dataArg, ele, chartSite,legend) {
+
        this.firstShow = true; // 展示操作按键
        const self = this;
        this.chartType = ''; // 图表类型
@@ -321,9 +322,66 @@ export default {
          color: this.bgColorList,
          tooltip: {
            trigger: 'axis',
-          confine:true,
+            confine:false,
+            extraCssText:'z-index:1000;',
+            enterable:true,
+            position:function(point,params,dom,rect,size){
+              dom.style.transform = "translateZ(0)";
+              //提示框位置
+              var x=0;
+              var y=0;
+              //当前鼠标位置
+              var pointX = point[0];
+              var pointY = point[1];
+              //外层div大小
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              //提示框大小
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              if (chartSite === 'local') { // 本地显示
+                let chartDom = document.getElementById(chartInfo.title+"_"+chartInfo.id);
+                if(chartDom){
+                  let parTop = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetTop;
+                  let parleft = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetLeft;
+
+                  let parent = document.getElementById('tableList');
+                  let parClientHeight = parent.clientHeight;//可视高度
+                  let parClientWidth = parent.clientWidth;//可视宽度
+                  let parScrollTop = parent.scrollTop;
+                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
+                    x=pointX+10;
+                  }else{
+                    x = pointX - boxWidth;
+                  }
+                  if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+                    y = pointY+10;
+                  }else {
+                    y = pointY-boxHeight;
+                  }
+                  return [x,y];
+                }else {//preview page
+                  x = pointX - boxWidth;
+                  y = pointY+10;
+                  return [x,y];
+                }
+              }else {
+                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
+                  x=pointX+10;
+                }else{
+                  x = pointX - boxWidth;
+                }
+                if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
+                  y = pointY+10;
+                }else {
+                  y = pointY-boxHeight;
+                }
+                return [x,y];
+              }
+            },
            formatter:function(params){
-            let str = `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+              //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
+              let str = `<div   style='width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
              params.forEach((item, i) => {
                if(i===0){
                  let t_date = new Date(item.data[0]);
@@ -335,10 +393,10 @@ export default {
                if(val===0){
                  val = Number(item.data[1]);
                }
+                /*
                let itemNameList = ["instance","module","project","job","dc","asset"];
-              //let seriesNameTmp = this.filterItem(item.seriesName,itemNameList);
                let seriesNameTmp = item.seriesName;
-              itemNameList.forEach((itemName, i) => {
+                itemNameList.forEach((itemName) => {
                  let insIndex = seriesNameTmp.indexOf(itemName+"=");
                  if(insIndex>-1){//{dd=""22,instance="aa",job="nn"},如果最后只有{},则去掉{}
                    let start = seriesNameTmp.substring(0,insIndex);
@@ -360,17 +418,16 @@ export default {
                if(seriesNameTmp.indexOf("{}")>-1){
                  seriesNameTmp = seriesNameTmp.replace("{}","");
                }
-              /*
-              if(chartInfo.elements[serIndex].type==='normal'){
                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> `;
                str +=seriesNameTmp+":"+val;
-              }else if(chartInfo.elements[serIndex].type==='expert'){
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName} `;
-                str +=val;
-              }
                 */
-              str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> `;
-              str +=seriesNameTmp+":"+val;
+                str += `<div style='max-width:510px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+
+                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}: `;
+                str +=`</div>`;
+                str += `<div style='max-width:90px;min-width:20px;float:right;text-align:right;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+                str +=val;
+                str +=`</div>`;
              });
              str +=`</div>`;
              return str;
@@ -432,10 +489,11 @@ export default {
          },
          grid: {
            //height:"50%",
+            //top: '13%',
            left: 65,
            right: 65,
            containLabel: false,
-          bottom:70//156
+            bottom:70,//156
          },
          dataZoom: [{
            type: 'slider',
@@ -495,7 +553,7 @@ export default {
                  const kbNum = num / 1000;
                  if (kbNum >= 1000) {
                    const mbNum = kbNum / 1000;
-                  if (mbNum > 1000) {
+                    if (mbNum >= 1000) {
                      const gbNum = mbNum / 1000;
                      /*
                      if (gbNum > 1000) {
@@ -599,13 +657,14 @@ export default {
              this.isGrey.push(false);
            });
          }
-        /*
          this.$nextTick(() => {
            let divHeight = this.$refs.legendArea.offsetHeight;
-          let chartHeight = (chartInfo.height-divHeight);
-          this.echartStore.resize({height:chartHeight});//,width:`${ele.clientWidth-100}`}
+            if(!chartInfo.height){
+              this.echartStore.resize({height:(400-divHeight)});
+            }else {
+              this.echartStore.resize({height:(chartInfo.height-divHeight)});
+            }
          });
-        */
        } else if (chartSite === 'screen') { // 全屏显示
          /*
          option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
@@ -669,13 +728,14 @@ export default {
              this.isGreyScreen.push(false);
            });
          }
-        /*
          this.$nextTick(() => {
            let divHeight = this.$refs.screenLegendArea.offsetHeight;
-          let chartHeight = (chartInfo.height-divHeight);
-          this.echartModalStore.resize({height:chartHeight});
+            if(!chartInfo.height){
+              this.echartModalStore.resize({height:(400-divHeight)});
+            }else {
+              this.echartModalStore.resize({height:(chartInfo.height-divHeight)});
+            }
          });
-        */
        }
      },
      handleLineFeed(str,chartWidth){
@@ -784,7 +844,7 @@ export default {
        this.searchTime = this.oldSearchTime;
        this.screenModal = true;
        this.isGreyScreen=[];
-      this.dateChange();
+        //this.dateChange();
      },
      dateChange(time) {
        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
@@ -1158,6 +1218,6 @@ export default {

    },
    beforeDestroy() {},
-};
+  };

 </script>
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -275,6 +275,9 @@ export default {
      if (this.pointer === pointer) {
        this.$refs.elementInfo.validate((valid) => {
          if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
+            if(this.elementInfo.expression){
+              this.elementInfo.expression = this.elementInfo.expression.replace(/\s+|&nbsp;/ig,'');
+            }
            this.$emit('on-add-target-success', this.elementInfo, pointer);
          }
        });
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -304,6 +304,9 @@ export default {
    saveTarget() {
      this.$refs.elementInfo.validate((valid) => {
        if (valid) {
+          if(this.elementInfo.expression){
+            this.elementInfo.expression = this.elementInfo.expression.replace(/\s+|&nbsp;/ig,'');
+          }
          this.$emit('on-add-target-success', this.elementInfo);
        }
      });
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.scss
@@ -23,8 +23,6 @@
  }
  .chart-preview-area {
    height: calc(100% - 180px);
-    overflow-y: auto;
-    overflow-x: hidden;
    position: relative
  }
  .common-detail-top-title {