基于HTML5的多媒體設備管理系統前端設計

亓相濤 謝鵬

摘 要：隨著社會信息化的普及，高校的教學管理及設備維護也進入了“數據入庫”和“系統管理”的階段。高等院校多媒體設備的維護有品種多、使用更換頻度高、故障緊急性強的特點，對整體院校教育教學起著硬件供應、場所服務的重要作用，需要一個優質、全面、穩定的管理系統做強化支撐。本文以HTML5為Web內容構建規范，設計了一套多媒體設備管理系統前端界面方案。從應用的角度，在總體設計、設備管理、采購管理、維修管理、人員管理、系統管理七個方面做了詳細的前端界面設計。

關鍵詞：多媒體;設備管理系統

基金項目：武漢商學院創新建設項目（項目編號：2017KC01）。

1 總體設計

設備管理系統的前端設計按功能模塊劃分了人中心、基礎配置、采購管理、設備管理、維修管理、組織人員、系統管理七個。在用戶登錄成功后轉入主界面，如圖1-1所示。

功能概況：個人中心--用戶的基礎信息和用戶密碼設置;基礎配置--供應商管理、位置管理（設備安裝位置）、類型配置（多媒體設備的分類）、設備規格參數模板;采購管理--采購信息（錄入采購信息）;設備管理--設備信息（由采購數據生成）、設備操作記錄

維修管理：定期維修計劃、維修記錄、維修臺賬;組織人員--部門設置、崗位設置、部門崗位（部門與崗位關聯）、用戶信息（部門下的人員）、用戶賬號;系統管理--角色權限、開發者數據調整。

個人中心主要有兩個功能：我的信息--完善我的基本信息;用戶設置--修改登錄密碼，如圖1-2所示。

基礎配置中包含了物業管理，模塊有：供應商管理--維護供應商的基本信息;位置管理--維護學校教室信息;類型配置--維護設備的類型（分類）;設備規格參數模板--維護多媒體設備的參數、錄入采購時可以自動帶出?；A配置的頁面如圖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 結論

多媒體設備管理系統的建設解決了高校在設備管理中的薄弱環節，淘汰了手工設備記賬管理，節省了有限的人力資源的輸出;完善了設備的養護記錄，對使用周期長的部件做了質量及用度的平衡;杜絕了部分賬面資產與實際情況脫節的誤點。

系統的應用是人與機器的交互過程，前端界面的結構設計直接影響到使用者的工作效率及狀態。針對多媒體設備管理系統的應用，以維護的側重點及使用人員的操作習慣為抓手，本文著重優化設計了設備管理、采購管理、維修管理、人員管理、系統管理等模塊?？傮w來言，前端設計做到了界面清晰條理，分類細致有序，操作簡單快捷的效果。后續的系統開發，數據庫的連接與信息接入將與前端進一步交互，完成多媒體設備管理系統的整體功能實現。

參考文獻

[1]基于HTML5的Web前端設計與開發[J].薛玉倩.內蒙古科技與經濟.2019-09

[2]基于WEB前端開發技術的網站設計——以連鎖超市商品銷售管理系統為例[J].楊正午.山西科技.2019-05

[3]高?；贖tml5技術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-），男，湖北黃岡人，本科，研究方向：物聯網工程。