基于Web的过程模型设计器的设计与实现的中期报告.docx

基于Web的过程模型设计器的设计与实现的中期报告
1.项目简介
本项目旨在设计一个基于Web的过程模型设计器，能够通过简单的拖拽和连接方式，设计出符合业务需求的流程模型，并生成执行流程所需的代码。具体实现过程中，考虑到易用性和可扩展性，我们选择使用前端框架Vue.js和流程引擎Activiti来完成开发。
2.完成的工作
在前期的需求分析和技术选型基础上，我们完成了如下工作：
2.1设计前端页面
根据项目需求，我们设计了适合用户操作的页面。主要分为六大板块：菜单栏、工作区、流程模型库、属性界面、工具栏和状态栏。其中，菜单栏提供了新建、打开、保存、发布等基本操作；工作区是设计流程模型的主要区域，可以拖拽、连接、组织模型结构；流程模型库提供了已有的一些流程模型，用户可以直接使用或二次开发；属性界面展示选中元素的详细信息；工具栏提供了各种绘图的工具；状态栏展示了当前操作状态。
2.2实现连接线和节点的拖拽
使用Vue.js的拖拽组件，实现了节点的拖拽效果。同时，在节点的拖拽过程中，还实现了自动吸附到边界、和其他节点间的自动对齐等其他效果。其中，吸附效果通过计算节点和边界的距离，修改节点位置来实现；自动对齐则通过计算节点之间的距离，同步修改节点的位置。
2.3实现模型状态保存与还原功能
使用Vue.js提供的状态管理工具Vuex，实现了流程模型的状态保存和还原。将模型的节点、连接线等信息存储到Vuex的状态树中，保存时将状态树的信息转化为JSON数据保存到本地文件系统中。还原时则通过读取文件系统中的JSON文件，反转化为Vuex状态树中的数据。
2.4对接Activiti流程引擎
通过Activiti提供的Rest包，我们实现了与Activiti流程引擎交互的接口。具体实现过程中，我们实现了基本的模型发布、任务查询、任务办理等功能。通过调用Activiti的API，我们可以将设计器中的流程模型发布到Activiti流程引擎中，能够进行其它与流程相关的操作。
3.下一步工作
在完成了前期的设计和实现工作后，我们将继续推进项目的开发。以下是我们接下来的主要工作方向：
3.1完善设计器中的功能
在前期功能设计中，因时间和精力有限，我们仅实现了部分功能。在接下来的工作中，我们将继续完善设计器中的功能，包括：属性编辑器、流程模型元素的删除、复制、粘贴等操作、流程模型中事件的设置和编辑等。
3.2增加流程模板的支持
除了用户自己设计流程模型外，我们还计划提供一些流程模板，方便用户快速搭建流程模型。可实现加载已有的模板，修改后使用或直接使用。
3.3进行性能优化
在实际使用中，如果流程模型很庞大，设计器在渲染和响应事件时可能会出现卡顿等问题。因此，我们打算进行性能优化，优化渲染流程模型和节点，并提高设计器的响应速度。
4.总结
本报告介绍了我们开发基于Web的过程模型设计器的中期进展情况。通过使用Vue.js和Activiti等相关技术，我们实现了拖拽节点和连接线、流程模型状态保存与还原、对接Activiti流程引擎等功能，并提出了接下来的工作方向。本项目将继续开发完善，期待成为一款易用且功能丰富的过程模型设计器。