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

摘要

一种适用于监测服务类应用动态构建页面的方法，该方法包括一种构建组件的方法和一种配置页面的方法，两者相配合实现具体的实施过程，设计组件的外观。通过UI的交互设计完成。设计组件的接口，组件的接口也为组件的配置方式。组件的实现设计，组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码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一个日期，一个显示主题，单个组件的接口参数都需要写到配置文件中。