《工业可视化》课件 任务2.3 设计设备驾驶舱页面 -任务实施

项目二：生产制造的可视化设计任务2.3设计设备驾驶舱页面>>※任务实施《工业可视化》/工业互联网系列课程《工业可视化》/工业互联网系列课程目录1.任务分析2.创建数据源3.创建项目4.设置设备状态数5.设置折线图数据6.设置日历筛选器7.设置分段筛选器8.预览验证页面效果1.任务分析根据任务描述，在已有项目模板的基础上，要完成“车间设备驾驶舱”可视化展示大屏设计，还需要完成的工作分析如下：创建数据源，需要创建“生产设备驾驶舱”所有展示数据的数据源；设备效率指标已经由由工业大数据工程师计算处理完成并落盘到到数据库，数据库信息已给出，源数据库中的表包含：生产设备驾驶舱、镗床设备指标、铣床设备指标、焊接机器人设备指标、生产耗电费用、生产耗电量、总产量等；创建项目，通过导入生产设备驾驶舱模板的项目ID创建项目，将模板画面中的组件关联对应的数据源，完成车间设备工作状态数据的展示。添加日历筛选器组件，并进行属性设置、关联对应的数据源，利用日历筛选器组件实现生产设备数据能按某个选中的日期进行筛选展示。添加分段筛选器组件，并进行属性设置、关联对应的数据源，利用分段筛选器组件实现生产设备效率指标和生产能耗数据能按时间段进行趋势展示。操作步骤2.创建数据源（1）

任务分析连接数据库步骤1：登录云视界平台后，选择左侧“数据源”进入数据源管理页面，并单击“+创建数据源”标签，如图所示。2.创建数据源连接数据库步骤2：进入“创建数据源”页面后，本任务使用“连接MySQL数据库”创建数据源，在“数据库”中单击“连接MySQL数据库”标签；2.创建数据源连接数据库步骤3：在出现的“连接数据库”弹窗中，输入需要创建的数据源名称及连接的数据库信息如下：2.创建数据源（1）

任务分析连接数据库名称：可自定义名称，但不能与“已连接数据库”中的名称相同，本书示例使用“设备驾驶舱”的名称，但是建议在规模教学时，不同学员或读者在可在该名称后加自己的名字或其他编号做后缀，避免命名冲突；服务器：输入需要连接的数据库所在服务器的地址；端口：输入服务器对应的端口号，MySQL数据库默认的端口号为3306；数据库：输入要连接的数据库名，按实际情况填写，本书示例使用的“Production_Department”仅供参考；用户：输入该数据库的用户名；密码：输入用户对应的密码。2.创建数据源（1）

任务分析连接数据库步骤4：单击“测试”标签，如果测试成功会有成功的提示，如图所示，最后单击“连接数据库”完成数据源的创建。2.创建数据源创建数据表步骤1：成功创建“连接数据库”后，在下方“已连接数据库”中会显示前面步骤创建的“设备驾驶舱”数据库，单击打开“设备驾驶舱”数据库。2.创建数据源（1）

任务分析创建数据表步骤2：在“测试数据库”弹窗中，可以看到连接的数据库中的表；单击左侧某个表，在中间的预览区可以看到该数据表的名称及表中的数据，可以对“数据表名称”进行修改。2.创建数据源创建数据表步骤3：本任务选择创建“总产量”“生产耗电费用”“铣床设备指标”“焊接机器人设备指标”“设备驾驶舱”“镗床设备指标”“生产耗电量”的数据表表；并分别对应一一修改其数据表名称，建议以读者或学员姓名或编号做后缀，避免名称冲突。2.创建数据源（1）

任务分析创建数据表步骤4：把“自动更新”后的切换按钮切换到“启动”标签状态；单击配置更新标签，在“更新配置”弹窗中编辑数据表的更新方式和更新时间，如图所示，本书示例使用“增量更新”方式，固定20:00更新。2.创建数据源创建数据表步骤5：完成配置后，单击关闭“更新配置”弹窗的“X”符号，并单击“新建”按钮完成数据源的创建。2.创建数据源创建数据表步骤6：新建数据源完成后，会自动跳转出来数据源详情，用户可以在该页中单击右上角的“”标签，维护该数据源的信息。2.创建数据源创建数据表说明：如果数据源的表头的数据类型导入错误，可以手动进行调整修改，如上图所示，包含数字、字符、日期这三种数据类型。2.创建数据源创建数据表步骤7：单击数据源详情页上的“数据源”标签，返回到数据源列表。2.创建数据源创建数据表步骤8：回到数据源列表，可以查看所有用户已经创建或别人授权的数据源，如图所示，可以在操作列单击“”，会弹出操作内容框，可以对数据源进行删除、重命名、权限设置、查看数据源引用，其中查看数据源引用可以查看到该数据源被哪些页面引用。3.创建项目创建项目（1）切换返回到云视界概览页面，单击“创建项目”，在弹框中单击“导入项ID”。3.创建项目（1）

任务分析导入项目（2）在“导入项目”弹窗中，输入“项目ID”“授权码”“项目名称”等信息，如图所示。建议在规模教学时，不同学员在可在“项目名称”后加自己的名字或其他编号做后缀，避免命名冲突。3.创建项目导入项目（3）导入项目后会直接跳转到编辑界面。4.设置设备状态数设置状态数（1）页面切换到图层，找到“各状态设备数→在线数”的文本，切换到数据源，类型选择数据源，数据源选择“设备驾驶舱_示例”，取值选择“在线数”完成数据源的配置，如图所示。用同样的操作方法，设置“开机数”“作业数”“停机数”等不同设备状态下的数量。注意：如果在创建数据源时，没有把对应的取值数据改为“N数字”类型，则无法在取值框中呈现。4.设置设备状态数（1）

任务分析设置仪表盘数据源（2）从图层中选中“总开机率仪表盘”，切换到数据源，数据源选择“设备驾驶舱_示例”，度量选择“开机率”，如图所示。并按照同样的操作方法，设置“总作业率”“总利用率”等其他仪表盘的数据源。4.设置设备状态数（1）

任务分析设置数据源（3）按照同样的操作步骤，对应设置铣床、镗床、焊接机器人区域的指标的数据源。5.设置折线图数据（1）

任务分析设置折线图数据源（1）设置页面中右上角折线图的数据源，数据源选择“生产耗电量_示例”，维度选择日期，度量选择镗床耗电量、铣床耗电量、机器人耗电量。5.设置折线图数据（1）

任务分析设置折线图数据源（2）用同样的操作方法，设置另外2个折线图的数据源，分别选择展示“生产耗电费用_示例”“总产量_示例”的数据，如下图所示。设置完成后，记得保存，刷新数据可看到显示效果。６.

设置日历筛选图为展示页面添加日历“筛选器”组件，可以实现通过日历筛选器选择查看某日的车间设备驾驶舱情况。设计日历筛选器（1）切换到“网页组件”；找到“筛选器”中的“日历”，单击拖拽到大屏的合适位置设置属性（2）设置日历筛选器的属性如图所示，注意设置背景色时，需要把透明度调为100%才会显示。６.

设置日历筛选图设置数据源（3）选中日历筛选器的状态下，切换到数据源进行数据源设置，如图所示，“影响范围”选择“当前页面”；通过单击“+”图标来增加数据源。６.

设置日历筛选图设置数据源本步骤使用的数据源是“设备驾驶舱_示例、铣床设备指标_示例、镗床设备指标_示例、焊接机器人设备指标_示例”，4个数据源的度量全部选择“日期”如下图所示，设置完成记得保存。６.

设置日历筛选图设计分段筛选器（1）切换到“网页组件”；找到“筛选器”中的“分段筛选器”，单击拖拽到大屏的合适位置，根据审美偏好进行属性设置。7.设置分段筛选图设计分段筛选器（2）选中分段筛选器的状态下，切换到数据源进行数据源设置，“影响范围”选择“当前页面”，如图所示；通过单击“+”图标来增加数据源。7.设置分段筛选图设计分段筛选器本步骤使用的数据源是“生产耗电量_示例、生产耗电费用_示例、总产量_示例”，3个数据源的度量全部选择“日期”如图所示，设置完成记得保存。7.设置分段筛选图预览效果（1）保存页面之后，单击“预览”标签，出现预览页面后可看到由于尺寸不符合，页面会出现变形状态，因此单击选择全屏模式。8.预览验证页面效果预览效果（2）全屏显示“生产设备驾驶舱”画面后，单击“查询日期”后的日历标签选择某一日期，如2022年7月15日，屏幕左侧呈现即为2022年