可复用的前端页面的生成方法、实施该生成方法的系统技术方案

本发明专利技术公开了一种可复用的前端页面的生成方法、实施该生成方法的系统。其中可复用的前端页面的生成方法，包括：根据至少一种原生的web组件建立自定义web组件；开发前端页面的布局，并确定板块的数量；当用户创建或修改所述前端页面的各个板块的数据内容时，选择所述自定义web组件，并根据需要输入设置数据；当前端页面运行时，所述自定义web组件根据所述设置数据动态显示对应的数据内容。本发明专利技术可以使得前端页面可复用，节约开发成本。节约开发成本。节约开发成本。

【技术实现步骤摘要】
可复用的前端页面的生成方法、实施该生成方法的系统


[0001]本专利技术涉及软件开发的
，尤其涉及一种可复用的前端页面的生成方法以及实现该生成方法的系统。

技术介绍

[0002]现有的对软件产品的开发，都需要研发人员或多或少编写代码，如果前期需求没有列完整，或者是使用后期产生新的需求，则需要研发人员再次开发，对软件的代码进行更新，这样导致开发进度比较慢，质量也比较不可控。
[0003]现有的一些设备其运行数据的种类变化较少，仅仅是不同的用户存在不同的需求，针对用户不同的需求都需要开发新的软件产品，导致效率低下。以楼宇控制系统为例，该软件所采用的设备的种类大致都差不多，基本上包括空调、照明、通风、门禁当中的至少一种设备。而空调设备的运行数据的种类也基本上都知道，但是当空调应用在普通办公环境时，和应用在特殊实验室环境时，需要监控的数据的范围就存在不同。
[0004]因而如何使得前端页面可复用，避免要反复进行编程开发是亟待解决的技术问题。

技术实现思路

[0005]为了解决现有技术中的软件需要重新开发的技术问题，本专利技术提出了可复用的前端页面的生成方法、实施该生成方法的系统。
[0006]本专利技术提出的可复用的前端页面的生成方法，包括：根据至少一种原生的web组件建立自定义web组件；开发前端页面的布局，并确定板块的数量；当用户创建或修改所述前端页面的各个板块的数据内容时，选择所述自定义web组件，并根据需要输入设置数据；当前端页面运行时，所述自定义web组件根据所述设置数据动态显示对应的数据内容。
[0007]进一步，所述设置数据包括：所述自定义web组件的数据显示颜色，所述自定义web组件的数据显示范围当中的至少一种。
[0008]进一步，所述设置数据还包括：所述自定义web组件的数据来源对应的设备以及设备点位。
[0009]进一步，还包括：提供图表交互页面供用户创建图表；当用户创建或修改所述前端页面各个板块的数据内容时，通过所述图表交互页面输入图表生成条件；在所述前端页面的对应板块基于所述图表生成条件自动生成图表。
[0010]进一步，所述图表生成条件包括：图表类型、图表地址类型、图表统计类型、图表逻
辑、时间类型当中的至少一种。
[0011]进一步，为用户创建的图表提供修改点位功能，当用户修改点位时，则所述图表显示对应点位的设备的数据。
[0012]进一步，所述图表地址类型为设备所在的地址信息。
[0013]本专利技术提出的用于实现上述技术方案所述的可复用的前端页面的生成方法的系统，包括：原生web组件管理模块，用于提供可选择的原生的web组件；自定义动态属性模块，接收用户的设置数据；自定义web组件库管理模块，存储所述自定义web组件。
[0014]进一步，还包括：通用API管理模块和设备管理模块；所述设备管理模块用于对连接设备的进行管理，所述通用API管理模块获取所连接的设备的实时数据，并将所述设备的实时数据作为所述自定义web组件模块的数据来源。
[0015]进一步，还包括：用于存储图表逻辑的图表逻辑库，以及根据图表创建模块和图表逻辑库。
[0016]本专利技术提供一种可复用的前端页面的生成方法，对于设备数据大致相同，设备不同、用户需求不同的情况时，前期只需开发一套前端布局页面系统，后期即满足快速开发产品，快速更新迭代，且后期开发不需技术人员即可完成，既缩短开发周期又节约技术人员成本。
附图说明
[0017]下面结合实施例和附图对本专利技术进行详细说明，其中：图1是本专利技术一实施例的流程图。
[0018]图2是本专利技术一实施例的系统框图。
[0019]图3是本专利技术一实施例的使用状态图一。
[0020]图4是本专利技术一实施例的使用状态图二。
[0021]图5是本专利技术一实施例的使用状态图三。
具体实施方式
[0022]为了使本专利技术所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本专利技术，并不用于限定本专利技术。
[0023]由此，本说明书中所指出的一个特征将用于说明本专利技术的一个实施方式的其中一个特征，而不是暗示本专利技术的每个实施方式必须具有所说明的特征。此外，应当注意的是本说明书描述了许多特征。尽管某些特征可以组合在一起以示出可能的系统设计，但是这些特征也可用于其他的未明确说明的组合。由此，除非另有说明，所说明的组合并非旨在限制。
[0024]如图1所示，本专利技术的可复用的前端页面的生成方法，根据至少一种原生的web组件建立自定义web组件，自定义web组件可以是原生的web组件的组合，或者是基于原生的web组件的修改而形成的新的web组件。
[0025]先开发前端页面的布局并设置板块的数量，当用户创建或修改前端页面的各板块的数据内容时，可以选择自定义web组件，并根据需要输入设置数据，这里的设置数据与用户的需求有关，例如设置数据包括自定义web组件的数据显示颜色，自定义web组件的数据显示范围当中的至少一种。
[0026]当前端页面运行时，自定义web组件根据设置数据动态显示对应的数据内容。
[0027]在一个进一步的实施例中，设置数据还包括自定义web组件的数据来源对应的设备以及设备点位。也就是说自定义web组件的数据来源可以是存储的历史数据，还可以是设备的实时数据。
[0028]本专利技术除了上述非图表类型的数据的页面设计以外，还包括含图表的页面的可复用的方法。先提供图表交互页面供用户创建图表，当用户创建或修改前端页面各个板块的数据内容时，可以通过图表交互页面输入图表生成条件，在前端页面的对应板块基于图表生成条件自动生成图表。
[0029]在一个具体实施例中，图表生成条件包括：图表类型、图表地址类型、图表统计类型、图表逻辑、时间类型当中的至少一种。其中图表逻辑用来对数据源进行筛选、分类，可以预先建立图表逻辑库，图表逻辑库中提供多种图表逻辑来供用户选择，图表逻辑类似于查询语句，如SQL语句等。当用户创建或修改前端页面的各板块的数据内容时，选择图表类型、对应的图表逻辑、时间类型创建对应的图表，之后前端页面会根据用户所选择的图表类型、图表地址类型、图表统计类型以及对应的图表逻辑、时间类型，自动生成对应的图表。在一个具体实施例中，图表地址类型为设备所在的地址信息，图表统计类型包括但不限于水、电、气当中的任意一种。图表统计类型还可以是它们的具体分类，例如以水为例，用水量、水位或者是水压等。以电为例，除了用电量以外，还可以是三项电压、三项电流等具体的电参数。当用户不选择对应的图表逻辑时，则显示由其他图表生成条件筛选出来的所有数据，例如，图表名称为水位监测，ID为1，图表类型为图表，图表地址类型为建筑，图表统计类型为水位，图表逻辑可不选，时间类型为日，默认生成当前日某建筑水位监测图表。此外，除了水、电、气等参数以外，还可以是设备数、人数等其他类型。本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可复用的前端页面的生成方法，其特征在于，包括：根据至少一种原生的web组件建立自定义web组件；开发前端页面的布局，并确定板块的数量；当用户创建或修改所述前端页面的各个板块的数据内容时，选择所述自定义web组件，并根据需要输入设置数据；当前端页面运行时，所述自定义web组件根据所述设置数据动态显示对应的数据内容。2.如权利要求1所述的可复用的前端页面的生成方法，其特征在于，所述设置数据包括：所述自定义web组件的数据显示颜色，所述自定义web组件的数据显示范围当中的至少一种。3.如权利要求2所述的可复用的前端页面的生成方法，其特征在于，所述设置数据还包括：所述自定义web组件的数据来源对应的设备以及设备点位。4.如权利要求1至3任意一项所述的可复用的前端页面的生成方法，其特征在于，还包括：提供图表交互页面供用户创建图表；当用户创建或修改所述前端页面各个板块的数据内容时，通过所述图表交互页面输入图表生成条件；在所述前端页面的对应板块基于所述图表生成条件自动生成图表。5.如权利要求4所述的可复用的前端页面的生成方法，其特征在于，所述图表...

【专利技术属性】
技术研发人员：刁作清，刘影影，张皖，
申请(专利权)人：珠海格力电器股份有限公司，
类型：发明
国别省市：