设备数字化运维工业APP的开发与应用 课件 5.2创建设备运维平台的工单整体看板

项目五设备运维平台的数据可视化展示任务5.2创建设备运维平台的工单整体看板设备数字化运维工业APP开发与应用目录015.2.1任务说明025.2.2知识准备035.2.3任务实施045.2.4练习巩固任务说明为了简单直观地了解每日重要待办事项，准确及时地掌握组内提交维修工单的处理进度，实现便捷的个性化业务功能，W公司生产组的李组长计划通过设备运维平台，搭建一套适合自己工作需要的自定义页面。任务要求：1.创建工单整体看板。2.使用统计图组件，添加数值图用以展示当前设备总数，添加双轴图用以展示设备维修工单中每日维修工单数量和设备分布情况。3.使用按钮组件，添加报修人员按钮和维修工程师按钮，分别实现对应角色的快速操作。4.用视图组件，添加并展示待维修工单中“待分配工单”视图的信息。5.用富文本组件，展示2022年国庆放假通知。6.嵌入URL组件，展示树根互联企业官网信息。目录015.2.1任务说明025.2.2知识准备035.2.3任务实施045.2.4练习巩固知识准备自定义页面介绍在根云积木平台的自定义页面中，应用管理员可以灵活配置页面显示的内容。这种页面通常用于展示当前应用中所有数据的统计图表，便于管理者直观地查看生产数据，快速完成数据分析，并根据分析结果制定科学合理的决策，提高管理效率。统计图表1视图2富文本3按钮4筛选器5嵌入的URL6轮播图7目前根云积木平台的自定义页面支持的组件统计图表在自定义页面可以直接添加统计图并进行配置，也可以将应用中已经创建好的图表复制到自定义页面中。一个自定义页面最多可以设置30个统计图。在将统计图添加到自定义页面后，管理员可以在页面配置中设置定时刷新的时间间隔，保证该统计图表显示最新数据。按钮一个应用中可能包含多个管理业务数据的工作表，一张表中也可能有多个视图。为了提高操作效率，针对一些高频操作，例如向某个表中添加一行新记录、

快速查看某个表的数据、快速跳转到某个URL页面等，都可以通过在自定义页面中创建一个按钮，快速触达。筛选器自定义页面还支持添加筛选器。筛选器能够针对自定义页面中的统计图表或视图数据进行二次筛选，并可实现单一筛选器对多个图表或视图的统一灵活的筛选。轮播图轮播图常用于展览和宣传，可以循环展示记录中的图片。用户可以设置播放的图片来自哪个表、哪个视图下的附件字段（或条码字段）中的图片。同时，通过点击轮播图，可以实现打开记录、跳转链接或直接预览图片，方便直观地呈现数据与信息。视图自定义页面可以直接嵌入工作表，或者表单下的单个视图，可以将统计图和重要的明细数据一起展现进行对比查看。结合筛选器，可以实现数据的动态过滤，帮助用户快速定位所需信息，从而提升数据分析的效率。富文本富文本（RichText）是一种比普通文本更为复杂的文本格式，它支持多种格式和样式，用来增强文本的表现力和结构化。富文本不仅包含文本本身，还包括与文本相关的格式信息，比如字体样式、颜色、大小、对齐方式等，以及嵌入的多媒体内容。自定义页面支持嵌入富文本组件，用于展示公告、常用资料等需要特别格式说明的场景。嵌入的URL自定义页面支持嵌入URL，可以嵌入网页、视频、图片链接,也可以嵌入一个视图、记录的分享链接。知识准备自定义页面介绍知识准备页面及组件的常用操作进入编辑页面后，鼠标悬停在目标组件上即可看到自定义页面组件的操作按钮。设置：点击设置标签，可以重新编辑该组件的配置；标题行：点击可以设置或取消该组件的标题行；复制：点击可以在同一页面复制该组件，实现组件的快速创建；移动：点击将统计图移动到任意自己管理的应用页面之下（可以是当前应用，也可以是其他应用）；删除：点击可以删除该组件内容，删除操作不可逆，请谨慎操作；排序：点击组件顶部的空白区域，通过鼠标的拖拽即可调整不同组件的顺序。知识准备页面及组件的常用操作（1）调整组件大小使用鼠标拉伸组件右下角，即可放大或缩小。知识准备页面及组件的常用操作（2）设置APP端组件的显示效果由于PC端和APP端的页面尺寸存在差异，自定义页面的显示效果可能有所不同。为此，可以单独为APP设置显示效果。在APP中，可以隐藏不需要的组件，或根据需求单独调整组件之间的位置关系，以确保信息的清晰展示。知识准备页面及组件的常用操作（3）显示设置-强制适应屏幕开启强制适应屏幕，会将自定义页面中的所有组件完全显示在同一屏内，这样可能会导致有的组件被压缩而无法完整显示。知识准备页面及组件的常用操作（4）将页面保存为图片自定义的页面可以保存为PNG图片，图片中不包括顶部导航和左右导航，保存后的图片与全屏查看时的效果一致。目录015.2.1任务说明025.2.2知识准备035.2.3任务实施045.2.4练习巩固任务实施李组长为了提高每日的办公效率，准确及时掌握组内提交维修工单的处理完成进度，他准备利用设备运维平台的自定义页面功能，创建适合于自己工作习惯的页面，实现效果如下图所示，此页面具有如下功能。1．创建工单整体看板。2．用统计图组件的数值图展示当前设备总数，用双轴图展示设备维修工单中每日维修工单数量和设备分布情况。3．用按钮组件实现报修人员和维修工程师两种角色的按钮。4．用视图组件展示待维修工单中“待分配工单”视图的信息。5．用富文本组件展示2022年国庆放假通知。6．用嵌入URL组件展示树根互联企业官网信息。7．根据业务需求，调整各组件布局。任务实施添加自定义页面-工单整体看板（1）在工单管理页面，点击左侧菜单【+新建】，选择【创建自定义页面】，如下图所示。任务实施添加自定义页面-工单整体看板（2）在页面名称中输入【工单整体看板】，选择类型为【画布】，点击【创建】，如下图所示。任务实施添加自定义页面-工单整体看板（3）工单整体看板页面创建完成，其效果如下图所示。任务实施添加统计图-数值图（1）点击左侧的统计图，选择工作表为【设备表】，选择视图为【全部】，点击【确认】，新建图表，如下图所示。任务实施添加统计图-数值图（2）调整数值图配置：①修改图表标题为【当前正在运行设备总数】；②：在数据源菜单中，选择设备表所对应的视图为【全部】，在时间菜单中，选择对应的时间范围为【全部】，权限为【所有记录】；③在右侧图表类型中选择【数值图】图标；④拖动字段【记录数量】，作为数值图配置中的数值，如下图所示。任务实施添加统计图-数值图（3）调整数值图样式①：选择【样式】选项卡；②统计值文字大小调整为【大】；③将显示单位中保留小数改为【0】；④点击【保存】，数值图创建完成，如下图所示。任务实施添加统计图-数值图（4）数值图配置完成，其效果如下图所示。任务实施添加统计图-双轴图（1）点击左侧的统计图，选择工作表为【维修单表】，选择视图为【全部】，点击【确认】，新建图表，如下图所示。任务实施添加统计图-双轴图（2）调整双轴图配置：①修改图表标题为【报修工单统计双轴图】；②在数据源菜单中，选择设备表所对应的视图为【全部】，在时间菜单中，选择对应的时间范围为【全部】，权限为【所有记录】；③在右侧图表类型中选择【双轴图】图标；④拖动字段【报修时间】作为双轴图的X轴（维度），拖动字段【记录数量】作为双轴图的Y轴（数值），拖动字段【工单状态】作为分组（Y轴），如下图所示。任务实施添加统计图-双轴图（3）在数据源中，点击字段旁边的【+】按钮，添加计算字段，如下图所示。任务实施添加统计图-双轴图（4）讲过计算字段命名为【记录数量】，点击【+选择字段】，计算为【记录数量求和】，保留小数位数为【0】，点击【确认】，如下图所示。任务实施添加统计图-双轴图（5）拖动计算字段【记录数量】作为双轴图的辅助Y轴（数值），如下图所示。任务实施添加统计图-双轴图（6）调整双轴图样式：①选择【样式】选项卡；②在样式栏中，开启【总计】选项显示总数量；③在勾选显示X轴的标题；④勾选X轴下的【显示标题】选项；；⑤勾选Y轴下的【显示标题】选项，如下图所示。任务实施添加统计图-双轴图（7）勾选辅助Y轴下的【显示标题】选项，如下图所示。任务实施添加统计图-双轴图（8）将辅助Y轴（折线图）的显示方式调整为【累计】，点击【保存】，如下图所示。任务实施添加统计图-双轴图（9）双轴图配置完成，其效果如下图所示。任务实施添加报修人员按钮（1）在工单整体看板页面中，点击工单整体看板左侧组件菜单的【按钮+】，如下图所示。任务实施添加报修人员按钮（2）在弹出的选择按钮样式页面中选择【添加新订单】按钮，如下图所示。任务实施添加报修人员按钮（3）进入按钮设置页面，修改按钮名称为【提报工单】，勾选操作【打开视图】，如下图所示。任务实施添加报修人员按钮（4）选择工作表为【维修单表】，视图为【全部】，打开方式【当前页面】，点击【保存】，按钮设置完成，如下图所示。任务实施添加报修人员按钮（5）点击按钮工具栏上方的【T】，插入标题行，输入【报修人员看板】，完成报修人员按钮创建，如下图所示。任务实施添加报修人员按钮（6）报修人员看板即按钮的预览效果，如下图所示。任务实施添加维修工程师按钮（1）参照下图，创建新的按钮，并进入按钮配置页面。任务实施添加维修工程师按钮（2）修改按钮名称为【待接收工单】，更改按钮的颜色，如下图所示。任务实施添加维修工程师按钮（3）在待接收工单按钮配置页面下，操作选择为【打开视图】，选择工作表为【维修单表】，视图为【待接收工单】，打开方式为【当前页面】，如下图所示。任务实施添加维修工程师按钮（4）点击【+添加按钮】，添加第二个新按钮，并修改按钮名称为【待维修工单】，修改按钮颜色，如下图所示。任务实施添加维修工程师按钮（5）在待维修工单按钮配置页面下，操作选择为【打开视图】，选择工作表为【维修单表】，视图为【待维修工单】，打开方式为【当前页面】，最后点击【保存】，按钮配置完成，如下图所示。任务实施添加维修工程师按钮（6）点击按钮工具栏上方的【T】，插入标题行，输入【维修工程师看板】，完成维修工程师按钮创建，如下图所示。任务实施添加维修工程师按钮（7）维修工程师看板及其按钮的预览效果，如下图所示。任务实施添加视图-待分配视图（1）点击左侧【视图+】按钮，添加一个新的视图组件，如下图所示。任务实施添加维修工程师按钮（2）在设置页面，修改组件名称为【待分配工单视图】，选择工作表为【维修单表】，选择视图为【待分配工单】，设置显示数量为【10】，点击【保存】，视图组件配置完成，如下图所示。任务实施添加维修工程师按钮（3）待分配视图组件预览效果，如下图所示。任务实施添加富文本-2022年国庆假期安排通知（1）点选左侧【富文本+】按钮，创建一个新的富文本组件组件，如下图所示。任务实施添加富文本-2022年国庆假期安排通知（2）键入文字【关于2022年国庆假期安排的通知】，依次设置标题格式：①标题设置为【H1】；②字体颜色设置为【红色】；③设置【加粗】；④对齐方式选择【居中对齐】，如下图所示。任务实施添加富文本-2022年国庆假期安排通知（3）设置富文本正文。在文本区键入以下文字，然后调整文字样式，段落样式选择【P】，字体大小选择【大】，字体颜色改为黑色，如下图所示。各有关部门：按照国务院节假日安排，现将2022年国庆节放假调休日期的具体安排通知如下。10月1日至7日放假调休，共7天。10月8日（星期六）、10月9日（星期日）上班。”任务实施添加富文本-2022年国庆假期安排通知（4）点击【插入图像】按钮，插入2022国庆放假的图片，点击【保存】，如下图所示。任务实施添加富文本-2022年国庆假期安排通知（5）富文本设置完成后，预览效果如下图所示。任务实施添加嵌入的URL-树根互联官网（1）点击左