From 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 18:29:36 +0800
Subject: [PATCH] 抓拍大图层级修复v1
---
src/components/serfDiagram/index.vue | 131 ++++++++++++++++++++++++++-----------------
1 files changed, 80 insertions(+), 51 deletions(-)
diff --git a/src/components/serfDiagram/index.vue b/src/components/serfDiagram/index.vue
index 179f7d8..945e15d 100644
--- a/src/components/serfDiagram/index.vue
+++ b/src/components/serfDiagram/index.vue
@@ -1,7 +1,10 @@
<template lang='pug'>
.net
+ .arrow_box(:style="toolTipStyle")
+ p {{toolTipAddr}}
d3-network(
ref='net'
+ :startX="startX"
:net-nodes="nodes"
:net-links="links"
:options="options"
@@ -9,14 +12,14 @@
@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";
-
+
export default {
name: "SerfDiagram",
components: {
@@ -25,6 +28,10 @@
props: {
agent: String,
members: Array,
+ sizeX: Number,
+ sizeY: Number,
+ startX: Number,
+ isShowHover: Boolean
},
data() {
return {
@@ -34,7 +41,8 @@
toolTipStyle: {
display: "none",
height: "30px",
- width: "120px"
+ width: "186px",
+ borderColor: "#ccc"
}
};
},
@@ -47,21 +55,20 @@
name: v.nodeName,
svgSym: RoleIcon[v.role],
_color:
- this.agent === v.nodeName
- ? "red"
- : v.role === "master"
- ? "orange"
- : ""
+ v.role === "master"
+ ? "orange"
+ : ""
+
});
});
-
+
return n;
},
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:
@@ -81,7 +88,7 @@
// is me? skip
continue;
}
-
+
if (!dup["d" + target + i]) {
arr.push({ sid: i, tid: target });
dup["d" + i + target] = 1;
@@ -89,7 +96,7 @@
}
}
}
-
+
return arr;
},
options() {
@@ -100,9 +107,13 @@
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
}
};
}
@@ -115,13 +126,33 @@
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";
-
- this.toolTipNode = this.members[node.id].nodeName;
- this.toolTipAddr = this.members[node.id].Address;
+ //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]);
+ 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})`;
+ }
+
},
nodeOut(event, node) {
node._opacity = node.opacity;
@@ -134,17 +165,6 @@
}
},
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
if (event.timeStamp - this.movement < 200) {
this.$emit("selected-node", event, this.members[node.id]);
}
@@ -189,8 +209,9 @@
.net {
height: 100%;
margin: 0;
+ position: relative;
}
-
+
.node {
/* stroke: rgba(18, 120, 98, 0.7); */
stroke: rgba(76, 78, 78, 0.7);
@@ -200,70 +221,70 @@
/* 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;
/* border: 1px solid #127862; */
- border: 1px solid rgba(76, 78, 78, 0.7);
+ border: 1px solid #ccc;
font-size: 11px;
padding-left: 5px;
}
-
+
.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: " ";
height: 0;
@@ -271,17 +292,25 @@
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