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

@@ -16,20 +16,13 @@
   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');
+  function PolylineOver(){
-    this.first().animate(100).stroke({width:3,color: '#909090'}).fill(color);
+    this.stroke({color:'#909090'})
-    this.animate(100).transform({scale: 1.1});
-    this.parent().find('polyline').animate(100).stroke({ color: '#909090'})
-    // svgPolyline.animate(100).stroke({ color: '#909090'})
   }
 
-  function hexagonLeave(){// 移出六边形
+  function PolylineOut(){
-    let color=this.first().data('color');
+    this.stroke({color:'#DADADA'})
-    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 hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
@@ -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,13 +166,15 @@
       zoomMax:{//最小倍数
         type:Number,
         default:5,
-      }
+      },
+      from:{}
     },
     watch:{
       hexData:{
         immediate:false,
         deep:true,
         handler(n){
+          console.log(n);
           this.init();
         }
       },
@@ -210,6 +208,8 @@
         boxhexagonShow:false,
         pan:false,//是否移动
         defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'},
+        viewBox:null,
+        isShowHover:true,//是否显示hover块
       }
     },
     computed:{
@@ -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();
             });//获取到上方和左方的距离;
           })
@@ -273,7 +285,6 @@
             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的行高
           }
-
           resolve();
         })
       },
@@ -285,9 +296,13 @@
         let arrIndex=0;
         this.hexSize=this.MathSqrt3*this.hexagonEdge/2;
         for(let i=0; i<row; i++){// 确定 所有 坐标点
-          if(arrIndex>this.hexagonData.length-1){break}
+          if(arrIndex>this.hexagonData.length-1){
+            break
+          }
           for(let j=0; j<col; j++){
-            if(arrIndex>this.hexagonData.length-1){break}
+            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;
@@ -303,7 +318,9 @@
               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;
@@ -328,7 +345,12 @@
         });
         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){ // 绘画六边形
@@ -341,9 +363,10 @@
             ...item,
             ...color
           });
-         group.on('mouseenter',hexagonEnter);
+          group.on('mouseenter',this.hexagonOver.bind(this,group));
-         group.on('mouseleave',hexagonLeave);
+          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);
           // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
@@ -351,10 +374,43 @@
             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();
@@ -363,6 +419,7 @@
           if(this.infoShow){
             this.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
           }
+          this.isShowHover=false;
         }
       },
       hexagonSvgClearScale(){
@@ -371,6 +428,8 @@
           if(this.infoHide){
             this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
           }
+          this.isShowHover=true;
+          window.getSelection().empty();//取消选中文字
         }
       },
       hexColorToRgb(color){
@@ -419,7 +478,7 @@
         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'});//边框 起点
+        getHexagon(this.hexagonSvgID).svgPolyline.plot([borderPoint]);
         //先从左到右划线 应该是 col的长度
         let borderColTop=0;
         if(borderRow==0){
@@ -456,8 +515,7 @@
               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){
-            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);
@@ -477,8 +535,7 @@
             }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){
-            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){
@@ -503,8 +560,7 @@
             }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){
-            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){
@@ -526,8 +582,7 @@
             }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){
-            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){
@@ -568,8 +623,7 @@
             }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){
-            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){
@@ -630,8 +684,7 @@
             }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){
-            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){
@@ -648,8 +701,7 @@
             }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){
-            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){
@@ -658,13 +710,18 @@
             }
           }
         }
+
+
+        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('mouseover',this.hexagonOver);
-           item.off('mouseleave',hexagonLeave);
+            item.off('mouseout',this.hexagonOut);
             item.off('click',this.hexagonSvgScale);
+            item.off('dbclick',this.hexagonSvgClearScale);
             item.clear();
           })
           this.allHexagon=[];
@@ -697,6 +754,7 @@
     min-width: 200px;
     min-height: 200px;
   }
+
   .hexagon-text {
     position: absolute;
     z-index: 1;
@@ -708,6 +766,7 @@
     transition: transform .25s linear;
     transform-origin: 0 0;
   }
+
   #SvgHex.hexagonSvgBox {
     transition: .25s linear;
   }

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">
+          <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 == '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>
+            <!--<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>
+            <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">
+          <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>
+            <!--<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,
+          asset: 48,
-          module: 10
+          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.queryAlertStatByRule(),//3-3
-          this.queryAlertStatByAsset(),
+          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.modifyOption('yAxis', 'data', categoryData);
-              this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
+              // this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
-              this.$refs.ruleMessage.endLoading();
+              // 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 = [];
+              this.messageAssetData= response.data.list;
-              let categoryData = [];
+              this.$refs.assetHexagon.endLoading();
-              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();
             }
             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 = [];
+              this.messageModuleData=response.data.list;
-              let categoryData = [];
+              this.$refs.moduleHexagon.endLoading();
-              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();
             }
             resolve();
           });
@@ -1617,7 +1592,7 @@
     watch: {
       "trendSearchParam.select": function(n, o) {
         this.queryAlertTrendData();
-      }
+      },
     },
     mounted() {
       this.initData();