relation-graph组织树插件

成果图：

代码：

<template>
  <el-dialog title="" width="80%" :visible.sync="showVisible" :close-on-click-modal="false" append-to-body>
    <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions"
                        :on-node-expand="onNodeExpand" :on-node-collapse="onNodeCollapse"
                        style="width:100%; height: 100%; margin: 0 auto;"/>
  </el-dialog>
</template>

<script>
// 由于relation-graph中的Css是less写的，所以必须下载less-loader插件，否则树结构的线条不会动态变动。
import SeeksRelationGraph from 'relation-graph';
import Vue2OrgTree from 'vue2-org-tree'
import { getDepartmentSelector } from '@/api/permission/department'
import { OrganizationList } from '@/api/portcover/baseinfo'
export default {
  name: 'OrgTreeView',
  components: {
    SeeksRelationGraph,
    Vue2OrgTree
  },
  data() {
    return {
      showVisible: false,
      //企业结构树配置项
      graphOptions: {
        layouts: [
          {
            label: '中心',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultJunctionPoint: 'border',
            defaultNodeShape: 0,
            defaultLineShape: 1,
            from: 'top',
            centerOffset_y: -80,
            min_per_width: 70,
          }
        ],
        defaultLineMarker: {
          markerWidth: 12,
          markerHeight: 12,
          refX: 6,
          refY: 6,
          data: 'M2,2 L10,6 L2,10 L6,6 L2,2'
        },
        moveToCenterWhenRefresh: false,
        zoomToFitWhenRefresh: false,
        useAnimationWhenRefresh: false,
        defaultExpandHolderPosition: 'bottom',
        defaultNodeShape: 1,
        defaultNodeWidth: '100',
        defaultLineShape: 4,
        defaultJunctionPoint: 'tb',
        defaultNodeBorderWidth: 0,
        defaultLineColor: '#000',
        defaultNodeColor: '#000',
      },
      // 子节点数据
      nodesData: [],
      //连接
      linksData: [],
    }
  },
  computed: {
    UserInfo() {
      return this.$store.getters
    },
  },
  methods: {
    init() {
      this.showVisible = true
      this.nodesData = []
      this.linksData = []
      this.getTreeView()
    },
    setGraphData() {
      var __graph_json_data = {
        rootId: this.nodesData[0].id,
        //子节点
        nodes: this.nodesData,
        //连接
        lines: this.linksData,
      };
      this.$refs.seeksRelationGraph.setJsonData(
        __graph_json_data, (graphInstance) => {
          // 这些写上当图谱初始化完成后需要执行的代码
          // this.graphOptions.moveToCenterWhenRefresh = true
          const level_1_nodes = graphInstance.getNodeById(__graph_json_data.rootId).lot.childs;
          level_1_nodes.forEach(thisLevel1Node => {
            thisLevel1Node.expanded = false;
          });
          this.$refs.seeksRelationGraph.refresh();
        }
      );
    },
    // 重组组织树
    getTree(treeData) {
      let result = (data) => {
        data.forEach((item, index) => {
          let obj = {
            id: item.id,
            parentId: item.parentId,
            text: item.fullName,
            width: 60,
            height: 180,
            color: "#ccc",
            borderWidth: "2",
            fontColor: "#000",
            borderColor: '#000'
          }
          this.nodesData.push(obj)
          if (item.children != null) {
            result(item.children)
          }
        })
      }
      result(treeData)
      this.nodesData[0].width = 250
      this.nodesData[0].height = 60
      for(let i = 0; i < this.nodesData.length; i ++) {
        for(let j = 1; j < this.nodesData.length; j ++) {
          if (this.nodesData[i].id == this.nodesData[j].parentId) {
            let obj = {
              from: this.nodesData[i].id,
              to: this.nodesData[j].id,
            }
            this.linksData.push(obj)
          }
        }
      }
      this.setGraphData();//企业结构树
    },
    async getTreeView() {
      if (this.UserInfo.userInfo.organizationalForm == 'qyjt' || this.UserInfo.userInfo.organizationalForm == 'qyzz') {
        this.treeData = (await getDepartmentSelector(this.UserInfo.userInfo.organizeId)).data.list
        this.getTree(this.treeData)  //relation-graph 图谱组件
      } else {
        this.treeData = (await OrganizationList({id: 0})).data.list
        this.getTree(this.treeData)
      }
    },
    onNodeCollapse(node, e) {
      console.log('onNodeCollapse:', node);
      // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
      this.$refs.seeksRelationGraph.getInstance().doLayout();
    },
    onNodeExpand(node, e) {
      // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
      console.log('onNodeExpand:', node);
      this.$refs.seeksRelationGraph.getInstance().doLayout();
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog,
::v-deep .el-dialog__body {
  height: 80% !important;
}
</style>