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

权利要求书

1.一种vue环境下展示流程图审核状态的方法，其特征在于，所述方法包括以下步骤：

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

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

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

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

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

2.根据权利要求1所述的vue环境下展示流程图审核状态的方法，其特征在于，客户端生成各节点时，使用矢量图绘制模块绘制节点图形。

3.根据权利要求2所述的vue环境下展示流程图审核状态的方法，其特征在于，所述矢量图为SVG图；

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

4.根据权利要求1所述的vue环境下展示流程图审核状态的方法，其特征在于，颜色值的数量不少于五种，且一种颜色至少有一个通道与其余任一颜色值相应通道的差大于等于30。

5.根据权利要求1所述的vue环境下展示流程图审核状态的方法，其特征在于，节点包含子流程时，为该节点设置鼠标事件，响应该鼠标事件，调出子流程。

6.根据权利要求5所述的vue环境下展示流程图审核状态的方法，其特征在于，所述鼠标事件为对相应节点预定区域的单击；在单击后弹出包含子流程图的子流程数据列表，点选所述子流程图弹出所述子流程图；

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

7.根据权利要求1所述的vue环境下展示流程图审核状态的方法，其特征在于，对选定的节点封装入该节点的详细信息，并为该详细信息设置鼠标移入事件；

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

8.根据权利要求1所述的vue环境下展示流程图审核状态的方法，其特征在于，所述请求为通过流程图ID调用以展示流程图的请求。

9.根据权利要求1所述的vue环境下展示流程图审核状态的方法，其特征在于，客户端与服务器间所传输的数据为JSON格式封装的数据；

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

10.一种vue环境下展示流程图审核状态的装置，其特征在于，所述装置包括：

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

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

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

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

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