反馈已提交

网络繁忙

[通用]两种方案助你解救移动端复杂报表

  • 文档创建者:caixiaolan
  • 历史版本:6
  • 最近更新:RosieY 于 2023-01-06
  • 1. 概述

    现在有许多复杂报表,一般有两种类型:

    1)所有列是同一维度的数据,比如是时间维度,一年 12 个月;

    2)不同的列是不同维度的数据,是对“地区”、“供应商”、“雇员”三个维度的分析。

    在移动端,这些报表不能很好的自适应,这时我们可以选用两种替代方案来改善这些灾难效果。

    2. 实现思路

    对于第一种类型,可以采用横屏查看,或者减少行数,或者可以设置表头冻结显示、 竖屏纵向自适应,通过左右滑动来查看,实现方式参考帮助文档:移动端自适应

    对于第二种类型,可以采用 App 界面的设计思路,将分析维度与表格主体拆分开来,通过点击不同维度名称查看不同维度的数据。

    3. 方法一:决策报表联动

    打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\分片与冻结.cpt

    新建决策报表,拖入一个报表块,将Freeze.cpt中的内容复制到该报表块中,设置重复标题行和冻结属性,再拖入一个报表块,用于参数的控制,具体模板设计样式如下:

    222
    上面的报表块用于参数的控制,下面的报表块用于数据的呈现;报表块之间的参数联动,控制主报表列的隐藏。从而达成:点击维度名称,切换查看内容的效果。

    3.1超链进行参数控制

    当点击「地区/供应商/雇员/全部」时,分别给上面和下面的报表块传递参数 type 的值为 1 / 2 / 3 / 4 ,这样控制上面的报表块里的单元格显示不同的样式,控制下面主报表块列的隐藏。

    编辑上面的报表块,选中 A1 单元格,添加超级链接,添加链接选择动态参数,传递参数 type 的值为 1,如下图:

    同样的方式,给「供应商/雇员/全部」添加超级链接,分别传递参数 type 为 2/3/4。

    3.2 参数控制单元格样式

    为了美观,去除超级链接样式,修改字体颜色,去掉下划线,如下图:

    给上面报表块的单元格设置条件属性,A1 单元格"地区"设置公式$type=1,当类型=1 的时候,背景和字体改变,如下图:

    B1~D1 单元格也分别设置条件属性,公式条件分别设置为$type=2,$type=3,$type=4

    3.3 参数控制列的隐藏

    给 C3 设置条件属性,当类型不为 1 时即$type=2 or $type=3的时候,将隐藏地区所在的列,如下图所示:

    同样给 E3 设置条件属性,当类型不为 2 时即$type=1 or $type=3的时候,将隐藏地区所在的列。

    同样给 G3 设置条件属性,当类型不为 3 时即$type=1 or $type=2的时候,将隐藏地区所在的列。

    3.4 重复和冻结

    下面的报表块给 3-4 行设置 重复标题行,并设置冻结属性,点击工具栏上的冻结按钮,弹出重复与冻结设置,选择重复标题列从第 A 列至第 B 列,如下图所示:

    3.5 自适应设置

    移动端设置为不自适应,如下图:

    这样在决策报表报表块中,单一维度的数据就可以只通过上下滑动来显示,展现效果大大提升,示例中除了不同维度的数据,还提供了全部显示的方式,全量的数据可以通过上下左右滑动来显示。实际效果如下:

    222

    4. 方法二:Tab 组件

    针对数据维度创建 Tab 组件,在 Tab 块内创建报表块,将原先的报表内容直接复制到新建的报表块内,删除掉非当前维度的数据列。报表样式设计如下图所示:
    222

    给报表块设置冻结属性,可参考方法一中的方式进行设置。

    实际展示效果如下:

    222

    同样,在决策报表报表块中,单一维度的数据就可以只通过上下滑动来显示,全量的数据可以通过上下左右滑动来显示。

    5. 两种效果优势对比

    从工作量上来说,两种方式差别不大,决策报表联动方式中使用了参数联动和报表隐藏,Tab 组件方式增加了多个新建报表块的工作,由于我们支持决策报表组件和报表块内容的复用,因此操作比较简单。
    方法一:决策报表联动

    优势:可以按照自己的喜好设置维度切换的效果,并且采用原生解析,不会损失 App 自带功能。
    缺陷:只有一个展示框,不同宽度的展示内容不能采用单一的竖屏横向自适应来解决,需要略微调整报表宽度,维度比较多的时候切换的效果有缺陷,刷新上面的报表块会直接从最左边显示,切换的效果就显示不出来了。

    方法二:Tab 组件

    优势:不同维度有不同的报表块,可以针对列数多少分别设置竖屏的自适应方式,更加合理。

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持