vue根据json数据生成流程图

根据json数据生成流程图

正兒八经DI瞎练ぃ

3883人浏览 · 2022-10-13 20:20:42

正兒八经DI瞎练ぃ · 2022-10-13 20:20:42 发布

接上条，断断续续耗时N天流程图终于弄出来了。
因为有正序和倒序显示，没有找到更合适的方法。
用的是Vue super flow 组件，不通过生成器，直接通过json树结构数据自动创建流程图
vue super flow 地址：https://caohuatao.github.io/

正序流程图

效果
在这里插入图片描述
js 代码：

 initNodeSign2() {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        maxY = 0,
        this_ = this,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 20; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodY = {};
      function getCHildren(arr, startId, level) {
        ++level;
        arr.forEach((item, i) => {
          let nodeId1 = `three__${this_.uuidv4()}`;  //id确保唯一
          coodY[level] = coodY[level] ? coodY[level] + lineHeight : totaly1;
          if (maxY >= coodY[level]) {
            coodY[level] = maxY + (i ? lineHeight : 0);
          }
          maxY = coodY[level];
          nodeList.push({
            id: nodeId1,
            width: boxWidth,
            height: boxHeight,
            coordinate: [totalX1 + lineWidth * (level - 1), coodY[level]],
            meta: {
              name: item.departmentName,
              state: item.signState > 0 ? 1 : 0,
              time: item.superviseTime,
              userName: item.signName,//这是页面其他用到的数据
              type: "feedback-sign",
            },
          });
          if (startId) {
            linkList.push({
              id: `_${this_.uuidv4()}`,
              startId: startId,
              endId: nodeId1,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          }
          if (item.children && item.children.length) {
            getCHildren(item.children, nodeId1, level);
          }
        });
      }
      getCHildren(this.signJsonData, "", 0); //方法调用
      this.nodeList.nodeList = nodeList;
      this.nodeList.linkList = linkList;
    },

json数据

 signJsonData: [
    {
      id: 142,
      departmentId: "sss",
      departmentName: "公司-1",
      superviseTime: "2022-10-09 09:45:38",
      children: [
        {
          id: 149,
          departmentId: "saweee",
          departmentName: "公司-1-1",
          superviseTime: "2022-10-09 10:05:39",
          children: [
            {
              id: 154,
              departmentId: "wewqqq",
              departmentName: "公司-1-1-1",
              superviseTime: "2022-10-09 10:10:40",
              children: []
            },
            {
              id: 155,
              departmentId: "weee3",
              departmentName: "公司-1-1-2",
              superviseTime: null,
              children: []
            }
          ]
        },
        {
          id: 150,
          departmentId: "3422",
          departmentName: "公司-1-2",
          superviseTime: "2022-10-09 10:46:59",
          children: [
            {
              id: 156,
              departmentId: "5677",
              departmentName: "公司-1-2-1",
              superviseTime: null,
              children: []
            },
            {
              id: 157,
              departmentId: "86655",
              departmentName: "公司-1-2-2",
              superviseTime: null,
              children: []
            }
          ]
        }
      ]
    },
    {
      id: 143,
      departmentId: "989iii",
      departmentName: "公司-2",
      superviseTime: "2022-10-09 09:48:04",
      children: [
        {
          id: 151,
          departmentId: "lkkj",
          departmentName: "公司-2-1",
          superviseTime: null,
          children: []
        }
      ]
    },
    {
      id: 144,

      departmentId: "hjtjyu",
      departmentName: "公司-3",
      superviseTime: "2022-10-09 09:49:32",
      children: [
        {
          id: 152,
          departmentId: "yutyutyu",
          departmentName: "公司-3-1",
          superviseTime: null,
          children: []
        },
        {
          id: 153,
          departmentId: "yutyt",
          departmentName: "公司-3-2",
          superviseTime: null,
          children: []
        }
      ]
    }
  ],

倒叙流程图

效果（为了方便截图把高度调低了）
在这里插入图片描述
js 代码

 initNodeFeedbackFn() {
      let nodeList = [],
        linkList = [],
        totalX1 = 16,
        this_ = this,
        totaly1 = 13;

      let lineHeight = totaly1 + boxHeight + 10; //步长高
      let lineWidth = totalX1 + boxWidth + 40; //步长宽
      let coodObjY = {};

      function getChildrenNode(arr, startId, level) {
        ++level;
        arr.forEach((item) => {
          let nodeId1 = `${level}__${this_.uuidv4()}`;
          if (level <= 1) {
            coodObjY[level] = coodObjY[level]
              ? coodObjY[level] + lineHeight
              : 16;
          }
          let index = nodeList.findIndex(
            (n) => n.meta.departmentId == item.departmentId
          );//根据相同的 departmentId  找节点
          coodObjY[level + 1] = coodObjY[level];
          if (index >= 0) {
            nodeId1 = nodeList[index].id;
            coodObjY[level + 1] = nodeList[index].coordinate[1];
            linkList.push({
              id: `_${this_.uuidv4()}`,
              startId: startId,
              endId: nodeList[index].id,
              startAt: [totalX1 + boxWidth, 20],
              endAt: [0, 20],
              meta: null,
            });
          } else {
            nodeList.push({
              id: nodeId1,
              width: boxWidth,
              height: boxHeight,
              coordinate: [totalX1 + lineWidth * (level - 1), coodObjY[level]],
              meta: {
                name: item.departmentName,
                time: item.feedbackDate,
                userName: item.feedBackName,
                state: item.feedbackState,
                departmentId: item.departmentId,
                type: "feedback-feedback",
                feedbackIdea: item.feedbackIdea,
                riskAppendixFile: item.riskAppendixFile,
              },
            });

            if (startId) {
              linkList.push({
                id: `_${this_.uuidv4()}`,
                startId: startId,
                endId: nodeId1,
                startAt: [totalX1 + boxWidth, 20],
                endAt: [0, 20],
                meta: null,
              });
            }
          }
          if (item.children && item.children.length) {
            getChildrenNode(item.children, nodeId1, level);
          }
        });
      }
      getChildrenNode(flowData.feedbackListCOPY, "", 0);
   
      this.nodeList.nodeList = nodeList;
      this.nodeList.linkList = linkList;
    }

 feedbackListCOPY = [
  {
    id: 154,
    departmentId: "wewww",
    departmentName: "公司1-1-1-1",
    superviseTime: "2022-10-09 10:10:40",
    children: [
      {
        id: 149,
        departmentId: "fessss",
        departmentName: "公司1-1-1",
        superviseTime: "2022-10-09 10:05:39",
        children: [
        ]
      }
    ]
  },
  {
    id: 155,
    departmentId: "dswwwwe",
    departmentName: "公司1-1-1-2",
    superviseTime: "2022-10-09 11:38:02",
    children: [
      {
        id: 149,
        departmentId: "fessss",
        departmentName: "公司1-1-1-2",
        superviseTime: "2022-10-09 10:05:39",
        children: [
          {
            id: 142,
            departmentId: "ghyyyy",
            departmentName: "公司1-1",
            superviseTime: "2022-10-09 09:45:38",
            children: [
              {
                id: 146,
                departmentId: "sssyus",
                departmentName: "公司1",
                superviseTime: null
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 156,
    departmentId: "sssserw",
    departmentName: "2_1_1_1",
    superviseTime: "2022-10-09 14:35:15",
    children: [
      {
        id: 150,
        departmentId: "dddfwww",
        departmentName: "2_1_1",
        superviseTime: "2022-10-09 10:46:59",
        children: [
          {
            id: 142,
            departmentId: "ghyyyy",
            departmentName: "2_1",
            superviseTime: "2022-10-09 09:45:38",
            children: [
              {
                id: 146,
                departmentId: "jyjkl",
                departmentName: "2",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 157,
    departmentId: "fddddwwq",
    departmentName: "2-",
    superviseTime: "2022-10-09 14:36:52",
    children: [
      {
        id: 150,
        departmentId: "dddfwww",
        departmentName: "dss",
        superviseTime: "2022-10-09 10:46:59",
        children: [
          {
            id: 142,
            departmentId: "ghyyyy",
            departmentName: "杀杀杀）",
            superviseTime: "2022-10-09 09:45:38",
            children: [
              {
                id: 146,
                departmentId: "frrrth",
                departmentName: "(sss)",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 163,
    departmentId: "5dwwww",
    departmentName: "d",
    superviseTime: "2022-10-09 14:44:24",
    children: [
      {
        departmentId: "fddd",
        departmentName: "搜索",
        superviseTime: "2022-10-09 14:44:05",
        children: [
          {
            id: 143,
            departmentId: "hyyjkkkk",
            departmentName: "s/s",
            superviseTime: "2022-10-09 09:48:04",
            children: [
              {
                id: 147,
                departmentId: "dddqq23",
                departmentName: "fff",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 164,
    departmentId: "56wwffff",
    departmentName: "d",
    superviseTime: "2022-10-09 14:46:02",
    children: [
      {
        id: 151,
        departmentId: "fddd",
        departmentName: "d",
        superviseTime: "2022-10-09 14:44:05",
        children: [
          {
            id: 143,
            departmentId: "hyyjkkkk",
            departmentName: "d/d",
            superviseTime: "2022-10-09 09:48:04",
            children: [
              {
                id: 147,
                departmentId: "feeeee",
                departmentName: "dww",
                superviseTime: null
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 165,
    departmentId: "fdddd21",
    departmentName: "dw",
    superviseTime: "2022-10-09 14:54:26",
    children: [
      {
        id: 153,
        departmentId: "水水水水水水水2",
        departmentName: "dsw",
        superviseTime: "2022-10-09 14:52:36",
        children: [
          {
            id: 144,
            departmentId: "dssssse223",
            departmentName: "d/swe",
            superviseTime: "2022-10-09 09:49:32",
            children: [
              {
                id: 145,

                departmentId: "dfsdtreee",
                departmentName: "dww",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 166,
    departmentId: "fd563w",
    departmentName: "dswww",
    superviseTime: "2022-10-09 14:54:06",
    children: [
      {
        id: 152,
        departmentId: "dfgteytuuuuu",
        departmentName: "dswrr",
        superviseTime: "2022-10-09 14:53:06",
        children: [
          {
            id: 144,
            departmentId: "dssssse223",
            departmentName: "dssee/sss",
            children: [
              {
                id: 145,
                departmentId: "fdhjjrty",
                departmentName: "dwwee",
                superviseTime: null,
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
]

流程图盒子的宽度和高度，间距都可以根据变量调节的。
初始值：
let boxWidth = 230;
let boxHeight = 116;

用得到的给个赞再走。。。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^