feat：优化蜂窝图的缩放效果 ，添加双击缩小效果，以及边框圆角

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),
+              x:center[0]-(str.length*20+30)/2,
-              y:center[1]-32
+              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){
+        this.timer=setTimeout(()=>{
-          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]});
+          if(!this.pan&&this.isClickRate){
-          if(this.infoShow){
+            getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]});
-            this.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
+            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=[];

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({

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_.setData();
-            this_.selNodeArrUpdate();
+            setTimeout(()=>{
-            this_.networkPopShow=false;
+              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
         });

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;*/