| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <h1 style="font-size: 21px;">{{ greeting +',' + user.userName }}</h1> |
| | | <div class="text" > |
| | | <h1 style="font-size: 21px;margin-left: 0">{{ greeting +',' + user.userName }}</h1></div> |
| | | <div class="image-container"> |
| | | <img class="top-image" src="../../assets/images/zhang.png" alt="Top Image"> |
| | | </div> |
| | |
| | | // console.log(this.mapData) |
| | | // console.log('sssssssssssssssssss') |
| | | }, |
| | | |
| | | |
| | | |
| | | |
| | | methods: { |
| | | // 点击思维导图节点后,触发变量更新 |
| | |
| | | |
| | | const mindMapData = this.rootList[0]; |
| | | |
| | | |
| | | // console.log(this.drawData(mindMapData)) |
| | | this.mapData = this.drawData(mindMapData) |
| | | this.showMindMap = true |
| | | }) |
| | | |
| | | }, |
| | | drawData(mpdata) |
| | | { |
| | | drawData(mpdata) { |
| | | if(mpdata==null) |
| | | return null |
| | | return null; |
| | | var data = { |
| | | "label": mpdata['nickName'], |
| | | "label": mpdata['spouse'] != null ? eval(mpdata['spouse']).nickName : '', |
| | | "prop": mpdata['nickName'], |
| | | "url": '', |
| | | "link": '', |
| | | "link": mpdata['nickName'], |
| | | "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++) |
| | | { |
| | | for (var i = 0; i < mpdata['childList'].length; i++) { |
| | | var dt = { |
| | | "label": mpdata['childList'][i]['nickName'], |
| | | "label": mpdata['childList'][i]['spouse'] != null ? eval(mpdata['childList'][i]['spouse']).nickName : '', |
| | | "prop": mpdata['childList'][i]['nickName'], |
| | | "url": '', |
| | | "link": "", |
| | | "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])); |
| | | } |
| | | 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) |
| | | data['children'].push(dt); |
| | | } |
| | | } |
| | | return data; |
| | |
| | | |
| | | <style scoped> |
| | | .app-container{ |
| | | background-color: #FEF7FC; |
| | | position: relative; |
| | | /*background-color: transparent;*/ |
| | | /*padding-left: -20px;*/ |
| | | } |
| | | .text{ |
| | | background-color: #FEF7FC; |
| | | opacity: 0.75; |
| | | margin-top: -20px; |
| | | padding: 20px; |
| | | |
| | | } |
| | | .image-container { |
| | | /*position: absolute;*/ |
| | | position: fixed; |
| | | margin-left: -10px; |
| | | width: 90%; |
| | | height: 90%; |
| | | top: 50px; |
| | | left: 50px; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: -1; |
| | | } |
| | | |
| | | .mind-map-container{ |
| | | position: fixed; |
| | | z-index: 2; |
| | | opacity: 0.8; |
| | | /*margin-top: 200px;*/ |
| | | margin-top: 50px; |
| | | margin-left: 50px; |
| | | background-color: transparent; |
| | | } |
| | | .top-image { |