feat：蜂窝图组件实现

nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue

@@ -6,7 +6,7 @@
         <!--{{hexagonTextPos.data?hexagonTextPos.data.nums:''}}-->
       <!--</span>-->
     <!--</div>-->
-    <div id="hexagonSvg">
+    <div :id="hexagonSvgID">
 
     </div>
   </div>
@@ -15,24 +15,21 @@
 <script>
   import {SVG} from '@svgdotjs/svg.js'
   import '@svgdotjs/svg.panzoom.js'
-  let hexagonSvg=null;  //Svg的实例
+  import {getHexagon, setHexagon, delHexagon} from "../js/common";
-  let domSvg=null; //Svg的dom 用来控制缩放
-  let svgPolyline=null // Svg hexagon的边框
-  let allHexagonText=[];
   function hexagonEnter(){// 移入六边形
-    let level=this.first().data('level');
+    let color=this.first().data('hoverColor');
-    let color =  level==='P1'?'#FFCDCD':(level==='P2'?'#FFE0B8':'#B2ECD9');
     this.first().animate(100).stroke({width:3,color: '#909090'}).fill(color);
     this.animate(100).transform({scale: 1.1});
-    svgPolyline.animate(100).stroke({ color: '#909090'})
+    this.parent().find('polyline').animate(100).stroke({ color: '#909090'})
+    // svgPolyline.animate(100).stroke({ color: '#909090'})
   }
 
   function hexagonLeave(){// 移出六边形
-    let level=this.first().data('level');
+    let color=this.first().data('color');
-    let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
     this.first().animate(100).stroke({width:0,color: '#909090'}).fill(color);
     this.animate(100).transform({scale: 1});
-    svgPolyline.animate(100).stroke({ color: '#DADADA'})
+    this.parent().find('polyline').animate(100).stroke({ color: '#DADADA'})
+    // svgPolyline.animate(100).stroke({ color: '#DADADA'})
   }
 
   function hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
@@ -74,7 +71,7 @@
     }
   }
 
-  function borderMove(left,top,borderSize,type){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
+  function borderMove(left,top,borderSize,type,svgPolyline){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
     let point=[null,null];
     let MathSqrt3=Math.sqrt(3);
     let arr = svgPolyline.array();
@@ -111,39 +108,90 @@
   export default {
     name:"hexagonFigureSvg",
     props:{
-      hexData:{},
+      hexData:{},//数据
-      col:{},
+      hexagonSvgID:{//在同一个页面创建多个实例时 需要通过id区分
-      length:{}
+        type:String,
+        default:'hexagonSvg',
+      },
+      col:{},//列数
+      colorFrom:{//通过什么决定颜色
+        type:String,
+        default:'',
+      },
+      infoSet:{// 设置六边形内部内容  参数 group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
+        type:Function,
+      },
+      colorSet:{ //设置方块对应颜色 参数 item 当前item的数据
+        type:Function,
+        default:()=>{return { color:'#99D7C2',hoverColor:'#B2ECD9'}}
+      },
+      infoShow:{// 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect
+        type:Function,
+      },
+      infoHide:{// 设置六边形内部内容 缩小显示时的样式 参数 allHexagonRect
+        type:Function,
+      },
+      hexagonEdge:{ // 边框长度
+        type:Number,
+        default:90,
+      },
+      defaultRate:{//默认倍率
+        type:Number,
+        default:0.33,
+      },
+      magnifyRate:{//放大倍率
+        type:Number,
+        default:1,
+      },
+      isClickRate:{ // 是否支持点击放大
+        type:Boolean,
+        default:true,
+      },
+      isPanning:{ // 是否支持移动
+        type:Boolean,
+        default:true,
+      },
+      isPinchZoom:{ //是否支持手指缩放
+        type:Boolean,
+        default:false,
+      },
+      isWheelZoom:{ //是否支持手指缩放
+        type:Boolean,
+        default:false,
+      },
+      zoomFactor:{ //鼠标滚轮放大倍数
+        type:Number,
+        default:0.5,
+      },
+      zoomMin:{//最小倍数
+        type:Number,
+        default:0.2,
+      },
+      zoomMax:{//最小倍数
+        type:Number,
+        default:5,
+      }
     },
     watch:{
       hexData:{
         immediate: false,
         deep: true,
-        handler() {
+        handler(n) {
           this.init();
         }
       },
-      col:{
+      col:{ // 列数
         immediate: false,
         deep: true,
         handler() {
           this.init();
         }
       },
-      length:{
-        immediate: false,
-        deep: true,
-        handler() {
-          this.init();
-        }
-      },
-
     },
     data(){
       return {
         allHexagon:[],
         allGroup:[],
-        hexagonEdge:90,
         // col:5,
         row:5,
         boxPadLeft:360,
@@ -161,6 +209,7 @@
         timer:null,
         boxhexagonShow:false,
         pan:false,//是否移动
+        defaultColor:{ color:'#99D7C2',hoverColor:'#B2ECD9'},
       }
     },
     computed:{
@@ -168,6 +217,8 @@
         return (this.hexagonEdge*this.MathSqrt3/5)*0.5;
       }
     },
+    created(){
+    },
     mounted(){
       // this.init()
     },
@@ -178,18 +229,24 @@
        setTimeout(()=>{
          this.boxhexagonShow=true;
          this.$nextTick(()=>{
-           this.hexagonData = JSON.parse(JSON.stringify(this.hexData.concat(this.hexData,this.hexData)));
+           this.hexagonData = JSON.parse(JSON.stringify(this.hexData));
-           localStorage.setItem('hexagonData',JSON.stringify(this.hexData.concat(this.hexData,this.hexData,this.hexData,this.hexData,this.hexData,this.hexData)));
+           let box=`#${this.hexagonSvgID}`;
-           this.hexagonData = JSON.parse(localStorage.getItem('hexagonData'));
+           let hexagonSvg=SVG().addTo(box).size('100%','100%')
-           this.hexagonData=this.hexagonData.slice(0,this.length);
+             .panZoom({
-           hexagonSvg=SVG().addTo('#hexagonSvg').size('100%','100%')
+               zoomMin:this.zoomMin,
-             .panZoom({zoomMin:0.5,zoomMax:3,zoomFactor:0.3,pinchZoom:false,wheelZoom:false})
+               zoomMax:this.zoomMax,
+               zoomFactor:this.zoomFactor,
+               pinchZoom:this.isPinchZoom,
+               wheelZoom:this.isWheelZoom,
+               panning:this.isPanning
+             })
              .attr('id','SvgHex')
+             .attr('class',this.hexagonSvgID)
              .attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例
-           domSvg=document.getElementById('SvgHex');//svg dom
            hexagonSvg.on('click',this.hexagonSvgClearScale);
            hexagonSvg.on('panStart',this.hexagonSvgPanStart);
            hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
+           setHexagon(this.hexagonSvgID,{hexagonSvg:hexagonSvg,svgPolyline:null,allHexagonRect:[],allHexagonText:[]})
            this.getPadding().then(()=>{
              this.getDataPoint();
            });//获取到上方和左方的距离;
@@ -200,15 +257,23 @@
          return new Promise(resolve=>{
            let hexagonWidth = this.MathSqrt3*this.hexagonEdge+this.interspace;
            let hexagonHeight = this.hexagonEdge*2+this.interspace;
-           if(this.hexagonData.length<this.col){
+           let row=parseInt((this.hexagonData.length)/(this.col*2-1))*2;//行数是总数除2倍列数-1的整数部分 加上根据余数的判断
+           let dolNum=(this.hexagonData.length)%(this.col*2-1)
+           if(dolNum>0&&dolNum<=this.col){ //余数的判断
+             row+=1
+           } else if(dolNum>0&&dolNum>this.col){
+             row+=2
+           }
+           this.row=row;
+           if(this.hexagonData.length-1<=this.col){
              // boxPadLeft:200, boxPadTop:75,
              this.boxPadLeft=(this.$refs.box.offsetWidth-this.hexagonData.length*hexagonWidth)/2;
-             this.boxPadTop=(this.$refs.box.offsetHeight - hexagonHeight)/2
+             this.boxPadTop=(this.$refs.box.offsetHeight - hexagonHeight)/2; //只有一行是 到上方距离应该是两倍边长
            }else{
              this.boxPadLeft=(this.$refs.box.offsetWidth-this.col*hexagonWidth)/2;
-             this.boxPadTop=(this.$refs.box.offsetHeight - hexagonHeight*(Math.round(this.hexagonData.length/(this.col*2-1))+1))/2
+             this.boxPadTop=(this.$refs.box.offsetHeight - (hexagonHeight + (this.row-1)*hexagonHeight*3/4))/2; // 大于一行时 为一行的行高 + 3/2的行高
            }
-           this.row=(Math.round(this.hexagonData.length/(this.col*2-1))+1)*2
+
            resolve();
          })
       },
@@ -263,45 +328,28 @@
         });
         setTimeout(()=>{
           this.borderHex();
-          hexagonSvg.zoom(0.33)
+          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate)
         })
       },
       renderHexagon(item){ // 绘画六边形
        hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{
-         let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
+         let color= this.colorSet?this.colorSet(item):this.defaultColor;
-         let gruop=hexagonSvg.group();
+         let group=getHexagon(this.hexagonSvgID).hexagonSvg.group();
-         let polygon=gruop.polygon(data.svgStrPoint).fill(color);
+         let polygon=group.polygon(data.svgStrPoint).fill(color.color);
-         // let polygon=gruop.polygon(data.svgStrPoint).attr('class',item.level+' hexagon_child_child').attr('style','fill:lime;stroke:purple;stroke-width:1');
          polygon.data({
            ...data,
-           ...item
+           ...item,
+           ...color
          });
-         gruop.on('mouseenter',hexagonEnter);
+         group.on('mouseenter',hexagonEnter);
-         gruop.on('mouseleave',hexagonLeave);
+         group.on('mouseleave',hexagonLeave);
-         gruop.on('click',this.hexagonSvgScale.bind(this, polygon.data('center'),item,data));
+         group.on('click',this.hexagonSvgScale.bind(this, polygon.data('center'),item,data));
          this.allHexagon.push(polygon);
-         this.allGroup.push(gruop)
+         this.allGroup.push(group);
          // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
-         let rgbColor='0,0,0';
+         if(this.infoSet){
-         let rect1=gruop.rect(this.hexagonEdge, this.hexagonEdge/3)
+           this.infoSet(group, getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText,data,item,this);
-           .attr({
+         }
-             x: data.center[0]-this.hexagonEdge/2,
-             y: data.center[1]-this.hexagonEdge/2
-           }).fill({ color: `rgba(${rgbColor},0)`}).data({level:item.level,color:rgbColor});
-         gruop.text()
-         allHexagonText.push(rect1);
-         let rect2=gruop.rect(this.hexagonEdge, this.hexagonEdge/3
-         ).attr({
-           x: data.center[0]-this.hexagonEdge/2,
-           y: data.center[1]-this.hexagonEdge/2 + this.hexagonEdge/3 +5
-         }).fill({ color: `rgba(${rgbColor},0)`}).data({level:item.level,color:rgbColor});
-         allHexagonText.push(rect2);
-         let rect3=gruop.rect(this.hexagonEdge, this.hexagonEdge/3)
-           .attr({
-             x: data.center[0]-this.hexagonEdge/2,
-             y: data.center[1]-this.hexagonEdge/2+ this.hexagonEdge/3*2 + 10
-           }).fill({ color: `rgba(${rgbColor},0)`}).data({level:item.level,color:rgbColor});
-         allHexagonText.push(rect3);
        });
 
 
@@ -310,20 +358,19 @@
       },
       hexagonSvgScale(center,item1,data,e){
         window.event? window.event.cancelBubble = true : e.stopPropagation();
-       if(!this.pan){
+       if(!this.pan&&this.isClickRate){
-         hexagonSvg.animate(300).zoom(1,{ x: center[0], y: center[1] });
+         getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{ x: center[0], y: center[1] });
-         allHexagonText.forEach(item=>{
+         if(this.infoShow){
-           let rgbColor = item.data('color')
+           this.infoShow( getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText)
-           item.fill({ color: `rgba(${rgbColor},0.05)`})
+         }
-         })
        }
       },
       hexagonSvgClearScale(){
-        if(!this.pan){
+        if(!this.pan&&this.isClickRate){
-          hexagonSvg.animate(300).zoom(0.33);
+          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate);
-          allHexagonText.forEach(item=>{
+          if(this.infoHide){
-            item.fill({ color: 'rgba(115,205,175,0)'})
+            this.infoHide( getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText)
-          })
+          }
         }
       },
       hexColorToRgb(color){
@@ -350,18 +397,21 @@
       },
       hexagonSvgPanStart(ev){ // 实例移动开始 解绑点击函数
         ev.preventDefault();
-        setTimeout(()=>{
+        setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
           this.pan=true;
         },100)
       },
       hexagonSvgPanEnd(ev){ // 实例移动结束 重新绑定点击函数
         ev.preventDefault();
-        setTimeout(()=>{
+        setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
          this.pan=false;
        },100)
       },
       borderHex(){//外层边框 数组点
         let length = this.allHexagon.length;
+        if(length==0){//为0 调出
+          return
+        }
         let k={x:-this.interspace,y:-(this.interspace*2)*this.MathSqrt3/6};//边框对起点的偏移量
         let item=this.allHexagon[0].data('point')[0];
         let endItemSub=this.allHexagon[length-1].data('sub').split('-');
@@ -369,7 +419,7 @@
         let borderRow=endItemSub[0];
         let borderPoint=[item.x+k.x,item.y+k.y];
         let borderSize = this.hexagonEdge*1.2;
-        svgPolyline=hexagonSvg.polyline(borderPoint[0]+','+borderPoint[1]).fill('none').stroke({ color: '#DADADA', width: 1 , linecap: 'round', linejoin: 'round'});//边框 起点
+        getHexagon(this.hexagonSvgID).svgPolyline=getHexagon(this.hexagonSvgID).hexagonSvg.polyline(borderPoint[0]+','+borderPoint[1]).fill('none').stroke({ color: '#DADADA', width: 3 , linecap: 'round', linejoin: 'round'});//边框 起点
         //先从左到右划线 应该是 col的长度
         let borderColTop=0;
         if(borderRow==0){
@@ -377,40 +427,40 @@
         } else{
           borderColTop=this.col-1;
         }
-       for(let i=0;i<=borderColTop*2;i++){
+        for(let i=0;i<=borderColTop*2;i++){
-         if(i===1){
+          if(i===1){
-           borderSize = this.hexagonEdge*1.1
+            borderSize = this.hexagonEdge*1.1
-         }
+          }
-         if(i%2===0){
+          if(i%2===0){
-           borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1);
+            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
-         }else{
+          }else{
-           borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
+            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-         }
+          }
-       }
+        }
         borderSize = this.hexagonEdge*1.2
-       // 从上到下 应该是row的长度 分情况
+        // 从上到下 应该是row的长度 分情况
         let borderRowRight=0;//右边循环次数
         // 情况1 borderCol<=this.col && row==0时
         if((borderCol<=this.col-1)&&borderRow==0){
           borderRowRight=3;
           for(let i=0;i<borderRowRight-1;i++){
             if(i===1){
-              // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,true);
+              // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
               borderSize = this.hexagonEdge*1.2
             }
             if(i===2){
-              // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,true);
+              // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
               borderSize = this.hexagonEdge*1.1
             }
             if(i%4===0){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
@@ -423,20 +473,20 @@
               if(i==0){
                 borderSize = this.hexagonEdge*1.2;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
               borderSize = this.hexagonEdge*1.2;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
               borderSize = this.hexagonEdge*1.03;
               if(i===borderRowRight-1){
                 borderSize = this.hexagonEdge*1.1;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
@@ -449,17 +499,17 @@
               if(i==0){
                 borderSize = this.hexagonEdge*1.2
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
               borderSize = this.hexagonEdge*1.2;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
               borderSize = this.hexagonEdge*1.03;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
@@ -472,20 +522,20 @@
               if(i==0){
                 borderSize = this.hexagonEdge*1.2
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
               borderSize = this.hexagonEdge*1.2;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
               borderSize = this.hexagonEdge*1.03;
               if(i===borderRowRight-1){
                 borderSize = this.hexagonEdge*1.1;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }//向下移动
           borderSize = this.hexagonEdge*1.2
@@ -497,13 +547,13 @@
               borderSize = this.hexagonEdge
             }
             if(i%2===0){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else{
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
           borderSize = this.hexagonEdge*1.1
-          borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+          borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
         }
         // 情况5 borderCol<this.col && row>0 且 row 为偶数事
         if(borderCol<this.col-1&&borderRow>0&&borderRow%2==0){
@@ -514,20 +564,20 @@
               if(i==0){
                 borderSize = this.hexagonEdge*1.2
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
               borderSize = this.hexagonEdge*1.2;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
               borderSize = this.hexagonEdge*1.03;
               if(i===borderRowRight-2){
                 borderSize = this.hexagonEdge*1.15;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
           borderSize = this.hexagonEdge*1.2
@@ -542,28 +592,28 @@
               borderSize = this.hexagonEdge*1.1
             }
             if(i%2===0){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else{
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
           borderSize = this.hexagonEdge*1.1
-          borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
+          borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
         }
         // 从右到左 就是结束时的列数
         borderSize = this.hexagonEdge*1.2
         for(let i=0;i<=borderCol*2+1;i++){
           if(i===1){
-            // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,true);
+            // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
             borderSize = this.hexagonEdge*1.1
           }
           if(i==borderCol*2+1) {
             borderSize = this.hexagonEdge*1.2
           }
           if(i%2===0){
-            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
+            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
           }else{
-            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
+            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
           }
         }
         // 从下向上的移动
@@ -576,17 +626,17 @@
               if(i!== 0){
                 borderSize = this.hexagonEdge*1.03;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
               borderSize = this.hexagonEdge*1.2;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
@@ -594,42 +644,47 @@
           for(let i=0;i<=borderRow*2;i++){
             if(i%4===0){
               borderSize = this.hexagonEdge*1.2
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===1){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
             }
             else if(i%4===2){
               borderSize = this.hexagonEdge*1.03;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
               borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
+              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
       },
       clearData(){// 清除数据 以及解绑事件 防止内存崩溃
-       if(hexagonSvg){
+       if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
          this.allHexagon.forEach((item)=>{
            item.off('mouseenter',hexagonEnter);
            item.off('mouseleave',hexagonLeave);
            item.off('click',this.hexagonSvgScale);
-           // item.clear();
+           item.clear();
          })
          this.allHexagon=[];
          this.hexagonData=[];
-         hexagonSvg.off('click',this.hexagonSvgClearScale);
+         getHexagon(this.hexagonSvgID).hexagonSvg.off('click',this.hexagonSvgClearScale);
-         // svgPolyline.clear();
+         getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart',this.hexagonSvgPanStart);
-         // hexagonSvg.clear();
+         getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd',this.hexagonSvgPanEnd);
-         hexagonSvg=null;  //Svg的实例
+         getHexagon(this.hexagonSvgID).hexagonSvg=null;  //Svg的实例
-         svgPolyline=null // Svg hexagon的边框
+         getHexagon(this.hexagonSvgID).svgPolyline=null;// Svg hexagon的边框
+         delHexagon(this.hexagonSvgID)
        }
       },
 
     },
     beforeDestroy(){
-      this.clearData()
+      this.clearData();
+      if(getHexagon(this.hexagonSvgID)){
+        getHexagon(this.hexagonSvgID).allHexagonRect=null;//文本框
+        getHexagon(this.hexagonSvgID).allHexagonText=null;// 文本内容
+      }
     }
   }
 </script>

nezha-fronted/src/components/common/js/common.js

@@ -25,7 +25,17 @@ export function getChart(key) {
 export function setChart(key, value) {
   chartCache[`chart${key}`] = value;
 }
+const hexagonCache = {};
+export function getHexagon(key) {
+  return hexagonCache[`hexagon${key}`];
+}
 
+export function setHexagon(key, value) {
+  hexagonCache[`hexagon${key}`] = value;
+}
+export function delHexagon(key) {
+  delete  hexagonCache[`hexagon${key}`];
+}
 const mousePoint={ //在echart tooltip中获取不到鼠标在窗口的位置，在火狐没有window。event 在此兼容火狐 获取鼠标在窗口位置
   x:'',
   y:''

nezha-fronted/src/components/common/js/tools.js

@@ -56,7 +56,7 @@ export const clickoutside = {
         let path = e.path || (e.composedPath && e.composedPath());
         top: for (let i = 0; i < path.length; i++) {
           for (let j = 0; j < exceptClassName.length; j++) {
-            if (path[i].className && path[i].className.indexOf(exceptClassName[j]) != -1) {
+            if (path[i].className && path[i].className.indexOf && path[i].className.indexOf(exceptClassName[j]) != -1) {
               flag = false;
               break top;
             }

nezha-fronted/src/components/common/overView/messageRule.vue

@@ -1,10 +1,135 @@
 <template>
-    
+  <div style="width: 100%;height: 100%">
+    <hexagonBox
+      :hexData="data"
+      :col="col"
+      :length="length"
+      :colorFrom="'level'"
+      :colorSet="colorSet"
+      :infoSet="infoSet"
+      :infoShow="infoShow"
+      :infoHide="infoHide"
+      :hexagonEdge="hexagonEdge"
+    />
+  </div>
 </template>
 
 <script>
+  import hexagonBox from '../honeycomb/hexagonFigureSvg'
+  function textMouseDown(e){
+    window.event? window.event.cancelBubble = true : e.stopPropagation();
+  }
+  function textMouseEnter(e){
+    window.event? window.event.cancelBubble = true : e.stopPropagation();
+  }
+  function textMouseLeave(e){
+    window.event? window.event.cancelBubble = true : e.stopPropagation();
+  }
 	export default {
-		name:"messageRule"
+		name:"messageRule",
+    components:{
+      hexagonBox
+    },
+    props:{
+      data:{},
+      col:{},
+      length:{}
+    },
+    watch:{
+      data:{
+        immediate: false,
+        deep: true,
+        handler() {
+        }
+      },
+      col:{
+        immediate: false,
+        deep: true,
+        handler() {
+        }
+      },
+      length:{
+        immediate: false,
+        deep: true,
+        handler() {
+        }
+      },
+
+    },
+    data(){
+		  return{
+        hexagonEdge:90,
+      }
+    },
+    methods:{
+      colorSet(item){//设置方块颜色
+        // let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
+        // let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
+        switch(item.level){
+          case "P1":
+            return{
+              color:'#FFAB99',
+              hoverColor:'#FABEB2',
+            };
+          case "P2":
+            return{
+              color:'#FAAFAF',
+              hoverColor:'#FFCDCD',
+            };
+          case "P3":
+            return{
+              color:'#FFCF92',
+              hoverColor:'#FFE0B8',
+            };
+          default:
+            return{ color:'#99D7C2',hoverColor:'#B2ECD9'}
+        }
+      },
+      infoSet(group,allHexagonRect,allHexagonText,data,item,that){
+        // 设置内部文本
+        // group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
+        let rgbColor='0,0,0';
+        let rect1=group.rect(that.hexagonEdge, that.hexagonEdge/3)
+          .attr({
+            x: data.center[0]-that.hexagonEdge/2,
+            y: data.center[1]-that.hexagonEdge/2-7.5
+          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
+        let text1=group.text(item.alertName).attr({x: data.center[0]-that.hexagonEdge/2+5,y: data.center[1]-that.hexagonEdge/2-7.5+3})
+          .font({size:12}).fill({opacity:0});
+        allHexagonRect.push(rect1);
+        allHexagonText.push(text1);
+        text1.on('mousedown',textMouseDown);
+        let rect2=group.rect(that.hexagonEdge, that.hexagonEdge/3).attr({
+          x: data.center[0]-that.hexagonEdge/2,
+          y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3
+        }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
+        allHexagonRect.push(rect2);
+        let rect3=group.rect(that.hexagonEdge, that.hexagonEdge/3)
+          .attr({
+            x: data.center[0]-that.hexagonEdge/2,
+            y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 10-7.5+3
+          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
+        allHexagonRect.push(rect3);
+      },
+      infoShow(allHexagonRect,allHexagonText){
+        allHexagonRect.forEach(item=>{
+          let rgbColor = item.data('color')
+          item.fill({ color: `rgba(${rgbColor},0.05)`})
+        })
+        allHexagonText.forEach(item=>{
+          item.fill({ opacity:1})
+        });
+      },
+      infoHide(allHexagonRect,allHexagonText){
+        allHexagonRect.forEach(item=>{
+          let rgbColor = item.data('color')
+          item.fill({ color: `rgba(${rgbColor},0)`})
+        });
+        allHexagonText.forEach(item=>{
+          item.fill({ opacity:0})
+        });
+      }
+    }
 	}
 </script>