流程图绘制-relation-graph插件

App.vue

<template>
  <div id="app">
    <div class="demo">
      <RelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
  </div>
</template>

<script>
import RelationGraph from "relation-graph";

import nodes from "./nodes";
import lines from "./links";
import links from "./links";

export default {
  name: "App",
  components: {
    RelationGraph,
  },
  data() {
    return {
      graphOptions: {
        showDebugPanel: true,
        backgrounImageNoRepeat: true,
        defaultLineShape: 4,
        defaultJunctionPoint: "tb",
        layouts: [
          {
            label: "中心",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            defaultJunctionPoint: "border",
            defaultNodeShape: 0,
            from: "left",
          },
        ],
      },
    };
  },
  mounted() {
    this.showSeeksGraph();
  },
  methods: {
    showSeeksGraph() {
      const setKeyFn = (obj, link) => {
        for (let k in obj) {
          if (k == link.from) {
            obj[k][link.to] = {};
            links_record.push(link.to);
            return;
          } else {
            setKeyFn(obj[k], link);
          }
        }
      };
      // 记录节点的关系
      const node_relation = {};
      const links_record = [];
      for (let i = 0; i < links.length; i++) {
        let link = links[i];
        if (links_record.includes(link.from)) {
          setKeyFn(node_relation, link);
        } else {
          node_relation[link.from] = { [link.to]: {} };
          links_record.push(link.from, link.to);
        }
      }
      console.log("👩‍🦳👩‍🦳", node_relation);

      const transform_obj_to_arr = (arr, obj) => {
        for (let i in obj) {
          arr.push(i);
          transform_obj_to_arr(arr, obj[i]);
        }
      };
      const nodes_row = [];
      for (let i in node_relation) {
        const row_data = [];
        row_data.push(i);
        transform_obj_to_arr(row_data, node_relation[i]);
        nodes_row.push(row_data);
      }
      console.log(nodes_row);

      // 获取最长的一条线路作为参考线
      let longest_line_index = 0;
      let longest_length = -1;
      for (let i in nodes_row) {
        console.log("👩‍🦰👩‍🦰👩‍🦰", nodes_row[i].length);
        if (nodes_row[i].length > longest_length) {
          longest_length = nodes_row[i].length;
        }
      }
      console.log(longest_line_index);

      // 设置最长一条线的坐标
      const x_distaince = 100;
      const detault_node_positions = nodes_row[longest_line_index].map(
        (item, index) => {
          return {
            name: item,
            x: index * x_distaince,
            y: 0,
          };
        }
      );
      console.log(detault_node_positions);

      // 设置图形
      const nodes_join_posit = [];
      nodes.forEach((item) => {
        const obj = detault_node_positions.find((o) => o.name == item.id);
        let node = item;
        if (obj) {
          node.x = obj.x;
          node.y = obj.y;
        }
        nodes_join_posit.push(node);
      });
      console.log(nodes_join_posit);
      const json_data = {
        rootId: "a",
        nodes: nodes_join_posit,
        lines,
      };
      this.$refs.seeksRelationGraph.setJsonData(
        json_data,
        (seeksRGGraph) => {}
      );
    },
  },
};
</script>

<style>
.demo {
  height: 500px;
  border: 1px solid;
}
</style>

const nodes = [
  {
    id: "a",
    text: "a",
    data: {
      pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014",
      name: "侯亮平",
      myicon: "el-icon-star-on",
    },
  },
  {
    id: "aaa",
    text: "aaa",
    x: 300,
    y: -200,
  },
  {
    id: "bbb",
    text: "bbb",
    x: -100,
    y: 400,
  },
  {
    id: "b",
    text: "b",
    data: {
      pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062",
      name: "李达康",
      myicon: "el-icon-setting",
    },
  },
  {
    id: "c",
    text: "c",
    data: {
      pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092",
      name: "祁同伟",
      myicon: "el-icon-setting",
    },
  },
  {
    id: "d",
    text: "d",
    data: {
      pic: "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2025797948,1615296290&fm=58&app=83&f=JPEG?w=250&h=250&s=B5B04C331F32739C4604F9F503007021",
      name: "陈岩石",
      myicon: "el-icon-star-on",
    },
  },
  {
    id: "e",
    text: "e",
    data: {
      pic: "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=344720653,260255884&fm=58&app=83&f=JPEG?w=250&h=250&s=57B8AB676AE862941D94ED170300E060",
      name: "陆亦可",
      myicon: "el-icon-setting",
    },
  },
  {
    id: "f",
    text: "f",
    data: {
      pic: "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3098576865,849900134&fm=58&app=83&f=JPEG?w=250&h=250&s=EDE01A63A65917DC104509920300C0C1",
      name: "高育良",
      myicon: "el-icon-setting",
    },
  },
];
export default nodes;

links.js

const links = [
  {
    from: "a",
    to: "b",
  },
  {
    from: "b",
    to: "c",
  },
  {
    from: "c",
    to: "d",
  },
  {
    from: "d",
    to: "e",
  },
  {
    from: "d",
    to: "f",
  },
  {
    from: "aaa",
    to: "bbb",
  },
  {
    from: "bbb",
    to: "c",
  },
];
export default links;