[发明专利]一种数据大屏的动态编辑方法

说明书

本发明涉及大屏编辑器领域，具体是一种数据大屏的动态编辑方法，包括以下步骤，首先查找资料，设计构想，列举出需要实现的组件，列举组件的可配置属性，根据用户的操作在编辑器的操作，组装出一套页面数据并存储本地到本地并发送到后台，登陆后获取该用户的页面布局数据，根据预定算法解析，可以根据位置和大小信息渲染出每个组件，然后拿到每个组件的配置信息从后台获取数据并且展示，最后可以在已经呈现出来的组件上可以根据用户偏好选择不同的展示方式以及组件风格。上述方法可以实现自定义组件以及在页面上实现二次编辑和修改，一个组件可以有多种展示效果，也可以为特定页面位置做特定组件。

技术领域

本发明涉及大屏编辑器领域，具体是一种数据大屏的动态编辑方法。

背景技术

目前已有的大屏编辑器主要实现了在可选组件范围内进行选择展示，调整组件布局大小等，部分实现了动态绑定数据。预先创建好一些组件放入库中，使用人员可以拖入到编辑区进行调整，并且设置每个组件预设的属性，排列和保存当前编辑状态，然后查看页面展示结果。

基于目前的编辑数据大屏的方案，组件过于繁多，保存页面代码不利于存储，每修改一次就需要全局生成整个页面代码重新保存。页面在不同尺寸的屏幕会出现展示不全的效果。没有针对特有的模板进行推荐和设置。编辑器面板使用起来比较复杂，不易操作。

发明内容

针对现有技术的不足，本发明的目的在于提供一种数据大屏的动态编辑方法，合理把控了组件设计的颗粒度，这样组件不会很繁多，但是每个组件可以设置自己的不同属性达到不同的数据展示方式。支持自定义组件，支持自定义属性。页面会解析当前组件的所有属性会根据组件的配置动态渲染成预期结果。优化了操作界面，将每次的数据格式转化为json封装，方便解析和存储。支持多模板和灵活配置属性。操作便捷，功能完善，该方法操作便捷，功能完善。

为实现上述目的，本发明提供如下技术方案：一种数据大屏的动态编辑方法，该方法包括以下步骤：S1：首先查找资料，设计构想，列举出需要实现的组件，列举组件的可配置属性，留出可自定已属性的接口和操作；

S2：添加自定义组件，自定义属性样式，可指定组件的解析方式，检测到当前编辑面板获取到当前的布局数据储存本地；

S3：根据用户保存数据到后台，登录后获取该用户的页面布局数据，根据预定算法解析，根据位置和大小信息渲染出每个组件；

S4：如有自定义解析算法，则按预算法解析，然后拿到每个组件的配置信息从后台获取数据并且展示；

S5：最后可以在已经呈现出来的组件上可以根据用户偏好选择不同的展示方式以及组件风格，结束。

优选的，所述数据大屏的动态编辑方法中包括组件名称，样式，大小，位置，展示数据方式，统计类型，预览效果图，每个组件都有默认属性和设置。

优选的，所述数据大屏的动态编辑方法中在添加有自定义属性的接口和操作，组件可自定义添加，并且可以自定义属性样式筹，自定义解析算法。

优选的，所述数据大屏的动态编辑方法中拿到组件列表和整体页面的布局数据后，解析数据时，先积算当前设备的尺寸，然后取出每个组件自己的位置及大小信息，按照设备尺寸进行比例划分。每个组件采用absolute定位方式方便布局，代码清晰明确。然后在每个组件中根据设置独立获取数据进而展示。考虑到页面数据过多或网络延时，为每个组件添加了加载动画优化了交互。

优选的，所述数据大屏的动态编辑方法中在页面上的每个组件鼠标经过会弹出再次配置的操作入口，可以继续修改数据展示和样式风格等属性

与现有技术相比，本发明的有益效果是：