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

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

Browse Source
This commit is contained in:
zhangyu
2020-12-15 16:54:47 +08:00
parent 1a4d43a1eb
commit 01fecfa8ef
7 changed files with 574 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

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

609
nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div ref="box" class="box-hexagon" v-clickoutside="hexagonSvgClearScale" v-if="boxhexagonShow"> <div ref="box" class="box-hexagon" v-clickoutside="hexagonSvgClearScale" v-if="boxhexagonShow">
<!--<div class="hexagon-text" :style="{top:hexagonTextPos.top,left:hexagonTextPos.left}" v-show="hexagonTextPos.show">--> <!--<div class="hexagon-text" :style="{top:hexagonTextPos.top,left:hexagonTextPos.left}" v-show="hexagonTextPos.show">-->
<!--<span v-if="hexagonTextPos.data">--> <!--<span v-if="hexagonTextPos.data">-->
<!--{{hexagonTextPos.data?hexagonTextPos.data.alertName:''}}--> <!--{{hexagonTextPos.data?hexagonTextPos.data.alertName:''}}-->
<!--{{hexagonTextPos.data?hexagonTextPos.data.nums:''}}--> <!--{{hexagonTextPos.data?hexagonTextPos.data.nums:''}}-->
<!--</span>--> <!--</span>-->
<!--</div>--> <!--</div>-->
<div :id="hexagonSvgID"> <div :id="hexagonSvgID">
@@ -15,21 +15,14 @@
<script> <script>
import {SVG} from '@svgdotjs/svg.js' import {SVG} from '@svgdotjs/svg.js'
import '@svgdotjs/svg.panzoom.js' import '@svgdotjs/svg.panzoom.js'
import {getHexagon, setHexagon, delHexagon} from "../js/common"; 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画出 function hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
@@ -63,18 +56,18 @@
}) })
}) })
} }
function midpoint(point1,point2){//计算中点 function midpoint(point1,point2){//计算中点
return { return {
x:(point1.x+point2.x)/2, x:(point1.x+point2.x)/2,
y:(point1.y+point2.y)/2, y:(point1.y+point2.y)/2,
} }
} }
function borderMove(left,top,borderSize,type,svgPolyline){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那 function borderMove(left,top,borderSize,type,svgPolyline){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
let point=[null,null]; let point=[null,null];
let MathSqrt3=Math.sqrt(3); let MathSqrt3=Math.sqrt(3);
let arr = svgPolyline.array(); let arr=svgPolyline.array();
switch(type){ switch(type){
case 1: //从左到右的斜上方运动 case 1: //从左到右的斜上方运动
point[0]=left+MathSqrt3*borderSize/2; point[0]=left+MathSqrt3*borderSize/2;
@@ -101,10 +94,11 @@
point[1]=top-borderSize; point[1]=top-borderSize;
break; break;
} }
arr.push(point); arr.push(point);
svgPolyline.plot(arr); svgPolyline.plot(arr);
return point return point
} }
export default { export default {
name:"hexagonFigureSvg", name:"hexagonFigureSvg",
props:{ props:{
@@ -123,7 +117,9 @@
}, },
colorSet:{ //设置方块对应颜色 参数 item 当前item的数据 colorSet:{ //设置方块对应颜色 参数 item 当前item的数据
type:Function, type:Function,
default:()=>{return { color:'#99D7C2',hoverColor:'#B2ECD9'}} default:()=>{
return {color:'#99D7C2',hoverColor:'#B2ECD9'}
}
}, },
infoShow:{// 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect infoShow:{// 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect
type:Function, type:Function,
@@ -170,20 +166,22 @@
zoomMax:{//最小倍数 zoomMax:{//最小倍数
type:Number, type:Number,
default:5, default:5,
} },
from:{}
}, },
watch:{ watch:{
hexData:{ hexData:{
immediate: false, immediate:false,
deep: true, deep:true,
handler(n) { handler(n){
console.log(n);
this.init(); this.init();
} }
}, },
col:{ // 列数 col:{ // 列数
immediate: false, immediate:false,
deep: true, deep:true,
handler() { handler(){
this.init(); this.init();
} }
}, },
@@ -209,7 +207,9 @@
timer:null, timer:null,
boxhexagonShow:false, boxhexagonShow:false,
pan:false,//是否移动 pan:false,//是否移动
defaultColor:{ color:'#99D7C2',hoverColor:'#B2ECD9'}, defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'},
viewBox:null,
isShowHover:true,//是否显示hover块
} }
}, },
computed:{ computed:{
@@ -224,58 +224,69 @@
}, },
methods:{ methods:{
init(){ //创建svg实例 init(){ //创建svg实例
this.boxhexagonShow=false; this.boxhexagonShow=false;
this.clearData(); this.clearData();
setTimeout(()=>{ setTimeout(()=>{
this.boxhexagonShow=true; this.boxhexagonShow=true;
this.$nextTick(()=>{ this.$nextTick(()=>{
this.hexagonData = JSON.parse(JSON.stringify(this.hexData)); this.hexagonData=JSON.parse(JSON.stringify(this.hexData));
let box=`#${this.hexagonSvgID}`; let box=`#${this.hexagonSvgID}`;
let hexagonSvg=SVG().addTo(box).size('100%','100%') let hexagonSvg=SVG().addTo(box).size('100%','100%')
.panZoom({ .panZoom({
zoomMin:this.zoomMin, zoomMin:this.zoomMin,
zoomMax:this.zoomMax, zoomMax:this.zoomMax,
zoomFactor:this.zoomFactor, zoomFactor:this.zoomFactor,
pinchZoom:this.isPinchZoom, pinchZoom:this.isPinchZoom,
wheelZoom:this.isWheelZoom, wheelZoom:this.isWheelZoom,
panning:this.isPanning panning:this.isPanning
}) })
.attr('id','SvgHex') .attr('id','SvgHex')
.attr('class',this.hexagonSvgID) .attr('class',this.hexagonSvgID)
.attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例 .attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例
hexagonSvg.on('click',this.hexagonSvgClearScale); hexagonSvg.on('click',this.hexagonSvgClearScale);
hexagonSvg.on('panStart',this.hexagonSvgPanStart); hexagonSvg.on('panStart',this.hexagonSvgPanStart);
hexagonSvg.on('panEnd',this.hexagonSvgPanEnd); hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
setHexagon(this.hexagonSvgID,{hexagonSvg:hexagonSvg,svgPolyline:null,allHexagonRect:[],allHexagonText:[]}) setHexagon(this.hexagonSvgID,{
this.getPadding().then(()=>{ hexagonSvg:hexagonSvg,
this.getDataPoint(); svgPolyline:null,
});//获取到上方和左方的距离; allHexagonRect:[],
}) allHexagonText:[],
},100) 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();
});//获取到上方和左方的距离;
})
},100)
}, },
getPadding(){//确定到上方和下方的距离 保持居中 getPadding(){//确定到上方和下方的距离 保持居中
return new Promise(resolve=>{ return new Promise(resolve=>{
let hexagonWidth = this.MathSqrt3*this.hexagonEdge+this.interspace; let hexagonWidth=this.MathSqrt3*this.hexagonEdge+this.interspace;
let hexagonHeight = this.hexagonEdge*2+this.interspace; let hexagonHeight=this.hexagonEdge*2+this.interspace;
let row=parseInt((this.hexagonData.length)/(this.col*2-1))*2;//行数是总数除2倍列数-1的整数部分 加上根据余数的判断 let row=parseInt((this.hexagonData.length)/(this.col*2-1))*2;//行数是总数除2倍列数-1的整数部分 加上根据余数的判断
let dolNum=(this.hexagonData.length)%(this.col*2-1) let dolNum=(this.hexagonData.length)%(this.col*2-1)
if(dolNum>0&&dolNum<=this.col){ //余数的判断 if(dolNum>0&&dolNum<=this.col){ //余数的判断
row+=1 row+=1
} else if(dolNum>0&&dolNum>this.col){ }else if(dolNum>0&&dolNum>this.col){
row+=2 row+=2
} }
this.row=row; this.row=row;
if(this.hexagonData.length-1<=this.col){ if(this.hexagonData.length-1<=this.col){
// boxPadLeft:200, boxPadTop:75, // boxPadLeft:200, boxPadTop:75,
this.boxPadLeft=(this.$refs.box.offsetWidth-this.hexagonData.length*hexagonWidth)/2; 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{ }else{
this.boxPadLeft=(this.$refs.box.offsetWidth-this.col*hexagonWidth)/2; 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();
resolve(); })
})
}, },
getDataPoint(){ // 确定所有坐标点的位置 getDataPoint(){ // 确定所有坐标点的位置
let col=this.col;//确定列数 let col=this.col;//确定列数
@@ -284,26 +295,32 @@
let paddingLeft=this.boxPadLeft; //整体到左侧的距离 let paddingLeft=this.boxPadLeft; //整体到左侧的距离
let arrIndex=0; let arrIndex=0;
this.hexSize=this.MathSqrt3*this.hexagonEdge/2; this.hexSize=this.MathSqrt3*this.hexagonEdge/2;
for(let i=0;i<row;i++){// 确定 所有 坐标点 for(let i=0; i<row; i++){// 确定 所有 坐标点
if(arrIndex>this.hexagonData.length-1){break} if(arrIndex>this.hexagonData.length-1){
for(let j=0;j<col;j++){ break
if(arrIndex>this.hexagonData.length-1){break} }
for(let j=0; j<col; j++){
if(arrIndex>this.hexagonData.length-1){
break
}
if(i===0){ if(i===0){
this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft; this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
this.hexagonData[arrIndex].top=i*(this.hexSize*2) + paddingTop; this.hexagonData[arrIndex].top=i*(this.hexSize*2)+paddingTop;
this.hexagonData[arrIndex].sub=i+'-'+j this.hexagonData[arrIndex].sub=i+'-'+j
} else if(i%2===0) { }else if(i%2===0){
// if(i===2&&( j===1 || j==2)){ // if(i===2&&( j===1 || j==2)){
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft; // 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; // this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8)+ paddingTop;
// }else{ // }else{
// continue; // continue;
// } // }
this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft; 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].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
this.hexagonData[arrIndex].sub=i+'-'+j this.hexagonData[arrIndex].sub=i+'-'+j
}else{ }else{
if(j===col-1) {break} if(j===col-1){
break
}
// if(i!==3){ // if(i!==3){
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft; // 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; // this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
@@ -313,8 +330,8 @@
// }else{ // }else{
// continue; // continue;
// } // }
this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft; 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].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
this.hexagonData[arrIndex].sub=i+'-'+j this.hexagonData[arrIndex].sub=i+'-'+j
} }
arrIndex++; arrIndex++;
@@ -328,70 +345,112 @@
}); });
setTimeout(()=>{ setTimeout(()=>{
this.borderHex(); 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){ // 绘画六边形 renderHexagon(item){ // 绘画六边形
hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{ 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 group=getHexagon(this.hexagonSvgID).hexagonSvg.group();
let polygon=group.polygon(data.svgStrPoint).fill(color.color); let polygon=group.polygon(data.svgStrPoint).fill(color.color);
polygon.data({ polygon.data({
...data, ...data,
...item, ...item,
...color ...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('click',this.hexagonSvgScale.bind(this,polygon.data('center'),item,data));
this.allHexagon.push(polygon); group.on('dbclick',this.hexagonSvgClearScale.bind(this,polygon.data('center'),item,data));
this.allGroup.push(group); 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); if(this.infoSet){
} 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){ 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){ 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){ 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(){ hexagonSvgClearScale(){
if(!this.pan&&this.isClickRate){ if(!this.pan&&this.isClickRate){
getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate); getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate);
if(this.infoHide){ 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){ 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 // 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) { if(color.length===4){
let colorNew = "#"; let colorNew="#";
for (let i = 1; i < 4; i += 1) { for(let i=1; i<4; i+=1){
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1)); colorNew+=color.slice(i,i+1).concat(color.slice(i,i+1));
} }
color = colorNew; color=colorNew;
} }
// 处理六位的颜色值，转为RGB // 处理六位的颜色值，转为RGB
let colorChange = []; let colorChange=[];
for (let i = 1; i < 7; i += 2) { for(let i=1; i<7; i+=2){
colorChange.push(parseInt("0x" + color.slice(i, i + 2))); colorChange.push(parseInt("0x"+color.slice(i,i+2)));
} }
return colorChange.join(","); return colorChange.join(",");
} else { }else{
return color; return color;
} }
}, },
@@ -404,11 +463,11 @@
hexagonSvgPanEnd(ev){ // 实例移动结束 重新绑定点击函数 hexagonSvgPanEnd(ev){ // 实例移动结束 重新绑定点击函数
ev.preventDefault(); ev.preventDefault();
setTimeout(()=>{ // 设置延时 解决移动后的缩放问题 setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
this.pan=false; this.pan=false;
},100) },100)
}, },
borderHex(){//外层边框 数组点 borderHex(){//外层边框 数组点
let length = this.allHexagon.length; let length=this.allHexagon.length;
if(length==0){//为0 调出 if(length==0){//为0 调出
return return
} }
@@ -418,264 +477,262 @@
let borderCol=endItemSub[1]; let borderCol=endItemSub[1];
let borderRow=endItemSub[0]; let borderRow=endItemSub[0];
let borderPoint=[item.x+k.x,item.y+k.y]; let borderPoint=[item.x+k.x,item.y+k.y];
let borderSize = this.hexagonEdge*1.2; 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的长度 //先从左到右划线 应该是 col的长度
let borderColTop=0; let borderColTop=0;
if(borderRow==0){ if(borderRow==0){
borderColTop=borderCol; borderColTop=borderCol;
} else{ }else{
borderColTop=this.col-1; borderColTop=this.col-1;
} }
for(let i=0;i<=borderColTop*2;i++){ for(let i=0; i<=borderColTop*2; i++){
if(i===1){ if(i===1){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
} }
if(i%2===0){ if(i%2===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline); borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
}else{ }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的长度 分情况 // 从上到下 应该是row的长度 分情况
let borderRowRight=0;//右边循环次数 let borderRowRight=0;//右边循环次数
// 情况1 borderCol<=this.col && row==0时 // 情况1 borderCol<=this.col && row==0时
if((borderCol<=this.col-1)&&borderRow==0){ if((borderCol<=this.col-1)&&borderRow==0){
borderRowRight=3; borderRowRight=3;
for(let i=0;i<borderRowRight-1;i++){ for(let i=0; i<borderRowRight-1; i++){
if(i===1){ if(i===1){
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue); // 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){ if(i===2){
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue); // 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){ 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){ }else if(i%4===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);
} }else if(i%4===2){
else if(i%4===2){ 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 if(i%4===3){ }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 为奇数事 // 情况2 border==this.col&& row>0时 且row 为奇数事
if(borderCol==this.col-2&&borderRow>0&&borderRow%2==1){ if(borderCol==this.col-2&&borderRow>0&&borderRow%2==1){
borderRowRight=2*(Number(borderRow)+1); borderRowRight=2*(Number(borderRow)+1);
for(let i=0;i<borderRowRight;i++){ for(let i=0; i<borderRowRight; i++){
if(i%4===0){ if(i%4===0){
borderSize = this.hexagonEdge*1.1; borderSize=this.hexagonEdge*1.1;
if(i==0){ 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){ }else if(i%4===1){
borderSize = this.hexagonEdge*1.2; borderSize=this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline); 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;
borderSize = this.hexagonEdge*1.1; 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 if(i%4===3){ }else if(i%4===3){
borderSize = this.hexagonEdge*1.03; borderSize=this.hexagonEdge*1.03;
if(i===borderRowRight-1){ 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 为偶数事 // 情况3 borderCol==this.col && row>0 且 row 为偶数事
if(borderCol==this.col-1&&borderRow>0&&borderRow%2==0){ if(borderCol==this.col-1&&borderRow>0&&borderRow%2==0){
borderRowRight=2*(Number(borderRow)+1)+1; 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){ if(i%4===0){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
if(i==0){ 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){ }else if(i%4===1){
borderSize = this.hexagonEdge*1.2; borderSize=this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline); 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;
borderSize = this.hexagonEdge*1.1; 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 if(i%4===3){ }else if(i%4===3){
borderSize = this.hexagonEdge*1.03; borderSize=this.hexagonEdge*1.03;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline); borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
} }
} }
} }
// 情况4 border<this.col&& row>0时 且row 为奇数事 // 情况4 border<this.col&& row>0时 且row 为奇数事
if(borderCol<this.col-2&&borderRow>0&&borderRow%2==1){ if(borderCol<this.col-2&&borderRow>0&&borderRow%2==1){
borderRowRight=2*(Number(borderRow-1)+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){ if(i%4===0){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
if(i==0){ 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){ }else if(i%4===1){
borderSize = this.hexagonEdge*1.2; borderSize=this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline); 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;
borderSize = this.hexagonEdge*1.1; 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 if(i%4===3){ }else if(i%4===3){
borderSize = this.hexagonEdge*1.03; borderSize=this.hexagonEdge*1.03;
if(i===borderRowRight-1){ 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 borderSize=this.hexagonEdge*1.2
for(let i=0;i<(this.col-borderCol-1)*2-1;i++){//向左移动 for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
if(i===1){ if(i===1){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
} }
if(i==(this.col-borderCol-1)*2-2){ if(i==(this.col-borderCol-1)*2-2){
borderSize = this.hexagonEdge borderSize=this.hexagonEdge
} }
if(i%2===0){ 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{ }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 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);
} }
// 情况5 borderCol<this.col && row>0 且 row 为偶数事 // 情况5 borderCol<this.col && row>0 且 row 为偶数事
if(borderCol<this.col-1&&borderRow>0&&borderRow%2==0){ if(borderCol<this.col-1&&borderRow>0&&borderRow%2==0){
borderRowRight=2*(Number(borderRow-1)+1)+1; 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){ if(i%4===0){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
if(i==0){ 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){ }else if(i%4===1){
borderSize = this.hexagonEdge*1.2; borderSize=this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline); 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;
borderSize = this.hexagonEdge*1.1; 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 if(i%4===3){ }else if(i%4===3){
borderSize = this.hexagonEdge*1.03; borderSize=this.hexagonEdge*1.03;
if(i===borderRowRight-2){ 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 borderSize=this.hexagonEdge*1.2
for(let i=0;i<(this.col-borderCol-1)*2-1;i++){//向左移动 for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
if(i==1){ if(i==1){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
} }
if(i==(this.col-borderCol-1)*2-2){ if(i==(this.col-borderCol-1)*2-2){
borderSize = this.hexagonEdge*1 borderSize=this.hexagonEdge*1
} }
if(((Number(borderCol)+2)==this.col)&&(i==0)){ if(((Number(borderCol)+2)==this.col)&&(i==0)){
borderSize = this.hexagonEdge*1.1 borderSize=this.hexagonEdge*1.1
} }
if(i%2===0){ if(i%2===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline); borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
}else{ }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 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 borderSize=this.hexagonEdge*1.2
for(let i=0;i<=borderCol*2+1;i++){ for(let i=0; i<=borderCol*2+1; i++){
if(i===1){ if(i===1){
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue); // 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) { if(i==borderCol*2+1){
borderSize = this.hexagonEdge*1.2 borderSize=this.hexagonEdge*1.2
} }
if(i%2===0){ 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{ }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){ if(borderRow%2==1){
for(let i=0;i<=borderRow*2;i++){ for(let i=0; i<=borderRow*2; i++){
if(i%4===0){ if(i%4===0){
borderSize = this.hexagonEdge*1.1; borderSize=this.hexagonEdge*1.1;
if(i!== 0){ if(i!==0){
borderSize = this.hexagonEdge*1.03; 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){ }else if(i%4===1){
borderSize = this.hexagonEdge*1.1; borderSize=this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline); 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;
borderSize = this.hexagonEdge*1.2; 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===3){ }else if(i%4===3){
borderSize = this.hexagonEdge*1.1; borderSize=this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline); borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
} }
} }
} }
if(borderRow%2==0){ if(borderRow%2==0){
for(let i=0;i<=borderRow*2;i++){ for(let i=0; i<=borderRow*2; i++){
if(i%4===0){ if(i%4===0){
borderSize = this.hexagonEdge*1.2 borderSize=this.hexagonEdge*1.2
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){ }else if(i%4===1){
borderSize = this.hexagonEdge*1.1; borderSize=this.hexagonEdge*1.1;
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 if(i%4===2){
else if(i%4===2){ borderSize=this.hexagonEdge*1.03;
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===3){ }else if(i%4===3){
borderSize = this.hexagonEdge*1.1; borderSize=this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline); 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(){// 清除数据 以及解绑事件 防止内存崩溃 clearData(){// 清除数据 以及解绑事件 防止内存崩溃
if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){ if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
this.allHexagon.forEach((item)=>{ 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('click',this.hexagonSvgScale);
item.clear(); item.off('dbclick',this.hexagonSvgClearScale);
}) item.clear();
this.allHexagon=[]; })
this.hexagonData=[]; this.allHexagon=[];
getHexagon(this.hexagonSvgID).hexagonSvg.off('click',this.hexagonSvgClearScale); this.hexagonData=[];
getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart',this.hexagonSvgPanStart); getHexagon(this.hexagonSvgID).hexagonSvg.off('click',this.hexagonSvgClearScale);
getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd',this.hexagonSvgPanEnd); getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart',this.hexagonSvgPanStart);
getHexagon(this.hexagonSvgID).hexagonSvg=null; //Svg的实例 getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd',this.hexagonSvgPanEnd);
getHexagon(this.hexagonSvgID).svgPolyline=null;// Svg hexagon的边框 getHexagon(this.hexagonSvgID).hexagonSvg=null; //Svg的实例
delHexagon(this.hexagonSvgID) getHexagon(this.hexagonSvgID).svgPolyline=null;// Svg hexagon的边框
} delHexagon(this.hexagonSvgID)
}
}, },
}, },
@@ -697,18 +754,20 @@
min-width: 200px; min-width: 200px;
min-height: 200px; min-height: 200px;
} }
.hexagon-text{
.hexagon-text {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
font-size: 10px; font-size: 10px;
} }
</style> </style>
<style> <style>
#SvgHex{ #SvgHex {
transition: transform .25s linear; transition: transform .25s linear;
transform-origin: 0 0; transform-origin: 0 0;
} }
#SvgHex.hexagonSvgBox{
#SvgHex.hexagonSvgBox {
transition: .25s linear; transition: .25s linear;
} }
</style> </style>

189
nezha-fronted/src/components/common/overView/messageAsset.vue Normal file
View File

@@ -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>

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

@@ -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>

11
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -36,7 +36,7 @@
<div v-for="item in popData"> <div v-for="item in popData">
<transition name="scaleTool"> <transition name="scaleTool">
<i v-if="networkPopShow" <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}" :style="{top:item.top,left:item.left}"
@click="popClick(item.id)" @click="popClick(item.id)"
:title="item.title" :title="item.title"
@@ -1144,6 +1144,15 @@
transform: scale(1.1); transform: scale(1.1);
color: #EC7F66; 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{*/ /*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/
/*color: #EC7F66;*/ /*color: #EC7F66;*/
/*}*/ /*}*/

2
nezha-fronted/src/components/common/project/visNetwork.vue
View File

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

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

@@ -188,16 +188,19 @@
</span>--> </span>-->
</span> </span>
</div> </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> </div>
<!--第三个图--> <!--第三个图-->
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title"> <div class="content-col-title">
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span> <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"> <!--<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> <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"> <el-dropdown-menu slot="dropdown">
@@ -205,10 +208,12 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown>--> </el-dropdown>-->
</div> </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="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> </div>
</div> </div>
@@ -235,7 +240,8 @@
import echarts from "echarts"; import echarts from "echarts";
import chartConfig from './chartConfig' import chartConfig from './chartConfig'
import overViewTopology from '../../../common/project/overViewTopology' import overViewTopology from '../../../common/project/overViewTopology'
import messageAsset from '../../../common/overView/messageAsset'
import hexagonFigureSvg from '../../../common/honeycomb/hexagonFigureSvg'
var timeout; //第三行第三个图的dropdown下拉菜单timeout var timeout; //第三行第三个图的dropdown下拉菜单timeout
@@ -249,7 +255,9 @@
'chart-box': chart, 'chart-box': chart,
'time-picker': timePicker, 'time-picker': timePicker,
'vue-countup': VueCountUp, 'vue-countup': VueCountUp,
'topology':overViewTopology 'topology':overViewTopology,
messageAsset,
hexagonFigureSvg,
}, },
data() { data() {
return { return {
@@ -298,8 +306,8 @@
topFilter:{ topFilter:{
optionals: [10, 20, 50], optionals: [10, 20, 50],
rule: 10, rule: 10,
asset: 10, asset: 48,
module: 10 module: 20
}, },
system_server_time:null, system_server_time:null,
freshDateTimer:null, freshDateTimer:null,
@@ -310,6 +318,10 @@
y: 0 y: 0
}, },
searchTime:bus.getTimezontDateRange(), searchTime:bus.getTimezontDateRange(),
messageAssetData:[],
col:10,
length:9,
messageModuleData:[],
} }
}, },
filters: { filters: {
@@ -378,8 +390,9 @@
this.queryAlertRuleData(), this.queryAlertRuleData(),
// this.queryAlertTrendData(), // this.queryAlertTrendData(),
this.initMap(), this.initMap(),
this.queryAlertStatByRule(), this.queryAlertStatByRule(),//3-3
this.queryAlertStatByAsset(), this.queryAlertStatByAsset(),//3-2 新的也是这个 3-2
this.queryAlertStatByModule(),// 新的3-3
this.getDcTrafficData(), this.getDcTrafficData(),
this.queryAllProjectData(), this.queryAllProjectData(),
] ]
@@ -1143,7 +1156,7 @@
queryAlertStatByRule() { queryAlertStatByRule() {
return new Promise(resolve=>{ return new Promise(resolve=>{
this.$refs.ruleMessage.startLoading(); // this.$refs.ruleMessage.startLoading();
this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => { this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
if (response.code === 200) { if (response.code === 200) {
let seriesData = []; let seriesData = [];
@@ -1169,9 +1182,9 @@
}, },
category: categoryData, //自定义，用来判断N/A是否显示 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() resolve()
}); });
@@ -1180,35 +1193,11 @@
queryAlertStatByAsset() { queryAlertStatByAsset() {
return new Promise(resolve => { return new Promise(resolve => {
this.$refs.assetMessage.startLoading(); this.$refs.assetHexagon.startLoading();
this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => { this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
if (response.code === 200) { 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(); resolve();
}); });
@@ -1217,25 +1206,11 @@
queryAlertStatByModule() { queryAlertStatByModule() {
return new Promise(resolve => { return new Promise(resolve => {
this.$refs.moduleMessage.startLoading(); this.$refs.moduleHexagon.startLoading();
this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => { this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
if (response.code === 200) { 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(); resolve();
}); });
@@ -1617,7 +1592,7 @@
watch: { watch: {
"trendSearchParam.select": function(n, o) { "trendSearchParam.select": function(n, o) {
this.queryAlertTrendData(); this.queryAlertTrendData();
} },
}, },
mounted() { mounted() {
this.initData(); this.initData();