1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 |
|---|---|
| 11.0.6 | V1.5.0 |
1.2 应用场景
在使用参数控件时，有时我们希望部分参数控件在不满足条件时不显示，满足条件后再显示。
例如报表类型选择年报时，只显示年份控件；选择月报时，再显示出月份控件；选择日报时，则只显示日期时间控件。
如下图所示：
1.3 实现思路
通过 JS 来控制控件组件的可见与不可见：
setVisible(boolean)：设置是否可见，true 为可见，false 为不可见
该接口对 FVS 所有组件有效，详细接口可参见：控件通用 。
var value = duchamp.getWidgetByName("控件名称").getValue();//获取控件值
duchamp.getWidgetByName("控件名称").setVisible(true);//设置该控件可见
duchamp.getWidgetByName("控件名称").setVisible(false);//设置该控件不可见
2. 示例
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移动端预览 。效果如下图所示：
3. 模板下载
点击下载模板：FVS实现控件根据条件显示.fvs
上一篇：FVS实现数据库表字段控制Tab标签页隐藏
