fix：根据初始分辨率确定六方图的初始边长 修改点击bug

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,10 +359,13 @@
         this.renderSomeHexagonAll();
       },
       renderSomeHexagonAll(){// 遍历所有数据 绘画六边形 之后画边框
+        let arr=[]
         this.hexagonData.forEach(item=>{
-          this.renderHexagon(item)
+          this.renderHexagon(item);
+          arr.push(this.renderHexagon.bind(this,item))
         });
-        setTimeout(()=>{
+        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');
@@ -352,11 +374,15 @@
             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();
@@ -374,12 +400,16 @@
             this.allGroup.push(group);
             // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
             if(this.infoSet){
-            this.infoSet(group,getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText,data,item,this);
+              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)
     }
   }
 </script>

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);
 

nezha-fronted/src/components/common/project/overViewTopology.vue

@@ -304,6 +304,7 @@
         let this_ = this;
         this.nodes = new Vis.DataSet(nodes);
         this.edges = new Vis.DataSet(edges);
+        if(this.network){
           this.network.setData({
             nodes: this_.nodes,
             edges: this_.edges
@@ -313,6 +314,7 @@
             // 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;