[通用]手机重布局

  • 文档创建者:susie
  • 编辑次数:32次
  • 最近更新:April陶 于 2021-01-15
  • 1. 概述

    1.1 版本说明

    设计器版本  HTML5移动端展现插件版本JAR包版本App版本功能变动
    10.0V10.4.492019-12-05V10.4.49-
    10.0.11V10.4.9752020-12-02V10.4.975
    • 重布局下支持显示图表自定义的数据点提示

    • 优化图表数据点提示较长时的显示效果

    1.2 应用场景

    由于手机屏幕比 PC 端和 Pad 端都小,因此针对以下三种场景的模板制作,手机端需要采用不同的布局。

    下面的报表设计场景中,场景一需要手机重布局,而场景二、三不需要手机重布局。

    • 场景一:做好的决策报表含报表块等组件,在 PC 和 Pad 以及手机上共用,在 PC 和 Pad 端都是宽高自适应屏幕或者宽高等比例缩放,但是在手机上没有太大的布局要求,只需要在手机上面流式布局展现,即一行一个组件这种情况。

    • 场景二:在手机上也采用原始布局,PC 端想要和手机共用一套模板,模板设计的时候建议以移动端效果为先。

    • 场景三:在手机上采用原始布局,为手机专门制作的模板。

    1.3 功能介绍

    手机重布局只能在决策报表的 body 组件的移动端属性下设置,如下图所示:

    注:重布局属性是决策报表的整体属性,只有当前控件选择 body 的时候才会有手机重布局属性,设置后是对整个决策报表进行生效的,如果决策报表内部有绝对布局或者 Tab 组件,那么里面的控件也是重布局显示。

    手机重布局的设置项包括:

    注:不勾选手机重布局时,body 的布局方式即为“保留布局”,除了控件顺序,是不会出现其他设置项的。

    • 内边距:移动端展现时报表内容距离边框上下左右四个方向的距离。

    • 组件间隔:每个组件纵向的间隔距离。

    • 组件冻结:组件冻结后,向上滑动时,该组件固定在顶部不动。

    • 控件顺序:移动端展现时,组件从上到下的排列顺序,设置时可自由拖拽。

    注:2019-12-05及之后版本的 JAR 包才能支持在设计器中设置组件冻结。

    Snag_437d4821.png

    当决策报表中多个组件在同一行时,以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。

    如果不勾选手机重布局,效果如下图所示:

    SVID_20191209_153144_1.gif

    勾选了手机重布局后,组件按行显示,如下图所示:

    注:饼图在移动端预览时会自动旋转,被点击的饼块将自动旋转到正上方。

    SVID_20191209_153113_1.gif

    2. 属性设置

    下面将通过举例,详细介绍每个属性设置项的移动端预览效果。

    2.1 内边距

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。

    1)设置该报表的上边距为4时。

    Snag_444948ec.png

    移动端预览效果如下图所示:

    1575879667483199.jpg

    2)设置该报表的上边距为20时。

    Snag_444aae77.png

    移动端预览效果如下图所示:

    1575879840548767.jpg

    2.2 组件间隔

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\决策报表入门示例.frm为例。

    1)设置报表的组件间隔为4时。

    Snag_444c3b41.png

    移动端预览效果如下图所示:

    1575880271271964.jpg

    2)设置报表的组件间隔为20时。

    Snag_444d9803.png

    移动端预览效果如下图所示:

    1575880379934822.jpg

    2.3 组件冻结

    组件冻结作用范围如下:

    • 只能选 body 中第一层非容器下的组件(报表块、图表块、文本等),不能设置冻结容器(tab组件 & 绝对画布块)。

    • 如果是插件化扩展的非容器组件,也可以选。

    • 组件可以多选。

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\others\骑行记录-phone.frm为例。

    1)只冻结单个组件

    点击冻结组件右边的白色框体部分,勾选展示顺序为第二的组件 report0。

    Snag_444fcd61.png

    移动端预览报表,向上滑动过程中,当 report0 到达顶端时,会自动冻结,保持不动,如下图所示:

    SVID_20191209_195528_1_cps.gif

    2)冻结多个连续组件

    点击冻结组件右边的白色框体部分,勾选展示顺序分别为第二、第三的组件 report0、report2。

    Snag_44636251.png

    移动端预览报表,向上滑动过程中,当 report0 到达顶端时,report0 和 report2 会合并一起冻结,保持不动,如下图所示:

    SVID_20191209_201413_1.gif

    3)冻结多个不连续组件

    点击冻结组件右边的白色框体部分,勾选展示顺序分别为第二、第五的组件 report0、chart2。

    Snag_447246f1.png

    移动端预览报表,向上滑动过程中,当 report0 到达顶端时,会自动冻结,保持不动。但是当 chart2 到达顶端时,report0 的冻结效果会失效,内容会被覆盖掉,chart2 会自动冻结,保持不动。如下图所示:

    SVID_20191209_202447_1.gif

    3. 重布局下图表

    3.1 支持自定义数据点提示

    3.1.1 显示效果

    新版本支持重布局下的图表可以显示自定义的数据点提示,具体的版本要求参见1.1版本说明

    Snag_209a02.png

    上面示例的自定义提示实际效果效果如下图所示:

    1606983737163908.jpg

    3.1.2 HTML 解析

    • 不勾选使用html解析文本内容只返回计算数据,样式不生效(如换行符)。

    • 勾选使用html解析文本内容,返回的是默认通用内容。

    3.2 较长数据点提示优化

    新版本对较长内容的数据点提示进行了优化,具体的版本要求参见1.1版本说明,具体优化如下:

    3.2.1 横向优化

    横向上现在有最小宽度和最大宽度,基本场景分三个,分别如下:

    • 提示内容小于最小宽度,提示框宽度不变。

    • 提示内容介于最小宽度和最大宽度之间,弹窗宽度自适应。

    • 提示内容较长,超过了最大宽度,那么超出的部分直接省略。

    例如用富文本编辑提示内容,如果内容较长,如下图所示:

    Snag_29c9e0.png

    移动端预览时超出固定宽度的部分被省略,效果如下图所示:

    1606984384188950.jpg

    3.2.2 纵向优化

    数据点提示最大显示行数为 6 行(系统或第三方 App 的字体为标准时),超过 6 行的内容需要手动下滑来查看。

    例如富文本编辑 8 行的提示内容,如下图所示:

    Snag_3c967f.png

    移动端预览时只显示 6 行,效果如下图所示:

    1606985663977852.jpg

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-127-81526