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>
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'
                    }
                ],
                defaultJunctionPoint: 'border',
                // 这里可以参考"Graph 图谱"中的参数进行设置
            }
        };
    },
    mounted() {
        this.$nextTick(()=>{
            this.showSeeksGraph();
        })
    },
    methods: {
        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-man"><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-man" ><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-man" ><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-man" ><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-man" ><div class="c-node-name2" style="color:#ff875e">陆*可</div></div>' }, { 'id': 'N6', 'text': '高*良',   'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><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-man" ><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-man" ><div class="c-node-name2" style="color:#ff875e">沙*金2</div></div>' },], 'lines': [{ 'from': 'N1', 'to': 'N6', 'text': '', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父亲' } },{ 'from': 'N1', 'to': 'N7', 'text': '父亲', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母亲' } },{ 'from': 'N1', 'to': 'N8', 'text': '母亲', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '儿子' } },{ 'from': 'N1', 'to': 'N2', 'text': '儿子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '女儿' } },{ 'from': 'N1', 'to': 'N3', 'text': '女儿', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '配偶' } },{ 'from': 'N1', 'to': 'N4', 'text': '配偶', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '岳父' } },{ 'from': 'N1', 'to': 'N5', 'text': '岳父', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '岳母' } },{ 'from': 'N1', 'to': 'N9', 'text': '岳母', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', '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 {
    width: 160px;
    margin-left: -40px;
    text-align: center;
    margin-top: 85px;
    position: absolute;
}
.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-man {
    height: 100px;
    width: 100px;
    background-image: url(~@/assets/images/index/nan.png) !important;
}
.c-my-node-girl {
    background-image: url(~@/assets/images/index/nv.png) !important;
}
.c-my-node-son {
    background-image: url(~@/assets/images/index/nv.png) !important;
}
.c-my-node-daughter {
    background-image: url(~@/assets/images/index/nv.png) !important;
}
.c-my-node-father {
    background-image: url(~@/assets/images/index/nv.png) !important;
}
.c-my-node-mother {
    background-image: url(~@/assets/images/index/nv.png) !important;
}

.c-node-name1 {
    width: 160px;
    margin-left: -30px;
    text-align: center;
    margin-top: 90px;
    position: absolute;
}
.rel-node-checked{
    box-shadow: none !important;
}
</style>