| | |
| | | <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> |
| | |
| | | getUserProfile().then(response => { |
| | | this.user = response.data; |
| | | }); |
| | | listRoot(4).then(response =>{ |
| | | listRoot(5).then(response =>{ |
| | | this.rootList =response.data; |
| | | |
| | | const mindMapData = this.rootList[0]; |
| | | |
| | | // console.log(this.drawData(mindMapData)) |
| | | console.log(mindMapData) |
| | | // console.log(this.drawData(mindMapData)) |
| | | this.mapData = this.drawData(mindMapData) |
| | | this.showMindMap = true |
| | | }) |
| | |
| | | var data = { |
| | | "label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '', |
| | | "prop": mpdata['nickName'], |
| | | "url": '', |
| | | "url": 'https://www.bendudu.com:8080/'+mpdata['url'], |
| | | // "purl": 'https://www.bendudu.com:8080/'+mpdata['spouse'], |
| | | "id": mpdata['userId'], |
| | | "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 : '', |
| | | "label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : "", |
| | | "prop": mpdata['childList'][i]['nickName'], |
| | | "url": '', |
| | | "url": 'https://www.bendudu.com:8080/'+mpdata['childList'][i]['url'], |
| | | "id": mpdata['childList'][i]['userId'], |
| | | "link": mpdata['childList'][i]['nickName'], |
| | | "children": [] |
| | | }; |
| | |
| | | <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{ |
| | | background-color: #FEF7FC; |
| | | opacity: 0.75; |
| | | margin-top: -20px; |
| | | padding: 20px; |
| | | |
| | | padding: 10px; |
| | | } |
| | | .image-container { |
| | | /*position: absolute;*/ |
| | | position: fixed; |
| | | position: absolute; |
| | | /*position: fixed;*/ |
| | | top: 50px; |
| | | left: 50px; |
| | | width: 100%; |
| | | /*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%; |
| | |
| | | object-fit: cover; |
| | | position: static; |
| | | opacity: 0.8; |
| | | overflow: auto; |
| | | } |
| | | </style> |