From aeacfc5a95678cb4c39398138eee9f8286560e61 Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期二, 31 十月 2023 16:52:49 +0800
Subject: [PATCH] 家谱图样式修改
---
ruoyi-ui/src/views/mindMap/index.vue | 49 +++++++++-------
ruoyi-ui/src/views/components/superMindmap.vue | 105 +++++++++++++++++++++++-----------
ruoyi-ui/src/views/search/index.vue | 2
3 files changed, 98 insertions(+), 58 deletions(-)
diff --git a/ruoyi-ui/src/views/components/superMindmap.vue b/ruoyi-ui/src/views/components/superMindmap.vue
index 9e57849..7675fc7 100644
--- a/ruoyi-ui/src/views/components/superMindmap.vue
+++ b/ruoyi-ui/src/views/components/superMindmap.vue
@@ -11,12 +11,12 @@
nodeWidth:
{
type: Number,
- default: 160
+ default: 180
},
nodeHeight:
{
type: Number,
- default: 40
+ default: 80
},
active:
{
@@ -41,10 +41,10 @@
disabled: true,
"children":
[
- {"label": "鏉窞"},
- {"label": "瀹佹尝"},
- {"label": "娓╁窞"},
- {"label": "缁嶅叴"}
+ {"label1": "鏉窞"},
+ {"label1": "瀹佹尝"},
+ {"label1": "娓╁窞"},
+ {"label1": "缁嶅叴"}
]
},
{
@@ -100,11 +100,11 @@
let leafNum = leafList.length
let TreeDeep = getDepth(data)
// 宸﹀彸鍐呰竟璺�
- let mapPaddingLR = 10
+ let mapPaddingLR = 30
// 涓婁笅鍐呰竟璺�
- let mapPaddingTB =10
+ 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")
// 瀹氫箟鏍戠姸鍥剧敾甯�
@@ -121,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) {
@@ -135,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
@@ -154,10 +158,10 @@
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", "#EBA4AA")
@@ -200,29 +204,38 @@
}
})
.attr("stroke", "#EBA4AA")
- .attr("stroke-width", 1);
+ .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("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", '#F6739F')
- .attr("font-size", 14)
+ .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
@@ -237,7 +250,29 @@
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
@@ -263,7 +298,7 @@
}
})
.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) {
@@ -280,7 +315,7 @@
return 'bold'
}
})
- .attr("font-size", 14)
+ .attr("font-size", 16)
.attr("cursor",
function (d) {
if (d.data.disabled) {
@@ -289,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;
})
},
},
diff --git a/ruoyi-ui/src/views/mindMap/index.vue b/ruoyi-ui/src/views/mindMap/index.vue
index 6b3c31a..2363229 100644
--- a/ruoyi-ui/src/views/mindMap/index.vue
+++ b/ruoyi-ui/src/views/mindMap/index.vue
@@ -1,11 +1,13 @@
<template>
<div class="app-container">
- <div class="text" >
- <h1 style="font-size: 21px;margin-left: 0">{{ greeting +'锛�' + user.userName }}</h1></div>
- <div class="image-container">
+ <div class="text" style="background-color: #FEF7FC;" >
+ <h1 style="font-size: 21px;">{{ greeting +'锛�' + user.userName }}</h1></div>
+ <div class="image-container" style="background-color: #FEF7FC;">
<img class="top-image" src="../../assets/images/zhang.png" alt="Top Image">
</div>
- <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container "/>
+ <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container ">
+
+ </superMindmap>
</div>
</template>
@@ -93,7 +95,7 @@
var data = {
"label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '',
"prop": mpdata['nickName'],
- "url": '12',
+ "url": 'https://192.168.1.163:80/',
"id": mpdata['userId'],
"link": mpdata['nickName'],
"children": []
@@ -104,7 +106,7 @@
var dt = {
"label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : '',
"prop": mpdata['childList'][i]['nickName'],
- "url": '12',
+ "url": 'https://47.93.189.255:8085/',
"id": mpdata['childList'][i]['userId'],
"link": mpdata['childList'][i]['nickName'],
"children": []
@@ -127,32 +129,34 @@
<style scoped>
.app-container{
position: relative;
- /*background-color: transparent;*/
- /*padding-left: -20px;*/
+ background-color: transparent;
+ /*padding-left: -30px;*/
+ margin-top:-30px;
+ margin-left: -20px;
}
.text{
opacity: 0.75;
- margin-top: -20px;
- padding: 20px;
-
+ padding: 10px;
}
.image-container {
- /*position: absolute;*/
- position: fixed;
- top: 70px;
- left: 50px;
- width: 100%;
+ position: absolute;
+ /*position: fixed;*/
+ top: 50px;
+ /*left:-20px;*/
+ width: 110%;
height: 100%;
z-index: -1;
}
.mind-map-container{
- position: fixed;
- z-index: 2;
- opacity: 0.8;
- margin-top: 50px;
- margin-left: 50px;
- background-color: transparent;
+ /*position: fixed;*/
+
+ overflow: auto;
+ z-index: 1;
+ opacity: 1;
+ margin-top: 5%;
+ margin-left: 12%;
+ /*background-color: transparent;*/
}
.top-image {
width: 100%;
@@ -160,5 +164,6 @@
object-fit: cover;
position: static;
opacity: 0.8;
+ overflow: auto;
}
</style>
diff --git a/ruoyi-ui/src/views/search/index.vue b/ruoyi-ui/src/views/search/index.vue
index a6cb3ba..49760cd 100644
--- a/ruoyi-ui/src/views/search/index.vue
+++ b/ruoyi-ui/src/views/search/index.vue
@@ -274,7 +274,7 @@
}else if(row.by5=="/family/zfDoctor"){//瀹跺涵灏忓尰鐢�
path ="/familymodel/Doctor/doctorInfo/"
- }else if(row.by5=="/family/zfClea"){ // 淇濇磥鏀剁撼 -----------鏈夐棶棰�
+ }else if(row.by5=="/family/zfClean"){ // 淇濇磥鏀剁撼 -----------鏈夐棶棰�----宸茶В鍐�
path = "/familymodel/clean/cleanInfo/"
}else if(row.by5=="/family/zfContact"){ //閫氳褰�
--
Gitblit v1.9.1