<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>
|
|
|
<superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange"/>
|
|
</div>
|
</template>
|
|
<script>
|
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:[]
|
};
|
},
|
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();
|
|
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;
|
|
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]; // 从rootList中获取数据
|
console.log(mindMapData)
|
// 清除现有的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>
|
