fix:修改project tooltip显示位置的问题

This commit is contained in:
zhangyu
2021-02-23 10:20:00 +08:00
parent f9632eeaca
commit 6acf8e56df
2 changed files with 32 additions and 8 deletions

View File

@@ -1683,7 +1683,10 @@ li{
color: $global-text-color-active; color: $global-text-color-active;
background-color: $dropdown-hover-background-color !important; background-color: $dropdown-hover-background-color !important;
} }
.el-select-dropdown__item.is-disabled:hover{
background-color: #FFF;
color: #C0C4CC;
}
.el-button--text, .el-button--text,
.el-button--text:focus, .el-button--text:focus,
.el-button--text:hover, .el-button--text:hover,

View File

@@ -245,7 +245,9 @@
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}" <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
v-if="tooltipPosition.show&&!editTopologyFlag" v-if="tooltipPosition.show&&!editTopologyFlag"
@mouseover="tooltipOver" @mouseover="tooltipOver"
@mouseout="tooltipOut"> @mouseout="tooltipOut"
ref="topoTooltip"
>
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/> <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
</div> </div>
</div> </div>
@@ -1263,7 +1265,27 @@
this.tooltipPosition.show=false; this.tooltipPosition.show=false;
setTimeout(()=>{ setTimeout(()=>{
this.tooltipPosition.show=true; this.tooltipPosition.show=true;
},50); let ePosition=window.ePosition;
let boxWidth=document.getElementsByClassName('page')[0].offsetWidth;
let boxHeight=document.getElementsByClassName('page')[0].offsetHeight;
this.tooltipPosition.left=ePosition.layerX+20;
this.tooltipPosition.top=ePosition.layerY;
this.$nextTick(()=>{
if(this.$refs['topoTooltip']){
// console.log(boxWidth,ePosition.layerX,this.$refs['topoTooltip'].offsetWidth,boxHeight,ePosition.layerY,);
if((boxWidth/2)>ePosition.layerX){
this.tooltipPosition.left=ePosition.layerX+20;
}else {
this.tooltipPosition.left=ePosition.layerX - 20 - this.$refs['topoTooltip'].offsetWidth;
}
if(boxHeight>(ePosition.layerY+this.$refs['topoTooltip'].offsetHeight)){
this.tooltipPosition.top=ePosition.layerY;
}else {
this.tooltipPosition.top=ePosition.layerY - this.$refs['topoTooltip'].offsetHeight;
}
}
})
},100);
break; break;
case 'moveOutNode': case 'moveOutNode':
case 'moveOutLine': case 'moveOutLine':
@@ -1273,13 +1295,13 @@
this.timer3=setTimeout(()=>{ this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false; this.tooltipPosition.show=false;
this.timer3=null this.timer3=null
},150) },50)
}else{ }else{
clearTimeout(this.timer3); clearTimeout(this.timer3);
this.timer3=setTimeout(()=>{ this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false; this.tooltipPosition.show=false;
this.timer3=null this.timer3=null
},150) },50)
} }
break; break;
} }
@@ -1830,8 +1852,7 @@
if(this.tooltipPosition.show){ if(this.tooltipPosition.show){
return return
} }
this.tooltipPosition.top=e.offsetY; window.ePosition=e
this.tooltipPosition.left=e.offsetX+20;
}, },
tooltipOver(){ tooltipOver(){
clearTimeout(this.timer3); clearTimeout(this.timer3);
@@ -1841,7 +1862,7 @@
this.timer3=setTimeout(()=>{ this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false; this.tooltipPosition.show=false;
this.timer3=null this.timer3=null
},150) },50)
}, },
nodeDefaultWidth(nodeName){ nodeDefaultWidth(nodeName){
switch(nodeName){ switch(nodeName){