<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"
|
:agent="agentName"
|
:sizeX="insideSizeX"
|
:sizeY="insideSizeY"
|
:startX="insideStartX"
|
:isShowHover="true"
|
class="inside-nodes"
|
></serfDiagram>
|
</div>
|
</div>
|
<div class="outer" v-if="outsideNodes.length">
|
<serfDiagram
|
ref="outer-nodes"
|
:members="outsideNodes"
|
:agent="agentName"
|
:sizeX="280"
|
:sizeY="370"
|
: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',
|
props: {
|
nodes: Array
|
},
|
components: {
|
SerfDiagram
|
},
|
data () {
|
return {
|
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)
|
//this.getInsideNodes();
|
},
|
methods: {
|
getRandom (index) {
|
if (index % 2 == 0) {
|
return Math.random() * 20
|
} else {
|
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');
|
let len = arr.length;
|
let lefts = [];
|
let tops = [];
|
this.insideNodes = arr.map((item, index) => {
|
lefts.push((20 - len) * (index + 1) + this.getRandom(index));
|
tops.push(30 * (index + 1));
|
return {
|
l: 10 + this.getRandom(index),
|
t: 30 * (index + 1),
|
nodeName: item.nodeName,
|
id: item.id,
|
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);
|
},
|
},
|
computed: {
|
cloudPic () {
|
return '/images/settings/cloud.png'
|
},
|
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');
|
// 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');
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.cloud {
|
width: 100%;
|
display: flex;
|
.inner {
|
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: 130px 100px 100px;
|
.node {
|
position: absolute;
|
.node-icon {
|
width: 40px;
|
height: 40px;
|
}
|
.node-name {
|
font-size: 14px;
|
color: #333;
|
}
|
}
|
}
|
}
|
.outer {
|
width: 40%;
|
position: relative;
|
text-align: left;
|
.node {
|
position: absolute;
|
}
|
}
|
}
|
</style>
|
