From 7eab75b9e971524990228d1910e97d9f0bb0f6d3 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 19 十月 2020 15:29:28 +0800
Subject: [PATCH] 集群云大小在一定范围内跟随节点数量变化
---
src/pages/settings/components/CloudNode.vue | 61 +++++++++++++++++++++++++++---
public/images/settings/cloud-line.png | 0
public/images/settings/easy-cloud.png | 0
3 files changed, 54 insertions(+), 7 deletions(-)
diff --git a/public/images/settings/cloud-line.png b/public/images/settings/cloud-line.png
new file mode 100644
index 0000000..8d98f90
--- /dev/null
+++ b/public/images/settings/cloud-line.png
Binary files differ
diff --git a/public/images/settings/easy-cloud.png b/public/images/settings/easy-cloud.png
new file mode 100644
index 0000000..6bf2207
--- /dev/null
+++ b/public/images/settings/easy-cloud.png
Binary files differ
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index b5f68e6..e3a08bc 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -20,8 +20,9 @@
ref="inside-nodes"
:members="insideNodes"
:agent="agentName"
- :sizeX="400"
- :sizeY="330"
+ :sizeX="insideSizeX"
+ :sizeY="insideSizeY"
+ :startX="insideStartX"
class="inside-nodes"
></serfDiagram>
</div>
@@ -31,7 +32,7 @@
ref="outer-nodes"
:members="outsideNodes"
:agent="agentName"
- :sizeX="230"
+ :sizeX="280"
:sizeY="370"
:startX="60"
class="outer-nodes"
@@ -131,6 +132,42 @@
nodeName: "kfl20.15-127586",
role: 'master'
},
+ {
+ cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD0101201906",
+ node_id: "DSVAD001209063",
+ node_ip: "192.168.20.10:30190",
+ nodeName: "k20.15-128437586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD01010906",
+ node_id: "DSVAD012063",
+ node_ip: "192.168.20.107:30190",
+ nodeName: "kfl20.15-127586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD0101201906",
+ node_id: "DSVAD0012063",
+ node_ip: "192.168.20.10:30190",
+ nodeName: "k20.15-128437586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD01010906",
+ node_id: "DSVAD01012063",
+ node_ip: "192.168.20.107:30190",
+ nodeName: "kfl20.15-127586",
+ role: 'master'
+ },
]
}
},
@@ -149,7 +186,7 @@
getInsideNodes () {
//return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
//return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
- let arr = this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ let arr = this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
let len = arr.length;
let lefts = [];
let tops = [];
@@ -176,6 +213,15 @@
insideNodes () {
return this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
},
+ insideSizeX () {
+ return 160 + 200 * 0.2 * (this.insideNodes.length) <= 400 ? 160 + 200 * 0.2 * (this.insideNodes.length) : 400;
+ },
+ insideSizeY () {
+ return 140 + 200 * 0.2 * (this.insideNodes.length) <= 380 ? 140 + 200 * 0.2 * (this.insideNodes.length) : 380;
+ },
+ insideStartX () {
+ return this.insideSizeX / 3
+ },
// insideNodes () {
// //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
// //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
@@ -198,7 +244,7 @@
// },
outsideNodes () {
return this.nodes.filter(item=>item.hardwareType=='03');
- //return this.nodes.filter(item => item.hardwareType == '03');
+ //return this.mockData.filter(item => item.hardwareType == '03');
}
}
}
@@ -209,12 +255,13 @@
height: 500px;
display: flex;
.inner {
- background: url('/images/settings/cloud.png') no-repeat;
+ background: url('/images/settings/easy-cloud.png') no-repeat;
background-size: 100%;
+ margin-top: -80px;
.rect {
//background: rgba(176, 203, 253, 0.3);
position: relative;
- margin: 100px;
+ margin: 130px 100px 100px;
.node {
position: absolute;
.node-icon {
--
Gitblit v1.8.0