流程图绘制-relation-graph 【尝试3】

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 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",
          },
        ],
      },
      resList: [],
      resetList: [],
    };
  },
  mounted() {
    // this.handlerLinks(links)
    // 计算有多少条线路；
    // 根据links生成路径，节点形成父子关系
    const result = this.handlerLinks(links);
    console.log("👩👩👩", result);
    this.resetChange(result, 0, 0);
    this.resList.sort((a, b) => a.x - b.x);
    // // // this.resList.splice(5,1)

    // // console.log("resList", this.resList, this.resetList);
    this.showSeeksGraph();
  },
  methods: {
    resetChange(result, offset, oy) {
      for (let i = 0; i < result.length; i++) {
        const node = result[i];
        // 0  ?
        const x = offset * 200;
        let y = 0;
        if (result.length > 1 && offset > 0) {
          y = (i + oy) * 200 - 100;
        } else {
          y = (i + oy) * 200; // 0
        }
        const nodey = nodes.find((item) => {
          for (const k in node) {
            if (node[k]?.children?.length && !this.resetList.includes(k)) {
              console.log("node[k]", node[k].children);

              this.resetChange(node[k].children, offset + 1, i);
            }
            this.resetList.push(k);

            return item.id === k;
          }
          return false;
        });

        nodey.fixed = true;
        nodey.x = x;
        nodey.y = y;
        this.resList.push(nodey);
      }
    },
    handlerLinks(links) {
      const result = [];
      let map = {};
      links.forEach((item) => {
        if (map[item.from]) {
          map[item.from][item.from].children =
            map[item.from][item.from].children || [];
          map[item.to] = {
            [item.to]: {},
          };
          map[item.from][item.from].children.push(map[item.to]);
        } else {
          map[item.from] = {
            [item.from]: {},
          };
          map[item.from][item.from].children =
            map[item.from][item.from].children || [];
          map[item.to] = {
            [item.to]: {},
          };
          map[item.from][item.from].children.push(map[item.to]);
          result.push(map[item.from]);
        }
      });
      return result;
    },
    hasAProp(obj, a, b) {
      for (let key in obj) {
        if (key === a) {
          // obj[key] = {}
          obj[key][b] = {};
          return obj;
        }
        if (typeof obj[key] === "object") {
          return this.hasAProp(obj[key], a, b);
        }
      }
      // obj[a] = {}
      // obj[a][b] = {}
      return obj;
    },
    showSeeksGraph() {
      const json_data = {
        rootId: "a",
        nodes: this.resList, //nodes_join_posit,
        lines: links,
      };

      this.$refs.seeksRelationGraph.setJsonData(
        json_data,
        (seeksRGGraph) => {}
      );
    },
  },
};
</script>

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

link.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;

nodes.js

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: "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",
    },
  },
  {
    id: "aaa",
    text: "aaa",
  },
  {
    id: "bbb",
    text: "bbb",
  },
  {
    id: "h",
    text: "h",
  },
];
export default nodes;