一种通过配置数据自动生成流程图的方法技术

本发明专利技术设计了一种在图形化配置元素时，通过配置数据自动生成实时流程图及配置其样式的通用化方法

【技术实现步骤摘要】
一种通过配置数据自动生成流程图的方法


[0001]本专利技术属于智能制造控制领域，具体说是一种通过配置数据自动生成流程图的方法
。

技术介绍

[0002]近年来，国家工业物联网蓬勃发展，企业日常生产工作中软硬件交互的需求越来越紧密，随之工厂数字化的需求越来越大，软件开发人员的网页开发任务日益增多，而工业软件中
PC
端网页排版结构大同小异，网页中涉及的元素也可大致罗列出来，我们开发了一套可通过图形化配置
、
拖拽
、
低代码级的
、
可以快速
、
准确
、
便捷的搭建与工业物联网相关的的操作展示系统
。
[0003]在
web
前端开发工作中我们已经将网页中常用的元素大致归类为：图表类
、
通用类
、
表单类
、
工业类，其中通用类元素可罗列出文字
、
数字
、
进度监控
、
表格
、
时间
、
图片
、
树
、
甘特图
、
提示
、
弹窗
、
按钮
、
关系图
、
标签等元素
。
本专利技术中自动生成的流程图为进度监控元素中的一种流程元素
。
[0004]配置流程图元素的界面结构为左侧元素拖拽栏，中间主画布效果展示区域，右侧为配置栏，分为数据和样式两个标签页切换展示
。
我们可以通过在左侧元素栏中拖拽流程图元素到中间画布，在右侧配置栏的数据页中点击增加流程，弹出输入框编辑流程名称，每个输入框后都配置了删除按钮和换行按钮，点击删除可删除本条流程，点击换行可将本流程设置为拐点，用户可根据其需求自行配置流程图数据生成流程图的内容和结构，画布中会实时根据配置的数据渲染出每条流程的节点及根据当前流程图的水平或垂直类型渲染出对应的水平箭头或垂直箭头
。
也可重新编辑流程图内容
、
增加或删减流程
、
取消某拐点或重设某拐点，每次操作后画布中都会重新渲染流程图
。
配置数据之后进行流程图样式的配置：首先选择样式修改类型，所有节点统一修改或单独某个节点修改；设置流程图空间样式：选择流程图类型，水平或垂直模式；设置节点宽度
、
高度
、
上间距
、
圆角；设置字体样式：字号
、
粗细
、
字高；设置颜色样式：流程图节点背景颜色
、
边框颜色
、
文字颜色
。
点击提交样式后画布中流程图渲染为设置的样式，完整的流程图配置完成
。
[0005]以往前端开发流程图时往往需要写
HTML
代码，
CSS
代码，及前后端交互获取流程节点数据接口
JavaScript
代码，这种方式的弊端在于每次开发都要写代码结构，调整样式，消耗较多的时间与人力，需要后期维护
。
[0006]因此，为了简化代码，节省时间成本与人力，开发了一种适用于各种开发需求的通过配置数据自动生成流程图的通用化方法，不需要后期维护，很大程度上的方便了开发人员的工作
。

技术实现思路

[0007]本专利技术主要在图形化配置元素模式下提出了一种通过配置内容数据和样式数据自动生成流程图的快速简便的方法，即通过数据渲染出流程图，对流程图数据可进行随意
的增删改操作后实时渲染更新流程图
。
达到了简化开发人员工作，数据结构简洁规范准确，对各行业网站的适用性强的目的
。
[0008]本专利技术为实现上述目的所采用的技术方案是：
[0009]一种通过配置数据自动生成流程图的方法，包括以下步骤：
[0010]1)
对渲染流程图数据结构进行封装；
[0011]2)
对封装后的数据结构进行数据配置，得到默认流程图；
[0012]3)
对默认流程图的样式进行配置，完成流程图的配置
。
[0013]所述步骤
1)
包括以下步骤：
[0014]1.1)
计算机获取数据配置页中配置流程图所有节点数据，设置换行节点数据；
[0015]1.2)
根据节点数据判断当前流程图类型，若为垂直流程图，遍历节点数据渲染各节点数据及向下箭头，执行步骤
1.6)
；若为水平流程图执行步骤
1.3)
；
[0016]1.3)
根据换行节点数据判断流程图是否为多层级流程图，若为单层级流程图，遍历节点数据渲染各节点数据及向右箭头，执行步骤
1.6)
；若为多层级流程图执行步骤
1.4)
；
[0017]1.4)
遍历节点分组数据渲染流程图各行数据；
[0018]1.5)
根据节点分组数据判断流程图当前行索引，若为奇数行，遍历行数据渲染各节点数据
、
向右箭头以及向左换行箭头，所有包括节点数据和箭头的元素左浮动；若为偶数行，遍历行数据渲染各节点数据
、
向左箭头以及向右换行箭头，所有包括节点数据和箭头的元素右浮动；
[0019]1.6)
渲染节点样式数据，完成封装
。
[0020]所述步骤
2)
具体为：
[0021]定义流程图内容数据为空数组，定义默认节点样式数据，增加
、
删除
、
编辑节点，以及设置节点换行，定义流程图类型
。
[0022]所述增加
、
删除
、
编辑节点，包括以下步骤：
[0023]a)
计算机接收到当前操作模式的指令，选择出当前操作对应的配置数据方法；
[0024]b)
若操作指令为增加流程节点，执行步骤
c
；若操作指令为编辑流程节点名称，执行步骤
e)
；若操作指令为删除流程节点，执行步骤
f)
；
[0025]c)
计算机通过调用新增节点方法，在节点数据中增加设定节点，得到流程图节点数据；
[0026]d)
计算机根据步骤
b)
得到的数据判断新增的节点是否设置为换行节点，若设置为换行节点，在换行数据中增加该节点数据，执行步骤
h)
；若没有设置为换行节点，直接执行步骤
h)
；
[0027]e)
计算机根据当前节点索引在节点数据中找到待编辑节点，对节点名称赋值，执行步骤
h)
；
[0028]f)
计本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种通过配置数据自动生成流程图的方法，其特征在于，包括以下步骤：
1)
对渲染流程图数据结构进行封装；
2)
对封装后的数据结构进行数据配置，得到默认流程图；
3)
对默认流程图的样式进行配置，完成流程图的配置
。2.
根据权利要求1所述的一种通过配置数据自动生成流程图的方法，其特征在于，所述步骤
1)
包括以下步骤：
1.1)
计算机获取数据配置页中配置流程图所有节点数据，设置换行节点数据；
1.2)
根据节点数据判断当前流程图类型，若为垂直流程图，遍历节点数据渲染各节点数据及向下箭头，执行步骤
1.6)
；若为水平流程图执行步骤
1.3)
；
1.3)
根据换行节点数据判断流程图是否为多层级流程图，若为单层级流程图，遍历节点数据渲染各节点数据及向右箭头，执行步骤
1.6)
；若为多层级流程图执行步骤
1.4)
；
1.4)
遍历节点分组数据渲染流程图各行数据；
1.5)
根据节点分组数据判断流程图当前行索引，若为奇数行，遍历行数据渲染各节点数据
、
向右箭头以及向左换行箭头，所有包括节点数据和箭头的元素左浮动；若为偶数行，遍历行数据渲染各节点数据
、
向左箭头以及向右换行箭头，所有包括节点数据和箭头的元素右浮动；
1.6)
渲染节点样式数据，完成封装
。3.
根据权利要求1所述的一种通过配置数据自动生成流程图的方法，其特征在于，所述步骤
2)
具体为：定义流程图内容数据为空数组，定义默认节点样式数据，增加
、
删除
、
编辑节点，以及设置节点换行，定义流程图类型
。4.
根据权利要求3所述的一种通过配置数据自动生成流程图的方法，其特征在于，所述增加
、
删除
、
编辑节点，包括以下步骤：
a)
计算机接收到当前操作模式的指令，选择出当前操作对应的配置数据方法；
b)
若操作指令为增加流...

【专利技术属性】
技术研发人员：王挺，张悦，李林，王戬，高杰，王波，
申请(专利权)人：中国科学院沈阳自动化研究所，
类型：发明
国别省市：