设备数字化运维工业APP的开发与应用 课件 3.1工单状态视图的设计与实现

项目三设备运维平台的视图设计与实现3.1工单状态视图的设计与实现设备数字化运维工业APP开发与应用【学习目标】※知识目标※了解视图的基本概念及作用。掌握常用视图设计与实现的方法。※能力目标※学会不同视图的使用，能针对不同场景选择合适的视图。能够针对不同项目场景，设计出合理且适用的视图。※素养目标※具有较强的团队合作能力、沟通能力和组织协调能力。培养学生解决生产问题的能力，学会用发展的眼光看问题，增强抗压能力。【学习导图】目录013.1.1任务说明023.1.2知识准备043.1.4练习巩固053.1.5扩展学习033.1.3任务实施任务说明W汽车公司的小明针对设备故障报修过程中的工单状态（01待分配、02待接收、03待维修、04已维修、05已确认），设计了可以根据工单状态进行实时数据查看和过程监督的看板视图，以方便各个运营角色及时查看和处理各自任务。任务要求：1、创建待分配工单视图。2、创建待接收工单视图。3、创建待维修工单视图。4、创建已维修工单视图。5、创建已完成工单视图。目录013.1.1任务说明023.1.2知识准备043.1.4练习巩固053.1.5扩展学习033.1.3任务实施知识准备视图的定义及功能视图（View）是用户查看和管理表数据的窗口，它可以根据用户角色或场景，按指定的样式呈现出目标数据。视图只能由管理员创建，然后指定普通成员可见哪些视图，普通成员通过这些视图查看和管理表数据。一张工作表至少有一个视图，删除或修改视图不影响工作表的数据。知识准备视图的定义及功能视图在软件中具有多种功能，这些功能共同构成了用户与软件之间交互的核心部分，以下是视图的主要功能。（1）数据展示与可视化视图的主要功能之一是展示数据，即将存储在数据库或内存中的数据以可视化的形式呈现给用户，帮助用户直观地理解和分析数据。（2）用户交互界面视图不仅是数据的展示窗口，还是用户与软件进行交互的界面。用户可以通过视图进行数据的输入、编辑、删除等操作，实现与数据的互动。（3）个性化定制视图通常具有高度的可配置性，允许用户根据自己的需求和偏好定制视图的外观、布局和功能。这包括调整字体、颜色、大小等视觉属性，以及选择展示哪些数据字段、如何排序和过滤数据等。（4）简化复杂数据对于复杂的数据结构和关系，视图可以隐藏底层数据的复杂性，只展示用户关心的部分。通过抽象和简化数据表示，视图使得用户可以更加高效地理解和处理大量信息。知识准备视图的基本组成视图的基本组成如下图所示：知识准备视图的基本组成支持表格、看板、详情、层级、日历、画廊、地图、资源、甘特图等系统视图和自定义开发的插件设计图。1数据呈现方式知识准备视图的基本组成通过行高、显示设置、表格交互方式等设置调整视图的外观效果。2视图设置知识准备视图的基本组成添加筛选条件，限制出现在视图中的记录。3过滤知识准备视图的基本组成对于视图下的数据，支持设置一个默认的排序方式来呈现视图下的数据。4排序知识准备视图的基本组成视图中可以选择一个"单选"类型的字段作为记录，单选字段的选项可以设置颜色，在视图中可以快速辨别记录之间的区别。5颜色知识准备视图的基本组成如果有敏感字段不需要在此视图下显示，则可以隐藏掉，在该视图下打开记录后，此字段不会显示出来。6字段知识准备视图的基本组成选择字段作为快速筛选器平铺显示在视图中，以帮助用户快速查询记录。7快速筛选知识准备视图的基本组成将所选字段选项以列表的形式显示在视图左侧，帮助用户快速查看记录，支持选项、关联记录和级联选择字段。8筛选列表知识准备视图常见的几种类型获取目标数据后，需要根据具体需求选择合适的数据呈现方式，即选择视图的类型。由于不同的行业关注的数据特点不同，所需的展示效果也会有所差异。根云积木平台支持10种数据呈现方式，即10种视图类型。系统视图：表格、看板、详情、层级、日历、画廊、地图、资源、甘特图；插件视图：自定义开发的插件视图。知识准备视图常见的几种类型表格视图是最基础和最常见的一种视图，和Excel表格类似，可以网格化显示和管理数据。当在应用中创建一个工作表之后，都会缺省自动配置一个名称为“全部”的表格视图，这个视图下能够显示所有记录和字段，如下图所示：1表格视图知识准备视图常见的几种类型对于具有不同状态、阶段的业务数据，看板视图是最佳的选择。它以卡片的形式将数据分类显示在各个分类看板下，便于直观地跟踪和管理进度状态。工单管理就非常适合采用看板视图，如下图所示：2看板视图知识准备视图常见的几种类型详情视图支持直接展开记录的详情页面，而不需要通过弹窗或打开新的页面才能查看记录的全部信息，如下图所示：3详情视图知识准备视图常见的几种类型层级视图可以将具有一对多关系的记录按层级树的方式展示出来，关联关系可以是本表记录间的关联，关联的两条记录是同一种业务对象，但具有父-子、上下级关系；也可以是多表记录间的关联，关联的两条记录是不同业务对象，但具有一般业务上的层级归属关系。例如，省、市、县都是表示区域的对象，每条记录代表一个区域范围，因此可以放在同一个工作表中管理。一个省是一条记录，一个市是一条记录，一个县也是一条记录，但县从属于市，市从属于省，字段之间具有父-子关系，因此省-市-县的本表关联层级视图如下图所示。4层级视图知识准备视图常见的几种类型日历视图常用在时间管理、任务管理等和日期强相关的场景中。和日程管理类似，日历视图基于数据中的某个日期字段，将相关数据按日期显示在对应的日历日期上，如下图所示：5日历视图知识准备视图常见的几种类型画廊视图将每一条数据以大卡片的形式平铺展示，重点突出图片内容，选择一个附件作为封面。除了封面，可以设置显示其他重点字段。画廊视图如下图所示：6画廊视图知识准备视图常见的几种类型地图视图可以根据表中的定位字段数据，在地图上直观地展示坐标位置。通过地图视图，用户可以快速地获取位置信息并进行空间分析。地图视图如下图所示：7地图视图知识准备视图常见的几种类型在管理的“资源”中，通常会有各种调度、分配和管理的需求，如会议室的预定、货车的出车安排、员工的工作日程安排等。资源视图是一种以时间为基准，根据不同资源的分配情况，将其在同一个视图中以列表形式展示的视图工具。通过资源视图，可以更加直观地了解每个资源的占用和空闲的时段，然后进行相应的调整和安排。资源视图如下图所示：8资源视图知识准备视图常见的几种类型甘特图也称为条状图，其通过条状图来显示项目、进度和其他时间相关的工具，它能够清晰地展示项目任务的计划和实际进展情况，以及各个任务之间的关系，方便用户跟踪和管理项目随时间推进的情况。在甘特图视图中，横轴表示时间，纵轴表示记录数据（任务活动）。图中每条记录以条形图的方式展示，条形的长度和位置可以表示每项活动的开始结束时间、持续时长，以及与其他活动的先后关系。甘特图视图如下图所示：9甘特图视图知识准备视图常见的几种类型插件视图，又叫自定义视图，当系统预设的表格、看板、层级、日历、画廊、详情、甘特图等系统视图不能满足用户视图展示需求的时候，开发者可以通过自己编写代码实现一个完全自定义的视图页面，用于展示工作表的记录数据。自定义视图支持搜索、筛选、统计、快速筛选和筛选列表等操作，还可以通过公共Javascript接口实现调用系统组件，比如展示记录详情弹窗、调用新建记录窗口等等。插件视图是由用户自己开发的视图类型，没有标准样式。10插件视图知识准备表格视图的创建和使用当创建一个工作表后，都会自动配置一个名称为“全部”的表格视图，表格视图组成包括表格视图设置、显示列、过滤、排序、颜色、字段、快速筛选、筛选列表、自定义动作，如下图所示。知识准备表格视图的创建和使用【例3.1】提前创建一个员工档案表，表单设计如下图所示，其中，部门和状态字段为单选控件，部门需包含销售部、研发部、人事部、产品部等选项，状态需包含正式、试用、离职、实习等选项。导入下表中的数据。然后在员工档案表的基础上创建一个“在职”视图，这个视图下只显示在职员工的档案。知识准备表格视图的创建和使用姓名工号部门职位性别出生日期电话公司邮箱状态张某某MD-0676销售部经理男1968.10.10188888888831000000@000.com正式谢某某MD-0682销售部经理男1988.10.10188888888875000000@000.com正式李某某MD-0677研发部机械工程师男2000.02.04188888888842000000@000.com实习王某某MD-0681研发部机械工程师女1996.04.04188888888886000000@000.com正式赵某某MD-0678人事部职员女1992.12.10188888888853000000@000.com试用邓某某MD-0688人事部职员女1994.10.16188888888897000000@000.com正式刘某某MD-0679产品部测试员男1982.09.08188888888864000000@000.com离职知识准备表格视图的创建和使用（1）创建视图：点击【+】按钮，右侧滑出视图配置层，选择【表格】视图，如下图所示：知识准备表格视图的创建和使用（2）设置视图名称：点击视图名称右侧的倒三角图案，在下拉菜单中选择【配置视图】，在右侧弹框中将视图名称修改为【在职】，如下图所示：知识准备表格视图的创建和使用（3）设置行高和列宽：点击表格视图，出现行高选项，通过选择紧凑、中等、高、超高，实现对于行高的设置，本例中行高保持默认【紧凑】，如下图所示：知识准备表格视图的创建和使用（4）显示列：有时，表格中只需显示几个重点关注的字段即可，需要查看其他字段时，点击记录在记录详情页中查看，这样表格页面既简洁又能快速预览重点数据内容。显示列支持两种设置方式，一是与表单字段保持一致（显示前50个），二是自定义显示列。本案例中，需要将电话和公司邮箱号进行隐藏，其设置如下图所示：【★★★注意】显示列中可显示的字段，必须是本视图下【字段】设置中显示的字段。表格最多显示50列。这里设置的隐藏字段，只对此表格页面有效，打开记录详情时的字段是否隐藏取决于后面的字段显隐设置、角色权限或业务规则相关设置。如果是自定义显示列的方式，后面新增的字段，默认不显示在表格区，需要在这里设置显示。知识准备表格视图的创建和使用（5）表格中列的排序：在表格区域，还可以调整列的顺序，这里的顺序可以和表单配置页面中的位置不一致。选择自定义显示列后，上下拖拽即可调整字段的排序，如下图所示：知识准备表格视图的创建和使用（6）数据过滤：通过设置数据过滤的筛选条件，当前视图仅显示需要展示的记录，不符合条件的记录不会显示。如果其他记录修改后满足了条件，则会自动显示在这个视图下。本案例中，筛选出在职员工的步骤为：①选择需要筛选的字段【状态】，②选择运算关系【等于】，③选择运算的对比值【正式】，筛选条件设置如下图所示：【★★★注意】当有多个筛选条件时，选择是【且】还是【或】的关系。一旦选定，后面筛选条件关系都是一样的，不能改变。知识准备表格视图的创建和使用（7）设置记录的默认排序方式：点击【排序】，排序字段选择【工号】，方式选择【1→9】，如下图所示。设定好排序方式后，每次打开视图，表记录都是按这个设定进行排序，支持按照多个字段排序。知识准备表格视图的创建和使用（8）字段显隐设置：在视图中，如果某些字段不需要显示，隐藏掉即可。一旦字段被标记了隐藏，那么在当前视图下打开的记录，都不显示此字段。本案例中，希望在“在职”视图下查看员工档案时，把员工的出生日期隐藏。点击【出生日期】字段前面的开关，显示为灰色即表示字段会被隐藏，如下图所示：知识准备表格视图的创建和使用(9）快速筛选：表格视图下，可以将多个字段作为快速筛选器平铺显示在页面顶部，以帮助用户快速查找记录，如下图所示：知识准备表格视图的创建和使用第一步：将【姓名】、【部门】、【性别】添加为筛选条件的字段，字段选择后，选择匹配的筛选方式，如下图所示：知识准备表格视图的创建和使用第二步：通过上下拖拽对筛选字段进行排序，如下图所示：知识准备表格视图的创建和使用第三步：勾选【启用查询按钮】，如下图所示。勾选【启用查询按钮】后，在输入筛选条件后，需要点击按钮后才能统一查询数据；若不启用查询按钮，则字段的查询条件输入完毕后平台能直接自动查询数据；当查询字段多于3个时，查询按钮会被强制启用，必须点击按钮才能统一查询。但也有以下例外：在激活文本（手机、邮箱、证件）、数值类型字段的查询时，按下回车键直接查询，如果某个字段输入多个关键词搜索，点击确定按钮后也能直接查询。如果勾选【在执行查询后显示数据】后，进入视图将不会显示数据，需要输入筛选条件后才会显示符合条件的数据知识准备表格视图的创建和使用（10）筛选列表：筛选列表功能支持单选、多选、关联记录和级联选择字段，选择字段后，该字段的所有选项将以列表的形式显示在视图左侧，帮助用户快速查看记录。本案例中，选择【部门】作为筛选列表字段，效果如下图所示：目录013.1.1任务说明023.1.2知识准备043.1.4练习巩固053.1.5扩展学习033.1.3任务实施任务实施创建待分配工单视图【待分配】是指现场工程师进行维修工单填报后，工单管理员没有分配维修工程师之前的一个【待分配】的一个状态，本视图将以表格的方式进行呈现。本次操作主要实现的内容有：创建表格视图：【待分配工单】。设置表格行高：紧凑。设置自动刷新：关闭。设置自定义显示列，调整字段位置。设置排序：将创建时间设置为【最新的在前】。进行数据过滤，选择筛选条件（工单状态：【待分配】）。任务实施创建待分配工单视图具体实现步骤如下：（1）选择维修单表，点击维修单表下面的【+】按钮，在滑出选项中点击表格，如下图所示。任务实施创建待分配工单视图（2）在弹出的配置页面中，输入视图名称为【待分配工单】，行高选择【紧凑】，自动刷新选择【关闭】。如下图所示。任务实施创建待分配工单视图（3）在视图配置页面中点击【显示列】，勾选【自定义显示列】，在字段选项中将【工单状态】、【报修时间】、【工单编号】、【设备台账】和【故障现象】调整到开头位置。如下图所示。任务实施创建待分配工单视图（4）在视图配置页面中点击【过滤】，在右边切换页中单击【+添加筛选条件】，筛选条件选择【工单状态】，运算条件选择【等于】，筛选内容选择【01待分配】，然后点击【保存】，如下图所示。任务实施创建待分配工单视图（5）在视图配置页面中点击【排序】，在右边切换页中选择排序字段【创建时间】和排序规则【最新的在前】，如下图所示。任务实施创建待分配工单视图（6）待分配工单视图最终实现结果如下图所示。任务实施创建待接收工单视图该任务采用复制【待分配工单】视图的方式实现。（1）点击【待分配工单】旁边的倒三角，在滑出菜单中选择【复制】，如下图所示。任务实施创建待接收工单视图（2）将视图名称【待分配工单-复制】改为【待接收工单】，点击【过滤】，将筛选字段【工单状态】的筛选内容修改为【待接收】，点击【保存】，如下图所示。任务实施创建待接收工单视图（3）待接收工单视图最终实现结果如下图所示。任务实施创建待维修工单视图（1）该任务的实现参考待接收工单的完成方式，只需把过滤筛选条件中【工单状态】字段的筛选内容修改为【待维修】即可，如下图所示。任务实施创建待维修工单视图（2）待维修工单视图最终实现结果如下图所示。任务实施创建已维修工单视图（1）该任务的实现参考待接收工单的完成方式，只需把过滤筛选条件中【工单状态】字段的筛选内容修改为【已维修】即可，如下图所示。任务实施创建已维修工单视图（2）已维修工单视图最终实现结果如下图所示。任务实施创建已完成工单视图（1）该任务的实现参考待接收工单的完成方式，只需把过滤筛选条件中的【工单状态】字段的筛选内容修改为【已确认】即可，如下图所示：任务实施创建已完成工单视图（2）已完工单视图最终实现结果如下图所示。目录013.1.1任务说明023.1.2知识准备043.1.4练习巩固053.1.5扩展学习033.1.3任务实施练习巩固练习一：小丽在网上购物时，想查看自己的购物数据。请根据购物经验思考：监督购物订单状态过程需要哪些视图，以便购物人员及时查看订单状态？练习二：高校学生小聪实习完毕，返校领取毕业证，学校设置了网上办理系统，并根据离校单办理的过程，设计了三个状态：01已提交、02待审核、03已通过，完成三个状态视图的创建。目录013.1.1任务说明023.1.2