diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue index 4322929f4..2206a591d 100644 --- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue +++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue @@ -174,7 +174,6 @@ immediate:false, deep:true, handler(n){ - console.log(n); this.init(); } }, @@ -210,6 +209,7 @@ defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'}, viewBox:null, isShowHover:true,//是否显示hover块 + timer:null,// 定时器用来处理单击双击的冲突 } }, computed:{ @@ -350,7 +350,10 @@ hoverRect.rect(); hoverRect.text('a'); hoverRect.hide(); - getHexagon(this.hexagonSvgID).hover=hoverRect + getHexagon(this.hexagonSvgID).hover=hoverRect; + setTimeout(()=>{ + this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox') + },300) }) }, renderHexagon(item){ // 绘画六边形 @@ -366,7 +369,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.on('dbclick',this.hexagonSvgClearScale.bind(this,polygon.data('center'),item,data)); + group.on('dblclick',this.hexagonSvgClearScale.bind(this,polygon.data('center'),item,data)); this.allHexagon.push(polygon); this.allGroup.push(group); // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置 @@ -375,7 +378,7 @@ } }); }, - hexagonOver(that){// 移入六边形 + hexagonOver(that,e){// 移入六边形 let color=that.first().data('hoverColor'); that.first().animate(100).stroke({width:3,color:'#909090'}).fill(color); that.animate(100).transform({scale:1.1}); @@ -385,21 +388,27 @@ if(this.isShowHover&&hover&&this.from){ let center=that.first().data('center'); let str=this.from==='asset'?that.first().data('host'):that.first().data('module'); - console.log(str); str+=''; hover.show(); - hover.get(0).attr( - { - x:center[0]-this.hexagonEdge-(str.length*20+30), - y:center[1]-36 - } - ).fill({ color: `rgba(0,0,0,0.3)`}).size((str.length*20+30),72); hover.get(1).attr( { - x:center[0]-this.hexagonEdge-(str.length*20+15), - y:center[1]-32 + x:center[0]-(str.length*20+30)/2, + y:center[1]-this.hexagonEdge-76, } ).fill({ color: '#fff',weight:400}).text(str).font({size:36}); + let textPaddingWidth=((str.length*20+30)-hover.get(1).bbox()[0].width)/2; + hover.get(1).attr( + { + x:center[0]-(str.length*20+30)/2+textPaddingWidth, + y:center[1]-this.hexagonEdge-76, + } + ); + hover.get(0).attr( + { + x:center[0]-(str.length*20+30)/2, + y:center[1]-this.hexagonEdge-80, + } + ).fill({ color: `rgba(0,0,0,0.3)`}).size((str.length*20+30),72).attr({ rx:"10",ry:"10"}); } }, hexagonOut(that){// 移出六边形 @@ -414,17 +423,20 @@ }, hexagonSvgScale(center,item1,data,e){ window.event?window.event.cancelBubble=true:e.stopPropagation(); - 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.timer=setTimeout(()=>{ + 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.isShowHover=false; - } + },220); }, hexagonSvgClearScale(){ + clearTimeout(this.timer); if(!this.pan&&this.isClickRate){ - getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate); + getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate).attr('viewBox',this.viewBox); if(this.infoHide){ this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText) } @@ -465,6 +477,9 @@ setTimeout(()=>{ // 设置延时 解决移动后的缩放问题 this.pan=false; },100) + if(this.isShowHover){ + this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox'); + } }, borderHex(){//外层边框 数组点 let length=this.allHexagon.length; @@ -721,7 +736,7 @@ item.off('mouseover',this.hexagonOver); item.off('mouseout',this.hexagonOut); item.off('click',this.hexagonSvgScale); - item.off('dbclick',this.hexagonSvgClearScale); + item.off('dblclick',this.hexagonSvgClearScale); item.clear(); }) this.allHexagon=[]; diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue index b3161f266..b3e115290 100644 --- a/nezha-fronted/src/components/common/overView/messageAsset.vue +++ b/nezha-fronted/src/components/common/overView/messageAsset.vue @@ -98,16 +98,18 @@ // group 对应六边形所在的组。allHexagonRect吧所有文本框放入,方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例 let rgbColor='0,0,0'; let str=''; - let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/4) + let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/3) .attr({ x: data.center[0]-that.hexagonEdge/2-10, - y: data.center[1]-that.hexagonEdge + y: data.center[1]-that.hexagonEdge, + rx:5, + ry:5, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); str=this.from==='asset'?item.host:item.module; str+=''; let text0=group.text(str).attr({ x: data.center[0]-(str.length*3.5), - y: data.center[1]-that.hexagonEdge, + y: data.center[1]-that.hexagonEdge+3, }) .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide(); allHexagonRect.push(rect0); @@ -118,7 +120,9 @@ let rect1=group.rect(that.hexagonEdge+20, that.hexagonEdge/3) .attr({ x: data.center[0]-that.hexagonEdge/2-10, - y: data.center[1]-that.hexagonEdge/2-7.5 + y: data.center[1]-that.hexagonEdge/2-7.5, + rx:6, + ry:6, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); str="P1 : "+item.alert[0].P1 let text1=group.text(str).attr({ @@ -131,7 +135,9 @@ let rect2=group.rect(that.hexagonEdge+20, that.hexagonEdge/3).attr({ x: data.center[0]-that.hexagonEdge/2-10, - y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3 + y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3, + rx:6, + ry:6, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); str="P2 : "+item.alert[0].P2 let text2=group.text(str).attr({ @@ -145,7 +151,9 @@ let rect3=group.rect(that.hexagonEdge+20, that.hexagonEdge/3) .attr({ x: data.center[0]-that.hexagonEdge/2-10, - y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3 + y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3, + rx:6, + ry:6, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); str="P3 : "+item.alert[0].P3; let text3=group.text(str).attr({ diff --git a/nezha-fronted/src/components/common/project/overViewTopology.vue b/nezha-fronted/src/components/common/project/overViewTopology.vue index 4118c568d..44d43acd8 100644 --- a/nezha-fronted/src/components/common/project/overViewTopology.vue +++ b/nezha-fronted/src/components/common/project/overViewTopology.vue @@ -698,9 +698,18 @@ this.init('modal'); this.network.on("resize", function (params) {//检测resize setTimeout(()=>{ - this_.modelTopUpdate(); - this_.selNodeArrUpdate(); - this_.networkPopShow=false; + this_.setData(); + setTimeout(()=>{ + this_.zoom=this_.network.view.targetScale; + this_.network.moveTo({ + // position: this_.viewsCenter, + scale: this_.zoom-0.1, + offset: {x:0, y:0}, + }); + this_.modelTopUpdate(); + this_.selNodeArrUpdate(); + this_.networkPopShow=false; + },100) }); return false }); diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue index 75b6c3f22..d874e6ce0 100644 --- a/nezha-fronted/src/components/common/project/topology.vue +++ b/nezha-fronted/src/components/common/project/topology.vue @@ -1145,13 +1145,13 @@ color: #EC7F66; } .network-pop .no-selPop{ - color: #666; + color: #999; } .network-pop .no-selPop .nz-icon-liubianxing{ - color: rgba(102,102,102,0.5); + color: rgb(218,218,218); } .network-pop .no-selPop .nz-icon-chart{ - color: #666; + color: #999; } /*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/ /*color: #EC7F66;*/