<template>
|
<div class="app-container">
|
<el-select
|
v-model="selectedClan"
|
placeholder="请选择家族"
|
@change="handleClanChange"
|
style="margin-bottom: 20px; width: 200px;"
|
>
|
<el-option
|
v-for="clan in clanList"
|
:key="clan.id"
|
:label="clan.name"
|
:value="clan.id"
|
>
|
</el-option>
|
</el-select>
|
6565565665
|
<!-- <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/awd.png" alt="Top Image">
|
</div>
|
<superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container ">
|
|
</superMindmap>
|
|
</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:[],
|
// 新增家族列表
|
clanList: [],
|
// 新增当前选中的家族 ID
|
selectedClan: null
|
};
|
},
|
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;
|
});
|
let clanId = this.$store.state.user.clanId
|
// alert(clanId)
|
listRoot(10,clanId).then(response =>{
|
this.rootList =response.data;
|
|
const mindMapData = this.rootList[0];
|
console.log(mindMapData)
|
// for(let i = 0; i < )
|
console.log('9999')
|
// console.log(this.drawData(mindMapData))
|
this.mapData = this.drawData(mindMapData)
|
this.showMindMap = true
|
})
|
|
},
|
|
// 加载对应家族的家谱图数据
|
loadMindMapData(clanId) {
|
listRoot(10, clanId).then(response => {
|
this.rootList = response.data;
|
const mindMapData = this.rootList[0];
|
console.log(mindMapData);
|
console.log('9999');
|
this.mapData = this.drawData(mindMapData);
|
this.showMindMap = true;
|
});
|
},
|
|
// 处理家族选择变化
|
handleClanChange(clanId) {
|
this.loadMindMapData(clanId);
|
},
|
|
drawData(mpdata) {
|
let tp = "https://www.bendudu.com:8080/profile/upload/2023/03/19/test7_20230319222030A007.jpg"
|
if (mpdata == null)
|
return null;
|
|
var data = {
|
"label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '',
|
"prop": mpdata['nickName'],
|
"url": mpdata['url'] != null ? 'https://www.bendudu.com:8080/' + mpdata['url'] : tp,
|
"purl": mpdata['spouse'] != null ? (mpdata['spouse'].url != null ? 'https://www.bendudu.com:8080/' + mpdata['spouse'].url : tp) : tp,
|
"id": mpdata['userId'],
|
"spid": mpdata['spouseId'] != null ? mpdata['spouseId'] : '',
|
"link": mpdata['nickName'],
|
"children": []
|
};
|
|
if (mpdata['childList'] != null) {
|
for (var i = 0; i < mpdata['childList'].length; i++) {
|
var dt = {
|
"label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : "",
|
"prop": mpdata['childList'][i]['nickName'],
|
"url": mpdata['childList'][i]['url'] != null ? 'https://www.bendudu.com:8080/' + mpdata['childList'][i]['url'] : tp,
|
"id": mpdata['childList'][i]['userId'],
|
"spid": mpdata['childList'][i]['spouseId'] != null ? mpdata['childList'][i]['spouseId'] : '',
|
"purl": (mpdata['childList'][i]['spouse'] != null) ? (mpdata['childList'][i]['spouse'].url != null ? 'https://www.bendudu.com:8080/' + mpdata['childList'][i]['spouse'].url : tp) : tp,
|
"link": mpdata['childList'][i]['nickName'],
|
"children": []
|
};
|
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;
|
},
|
drawData(mpdata) {
|
let tp = "https://www.bendudu.com:8080/profile/upload/2023/03/19/test7_20230319222030A007.jpg"
|
if (mpdata == null)
|
return null;
|
|
var data = {
|
"label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '',
|
"prop": mpdata['nickName'],
|
"url": mpdata['url']!=null?'https://www.bendudu.com:8080/'+mpdata['url']:tp,
|
"purl": mpdata['spouse'] != null ? (mpdata['spouse'].url!=null? 'https://www.bendudu.com:8080/'+mpdata['spouse'].url:tp):tp,
|
"id": mpdata['userId'],
|
"spid": mpdata['spouseId'] != null ? mpdata['spouseId'] : '',
|
"link": mpdata['nickName'],
|
"children": []
|
};
|
|
if (mpdata['childList'] != null) {
|
for (var i = 0; i < mpdata['childList'].length; i++) {
|
var dt = {
|
"label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : "",
|
"prop": mpdata['childList'][i]['nickName'],
|
"url": mpdata['childList'][i]['url']!=null?'https://www.bendudu.com:8080/'+mpdata['childList'][i]['url']:tp,
|
"id": mpdata['childList'][i]['userId'],
|
"spid": mpdata['childList'][i]['spouseId'] != null ? mpdata['childList'][i]['spouseId'] : '',
|
"purl": (mpdata['childList'][i]['spouse'] != null ) ?( mpdata['childList'][i]['spouse'].url!= null?'https://www.bendudu.com:8080/'+mpdata['childList'][i]['spouse'].url:tp):tp,
|
"link": mpdata['childList'][i]['nickName'],
|
"children": []
|
};
|
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;
|
},
|
|
}
|
};
|
</script>
|
|
<style scoped>
|
.app-container{
|
position: relative;
|
background-color: transparent;
|
/*padding-left: -30px;*/
|
margin-top:-30px;
|
margin-left: -20px;
|
}
|
.text{
|
opacity: 0.75;
|
padding: 10px;
|
}
|
.image-container {
|
position: absolute;
|
/*position: fixed;*/
|
top: 50px;
|
/*left:-20px;*/
|
width: 110%;
|
height: 100%;
|
z-index: -1;
|
}
|
|
.mind-map-container{
|
/*position: fixed;*/
|
|
overflow: auto;
|
z-index: 1;
|
opacity: 1;
|
margin-top: 5%;
|
margin-left: 12%;
|
/*background-color: transparent;*/
|
}
|
.top-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
position: static;
|
opacity: 0.8;
|
overflow: auto;
|
}
|
</style>
|
