From 83b010226237a7a7eb8d77078eda14f3359a4bac Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 16 十月 2020 13:27:22 +0800
Subject: [PATCH] 集群节点展示更新
---
src/pages/settings/components/CloudNode.vue | 148 ++++++++++++++++++++++++++++++++++++++++++-------
src/components/serfDiagram/vue-d3-network/index.vue | 14 ++++
src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue | 6 -
src/components/serfDiagram/index.vue | 12 +++
4 files changed, 150 insertions(+), 30 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 179f7d8..f8ad4fd 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -2,6 +2,7 @@
.net
d3-network(
ref='net'
+ :startX="startX"
:net-nodes="nodes"
:net-links="links"
:options="options"
@@ -25,6 +26,9 @@
props: {
agent: String,
members: Array,
+ sizeX: Number,
+ sizeY: Number,
+ startX: Number
},
data() {
return {
@@ -100,9 +104,13 @@
nodeLabels: true,
canvas: this.canvas,
linkWidth: 0,
+ // size: {
+ // w: 745,
+ // h: 426
+ // }
size: {
- w: 745,
- h: 426
+ w: this.sizeX || 445,
+ h: this.sizeY || 426
}
};
}
diff --git a/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue b/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue
index 43cfaec..53b7f34 100644
--- a/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue
+++ b/src/components/serfDiagram/vue-d3-network/components/svgRenderer.vue
@@ -205,8 +205,4 @@
}
};
</script>
-<style>
- .net-svg{
- background-color: rgba(127, 255, 212, 0.198);
- }
-</style>
+
diff --git a/src/components/serfDiagram/vue-d3-network/index.vue b/src/components/serfDiagram/vue-d3-network/index.vue
index 5ef31b5..3c8d774 100644
--- a/src/components/serfDiagram/vue-d3-network/index.vue
+++ b/src/components/serfDiagram/vue-d3-network/index.vue
@@ -13,6 +13,7 @@
svgRenderer
},
props: {
+ startX: Number,
netNodes: {
type: Array
},
@@ -52,6 +53,10 @@
canvas: false,
nodes: [],
links: [],
+ nodeX: [],
+ nodeY: [],
+ minWidth:0,
+ minHeight:0,
size: {
w: 500,
h: 420
@@ -273,7 +278,11 @@
vm.$set(node, "_opacity", node._size / 30);
vm.$set(node, "opacity", node._opacity);
}
-
+ // this.nodeX.push(node.x);
+ // this.nodeY.push(node.y);
+ // this.minWidth = Math.max(...this.nodeX) - Math.min(...this.nodeX);
+ // this.minHeight = Math.max(...this.nodeY) - Math.min(...this.nodeY);
+ // console.log(this.nodeX,this.nodeY,this.minWidth,this.minHeight);
return node;
});
},
@@ -307,7 +316,8 @@
if (forces.Center !== false)
sim.force("center", d3.forceCenter(this.center.x, this.center.y));
if (forces.X !== false) {
- sim.force("X", d3.forceX(this.center.x).strength(forces.X));
+ //sim.force("X", d3.forceX(this.center.x).strength(forces.X));
+ sim.force("X", d3.forceX(this.startX||160).strength(forces.X));
}
if (forces.Y !== false) {
sim.force("Y", d3.forceY(this.center.y).strength(forces.Y));
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index 01e0532..c285ab4 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -1,45 +1,72 @@
<template>
<div class="cloud">
<div class="inner">
+ <!-- <div
+ class="rect"
+ :style="{width:`${minWidth+BaseWidth}px`,height:`${minHeight+BaseHeight}px`}"
+ >-->
<div class="rect">
- <div
+ <!-- <div
class="node"
- v-for="(item,index) in insideNodes"
+ v-for="item in insideNodes"
:key="item.id"
- :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
+ :style="{top:item.t+'px',left:item.l+'px'}"
>
<span class="node-icon">
- <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
</span>
<span class="node-name">{{item.nodeName}}</span>
- </div>
+ </div>-->
+ <serfDiagram
+ ref="inside-nodes"
+ :members="insideNodes"
+ :agent="agentName"
+ :sizeX="400"
+ :sizeY="330"
+ class="inside-nodes"
+ ></serfDiagram>
</div>
</div>
<div class="outer">
- <div
+ <serfDiagram
+ ref="outer-nodes"
+ :members="outsideNodes"
+ :agent="agentName"
+ :sizeX="230"
+ :sizeY="370"
+ :startX="60"
+ class="outer-nodes"
+ ></serfDiagram>
+ <!-- <div
class="node"
- v-for="(item,index) in insideNodes"
+ v-for="(item,index) in outsideNodes"
:key="item.id"
- :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}"
+ :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
>
- <span class="node-icon">
- <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
- </span>
+ <span class="node-icon"></span>
<span class="node-name">{{item.nodeName}}</span>
- </div>
+ </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",
@@ -56,7 +83,7 @@
id: "DSVAD010120190623",
node_id: "DSVAD010120190623",
node_ip: "192.168.20.10:30190",
- nodeName: "寮�鍙戞祴璇�20.10-1",
+ nodeName: "寮�鍙戞祴璇�20.11-1",
role: 'master'
},
{
@@ -65,7 +92,7 @@
id: "DSVAD010120190624",
node_id: "DSVAD010120190624",
node_ip: "192.168.20.10:30190",
- nodeName: "娴嬭瘯20.10-1",
+ nodeName: "娴嬭瘯20.13-1",
role: 'pc'
},
{
@@ -77,17 +104,97 @@
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'
+ },
]
}
+ },
+ mounted () {
+ //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.mockData.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');
- return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ return this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
},
+ // 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');
@@ -103,11 +210,10 @@
.inner {
background: url('/images/settings/cloud.png') no-repeat;
background-size: 100%;
- width: 50%;
.rect {
- margin: 100px;
- background: cornflowerblue;
+ //background: rgba(176, 203, 253, 0.3);
position: relative;
+ margin: 100px;
.node {
position: absolute;
.node-icon {
@@ -122,7 +228,7 @@
}
}
.outer {
- width: 50%;
+ width: 40%;
position: relative;
.node {
position: absolute;
--
Gitblit v1.8.0