<template>
|
<div class="app-container">
|
<h1 style="font-size: 21px;">{{ greeting +'，' + user.userName }}</h1>
|
<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>
|
</div>
|
</template>
|
|
<script>
|
import { getUserProfile } from "@/api/system/user";
|
import { listRootAll ,listRoot} from "@/api/root/index";
|
import * as d3 from 'd3';
|
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
user: {},
|
greeting: "",
|
rootList:[]
|
};
|
},
|
mounted() {
|
this.setGreeting();
|
this.getUser();
|
},
|
methods: {
|
setGreeting() {
|
const currentTime = new Date();
|
const currentHour = currentTime.getHours();
|
|
if (currentHour < 12) {
|
this.greeting = "早上好";
|
} else if (currentHour < 14) {
|
this.greeting = "中午好";
|
} else if (currentHour < 18) {
|
this.greeting = "下午好";
|
} else {
|
this.greeting = "晚上好";
|
}
|
},
|
|
getUser() {
|
getUserProfile().then(response => {
|
this.user = response.data;
|
});
|
listRoot(4).then(response =>{
|
this.rootList =response.data;
|
console.log(this.rootList);
|
this.drawMindMap();
|
})
|
|
},
|
|
drawMindMap() {
|
const mindMapData = this.rootList[0]; // 从rootList中获取数据
|
|
// 清除现有的SVG元素
|
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";
|
|
// 将思维导图容器插入到 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%");
|
|
// 创建根节点
|
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;
|
});
|
|
// 创建节点
|
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("text")
|
.attr("dx", 12)
|
.attr("dy", 5)
|
.text(d => d.data.nickName);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.app-container{
|
background-color: #FEF7FC;
|
position: relative;
|
}
|
|
.image-container {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: -1;
|
}
|
|
.mind-map-container{
|
z-index: 2;
|
opacity: 0.5;
|
}
|
.top-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
position: static;
|
opacity: 0.8;
|
}
|
|
|
|
</style>
|
