《工业可视化》课件 任务2.2 设计生产车间信息页面 -任务实施

项目二：生产制造的可视化设计任务2.2设计生产车间信息页面>>※任务实施《工业可视化》/工业互联网系列课程《工业可视化》/工业互联网系列课程目录1.任务分析2.创建项目3.设计订单交付时间4.设计订单完成进度5.设计作业率和能耗6.设计订单生产信息7.设计产量趋势对比8.设计安全素养情况9.设计设备详情信息10.预览验证页面效果1.任务分析本任务的主要目的是显示生产车间的生产情况，包括订单的交付时间、生产完成进度，以起到提示和警醒的作用；车间当日的作业率、能耗和安全素养，明确车间当日的输入情况、输出情况和安全素养情况；车间每个设备的名片，方便资产管理和设备管理。分析结果如下：展示模块具体内容使用组件数据源订单交付时间订单交付倒计时倒计时无订单完成进度订单完成进度的比例直线进度条物模型-生产进度车间能效指标今日作业率立体仪表盘物模型-今日作业率今日耗电量立体仪表盘物模型-今日耗电量车间安全素养今日安全素养检查卡片组件MYSQL数据库-车间安全素养车间设备详情焊接机器人详情图片弹窗无任务分析2.创建项目1）登录云视界，在云视界首页，通过空白模板方式创建新项目，项目名称自定义，创建后进入编辑页面，通过容器为页面进行布局，所需的图片素材在本书配套资源文件夹“任务2_2”中获取，完成效果如图所示。导入项目2.创建项目2）为项目页面绑定物模型和设备为“生产车间”，如图所示。绑定设计主标题（3）设计页面的主标题。把文本组件拖拽到页面标题栏区域，并调整位置及设置其属性，本书示例标题名称为“生产车间总览”。2.创建项目3.设计订单交付时间以倒计时的方式设计订单截止交付时间还剩下多少天，让生产车间所有人员都能在车间的展示大屏上看到任务时间要求，达成工作共识。

（1）使用拖拽的方式，把倒计时组件添加到指定位置。

（2）按照下图所示的线框内的参数，修改组件宽度属性，倒计时的主题、字号和时间格式，其他采用默认设置。3.设计订单交付时间说明：本书的示例参数仅供参考，实际可以根据用户的审美偏向进行调整。设置倒计时属性（3）设置完成之后，切换到数据源编辑区，选择“手动获取”；计算逻辑选择“倒序”；目标日期根据情况选择日期，单击“确定”；倒计时组件就会显示相应的天数。3.设计订单交付时间设置倒计时数据源4.设计订单完成进度设计订单的完成进度，让车间所有人员可以看到目前其工作已经完成的进度，以便了解其目前进度在预期内还是滞后，从而达成一起完成目标的共识。设置直线进度条（1）拖拽直线进度条组件到页面合适位置；尺寸：可以输入数值也可以通过拖拽的方式调整；显示：选择“居中”，如图所示。4.设计订单完成进度其他属性可参考下图进行设置，也可以根据用户的审美偏好进行设置。（2）设置完成直线进度条的属性后，切换到数据源。把“数据源”的“物模型”开关打开，“物模型”选择“生产车间”，数据源选择“采集点数据”，度量点击“+”图标，选择“生产进度”，数据源设置完成，见图所示。设置数据源4.设计订单完成进度5.设计作业率和能耗本区域主要展示整个车间的今日作业率和今日耗电量，便于车间管理人员及时掌握车间设备的使用效率和能耗情况。添加立体仪表盘（1）添加两个立体仪表盘组件在页面标题下方区域的合适位置；尺寸大小可以输入数值也可以通过拖拽的方式调整；值域改为0-10000，如下图所示，其他属性默认值不需要调整，也可以根据用户的审美进行设置。（2）单位属性的设置，今日作业率的单位输入填写“%”，今日耗电量的单位输入填写“KW.H”，其他属性默认值不需要调整。设置单位属性5.设计作业率和能耗（3）配置完成属性之后，切换到数据源编辑区，把“数据源”的“物模型”开关打开，物模型选择“生产车间”，数据源选择“采集点数据”，度量点击“+”图标，两个立体仪表盘分别选择“今日作业率”和“今日耗电量”。设置数据源5.设计作业率和能耗（4）在立体仪表盘下方，分别添加文本组件，以便了解仪表盘的数值内容。文本属性配置根据审美偏好设置。设置文本5.设计作业率和能耗6.设计订单生产信息本区域设计订单生产信息，包括生产负责人、订单编号、今日产量、生产合格率等。设计生产信息文本（1）拖拽文本组件到订单生产信息区域，设置其属性如下图所示，也可以根据用户审美进行设置。（2）通过使用“Ctrl+C”进行复制，“Ctrl+V”的快捷方式，复制另外三个文本组件，并通过按住“Shift”并单击组件的方式，全部选中这四个文本组件，把这四个组件进行对齐。设计文本6.设计订单生产信息（3）设置“订单编号”后的文本组件的数据源，使其分别显示对应的数据信息,如下图1所示。设计文本数据源6.设计订单生产信息图1设计文本数据源6.设计订单生产信息图2图3（4）接上述操作，设置“今日产量”“合格率”后的文本组件的数据源，使其分别显示对应的数据信息,分别如下图2、图3所示。7.设计产量趋势对比本区域设计每日产量趋势，可以对比一周、一个月每天的产量趋势，便于车间管理人员了解生产产量的变化趋势。设置折线图（1）从图表组件区中，把折线图组件拖拽到产量趋势对比区域的合适位置，并调整其尺寸，设置时间格式为“日”。设置折线图数据源（2）选中折线图的状态下，切换到数据源配置页，配置其数据源为“每日产量”，维度为“日期”，度量为“产量”，其他无需设置。7.设计产量趋势对比本区域主要显示生产车间的安全素养的几个检查情况，便于车间管理人员整体了解从而更好管理。设置卡片组件（1）从网页组件去拖拽“卡片组件”到今日安全素养检查区域合适的位置，并通过输入数值或者拖拉方式调整其尺寸大小。8.设计安全素养情况设置属性（2）设置“标题”和“数值”的属性。标题属性：标题字体设置为“15”，其他参数均设置为默认值；数值属性：标题字体大小设置为“35”，样式设置为“20”，其他参数均设置为默认值；数值1-6的参数均为默认，也可以根据自己的审美进行设置。8.设计安全素养情况设置数据源（3）属性设置完成之后，切换到数据源，把“数据源”的“物模型”开关关闭，数据源选择“安全素养”，选择字段如图所示设置，数据源过滤和判断条件选择默认，数据源设置完成。8.设计安全素养情况说明：数据源中字段的“名称”是在云视界显示的文字，“Key”是数据源中的表列名称。9.设计设备详情信息由于生产车间的设备较多，因此不能全部呈现每台设备的信息，为了方便从车间总览页面快速点击查看设备信息，在生产车间总览页面中，为设备图片设置详情信息的弹框，当鼠标单击设备图片时，可以显示该设备的详情。

（1）选中车间布局的区域容器，如图所示。

添加车间布局素材（2）切换到“素材库—我的—任务2_2”的文件夹，把车间布局图拖拽到容器的背景图片中，如下图所示。请注意是在选中车间布局容器的情况下操作。9.设计设备详情信息添加图片（3）把“任务2_2”文件夹中的焊接机器人图片拖拽到车间布局图如图所示的位置，并通过拖拉或者输入数字的方式调整其大小。9.设计设备详情信息添加图片（4）通过快捷键复制粘贴3个焊接机器人图片到分别摆放在车间布局图如图所示的位置。9.设计设备详情信息完成加工中心布局（5）按照前四个步骤的操作，添加完成卧式加工中心的布局，如图2-2-35所示。9.设计设备详情信息设计图片弹框（6）利用图片弹框功能完成单台设备详情设置。点击设备图片，勾选图片弹框，弹出图③所示的窗口；对图片弹框属性进行设置，触发方式和关闭方式都选择“点击”。9.设计设备详情信息设计图片弹框（7）弹框宽度可以通过自定义和拖拽的方式设置；壁纸有六种样式选择，示例中选择第二种，用户可以根据自己审美进行设置；标题设置为“设备信息”，其他参数选择默认。9.设计设备详情信息设置弹框属性（8）弹框属性设置，标题颜色设置为“黄色”，也可以是其他颜色；标题字号设置为“32”；弹框内容需要呈现设备编号、所属厂房、设备位置、负责人和设备总利用率五个信息，用文本组件实现；其他参数设置为默认。9.设计设备详情信息设置弹框属性（9）总利用率数据源设置。如图2-2-39所示，类型选择“数据源”，数据源选择“采集点数据”，并点击图标，出现下图对话框，对话框种的物模型选择“焊接机器人-模拟数据”，设备ID选择“焊接机器人001”；接着单击取值旁边的“+”图标，选择参数“总利用率”，数据源设置完毕。9.设计设备详