FVS实现控件根据条件显示

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

1.1 版本

1.2 应用场景

在使用参数控件时，有时我们希望部分参数控件在不满足条件时不显示，满足条件后再显示。

例如报表类型选择年报时，只显示年份控件；选择月报时，再显示出月份控件；选择日报时，则只显示日期时间控件。

如下图所示：

1.3 实现思路

通过 JS 来控制控件组件的可见与不可见：

setVisible(boolean)：设置是否可见，true 为可见，false 为不可见

该接口对 FVS 所有组件有效，详细接口可参见：控件通用 。

var value = duchamp.getWidgetByName("控件名称").getValue();//获取控件值
duchamp.getWidgetByName("控件名称").setVisible(true);//设置该控件可见
duchamp.getWidgetByName("控件名称").setVisible(false);//设置该控件不可见

2.1 新建模板

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

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

3）点击「创建看板」。

2.2 准备数据

新建数据库查询 ds1 ，输入 SQL 查询语句：

SELECT * FROM 订单 where 1=1 ${if(type=="日报"," and date(订购日期)='"+ date +"'", 

if(type=="月报"," and strftime('%m',订单.订购日期)='"+ month+"'"+" and strftime('%Y',订单.

订购日期)='"+ year+"'"," and strftime('%Y',订单.订购日期)='"+ year+"'"))}

这段 SQL 表示根据变量 type 的不同值（"日报"、"月报"或其他）生成不同的条件来筛选订单数据，条件包括日期、月份和年份。

2.3 设计表格组件

1）点击组件区「文字>表格组件」，添加到画布中，并将其拉动到合适的大小和位置。

2）选中表格组件，点击右侧配置区「内容>编辑组件」，进入表格编辑界面。

3）表格主体设计如下图所示，将 ds1 数据集中的「订购日期、发货日期、运货商、货主名称、货主地址、货主城市、货主省份」字段拖入单元格。

4）选中 A3 单元格「订购日期」字段，点击「单元格元素>基本」，将数据设置修改为「列表」。

5）设置完成后点击左上角「返回可视化看板」返回画布。

2.4 设计控件组件

2.4.1 添加组件

1）点击组件区「文字>标题」向画布中添加四个标题组件，调整到适当的位置。

2）标题内容分别设置为 报表类型、年份、月份、日期 ，对应需要的参数类型。

3）点击组件区「控件」，向画布中添加三个下拉框控件、一个日期时间控，调整到适当的位置。

2.4.2 设置下拉框控件

1）从左到右选中第一个下拉框控件，控件名称为「type」。

数据字典类型设置为「自定义」，实际值和显示值相同，为年报，月报，日报。

数据字典设置完成后，设置默认值为「年报」。

2）从左到右选中第二个下拉框控件，控件名称为「year」。

数据字典类型设置为「自定义」，实际值和显示值相同，为 2010、2011。

数据字典设置完成后，设置默认值为「2010」。

3）从左到右选中第三个下拉框控件，控件名称为「month」。

数据字典类型设置为「自定义」，显示值和实际值相同，为 01 ~ 12 。

数据字典设置完成后，设置默认值为「01」。

2.4.3 设置日期时间控件

选中日期时间控件，控件名称为「date」。

默认值为自定义日期时间 2010-01-01，日期范围为自定义，起始日期为 2010-01-01，结束日期为 2011-12-31。

2.4.4 设置组件隐藏

1）点击画布左下角「组件图层」按钮，可展开收缩组件图层列表。

2）双击组件名称，可重命名，将四个标题组件重命名为 报表类型、年份、月份、日期 。

3）鼠标悬浮组件名称时，点击组件左侧的小眼睛 icon，可切换组件显示/隐藏状态。设置日期和月份对应的组件隐藏。

2.5 添加编辑结束事件

1）选中 type 下拉框控件，在「交互>添加事件」中为其添加「编辑结束」事件。

2）事件名称自定义为「控件联动」，输入 JavaScript 执行脚本。

JavaScript 执行脚本如下所示：

var value = duchamp.getWidgetByName("type").getValue();//获取当前控件即type参数的值
//判断type的值，根据判断结果显示或隐藏其他组件
if (value == "日报")
{
duchamp.getWidgetByName("date").setVisible(true);//在此可修改成要控制的组件名称
duchamp.getWidgetByName("month").setVisible(false);
duchamp.getWidgetByName("year").setVisible(false);
duchamp.getWidgetByName("日期").setVisible(true);
duchamp.getWidgetByName("月份").setVisible(false);
duchamp.getWidgetByName("年份").setVisible(false);
}
else if (value == "月报") {
duchamp.getWidgetByName("date").setVisible(false);
duchamp.getWidgetByName("month").setVisible(true);
duchamp.getWidgetByName("year").setVisible(true);
duchamp.getWidgetByName("日期").setVisible(false);
duchamp.getWidgetByName("月份").setVisible(true);
duchamp.getWidgetByName("年份").setVisible(true);
}
 
else if (value == "年报") {
duchamp.getWidgetByName("date").setVisible(false);
duchamp.getWidgetByName("month").setVisible(false);
duchamp.getWidgetByName("year").setVisible(true);
duchamp.getWidgetByName("日期").setVisible(false);
duchamp.getWidgetByName("月份").setVisible(false);
duchamp.getWidgetByName("年份").setVisible(true);
}
else {
duchamp.getWidgetByName("date").setVisible(false);
duchamp.getWidgetByName("month").setVisible(false);
duchamp.getWidgetByName("year").setVisible(false);
duchamp.getWidgetByName("日期").setVisible(false);
duchamp.getWidgetByName("月份").setVisible(false);
duchamp.getWidgetByName("年份").setVisible(false);
}

2.6 效果预览

2.6.1 PC 端

点击「预览」，效果如 1.2 节所示。

2.6.2 移动端

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

点击下载模板：FVS实现控件根据条件显示.fvs