自定义报表(填入数据自动生成报表)

今天，我们来谈谈自定义报表和大屏幕可视化监控的设计。我们将分三部分来谈论它。先来看看目前主流的商业报表工具的功能特点，再来分别说说报表设计和大屏可视化监控设计。

商用报表工具的实现思路

图片来源网络图像源网络

最近在网上搜索自定义报表，监控大屏的制作，找到了FineReport报表制作工具。

FineReport报表软件是一款企业级的web报表工具，功能比较纯粹。凭借其“专业、简单、灵活”的特点和无代码的理念，可以通过简单的拖拽，设计复杂的中国式报表，构建数据决策分析系统。

这个报表制作工具还是比较普及的，常见的报表定制、多维分析、统计汇总、钻取钻取、图形可视化等。你能想到的基本都能实现。可以连接各种关系数据库作为数据源，也支持你手工填写数据，收集汇总，然后呈现报表。关键是这个报表的很多能力都是基于Excel的。只有你具备基本的Excel技能，不需要太多的编码能力就可以完成报表的开发和制作。

至于监控大屏的制作，是report今年扩展的一个关键能力，FinedReport正好提供了这个能力。

你可以看看下面这篇文章:http://bbs.fanruan.com/thread-94898-1-1.html

相信看完这篇文章，你会发现，做一个大的显示器屏幕可以这么容易。我们也在考虑如何在没有这个工具的情况下制作一个大的监控屏幕，包括选择类似百度Echart的图表，找一个美工来设计整体的界面风格和配色，确定需要在大的监控屏幕上显示的内容。

看了上面的文章，我最大的感受是，在做任何事情的时候，我们都可以从大量的特殊性和差异性中抽象出共性，同时参数化和模板化差异性，来完成对这类事情的通用模板和常规设计。

以监视器屏幕为例。要达到以上能力，首先你需要有大量的监视器屏设计开发的实践，或者至少观察大量的监视器屏实现的例子。其次，你需要有足够的抽象能力，找到共性，完成从特殊到一般的过程。从FineReport做大屏显示器的能力来看，这种思路也完全适用于我们日常的产品化规划设计工作。

所谓软件产品化，不过是从大量个性化的业务场景中提取共性能力，并将个性能力参数化的过程。

回顾一下monitor大屏实现，你会发现经过抽象和模板化之后，整个实现过程本身是非常简单的。

选择布局和排版，这个本身可以表格化和模板化，足够解决问题。选择基本的配色体系，在前面我们可以预设常用的配色体系，供选择即可。选择每个Panel里面的数据呈现方式(文字，数字，表格，各种图形，地图，关系等）为每个Panel的数据呈现配置相应的数据源实现一些最后的点缀，动态实时效果等。

以上步骤也是我们自己开发监控大屏时常用的方法和步骤，但FineReport将这个过程进一步参数化和模板化。难点在于经过大量的观察和实践，抽象出这个通用的模型和能力。

最后，网上还有一些关于FineReport的简洁和强大功能的总结，而这些总结本身就体现了长期以来在某个专业方向或领域的持续积累，对简单易用的产品理念的坚持，对用户使用场景的深刻洞察，以及对各种产品细节的不断优化，这些都是不可或缺的。

一个产品要想成功，往往需要这样长期的坚持和努力，不断的优化和改进，对一线用户需求的积极响应和分析。很多时候，我们的产品做得不好，一是脱离用户，二是迎合潮流，追随时尚。很多产品因为推广不好而半途而废，换一个新产品研发，本质上和猴子破玉米没太大区别。

真正的产品成功最重要的是长期的坚持和积累，永不放弃。真正有用的产品，往往是你重视用户需求，并根据用户需求不断打磨抽象出来的型号。

FineReport网站:http://www.fanruan.com/finemax/

自定义报表功能设计思路

对于自定义报表，使用上述商业报表平台或工具实现大屏幕显示。其实说到报表，人们更多谈论的是BI分析应用中常用的各种报表工具，比如国内的Crystal Reports、FineReport等。一个商业报表平台或工具，看起来功能强大，但概括起来就是数据采集、设计和展现。

数据采集：从结构化数据库，各类文件数据源，也包括直接提供手工填报端的自动生成。报表设计器：提供独立的报表设计器能力，支持类似分组，切片，钻取等各类复杂场景，支持各类图表。报表展示：报表展示支持各类图表的展示，支持自定义参数查询，支持类似监控大屏等。

我不打算在这里详细讨论商业定制报告功能。对于我们大部分的业务系统来说，所需的报表能力往往没有BI系统报表那么强大，更多的可以理解为自定义查询能力的可定制图表展示。那么我们在实现一个自定义报表的时候就要考虑如何从这两个方面来实现一个报表。

在考虑这个问题的时候，我们先考虑报表设计者的问题。至于最终的报表展现效果，我们可以看到可以分为自定义查询条件和报表内容展现区。报告内容显示区域可以理解为独立的小部件面板。每个面板显示一个内容，可以是图表或表格。面板面板中的内容可以自行定制。

整体显示效果如下所示:

下面我们来拆分几个关键功能。

1.数据源的定义

数据源定义的关键是通过数据源形成一个可以显示在报表界面上的数据集。因此，该函数建议不仅简单地定义数据源，还可以定义数据集或数据对象。因为数据集本身是可重用的，所以不需要重复设计。

数据源可以通过JDBC或WebService接口连接，但实际上，最好的解决方案是使用WS服务接口获取数据集。这样可以进一步保证后端数据库的安全性。

为了更好地支持参数化查询，可以用参数化查询条件从外围导入数据集的定义。

2.单一数据面板的定义

其实单数据面板的定义很简单，就是实现数据集和数据显示组件的绑定。数据面板可以是传统的表格、折线图、曲线图、饼图等。目前如果采用百度Echart海图库，我们可以支持Echart海图库的大部分图形显示。

一般来说，数据集是具有二维结构的数据对象的返回。这种二维结构很容易影响表格，也可以映射成我们想要展示的各种形状，比如折线、曲线、饼状图等。

3.总体查询报告页面的设计和定义。

从整体查询报表的设计可以看出，主要工作是定义自定义查询面板，定义并选择需要在报表中显示的单个数据面板。确定查询结果面板的具体布局形式。

对于面板布局，可以采用最简单的网格布局。在定义了一个标准的网格布局之后，我们很容易配置一个面板占据多少列和多少行。同时，在设计单面板时，我们还需要将单面板中要输入的参数和自定义查询中的查询条件参数进行映射绑定，从而完成查询条件的导入。

4.最终报告设计内容的分析和演示。

实现方式有两种，一种是动态生成代码，然后自动编译成独立的部署包。另一种方式是所有报表展现都只由一组动态代码执行，即整个页面都是基于配置参数动态生成的。

第一种方法性能更好，但需要在配置改变后重新部署；第二种方法性能稍差，但好在可以完全动态调整。

单个完整报表的最终呈现可以理解为一个url地址，具体的报表id信息传入。同时，单个报表的展现也需要考虑单点集成，预留用户id、组织id、名称等与Session相关的全局参数。

可视化监控大屏的实现

在网上搜索下，可以看到有很多专门做监控大屏可视化的解决方案，包括一些不错的报表平台软件，他们也对监控大屏可视化进行了优化，可以定制，可以配置。关于大屏监控的实现，目前可以用百度Echart定制实现，而本文主要想说的是如何让大屏监控的可视化变得灵活可配置。

首先我们看到的是监控大屏的可视化，其实和我们之前说的自定义报表挺像的。其核心仍然是单面板设计和多面板组装。基于这个思路，我们逐一描述。

当谈到定制报告时，我们的单面板设计数据集与实际的数据表示相结合，但实际上更好的想法是将数据集与数据表示分开。基于这一思想，对关键功能点的实现进行了逐一讨论。

1.数据集设计

数据源定义，对于数据源定义，最好是独立的，一个报表前端展现本身也可能涉及多个数据源。设计一个数据集，即返回一个二维数据集，可以有多个列。我们需要对其进行配置，即先选择数据源，然后自定义Sql语句，再返回具体的数据集对象。在sql过程中，我们可以对字段标题名称等进行转义。

更解耦的方法是数据集可以直接选择一个特定的WS服务，服务会返回一个二维数据集对象。这种方式可以进一步实现报表平台与底层数据库的解耦。

2.单面板设计

简单来说，单面板设计就是将前端的呈现方式，无论是折线图、饼状图还是雷达图，与后端的数据集进行绑定。在这个过程中，重点是确认具体图表展现的一些关键配置，包括X轴和Y轴显示、图表名称、是否显示图例等。，所有这些都需要设计在一个面板中。

单面板设计完成后，最好提供预览功能按钮，这样可以马上体验到单面板显示的效果。

3.大屏幕设计

对于大屏设计，其实有几个关键点。首先，大屏幕显示需要一个CSS模板，这个模板决定了所有单面板图表的配色风格，包括具体的背景色、前端颜色选择等。模板选择是为了保证最终大屏幕显示中每个单个面板的风格能够完全一致。

大屏幕布局设计仍然采用标准的网格布局方式，可以看出所有的大屏幕显示器基本都采用网格布局方式。对于每个单独的面板，您唯一需要确定的是水平跨越几行，垂直跨越几列。与上图类似，我们使用4*4Grid进行布局，而中间的地图显示横向跨越三行，纵向跨越两列。

4.大屏幕的整体显示可以动态刷新。

以上设计完成后，我们的整个大屏幕显示效果就出来了。我们在这个大屏设计中没有考虑动态查询功能。但是大屏监控还是需要动态刷新。所以在设计大屏幕的时候，我们需要具备动态刷新的能力。为了考虑后续的可扩展性，我们需要能够将一些关键变量参数转移到图表显示中。

最关键的参数是当前时间，需要传递给每个数据集Sql，这样我们就可以根据时间来过滤数据。同时，对于大屏幕，我们需要配置定期刷新频率，并基于此频率动态刷新显示内容。