CN116910842A - 一种工业动态交互图构建方法 - Google Patents

Abstract

一种工业动态交互图构建方法，包括以下步骤：步骤1：进行图元的注册和存储：开发人员预先开发Path2D图元、Canvas Context2D图元、常用图表图元和可交互表单图元；用户定制字体图标和SVG图形的图元，上传自定义图元并自动注册保存至数据库；步骤2：进行图元的编辑：用户通过拖拉拽任意图元进行布局，修改图元的各项属性，绑定交互事件并绑定动态数据；步骤3：进行工业图管理：用户添加多个交互图，并对其版本进行管理，其中每个版本的交互图在用户进行修改布局和属性后都保存在数据库中，以便用户下次进行修改和预览；步骤4：进行场景的应用：使用系统图元构建流程图，并使用自定义图元构建光伏发电系统；通过上传光伏设备自定义图元，进一步使用自定义图元编辑光伏发电系统。

Description

一种工业动态交互图构建方法

技术领域

本发明涉及工业互联网平台数据监控技术领域，具体涉及一种工业动态交互图构建方法。

背景技术

传统工业数据监控系统中，很大部分都是采用表格和图表的展示方式，业务逻辑和页面渲染逻辑交杂在一起，扩展性较低且数据监控功能不够直观。

随着web技术近几年的迅速发展，各种javascript框架趋于稳定，html5、css3以及WebGL等相关标准也在不断完善。在原有的数据监控系统中，只能支持表格和图表的网页也能转为各种图形动态交互网页，画面表现力较强。

目前的各类工业数据监控系统，都是在UI层面解决一些基础问题，由数据转换图片，堆砌成网页，在不同的业务场景下需要大量的定制化开发，用户只能提出需求，不能通过系统自发的解决需求，大大降低了工作效率。

发明内容

本发明的目的是为了解决工业数据监控系统中不能很好的在线编辑组态图生成可交互网页、用户不能很好的自定义上传图元问题、以及图元和工业数据不能很好的动态交互的技术问题，而提供的工业动态交互图构建方法。

为了解决上述技术问题，本发明采用的技术方案为：

一种工业动态交互图构建方法，包括以下步骤：

步骤1：进行图元的注册和存储：开发人员预先开发Path2D图元、CanvasContext2D 图元、常用图表图元和可交互表单图元；用户定制字体图标和SVG图形的图元，上传自定义图元并自动注册保存至数据库；

步骤2：进行图元的编辑：用户通过拖拉拽任意图元进行布局，修改图元的各项属性，绑定交互事件并绑定动态数据；

步骤3：进行工业图管理：用户添加多个交互图，并对其版本进行管理，其中每个版本的交互图在用户进行修改布局和属性后都保存在数据库中，以便用户下次进行修改和预览；

步骤4：进行场景的应用：使用系统图元构建流程图，并使用自定义图元构建光伏发电系统；通过上传光伏设备自定义图元，进一步使用自定义图元编辑光伏发电系统。

在图元的注册和存储中，使用图元作为基本单位，其开发发布流程包括：

步骤1-1）需求阶段：根据用户对图元样式需求和功能需求进行图元开发准备；开发人员根据用户需求进行渲染逻辑、图形属性和数据格式的设计；如果用户只对图元有样式需求，则通过第三方设计软件生成合适的png、svg或gif图片，跳过开发人员开发阶段自己上传图片至图形库并使用图形；

步骤1-2）开发阶段：开发人员根据用户需求首先创建相应的项目目录和文件，根据用户的样式需求确定使用第三方库提供的系统图元还是由开发人员编写图形渲染逻辑代码，所述系统图元包括基础几何图形、活动图、流程图、echarts图表和表单表格中的一个或多个；根据用户的功能需求编写图形属性配置和图形数据配置，所述图形属性包括图形的大小、定位、颜色、文字和边框中的一个或多个，所述图形数据为图形动态绑定数据的字段集合；

步骤1-3）测试发布阶段：测试图形样式是否满足需求、功能是否完整；测试无明显bug后，将图形添加至图形库中使用。

在步骤4中，所述场景应用中的光伏发电系统构建方法包括以下步骤：

步骤4-1）绑定交互事件：通过图形事件编辑为图形绑定交互事件，所述交互事件包括单击、双击、鼠标移入、鼠标移除、选中图形、取消选中和图形属性值变化中的至少一个，通过触发交互事件实现打开链接、更改属性、执行动画和发送消息的事件行为；

步骤4-2）绑定动态数据：为工业图添加通信配置，所述通信配置包含通信数据源和通信时间间隔，所述通信数据源从结构化视图、时序化视图、实例化测点、逻辑测点以及指标中进行选择，并设置数据源的查询条件；同一个工业图可添加多个通信配置；当工业图中已有通信配置后，为工业图中的每一个图元绑定数据来源，并设置数据的聚合类型和格式化类型；当数据源发生变化时，图元自动更新对应的属性，使数据动态进行展示；

步骤4-3）预览发布：单独打开一个网页用于工业图的预览和发布，使工业图自动适应屏幕大小，达到最佳展示效果。

与现有技术相比，本发明具有如下技术效果：

1）本发明通过图元注册和存储模块以及图元编辑模块实现了：（1）工业图的高度扩展性，用户可上传自定义图元、通过拖拉拽布局满足不同业务需求。（2）工业图的动态交互性，用户可为工业图绑定工业数据源、为图元绑定动态数据，数据变化时，图元的样式文字等内容也会动态变化；

2）本发明中数据展示不是简单的图片堆叠，用户可以通过拖拉拽的方式布局展示不同类型数据，可以通过添加交互事件、图形动画等方式让数据动起来，让工业数据监控不那么死板；

3）本发明中用户可以上传自定义图元，开发人员只需开发部分定制图元，满足不同的业务场景，提升工作效率；

4）本发明中图元可与不同类型工业数据进行绑定，动态展示数据变化和趋势。

附图说明

下面结合附图和实施例对本发明作进一步说明：

图1为本发明中主要的框架图；

图2为本发明中SVG图形发布流程示意图；

图3为本发明中通过上传光伏设备自定义图元的示意图；

图4为本发明中使用自定义图元编辑光伏发电系统的示意图。

具体实施方式

本申请以图元为基本单位，通过拖拉拽组合成满足不同业务场景下的工业图UI,通过通信配置、图元数据绑定，达到动态交互的效果。其主要的框架如图1所示。

本发明提供的一种工业动态交互图构建方法，包括以下步骤：

1.图元注册和存储：系统内置开发人员预先开发的Path2D图元、CanvasContext2D 图元、常用图表图元、可交互表单图元；系统内置用户需要定制的字体图标、SVG图形等图元。系统允许用户上传自定义图元并自动注册保存至数据库。

图元作为本方案的基本单位，其开发发布流程如下：

需求阶段：根据用户对图元样式需求和功能需求进行图元开发准备。开发人员根据用户需求进行渲染逻辑、图形属性和数据格式的设计，用户如果只对图元有样式需求，可通过第三方设计软件生成合适的png、svg、或gif图片，跳过开发人员开发阶段，自己上传图片至图形库并使用图形。

开发阶段：开发人员根据用户需求首先创建相应的项目目录和文件。根据用户的样式需求，确定使用第三方库提供的系统图元还是由开发人员编写图形渲染逻辑代码，系统图元包括基础几何图形、活动图、流程图、echarts图表、表单表格。再根据用户的功能需求编写图形属性配置和图形数据配置。图形属性包括图形的大小、定位、颜色、文字、边框等内容，图形数据则是图形动态绑定数据的字段集合。

测试发布阶段：测试图形样式是否满足需求，功能是否完整。测试无明显bug后，图形才可添加至图形库中使用。其中，SVG图形发布流程如图2所示。

2.图元编辑：用户可以拖拉拽任意图元进行布局，可以修改图元的各项属性，绑定交互事件，绑定动态数据。

3.工业图管理：用户可以添加多个交互图，并对其版本进行管理。每个版本的交互图用户在修改布局、属性等内容后，都会保存在数据库，以便用户下次修改或者预览使用。

4.场景应用：

（1）使用系统图元构建流程图；

（2）使用自定义图元构建光伏发电系统；通过上传光伏设备自定义图元，如图3所示。进一步使用自定义图元编辑光伏发电系统，如图4所示。

具体的，光伏发电系统构建方法进一步包括：

绑定交互事件：通过图形事件编辑为图形绑定交互事件，交互事件包括单击、双击、鼠标移入、鼠标移除、选中图形、取消选中、图形属性值变化，通过触发交互事件可以实现打开链接、更改属性、执行动画、发送消息等事件行为。

绑定动态数据：首先为工业图添加通信配置，通信配置包含通信数据源和通信时间间隔，通信数据源可从结构化视图、时序化视图、实例化测点、逻辑测点、指标等工业数据中选择，并设置数据源的查询条件，同一个工业图可添加多个通信配置。当工业图中已有通信配置后，可为工业图中的每一个图元绑定数据来源、并设置数据的聚合类型和格式化类型，当数据源发生变化时，图元会自动更新对应的属性，使数据动态展示。

预览发布：工业图预览和发布会单独打开一个网页，使工业图自动适应屏幕大小，达到最佳展示效果。

Claims (3)

1.一种工业动态交互图构建方法，其特征在于，包括以下步骤：

步骤1：进行图元的注册和存储：开发人员预先开发Path2D图元、Canvas Context2D 图元、常用图表图元和可交互表单图元；用户定制字体图标和SVG图形的图元，上传自定义图元并自动注册保存至数据库；

步骤2：进行图元的编辑：用户通过拖拉拽任意图元进行布局，修改图元的各项属性，绑定交互事件并绑定动态数据；

步骤3：进行工业图管理：用户添加多个交互图，并对其版本进行管理，其中每个版本的交互图在用户进行修改布局和属性后都保存在数据库中，以便用户下次进行修改和预览；

步骤4：进行场景的应用：使用系统图元构建流程图，并使用自定义图元构建光伏发电系统；通过上传光伏设备自定义图元，进一步使用自定义图元编辑光伏发电系统。

2.如权利要求1所述的工业动态交互图构建方法，其特征在于，在图元的注册和存储中，使用图元作为基本单位，其开发发布流程包括：

步骤1-1）需求阶段：根据用户对图元样式需求和功能需求进行图元开发准备；开发人员根据用户需求进行渲染逻辑、图形属性和数据格式的设计；如果用户只对图元有样式需求，则通过第三方设计软件生成合适的png、svg或gif图片，跳过开发人员开发阶段自己上传图片至图形库并使用图形；

步骤1-2）开发阶段：开发人员根据用户需求首先创建相应的项目目录和文件，根据用户的样式需求确定使用第三方库提供的系统图元还是由开发人员编写图形渲染逻辑代码，所述系统图元包括基础几何图形、活动图、流程图、echarts图表和表单表格中的一个或多个；根据用户的功能需求编写图形属性配置和图形数据配置，所述图形属性包括图形的大小、定位、颜色、文字和边框中的一个或多个，所述图形数据为图形动态绑定数据的字段集合；

步骤1-3）测试发布阶段：测试图形样式是否满足需求、功能是否完整；测试无明显bug后，将图形添加至图形库中使用。

3.如权利要求1或2所述的工业动态交互图构建方法，其特征在于，步骤4中，所述构建光伏发电系统，具体过程为：

步骤4-1）绑定交互事件：通过图形事件编辑为图形绑定交互事件，所述交互事件包括单击、双击、鼠标移入、鼠标移除、选中图形、取消选中和图形属性值变化中的至少一个，通过触发交互事件实现打开链接、更改属性、执行动画和发送消息的事件行为；

步骤4-2）绑定动态数据：为工业图添加通信配置，所述通信配置包含通信数据源和通信时间间隔，所述通信数据源从结构化视图、时序化视图、实例化测点、逻辑测点以及指标中进行选择，并设置数据源的查询条件；同一个工业图可添加多个通信配置；当工业图中已有通信配置后，为工业图中的每一个图元绑定数据来源，并设置数据的聚合类型和格式化类型；当数据源发生变化时，图元自动更新对应的属性，使数据动态进行展示；

步骤4-3）预览发布：单独打开一个网页用于工业图的预览和发布，使工业图自动适应屏幕大小，达到最佳展示效果。