gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：蜂窝图组件实现

Browse Source
This commit is contained in:
zhangyu
2020-12-11 16:44:20 +08:00
parent c493efd6aa
commit a8064995a9
4 changed files with 332 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
nezha-fronted/src/components/common/Honeycomb/hexagonFigureD3.vue → nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
View File

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

10
nezha-fronted/src/components/common/js/common.js
View File

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

2
nezha-fronted/src/components/common/js/tools.js
View File

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

129
nezha-fronted/src/components/common/overView/messageRule.vue
View File

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