From d451e7b7570a523bf0f397fa376be8d929f2492b Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 17 十月 2020 13:42:53 +0800
Subject: [PATCH] 集群节点移入效果更新
---
src/components/serfDiagram/index.vue | 96 ++++++++++++++++++++++++++----------------------
1 files changed, 52 insertions(+), 44 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 9358571..4f69b58 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -19,7 +19,7 @@
<script>
import D3Network from "./vue-d3-network";
import RoleIcon from "./icons.js";
-
+
export default {
name: "SerfDiagram",
components: {
@@ -32,7 +32,7 @@
sizeY: Number,
startX: Number
},
- data() {
+ data () {
return {
nodeSize: 20,
fontSize: 20,
@@ -45,7 +45,7 @@
};
},
computed: {
- nodes() {
+ nodes () {
let n = new Array();
this.members.forEach((v, i) => {
n.push({
@@ -60,14 +60,14 @@
: ""
});
});
-
+
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;
-
+
switch (count) {
case 0:
case 1:
@@ -87,7 +87,7 @@
// is me? skip
continue;
}
-
+
if (!dup["d" + target + i]) {
arr.push({ sid: i, tid: target });
dup["d" + i + target] = 1;
@@ -95,10 +95,10 @@
}
}
}
-
+
return arr;
},
- options() {
+ options () {
return {
force: 3000,
nodeSize: this.nodeSize,
@@ -117,71 +117,71 @@
};
}
},
- created() {
+ created () {
this.reset();
},
methods: {
- nodeHover(event, node) {
+ nodeHover (event, node) {
console.log(node);
node._opacity = 1;
node._size = 28;
- let width = document.body.clientWidth;
+ //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.toolTipStyle.top = node.y - 60 + "px";
+ this.toolTipStyle.left = node.x + "px";
+
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
// } else {
// this.selectNode(node)
-
+
// }
// this.selectNodesLinks()
// this.$set(this.nodes, node.index, node)
- console.log(event,node)
+ 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]) {
@@ -200,7 +200,7 @@
height: 100%;
margin: 0;
}
-
+
.node {
/* stroke: rgba(18, 120, 98, 0.7); */
stroke: rgba(76, 78, 78, 0.7);
@@ -210,51 +210,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;
@@ -263,7 +263,7 @@
font-size: 11px;
padding-left: 5px;
}
-
+
.arrow_box p {
height: 30px;
line-height: 30px;
@@ -272,26 +272,34 @@
}
.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;
pointer-events: none;
}
-
+
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
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: 5px;
margin-top: -5px;
}
.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;
+ transform: translateY(6px) rotateZ(-90deg);
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0