diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index e6180da5f..6751a8ccb 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/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(targetDivHeighttargetDivWidthNew){ - span = Math.floor((targetDivWidthNew*12)/maxWidth); - let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*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'){ diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 699474933..7ad7f7d1a 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -1,8 +1,7 @@