From 248a5640b00c4b4a4fe8064c051d7cfe1b229d26 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 17 Dec 2020 15:39:07 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=A0=B9=E6=8D=AE=E5=88=9D?= =?UTF-8?q?=E5=A7=8B=E5=88=86=E8=BE=A8=E7=8E=87=E7=A1=AE=E5=AE=9A=E5=85=AD?= =?UTF-8?q?=E6=96=B9=E5=9B=BE=E7=9A=84=E5=88=9D=E5=A7=8B=E8=BE=B9=E9=95=BF?= =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E7=82=B9=E5=87=BBbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/honeycomb/hexagonFigureSvg.vue | 131 ++++++++++++------ .../common/overView/messageAsset.vue | 78 ++++++++--- .../common/project/overViewTopology.vue | 22 +-- 3 files changed, 155 insertions(+), 76 deletions(-) diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue index 032cc3722..825e6ea9a 100644 --- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue +++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue @@ -127,14 +127,10 @@ infoHide:{// 设置六边形内部内容 缩小显示时的样式 参数 allHexagonRect type:Function, }, - hexagonEdge:{ // 边框长度 + hexagonEdgeProp:{ // 边框长度 type:Number, default:90, }, - defaultRate:{//默认倍率 - type:Number, - default:0.33, - }, magnifyRate:{//放大倍率 type:Number, default:1, @@ -167,7 +163,10 @@ type:Number, default:5, }, - from:{} + from:{ + type:String, + default:'asset', + } }, watch:{ hexData:{ @@ -184,6 +183,13 @@ this.init(); } }, + hexagonEdgeProp:{ + immediate:false, + deep:true, + handler(n){ + console.log(n,123213123123); + } + } }, data(){ return { @@ -203,13 +209,17 @@ show:false, data:null }, - timer:null, boxhexagonShow:false, pan:false,//是否移动 defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'}, viewBox:null, isShowHover:true,//是否显示hover块 timer:null,// 定时器用来处理单击双击的冲突 + firstInit:true,//优化刚加载时的多次点击造成放大缩小功能的不正常 + defaultRate:0.33,// 默认倍率 最小0.2 + defaultBoxWidth:2288, + hexagonEdge:90, + fontSize:14, } }, computed:{ @@ -221,12 +231,12 @@ }, mounted(){ // this.init() + }, methods:{ init(){ //创建svg实例 this.boxhexagonShow=false; - this.clearData(); - setTimeout(()=>{ + this.clearData().then(()=>{ this.boxhexagonShow=true; this.$nextTick(()=>{ this.hexagonData=JSON.parse(JSON.stringify(this.hexData)); @@ -246,6 +256,12 @@ hexagonSvg.on('click',this.hexagonSvgClearScale); hexagonSvg.on('panStart',this.hexagonSvgPanStart); hexagonSvg.on('panEnd',this.hexagonSvgPanEnd); + let Rate=(this.$refs.box.offsetWidth/this.defaultBoxWidth); + Rate=(Rate>0.2?Rate:0.2); + console.log(this.hexagonEdge,1); + this.hexagonEdge=(this.hexagonEdge/this.defaultRate)*Rate; + this.fontSize=(this.fontSize/this.defaultRate)*Rate; + console.log(this.hexagonEdge,2); setHexagon(this.hexagonSvgID,{ hexagonSvg:hexagonSvg, svgPolyline:null, @@ -262,8 +278,11 @@ }); this.getDataPoint(); });//获取到上方和左方的距离; + setTimeout(()=>{ + this.firstInit=false; + },500) }) - },100) + }); }, getPadding(){//确定到上方和下方的距离 保持居中 return new Promise(resolve=>{ @@ -340,46 +359,57 @@ this.renderSomeHexagonAll(); }, renderSomeHexagonAll(){// 遍历所有数据 绘画六边形 之后画边框 + let arr=[] this.hexagonData.forEach(item=>{ - this.renderHexagon(item) + this.renderHexagon(item); + arr.push(this.renderHexagon.bind(this,item)) }); - setTimeout(()=>{ - this.borderHex(); - getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate); - let hoverRect=getHexagon(this.hexagonSvgID).hexagonSvg.group().addClass('hoverRect'); - hoverRect.rect(); - hoverRect.text('a'); - hoverRect.hide(); - getHexagon(this.hexagonSvgID).hover=hoverRect; - setTimeout(()=>{ - this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox') - },300) - }) - }, - renderHexagon(item){ // 绘画六边形 - hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{ - let color=this.colorSet?this.colorSet(item):this.defaultColor; - let group=getHexagon(this.hexagonSvgID).hexagonSvg.group(); - let polygon=group.polygon(data.svgStrPoint).fill(color.color); - polygon.data({ - ...data, - ...item, - ...color - }); - 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)); - - this.allHexagon.push(polygon); - this.allGroup.push(group); - // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置 - if(this.infoSet){ - this.infoSet(group,getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText,data,item,this); + Promise.all(arr).then(()=>{ + if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){ + this.borderHex(); + getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate); + let hoverRect=getHexagon(this.hexagonSvgID).hexagonSvg.group().addClass('hoverRect'); + hoverRect.rect(); + hoverRect.text('a'); + hoverRect.hide(); + getHexagon(this.hexagonSvgID).hover=hoverRect; + setTimeout(()=>{ + if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){ + this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox') + } + },300) } }); }, + renderHexagon(item){ // 绘画六边形 + return new Promise(resolve=>{ + hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{ + let color=this.colorSet?this.colorSet(item):this.defaultColor; + let group=getHexagon(this.hexagonSvgID).hexagonSvg.group(); + let polygon=group.polygon(data.svgStrPoint).fill(color.color); + polygon.data({ + ...data, + ...item, + ...color + }); + 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)); + + this.allHexagon.push(polygon); + this.allGroup.push(group); + // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置 + if(this.infoSet){ + this.infoSet(group,getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText,data,item,this.fontSize,this); + } + resolve(); + }); + }) + }, hexagonOver(that,e){// 移入六边形 let color=that.first().data('hoverColor'); + that.first().timeline().unschedule(that.first().animate()); + that.timeline().unschedule(that.first().animate()); that.first().animate(100).stroke({width:3,color:'#909090'}).fill(color); that.animate(100).transform({scale:1.1}); that.parent().find('polyline').stroke({color:'#909090'}); @@ -413,6 +443,8 @@ }, hexagonOut(that){// 移出六边形 let color=that.first().data('color'); + that.first().timeline().unschedule(that.first().animate()); + that.timeline().unschedule(that.first().animate()); that.first().animate(100).stroke({width:0,color:'#909090'}).fill(color); that.animate(100).transform({scale:1}); that.parent().find('polyline').stroke({color:'#DADADA'}); @@ -434,8 +466,13 @@ } this.isShowHover=false; } + let hover=getHexagon(this.hexagonSvgID).hexagonSvg.find('.hoverRect'); + if(hover){ + hover.hide(); + } }, hexagonSvgClearScale(){ + if(this.firstInit){return} if(this.group){ this.group.off('dblclick',this.hexagonSvgClearScale); this.group=null; @@ -482,7 +519,7 @@ setTimeout(()=>{ // 设置延时 解决移动后的缩放问题 this.pan=false; },100) - if(this.isShowHover){ + if(this.isShowHover&&getHexagon(this.hexagonSvgID).hexagonSvg){ this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox'); } }, @@ -733,7 +770,7 @@ getHexagon(this.hexagonSvgID).svgPolyline.on('mouseover',PolylineOver) - getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout',PolylineOut) + getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout',PolylineOut); }, clearData(){// 清除数据 以及解绑事件 防止内存崩溃 if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){ @@ -753,6 +790,9 @@ getHexagon(this.hexagonSvgID).svgPolyline=null;// Svg hexagon的边框 delHexagon(this.hexagonSvgID) } + return new Promise(resolve=>{ + resolve() + }) }, }, @@ -762,6 +802,7 @@ getHexagon(this.hexagonSvgID).allHexagonRect=null;//文本框 getHexagon(this.hexagonSvgID).allHexagonText=null;// 文本内容 } + // clearTimeout(this.timer) } } diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue index b3e115290..85cbd2d5e 100644 --- a/nezha-fronted/src/components/common/overView/messageAsset.vue +++ b/nezha-fronted/src/components/common/overView/messageAsset.vue @@ -93,11 +93,13 @@ return{ color:'#99D7C2',hoverColor:'#B2ECD9'} } }, - infoSet(group,allHexagonRect,allHexagonText,data,item,that){ + infoSet(group,allHexagonRect,allHexagonText,data,item,fontSize,that){ // 设置内部文本 // group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例 let rgbColor='0,0,0'; let str=''; + let textPaddingWidth=''; + let textPaddingHeight=''; let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/3) .attr({ x: data.center[0]-that.hexagonEdge/2-10, @@ -107,11 +109,20 @@ }).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+3, - }) - .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide(); + if(str.length>=10){ + str=str.slice(0,6)+"..." + } + let text0=group.text(str).attr({x:0,y:0}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); + console.log(text0.bbox()); + textPaddingWidth=(that.hexagonEdge+20)-(text0.bbox().width); + textPaddingHeight=(that.hexagonEdge/3)-(text0.bbox().height); + text0.attr({ + x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, + y: data.center[1]-that.hexagonEdge + textPaddingHeight/2-4, + }).hide() + + + allHexagonRect.push(rect0); allHexagonText.push(text0); text0.on('mousedown',textMouseDown); @@ -124,26 +135,41 @@ rx:6, ry:6, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); - str="P1 : "+item.alert[0].P1 - let text1=group.text(str).attr({ - x: data.center[0]-(str.length*3.5), - y: data.center[1]-that.hexagonEdge/2-7.5+3}) - .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide(); + str="P1 : "+item.alert[0].P1; + if(str.length>=10){ + str=str.slice(0,6)+"..." + } + let text1=group.text(str).attr({x:0,y:0}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); + textPaddingWidth=(that.hexagonEdge+20)-(text1.bbox().width); + textPaddingHeight=(that.hexagonEdge/3)-(text1.bbox().height); + text1.attr({ + x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, + y: data.center[1]-that.hexagonEdge/2-7.5 +textPaddingHeight/2-4, + }).hide() + + + allHexagonRect.push(rect1); allHexagonText.push(text1); 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 +0.5, rx:6, ry:6, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); - str="P2 : "+item.alert[0].P2 - let text2=group.text(str).attr({ - x: data.center[0]-(str.length*3.5), - y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3}) - .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide(); + str="P2 : "+item.alert[0].P2; + if(str.length>=10){ + str=str.slice(0,6)+"..." + } + let text2=group.text(str).attr({x:0,y:0}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); + textPaddingWidth=(that.hexagonEdge+20)-(text2.bbox().width); + textPaddingHeight=(that.hexagonEdge/3)-(text2.bbox().height); + text2.attr({ + x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, + y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 + 0.5+textPaddingHeight/2-4, + }).hide() allHexagonRect.push(rect2); allHexagonText.push(text2); @@ -151,15 +177,25 @@ 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 + 5.5, rx:6, ry:6, }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor}); str="P3 : "+item.alert[0].P3; + if(str.length>=10){ + str=str.slice(0,6)+"..." + } let text3=group.text(str).attr({ - x: data.center[0]-(str.length*3.5), - y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3+3}) - .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide(); + x: data.center[0]-5, + y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3}) + .font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600}); + textPaddingWidth=(that.hexagonEdge+20)-(text3.bbox().width); + textPaddingHeight=(that.hexagonEdge/3)-(text3.bbox().height); + text3.attr({ + x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2, + y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 +5.5+textPaddingHeight/2-4, + }).hide() + allHexagonRect.push(rect3); allHexagonText.push(text3); diff --git a/nezha-fronted/src/components/common/project/overViewTopology.vue b/nezha-fronted/src/components/common/project/overViewTopology.vue index 44d43acd8..16d3e97f2 100644 --- a/nezha-fronted/src/components/common/project/overViewTopology.vue +++ b/nezha-fronted/src/components/common/project/overViewTopology.vue @@ -304,15 +304,17 @@ let this_ = this; this.nodes = new Vis.DataSet(nodes); this.edges = new Vis.DataSet(edges); - this.network.setData({ - nodes: this_.nodes, - edges: this_.edges - }); - this_.network.moveTo({ - position: this_.viewsCenter, - // scale: this_.zoom, - offset: {x:0, y:0}, - }); + if(this.network){ + this.network.setData({ + nodes: this_.nodes, + edges: this_.edges + }); + this_.network.moveTo({ + position: this_.viewsCenter, + // scale: this_.zoom, + offset: {x:0, y:0}, + }); + } if(!flag){ this.$nextTick(()=>{ this_.modelTopUpdate(); @@ -691,7 +693,7 @@ mounted(){ // this.timeInterval=setInterval(()=>{ // this.qqq(); - // console.log(123); + // console.log(123);this.network.setData({ // },300); setTimeout(()=>{ let this_=this;