反馈已提交

网络繁忙

决策报表布局方式

  • 文档创建者:RosieY
  • 编辑次数:8次
  • 最近更新:Alicehyy 于 2021-11-25
  • 1. 概述

    1.1 版本

    报表服务器版本
    11.0

    1.2 应用场景

    决策报表的布局是指决策报表 body 内所有组件的位置以及组件之间的间距所构成的布局排版,一个好的布局会让你的模板看起来主次分明、清晰美观。

    决策报表的布局方式主要分为两类 —— 自适应布局和绝对布局,但自适应布局下还包括两种布局效果 —— 非固定布局和固定布局。

    本文将介绍这几种布局方式的特点差异以及各布局的效果。

    2. 布局推荐

    在正式介绍布局方式之前,我们需要了解一个功能:布局推荐。

    新建决策报表时,会弹出模板布局选择界面,为用户提供了多种常用的布局效果。

    • 可选择不同数量的模块进行查看。

    • 提供了「简约视图」和「真实视图」两种展示效果。

    • 若直接选择新建空白模板,模板默认为「自适应布局>非固定布局」。

    • 若选择带布局的模板,body 界面将会按照选择的布局展示「空白占位块+间距」。如下图所示:

    注1:「占位块」指自适应布局下用来放置组件的虚拟容器,空白模板初始没有占位块。

    注2:目前仅支持新建模板时选择布局,新建模板后不支持修改选择其他布局;不支持自定义布局推荐。

    CBDFFAF9-EDF7-4F5F-BF4B-5BA429A3595A.GIF

    3. 布局方式

    3.1 自适应布局>非固定布局

    • 新建决策报表时,无论选择新建空白模板还是带布局的模板,模板默认布局方式均为「自适应布局>非固定布局」。

    • 空白模板初始无占位块,但添加组件时会随之添加占位块。

    • 新建了带布局的模板时,body 中的虚线框即「空白占位块」,空白占位块不支持任何操作,一个占位块只支持放置一个组件。

    • 拖拽组件到 body 中时,仅支持拖入占位块,若拖拽至非占位块的位置,会提示「无法添加到该区域」。

    • 当向占位块拖入组件时,组件双向铺满该占位块,右上角组件面板则显示拖入的组件名称。

    • 移动或删除组件时,占位块跟随组件移动或删除,布局自动调整。

    演示效果如下:

    3.2 自适应布局>固定布局

    • 空白模板初始无占位块,此时若切换为固定布局,则不支持向 body 中拖入组件,提示「无法添加到该区域」。

    • 固定布局下 body 的组件间隔和内边距置灰,不可编辑。如下图所示:

    Snag_7144b1ee.png

    • 拖拽组件时双向铺满占位块,拖拽至非占位块的位置,会提示「无法添加到该区域」。

    • 将组件拖拽至已有组件占位块时,会覆盖掉原来的组件。

    • 移动或删除组件,不影响占位块的布局。

    • 两个占位块的组件可实现位置对换。

    • 不支持组件复制粘贴。

    演示效果如下:

    3.3 绝对布局

    • 组件拖入到 body 中会保持组件本身大小,不会铺满 body,拖入时注意需将组件完全拖入 body 才可添加成功。

    • 组件可重叠,可随意放置位置。

    • 组件支持多选,多选时可对组件进行排版对齐的设置,详情请参见文档:组件排版对齐 。

    • 组件可通过右侧属性面板调整其位置及大小。

    演示效果如下:

    3.4 差异总结

    看完上述三个布局的演示,总结出以下几个特点:

    • 绝对布局自由度最高,可随意放置位置,支持组件重叠,但各组件之间的排版、对齐调整起来会比较费时费力。

    • 自适应布局的非固定布局灵活度最高,可随意改变布局。

    • 自适应布局的固定布局可固定模板布局,适用于希望布局不变,但组件可以随意调整的场景。

    详细对比如下表:

    布局方式对比自适应布局>非固定布局自适应布局>固定布局绝对布局
    是否有占位块

    有占位块(用于放置组件的虚拟容器)。空白占位块不支持任何操作,一个占位块只支持一个组件(绝对画布块/tab块/无绝对画布块或tab包裹的图表块和报表块)

    注:空白模板无占位块

    无占位块
    显示占位块支持显示空白占位块,添加组件后,占位块不显示
    -
    添加占位块支持,添加组件时,占位块跟随组件添加不支持-
    添加组件

    拖拽组件到空占位块时,双向铺满该占位块,空白模板则双向铺满 body

    拖拽组件到空占位块时,双向铺满该占位块

    组件可直接拖入 body 任意位置,允许组件重叠

    拖拽组件到已有内容占位块时,新增一个带占位块的组件,自动调整相邻组件大小位置

    占位块原有组件被替换

    拖拽组件到非占位块的间隔区域时,提示:无法添加到该区域

    移动组件占位块跟随组件移动,布局变化
    • 组件移动,占位块位置不变,布局不变

    • 两个占位块的组件可实现位置对调

    随意移动,不影响其他组件位置
    复制粘贴组件支持复制粘贴组件+占位块不支持复制粘贴支持复制粘贴组件
    删除组件组件删除,占位块随之删除,布局变化组件删除,占位块位置不变,布局不变删除组件不影响其他组件
    组件间隔/内边距
    支持修改置灰,不支持修改

    多选后可设置多个组件的 排版与对

    注:自适应布局下不支持多选组件

    组件坐标尺寸

    支持拖拉组件,支持右侧属性面板修改尺寸大小,但其他组件布局会跟随改变

    支持拖拉组件,支持右侧属性面板修改坐标和尺寸
    布局切换
    • 自适应布局切换为绝对布局时,占位块消失,已有组件位置不变

    • 绝对布局切换为自适应布局时,提示:切换后所有组件的位置都会改变且无法恢复,确认切换吗?点击确认后,切换为「非固定布局」,已有组件布局自动调整

    • 非固定布局与固定布局切换时,组件及占位块位置无变化。注:如果「非固定布局」下的空白模板切换为「固定布局」,因为此时无占位块,故无法拖入组件

    4. 布局切换

    • 从自适应布局切换为绝对布局时,已经添加的组件位置不变,其他空白占位块消失;

    • 从绝对布局切换为「自适应布局」时,提示:切换后所有组件的位置都会改变且无法恢复,确认切换吗?点击确认后,切换到「自适应布局>非固定布局」状态。此时相当于新建空白模板时的状态,组件自适应铺满 body ,且组件之间无间距。如下图所示:

    98361F90-293F-4DA7-9002-50F47E8DBA0C.GIF

    • 非固定布局与固定布局切换时,组件及占位块位置无变化。但需要注意:如果是空白模板从「非固定布局」切换为「固定布局」,此时不支持拖入组件。如下图所示:

    9380241E-DA77-43C9-A1F3-BDFF5B0BEE72.GIF

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

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

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭