设备数字化运维工业APP的开发与应用 课件 3.2管理人员视图的设计与实现

项目三设备运维平台的视图设计与实现3.2管理人员视图的设计与实现设备数字化运维工业APP开发与应用目录013.2.1任务说明023.2.2知识准备043.2.2练习巩固053.2.2扩展学习033.2.2任务实施任务说明前面任务中小明针对设备故障报修过程中的工单状态，设计了可以根据工单状态进行实时数据查看和过程监督的看板视图，但实际设备运维过程中，一些管理者例如工单管理人员、部门经理等也需要定期查看相关数据，根据实际需要，小明又设计了3个管理人员数据查看视图。任务要求：1、创建工单详情视图。2、创建报修单整体看板视图。3、创建本月维修单视图。目录013.2.1任务说明023.2.2知识准备043.2.4练习巩固053.2.5扩展学习033.2.3任务实施知识准备常见视图的分解方法视图是为了方便用户快速查看目标数据，可以先通过数据的筛选和排序获取目标数据，再选择数据的呈现效果。常见的视图分解方式有以下几种。根据某一个选项字段，区分不同状态的数据。例如根据线索状态，将筛选条件设置为“新线索”，即可生成《新线索》视图；在每个视图中，选择一个值即可配置多个状态视图，配置方式如下图所示。1按照数据的某种状态分解知识准备常见视图的分解方法根据字段性质和权限进行分解，通过不同的字段显隐组合配置不同的视图。例如将员工信息表，分解为“通讯录”、“员工档案”等视图。在《通讯录》视图下，隐藏身份证、银行卡信息等敏感字段，保留联系方式等基本信息，配置方式如下图所示。2按字段的公开范畴分解知识准备常见视图的分解方法根云积木平台可以识别当前查看人，根据行记录Owner配置不同拥有关系的视图。例如“我的XX”和“全部XX”。结合“包含下属的”选项，还可以建立“团队XX”。在CRM等应用中，经常需要给销售成员和销售负责人设计不同的视图。以销售线索为例，给某一位销售配置《我的线索》视图，只需将【负责销售】字段（控件类型需为“成员”）的筛选条件设置为【当前成员】，那么在此视图下只显示本人拥有的记录；针对销售团队的负责人，常常需要看到整个团队的销售线索，可以将其下属的记录添加进筛选值中，完成《团队的线索》视图。配置如下图所示。3按照数据的拥有者分解知识准备视图的常见操作视图的管理操作包括修改视图配置、切换视图类型、复制、分享、导出、从导航栏中隐藏、删除等,如下图所示。（1）配置视图：单击视图名称右侧的倒三角按钮，选择“配置视图”，即可进行视图的详细配置。（2）更改视图类型：支持表格视图、看板视图、层级视图、画廊视图、日历视图等十种视图之间切换。（3）复制：将当前工作表中某个视图的内容和配置完全复制到一个新的视图中。（4）分享：此视图下的记录支持通过链接分享给任何人。对方打开链接后，可以查看此视图下的所有可见的记录，且无需验证身份。如果视图下的记录关联了他表记录，对方可以查看关联的记录，但是关联记录的关联记录是不能查看的。（5）导出：当前视图下可见的记录支持导出为Excel或者CSV文件。（6）从导航栏中隐藏：视图支持在导航中隐藏，也支持仅在PC端隐藏或仅在移动端隐藏。例如，视图太多时，移动端只需看重点视图，可以在导航栏中隐藏其他视图。（7）删除视图：单击视图名称右侧的倒三角按钮，可以删除当前视图，不会影响表格数据。知识准备看板视图的创建和使用看板视图下，记录能够按照某个状态值进行分组，并以卡片的形式显示在对应的分组下，一个卡片代表一个记录。【例3.2】参照项目二创建一个基础数据如下表所示的公司客户档案表，表单中的【公司性质】字段为单选控件，选项包括外资企业、国有企业、集体企业、私营企业、个体工商户等，【Logo】字段为附件类型的控件，可上传图片、文档、音频、视频等类型的文件。在此基础上，创建一个看板视图，实现按照公司的性质，分类显示对应的公司，如下图所示。（未提供部分自由发挥，具体操作时可自行按需增加）。公司全称地区公司性质公司简介负责销售LogoA公司北京外资企业一家专注于智能制造解决方案的科技企业张某B公司上海国有企业一家专注于生物医药研发的企业李某

C公司浙江集体企业一家新能源领域的领导企业张某

D公司广州私营企业一家提供全球物流服务的综合性企业王某

E公司西安个体工商户一家专注于企业数字化服务的高科技公司李某

知识准备看板视图的创建和使用知识准备看板视图的创建和使用（1）添加新视图点击【+】按钮，选择【看板】，如下图所示。知识准备看板视图的创建和使用（2）选择看板的分组字段一个看板代表一个状态类型，选择一个字段作为分组依据。这里我们选择“公司性质”这个单选字段作为分组依据，如下图所示。目前支持的分组字段为：单选、多选、等级、人员和关联记录（关联关系为单条）。知识准备看板视图的创建和使用（3）修改视图名称视图名称修改方式如下图所示。知识准备看板视图的创建和使用（4）是否显示无数据分组如果分组下没有记录，则可以隐藏此分组，当有记录时会自动显示出来，设置方式如下图所示。知识准备看板视图的创建和使用（5）设置卡片的显示效果卡片中，除了默认且强制显示记录的标题字段内容外，还支持显示其他字段信息。第一：显示摘要常用于长文本内容的显示，例如公司介绍、任务详情等，内容最长显示为3行，如下图所示。知识准备看板视图的创建和使用第二：显示字段可设置多个显示字段，如果根据字段内容很容易知道描述的什么信息，可以不显示字段名称。如果字段内容为空，则字段名称也不会显示，如下图所示。知识准备看板视图的创建和使用第三：卡片中的显示字段自定义排序卡片中的显示字段也支持自定义排序，如下图所示。知识准备看板视图的创建和使用第四：封面图片每一个记录卡片都可以展示记录中的附件字段，如果此字段有多个图片，则显示最新的那一张，可以设置图片的显示位置和显示方式，如下图所示。目录013.2.1任务说明023.2.2知识准备043.2.4练习巩固053.2.5扩展学习033.2.3任务实施任务实施创建工单详情视图【工单详情】视图主要用于显示系统中所有维修工单的详细信息，便于工单管理员、系统管理员、总经理等角色进行工单检索及查看。每一个表单创建以后，系统都会自带一个“全部”的表格视图，用于显示所有表单数据。本任务主要是通过修改视图名称，并对视图进行一些设置，来达到满足工单整体详情显示的目的。本次操作主要实现的内容有：修改视图名称：工单详情。设置表格行高：紧凑。设置自动刷新：5分钟。设置自定义显示列，调整字段位置。设置排序：将创建时间设置为【最新的在前】。任务实施创建工单详情视图具体实现步骤如下：（1）点击维修单表下面的【+】按钮，在滑出选项中点击【表格】，如下图所示。任务实施创建工单详情视图（2）在弹出的配置页面中，输入视图名称为【工单详情】，行高选择【紧凑】，自动刷新选择【5分钟】。如下图所示。任务实施创建工单详情视图（3）在视图配置页面中点击【显示列】，勾选【自定义显示列】，在字段选项中将【工单状态】、【工单编号】、【设备台账】和【故障现象】调整到开头位置，如下图所示。任务实施创建工单详情视图（4）在视图配置页面中点击【排序】，在右边切换页中选择排序字段（【创建时间】）和排序规则（【最新的在前】），如下图所示。任务实施创建工单详情视图（5）【工单详情】视图最终实现结果如下图所示。任务实施创建报修单整体看板接下来创建一个【报修单整体看板】，以看板视图的方式展现工单的状态情况，从而为工单管理员、总经理及其他人员及时、整体的了解工单情况提供便利。本次操作主要实现的内容有：创建看板视图：报修单整体看板。选择分组字段：【工单状态】。选择显示字段：【报修时间】、设备、报修人员。选择封面：故障照片。显示位置：右。显示方式：填满。设置排序：将创建时间设置为【最新的在前】。数据过滤：【报修时间】设为指定范围。任务实施创建工单详情视图（1）点击维修工单，并点击维修工单下面的【+】按钮，在滑出选项中点击【看板】。在弹出的看板视图中选择分组字段【工单状态】，并【确认】，如下图所示。任务实施创建工单详情视图（2）在弹出页面中修改视图名称为【报修单整体看板】，分组字段选为【工单状态】（默认跟上面选择一致），封面选择【故障照片】，显示位置【右】，显示方式【填满】，如下图所示。任务实施创建工单详情视图（3）点击【过滤】，添加筛选条件，在弹出的字段中选择【报修时间】，如下图所示。任务实施创建工单详情视图然后在【报修时间】运算关系的下拉选项中选【在范围内】，时间范围设为【2022-01-0100:00—2023-01-0123:59】，完成时间筛选工作，如下图所示。任务实施创建工单详情视图（4）在视图配置页面中点击【排序】，在右边切换页中选择排序字段（【报修时间】）和排序规则（【最新的在前】），如下图所示。任务实施创建工单详情视图（5）报修单整体看板视图最终实现结果如下图所示。任务实施创建报修单画廊本任务将通过创建一个报修单画廊，以画廊的方式显示当天所有报修单的信息，便于工单管理人员或管理人员及时了解工单的完成情况。本次操作主要实现的内容有：创建画廊视图：报修单画廊。选择显示字段：工单状态、故障照片、设备。选择封面：故障照片。显示位置：上。显示方式：填满。设置排序：将【报修时间】设置为【最新的在前】。数据过滤：【报修时间】为指定时间。任务实施创建报修单画廊具体实现步骤如下：（1）点击维修单表下面的【+】按钮，在滑出选项中点击【画廊】。（2）在弹出页面中修改视图名称为【报修单画廊】，显示字段设置为【显示2列】，封面选为【故障照片】，显示位置【上】，显示方式【填满】，如下图所示。任务实施创建报修单画廊（3）点击显示字段下面的【显示2列】，在下拉选项中将【工单状态】移动到最上面，并设为可见状态，如下图所示。任务实施创建报修单画廊（4）在视图配置页面中点击【排序】，在右边切换页中选择排序字段（【报修时间】）和排序规则（【最新的在前】）。（5）点击【过滤】，添加筛选条件，在弹出的字段中选择【报修时间】，在【报修时间】下面的下拉选项中选【在范围内】，时间范围设为【2022-01-0100:00—2023-01-0123:59】，完成时间筛选工作，如下图所示。任务实施创建报修单画廊（6）报修单画廊视图实现效果如下图所示。【★学习提示】同可以做今天、本周、本季度或其他时间的工单视图，均可达到类似显示效果。目录013.2.1任务说明023.2.2知识准备043.2.4练习巩固053.2.5扩展学习033.2.3任务实施练习巩固练习一：根据任务3.2.3创建工单详情视图的操作，创建一个本周、本月的工单详情视图。练习二：任务3.1练习二已经完成了已提交、待审核、已通过等三个视图的创建。根据学校数据统计和管理员的数据查看需求，请参照任务3.2的实施步骤完成离校详情单、离校单整体看板、离校单画廊的视图设计。目录013.2.1任务说明023.2.2知识准备043.2.4练习巩固053.2.5扩展学习033.2.3任务实施任务编号任务名称负责人计划开始日期计划完成日期实际开始日期实际完成日期任务状态T006技术培训孙某2024-11-252024-11-252024-11-252024-11-25待开始T005月度总结会议钱某2024-11-202024-11-202024-11-212024-11-24待开始T004项目汇报准备赵某2024-11-102024-11-152024-11-092024-11-19待开始T003市场调研王某2024-11-092024-11-122024-11-122024-11-14待开始T002客户方案讨论李某2024-11-062024-11-082024-11-062024-11-08进行中T001产品设计初稿张某2024-11-012024-11-052024-11-022024-11-06已完成扩展学习日历视图日历视图能帮助你更好地管理和时间相关的记录数据，像销售拜访、课程、生产计划等业务，需要安排每一天的业务计划，例如什么时候开始？什么时候结束？持续多久？今天有哪些事项需要处理？明天有多少事项需要完成？在日历视图下都一目了然。创建一个日历视图的步骤如下：（1）创建一个工作表创建一个基础数据如下表所示的、名称为【任务计划表】的工作表，其表单配置如下图所示，其中，【任务名称】和【任务状态】字段为单选控件，不同选项需要设置成不同颜色。扩展学习日历视图扩展学习日历视图（2）点击【任务计划表】下的【+】按钮，选择“日历”视图。（3）选择日期字段日历视图中，至少且必须要有一个日期字段作为“开始”，组成日历的日期线。如果业务需要有严格的计划，例如任务的开始和结束时间，则可以选择另一个日期字段作为结束。有些业务，需要多个维度的日期进行跟进描述，可以添加新的一组日期字段。比如律师的案件处理有立案日期、开庭日期、再审日期、宣判日期等；功能特性任务有评审日期、内测日期、上线日期等。日期字段选择后，点击确认，记录就自动填充到日历中了，为了区分不同维度的日期，每组时间可以设置标签。本案例配置及效果如下图所示。扩展学习日历视图扩展学习日历视图（3）设置日历中记录的颜色选择一个单选项字段【任务名称】，数据将按照此字段中的选项颜色来标记日程中记录的颜色，便于区分数据类型。如下图所示。扩展学习日历视图不同时间跨度的记录的颜色显示方式是不同的。例如，在月视图下，如果开始日期字段没有时间部分，且和结束日期是同一天，不显示背景色，只会在标题前面显示颜色，而跨天或全天的“日程”整体背景显示颜色，如下图所示。扩展学习日历视图（4）默认周期视图日历视图默认支持月、周和天三种显示方式，成员在查看时也可以手动切换类型，如下图所示。扩展学习日历视图（5）设置日历中每周的第一天可以根据实际需求，设置每周的第一天，如下图所示。扩展学习日历视图（6）记录的操作效果在日历视图下，拖拽记录到指定的日子，“开始”的日期字段会自动修改为选择的日子，“结束”的日期字段也会随之修改。（7）日程的排期通过排期，用户可以直观地查看各项任务的安排和时间节点。选择【全部】将显示所有的记录；选择【已排期】则显示“开始”日期不为空的记录，不为空表示该任务已经进行了排期；选择【未排期】则显示“开始”日期为空的记录，表示该项任务未进行排期，如下图所示。扩展学习甘特图甘特图也称为条状图，其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。在甘特图视图中，横轴表示时间，纵轴表示记录数据（任务活动）。图中每条记录以条形图的方式展示，条形的长度和位置可以表示每项活动的开始结束时间、持续时长，以及与其他活动的先后关系。甘特图常用于项目进展、工程进度等。在甘特图视图下，可以轻松看到项目的开始和结束日期，任务都有哪些，每个任务何时开始和完成，以及任务时长，任务如何组合在一起等。设置甘特图视图的步骤如下：1、创建甘特图视图（1）在日历视图中创建的【任务计划表