From d5144e7cb7ccf2795e02098b850e282eb2a6e74f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 14 十月 2020 10:27:07 +0800
Subject: [PATCH] 集群节点展示测试
---
src/pages/settings/components/ClusterManagement.vue | 23 ++++---
src/components/serfDiagram/vue-d3-network/index.vue | 1
src/components/serfDiagram/index.vue | 123 +++++++++++++++++++++++++++++++++++++++--
3 files changed, 130 insertions(+), 17 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index d974951..544fb8a 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -2,6 +2,7 @@
.net
d3-network(
ref='net'
+ v-if="nodes.length"
:net-nodes="nodes"
:net-links="links"
:options="options"
@@ -11,6 +12,36 @@
@node-hover='nodeHover'
@node-out='nodeOut'
)
+ .clouds(v-if="members.length")
+ //- d3-network(
+ //- ref='net'
+ //- v-if="outerNodes.length"
+ //- :net-nodes="outerNodes"
+ //- :net-links="links"
+ //- :options="options"
+ //- :selection="{nodes: nodeSelected, links: linksSelected}"
+ //- @drag-start='dragStart'
+ //- @node-click='nodeClick'
+ //- @node-hover='nodeHover'
+ //- @node-out='nodeOut'
+ //- )
+ .inner
+ d3-network(
+ ref='net'
+ v-if="innerNodes.length"
+ :net-nodes="innerNodes"
+ :net-links="links"
+ :options="options"
+ :selection="{nodes: nodeSelected, links: linksSelected}"
+ @drag-start='dragStart'
+ @node-click='nodeClick'
+ @node-hover='nodeHover'
+ @node-out='nodeOut'
+ )
+
+
+
+
</template>
<script>
@@ -24,7 +55,8 @@
},
props: {
agent: String,
- members: Array
+ members: Array,
+ searchNodes: Array,
},
data() {
return {
@@ -39,9 +71,72 @@
};
},
computed: {
+ //鍒嗙被鑺傜偣
+ //1.浜戝唴鑺傜偣(瀵瑰簲X86)
+ innerNodes(){
+ // return this.members.map(item=>{
+ // if(item.hardwareType == '01'||item.hardwareType == '02'){
+ // return {
+ // id:item.id,
+ // name:item.nodeName,
+ // svgSym: RoleIcon[item.role],
+ // _color:
+ // this.agent === v.nodeName
+ // ? "red"
+ // : v.role === "master"
+ // ? "orange"
+ // : ""
+ // }
+ // }
+ // })
+ let arr = [];
+ this.members.forEach(item=>{
+ if(item.hardwareType == '01'||item.hardwareType == '02'){
+ arr.push({
+ id:item.id,
+ cluster_id:item.cluster_id,
+ name:item.nodeName,
+ svgSym: RoleIcon[item.role],
+ _color:
+ this.agent === item.nodeName
+ ? "red"
+ : item.role === "master"
+ ? "orange"
+ : ""
+ });
+ }
+ });
+ console.log(this.members);
+ console.log(arr)
+ return arr;
+ },
+ //2.杈硅妭鐐�(鐜板搴攂it)
+ outerNodes(){
+ let arr = [];
+ this.members.forEach(item=>{
+ debugger
+ if(item.hardwareType == '03'){
+ arr.push({
+ id:item.id,
+ cluster_id:item.cluster_id,
+ name:item.nodeName,
+ svgSym: RoleIcon[item.role],
+ _color:
+ this.agent === item.nodeName
+ ? "red"
+ : item.role === "master"
+ ? "orange"
+ : ""
+ });
+ }
+ });
+ console.log(this.members);
+ console.log(arr)
+ return arr;
+ },
nodes() {
let n = new Array();
- this.members.forEach((v, i) => {
+ this.searchNodes.forEach((v, i) => {
n.push({
id: i,
name: v.nodeName,
@@ -54,7 +149,7 @@
: ""
});
});
-
+ console.log(n)
return n;
},
links() {
@@ -110,6 +205,11 @@
created() {
this.reset();
},
+ mounted(){
+ console.log(this.members)
+ console.log('innerNodes',this.innerNodes);
+ console.log('outerNodes',this.outerNodes)
+ },
methods: {
nodeHover(event, node) {
console.log(node);
@@ -120,8 +220,8 @@
this.toolTipStyle.top = node.y - 10 + "px";
this.toolTipStyle.left = node.x + width / 2 - 30 + "px";
- this.toolTipNode = this.members[node.id].nodeName;
- this.toolTipAddr = this.members[node.id].Address;
+ //this.toolTipNode = this.members[node.id].nodeName;
+ //this.toolTipAddr = this.members[node.id].Address;
},
nodeOut(event, node) {
node._opacity = node.opacity;
@@ -144,7 +244,8 @@
// this.selectNodesLinks()
// this.$set(this.nodes, node.index, node)
console.log(event,node)
- debugger
+ console.log(this.members)
+ console.log(this.members[node.id])
if (event.timeStamp - this.movement < 200) {
this.$emit("selected-node", event, this.members[node.id]);
}
@@ -284,4 +385,14 @@
border-width: 6px;
margin-top: -6px;
}
+.clouds{
+ height: 100%;
+ margin:0;
+ background:rgba(149, 221, 255, 0.322);
+}
+.inner{
+ height:300px;
+ margin: 50px auto;
+ background:rgb(201 233 249);
+}
</style>
diff --git a/src/components/serfDiagram/vue-d3-network/index.vue b/src/components/serfDiagram/vue-d3-network/index.vue
index 6b7ff4e..5ef31b5 100644
--- a/src/components/serfDiagram/vue-d3-network/index.vue
+++ b/src/components/serfDiagram/vue-d3-network/index.vue
@@ -398,6 +398,7 @@
},
// -- Render helpers
nodeClick(event, node) {
+ console.log(node)
this.$emit("node-click", event, node);
},
nodeHover(event, node) {
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 9a04946..8ab8f83 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/src/pages/settings/components/ClusterManagement.vue
@@ -104,6 +104,7 @@
<serfDiagram
ref="diagram"
:members="members"
+ :searchNodes="nodes"
:agent="agentName"
v-loading="loading"
@selected-node="joinNode"
@@ -272,12 +273,12 @@
loading: false,
searchDis: false,
agentName: "",
- members: []
+ members: [],
+ nodes: [],
};
},
mounted() {
this.findCluster();
- this.getVrrpInfo();
this.getEsClusterNodes();
},
methods: {
@@ -290,7 +291,6 @@
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
- debugger
//alert("submit!");
let json = {
clusterId: this.clusterid,
@@ -409,6 +409,7 @@
this.stopSearch();
}, 10 * 1000);
},
+ //鎼滅储闆嗙兢
async getSearchNodes() {
let res = await getSearchNodes();
if (res && res.success) {
@@ -428,7 +429,8 @@
return element.node_id === i.node_id;
});
if (found === undefined) {
- this.members.push(i);
+ //this.members.push(i);
+ this.nodes.push(i);
}
});
}
@@ -477,6 +479,8 @@
debugger
let obj = {};
obj.device_type = i.device_type;
+ obj.workType = i.device_type.substr(2,2);
+ obj.hardwareType = i.device_type.substr(4,2);
obj.cluster_id = i.cluster_id;
obj.clusterName = res.data.clusterName;
obj.create_time = i.create_time;
@@ -489,6 +493,7 @@
return obj;
});
this.members = this.members.concat(list);
+ console.log(this.members)
} else {
this.isHasColony = false;
// this.activeName = '1'
@@ -550,6 +555,7 @@
},
joinNode(event, node) {
+ debugger
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
this.manageForm.clustername = node.clusterName;
@@ -695,14 +701,9 @@
this.ruleForm.virtualIp = ip;
console.log(this.ruleForm.virtualIp)
}
-
-
},
- mounted () {
- this.findCluster();
-
- },
+
created () { }
};
@@ -777,6 +778,6 @@
line-height: 30px;
}
.nodes-svg{
- background-color: aquamarine;
+ background-color: rgba(127, 255, 212, 0.459);
}
</style>
--
Gitblit v1.8.0