526互联

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

发布时间 2023-08-30 23:42:46作者: ^Mao^

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",
          },
        ],
      },
    };
  },
  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 nodes_cor = [];
      const pos_arr = [];
      // 间距
      const x_distance = 200;
      const y_distance = 200;
      // 查找数组中是否存在这个节点，如果有则返回
      const find_node = (id, arr) => {
        return arr.find((item) => item.id == id);
      };

      // 默认第一个为0，0
      const first_link = links[0];
      const pos1 = { x: 0, y: 0 };
      nodes_cor.push({
        id: first_link.from,
        ...pos1,
      });
      pos_arr.push(pos1);
      const pos2 = {
        x: 0 + x_distance,
        y: 0,
      };
      nodes_cor.push({
        id: first_link.to,
        ...pos2,
      });
      pos_arr.push(pos2);
      const wait_arr = [];

      const computedPos = (pos) => {
        const find_pos = pos_arr.find(
          (item) => item.x == pos.x && item.y == pos.y
        );
        if (find_pos) {
          return computedPos({ ...pos, y: pos.y + y_distance });
        } else {
          return pos;
        }
      };

      // 处理找到from节点没有找到to节点
      for (let i = 1; i < links.length; i++) {
        const link = links[i];
        let find_from_node = find_node(link.from, nodes_cor);
        let find_to_node = find_node(link.to, nodes_cor);
        if (find_from_node && !find_to_node) {
          const setPos = computedPos({
            x: find_from_node.x + x_distance,
            y: find_from_node.y,
          });

          nodes_cor.push({
            id: link.to,
            ...setPos,
          });
          pos_arr.push(setPos);
        } else if (
          (!find_from_node && find_to_node) ||
          (!find_from_node && !find_to_node)
        ) {
          wait_arr.push(link);
        }
      }

      const setFromPosByTo = (searchArr, pushArr) => {
        if (searchArr.length == 0) {
          return;
        } else {
          for (let i = 0; i < searchArr.length; i++) {
            let wait_link = searchArr[i];
            let find_from_node = find_node(wait_link.from, nodes_cor);
            let find_to_node = find_node(wait_link.to, nodes_cor);
            if (find_to_node && !find_from_node) {
              const setPos = computedPos({
                x: find_to_node.x - x_distance,
                y: find_to_node.y,
              });

              pushArr.push({
                id: wait_link.from,
                ...setPos,
              });
              pos_arr.push(setPos);
              searchArr.splice(i, 1);
            } else if (find_node && find_from_node) {
              searchArr.splice(i, 1);
            }
          }
          setFromPosByTo(searchArr, pushArr);
        }
      };
      setFromPosByTo(wait_arr, nodes_cor);

      // 设置图形
      const nodes_join_posit = [];
      nodes.forEach((item) => {
        const obj = nodes_cor.find((o) => o.id == item.id);

        if (obj) {
          item.x = obj.x;
          item.y = obj.y;
          item.fixed = true;
        }
        nodes_join_posit.push(item);
      });
      console.log(nodes_join_posit);

      const json_data = {
        rootId: "a",
        nodes: nodes_join_posit,
        lines: links,
      };
      this.$refs.seeksRelationGraph.setJsonData(
        json_data,
        (seeksRGGraph) => {}
      );
    },
  },
};
</script>

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

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;

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",
  },
  {
    from: "d",
    to: "h",
  },
  {
    from: "bbb",
    to: "d",
  },
  {
    from: "a",
    to: "d",
  },
];
export default links;