From bd40473c9c634005bc7e62e7fc901bcd8b598fa0 Mon Sep 17 00:00:00 2001
From: feige <feige@qq.com>
Date: 星期五, 02 二月 2024 15:20:26 +0800
Subject: [PATCH] 提交了修改
---
ruoyi-ui/src/views/components/superMindmap.vue | 142 ++++++++++++++++++++++++++++++++--------------
1 files changed, 98 insertions(+), 44 deletions(-)
diff --git a/ruoyi-ui/src/views/components/superMindmap.vue b/ruoyi-ui/src/views/components/superMindmap.vue
index 6ce4c1b..7675fc7 100644
--- a/ruoyi-ui/src/views/components/superMindmap.vue
+++ b/ruoyi-ui/src/views/components/superMindmap.vue
@@ -3,6 +3,7 @@
</template>
<script>
import * as d3 from 'd3';
+import { useRoute,useRouter } from 'vue-router'
export default {
props: {
@@ -10,12 +11,12 @@
nodeWidth:
{
type: Number,
- default: 160
+ default: 180
},
nodeHeight:
{
type: Number,
- default: 40
+ default: 80
},
active:
{
@@ -40,10 +41,10 @@
disabled: true,
"children":
[
- {"label": "鏉窞"},
- {"label": "瀹佹尝"},
- {"label": "娓╁窞"},
- {"label": "缁嶅叴"}
+ {"label1": "鏉窞"},
+ {"label1": "瀹佹尝"},
+ {"label1": "娓╁窞"},
+ {"label1": "缁嶅叴"}
]
},
{
@@ -79,6 +80,7 @@
methods: {
drawMap() {
let that = this
+ //alert(that.$router)
// 婧愭暟鎹�
let data = {}
// 鍒ゆ柇data鏄惁涓虹┖瀵硅薄
@@ -98,11 +100,11 @@
let leafNum = leafList.length
let TreeDeep = getDepth(data)
// 宸﹀彸鍐呰竟璺�
- let mapPaddingLR = 10
+ let mapPaddingLR = 30
// 涓婁笅鍐呰竟璺�
- let mapPaddingTB = 0
+ let mapPaddingTB =30
let mapWidth = this.nodeWidth * TreeDeep + mapPaddingLR * 2;
- let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 2;
+ let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 3.5;
// 瀹氫箟鐢诲竷鈥斺�� 澶栬竟璺� 10px
let svgMap = d3.select('#' + this.id).append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "0px")
// 瀹氫箟鏍戠姸鍥剧敾甯�
@@ -119,12 +121,12 @@
// 鏍峰紡涓�锛氳妭鐐归棿绛夐棿璺�
// return (a.parent == b.parent ? 1: 2) / a.depth;
// 鏍峰紡浜岋細鏍规嵁鑺傜偣瀛愯妭鐐圭殑鏁伴噺锛屽姩鎬佽皟鏁磋妭鐐归棿鐨勯棿璺�
- let rate = (a.parent == b.parent ? (b.children ? b.children.length / 2 : 1) : 2) / a.depth
- // 闂磋窛姣斾緥涓嶈兘灏忎簬0.7锛岄伩鍏嶉棿璺濆お灏忚�岄噸鍙�
+ let rate = (a.parent == b.parent ? (b.children ? b.children.length / 2 : 1) : 2) / a.depth;
+ // 闂磋窛姣斾緥涓嶈兘灏忎簬0.7锛岄伩鍏嶉棿璺濆お灏忚�岄噸鍙�
if (rate < 0.7) {
rate = 0.7
}
- return rate;
+ return rate * 1.1;
})(
// 鍒涘缓灞傜骇甯冨眬锛屽婧愭暟鎹繘琛屾暟鎹浆鎹�
d3.hierarchy(data).sum(function (node) {
@@ -133,13 +135,17 @@
})
)
// 璐濆灏旀洸绾跨敓鎴愬櫒
- let B茅zier_curve_generator = d3.linkHorizontal()
- .x(function (d) {
- return d.y;
- })
- .y(function (d) {
- return d.x;
- });
+ // let B茅zier_curve_generator = d3.linkHorizontal()
+ // .x(function (d) {
+ // return d.y;
+ // })
+ // .y(function (d) {
+ // return d.x;
+ // });
+ let lineGenerator = d3.line()
+ .x(function(d) { return d.y; })
+ .y(function(d) { return d.x; })
+ .curve(d3.curveStep);
//缁樺埗杈�
treeMap.selectAll("path")
// 鑺傜偣鐨勫叧绯� links
@@ -152,13 +158,13 @@
x: d.source.x,
// 杩炵嚎璧风偣鐨剎鍧愭爣
// 绗�1涓�10涓轰笌绾㈠渾鍦堢殑闂磋窛锛岀2涓�10涓簂ink鍐呮枃瀛椾笌杈规鐨勯棿璺濓紝绗�3涓�10涓烘爣绛炬枃瀛椾笌杩炵嚎璧风偣鐨勯棿璺�
- y: d.source.y + 10 + (d.source.data.link ? (getPXwidth(d.source.data.link) + 10) : 0) + getPXwidth(d.source.data.label) + 10
+ y: d.source.y + 10 + (d.source.data.link ? (getPXwidth(d.source.data.link) + 25) : 0) + getPXwidth(d.source.data.label) + 25
};
var end = {x: d.target.x, y: d.target.y};
- return B茅zier_curve_generator({source: start, target: end});
+ return lineGenerator([start, end]);
})
.attr("fill", "none")
- .attr("stroke", "#c3c3c3")
+ .attr("stroke", "#EBA4AA")
// 铏氱嚎
// .attr("stroke-dasharray", "8")
.attr("stroke-width", 1);
@@ -192,37 +198,81 @@
.attr("r", 4)
.attr("fill", function (d) {
if (d.data.childrenTemp) {
- return 'red'
+ return '#EBA4AA'
} else {
return 'white'
}
})
- .attr("stroke", "red")
- .attr("stroke-width", 1);
+ .attr("stroke", "#EBA4AA")
+ .attr("stroke-width", 2);
+ // 娣诲姞澶村儚
+ groups.append("image")
+ .attr("xlink:href", function (d) {
+ return d.data.url; // 澶村儚鍥剧墖鐨勮矾寰�
+ })
+ .attr("x", 12) // 澶村儚鐩稿浜庤妭鐐圭殑姘村钩浣嶇疆
+ .attr("y", -28) // 澶村儚鐩稿浜庤妭鐐圭殑鍨傜洿浣嶇疆
+ .attr("width", 24) // 澶村儚鐨勫搴�
+ .attr("height", 24); // 澶村儚鐨勯珮搴�
//缁樺埗鏍囨敞(鑺傜偣鍓嶇殑鐭╁舰)
groups.append("rect")
- .attr("x", 8)
- .attr("y", -10)
+ .attr("x", 37)
+ .attr("y", -28)
.attr("width",
function (d) {
- return d.data.link ? (getPXwidth(d.data.link) + 10) : 0
+ return d.data.link ? (getPXwidth(d.data.link) + 30) : 0
}
)
- .attr("height", 22)
- .attr("fill", "grey")
+ .attr("height", 26)
+ .attr("fill", "#FFFFFF")
// 娣诲姞鍦嗚
.attr("rx", 4)
//缁樺埗閾炬帴鏂瑰紡
groups.append("text")
- .attr("x", 12)
- .attr("y", -5)
+ .attr("x", 42)
+ .attr("y", -22)
.attr("dy", 10)
- .attr("fill", 'white')
- .attr("font-size", 12)
+ .attr("fill", '#F6739F')
+ .attr("font-size", 16)
.text(function (d) {
- return d.data.link;
+ return d.depth+1 + ' ' +d.data.link;
})
- //缁樺埗鏂囧瓧
+ .on("click",function (event, node) {
+ let data = node.data
+ that.$router.push("/familymodel/jiagenwang/personInfo/" + data.id);
+
+ })
+ .attr("cursor",
+ function (d) {
+ if (d.data.disabled) {
+ return 'not-allowed'
+ } else {
+ return 'pointer'
+ }
+ })
+ // 娣诲姞澶村儚
+ groups.append("image")
+ .attr("xlink:href", function (d) {
+ return d.data.url; // 澶村儚鍥剧墖鐨勮矾寰�
+ })
+ .attr("x", 12) // 澶村儚鐩稿浜庤妭鐐圭殑姘村钩浣嶇疆
+ .attr("y", 3) // 澶村儚鐩稿浜庤妭鐐圭殑鍨傜洿浣嶇疆
+ .attr("width", 24) // 澶村儚鐨勫搴�
+ .attr("height", 24); // 澶村儚鐨勯珮搴�
+ //缁樺埗鏍囨敞(鑺傜偣鍓嶇殑鐭╁舰)
+ groups.append("rect")
+ .attr("x", 37)
+ .attr("y", 3)
+ .attr("width",
+ function (d) {
+ return d.data.link ? (getPXwidth(d.data.link) + 30) : 0
+ }
+ )
+ .attr("height", 26)
+ .attr("fill", "#FFFFFF")
+ // 娣诲姞鍦嗚
+ .attr("rx", 4)
+ //缁樺埗鏂囧瓧
groups.append("text")
.on("click", function (event, node) {
let data = node.data
@@ -231,10 +281,12 @@
return
}
// 鏈夊閾剧殑鑺傜偣锛屾墦寮�鏂扮獥鍙ｅ悗鎭㈠鍒版�濈淮瀵煎浘椤甸潰
- if (data.url) {
- window.open(data.url)
- that.$emit('activeChange', 'map')
- return
+ if (data.id) {
+ // window.open(data.url)
+
+ that.$router.push("/familymodel/jiagenwang/personInfo/" + data.id);
+ //that.$emit('activeChange', 'map')
+ // return
}
// 鏍囧噯鑺傜偣鈥斺�� 浼犲嚭 prop
if (data.dicType) {
@@ -246,12 +298,14 @@
}
})
.attr("x", function (d) {
- return 12 + (d.data.link ? (getPXwidth(d.data.link) + 10) : 0)
+ return 5+ (d.data.link ? (getPXwidth(d.data.link) + 15) : 0);
})
.attr("fill",
function (d) {
if (d.data.prop === that.active) {
return '#409EFF'
+ }else{
+ return '#8296C5'
}
}
)
@@ -261,7 +315,7 @@
return 'bold'
}
})
- .attr("font-size", 14)
+ .attr("font-size", 16)
.attr("cursor",
function (d) {
if (d.data.disabled) {
@@ -270,13 +324,13 @@
return 'pointer'
}
})
- .attr("y", -5)
+ .attr("y", 10)
.attr("dy", 10)
.attr("slot", function (d) {
return d.data.prop;
})
.text(function (d) {
- return d.data.label;
+ return ' ' + d.data.label;
})
},
},
--
Gitblit v1.9.1