From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复

---
 src/components/serfDiagram/index.vue |   93 ++++++++++++++++++++++++++--------------------
 1 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 4f69b58..945e15d 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -30,9 +30,10 @@
     members: Array,
     sizeX: Number,
     sizeY: Number,
-    startX: Number
+    startX: Number,
+    isShowHover: Boolean
   },
-  data () {
+  data() {
     return {
       nodeSize: 20,
       fontSize: 20,
@@ -40,12 +41,13 @@
       toolTipStyle: {
         display: "none",
         height: "30px",
-        width: "120px"
+        width: "186px",
+        borderColor: "#ccc"
       }
     };
   },
   computed: {
-    nodes () {
+    nodes() {
       let n = new Array();
       this.members.forEach((v, i) => {
         n.push({
@@ -53,17 +55,16 @@
           name: v.nodeName,
           svgSym: RoleIcon[v.role],
           _color:
-            this.agent === v.nodeName
-              ? "red"
-              : v.role === "master"
-                ? "orange"
-                : ""
+            v.role === "master"
+              ? "orange"
+              : ""
+
         });
       });
 
       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;
@@ -98,7 +99,7 @@
 
       return arr;
     },
-    options () {
+    options() {
       return {
         force: 3000,
         nodeSize: this.nodeSize,
@@ -117,71 +118,80 @@
       };
     }
   },
-  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;
-      this.toolTipStyle.display = "block";
-      this.toolTipStyle.top = node.y - 60 + "px";
-      this.toolTipStyle.left = node.x + "px";
+      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]);
+        let workName = '';
+        switch (this.members[node.id].workType) {
+          case '01':
+            workName = '鍒嗘瀽'
+            break;
+          case '02':
+            workName = '瀛樺偍'
+            break;
+          case '03':
+            workName = '鍒嗘瀽+瀛樺偍'
+            break;
+          case '04':
+            workName = '搴旂敤'
+            break;
+          default:
+            return;
+        }
+        this.toolTipNode = this.members[node.id].nodeName;
+        this.toolTipAddr = `${this.members[node.id].Address}(${workName})`;
+      }
 
-      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) {
-      // 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)
-      debugger
+    nodeClick(event, node) {
       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]) {
@@ -199,6 +209,7 @@
 .net {
   height: 100%;
   margin: 0;
+  position: relative;
 }
 
 .node {
@@ -259,7 +270,7 @@
   position: absolute;
   background: #fff;
   /* border: 1px solid #127862; */
-  border: 1px solid rgba(76, 78, 78, 0.7);
+  border: 1px solid #ccc;
   font-size: 11px;
   padding-left: 5px;
 }
@@ -267,7 +278,7 @@
 .arrow_box p {
   height: 30px;
   line-height: 30px;
-  width: 100px;
+  width: 100%;
   overflow: hidden;
 }
 .arrow_box:after,
@@ -275,7 +286,7 @@
   right: 50%;
   top: 100%;
   border: solid transparent;
-  content: ' ';
+  content: " ";
   height: 0;
   width: 0;
   position: absolute;

--
Gitblit v1.8.0