CN115964037A - 一种工程数据可视化低代码配置方法及系统 - Google Patents

Abstract

本发明提供了一种工程数据可视化低代码配置方法及系统，包括：根据网页显示屏的分辨率，创建与所述分辨率兼容的具有网格布局的空白页面，选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面，将每一目标组件对应的工程数据和组件参数输入到所述第一页面中，生成第二页面，运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用，将所述第三页面投入发布和使用，可以根据显示屏幕的分辨率建立适应的网页，同时实现了数据可视化页面可配置，减少编码工作量，避免打包发布，做到及时配置实时生效。

Description

一种工程数据可视化低代码配置方法及系统

技术领域

本发明属于工程管理领域，特别涉及一种工程数据可视化低代码配置方法及系统。

背景技术

在工程管理信息系统中，有大量数据需要以图表等不同的形式做数据可视化展现，以便管理者能够掌握工程建设概况，快速做成决策。由于客户需求差异较大，按现有的技术，一般是通过编码的方式，定制开发页面，响应客户的需求。也有一些通过配置方式，制作出数据可视化页面，响应客户需求的，不过大多无法与业务系统联动，一般做大屏展示使用，由于客户需求差异较大，通过编码方式响应客户需求的，存在设计开发工作量较大，实施成本高，建设周期较长，无法灵活快速响应的问题。现有的一些数据可视化配置方法，一般适用大屏展示，是固定分辨率，无法很好地适用不同分辨率的显示器。

因此，本发明提供了一种工程数据可视化低代码配置方法及系统。

发明内容

本发明提供一种工程数据可视化低代码配置方法及系统，用以根据显示屏幕的分辨率建立适应的网页，同时实现了数据可视化页面可配置，减少编码工作量，避免打包发布，做到及时配置实时生效。

本发明提供了一种工程数据可视化低代码配置方法，包括：

步骤1：根据网页显示屏的分辨率，创建与所述分辨率兼容的具有网格布局的空白页面；

步骤2：选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

步骤3：将每一目标组件对应的工程数据和组件参数输入到所述第一页面中，生成第二页面；

步骤4：运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用。

在一种可实施的方式中，

所述步骤1包括：

步骤11：获取网页显示屏的分辨率；

步骤12：解析所述分辨率，得到所述网页显示屏纵向上第一像素点数以及横向上的第二像素点数；

步骤13：根据所述第一像素点数和第二像素点数生成网格布局，建立空白页面。

在一种可实施的方式中，

所述步骤2包括：

步骤21：获取所述空白页面的渲染风格，根据所述渲染风格建立渲染模型；

步骤22：将所述目标组件输入到所述渲染模型中进行样式渲染得到渲染目标组件；

步骤23：将所述渲染目标组件输入到所述空白页面中，建立第一页面。

在一种可实施的方式中，

所述步骤3包括：

步骤31：获取工程设备生成的初始数据包，解析所述初始数据包得到若干个初始数据；

步骤32：获取每一所述初始数据对应的数据特征，根据所述数据特征为对应的初始数据建立数据标签，根据每一数据标签对应的数据清洗规则，为每一初始数据匹配待执行数据清洗规则；

步骤33：将同一初始数据对应的若干条待执行数据清洗规则进行排序，得到数据清洗流程，并将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到工程数据；

步骤34：将所述工程数据与所述目标组件进行匹配，根据每一目标组件匹配的工程数据的数量，为每一目标组件建立组件参数；

步骤35：将所述工程数据和组件参数输入到所述第一页面中，得到第二页面。

在一种可实施的方式中，

所述步骤4包括：

步骤41：运行所述第二页面，得到第二页面的预览效果；

步骤42：解析所述预览效果，得到所述第二页面的色彩分布信息，解析所述色彩分布信息，所述第二页面上具有相邻关系的页面色彩之间的对比度；

步骤43：分别将每一对比度投射到预设人眼模型中进行色彩混合测试，得到对应的测试结果，提取测试结果在预设结果范围外的页面色彩，记作待调页面色彩；

步骤44：获取所述待调页面色彩在所述第二页面上的色彩位置，对所述色彩位置进行页面渲染，直到所述待调页面色彩的对比度在预设对比度范围内为止，得到第三页面，并将所述第三页面投入发布和使用。

在一种可实施的方式中，

所述步骤33包括：

步骤331：获取同一初始数据对应的若干条待执行数据清洗规则，获取每一条待执行数据清洗规则对应的清洗数据段；

步骤332：根据每一清洗数据段在所述初始数据上的数据位置对所述清洗数据段进行顺序编号，根据所述顺序编号对所述待执行数据清洗规则进行排序，得到数据清洗流程；

步骤333：将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到若干个目标数据段；

步骤334：将根据所述顺序编号对所述目标数据段进行排序，并将排序后的目标数据段进行数据连接训练，得到工程数据。

本发明提供了一种工程数据可视化低代码配置系统，包括：

创建模块，用于根据网页显示屏的分辨率创建具有网格布局的空白页面；

处理模块，用于选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

数据模块，用于分别获取每一目标组件对应的工程数据，以及为每一目标组件配置相应的组件参数，得到第二页面；

执行模块，用于运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用。

在一种可实施的方式中，

所述数据模块包括：

获取单元，用于获取工程设备生成的初始数据包，解析所述初始数据包得到若干个初始数据；

匹配单元，用于获取每一所述初始数据对应的数据特征，根据所述数据特征为对应的初始数据建立数据标签，根据每一数据标签对应的数据清洗规则，为每一初始数据匹配待执行数据清洗规则；

清洗单元，用于将同一初始数据对应的若干条待执行数据清洗规则进行排序，得到数据清洗流程，并将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到工程数据；

执行单元，用于将所述工程数据与所述目标组件进行匹配，根据每一目标组件匹配的工程数据的数量，为每一目标组件建立组件参数；

将所述工程数据和组件参数输入到所述第一页面中，得到第二页面。

在一种可实施的方式中，

所述执行模块包括：

预览单元，用于运行所述第二页面，得到第二页面的预览效果；

解析单元，用于解析所述预览效果，得到所述第二页面的色彩分布信息，解析所述色彩分布信息，所述第二页面上具有相邻关系的页面色彩之间的对比度；

测试单元，用于分别将每一对比度投射到预设人眼模型中进行色彩混合测试，得到对应的测试结果，提取测试结果在预设结果范围外的页面色彩，记作待调页面色彩；

修正单元，用于获取所述待调页面色彩在所述第二页面上的色彩位置，对所述色彩位置进行页面渲染，直到所述待调页面色彩的对比度在预设对比度范围内为止，得到第三页面，并将所述第三页面投入发布和使用。

在一种可实施的方式中，

所述清洗单元包括：

分析子单元，用于获取同一初始数据对应的若干条待执行数据清洗规则，获取每一条待执行数据清洗规则对应的清洗数据段；

排序子单元，用于根据每一清洗数据段在所述初始数据上的数据位置对所述清洗数据段进行顺序编号，根据所述顺序编号对所述待执行数据清洗规则进行排序，得到数据清洗流程；

清洗子单元，用于将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到若干个目标数据段；

调整字单元，用于将根据所述顺序编号对所述目标数据段进行排序，并将排序后的目标数据段进行数据连接训练，得到工程数据。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例中一种工程数据可视化低代码配置方法的工作流程示意图；

图2为本发明实施例中一种工程数据可视化低代码配置方法实施例5的工作流程示意图；

图3为本发明实施例中一种工程数据可视化低代码配置系统的组成示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

实施例1

本实施例提供了一种工程数据可视化低代码配置方法及系统，如图1所示，包括：

步骤1：根据网页显示屏的分辨率，创建与所述分辨率兼容的具有网格布局的空白页面；

步骤2：选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

步骤3：将每一目标组件对应的工程数据和组件参数输入到所述第一页面中，生成第二页面；

步骤4：运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用。

该实例中，系统提供网格画布，默认为16x9的网格，用户自定义画布时，横向固定为16格不可更改，仅纵向可更改且只能选择3的倍数的网格；

该实例中，空白页面可以选择深色模式或浅色模式，在渲染时，页面及组件，根据所选模式加载不同样式；

该实例中，目标组件可以为静态文本、动态图片、本地视频、远程监控、BIM模型以及可编码的图表等；

该实例中，目标组件有深浅两种样式，在渲染时根据主题加载，且目标组件大小可自定义，但只能基于网格进行调整；

该实例中，第一页面是将目标组件输入到空白页面上后生成的；

该实例中，工程数据表示用来定义目标组件的数据，例如：静态文本支持富文本编辑，动态图片需要上传多个本地图片用于轮播，本地视频需要上传本地视频用于播放，远程监控需要选择可使用的视频监控信道，BIM模型需要选择需渲染的模型；

该实例中，组件参数表示用来调节目标组件的数据特征的参数，例如：一个直角坐标系的横轴最大值为10，纵轴的最大值为8，其中的10和8均为组件参数；

该实例中，目标组件基于开源技术，支持JS代码编辑样式，在渲染时加载为条形、柱状、折线、饼状、雷达、散点、分布等类型的图表，在配置时编写的JS代码，可实时生效，无需打包发布，实现灵活的定义组件样式，可编写JS代码实现点击事件及响应，从而实现一些交互；

该实例中，工程数据来源于数据中心平台，由数据中心平台获取不同数据源，按照业务规则对数据进行处理后输出供组件使用的工程数据；

该实例中，工程数据为json格式，以二维数组提供；

该实例中，在第二页面上配置组件时，可实时预览配置效果，调整组件样式或接口，配置页面实时渲染，实现所见即所得；

该实例中，发布第三页面是具有固定的访问地址，从而作为资源供业务系统使用，业务系统可将第三页面配置到任意菜单上；

该实例中，用户在访问第三页面时可以跳转在菜单对应的资源，由系统根据配置参数渲染页面，将获取到的数据以可视化图标形式展现；

该实例中，在不同分辨率的屏幕上，系统按以下算法自适应宽度和高度：屏幕分辨率为X:Y，则每个网格的宽度为X/16，高度为Y/9，鉴于绝大部分显示器的分辨率X一般为16的倍数，Y一般为9的倍数，所以X/16、Y/9为整数，如若存在不为标准分辨率的，则取模运算结果取整，由于组件大小是网格的整数倍，则组件宽度所占格数*X/16，组件高度为所占格数*Y/9。

上述技术方案的工作原理以及有益效果：为了实现数据化可视页面的配置，首选根据网页显示屏的分辨率建立空白页面，然后选取目标组件并将其拖拽到空白页面上，然后再将目标组件的工程数据和组件参数输入进去，得到第二页面并进行预览，根据预览结果再对目标组件进行渲染，最终可以得到第三页面，此时得到的第三页面就可以正式发布和使用，通过这种方式建立的页面不仅可以实现据数据可视化页面可配置，减少编码工作量，避免打包发布，做到及时配置实时生效，还可以根据显示屏幕的分辨率建立适应的网页，使第三页面适用于不同的显示屏，提高了页面的使用率。

实施例2

在实施例1的基础上，所述一种工程数据可视化低代码配置方法，所述步骤1包括：

步骤11：获取网页显示屏的分辨率；

步骤12：解析所述分辨率，得到所述网页显示屏纵向上第一像素点数以及横向上的第二像素点数；

步骤13：根据所述第一像素点数和第二像素点数生成网格布局，建立空白页面。

上述技术方案的工作原理以及有益效果：为了使空白页面与当前的网页显示屏兼容，根据网页显示屏的分辨率建立网格布局，然后根据这个网格布局建立空白页面，这样一来所建立的空白页面可以与网页显示屏兼容，实现正常播放。

实施例3

在实施例1的基础上，所述一种工程数据可视化低代码配置方法，所述步骤2包括：

步骤21：获取所述空白页面的渲染风格，根据所述渲染风格建立渲染模型；

步骤22：将所述目标组件输入到所述渲染模型中进行样式渲染得到渲染目标组件；

步骤23：将所述渲染目标组件输入到所述空白页面中，建立第一页面。

该实例中，渲染风格包括深色渲染和浅色渲染两种。

上述技术方案的工作原理以及有益效果：为了使第一页面的渲染风格与空白页面的一致，根据空白页面的渲染风格建立渲染模型，然后将目标组件输入进去进行渲染，最后将渲染后的目标组件输入到空白页面中从而可以生成第一页面，保证了第一页面和空白页面的一致性。

实施例4

在实施例1的基础上，所述一种工程数据可视化低代码配置方法，所述步骤3包括：

步骤31：获取工程设备生成的初始数据包，解析所述初始数据包得到若干个初始数据；

步骤32：获取每一所述初始数据对应的数据特征，根据所述数据特征为对应的初始数据建立数据标签，根据每一数据标签对应的数据清洗规则，为每一初始数据匹配待执行数据清洗规则；

步骤33：将同一初始数据对应的若干条待执行数据清洗规则进行排序，得到数据清洗流程，并将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到工程数据；

步骤34：将所述工程数据与所述目标组件进行匹配，根据每一目标组件匹配的工程数据的数量，为每一目标组件建立组件参数；

步骤35：将所述工程数据和组件参数输入到所述第一页面中，得到第二页面。

该实例中，初始数据包表示若干条需要输入到第一页面中的数据；

该实例中，数据特征包括该初始数据的种类、传输速度、可变性、真实性、复杂性；

该实例中，数据标签表示根据该初始数据的数据特征建立的，用于区分不同初始数据的标记；

该实例中，数据清洗规则表示对一类数据进行清洗的方法；

该实例中，待执行数据清洗规则表示在清洗该初始数据时需要用到的数据清洗规则；

该实例中，数据清洗流程表示将若干条待执行数据清洗规则进行排序后生成的具有连贯性的流程。

上述技术方案的工作原理以及有益效果：为了避免输入到页面中的数据中含有不相干的数据导致页面运行卡顿，首先解析初始数据包得到初始数据，然后根据每一初始数据的数据特征为其匹配一条待执行数据清洗规则，从而建立一个数据清洗流程，利用该数据清洗流程清洗初始数据，得到工程数据，然后根据工程数据与目标组件的匹配情况为每一目标组件建立一个组件参数，最后根据工程数据和组件参数可以得到第二页面，在此过程中通过数据清洗可以消除初始数据中的干扰数据，避免干扰数据拖延第二页面的运行。

实施例5

在实施例1的基础上，所述一种工程数据可视化低代码配置方法，如图2所示，所述步骤4包括：

步骤41：运行所述第二页面，得到第二页面的预览效果；

步骤42：解析所述预览效果，得到所述第二页面的色彩分布信息，解析所述色彩分布信息，所述第二页面上具有相邻关系的页面色彩之间的对比度；

步骤43：分别将每一对比度投射到预设人眼模型中进行色彩混合测试，得到对应的测试结果，提取测试结果在预设结果范围外的页面色彩，记作待调页面色彩；

步骤44：获取所述待调页面色彩在所述第二页面上的色彩位置，对所述色彩位置进行页面渲染，直到所述待调页面色彩的对比度在预设对比度范围内为止，得到第三页面，并将所述第三页面投入发布和使用。

该实例中，色彩分布信息表示不同色彩在第二页面上的分布情况；

该实例中，对比度表示两个色彩之间的色彩之间明暗之间的对比差；

该实例中，色彩混合测试表示测试多种色彩组合在人眼中的体现；

该实例中，待调页面色彩中含有两个或两个以上色彩；

该实例中，色彩对比度不在预设范围内时会产生两种现象：第一，色彩对比度太低，无法区分不同的色彩，例如在白色的页面上建立黄色的字体，第二色彩对比度太高，导致用户眼晕，例如在蓝色页面上建立红色字体。

上述技术方案的工作原理以及有益效果：为了使第三页面的效果达到最佳，首先运行第二页面得到其预览效果，然后根据第二页面的色彩分布信息得到第二页面上不同页面色彩之间的对比度，然后判断色彩分布是否合理，最后修正第二页面上的色彩，生成第三页面由此就可以发布和使用第三页面，这样一来不仅可以保证第三页面的美观，还可以给用户最好的视觉体验。

实施例6

在实施例4的基础上，所述一种工程数据可视化低代码配置方法，所述步骤33包括：

步骤331：获取同一初始数据对应的若干条待执行数据清洗规则，获取每一条待执行数据清洗规则对应的清洗数据段；

步骤332：根据每一清洗数据段在所述初始数据上的数据位置对所述清洗数据段进行顺序编号，根据所述顺序编号对所述待执行数据清洗规则进行排序，得到数据清洗流程；

步骤333：将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到若干个目标数据段；

步骤334：将根据所述顺序编号对所述目标数据段进行排序，并将排序后的目标数据段进行数据连接训练，得到工程数据。

该实例中，待执行数据清洗规则与清洗数据段一一对应；

该实例中，顺序编号是根据每一清洗数据段在初始数据上的位置所进行的顺序编号。

上述技术方案的工作原理以及有益效果：为了保障数据清洗过程的流畅性，根据每一待执行数据清洗规则所作用的清洗数据段对待执行数据清洗规则进行排序，建立一个数据清洗流程，然后将初始数据输入进去进行数据清洗，将得到的目标数据段按照原来的顺序进行排序，从而可以得到工程数据，这样一来不仅可以保障数据请辞过程的流畅性，还可以保障每一清洗数据段均被清洗，消除了干扰数据。

实施例7

本发明提供了一种工程数据可视化低代码配置系统，如图3所示，包括：

创建模块，用于根据网页显示屏的分辨率创建具有网格布局的空白页面；

处理模块，用于选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

数据模块，用于分别获取每一目标组件对应的工程数据，以及为每一目标组件配置相应的组件参数，得到第二页面；

执行模块，用于运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用。

该实例中，系统提供网格画布，默认为16x9的网格，用户自定义画布时，横向固定为16格不可更改，仅纵向可更改且只能选择3的倍数的网格；

该实例中，空白页面可以选择深色模式或浅色模式，在渲染时，页面及组件，根据所选模式加载不同样式；

该实例中，目标组件可以为静态文本、动态图片、本地视频、远程监控、BIM模型以及可编码的图表等；

该实例中，目标组件有深浅两种样式，在渲染时根据主题加载，且目标组件大小可自定义，但只能基于网格进行调整；

该实例中，第一页面是将目标组件输入到空白页面上后生成的；

该实例中，工程数据表示用来定义目标组件的数据，例如：静态文本支持富文本编辑，动态图片需要上传多个本地图片用于轮播，本地视频需要上传本地视频用于播放，远程监控需要选择可使用的视频监控信道，BIM模型需要选择需渲染的模型；

该实例中，组件参数表示用来调节目标组件的数据特征的参数，例如：一个直角坐标系的横轴最大值为10，纵轴的最大值为8，其中的10和8均为组件参数；

该实例中，目标组件基于开源技术，支持JS代码编辑样式，在渲染时加载为条形、柱状、折线、饼状、雷达、散点、分布等类型的图表，在配置时编写的JS代码，可实时生效，无需打包发布，实现灵活的定义组件样式，可编写JS代码实现点击事件及响应，从而实现一些交互；

该实例中，工程数据来源于数据中心平台，由数据中心平台获取不同数据源，按照业务规则对数据进行处理后输出供组件使用的工程数据；

该实例中，工程数据为json格式，以二维数组提供；

该实例中，在第二页面上配置组件时，可实时预览配置效果，调整组件样式或接口，配置页面实时渲染，实现所见即所得；

该实例中，发布第三页面是具有固定的访问地址，从而作为资源供业务系统使用，业务系统可将第三页面配置到任意菜单上；

该实例中，用户在访问第三页面时可以跳转在菜单对应的资源，由系统根据配置参数渲染页面，将获取到的数据以可视化图标形式展现；

该实例中，在不同分辨率的屏幕上，系统按以下算法自适应宽度和高度：屏幕分辨率为X:Y，则每个网格的宽度为X/16，高度为Y/9，鉴于绝大部分显示器的分辨率X一般为16的倍数，Y一般为9的倍数，所以X/16、Y/9为整数，如若存在不为标准分辨率的，则取模运算结果取整，由于组件大小是网格的整数倍，则组件宽度所占格数*X/16，组件高度为所占格数*Y/9。

上述技术方案的工作原理以及有益效果：为了实现数据化可视页面的配置，首选根据网页显示屏的分辨率建立空白页面，然后选取目标组件并将其拖拽到空白页面上，然后再将目标组件的工程数据和组件参数输入进去，得到第二页面并进行预览，根据预览结果再对目标组件进行渲染，最终可以得到第三页面，此时得到的第三页面就可以正式发布和使用，通过这种方式建立的页面不仅可以实现据数据可视化页面可配置，减少编码工作量，避免打包发布，做到及时配置实时生效，还可以根据显示屏幕的分辨率建立适应的网页，使第三页面适用于不同的显示屏，提高了页面的使用率。

实施例8

在实施例7的基础上，所述一种工程数据可视化低代码配置系统，所述数据模块包括：

获取单元，用于获取工程设备生成的初始数据包，解析所述初始数据包得到若干个初始数据；

匹配单元，用于获取每一所述初始数据对应的数据特征，根据所述数据特征为对应的初始数据建立数据标签，根据每一数据标签对应的数据清洗规则，为每一初始数据匹配待执行数据清洗规则；

清洗单元，用于将同一初始数据对应的若干条待执行数据清洗规则进行排序，得到数据清洗流程，并将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到工程数据；

执行单元，用于将所述工程数据与所述目标组件进行匹配，根据每一目标组件匹配的工程数据的数量，为每一目标组件建立组件参数；

将所述工程数据和组件参数输入到所述第一页面中，得到第二页面。

该实例中，初始数据包表示若干条需要输入到第一页面中的数据；

该实例中，数据特征包括该初始数据的种类、传输速度、可变性、真实性、复杂性；

该实例中，数据标签表示根据该初始数据的数据特征建立的，用于区分不同初始数据的标记；

该实例中，数据清洗规则表示对一类数据进行清洗的方法；

该实例中，待执行数据清洗规则表示在清洗该初始数据时需要用到的数据清洗规则；

该实例中，数据清洗流程表示将若干条待执行数据清洗规则进行排序后生成的具有连贯性的流程。

上述技术方案的工作原理以及有益效果：为了避免输入到页面中的数据中含有不相干的数据导致页面运行卡顿，首先解析初始数据包得到初始数据，然后根据每一初始数据的数据特征为其匹配一条待执行数据清洗规则，从而建立一个数据清洗流程，利用该数据清洗流程清洗初始数据，得到工程数据，然后根据工程数据与目标组件的匹配情况为每一目标组件建立一个组件参数，最后根据工程数据和组件参数可以得到第二页面，在此过程中通过数据清洗可以消除初始数据中的干扰数据，避免干扰数据拖延第二页面的运行。

实施例9

在实施例7的基础上，所述一种工程数据可视化低代码配置系统，所述执行模块包括：

预览单元，用于运行所述第二页面，得到第二页面的预览效果；

解析单元，用于解析所述预览效果，得到所述第二页面的色彩分布信息，解析所述色彩分布信息，所述第二页面上具有相邻关系的页面色彩之间的对比度；

测试单元，用于分别将每一对比度投射到预设人眼模型中进行色彩混合测试，得到对应的测试结果，提取测试结果在预设结果范围外的页面色彩，记作待调页面色彩；

修正单元，用于获取所述待调页面色彩在所述第二页面上的色彩位置，对所述色彩位置进行页面渲染，直到所述待调页面色彩的对比度在预设对比度范围内为止，得到第三页面，并将所述第三页面投入发布和使用。

该实例中，色彩分布信息表示不同色彩在第二页面上的分布情况；

该实例中，对比度表示两个色彩之间的色彩之间明暗之间的对比差；

该实例中，色彩混合测试表示测试多种色彩组合在人眼中的体现；

该实例中，待调页面色彩中含有两个或两个以上色彩；

该实例中，色彩对比度不在预设范围内时会产生两种现象：第一，色彩对比度太低，无法区分不同的色彩，例如在白色的页面上建立黄色的字体，第二色彩对比度太高，导致用户眼晕，例如在蓝色页面上建立红色字体。

上述技术方案的工作原理以及有益效果：为了使第三页面的效果达到最佳，首先运行第二页面得到其预览效果，然后根据第二页面的色彩分布信息得到第二页面上不同页面色彩之间的对比度，然后判断色彩分布是否合理，最后修正第二页面上的色彩，生成第三页面由此就可以发布和使用第三页面，这样一来不仅可以保证第三页面的美观，还可以给用户最好的视觉体验。

实施例10

在实施例8的基础上，所述一种工程数据可视化低代码配置系统，所述清洗单元包括：

分析子单元，用于获取同一初始数据对应的若干条待执行数据清洗规则，获取每一条待执行数据清洗规则对应的清洗数据段；

排序子单元，用于根据每一清洗数据段在所述初始数据上的数据位置对所述清洗数据段进行顺序编号，根据所述顺序编号对所述待执行数据清洗规则进行排序，得到数据清洗流程；

清洗子单元，用于将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到若干个目标数据段；

调整字单元，用于将根据所述顺序编号对所述目标数据段进行排序，并将排序后的目标数据段进行数据连接训练，得到工程数据

该实例中，待执行数据清洗规则与清洗数据段一一对应；

该实例中，顺序编号是根据每一清洗数据段在初始数据上的位置所进行的顺序编号。

上述技术方案的工作原理以及有益效果：为了保障数据清洗过程的流畅性，根据每一待执行数据清洗规则所作用的清洗数据段对待执行数据清洗规则进行排序，建立一个数据清洗流程，然后将初始数据输入进去进行数据清洗，将得到的目标数据段按照原来的顺序进行排序，从而可以得到工程数据，这样一来不仅可以保障数据请辞过程的流畅性，还可以保障每一清洗数据段均被清洗，消除了干扰数据。

实施例11

在实施例10的基础上，所述一种工程数据可视化低代码配置系统，清洗子单元，用于：

将所述初始数据输入到对应的数据清洗流程中，获取每一清洗数据段对应的目标数据段，建立对应列表；

根据公式(1)计算每一初始数据中包含的干扰数据的数据量；

其中，L表示初始数据中包含的干扰数据的数据量，n表示该初始数据中清洗数据段的条数，g_i表示该初始数据中第i个清洗数据段对应第一数据量，f_i表示与清洗数据段对应的目标清洗数据段的第二数据量，δ表示数据异常参数取值为[0.1，0.5]，r_i表示该初始数据中第i个清洗数据段中包含的空白数据对应的第三数据量；

根据公式(1)的计算结果，得到每一初始数据的干扰数据量，利用公式(2)获取每一目标数据段的目标数据特征；

其中，P表示目标数据段的目标数据特征，G表示初始数据段，τ表示初始数据段中的异常数据的数量；

根据公式(2)的计算结果得到每一目标数据段对应的目标数据段的目标数据特征，若所述目标数据特征与预设数据特征不一致，修正对应的目标数据段。

上述技术方案的工作原理以及有益效果：为了加强数据清洗的精确度，保障工程数据的完整性，首先分析每一初始数据中包含的干扰数据的数据量，然后计算每一目标数据段的目标数据特征，从而判断其特征是否与预设特征一致，并在必要时对目标数据段进行修正，统一工程数据的格式，保障第三页面的流畅性。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种工程数据可视化低代码配置方法，其特征在于，包括：

步骤1：根据网页显示屏的分辨率，创建与所述分辨率兼容的具有网格布局的空白页面；

步骤2：选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

步骤3：将每一目标组件对应的工程数据和组件参数输入到所述第一页面中，生成第二页面；

步骤4：运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用。

2.如权利要求1所述的一种工程数据可视化低代码配置方法，其特征在于，所述步骤1包括：

步骤11：获取网页显示屏的分辨率；

步骤12：解析所述分辨率，得到所述网页显示屏纵向上第一像素点数以及横向上的第二像素点数；

步骤13：根据所述第一像素点数和第二像素点数生成网格布局，建立空白页面。

3.如权利要求1所述的一种工程数据可视化低代码配置方法，其特征在于，所述步骤2包括：

步骤21：获取所述空白页面的渲染风格，根据所述渲染风格建立渲染模型；

步骤22：将所述目标组件输入到所述渲染模型中进行样式渲染得到渲染目标组件；

步骤23：将所述渲染目标组件输入到所述空白页面中，建立第一页面。

4.如权利要求1所述的一种工程数据可视化低代码配置方法，其特征在于，所述步骤3包括：

步骤31：获取工程设备生成的初始数据包，解析所述初始数据包得到若干个初始数据；

步骤32：获取每一所述初始数据对应的数据特征，根据所述数据特征为对应的初始数据建立数据标签，根据每一数据标签对应的数据清洗规则，为每一初始数据匹配待执行数据清洗规则；

步骤33：将同一初始数据对应的若干条待执行数据清洗规则进行排序，得到数据清洗流程，并将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到工程数据；

步骤34：将所述工程数据与所述目标组件进行匹配，根据每一目标组件匹配的工程数据的数量，为每一目标组件建立组件参数；

步骤35：将所述工程数据和组件参数输入到所述第一页面中，得到第二页面。

5.如权利要求1所述的一种工程数据可视化低代码配置方法，其特征在于，所述步骤4包括：

步骤41：运行所述第二页面，得到第二页面的预览效果；

步骤42：解析所述预览效果，得到所述第二页面的色彩分布信息，解析所述色彩分布信息，所述第二页面上具有相邻关系的页面色彩之间的对比度；

步骤43：分别将每一对比度投射到预设人眼模型中进行色彩混合测试，得到对应的测试结果，提取测试结果在预设结果范围外的页面色彩，记作待调页面色彩；

步骤44：获取所述待调页面色彩在所述第二页面上的色彩位置，对所述色彩位置进行页面渲染，直到所述待调页面色彩的对比度在预设对比度范围内为止，得到第三页面，并将所述第三页面投入发布和使用。

6.如权利要求4所述的一种工程数据可视化低代码配置方法，其特征在于，所述步骤33包括：

步骤331：获取同一初始数据对应的若干条待执行数据清洗规则，获取每一条待执行数据清洗规则对应的清洗数据段；

步骤332：根据每一清洗数据段在所述初始数据上的数据位置对所述清洗数据段进行顺序编号，根据所述顺序编号对所述待执行数据清洗规则进行排序，得到数据清洗流程；

步骤333：将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到若干个目标数据段；

步骤334：将根据所述顺序编号对所述目标数据段进行排序，并将排序后的目标数据段进行数据连接训练，得到工程数据。

7.一种工程数据可视化低代码配置系统，其特征在于，包括：

创建模块，用于选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

处理模块，用于选取目标组件，将所述目标组件进行样式配置并拖拽到所述空白页面上得到第一页面；

数据模块，用于将每一目标组件对应的工程数据和组件参数输入到所述第一页面中，生成第二页面；

执行模块，用于运行所述第二页面，得到预览效果，根据所述预览结果对每一目标组件进行页面渲染，得到第三页面，将所述第三页面投入发布和使用。

8.如权利要求7所述的一种工程数据可视化低代码配置系统，其特征在于，所述数据模块包括：

获取单元，用于获取工程设备生成的初始数据包，解析所述初始数据包得到若干个初始数据；

匹配单元，用于获取每一所述初始数据对应的数据特征，根据所述数据特征为对应的初始数据建立数据标签，根据每一数据标签对应的数据清洗规则，为每一初始数据匹配待执行数据清洗规则；

清洗单元，用于将同一初始数据对应的若干条待执行数据清洗规则进行排序，得到数据清洗流程，并将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到工程数据；

执行单元，用于将所述工程数据与所述目标组件进行匹配，根据每一目标组件匹配的工程数据的数量，为每一目标组件建立组件参数；

将所述工程数据和组件参数输入到所述第一页面中，得到第二页面。

9.如权利要求7所述的一种工程数据可视化低代码配置系统，其特征在于，所述执行模块包括：

预览单元，用于运行所述第二页面，得到第二页面的预览效果；

解析单元，用于解析所述预览效果，得到所述第二页面的色彩分布信息，解析所述色彩分布信息，所述第二页面上具有相邻关系的页面色彩之间的对比度；

测试单元，用于分别将每一对比度投射到预设人眼模型中进行色彩混合测试，得到对应的测试结果，提取测试结果在预设结果范围外的页面色彩，记作待调页面色彩；

修正单元，用于获取所述待调页面色彩在所述第二页面上的色彩位置，对所述色彩位置进行页面渲染，直到所述待调页面色彩的对比度在预设对比度范围内为止，得到第三页面，并将所述第三页面投入发布和使用。

10.如权利要求8所述的一种工程数据可视化低代码配置系统，其特征在于，所述清洗单元包括：

分析子单元，用于获取同一初始数据对应的若干条待执行数据清洗规则，获取每一条待执行数据清洗规则对应的清洗数据段；

排序子单元，用于根据每一清洗数据段在所述初始数据上的数据位置对所述清洗数据段进行顺序编号，根据所述顺序编号对所述待执行数据清洗规则进行排序，得到数据清洗流程；

清洗子单元，用于将所述初始数据输入到对应的数据清洗流程中进行数据清洗，得到若干个目标数据段；

调整字单元，用于将根据所述顺序编号对所述目标数据段进行排序，并将排序后的目标数据段进行数据连接训练，得到工程数据。

Images