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的JSON可视化编辑器通过定义JSONSchema直接生成UI界面
08-10
基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面
在vue中实现流程图
weixin_48447589的博客
07-07 9988
当然这是我的练习，方便大家观看，如果有什么问题可以私信我。之后就是对 其中的方法进行调用即可，废话不多说，直接上代码。第一步：需要一个flow.js作为依据，可自取。之后再你的组件中将这个文件引入，
基于Vue+antd，使用antv/x6，实现流程图绘制
tzz_1122的博客
05-21 525
4 节点支持根据label自动适应宽度或换行。5 支持保存为json，或者json数据转图。项目中需要实现用户可以拖曳自定义绘制流程图。1 支持节点拖曳到画布；2 节点支持拖动改变宽高。3 节点支持修改属性。
Vue实现自定义流程图的创建（v1.1.0版——最终版本-数据分组展示，生成对象进行提交）
smallteddy.blog.csdn.net
06-22 8470
这里用到的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组件的选择和布局方式，以及如何展示系统的重要信息和功能模块。文章还讨论了响应式设计的考虑因素，确保主页在不同设备上的适配和用户体验。
vue3+ts 绘制流程图 vueflow 附代码及效果图
07-04 6352
已完成渲染流程图，自定义模板内容(上下分级),自定义样式，新增节点addRandomNode，点击修改节点nodeClickHandler(从父组件传值)官网：https://vueflow.dev/guide/node.html#node-template 文档比较复杂，很多想找的方法没法一下就找到需要注意我装了三个，如果npm安装报错可以试试yarn add
告别CRUD，利用 Spring Boot+Freemarker+Vue，手把手教你实现代码自动生成！
qq_45709416的博客
07-30 819
彻底告别 CRUD，利用 Spring Boot+Freemarker+Vue，手把手教你实现代码自动生成!
vjdesign - vue 界面可视化设计器
她的哥的博客
12-25 6244
新开发的vue可视化设计器已经可以投入生产了 说明文档 示例
vue基于leader-line绘制流水线流程图
weixin_43760238的博客
11-24 1248
那么怎么去画出这个结构呢，想到树状结构我们很容易想到递归组件，我们可以先写出每个树节点的布局。结构和样式写好后，通过leader-line将树节点用线连接起来。steps 表示每个树节点中的步骤数。具体的api和用法请查阅官方文档。每一个框代表着一个树中的节点，
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的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面】
u012632105的博客
08-01 1233
基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面
VUE中使用工作流流程图树结构（JSON数据驱动动态树结构）
包子源的博客
12-13 5236
VUE中使用工作流流程图树结构（数据驱动动态树结构）
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
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、付费专栏及课程。

余额充值