反馈已提交

网络繁忙

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

  • 文档创建者:caixiaolan
  • 历史版本:11
  • 最近更新:Fairy.Zhang 于 2024-07-24
  • 1. 概述

    1.1 版本

    报表服务器版本
    App 版本HTML5 移动端展现插件版本功能变动
    11.0V11.0V11.0-

    1.2 应用场景

    移动端有些复杂报表,比如不同列是不同维度的数据:从“地区”、“供应商”、“雇员”、“全部”四个统计维度对产品数据进行分析。

    1.3 实现思路

    • 方法一:使用两个表格, 表格1 设置超级链接动态参数和条件属性,表格2 设置条件属性和重复与冻结,从而实现点击不同维度名称查看不同维度数据的效果。

    • 方法二:使用 Tab组件 ,添加标签页,4 个统计维度共计 4 个标签页,不同维度的标签页添加并设计对应维度的表格,从而实现点击不同维度名称查看不同维度数据的效果。

    2. 方法一:动态参数

    2.1 新建模板

    1)点击菜单栏「文件>新建可视化看板」,点击「创建空白可视化看板」,如下图所示:

    新建可视化看板1.png

    2)选择「浅色主题一」,点击「创建看板」,如下图所示:

    新建可视化看板2.png

    3)点击底部画布尺寸的编辑按钮,选择「自定义尺寸」,宽度设置为「375」,高度设置为「800」。

    4)画布自适应设置为「宽度铺满」,如下图所示:

    自定义尺寸+宽度铺满.png

    2.2 添加并设计表格

    1)点击组件列表栏的「文字」,向画布中拖入两个表格组件,并适当调整大小,如下图所示:

    拖入表格.png

    2)选中 表格1 ,点击右侧的「编辑组件」按钮,如下图所示:

    编辑表格1.png

    3)进入 表格1 编辑界面, A1-D1 单元格输入文本,如下图所示:

    表格1文本.png

    4)点击「返回可视化看板」,返回可视化看板界面,如下图所示:

    返回可视化看板.png

    5)打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\分片与冻结.cpt ,复制 A4-H8 单元格内容,如下图所示:复制cpt内容、.png

    6)回到 FVS 可视化看板设计界面,选中 表格2 ,点击右侧的「编辑组件」按钮,如下图所示:

    编辑表格2.png

    7)将刚刚复制的内容粘贴到 表格2 中,如下图所示:

    粘贴内容.png

    8)因表格内容是复制过来的,故需修改含有公式的表格内容,将 sum(C6)sum(D6)sum(E6)sum(F6)sum(G6)sum(H6) 分别修改为: sum(C3)sum(D3)sum(E3)sum(F3)sum(G3)sum(H3) ,如下图所示:

    1.png

    2.3 表格1设置超级链接、条件属性

    1)进入 表格1 编辑界面,选中单元格 A1,添加动态参数超级链接,参数名为:type,参数值为字符串:1,如下图所示:

    超级链接-动态参数.png

    2)同理,为单元格 B1-D1 添加动态参数超级链接,分别传递参数 type 为字符串:234

    3)选中单元格 A1,添加条件属性,设置颜色、背景属性,公式条件为公式:$type=1,即当 type 为 1 时,字体颜色和背景改变,如下图所示:

    表格1条件属性1.png

    4)同理,为单元格 B1-D1 添加条件属性,分别设置颜色、背景属性,公式条件分别设置为公式:$type=2$type=3$type=4

    2.4 表格2设置条件属性、重复与冻结

    1)进入 表格2 编辑界面,选中 C1 单元格,添加条件属性, type 不为 1 即$type=2 or $type=3时,隐藏 地区 所在的列,如下图所示:

    表格2条件属性.png

    2)同理,为 E1 单元格设置条件属性,当 type 不为 2 即$type=1 or $type=3时,隐藏 供应商 所在的列。

    3)同理,为 G1 单元格设置条件属性,当 type 不为 3 即$type=1 or $type=2时,隐藏 雇员 所在的列。

    4)点击上方的冻结按钮,设置重复标题行从第 1 行至第 2 行,重复标题列从第 A 列至第 B 列,冻结第 1 行至第 2 行,冻结第 A 列至第 B 列,如下图所示:

    重复与冻结.png

    2.5 效果预览

    移动端预览模板,以 App 为例,如下图所示:

    动态参数动图.gif

    3. 方法二:Tab 组件

    3.1 新建模板

    同 2.1 节。

    3.2 添加并设计 Tab 组件

    3.2.1 添加 Tab 组件

    1)点击组件列表栏的「容器」,向画布中拖入 Tab 组件,并适当调整大小,如下图所示:

    拖入tab组件.png

    3.2.2 添加标签页

    1)点击 Tab 组件右上角的「+」按钮,新增3个标签页,如下图所示:

    新建标签页.png

    2)四个标签页分别重命名为:「地区」、「供应商」、「雇员」、「全部」。以 标签页1 为例,如下图所示:

    地区.gif

    3.2.3 添加表格

    1)选中「地区」标签页,将组件列表栏中的「文字>表格」拖入「地区」标签页中,并适当调整表格大小,如下图所示:

    地区表格.png

    2)同理,向「供应商」、「雇员」、「全部」标签页中分别拖入表格组件并适当调整大小。

    3) 4 个标签页的表格内容适应方式全部选择「无」。以「地区」标签页为例,如下图所示:

    地区表格内容适应方式.png

    3.2.4 设计表格

    1)打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\分片与冻结.cpt ,复制 A4-H8 单元格内容,如下图所示:

    复制cpt内容、.png

    2)回到 FVS 可视化看板设计界面,选中「全部」标签页,选中 表格4 ,点击「编辑组件」按钮,如下图所示:

    全部标签页.png

    3)进入 表格4 编辑界面,将刚刚复制的内容粘贴到 表格4 中,如下图所示:

    表格4复制粘贴.png

    4)因表格内容是复制过来的,故需修改含有公式的表格内容,将 sum(C6)sum(D6)sum(E6)sum(F6)sum(G6)sum(H6) 分别修改为: sum(C3)sum(D3)sum(E3)sum(F3)sum(G3)sum(H3) ,如下图所示:

    表格4复制粘贴内容1.png

    5)复制 表格4 中的内容分别粘贴至 表格1 、表格2 、 表格3 中,并删除非当前维度的数据列。以「地区」标签页的 表格1 为例,如下图所示:

    地区标签页表格.png

    3.2.5 表格设置重复与冻结

    1)进入 表格1 编辑界面,点击上方的冻结按钮,设置重复标题行从第 1 行至第 2 行,重复标题列从第 A 列至第 B 列,冻结第 1 行至第 2 行,冻结第 A 列至第 B 列,如下图所示:

    3.png

    2)同理,为 表格2 、 表格3 、 表格4 设置重复与冻结。

    3.3 效果预览

    移动端预览模板,以 App 为例,如下图所示:

    Tab组件动图.gif

    4. 下载模板

    点击下载方法一已完成模板:动态参数解救移动端复杂报表.fvs

    点击下载方法二已完成模板:Tab组件解救移动端复杂报表.fvs

    附件列表


    主题: 移动端应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭



    AI

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