epmet-work-pc/src/views/modules/portrayal/jumin/cpts/graph.vue

<template>
    <div>
        <div style="height:300px; width: 500px;">
            <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
                :on-line-click="onLineClick" />
        </div>
    </div>
</template>
  
<script>
import { requestPost } from '@/js/dai/request'

export default {
    name: 'RelationGraphDemo3',
    components: {},
    data() {
        return {
            graphOptions: {
                disableDragNode: true,
                defaultNodeBorderWidth: 0,
                defaultNodeColor: 'rgba(238, 178, 94, 0)',
                allowSwitchLineShape: true,
                allowSwitchJunctionPoint: true,
                defaultLineShape: 1,
                allowShowMiniToolBar: false,
                layouts: [
                    {
                        label: '中心',
                        layoutName: 'center',
                        layoutClassName: 'seeks-layout-center',
                        distance_coefficient: 1.5
                    }
                ],
                defaultJunctionPoint: 'border',
                // 这里可以参考"Graph 图谱"中的参数进行设置
            }
        };
    },
    props: {
        userInfo: {
            type: Object,
            default: () => { }
        }
    },
    mounted() {
        this.$nextTick(() => {
            // this.showSeeksGraph();
            this.getFamilyRelationshipList()
        })
    },
    watch: {
        userInfo: {
            handler(newVal, oldVal) {
                console.log(newVal.resiId);
                this.getFamilyRelationshipList()
            },
            deep: true
        }
    },
    methods: {
        async getFamilyRelationshipList() {
            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);
                }
                let familyList = data.map((item, index) => ({
                    'id': `N${index + 1}`,
                    'text': item.name,
                    'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'}  c-my-node-${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.name} （${item.age}）岁</div></div>`
                }))
                let lineList = data.map((item, index) => ({
                    'from': 'N1',
                    'to': `N${index + 1}`,
                    'text': 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'))
                }));
                lineList = lineList.slice(1)
                const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList }
                this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => {
                    // 这些写上当图谱初始化完成后需要执行的代码
                });
                this.familyList = data
            } else {
                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);
        },
        onLineClick(lineObject, $event) {
            console.log('onLineClick:', lineObject);
        }
    }
};
</script>
  
<style lang="scss" >
.c-my-node2 {
    border: none;
    background-position: center center;
    background-size: 100%;
    height: 74px;
    width: 74px;
    border-radius: 40px;
}

.c-node-name2 {
    margin-left: -5px;
    text-align: center;
    margin-top: 63px;
    line-height: 20px;
    position: absolute;
    width: 92px;
    height: 20px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4);
    border-radius: 10px;
}

.c-my-node1 {
    border: none;
    background-size: 100%;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.c-my-node-son {
    background-image: url(~@/assets/images/index/son.png) !important;
}

.c-my-node-girl {
    background-image: url(~@/assets/images/index/girl.png) !important;
}

.c-my-node-father {
    background-image: url(~@/assets/images/index/father.png) !important;
}

.c-my-node-mother {
    background-image: url(~@/assets/images/index/mother.png) !important;
}

.c-my-node-grandpa {
    background-image: url(~@/assets/images/index/grandpa.png) !important;
}

.c-my-node-grandma {
    background-image: url(~@/assets/images/index/grandma.png) !important;
}

.c-my-node-home {
    background-image: url(~@/assets/images/index/home.png) !important;
}

.c-node-name1 {
    display: none;
}

.rel-node-checked {
    box-shadow: none !important;
}
</style>