CN114675925B - 组态图像处理方法、装置、计算机设备、存储介质 - Google Patents

Abstract

本申请涉及一种组态图像处理方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括：运行组态软件的组态编辑组件，显示组态编辑页面，在所述组态编辑页面上显示编辑区和组态库，所述组态软件是通过浏览器标记语言和可缩放矢量图像技术编辑得到的，所述组态库包括通过可缩放矢量图像技术编辑得到的图元；响应于对所述组态编辑页面的组态创建指令，从所述组态库中获取目标组态；确定所述目标组态在所述编辑区中的状态参数，生成第一组态图像。采用本方法能够无需安装插件，直接在浏览器端进行组态编辑操作，使得安装有浏览器的终端设备均能实现本申请提供的组态图像处理方法，从而提高组态图像处理方法的兼容性。

Description

组态图像处理方法、装置、计算机设备、存储介质

技术领域

本申请涉及工业自动化领域，特别是涉及一种组态图像处理方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

随着工业自动化水平的迅速提高，计算机在工业领域的应用越来越广泛，出现了组态软件技术。组态软件是一种处于自动控制系统监控层一级的软件，用户可以通过组态软件实时监控设备的数据，判断设备是否处于正常运行状态。而组态软件与用户的人机交互过程主要在于组态图像的处理过程。

传统技术中，组态软件基于C/S架构（客户机和服务器结构）开发，采用C++语言（一种计算机语言）编程实现。当用户需要在浏览器中运行组态软件时，首先需要安装ActiveX控件（一种能够与浏览器进行交互的组件），通过ActiveX控件将组态软件嵌入IE（InternetExplorer）浏览器中运行。但是，不同浏览器对ActiveX控件的兼容性不同，从而容易导致浏览器对组态软件的兼容性较差。

发明内容

基于此，有必要针对上述技术问题，提供一种兼容性高的组态图像处理方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种组态图像处理方法。所述方法包括：

运行组态软件的组态编辑组件，显示组态编辑页面，在所述组态编辑页面上显示编辑区和组态库，所述组态软件是通过浏览器标记语言和可缩放矢量图像技术编辑得到的，所述组态库包括通过可缩放矢量图像技术编辑得到的图元；

响应于对所述组态编辑页面的组态创建指令，从所述组态库中获取目标组态；

确定所述目标组态在所述编辑区中的状态参数，生成第一组态图像。

在其中一个实施例中，所述方法还包括：

将所述第一组态图像转换成预设格式，得到第一组态文件，将所述第一组态文件发送至服务器，所述第一组态文件用于指示所述服务器将所述第一组态文件存储至预设位置，并生成与所述第一组态文件对应的第一图像标识。

在其中一个实施例中，所述方法还包括：

运行所述组态软件的组态运行组件，通过所述组态运行组件向服务器发送图像查询请求，所述图像查询请求携带第二图像标识；

接收所述服务器返回的与所述第二图像标识对应的第二组态文件；

通过所述组态运行组件对所述第二组态文件进行解析处理，显示所述第二组态文件对应的第二组态图像。

在其中一个实施例中，所述通过所述组态运行组件向服务器发送图像查询请求，包括：

通过运行所述组态运行组件显示组态运行页面；

在所述组态运行页面上显示组态列表，响应于对所述组态列表的组态选择指令，获取选择的所述第二图像标识；

向所述服务器发送携带所述第二图像标识的所述图像查询请求。

在其中一个实施例中，所述方法还包括：

实时接收设备的设备数据和设备标识，按照所述设备标识和组态的映射关系，将所述设备数据显示在所述第二组态图像中与所述设备标识对应的组态上，所述映射关系是预先通过所述组态编辑页面接收所述设备的设备标识，将所述设备标识与所述组态进行绑定得到的。

在其中一个实施例中，所述确定所述目标组态在所述编辑区中的状态参数，生成第一组态图像，包括：

获取所述目标组态的原始状态参数，所述原始状态参数包括原始位置信息和原始属性参数；

响应于对所述目标组态的编辑操作，获取目标属性参数；

根据所述原始属性参数和所述目标属性参数，生成变换矩阵，采用所述变换矩阵对所述原始位置信息进行处理，生成目标位置信息；

根据所述变换矩阵和所述目标位置信息，确定所述目标组态在所述编辑区中的所述状态参数，生成所述第一组态图像。

第二方面，本申请还提供了一种组态图像处理装置。所述装置包括：

编辑页面显示模块，用于运行组态软件的组态编辑组件，显示组态编辑页面，在所述组态编辑页面上显示编辑区和组态库，所述组态软件是通过浏览器标记语言和可缩放矢量图像技术编辑得到的，所述组态库包括通过可缩放矢量图像技术编辑得到的图元；

组态创建模块，用于响应于对所述组态编辑页面的组态创建指令，从所述组态库中获取目标组态；

组态图像生成模块，用于确定所述目标组态在所述编辑区中的状态参数，生成第一组态图像。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述第一方面任一项实施例所述的组态图像处理方法。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面任一项实施例所述的组态图像处理方法。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述第一方面任一项实施例所述的组态图像处理方法。

上述组态图像处理方法、装置、计算机设备、存储介质和计算机程序产品，通过浏览器标记语言和可缩放矢量图像技术编辑得到组态软件，运行组态软件的组态编辑组件，显示组态编辑页面，响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态，确定目标组态在编辑区中的状态参数，生成第一组态图像，能够无需安装插件，直接在浏览器端进行组态编辑操作，使得安装有浏览器的终端设备均能实现本申请提供的组态图像处理方法，从而提高组态图像处理方法的兼容性。此外，由于本申请提供的组态图像处理方法可以直接在浏览器端进行组态编辑操作，无需安装客户端软件，能够减轻服务器端的负荷，从而降低组态软件的开发和运维成本。

附图说明

图1为一个实施例中组态图像处理方法的应用环境图；

图2为一个实施例中组态图像处理方法的流程示意图；

图3为一个实施例中第二组态图像显示步骤的流程示意图；

图4为一个实施例中第一组态图像生成步骤的流程示意图；

图5为另一个实施例中组态图像处理方法的流程示意图；

图5a为一个实施例中组态编辑页面的结构示意图；

图5b为一个实施例中组态编辑页面的示意图；

图6为一个实施例中组态图像处理装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的组态图像处理方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上。终端102运行组态软件的组态编辑组件，显示组态编辑页面，在组态编辑页面上显示编辑区和组态库。组态软件是预先通过浏览器标记语言和可缩放矢量图像技术编辑得到的。组态库包括通过可缩放矢量图像技术编辑得到的图元，组态库中的数据可以预先存储在服务器104上。终端102响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态，确定目标组态在编辑区中的状态参数，生成第一组态图像。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能电视、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种组态图像处理方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：

步骤S202，运行组态软件的组态编辑组件，显示组态编辑页面，在组态编辑页面上显示编辑区和组态库。

其中，组态软件可以是通过基于HTML5标准（HyperText Markup Language 5，一种结合了可缩放矢量图像技术的浏览器标准）的浏览器标记语言和SVG（Scalable VectorGraphics，可缩放矢量图像）技术编辑得到组态软件。

组态编辑页面的编辑区可以用于展示组态，为用户提供可拖拽、可缩放的所见即所得的可视化的编辑区域。

组态库可以包括通过可缩放矢量图像技术编辑得到的图元。一个示例中，图元可以包括但不仅限于基本图像（如文本，线段，圆，图片，矩形，椭圆，多边形，折线，箭头类，规则多边形等）和基本控件（如按键指示灯类，图表类，流体和旋转体类）中的至少一种。一个示例中，根据基本图像的特性可以将图元分为多类，例如，线段类、矩形类、圆形类、椭圆类、折线和多边形类、文本类和组合图形类等七类。组态库中预先存储了与每类图元对应的公共属性（如显示状态，属性变换方法等）。另一个示例中，用户还可以根据业务需要通过二次开发继续扩充更复杂的业务图元控件。

一个实施例中，可以基于SVG技术开发设计组态编辑组件。通过SVG技术生成的矢量图像、点阵图像和文本对象具有可扩展性。而对矢量图像、点阵图像和文本对象进行组合叠加处理可以生成其他复杂图像，并且使得生成的复杂图像也具有可扩展性。因此，可以通过SVG技术形成可复用的复杂图元。此外，基于SVG技术开发设计的组态编辑组件支持DOM（Document Object Model，文档对象模型）接口模式，使得对SVG内部元素的操作方便，层次结构明显。

具体地，终端响应于组态图像处理请求，运行组态软件的组态编辑组件，通过组态编辑组件在浏览器中显示组态编辑页面。在组态编辑页面上显示编辑区和组态库。其中，组态图像处理请求可以是用户触发的，例如用户在浏览器中点击了相应的组态图像处理按键；也可以是自动触发的，例如浏览器在开始运行时，自动加载组态软件，触发组态图像处理请求。

步骤S204，响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态。

其中，组态可以根据组态库中的图元生成。

具体地，终端通过组态编辑页面的组态库接收用户触发的组态创建指令，响应于组态创建指令，从组态库中获取与组态创建指令对应的目标组态，将目标组态显示在组态编辑页面的编辑区中。其中，组态创建指令可以是用户在组态库中点击目标组态触发的，也可以是通过用户的语音或手势触发。

步骤S206，确定目标组态在编辑区中的状态参数，生成第一组态图像。

其中，状态参数可以用于表征组态在编辑区中的显示状态。状态参数可以但不仅限于包括组态在编辑区中的位置信息和属性参数（如显示状态，旋转角度，缩放大小和尺寸参数等）中的至少一种。

一个示例中，当目标组态为圆形时，目标组态的默认状态参数可以包括渐变效果、边框颜色、边框宽度、尺寸半径和圆心坐标（例如，以编辑区左上角为原点，建立纵轴向下为正方形，横轴向右为正方向的二维坐标系，以圆心到原点的横向距离作为圆心的横坐标，以圆心到原点的纵向距离作为圆心的纵坐标）等中的至少一项。

具体地，组态库中预先存储了目标组态对应的多个默认状态参数。终端通过组态编辑页面的编辑区接收用户对目标组态的编辑指令，响应于编辑指令，按照用户的编辑指令对默认状态参数进行修改，确定目标组态在编辑区中的状态参数，并根据状态参数将目标组态显示在编辑区中，生成第一组态图像。

上述组态图像处理方法中，通过浏览器标记语言和可缩放矢量图像技术编辑得到组态软件，运行组态软件的组态编辑组件，显示组态编辑页面，响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态，确定目标组态在编辑区中的状态参数，生成第一组态图像，能够无需安装插件，直接在浏览器端进行组态编辑操作，使得安装有浏览器的终端设备均能实现本申请提供的组态图像处理方法，从而提高组态图像处理方法的兼容性。此外，由于本申请提供的组态图像处理方法可以直接在浏览器端进行组态编辑操作，无需安装客户端软件，能够减轻服务器端的负荷，从而降低组态软件的开发和运维成本。

在一个实施例中，组态图像处理方法还包括：将第一组态图像转换为预设格式，得到第一组态文件，将第一组态文件发送至服务器，第一组态文件用于指示服务器将第一组态文件存储至预设位置，并生成与第一组态文件对应的第一图像标识。

其中，预设格式可以包括但不仅限于XML格式（可扩展标记语言格式）和JSON格式（一种轻量级的数据交换格式）中任一种。图像标识可以但不仅限于包括第一组态文件的名称和第一组态文件的存储地址中的任一种。

具体地，终端响应于用户对第一组态图像的保存指令，获取当前时刻组态编辑组件中存储的第一组态图像，对第一组态图像对应的结构化数据进行序列化处理，转换为预设格式，得到第一组态文件。组态编辑组件将第一组态文件发送至服务器，服务器接收第一组态文件。将第一组态文件存储至预设位置处，并生成与第一组态文件对应的第一图像标识。

本实施例中，通过将第一组态图像转换为预设格式，得到第一组态文件，将第一组态文件发送至服务器中存储，并生成与第一组态文件对应的第一图像标识，能够便于后续对组态图像的查询和显示。

在一个实施例中，如图3所示，组态图像处理方法还包括：

步骤S302，运行组态软件的组态运行组件，通过组态运行组件向服务器发送图像查询请求。

步骤S304，接收服务器返回的与第二图像标识对应的第二组态文件。

步骤S306，通过组态运行组件对第二组态文件进行解析处理，显示第二组态文件对应的第二组态图像。

其中，图像查询请求携带第二图像标识。图像标识用于唯一性的标识组态文件。

具体地，终端运行组态软件的组态运行组件，显示组态运行页面，通过组态运行页面响应于用户触发的图像查询请求，向服务器发送携带第二图像标识的图像查询请求。服务器根据第二图像标识确定对应的第二组态文件，并将第二组态文件发送至组态运行组件。组态运行组件对接收的第二组态文件进行解析处理，得到与第二组态文件对应的结构化数据。采用与第二组态文件对应的结构化数据对组态运行页面进行渲染，在组态运行页面上显示第二组态文件对应的第二组态图像。

一个示例中，组态运行组件对第二组态文件进行解析处理后，得到了与第二组态文件对应的编辑区尺寸，以及与第二组态文件中组态对应的图元类型以及状态参数。根据编辑区尺寸对组态运行页面进行渲染，根据组态对应的图元类型以及状态参数加载并渲染图元，得到第二组态图像。

本实施例中，通过组态运行组件向服务器发送图像查询请求，获取服务器中存储的组态文件，对组态文件进行渲染，显示出与组态文件对应的组态图像，能够无需安装插件，直接与服务器进行数据通信，减少了组态软件占用的内存，从而提高组态软件处理图像查询请求的效率。

在一个实施例中，步骤S302，运行组态软件的组态运行组件，通过组态运行组件向服务器发送图像查询请求，包括：通过运行组态运行组件显示组态运行页面；在组态运行页面上显示组态列表，响应于对组态列表的组态选择指令，获取选择的第二图像标识，向服务器发送携带第二图像标识的图像查询请求。

具体地，服务器中预先存储了多个组态文件以及与组态文件对应的图像标识。终端运行组态软件的组态运行组件，显示组态运行页面。获取服务器存储的多个与组态文件对应的图像标识，生成组态列表，并在组态运行页面上进行显示。通过组态运行页面响应于用户对组态列表的组态选择指令，获取选择的第二图像标识，向服务器发送携带第二图像标识的图像查询请求。

本实施例中，通过组态运行页面显示组态列表，响应于对组态列表的组态选择指令，向服务器发送携带第二图像标识的图像查询请求，能够给用户提供可视化的组态列表，便于用户选择所需的图像标识。

在一个实施例中，组态图像处理方法还包括：实时接收设备的设备数据和设备标识，按照设备标识和组态的映射关系，将设备数据显示在第二组态图像中与设备标识对应的组态上。

其中，映射关系是预先通过组态编辑页面接收设备的设备标识，将设备标识与组态进行绑定得到的。

具体地，终端通过组态运行组件显示第二组态图像，获取与第二组态图像对应的设备标识和组态的映射关系。将与第二组态图像对应的设备标识发送至外部监控系统的数据接口，通过数据接口实时接收设备发送的设备数据以及设备标识，并将设备数据以及设备标识发送至组态运行组件。按照设备标识和组态的映射关系确定与设备标识绑定的组态，将设备数据显示在第二组态图像中与设备标识对应的组态上。

一个示例中，组态编辑组件可以用于接收用户对组态进行的设备绑定操作。通过组态编辑页面响应于用户触发的组态选择操作，确定需要进行设备绑定的组态，显示待绑定设备列表。接收用户对待绑定设备列表的设备选择操作，获取用户选择的设备标识，将设备标识添加至组态的状态参数中，实现设备标识与组态的绑定。

一个示例中，在连续时间内，通过组态运行组件接收并存储多个携带相同设备标识的设备数据。当多个设备数据之间的差异度大于预设阈值时，更改与设备标识绑定的组态的状态参数。例如，将A组态与温度计绑定，并将A组态的原始显示颜色设置为绿色。当一小时内通过组态运行组件接收到的多个温度数据之间的差异度大于预设阈值时，将A组态的显示颜色更改为红色。

本实施例中，通过设备标识将设备与组态进行绑定，将设备数据显示在对应的组态上，能够便于用户实时获取设备数据，从而便于用户对设备的监控。

在一个实施例中，如图4所示，步骤S206，确定目标组态在编辑区中的状态参数，生成第一组态图像，包括：

步骤S402，获取目标组态的原始状态参数。

步骤S404，响应于对目标组态的编辑操作，获取目标属性参数。

步骤S406，根据原始属性参数和目标属性参数，生成变换矩阵，采用变换矩阵对原始位置信息进行处理，生成目标位置信息。

步骤S408，根据变换矩阵和目标位置信息，确定目标组态在编辑区中的状态参数，生成第一组态图像。

其中，原始状态参数可以但不仅限于包括原始位置信息和原始属性参数。原始属性参数可以但不仅限于包括组态的偏移、旋转，缩放和倾斜等属性中的至少一种。

具体地，组态库中预先存储了组态的多个原始状态参数。终端通过组态编辑页面获取用户选择的目标组态的原始状态参数。响应于用户在组态编辑页面上对目标组态的编辑操作，获取目标属性参数。对原始属性参数和目标属性参数进行运算处理，生成变换矩阵。采用变换矩阵对原始位置信息进行运算处理，生成目标位置信息。通过组态编辑组件根据变换矩阵和目标位置信息，确定目标组态在编辑区中的状态参数，生成第一组态图像。

一个示例中，当用户对目标组态的编辑操作为缩放操作时，获取目标组态的缩放倍率，将缩放倍率作为目标属性参数。对缩放倍率和目标组态的原始属性参数进行运算处理，生成变换矩阵。将目标组态对应的多个原始位置信息分别与变换矩阵进行运算处理，生成缩放处理后的目标位置信息。根据变换矩阵确定缩放处理后目标组态的属性参数。根据缩放处理后目标组态的属性参数和目标位置信息，将目标组态显示在组态编辑页面上，生成第一组态图像。

一个示例中，当用户触发的编辑操作为针对组态编辑页面中指定点的缩放操作时，获取指定点的中心位置信息，以及缩放倍率。根据缩放倍率和目标组态的原始状态参数确定缩放处理后目标组态的目标位置信息。对中心位置信息和目标位置信息进行运算处理，确定中心位置信息与缩放处理后目标组态对应的每个目标位置信息之间的距离。将距离小于预设距离阈值的目标组态显示在当前缩放处理后的组态编辑页面上。

一个示例中，组态编辑页面中的编辑区可以是一个嵌入HTML中的SVG容器，在编辑区中创建的目标组态均为SVG容器中的子元素，这些子元素通过<g>元素包裹封装成各自独立的组态。用户可以通过终端的外接输入设备如鼠标，话筒和摄像头等装置，触发对目标组态的编辑操作，在组态编辑页面中对编辑区进行缩放/平移，在编辑区中创建新的组态，选择目标组态，对目标组态进行移动、旋转或改变尺寸等。例如，当用户滚动鼠标中键时，触发对目标组态的缩放操作。

一个示例中，组态编辑组件中可以通过SVG中的变换属性transform表示目标组态的旋转、缩放、偏移或倾斜属性。终端可以通过获取编辑操作对应的目标组态的原始属性参数和原始位置信息，将原始属性参数作为目标组态的transform属性值，将原始位置信息作为参数P。响应于对目标组态的编辑操作，获取目标属性参数（如缩放倍率）和变换中心点的位置信息，将变换中心点的位置信息作为参数C（默认为编辑区原点的位置信息）。对transform属性值和目标属性参数进行运算处理，得到变换矩阵，将变换矩阵作为参数B。将transform属性值、参数B、参数P和参数C输入矩阵变换函数my_Transform进行运算处理，得到新的矩阵matrix函数，以实现对目标组态的旋转、缩放、偏移或倾斜等编辑操作。

本实施例中，通过响应于用户对目标组态的编辑操作，获取目标属性参数，采用目标属性参数对目标组态的原始状态参数进行运算处理，确定目标组态在编辑区中的状态参数，生成第一组态图像，能够便于用户按需对目标组态的状态参数进行修改，使得组态编辑组件的操作便捷。此外，本实施例中提供的组态编辑页面中每个组态的属性功能是相对独立的，当用户改变其中一个组态的状态参数时，不会对组态编辑页面中其他组态造成影响。

在一个实施例中，状态参数包括目标尺寸参数，步骤S206，确定目标组态在编辑区中的状态参数，生成第一组态图像，包括：获取目标组态的原始尺寸参数以及原始位置信息，响应于对目标组态的编辑操作，获取目标位置信息，根据目标位置信息以及原始位置信息确定位置偏移量，根据位置偏移量和原始尺寸参数，确定目标组态的目标尺寸参数，根据目标组态的目标尺寸参数，生成第一组态图像。

具体地，终端通过组态编辑组件获取目标组态的原始尺寸参数以及原始位置信息。对目标组态的原始位置信息和原始尺寸参数进行运算处理，确定目标组态对应的多个锚点的位置信息。对每个锚点的位置信息进行运算处理，确定目标组态对应的外接框的位置信息，生成与目标组态对应的外接框。当用户在组态编辑页面上选中目标组态时，显示目标组态对应的锚点和目标组态对应的外接框。通过组态编辑页面响应于用户对目标组态的锚点的编辑操作，获取编辑后锚点的目标位置信息。对锚点的原始位置信息和目标位置信息进行运算处理，确定锚点的位置偏移量。采用位置偏移量对原始尺寸参数进行运算处理，确定目标组态的目标尺寸参数。根据目标组态的目标尺寸参数，将目标组态显示在组态编辑页面上，生成第一组态图像。

一个示例中，当目标组态为圆形时，可以将圆心的坐标设为（cx,cy），将尺寸半径设为r。以获取该目标组态顶部锚点的位置信息为例对锚点的位置信息确定方法进行说明：由于顶部锚点的横坐标与圆心的横坐标相同，顶部锚点的纵坐标与圆心的纵坐标相差一个半径，则顶部锚点的坐标为（cx,cy+r）。

一个示例中，由于目标组态的锚点位于目标组态外接框上每条边的中点位置处，因此对目标组态的锚点的位置信息进行运算处理，能够确定目标组态外接框的位置信息。通过SVG中的path路径元素对目标组态外接框的形状进行定义，按照对应的定义和目标组态外接框的位置信息，显示目标组态的外接框。

一个示例中，终端通过组态编辑页面接收用户利用鼠标触发的对锚点的拖拽操作，响应于拖拽操作，获取当前鼠标选中的锚点索引index，以及鼠标拖拽后相对于拖拽前的位置在横轴上的偏移量deltaX和在纵坐标上的偏移量deltaY。将index、deltaX, deltaY输入SVG中的shape函数（一种用于读取矩阵的长度的函数），通过shape函数根据index判断当前拖动的是目标组态的哪个锚点，再根据偏移量计算得出新的尺寸参数，最后输出目标尺寸参数。

本实施例中，通过目标组态的原始位置信息，确定目标组态对应的锚点的位置信息，响应于用户对锚点的编辑操作，确定锚点的位置偏移量，根据位置偏移量确定目标组态的目标尺寸参数，生成第一组态图像，能够便于用户对单个目标组态的尺寸进行编辑，提高用户与组态软件之间的交互性。

在一个实施例中，如图5所示，提供了一种组态图像处理方法，包括：

步骤S502，运行组态软件的组态编辑组件，显示组态编辑页面，在组态编辑页面上显示编辑区和组态库，响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态，以及目标组态的原始状态参数。

具体地，终端运行组态软件的组态编辑组件，在浏览器中显示组态编辑页面，在组态编辑页面上显示编辑区和组态库。响应于用户对组态编辑页面的组态创建指令，从组态库中获取用户选择的目标组态，以及目标组态的原始状态参数。一个示例中，如图5a所示，组态编辑页面可以包括组态库，菜单栏，编辑区和状态参数编辑区。另一个示例中，如图5b所示，组态编辑页面中的组态库可以包括基本图像选择区和基本控件选择区。基本图像选择区可以但不仅限于为用户提供文本、线段、圆、矩形、图片、椭圆、多边形、折线、规则多边形和箭头等基本图像。基本控件选择区可以但不仅限于为用户提供按键指示灯，图表，流体和旋转体等基本控件。当目标组态处于选中状态时，编辑区可以在目标组态的中心位置处添加十字标记，并将目标组态对应的锚点和外接框进行显示。菜单栏可以用于导入组态文件，对目标组态的图层进行修改（如将目标组态的图层置于底层/顶层），对目标组态与编辑区的位置关系进行修改（如将目标组态与编辑区进行上对齐、下对齐、左对齐和右对齐等）。状态参数编辑区可以用于显示目标组态的状态参数，并且可以接收用户输入的新的状态参数，采用新的状态参数确定目标组态在编辑区中的显示状态。

步骤S504，响应于对目标组态的编辑操作，获取目标属性参数，根据原始属性参数和目标属性参数，生成变换矩阵。

步骤S506，采用变换矩阵对原始位置信息进行处理，生成目标位置信息，根据变换矩阵和目标位置信息，确定目标组态在编辑区中的状态参数，生成第一组态图像。

具体地，终端通过组态编辑页面响应于用户对目标组态的编辑操作，获取目标属性参数。对原始属性参数和目标属性参数进行运算处理，生成变换矩阵。采用变换矩阵对原始位置信息进行运算处理，生成目标组态的目标位置信息。通过组态编辑组件根据变换矩阵和目标位置信息，确定目标组态在编辑区中的状态参数，生成第一组态图像。具体的第一组态图像生成的操作可以参照上述实施例中提供的方法实现，在此不做具体阐述。

步骤S508，将第一组态图像转换为预设格式，得到第一组态文件，将第一组态文件发送至服务器，指示服务器将第一组态文件存储至预设位置处，并生成与第一组态文件对应的第一图像标识。

具体地，终端通过组态编辑组件将第一组态图像转换为JSON格式，得到第一组态文件，将第一组态文件发送至服务器。服务器预先创建组态目录，接收组态编辑组件发送的第一组态文件，以字符串形式将第一组态文件存储至组态目标中对应的数据文件中，并生成与第一组态文件对应的第一图像标识。

步骤S510，运行组态软件的组态运行组件，通过组态运行组件显示组态运行页面，在组态运行页面上显示组态列表，响应于对组态列表的组态选择指令，获取选择的第二图像标识。

步骤S512，向服务器发送携带第二图像标识的图像查询请求，接收服务器返回的与第二图像标识对应的第二组态文件，通过组态运行组件对第二组态文件进行解析处理，显示第二组态文件对应的第二组态图像。

步骤S514，实时接收设备的设备数据和设备标识，按照设备标识和组态的映射关系，将设备数据显示在第二组态图像中与设备标识对应的组态上。

具体地，终端预先通过组态编辑页面接收用户对组态的设备绑定操作，建立组态与设备标识之间的映射关系。运行组态软件的组态运行组件，显示组态运行页面，响应于用户对组态运行页面中组态列表的组态选择指令，获取选择的第二图像标识。向服务器发送携带第二图像标识的图像查询请求，接收服务器返回的与第二图像标识对应的第二组态文件以及第二组态文件对应的映射关系。通过组态运行组件对第二组态文件进行解析处理，显示第二组态文件对应的第二组态图像。实时接收设备的设备数据和设备标识，按照设备标识和组态的映射关系，将设备数据显示在第二组态图像中与设备标识对应的组态上。

本实施例中，通过浏览器标记语言和可缩放矢量图像技术编辑得到组态软件，运行组态软件的组态编辑组件，显示组态编辑页面，响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态，确定目标组态在编辑区中的状态参数，生成第一组态图像，能够无需安装插件，直接在浏览器端进行组态编辑操作，使得安装有浏览器的终端设备均能实现本申请提供的组态图像处理方法，从而提高组态图像处理方法的兼容性。此外，由于本申请提供的组态图像处理方法可以直接在浏览器端进行组态编辑操作，无需安装客户端软件，能够减轻服务器端的负荷，从而降低组态软件的开发和运维成本。

在一个实施例中，组态软件可以包括基于HTML5和SVG技术编辑得的组态编辑组件、后台服务组件和组态运行组件。终端可以通过运行组态编辑组件显示组态编辑页面，通过组态编辑页面响应于用户对目标组态的拖拽操作，搭建第一组态图像，在用户对的第一组态图像发出保存指令后，通过组态编辑组件将第一组态图像转换为序列化、结构化的JSON格式的第一组态文件，将JSON格式的第一组态文件发送至后台服务组件。通过后台服务组件将接收到的JSON格式的第一组态文件存储至服务器磁盘中，并生成与第一组态文件对应的第一图像标识。通过运行组态运行组件显示组态运行页面，在组态运行页面上显示组态列表，响应于对组态列表的组态选择指令，获取选择的第二图像标识，向后台服务组件发送携带第二图像标识的图像查询请求。通过组态运行组件采用HTML5标准的浏览器标记语言和SVG技术对后台服务组件返回的JSON格式的第二组态文件进行解析，显示第二组态文件对应的第二组态图像。

一个示例中，组态编辑页面可以采用Vue.js（一套用于构建用户界面的渐进式框架）和开源用户界面组件库ElementUI来编辑得到。由于组态编辑页面采用Vue.js框架，通过数据驱动用户界面响应，从而能够避免频繁操作DOM元素带来的性能问题和代码的可维护性问题。

本实施例中，通过采用基于HTML5和SVG技术构建的组件化的组态软件对组态图像进行处理，每个组件可以独立运行，能够使得本实施例中提供的组态软件实现在多个操作系统平台之间的跨平台运行，从而提高组态图像处理方法的兼容性。此外，由于本实施例中提供的组态图像处理方法，无需安装插件，因此能够避免插件对组态软件的安全性造成的影响，从而提高组态图像处理方法的安全性。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其他的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例，还提供了一种用于实现上述所涉及的组态图像处理方法的组态图像处理装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个组态图像处理装置实施例中的具体限定可以参见上文中对于组态图像处理方法的限定，在此不再赘述。

在一个实施例中，如图6所示，提供了一种组态图像处理装置600，包括：编辑页面显示模块602、组态创建模块604和组态图像生成模块606，其中：

编辑页面显示模块602，用于运行组态软件的组态编辑组件，显示组态编辑页面，在组态编辑页面上显示编辑区和组态库，组态软件是通过浏览器标记语言和可缩放矢量图像技术编辑得到的，组态库包括通过可缩放矢量图像技术编辑得到的图元。

组态创建模块604，用于响应于对组态编辑页面的组态创建指令，从组态库中获取目标组态。

组态图像生成模块606，用于确定目标组态在编辑区中的状态参数，生成第一组态图像。

在一个实施例中，组态图像处理装置600还包括：组态文件生成模块，用于将第一组态图像转换为预设格式，得到第一组态文件，将第一组态文件发送至服务器，第一组态文件用于指示服务器将第一组态文件存储至预设位置，并生成与第一组态文件对应的第一图像标识。

在一个实施例中，组态图像处理装置600还包括：图像查询模块，用于运行组态软件的组态运行组件，通过组态运行组件向服务器发送图像查询请求，图像查询请求携带第二图像标识，接收服务器返回的与第二图像标识对应的第二组态文件；文件解析模块，用于通过组态运行组件对第二组态文件进行解析处理，显示第二组态文件对应的第二组态图像。

在一个实施例中，图像查询模块包括：运行页面显示单元，用于通过运行组态运行组件显示组态运行页面；组态选择单元，用于在组态运行页面上显示组态列表，响应于对组态列表的组态选择指令，获取选择的第二图像标识；查询请求发送单元，用于向服务器发送携带第二图像标识的图像查询请求。

在一个实施例中，组态图像处理装置600还包括：设备数据显示模块，用于实时接收设备的设备数据和设备标识，按照设备标识和组态的映射关系，将设备数据显示在第二组态图像中与设备标识对应的组态上，映射关系是预先通过组态编辑页面接收设备的设备标识，将设备标识与组态进行绑定得到的。

在一个实施例中，组态图像生成模块606包括：原始参数获取单元，用于获取目标组态的原始状态参数，原始状态参数包括原始位置信息和原始属性参数；目标位置信息生成单元，用于响应于对目标组态的编辑操作，获取目标属性参数，根据原始属性参数和目标属性参数，生成变换矩阵，采用变换矩阵对原始位置信息进行处理，生成目标位置信息；组态图像生成单元，用于根据变换矩阵和目标位置信息，确定目标组态在编辑区中的状态参数，生成第一组态图像。

上述组态图像处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC（近场通信）或其他技术实现。该计算机程序被处理器执行时以实现一种组态图像处理方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，还提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其他介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-OnlyMemory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（ReRAM）、磁变存储器（Magnetoresistive Random Access Memory，MRAM）、铁电存储器（Ferroelectric Random Access Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random Access Memory，SRAM）或动态随机存取存储器（Dynamic RandomAccess Memory，DRAM）等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以作出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种组态图像处理方法，其特征在于，所述方法包括：

运行组态软件的组态编辑组件，显示组态编辑页面，在所述组态编辑页面上显示编辑区和组态库，所述组态软件是通过浏览器标记语言和可缩放矢量图像技术编辑得到的，所述组态库包括通过可缩放矢量图像技术编辑得到的图元；

响应于对所述组态编辑页面的组态创建指令，从所述组态库中获取目标组态；

获取所述目标组态的原始状态参数，所述原始状态参数包括原始位置信息和原始属性参数；

响应于对所述目标组态的编辑操作，获取目标属性参数；

根据所述原始属性参数和所述目标属性参数，生成变换矩阵，采用所述变换矩阵对所述原始位置信息进行处理，生成目标位置信息；

根据所述变换矩阵和所述目标位置信息，确定所述目标组态在所述编辑区中的所述状态参数，生成第一组态图像。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

将所述第一组态图像转换成预设格式，得到第一组态文件，将所述第一组态文件发送至服务器，所述第一组态文件用于指示所述服务器将所述第一组态文件存储至预设位置，并生成与所述第一组态文件对应的第一图像标识。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

运行所述组态软件的组态运行组件，通过所述组态运行组件向服务器发送图像查询请求，所述图像查询请求携带第二图像标识；

接收所述服务器返回的与所述第二图像标识对应的第二组态文件；

通过所述组态运行组件对所述第二组态文件进行解析处理，显示所述第二组态文件对应的第二组态图像。

4.根据权利要求3所述的方法，其特征在于，所述通过所述组态运行组件向服务器发送图像查询请求，包括：

通过运行所述组态运行组件显示组态运行页面；

在所述组态运行页面上显示组态列表，响应于对所述组态列表的组态选择指令，获取选择的所述第二图像标识；

向所述服务器发送携带所述第二图像标识的所述图像查询请求。

5.根据权利要求3所述的方法，其特征在于，所述方法还包括：

实时接收设备的设备数据和设备标识，按照所述设备标识和组态的映射关系，将所述设备数据显示在所述第二组态图像中与所述设备标识对应的组态上，所述映射关系是预先通过所述组态编辑页面接收所述设备的设备标识，将所述设备标识与所述组态进行绑定得到的。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

在连续时间内，通过所述组态运行组件接收并存储多个携带相同设备标识的设备数据；

当多个所述设备数据之间的差异度大于预设阈值时，更改与所述设备标识绑定的所述组态的所述状态参数。

7.一种组态图像处理装置，其特征在于，所述装置包括：

编辑页面显示模块，用于运行组态软件的组态编辑组件，显示组态编辑页面，在所述组态编辑页面上显示编辑区和组态库，所述组态软件是通过浏览器标记语言和可缩放矢量图像技术编辑得到的，所述组态库包括通过可缩放矢量图像技术编辑得到的图元；

组态创建模块，用于响应于对所述组态编辑页面的组态创建指令，从所述组态库中获取目标组态；

组态图像生成模块，用于确定所述目标组态在所述编辑区中的状态参数，生成第一组态图像；

其中，所述组态图像生成模块，包括：

原始参数获取单元，用于获取所述目标组态的原始状态参数，所述原始状态参数包括原始位置信息和原始属性参数；

目标位置信息生成单元，用于响应于对所述目标组态的编辑操作，获取目标属性参数，根据所述原始属性参数和所述目标属性参数，生成变换矩阵，采用所述变换矩阵对所述原始位置信息进行处理，生成目标位置信息；

组态图像生成单元，用于根据所述变换矩阵和所述目标位置信息，确定所述目标组态在所述编辑区中的所述状态参数，生成第一组态图像。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

组态文件生成模块，用于将所述第一组态图像转换成预设格式，得到第一组态文件，将所述第一组态文件发送至服务器，所述第一组态文件用于指示所述服务器将所述第一组态文件存储至预设位置，并生成与所述第一组态文件对应的第一图像标识。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

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

Images