relation-graph实现企业股权穿透图，关系图谱等(类似天眼查股权穿透图)

relation-graph实现企业股权穿透图，关系图谱等(类似天眼查股权穿透图)

一、业务需求

公司想要一个类似天眼查的股权穿透图，如这种：

初始化时候，如上图只展示上下两层，再深层的通过手动点击展开按钮查看。如果子集过多，只展示持股比例大于5%的，并且不超过5个。

二、实现步骤

1.查阅资料，确定使用插件

relation-graph参考文档如下：
http://relation-graph.com/#/docs/start
确定使用的demo如下：
http://relation-graph.com/#/demo/scene-org

2.前台实现（html、vue）

官网示例给的是vue3的，我们是用的vue

2.后台实现（java）

数据格式：
const __graph_json_data = {
rootId: ‘a’,//中心结点Id
nodes: [
{ id: ‘a’, text: ‘A’, borderColor: ‘yellow’ },//注意id不可以重复
{ id: ‘b’, text: ‘B’, color: ‘#43a2f1’, fontColor: ‘yellow’ },
{ id: ‘c’, text: ‘C’, nodeShape: 1, width: 80, height: 60 },
{ id: ‘e’, text: ‘E’, nodeShape: 0, width: 150, height: 150 }
],
lines: [
{ from: ‘a’, to: ‘b’, text: ‘关系1’, color: ‘#43a2f1’ },//线条指向
{ from: ‘a’, to: ‘c’, text: ‘关系2’ },
{ from: ‘a’, to: ‘e’, text: ‘关系3’ },
{ from: ‘b’, to: ‘e’, color: ‘#67C23A’ }
]
}
思路：关系很清晰，确定一个中心区域结点的Id,nodes的集合（所有的父子结点），lines的集合（所有指向关系）。一次性获取所有的企业关联关系，未展开的也获取，用isShow隐藏。

实体类

import com.fasterxml.jackson.annotation.JsonProperty;
import com.haiyisoft.cloud.jpa.entity.EntityBean;
public class YtjrGdjgNodesEntity extends EntityBean{
	private String id ;
    private String text ;
    private String color;
    private String expandHolderPosition;
    private boolean expanded;
    private boolean isShow;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getColor() {
		return color;
	}
	public void setColor(String color) {
		this.color = color;
	}
	public String getExpandHolderPosition() {
		return expandHolderPosition;
	}
	public void setExpandHolderPosition(String expandHolderPosition) {
		this.expandHolderPosition = expandHolderPosition;
	}
	public boolean isExpanded() {
		//expanded = true;
		return expanded;
	}
	public void setExpanded(boolean expanded) {
		this.expanded = expanded;
	}
	@JsonProperty(value = "isShow")
	public boolean getIsShow() {
		return isShow;
	}
	public void setIsShow(boolean isShow) {
		this.isShow = isShow;
	}
}

实体类

package com.haiyisoft.entity.zx.qy;
import com.haiyisoft.cloud.jpa.entity.EntityBean;
public class YtjrGdjgLinesEntity extends EntityBean{
	private String from ;
    private String to ;
    private String text;
	public String getFrom() {
		return from;
	}
	public void setFrom(String from) {
		this.from = from;
	}
	public String getTo() {
		return to;
	}
	public void setTo(String to) {
		this.to = to;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
}

Controller

package com.haiyisoft.jr.common.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.haiyisoft.cloud.core.model.QueryParam;
import com.haiyisoft.cloud.core.model.QueryParamList;
import com.haiyisoft.cloud.jpa.util.JPAUtil;
import com.haiyisoft.cloud.web.ui.spring.model.DataCenter;
import com.haiyisoft.entity.zx.qy.YtjrGdjgLinesEntity;
import com.haiyisoft.entity.zx.qy.YtjrGdjgNodesEntity;
import com.haiyisoft.entity.zx.qy.YtjrGdmcxxResult;
import com.haiyisoft.entity.zx.qy.ZxQyjbxxb;
import com.haiyisoft.jt.util.JtBaseController;
import com.haiyisoft.zx.qy.service.ZxQyjbxxbService;

@Controller
@RequestMapping("/jr/common/ytjrSjzxGdxx")
public class YtjrSjzxGdxxController extends JtBaseController {

	private static final long serialVersionUID = 1L;
	@Autowired
	private ZxQyjbxxbService zxQyjbxxbService;
	Map map = new HashMap();
	List nodesList = new ArrayList();
	List linesList = new ArrayList();
	/**
	 *通过统一信用代码，查询结构关系，生成json
	 */
	@RequestMapping("/getData")
	@ResponseBody
	public DataCenter getData(String tyxydm) {
		DataCenter responseData = new DataCenter();
		QueryParamList param=new QueryParamList();
		nodesList.removeAll(nodesList);
		linesList.removeAll(linesList);
		//1.根据统一信用代码查出主体企业名称，这里用的是hnzx_sjzx_qyxxdjb,后续如有改变可修改
		ZxQyjbxxb jbxx = null;
		param.addParam("tyxydm", tyxydm);
		List zxQyjbxxbs = zxQyjbxxbService.retrieveNone(param, null, null, null, null);
		if(null!=zxQyjbxxbs&&zxQyjbxxbs.size()>0) {
			jbxx = zxQyjbxxbs.get(0);
		}else {
			return null;
		}
		//先把主体放到nodesList中,作为中心区域
		YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
		nodeEntity.setId(tyxydm);
		nodeEntity.setText(jbxx.getQymc());
		nodeEntity.setColor("#2E4E8F");
		nodeEntity.setExpanded(true);
		nodeEntity.setIsShow(true);
		nodesList.add(nodeEntity);
		
		List treeNodes = new ArrayList();
		//2.查该企业的上级根节点
		List topRootNodes = getTopRootNodes(tyxydm);
		for (YtjrGdmcxxResult topRootNode : topRootNodes) {
            buildTopChildNodes(topRootNode);
            treeNodes.add(topRootNode);
        }
		
		//3.查该企业的下级根节点
		List bomRootNodes = getBomRootNodes(tyxydm);
		for (YtjrGdmcxxResult bomRootNode : bomRootNodes) {
            buildBomChildNodes(bomRootNode);
            treeNodes.add(bomRootNode);
        }
		//nodesMap.put("nodes", nodesList);
		//linesMap.put("lines", linesList);
		
		//System.out.println(JSON.toJSONString(treeNodes));
		//System.out.println(nodesList);
		 map.put("rootId", tyxydm);//主体（中心）
		 map.put("nodes", nodesList);
		 map.put("lines", linesList);
		 String datasjsonArray = JSON.toJSONString(map);
	     System.out.println(datasjsonArray);
	        
		responseData.setParameter("list", map);
		return responseData;
	}
	
	 /**
     * 获取上层集合中所有的根节点
     * @return
     */
	@RequestMapping("/getTopRootNodes")
	@ResponseBody
    public List getTopRootNodes(String tyxydm) {
        List rootNodes = new ArrayList();
        QueryParamList params = new QueryParamList();
        params.addParam("uniscid", tyxydm);
		List list = JPAUtil.load(YtjrGdmcxxResult.class, params,null, null, null, null);
		if(list!=null&&list.size()>5) {//如果查询结果多余5个，就过滤掉持股比例低于百分之5的
			params.addParam("conprop", "5", QueryParam.RELATION_GE);
			List listTemp = JPAUtil.load(YtjrGdmcxxResult.class, params,null, null, null, null);
			if(listTemp==null||listTemp.size()==0) {
				list = list.subList(0, 5);
			}else {
				if(listTemp!=null&&listTemp.size()>5) {
					list = listTemp.subList(0, 5);
				}else {
					list = listTemp;
				}
			}
		}
        for (YtjrGdmcxxResult n : list){
                rootNodes.add(n);//把所有的根节点放入rootNodes集合中
                YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
                nodeEntity.setId(String.valueOf(n.getId()));
        		nodeEntity.setText(n.getInv());
        		nodeEntity.setColor("#4ea2f0");
        		nodeEntity.setIsShow(true);
        		nodesList.add(nodeEntity);
        		YtjrGdjgLinesEntity linesEntity = new YtjrGdjgLinesEntity();
        		linesEntity.setFrom(String.valueOf(n.getId()));
        		linesEntity.setTo(tyxydm);//指向中心区域的ID,我中心区域设置的ID是tyxydm
        		linesEntity.setText("");
        		linesList.add(linesEntity);
        }
        return rootNodes;
    }
	/**
     * 递归子节点
     * @param node
     */
	@RequestMapping("/buildTopChildNodes")
	@ResponseBody
    public void buildTopChildNodes(YtjrGdmcxxResult node) {
        List children = getChildTopNodes(node);
        if (!children.isEmpty()) {
        	//如有有子集，需要将父级设置成有按钮
        	List removeList = new ArrayList();
        	 for (YtjrGdjgNodesEntity result : nodesList){
                 if (result.getId().equals(node.getId().toString())){
                     removeList.add(result);
                 }
             }
        	nodesList.removeAll(removeList);
        	YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
            nodeEntity.setId(String.valueOf(node.getId()));
     		nodeEntity.setText(node.getInv());
     		nodeEntity.setColor("#4ea2f0");
     		nodeEntity.setExpandHolderPosition("top");
     		nodeEntity.setExpanded(false);
     		nodeEntity.setIsShow(true);
     		nodesList.add(nodeEntity);
            for(YtjrGdmcxxResult child : children) {
            	getChildTopNodes(child);
            }
            node.setChildren(children);
        }
    }
	/**
     * 获取父节点下所有的子节点
     * @param pnode
     * @return
     */
	@RequestMapping("/getChildTopNodes")
	@ResponseBody
    public List getChildTopNodes(YtjrGdmcxxResult pnode) {//传入父节点对象，如果为该父节点的子节点，则放入子节点集合中
        List childNodes = new ArrayList();
        QueryParamList params = new QueryParamList();
		params.addParam("uniscid", pnode.getBlicno());//这里的参数不一样
		List list = JPAUtil.load(YtjrGdmcxxResult.class, params,null, null, null, null);
        for (YtjrGdmcxxResult n : list){
                childNodes.add(n);
                YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
                nodeEntity.setId(String.valueOf(n.getId()));
        		nodeEntity.setText(n.getInv());
        		nodeEntity.setColor("#4ea2f0");
        		nodeEntity.setIsShow(false);
        		nodesList.add(nodeEntity);
        		//去掉多余的线
            	List removeList = new ArrayList();
            	 for (YtjrGdjgLinesEntity result : linesList){
                     if (result.getTo().equals(String.valueOf(n.getId()))&&result.getFrom().equals(String.valueOf(pnode.getId()))){
                         removeList.add(result);
                     }
                 }
            	linesList.removeAll(removeList);
        		YtjrGdjgLinesEntity linesEntity = new YtjrGdjgLinesEntity();
        		linesEntity.setFrom(String.valueOf(n.getId()));
        		linesEntity.setTo(String.valueOf(pnode.getId()));
        		linesEntity.setText("");
        		//linesEntity.setIsReverse(true);//顶部的子集用反箭头
        		linesList.add(linesEntity);
        }
        return childNodes;
    }
	
	/*********************************************************************************************************************************/
	
	/**
     * 获取下层集合中所有的根节点
     * @return
     */
	@RequestMapping("/getBomRootNodes")
	@ResponseBody
    public List getBomRootNodes(String tyxydm) {
        List rootNodes = new ArrayList();
        QueryParamList params = new QueryParamList();
        params.addParam("blicno", tyxydm);
		List list = JPAUtil.load(YtjrGdmcxxResult.class, params,null, null, null, null);
		if(list!=null&&list.size()>5) {//如果查询结果多余5个，就过滤掉持股比例低于百分之5的
			params.addParam("conprop", "5", QueryParam.RELATION_GE);
			List listTemp = JPAUtil.load(YtjrGdmcxxResult.class, params,null, null, null, null);
			if(listTemp==null||listTemp.size()==0) {
				list = list.subList(0, 5);
			}else {
				if(listTemp!=null&&listTemp.size()>5) {
					list = listTemp.subList(0, 5);
				}else {
					list = listTemp;
				}
			}
		}
        for (YtjrGdmcxxResult n : list){
                rootNodes.add(n);//把所有的根节点放入rootNodes集合中
                YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
                nodeEntity.setId(String.valueOf(n.getId()));
        		nodeEntity.setText(n.getEntname());
        		nodeEntity.setColor("#4ea2f0");
        		nodeEntity.setIsShow(true);
        		nodesList.add(nodeEntity);
        		
        		YtjrGdjgLinesEntity linesEntity = new YtjrGdjgLinesEntity();
        		linesEntity.setFrom(tyxydm);
        		linesEntity.setTo(String.valueOf(n.getId()));
        		linesEntity.setText("");
        		linesList.add(linesEntity);
        }
        return rootNodes;
    }
	/**
     * 递归子节点
     * @param node
     */
	@RequestMapping("/buildBomChildNodes")
	@ResponseBody
    public void buildBomChildNodes(YtjrGdmcxxResult node) {
        List children = getChildBomNodes(node);
        if (!children.isEmpty()) {
        	//如有有子集，需要将父级设置成有按钮
        	List removeList = new ArrayList();
        	 for (YtjrGdjgNodesEntity result : nodesList){
                 if (result.getId().equals(node.getId().toString())){
                     removeList.add(result);
                 }
             }
        	nodesList.removeAll(removeList);
        	YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
            nodeEntity.setId(String.valueOf(node.getId()));
     		nodeEntity.setText(node.getEntname());
     		nodeEntity.setColor("#4ea2f0");
     		nodeEntity.setExpandHolderPosition("bottom");
     		nodeEntity.setExpanded(false);
     		nodeEntity.setIsShow(true);
     		nodesList.add(nodeEntity);
            for(YtjrGdmcxxResult child : children) {
            	buildBomChildNodes(child);
            }
            node.setChildren(children);
        }
    }
	/**
     * 获取父节点下所有的子节点
     * @param pnode
     * @return
     */
	@RequestMapping("/getChildBomNodes")
	@ResponseBody
    public List getChildBomNodes(YtjrGdmcxxResult pnode) {//传入父节点对象，如果为该父节点的子节点，则放入子节点集合中
        List childNodes = new ArrayList();
        QueryParamList params = new QueryParamList();
		params.addParam("blicno", pnode.getUniscid());
		List list = JPAUtil.load(YtjrGdmcxxResult.class, params,null, null, null, null);
        for (YtjrGdmcxxResult n : list){
                childNodes.add(n);
                YtjrGdjgNodesEntity nodeEntity = new YtjrGdjgNodesEntity();
                nodeEntity.setId(String.valueOf(n.getId()));
        		nodeEntity.setText(n.getEntname());
        		nodeEntity.setColor("#4ea2f0");
        		nodeEntity.setIsShow(false);
        		nodesList.add(nodeEntity);
        		//去掉多余的线
            	List removeList = new ArrayList();
            	 for (YtjrGdjgLinesEntity result : linesList){
                     if (result.getTo().equals(String.valueOf(n.getId()))&&result.getFrom().equals(String.valueOf(pnode.getId()))){
                         removeList.add(result);
                     }
                 }
            	linesList.removeAll(removeList);
        		YtjrGdjgLinesEntity linesEntity = new YtjrGdjgLinesEntity();
        		linesEntity.setFrom(String.valueOf(pnode.getId()));
        		linesEntity.setTo(String.valueOf(n.getId()));
        		linesEntity.setText("");
        		linesList.add(linesEntity);
        }
        return childNodes;
    }
}

3.最终效果