一种显示屏自定义看板布局方法

技术领域

本发明涉及一种显示屏看板布局，具体涉及一种显示屏自定义看板布局方法。

背景技术

现代社会已进入大数据时代，显示屏看板是不可缺少的信息工具，越来越多的团体拥有了非常庞大的数据资源，冰冷的数字明显不够直观，需要选择合适的图表来显示各类数据；不同的数据图表整合成不同的显示屏看板，可以让用户快速地了解全局，还可以通过对比、分析数据或者查看数据变化趋势，为团体决策者做出各项决策提供强有力的支持；现有的显示屏看板布局方法，或是提供了多个模板可供切换，或是让用户随意拖放组件去生成新的显示屏看板，或是让用户直接去定义组件的宽高值。

上述的已有三种方法中，第一种，显示屏看板布局方法局限性较大，需要根据业务需求的变化不停地去更改代码，创建新的模板，并且不能满足不同用户的个性化需求；第二种，显示屏看板布局方法则是给了用户太多的自由，部分对图形尺寸无法把握或者对美学不太敏感的用户会创造出不协调的显示屏看板；第三种，显示屏看板布局方法则需要考验用户对长度的估算能力或者通过不断地去尝试以确定具体的宽高数值，用户体验感太差；第二种和第三种方法还有个缺陷，就是不能自适应屏幕宽度的变化。

为了让用户拥有个性化的显示屏看板，创建出尺寸合适的组件及表格或图形，人们迫切希望能有一种使用便捷性的同时又兼顾自适应屏幕大小变化的显示屏看板布局方法。

发明内容

本发明提供一种显示屏自定义看板布局方法，能够解决背景技术中提及的问题。

本发明解决其技术问题的技术方案是：采用element-plus组件库的基础24分栏布局，通过 row 和 col 组件以及col组件的 span 属性我们就可以自由地组合布局。

本发明的实现分为页面渲染和数据处理2个方面。

首先，需要给渲染的显示屏看板设计一个数据结构。该数据结构的最外层是一个列表T，列表中的每项Tc有span, height, hasChildren, children以及其他图表数据的属性（如图表类型，数据来源等）。若hasChildren为false, 则children为空，图表数据的属性会有具体的值；若hasChildren为true, 则图表数据的属性为空，children中会有内容，children中数据结构是这样的：最外层是一个列表L，L中还是一个列表Lc，Lc的数据结构为T。

页面渲染时，有以下几个步骤：

1.渲染一个row组件，接着递归循环显示屏看板数据OData。

2.对于OData中的每项内容Edata进行判断，若Edata的hasChildren属性为false，则在row组件中再渲染一个col组件（分栏大小为span属性的值），col组件中再根据图表数据的属性渲染图表；若hasChildren为true，则将新的循环数据设为Edata.children, 对Edata.children重复1,2的操作。

数据处理，包括新增，修改，删除时的处理3大方面。

假设原始数据为OData，页面布局中有一个组件A。

选中A之后进行新增操作，如果新增时设置的新增组件B的位置是左/右，则在A对应的数据的同级前/后新增B组件的数据信息(数据结构为T)；如果新增时设置的新增组件B的位置是上/下 ，则将A对应的数据Adata深拷贝一份为A1data，设置A1data的span值为24；再将Adata的hasChildren属性设为true，chilren属性清空，接着将A1data放到Adata的children属性中，再根据B的位置的上/下，将B的数据信息放到A1data同级的前/后。

选中A之后进行修改操作，页面上设置修改后的组件信息，包括宽度，高度，图表数据属性等，则直接修改A对应的数据的属性信息即可。

选中A之后进行删除操作，如果还有和A同级的数据（及A的父级中children中还有别的值），则直接删除A数据即可；如果没有和A同级的数据了，则需要在删除A数据后，继续删除A的父级数据Ap，如果Ap仅剩1个同级数据A1，则继续需要处理A1，删除A1，并将A1的children提升到和原A1一个级别，具体处理流程如下：首先将A1的span属性除以24，算出比率ratio，再修改A1的children中的每项span, 将span乘以ratio，再四舍五入得到一个新的span值，再将修改后的A1的children属性深拷贝一份为temp，删除A1，最后将temp中的每项内容按顺序放到原A1的位置。

本发明的技术作用在于：使用element-plus组件库提供的基础24分栏，让用户新建组件时通过数字1-24来指定宽度。这样用户只需要关注宽度的相对比例，而不需要去关心具体的宽度值，避免了指定宽高值的显示屏看板布局方法中，诸如“不知400px是多宽的问题”，同时也避免了自由拖放的显示屏看板布局方法中，当多行出现上下2张图表大小需要一致的情况下，用户自行拖拉可能造成的2张图上下不对齐的问题。另外，采用element-plus的基础24分栏，可以根据屏幕宽度的变化，让组件的宽度自适应地变化。

本发明的有益效果，既满足了用户自定义显示屏看板的需求，又能让用户创造出尺寸合适的组件，不仅操作便捷，还能自适应屏幕宽度变化，能够实现对图或表的显示比例的快速设置，达到图表在页面中的适合显示效果；给用户在制作电子显示屏看板布局时带来自由度和个性化的方便；用户体验得到了很大的提升。

具体实施方式

一种显示屏自定义看板布局方法，采用element-plus组件库的基础24分栏布局，通过 row 和 col 组件以及col组件的 span 属性进行自由地组合布局。

所述本发明分为页面渲染和数据处理两个方面。

一、页面渲染，首先，需要给渲染的显示屏看板设计一个数据结构；该数据结构的最外层是一个列表T，列表中的每项Tc有span, height, hasChildren, children以及其他图表数据的属性，如图表类型，数据来源等；若hasChildren为false, 则children为空，图表数据的属性会有具体的值；若hasChildren为true, 则图表数据的属性为空，children中会有内容，children中数据结构是这样的：最外层是一个列表L，L中还是一个列表Lc，Lc的数据结构为T。

所述页面渲染，有以下几个步骤：

1.渲染一个row组件，接着递归循环显示屏看板数据OData。

2.对于OData中的每项内容Edata进行判断，若Edata的hasChildren属性为false，则在row组件中再渲染一个col组件（分栏大小为span属性的值），col组件中再根据图表数据的属性渲染图表；若hasChildren为true，则将新的循环数据设为Edata.children, 对Edata.children重复1,2的操作。

二、数据处理，包括新增，修改，删除时的处理3大方面。

假设原始数据为OData，页面布局中有一个组件A。

选中A之后进行新增操作，如果新增时设置的新增组件B的位置是左/右， 则在A对应的数据的同级前/后新增B组件的数据信息，所述数据结构为T；如果新增时设置的新增组件B的位置是上/下 ，则将A对应的数据Adata深拷贝一份为A1data，设置A1data的span值为24；再将Adata的hasChildren属性设为true，chilren属性清空，接着将A1data放到Adata的children属性中，再根据B的位置的上/下，将B的数据信息放到A1data同级的前/后。

选中A之后进行修改操作，页面上设置修改后的组件信息，包括宽度，高度，图表数据属性等，则直接修改A对应的数据的属性信息即可。

选中A之后进行删除操作，如果还有和A同级的数据及A的父级中children中还有别的值，则直接删除A数据即可；如果没有和A同级的数据了，则需要在删除A数据后，继续删除A的父级数据Ap，如果Ap仅剩1个同级数据A1，则继续需要处理A1，删除A1，并将A1的children提升到和原A1一个级别，具体处理流程如下：首先将A1的span属性除以24，算出比率ratio，再修改A1的children中的每项span, 将span乘以ratio，再四舍五入得到一个新的span值，再将修改后的A1的children属性深拷贝一份为temp，删除A1，最后将temp中的每项内容按顺序放到原A1的位置。

所述使用element-plus组件库提供的基础分栏有12栏、24栏、48栏，让用户新建组件时通过数字1-12、1-24、1-48来指定宽度；使用户只需要关注宽度的相对比例，而不需要去关心具体的宽度值，避免了指定宽高值的显示屏看板布局方法中，如“不知400px是多宽的问题”。

进一步的，为了避免了自由拖放的显示屏看板布局方法中，当多行出现上下2张图表大小需要一致的情况下，自行拖拉可能造成的2张图上下不对齐的问题；

进一步的，采用element-plus的基础的12分栏、24分栏、48分栏，再根据屏幕宽度的变化，让组件的宽度自适应地快速变化；实现一种图或表的显示比例的快速自适应设置。