CN112667341A - 前端大屏数据展示的系统 - Google Patents
前端大屏数据展示的系统 Download PDFInfo
- Publication number
- CN112667341A CN112667341A CN202011638266.0A CN202011638266A CN112667341A CN 112667341 A CN112667341 A CN 112667341A CN 202011638266 A CN202011638266 A CN 202011638266A CN 112667341 A CN112667341 A CN 112667341A
- Authority
- CN
- China
- Prior art keywords
- information
- screen data
- template
- project
- display
- 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
- 238000009877 rendering Methods 0.000 claims description 4
- 239000000126 substance Substances 0.000 claims description 2
- 238000000034 method Methods 0.000 abstract description 7
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种前端大屏数据展示的系统，包括；前端和管理后台；前端用于进行前端大屏数据展示；管理后台用于提供数据接口和展示模板并配置前端的前端展示项；其中，前端对于大屏数据展示包括以下步骤：步骤1、通过HTTP获取指定的项目配置；步骤2、绘制页面，通过配置信息设置页面背景图；步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型。本发明的有益之处在于，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。
Description
技术领域
本发明涉及一种前端大屏数据展示的系统。
背景技术
在大屏数据展示的项目开发过程中，通常在前端针对该项目绘制页面，然后后台接口直接通过页面请求数据。对于同一类型的项目，后续也只是在原有代码基础上复制一份出来，改接口，改样式。后续样式变更，接口变更等微调需求变更问题，只能通过修改代码等方式来实现。对此多个项目，就需要每个项目去改一遍代码，操作起来枯燥且浪费时间。
发明内容
为解决现有技术的不足，本发明提供了一种前端大屏数据展示的系统，通过预设模板配置相关信息的方式，在后端只需提供数据接口，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。
为了实现上述目标，本发明采用如下的技术方案：
一种前端大屏数据展示的系统，包括；前端和管理后台；前端用于进行前端大屏数据展示；管理后台用于提供数据接口和展示模板并配置前端的前端展示项；
其中，
前端对于大屏数据展示包括以下步骤：
步骤1、通过HTTP获取指定的项目配置；
步骤2、绘制页面，通过配置信息设置页面背景图；
步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型。
进一步地，前端对于大屏数据展示还包括以下步骤：
步骤4、根据配置颜色信息，标题，利用echar绘制图形，展示步骤3获取的信息。
进一步地，展示模板包括：自定义模板和系统模板。
进一步地，管理后台对于大屏数据展示包括以下步骤：
步骤1、进入项目管理页面，配置项目信息；
步骤2、选择展示模板；
步骤3、保存配置。
进一步地，选择展示模板包括以下步骤：
对于自定义模板，自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板，直接选择展示位置；
配置项目数据列表，需要绘制的图像类型，图像类型的信息，接口地址。
进一步地，配置项目信息包括：项目名称、项目类目列表、数据接口列表和项目背景图。
进一步地，配置项目信息时，每个项目仅能选用一种模板。
进一步地，根据配置信息里面的接口地址，获取对应的数据及展示图像类型包括以下步骤；
步骤1、对于自定义模板读取用户自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板读取用户选择的展示位置获得系统预设位置信息；
步骤2、根据图像类型，拼接当前图像类型所需的数据格式；
步骤3、判断模板类型，根据模板类型选择对应的渲染方式。
进一步地，配置项目类目列表后，出现统计图类型列表以对区域统计图进行配置；
区域统计图包括：柱状图、折线图、饼图和地图。
进一步地，对于地图类型的操作包括以下步骤：
判断是否需要打点，若判断结果为否，则直接数据接口，若判断结果为是，则打开打点地图；
在打点地图上点击后，管理后台识别点击的点作为预录入点并向前端推送到预录入点预设距离内的数据库已存档点作为参考点，其中预录入点和多个参考点以单排列表的方式展示且预录入点位于单排列表的第一列；
若用户点击单排列表的预录入点，则将预录入点确定为正式录入点，接收用户配置的预录入点的信息，保存打点数据；
若用户点击单排列表的参考点，则展示参考点的信息并弹出是否修改信息的窗口；
若用户在是否修改信息的窗口选择是，则等待用户修改信息并将修改后的信息存储至数据库；用户在是否修改信息的窗口选择否，则关闭单排列表。
本发明的有益之处在于，通过预设模板配置相关信息的方式，在后端只需提供数据接口，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。
地图打点的方式，相比传统的直接录入打点的方式，在打点过程中提供新增点与数据库已存档点的比对，有效避免冗余数据的产生。
附图说明
图1是一种前端大屏数据展示的系统的示意图；
图2是图1中前端大屏数据展示的系统的地图类型的地图打点的流程图。
具体实施方式
以下结合附图和具体实施例对本发明作具体的介绍。
如图1和图2所示，一种前端大屏数据展示的系统，包括；前端和管理后台。前端用于进行前端大屏数据展示。管理后台用于提供数据接口和展示模板并配置前端的前端展示项。具体而言，展示模板包括：自定义模板和系统模板。
前端对于大屏数据展示包括以下步骤：
步骤1、通过HTTP获取指定的项目配置；
步骤2、绘制页面，通过配置信息设置页面背景图；
步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型；
步骤4、根据配置颜色信息，标题，利用echar绘制图形，展示步骤3获取的信息；
步骤5、页面渲染完成。
作为一种优选的实施方式，根据配置信息里面的接口地址，获取对应的数据及展示图像类型包括以下步骤；
步骤1、对于自定义模板读取用户自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板读取用户选择的展示位置获得系统预设位置信息；
步骤2、根据图像类型，拼接当前图像类型所需的数据格式；
步骤3、判断模板类型，根据模板类型选择对应的渲染方式。
作为一种优选的实施方式，管理后台对于大屏数据展示包括以下步骤：
步骤1、进入项目管理页面，配置项目信息；
步骤2、选择展示模板；
步骤3、保存配置。
进一步地，选择展示模板包括以下步骤：
对于自定义模板，自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板，直接选择展示位置(对于系统模板不用配置宽高以及相对于页面的X轴和Y轴的位置)；
配置项目数据列表，需要绘制的图像类型，图像类型的信息，接口地址。图像类型的信息包括图像类型(饼图，折线图，地图等类型)，以及当前图像类型位置、宽高、配色等信息。
作为一种具体的实施方式，配置项目信息包括：项目名称、项目类目列表、数据接口列表和项目背景图。配置项目信息时，每个项目仅能选用一种模板。
作为一种具体的实施方式，配置项目类目列表后，出现统计图类型列表以对区域统计图进行配置；区域统计图包括：柱状图、折线图、饼图和地图。
作为一种优选的实施方式，对于地图类型的操作包括以下步骤：
判断是否需要打点，若判断结果为否，则直接数据接口，若判断结果为是，则打开打点地图；
在打点地图上点击后，管理后台识别点击的点作为预录入点并向前端推送到预录入点预设距离内的数据库已存档点作为参考点，其中预录入点和多个参考点以单排列表的方式展示且预录入点位于单排列表的第一列；
若用户点击单排列表的预录入点，则将预录入点确定为正式录入点，接收用户配置的预录入点的信息，保存打点数据；
若用户点击单排列表的参考点，则展示参考点的信息并弹出是否修改信息的窗口；
若用户在是否修改信息的窗口选择是，则等待用户修改信息并将修改后的信息存储至数据库；用户在是否修改信息的窗口选择否，则关闭单排列表。
以上显示和描述了本发明的基本原理、主要特征和优点。本行业的技术人员应该了解，上述实施例不以任何形式限制本发明，凡采用等同替换或等效变换的方式所获得的技术方案，均落在本发明的保护范围内。
Claims (10)
1.一种前端大屏数据展示的系统，其特征在于，包括；前端和管理后台；所述前端用于进行前端大屏数据展示；所述管理后台用于提供数据接口和展示模板并配置所述前端的前端展示项；
其中，
所述前端对于大屏数据展示包括以下步骤：
步骤1、通过HTTP获取指定的项目配置；
步骤2、绘制页面，通过配置信息设置页面背景图；
步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型。
2.根据权利要求1所述的前端大屏数据展示的系统，其特征在于，
所述前端对于大屏数据展示还包括以下步骤：
步骤4、根据配置颜色信息，标题，利用echar绘制图形，展示步骤3获取的信息。
3.根据权利要求1所述的前端大屏数据展示的系统，其特征在于，
所述展示模板包括：自定义模板和系统模板。
4.根据权利要求3所述的前端大屏数据展示的系统，其特征在于，
所述管理后台对于前段大屏数据展示包括以下步骤：
步骤1、进入项目管理页面，配置项目信息；
步骤2、选择展示模板；
步骤3、保存配置。
5.根据权利要求4所述的前端大屏数据展示的系统，其特征在于，
所述选择展示模板包括以下步骤：
对于自定义模板，自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板，直接选择展示位置；
配置项目数据列表，需要绘制的图像类型，图像类型的信息，接口地址。
6.根据权利要求4所述的前端大屏数据展示的系统，其特征在于，
所述配置项目信息包括：项目名称、项目类目列表、数据接口列表和项目背景图。
7.根据权利要求4所述的前端大屏数据展示的系统，其特征在于，
配置项目信息时，每个项目仅能选用一种模板。
8.根据权利要求5所述的前端大屏数据展示的系统，其特征在于，
根据配置信息里面的接口地址，获取对应的数据及展示图像类型包括以下步骤；
步骤1、对于自定义模板读取用户自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板读取用户选择的展示位置获得系统预设位置信息；
步骤2、根据图像类型，拼接当前图像类型所需的数据格式；
步骤3、判断模板类型，根据模板类型选择对应的渲染方式。
9.根据权利要求1所述的前端大屏数据展示的系统，其特征在于，
配置项目类目列表后，出现统计图类型列表以对区域统计图进行配置；
所述区域统计图包括：柱状图、折线图、饼图和地图。
10.根据权利要求9所述的前端大屏数据展示的系统，其特征在于，
对于地图类型的操作包括以下步骤：
判断是否需要打点，若判断结果为否，则直接数据接口，若判断结果为是，则打开打点地图；
在打点地图上点击后，所述管理后台识别点击的点作为预录入点并向所述前端推送到所述预录入点预设距离内的数据库已存档点作为参考点，其中所述预录入点和多个所述参考点以单排列表的方式展示且所述预录入点位于所述单排列表的第一列；
若用户点击所述单排列表的预录入点，则将所述预录入点确定为正式录入点，接收用户配置的所述预录入点的信息，保存打点数据；
若用户点击所述单排列表的所述参考点，则展示所述参考点的信息并弹出是否修改信息的窗口；
若用户在是否修改信息的窗口选择是，则等待用户修改信息并将修改后的信息存储至数据库；用户在是否修改信息的窗口选择否，则关闭所述单排列表。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011638266.0A CN112667341A (zh) | 2020-12-31 | 2020-12-31 | 前端大屏数据展示的系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011638266.0A CN112667341A (zh) | 2020-12-31 | 2020-12-31 | 前端大屏数据展示的系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112667341A true CN112667341A (zh) | 2021-04-16 |
Family
ID=75413693
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011638266.0A Pending CN112667341A (zh) | 2020-12-31 | 2020-12-31 | 前端大屏数据展示的系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112667341A (zh) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106126154A (zh) * | 2016-08-31 | 2016-11-16 | 浪潮软件集团有限公司 | 一种大屏展示配置方法 |
| CN108920535A (zh) * | 2018-06-08 | 2018-11-30 | 厦门攸信信息技术有限公司 | 一种大屏输入方法及系统 |
-
2020
- 2020-12-31 CN CN202011638266.0A patent/CN112667341A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106126154A (zh) * | 2016-08-31 | 2016-11-16 | 浪潮软件集团有限公司 | 一种大屏展示配置方法 |
| CN108920535A (zh) * | 2018-06-08 | 2018-11-30 | 厦门攸信信息技术有限公司 | 一种大屏输入方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109614424B (zh) | 页面布局生成方法、装置、计算设备和介质 | |
| CN108090073B (zh) | 一种可配置物料清单的转换方法及装置 | |
| CN107430768B (zh) | 图像编辑和修补 | |
| US7903114B2 (en) | Apparatus and method for visualizing the relationship between a plurality of sets | |
| US20070091123A1 (en) | Image managing apparatus, image managing method and storage medium | |
| US7760405B2 (en) | Apparatus and method for integrating print preview with data modeling document editing | |
| WO2021154496A1 (en) | User interface design update automation | |
| CN113031938A (zh) | 一种可视化界面图像转化为编程语言数据的方法及装置 | |
| CN111414405A (zh) | 数据获取方法、装置及电子设备 | |
| CN112560422A (zh) | 一种图表的处理方法、装置、设备和介质 | |
| US20210240910A1 (en) | Automatically locating elements in user interfaces | |
| CN106535002B (zh) | 一种桌面启动器模板布局的更新方法及装置 | |
| US11474671B2 (en) | Neutralizing designs of user interfaces | |
| CN112667341A (zh) | 前端大屏数据展示的系统 | |
| JP2017111500A (ja) | 文字認識装置及びプログラム | |
| CN113988008A (zh) | 一种文档对象尺寸调整方法、装置、电子设备及存储介质 | |
| JP3890096B2 (ja) | 画像編集システム | |
| CN112000328B (zh) | 一种页面可视化编辑方法、装置及设备 | |
| CN115238662A (zh) | 一种招投标文件快速编辑方法及系统 | |
| CN114296711A (zh) | 一种Echarts图表生成系统及其工作方法 | |
| CN111783408B (zh) | 一种单元格的粘贴方法、装置、电子设备及存储介质 | |
| JP2021047688A (ja) | 帳票認識方法およびプログラム | |
| CN111161351B (zh) | 一种目标构件坐标获取方法及其系统 | |
| US11908050B2 (en) | Graphical user interface | |
| CN115080027B (zh) | web页面自动适配方法、装置、设备及存储介质 |
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 |