[发明专利]一种适用于监测服务类应用动态构建页面的方法

权利要求书

1.一种适用于监测服务类应用动态构建页面的方法，其特征在于：该方法包括一种构建组件的方法和一种配置页面的方法，一种构建组件的方法为下述步骤的1-3，一种配置页面的方法为下述步骤4，一种构建组件的方法和一种配置页面的方法两者相配合实现具体的实施过程，

步骤1：设计组件的外观；

这一步骤通过UI的交互设计完成，根据整个网页应用的外观风格来确定不同的组件外观，组件外观图表以及自定义外观的数据展示组件，图表的形式为饼图、折线图、区域图或柱状图等，数据展示组件中为一个多列的表格，其中表格的某一列显示一个进度条和指示标杆来显示当前日期的值和指定的对比日期的值；

步骤2：设计组件的接口；

组件的接口也为组件的配置方式，这里需要明确这个通用的组件需要暴露哪些配置项给用户，有了这些配置项用户就在配置文件中随时修改从而让对应的组件适用于对应的业务场景；

组件的接口设计要考虑到组件所适用的数据类型、业务场景、表现形式；组件会展示一组数据的对比，那接口中一定会有一个这组数据的特征值项；组件在不同的场景下表现的对比形式不一样，对比形式是一组柱图对比或是一个饼图对比总体百分比权重，那接口中会有一个表现外观的配置项；

步骤3：组件的实现设计；

组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码HTML+CSS；设计组件的接口中设计的配置项都会作为组件JS的初始化参数，组件的模板采用含表达式的动态编译模板引擎，步骤2中设计的接口配置项中外观表现相关的参数首先会使得模板编译为配置项要求的HTML片段；然后步骤2设计的数据特征值会使得组件从后台获取到相关的数据，然后用这些数据渲染到组件中，进而形成与设计匹配的组件表现；

步骤4：配置组件

在组件的实现设计的基础之上，有以上组件后页面的开发过程就转变为编写配置文件的过程，配置文件的格式很灵活，配置文件的格式是xml、json或者其他解析格式的文件；在配置文件里需要以下两方面的内容，第一方面是页面布局和组件选择，当前这个页面需要显示为上下两行时，上面一行按50％-50％分为两列，下面一行按40％-20％-40％的比例分成三列，这一共5个显示单元每个单元显示哪个特定的组件都写在配置文件中；第二方面就是配置单个组件的接口参数，即第一个单元格的组件需要一个id一个日期，一个显示主题，单个组件的接口参数都需要写到配置文件中。

2.根据权利要求1所述的一种适用于监测服务类应用动态构建页面的方法，其特征在于：高速公路免通行费专题监测页面中，这个页面将高速公路通行的繁杂数据分类整理，既能看到各条高速公路的交通量占比和交通量排名，也能看到每条高速公路的实时小时交通量，还能看到高速公路上发生的事件列表；

本方法包括以下步骤：

设计并实现设计图中包含的图形化组件，包括以下步骤：

步骤1.1高速公路交通量占比饼图组件；

步骤1.2高速公路实时交通量线图组件以及过滤线图数据的单选+多选复合组件；

步骤1.3高速公路交通量排名柱状图组件；

步骤1.4高速公路事件列表组件；

定义页面排版结构描述XML文档，包括以下步骤：

步骤2.1分析页面DOM结构，设计行列组合；

步骤2.2以XMLDocument格式完成页面结构描述，其中Container代表容器，Module代表上面步骤1中实现的组件；

配置组件接口参数，完成最终效果，包括以下步骤：

步骤3.1分析每个组件包含的数据，以接口设计的模板完成参数配置；

步骤3.2微调页面样式完成最终效果。