工业可视化应用课件：后市场服务的可视化设计

后市场服务的可视化设计1设计设备远程运维页面>>※任务实施《工业可视化》/《工业可视化》/目录1.任务分析2.导入项目3.设计设备工作状态4.设计设备健康评分5.设计维保记录信息6.设计配件故障预测7.设计故障处理记录8.设计设备实时工况9.预览验证页面效果1.任务分析本任务的主要目的是设计设备的健康信息，便于设备维修工程师和设备用户能实时查看设备的健康情况，具体展示数据和显示组件分析结果如分析结果如下表所示：展示模块具体内容使用组件数据源设备信息设备编码、设备位置文本组件无设备工作状态设备图片图片组件无设备工作状态图片组件物模型-工程机械车-作业/收车设备健康评分健康状态文本组件物模型-工程机械车-设备健康评分健康评分立体仪表盘维保记录惊喜工单日期、维保类型、工单状态表格组件MYSQL数据库-维保记录配件故障预测配件名称、故障编码、故障概率、预测周期表格组件MYSQL数据库-配件故障预测故障处理记录故障类型、故障原因、处理日期、处理状态表格组件MYSQL数据库-故障记录设备实时工况油位百分比立体仪表盘物模型-工程机械车-油位冷却水温度立体仪表盘物模型-工程机械车-水温转速立体仪表盘物模型-工程机械车-转速负载立体仪表盘物模型-工程机械车-实际负载任务分析2.导入项目（1）登录云视界，在云视界首页单击“创建项目”，在弹窗中单击“导入项目ID”，然后在新弹窗中输入项目ID、项目名称（自定义），最后单击“导入”按钮。创建项目2.导入项目（1）

任务分析（2）创建完成后，页面自动跳转到可视化编辑页面。创建项目2.导入项目（3）修改页面名称。先单击页面切换图标，出现的弹框中，单击编辑图标，把页面名称改为“设备健康信息”（注：名称可自定义，但是建议按照一定的规范进行修改，便于其他工程师运维），单击“确定”按钮完成修改。修改页面名称3.设计设备工作状态（1）从“素材库→我的→工业可视化课程素材→任务3_1”文件中，找到设备图片拖拽到页面中间如图所示的位置，也可以自己上传素材使用。导入素材3.设计设备工作状态（2）从“素材库→我的→工业可视化课程素材→任务3_1”文件中，找到状态图片拖拽到设备图片右上角，并切换到数据源设置，打开“物模型”开关，选择数据源为“采集点数据”，取值为“N工作/收车”。设置数据源3.设计设备工作状态（3）设置图片组件关联的数据，根据其采集到的状态值变化，显示为对应的状态图片。由于图片组件关联的“工作/收车信号”是布尔量，只有true（值为1）和false（值为0）两种状态，因此设置其筛选条件为“=0”的时候，显示的图片为灰色关机图标，表示设备不是作业（关机）状态；设置其筛选条件为“=1”的时候，即设备在作业状态的时候，显示的图片为绿色作业图标。设置关联数据4.设计设备健康评分（1）从控件组件中，把立体仪表盘组件拖拽到如图所示的位置，并设置其属性，本示例字号改为“40”，字体位置改为“25”，单位输入改为“分”，用来表示设备的健康得分。设计健康评分4.设计设备健康评分（2）从基础组件中，选择文本组件拖拽到设备健康评分区域，并设置其属性如图所示。设计属性4.设计设备健康评分（3）切换到数据源编辑区，把“数据源”的“物模型”开关打开，“物模型”选择前面任务创建的“工程机械车”，“数据源”选择“采集点数据”，单击“取值”后面的“+”图标，再从出现的下拉列表中选择“N设备健康评分”，完成文本组件和数据关联。设置数据源4.设计设备健康评分（4）设置文本组件数据源的判断条件，使之在不同条件下不同的文字内容。由于文本组件关联的“设备健康评分”是连续性的离散量，数值区间[0,100]，因此设置其筛选条件1为“>=90”的时候，显示的文字内容为“设备处于良好的状态”，文字颜色为绿色；否则满足筛选条件2为“区间60至89.99之间”的时候，显示的文字内容为“使用意见：继续使用，闲时保养”，文字颜色为黄色；未满足条件的情况下，显示的文本内容为“注意！请及时对设备进行检修保养”，文字颜色设置为红色。设置判断条件5.设计维保记录信息（1）使用拖拽的方式，把表格组件添加到维保记录区域位置并调整大小，并设置其组件名称为“维保记录”。设置维保记录5.设计维保记录信息（2）按照图中所示的线框内的参数，修改维保记录的表格属性，其他采用默认设置。设置属性说明：本书的示例参数仅供参考，实际需可以根据用户的审美偏向进行调整。5.设计维保记录信息（3）完成创建表格组件之后，切换到表格组件数据源编辑区，“数据源”选择“维保记录”，依次单击“取值”后的“+”图标，再出现的下拉列表中选择“工单日期”、“维保类型”、“工单状态”，完成表格组件和数据关联，其他无需修改。设置数据源6.设计配件故障预测（1）把表格组件拖拽到配件故障预测的区域内，按照“5.设计维保记录信息”的操作步骤设置其属性，并设置其数据源为“配件故障预测”，维度选择“配件名称、故障编码、故障概率、预测周期”。设计故障预测7.设计故障处理记录（1）把表格组件拖拽到配件故障预测的区域内，按照“5.设计维保记录信息”的操作步骤设置其属性，不勾选动画效果；并设置其数据源为“故障记录”，维度选择“维修日期、故障类型、故障原因、服务状态”，勾选表格翻页选项。设计故障记录8.设计设备实时工况（1）使用拖拽的方式，把立体仪表盘组件添加到实时工况区域，调整其大小，其他属性不需要调整，字号改为40，字体位置改为35，单位输入“%”，其他参数可无需修改。设计油位工况8.设计设备实时工况（2）修改完成后，切换到数据源编辑区，把“数据源”的“物模型”开关打开，“物模型”选择前面任务创建的“工程机械车”，“数据源”选择“采集点数据”，单击“取值”后面的“+”图标，再从出现的下拉列表中选择“油位”，完成立体仪表盘组件和数据源关联如图所示。设置数据源8.设计设备实时工况（3）在立体仪表盘下方，添加文本组件，属性根据用户审美偏好进行设置，文本内容输入“油位百分比”。设置文本8.设计设备实时工况（4）重复前三步的操作，分别设计冷却水温度、转速、负载立体仪表盘的属性和数据源以及对应的显示文本内容，如图1和图2、图3所示。设计其他工况图1图2图39.预览验证页面效果（1）完成所有内容的设计及数据源配置之后，单击“保存当前页”，然后进行预览。预览效果9.预览验证页面效果（2）预览出来的效果，预览效果分为网页预览、大屏预览、手机预览，可分别点击查看。预览效果25THANKYOU

《工业可视化》/后市场服务的可视化设计1设计设备远程运维页面>>※任务说明《工业可视化》/任务描述01学习目标02目录01任务描述本任务需要使用可视化设计平台来设计设备健康信息的展示页面，以挖掘机为例，展示其基本信息、健康评分、维保记录、配件故障预测、故障处理记录和关键参数实时工况。02学习目标知识目标技能目标了解后市场服务的概念。熟悉表格组件的属性设置和数据源方法。会配置表格组件的属性和数据源。会配置表格组件的翻页滚动和分页设置，使表格内容可以滚动呈现或者分页呈现。会设置文本组件数据源的条件判断，使之根据不同的判断条件显示不同的文本内容。《工业可视化》/后市场服务的可视化设计1设计设备远程运维页面>>※知识准备1.后市场服务后市场服务是指产品销售以后，围绕产品使用过程中的各种衍生服务。它涵盖了产品从售出到报废的全过程，围绕产品售后服务和使用环节客户需求的各种后续服务，从而产生的一系列交易活动的总称。主要包括：维修、保养、配件供应、金融服务、保险、租赁、二手产品、大修和再制造等。后市场服务维修保养配件供应金融服务保险……随着整个制造产业的数字化和智能化水平不断提升，以及产品的差异化逐渐缩小，越来越多的企业为提升产品的竞争力，开始在增值服务上下功夫，用个性化和高水平服务来增加用户的满意度并提升用户体验。2.图表组件-表格表格组件是可视化比较常用的基本组件，可以通过表格的形式展示多条数据内容；当表格组件的数据源为工业互联网平台对应的物模型时，也可以展示设备的实时采集值或者报警数据。位置尺寸：XY是设置表格的高度和宽度，单位为像素；WH是表格的宽度和高度主题：可以选择主题颜色；外观：可以设置该组件的名称，如有多个表格，组件名称可便于区分；

属性设置2.图表组件-表格表格组件是比较常用的基本组件，可以通过表格的形式展示多条数据内容；当表格组件的数据源为物理模型的直连属性时，也可以展示设备的实时采集值。位置尺寸：XY是设置表格的高度和宽度，单位为像素；WH是表格的宽度和高度主题：可以选择主题颜色；外观：可以设置该组件的名称，如有多个表格，组件名称可便于区分；

属性设置2.图表组件-表格表头属性：可以单独设置表头的字体、字号、样式、对齐方式、文字颜色、背景颜色；字体：可选择字体样式；字号：设置文字大小；样式：可以设置文字加粗、斜体、删除线、下划线；对齐：设置文字的对齐方式，包括左对齐、居中对齐、右对齐；文字颜色：设置表头文字的颜色；背景颜色：设置表头单元格的背景颜色；属性设置2.图表组件-表格表格属性：表格的属性设置。每页行数：设置表格的行数。字体：可选择字体样式。字号：设置文字大小。样式：可以设置文字加粗、斜体、删除线、下划线。对齐：文字的对齐方式，包括左对齐、居中对齐、右对齐。文字颜色：表格文字的颜色。奇行颜色：奇数行表格的背景颜色。偶行颜色：偶数行表格的背景颜色。网格颜色：设置表格线框颜色。属性设置2.图表组件-表格表格序号：勾选显示序号列，否则不显示；自动换行：勾选时单元格文本自动换行，不勾选则超出单元格的内容显示为省略号；属性设置2.图表组件-表格动画属性：勾选可进行当前表格的轮播；时间（秒）：通过设置时间数值，改变当前表格轮播速度。输入数值或点击（）可改变时间数值；重置主题样式：一键还原为组件初始化的样式；属性设置2.图表组件-表格双击表头某一列，可以单独设置该列的属性。表头属性：设置同前面表格。表格属性：设置同前面表格。属性设置2.图表组件-表格表格排序：可以勾选是否表格排序，如果是本地上传的Excel表格，则无需填写下方的入参值、升序、降序，如果是通过API连接进来的数据，则需要根据实际的API接口需要进行填写。呈现方式：可以选择默认或者文本，默认是指直接显示原始数据，文本是指可以添加判断条件，根据不同判断条件的筛选结果，呈现自定义的图片和文本，可以设置图标的尺寸、文字颜色、背景颜色及筛选出来的此行表格的样色。重置主题样式：如果对设置的内容不满意，想恢复默认设置也可以重置主题样式。属性设置2.图表组件-表格表格组件数据源可以设置为：无、物模型、数据源；如果选择为无，则只能显示默认的文字内容；如果关联物模型，则显示直连物模型的实时采集数据；如果选择为数据源，则数据源设置内容详见下：数据源过滤：设置数据过滤的条件，进行过滤操作；

设置内容条件筛选：可自定义条件，满足条件进行获取，不满足条件的不进行获取；日期筛选：设置日期条件进行筛选，满足日期条件的进行获取，不满足日期条件的不进行获取；排序筛选：设置排序规则进行筛选；2.图表组件-表格设置表格分页显示的最大数据条数；每次从数据源中获取的最多数据条数；表格翻页取数限制42THANKYOU

后市场服务的可视化设计2设计售后服务信息页面>>※任务实施《工业可视化》/《工业可视化》/目录1.任务分析2.导入项目3.设计工单状态统计4.设计服务响应时间5.设计配件库存信息6.设计设备保修状态统计7.设计巡检信息8.设计售后工单趋势9.设计满意度统计10.预览验证页面效果1.任务分析本任务的主要目的是设计售后服务信息，便于管理者了解售后服务的满意度、工单增长状态、设备保修期内外的统计、设备巡检信息等，具体展示数据和显示组件分析结果如表所示：展示模块具体内容使用组件数据源工单状态今日新增工单、今日完成工单、进行中工单、已超时工单卡片组件MYSQL数据库-工单状态统计服务响应时间平均响应时间力矩百分比组件MYSQL数据库-服务工单响应时间最快响应时间力矩百分比组件MYSQL数据库-服务工单响应时间配件库存配件库存表格组件MYSQL数据库-零配件库存设备保修状态统计设备保修状态统计饼状图组件MYSQL数据库-设备保修状态统计巡检信息周巡检完成率折线图组件MYSQL数据库-周巡检完成率月巡检完成率折线图组件MYSQL数据库-周巡检完成率切换标签标签页组件无售后工单趋势售后工单趋势折线图组件MYSQL数据库-售后工单趋势日历筛选器MYSQL数据库-售后工单趋势满意度统计售后部满意度统计表格组件MYSQL数据库-售后部满意度调查日历筛选器MYSQL数据库-售后部满意度调查任务分析2.导入项目（1）登录云视界首页，单击“创建项目”，在弹出来的对话框中，点击“导入项目ID”，然后，在弹出来的对话框中，输入项目ID（注：项目ID可根据实际需要导入项目情况而定）、项目名称“售后服务信息”（注：名称可自定义，但是建议按照一定的规范进行修改，便于其他工程师运维），最后单击“导入”按钮。创建项目2.导入项目（1）

任务分析（2）创建完成后，页面自动跳转到可视化编辑页面。创建项目3.设计工单状态统计（1）添加卡片组件在售后服务页面的工单状态统计区域内，如图所示。设计工单状态3.设计工单状态统计其属性设置如下图所示，其他属性可无需调整。设计工单状态3.设计工单状态统计（2）选中卡片组件的状态下，切换到数据源进行设置，数据源“工单状态统计_日”，具体参数如图所示，完成后保存刷新。设置数据源4.设计服务响应时间（1）从控件组件去中，把“力矩百分比”拖拽到服务响应时间区域内，并调整其尺寸，把标题改为“评价响应时长（单位：小时）”，字号改为16，从“数值显示”下拉框中选择“数值”。设计响应时间4.设计服务响应时间（2）选中组件的状态下，切换至数据源，数据源选择“服务工单响应时间”，度量选择“平均响应时长”。设置数据源4.设计服务响应时间（3）按照前两步的操作，设置“最快响应时间”的力矩百分组件，标题改为“最快响应时间（单位：分钟）”，数据源选择“服务工单响应时间”，度量选择“最快响应时长”。设计响应时间5.设计配件库存信息（1）拖拽表格组件到配件库存区域，并根据区域大小调整其尺寸位置，设置表头属性的字号为16，加粗居中显示；表格属性的字号为14，居中显示；动画属性设置3秒钟进行滚动，其他设置可不调整。设计配件库存5.设计配件库存信息（2）设置表格组件的数据源如图所示，数据源选择“零配件库存”，维度选择“配件名称”“剩余数量”。配置数据源6.设计设备保修状态统计（1）从图表组件中，拖拽饼状图到设备保修状态统计区域内居中，并调整其到合适的尺寸大小；其数值样式选择“数值”，字号改为16，其余参数可无需调整。设置饼状图6.设计设备保修状态统计（2）切换到饼状图组件的数据源设置，数据源选择“设备保修状态统计”，度量选择“保内设备数”“保外设备数”“即将过保设备数”“本月续保设备数”。设置数据源7.设计巡检信息（1）添加标签页组件。从网页组件中，把标签页组件拖拽到巡检信息区域内，调整其大小和位置，并设置标签1文本为“周巡检完成率”，标签2文本为“月巡检完成率”，其他设置可不修改，也可根据审美偏好调整。添加标签页组件7.设计巡检信息（2）添加折线图组件。添加折线图到巡检信息区域内，并调整其位置及大小，时间格式选择“日”属性的图表选项可参考图中的设置，其他设置根据用户审美进行调整。添加折线图组件7.设计巡检信息（3）设置折线图数据源。设置曲线图的数据源如图所示，数据源选择“巡检完成率_周”，维度选择“日期”，度量选择“周巡检完成率”。设置数据源7.设计巡检信息（4）标签页关联折线图。完成折线图的设置后，重新选中巡检信息区域内的标签页，切换到关联组件，打开“选中关联”后的开关，此时页面中所有的组件出现圆形的可选择图标，勾选巡检信息区域内的折线图，完成“周巡检完成率”标签的关联组件。标签页关联折线图7.设计巡检信息（5）设置标签页的标签2。标签页的第一个标签关联组件完成后，重新再单击一次选中，在属性设置中，选中“标签2”，此时标签1关联的折线图不可见。设置标签27.设计巡检信息（6）把折线图组件拖拽到巡检信息区域中，并设置日属性如图所示。添加折线图组件7.设计巡检信息（7）设置第二个折线图的数据源如图所示，数据源选择“巡检完成率_月”，维度选择“日期”，度量选择“月巡检完成率”。设置数据源7.设计巡检信息（8）重新选择标签页，选中“标签2”的情况下，单击“选中关联”的开关，勾选月巡检完成率的选择图标。重新选择标签页8.设计售后工单趋势（1）拖拽折线图组件到售后工单趋势区域内，时间格式选择“月”，图表选项设置如图所示，其他参数可使用默认设置。设计工单趋势8.设计售后工单趋势（2）设置折线图的数据源如图所示，数据源选择“售后工单趋势”，维度选择“日期”，度量选择“新增工单”“完成工单”。设置数据源8.设计售后工单趋势（3）拖拽日历筛选器到售后工单趋势区域，修改组件名称为“售后工单筛选日历”，去掉时间范围的勾选。添加筛选日历8.设计售后工单趋势“售后工单筛选日历”其标题设置及日期样式的设置如下图所示。添加筛选日历8.设计售后工单趋势（4）设置日历筛选器的数据源如图所示，数据源1的名称选择“售后工单趋势”，度量选择“日期”。设置数据源9.设计满意度统计（1）拖拽组件到满意度统计区域内，按用户审美设置其属性。设计满意度统计9.设计满意度统计（2）设置满意度统计的表格组件的数据源如图所示，数据源选择“售后部满意度调查”，维度选择“售后部”“满意度”。设置数据源9.设计满意度统计（3）拖拽日历筛选器到满意度统计区域内，并调整位置及大小，设置组件名称为“满意度筛选日历”，去掉时间范围的勾选。添加日历筛选器9.设计满意度统计满意度统计区域其标题设置及日期样式如图所示。添加日历筛选器9.设计满意度统计（4）设置满意度统计区域的日历筛选器如图所示，数据源1的名称选择“售后部满意度调查”，度量选择“日期”。设置数据源10.预览验证页面效果（1）完成了所有组件的设计与数据源配置之后，单击“保存当前页”，最后单击“预览”标签。预览效果10.预览验证页面效果（2）选择全屏预览效果，如图所示，分别检查标签页、日历筛选器是否符合设置预期，如果不符合则可返回修改。预览效果78THANKYOU

《工业可视化》/后市场服务的可视化设计2设计售后服务信息页面>>※任务说明《工业可视化》/任务描述01学习目标02目录01任务描述本任务需要使用云视界平台工具，设计公司的售后服务信息可视化大屏，大屏上需要展示的内容包含：工单状态统计、设备状态统计、工单趋势、售后维修工程师的服务派工排名、设备巡检信息展示、售后服务的满意度统计、零配件库存统计等。02学习目标知识目标技能目标熟悉力矩百分比组件的属性和数据源配置方法；熟悉力饼图组件的属性和数据源配置方法；熟悉标签页组件的属性和数据源配置方法；了解售后服务关注的服务响应时间、满意度统计等内容；会配置力矩百分比组件的属性和数据源，使之呈现服务响应时间的数值；会配置饼图组件的属性和数据源，使之呈现不同数量的占比；会配置标签页组件的属性和关联组件，使之可以切换显示不同的页面内容；会验证标签页的设置是否符合预期要求；《工业可视化》/后市场服务的可视化设计2设计售后服务信息页面>>※知识准备《工业可视化》/目录控件组件-力矩百分比01图表组件-饼图02网页组件-标签页031.控件组件-力矩百分比力矩百分比可以显示数值所占比例，或者某个信息的数值，如速度、温度等；其在控件组件下，使用时直接拖拽到页面即可，如下图所示，力矩百分比的属性设置内容如所示，数据源设置同直线进度条。1.控件组件-力矩百分比位置尺寸：XY是设置组件的高度和宽度，单位为像素；WH是组件的宽度和高度；

设置内容属性显示：可选居中或填满标题、百分比：可勾选显示，不勾选隐藏选择主题：可选择组件的主题颜色标题：标题显示的内容，可自定义修改字体：选择字体方向：字体的排列方向字重：字体粗细颜色：字体颜色1.控件组件-力矩百分比属性设置数值显示：可选择百分比或者数值，如果选择百分比，则数据后会有“%”符号；显示：可设置组件数据的最小值和最大值颜色：可设置组件显示的颜色，可设置渐变色边框：设置组件的边框，可以选择无、虚线、实线程度标记：可设置条件，当数值在大于某个阈值时，显示提示颜色2.图表组件-饼图饼图属于图表组件，饼图用于分析数据的简单占比，用户可以通过饼图很直观的看到每一个部分在整体中所占的比例，帮助用户快速了解数据的占比分配。使用时，从图表组件中拖拽饼图到页面的位置即可，如图所示。饼图不适用于多分类的数据，因为随着分类的增多，每个切片就会变小，最后导致大小区分不明显，每个切片看上去都差不多大小，这样对于数据的对比是没有什么意义的。所以饼图不适合用于数据量大且分类很多的场景。2.图表组件-饼图位置尺寸：XY是设置组件的高度和宽度，单位为像素；WH是组件的宽度和高度可选择实心饼图或者环状图样式设置内容2.图表组件-饼图显示：可选居中或填满图例、数值标签：可勾选显示，不勾选隐藏选择主题：可选择组件的主题颜色数值样式：可选择显示百分比或者数值。图表字体：选择字体。字号：设置字体大小。字重：设置字体粗细。颜色：设置字体颜色。属性2.图表组件-饼图半径：可调节饼图的半径背景色：可为饼图设置背景色如果想要重置属性的参数，可单击“重置主题样式”恢复初始值。图表样式2.图表组件-饼图数据源设置数据源：选择需要关联的数据表；度量：展示饼图的组成数据源过滤：单击“+”图标可弹出“添加过滤”弹窗，可设置“条件过滤”“日期过滤”“排序”参与组件过滤：勾选时，本组件的数据源将参与本页面的其它筛选器的筛选。3.网页组件-标签页标签页组件是比较常用的网页组件之一，方便用户在一个页面中对多个报表页面进行集中查看。标签页组件通过配置选项卡切换，满足企业人员对业务平级内容切换展示。标签组件可以在“基础组件→