fix:修改BUG

dashboard模块图表
1.tooltip去掉指定label功能去掉
2.图表高度调整
3.y轴刻度数值显示不全
4.metric的expert模式进行格式化，去掉空白字符
5.tooltip内容格式调整优化（一行显示，超出显示省略号，提示框显示位置等调整）

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" 

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;

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 axios from 'axios';
-import echarts from 'echarts';
+  import echarts from 'echarts';
-import bus from '../../libs/bus';
+  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 += `<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 +=seriesNameTmp+":"+val;
+
+                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);
+            if(!chartInfo.height){
-          this.echartStore.resize({height:chartHeight});//,width:`${ele.clientWidth-100}`}
+              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);
+            if(!chartInfo.height){
-          this.echartModalStore.resize({height:chartHeight});
+              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>

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+| /ig,'');
+            }
             this.$emit('on-add-target-success', this.elementInfo, pointer);
           }
         });

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+| /ig,'');
+          }
           this.$emit('on-add-target-success', this.elementInfo);
         }
       });

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 {