一种适用于监测服务类应用动态构建页面的方法技术

一种适用于监测服务类应用动态构建页面的方法，该方法包括一种构建组件的方法和一种配置页面的方法，两者相配合实现具体的实施过程，设计组件的外观。通过UI的交互设计完成。设计组件的接口，组件的接口也为组件的配置方式。组件的实现设计，组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码HTML+CSS。然后设计的数据特征值会使得组件从后台获取到相关的数据，然后用这些数据渲染到组件中，进而形成与设计匹配的组件表现；最终进行配置组件；本方法形成了一整套完善的页面配置流程和方法，使得不同的工程人员专注于各自负责的领域。

Method for dynamically constructing page for monitoring service class application

Page construction method suitable for monitoring service application of dynamic, this method including a method of building component and a configuration page, two phase with the realization of the specific implementation process, the appearance of the component design. Through the interactive design of UI. The interface of the design component, and the interface of the component is also the configuration mode of the component. Component implementation design, the component implementation process is actually complete from the design component interface to the final design component of the application of transition, each component development contains logical code JS, display code HTML+CSS. The characteristics of data and then design value will make the components obtained from the background to the related data, and then use these data to the rendering component, and the formation of design, performance and components; final configuration components; the method form the page configuration process and method of a set of perfect, so that different engineers focus on the respective the field.

【技术实现步骤摘要】
一种适用于监测服务类应用动态构建页面的方法
本专利技术涉及一种动态构建实时数据展示页面的方法，在大量的实时监测数据中动态选择业务相关的数据，按照符合监测大屏布局的方式来快速构建监测页面。
技术介绍
传统的前端页面开发是以页面为独立的最小单元，一个业务场景设计一个页面，在这个页面上根据业务场景设计布局，不同的区域显示不同的内容，整个页面的HTML元素和CSS样式是耦合在一起的。随着业务场景的逐渐增多，有两个问题逐渐显现出来：1.当业务场景发生变化时，有时可能是某些区域的内容发生了变化，有时可能是多个区域间的业务关联发生了变化，这个时候只能对页面整体代码进行修改调整。而这样的修改调整经常维持不了多久又会随着下一次的业务调整而发生新的变化。2.当有新的业务场景出现的时候，必须重新设计页面布局，开发新的页面HTML和CSS，这个时候需要引入设计人员和开发人员把页面的开发过程再次实施一遍。这两个问题其实总结来说就是页面的开发不能适应业务场景的变化，而在监测服务类应用中，由于监测数据繁多，监测场景复杂多变，上述两个问题尤其明显。为了解决上述问题，本文提出了一种适用于监测服务类应用的动态构建页面的方法。这种方法的核心思想是从数据展示的角度出发，构建仅仅为数据服务的组件，然后用配置的方式将监测数据和组件组合起来构建用户页面。这样随着组件库的不断完善，无论业务场景变化或者新增，都不再需要开发人员去修改原始代码，只需要相关人员去更改配置文件即可。
技术实现思路
针对现有技术中存在的上述问题，本专利技术采用的技术方案为一种适用于监测服务类应用动态构建页面的方法，该方法包括一种构建组件的方法和一种配置页面的方法，一种构建组件的方法为下述步骤的1-3，一种配置页面的方法为下述步骤4，一种构建组件的方法和一种配置页面的方法两者相配合实现具体的实施过程，步骤1：设计组件的外观。这一步骤通过UI的交互设计完成，根据整个网页应用的外观风格来确定不同的组件外观，组件外观图表以及自定义外观的数据展示组件，图表的形式为饼图、折线图、区域图或柱状图等，数据展示组件中为一个多列的表格，其中表格的某一列显示一个进度条和指示标杆来显示当前日期的值和指定的对比日期的值。步骤2：设计组件的接口。组件的接口也为组件的配置方式，这里需要明确这个通用的组件需要暴露哪些配置项给用户，有了这些配置项用户就在配置文件中随时修改从而让对应的组件适用于对应的业务场景。组件的接口设计要考虑到组件所适用的数据类型、业务场景、表现形式。组件会展示一组数据的对比，那接口中一定会有一个这组数据的特征值项；组件在不同的场景下表现的对比形式不一样，对比形式是一组柱图对比或是一个饼图对比总体百分比权重，那接口中会有一个表现外观的配置项。步骤3：组件的实现设计。组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码HTML+CSS。设计组件的接口中设计的配置项都会作为组件JS的初始化参数，组件的模板采用含表达式的动态编译模板引擎，步骤2中设计的接口配置项中外观表现相关的参数首先会使得模板编译为配置项要求的HTML片段。然后步骤2设计的数据特征值会使得组件从后台获取到相关的数据，然后用这些数据渲染到组件中，进而形成与设计匹配的组件表现。步骤4：配置组件在组件的实现设计的基础之上，有以上组件后页面的开发过程就转变为编写配置文件的过程，配置文件的格式很灵活，配置文件的格式是xml、json或者其他解析格式的文件。在配置文件里需要以下两方面的内容，第一方面是页面布局和组件选择，当前这个页面需要显示为上下两行时，上面一行按50％-50％分为两列，下面一行按40％-20％-40％的比例分成三列，这一共5个显示单元每个单元显示哪个特定的组件都写在配置文件中。第二方面就是配置单个组件的接口参数，即第一个单元格的组件需要一个id一个日期，一个显示主题，单个组件的接口参数都需要写到配置文件中。与现有技术相比，本专利技术具有以下明显的优势：1.适应复杂多变的业务场景。配置文件中的排版和组件选择都是很灵活，随时可以改动的，业务场景变化后只需要修改配置文件即可。2.形成了一整套完善的页面配置流程和方法，使得不同的工程人员专注于各自负责的领域。框架开发人员只需要专注于组件的完善，页面配置人员只专注于对业务的理解和组件的配置使用。附图说明图1页面设计效果图；图2页面用XMLDocument描述的排版代码图；具体实施方式下面结合附图和具体实施方式对本专利技术做进一步说明。具体实施方式以开发一个如图1所示的高速公路免通行费专题监测页面为例。从设计图上可以看出，这个页面将高速公路通行的繁杂数据分类整理，既可以看到各条高速公路的交通量占比和交通量排名，也可以看到每条高速公路的实时小时交通量，还能看到高速公路上发生的事件列表。本专利技术所述的方法包括以下步骤：设计并实现设计图中包含的图形化组件，包括以下步骤：步骤1.1高速公路交通量占比饼图组件。步骤1.2高速公路实时交通量线图组件以及过滤线图数据的单选+多选复合组件。步骤1.3高速公路交通量排名柱状图组件。步骤1.4高速公路事件列表组件。定义页面排版结构描述XML文档，包括以下步骤：步骤2.1分析页面DOM结构，设计行列组合。步骤2.2以XMLDocument格式完成页面结构描述，其中Container代表容器，Module代表上面步骤1中实现的组件。配置组件接口参数，完成最终效果，包括以下步骤：步骤3.1分析每个组件包含的数据，以接口设计的模板完成参数配置。步骤3.2微调页面样式完成最终效果。至此整个页面的开发就完成了，可以看到本专利技术中将页面开发分解为组件开发加页面布局开发两个主要步骤，组件开发只考虑数据展示，页面布局开发只考虑排版，这样就可以十分灵活的设计对组件的排放，从而快速完成每一个新页面的开发。本文档来自技高网...

【技术保护点】
一种适用于监测服务类应用动态构建页面的方法，其特征在于：该方法包括一种构建组件的方法和一种配置页面的方法，一种构建组件的方法为下述步骤的1‑3，一种配置页面的方法为下述步骤4，一种构建组件的方法和一种配置页面的方法两者相配合实现具体的实施过程，步骤1：设计组件的外观；这一步骤通过UI的交互设计完成，根据整个网页应用的外观风格来确定不同的组件外观，组件外观图表以及自定义外观的数据展示组件，图表的形式为饼图、折线图、区域图或柱状图等，数据展示组件中为一个多列的表格，其中表格的某一列显示一个进度条和指示标杆来显示当前日期的值和指定的对比日期的值；步骤2：设计组件的接口；组件的接口也为组件的配置方式，这里需要明确这个通用的组件需要暴露哪些配置项给用户，有了这些配置项用户就在配置文件中随时修改从而让对应的组件适用于对应的业务场景；组件的接口设计要考虑到组件所适用的数据类型、业务场景、表现形式；组件会展示一组数据的对比，那接口中一定会有一个这组数据的特征值项；组件在不同的场景下表现的对比形式不一样，对比形式是一组柱图对比或是一个饼图对比总体百分比权重，那接口中会有一个表现外观的配置项；步骤3：组件的实现设计；组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码HTML+CSS；设计组件的接口中设计的配置项都会作为组件JS的初始化参数，组件的模板采用含表达式的动态编译模板引擎，步骤2中设计的接口配置项中外观表现相关的参数首先会使得模板编译为配置项要求的HTML片段；然后步骤2设计的数据特征值会使得组件从后台获取到相关的数据，然后用这些数据渲染到组件中，进而形成与设计匹配的组件表现；步骤4：配置组件在组件的实现设计的基础之上，有以上组件后页面的开发过程就转变为编写配置文件的过程，配置文件的格式很灵活，配置文件的格式是xml、json或者其他解析格式的文件；在配置文件里需要以下两方面的内容，第一方面是页面布局和组件选择，当前这个页面需要显示为上下两行时，上面一行按50％‑50％分为两列，下面一行按40％‑20％‑40％的比例分成三列，这一共5个显示单元每个单元显示哪个特定的组件都写在配置文件中；第二方面就是配置单个组件的接口参数，即第一个单元格的组件需要一个id一个日期，一个显示主题，单个组件的接口参数都需要写到配置文件中。...

【技术特征摘要】
1.一种适用于监测服务类应用动态构建页面的方法，其特征在于：该方法包括一种构建组件的方法和一种配置页面的方法，一种构建组件的方法为下述步骤的1-3，一种配置页面的方法为下述步骤4，一种构建组件的方法和一种配置页面的方法两者相配合实现具体的实施过程，步骤1：设计组件的外观；这一步骤通过UI的交互设计完成，根据整个网页应用的外观风格来确定不同的组件外观，组件外观图表以及自定义外观的数据展示组件，图表的形式为饼图、折线图、区域图或柱状图等，数据展示组件中为一个多列的表格，其中表格的某一列显示一个进度条和指示标杆来显示当前日期的值和指定的对比日期的值；步骤2：设计组件的接口；组件的接口也为组件的配置方式，这里需要明确这个通用的组件需要暴露哪些配置项给用户，有了这些配置项用户就在配置文件中随时修改从而让对应的组件适用于对应的业务场景；组件的接口设计要考虑到组件所适用的数据类型、业务场景、表现形式；组件会展示一组数据的对比，那接口中一定会有一个这组数据的特征值项；组件在不同的场景下表现的对比形式不一样，对比形式是一组柱图对比或是一个饼图对比总体百分比权重，那接口中会有一个表现外观的配置项；步骤3：组件的实现设计；组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码HTML+CSS；设计组件的接口中设计的配置项都会作为组件JS的初始化参数，组件的模板采用含表达式的动态编译模板引擎，步骤2中设计的接口配置项中外观表现相关的参数首先会使得模板编译为配置项要求的HTML片段；然后步骤2设计的数据特征值会使得组件从后台获取到相关的数据，然后用这些数据渲染到组件中，进而形成与设计匹配的组...

【专利技术属性】
技术研发人员：方秀川，陈智宏，孟凡强，
申请(专利权)人：北京通途永久科技有限公司，
类型：发明
国别省市：北京,11