NEZ-310 panel-chart缩放高对不齐、宽错误换行的问题

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

@@ -763,150 +763,6 @@ export default {
           this.screenPageObj.pageSize = val;
           this.getAlertList();
         },
-      dragResize:function(e){
-        var diffWidth =20; //界面的宽度空白的地方的宽度
-        var chartBoxPadding = 22;
-        var targetDiv= document.getElementById('chartTableDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
-        var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
-        var maxWidth = targetDivContainer.offsetWidth-diffWidth;
-        var minWidth = maxWidth/12;
-        var stepWidth = maxWidth/12;
-        var stepHeight = 10;
-
-        //得到点击时该容器的宽高：
-        var targetDivHeight=targetDiv.offsetHeight;
-        var targetDivWidth=targetDiv.offsetWidth;
-        var startY=e.clientY;
-        var startX=e.clientX;
-        var _this=this;
-
-        document.onmousemove=function(e){
-          e.preventDefault();
-          //得到鼠标拖动的宽高距离：取绝对值
-          var distY=Math.abs(e.clientY-startY);
-          var distX=Math.abs(e.clientX-startX);
-
-          //往上方拖动：
-          if( e.clientY < startY){
-            targetDiv.style.height=targetDivHeight-distY+'px';
-            //heightTmp = targetDivHeight-distY;
-          }
-          if( e.clientX < startX){
-            targetDiv.style.width=targetDivWidth-distX+'px';
-            //widthTmp = targetDivWidth-distX;
-          }
-          //往下方拖动：
-          if (e.clientY > startY) {
-            targetDiv.style.height=(targetDivHeight+distY)+'px';
-            //heightTmp = targetDivHeight+distY;
-          }
-          if (e.clientX > startX) {
-            targetDiv.style.width=(targetDivWidth+distX)+'px';
-            //widthTmp = targetDivWidth+distX;
-          }
-
-          if(parseInt(targetDiv.style.height)<=_this.minHeight){
-            targetDiv.style.height=_this.minHeight+'px';
-            //heightTmp = _this.minHeight;
-          }
-
-          if(parseInt(targetDiv.style.width)>=maxWidth){
-            targetDiv.style.width=maxWidth+'px';
-            //widthTmp = maxWidth;
-          }
-          if(parseInt(targetDiv.style.width)<=minWidth){
-            targetDiv.style.width=minWidth+'px';
-            //widthTmp = minWidth;
-          }
-          //调整表格大小
-            let containerHeight = parseInt(targetDiv.style.height);
-            let containerWidth = parseInt(targetDiv.style.width);
-            const chartBox = document.getElementsByClassName('chartBox');
-            chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-            //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-            //表格的高度
-            const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
-            tableBox.style.height = `${containerHeight-_this.titleHeight-_this.pageHeight}px`;//-75-32+25
-        }
-
-        document.onmouseup=function(){
-          let targetDivHeightNew = parseInt(targetDiv.style.height);
-          //let targetDivHeightNew = heightTmp
-          let targetDivWidthNew = parseInt(targetDiv.style.width);
-          //let targetDivWidthNew = widthTmp;
-
-          let diffHeight =  Math.abs(targetDivHeight-targetDivHeightNew);
-          if(targetDivHeight>targetDivHeightNew){
-            let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
-            //alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
-            targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
-          }
-          if(targetDivHeight<targetDivHeightNew){
-            let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
-            targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
-          }
-
-          var span = _this.data.span;
-          if(targetDivWidth>targetDivWidthNew){
-            span =  Math.floor((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
-            if((finalWidth)<minWidth){
-              targetDiv.style.width=minWidth+'px';
-              span = 1;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          if(targetDivWidth<targetDivWidthNew){
-            span =  Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = spanUnit*stepWidth;
-            if(finalWidth>maxWidth || spanUnit===12){
-              targetDiv.style.width=maxWidth+'px';
-              span = 12;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          //调整表格大小
-          let containerHeight = parseInt(targetDiv.style.height);
-          let containerWidth = parseInt(targetDiv.style.width);
-
-          const chartBox = document.getElementsByClassName('chartBox');
-          chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-          //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-          //表格的高度
-          const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
-          tableBox.style.height = `${containerHeight-_this.titleHeight-_this.pageHeight}px`;
-
-          const modifyParams = {
-            id:_this.data.id,
-            span:span,
-            height:(containerHeight+_this.chartSpaceHeight),
-            prev:parseInt(_this.data.prev),
-            next:parseInt(_this.data.next),
-          }
-          targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
-          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
-            if (response.code === 200) {
-              //更新当前图表数据
-              _this.data.span= span;
-              _this.data.height= containerHeight+_this.chartSpaceHeight;
-              _this.$emit('on-drag-chart', _this.data);
-            }else {
-              if(response.msg){
-                _this.$message.error(response.msg);
-              }else if(response.error){
-                _this.$message.error(response.error);
-              }else {
-                _this.$message.error(response);
-              }
-            }
-          });
-          document.onmousemove=null;
-          document.onmouseup = null;
-        }
-      },
         startLoading(area){
           if(area==='showFullScreen'){
             //this.showLoadingScreen = true;
@@ -915,17 +771,6 @@ export default {
             //this.showLoading = true;
             this.$refs['localLoading'+this.chartIndex].startLoading();
           }
-/*
-          //this.loading = this.$loading({
-          this.loading = Loading.service({
-            lock:true,
-            text:'loading',
-            background:'rgba(0,0,0,0)',
-            customClass:'loading-font',
-            //fullscreen: false,
-            target:document.getElementById('chartTableDiv')
-          })
-*/
         },
         endLoading(area){
           if(area==='showFullScreen'){

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

@@ -1,8 +1,7 @@
 <style scoped>
   .chartBox {
     float:left;
-    padding: 0 10px;
+    padding: 20px 10px 0 10px;
-    margin: 10px 0;
     position:relative;
     box-sizing: border-box;
   }
@@ -1150,7 +1149,7 @@
                   }]
                 }
               }
-              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+              this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
             }else{
               this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
             }

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -261,7 +261,7 @@ export default {
             prev:parseInt(_this.data.prev),
             next:parseInt(_this.data.next),
           }
-          targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
+          targetDiv.style.height = (Math.floor((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
           _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
             if (response.code === 200) {
               //更新当前图表数据
@@ -302,7 +302,7 @@ export default {
       showLoad(chartItem) {
         this.$nextTick(() => {
           const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
-          let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
+          let height = Math.floor(chartItem.height/10)*10;//图表高度四舍五入
           if(height<this.minHeight){
             height = this.minHeight;
           }

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

@@ -793,7 +793,7 @@
               let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
               let divHeight = legendDiv.offsetHeight;
               let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-              let sumHeight = Math.round(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+              let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
                 //console.log("11____00",sumHeight,divHeight,legendDiv)
               self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
               self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
@@ -1241,7 +1241,7 @@
         //设置高度
         this.$nextTick(() => {
           const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-          let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
+          let height = Math.floor(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
           if(height<this.$chartResizeTool.minHeight){
             height = this.$chartResizeTool.minHeight;
           }

nezha-fronted/src/tools.js

@@ -362,7 +362,8 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
 //chart-resize工具
 export const chartResizeTool = {
   minHeight: 200, //图表最小高度
-  chartBlankHeight: 2, //图表空白占位高度
+  chartPaddingTop: 20, //图表padding-top
+  chartBlankHeight: 22, //图表空白占位高度(padding-top + border)
   chartTableBlankHeight: 6, //表格型图表额外空白占位高度
   chartBlankWidth: 20, //图表空白占位宽度
   containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
@@ -372,7 +373,7 @@ export const chartResizeTool = {
     return (containerWidth-this.containerBlankWidth)/12;
   },
   calculateHeight(original) {
-    let height = Math.round(original/this.stepHeight)*this.stepHeight;
+    let height = Math.floor(original/this.stepHeight)*this.stepHeight;
     if (height < this.minHeight) {
       height = this.minHeight;
     }
@@ -388,6 +389,7 @@ export const chartResizeTool = {
     if (!box) {
       box = vm.$refs[0].resizeBox;
     }
+    let chartPaddingTop = this.chartPaddingTop;
     let chartBlankWidth = this.chartBlankWidth;
     let chartBlankHeight = this.chartBlankHeight;
     let titleHeight = this.titleHeight;
@@ -424,7 +426,7 @@ export const chartResizeTool = {
       //将resize-box的宽高设为resize-shadow的宽高
       box.style.width = `${shadow.offsetWidth}px`;
       box.style.height = `${shadow.offsetHeight}px`;
-      data.height = Math.round(box.offsetHeight/stepHeight*stepHeight);
+      data.height = Math.floor(box.offsetHeight/stepHeight*stepHeight)+chartPaddingTop;
       data.span = Math.round((box.offsetWidth+chartBlankWidth)/stepWidth);
       //请求后台，保存变更
       if (data.height != originalData.height || data.span != originalData.span) {
@@ -443,10 +445,17 @@ export const chartResizeTool = {
       let heightChange = false;
       if (width > stepWidth/2) { //放大shadow宽
         widthChange = true;
-        shadow.style.width = `${shadow.offsetWidth+stepWidth}px`;
+        //判断是否因为百分数计算的宽度有小数的原因导致宽度超过当前行，使图表错误换行
+        let currentWidth = shadow.offsetWidth+stepWidth;
+        let currentSpan = Math.round((currentWidth+chartBlankWidth)/stepWidth);
+        let calcWidth = currentSpan*stepWidth-chartBlankWidth; //不会换行的宽度
+        shadow.style.width = `${calcWidth}px`;
       } else if (width <= 0-(stepWidth/2)) { //缩小shadow宽
         widthChange = true;
-        shadow.style.width = `${shadow.offsetWidth-stepWidth}px`;
+        let currentWidth = shadow.offsetWidth-stepWidth;
+        let currentSpan = Math.round(currentWidth/stepWidth);
+        let calcWidth = currentSpan*stepWidth-chartBlankWidth; //不会换行的宽度
+        shadow.style.width = `${calcWidth}px`;
       }
       if (widthChange) {
         shadowNewWidth = shadow.offsetWidth;
@@ -469,8 +478,8 @@ export const chartResizeTool = {
         }
         //chart外层宽高调整
         let outerBox = document.getElementById(`chart-${data.id}`);
-        outerBox.style.height = `${shadow.offsetHeight}px`;
+        outerBox.style.height = `${shadow.offsetHeight+chartPaddingTop}px`;
-        outerBox.style.width = `${shadow.offsetWidth+chartBlankWidth}px`;
+        outerBox.style.width = `${parseFloat(shadow.style.width.split("px")[0])+chartBlankWidth}px`;
       }
     }
   }