《工业可视化》课件 任务3.2 设计售后服务信息页面 -任务实施

项目三：后市场服务的可视化设计任务3.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）完成了所有组件的设计与数据源配置之后，单击“保存当前页”，最后单击“