gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chenjinsong
2020-06-04 18:33:56 +08:00
parent f400b01146
commit 5f7c5f2731
5 changed files with 22 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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'){