走进KeplerPAP的无代码编程之旅（四）-页面建模（报表页面）

页面建模学习操作：报表页面

报表页面：通过特定条件筛选应用系统中数据，以图形方式呈现给用户；列表页面可以设置查询区、按钮区、图形元素等三部分。（图中展示数据仅供参考，具体数据以实际录入为准）

1. • 报表元素介绍

报表页面建模元素(如下图)主要分为布局元素、查询元素、按钮元素、数据元素、报表元素。

【布局元素】布局元素区分为选项卡、卡片、查询区、按钮区。

1. 选项卡用于在页面内构建子页面，可容纳其他布局元素、数据元素、报表元素；

2. 卡片用于页面内元素分组，可容纳其他布局元素、数据元素、报表元素；

3. 查询区用于容纳查询元素及按钮区；

4. 按钮区用于容纳按钮元素。

【查询元素】查询元素仅仅拖拽至查询区，用于通过条件筛选应用系统数据。

【按钮元素】按钮元素仅仅只能拖拽至按钮区，用于操作页面相关功能。

【数据元素】可拖拽至建模区及布局元素，用于汇总展示表单数据。

【报表元素】可拖拽至建模区及布局元素，以图形方式呈现应用系统数据内容。

2. • 案例操作演示

接下来，通过参照一个应用系统的产品设计，进行一步一步的示范操作，演示如何通过互联网共享软件工厂Kepler PAP页面建模来完成应用系统的报表页面。

1. • 查看产品设计

2. • 创建表单页面和列表页面

第一步：报表页面建模前需要先创建表单页面和列表页面（如下图），用来对数据的录入和管理，创建表单页面和列表页面，可参照上章节表单页面建模和列表页面建模。

3. • 新增报表页面

第一步：新增报表页面

1. 在建模工作台右边模型区，点击加号或者右击页面建模（如下图），进行报表页面创建；

2. 在弹窗页面选择报表页面，

3. 其次录入页面名称：机组报表图形。

4. • 机组数量（数值统计元素）

说明：机组数量主要统计机组信息中共有多少台机组数量，通过数字进行直观展示；

第一步：拖入卡片和数值统计元素.

1. 选择卡片设置元素属性，将卡片高级属性中的显示标题设为关闭状态；

2. 调整数值统计元素宽度，依照产品设计页面共有一行并排4个数值统计元素，页面总宽度为24，将元素宽度愤怒设为6；

数值统计元素宽度调整；

第二步：对数值统计进行属性设置.

3. 数据显示位置设为居中；

4. 标题内容：机组数量；标题字体大小20；标题字体颜色：#08D4F1；

5. 数值字体大小：20；数值字体颜色：#F4EFEF

6. 查询数据类型：数据模型（选择数据来源类型）

7. 查询数据模型：机组信息表单（选择统计的数据来源表单）

8. 添加查询字段：机组名称（选择所选表单中需统计的字段）

9. 聚合函数：求总数（选择统计的计算方式）

5. • 平均额定有功功率（数值统计元素）

说明：平均额定有功功率主要计算机组信息中所有机组额定有功功率的平均值；

第一步：选中机组数量，通过快捷键进行复制(CTRL+C)粘贴(CTRL+V)新的元素，将新元素标题命名为平均额定有功功率；

第二步：设置数据来源:

查询数据类型：数据模型

查询数据模型：机组信息表单

添加查询字段：额定有功功率

聚合函数：求平均值

6. • 平均最小技术出力（数值统计元素）

说明：平均最小技术出力主要计算机组信息中所有机组最小技术出力的平均值；

第一步：选中机组数量，通过快捷键进行复制(CTRL+C)粘贴(CTRL+V)新的元素，将新元素标题命名为平均最小技术出力；

第二步：设置数据来源:

查询数据类型：数据模型

查询数据模型：机组信息表单

添加查询字段：最小技术出力

聚合函数：求平均值

7. • 检修异常数（数值统计元素）

说明：检修异常数主要统计机组维修计划中检修异常数的和；

第一步：选中机组数量，通过快捷键进行复制(CTRL+C)粘贴(CTRL+V)新的元素，将新元素标题命名为检修异常数；

第二步：设置数据来源:

查询数据类型：数据模型

查询数据模型：机组维修计划表单

添加查询字段：检修异常数

聚合函数：求和

8. • 区域机组类型（普通柱状）

说明：通过柱状图的展现形式，展示机组信息中每个区域中各机组类型的数量；

第一步：拖拽卡片至建模区，选中卡片宽度调整为12；卡片名称：区域机组类型，字体设20，标题颜色为 #F8EFEF。

第二步：拖拽报表元素普通柱状至区域机组类型卡片。

第三步：绑定表单

1. 选中报表元素普通柱状，

2. 设置数据模型为：数据模型；

3. 模型类型为：机组信息。

第四步：设置X轴坐标

4. 选中报表元素普通柱状，

5. 设置类别为：机组所在区域，正序。

第五步：设置X轴项目类型

6. 选中报表元素普通柱状，

7. 设置系列为：机组类型，正序；

8. 配置数据来源来源字典：开启，选择机组类型。

第六步：配置Y轴坐标

9. 选中报表元素普通柱状，

10. 设置指标为：主键、正序、计数。

第七步：报表数据查询和标题设置（如下图）

1)查询报表数据：点击可更新绑定字段的数据展示

2标题文字显示：关闭

第八步：配置X轴样式显示（如下图）

11. X轴显示：开启；

12. X轴名称：机组区域。

第九步：配置Y轴样式显示（如下图）

13. Y轴显示：开启；

14. Y轴名称：类型数量。

第十步：配置图列及数据相关显示（如下图）

15. 数据显示：开启；

16. 图例显示：开启。

9. • 机组类型占比（普通饼图）

通过互联网共享软件工厂https://www.isoftfactory.com/平台案例开发

说明：通过饼图的展现形式，展示机组信息中各机组类型数量的占比情况；

第一步：拖拽卡片至建模区，选中卡片宽度调整为12；卡片名称：机组类型占比，字体设20，标题颜色为 #F8EFEF。

第二步：拖拽报表元素普通饼图至区域机组类型卡片。

第三步：绑定表单

1. 选中报表元素普通饼图，

2. 设置数据模型为：数据模型；

3. 模型类型为：机组信息。

第四步：设置饼图项目

4. 选中报表元素普通饼图，

5. 设置类别为：机组类型，正序；

6. 配置数据来源字典：开启，选择机组类型;

7. 系列：不设置

第五步：配置饼图比例

8. 选中报表元素普通饼图，

9. 设置指标为：主键、正序、计数。

第六步：配置饼图相关数据显示（如下图）

10. 标题显示：关闭。

11. 数据显示：开启。

3）图例显示：开启。

10. • 生成部署

构建完所有的页面和模型，开始进行生成部署，地址生成后直接复制地址到浏览器进行查看。

生成页面查看