亿信ABI
当前版本:5.6.1

如何制作适应移动端展示的报表模板

1概述

   由于各个手机、平板分辨率差异很大,以往我们需针对不同的设备,分别开发一套报表,为了减少报表工程师的开发工作量,程序对移动端展示报表时自动做了一些处理,只要遵循一定的做表规则,就可以做到同一套报表在不同分辨率的设备上较好展示。

下面我们通过以下的一些章节来了解下如何制作适应移动端展示的报表模板:

2 PC端展示手机端效果

在PC端制作报表时,可以通过切换设备名称,从而达到在PC端预览手机端报表的展示效果。 报表制作完成后,选中编辑区,而后切换设备名称为手机,即可看到报表布局为手机模式。

而后点击“计算”按钮,在报表计算结果页面即可看到报表在手机端的展示效果,如下图所示。

3 手机端报表自适应

手机端展示报表时,主要需要区分以下两种情况:使用布局的报表和未使用布局的报表。

3.1 使用布局的报表

使用布局的报表,是指在设计报表时,报表区运用了诸如田字形布局、上下型布局等的报表,对于该类型的报表,在服务器端通过【手机自动排版】属性的设置来控制手机端的排版。

由于布局的【手机自动排版】属性是默认勾选的,使用了布局的报表,默认情况下都能在移动端自适应显示,所以我们推荐做表时尽量使用布局。

(1)手机端自动排版

在选中布局时,在属性面板上可以看到这个属性【手机自动排版】,如图所示。

勾选了该属性后(默认是勾选的),手机端显示报表时,会对布局单元格进行折行以及缩放处理,具体的处理规则如下: 

(1)一个布局单元格一行,显示顺序为从上至下、从左至右

(2)每个布局单元格宽度为手机一屏宽

(3)如果布局单元格里无组件,则在手机中不显示 

布局单元格中组件的调整由布局单元格的属性“手机自动排版”控制,如下图所示: 

勾选后(默认是勾选的),布局单元格中的组件在手机端会自动重新排版,规则如下:

(1)一个组件一行,显示顺序为从上至下,从左至右

(2)每个组件缩放成手机一屏宽

(3)设置的边距、间距属性,在手机端不生效

(4)表格高度自动显示完全,设置的布局固定行高不生效

注意,前提是布局有自动排版,即布局勾选了“手机端自动排版”,布局单元格中的“手机端自动排版”才会起作用。容器中组件的调整规则也是类似的,由容器的“手机端自动排版”属性控制,且其起作用的前提是容器有自动排版缩放成手机一屏宽。

示例:勾选了手机端自动排版效果

 PC上显示效果:

手机APP上显示效果:

(2)手机端不自动排版

实现移动端报表展示效果和PC端一致时,布局可以不勾选【手机自动排版】,手机端就不会对报表做折行的处理,当布局内层设置宽、高为百分比时,手机端布局大小为相对手机屏幕宽高的百分比,将在手机端缩放展示PC端报表,如下图所示,布局未勾选【手机自动排版】:

该报表在PC端展示效果如下:

移动端展示效果仅为缩放为手机屏幕合适的百分比,在移动端展示效果如下:

布局内层的宽高设置为固定值时,手机端展示效果完全同PC端展示效果保持一致,如下所示:

(3)手机端局部不自动排版

对于布局单元格,如果希望里面的部分组件折行,部分组件不折行,我们可以巧用容器来实现。如下图所示报表:

具体的实现思路如下:首先在报表中放置布局,在其中的一个布局内层中放置4个大容器并取消【手机自动排版】设置,如下图所示:

然后在每个大容器中放置3个小容器,为了让3个卡片在移动端等分排列,3个小容器的边距和宽高按照百分比进行等分排版设置,如下图所示,每个容器的宽为32%,容器之间的间距为3%,故中间小容器的左边距为34%,宽为32%。

在小容器中分别放入表格,表格中写上标题和数值,表格【大小自适应】属性设置为自动撑满。而后依照上述的方法完成12个表格的制作,在剩余的布局内层中放置表格和统计图并勾选【手机自动排版】,统计图和表格即可折行显示并且宽度撑满手机屏幕,至此,该报表制作完成。

其他样式的不局部自动排版的移动端表样:

具体的实现思路如下:首先在报表中放置布局,在布局内层中放置标签页,标签页中放置容器,每个容器中放置图片和表格,并取消【手机自动排版】,然后按照上述操作在标签页中继续放置容器即可。

(4)手机端高度调整

我们知道组件属性面板中有个【宽】和【高】的属性,这两个属性的设置可以是数值也可以是百分比。对于手机端来说,有排版的组件宽度就是手机一屏的宽度,是一个固定值,高度会根据组件宽度自适应显示对应的高度或显示自身高度。另外当高度是百分比时,组件在手机端显示为设定的百分比,还可以通过属性【手机高宽比系数】来放大或缩小组件的高度的系数,如下图所示。 

此属性默认值是1,在手机app中显示时,组件的宽度会以手机的一屏宽度显示,因此宽度是固定的,手机app中组件的高度的显示为:宽度*高宽比*【手机高宽比系数】。其中宽高比为:当组件的宽度和高度都是百分比时,高宽比=高度百分比/宽度百分比;当组件的宽度是像素值,高度是百分比时,宽高比=1。  

以下图的报表为例,当手机高宽比系数为默认值时,报表在手机app中显示效果可见下图。 

当设置手机高宽比系数为2时,报表在手机app中显示效果如下图:

3.2 未使用布局的报表

只有使用了布局的报表在手机端才会进行排版,对于没有使用布局的报表,一般情况下不做任何处理,即与PC端显示保持一致,但也有下面一些特殊情况需要注意: 

情景一:报表中只有一个组件,则将他们的宽度撑满屏幕。比如下图所示只有一个表格组件的报表。 

在手机app中显示时就会横向撑满整个屏幕,如图所示。

情景二:报表中的组件是多个组件时,则移动端的展示效果和PC端保持一致,和上述手机端不自动排版效果一致。

具体规则参考:http://home.esensoft.com:88/wiki/pages/viewpage.action?pageId=787611685

4参数组件在表体

参数组件需要再移动端表体中显示,需要把参数组件放到布局或者容器中,并且里面只能有参数组件。

附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇移动端访问

下一篇如何制作适应移动端展示的敏捷看板

请先登录