diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
index ee2fd2e3d..f03785e57 100644
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -8,6 +8,9 @@
+
+
+
@@ -219,6 +222,7 @@
defaultBoxWidth:2288,
hexagonEdge:JSON.stringify(this.hexagonEdgeProp),
fontSize:14,
+ maskShow:true,
}
},
computed:{
@@ -235,6 +239,7 @@
methods:{
init(){ //创建svg实例
this.boxhexagonShow=false;
+ this.maskShow=true;
this.hexagonEdge=this.hexagonEdgeProp;
this.clearData().then(()=>{
this.boxhexagonShow=true;
@@ -375,6 +380,7 @@
if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox')
}
+ this.maskShow=false;
},300)
}
});
@@ -392,7 +398,7 @@
});
group.on('mouseenter',this.hexagonOver.bind(this,group));
group.on('mouseleave',this.hexagonOut.bind(this,group));
- group.on('click',this.hexagonSvgScale.bind(this,polygon.data('center'),item,data,group));
+ group.on('click',this.changeScale.bind(this,polygon.data('center'),item,data,group));
this.allHexagon.push(polygon);
this.allGroup.push(group);
@@ -451,6 +457,15 @@
hover.hide();
}
},
+ changeScale(center,item1,data,group,e){
+ window.event? window.event.cancelBubble = true:e.stopPropagation();
+ if(this.scaleFlag){
+ this.hexagonSvgScale(center,item1,data,group,e);
+ }else{
+ this.hexagonSvgClearScale(e)
+ }
+
+ },
hexagonSvgScale(center,item1,data,group,e){
window.event? window.event.cancelBubble = true:e.stopPropagation();
if(this.timer){
@@ -458,13 +473,14 @@
this.timer=null;
}
this.group=group;
- this.group.on('dblclick',this.hexagonSvgClearScale);
+ // this.group.on('dblclick',this.hexagonSvgClearScale);
if(!this.pan&&this.isClickRate){
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]});
if(this.infoShow){
this.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
}
this.isShowHover=false;
+ this.scaleFlag=false;
}
let hover=getHexagon(this.hexagonSvgID).hexagonSvg.find('.hoverRect');
if(hover){
@@ -475,11 +491,12 @@
window.event? window.event.cancelBubble = true:e.stopPropagation();
if(this.firstInit){return}
if(this.group){
- this.group.off('dblclick',this.hexagonSvgClearScale);
+ // this.group.off('dblclick',this.hexagonSvgClearScale);
this.group=null;
}
if(!this.pan&&this.isClickRate){
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate).attr('viewBox',this.viewBox);
+ this.scaleFlag=true;
if(this.infoHide){
this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
}
@@ -780,8 +797,8 @@
this.allHexagon.forEach((item)=>{
item.off('mouseover',this.hexagonOver);
item.off('mouseout',this.hexagonOut);
- item.off('click',this.hexagonSvgScale);
- item.off('dblclick',this.hexagonSvgClearScale);
+ item.off('click',this.changeScale);
+ // item.off('dblclick',this.hexagonSvgClearScale);
item.clear();
})
this.allHexagon=[];
@@ -824,6 +841,24 @@
z-index: 1;
font-size: 10px;
}
+ .stop {
+
+ -webkit-animation-play-state: paused;
+
+ -moz-animation-play-state: paused;
+
+ animation-play-state: paused;
+
+ }
+ .mask{
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ opacity: 0;
+ z-index: 20;
+ top:0;
+ left: 0;
+ }