From d5144e7cb7ccf2795e02098b850e282eb2a6e74f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 14 十月 2020 10:27:07 +0800
Subject: [PATCH] 集群节点展示测试
---
src/components/serfDiagram/index.vue | 123 +++++++++++++++++++++++++++++++++++++++--
1 files changed, 117 insertions(+), 6 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>
--
Gitblit v1.8.0