[发明专利]vue环境下展示流程图审核状态的方法和装置

说明书

本发明公开了一种vue环境下展示流程图审核状态的方法和装置，在本发明的实施例中，为处于不同状态的节点赋予不同的颜色值，从而可以直观的展示流程图的审核状态。

技术领域

本发明涉及一种vue环境下展示流程图审核状态的方法，本发明还涉及一种vue环境下展示流程图审核状态的装置。

背景技术

vue是尤雨溪于2014年开发的一种用于构建用户界面的渐进式JavaScript框架，惯常记为Vue.js，是一个用于创建Web交互界面的库。由于相对于其他框架，vue可以通过简单灵活的API（Application Programming Interface，应用程序接口）创建由数据驱动的UI（User Interface，用户界面）组件，从而成为当前用于前端开发的热门框架。

对于流程性事务，人们总是期望各节点所处的不同阶段能够被直观的展示，从而具有更好的用户体验。然而现有的基于vue环境的NPM（Node Package Manager，Node.js打包管理工具，NPM是JavaScript运行时环境Node.js的默认包管理器）组件过于简单，无法满足复杂的审核进度要求。

此外，当前流程图部分多采用canvas（画布）技术进行绘制，canvas为位图显示，所占内存与画布大小成正比，当流程多，对应画布大的时候会造成体积大，占用内存增加，最终导致加载慢等问题；并且由于使用的是位图显示，不能完美适配所有浏览器及各分辨率，进行放大缩小后图片会失真。

从中国专利文献CN111857375A中可以看出，基于vue框架，可以在服务器端构建所需的功能节点，然后客户端可以直接调用所述功能节点，并可以对功能节点进行鼠标事件设置，对功能节点进行组装，得到功能节点及连线数据。据此专利文献可以解决大数据流图的处理，以获得相对较高的处理效率。不过对于流程图的状态监控，例如流程图进度审核，仍欠缺解决手段。

发明内容

本发明的目的在于，提供了一种能够直观展示流程图审核状态的vue环境下展示流程图审核状态的方法，本发明还提供了一种vue环境下展示流程图审核状态的装置。

在本发明的实施例中，提供了一种vue环境下展示流程图审核状态的方法，所述方法包括以下步骤：

请求，客户端向服务器发出展示指定流程图的请求；

响应，服务器端响应所述请求，调用指定的流程图所对应的数据,封装后发送给发出请求的客户端；

解析，客户端解析所述数据，生成流程图的各组件的子数据；

展示，将子数据中的节点数据传入各节点，节点根据子数据中的状态数据显示为相应的颜色；将子数据中的链接数据传给连线组件，生成节点之间的连线；

其中，将子数据封装为vue组件时，根据所述子数据所对应节点的状态，将节点颜色值赋予节点属性；或展示时，客户端根据节点的状态，赋予节点相应于该状态的颜色值。

可选地，客户端生成各节点时，使用矢量图绘制模块绘制节点图形。

可选地，所述矢量图为SVG图；

其中，SVG为Scalable Vector Graphics的缩略语，即可缩放的矢量图形。

可选地，颜色值的数量不少于五种，且一种颜色至少有一个通道与其余任一颜色值相应通道的差大于等于30。

可选地，节点包含子流程时，为该节点设置鼠标事件，响应该鼠标事件，调出子流程。

可选地，所述鼠标事件为对相应节点预定区域的单击；在单击后弹出包含子流程图的子流程数据列表，点选所述子流程图弹出所述子流程图；

在弹出子流程图后，在所述预定区域和子流程数据列表外的区域单击，隐藏子流程。

可选地，对选定的节点封装入该节点的详细信息，并为该详细信息设置鼠标移入事件；