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

<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:'#FAAFAF',
            hoverColor:'#FFCDCD',
          };
        } else if(alert.P2>0){
          return{
            color:'#FFAB99',
            hoverColor:'#FABEB2',
          };
        } 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/3)
          .attr({
            x: data.center[0]-that.hexagonEdge/2-10,
            y: data.center[1]-that.hexagonEdge,
            rx:5,
            ry:5,
          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
        str=this.from==='asset'?item.host:item.module;
        str+='';
        let text0=group.text(str).attr({
          x: data.center[0]-(str.length*3.5),
          y: data.center[1]-that.hexagonEdge+3,
        })
          .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,
            rx:6,
            ry:6,
          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
        str="P1 : "+item.alert[0].P1
        let text1=group.text(str).attr({
          x: data.center[0]-(str.length*3.5),
          y: data.center[1]-that.hexagonEdge/2-7.5+3})
          .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
        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,
          rx:6,
          ry:6,
        }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
        str="P2 : "+item.alert[0].P2
        let text2=group.text(str).attr({
          x: data.center[0]-(str.length*3.5),
          y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +5-7.5+3})
          .font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
        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,
            rx:6,
            ry:6,
          }).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>