CN111159593A - 流程图的生成方法、装置、存储介质和电子设备 - Google Patents

Abstract

本公开涉及一种流程图的生成方法、装置、存储介质和电子设备，涉及电子信息处理技术领域，该方法应用于服务器，包括：接收浏览器发送的操作指令，操作指令为浏览器在显示界面上监控到的指令，根据操作指令，从目标流程中确定指定流程节点，和指定流程节点的属性信息，目标流程中包括多个流程节点，将指定流程节点的属性信息发送至浏览器，以使浏览器根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，就可以使浏览器生成目标流程图，能够提高数据传输的效率，快速展示目标流程图。

Description

流程图的生成方法、装置、存储介质和电子设备

技术领域

本公开涉及电子信息处理技术领域，具体地，涉及一种流程图的生成方法、装置、存储介质和电子设备。

背景技术

随着电子信息技术的发展，在工业、政务、管理等多个领域都采用了流程图来实现对任务的管理。用户能够随时查看某一任务的流程图，以获取该任务的状态。流程图中包括多个节点和多个节点之间的连线，节点表示任务中的某个步骤，连线表示多个节点之间的先后关系。

通常情况下，生成流程图的方式分为两种，一种是服务器将包含了整个任务流程的静态图片发送给浏览器，浏览器显示静态图片，这种方式的展示速度快，时延小，但是用户不能在静态图片上对任务流程执行操作，降低了流程图的可操作性，适用范围小。另一种是服务器将整个任务流程中包括的全部节点的属性信息都发送给浏览器，浏览器根据节点的属性对节点进行渲染，生成流程图，用户能够在流程图上对任务流程执行操作，可操作性高，但全部节点的属性信息的数据量大，传输效率低，导致流程图展示缓慢。

发明内容

为了解决现有技术中存在的问题，本公开的目的是提供一种流程图的生成方法、装置、存储介质和电子设备。

为了实现上述目的，根据本公开实施例的第一方面，提供一种流程图的生成方法，应用于服务器，所述方法包括：

接收浏览器发送的操作指令，所述操作指令为所述浏览器在显示界面上监控到的指令；

根据所述操作指令，从目标流程中确定指定流程节点，和所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

将所述指定流程节点的属性信息发送至所述浏览器，以使所述浏览器根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

可选地，所述根据所述操作指令，从目标流程中确定指定流程节点，和所述指定流程节点的属性信息，包括：

若所述操作指令为按照预设方向滑动所述显示界面的指令，根据所述操作指令包括的滑动方向和滑动速度，确定所述浏览器的显示范围；根据所述显示范围确定所述指定流程节点，和所述指定流程节点的属性信息；

若所述操作指令为针对所述显示界面上显示的所述指定流程节点上的指令，根据所述操作指令包括的操作内容，更新所述指定流程节点的属性信息。

可选地，在所述接收浏览器发送的操作指令之前，所述方法还包括：

根据所述显示界面的显示尺寸和当前流程节点，从所述目标流程中确定初始流程节点，和所述初始流程节点的属性信息；

根据所述初始流程节点的属性信息，生成用于展示初始流程图的初始图像，所述初始流程图为根据所述初始流程节点的属性信息对所述初始流程节点进行渲染得到的流程图；

将所述初始图像发送至所述浏览器，以使所述浏览器在所述显示界面上显示所述初始图像，若在所述初始图像上监控到所述操作指令，将所述操作指令发送至所述服务器。

根据本公开实施例的第二方面，提供一种流程图的生成方法，应用于浏览器，所述方法，包括：

将在显示界面上监控到的操作指令发送至服务器；

获取所述服务器发送的指定流程节点的属性信息，所述指定流程节点的属性信息为所述服务器根据所述操作指令，从目标流程中确定的所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

可选地，在所述将在显示界面上监控到的操作指令发送至服务器之前，所述方法还包括：

接收所述服务器发送的初始图像，并在所述显示界面上显示所述初始图像，所述初始图像为所述服务器根据所述显示界面的显示尺寸和当前流程节点，从所述目标流程中确定的初始流程节点的属性信息，并根据所述初始流程节点的属性信息，生成用于展示初始流程图的所述初始图像，所述初始流程图为所述服务器根据所述初始流程节点的属性信息为对所述初始流程节点进行渲染得到的流程图；

接收所述服务器发送的所述初始流程节点的属性信息，并存储所述初始流程节点的属性信息。

可选地，所述将在显示界面上监控到的操作指令发送至服务器，包括：

将在所述初始图像上监控到的所述操作指令发送至所述服务器；

所述根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，包括：

隐藏所述初始图像；

根据已存储的所述初始流程节点的属性信息对所述初始流程节点进行渲染，根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成所述目标流程图。

根据本公开实施例的第三方面，提供一种流程图的生成装置，应用于服务器，所述装置包括：

接收模块，用于接收浏览器发送的操作指令，所述操作指令为所述浏览器在显示界面上监控到的指令；

确定模块，用于根据所述操作指令，从目标流程中确定指定流程节点，和所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

发送模块，用于将所述指定流程节点的属性信息发送至所述浏览器，以使所述浏览器根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

可选地，所述确定模块用于：

若所述操作指令为按照预设方向滑动所述显示界面的指令，根据所述操作指令包括的滑动方向和滑动速度，确定所述浏览器的显示范围；根据所述显示范围确定所述指定流程节点，和所述指定流程节点的属性信息；

若所述操作指令为针对所述显示界面上显示的所述指定流程节点上的指令，根据所述操作指令包括的操作内容，更新所述指定流程节点的属性信息。

可选地，所述确定模块，还用于在所述接收浏览器发送的操作指令之前，根据所述显示界面的显示尺寸和当前流程节点，从所述目标流程中确定初始流程节点，和所述初始流程节点的属性信息；

所述装置还包括：

生成模块，用于根据所述初始流程节点的属性信息，生成用于展示初始流程图的初始图像，所述初始流程图为根据所述初始流程节点的属性信息对所述初始流程节点进行渲染得到的流程图；

所述发送模块，还用于将所述初始图像发送至所述浏览器，以使所述浏览器在所述显示界面上显示所述初始图像，若在所述初始图像上监控到所述操作指令，将所述操作指令发送至所述服务器。

根据本公开实施例的第四方面，提供一种流程图的生成装置，应用于浏览器，所述装置包括：

发送模块，用于将在显示界面上监控到的操作指令发送至服务器；

获取模块，用于获取所述服务器发送的指定流程节点的属性信息，所述指定流程节点的属性信息为所述服务器根据所述操作指令，从目标流程中确定的所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

生成模块，用于根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

可选地，所述装置还包括：

处理模块，用于在所述将在显示界面上监控到的操作指令发送至服务器之前，接收所述服务器发送的初始图像，并在所述显示界面上显示所述初始图像，所述初始图像为所述服务器根据所述显示界面的显示尺寸和当前流程节点，从所述目标流程中确定的初始流程节点的属性信息，并根据所述初始流程节点的属性信息，生成用于展示初始流程图的所述初始图像，所述初始流程图为所述服务器根据所述初始流程节点的属性信息对所述初始流程节点进行渲染得到的流程图；

所述处理模块，还用于接收所述服务器发送的所述初始流程节点的属性信息，并存储所述初始流程节点的属性信息。

可选地，所述发送模块用于：

将在所述初始图像上监控到的所述操作指令发送至所述服务器；

所述生成模块用于：

隐藏所述初始图像；

根据已存储的所述初始流程节点的属性信息对所述初始流程节点进行渲染，根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成所述目标流程图。

根据本公开实施例的第五方面，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本公开实施例第一方面所述方法的步骤。

根据本公开实施例的第六方面，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本公开实施例第二方面所述方法的步骤。

根据本公开实施例的第七方面，提供一种主机，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现本公开实施例第一方面所述方法的步骤。

根据本公开实施例的第八方面，提供一种主机，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现本公开实施例第二方面所述方法的步骤。

通过上述技术方案，本公开中浏览器若在显示界面上监控到操作指令，会将操作指令发送至服务器。服务器根据接收到的操作指令，从包括了多个流程节点的目标流程中确定指定流程节点，和指定流程节点的属性信息，再将指定流程节点的属性信息发送至浏览器。浏览器根据接收到的指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，无需将全部流程节点的属性信息发送至浏览器，能够减少服务器与浏览器之间数据传输所占用的带宽，提高数据传输的效率。相应的，浏览器只需要对指定流程节点进行渲染就能生成目标流程图，而无需渲染全部流程节点，能够提高目标流程图的渲染速度，既能保证目标流程图的可操作性，又能快速展示目标流程图。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

图1是根据一示例性实施例示出的一种流程图的生成方法的流程图；

图2是根据一示例性实施例示出的一种目标流程图的示意图；

图3是根据一示例性实施例示出的另一种流程图的生成方法的流程图；

图4是根据一示例性实施例示出的一种浏览器的显示范围的示意图；

图5是根据一示例性实施例示出的另一种流程图的生成方法的流程图；

图6是根据一示例性实施例示出的一种流程图的生成方法的流程图；

图7是根据一示例性实施例示出的另一种流程图的生成方法的流程图；

图8是根据一示例性实施例示出的另一种流程图的生成方法的流程图；

图9是根据一示例性实施例示出的一种流程图的生成装置的框图；

图10是根据一示例性实施例示出的另一种流程图的生成装置的框图；

图11是根据一示例性实施例示出的一种流程图的生成装置的框图；

图12是根据一示例性实施例示出的另一种流程图的生成装置的框图；

图13是根据一示例性实施例示出的一种电子设备的框图；

图14是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在介绍本公开提供的流程图的生成方法、装置、存储介质和电子设备之前，首先对本公开中各个实施例所涉及的应用场景进行介绍，该应用场景可以包括服务器和浏览器。其中，服务器上存储有目标流程的相关数据，可以是本地服务器、云服务器或者服务器集群等。浏览器可以安装在任一种设置有显示界面的终端上，终端例如可以是智能手机、平板电脑、智能电视、智能手表、PDA(英文：Personal Digital Assistant，中文：个人数字助理)、便携计算机等，也可以是台式计算机等固定终端。浏览器与服务器之间可以通过网络进行数据传输。

图1是根据一示例性实施例示出的一种流程图的生成方法的流程图，如图1所示，该方法应用于服务器，包括以下步骤：

步骤101，接收浏览器发送的操作指令，操作指令为浏览器在显示界面上监控到的指令。

举例来说，服务器上存储有指定任务对应的目标流程的相关数据，例如可以包括目标流程的流程模板和流程实际流转的信息。其中，流程模板中可以包括有目标流程的多个流程节点，和流程节点之间的连线，流程节点用于表示指定任务中的某个步骤，流程节点之间的连线用于表示步骤之间的执行顺序，流程模板中还可以包括流程节点的节点名称、坐标、长度、宽度，流程节点之间的连线的坐标等。流程实际流转的信息用于描述目标流程的具体流转信息，即每个流程节点表示的步骤是否已经完成。流程实际流转的信息可以包括流程节点的展示方式，和/或流程节点之间的连线的展示方式，通过不同的展示方式来区分某个步骤是否已经执行完成。例如，可以用展示方式为红色表示已完成，展示方式为绿色表示正在办理，也可以用展示方式为实线边框表示已完成，展示方式为虚线边框表示正在办理。

用户可以通过浏览器查看目标流程对应的目标流程图，以确认指定任务执行到了哪个步骤(即目标流程图中的哪个节点)。当浏览器监控到显示界面上执行了操作指令时，会将操作指令发送给服务器。此时，浏览器的显示界面上可以显示有目标流程图，也可以未显示目标流程图，例如显示其他除目标流程图之外的信息。若显示界面上未显示目标流程图，操作指令例如可以是：请求流程图的指令，用于向服务器请求生成目标流程图所需要的信息(例如下文提及的指定流程节点的属性信息)。若显示界面上显示有目标流程图，操作指令例如可以是：滑动显示界面上的滚动条的指令，用于滑动显示界面，或者对目标流程图上的某个流程节点执行具体操作的指令，用于对该流程节点执行办理、转办、回退等操作。

步骤102，根据操作指令，从目标流程中确定指定流程节点，和指定流程节点的属性信息，目标流程中包括多个流程节点。

示例的，服务器在接收到操作指令后，可以根据操作指令，从目标流程的相关数据中确定指定流程节点，并确定指定流程节点的属性信息，其中，属性信息可以包括指定流程节点的节点名称、坐标、长度、宽度、展示方式(例如：颜色)，还可以包括与指定流程节点相关的连线的坐标、展示方式。具体的，若操作指令为请求流程图的指令，由于用户通常最关心的是指定任务当前执行到了哪个步骤，因此可以将指定流程节点确定为：当前流程节点和当前流程节点附近的流程节点，并从目标流程的相关数据中确定指定流程节点的属性信息。若操作指令为滑动显示界面上的滚动条的指令，或者对目标流程图上的某个流程节点执行具体操作的指令，那么可以将指定流程节点确定为操作指令所影响到的流程节点。

步骤103，将指定流程节点的属性信息发送至浏览器，以使浏览器根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。

示例的，服务器将指定流程节点的属性信息发送至浏览器，使得浏览器根据指定流程节点的属性信息对指定流程节点进行渲染，例如可以按照属性信息中包括的指定流程节点的节点名称、坐标、长度、宽度、展示方式来渲染指定流程节点，还可以按照属性信息中包括的与指定流程节点相关的连线的坐标、展示方式来渲染连线，以在显示界面上生成目标流程图。

若指定流程节点为：当前流程节点和当前流程节点附近的流程节点(即操作指令为请求流程图的指令)，表示显示界面上之前未显示目标流程图，那么服务器执行步骤103之后，浏览器生成的目标流程图中只包括指定流程节点，和指定流程节点之间的连线。若指定流程节点为操作指令所影响到的流程节点(即操作指令为滑动显示界面上的滚动条的指令，或者对目标流程图上的某个流程节点执行具体操作的指令)，表示显示界面上之前显示有目标流程图，那么服务器执行步骤103之后，浏览器生成的新的目标流程图中，既包括了指定流程节点，和指定流程节点之间的连线，还可以包括执行步骤103之前，浏览器的显示界面上显示的目标流程图中包括的全部或部分流程节点和之间的连线。

可以理解为，若显示界面上之前未显示目标流程图，那么步骤103发送的指定流程节点的属性信息只包括用户所关心的当前流程节点和相关的流程节点的属性信息，而不是目标流程中的全部流程节点的属性信息。若显示界面上之前显示有目标流程图，那么步骤103发送的指定流程节点的属性信息只包括操作指令所影响到的流程节点的属性信息，是相对于显示界面上之前显示的目标流程图的增量信息，而不是目标流程中的全部流程节点的属性信息。因此，本公开能够降低数据传输的数据量和数据传输所占用的带宽，提高数据传输的效率，相应的浏览器只需要对指定流程节点进行渲染，从而提高浏览器对目标流程图的渲染速度，以快速展示目标流程图。

以操作指令为请求流程图的指令来举例，服务器从目标流程中确定当前流程节点为流程节点C，流程节点C附近的流程节点包括：流程节点A、流程节点B、流程节点D和流程节点X，将这6个流程节点作为指定流程节点，然后确定这6个流程节点的属性信息。以流程节点的属性信息中，展示方式为空白底色表示已完成，横纹底色表示正在办理，格纹底色表示未完成来举例。那么流程节点C的展示方式为横纹底色，流程节点A、流程节点B、流程节点D的展示方式为空白底色，流程节点X的展示方式为格纹底色。浏览器根据接收到的指定流程节点的属性信息，对指定流程节点进行渲染，以得到目标流程图，如图2所示。

综上所述，本公开中服务器首先接收由浏览器发送的，在显示界面上监控到操作指令，然后根据接收到的操作指令，从包括了多个流程节点的目标流程中确定指定流程节点，和指定流程节点的属性信息，再将指定流程节点的属性信息发送至浏览器，使得浏览器根据接收到的指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，无需将全部流程节点的属性信息发送至浏览器，能够减少服务器与浏览器之间数据传输所占用的带宽，提高数据传输的效率。相应的，浏览器只需要对指定流程节点进行渲染就能生成目标流程图，而无需渲染全部流程节点，能够提高目标流程图的渲染速度，既能保证目标流程图的可操作性，又能快速展示目标流程图。

图3是根据一示例性实施例示出的另一种流程图的生成方法的流程图，如图3所示，步骤102的实现方式为：

步骤1021，若操作指令为按照预设方向滑动显示界面的指令，根据操作指令包括的滑动方向和滑动速度，确定浏览器的显示范围。根据显示范围确定指定流程节点，和指定流程节点的属性信息。

具体的，针对不同的操作指令，确定指定流程节点的方式也不相同。若操作指令为按照预设方向滑动显示界面的指令，即用户滑动显示界面上的滚动条，进行上下滑动，或者左右滑动。那么操作指令中可以包括滑动方向(例如：向上、向下、向左、向右)和滑动速度(即滑动滚动条的距离，例如50个像素)。可以根据操作指令包括的滑动方向和滑动速度，确定执行操作指令之后，浏览器的显示界面的显示范围。可以理解为，在执行操作指令之前，浏览器的显示界面上显示的是浏览器画布中的a区域，在执行操作指令之后，浏览器的显示界面上显示的是浏览器画布中的b区域(即步骤1021中的显示范围)，若滑动速度较慢，那么a区域和b区域之间可能存在重合的部分，若滑动速度较快，a区域和b区域之间可能不存在重合的部分。在确定显示范围后，可以根据目标流程中全部流程节点的坐标，确定显示范围内包括的指定流程节点，进一步确定指定流程节点的属性信息。需要说明的是，在确定显示范围时，可以将显示范围确定为比浏览器的显示界面的范围大指定倍数(例如1.5倍)的范围，这样在用户小范围拖拽滚动条时，能够更加快速地展示目标流程图。

以图4来举例，其中执行操作指令之前显示界面上显示的目标流程图为a区域，用户在显示界面上向右滑动滚动条，确定的显示范围为b区域，然后根据b区域在目标流程中确定指定流程节点(即相比于a区域新增的流程节点)，即流程节点Y，那么服务器将流程节点Y的属性信息发送至浏览器，浏览器可以根据流程节点Y的属性信息对流程节点Y进行渲染，以在显示界面上显示b区域内的目标流程图。

步骤1022，若操作指令为针对显示界面上显示的指定流程节点上的指令，根据操作指令包括的操作内容，更新指定流程节点的属性信息。

若操作指令为针对显示界面上显示的指定流程节点上的指令，即用户对显示界面上的指定流程节点执行了具体操作，例如：执行办理、转办、回退。那么操作指令中可以包括操作内容，用于指示操作指令所影响到的流程节点。之后根据操作指令包括的操作内容，更新指定流程节点的属性信息。例如，以流程节点的属性信息中，颜色为红色表示已完成，绿色表示正在办理，蓝色表示未完成来举例。若操作指令为“完成流程节点A，执行流程节点B”，那么指定流程节点为流程节点A和流程节点B，相应的，流程节点A由正在执行变为已完成，流程节点B由未完成变为正在执行，可以将流程节点A的颜色由绿色更新为红色，将流程节点B的颜色由蓝色更新为绿色。若操作指令为“从流程节点C回退至流程节点D”，那么指定流程节点为流程节点C和流程节点D，相应的，流程节点C由正在执行变为未完成，流程节点D由已完成变为正在执行，可以将流程节点C的颜色由绿色更新为蓝色，将流程节点D的颜色由红色更新为绿色。

图5是根据一示例性实施例示出的另一种流程图的生成方法的流程图，如图5所示，在步骤101之前，该方法还包括：

步骤104，根据显示界面的显示尺寸和当前流程节点，从目标流程中确定初始流程节点，和初始流程节点的属性信息。

步骤105，根据初始流程节点的属性信息，生成用于展示初始流程图的初始图像，初始流程图为根据初始流程节点的属性信息对初始流程节点进行渲染得到的流程图。

步骤106，将初始图像发送至浏览器，以使浏览器在显示界面上显示初始图像，若在初始图像上监控到操作指令，将操作指令发送至服务器。

举例来说，用户通过浏览器查看目标流程图时，最关心的往往是指定任务当前执行到了哪个步骤，即目标流程中当前正在执行的步骤，所对应的当前流程节点。如果将当前流程节点和当前流程节点附近的流程节点的属性信息发送给浏览器，由浏览器进行渲染得到目标流程图，仍然需要一定的时间，对于用户来说，需要等待一定的时间才能看到目标流程图。因此，为了进一步提高展示目标流程图的速度，可以由服务器将包括当前流程节点和当前流程节点附近的流程节点的初始图像发送至浏览器，浏览器可以直接显示初始图像。对于用户来说，不论显示界面上显示的是初始图像，还是目标流程图，观看到的内容是相同的。

具体的，首先在目标流程中确定当前正在执行的步骤所对应的当前流程节点，然后根据显示界面的显示尺寸确定显示界面上需要展示的初始流程节点，和初始流程节点的属性信息。初始流程节点中包括当前流程节点和当前流程节点附近的流程节点。例如，显示尺寸为720*1080，那么以当前流程节点在浏览器画布中的坐标为中心，在720*1080范围内，可以展示出的流程节点即为当前流程节点附近的流程节点。还可以将显示尺寸扩大指定倍数(例如1.5倍)，以增加初始流程节点中包含的流程节点的数量，从而增加初始图像中所包含的信息量。

之后，由服务器根据初始流程节点的属性信息对初始流程节点进行渲染，得到初始流程图。然后再生成用于展示初始流程图的初始图像。其中，初始图像为静态图像，展示的内容包括初始流程图。而本实施例中提及的目标流程图，是浏览器根据指定流程节点的属性信息实时渲染出的流程图。最后，服务器将初始图像发送至浏览器，浏览器无需对初始图像进行处理，可以直接在显示界面上快速展示初始图像。相应的，若浏览器在初始图像上监控到操作指令，会将操作指令发送至服务器，继续执行步骤101至步骤103。

综上所述，本公开中服务器首先接收由浏览器发送的，在显示界面上监控到操作指令，然后根据接收到的操作指令，从包括了多个流程节点的目标流程中确定指定流程节点，和指定流程节点的属性信息，再将指定流程节点的属性信息发送至浏览器，使得浏览器根据接收到的指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，无需将全部流程节点的属性信息发送至浏览器，能够减少服务器与浏览器之间数据传输所占用的带宽，提高数据传输的效率。相应的，浏览器只需要对指定流程节点进行渲染就能生成目标流程图，而无需渲染全部流程节点，能够提高目标流程图的渲染速度，既能保证目标流程图的可操作性，又能快速展示目标流程图。

图6是根据一示例性实施例示出的一种流程图的生成方法的流程图，如图6所示，该方法应用于浏览器，包括以下步骤：

步骤201，将在显示界面上监控到的操作指令发送至服务器。

举例来说，用户可以在浏览器上查看目标流程对应的目标流程图，以确认指定任务执行到了哪个步骤，即目标流程图中的当前流程节点。若浏览器监控到用户在显示界面上执行了操作指令，可以将操作指令发送给服务器。需要说明的是，浏览器的显示界面上此时可以显示有目标流程图，也可以未显示目标流程图。针对显示界面上是否显示有目标流程图，操作指令也不相同。若显示界面上未显示目标流程图，操作指令例如可以是：请求流程图的指令，用户通过浏览器向服务器请求生成目标流程图所需要的信息(例如指定流程节点的属性信息)。若显示界面上显示有目标流程图，操作指令例如可以是：用户滑动显示界面上的滚动条的指令，用于滑动显示界面，或者对目标流程图上的某个流程节点执行具体操作的指令，用于对该流程节点执行办理、转办、回退等操作。

步骤202，获取服务器发送的指定流程节点的属性信息，指定流程节点的属性信息为服务器根据操作指令，从目标流程中确定的指定流程节点的属性信息，目标流程中包括多个流程节点。

示例的，服务器在接收到操作指令后，会从目标流程的相关数据中确定指定流程节点，并确定指定流程节点的属性信息。再将指定流程节点的属性信息发送至浏览器。若操作指令为请求流程图的指令，服务器可以将指定流程节点确定为：当前流程节点和当前流程节点附近的流程节点，并从目标流程的相关数据中确定指定流程节点的属性信息。若操作指令为滑动显示界面上的滚动条的指令，或者对目标流程图上的某个流程节点执行具体操作的指令，那么服务器可以将指定流程节点确定为操作指令所影响到的流程节点。

步骤203，根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。

示例的，浏览器根据指定流程节点的属性信息对指定流程节点进行渲染，例如可以按照属性信息中包括的指定流程节点的节点名称、坐标、长度、宽度、展示方式来渲染指定流程节点，还可以按照属性信息中包括的与指定流程节点相关的连线的坐标、展示方式来渲染连线，以在显示界面上生成目标流程图。

其中，若操作指令为请求流程图的指令，目标流程图中只包括指定流程节点，和指定流程节点之间的连线。若操作指令为滑动显示界面上的滚动条的指令，或者对目标流程图上的某个流程节点执行具体操作的指令，那么步骤203中生成的新的目标流程图中，既包括了指定流程节点，和指定流程节点之间的连线，还可以包括执行步骤203之前显示界面上显示的目标流程图中包括的全部或部分流程节点和之间的连线。

可以理解为，若显示界面上之前未显示目标流程图，那么步骤202中浏览器接收的指定流程节点的属性信息只包括用户所关心的当前流程节点和相关的流程节点的属性信息，而不是目标流程中的全部流程节点的属性信息。同样的，若显示界面上之前显示有目标流程图，那么步骤202中浏览器接收的指定流程节点的属性信息只包括操作指令所影响到的流程节点的属性信息，是相对于显示界面上之前显示的目标流程图的增量信息，而不是目标流程中的全部流程节点的属性信息。因此，本公开能够降低数据传输的数据量和数据传输所占用的带宽，提高数据传输的效率，相应的浏览器只需要对指定流程节点进行渲染，从而提高浏览器对目标流程图的渲染速度，以快速展示目标流程图。

图7是根据一示例性实施例示出的另一种流程图的生成方法的流程图，如图7所示，在步骤201之前，该方法还可以包括以下步骤：

步骤204，接收服务器发送的初始图像，并在显示界面上显示初始图像，初始图像为服务器根据显示界面的显示尺寸和当前流程节点，从目标流程中确定的初始流程节点的属性信息，并根据初始流程节点的属性信息，生成用于展示初始流程图的初始图像，初始流程图为服务器根据初始流程节点的属性信息对初始流程节点进行渲染得到的流程图。

举例来说，用户通过浏览器查看目标流程图时，最关心的往往是指定任务当前执行到了哪个步骤，即目标流程中当前正在执行的步骤，所对应的当前流程节点。如果服务器将当前流程节点和当前流程节点附近的流程节点的属性信息发送给浏览器，由浏览器进行渲染得到目标流程图，仍然需要一定的时间，对于用户来说，需要等待一定的时间才能看到目标流程图。因此，为了进一步提高展示目标流程图的速度，服务器可以将包括当前流程节点和当前流程节点附近的流程节点的初始图像发送至浏览器，浏览器直接显示初始图像。对于用户来说，不论显示界面上显示的是静态图像，还是目标流程图，观看到的内容是相同的。

具体的，浏览器接收初始图像，并在显示界面上直接显示初始图像。其中，初始图像是由服务器在目标流程中确的当前正在执行的步骤所对应的当前流程节点，然后根据显示界面的显示尺寸确定显示界面上需要展示的初始流程节点，和初始流程节点的属性信息。再由服务器根据初始流程节点的属性信息生成的图像。需要说明的是，初始图像中为静态图像，展示的内容包括了初始流程图，初始流程图为服务器根据初始流程节点的属性信息对初始流程节点进行渲染得到的流程图。浏览器无需对初始图像进行处理，可以直接在显示界面上快速显示初始图像。

步骤205，接收服务器发送的初始流程节点的属性信息，并存储初始流程节点的属性信息。

进一步的，服务器再将初始图像发送给浏览器之后，还会将初始流程节点的属性信息发送至浏览器，浏览器将接收到的初始流程节点的属性信息进行存储。

图8是根据一示例性实施例示出的另一种流程图的生成方法的流程图，如图8所示，步骤201的实现方式可以是：

将在初始图像上监控到的操作指令发送至服务器。

在具体的应用场景中，若浏览器执行了步骤204，那么显示界面上显示了初始图像，因此步骤201中在显示界面上监控到的操作指令，可以为在初始图像上监控到的操作指令。

相应的，步骤203的实现方式可以包括：

步骤2031，隐藏初始图像。

步骤2032，根据已存储的初始流程节点的属性信息对初始流程节点进行渲染，根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。

进一步的，由于初始图像为静态图像，因此，若步骤201中监控到用户在初始图像上执行了了操作指令，浏览器将操作指令发送给服务器，然后接收服务器发送的指定流程节点的属性信息。之后，浏览器可以先隐藏初始图像，再根据服务器发送的指定流程节点的属性信息对指定流程节点进行渲染，并根据步骤205中存储的初始流程节点的属性信息对初始流程节点进行渲染，以在显示界面上生成目标流程图，此时，目标流程图中既包括了指定流程节点，又可以包括部分或者全部初始流程节点。

综上所述，本公开中浏览器会在显示界面上监控是否存在操作指令，在监控到操作指令后，将操作指令发送至服务器，使得服务器根据接收到的操作指令，从包括了多个流程节点的目标流程中确定指定流程节点，和指定流程节点的属性信息，再将指定流程节点的属性信息发送至浏览器。浏览器根据接收到的指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，无需将全部流程节点的属性信息发送至浏览器，能够减少服务器与浏览器之间数据传输所占用的带宽，提高数据传输的效率。相应的，浏览器只需要对指定流程节点进行渲染就能生成目标流程图，而无需渲染全部流程节点，能够提高目标流程图的渲染速度，既能保证目标流程图的可操作性，又能快速展示目标流程图。

图9是根据一示例性实施例示出的一种流程图的生成装置的框图，如图9所示，该装置300应用于服务器，包括：

接收模块301，用于接收浏览器发送的操作指令，操作指令为浏览器在显示界面上监控到的指令。

确定模块302，用于根据操作指令，从目标流程中确定指定流程节点，和指定流程节点的属性信息，目标流程中包括多个流程节点。

发送模块303，用于将指定流程节点的属性信息发送至浏览器，以使浏览器根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。

可选地，确定模块302可以用于执行以下步骤：

步骤1)若操作指令为按照预设方向滑动显示界面的指令，根据操作指令包括的滑动方向和滑动速度，确定浏览器的显示范围。根据显示范围确定指定流程节点，和指定流程节点的属性信息。

步骤2)若操作指令为针对显示界面上显示的指定流程节点上的指令，根据操作指令包括的操作内容，更新指定流程节点的属性信息。

图10是根据一示例性实施例示出的另一种流程图的生成装置的框图，如图10所示，确定模块302，还用于在接收浏览器发送的操作指令之前，根据显示界面的显示尺寸和当前流程节点，从目标流程中确定初始流程节点，和初始流程节点的属性信息。

该装置300还包括：

生成模块304，用于根据初始流程节点的属性信息，生成用于展示初始流程图的初始图像，初始流程图为根据初始流程节点的属性信息对初始流程节点进行渲染得到的流程图。

发送模块303，还用于将初始图像发送至浏览器，以使浏览器在显示界面上显示初始图像，若在初始图像上监控到操作指令，将操作指令发送至服务器。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

综上所述，本公开中服务器首先接收由浏览器发送的，在显示界面上监控到操作指令，然后根据接收到的操作指令，从包括了多个流程节点的目标流程中确定指定流程节点，和指定流程节点的属性信息，再将指定流程节点的属性信息发送至浏览器，使得浏览器根据接收到的指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，无需将全部流程节点的属性信息发送至浏览器，能够减少服务器与浏览器之间数据传输所占用的带宽，提高数据传输的效率。相应的，浏览器只需要对指定流程节点进行渲染就能生成目标流程图，而无需渲染全部流程节点，能够提高目标流程图的渲染速度，既能保证目标流程图的可操作性，又能快速展示目标流程图。

图11是根据一示例性实施例示出的一种流程图的生成装置的框图，如图11所示，该装置400应用于浏览器，包括：

发送模块401，用于将在显示界面上监控到的操作指令发送至服务器。

获取模块402，用于获取服务器发送的指定流程节点的属性信息，指定流程节点的属性信息为服务器根据操作指令，从目标流程中确定的指定流程节点的属性信息，目标流程中包括多个流程节点。

生成模块403，用于根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。

图12是根据一示例性实施例示出的另一种流程图的生成装置的框图，如图12所示，该装置400还包括：

处理模块404，用于在将在显示界面上监控到的操作指令发送至服务器之前，接收服务器发送的初始图像，并在显示界面上显示初始图像，初始图像为服务器根据显示界面的显示尺寸和当前流程节点，从目标流程中确定的初始流程节点的属性信息，并根据初始流程节点的属性信息，生成用于展示初始流程图的初始图像，初始流程图为服务器根据初始流程节点的属性信息对初始流程节点进行渲染得到的流程图。

处理模块404，还用于接收服务器发送的初始流程节点的属性信息，并存储初始流程节点的属性信息。

可选地，发送模块401可以用于：

将在初始图像上监控到的操作指令发送至服务器。

生成模块403可以用于：

隐藏初始图像。

根据已存储的初始流程节点的属性信息对初始流程节点进行渲染，根据指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

综上所述，本公开中浏览器会在显示界面上监控是否存在操作指令，在监控到操作指令后，将操作指令发送至服务器，使得服务器根据接收到的操作指令，从包括了多个流程节点的目标流程中确定指定流程节点，和指定流程节点的属性信息，再将指定流程节点的属性信息发送至浏览器。浏览器根据接收到的指定流程节点的属性信息对指定流程节点进行渲染，以在显示界面上生成目标流程图。本公开中服务器只需确定浏览器监控到的操作指令对应的指定流程节点，并将指定流程节点的属性信息发送至浏览器，无需将全部流程节点的属性信息发送至浏览器，能够减少服务器与浏览器之间数据传输所占用的带宽，提高数据传输的效率。相应的，浏览器只需要对指定流程节点进行渲染就能生成目标流程图，而无需渲染全部流程节点，能够提高目标流程图的渲染速度，既能保证目标流程图的可操作性，又能快速展示目标流程图。

图13是根据一示例性实施例示出的一种电子设备500的框图。如图13所示，该电子设备500可以包括：处理器501，存储器502。该电子设备500还可以包括多媒体组件503，输入/输出(I/O)接口504，以及通信组件505中的一者或多者。

其中，处理器501用于控制该电子设备500的整体操作，以完成上述的应用于浏览器的流程图的生成方法中的全部或部分步骤。存储器502用于存储各种类型的数据以支持在该电子设备500的操作，这些数据例如可以包括用于在该电子设备500上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器502可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-OnlyMemory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件503可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器502或通过通信组件505发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口504为处理器501和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件505用于该电子设备500与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(NearField Communication，简称NFC)，2G、3G、4G、NB-IOT、eMTC、或其他5G等等，或它们中的一种或几种的组合，在此不做限定。因此相应的该通信组件505可以包括：Wi-Fi模块，蓝牙模块，NFC模块等等。

在一示例性实施例中，电子设备500可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的应用于浏览器的流程图的生成方法。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的应用于浏览器的流程图的生成方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器502，上述程序指令可由电子设备500的处理器501执行以完成上述的应用于浏览器的流程图的生成方法。

图14是根据一示例性实施例示出的一种电子设备600的框图。例如，电子设备600可以被提供为一服务器。参照图14，电子设备600包括处理器622，其数量可以为一个或多个，以及存储器632，用于存储可由处理器622执行的计算机程序。存储器632中存储的计算机程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理器622可以被配置为执行该计算机程序，以执行上述的应用于服务器的流程图的生成方法。

另外，电子设备600还可以包括电源组件626和通信组件650，该电源组件626可以被配置为执行电子设备600的电源管理，该通信组件650可以被配置为实现电子设备600的通信，例如，有线或无线通信。此外，该电子设备600还可以包括输入/输出(I/O)接口658。电子设备600可以操作基于存储在存储器632的操作系统，例如Windows ServerTM，Mac OSXTM，UnixTM，LinuxTM等等。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述应用于服务器的流程图的生成方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器632，上述程序指令可由电子设备600的处理器622执行以完成上述应用于服务器的流程图的生成方法。

在另一示例性实施例中，还提供一种计算机程序产品，该计算机程序产品包含能够由可编程的装置执行的计算机程序，该计算机程序具有当由该可编程的装置执行时用于执行上述应用于服务器的流程图的生成方法的代码部分。

以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，本领域技术人员在考虑说明书及实践本公开后，容易想到本公开的其它实施方案，均属于本公开的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。同时本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。本公开并不局限于上面已经描述出的精确结构，本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种流程图的生成方法，其特征在于，应用于服务器，所述方法包括：

接收浏览器发送的操作指令，所述操作指令为所述浏览器在显示界面上监控到的指令；

根据所述操作指令，从目标流程中确定指定流程节点，和所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

将所述指定流程节点的属性信息发送至所述浏览器，以使所述浏览器根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

2.根据权利要求1所述的方法，其特征在于，所述根据所述操作指令，从目标流程中确定指定流程节点，和所述指定流程节点的属性信息，包括：

若所述操作指令为按照预设方向滑动所述显示界面的指令，根据所述操作指令包括的滑动方向和滑动速度，确定所述浏览器的显示范围；根据所述显示范围确定所述指定流程节点，和所述指定流程节点的属性信息；

若所述操作指令为针对所述显示界面上显示的所述指定流程节点上的指令，根据所述操作指令包括的操作内容，更新所述指定流程节点的属性信息。

3.根据权利要求1所述的方法，其特征在于，在所述接收浏览器发送的操作指令之前，所述方法还包括：

根据所述显示界面的显示尺寸和当前流程节点，从所述目标流程中确定初始流程节点，和所述初始流程节点的属性信息；

根据所述初始流程节点的属性信息，生成用于展示初始流程图的初始图像，所述初始流程图为根据所述初始流程节点的属性信息对所述初始流程节点进行渲染得到的流程图；

将所述初始图像发送至所述浏览器，以使所述浏览器在所述显示界面上显示所述初始图像，若在所述初始图像上监控到所述操作指令，将所述操作指令发送至所述服务器。

4.一种流程图的生成方法，其特征在于，应用于浏览器，所述方法包括：

将在显示界面上监控到的操作指令发送至服务器；

获取所述服务器发送的指定流程节点的属性信息，所述指定流程节点的属性信息为所述服务器根据所述操作指令，从目标流程中确定的所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

5.根据权利要求4所述的方法，其特征在于，在所述将在显示界面上监控到的操作指令发送至服务器之前，所述方法还包括：

接收所述服务器发送的初始图像，并在所述显示界面上显示所述初始图像，所述初始图像为所述服务器根据所述显示界面的显示尺寸和当前流程节点，从所述目标流程中确定的初始流程节点的属性信息，并根据所述初始流程节点的属性信息，生成用于展示初始流程图的所述初始图像，所述初始流程图为所述服务器根据所述初始流程节点的属性信息对所述初始流程节点进行渲染得到的流程图；

接收所述服务器发送的所述初始流程节点的属性信息，并存储所述初始流程节点的属性信息。

6.根据权利要求5所述的方法，其特征在于，所述将在显示界面上监控到的操作指令发送至服务器，包括：

将在所述初始图像上监控到的所述操作指令发送至所述服务器；

所述根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，包括：

隐藏所述初始图像；

根据已存储的所述初始流程节点的属性信息对所述初始流程节点进行渲染，根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成所述目标流程图。

7.一种流程图的生成装置，其特征在于，应用于服务器，所述装置包括：

接收模块，用于接收浏览器发送的操作指令，所述操作指令为所述浏览器在显示界面上监控到的指令；

确定模块，用于根据所述操作指令，从目标流程中确定指定流程节点，和所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

发送模块，用于将所述指定流程节点的属性信息发送至所述浏览器，以使所述浏览器根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

8.一种流程图的生成装置，其特征在于，应用于浏览器，所述装置包括：

发送模块，用于将在显示界面上监控到的操作指令发送至服务器；

获取模块，用于获取所述服务器发送的指定流程节点的属性信息，所述指定流程节点的属性信息为所述服务器根据所述操作指令，从目标流程中确定的所述指定流程节点的属性信息，所述目标流程中包括多个流程节点；

生成模块，用于根据所述指定流程节点的属性信息对所述指定流程节点进行渲染，以在所述显示界面上生成目标流程图。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-3或4-6中任一项所述方法的步骤。

10.一种电子设备，其特征在于，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-3或4-6中任一项所述方法的步骤。

Images