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-16 10:18:15 +08:00
parent 7f00a1483f
commit 6966e3a01d
4 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
nezha-fronted/src/components/common/overView/messageAsset.vue
View File

@@ -98,16 +98,18 @@
// group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
let rgbColor='0,0,0';
let str='';
let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/4)
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
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,
y: data.center[1]-that.hexagonEdge+3,
})
.font({size:14}).fill({opacity:0,color:'#fff',weight:600}).hide();
allHexagonRect.push(rect0);
@@ -118,7 +120,9 @@
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
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({
@@ -131,7 +135,9 @@
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
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({
@@ -145,7 +151,9 @@
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
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({