1. 概述编辑
1.1 版本
报表服务器版本 |
---|
11.0 |
1.2 应用场景
决策报表的布局是指决策报表 body 内所有组件的位置以及组件之间的间距所构成的布局排版,一个好的布局会让你的模板看起来主次分明、清晰美观。
决策报表中共包含三种布局方式:自适应布局>非固定布局、自适应布局>固定布局、绝对布局。
本文将介绍三种布局方式的特点对比以及各布局的效果。
2. 布局推荐编辑
在正式介绍布局方式之前,我们需要了解一个功能:布局推荐。
新建决策报表时,会弹出模板布局选择界面,为用户提供了多种常用的布局效果。可选择不同数量的模块进行查看,并提供了「简约视图」和「真实视图」两种展示效果。
此时可直接选择新建空白模板,也可选择带布局的模板。若选择带布局的模板,body 界面将会按照选择的布局展示「空白占位块+间距」。如下图所示:
注1:「占位块」指自适应布局下放置一个组件的虚拟容器。
注2:目前仅支持新建模板时选择布局,新建模板后不支持修改选择其他布局;不支持自定义布局推荐。
3. 布局方式编辑
首先我们看一下三种布局方式各自的特点对比,如下表:
布局方式对比 | 自适应布局>非固定布局 | 自适应布局>固定布局 | 绝对布局 |
---|---|---|---|
是否有占位块 | 有占位块(用于放置组件的虚拟容器),空白占位块不支持任何操作 | 无占位块 | |
显示占位块 | 支持显示空白占位块,添加组件后,占位块不显示 | - | |
添加占位块 | 支持,添加组件时,占位块跟随组件添加 | 不支持 | - |
添加组件 | 拖拽组件到空占位块时,双向铺满该占位块,空白模板则双向铺满 body | 拖拽组件到空占位块时,双向铺满该占位块 | 组件可直接拖入 body 任意位置,允许组件重叠 |
拖拽组件到已有内容占位块时,新增一个带占位块的组件,自动调整相邻组件大小位置 | 占位块原有组件被替换 | ||
拖拽组件到非占位块的间隔区域时,提示:无法添加到该区域 | |||
移动组件 | 占位块跟随组件移动,布局变化 |
| 随意移动,不影响其他组件位置 |
复制粘贴组件 | 支持复制粘贴组件+占位块 | 不支持复制粘贴 | 支持复制粘贴组件 |
删除组件 | 组件删除,占位块随之删除,布局变化 | 组件删除,占位块位置不变,布局不变 | 删除组件不影响其他组件 |
组件间隔/内边距 | 支持修改 | 置灰,不支持修改 | 注:自适应布局下不支持多选组件 |
组件坐标尺寸 | 支持拖拉组件,支持右侧属性面板修改尺寸大小,但其他组件布局会跟随改变 | 支持拖拉组件,支持右侧属性面板修改坐标和尺寸 | |
布局切换 |
|
3.1 自适应布局>非固定布局
新建决策报表时,无论选择新建空白模板还是带布局的模板,模板默认布局方式均为「自适应布局>非固定布局」。
新建了带布局的模板时,body 中的虚线框即「空白占位块」,空白占位块不支持做任何操作,仅用于指示组件的放置位置,且一个占位块只支持一个组件(绝对画布块/tab块/无绝对画布块或tab包裹的图表块和报表块)。
拖拽组件到 body 中时,仅支持拖入占位块,若拖拽至非占位块的位置,会提示「无法添加到该区域」。
当向占位块拖入组件时,组件双向铺满该占位块,右上角组件面板则显示拖入的组件名称。
移动或删除组件时,占位块跟随组件移动或删除,布局自动调整。
演示效果如下:
3.2 固定布局
固定布局下 body 的组件间隔和内边距置灰,不可编辑。如下图所示:
拖拽组件时双向铺满占位块,拖拽至非占位块的位置,会提示「无法添加到该区域」。
将组件拖拽至已有组件占位块时,会覆盖掉原来的组件。
移动或删除组件,不影响占位块的布局。
两个占位块的组件可实现位置对换。
不支持组件复制粘贴。
演示效果如下:
3.3 绝对布局
组件拖入到 body 中会保持组件本身大小,不会铺满 body,拖入时需将注意组件需完全拖入 body 才可添加成功。
组件可重叠,可随意放置位置。
组件支持多选,多选时可对组件进行排版对齐的设置,详情请参见文档:组件排版对齐 。
组件可通过右侧属性面板调整其位置及大小。
演示效果如下:
4. 布局切换编辑
从自适应布局切换为绝对布局时,已经添加的组件位置不变,其他空白占位块消失;
从绝对布局切换为「自适应布局」时,提示:切换后所有组件的位置都会改变且无法恢复,确认切换吗?点击确认后,切换到「自适应布局>非固定布局」状态。此时相当于新建空白模板时的状态,组件自适应铺满 body ,且组件之间无间距。如下图所示:
非固定布局与固定布局切换时,组件及占位块位置无变化。但需要注意:如果是空白模板从「非固定布局」切换为「固定布局」,此时不支持拖入组件。如下图所示: