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 +++++++++++++++++++++++++++--- 1 files changed, 54 insertions(+), 7 deletions(-) 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