CN111290809A - 一种数据大屏的动态编辑方法 - Google Patents

一种数据大屏的动态编辑方法 Download PDF

Info

Publication number
CN111290809A
CN111290809A CN202010052473.1A CN202010052473A CN111290809A CN 111290809 A CN111290809 A CN 111290809A CN 202010052473 A CN202010052473 A CN 202010052473A CN 111290809 A CN111290809 A CN 111290809A
Authority
CN
China
Prior art keywords
data
component
page
user
editing method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010052473.1A
Other languages
English (en)
Inventor
张彪
赵晓亮
黄志翀
陆博
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Orca Data Technology Xian Co Ltd
Original Assignee
Orca Data Technology Xian Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Orca Data Technology Xian Co Ltd filed Critical Orca Data Technology Xian Co Ltd
Priority to CN202010052473.1A priority Critical patent/CN111290809A/zh
Publication of CN111290809A publication Critical patent/CN111290809A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Abstract

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

Description

一种数据大屏的动态编辑方法
技术领域
本发明涉及大屏编辑器领域，具体是一种数据大屏的动态编辑方法。
背景技术
目前已有的大屏编辑器主要实现了在可选组件范围内进行选择展示，调整组件布局大小等，部分实现了动态绑定数据。预先创建好一些组件放入库中，使用人员可以拖入到编辑区进行调整，并且设置每个组件预设的属性，排列和保存当前编辑状态，然后查看页面展示结果。
基于目前的编辑数据大屏的方案，组件过于繁多，保存页面代码不利于存储，每修改一次就需要全局生成整个页面代码重新保存。页面在不同尺寸的屏幕会出现展示不全的效果。没有针对特有的模板进行推荐和设置。编辑器面板使用起来比较复杂，不易操作。
发明内容
针对现有技术的不足，本发明的目的在于提供一种数据大屏的动态编辑方法，合理把控了组件设计的颗粒度，这样组件不会很繁多，但是每个组件可以设置自己的不同属性达到不同的数据展示方式。支持自定义组件，支持自定义属性。页面会解析当前组件的所有属性会根据组件的配置动态渲染成预期结果。优化了操作界面，将每次的数据格式转化为json封装，方便解析和存储。支持多模板和灵活配置属性。操作便捷，功能完善，该方法操作便捷，功能完善。
为实现上述目的，本发明提供如下技术方案：一种数据大屏的动态编辑方法，该方法包括以下步骤：S1：首先查找资料，设计构想，列举出需要实现的组件，列举组件的可配置属性，留出可自定已属性的接口和操作；
S2：添加自定义组件，自定义属性样式，可指定组件的解析方式，检测到当前编辑面板获取到当前的布局数据储存本地；
S3：根据用户保存数据到后台，登录后获取该用户的页面布局数据，根据预定算法解析，根据位置和大小信息渲染出每个组件；
S4：如有自定义解析算法，则按预算法解析，然后拿到每个组件的配置信息从后台获取数据并且展示；
S5：最后可以在已经呈现出来的组件上可以根据用户偏好选择不同的展示方式以及组件风格，结束。
优选的，所述数据大屏的动态编辑方法中包括组件名称，样式，大小，位置，展示数据方式，统计类型，预览效果图，每个组件都有默认属性和设置。
优选的，所述数据大屏的动态编辑方法中在添加有自定义属性的接口和操作，组件可自定义添加，并且可以自定义属性样式筹，自定义解析算法。
优选的，所述数据大屏的动态编辑方法中拿到组件列表和整体页面的布局数据后，解析数据时，先积算当前设备的尺寸，然后取出每个组件自己的位置及大小信息，按照设备尺寸进行比例划分。每个组件采用absolute定位方式方便布局，代码清晰明确。然后在每个组件中根据设置独立获取数据进而展示。考虑到页面数据过多或网络延时，为每个组件添加了加载动画优化了交互。
优选的，所述数据大屏的动态编辑方法中在页面上的每个组件鼠标经过会弹出再次配置的操作入口，可以继续修改数据展示和样式风格等属性
与现有技术相比，本发明的有益效果是：
本次实现的数据大屏的动态编辑方法主要针对易用性进行深刻分析，合理把控了组件设计的颗粒度，这样组件不会很繁多，但是每个组件可以设置自己的不同属性达到不同的数据展示方式。支持自定义组件，支持自定义属性。页面会解析当前组件的所有属性会根据组件的配置动态渲染成预期结果。优化了操作界面，将每次的数据格式转化为json封装，方便解析和存储。支持多模板和灵活配置属性。操作便捷，功能完善。
附图说明
图1为本发明一种数据大屏的动态编辑方法的步骤框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1，本发明提供一种技术方案：一种数据大屏的动态编辑方法，该方法包含以下步骤，首先用户通过查找资料，设计构想，列举出需要实现的组件，列举组件的可配置属性，然后在编辑面板里用户可根据自定义属性按照用户自己的想法或者默认属性组装出一套页面数据，并且将数据存在本地存储，防止刷新浏览器或者异常关闭丢失为保存的数据。点击保存或者应用时将数据发送到后台持久化，用户登陆后可获取保存的页面布局数据，然后解析数据，先积算当前设备的尺寸，然后取出每个组件自己的位置及大小信息，按照设备尺寸进行比例划分。每个组件采用absolute定位方式方便布局，代码清晰明确。然后在每个组件中根据设置独立获取数据进而展示。考虑到页面数据过多或网络延时，为每个组件添加了加载动画优化了交互，渲染每个组件后从后台得到每个组件的配置信息并获取数据和展示，解析的时候也可以添加自定义解析算法，最后在已经呈现出来的组件上可以根据用户的偏好选择不同的展示方式以及组件风格，在页面上的每个组件鼠标经过会弹出再次配置的操作入口，可以继续修改数据展示和样式风格等属性，实现二次编辑和修改。
数据大屏的动态编辑方法中包括组件名称，样式，大小，位置，展示数据方式，统计类型，预览效果图，每个组件都有默认属性和设置，数据大屏的动态编辑方法中在添加有自定义属性的接口和操作，组件可自定义添加，并且可以自定义属性样式筹，自定义解析算法，数据大屏的动态编辑方法中拿到组件列表和整体页面的布局数据，解析数据时，先积算当前设备的尺寸，然后取出每个组件自己的位置及大小信息，按照设备尺寸进行比例划分，每个组件采用absolute定位方式方便布局，代码清晰明确。然后在每个组件中根据设置独立获取数据进而展示。考虑到页面数据过多或网络延时，为每个组件添加了加载动画优化了交互。在页面上的每个组件鼠标经过会弹出再次配置的操作入口，可以继续修改数据展示和样式风格等属性
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (5)

1.一种数据大屏的动态编辑方法，其特征在于，包括以下步骤：
S1：首先查找资料，设计构想，列举出需要实现的组件，列举组件的可配置属性，留出可自定已属性的接口和操作；
S2：添加自定义组件，自定义属性样式，可指定组件的解析方式，检测到当前编辑面板获取到当前的布局数据储存本地；
S3：根据用户保存数据到后台，登录后获取该用户的页面布局数据，根据预定算法解析，根据位置和大小信息渲染出每个组件；
S4：如有自定义解析算法，则按预算法解析，然后拿到每个组件的配置信息从后台获取数据并且展示；
S5：最后可以在已经呈现出来的组件上可以根据用户偏好选择不同的展示方式以及组件风格，结束。
2.根据权利要求1所述的数据大屏的动态编辑方法，其特征在于：数据大屏的动态编辑方法中包括组件名称，样式，大小，位置，展示数据方式，统计类型，预览效果图，每个组件都有默认属性和设置。
3.根据权利要求2所述的数据大屏的动态编辑方法，其特征在于：数据大屏的动态编辑方法中在添加有自定义属性的接口和操作，组件可自定义添加，并且可以自定义属性样式筹，自定义解析算法。
4.根据权利要求3所述的数据大屏的动态编辑方法，其特征在于：数据大屏的动态编辑方法中拿到组件列表和整体页面的布局数据，解析数据时，先积算当前设备的尺寸，然后取出每个组件自己的位置及大小信息，按照设备尺寸进行比例划分，每个组件采用absolute定位方式方便布局，代码清晰明确，然后在每个组件中根据设置独立获取数据进而展示，考虑到页面数据过多或网络延时，为每个组件添加了加载动画优化了交互。
5.根据权利要求4所述的数据大屏的动态编辑方法，其特征在于：在页面上的每个组件鼠标经过会弹出再次配置的操作入口，可以继续修改数据展示和样式风格等属性。
CN202010052473.1A 2020-01-17 2020-01-17 一种数据大屏的动态编辑方法 Pending CN111290809A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010052473.1A CN111290809A (zh) 2020-01-17 2020-01-17 一种数据大屏的动态编辑方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010052473.1A CN111290809A (zh) 2020-01-17 2020-01-17 一种数据大屏的动态编辑方法

Publications (1)

Publication Number Publication Date
CN111290809A true CN111290809A (zh) 2020-06-16

Family

ID=71022285

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010052473.1A Pending CN111290809A (zh) 2020-01-17 2020-01-17 一种数据大屏的动态编辑方法

Country Status (1)

Country Link
CN (1) CN111290809A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966160A (zh) * 2021-03-08 2021-06-15 浪潮云信息技术股份公司 基于模板的多slide页大屏展示方法及装置
CN113094032A (zh) * 2021-05-10 2021-07-09 陕西共长天云计算有限公司 一种数据大屏的智能动态编辑方法
CN114489916A (zh) * 2022-03-08 2022-05-13 京东城市(北京)数字科技有限公司 可视化大屏页面组件的加载方法和装置
CN114817793A (zh) * 2022-06-24 2022-07-29 深圳市信润富联数字科技有限公司 页面生成方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107330053A (zh) * 2017-06-27 2017-11-07 北京天机数测数据科技有限公司 基于ReactJS的可视化设计器及数据大屏制作方法
US20170329746A1 (en) * 2016-05-12 2017-11-16 Alibaba Group Holding Limited Page component dynamic layout
CN108334635A (zh) * 2018-02-27 2018-07-27 浪潮软件集团有限公司 一种内容可定制化的智慧城市综合呈现系统
CN110908766A (zh) * 2019-12-04 2020-03-24 天津大海云科技有限公司 一种大屏定制化动态配置展示内容的方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170329746A1 (en) * 2016-05-12 2017-11-16 Alibaba Group Holding Limited Page component dynamic layout
CN107330053A (zh) * 2017-06-27 2017-11-07 北京天机数测数据科技有限公司 基于ReactJS的可视化设计器及数据大屏制作方法
CN108334635A (zh) * 2018-02-27 2018-07-27 浪潮软件集团有限公司 一种内容可定制化的智慧城市综合呈现系统
CN110908766A (zh) * 2019-12-04 2020-03-24 天津大海云科技有限公司 一种大屏定制化动态配置展示内容的方法

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966160A (zh) * 2021-03-08 2021-06-15 浪潮云信息技术股份公司 基于模板的多slide页大屏展示方法及装置
CN113094032A (zh) * 2021-05-10 2021-07-09 陕西共长天云计算有限公司 一种数据大屏的智能动态编辑方法
CN114489916A (zh) * 2022-03-08 2022-05-13 京东城市(北京)数字科技有限公司 可视化大屏页面组件的加载方法和装置
CN114817793A (zh) * 2022-06-24 2022-07-29 深圳市信润富联数字科技有限公司 页面生成方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN111290809A (zh) 一种数据大屏的动态编辑方法
US8607161B2 (en) Configurable icon sizing and placement for wireless and other devices
CN110045894B (zh) 用于对话框定制的系统和方法
CN110764850B (zh) 界面显示方法、参数赋值方法、系统及设备
US9134972B2 (en) User interface generation apparatus
CN109725901A (zh) 前端代码的开发方法、装置、设备和计算机存储介质
CN110489409B (zh) 一种动态扩展数据字段的方法及装置
US20160266766A1 (en) Three dimensional conditional formatting
KR20080015929A (ko) 전자 장치의 대기 화면 재구성
US20080244416A1 (en) Apparatus and method for creating and consuming custom visualization templates
CN109840303A (zh) 列表页面定制方法、装置、设备及计算机可读存储介质
CN112016023B (zh) 业务处理方法、装置、终端及存储介质
CN108804484A (zh) 数据审批方法、设备和计算机可读存储介质
CN114385164A (zh) 页面生成与渲染方法、装置、电子设备及存储介质
CN110908565A (zh) 一种定制屏幕主题的方法、装置、设备以及存储介质
KR101994933B1 (ko) 웹 브라우저 제공 방법, 장치 및 컴퓨터 프로그램
WO2013109858A1 (en) Design canvas
CN112527172A (zh) 界面显示方法及装置、计算机可读存储介质、电子设备
KR100959991B1 (ko) 휴대용 단말기에서의 사용자 인터페이스(ｕｉ) 화면 재구성방법 및 이를 수행하는 휴대용 단말기
KR101417253B1 (ko) 단말의 화면 표시 장치 및 방법
CN116755589B (zh) 更改可视化大屏的配色主题的方法、装置、介质及设备
CN114895995B (zh) 控件视图的生成方法、装置、电子设备及可读介质
CN112073793A (zh) 一种图像显示方法及装置
US20130275912A1 (en) Electronic apparatus and object processing method thereof
WO2020125541A1 (zh) 选项名称多元化选单设定装置与方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination