From c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 19 十月 2020 19:14:52 +0800
Subject: [PATCH] 搜索集群节点样式更新
---
src/pages/settings/components/ClusterManagement.vue | 5 ++---
src/pages/settings/components/CloudNode.vue | 1 +
src/components/serfDiagram/index.vue | 27 ++++++++++++++++-----------
3 files changed, 19 insertions(+), 14 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 9a03442..b87364c 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -30,7 +30,8 @@
members: Array,
sizeX: Number,
sizeY: Number,
- startX: Number
+ startX: Number,
+ isShowHover: Boolean
},
data () {
return {
@@ -52,10 +53,10 @@
id: i,
name: v.nodeName,
svgSym: RoleIcon[v.role],
- _color:
- v.role === "master"
- ? "orange"
- : ""
+ _color:
+ v.role === "master"
+ ? "orange"
+ : ""
});
});
@@ -125,12 +126,15 @@
node._opacity = 1;
node._size = 28;
//let width = document.body.clientWidth;
- this.toolTipStyle.display = "block";
- this.toolTipStyle.top = node.y - 60 + "px";
- this.toolTipStyle.left = node.x + "px";
- console.log(this.members[node.id])
- this.toolTipNode = this.members[node.id].nodeName;
- this.toolTipAddr = this.members[node.id].Address;
+ if (this.isShowHover) {
+ this.toolTipStyle.display = "block";
+ this.toolTipStyle.top = node.y - 60 + "px";
+ this.toolTipStyle.left = node.x + "px";
+ console.log(this.members[node.id])
+ this.toolTipNode = this.members[node.id].nodeName;
+ this.toolTipAddr = this.members[node.id].Address;
+ }
+
},
nodeOut (event, node) {
node._opacity = node.opacity;
@@ -198,6 +202,7 @@
.net {
height: 100%;
margin: 0;
+ position: relative;
}
.node {
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index bf5eafa..e99063f 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -23,6 +23,7 @@
:sizeX="insideSizeX"
:sizeY="insideSizeY"
:startX="insideStartX"
+ :isShowHover="true"
class="inside-nodes"
></serfDiagram>
</div>
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 4e9a70e..bcef075 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/src/pages/settings/components/ClusterManagement.vue
@@ -111,6 +111,7 @@
:members="members"
:agent="agentName"
v-loading="loading"
+ :isShowHover="false"
@selected-node="joinNode"
class="nodes-svg"
></serfDiagram>
@@ -820,7 +821,5 @@
height: 30px;
line-height: 30px;
}
-.nodes-svg {
- background-color: rgba(127, 172, 255, 0.459);
-}
+
</style>
--
Gitblit v1.8.0