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.getFamilyRelationshipList()
        })
    },
    watch: {
        userInfo: {
            handler(newVal, oldVal) {
                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.id == this.userInfo.resiId);
                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-${item.type == 1?'home':item.gender==='1'?item.age>18&&item.age<60?'father':item.age<=18?'son':'grandpa':item.gender === '2'?item.age>18&&item.age<=60?'mother':item.age<=18?'girl':'grandma':'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.name}${item.age?`（${item.age}）岁`:''}</div></div>`,
                    'data':{id: item.id,type:item.type,name:item.name},
                }))
                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) => {
                    // 这些写上当图谱初始化完成后需要执行的代码
                });
                this.familyList = data
            } else {
                this.$message.error(msg)
            }
        },

        onNodeClick(nodeObject, $event) {
            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);
        }
    }
};
</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: 2px;
    text-align: center;
    margin-top: 83px;
    // line-height: 20px;
    position: absolute;
    width: 96px;
    height: auto;
    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: 1px;
    text-align: center;
    margin-top: 72px;
    // line-height: 20px;
    position: absolute;
    width: 96px;
    height: auto;
    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>