决策报表(frm)制作

编辑
  • 文档创建者:caixiaolan
  • 浏览次数:10202次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-06-06
  • 1. 前提

    在进行移动端决策报表设计之前,需要先基本了解决策报表的功能和设计方法,可参考:决策报表设计


    2. 决策报表画布大小选择

    目前手机的主流尺寸在 4.7 寸及以上,手机的逻辑像素宽度为 375 像素及以上。

    因此在制作手机端报表的时候需要优先考虑决策报表画布的大小,选择模板>移动端属性,勾选设置为手机端专属模板,画布大小默认设置为适配 4.7 寸屏幕的手机,如下所示:

    注:若模板中有内容,在设置为手机端专属模版时,会触发另存为以“_mobile”为后缀的模板,详情参考:设置手机端模板



    3. 手机端组件布局方式

    决策报表在手机上有两种布局方式,分别为保留布局与手机重布局。

    • 保留布局:保留设计器界面中的布局样式。

    • 手机重布局:在无论设计器中如何布局,手机上均采用流式布局展现,即一行一个组件(组件顺序可以 自定义)。


    3.1 纵向滑动展现

    纵向滑动展现可以选用保留布局或手机重布局。

    如果报表中需要展现的内容较多,并且希望决策报表中的内容可以纵向滑动,可以在保持横向像素为 375 的基础上,根据自己的需要调整画布的纵向尺寸。

    由于模板是在手机端展示的,建议直接采用流式布局的方式来放置每个组件的位置,即从上至下依次排版。



    3.2 一屏展现

    一屏展现可以选用保留布局来完成。

    这里推荐将模板设置为手机端专属模板,在这样的尺寸下,所有的决策报表组件会保留原有的组合方式,均在一个屏幕中展现。

    可以采用上述的流式布局,也可以按照自己的需求进行组合。



    4. 决策报表组件

    4.1 决策报表标题

    在 PC 上制作报表时往往会采用报表块方式给组件设置标题。

    在手机端上,为了避免报表块组件自适应的时候带来的样式改变和字体不统一,建议直接通过组件样式设置组件标题。



    4.2 报表块组件

    报表块组件是指在决策报表中采用表格的形式来展现数据,由于手机的屏幕较小,因此决策报表报表块中的数据列不宜过多,尽可能控制在原始宽度下 7 列以内,并且在横向充满的空间内使用报表块。

    • 在手机重布局的逻辑下,报表块主体内容的高度根据数据自适应,没有最小高度,有最大高度限制,可以通过开关控制是否启用报表最大高度限制,且最大高度可以自定义。

    • 在手机保留布局逻辑下,报表块的自适应逻辑与图表的自适应逻辑相同,不会随报表主体的内容在高度上扩展。

    • 设计完之后需要选中报表块,在移动端中,设置自适应方式为:竖屏横向自适应。

    注:自适应方式设置好后,尽量不要改动,以免在以后的数据展示时设计的图表会发生变形。


    注:如果列数超过 7 列很多,请不要设置竖屏自适应,保留默认,报表内容会采用左右滑动展现。


    4.3 图表组件

    • 首先,应该尽可能使用新图表。

    • 画布宽度设置为 375 时,设计器中图表组件的宽高比尺寸与手机实际效果一致,设计更方便;

    • 使用图表组件需要考虑适合图表类型的宽高尺寸,例如:饼图、仪表盘适合正方形的区域。

    • 在大多数情况下,应该尽可能避免采用报表块中添加图表的方式使用图表,直接使用图表组件可以获得更好的效果。


    4.4 控件组件

    控件可以直接拖入到决策报表主体中使用,文本、数字、下拉框、下拉复选框、日期这些控件在移动端展现时高度固定显示。

    注:在保留布局情况下,如果控件高度<组件高度,则多余部分为空白;如果控件高度>组件高度,则控件显示部分。由于控件在高度缩放逻辑与 PC 不同,控件高度在设计器中与组件中高度的比例不等同于移动端预览的直接效果。


    4.5 参数面板

    与 PC 端不同,参数面板在移动端上展现时,会在报表页面显示前单独展示,在报表界面可以点击下方的漏斗图标返回参数界面重新选择参数。


    5. 决策报表设计入门示例

    5.1 更改画布大小

    点击文件>新建决策报表,新建一张决策报表

    选择模板>移动端属性,将模板设置为手机端专属模板,则画布大小为 375*560




    5.2 拖入组件

    此时,我们需要在决策报表中添加一个报表块,一个图表块,3 个控件。

    (1)参数组件:

    从工具栏中将参数组件拖拽至决策报表主体中,并将相应的三个控件:下拉框、标签控件和查询按钮拖拽至参数组件中,并设置标签控件的控件值为:公司,如下图:


    (2)空白块组件:tab块、绝对画布块、报表块,这里以报表块为例进行介绍。

    从工具栏中将报表组件也拖拽至决策报表主体中,如下图:

    设计完之后需要选中报表块,在移动端中,会默认设置竖屏为横向自适应。如下图:

    (3)图表组件

    再从工具栏中将图表组件拖曳至报表块组件的下方,如下图:


    注:在 H5 中不支持显示老图表。

    5.3 控件绑定数据

    (1)定义数据集

    效果图中,新建数据集 ds1:SELECT 产品名称,库存量,产品.成本价 ,产品.单价 FROM 订单,订单明细,产品 where 客户ID='${company}'and 订单.订单ID=订单明细.订单ID and 订单明细.产品ID=产品.产品ID,参数company的默认值为 VINET。

    注:参数名字必须与客户 ID 下拉框控件名称保持一致。

    (2)客户下拉框控件

    选中下拉框控件拖拽到适当位置,下拉框控件名设为“company”,数据字典来自 FRDemo 数据库的客户表(数据类型选择数据库表,数据库选择 FRDemo),实际值和显示值分别为客户 ID 和客户名称,控件值为VINET:


    注:查询按钮必须是预定义好的查询按钮。

    5.4 报表块

    参数面板与控件都已经设置好之后,点开报表块里面的触笔按钮,进入报表块编辑界面。

    (1)新建数据集

    效果图中,报表块里面要显示订单明细数据,根据客户 ID 进行过滤,新建数据集 ds2:select * from 订单 where 客户ID='${company}',company 默认值为 VINET。

    (2)表样设计

    如下图所示,设计表样:


    点击左下角的决策报表按钮回到决策报表的设计界面,选中报表块,可在右侧的属性表中设置其报表块工具栏是否可见,如下图:

    注:报表块工具栏默认不显示,如果要显示即勾选即可,不显示工具栏,则如果数据有分页,是无法显示分页按钮的,即,只有勾选了报表块工具栏选项才能使用分页按钮,才可以查看第二页以后的数据。

    5.5 图表块

    鼠标选中图表块所在区域,为该图表绑定数据,图表数据源来源于数据集数据源,其分类系列设置如下:


    到此为止,决策报表就已经制作好了。

    5.6 效果预览

    保存决策报表,已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\parameter\订单明细-移动端.frm

    放到移动端使用 H5 显示,效果如下:



    附件列表


    主题: 移动端
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]