[通用]参数面板移动端样式

1.1 版本

1.2 应用场景

在制作报表时，用户希望将参数控件固定在报表顶部，便于参数查询。如下图所示：

1.3 实现思路

• 在普通报表或决策报表中，可设置移动端参数面板的样式模板为「顶部」。

• 在 FVS 可视化看板中，可设置 查询面板 的样式模板为「顶部式」。

2.1 普通报表

点击参数面板的编辑按钮，进入参数面板编辑界面，在组件设置面板选择「para>移动端」，点击样式模板右侧的「...」按钮。

弹出样式模板设置框，即可选择「默认」或「顶部」。如下图所示：

注1：普通报表/决策报表参数面板在移动端不支持显示标签控件。

注2：决策报表添加 参数界面 后，同样在右侧组件设置面板选择「para>移动端」进行设置。

2.2 FVS可视化看板

FVS 插件 V2.8.0 及之后版本，查询面板移动端支持设置样式模板。

将模板切换到「移动端」模式，点击「查询面板设置」，在弹出框中选择「样式」。如下图所示：

普通报表和决策报表效果一致，FVS 效果有所不同。本文提供 cpt 和 FVS 模板，用于展示效果：

参数查询-phone.cpt 

FVS参数查询-phone.fvs

4.1 效果示例

以 App 端效果为例，要实现查询，需点击模板下方的筛选按钮打开参数面板，编辑控件值后，点击「查询」进行数据查询。

• 普通报表效果如下图所示：

• FVS 模板效果如下图所示：

4.2 控件初始化显示规则

参数面板移动端样式选择「默认」时，控件内容分为上下两部分显示。

• 上方显示控件名称。

• 下方显示控件内容，优先级为：默认值>水印>空

注：普通报表/决策报表控件的「标签名称」、「控件值」分别对应 FVS 中控件的「名称」、「默认值」。

如下图所示：

5.1 编辑控件值后自动查询

普通报表/决策报表设置「顶部」样式时，可选择是否「自动查询」；FVS 中对应功能为「编辑控件值后自动查询」。

注：FVS 中的「启用自动查询」功能请参见本文 6.1 节说明。

• 不勾选「自动查询/编辑控件值后自动查询」时，顶部面板新增「查询」按钮，编辑控件值后，点击「查询」按钮方可查询更新。

• 勾选「自动查询/编辑控件值后自动查询」时，无需查询按钮，编辑控件值后，即可查询更新。

5.2 控件展示数量

由 5.1 节得知，勾选「自动查询/编辑控件值后自动查询」时，无查询按钮，故最多可支持展示 4 个控件；

不勾选「自动查询/编辑控件值后自动查询」时，有查询按钮，故最多可支持展示 3 个控件；

超过的控件将收纳到「更多」按钮，点击后再展开控件查询。如下图所示：

FVS 中还支持取消勾选「展示数量限制」，此时可左右滑动展示控件。如下图所示：

5.3 控件初始化显示规则

1）顶部参数面板中，控件内容显示优先级如下：

• 普通报表/决策报表：控件内容的显示优先级为：控件值>水印>标签名称>空。

• FVS 可视化看板：控件内容的显示优先级为：默认值>名称。

注2：FVS 的控件「名称」不支持为空，故不能显示空内容。

2）顶部参数面板中，若有多值控件选择了多个值且没有被收到「更多」按钮中，显示规则如下：

• 普通报表/决策报表：显示选中的第一个值+选中值个数。

• FVS 可视化看板：显示选中的所有值+选中值个数。但超过一定的长度限制后，将省略显示。

注：顶部面板可滚动查看时，单个控件存在最大宽度（显示 6 字符左右），小于此宽度时，控件内容自适应展示；大于此宽度时，控件内容省略显示。

顶部面板限制控件展示数量时，控件等分布局， 控件内容显示不下则省略显示。

5.4 顶部参数面板背景

1）普通报表/决策报表中，移动端顶部参数面板跟随 PC 端背景显示。如下图所示：

预览效果如下图所示：

2）FVS 可视化看板中，移动端查询面板背景需单独设置，仅支持设置为颜色，默认为页面背景初始颜色。

预览效果如下图所示：

6.1 初始化查询数据

FVS 查询面板样式中的「启用自动查询」，指的是模板初始化预览时，是否查询展示模板内容。为 PC端/移动端 共用功能，与样式模板无关。

勾选「启用自动查询」，则初始化预览时即可自动查询展示模板内容；若不勾选，则初始化预览时需手动查询。

普通报表/决策报表参数面板是通过「点击查询前不显示报表内容」功能实现的。如下图所示：

6.2 文本控件显示规则

普通报表/决策报表中，若参数面板中存在「文本控件」，参数面板的移动端样式模板选择「顶部」时，「文本控件」将始终被收纳在「更多」按钮中。

如下图所示：