最新历史版本 :决策报表日期控件移动端样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:
icon提示:
V11.5.1 版本起,设计器中取消 「新建决策报表」 入口,历史决策报表模板仍可正常编辑与访问。更推荐使用 FineVis数据可视化 ,作为专业的数据可视化工具,比决策报表制作可视化看板效率更高、效果更丰富 。

目录:

1. 概述编辑

1.1 版本

报表服务器版本APP版本
HTML5 移动端展现插件版本功能变动
11.0
V11.0V11.0-
11.0V11.0.891V11.0.891简约日历 支持自定义「年、年月」格式的日期控件

1.2 应用场景

移动端通过日历的方式筛选日期,之前只能通过报表块、条件属性、联动等实现,模板制作过程非常麻烦,且样式单一。

1.3 功能简介

移动端可实现通过日历的方式筛选日期,比如日报、行程等场景,易用性及体验更强,能够明显看出日期所处月份,周号等。并支持为日期控件设置控件背景、边框颜色、字符字体、图标等。

2. 功能入口编辑

1)点击下载模板:行程管理主页-phone.frm ,在 FineReport 设计器中打开该模板。

2)选中右侧属性面板中的「组件设置>day」。

3)点击「移动端」,点击「样式模板」旁的「...」按钮,可以看到 样式模板 有四种样式:「默认」、「导航日历」、「简约日历」、「简约日期样式」,如下图所示:

3. 默认编辑

3.1 设置

「默认」样式模板只可设置「通用属性」,详情参见:默认样式模板 。

3.2 示例

1)样式模板选择「默认」。

2)「通用属性> 属性设置」 选择「自定义」。

3)配置具体设置项,点击「确定」,如下图所示:

4)App 及 HTML5 端效果预览如下图所示:

注:可点击日期或图标打开日历面板选择具体日期。

4. 简约日历编辑

4.1 设置

「简约日历」样式模板可设置「通用属性」和「设定」。

4.1.1 通用属性

「通用属性」的设置与「默认」样式模板相同,详情参见:默认样式模板 。

4.1.2 设定

「设定」的「按钮样式」分为「标准」和「自定义」。

1)「按钮样式」为「标准」时,不可自定义设置 按钮样式 。

2)「按钮样式」为「自定义」时,可自定义设置 按钮样式 。

具体设置项说明如下表所示:

设置项
说明
默认状态
  • 收起:日历为收起状态

  • 展开:日历为展开状态

标题行分割线颜色支持自定义分割线颜色
按钮颜色支持自定义按钮颜色
字符主字符支持自定义主字符颜色
特殊字符支持自定义特殊字符颜色
字号支持自定义字号,范围为12-18之间的整数,默认为14
箭头颜色支持自定义箭头颜色

4.2 示例

1)样式模板选择「简约日历」。

2)「通用属性>属性设置」选择「默认」。

3)「设定」的「按钮样式」选择「自定义」,配置具体设置项,点击「确定」,如下图所示:

4)App 及 HTML5 端效果预览如下图所示:

注:可点击上方的日期或下方的箭头收起日历面板。

4.3 年月、年

App 版本及 HTML5 移动端展现插件版本 V11.0.891 版本及之后,移动端支持自定义日期控件「年月、年」格式的「简约日历」样式模板,效果如下图所示:

5. 导航日历编辑

5.1 设置

5.1.1 通用属性

「通用属性」的设置与「默认」样式模板相同,详情参见:默认样式模板 。

5.1.2 设定

「设定」的「按钮样式」分为「标准」和「自定义」。

1)「按钮样式」为「标准」时,不可自定义设置 按钮样式 。

2)「按钮样式」为「自定义」时,可自定义设置 按钮样式 。

具体设置项说明如下表所示:

设置项
说明
默认状态
  • 收起:日历按钮为收起状态

  • 展开:日历按钮为展开状态

标题行标题行
支持设置是否显示标题行
分割线颜色支持自定义分割线颜色
按钮颜色支持自定义按钮颜色
字符主字符支持自定义主字符颜色
特殊字符支持自定义特殊字符颜色
字号支持自定义字号,范围为12-18之间的整数,默认为14
箭头颜色支持自定义箭头颜色

5.2 示例

1)样式模板选择「导航日历」。

2)「通用属性>属性设置」选择「默认」。

3)「设定」的「按钮样式」选择「自定义」,配置具体设置项,点击「确定」,如下图所示:

4)App 及 HTML5 端效果预览如下图所示:

注1:「收起状态」下,上下周切换可通过上方的「上一周」、「下一周」按钮实现,也可左右滑动下方日期来实现。

注2:可通过点击上方的日期或下方的箭头展开日历面板。


6. 简约日期样式编辑

6.1 设置

6.1.1 通用属性

「通用属性」的设置与「默认」样式模板相同,详情参见:默认样式模板 。

6.1.2 设定

「设定」的「按钮样式」分为「标准」和「自定义」。

1)「按钮样式」为「标准」时,不可自定义设置 按钮样式 。

2)「按钮样式」为「自定义」时,可自定义设置 按钮样式 。

具体设置项说明如下表所示:

设置项
说明
标签名称字符

支持设置字体样式、字号(范围为1-99之间的整数,默认为15)、字体颜色、加粗、倾

控件名称字符支持设置字体样式、字号(范围为1-99之间的整数,默认为15)、字体颜色、加粗、倾
图标
支持自定义图标

控件区域

注:「控件区域」设置的控件样式生效优先级高于「通用属性」

控件背景
支持自定义控件背景的颜色
控件边框支持自定义控件边框的类型
边框颜色支持自定义边框颜色
圆角支持自定义边框的圆角
宽度
  • 横向撑满:标签及控件宽度为屏幕宽度减去 body 的左右内边距

  • 自定义:可自定义控件宽度

6.2 示例

1)选中右侧属性面板中的「组件设置>day」。

2)选择「属性」Tab 面板,设置「标签名称」为「帆软」,如下图所示:

3)选择「移动端」Tab 面板,点击「样式模板」旁的「...」按钮。

4)样式模板选择「简约日期样式」。

5)「通用属性>属性设置」选择「默认」。

6)「设定」的「按钮样式」选择「自定义」,配置具体设置项,点击「确定」,如下图所示:

7)App 及 HTML5 端效果预览如下图所示: