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

2020-12-16 10:18:15 +08:00
parent 7f00a1483f
commit 6966e3a01d
4 changed files with 65 additions and 33 deletions
--- 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=[];
--- 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({
--- 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
        });
--- 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;*/