From 355de6d28489e9ff3d17138575c2fef32266930e Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 15 十月 2020 16:13:08 +0800
Subject: [PATCH] 应用中心未安装算法图标修复,集群节点展示组件更新
---
src/components/serfDiagram/index.vue | 165 +++++++++----------------------------------------------
1 files changed, 27 insertions(+), 138 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 544fb8a..179f7d8 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -2,7 +2,6 @@
.net
d3-network(
ref='net'
- v-if="nodes.length"
:net-nodes="nodes"
:net-links="links"
:options="options"
@@ -12,42 +11,12 @@
@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>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";
-
+
export default {
name: "SerfDiagram",
components: {
@@ -56,7 +25,6 @@
props: {
agent: String,
members: Array,
- searchNodes: Array,
},
data() {
return {
@@ -71,72 +39,9 @@
};
},
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.searchNodes.forEach((v, i) => {
+ this.members.forEach((v, i) => {
n.push({
id: i,
name: v.nodeName,
@@ -149,14 +54,14 @@
: ""
});
});
- console.log(n)
+
return n;
},
links() {
let arr = new Array();
let dup = new Array(); // Deduplicate to ensure that two nodes have only one line
const count = this.members.length;
-
+
switch (count) {
case 0:
case 1:
@@ -176,7 +81,7 @@
// is me? skip
continue;
}
-
+
if (!dup["d" + target + i]) {
arr.push({ sid: i, tid: target });
dup["d" + i + target] = 1;
@@ -184,7 +89,7 @@
}
}
}
-
+
return arr;
},
options() {
@@ -205,11 +110,6 @@
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);
@@ -219,9 +119,9 @@
this.toolTipStyle.display = "block";
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;
@@ -239,13 +139,12 @@
// // is not nodeSelected
// } else {
// this.selectNode(node)
-
+
// }
// this.selectNodesLinks()
// this.$set(this.nodes, node.index, node)
console.log(event,node)
- console.log(this.members)
- console.log(this.members[node.id])
+ debugger
if (event.timeStamp - this.movement < 200) {
this.$emit("selected-node", event, this.members[node.id]);
}
@@ -285,13 +184,13 @@
}
};
</script>
-
+
<style>
.net {
height: 100%;
margin: 0;
}
-
+
.node {
/* stroke: rgba(18, 120, 98, 0.7); */
stroke: rgba(76, 78, 78, 0.7);
@@ -301,51 +200,51 @@
/* fill: #dcfaf3; */
fill: #e3e4e4;
}
-
+
.node.selected {
stroke: #caa455;
}
-
+
.node.pinned {
stroke: rgba(190, 56, 93, 0.6);
}
-
+
.link {
stroke: rgba(18, 120, 98, 0.3);
}
-
+
.link,
.node {
stroke-linecap: round;
}
-
+
.link:hover,
.node:hover {
stroke: #df8108;
stroke-width: 1px;
cursor: pointer;
}
-
+
.link.selected {
stroke: rgba(202, 164, 85, 0.6);
}
-
+
.curve {
fill: none;
}
-
+
.link-label,
.node-label {
/* fill: #127862; */
fill: rgba(76, 78, 78, 0.7);
}
-
+
.link-label {
-webkit-transform: translateY(-0.5em);
transform: translateY(-0.5em);
text-anchor: middle;
}
-
+
.arrow_box {
position: absolute;
background: #fff;
@@ -354,7 +253,7 @@
font-size: 11px;
padding-left: 5px;
}
-
+
.arrow_box p {
height: 30px;
line-height: 30px;
@@ -372,7 +271,7 @@
position: absolute;
pointer-events: none;
}
-
+
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
@@ -385,14 +284,4 @@
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>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0