From de279dec1d03ad1c5603871bd4beeebc236a64eb Mon Sep 17 00:00:00 2001
From: feige <feige@qq.com>
Date: 星期六, 26 八月 2023 22:33:42 +0800
Subject: [PATCH] 增加了家谱图
---
ruoyi-ui/src/views/mindMap/index.vue | 176 +++++++++++++++++++++++++++++++++++++++++-----------------
ruoyi-ui/package.json | 1
2 files changed, 124 insertions(+), 53 deletions(-)
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 232d8c2..a310ee3 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -40,6 +40,7 @@
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
+ "d3": "^7.8.5",
"echarts": "5.4.0",
"element-ui": "2.15.12",
"file-saver": "2.0.5",
diff --git a/ruoyi-ui/src/views/mindMap/index.vue b/ruoyi-ui/src/views/mindMap/index.vue
index 83f0819..970362a 100644
--- a/ruoyi-ui/src/views/mindMap/index.vue
+++ b/ruoyi-ui/src/views/mindMap/index.vue
@@ -4,11 +4,10 @@
<div class="image-container">
<img class="top-image" src="../../assets/images/zhang.png" alt="Top Image">
</div>
- <el-card class="mind-map-container">
- <div id="mind-map">
- </div>
- </el-card>
+
+ <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange"/>
+
</div>
</template>
@@ -16,12 +15,19 @@
import { getUserProfile } from "@/api/system/user";
import { listRootAll ,listRoot} from "@/api/root/index";
import * as d3 from 'd3';
-
+ // 瀵煎叆鎬濈淮瀵煎浘鏁版嵁
+ import MapData from '../components/MapData.js'
+ // 瀵煎叆鎬濈淮瀵煎浘缁勪欢
+ import superMindmap from '../components/superMindmap.vue'
export default {
+ components:{superMindmap},
name: "index",
data() {
return {
+ active: '',
+ mapData: null,
+ showMindMap: false,
user: {},
greeting: "",
rootList:[]
@@ -30,8 +36,32 @@
mounted() {
this.setGreeting();
this.getUser();
+ // this.mapData = MapData.webMap
+
+ // console.log(this.mapData)
+ // console.log('sssssssssssssssssss')
},
+
+
+
+
methods: {
+ // 鐐瑰嚮鎬濈淮瀵煎浘鑺傜偣鍚庯紝瑙﹀彂鍙橀噺鏇存柊
+ activeChange(newLabel) {
+ this.active = newLabel
+ this.reloadMindMap()
+ },
+ // 閲嶈浇鎬濈淮瀵煎浘
+ reloadMindMap() {
+ this.showMindMap = false
+ this.$nextTick(
+ () => {
+ this.showMindMap = true
+ }
+ )
+ },
+
+
setGreeting() {
const currentTime = new Date();
const currentHour = currentTime.getHours();
@@ -53,69 +83,109 @@
});
listRoot(4).then(response =>{
this.rootList =response.data;
- console.log(this.rootList);
- this.drawMindMap();
+
+ const mindMapData = this.rootList[0];
+
+
+ // console.log(this.drawData(mindMapData))
+ this.mapData = this.drawData(mindMapData)
+ this.showMindMap = true
})
+ },
+ drawData(mpdata)
+ {
+ if(mpdata==null)
+ return null
+ var data = {
+ "label": mpdata['nickName'],
+ "prop": mpdata['nickName'],
+ "url": '',
+ "link": '',
+ "children":[]
+ }
+ if(eval(mpdata['spouse'])!=null)
+ data['link'] = eval(mpdata['spouse']).nickName
+ if(mpdata['childList']!=null){
+ for(var i = 0; i < mpdata['childList'].length; i++)
+ {
+ var dt = {
+ "label": mpdata['childList'][i]['nickName'],
+ "prop": mpdata['childList'][i]['nickName'],
+ "url": '',
+ "link": "",
+ "children":[]
+ }
+ if(eval(mpdata['childList'][i]['spouse'])!=null)
+ dt['link'] = eval(mpdata['childList'][i]['spouse']).nickName
+ if(mpdata['childList'][i]['childList']!=null)
+ {
+ for(var j = 0; j < mpdata['childList'][i]['childList'].length;j++)
+ dt['children'].push(this.drawData(mpdata['childList'][i]['childList'][j]))
+ }
+ data['children'].push(dt)
+ }
+ }
+ return data;
},
drawMindMap() {
const mindMapData = this.rootList[0]; // 浠巖ootList涓幏鍙栨暟鎹�
-
+ console.log(mindMapData)
// 娓呴櫎鐜版湁鐨凷VG鍏冪礌
- d3.select("#mind-map svg").remove();
+ // d3.select("#mind-map svg").remove();
- // 鍒涘缓涓�涓柊鐨� div 鍏冪礌浣滀负鍖呰９鎬濈淮瀵煎浘鐨勫鍣�
- const mindMapContainer = document.createElement("div");
- mindMapContainer.setAttribute("id", "mind-map-container");
- mindMapContainer.style.position = "absolute";
- mindMapContainer.style.top = "0";
- mindMapContainer.style.left = "0";
- mindMapContainer.style.width = "100%";
- mindMapContainer.style.height = "100%";
- mindMapContainer.style.zIndex = "1";
+ // // 鍒涘缓涓�涓柊鐨� div 鍏冪礌浣滀负鍖呰９鎬濈淮瀵煎浘鐨勫鍣�
+ // const mindMapContainer = document.createElement("div");
+ // mindMapContainer.setAttribute("id", "mind-map-container");
+ // mindMapContainer.style.position = "absolute";
+ // mindMapContainer.style.top = "0";
+ // mindMapContainer.style.left = "0";
+ // mindMapContainer.style.width = "100%";
+ // mindMapContainer.style.height = "100%";
+ // mindMapContainer.style.zIndex = "1";
- // 灏嗘�濈淮瀵煎浘瀹瑰櫒鎻掑叆鍒� image-container 涓�
- document.querySelector(".image-container").appendChild(mindMapContainer);
+ // // 灏嗘�濈淮瀵煎浘瀹瑰櫒鎻掑叆鍒� image-container 涓�
+ // document.querySelector(".image-container").appendChild(mindMapContainer);
- // 鍒涘缓SVG鍏冪礌锛岃缃搴﹀拰楂樺害
- const svg = d3.select("#mind-map-container")
- .append("svg")
- .attr("class", "svg-container") // 娣诲姞 className
- .attr("width", "100%")
- .attr("height", "100%");
+ // // 鍒涘缓SVG鍏冪礌锛岃缃搴﹀拰楂樺害
+ // const svg = d3.select("#mind-map-container")
+ // .append("svg")
+ // .attr("class", "svg-container") // 娣诲姞 className
+ // .attr("width", "100%")
+ // .attr("height", "100%");
- // 鍒涘缓鏍硅妭鐐�
- const root = d3.hierarchy(mindMapData);
- const treeLayout = d3.tree().size([500, 400]); // 璁剧疆鏍戠姸甯冨眬鐨勫昂瀵�
- treeLayout(root);
+ // // 鍒涘缓鏍硅妭鐐�
+ // const root = d3.hierarchy(mindMapData);
+ // const treeLayout = d3.tree().size([500, 400]); // 璁剧疆鏍戠姸甯冨眬鐨勫昂瀵�
+ // treeLayout(root);
- // 鍒涘缓閾炬帴绾�
- svg.selectAll(".link")
- .data(root.descendants().slice(1))
- .enter()
- .append("path")
- .attr("class", "link")
- .attr("d", d => {
- return "M" + d.x + "," + d.y + "C" + (d.x + d.parent.x) / 2 + "," + d.y + " " +
- (d.x + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y;
- });
+ // // 鍒涘缓閾炬帴绾�
+ // svg.selectAll(".link")
+ // .data(root.descendants().slice(1))
+ // .enter()
+ // .append("path")
+ // .attr("class", "link")
+ // .attr("d", d => {
+ // return "M" + d.x + "," + d.y + "C" + (d.x + d.parent.x) / 2 + "," + d.y + " " +
+ // (d.x + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y;
+ // });
- // 鍒涘缓鑺傜偣
- const nodes = svg.selectAll(".node")
- .data(root.descendants())
- .enter()
- .append("g")
- .attr("class", "node")
- .attr("transform", d => "translate(" + d.x + "," + d.y + ")");
+ // // 鍒涘缓鑺傜偣
+ // const nodes = svg.selectAll(".node")
+ // .data(root.descendants())
+ // .enter()
+ // .append("g")
+ // .attr("class", "node")
+ // .attr("transform", d => "translate(" + d.x + "," + d.y + ")");
- nodes.append("circle")
- .attr("r", 10);
+ // nodes.append("circle")
+ // .attr("r", 10);
- nodes.append("text")
- .attr("dx", 12)
- .attr("dy", 5)
- .text(d => d.data.nickName);
+ // nodes.append("text")
+ // .attr("dx", 12)
+ // .attr("dy", 5)
+ // .text(d => d.data.nickName);
}
}
};
--
Gitblit v1.9.1