feat：蜂窝图 接口联调 添加hover显示名称的功能

nezha-fronted/src/components/common/alert/alertMessageTable.vue

@@ -921,9 +921,11 @@
     */
     },
     beforeDestroy(){
+     if(this.scrollbarWrap){
        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
      }
     }
+  }
 
 </script>
 

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

@@ -15,21 +15,14 @@
 <script>
   import {SVG} from '@svgdotjs/svg.js'
   import '@svgdotjs/svg.panzoom.js'
-  import {getHexagon, setHexagon, delHexagon} from "../js/common";
-  function hexagonEnter(){// 移入六边形
-    let color=this.first().data('hoverColor');
-    this.first().animate(100).stroke({width:3,color: '#909090'}).fill(color);
-    this.animate(100).transform({scale: 1.1});
-    this.parent().find('polyline').animate(100).stroke({ color: '#909090'})
-    // svgPolyline.animate(100).stroke({ color: '#909090'})
+  import {getHexagon,setHexagon,delHexagon} from "../js/common";
+
+  function PolylineOver(){
+    this.stroke({color:'#909090'})
   }
 
-  function hexagonLeave(){// 移出六边形
-    let color=this.first().data('color');
-    this.first().animate(100).stroke({width:0,color: '#909090'}).fill(color);
-    this.animate(100).transform({scale: 1});
-    this.parent().find('polyline').animate(100).stroke({ color: '#DADADA'})
-    // svgPolyline.animate(100).stroke({ color: '#DADADA'})
+  function PolylineOut(){
+    this.stroke({color:'#DADADA'})
   }
 
   function hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
@@ -74,7 +67,7 @@
   function borderMove(left,top,borderSize,type,svgPolyline){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
     let point=[null,null];
     let MathSqrt3=Math.sqrt(3);
-    let arr = svgPolyline.array();
+    let arr=svgPolyline.array();
     switch(type){
       case 1: //从左到右的斜上方运动
         point[0]=left+MathSqrt3*borderSize/2;
@@ -105,6 +98,7 @@
     svgPolyline.plot(arr);
     return point
   }
+
   export default {
     name:"hexagonFigureSvg",
     props:{
@@ -123,7 +117,9 @@
       },
       colorSet:{ //设置方块对应颜色 参数 item 当前item的数据
         type:Function,
-        default:()=>{return { color:'#99D7C2',hoverColor:'#B2ECD9'}}
+        default:()=>{
+          return {color:'#99D7C2',hoverColor:'#B2ECD9'}
+        }
       },
       infoShow:{// 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect
         type:Function,
@@ -170,20 +166,22 @@
       zoomMax:{//最小倍数
         type:Number,
         default:5,
-      }
+      },
+      from:{}
     },
     watch:{
       hexData:{
-        immediate: false,
-        deep: true,
-        handler(n) {
+        immediate:false,
+        deep:true,
+        handler(n){
+          console.log(n);
           this.init();
         }
       },
       col:{ // 列数
-        immediate: false,
-        deep: true,
-        handler() {
+        immediate:false,
+        deep:true,
+        handler(){
           this.init();
         }
       },
@@ -209,7 +207,9 @@
         timer:null,
         boxhexagonShow:false,
         pan:false,//是否移动
-        defaultColor:{ color:'#99D7C2',hoverColor:'#B2ECD9'},
+        defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'},
+        viewBox:null,
+        isShowHover:true,//是否显示hover块
       }
     },
     computed:{
@@ -229,7 +229,7 @@
         setTimeout(()=>{
           this.boxhexagonShow=true;
           this.$nextTick(()=>{
-           this.hexagonData = JSON.parse(JSON.stringify(this.hexData));
+            this.hexagonData=JSON.parse(JSON.stringify(this.hexData));
             let box=`#${this.hexagonSvgID}`;
             let hexagonSvg=SVG().addTo(box).size('100%','100%')
               .panZoom({
@@ -246,8 +246,20 @@
             hexagonSvg.on('click',this.hexagonSvgClearScale);
             hexagonSvg.on('panStart',this.hexagonSvgPanStart);
             hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
-           setHexagon(this.hexagonSvgID,{hexagonSvg:hexagonSvg,svgPolyline:null,allHexagonRect:[],allHexagonText:[]})
+            setHexagon(this.hexagonSvgID,{
+              hexagonSvg:hexagonSvg,
+              svgPolyline:null,
+              allHexagonRect:[],
+              allHexagonText:[],
+              hover:null
+            })
             this.getPadding().then(()=>{
+              getHexagon(this.hexagonSvgID).svgPolyline=getHexagon(this.hexagonSvgID).hexagonSvg.polyline().fill('none').stroke({
+                color:'#DADADA',
+                width:3,
+                linecap:'round',
+                linejoin:'round'
+              });
               this.getDataPoint();
             });//获取到上方和左方的距离;
           })
@@ -255,25 +267,24 @@
       },
       getPadding(){//确定到上方和下方的距离 保持居中
         return new Promise(resolve=>{
-           let hexagonWidth = this.MathSqrt3*this.hexagonEdge+this.interspace;
-           let hexagonHeight = this.hexagonEdge*2+this.interspace;
+          let hexagonWidth=this.MathSqrt3*this.hexagonEdge+this.interspace;
+          let hexagonHeight=this.hexagonEdge*2+this.interspace;
           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){
+          }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 + (this.row-1)*hexagonHeight*3/4))/2; // 大于一行时 为一行的行高 + 3/2的行高
+            this.boxPadTop=(this.$refs.box.offsetHeight-(hexagonHeight+(this.row-1)*hexagonHeight*3/4))/2; // 大于一行时 为一行的行高 + 3/2的行高
           }
-
           resolve();
         })
       },
@@ -284,26 +295,32 @@
         let paddingLeft=this.boxPadLeft; //整体到左侧的距离
         let arrIndex=0;
         this.hexSize=this.MathSqrt3*this.hexagonEdge/2;
-        for(let i=0;i<row;i++){// 确定 所有 坐标点
-          if(arrIndex>this.hexagonData.length-1){break}
-          for(let j=0;j<col;j++){
-            if(arrIndex>this.hexagonData.length-1){break}
+        for(let i=0; i<row; i++){// 确定 所有 坐标点
+          if(arrIndex>this.hexagonData.length-1){
+            break
+          }
+          for(let j=0; j<col; j++){
+            if(arrIndex>this.hexagonData.length-1){
+              break
+            }
             if(i===0){
-              this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
-              this.hexagonData[arrIndex].top=i*(this.hexSize*2) + paddingTop;
+              this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
+              this.hexagonData[arrIndex].top=i*(this.hexSize*2)+paddingTop;
               this.hexagonData[arrIndex].sub=i+'-'+j
-            } else if(i%2===0) {
+            }else if(i%2===0){
               // if(i===2&&( j===1 || j==2)){
               //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
               //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8)+ paddingTop;
               // }else{
               //   continue;
               // }
-              this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
-              this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2*this.MathSqrt3 - this.hexSize*2/8)+ paddingTop;
+              this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
+              this.hexagonData[arrIndex].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
               this.hexagonData[arrIndex].sub=i+'-'+j
             }else{
-              if(j===col-1) {break}
+              if(j===col-1){
+                break
+              }
               // if(i!==3){
               //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
               //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
@@ -313,8 +330,8 @@
               // }else{
               //   continue;
               // }
-              this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
-              this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2*this.MathSqrt3 - this.hexSize*2/8) + paddingTop;
+              this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+this.hexSize*2/2+this.interspace/2+paddingLeft;
+              this.hexagonData[arrIndex].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
               this.hexagonData[arrIndex].sub=i+'-'+j
             }
             arrIndex++;
@@ -328,12 +345,17 @@
         });
         setTimeout(()=>{
           this.borderHex();
-          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate)
+          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
         })
       },
       renderHexagon(item){ // 绘画六边形
         hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{
-         let color= this.colorSet?this.colorSet(item):this.defaultColor;
+          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({
@@ -341,57 +363,94 @@
             ...item,
             ...color
           });
-         group.on('mouseenter',hexagonEnter);
-         group.on('mouseleave',hexagonLeave);
-         group.on('click',this.hexagonSvgScale.bind(this, polygon.data('center'),item,data));
+          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));
           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);
+            this.infoSet(group,getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText,data,item,this);
           }
         });
+      },
+      hexagonOver(that){// 移入六边形
+        let color=that.first().data('hoverColor');
+        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'});
+        let hover=that.parent().find('.hoverRect');
 
-
-
-
+        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
+            }
+          ).fill({ color: '#fff',weight:400}).text(str).font({size:36});
+        }
+      },
+      hexagonOut(that){// 移出六边形
+        let color=that.first().data('color');
+        that.first().animate(100).stroke({width:0,color:'#909090'}).fill(color);
+        that.animate(100).transform({scale:1});
+        that.parent().find('polyline').stroke({color:'#DADADA'});
+        let hover=that.parent().find('.hoverRect');
+        if(hover){
+          hover.hide();
+        }
       },
       hexagonSvgScale(center,item1,data,e){
-        window.event? window.event.cancelBubble = true : e.stopPropagation();
+        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] });
+          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.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
           }
+          this.isShowHover=false;
         }
       },
       hexagonSvgClearScale(){
         if(!this.pan&&this.isClickRate){
           getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate);
           if(this.infoHide){
-            this.infoHide( getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText)
+            this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
           }
+          this.isShowHover=true;
+          window.getSelection().empty();//取消选中文字
         }
       },
       hexColorToRgb(color){
-        let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+        let reg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
         // 把颜色值变成小写
-        if (reg.test(color)) {
+        if(reg.test(color)){
           // 如果只有三位的值，需变成六位，如：#fff => #ffffff
-          if (color.length === 4) {
-            let colorNew = "#";
-            for (let i = 1; i < 4; i += 1) {
-              colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+          if(color.length===4){
+            let colorNew="#";
+            for(let i=1; i<4; i+=1){
+              colorNew+=color.slice(i,i+1).concat(color.slice(i,i+1));
             }
-            color = colorNew;
+            color=colorNew;
           }
           // 处理六位的颜色值，转为RGB
-          let colorChange = [];
-          for (let i = 1; i < 7; i += 2) {
-            colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+          let colorChange=[];
+          for(let i=1; i<7; i+=2){
+            colorChange.push(parseInt("0x"+color.slice(i,i+2)));
           }
           return colorChange.join(",");
-        } else {
+        }else{
           return color;
         }
       },
@@ -408,7 +467,7 @@
         },100)
       },
       borderHex(){//外层边框 数组点
-        let length = this.allHexagon.length;
+        let length=this.allHexagon.length;
         if(length==0){//为0 调出
           return
         }
@@ -418,253 +477,251 @@
         let borderCol=endItemSub[1];
         let borderRow=endItemSub[0];
         let borderPoint=[item.x+k.x,item.y+k.y];
-        let borderSize = this.hexagonEdge*1.2;
-        getHexagon(this.hexagonSvgID).svgPolyline=getHexagon(this.hexagonSvgID).hexagonSvg.polyline(borderPoint[0]+','+borderPoint[1]).fill('none').stroke({ color: '#DADADA', width: 3 , linecap: 'round', linejoin: 'round'});//边框 起点
+        let borderSize=this.hexagonEdge*1.2;
+        getHexagon(this.hexagonSvgID).svgPolyline.plot([borderPoint]);
         //先从左到右划线 应该是 col的长度
         let borderColTop=0;
         if(borderRow==0){
           borderColTop=borderCol;
-        } else{
+        }else{
           borderColTop=this.col-1;
         }
-        for(let i=0;i<=borderColTop*2;i++){
+        for(let i=0; i<=borderColTop*2; i++){
           if(i===1){
-            borderSize = this.hexagonEdge*1.1
+            borderSize=this.hexagonEdge*1.1
           }
           if(i%2===0){
-            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
+            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
           }else{
-            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
+            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
           }
         }
-        borderSize = this.hexagonEdge*1.2
+        borderSize=this.hexagonEdge*1.2
         // 从上到下 应该是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++){
+          for(let i=0; i<borderRowRight-1; i++){
             if(i===1){
               // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
-              borderSize = this.hexagonEdge*1.2
+              borderSize=this.hexagonEdge*1.2
             }
             if(i===2){
               // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
             }
             if(i%4===0){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
         // 情况2 border==this.col&& row>0时 且row 为奇数事
         if(borderCol==this.col-2&&borderRow>0&&borderRow%2==1){
           borderRowRight=2*(Number(borderRow)+1);
-          for(let i=0;i<borderRowRight;i++){
+          for(let i=0; i<borderRowRight; i++){
             if(i%4===0){
-              borderSize = this.hexagonEdge*1.1;
+              borderSize=this.hexagonEdge*1.1;
               if(i==0){
-                borderSize = this.hexagonEdge*1.2;
+                borderSize=this.hexagonEdge*1.2;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.2;
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderSize = this.hexagonEdge*1.03;
+              borderSize=this.hexagonEdge*1.03;
               if(i===borderRowRight-1){
-                borderSize = this.hexagonEdge*1.1;
+                borderSize=this.hexagonEdge*1.1;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
         // 情况3 borderCol==this.col && row>0 且 row 为偶数事
         if(borderCol==this.col-1&&borderRow>0&&borderRow%2==0){
           borderRowRight=2*(Number(borderRow)+1)+1;
-          for(let i=0;i<borderRowRight-1;i++){
+          for(let i=0; i<borderRowRight-1; i++){
             if(i%4===0){
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
               if(i==0){
-                borderSize = this.hexagonEdge*1.2
+                borderSize=this.hexagonEdge*1.2
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.2;
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderSize = this.hexagonEdge*1.03;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.03;
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
         // 情况4 border<this.col&& row>0时 且row 为奇数事
         if(borderCol<this.col-2&&borderRow>0&&borderRow%2==1){
           borderRowRight=2*(Number(borderRow-1)+1);
-          for(let i=0;i<borderRowRight;i++){
+          for(let i=0; i<borderRowRight; i++){
             if(i%4===0){
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
               if(i==0){
-                borderSize = this.hexagonEdge*1.2
+                borderSize=this.hexagonEdge*1.2
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.2;
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderSize = this.hexagonEdge*1.03;
+              borderSize=this.hexagonEdge*1.03;
               if(i===borderRowRight-1){
-                borderSize = this.hexagonEdge*1.1;
+                borderSize=this.hexagonEdge*1.1;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }//向下移动
-          borderSize = this.hexagonEdge*1.2
-          for(let i=0;i<(this.col-borderCol-1)*2-1;i++){//向左移动
+          borderSize=this.hexagonEdge*1.2
+          for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
             if(i===1){
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
             }
             if(i==(this.col-borderCol-1)*2-2){
-              borderSize = this.hexagonEdge
+              borderSize=this.hexagonEdge
             }
             if(i%2===0){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else{
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
+          borderSize=this.hexagonEdge*1.1
+          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){
           borderRowRight=2*(Number(borderRow-1)+1)+1;
-          for(let i=0;i<borderRowRight-1;i++){
+          for(let i=0; i<borderRowRight-1; i++){
             if(i%4===0){
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
               if(i==0){
-                borderSize = this.hexagonEdge*1.2
+                borderSize=this.hexagonEdge*1.2
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.2;
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderSize = this.hexagonEdge*1.03;
+              borderSize=this.hexagonEdge*1.03;
               if(i===borderRowRight-2){
-                borderSize = this.hexagonEdge*1.15;
+                borderSize=this.hexagonEdge*1.15;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
-          borderSize = this.hexagonEdge*1.2
-          for(let i=0;i<(this.col-borderCol-1)*2-1;i++){//向左移动
+          borderSize=this.hexagonEdge*1.2
+          for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
             if(i==1){
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
             }
             if(i==(this.col-borderCol-1)*2-2){
-              borderSize = this.hexagonEdge*1
+              borderSize=this.hexagonEdge*1
             }
             if(((Number(borderCol)+2)==this.col)&&(i==0)){
-              borderSize = this.hexagonEdge*1.1
+              borderSize=this.hexagonEdge*1.1
             }
             if(i%2===0){
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
             }else{
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
+          borderSize=this.hexagonEdge*1.1
+          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++){
+        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,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
-            borderSize = this.hexagonEdge*1.1
+            borderSize=this.hexagonEdge*1.1
           }
-          if(i==borderCol*2+1) {
-            borderSize = this.hexagonEdge*1.2
+          if(i==borderCol*2+1){
+            borderSize=this.hexagonEdge*1.2
           }
           if(i%2===0){
-            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
+            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
           }else{
-            borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
+            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
           }
         }
         // 从下向上的移动
         // 分兩種情況
-        borderSize = this.hexagonEdge*1.2;
+        borderSize=this.hexagonEdge*1.2;
         if(borderRow%2==1){
-          for(let i=0;i<=borderRow*2;i++){
+          for(let i=0; i<=borderRow*2; i++){
             if(i%4===0){
-              borderSize = this.hexagonEdge*1.1;
-              if(i!== 0){
-                borderSize = this.hexagonEdge*1.03;
+              borderSize=this.hexagonEdge*1.1;
+              if(i!==0){
+                borderSize=this.hexagonEdge*1.03;
               }
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderSize = this.hexagonEdge*1.2;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.1;
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.1;
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
         if(borderRow%2==0){
-          for(let i=0;i<=borderRow*2;i++){
+          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,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.2
+              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,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-            else if(i%4===2){
-              borderSize = this.hexagonEdge*1.03;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.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,getHexagon(this.hexagonSvgID).svgPolyline);
             }else if(i%4===3){
-              borderSize = this.hexagonEdge*1.1;
-              borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
+              borderSize=this.hexagonEdge*1.1;
+              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
             }
           }
         }
+
+
+        getHexagon(this.hexagonSvgID).svgPolyline.on('mouseover',PolylineOver)
+        getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout',PolylineOut)
       },
       clearData(){// 清除数据 以及解绑事件 防止内存崩溃
         if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
           this.allHexagon.forEach((item)=>{
-           item.off('mouseenter',hexagonEnter);
-           item.off('mouseleave',hexagonLeave);
+            item.off('mouseover',this.hexagonOver);
+            item.off('mouseout',this.hexagonOut);
             item.off('click',this.hexagonSvgScale);
+            item.off('dbclick',this.hexagonSvgClearScale);
             item.clear();
           })
           this.allHexagon=[];
@@ -697,18 +754,20 @@
     min-width: 200px;
     min-height: 200px;
   }
-  .hexagon-text{
+
+  .hexagon-text {
     position: absolute;
     z-index: 1;
     font-size: 10px;
   }
 </style>
 <style>
-  #SvgHex{
+  #SvgHex {
     transition: transform .25s linear;
     transform-origin: 0 0;
   }
-  #SvgHex.hexagonSvgBox{
+
+  #SvgHex.hexagonSvgBox {
     transition: .25s linear;
   }
 </style>

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

@@ -0,0 +1,189 @@
+<template>
+  <div style="width: 100%;height: 100%" v-loading="loading">
+    <hexagonBox
+      :hexData="data"
+      :col="col"
+      :length="length"
+      :colorFrom="'level'"
+      :colorSet="colorSet"
+      :infoSet="infoSet"
+      :infoShow="infoShow"
+      :infoHide="infoHide"
+      :hexagonEdge="hexagonEdge"
+      :from="from"
+      :hexagonSvgID="hexagonSvgID"
+    />
+  </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:"messageAsset",
+    components:{
+      hexagonBox
+    },
+    props:{
+      data:{},
+      col:{},
+      length:{},
+      from:{},
+      hexagonSvgID:{
+        type:String,
+        default:'hexagonSvg'
+      }
+    },
+    watch:{
+      data:{
+        immediate: false,
+        deep: true,
+        handler() {
+        }
+      },
+      col:{
+        immediate: false,
+        deep: true,
+        handler() {
+        }
+      },
+      length:{
+        immediate: false,
+        deep: true,
+        handler() {
+        }
+      },
+
+    },
+    data(){
+		  return{
+        hexagonEdge:90,
+        loading:true,
+      }
+    },
+    methods:{
+      colorSet(item){//设置方块颜色
+        // let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
+        // let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
+        let alert=item.alert[0];
+        if(alert.P1>0){
+          return{
+            color:'#FFAB99',
+            hoverColor:'#FABEB2',
+          };
+        } else if(alert.P2>0){
+          return{
+            color:'#FAAFAF',
+            hoverColor:'#FFCDCD',
+          };
+        } else if(alert.P3>0){
+          return{
+            color:'#FFCF92',
+            hoverColor:'#FFE0B8',
+          };
+        }else{
+          return{ color:'#99D7C2',hoverColor:'#B2ECD9'}
+        }
+      },
+      infoSet(group,allHexagonRect,allHexagonText,data,item,that){
+        // 设置内部文本
+        // group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
+        let rgbColor='0,0,0';
+        let str='';
+        let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/4)
+          .attr({
+            x: data.center[0]-that.hexagonEdge/2-10,
+            y: data.center[1]-that.hexagonEdge
+          }).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,
+        })
+          .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
+        allHexagonRect.push(rect0);
+        allHexagonText.push(text0);
+        text0.on('mousedown',textMouseDown);
+
+
+        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
+          }).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();
+        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
+        }).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();
+        allHexagonRect.push(rect2);
+        allHexagonText.push(text2);
+
+
+        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
+          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
+        str="P3 : "+item.alert[0].P3;
+        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();
+        allHexagonRect.push(rect3);
+        allHexagonText.push(text3);
+
+      },
+      infoShow(allHexagonRect,allHexagonText){
+        allHexagonRect.forEach(item=>{
+          let rgbColor = item.data('color')
+          item.fill({ color: `rgba(${rgbColor},0.2)`})
+        })
+        allHexagonText.forEach(item=>{
+          item.fill({ opacity:1}).show()
+        });
+      },
+      infoHide(allHexagonRect,allHexagonText){
+        allHexagonRect.forEach(item=>{
+          let rgbColor = item.data('color')
+          item.fill({ color: `rgba(${rgbColor},0)`})
+        });
+        allHexagonText.forEach(item=>{
+          item.fill({ opacity:0}).hide()
+        });
+      },
+      endLoading(){
+        this.loading=false;
+      },
+      startLoading(){
+        this.loading=true;
+      }
+    }
+	}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,138 +0,0 @@
-<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",
-    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>
-
-<style scoped>
-
-</style>

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

@@ -36,7 +36,7 @@
         <div v-for="item in popData">
           <transition name="scaleTool">
             <i v-if="networkPopShow"
-               :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'error-model-stat':modelPopError(item)}"
+               :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)}"
                :style="{top:item.top,left:item.left}"
                @click="popClick(item.id)"
                :title="item.title"
@@ -1144,6 +1144,15 @@
     transform: scale(1.1);
     color: #EC7F66;
   }
+  .network-pop .no-selPop{
+    color: #666;
+  }
+  .network-pop .no-selPop .nz-icon-liubianxing{
+    color: rgba(102,102,102,0.5);
+  }
+  .network-pop .no-selPop .nz-icon-chart{
+    color: #666;
+  }
   /*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/
     /*color: #EC7F66;*/
   /*}*/

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

@@ -445,7 +445,7 @@
     margin-left: 30px;
   }
   .facade-top .facade-top-right{
-    width: 5%;
+    width: auto;
     min-width: 100px;
   }
   .facade-top-right-content{

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -188,16 +188,19 @@
               </span>-->
             </span>
           </div>
-          <div class="content-col-content">
-            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
-            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
-            <div class="chart-no-data" v-if="!alertMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>
+          <div class="content-col-content" style="overflow: hidden">
+            <!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="ruleBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>-->
+            <!--<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>-->
+            <messageAsset v-show="messageAssetData.length>0" :data="messageAssetData" :col="col" :length="length" ref="assetHexagon" :from="'asset'"/>
+            <div class="chart-no-data" v-if="messageAssetData.length===0">No Data</div>
           </div>
         </div>
         <!--第三个图-->
         <div class="content-col-box">
           <div class="content-col-title">
             <span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
+            <!--<span> <el-input v-model="col"  size="small"/></span>-->
+            <!--<span> <el-input v-model="length" size="small"/></span>-->
             <!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
               <span>Top&nbsp;{{topFilter.rule}}<i class="nz-icon nz-icon-arrow-down el-icon&#45;&#45;right"></i></span>
               <el-dropdown-menu slot="dropdown">
@@ -205,10 +208,12 @@
               </el-dropdown-menu>
             </el-dropdown>-->
           </div>
-          <div class="content-col-content">
-            <chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
+          <div class="content-col-content" style="overflow: hidden">
+            <!--<chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>-->
             <!--                <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
-            <div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>
+            <!--<hexagonFigureSvg :hex-data="messageAssetData" :col="5" :hexagonSvgID="'hexagonSvg1'"/>-->
+            <messageAsset v-show="messageModuleData.length>0" :data="messageModuleData" :col="col" :length="length" ref="moduleHexagon" :from="'module'" :hexagonSvgID="'hexagonSvg2'"/>
+            <div class="chart-no-data" v-if="messageModuleData.length===0">No Data</div>
           </div>
         </div>
       </div>
@@ -235,7 +240,8 @@
   import echarts from "echarts";
   import chartConfig from './chartConfig'
   import overViewTopology from '../../../common/project/overViewTopology'
-
+  import messageAsset from '../../../common/overView/messageAsset'
+  import hexagonFigureSvg from '../../../common/honeycomb/hexagonFigureSvg'
   var timeout; //第三行第三个图的dropdown下拉菜单timeout
 
 
@@ -249,7 +255,9 @@
       'chart-box': chart,
       'time-picker': timePicker,
       'vue-countup': VueCountUp,
-      'topology':overViewTopology
+      'topology':overViewTopology,
+      messageAsset,
+      hexagonFigureSvg,
     },
     data() {
       return {
@@ -298,8 +306,8 @@
         topFilter:{
           optionals: [10, 20, 50],
           rule: 10,
-          asset: 10,
-          module: 10
+          asset: 48,
+          module: 20
         },
         system_server_time:null,
         freshDateTimer:null,
@@ -310,6 +318,10 @@
           y: 0
         },
         searchTime:bus.getTimezontDateRange(),
+        messageAssetData:[],
+        col:10,
+        length:9,
+        messageModuleData:[],
       }
     },
     filters: {
@@ -378,8 +390,9 @@
           this.queryAlertRuleData(),
           // this.queryAlertTrendData(),
           this.initMap(),
-          this.queryAlertStatByRule(),
-          this.queryAlertStatByAsset(),
+          this.queryAlertStatByRule(),//3-3
+          this.queryAlertStatByAsset(),//3-2 新的也是这个 3-2
+          this.queryAlertStatByModule(),// 新的3-3
           this.getDcTrafficData(),
           this.queryAllProjectData(),
         ]
@@ -1143,7 +1156,7 @@
       queryAlertStatByRule() {
         return new Promise(resolve=>{
 
-          this.$refs.ruleMessage.startLoading();
+          // this.$refs.ruleMessage.startLoading();
           this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
             if (response.code === 200) {
               let seriesData = [];
@@ -1169,9 +1182,9 @@
                 },
                 category: categoryData, //自定义，用来判断N/A是否显示
               };
-              this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
-              this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
-              this.$refs.ruleMessage.endLoading();
+              // this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
+              // this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
+              // this.$refs.ruleMessage.endLoading();
             }
             resolve()
           });
@@ -1180,35 +1193,11 @@
       queryAlertStatByAsset() {
         return new Promise(resolve => {
 
-          this.$refs.assetMessage.startLoading();
+          this.$refs.assetHexagon.startLoading();
           this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
             if (response.code === 200) {
-              let seriesData = [];
-              let categoryData = [];
-              response.data.list.forEach(item => {
-                seriesData.splice(0, 0, item.nums);
-                categoryData.splice(0, 0, item.host);
-              });
-              this.messageByAssetSeries = {
-                name: 'alertStatByAsset',
-                data: seriesData,
-                type: 'bar',
-                barMaxWidth: 15,
-                category: categoryData,
-                itemStyle: {
-                  color: function(params) {
-                    let colorList = ["#FAd4ab", "#d0e8d0"];;
-                    if(params.dataIndex % 2 == 0){
-                      return colorList[0]
-                    }else{
-                      return colorList[1]
-                    }
-                  },
-                },
-              };
-              this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
-              this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
-              this.$refs.assetMessage.endLoading();
+              this.messageAssetData= response.data.list;
+              this.$refs.assetHexagon.endLoading();
             }
             resolve();
           });
@@ -1217,25 +1206,11 @@
       queryAlertStatByModule() {
         return new Promise(resolve => {
 
-          this.$refs.moduleMessage.startLoading();
+          this.$refs.moduleHexagon.startLoading();
           this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
             if (response.code === 200) {
-              let seriesData = [];
-              let categoryData = [];
-              response.data.list.forEach(item => {
-                seriesData.splice(0, 0, item.nums);
-                categoryData.splice(0, 0, item.module);
-              });
-              this.messageByModuleSeries = {
-                name: 'alertStatByModule',
-                data: seriesData,
-                type: 'bar',
-                barMaxWidth: 30,
-                category: categoryData
-              };
-              this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData);
-              this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
-              this.$refs.moduleMessage.endLoading();
+              this.messageModuleData=response.data.list;
+              this.$refs.moduleHexagon.endLoading();
             }
             resolve();
           });
@@ -1617,7 +1592,7 @@
     watch: {
       "trendSearchParam.select": function(n, o) {
         this.queryAlertTrendData();
-      }
+      },
     },
     mounted() {
       this.initData();