From 98a6297b10a4b97c3022f84d3ba7908c178d9ee0 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 20 十月 2020 10:30:10 +0800
Subject: [PATCH] 应用中心安装提示bug修复
---
src/components/serfDiagram/index.vue | 217 ++++++++++++++++--------------------------------------
1 files changed, 64 insertions(+), 153 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 544fb8a..b87364c 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -1,8 +1,10 @@
<template lang='pug'>
.net
+ .arrow_box(:style="toolTipStyle")
+ p {{toolTipAddr}}
d3-network(
ref='net'
- v-if="nodes.length"
+ :startX="startX"
:net-nodes="nodes"
:net-links="links"
:options="options"
@@ -10,40 +12,10 @@
@drag-start='dragStart'
@node-click='nodeClick'
@node-hover='nodeHover'
- @node-out='nodeOut'
+ @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";
@@ -56,9 +28,12 @@
props: {
agent: String,
members: Array,
- searchNodes: Array,
+ sizeX: Number,
+ sizeY: Number,
+ startX: Number,
+ isShowHover: Boolean
},
- data() {
+ data () {
return {
nodeSize: 20,
fontSize: 20,
@@ -66,93 +41,29 @@
toolTipStyle: {
display: "none",
height: "30px",
- width: "120px"
+ width: "150px"
}
};
},
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() {
+ nodes () {
let n = new Array();
- this.searchNodes.forEach((v, i) => {
+ this.members.forEach((v, i) => {
n.push({
id: i,
name: v.nodeName,
svgSym: RoleIcon[v.role],
_color:
- this.agent === v.nodeName
- ? "red"
- : v.role === "master"
- ? "orange"
- : ""
+ v.role === "master"
+ ? "orange"
+ : ""
+
});
});
- console.log(n)
+
return n;
},
- links() {
+ links () {
let arr = new Array();
let dup = new Array(); // Deduplicate to ensure that two nodes have only one line
const count = this.members.length;
@@ -187,7 +98,7 @@
return arr;
},
- options() {
+ options () {
return {
force: 3000,
nodeSize: this.nodeSize,
@@ -195,45 +106,47 @@
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
}
};
}
},
- created() {
+ created () {
this.reset();
},
- mounted(){
- console.log(this.members)
- console.log('innerNodes',this.innerNodes);
- console.log('outerNodes',this.outerNodes)
- },
methods: {
- nodeHover(event, node) {
+ 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";
+ //let width = document.body.clientWidth;
+ if (this.isShowHover) {
+ this.toolTipStyle.display = "block";
+ this.toolTipStyle.top = node.y - 60 + "px";
+ this.toolTipStyle.left = node.x + "px";
+ console.log(this.members[node.id])
+ 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) {
+ nodeOut (event, node) {
node._opacity = node.opacity;
node._size = node.size;
this.toolTipStyle.display = "none";
},
- dragStart(event) {
+ dragStart (event) {
if (event) {
this.movement = event.timeStamp;
}
},
- nodeClick(event, node) {
+ nodeClick (event, node) {
// if (this.nodeSelected[node.id]) {
// this.unSelectNode(node.id)
// // is not nodeSelected
@@ -243,36 +156,35 @@
// }
// this.selectNodesLinks()
// this.$set(this.nodes, node.index, node)
- console.log(event,node)
- console.log(this.members)
- console.log(this.members[node.id])
+ console.log(event, node)
+ debugger
if (event.timeStamp - this.movement < 200) {
this.$emit("selected-node", event, this.members[node.id]);
}
},
- reset() {
+ reset () {
this.nodeSelected = {};
this.linksSelected = {};
(this.toolTipNode = ""), (this.toolTipAddr = ""), (this.movement = 0);
},
- unSelectNode(nodeId) {
+ unSelectNode (nodeId) {
if (this.nodeSelected[nodeId]) {
delete this.nodeSelected[nodeId];
}
this.selectNodesLinks();
},
- unSelectLink(linkId) {
+ unSelectLink (linkId) {
if (this.linksSelected[linkId]) {
delete this.linksSelected[linkId];
}
},
- selectNode(node) {
+ selectNode (node) {
this.nodeSelected[node.id] = node;
},
- selectLink(link) {
+ selectLink (link) {
this.$set(this.linksSelected, link.id, link);
},
- selectNodesLinks() {
+ selectNodesLinks () {
for (let link of this.links) {
// node is nodeSelected
if (this.nodeSelected[link.sid] || this.nodeSelected[link.tid]) {
@@ -285,11 +197,12 @@
}
};
</script>
-
+
<style>
.net {
height: 100%;
margin: 0;
+ position: relative;
}
.node {
@@ -358,15 +271,15 @@
.arrow_box p {
height: 30px;
line-height: 30px;
- width: 100px;
+ width: 100%;
overflow: hidden;
}
.arrow_box:after,
.arrow_box:before {
- right: 100%;
- top: 50%;
+ right: 50%;
+ top: 100%;
border: solid transparent;
- content: " ";
+ content: ' ';
height: 0;
width: 0;
position: absolute;
@@ -378,21 +291,19 @@
border-right-color: #fff;
border-width: 5px;
margin-top: -5px;
+ transform: translateY(6px) rotateZ(-90deg);
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: #323333;
- border-width: 6px;
- margin-top: -6px;
+ border-width: 5px;
+ margin-top: -5px;
}
-.clouds{
- height: 100%;
- margin:0;
- background:rgba(149, 221, 255, 0.322);
+.arrow_box:before {
+ border-color: rgba(194, 225, 245, 0);
+ border-right-color: #323333;
+ border-width: 5px;
+ margin-top: -5px;
+ transform: translateY(6px) rotateZ(-90deg);
}
-.inner{
- height:300px;
- margin: 50px auto;
- background:rgb(201 233 249);
-}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0