CN111221884A - 一种基于Vue.js框架的报表配置及显示的方法和装置 - Google Patents
一种基于Vue.js框架的报表配置及显示的方法和装置 Download PDFInfo
- Publication number
- CN111221884A CN111221884A CN201911415806.6A CN201911415806A CN111221884A CN 111221884 A CN111221884 A CN 111221884A CN 201911415806 A CN201911415806 A CN 201911415806A CN 111221884 A CN111221884 A CN 111221884A
- Authority
- CN
- China
- Prior art keywords
- report
- data
- displaying
- vue
- data source
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computational Linguistics (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及一种基于Vue.js框架的报表配置及显示的方法，将报表内容表格化，划分为多个单元格，具体配置及显示的步骤如下所示：步骤S1：获取报表内容，根据所述报表内容定义报表模板；步骤S2：设置数据源信息和数据行字段；步骤S3：加载所述报表模板；步骤S4：根据查询条件加载所述数据源信息中对应的数据源；步骤S5：根据所述数据行字段，生成报表行数据；步骤S6：根据生成的所述报表行数据，渲染所述报表内容并显示。与现有技术相比，本发明具有提高报表编辑的灵活性、通过WEB页面进行显示、方便随时随地查看报表内容等优点。
Description
技术领域
本发明涉及计算机技术领域，尤其是涉及一种基于Vue.js框架的报表配置及显示的方法和装置。
背景技术
在工业生产的过程中，***需要高频率连续不断地采集和保存海量的数据，尤其是在污水处理行业，每秒需要采集近千节点数据，需要追溯的历史时间较长，往往时间跨度在1年时间以上，因此对于记录节点数据的报表结构提出了更高的要求。现有污水处理厂***的表格只能在对应的***中进行查看，并且需要按照固定的模板结构进行编辑，缺少灵活性，基于本地***的设置意味着不能接入外来数据源，导致报表数据内容的更新较为困难。
发明内容
本发明的目的就是为了克服上述现有技术存在的只能在本地查看、需要按照固定模板编辑的缺陷而提供一种基于Vue.js框架的报表配置及显示的方法和装置。
本发明的目的可以通过以下技术方案来实现：
一种基于Vue.js框架的报表配置及显示的方法，将报表内容表格化，划分为多个单元格，具体配置及显示的步骤如下所示：
步骤S1：获取报表内容，根据所述报表内容定义报表模板；
步骤S2：设置数据源信息和数据行字段；
步骤S3：加载所述报表模板；
步骤S4：根据查询条件加载所述数据源信息中对应的数据源；
步骤S5：根据所述数据行字段，生成报表行数据；
步骤S6：根据生成的所述报表行数据，渲染所述报表内容并显示。
所述单元格以扩充的方式与其他单元格进行合并。
所述数据源信息包括数据源及数据处理函数。
优选的，每个所述数据源均设有独立的名称。
所述数据源的返回格式为JSON格式。
所述报表行数据包括循环行数据和非循环行数据。
优选的，所述步骤S8具体为将所述报表行数据合并到二维数组中，结合所述二维数组和报表模板渲染出所述报表内容。
优选的，所述报表内容的显示界面为WEB界面。
一种应用所述基于Vue.js框架的报表配置及显示的方法的装置，所述装置包括处理器和存储器，所述方法以计算机程序的方式存储在所述存储器中，由所述处理器执行，执行时实现以下步骤：
步骤S1：获取报表内容，根据所述报表内容定义报表模板；
步骤S2：设置数据源信息和数据行字段；
步骤S3：加载所述报表模板；
步骤S4：根据查询条件加载所述数据源信息中对应的数据源；
步骤S5：根据所述数据行字段，生成报表行数据；
步骤S6：根据生成的所述报表行数据，渲染所述报表内容并显示。
与现有技术相比，本发明具有以下有益效果：
1.本发明将报表的报表内容表格化，划分为多个单元格，方便操作人员对报表内容进行修改、处理，提升了报表编辑的灵活性。
2.本发明报表内容的显示界面为WEB界面，不局限于报表本身所在***，支持第三方***访问报表，方便随时对于报表内容进行查看。
3.本发明简单、易操作，无需借助单独报表模板设计程序，可以根据报表内容的需要自定义报表模板，提高了报表模板的适用性。
4.本发明持多数据源数据接入，通过多数据源的方式可以轻松实现复杂报表的数据展示，使报表具有可扩展性，丰富了报表内容。
附图说明
图1为本发明的流程示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
如图1所示，一种基于Vue.js框架的报表配置及显示的方法，将报表内容表格化，划分为多个单元格，具体配置及显示的步骤如下所示：
步骤S1：获取报表内容，根据报表内容定义报表模板；
步骤S2：设置数据源信息和数据行字段；
步骤S3：根据报表ID加载对应的已完成定义的报表模板；
步骤S4：根据查询条件加载数据源信息中对应的数据源；
步骤S5：根据数据行字段，生成报表行数据；
步骤S6：根据生成的报表行数据，渲染报表内容并显示。
单元格以扩充的方式与其他单元格进行合并。
数据源信息包括数据源及数据处理函数。
数据源包括Restful地址及查询参数。
每个数据源均设有独立的名称，方便报表行数据对其进行引用。
单元格中的数据在经数据处理函数处理完成后再在单元格中显示。
数据源的返回格式为JSON格式。
报表行数据包括循环行数据和非循环行数据，其中：
循环行数据的数据字段的名称格式为#dsName.rows.fieldname#；
非循环行数据的数据字段的名称格式为#dsName.first.fieldname#。
报表行数据中的所有数据字段都可以编写表达式，按照报表模板中的数据格式进行逐行解析，当遇到循环行时进行循环数据解析处理，当循环行的数据解析完成之后，继续对报表行数据进行解析直到报表行数据的末尾。
步骤S8具体为将报表行数据合并到二维数组中，结合二维数组和报表模板渲染出报表内容。
报表内容的显示界面为WEB界面。
一种应用基于Vue.js框架的报表配置及显示的方法的装置，装置包括处理器和存储器，方法以计算机程序的方式存储在存储器中，由处理器执行，执行时实现以下步骤：
步骤S1：获取报表内容，根据报表内容定义报表模板；
步骤S2：设置数据源信息和数据行字段；
步骤S3：根据报表ID加载对应的已完成定义的报表模板；
步骤S4：根据查询条件加载数据源信息中对应的数据源；
步骤S5：根据数据行字段，生成报表行数据；
步骤S6：根据生成的报表行数据，渲染报表内容并显示。
此外，需要说明的是，本说明书中所描述的具体实施例，所取名称可以不同，本说明书中所描述的以上内容仅仅是对本发明结构所做的举例说明。凡依据本发明构思的构造、特征及原理所做的等小变化或者简单变化，均包括于本发明的保护范围内。本发明所属技术领域的技术人员可以对所描述的具体实例做各种各样的修改或补充或采用类似的方法，只要不偏离本发明的结构或者超越本权利要求书所定义的范围，均应属于本发明的保护范围。
Claims (9)
1.一种基于Vue.js框架的报表配置及显示的方法，其特征在于，将报表内容表格化，划分为多个单元格，具体配置及显示的步骤如下所示：
步骤S1：获取报表内容，根据所述报表内容定义报表模板；
步骤S2：设置数据源信息和数据行字段；
步骤S3：加载所述报表模板；
步骤S4：根据查询条件加载所述数据源信息中对应的数据源；
步骤S5：根据所述数据行字段，生成报表行数据；
步骤S6：根据生成的所述报表行数据，渲染所述报表内容并显示。
2.根据权利要求1所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，所述单元格以扩充的方式与其他单元格进行合并。
3.根据权利要求1所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，所述数据源信息包括数据源及数据处理函数。
4.根据权利要求3所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，每个所述数据源均设有独立的名称。
5.根据权利要求3所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，所述数据源的返回格式为JSON格式。
6.根据权利要求1所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，所述报表行数据包括循环行数据和非循环行数据。
7.根据权利要求1所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，所述步骤S8具体为将所述报表行数据合并到二维数组中，结合所述二维数组和报表模板渲染出所述报表内容。
8.根据权利要求1所述的一种基于Vue.js框架的报表配置及显示的方法，其特征在于，所述报表内容的显示界面为WEB界面。
9.一种应用如权利要求1-8所述的基于Vue.js框架的报表配置及显示的方法的装置，其特征在于，所述装置包括处理器和存储器，所述方法以计算机程序的方式存储在所述存储器中，由所述处理器执行，执行时实现以下步骤：
步骤S1：获取报表内容，根据所述报表内容定义报表模板；
步骤S2：设置数据源信息和数据行字段；
步骤S3：加载所述报表模板；
步骤S4：根据查询条件加载所述数据源信息中对应的数据源；
步骤S5：根据所述数据行字段，生成报表行数据；
步骤S6：根据生成的所述报表行数据，渲染所述报表内容并显示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911415806.6A CN111221884A (zh) | 2019-12-31 | 2019-12-31 | 一种基于Vue.js框架的报表配置及显示的方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911415806.6A CN111221884A (zh) | 2019-12-31 | 2019-12-31 | 一种基于Vue.js框架的报表配置及显示的方法和装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111221884A true CN111221884A (zh) | 2020-06-02 |
Family
ID=70827042
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911415806.6A Pending CN111221884A (zh) | 2019-12-31 | 2019-12-31 | 一种基于Vue.js框架的报表配置及显示的方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111221884A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150324423A1 (en) * | 2012-11-26 | 2015-11-12 | Zte Corporation | Report creation method, device and system |
| CN105183489A (zh) * | 2015-10-10 | 2015-12-23 | 南京国电南自轨道交通工程有限公司 | 一种基于Extjs框架的数据智能分析***及方法 |
| CN105760370A (zh) * | 2014-12-14 | 2016-07-13 | 云南电力调度控制中心 | 一种插件式报表框架技术 |
| CN108536660A (zh) * | 2018-04-03 | 2018-09-14 | 福建榕基软件工程有限公司 | 一种自定义报表的生成方法及终端 |
-
2019
- 2019-12-31 CN CN201911415806.6A patent/CN111221884A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150324423A1 (en) * | 2012-11-26 | 2015-11-12 | Zte Corporation | Report creation method, device and system |
| CN105760370A (zh) * | 2014-12-14 | 2016-07-13 | 云南电力调度控制中心 | 一种插件式报表框架技术 |
| CN105183489A (zh) * | 2015-10-10 | 2015-12-23 | 南京国电南自轨道交通工程有限公司 | 一种基于Extjs框架的数据智能分析***及方法 |
| CN108536660A (zh) * | 2018-04-03 | 2018-09-14 | 福建榕基软件工程有限公司 | 一种自定义报表的生成方法及终端 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105045775A (zh) | 一种指定格式的Excel文档生成方法及装置 | |
| US9082189B2 (en) | Automated bounding box generation within the boundaries of arbitrary shapes | |
| CN112527848B (zh) | 基于多数据源的报表数据查询方法、装置、***及存储介质 | |
| JPWO2013161850A1 (ja) | テキストマイニングシステム、テキストマイニング方法及びプログラム | |
| CN106780149A (zh) | 一种基于定时任务调度的设备实时监测*** | |
| US20140074878A1 (en) | Spreadsheet schema extraction | |
| CN109783097A (zh) | 绘制web频率图插件的实现方法 | |
| CN111221884A (zh) | 一种基于Vue.js框架的报表配置及显示的方法和装置 | |
| CN106843819B (zh) | 对象序列化的方法及装置 | |
| CN111563399B (zh) | 获取电子病历的结构化信息的方法及装置 | |
| CN109410662B (zh) | 一种汉字多媒体卡片的制作方法及装置 | |
| CN116956381A (zh) | 一种bim项目数据定制化表单配置方法及装置 | |
| CN112446199A (zh) | 一种基于可视化模板的报表生成方法 | |
| CN115857929A (zh) | 资源数据处理方法、装置、计算机设备和存储介质 | |
| CN115202647A (zh) | 一种数据分析可视化方法及*** | |
| CN104317600A (zh) | 一种可配置的曲线图生成方法及*** | |
| CN114116880A (zh) | 数据可视化方法、***、设备及介质 | |
| CN109783548B (zh) | 主数据融合可视化显示方法、***、电子装置及存储介质 | |
| CN112100266B (zh) | 大数据图谱分析方法及*** | |
| CN111124482A (zh) | 文案信息的配置方法和装置 | |
| CN116881244B (zh) | 一种基于列存数据库的空间数据的实时处理方法及装置 | |
| CN109637205A (zh) | 一种汉字学习***和方法 | |
| CN112000414B (zh) | 参数信息的可配置化显示方法及装置 | |
| CN118035665A (zh) | 一种流程自定义模式在数据分析中应用方法 | |
| CN111143464A (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 |