历史版本26 :绝对画布块 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本
11.0

1.2 应用场景

决策报表中,绝对画布块相当于一个 绝对布局 的空白画布,其中的组件以绝对布局的方式显示。

  • 自适应布局时,body 内嵌套其他组件和绝对画布块,绝对画布块内嵌套其他组件,可实现整体自适应布局,部分绝对布局的效果,如下图所示:

场景一.jpg

  • Tab 块内嵌套绝对画布块,绝对画布块内嵌套其他组件。Tab 块为自适应布局,嵌套绝对画布块后可实现 Tab 块内绝对布局的效果,如下图所示:

场景二.jpg

2. 功能介绍编辑

2.1 添加绝对画布块

1)点击菜单栏「文件>新建其他报表>新建决策报表」,选择「新建空白模板」,点击「确定」,如下图所示:


新建空白决策报表.jpg

2)点击菜单栏「模板>PC端自适应属性」,布局方式选择「绝对布局」,如下图所示:

布局方式-绝对布局.jpg

3)将左上角的绝对画布块拖入 body 中,如下图所示:

绝对画布块1.jpg

2.2 编辑绝对画布块

绝对画布块只有处于编辑状态时,才能成功拖入或粘贴组件。

1)双击绝对画布块,或者选中绝对画布块后点击右上角编辑按钮,可进入编辑状态,进入编辑状态后才可向绝对画布块中拖入或粘贴组件。

  • 拖入组件时,需保证被拖入组件尺寸小于绝对画布块的尺寸,且需将组件完全拖入到绝对画布块中,才能成功放入组件,如下图所示:

动图1.gif

  • 若组件已存在于 body 中,只能复制粘贴到绝对画布块,无法直接拖入,且需保证粘贴的组件尺寸小于绝对画布块的尺寸,才能成功粘贴,如下图所示:

动图2.gif

  • 被拖入或粘贴的组件尺寸必须小于绝对画布块的尺寸,否则会提示 无法添加到该区域 或 组件大小超出边界,无法粘贴  ,如下图所示:

动图3.gif

2.3 属性

点击右侧属性面板的「组件设置>absolute0>属性」,「属性」的设置项与菜单栏「模板>PC端自适应属性>布局方式」有关,自适应布局和绝对布局下的设置项略有不同,不同的设置项用橙色方框标出,如下图所示:

属性.jpg

各设置项及说明如下表所示:

设置项
说明
基本组件名称支持设置组件名称,不支持为空或重复,默认为 absolute+数字后缀,依次累加
坐标 · 尺寸
组件位置仅绝对布局时,支持设置组件位置
组件大小支持设置组件大小

2.4 移动端

点击右侧属性面板的「组件设置>absolute0>移动端」,「移动端」的设置项与 body 是否勾选「手机重布局」有关,保留布局下无可用配置项,重布局下仅有一个设置项「高级>显示该层级下的组件导航」,如下图所示:

注:显示该层级下的组件导航,详情参见[通用]组件导航快速定位

移动端.jpg

3. 示例编辑

3.1 新建决策报表

1)点击菜单栏「文件>新建其他报表>新建决策报表」,选择「新建空白模板」,点击「确定」,如下图所示:

新建空白决策报表.jpg

3.2 新建数据集

1)点击左下方数据集管理面板的「+」按钮,选择「数据库查询」。

2)新建数据库查询「ds1」,输入 SQL 语句:SELECT * FROM 销量  ,点击「确定」,如下图所示:

数据库查询.jpg

3.3 设计表单

1)将上方的饼图、绝对画布块分别拖入 body 中并调整大小,如下图所示:

拖入body.jpg

2)选中绝对画布块,点击右上角的编辑按钮,将上方的报表块和条形图分别拖入绝对画布块中并调整大小,如下图所示:

拖入绝对画布块.jpg

3.4 设计图表、报表块

1)点击右侧「组件设置」,双击「chart0」,选择「数据」,具体设置如下图所示:

饼图.jpg

2)点击右侧「组件设置」,双击「chart1」,选择「数据」,具体设置如下图所示:

条形图.jpg

3)进入 report0 编辑界面,A1-D1 单元格分别输入文本,A2-D2 单元格拖入数据列,具体如下图所示:

报表块.jpg

4)选中 D2 单元格,点击右侧的「单元格元素」,选择「基本」,数据设置为「汇总」,如下图所示:

求和.jpg

5)回到表单设计界面,点击右侧的「组件设置」,选中「chart0」,选择「属性」,取消勾选「标题可见」,如下图所示:

饼图标题不可见.jpg

6)点击右侧的「组件设置」,选中「chart1」,选择「属性」,取消勾选「标题可见」,如下图所示:

条形图标题不可见.jpg

3.5 效果预览

3.5.1 PC端

PC 端预览模板,如下图所示:

PC端.jpg

3.5.2 移动端

body 勾选「手机重布局」,绝对画布块则整体重布局,内部保留布局,移动端预览模板,以 App 为例,如下图所示:

注:绝对画布块不支持全屏,但绝对画布块内的的组件例如图表、报表块支持全屏。

重布局.jpg

4. 注意事项编辑

4.1 绝对画布块内隐藏组件占位显示空白

绝对画布块不支持隐藏,但绝对画布块内的组件例如控件、图表、报表块支持隐藏但会占位显示空白。

例如,设置报表块不可见,效果如下图所示:

占位显示空白.jpg

4.2 有布局的模板中报表块无法铺满绝对画布块

问题描述

空白模板中绝对画布块拖入报表块,报表块坐标设置为(0,0),报表块和绝对画布块尺寸一致,报表块可铺满整个绝对画布块。

有布局的模板中绝对画布块拖入报表块,报表块坐标设置为(0,0),报表块和绝对画布块尺寸一致,报表块却无法铺满整个绝对画布块。

例如,新建一个有布局的模板,绝对画布块拖入报表块,报表块坐标设置为(0,0),报表块和绝对画布块尺寸一致,如下图所示:

有布局的模板.jpg

为清楚展示,将 body 设置为灰色,绝对画布块设置为白色,报表块设置为粉色,粉色的报表块无法铺满白色的绝对画布块,如下图所示:

不能铺满.jpg


解决方案

确保报表块的宽度=绝对画布的宽度+二分之一的 body 的组件间隔+ body 的左边距,高度同理。

将报表块的尺寸按照此方法设置后,粉色的报表块即可铺满白色的绝对画布块,如下图所示:

可以铺满.jpg

5. 下载模板编辑

点击下载已完成模板:绝对画布块.frm