基于HTML5的多媒体设备管理系统前端设计

亓相涛 谢鹏

摘 要：随着社会信息化的普及，高校的教学管理及设备维护也进入了“数据入库”和“系统管理”的阶段。高等院校多媒体设备的维护有品种多、使用更换频度高、故障紧急性强的特点，对整体院校教育教学起着硬件供应、场所服务的重要作用，需要一个优质、全面、稳定的管理系统做强化支撑。本文以HTML5为Web内容构建规范，设计了一套多媒体设备管理系统前端界面方案。从应用的角度，在总体设计、设备管理、采购管理、维修管理、人员管理、系统管理七个方面做了详细的前端界面设计。

关键词：多媒体;设备管理系统

基金项目：武汉商学院创新建设项目（项目编号：2017KC01）。

1 总体设计

设备管理系统的前端设计按功能模块划分了人中心、基础配置、采购管理、设备管理、维修管理、组织人员、系统管理七个。在用户登录成功后转入主界面，如图1-1所示。

功能概况：个人中心--用户的基础信息和用户密码设置;基础配置--供应商管理、位置管理（设备安装位置）、类型配置（多媒体设备的分类）、设备规格参数模板;采购管理--采购信息（录入采购信息）;设备管理--设备信息（由采购数据生成）、设备操作记录

维修管理：定期维修计划、维修记录、维修台账;组织人员--部门设置、岗位设置、部门岗位（部门与岗位关联）、用户信息（部门下的人员）、用户账号;系统管理--角色权限、开发者数据调整。

个人中心主要有两个功能：我的信息--完善我的基本信息;用户设置--修改登录密码，如图1-2所示。

基础配置中包含了物业管理，模块有：供应商管理--维护供应商的基本信息;位置管理--维护学校教室信息;类型配置--维护设备的类型（分类）;设备规格参数模板--维护多媒体设备的参数、录入采购时可以自动带出。基础配置的页面如图1-3所示，供应商管理功能如表1-1所示。

位置管理是描述设备存储状态的重要选项，具体字段有编码：请南区用N标识、北区用B标识，参考已录入的数据;描述：编码的中文描述;序号：显示的排列序号。类型配置功能如表1-2所示。

设备规格参数模板，在分类上设置相应的规格参数模板，采购录入设备信息时可自动带出参数模板，功能如表1-3所示。

2 设备管理

设备管理包含采购管理及设备信息设置两项。

采购管理功能为：新增--打开新页面维护采购信息;搜索--查找出相对应的数据信息;高级--根据各级查询条件搜索出相对应的数据信息;重置--清空所有查询条件;导出--根据已经查找到的数据、导出数据为excel。采购管理界面如图2-1所示。

设备类型：基础配置里面的类型配置，这里选择相应的类型;供应商：基础配置里面的供应商;采购单位：组织人员里面配置的系部学院;采购人：系统里面的正式人员;使用数量：此次采购需使用的数量;备用数量：此次采购备用的数量;规格参数页签，选择的设备类型下面的规格参数模板、录入相应的参数;其中“*”表示必填项。采购信息界面如图2-2所示。

设备管理主要有两个模块：设备信息--采购单生成的设备信息;设备操作记录--设备的安装、领用、报废、更新记录。

设备信息可完成报废、导出设备信息，包含搜索：查找出相对应的数据信息;高级;根据各级查询条件搜索出相对应的数据信息;重置：清空所有查询条件;导出：根据已经查找到的数据、导出供应商数据为excel;報废：选中一条设备信息进行报废操作。

报废设备可完成输入报废原因、报废时间，设备操作记录可完成查询设备的操作记录。具体功能为搜索：查找出相对应的数据信息;高级：根据各级查询条件搜索出相对应的数据信息;重置：清空所有查询条件;导出：根据已经查找到的数据、导出供应商数据为excel;页签：可按页签快速筛选数据、安装、领用、报废等。

3 维修管理

维修管理主要有3个模块：定期维修计划--录入定期维修计划;维修记录--记录维修记录;维修台账--统计分析维修记录，如图3-1所示。

定期维修计划可以完成定期的设备维修，其主要功能为：新增--新增计划信息;搜索--查找出相对应的数据信息;高级--根据各级查询条件搜索出相对应的数据信息;重置--清空所有查询条件;导出--根据已经查找到的数据、导出数据为excel;编辑--编辑计划。如图3-2所示。

维修记录主要实现查询设备维修记录，可导出excel，可补后台录记录;维修台账可完成统计分析维修记录，可导出excel统计数据，“*”表示必填项。如图3-3所示。

4 人员系统管理

人员系统管理主要由系统管理与人员管理两部分组成，如图4-1所示。

系统管理的主要功能模块供使用为：角色菜单--配置后台管理角色菜单;菜单配置--系统拥有哪些功能菜单（建议不过分操作缺省使用）;WEB服务--系统cookie共享域名（建议不过分操作缺省使用）;业务字典--下拉框数据（建议不过分操作缺省使用） ;序列号配置--产生流水号（建议不过分操作缺省使用）。

角色菜单可以完成配置后台管理角色人员菜单，系统分为两类角色。系统默认：系统默认角色指在组织人员功能里面添加人员开通账号后登录系统就默认能看到的菜单;管理员：拥有系统所有的菜单;其他：如需添加角色，请在全局角色下添加通用角色、名字自定义，操作哪里可以分配菜单和人员，相应人员登录后角色拥有权限为默认与本角色合集（默认角色菜单与本角色的菜单合集）。菜单配置功能为：新增--新增角色信息;删除--删除角色信息;账号--查看/增加/删除角色对应的人员账号信息;菜单--配置该角色的权限菜单。

组织人员主要有五个功能模块：部门设置、岗位设置、部门岗位（部门与岗位关联）、用户信息（部门下的人员）、用户账号。部门设置用于设置使用系统的组织结构，例如高等院校的二级学院。功能为：新增--新增部门信息带红色*号为必填;编辑--双击可编辑修改信息;删除--删除误加数据;查询--根据搜索条件检索。

岗位设置完成维护岗位信息，功能为：新增--新增部门信息带红色*号为必填;编辑--双击可编辑修改信息;删除--删除误加数据;查询--根据搜索条件检索。部门岗位设置岗位下的人员（在下拉菜单用户管理里面会有添加人员功能），用户管理可实现开通账号的功能，此处人员基础信息保存后此页面并没有关联，后续会出现开通账号按钮，如图4-2所示。

5 结论

多媒体设备管理系统的建设解决了高校在设备管理中的薄弱环节，淘汰了手工设备记账管理，节省了有限的人力资源的输出;完善了设备的养护记录，对使用周期长的部件做了质量及用度的平衡;杜绝了部分账面资产与实际情况脱节的误点。

系统的应用是人与机器的交互过程，前端界面的结构设计直接影响到使用者的工作效率及状态。针对多媒体设备管理系统的应用，以维护的侧重点及使用人员的操作习惯为抓手，本文着重优化设计了设备管理、采购管理、维修管理、人员管理、系统管理等模块。总体来言，前端设计做到了界面清晰条理，分类细致有序，操作简单快捷的效果。后续的系统开发，数据库的连接与信息接入将与前端进一步交互，完成多媒体设备管理系统的整体功能实现。

参考文献

[1]基于HTML5的Web前端设计与开发[J].薛玉倩.内蒙古科技与经济.2019-09

[2]基于WEB前端开发技术的网站设计——以连锁超市商品销售管理系统为例[J].杨正午.山西科技.2019-05

[3]高校基于Html5技术Web前端工程师人才培养模式的研究与探讨[J].黎晓凤.品牌研究.2019-01

[4]基于HTML5技术下移动Web前端设计与开发的研究[J].于圣彬.中国新通信.2018-02

[5]高校学科竞赛管理系统的web前端设计与实现[J].洪杰.电脑知识与技术.2017-10

[6]基于HTML5技术的移动Web前端设计与开发分析[J].盛婷婷，电子制作.2016-10

[7]嵌入式系统前端开发工具的设计与实现[J]，陈定君，东北大学学报.1998-08

作者简介

亓相涛（1985-），男，山东济南人，碩士研究生，讲师，研究方向：物联网工程、嵌入式系统设计。

谢鹏（1999-），男，湖北黄冈人，本科，研究方向：物联网工程。