一种轨道交通基于Bootstrap的自定义工作流流程设计器的制作方法

一种轨道交通基于bootstrap的自定义工作流流程设计器
技术领域
1.本发明涉及流程设计领域，具体涉及一种轨道交通基于bootstrap的自定义工作流流程设计器。


背景技术：

2.传统工作流流程设计器呈现方式，多针对大屏幕pc电脑显示器开发，基于windows操作系统环境运行，因此在这些设备上显示效果好，但是移动终端由于屏幕相对较小，传统工作流流程设计器在移动终端设备上显示效果较差。例如：在pc电脑显示器上全屏显示的工作流流程设计器，无法通过手机使用。移动端主流操作系统都不是windows，而安卓操作系统、苹果操作系统、linux操作系统等较多，基于windows系统开发的工作流流程设计器无法在这些系统上运行。
3.同时由于browser server模式系统普遍应用，很多基于浏览器开发的系统，较少要求用户安装特定客户端，以便提高系统的易用性。因此在browser server模式下开发的系统，不安装流程设计器程序的情况下，无法基于浏览器使用工作流流程设计器。


技术实现要素：

4.鉴于现有技术中存在的技术缺陷和技术弊端，本发明实施例提供克服上述问题或者至少部分地解决上述问题的一种轨道交通基于bootstrap的自定义工作流流程设计器，具体方案如下：
5.一种轨道交通基于bootstrap的自定义工作流流程设计器，所述设计器包括流程设计单元、流程预览单元和流程保存单元；
6.所述流程设计单元用于定义工作流中表示各个动作的图示，采用动态浮动工具栏设计功能按钮，并根据流程规则，建立对应的流程逻辑，并生成对应的流程数据；
7.所述流程预览单元用于获取流程数据，动态将流程数据生成一张能在当前界面显示的图像；
8.所述流程保存单元用于将流程数据生成流程定义json文件，上传到服务器。
9.进一步地，所述流程设计单元包括定义流程设计控件，所述定义流程设计控件用于定义工作流中表示各个动作的图示，为流程中的每个图示，设计一套图标，每个图标在作流程设计时，支持选择、拖放、自动对齐事件和操作，用以完成流程的设计功能。
10.进一步地，所述流程设计单元具体使用bootstrap的button和icon组件，以及自定义的图标为流程中的每个图示，设计一套图标，并使用tooltip组件，为每个功能组件弹出友好功能提示，方便用户使用。
11.进一步地，所述流程设计单元包括流程设计器布局设计控件，所述流程设计器布局设计控件用于采用动态浮动工具栏设计功能按钮，将工具栏浮动到屏幕顶部和底部，同时于空白面板处设计滚动条，通过滚动条使工具栏于屏幕上滚动，其中，所述工具栏位置浮动不变，随着滚动，工具栏自动调整位置，始终保持在当前屏幕的顶中和底部。
12.进一步地，流程设计器布局设计控件还用于：对于移动端，将基于电脑端布局好的顶部的图标栏和底部的辅助工具栏添加滚动跟随功能。
13.进一步地，所述流程设计单元包括可视化设计器控件，所述可视化设计器控件用于可视化设计流程图标的事件和操作，并根据流程规则，建立对应的流程逻辑，并生成对应的流程数据，并加载到浏览器的localstorage中。
14.进一步地，所述图标的事件和操作包括流程图标拖放、流程图标定位、流程图标连接和流程图标对齐。
15.进一步地，并根据流程规则，建立对应的流程逻辑，并生成对应的流程数据，并存储到localstorage包括：对浏览器的选择、单击、移动事件的处理和监听，并由一系统的javascript类对事件和操作进行逻辑判断和处理，同时使用html5的localstorage技术，将流程数据加载到浏览器的localstorage，渲染的时候直接浏览器读取流程数据，避免重复从服务器端读取。
16.进一步地，所述流程预览单元具体用于：根据localstorage中存储的流程数据，使用javascript和html5的canvas组件，动态将流程数据生成一张能在当前界面显示的图像。
17.进一步地，动态将流程数据生成一张能在当前界面显示的图像具体包括：先读取流程数据中的开始图示，再依次读取后续的处理图示和分支图示，将所有的图示对象按先后顺序，在界面上使用连接线连起来，形成完整的流程处理图示，并使用bootstrap的自动图像缩放功能适应各种屏幕的显示。
18.本发明具有以下有益效果：
19.1)bootstrap自定义工作流流程设计器，运行性能好，对运行环境要求低，可跨windows、linux、安桌系统、苹果系统等，只要能运行浏览器的设备即可，使轨道交通流程设计可以多平台进行。
20.2)安装成本低，不需要专业人员安装，不需要投入时间执行安装过程，打开浏览器就可以使用；与bs结构的系统能更好集成，不再局限于电脑端，移动端也可以进行设计，界面和布局可自适应各种大小屏幕；突破设备和地点限制，只要能通过电脑或移动端设备，打开设计器网址，即使在家、在工地、在车上、在野外都可以进行工作流的设计。同时维护升级成本低，只需要在服务器端修改文件后，所有用户无需手动升级，浏览器打开网站即可使用最新版的工作流设计器。
21.3)在轨道交通领域使用bootstrap自定义工作流流程设计器，不仅降低了轨道交通作业系统的成本，提高了流程变更的效率，同时布署简单，多端可用，大大提高了作业流程设计的灵活性。
附图说明
22.图1为本发明实施例提供的一种轨道交通基于bootstrap的自定义工作流流程设计器的结构框架图。
23.图2为本发明实施例提供的一种电脑端流程设计器布局示意图；
24.图3为本发明实施例提供的一种移动端流程设计器布局示意图。
具体实施方式
25.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
26.如图1所示，作为本发明的第一方面，提供一种轨道交通基于bootstrap的自定义工作流流程设计器，包括流程设计单元、流程预览单元和流程保存单元；其中，所述流程设计单元包括定义流程设计控件、流程设计器布局设计控件和可视化设计器控件；
27.其中，所述定义流程设计控件具体用于定义工作流中表示各个动作的图示，工作流中有一套表示各个动作的图示，如开始、结束、流程处理、分支选择等，本发明为流程中的每个图示，设计一套图标，每个图标在作流程设计时，支持选择、拖放、自动对齐等事件和操作，用以完成流程的设计功能，使用bootstrap的button和icon组件，以及自定义的一些图标，满足本设计方案的需求。同时使用tooltip组件，为每个功能组件弹出友好功能提示，方便用户使用。
28.其中，所述流程设计器布局设计控件用于采用动态浮动工具栏设计功能按钮。
29.其中，由于流程设计器不仅要在电脑端使用，同时还要在移动端使用，电脑端和移动端屏幕大小不一至，且宽度和分辨率有较大区别，因此需要弹性化设计布局：
30.电脑端布局：
31.电脑端布局为屏幕宽度大于768px的设备，如图2所示，这样的设备屏幕较大，设计器功能按钮可以全部显示出来，可以顶部和底部各列一排，顶部为流程中用到的图标如开始、结束、分支判断等，底部为辅助功能，如图标对齐、图标连接线等。
32.顶部使用bootstrap的栅格系统，为流程图标设置为col
‑
md
‑
12，占据12列，放置可在移动端自动折叠的navbar组件，而后中部的设计面板，占据12列，12行，而右侧的辅助工具，占据12列，也放置可在移动端自动折叠的navbar组件。
33.移动端布局：
34.移动端布局为屏幕宽度小于768px的设备，如图3所示，这样的设备屏幕较小，同时宽度可能会比较窄，如果设计器元素全部显示出来，则设计器空白面板会被挤压变小，无法使用。
35.为解决上述问题，本发明采用了动态浮动工具栏设计，将工具栏浮动到顶部和底部，同时空白面板设计滚动条，可以在屏幕上滚动，但工具栏位置浮动不变，随着滚动，工具栏自动调整位置，始终保持在当前屏幕的顶中和底部；由于在电脑端布局时，已考虑到移动端的使用，因此，在移动端只需要将电脑端布局好的顶部的图标栏和底部的辅助工具栏添加滚动跟随功能即可。
36.移动端可以使用多个滚屏完成一个流程的设计。
37.其中，所述可视化设计器控件用于可视化设计流程图标的事件和操作，并根据流程规则，建立对应的流程逻辑，并生成对应的流程数据，并加载到浏览器的localstorage中；
38.可视化设计器控件中需要实现流程图标拖放、流程图标定位、流程图标连接、流程图标对齐等功能，同时需要根据一系列的流程规则，进行逻辑处理，如分支选择，需要连接
两个以上组件；开始和结束仅能出现一次等。其中涉及到浏览器的选择、单击、移动等事件的处理和监听，由一系统的javascript类来进行逻辑判断和处理；为了加快界面的渲染速度，使用html5的localstorage技术，将一部分数据加载到浏览器的localstorage，渲染的时候可以从直接浏览器读取，避免重复从服务器端读取，同时在断网、网络堵塞等特殊情况下，设计器依然可用。
39.用户在设计的同时，每一步操作生成的流程设计定义文件存储到localstorage，避免特殊情况下用户不小心关闭或退出，导致设计的流程丢失。
40.其中，所述流程预览单元获取流程数据，动态将流程数据生成一张能在当前界面显示的图像。
41.上述实施例中，在流程设计完毕后，则可以根据localstorage中存储的流程数据，使用javascript和html5的canvas组件，动态将流程生成一张能在当前界面显示的图像，先读取开始图示，再依次读取后续的处理图示，分支图示等，将所有的图示对象按先后顺序，在界面上使用连接线连起来，形成完整的流程处理图示，使用bootstrap的自动图像缩放功能适应各种屏幕的显示，该图片可在windows系统、安卓系统、苹果操作系统中显示。
42.图示仅代表处理流程，与图像的大小、位置、颜色等属性没有关系，因此只要预览的图像中，图示的顺序、图示的连接线、图示的类型没有错，即可根据localstorage中存储的流程数据，生成最终的流程定义文件。
43.其中，所述流程保存单元用于将流程数据生成流程定义json文件，上传到服务器，流程文件即代表最终的设计流程，流程文件中定义了流程的开始节点，流程的处理节点，流程的选择和结束节点等，表示了一个业务的处理先后顺序和处理逻辑。
44.以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。