From d8fcf4c20cd4638a3def6227a71ea2c81fbc0885 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 23 十月 2020 17:23:15 +0800
Subject: [PATCH] 标注静态交互
---
src/components/serfDiagram/index.vue | 50 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 36 insertions(+), 14 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 4f69b58..b07b2bb 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -30,7 +30,8 @@
members: Array,
sizeX: Number,
sizeY: Number,
- startX: Number
+ startX: Number,
+ isShowHover: Boolean
},
data () {
return {
@@ -40,7 +41,8 @@
toolTipStyle: {
display: "none",
height: "30px",
- width: "120px"
+ width: "186px",
+ borderColor: "#ccc"
}
};
},
@@ -53,11 +55,10 @@
name: v.nodeName,
svgSym: RoleIcon[v.role],
_color:
- this.agent === v.nodeName
- ? "red"
- : v.role === "master"
- ? "orange"
- : ""
+ v.role === "master"
+ ? "orange"
+ : ""
+
});
});
@@ -126,12 +127,32 @@
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) {
node._opacity = node.opacity;
@@ -199,6 +220,7 @@
.net {
height: 100%;
margin: 0;
+ position: relative;
}
.node {
@@ -259,7 +281,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 +289,7 @@
.arrow_box p {
height: 30px;
line-height: 30px;
- width: 100px;
+ width: 100%;
overflow: hidden;
}
.arrow_box:after,
--
Gitblit v1.8.0