CN115328466A - 基于数据结构体回显的高复用性大屏可视化配置方法 - Google Patents
基于数据结构体回显的高复用性大屏可视化配置方法 Download PDFInfo
- Publication number
- CN115328466A CN115328466A CN202211263951.9A CN202211263951A CN115328466A CN 115328466 A CN115328466 A CN 115328466A CN 202211263951 A CN202211263951 A CN 202211263951A CN 115328466 A CN115328466 A CN 115328466A
- Authority
- CN
- China
- Prior art keywords
- layout
- data structure
- dragging
- reusability
- configuration
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 31
- 230000000007 visual effect Effects 0.000 title claims abstract description 14
- 238000012800 visualization Methods 0.000 claims description 10
- 238000005034 decoration Methods 0.000 claims description 4
- 230000003068 static effect Effects 0.000 claims description 4
- 239000003086 colorant Substances 0.000 claims description 3
- 230000008878 coupling Effects 0.000 abstract description 4
- 238000010168 coupling process Methods 0.000 abstract description 4
- 238000005859 coupling reaction Methods 0.000 abstract description 4
- 238000004883 computer application Methods 0.000 abstract description 2
- 238000011161 development Methods 0.000 description 14
- 230000003252 repetitive effect Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000005553 drilling Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供基于数据结构体回显的高复用性大屏可视化配置方法，涉及计算机应用技术领域。该基于数据结构体回显的高复用性大屏可视化配置方法，包括以下步骤：步骤一、开启软件进入配置选择模式，选择快速布局或进行自定义布局；步骤二、选择快速布局模式后对尺寸进行选择，尺寸比例选择32:9或16:9，比例选择完成后确认布局类型为左右布局或U型布局。通过将组件库项目、大屏拖拽配置项目整合成一个整体使用，其中大屏拖拽项目开发完成之后不需要再改动，组件库项目可不断扩展维护，以增加组件库的丰富性，同时保证业务之间的低耦合，可有效提高项目的稳定性。
Description
技术领域
本发明涉及计算机应用技术领域，具体为基于数据结构体回显的高复用性大屏可视化配置方法。
背景技术
随着全社会数字化进程的加速发展，对大数据的统计和展示要求也在日益提高，小到公司报表展示，大到城市运行统计分析，在大屏幕中展现大数据的需求越来越多，面对与日俱增的大屏数据展示需求，有一套快速搭建，快速布局，快速应用的大屏配置系统显得尤为重要。
现有大屏项目开发需要投入大量的前后端开发人员，开发周期过长，并且开发出来的项目定制化程度高，可复用程度低，市面上的同类产品配置过程过于繁琐，不易上手，不能很好的解决非编程人员可直接上手生成可用于生产的大屏展示页面的痛点。
发明内容
（一）解决的技术问题
针对现有技术的不足，本发明提供了基于数据结构体回显的高复用性大屏可视化配置方法，解决了现有技术重在数据源的配置，面向普通用户，存在不易上手的痛点且项目可复用程度低的问题。
（二）技术方案
为实现以上目的，本发明通过以下技术方案予以实现：基于数据结构体回显的高复用性大屏可视化配置方法，包括以下步骤：
步骤一、开启软件进入配置选择模式，选择快速布局或进行自定义布局；
步骤二、选择快速布局模式后对尺寸进行选择，尺寸比例选择32:9或16:9，比例选择完成后确认布局类型为左右布局或U型布局；
步骤三、配置选择模式为自定义布局后根据需要输入屏幕分辨率以生成画布，画布生成后定义栅格系统：对列数、行高、最大行数、栅格中元素边距进行依次确定，最后选中栅格元素并定义元素属性；
步骤四、选择装饰与文字颜色后根据需要拖拽调整各组件位置，生成拖拽组件库；
步骤五、保存调配好的拖拽配置并生成一套记录整体布局方式的数据结构体文件。
优选的，所述步骤三中定义元素属性具体为：拖拽元素判断其是否为静态，并依次对栅格元素的最小高度、最大宽度和最大高度进行确定。
优选的，所述步骤四中拖拽组件库具体为：拖拽背景图与拖拽子组件。
优选的，所述拖拽子组件包括：饼图、柱形图、折线图、雷达图和气泡图。
优选的，所述步骤五中保存拖拽配置时需要将生成的数据结构体文件上传到数据库进行保存。
优选的，所述步骤一中快速布局模式可适用于非编程人员进行快速配置。
优选的，所述数据结构体文件中记录所使用到的组件的每一个参数信息，能够通过直接修改json字段进行布局位置及大小的修改。
优选的，拖拽组件库与拖拽配置分别为两个独立的项目，可单独部署，他们之间通过qiankun微服务框架进行通信。
（三）有益效果
本发明提供了基于数据结构体回显的高复用性大屏可视化配置方法。具备以下有益效果：
1、本发明通过将组件库项目、大屏拖拽配置项目整合成一个整体使用，其中大屏拖拽项目开发完成之后不需要再改动，组件库项目可不断扩展维护，以增加组件库的丰富性，同时保证业务之间的低耦合，可有效提高项目的稳定性。
2、本发明通过整个配置过程简单可视，不涉及任何专业性知识，对非编程人员友好简便，另外针对需要快速微调局部的使用场景，可直接修改配置文件进行微调，能适用于应急演练。
3、本发明通过简单配置及拖拽快速生成大屏可视化页面，同时，每个组件基于栅格化系统，可随意调整大小并保证组件自适应不变形，相同组件仅需要开发一次，用户可无限次使用，减少了重复性工作，降低了开发成本。
附图说明
图1为本发明的使用流程示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例一：
如图1所示，本发明实施例提供基于数据结构体回显的高复用性大屏可视化配置方法，包括以下步骤：
步骤一、开启软件进入配置选择模式，选择快速布局或进行自定义布局；
步骤二、选择快速布局模式后对尺寸进行选择，尺寸比例选择16:9，比例选择完成后确认布局类型为左右布局或U型布局；
步骤三、配置选择模式为自定义布局后根据需要输入屏幕分辨率以生成画布，画布生成后定义栅格系统：对列数、行高、最大行数、栅格中元素边距进行依次确定，最后选中栅格元素并定义元素属性；
步骤四、选择装饰与文字颜色后根据需要拖拽调整各组件位置，生成拖拽组件库；
步骤五、保存调配好的拖拽配置并生成一套记录整体布局方式的数据结构体文件。
通过简单配置及拖拽快速生成大屏可视化页面，同时，每个组件基于栅格化系统，可随意调整大小并保证组件自适应不变形，相同组件仅需要开发一次，用户可无限次使用，减少了重复性工作，降低了开发成本。
步骤三中定义元素属性具体为：拖拽元素判断其是否为静态，并依次对栅格元素的最小高度、最大宽度和最大高度进行确定。
步骤四中拖拽组件库具体为：拖拽背景图与拖拽子组件。
拖拽子组件包括：饼图、柱形图、折线图、雷达图和气泡图。
步骤五中保存拖拽配置时需要将生成的数据结构体文件（josn文件）上传到数据库进行保存。
当需要展示大屏可视化页面时通过读取配置生成的数据结构体文件进行回显，从而达到所配即所得的，无需编辑代码的大屏展示页面。
步骤一中快速布局模式可适用于非编程人员进行快速配置。
快速布局模式可快速选定自身所需的布局并对其进行配置，即使是非编程人员也能够快速配置。
数据结构体文件中记录所使用到的组件的每一个参数信息，能够通过直接修改json字段进行布局位置及大小的修改。
拖拽组件库与拖拽配置分别为两个独立的项目，可单独部署，他们之间通过qiankun微服务框架进行通信。
避免扩充组件库的时候影响到拖拽配置项目，这样一能保障拖拽项目一次开发之后一劳永逸，无需再动，二能保障开发组件库时无需顾及其他，瞻前顾后，从而提高开发效率。综上所述，此种模式可以完美解决多个不同团队之间协同开发沟通成本高，组件库与拖拽配置耦合度高，整体开发效率低的问题。
实施例二：
如图1所示，本发明实施例提供基于数据结构体回显的高复用性大屏可视化配置方法，包括以下步骤：
步骤一、开启软件进入配置选择模式，选择快速布局或进行自定义布局；
步骤二、选择快速布局模式后对尺寸进行选择，尺寸比例选择32:9或16:9，比例选择完成后确认布局类型为左右布局或U型布局；
步骤三、配置选择模式为自定义布局后根据需要输入屏幕分辨率以生成画布，画布生成后定义栅格系统：对列数、行高、最大行数、栅格中元素边距进行依次确定，最后选中栅格元素并定义元素属性；
步骤四、选择装饰与文字颜色后根据需要拖拽调整各组件位置，生成拖拽组件库；
步骤五、保存调配好的拖拽配置并生成一套记录整体布局方式的数据结构体文件。
通过简单配置及拖拽快速生成大屏可视化页面，同时，每个组件基于栅格化系统，可随意调整大小并保证组件自适应不变形，相同组件仅需要开发一次，用户可无限次使用，减少了重复性工作，降低了开发成本。
步骤三中定义元素属性具体为：拖拽元素判断其是否为静态，并依次对栅格元素的最小高度、最大宽度和最大高度进行确定。
步骤四中拖拽组件库具体为：拖拽背景图与拖拽子组件。
拖拽子组件包括：饼图、柱形图、折线图、雷达图和气泡图。
步骤五中保存拖拽配置时需要将生成的数据结构体文件（josn文件）上传到数据库进行保存。
当需要展示大屏可视化页面时通过读取配置生成的数据结构体文件（josn文件）进行回显，从而达到所配即所得的，无需编辑代码的大屏展示页面。
步骤一中快速布局模式可适用于非编程人员进行快速配置。
快速布局模式可快速选定自身所需的布局并对其进行配置，即使是非编程人员也能够快速配置。
数据结构体文件中记录所使用到的组件的每一个参数信息，能够通过直接修改json字段进行布局位置及大小的修改。
拖拽组件库与拖拽配置分别为两个独立的项目，可单独部署，他们之间通过qiankun微服务框架进行通信。
避免扩充组件库的时候影响到拖拽配置项目，这样一能保障拖拽项目一次开发之后一劳永逸，无需再动，二能保障开发组件库时无需顾及其他，瞻前顾后，从而提高开发效率。综上所述，此种模式可以完美解决多个不同团队之间协同开发沟通成本高，组件库与拖拽配置耦合度高，整体开发效率低的问题。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (8)
1.基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：包括以下步骤：
步骤一、开启软件进入配置选择模式，选择快速布局或进行自定义布局；
步骤二、选择快速布局模式后对尺寸进行选择，尺寸比例选择32:9或16:9，比例选择完成后确认布局类型为左右布局或U型布局；
步骤三、配置选择模式为自定义布局后根据需要输入屏幕分辨率以生成画布，画布生成后定义栅格系统：对列数、行高、最大行数、栅格中元素边距进行依次确定，最后选中栅格元素并定义元素属性；
步骤四、选择装饰与文字颜色后根据需要拖拽调整各组件位置，生成拖拽组件库；
步骤五、保存调配好的拖拽配置并生成一套记录整体布局方式的数据结构体文件。
2.根据权利要求1所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述步骤三中定义元素属性具体为：拖拽元素判断其是否为静态，并依次对栅格元素的最小高度、最大宽度和最大高度进行确定。
3.根据权利要求1所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述步骤四中拖拽组件库具体为：拖拽背景图与拖拽子组件。
4.根据权利要求3所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述拖拽子组件包括：饼图、柱形图、折线图、雷达图和气泡图。
5.根据权利要求1所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述步骤五中保存拖拽配置时需要将生成的数据结构体文件上传到数据库进行保存。
6.根据权利要求1所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述步骤一中快速布局模式适用于非编程人员进行快速配置。
7.根据权利要求1所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述数据结构体文件中记录所使用到的组件的每一个参数信息，能够通过直接修改json字段进行布局位置及大小的修改。
8.根据权利要求1所述的基于数据结构体回显的高复用性大屏可视化配置方法，其特征在于：所述拖拽组件库与拖拽配置分别为两个独立的项目，单独部署，他们之间通过qiankun微服务框架进行通信。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211263951.9A CN115328466A (zh) | 2022-10-17 | 2022-10-17 | 基于数据结构体回显的高复用性大屏可视化配置方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211263951.9A CN115328466A (zh) | 2022-10-17 | 2022-10-17 | 基于数据结构体回显的高复用性大屏可视化配置方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115328466A true CN115328466A (zh) | 2022-11-11 |
Family
ID=83915507
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211263951.9A Pending CN115328466A (zh) | 2022-10-17 | 2022-10-17 | 基于数据结构体回显的高复用性大屏可视化配置方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115328466A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115964037A (zh) * | 2023-01-05 | 2023-04-14 | 三峡高科信息技术有限责任公司 | 一种工程数据可视化低代码配置方法及系统 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040090472A1 (en) * | 2002-10-21 | 2004-05-13 | Risch John S. | Multidimensional structured data visualization method and apparatus, text visualization method and apparatus, method and apparatus for visualizing and graphically navigating the world wide web, method and apparatus for visualizing hierarchies |
| CN110597586A (zh) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | 基于拖拽的组件化布局大屏方法和装置 |
| CN112130943A (zh) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | 一种自定义可视化布局设计的方法 |
| CN113656019A (zh) * | 2021-07-27 | 2021-11-16 | 克拉玛依油城数据有限公司 | 基于拖拽方式开发数据大屏方法 |
-
2022
- 2022-10-17 CN CN202211263951.9A patent/CN115328466A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040090472A1 (en) * | 2002-10-21 | 2004-05-13 | Risch John S. | Multidimensional structured data visualization method and apparatus, text visualization method and apparatus, method and apparatus for visualizing and graphically navigating the world wide web, method and apparatus for visualizing hierarchies |
| CN110597586A (zh) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | 基于拖拽的组件化布局大屏方法和装置 |
| CN112130943A (zh) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | 一种自定义可视化布局设计的方法 |
| CN113656019A (zh) * | 2021-07-27 | 2021-11-16 | 克拉玛依油城数据有限公司 | 基于拖拽方式开发数据大屏方法 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115964037A (zh) * | 2023-01-05 | 2023-04-14 | 三峡高科信息技术有限责任公司 | 一种工程数据可视化低代码配置方法及系统 |
| CN115964037B (zh) * | 2023-01-05 | 2023-08-29 | 三峡高科信息技术有限责任公司 | 一种工程数据可视化低代码配置方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Satyanarayan et al. | Critical reflections on visualization authoring systems | |
| US6480194B1 (en) | Computer-related method, system, and program product for controlling data visualization in external dimension(s) | |
| JP2020521214A (ja) | フォームのカスタマイズ方法及び装置 | |
| US20110167336A1 (en) | Gesture-based web site design | |
| JP4912139B2 (ja) | 情報処理装置 | |
| US20050195436A1 (en) | Print data editing apparatus and print data editing program | |
| CN103106188A (zh) | 数据模型的图形化分析系统和图形化分析方法 | |
| JP4262164B2 (ja) | 情報処理装置及びその制御方法、プログラム | |
| JP2006048533A (ja) | 情報処理装置及びその制御方法、プログラム | |
| WO2021174752A1 (zh) | 环境空气质量数据可视化方法、装置、设备和存储介质 | |
| CN115328466A (zh) | 基于数据结构体回显的高复用性大屏可视化配置方法 | |
| CN115188349B (zh) | 移动可变交通信息牌自定义内容编辑方法及系统 | |
| JPH0419568B2 (zh) | ||
| CN112241265A (zh) | 可视化的页面处理方法和设备 | |
| CN114138269A (zh) | 业务数据的可视化应用构建方法和装置 | |
| JP4100765B2 (ja) | コンピュータイラストレーションシステムによるシーン画像合成の簡略化方法 | |
| JP3527615B2 (ja) | レイアウト組版方法 | |
| KR20180135654A (ko) | 프로그램의 직관적 제작방법 | |
| DE112009004615T5 (de) | Animationsbearbeitungsvorrichtung und Animationswiedergabevorrichtung | |
| CN116610404A (zh) | 一种自动生成数据可视化大屏的实现方法及系统 | |
| CN115691772A (zh) | 运营可视化系统及相应计算机设备和存储介质 | |
| WO2020098116A1 (zh) | 节目制作方法、装置、系统及计算机可读介质 | |
| CN115426520A (zh) | 一种对直播间的直播场景进行布置的方法、装置及设备 | |
| CN115186320A (zh) | 生成搭建文档的方法 | |
| CN113360559A (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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20221111 |