From 6767862ab5981408ed7a2b2d74bb5d8ead561eee Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 07 七月 2021 16:40:49 +0800
Subject: [PATCH] 朔黄演示改动
---
src/pages/settings/components/CloudNode.vue | 226 +++++++++++---------------------------------------------
1 files changed, 44 insertions(+), 182 deletions(-)
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index e99063f..800651a 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -1,21 +1,7 @@
<template>
<div class="cloud">
<div class="inner">
- <!-- <div
- class="rect"
- :style="{width:`${minWidth+BaseWidth}px`,height:`${minHeight+BaseHeight}px`}"
- >-->
<div class="rect">
- <!-- <div
- class="node"
- v-for="item in insideNodes"
- :key="item.id"
- :style="{top:item.t+'px',left:item.l+'px'}"
- >
- <span class="node-icon">
- </span>
- <span class="node-name">{{item.nodeName}}</span>
- </div>-->
<serfDiagram
ref="inside-nodes"
:members="insideNodes"
@@ -38,156 +24,46 @@
:startX="60"
class="outer-nodes"
></serfDiagram>
- <!-- <div
- class="node"
- v-for="(item,index) in outsideNodes"
- :key="item.id"
- :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
- >
- <span class="node-icon"></span>
- <span class="node-name">{{item.nodeName}}</span>
- </div>-->
</div>
</div>
</template>
<script>
import SerfDiagram from "@/components/serfDiagram";
export default {
- name: 'cloudNode',
+ name: "cloudNode",
props: {
- nodes: Array
+ nodes: Array,
},
components: {
- SerfDiagram
+ SerfDiagram,
},
- data () {
+ data() {
return {
- agentName: '',
+ agentName: "",
nodeIcons: [],
//insideNodes: [],
BaseWidth: 150,
BaseHeight: 70,
minWidth: 0,
minHeight: 0,
- mockData: [
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
- hardwareType: "01",
- id: "DSVAD010120190622",
- node_id: "DSVAD010120190622",
- node_ip: "192.168.20.10:30190",
- nodeName: "寮�鍙�20.10-1",
- role: 'pc'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f",
- hardwareType: "02",
- id: "DSVAD010120190623",
- node_id: "DSVAD010120190623",
- node_ip: "192.168.20.10:30190",
- nodeName: "寮�鍙戞祴璇�20.11-1",
- role: 'master'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
- hardwareType: "03",
- id: "DSVAD010120190624",
- node_id: "DSVAD010120190624",
- node_ip: "192.168.20.10:30190",
- nodeName: "娴嬭瘯20.13-1",
- role: 'pc'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
- hardwareType: "03",
- id: "DSVAD010120190625",
- node_id: "DSVAD010120190625",
- node_ip: "192.168.20.10:30190",
- nodeName: "娴嬭瘯20.101-1",
- role: 'server'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614cf",
- hardwareType: "02",
- id: "DSVAD01012019063",
- node_id: "DSVAD01012019063",
- node_ip: "192.168.20.10:30190",
- nodeName: "寮�鍙戞祴璇�20.15-1",
- role: 'master'
- },
- {
- cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
- hardwareType: "02",
- id: "DSVAD0101201906",
- node_id: "DSVAD0101209063",
- node_ip: "192.168.20.10:30190",
- nodeName: "k20.15-128437586",
- role: 'master'
- },
- {
- cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
- hardwareType: "02",
- id: "DSVAD010120906",
- node_id: "DSVAD010120963",
- 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: "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'
- },
- ]
- }
+ };
},
- mounted () {
- console.log(this.nodes)
+ mounted() {
+ console.log(this.nodes);
//this.getInsideNodes();
},
methods: {
- getRandom (index) {
+ getRandom(index) {
if (index % 2 == 0) {
- return Math.random() * 20
+ return Math.random() * 20;
} else {
- return Math.random() * 50
+ return Math.random() * 50;
}
},
- 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.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ getInsideNodes() {
+ let arr = this.nodes.filter(
+ (item) => item.hardwareType == "01" || item.hardwareType == "02"
+ );
let len = arr.length;
let lefts = [];
let tops = [];
@@ -199,69 +75,55 @@
t: 30 * (index + 1),
nodeName: item.nodeName,
id: item.id,
- workType: item.workType
- }
+ workType: item.workType,
+ };
});
this.minWidth = Math.max(...lefts) - Math.min(...lefts);
this.minHeight = Math.max(...tops) - Math.min(...tops);
- console.log('w,h', this.minWidth, this.minHeight);
+ console.log("w,h", this.minWidth, this.minHeight);
},
},
computed: {
- cloudPic () {
- return '/images/settings/cloud.png'
+ cloudPic() {
+ return "/images/settings/cloud.png";
},
- insideNodes () {
- return this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ 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;
+ 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;
+ insideSizeY() {
+ return 140 + 200 * 0.2 * this.insideNodes.length <= 380
+ ? 140 + 200 * 0.2 * this.insideNodes.length
+ : 380;
},
- insideStartX () {
- return this.insideSizeX / 3
+ 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');
- // let arr = this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
- // let len = arr.length;
- // let lefts = [];
- // let tops = [];
- // let temp = arr.map((item,index)=>{
- // lefts.push((20-len)*(index+1));
- // tops.push(30*(index+1));
- // return {
- // l: (20-len)*(index+1),
- // t: 30*(index+1),
- // nodeName: item.nodeName,
- // id: item.id,
- // workType: item.workType
- // }
- // });
- // return temp;
- // },
- outsideNodes () {
- return this.nodes.filter(item=>item.hardwareType=='03');
- //return this.mockData.filter(item => item.hardwareType == '03');
- }
- }
-}
+ outsideNodes() {
+ return this.nodes.filter((item) => item.hardwareType == "03");
+ },
+ },
+};
</script>
<style lang="scss">
.cloud {
width: 100%;
display: flex;
.inner {
- background: url('/images/settings/easy-cloud.png') no-repeat;
+ background: url("/images/settings/easy-cloud.png") no-repeat;
background-size: 100%;
- margin-top: -80px;
+ margin-top: -55px;
+ margin-left: 55px;
+
.rect {
- //background: rgba(176, 203, 253, 0.3);
position: relative;
- margin: 130px 100px 100px;
+ margin: 130px 100px 70px;
.node {
position: absolute;
.node-icon {
--
Gitblit v1.8.0