[发明专利]数据可视化开发为内容开发提供页面框架的装置及方法

摘要

数据可视化开发为内容开发提供页面框架的方法，涉及信息技术领域。本发明包括接口定义步骤，排版布局录入步骤，排版布局解析步骤；本发明极大简化了排版布局的工作的复杂度，同时也避免了多种互不相容的排版实现，这就让数据可视化页面的排版在一种模式下操作进行。在本发明的生产实践中，使用本发明开发数据可视化界面时候，开发过程中大大降低了排版布局的难度，绝大部分人在简单培训后就可以掌握本排版布局的方法，极大的提升了生产的效率。

主权项

1.数据可视化开发为内容开发提供页面框架的方法，其特征在于由接口定义步骤，排版布局录入步骤，排版布局解析步骤完成；1）接口定义步骤由排版布局接口定义器定义排版布局的接口标准为：按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41， 21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；minHeight及其值代表内容展示所需要的最小的高度；minWidth及其值代表内容展示所需要的最小的宽度；Layouts中规定排版布局规范，该定义具体内容如下：用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，主要目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题； columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，例如columnRatio ：[1, 2, 1]，说明第一次排版布局页面分成3列，第一列占宽度的1/4，第二列占宽度2/4，第三列占宽度的1/4；用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，该属性和columnRatio相关，当columnRatio定义分成3列，columns数组的长度就是3组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；矩形框boxes作为页面开发中放置内容开发所开发的内容的基本单位，称为容器；2）排版布局录入步骤由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器；由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器；由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器；由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器；由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器；3）排版布局解析步骤 由布局解析引擎读取排版布局定义器中当前应用的页面框架的排版布局参数，包括mode，minHeight、minWidth、Layouts；由布局解析引擎自动计算容器的名称，并将容器的名称输出给内容开发者；由布局解析引擎按照排版布局参数自动生成无内容的页面框架，并将无内容的页面框架输出给内容开发者；布局解析引擎自动计算容器名称使用的代码是：created() {   this.getSlotNames(this.layouts.rows)};布局解析引擎自动计算容器名称是基于Layouts中内容自动执行的，自动生成的名称中的r代表行，c代表列，r后的数字代表第几行，c后的数字代表第几列；布局解析引擎生成无内容的页面框架等同于Layouts所记录的内容。