vue根据json数据生成流程图

已于 2024-01-22 17:10:29 修改
阅读量3.4k 收藏 13
点赞数 4
分类专栏： vue 文章标签： vue.js json 流程图
于 2022-10-13 20:20:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43371136/article/details/127308043
版权

接上条，断断续续耗时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;

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

正兒八经DI瞎练ぃ
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
基于Vue+antd，使用antv/x6，实现流程图绘制
tzz_1122的博客
05-21 506
4 节点支持根据label自动适应宽度或换行。5 支持保存为json，或者json数据转图。项目中需要实现用户可以拖曳自定义绘制流程图。1 支持节点拖曳到画布；2 节点支持拖动改变宽高。3 节点支持修改属性。
基于Vue的JSON可视化编辑器通过定义JSONSchema直接生成UI界面
08-10
基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面
Vue实现自定义流程图的创建（v1.1.0版——最终版本-数据分组展示，生成对象进行提交）
smallteddy.blog.csdn.net
06-22 8463
这里用到的vue组件库是vue-dragging Install $ npm install awe-dnd --save Usage // main.js import VueDND from 'awe-dnd' Vue.use(VueDND) // your.vue <template> <div class="color-show"> <div v-for="v in colors" v-dragging="{ list: colors, item:
03-主页模块
m0_73442777的博客
07-18 136
这篇文章是关于Vue后台管理项目的第三部分，重点介绍了主页模块的实现。在后台管理系统中，主页模块是用户访问和管理系统各个功能的起点和导航中心。 文章首先介绍了主页模块的作用和功能。主页模块通常包括仪表盘、快速访问功能、数据统计和概览等内容，为用户提供系统整体状态的展示和操作入口。 接下来，文章详细介绍了主页模块的设计和布局。它涵盖了主页的整体结构、UI组件的选择和布局方式，以及如何展示系统的重要信息和功能模块。文章还讨论了响应式设计的考虑因素，确保主页在不同设备上的适配和用户体验。
vue流程图自动生成代码,vue 流程图编辑插件
goodutils的博客
09-12 1269
CompositionAPI可以更好的逻辑复用和代码组织，同一功能的代码不至于像以前一样太分散，虽然Vue2中可以用minxin来实现复用代码，但也存在问题，比如方法或属性名会冲突，代码来源也不清楚等_?VUE2.×是一个比较稳定的版本，也是很长一段时间大家在使用的版本，社区生态已经十分完善了，所以，如果我们暂时还不必须去着急升级到VUE3，毕竟等待vue3的生态成熟，还需要一段时间的积累，但是作为前端领域必不可少的一门技能，当然希望能够提前去接触到，毕竟前端的技术迭代更新就是这么快。
vjdesign - vue 界面可视化设计器
她的哥的博客
12-25 6240
新开发的vue可视化设计器已经可以投入生产了 说明文档 示例
vue根据树状结构生成流程图
weixin_43371136的博客
09-27 1624
vue 流程图
业务可视化-让你的流程图“Run“起来(4.实际业务场景测试)
虚幻私塾
07-28 750
业务可视化-让你的流程图"Run"起来(3.分支选择&跨语言分布式运行节点)]的支持。下面我以实际业务场景为例，来介绍一下ladybugflow的使用方法。httpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttpshttps。
一个Json解析库的设计和实现
zhaojia的博客
04-05 1217
本文依照编译原理基本思想构建了一个Json解析库，包括词法分析、语法分析、树型优化和Json树生成等部分。具有参考意义。
vue js 流程图
weixin_45869649的博客
05-20 1458
需求：用代码做一个流程图 安装d3和 yarn add d3 yarn add dagre-d3 引入 import dagreD3 from "dagre-d3"; import * as d3 from "d3"; html <template> <div> <!-- <svg id="svg-canvas" width="800" height="100"> <g /> <rect /
阿里巴巴 矢量图 流程图 json 格式
08-17
https://www.iconfont.cn/ 阿里巴巴 矢量图 https://app.diagrams.net/ 流程图 https://tool.jisuapi.com/json.html json 格式
vue使用flowable绘制流程图.docx
12-11
在Vue项目中使用Flowable来绘制流程图，可以借助`workflow-bpmn-modeler`这个库，它基于Vue和bpmn.io，为Flowable提供了可视化工作流设计器。 首先，创建一个Vue 2.x项目。确保选择的Vue版本是兼容的，因为`...
SVG+DIV画审批流程图，生成JSON
05-04
本话题主要探讨如何使用SVG（Scalable Vector Graphics）和DIV元素在Vue框架下绘制审批流程图，并将其转换为JSON格式，便于进一步的开发和集成。 SVG是一种基于XML的矢量图像格式，它允许开发者创建可缩放、清晰且...
vue.js项目评估流程图特效
07-24
综上所述，Vue.js项目评估流程图特效是一个结合了Vue.js组件化、响应式数据绑定、SVG或canvas绘图、拖放交互以及JSON序列化等多种技术的解决方案，旨在为项目管理和开发提供直观、易操作的流程图工具。通过深入理解...
vue2开发的流程图组件easy-flow
最新发布
05-27
Easy-Flow是一款基于Vue2框架开发的流程图组件，旨在提供一个易用、可定制化的工具，帮助开发者实现拖拽式生成的可视化流程图。这款组件不仅具备基本的流程图绘制功能，还能够将流程图配置转化为JSON格式，便于数据...
vue-json-ui-editor.zip
04-04
2. **与JSON Schema紧密集成**：编辑器支持导入和导出JSON Schema，这意味着你可以用现有的JSON Schema文件快速生成界面，或者根据生成的UI反向生成Schema，方便代码维护。 3. **灵活定制**：尽管基于Schema生成的...
vue-super-flow流程图展示（简易版）
cindy6666的博客
05-11 7928
需求：对审批环节的业务流程进行展示，可对连线进行拖拽调整，不涉及节点编辑拖拽，针对环节状态用颜色区分，保留点击节点可触发事件。 原文参考：Vue super flow 原画布尺寸：我是做了调整，适合嵌入到自己的系统中。 原文示例meta报错问题：主要是vue版本问题，slot的写法导致，我是2.6以下的版本，所以插槽slot写法有所不同。 效果展示： 代码展示： <template> <div class="super-flow-base-demo">
qml实现Json可视化（头脑风暴、思维导图）
一个老菜鸟的学习分享
03-19 3171
qml 实现Json可视化
VUE根据json数据生成二维码
05-24
生成二维码可以使用第三方库，比如`qrcodejs2`。在Vue中使用该库可以按照以下步骤： 1. 安装`qrcodejs2`库 ```bash npm install qrcodejs2 --save ``` 2. 在Vue组件中引入该库 ```javascript import QRCode from 'qrcodejs2' ``` 3. 在Vue组件中定义一个方法，该方法接收一个json数据，并生成二维码 ```javascript generateQRCode(jsonData) { const qrcode = new QRCode('qrcode-container', { text: JSON.stringify(jsonData), width: 200, height: 200, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) } ``` 4. 在Vue组件的`mounted`生命周期中调用该方法，并将需要生成二维码的json数据传递给该方法 ```javascript mounted() { const jsonData = { name: '张三', age: 18, address: '北京市朝阳区' } this.generateQRCode(jsonData) } ``` 5. 在Vue组件的模板中定义一个`div`元素，用来显示二维码 ```html <template> <div id="qrcode-container"></div> </template> ``` 以上就是基于`qrcodejs2`库在Vue中生成二维码的步骤。注意，在使用`qrcodejs2`库时，需要在`options`中传递二维码的相关配置，比如二维码的宽度、高度、颜色等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值