epmet-work-pc-chengyang/src/views/modules/portrayal/house/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: {
        houseInfo: {
            type: Object,
            default: () => { }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getFamilyRelationshipList()
        })
    },
    watch: {
        houseInfo: {
            handler(newVal, oldVal) {
                this.getFamilyRelationshipList()
            },
            deep: true
        }
    },
    methods: {
        async getFamilyRelationshipList() {
            let url = `/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=` + this.houseInfo.id;
            let { code, data, msg } = await requestPost(url)
            if (code == 0) {
                
                // 将房屋本身的信息放到数组元素的第一个
                const rootNode = {};
                rootNode["id"] = this.houseInfo.id;
                rootNode["name"] = this.houseInfo.fullName;
                rootNode["type"] = 1;
                data.unshift(rootNode);

                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-${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' : item.gender == 1 ? 'father' : 'mother' }"><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>`
                }))


                let lineList = data.map((item, index) => ({
                    'from': 'N1',
                    'to': `N${index + 1}`,
                    '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'))
                }));
                lineList = lineList.slice(1)
                const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList }
                this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => {
                    // 这些写上当图谱初始化完成后需要执行的代码
                });
            } else {
                this.$message.error(msg)
            }
        },

        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: 96px;
    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 {
    margin-left: -5px;
    text-align: center;
    margin-top: 63px;
    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 {
    box-shadow: none !important;
}
</style>