[]
这一章节，我们将实战实现下面的仪表板页面。注意本章只是为了讲解布局，本章中的数据都是固定的示例数据。在做真实的系统中，根据业务需求，将对应的数据改成对应的真实业务数据即可。
本章只是将仪表板页的布局完成，没有涉及具体的业务，关于界面的布局，强烈建议大家先学习前面的格子布局功能介绍章节，弹性布局章节，表单章节，自由布局章节，这几个章节都详细的以实际中的场景介绍功能和属性。
请注意，在本章学习前，请先学习母版页，本章会用到母版页面的导航和页面。
此仪表板页面拆解为3大部分，从上到下拆分成3大部分
第一部分为顶部的统计卡区域，宽度充满浏览器宽度，高度固定
中间部分为图表区域，左侧图表和右侧图表宽度大概3：2，高度固定
最后一部分为表格数据区域，2个表格基本相同，高度充满剩余浏览器高度
观察图上，我们可以看到整个页面划分，会有一个灰色系的背景进行分隔，所以第一步，并不是开始制作页面，而是给页面设置整体的灰色背景图片。
回到设计器，打开仪表板页面，插入背景图片，选择背景色块，设置颜色为“f2f3f5”， 如下图。
接下来，将背景图片充满整个页面，勾选 背景图片的，适配浏览器宽度，适配浏览器高度，这样一个底色的背景就有了，并且是运行之后，充满整个页面。
运行之后，可以看到如下图的效果，但是能看到灰色背景的页面，并没有充满剩余的空间，这是因为创建的页面，所有的行和列，都是固定的行高和列宽，我们需要设置格子的范围模式，充满剩余空间。
回到设计器，先随意选择一列，一行设置范围模式，后面我们再调整。如下图，AH列，第20行，运行查看效果。
运行，可以看到带背景的仪表板页面充满了整个页面占位区。
关于格子行和列的范围模式，此处不讲解，详见格子布局的功能介绍。
接下来，我们实现第一部分的统计卡片区域，同样对于这一部分，我们再次进行拆解，可以看出来，这块区域是有4个很相似的卡片构成，只是第一个卡片区域的背景色不一样。我们按下面思路实现。
整体第一部分为弹性布局，水平从左到右排列（用于显示4个统计卡片）。
弹性布局中每一个统计卡片为一个独立的弹性布局。
回到设计器，选择B6:AJ6格子区域，拖拽弹性布局到此区域，默认就是水平从左到右排列，所以不需要额外设置。
接下来，需要实现统计卡片，由于4个统计卡片的内容非常相似，我们先实现一个，然后复制粘贴即可。同样的对于这个统计卡片，我们需要拆解，这个卡片，整体结构是从上到下分成3部分。
第一部分，只有一个文本。
第二部分是水平排列，两端对齐的内容。
第三部分也是水平排列，有4个内容。
从上面的拆解来看，整体是从上到下，但是第2和第3部分又存在从左到右的内容，也就是说第2和第3部分需要再次嵌套弹性布局进行布局。
接下来，我们先实现统计卡片的弹性布局，拖拽弹性布局到B2的弹性布局中，如下图，垂直排列，从上到下。起了一个名称，统计卡片1。
统计卡片1的高度拉伸充满了父弹性布局的高度，因为默认在交叉轴是拉伸充满。
统计卡片1的宽度，暂时先不设置，后面再设置。
拖拽文本到统计卡片1弹性布局中，文本为“标题文字”。
拖拽弹性布局到统计卡片1弹性布局中，两端对齐，拖拽文本和图片到此弹性布局中，如下图，同样给这个弹性布局起名称叫“数据图标容器”，方便后面的文字说明。
选择文本，修改文本“6437”，设置单元格格式，字号26，货币数字格式。此处的6437，只是写的固定数字，具体显示的数字，可以根据业务需求，在页面加载时，给此文本设置值，以达到显示真实期望的业务数字。本章只是为了讲解布局，所有数据都是固定的示例数据。
选择图片，选择一个内置的图标，设置图标大小32。
运行查看效果，能看到文本设置字号之后，运行时的宽度不能显示全所有内容，回到设计器，调整大小。
先选择图片，打开项目在容器内的布局，将宽度设置为40，将图标的宽度减少。
此处不需要改动图标的高度，因为弹性布局交叉轴是拉伸填充，图标的高度是与它所在的父容器一样高度，后面调整弹性布局的高度，就可以让里面的数字文本和图标的高度统一变化。所以此处高度不需要关注。
选择数字文本，打开项目在容器内的布局，设置放大和缩小比例为1。此处并没有像图片一样，给一个固定的宽度，还是直接设置放大比例和缩小比例，让其宽度跟随 数据图标容器 自动填满。
运行查看效果，卡片的第2部分已经完成，接下来回到设计器，我们完成卡片的第3部分。
拖拽弹性布局到统计卡片1中，名称 底部统计数据容器，如下图。
此时统计卡片的3个部分已经有了，现在调整一下高度。
选择标题文字，打开项目在容器内的布局对话框，设置高度为32px。
选择第3部分的底部数据容器，打开项目在容器内的布局对话框，设置高度为32px。
选择中间第2部分的数据图标容器，打开项目在容器内的布局对话框，设置 放大比例 1，缩小比例 1。
注意不是设置固定高度。
这3步，分别将标题文本，以及第3个容器设置固定高度，中间为伸缩高度填充父容器的空间。
从前面步骤到现在，没有调整过统计卡片容器中的3部分子元素的宽度，因为这3部分都受父容器（统计卡片1容器）的交叉轴对齐方式：拉伸填充的影响，宽度方向，都是拉伸填充。
注意：上面的第2个和第3个都是调整的容器的高度。如果不好选中容器，可以在结构树上找到对应的容器。
如下图结构树，使用弹性布局，表单，自由布局，经常需要找到对应的元素，在界面中不容易选中，可以在结构树中快速方便的定位到元素，通过结构树也很容易看到容器的嵌套结构。
接下来，我们在底部统计数据容器，放置需要的文本和图标。
拖拽文本到底部统计数据容器中，文本为“对比上季度”。
拖拽图片到底部统计数据容器中，选择向上箭头图标，红色，图标大小 16。
拖拽图片到底部统计数据容器中，选择向下箭头图标，绿色，图标大小 16。
拖拽文本到底部统计数据容器中，文本为“12%”。
拖拽图片到底部统计数据容器中，选择展开箭头图标，灰色，图标大小 16。
运行查看效果，一个统计卡片基本的雏形已经有了，但是仍然还是有细节不对，底部数据容器的 > 箭头希望能靠右显示，向上或者向下的箭头希望根据业务情况显示一个。
回到设计器，开始调整底部数据容器内元素的宽度。
选择 对比上季度 文本 打开项目在容器内的布局对话框，设置宽度为40。
选择 向上箭头 打开项目在容器内的布局对话框，设置宽度为40。
选择 向下箭头 打开项目在容器内的布局对话框，设置宽度为40。
选择 12%文本 打开项目在容器内的布局对话框，设置 放大比例为1，缩小比例为1。
选择 展开>箭头 打开项目在容器内的布局对话框，设置宽度为40。
效果如下图，对比上季度，向上，向下以及展开>箭头，都是固定宽度，12%的文本宽度是放大/缩小占据剩余宽度空间。以此达到>箭头靠右显示。
接下来，我们把向上或者向下箭头，勾选不可见，以此达到隐藏一个箭头。
注意：真实的业务场景并不是直接将向上或者向下箭头设置成不可见，而是需要根据真实的业务需求判断，具体是上升还是下降，如果是上升，隐藏向下箭头，如果是下降，隐藏向上箭头。如果要实现此业务需求，有2种方案：
方案1：在页面加载命令中，根据业务判断条件，使用设置单元格命令，隐藏或者显示向上，向下箭头。
方案2：给向上，向下箭头都设置条件格式，条件格式是公式，需要引用对应的业务格子，辅助判断公式，达到隐藏或者显示的条件。
本章只为了讲解布局，所以此处为了方便，直接将向上箭头勾选 不可见。如果有需要讲解具体的业务处理方案，请在论坛发帖，我再加另外的章节详细讲解。
运行查看效果，一个统计卡片内容已经完成，并且可以看到，虽然隐藏了向上箭头，布局动态的调整，并没有因为隐藏向上箭头而出现空白，而是动态的显示后面的元素。接下来完善一下间距和背景。
回到设计器，选择整个统计卡片1容器，打开功能区上的快速样式，我们建一个白色带圆角8的样式，应用于整个卡片，如下图。
接着设置统计卡片1容器的内边距，选择统计卡片1，属性面板，打开 容器内边框对话框，设置一些内边距，如下图。
运行查看效果，一个完整的带背景的统计卡片就完成了。接下来我们制作其他的统计卡片。
回到设计器，选择统计卡片1，复制，在第一部分的大容器内粘贴，如下图。
继续在大容器内复制，粘贴，总共有4个统计卡片，可能会出现下图中的情况，设计器中预览中，只能看到2，3个卡片，但是在结构树上，是能看到4个的，别着急，我们接下来调整统计卡片的宽度，让4个统计卡片均分宽度。
如何做到平均分配呢，还是需要利用放大和缩小比例，如果不好选择，直接在结构树上选中统计卡片容器。
选择统计卡片1容器， 打开项目在容器内的布局对话框，设置 放大比例为1，缩小比例为1。
选择统计卡片2容器， 打开项目在容器内的布局对话框，设置 放大比例为1，缩小比例为1。
选择统计卡片3容器， 打开项目在容器内的布局对话框，设置 放大比例为1，缩小比例为1。
选择统计卡片4容器， 打开项目在容器内的布局对话框，设置 放大比例为1，缩小比例为1。
运行查看效果，4个一样的统计卡片就完成了，对于每个卡片中的图标，文字，数字都可以根据业务调整。
回到设计器，选择第一个统计卡片，添加一个新的蓝色背景的样式。当然容器背景为蓝色，里面的文字和图标前景色需要设置成白色，有对比度，如下图效果，就不此处详细讲解了。
接下来，设置一下第一大部分内的卡片之间的间距，选择最外面一层的容器，设置列间距为20。因为是水平排列的卡片，一行呈现，需要设置列间距。
至此，第一部分的卡片区域已经完成，运行查看效果图。
前面在活字格页面布局中提到，活字格的内置图表和内置表格，是不能在容器内使用的，只能在格子区域使用。
同样的，我们进行拆解，左右两个图表部分，都是由以下2部分组成。
图表上方的标题操作栏
图表
接下来我们先做左侧部分区域，标题操作栏以及图表。
在设计器中，选择B8:X8格子区域，拖拽弹性布局到此区域。
拖拽文本，文本为“标题方案”， 打开项目在容器内的布局对话框，设置放大比例为1，缩小比例为1。
拖拽日期单元格到此弹性布局， 打开项目在容器内的布局对话框，设置宽度180。
拖拽文本到弹性布局中，文本为"-"，文本居中对齐， 打开项目在容器内的布局对话框，设置宽度20。
拖拽日期单元格到此弹性布局， 打开项目在容器内的布局对话框，设置宽度180。
效果如下图，日期是固定宽度，标题文字宽度是放大/缩小设置，所以此标题文字宽度拉伸填充容器剩余宽度。
接下来，插入折线图表，调整图表大小，让其在B9：X18区域，如下图。
运行查看效果，简易版的图表部分已经完成，接下来是调整一下高度。
回到设计器，将第8行的行高调整为64，可以看到标题操作容器高度也变成64，里面的元素高度，由于是拉伸填充，导致高度也变成了64，需要调整一下设置。
选择标题操作栏的容器，将交叉轴对齐方式改成居中对齐，改完之后，里面的元素居中对齐，但是有些元素的高度并不是期望的高度（期望高度32px）。
接下来，选择容器的情况下，按Ctrl+A进行全选里面子元素，将选中标题文字，日期1，-，日期2 单元格，打开右侧属性面板中，点击打开 项目在容器内的布局对话框，设置高度为32。
运行查看效果，左侧图表带标题操作栏已经初步完成，但是我们发现，左侧图表加标题栏没有白色背景，希望能像统计卡片一样，有个圆角8的白色背景。虽然图表是白色的，但是希望是标题栏和图表统一在一个圆角8的白色背景中。
回到设计器，插入一个背景图片，选择 背景色块 白色，插入之后，调整位置和大小，放在B8到X18区域，并且设置圆角为8，如下图。
运行查看效果，左侧图表部分基本已经完成，还有一些细节需要补充，比如标题栏中左右两侧没有边距，可以设置容器的内边距，给左右内边距设置成20，另外图表也需要绑定数据源，并且设置图表的一些设置，以达到期望的效果，本章不再详细讲解图表的配置。
配置图表之后，可以运行查看效果，运行之后，发现有个问题，期望的左侧图表占占据更多的宽度，但是实际上左侧图表部分在浏览器中占据宽度是固定的。
回到设计器， 可以看到AH列是范围模式，其他列都是固定宽度，运行之后，AH列会占据浏览器中剩余宽度，左侧图表所在的列都是固定的宽度，我们期望当有剩余宽度时，左侧图表也能占据剩余宽度。
选择图表所在的任意一列，比如U列，设置范围模式，设置为2。AH列范围模式为1。这个设置表示，运行之后，如果有剩余宽度，UI列占据2份，AH列占据1份。
运行查看效果，左侧图表部分整体宽度加宽，达到期望效果。
接下来关于，图表的右侧部分，基本上和左侧图标差不多的操作。
弹性布局，只是垂直排列，放2个文本显示文本。
插入圆形图表，配置图表。
再插入一个白色背景的背景图片，圆角为8。
弹性布局中设置行间距为0，让标题文字以及其下方的日期文字更紧凑。
运行查看效果，到此中间的图表部分已经完成，接下来我们实现第3部分，表格部分。
前面在活字格页面布局中提到，活字格的内置图表和内置表格，是不能在容器内使用的，只能在格子区域使用。做完第2部分，接下来对于第3部分，同样的，我们再次进行拆解，依然是分成左右两个表格部分，每部分和图表一样都是包含以下2部分组成。
表格上方的标题操作栏
表格
接下来我们先做左侧部分区域，标题操作栏和表格。
左侧表格的标题栏，只有一个标题文本，只需要在对应位置的格子，输入文本即可，如下图，B20格子，编辑，输入文本“标题文字”。然后将第20行的行高，设置为64。
接下来，选择格子区域C21:Q26, 然后直接从数据表中选择需要显示数据的数据表，到目标区域内，弹出绑定数据表的选择列对话框，选择需要显示数据的字段，点击确定，绑定内置表格完成。
接下来，同图表一样，我们需要给表格以及标题区域，整体加一个白色背景，按前面的方法，插入一个白色背景图片，大小覆盖标题和表格，B20：R27, 如下图，白色背景图片，圆角为8。
运行查看效果，标题加表格的部分基本完成。由于表格没有内边距功能，所以前面设置的表格区域比白色背景图片区域在格子区域内小一些，就是为了留出左侧，右侧，以及下方空白行，达到间距的效果。
接下来，就是右侧的表格部分，右侧表格标题栏是左右两部分，左侧标题文字，右侧为按钮式的单选项。使用弹性布局的两端对齐布局。选择格子区域T20:AJ20, 拖拽弹性布局到此格子区域，设置弹性布局两端对齐。
拖拽文本到容器内，文本为“标题文字”。
拖拽单选按钮到容内，风格选成按钮风格。
接下来，同样是放置表格，选择格子区域U21:AI26，直接拖拽数据表到此区域，在弹出的选择项对话框中，选择需要显示的绑定列，点击确定，完成表格绑定，如下图。
再次给此表格区域，添加白色背景图片，按前面的步骤，插入一个背景图片，调整大小，覆盖标题和表格，圆角为8，如下图。
运行查看效果，第3部分的两个表格部分，基本完成，接下来我们处理一些边距。
回到设计器，选择右侧表格上方的容器，设置内边距左右为20px。
然后去掉U列的列宽范围模式，因为，希望表格这两部分平均宽度，改成选择J列，设置列宽为范围模式为1。
这样，J列和AH列都是范围模式，运行，这2列平均浏览器剩余宽度，在达到两个表格在宽度上是均分剩余宽度。
运行查看效果，到此我们已经完成仪表板页面的所有布局功能。剩下的是按实际业务需求，调整具体的数据。当然还有一些特别细节的间距，文本大小等没有处理，在此章节就不再继续讲解了，可以自行学习进行处理。
本章节使用格子布局，弹性布局以及活字格内置图表，表格等基础功能，完成了一个较为复杂的仪表板面板，充分了解和学习活字格格子搭配弹性布局，快速搭建灵活的界面布局。本章中内置的活字格表格只能放置在格子区域，如果使用EL表格，那么第3部分的2个表格部分，可以全部换成弹性布局完成功能。可以当作一个作业留给大家进行练习。
本章只是将仪表板页的布局完成，没有涉及具体的业务，关于界面的布局，强烈建议大家先学习前面的格子布局功能介绍章节，弹性布局章节，表单章节，自由布局章节，这几个章节都详细的以实际中的场景介绍功能和属性。
