|
|
|
@ -45,7 +45,6 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
// this.showSeeksGraph(); |
|
|
|
this.getFamilyRelationshipList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -62,10 +61,8 @@ export default { |
|
|
|
let url = `/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=0&resid=` + this.userInfo.resiId; |
|
|
|
let { code, data, msg } = await requestPost(url) |
|
|
|
if (code == 0) { |
|
|
|
// 找到符合条件的对象的索引 |
|
|
|
let index = data.findIndex(item => item.name == this.userInfo.name); |
|
|
|
if (index !== -1) { |
|
|
|
// 移除这个对象并将其放到数组的第一个位置 |
|
|
|
const [item] = data.splice(index, 1); |
|
|
|
data.unshift(item); |
|
|
|
} |
|
|
|
@ -74,7 +71,8 @@ export default { |
|
|
|
'text': item.name, |
|
|
|
'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'} c-my-node-${item.type == 1?'home':index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ? item.gender == 1 ? 'grandpa' : 'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : 'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.type == 1?`${item.name}`:item.name.length === 2 ? |
|
|
|
item.name.substring(0, 1) + '*' : |
|
|
|
item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>` |
|
|
|
item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>`, |
|
|
|
'data':{id: item.id,type:item.type,name:item.name}, |
|
|
|
})) |
|
|
|
let lineList = data.map((item, index) => ({ |
|
|
|
'from': 'N1', |
|
|
|
@ -82,7 +80,8 @@ export default { |
|
|
|
'text':item.type ==1?'房屋':data[index].houseHolderRel || '未知', |
|
|
|
'isHideArrow': true, |
|
|
|
'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')), |
|
|
|
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')) |
|
|
|
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')), |
|
|
|
|
|
|
|
})); |
|
|
|
lineList = lineList.slice(1) |
|
|
|
const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList } |
|
|
|
@ -94,109 +93,32 @@ export default { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
showSeeksGraph() { |
|
|
|
const __graph_json_data = { |
|
|
|
'rootId': 'N13', 'nodes': [ |
|
|
|
{ 'id': 'N1', 'text': '', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node1 c-my-node-father"><div class="c-node-name1" style="color:#6cc0ff"></div></div>' }, { 'id': 'N2', 'text': '李*康', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-girl" ><div class="c-node-name2" style="color:#ff875e">李*康</div></div>' }, { 'id': 'N3', 'text': '祁*伟', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-son" ><div class="c-node-name2" style="color:#6cc0ff">祁*伟</div></div>' }, { 'id': 'N4', 'text': '陈*石', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-mother" ><div class="c-node-name2" style="color:#ff875e">陈*石</div></div>' }, { 'id': 'N5', 'text': '陆*可', 'data': { 'isGoodMan': true, 'sexType': '女' }, 'innerHTML': '<div class="c-my-node2 c-my-node-grandpa" ><div class="c-node-name2" style="color:#ff875e">陆*可（25岁）</div></div>' }, { 'id': 'N6', 'text': '高*良', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-grandma" ><div class="c-node-name2" style="color:#6cc0ff">高*良</div></div>' }, { 'id': 'N7', 'text': '沙*金', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-home" ><div class="c-node-name2" style="color:#ff875e">沙*金</div></div>' }, { 'id': 'N9', 'text': '沙*金2', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-home" ><div class="c-node-name2" style="color:#ff875e">沙*金2</div></div>' },], 'lines': [ |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N6', |
|
|
|
'text': '', |
|
|
|
'color': '#3b3b3b', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '父亲' |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N7', |
|
|
|
'text': '父亲', |
|
|
|
'color': '#3b3b3b', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '母亲' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N8', |
|
|
|
'text': '母亲', |
|
|
|
'color': '#3b3b3b', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '儿子' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N2', |
|
|
|
'text': '儿子', |
|
|
|
'color': '#3b3b3b', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '女儿' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N3', |
|
|
|
'text': '女儿', |
|
|
|
'color': '#3b3b3b', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '配偶' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N4', |
|
|
|
'text': '配偶', |
|
|
|
'color': '#d7e5ff', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '岳父' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N5', |
|
|
|
'text': '岳父', |
|
|
|
'color': '#3b3b3b', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'isHideArrow': true, |
|
|
|
'data': { |
|
|
|
'type': '岳母' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
'from': 'N1', |
|
|
|
'to': 'N9', |
|
|
|
'text': '岳母', |
|
|
|
'isHideArrow': true, |
|
|
|
'color': '#ffe4e4', |
|
|
|
'fontColor': '#3b3b3b', |
|
|
|
'data': { |
|
|
|
'type': '岳母' |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
}; |
|
|
|
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => { |
|
|
|
// 这些写上当图谱初始化完成后需要执行的代码 |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
onNodeClick(nodeObject, $event) { |
|
|
|
console.log('onNodeClick:', nodeObject); |
|
|
|
let {name,id,type} = nodeObject.data |
|
|
|
if(type === 0){ |
|
|
|
this.$store.dispatch("saveData", { |
|
|
|
resiId:id, |
|
|
|
name |
|
|
|
}); |
|
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.map( |
|
|
|
(item) => { |
|
|
|
if (item.name === "jumin-huaxiang") { |
|
|
|
return { ...item, title: name }; |
|
|
|
} |
|
|
|
return item; |
|
|
|
} |
|
|
|
); |
|
|
|
}else if(type === 1){ |
|
|
|
this.$store.dispatch('saveDataH', { houseId:id, houseName:name}); |
|
|
|
this.$router.push({ name: 'house-huaxiang' }); |
|
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.map(item => { |
|
|
|
if (item.name === "house-huaxiang") { |
|
|
|
return { ...item, title: name }; |
|
|
|
} |
|
|
|
return item; |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
onLineClick(lineObject, $event) { |
|
|
|
console.log('onLineClick:', lineObject); |
|
|
|
@ -216,9 +138,9 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.c-node-name2 { |
|
|
|
margin-left: -5px; |
|
|
|
margin-left: 2px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 63px; |
|
|
|
margin-top: 83px; |
|
|
|
line-height: 20px; |
|
|
|
position: absolute; |
|
|
|
width: 96px; |
|
|
|
@ -267,7 +189,16 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.c-node-name1 { |
|
|
|
display: none; |
|
|
|
margin-left: 2px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 83px; |
|
|
|
line-height: 20px; |
|
|
|
position: absolute; |
|
|
|
width: 96px; |
|
|
|
height: 20px; |
|
|
|
background: #FFFFFF; |
|
|
|
box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4); |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.rel-node-checked { |
|
|
|
|
