<template lang='pug'>
|
.net
|
//- d3-network(
|
//- ref='net'
|
//- class="member"
|
//- v-if="memberNodes.length && !searchNodes.length"
|
//- :net-nodes="memberNodes"
|
//- :net-links="links"
|
//- :options="options"
|
//- :selection="{nodes: nodeSelected, links: linksSelected}"
|
//- @drag-start='dragStart'
|
//- @node-click='nodeClick'
|
//- @node-hover='nodeHover'
|
//- @node-out='nodeOut'
|
//- )
|
d3-network(
|
ref='net'
|
class="search"
|
v-if="searchNodes.length"
|
:net-nodes="nodes"
|
:net-links="links"
|
:options="options"
|
:selection="{nodes: nodeSelected, links: linksSelected}"
|
@drag-start='dragStart'
|
@node-click='nodeClick'
|
@node-hover='nodeHover'
|
@node-out='nodeOut'
|
)
|
//- .clouds(v-if="members.length")
|
//- d3-network(
|
//- ref='net'
|
//- v-if="memberNodes.length"
|
//- :net-nodes="memberNodes"
|
//- :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: {
|
D3Network
|
},
|
props: {
|
agent: String,
|
//members: Array,
|
searchNodes: Array,
|
},
|
data() {
|
return {
|
nodeSize: 20,
|
fontSize: 20,
|
canvas: false,
|
toolTipStyle: {
|
display: "none",
|
height: "30px",
|
width: "120px"
|
}
|
};
|
},
|
computed: {
|
//分类节点
|
//云内云边节点
|
memberNodes(){
|
let arr = [];
|
let mockMembers = [
|
{
|
cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
|
hardwareType: "01",
|
id: "DSVAD010120190622",
|
node_id: "DSVAD010120190622",
|
node_ip: "192.168.20.10:30190",
|
node_name: "开发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",
|
node_name: "开发测试20.10-1",
|
role:'master'
|
},
|
{
|
cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
|
hardwareType: "03",
|
id: "DSVAD010120190624",
|
node_id: "DSVAD010120190624",
|
node_ip: "192.168.20.10:30190",
|
node_name: "测试20.10-1",
|
role:'pc'
|
},
|
{
|
cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
|
hardwareType: "03",
|
id: "DSVAD010120190625",
|
node_id: "DSVAD010120190625",
|
node_ip: "192.168.20.10:30190",
|
node_name: "测试20.101-1",
|
role:'server'
|
},
|
]
|
//this.members.forEach(item=>{
|
|
mockMembers.forEach(item=>{
|
if(item.hardwareType=='03'){
|
arr.push({
|
id:item.id,
|
cluster_id:item.cluster_id,
|
name:item.nodeName,
|
svgSym: RoleIcon[item.role],
|
x: -10,
|
y: -10,
|
_color:
|
this.agent === item.nodeName
|
? "red"
|
: item.role === "master"
|
? "orange"
|
: ""
|
});
|
}else{
|
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('serf-mem',arr)
|
return arr;
|
},
|
//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.边节点(现对应bit)
|
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) => {
|
n.push({
|
id: v.id,
|
cluster_id: v.cluster_id,
|
name: v.nodeName,
|
svgSym: RoleIcon[v.role],
|
_color:
|
this.agent === v.nodeName
|
? "red"
|
: v.role === "master"
|
? "orange"
|
: ""
|
});
|
});
|
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:
|
break;
|
case 2:
|
arr = [{ sid: 0, tid: 1 }];
|
break;
|
case 3:
|
arr = [{ sid: 0, tid: 1 }, { sid: 1, tid: 2 }, { sid: 0, tid: 2 }];
|
break;
|
default:
|
for (let i = 0; i < count; i++) {
|
let loop = Math.round(Math.random() * 5 + 2); // At least 2 times
|
for (let j = 0; j < loop; j++) {
|
let target = Math.round(Math.random() * (count - 1));
|
if (target === i) {
|
// is me? skip
|
continue;
|
}
|
|
if (!dup["d" + target + i]) {
|
arr.push({ sid: i, tid: target });
|
dup["d" + i + target] = 1;
|
}
|
}
|
}
|
}
|
|
return arr;
|
},
|
|
options() {
|
return {
|
force: 3000,
|
nodeSize: this.nodeSize,
|
fontSize: this.fontSize,
|
nodeLabels: true,
|
canvas: this.canvas,
|
linkWidth: 0,
|
size: {
|
w: 745,
|
h: 426
|
}
|
};
|
}
|
},
|
watch:{
|
searchNodes(n,o){
|
console.log(n,o)
|
}
|
},
|
created() {
|
|
this.reset();
|
},
|
mounted(){
|
console.log('searchNodes',this.searchNodes)
|
console.log(this.members)
|
console.log('innerNodes',this.innerNodes);
|
console.log('outerNodes',this.outerNodes)
|
},
|
methods: {
|
nodeHover(event, node) {
|
console.log(node);
|
node._opacity = 1;
|
node._size = 28;
|
let width = document.body.clientWidth;
|
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;
|
},
|
nodeOut(event, node) {
|
node._opacity = node.opacity;
|
node._size = node.size;
|
this.toolTipStyle.display = "none";
|
},
|
dragStart(event) {
|
if (event) {
|
this.movement = event.timeStamp;
|
}
|
},
|
nodeClick(event, node) {
|
// if (this.nodeSelected[node.id]) {
|
// this.unSelectNode(node.id)
|
// // 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])
|
if (event.timeStamp - this.movement < 200) {
|
//this.$emit("selected-node", event, this.members[node.id]);
|
debugger
|
let someNode = this.members.find(one=>one.id == node.id)
|
this.$emit("selected-node", event, someNode);
|
}
|
},
|
reset() {
|
this.nodeSelected = {};
|
this.linksSelected = {};
|
(this.toolTipNode = ""), (this.toolTipAddr = ""), (this.movement = 0);
|
},
|
unSelectNode(nodeId) {
|
if (this.nodeSelected[nodeId]) {
|
delete this.nodeSelected[nodeId];
|
}
|
this.selectNodesLinks();
|
},
|
unSelectLink(linkId) {
|
if (this.linksSelected[linkId]) {
|
delete this.linksSelected[linkId];
|
}
|
},
|
selectNode(node) {
|
this.nodeSelected[node.id] = node;
|
},
|
selectLink(link) {
|
this.$set(this.linksSelected, link.id, link);
|
},
|
selectNodesLinks() {
|
for (let link of this.links) {
|
// node is nodeSelected
|
if (this.nodeSelected[link.sid] || this.nodeSelected[link.tid]) {
|
this.selectLink(link);
|
} else {
|
this.unSelectLink(link.id);
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.net {
|
height: 100%;
|
margin: 0;
|
}
|
|
.node {
|
/* stroke: rgba(18, 120, 98, 0.7); */
|
stroke: rgba(76, 78, 78, 0.7);
|
stroke-width: 3px;
|
-webkit-transition: fill 0.5s ease;
|
transition: fill 0.5s ease;
|
/* 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;
|
/* border: 1px solid #127862; */
|
border: 1px solid rgba(76, 78, 78, 0.7);
|
font-size: 11px;
|
padding-left: 5px;
|
}
|
|
.arrow_box p {
|
height: 30px;
|
line-height: 30px;
|
width: 100px;
|
overflow: hidden;
|
}
|
.arrow_box:after,
|
.arrow_box:before {
|
right: 100%;
|
top: 50%;
|
border: solid transparent;
|
content: " ";
|
height: 0;
|
width: 0;
|
position: absolute;
|
pointer-events: none;
|
}
|
|
.arrow_box:after {
|
border-color: rgba(136, 183, 213, 0);
|
border-right-color: #fff;
|
border-width: 5px;
|
margin-top: -5px;
|
}
|
.arrow_box:before {
|
border-color: rgba(194, 225, 245, 0);
|
border-right-color: #323333;
|
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:rgba(152, 183, 251, 0.39);
|
}
|
</style>
|
