CN114217782B - 交互页面自动生成方法、装置、设备和介质 - Google Patents

Abstract

本发明涉及互联网技术领域，公开了一种交互页面自动生成方法、装置、设备和介质。本发明通过获取监控系统上报的日志数据；对所述日志数据进行处理，得到不同类型的可序数据；根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码；基于所述页面代码，生成可视化的交互页面。实现了自动生成开发可视化的交互页面的代码，无需人为开发，降低了可视化的交互页面开发的难度和错误率，跳过可视化的交互页面开发过程中的重复性流程，大大节约了时间和人力成本。

Description

交互页面自动生成方法、装置、设备和介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种交互页面自动生成方法、装置、设备和介质。

背景技术

随着网络的快速发展，互联网技术日益更新，为人们的工作和生活带来了巨大的变化。其中，可视化的交互页面的生成是互联网技术非常重要的一个部分，生成符合用户需求的交互页面能够为用户带来优异的视觉与交互体验。

值得关注的是，传统软件开发中生成交互页面需要经过用户反馈，需求梳理，开发，测试，发布等多个流程，开发和维护交互页面的成本较高。

发明内容

本发明的主要目的在于提出一种交互页面自动生成方法、装置、设备和介质，旨在降低开发和维护可视化的交互页面的成本。

为实现上述目的，本发明提供一种交互页面自动生成方法，所述交互页面自动生成方法包括如下步骤：

获取监控系统上报的日志数据；

对所述日志数据进行处理，得到不同类型的可序数据；

根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码；

基于所述页面代码，生成可视化的交互页面。

优选地，在所述根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码的步骤之前还包括：

基于不同数据类型的组件元素和图形元素，利用组件和图形开发工具，生成对应的预设组件和预设图形；

对所述预设组件和预设图形进行初始化，获得与所述预设组件和预设图形对应的代码模板；

将所述预设组件以及所述预设组件对应的代码模板存入数据库；

将所述预设图形以及所述预设图形对应的代码模板存入数据库。

优选地，所述根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用数据库中的模板生成所述预设组件和预设图形对应的页面代码的步骤包括：

根据所述可序数据，判断用户需求；

若所述可序数据中无数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

根据所述预设组件和预设图形，匹配对应的代码模板，生成页面代码；

若所述可序数据中有数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

对所述预设组件和预设图形进行定制化开发，得到定制化组件和定制化图形，生成页面代码。

优选地，所述根据所述可序数据对应的预设组件和预设图形，对所述预设组件和预设图形进行定制化开发，得到定制化组件和定制化图形，生成页面代码的步骤包括：

基于所述可序数据对应的预设组件和预设图形的基本框架，对所述预设组件和预设图形进行定制化开发，生成定制化组件和定制化图形；

基于所述定制化组件和定制化图形，匹配到对应的代码模板，对所述代码模板进行参数调整，生成所述定制化组件和定制化图形的页面代码。

优选地，所述基于所述页面代码，生成可视化的交互页面的步骤包括：

基于所述页面代码，确定与所述页面代码对应的视图和元素；

使用栅格布局react-grid-layout插件对所述视图和元素进行布局和设计，生成用户自定义的可视化的交互页面。

优选地，所述获取监控系统上报的日志数据的步骤包括：

基于所述监控系统，从不同接入的应用中获取上报日志；

对所述上报日志进行集成处理，得到日志数据。

优选地，所述对所述日志数据进行处理，得到不同类型的可序数据的步骤包括：

对所述日志数据进行加工清洗，生成与日志数据对应的阶层数据；

将所述阶层数据进行整理划分，得到不同类型的可序数据，其中，所述可序数据的数据类型包括string、long、date、datetime、double和json中一种或多种。

此外，为实现上述目的，本发明还提供一种交互页面自动生成装置，所述交互页面自动生成装置包括：

获取模块，用于获取监控系统上报的日志数据；

处理模块，用于对所述日志数据进行处理，得到不同类型的可序数据；

选择模块，用于根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码；

确定模块，用于基于所述页面代码，生成可视化的交互页面。

优选地，获取模块还用于：

基于所述监控系统，从不同接入的应用中获取上报日志；

对所述上报日志进行集成处理，得到日志数据。

优选地，处理模块还用于：

对所述日志数据进行加工清洗，生成与日志数据对应的阶层数据；

将所述阶层数据进行整理划分，得到不同类型的可序数据，其中，所述可序数据的数据类型包括string、long、date、datetime、double和json中的一种或多种。

优选地，选择模块还用于：

根据所述可序数据，判断用户需求；

若所述可序数据中无数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

根据所述预设组件和预设图形，匹配对应的代码模板，生成页面代码；

若所述可序数据中有数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

对所述预设组件和预设图形进行定制化开发，得到定制化组件和定制化图形，生成页面代码，生成页面代码。

优选地，选择模块还用于：

基于所述可序数据对应的预设组件和预设图形的基本框架，对所述预设组件和预设图形进行定制化开发，生成定制化组件和定制化图形；

匹配到对应的代码模板，对所述代码模板进行参数调整，生成所述定制化组件和定制化图形的页面代码。

优选地，确定模块还用于：

基于所述页面代码，确定与所述页面代码对应的视图和元素；

使用栅格布局react-grid-layout插件对所述构建交互页面的视图和元素进行布局和设计，生成用户自定义的可视化的交互页面。

此外，为实现上述目的，本发明还提供一种交互页面自动生成设备，所述交互页面自动生成设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的交互页面自动生成程序，所述交互页面自动生成程序被所述处理器执行时实现如上所述的交互页面自动生成方法的步骤。

此外，为实现上述目的，本发明还提供一种介质，所述介质为计算机可读存储介质，所述计算机可读存储介质上存储有交互页面自动生成程序，所述交互页面自动生成程序被处理器执行时实现如上所述的交互页面自动生成方法的步骤。

本发明提出的交互页面自动生成方法、装置、设备及介质，获取监控系统上报的日志数据；对所述日志数据进行处理，得到不同类型的可序数据；根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和所述预设图形对应的页面代码；基于所述页面代码，生成可视化的交互页面。在可视化的交互页面开发过程中，直接应用上述预设组件和预设图形对应的页面代码，生成构建可视化的交互页面的视图和元素。自动生成构建可视化的交互页面上运用到的视图和元素对应的页面代码，无需人为开发，降低了可视化的交互页面开发的难度和错误率，跳过可视化的交互页面开发过程中的重复性流程，大大节约了时间和人力成本。

另外，该可序数据可判断用户的可视化的交互页面的开发需求，若用户有定制化开发需求，则直接对用上述可序数据匹配到的预设组件和预设图形进行定制化开发，定制化开发的方式包括调整类型、形状、大小、透明度和有效性等组件和图形的属性中的一种或多种，得到定制化的预设组件和预设图形，自动生成与上述定制化的预设组件和预设图形相对应的页面代码，该页面代码也可直接应用于可视化的交互页面开发，无需人为设计，出错率较低，易于维护，还可根据用户需求灵活调整，进一步地节约了沟通和开发成本。

附图说明

图1是本发明交互页面自动生成实施例方案涉及的硬件运行环境的设备结构示意图；

图2为本发明交互页面自动生成方法第一实施例的流程示意图；

图3为本发明交互页面自动生成方法第一实施例的具体流程示意图；

图4为本发明交互页面自动生成方法第二实施例的步骤流程示意图；

图5为本发明交互页面自动生成方法第二实施例的一子流程示意图；

图6为本发明交互页面自动生成方法第三实施例的流程示意图；

图7为本发明交互页面自动生成方法第三实施例中组件生成的流程示意图；

图8为本发明交互页面自动生成装置第一实施例的功能模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图。

本发明实施例设备可以是移动终端或服务器设备。

如图1所示，该设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏（Display）、输入单元比如键盘（Keyboard），可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口（如WI-FI接口）。存储器1005可以是高速RAM存储器，也可以是稳定的存储器（non-volatile memory），例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及交互页面自动生成程序。

其中，操作系统是管理和控制交互页面自动生成设备与软件资源的程序，支持网络通信模块、用户接口模块、交互页面自动生成程序以及其他程序或软件的运行；网络通信模块用于管理和控制网络接口1002；用户接口模块用于管理和控制用户接口1003。

在图1所示的交互页面自动生成设备中，所述交互页面自动生成设备通过处理器1001调用存储器1005中存储的交互页面自动生成程序，并执行下述交互页面自动生成方法各个实施例中的操作。

基于上述硬件结构，提出本发明交互页面自动生成方法实施例。

参照图2，图2为本发明交互页面自动生成方法第一实施例的流程示意图；

参照图3，图3为本发明交互页面自动生成方法第一实施例的具体流程示意图，所述方法包括：

步骤S10，获取监控系统上报的日志数据；

步骤S20，对所述日志数据进行处理，得到不同类型的可序数据；

步骤S30，根据所述可序数据，选择数据库中对应的预设组件和预设图形，自动生成所述预设组件和预设图形对应的构建交互页面的页面代码；

步骤S40，基于所述构建交互页面的页面代码，生成可视化的交互页面。

本实施例通过获取监控系统上报的日志数据，通过处理日志数据得到不同类型的可序数据，通过可序数据匹配数据库中符合可序数据不同类型的预设组件和预设图形，根据匹配到的预设组件和预设图形，自动生成构建交互页面的页面代码，在可视化的交互页面开发过程中使用上述页面代码，就会得到构建可视化的交互页面与预设组件和预设图形对应的视图和元素，生成可视化的交互页面。

以下将对各个步骤进行详细说明：

步骤S10，获取监控系统上报的日志数据；

其中，上述监控系统主要由前端音视频采集设备、音视频传输设备、后端存储、控制及显示设备这五大部分组成，其中，后端设备可进一步分为中心控制设备和分控制设备，前、后端设备有多种构成方式，处于前后端设备之间的传输系统可通过同轴电缆、双绞线、光纤、微波、无线等多种方式来实现。上述监控系统通过前端设备的监测、采集、提取等步骤，得到包含用户需求的日志数据

具体地，作为一种实施方式，基于所述监控系统，从不同接入的应用中获取上报日志，对所述上报日志进行集成处理，得到日志数据。例如，交互页面自动生成方法可以在web前端网络页面开发的过程中使用，通过获取web前端网络页面上设置的信息采集设备，监控并提取web前端网络页面上的数据，将SDK上的上报日志提交至后端设备，后端设备对上述上报日志进行集成处理，得到日志数据。

步骤S20，对所述日志数据进行处理，得到不同类型的可序数据。

在本实施例中，在获取到不同接入应用中的监控系统后端设备通过传输系统提交的日志数据后，后端设备会对日志数据进行处理，处理的步骤包括：对所述日志数据进行加工清洗，生成与日志数据对应的阶层数据；将所述阶层数据进行整理划分，得到不同类型的可序数据。

具体地，作为一种实施例，要对上述日志数据进行处理，则先设置一个对日志数据进行加工清洗的代码块，得到上述日志数据对应的阶层数据，该阶层数据包含了用户规则，该用户规则包含了用户在开发可视化的交互页面时的定制化开发需求，在获得阶层数据之后再设置一个对阶层数据进行分类处理的另一代码块，对阶层数据进行分类处理，得到有不同数据类型的可序数据，其中，上述可序数据的不同数据类型包括string、long、date、datetime、double和json六大类中的一种或多种。

最后，在将上述日志数据连接输入上述两个代码块之后，获取了包含用户规则、有不同数据类型的可序数据。

步骤S30，根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码；

在本实施例中，上述预设组件和预设图形可应用于所有涉及B/S架构的互联网产品。

B/S架构即浏览器和服务器架构模式，是随着Internet技术的兴起，对C/S架构的一种变化或者改进的架构。在这种架构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端(Server)实现，形成所谓三层3-tier结构。

B/S架构是WEB兴起后的一种网络架构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器（Browser），如Netscape Navigator或Internet Explorer，服务器安装Oracle、Sybase、Informix或SQL Server等数据库。浏览器通过Web Server同数据库进行数据交互。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本(TCO)。

具体地，作为一种实施例，在获取到加工处理过的可序数据后，根据该可序数据，在数据库中匹配相对应的预设组件和预设图形，根据该预设组件和预设图形，在数据库中匹配相对应的代码模板，进而生成相对应的页面代码，在可视化的交互页面开发过程中，直接应用上述预设组件和预设图形对应的页面代码，生成构建可视化的交互页面的视图和元素。

在上述生成构建可视化的交互页面的视图和元素中，视图是用于显示文档所有内容在整个页面的分布状况和整个文档在每一页上的位置，并可对其进行编辑操作，具有真正的“所见即所得”的显示效果；元素则是包含各种常用的界面元素，如：表格、树、联动下拉框等，可轻松构造出令人耳目一新的，具有RIA (Rich Internet Application) 特征的Web应用界面。

根据上述可序数据还可以判断用户创建可视化的交互页面的开发需求，基于用户开发需求，直接对用上述可序数据匹配到的预设组件和预设图形进行定制化开发，得到定制化的预设组件和预设图形，对预设组件和预设图形对应的代码模板进行参数调整，生成与上述定制化的预设组件和预设图形相对应的页面代码。

步骤S40，基于所述页面代码，生成可视化的交互页面。

其中，需要生成的可视化的交互页面包括可视化技术和交互页面，具体地，可视化技术使人能够在三维图形世界中直接对具有形体的信息进行操作，和计算机直接交流，这种技术已经把人和机器的力量以一种直觉而自然的方式加以统一，这种革命性的变化无疑将极大地提高人们的工作效率，可视化技术赋予人们一种仿真的、三维的并且具有实时交互的能力；另外，交互页面是人和计算机进行信息交换的通道，用户通过交互界面向计算机输入信息、进行操作，计算机则通过交互界面向用户提供信息，以供阅读、分析和判断。

前端的交互网页开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大，前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用，HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升，但开发交互页面的方法依然是通过前端网页制作的代码手段来实现。

需要进一步说明的是，在一具体实施例中，通过在可视化的交互页面开发过程中使用通过匹配到的代码模板生成的页面代码，基于所述页面代码，确定与所述页面代码对应的视图和元素；使用栅格布局react-grid-layout插件对所述视图和元素进行布局和设计，生成用户自定义的可视化的交互页面。通过得到数据库中与可序数据相对应的预设图形和预设组件，自动生成构建可视化的交互页面或定制化的可视化的交互页面的页面代码，在可视化的交互页面的开发过程中，使用该页面代码，得到构建可视化的交互页面的视图和元素。

在开发过程中，基于自动生成的预设组件和预设图形的对应页面代码，获得构建可视化的交互页面的视图和元素，通过栅格布局react-grid-layout插件对所述视图和元素进行用户自定义的拖拉拽操作，完成构建可视化的交互页面的布局操作，最后生成用户自定义的可视化的交互页面。

本实施例通过获取监控系统上报的日志数据，再通过对这些用户自定义的日志数据进行加工处理，得到具有不同类型，包含用户规则的可序数据，根据该可序数据，在数据库中匹配相对应的预设组件和预设图形，根据该预设组件和预设图形，自动生成构建可视化的交互页面上运用到的视图和元素对应的页面代码，无需人为开发，降低了可视化的交互页面开发的难度和错误率，跳过可视化的交互页面开发过程中的重复性流程，大大节约了时间和人力成本。

进一步地，基于本发明交互页面自动生成方法第一实施例，提出本发明交互页面自动生成方法第二实施例。

交互页面自动生成方法的第二实施例与交互页面自动生成方法的第一实施例的区别在于，本实施例是对步骤S30根据所述可序数据，选择数据库中对应的预设组件和预设图形，自动生成所述预设组件和预设图形对应的页面代码的细化，参照图4，该步骤具体包括：

步骤S31，根据所述可序数据，判断用户需求；

步骤S32，若所述可序数据中无数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

步骤S33，根据所述预设组件和预设图形，自动生成页面代码；

步骤S34，若所述可序数据中有数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

步骤S35，基于所述可序数据对应的预设组件和预设图形，对所述预设组件和预设图形进行定制化开发，自动生成页面代码。

在一实施例中，通过对可序数据进行判定，得到用户构建可视化的交互页面的定制化需求，根据用户构建可视化的交互页面不同的定制化需求，匹配处于数据库中对应的预设组件和预设图形，若有用户定制化开发需求，直接对所述预设组件和预设图形进行定制化开发，得到定制化开发后的定制化预设组件和预设图形，则直接使用预设组件和预设图形匹配到的代码模板，生成对应的页面代码，若无用户定制化开发需求，则直接根据匹配到的预设组件和预设图形自动生成对应的页面代码。

以下将对各个步骤进行详细说明：

步骤S31，根据所述可序数据，判断用户需求；

具体的，可以通过数据分析工具对包含用户需求的可序数据进行用户需求分析，得到与上述从各个不同接入的应用中用户自定义上传的日志数据对应的可序数据中的用户需求，于开发应用背景来说，网站分析特别指的是来自某监控系统搜集来的资料，用以决定网站使用的组件和图形是否符合用户需求的开发目标。

在一实施例中，通过对上述包含用户规则和有不同数据类型的可序数据进行用户需求分析，得到与上述从各个不同接入的应用中用户自定义上传的日志数据对应的可序数据中的用户需求，其中，可序数据对应的用户需求包括无需对匹配到的预设组件和预设图形进行定制化开发和需要对匹配到的预设组件和预设图形进行定制化开发。

步骤S32，若所述可序数据中无数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

具体地，上述预设组件和预设图形是基于React框架和antdUI框架的web端产品，其中，React框架是主要用于构建UI的用户界面的JavaScript库，在React里可以传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件；antdUI框架是基于Ant Design设计体系的React UI组件库，主要用于研发企业级中后台产品，可以实现代码的按需加载。

具体的，在一实施例中，根据可序数据分析获取到对应的用户需求后，若所述可序数据中无数据定制需求，需要将该可序数据对应的数据类型在基于React框架和antdUI框架的数据库中进行匹配，得到符合用户需求的预设组件和预设图形，其中，在本实施例中，存储所述预设组件和预设图形的数据库包括网站、APP移动端和终端等所有存储介质，例如，在本实施例中，预设组件和预设图形存储于ant design网站，上述预设组件和预设图形存储地址分别为：

预设组件存储地址为https://ant.design/components/overview-cn/；

预设图形存储地址为https://charts.ant.design/zh/examples/gallery/。

例如，当所述可序数据的数据类型为long或double的数字类型数据，则对应生成的预设组件和预设图形为与数字类型相对应的inputNumber组件，用于输入数字类型的数据；又比如当所述可序数据的数据类型为datetime的时间类型的数据，则对应生成的构建可视化交互页面的预设组件和预设图形为输入时间类型组件。

步骤S33，根据所述预设组件和预设图形，匹配对应的代码模板，生成页面代码；

在一实施例中，根据在ant design网站使用上述可序数据对应的数据类型匹配到的预设组件和预设图形，ant design网站会根据模板代码自动生成与可序数据的数据类型对应的预设组件和预设图形的页面代码，上述构建可视化交互页面的预设组件和预设图形的页面代码也直接显示在ant design网站上，可直接获取与可序数据的数据类型对应的预设组件和预设图形的页面代码。

步骤S34，若所述可序数据中有数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

在一实施例中，基于React框架和antdUI框架的ant design网站采用React封装了一套 Ant Design 的组件库，运用数据分析工具得到用户需求后，直接将包含用户需求的不同数据类型的可序数据在基于React框架和antdUI框架的ant design网站进行匹配，获得对应的预设组件和预设图形。

步骤S35，对所述预设组件和预设图形进行定制化开发，得到定制化组件和定制化图形，生成页面代码。

在一实施例中，获取到ant design网站中与可序数据的数据类型匹配对应的预设组件和预设图形，利用预设组件和预设图形的基本框架和基本要素进行可序数据中对应用户需求的定制化开发，得到定制化开发后的预设组件和预设图形，其中，上述预设组件和预设图形的存储地址和进行定制化开发操作地址分别为：预设组件网址为https://ant.design/components/overview-cn/，预设图形网址为https://charts.ant.design/zh/examples/gallery/，在上述网站可直接获取经过定制化开发后的预设组件和预设图形的页面代码。

参照图5，步骤S35具体包括：

步骤a1，基于所述可序数据对应的预设组件和预设图形的基本框架，对所述预设组件和预设图形进行定制化开发，生成定制化组件和定制化图形；

根据可序数据分析获取到对应的用户需求后，若所述可序数据中有数据定制需求，则根据分析所述可序数据后得到的用户需求，对所述可序数据对应的预设组件和预设图形进行上述用户需求对应的定制化开发，其中，上述定制化开发的方式包括调整类型、形状、大小、透明度和有效性等组件和图形的属性中的一种或多种。

例如，通过对上述包含用户规则和有不同数据类型的可序数据进行用户需求分析，得到可序数据对应的的数据类型和用户需求为string字符串类型选择inputString组件和图形，并在该组件图形的基础上，增加输入框组件的宽度，将下载按钮设置为无效定制化开发操作，经过以上定制化开发操作后，得到定制化组件和定制化图形。

步骤a2，基于所述定制化组件和定制化图形，匹配到对应的代码模板，对所述代码模板进行参数调整，生成所述定制化组件和定制化图形的页面代码。

在一实施例中，基于定制化组件和定制化图形，在数据库中匹配与定制化组件和定制化图形相对应的代码模板，生成上述定制化开发后的预设组件和预设图形的页面代码，其中，上述预设组件和预设图形的存储地址、进行定制化开发操作地址和直接获取定制化预设组件和预设图形的页面代码的地址分别为：

预设组件网址为https://ant.design/components/overview-cn/；

预设图形网址为https://charts.ant.design/zh/examples/gallery/。

在本实施例中，本实施例提出的交互页面自动生成方法还能根据可序数据分析开发可视化交互页面的用户需求，可对匹配到的预设组件和预设图形进行定制化开发，根据用户需求灵活调整预设组件和预设图形，自动生成与灵活调整的定制化组件和定制化图形对应的页面代码，进一步地节约了沟通和开发成本。

进一步地，基于本发明交互页面自动生成方法第一、第二实施例，提出本发明交互页面自动生成方法第三实施例。

参照图6，本发明交互页面自动生成方法的第三实施例与交互页面自动生成方法的第一、第二实施例的区别在于，本实施例在上述步骤S30，在所述根据所述可序数据，选择数据库中对应的预设组件和预设图形，自动生成所述预设组件和所述预设图形对应的页面代码之前，还包括：

步骤S301，基于不同数据类型的组件元素和图形元素，利用组件和图形开发工具，生成对应的预设组件和预设图形；

步骤S302，对所述预设组件和预设图形进行初始化，获得与所述预设组件和预设图形对应的代码模板；

步骤S303，将所述预设组件以及所述预设组件对应的代码模板对应的代码模板存入数据库;

步骤S304，将所述预设图形以及所述预设图形对应的代码模板对应的代码模板存入数据库。

在模板存入数据库，采用React对上述预设组件和预设图形进行封装，得到AntDesig网站中的组件和图形集合。在本实施例中，基于不同类型的组件和图形，生成不同数据类型的预设组件和预设图形及其代码模板，生成预设组件和预设图形的具体步骤参照图7，之后再将开发好的不同数据类型的预设组件和预设图形及其代码存入数据库。

以下将对各个步骤进行详细说明：

步骤S301，基于不同数据类型的组件元素和图形元素，利用组件和图形开发工具，生成对应的预设组件和预设图形；

不同数据类型的组件元素和图形元素，是在开发可视化交互页面所必要使用的元素，这些组件元素和图形元素是构建可视化的交互页面的关键因素，其中，组件是对数据和方法的简单封装，例如，在C++ Builder中，一个组件就是一个从TComponent派生出来的特定对象。组件可以有自己的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计；而网页图形则是在设计可视化的交互页面时，用到的网页图标。

在可视化的交互页面的开发过程中，基于不同数据类型的组件和图形开发出应用于不同可视化的交互页面上的预设组件和预设图形，虽然这些预设组件和预设图形在应用过程中，数据差异性较大，但不同应用通过组件和图形的展现形式是大同小异的，把开发好的可视化交互组件与图形存储进数据库，跳过了许多重复性的开发工作，直接将开发好的开发好的可视化交互组件与图形存储进数据库作为预设组件和预设图形。

具体的，在一实施例中，对一些基础的不同数据类型的组件和图形进行开发，开发并设计出具有一定通用性的组件和图形，生成Ant Desig网站中的预设组件和预设图形。

步骤S302，对所述预设组件和预设图形进行初始化，获得与所述预设组件和预设图形对应的代码模板；

在计算机编程领域中，初始化指为数据对象或变量赋初值的做法，如何初始化则取决于所用的程序语言以及所要初始化的对象的存储类型等属性，用于进行初始化的程序结构则称为初始化器或初始化列表，初始化和变量声明是有明显区别的，而且变量声明也先于初始化进行。

具体的，在一实施例中，基于上述存储在数据库中的可视化的预设组件和预设图形，对预设组件和预设图形进行初始化处理，即运用编程工具中的初始化工具，生成所述可视化的预设组件和预设图形的代码，将所述代码进行模板化处理，得到对应的代码模板。

步骤S303，将所述预设组件以及所述预设组件对应的代码模板对应的代码模板存入数据库;

将开发好的预设组件以及预设组件对应的代码模板存入数据库，在本实施例中，存储所述预设组件和预设图形的数据库包括网站、APP移动端和终端等所有存储介质，例如，ant design网站，具体的，预设组件以及预设组件对应的代码模板的存储地址为：https://ant.design/components/overview.cn。

步骤S304，将所述预设图形以及所述预设图形对应的代码模板对应的代码模板存入数据库。

将开发好的预设图形以及预设图形对应的代码模板存入数据库，在本实施例中，存储所述预设组件和预设图形的数据库包括网站、APP移动端和终端等所有存储介质，例如，ant design网站，具体的，预设图形以及预设图形对应的代码模板的存储地址为：https://charts.ant.design/zh/examples/gallery/。

在一实施例中，通过将包含不同数据类型的预设组件和预设图形存入数据库中，在可视化的交互页面开发过程中随意匹配对应的预设组件和预设图形，并且根据该预设组件和预设图形，匹配已经存储好的代码模板，生成上述预设组件和预设图形对应的页面代码，无需人为开发，降低了可视化的交互页面开发的难度和错误率，跳过可视化的交互页面开发过程中的重复性流程，大大节约了时间和人力成本，另外，通过统一开发应用于构建可视化的交互页面的组件和图形，将开发好的可视化交互组件与图形存储进数据库，跳过了许多重复性的开发工作，提高了构建可视化的交互页面的工作效率，直接将开发好的开发好的可视化交互组件与图形存储进数据库作为构建可视化的交互页面可以使用的预设组件和预设图形，无需二次开发，减少开发出错率，节省了构建可视化的交互页面的人力成本。

本发明还提供一种交互页面自动生成装置。参照图8，本发明的交互页面自动生成装置包括：

获取模块，用于获取监控系统上报的日志数据；

处理模块，用于对所述日志数据进行处理，得到不同类型的可序数据；

选择模块，用于根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码；

确定模块，用于基于所述页面代码，生成可视化的交互页面。

此外，本发明还提供一种计算机可读存储介质，所述介质优选为计算机可读存储介质，其上存储有交互页面自动生成程序，所述交互页面自动生成程序被处理器执行时实现如上所述的交互页面自动生成方法的步骤。

在本发明交互页面自动生成设备和介质的实施例中，包含了上述交互页面自动生成方法各实施例的全部技术特征，说明和解释内容与上述交互页面自动生成方法各实施例基本相同，此处不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书与附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (9)

1.一种交互页面自动生成方法，其特征在于，所述交互页面自动生成方法包括如下步骤：

获取监控系统上报的日志数据；

其中，所述日志数据的获取方式包括从不同的监控系统获取自动收集，所述从不同的监控系统获取的方式包括通过对前端设备的监测、采集和提取步骤，得到包含用户需求的所述日志数据；

对所述日志数据进行处理，得到不同类型的可序数据；

所述可序数据中包含用户需求，且不同的所述可序数据有对应的不同用户需求，不同用户需求有相对应的不同数据类型；

根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和所述预设图形对应的页面代码；

基于所述页面代码，生成可视化的交互页面；

所述交互页面由所述页面代码对应的视图和元素组成，所述交互页面通过布局插件对所述视图和元素进行操作得到；

所述基于所述页面代码，生成可视化的交互页面的方式包括：

基于所述页面代码，确定与所述页面代码对应的视图和元素；

使用栅格布局react-grid-layout插件对所述页面代码对应的视图和元素进行拖拉拽的布局和设计，生成用户自定义的可视化的交互页面。

2.如权利要求1所述的交互页面自动生成方法，其特征在于，在所述根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和所述预设图形对应的页面代码的步骤之前，交互页面自动生成方法还包括：

基于不同数据类型的组件元素和图形元素，利用组件和图形开发工具，生成对应的预设组件和预设图形；

对所述预设组件和预设图形进行初始化，获得与所述预设组件和预设图形对应的代码模板；

将所述预设组件以及所述预设组件对应的代码模板存入数据库；

将所述预设图形以及所述预设图形对应的代码模板存入数据库。

3.如权利要求1所述的交互页面自动生成方法，其特征在于，所述根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和所述预设图形对应的页面代码的步骤包括：

根据所述可序数据，判断用户需求；

若所述可序数据中无数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

根据所述预设组件和预设图形，匹配对应的代码模板，生成页面代码；

若所述可序数据中有数据定制需求，则基于所述可序数据，匹配数据库中对应的预设组件和预设图形；

对所述预设组件和预设图形进行定制化开发，得到定制化组件和定制化图形，生成页面代码。

4.如权利要求3所述的交互页面自动生成方法，其特征在于，所述对所述预设组件和预设图形进行定制化开发，得到定制化组件和定制化图形，生成页面代码的步骤包括：

基于所述可序数据对应的预设组件和预设图形的基本框架，对所述预设组件和预设图形进行定制化开发，生成定制化组件和定制化图形；

基于所述定制化组件和定制化图形，匹配到对应的代码模板，对所述代码模板进行参数调整，生成所述定制化组件和定制化图形的页面代码。

5.如权利要求1所述的交互页面自动生成方法，其特征在于，所述获取监控系统上报的日志数据的步骤包括：

基于所述监控系统，从不同接入的应用中获取上报日志；

对所述上报日志进行集成处理，得到日志数据。

6.如权利要求1所述的交互页面自动生成方法，其特征在于，所述对所述日志数据进行处理，得到不同类型的可序数据的步骤包括：

对所述日志数据进行加工清洗，生成与日志数据对应的阶层数据；

将所述阶层数据进行整理划分，得到不同类型的可序数据，其中，所述可序数据的数据类型包括string、long、date、datetime、double和json中的一种或多种。

7.一种交互页面自动生成装置，其特征在于，所述交互页面自动生成装置包括：

获取模块，用于获取监控系统上报的日志数据；

其中，所述日志数据的获取方式包括从不同的监控系统获取自动收集，所述从不同的监控系统获取的方式包括通过对前端设备的监测、采集和提取步骤，得到包含用户需求的所述日志数据；

处理模块，用于对所述日志数据进行处理，得到不同类型的可序数据；

所述可序数据中包含用户需求，且不同的所述可序数据有对应的不同用户需求，不同用户需求有相对应的不同数据类型；

选择模块，用于根据所述可序数据，选择数据库中对应的预设组件和预设图形，应用所述数据库中的代码模板生成所述预设组件和预设图形对应的页面代码；

确定模块，用于基于所述页面代码，生成可视化的交互页面；

所述交互页面由所述页面代码对应的视图和元素组成，所述交互页面通过布局插件对所述视图和元素进行操作得到；

所述基于所述页面代码，生成可视化的交互页面的方式包括：

基于所述页面代码，确定与所述页面代码对应的视图和元素；

使用栅格布局react-grid-layout插件对所述页面代码对应的视图和元素进行拖拉拽的布局和设计，生成用户自定义的可视化的交互页面。

8.一种交互页面自动生成设备，其特征在于，所述交互页面自动生成设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的交互页面自动生成程序，所述交互页面自动生成程序被所述处理器执行时实现如权利要求1至6中任一项所述的交互页面自动生成方法的步骤。

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

Images