页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(待完善)

1 概述

手机布局用于单独配置报表在手机端上的布局排列效果。

2 业务场景

2.1 基于已有报表创建手机布局

1、场景描述:在PC端制作好了仪表盘,并且设置了手机布局,出差时不方便用电脑进行访问,这时就可以通过移动设备进行查看。

2、操作步骤

(1)在仪表盘编辑界面,点击工具栏的 设备 按钮,点击  创建一份单独的手机布局,用于单独配置手机端的布局效果,该布局效果不影响 电脑/平板 的最终查看效果。

Image Added

(2)创建手机布局后,默认保持和 电脑/平板 相同的布局效果,但画布大小自动切换成手机的规格。此时对手机布局进行调整

  • 手动拖拽调整组件的大小和排列位置(这些操作只在手机布局下生效,不影响电脑/平板报表的布局效果)
  • 支持添加、删除、隐藏和修改组件效果(这些操作会同时影响手机布局和电脑/平板布局效果)

Image Added

(3)点击保存报表。在电脑端和手机端分别查看该报表,效果如下:

  • 电脑/平板端

Image Added

  • 手机端

Image Added

2.2 直接创建手机布局

1、场景描述:创建手机布局报表,该报表只适用于手机端进行查看。

2、操作步骤

(1)新建一个仪表盘,点击工具栏的 设备 按钮,点击  创建一份单独的手机布局,用于单独配置手机端的布局效果。

(2)在手机布局上根据需求制作报表。

Image Added

(3)点击保存报表,弹出提示:电脑/平板布局的画布内没有组件,是否同步手机布局效果到电脑/平板上?

  • 选择“是”,则在电脑/平板端查看报表时,效果和移动端查看效果一致
  • 选择“否”,则在电脑/平板端查看报表时,报表空表

Image Added

(4)在移动端查看报表,效果如下:

Image Added

3 更多功能

在手机布局中,可以对画布大小和缩放方式进行设置。

Image Added

3.1 画布

系统内置一些常用手机设备的选择,如果内置的“设备”不满足需求时,支持自定义画布大小。

Image Added

3.2 缩放方式

手机布局支持设置缩放方式,包含:等比缩放宽度铺满、等比缩放高度铺满、全屏铺满、不缩放。

缩放方式效果

等比缩放到最佳比例

定义保持高宽比例,按当前屏幕大小显示全部内容

Image Added

等比缩放宽度铺满

定义宽度铺满全屏,高度按比列自动缩放。

说明:

(1)当高度小于屏幕,则垂直居中显示,出现下边留白。

(2)当高度大于屏幕,出现垂直滚动条。




Image Added

等比缩放高度铺满

定义:高度铺满全屏,宽度按比列自动缩放。

说明:

(1)当宽度小于屏幕,则水平居中显示,出现左右两边留白。

(2)当宽度大于屏幕,出现水平滚动条。

全屏铺满

定义:不保持高宽比例,按当前屏幕大小显示全部内容。


定义:保持画布原先的大小。

3.3 移入筛选器面板

在画布中,支持通过Ctrl键或框选多个筛选器组件、参数组件,移入到筛选器面板中,操作效果如下:

1、选中筛选器组件/参数组件后,点击右键菜单,选择 移入到筛选器面板 ,效果如下:

Image Added

2、同样的方法将另一个筛选器组件也移入到筛选器面板中;点击画布右上角的 Image Added,打开筛选器面板,效果如下:

Image Added

3、在筛选器面板中支持拖拽调整筛选器组件的顺序,效果如下:

Image Added

3、在手机端查看报表,点击右上角的Image Added,可查看移入到筛选器面板的筛选器组件,效果如下:

Image Added

4、如果想要将筛选器组件从筛选器面板中移到画布上,可点击Image Added,效果如下:

Image Added