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 |   79 ++++++++++++++++++++++++---------------
 1 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 0e87121..4f69b58 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -4,6 +4,7 @@
       p {{toolTipAddr}}
     d3-network(
        ref='net'
+      :startX="startX"
       :net-nodes="nodes"
       :net-links="links"
       :options="options"
@@ -11,10 +12,10 @@
       @drag-start='dragStart'
       @node-click='nodeClick'
       @node-hover='nodeHover'
-      @node-out='nodeOut'     
+      @node-out='nodeOut'
     )
 </template>
-
+ 
 <script>
 import D3Network from "./vue-d3-network";
 import RoleIcon from "./icons.js";
@@ -26,9 +27,12 @@
   },
   props: {
     agent: String,
-    members: Array
+    members: Array,
+    sizeX: Number,
+    sizeY: Number,
+    startX: Number
   },
-  data() {
+  data () {
     return {
       nodeSize: 20,
       fontSize: 20,
@@ -41,7 +45,7 @@
     };
   },
   computed: {
-    nodes() {
+    nodes () {
       let n = new Array();
       this.members.forEach((v, i) => {
         n.push({
@@ -59,7 +63,7 @@
 
       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;
@@ -94,7 +98,7 @@
 
       return arr;
     },
-    options() {
+    options () {
       return {
         force: 3000,
         nodeSize: this.nodeSize,
@@ -102,40 +106,44 @@
         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();
   },
   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
@@ -145,34 +153,35 @@
       // }
       // this.selectNodesLinks()
       // this.$set(this.nodes, node.index, 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]) {
@@ -185,7 +194,7 @@
   }
 };
 </script>
-
+ 
 <style>
 .net {
   height: 100%;
@@ -263,10 +272,10 @@
 }
 .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;
@@ -278,11 +287,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;
 }
-</style>
+.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);
+}
+</style>
\ No newline at end of file

--
Gitblit v1.8.0