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。

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

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

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

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

相应地，当鼠标移入节点的预定区域时，弹出所述详细信息，鼠标移出所述预定区域或点击流程图的空白处，隐藏所述详细信息。

可选地，所述请求为通过流程图ID调用以展示流程图的请求。

可选地，客户端与服务器间所传输的数据为JSON格式封装的数据；

JSON即JavaScript Object Notation，JS对象简谱。

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

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

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

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

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

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

在本发明的实施例中，为处于不同状态的节点赋予不同的颜色值，从而可以直观的展示流程图的审核状态。

附图说明

图1为展示流程图进程及状态详细信息的流程示意图。

图2为只展示流程内容的流程示意图

图3为SVG图绘制流程图。

具体实施方式

应知vue.js是一套用于构建用户界面的渐进式框架，相对于其他传统框架，vue.js属于相对轻量化的框架，其可被设计为可以自底向上逐层应用。

应知，vue.js与工具链和各种支持类库结合使用时，仍然能够为复杂的单页应用提供驱动。

vue.js中，v-if指令可用于条件性的渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

进而，可以使用可以用 v-else 添加一个“else 块”。

以上例示的指出vue组件可被渲染，需知，在vue.js中，可用的渲染方式还有其他类型。据此，可用于组装vue组件，使该组件中的指定节点被赋予颜色值，或者说vue组件的某些属性为颜色属性。

同样地，在vue.js中基于特定的指令，还可以进行列表渲染、事件处理、表单输入绑定等基本处理。

对于vue组件，是一个可被复用的实例，且带有一个名字，我们可以在一个通过newvue创建的vue根实例中，把这个组件作为自定义元素来使用。

进而，因vue组件是可复用的vue实例，因而它们与new vue接收相同的选项。

vue组件可以进行任意次数的复用，因而可以减少代码量。

进一步地，使用vue框架进行开发时，可以通过插件引入的方式，直接将流程图展示嵌入页面，减少代码书写量和流程图样式设计。

在本发明的实施例中，通过vue组件特性，先将开始、结束、人工活动等流程组件进行封装成vue组件，以方便调用。

在本发明的实施例中使用6种颜色表示6种不同状态，流程图中的状态可以为已完成、进行中、未到达、驳回节点、撤回节点、挂起。需知，当需要更多的颜色来区分不同的状态时，可以选用更多种颜色。

为了有效的区分，从而直观快速的识别不同的状态，要求例如前述的六种颜色间应有相对较为明显的区分。可以理解的是，这里的颜色为彩色。在例如RGB模式中，通过三个通道的颜色值的调配，可以获得的足够多的相互间区分度相对较大的颜色种类，而前述的应用所需要的颜色种类数量相对较少，可以适配的区分度比较大的颜色容易选择。

一般而言，某一颜色至少一个通道与其他任一颜色相应通道的颜色值的差大于等于30，如此仍然有较多的颜色可以被选择。

对于一个流程图，其各个组件在被绘制或者后期的审核中被赋予某些属性，例如响应鼠标事件而显示的内容、所呈现图元或者文字等的颜色、节点之间的连接、节点的位置等。

进而，对于流程图，除开始结束外，有5种不同流程节点，具体是人工活动、外部子流程、单一网关、并行网关、多路网关。

其中，人工活动：鼠标移入会根据鼠标位置显示该节点的详细信息，单击后列表显示对应节点信息，点击空白位置恢复完整数据显示。

所说的详细信息属于审核所期望通过鼠标事件能够看到的更具体的信息，取决于审核预先确定的通过鼠标事件所期望看到的数据，与本发明的实现无关，在此不再赘述。

外部子流程：引入的其他流程图，相当于一个模块，该模块构成主流程中的节点，该节点又包含了一个实现该节点功能的算法，该算法对应所述外部子流程，简称为子流程。

对于主流程中的包含外部子流程的节点，单击后弹出引入流程数据列表，点击列表内流程图可显示该子流程的流程图。

如前所述，vue组件可以是多层的结构，外部子流程中还可以包含外部孙流程，其他同上。

对于前述的网关，指节点之间的连接，其中的单一网关，其流出的连线只有一条。

对于并行网关（必须成对出现），流出的线可以有多条。

对于多路网关（也必须成对出现），至少有一条连线的逻辑成立。

节点之间的连接为封装入各节点组件内的链接数据所控制，客户端根据节点组件内的链接子数据生成节点之间的连线。

关于如何组装或者说封装vue组件，可以参见中国专利文献CN111857375A中的一些示例，也可以参见vue.js框架的手册，这属于本领域的一般常识，在此不再赘述。

在本发明的实施例中，默认所调用的vue组件是按照预定的要求封装好的vue组件。应知，在本发明的实施例中，主要用于呈现流程图的审核状态，而非对流程图内节点或者说vue组件的编辑。

当需要vue组件具有区别于单纯的功能性展示的内容时，可以借助于vue.js框架为vue组件组装更多的属性，例如节点图元和/或文字的颜色等。

审核人员通过呈现在客户端的流程图审核状态审核观察流程图，客户端首先要向服务器发出展示选定的流程图的请求，客户端向服务器发出的请求可以是通过选定流程图的id的请求，请求展示流程图所需的数据。

进一步地，参见说明书附图1，服务器响应所述请求，根据流程图id请求后台绑定于该流程图ID的数据传入，得到流程图各组件数据，然后使用JSON格式封装后，发送回发出请求的客户端。

JSON是一种轻量级的数据交换格式，其是一种轻量级的数据交换格式。它基于ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

客户端将接收到的json数据解析成不同组件需要的数据，包括待处理的SVG图形数据、流程节点交互信息，以及列表对应流程节点信息。

客户端进一步将生成不同节点所需的属性值传入包含于相应节点的子组件中，子组件再判断该节点对应的流程状态而显示不同的状态颜色，后将生成对应的包含SVG的节点组件或子组件放入页面坐标系中，状态为进行中的组件为动态小人来突出当前状态。

图2示出了客户端生成流程图节点图元的绘制流程，服务器数据返回的数据为JSON格式封装的数据，客户端解析该数据，处理其中的用于生成节点图元的数据，基于SVG绘制，并展示在客户端。

需知，构造节点的组件以及子组件在组装时，装入了SVG图形的坐标数据。具体是在流程图展示页面调用封装好的各节点组件，根据返回数据中的XPoint、YPoint对组件位置进行确定，v-for循环来绘制多个相同组件。

组件内封装了是否全屏显示的方法，可以控制流程图展示大小及对应列表是否显示。

流程图展示分两种展示方式，一种是全部是静态的查看流程图方式，其不包含流程的列表展示及鼠标移入时的详情展示，只展示流程的过程，不展示流程的进程；另一种是展示流程的进度及其状态，显示不同颜色来表示不同状态，列表显示流程进度的详细信息，各节点移入移出有交互效果、单击事件。

进一步地，为每个人工活动加入鼠标移入和单击的监听事件，通过vue本身的父子传值将点击事件的变量传入列表组件，从而达到数据过滤，展示单击对应流程节点列表信息的功能。外部子流程加入单击监听事件，点击外部子流程打开弹窗列表，列表中包含对应子流程的流程图。