FVS实现控件联动并查询

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 应用场景

在FVS可视化看板中，希望实现有多个控件时，后一个控件的选项能根据前一个控件选择的值变化，并且在选择相应的选项后，其他组件内容能随之变化展示相应的数据。如下图所示，城市选项需跟随地区所选值而变动，客户选项需跟随地区、城市所选值相应变动，表格内容能跟随选择的地区、城市、客户自动查询处相应数据。

1.3 实现思路

通过在数据集中定义数据集参数，再在画布中添加控件，控件绑定带有参数的数据字典时，即可实现后面控件根据前面控件数据进行过滤。表格数据实现自动查询可通过给单元格添加过滤条件实现。

2.1 新建模板

1）在 FineReport 设计器左上角点击「文件>新建可视化看板」。

2）在「创建空白看板」Tab 中，可自定义模板名称和尺寸，选择 模板样式 为「内置样式>深色主题一」。

3）点击「创建看板」。

2.2 数据准备

新建三个数据库查询，SQL 查询语句分别为：

订单：select 客户.地区,客户.城市,客户.客户ID,客户.公司名称,订单.订单ID,订单.订购日期,订单.发货日期,订单.到货日期,订单.运货商,货主名称,订单明细.产品ID,(订单明细.单价*订单明细.数量) AS 金额 from 客户,S订单 订单,S订单明细 订单明细 where 订单.订单ID=订单明细.订单ID and 客户.客户ID=订单.客户ID

城市：select 城市 from 客户 where 地区='${area}'

客户：select 公司名称 from 客户 where 城市='${city}' and 地区='${area}'

「订单」数据集主要将不同的数据表进行了关联；「城市」数据集定义了地区参数 $area ，表示根据参数获取对应的「城市」；「客户」数据集定义了城市参数 $city 和 地区参数 $area，表示根据参数获取对应的「公司名称」。

以订单为例，如下图所示：

2.3 设计可视化看板

1）向画布中拖入四个「标题」组件、三个「下拉框」控件和一个「表格」组件，并调整组件位置。如下图所示：

2）分别设置「标题」组件「标题内容」为 地区：、城市：、客户：；「下拉框」控件名称分别为 area 、city 、customer，将下拉框控件与各个参数绑定。

注：必须保证下拉框控件名称与参数名称一致。

以客户 customer 参数为例：

3）设置三个「下拉框」控件的数据字典，具体设置如下表所示：

以 area 控件为例，步骤如下图所示：

2.4 设计表格

2.4.1 设计表格样式

1）选中「标题」，在「标题内容」中设置标题为「运货商月订单信息」如下图所示：

2）选中表格组件，点击右侧的「编辑组件」，进入表格编辑界面，如下图所示：

3）将「订单」数据集中的 订单ID、公司名称、订购日期、货主名称、发货日期、到货日期、运货商 依次拖入 A2~G2 单元格，再输入对应表头信息。如下图所示：

4）因为 G2 单元格的「运货商」字段在「订单」数据集中实际上是「运货商ID」的字段值，所以这里需要设置其形态为数据字典，使其显示运货商ID对应的公司名称。

选中 G2 单元格，点击「单元格属性>形态」，设置为「数据字典」，将其显示值设为「运货商」表中的「公司名称」字段。如下图所示：

2.4.2 设置过滤

由于表格中的数据与下拉框数据字典绑定的数据并不是来源于同一个数据集，它们之间不存在过滤关系，所以需要手动为单元格添加过滤条件。

双击「订单 ID」所在的 A2 单元格，弹出数据列设置界面，选择「过滤」界面，添加三个过滤条件，条件之间用 AND 连接：

条件一：「地区」列等于 F(x) if(len($area)== 0,nofilter,$area)

条件二：「城市」列等于 F(x) if(len($city)== 0,nofilter,$city)

条件三：「公司名称」列等于 F(x) if(len($customer)==0,nofilter,$customer)

注1：参数 $customer 可以直接引用「下拉框控件」customer 的值。

注2：公式中 nofilter 是不过滤的意思，即参数为空时不过滤显示全部数据，参数不为空时，显示出相应数据。

如下图所示：

2.5 效果预览

2.5.1 PC 端

保存报表，点击「预览」，效果如 1.2 节应用场景所示。

2.5.2 移动端

请先设置 移动端重布局 ，预览方式请参考 FVS移动端预览 。效果如下图所示：

点击下载模板：FVS实现控件联动并查询.fvs