基于HTML5的多媒體設(shè)備管理系統(tǒng)前端設(shè)計(jì)

亓相濤 謝鵬

摘 要：隨著社會(huì)信息化的普及，高校的教學(xué)管理及設(shè)備維護(hù)也進(jìn)入了“數(shù)據(jù)入庫(kù)”和“系統(tǒng)管理”的階段。高等院校多媒體設(shè)備的維護(hù)有品種多、使用更換頻度高、故障緊急性強(qiáng)的特點(diǎn)，對(duì)整體院校教育教學(xué)起著硬件供應(yīng)、場(chǎng)所服務(wù)的重要作用，需要一個(gè)優(yōu)質(zhì)、全面、穩(wěn)定的管理系統(tǒng)做強(qiáng)化支撐。本文以HTML5為Web內(nèi)容構(gòu)建規(guī)范，設(shè)計(jì)了一套多媒體設(shè)備管理系統(tǒng)前端界面方案。從應(yīng)用的角度，在總體設(shè)計(jì)、設(shè)備管理、采購(gòu)管理、維修管理、人員管理、系統(tǒng)管理七個(gè)方面做了詳細(xì)的前端界面設(shè)計(jì)。

關(guān)鍵詞：多媒體;設(shè)備管理系統(tǒng)

基金項(xiàng)目：武漢商學(xué)院創(chuàng)新建設(shè)項(xiàng)目（項(xiàng)目編號(hào)：2017KC01）。

1 總體設(shè)計(jì)

設(shè)備管理系統(tǒng)的前端設(shè)計(jì)按功能模塊劃分了人中心、基礎(chǔ)配置、采購(gòu)管理、設(shè)備管理、維修管理、組織人員、系統(tǒng)管理七個(gè)。在用戶登錄成功后轉(zhuǎn)入主界面，如圖1-1所示。

功能概況：個(gè)人中心--用戶的基礎(chǔ)信息和用戶密碼設(shè)置;基礎(chǔ)配置--供應(yīng)商管理、位置管理（設(shè)備安裝位置）、類型配置（多媒體設(shè)備的分類）、設(shè)備規(guī)格參數(shù)模板;采購(gòu)管理--采購(gòu)信息（錄入采購(gòu)信息）;設(shè)備管理--設(shè)備信息（由采購(gòu)數(shù)據(jù)生成）、設(shè)備操作記錄

維修管理：定期維修計(jì)劃、維修記錄、維修臺(tái)賬;組織人員--部門設(shè)置、崗位設(shè)置、部門崗位（部門與崗位關(guān)聯(lián)）、用戶信息（部門下的人員）、用戶賬號(hào);系統(tǒng)管理--角色權(quán)限、開發(fā)者數(shù)據(jù)調(diào)整。

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

基礎(chǔ)配置中包含了物業(yè)管理，模塊有：供應(yīng)商管理--維護(hù)供應(yīng)商的基本信息;位置管理--維護(hù)學(xué)校教室信息;類型配置--維護(hù)設(shè)備的類型（分類）;設(shè)備規(guī)格參數(shù)模板--維護(hù)多媒體設(shè)備的參數(shù)、錄入采購(gòu)時(shí)可以自動(dòng)帶出?；A(chǔ)配置的頁(yè)面如圖1-3所示，供應(yīng)商管理功能如表1-1所示。

位置管理是描述設(shè)備存儲(chǔ)狀態(tài)的重要選項(xiàng)，具體字段有編碼：請(qǐng)南區(qū)用N標(biāo)識(shí)、北區(qū)用B標(biāo)識(shí)，參考已錄入的數(shù)據(jù);描述：編碼的中文描述;序號(hào)：顯示的排列序號(hào)。類型配置功能如表1-2所示。

設(shè)備規(guī)格參數(shù)模板，在分類上設(shè)置相應(yīng)的規(guī)格參數(shù)模板，采購(gòu)錄入設(shè)備信息時(shí)可自動(dòng)帶出參數(shù)模板，功能如表1-3所示。

2 設(shè)備管理

設(shè)備管理包含采購(gòu)管理及設(shè)備信息設(shè)置兩項(xiàng)。

采購(gòu)管理功能為：新增--打開新頁(yè)面維護(hù)采購(gòu)信息;搜索--查找出相對(duì)應(yīng)的數(shù)據(jù)信息;高級(jí)--根據(jù)各級(jí)查詢條件搜索出相對(duì)應(yīng)的數(shù)據(jù)信息;重置--清空所有查詢條件;導(dǎo)出--根據(jù)已經(jīng)查找到的數(shù)據(jù)、導(dǎo)出數(shù)據(jù)為excel。采購(gòu)管理界面如圖2-1所示。

設(shè)備類型：基礎(chǔ)配置里面的類型配置，這里選擇相應(yīng)的類型;供應(yīng)商：基礎(chǔ)配置里面的供應(yīng)商;采購(gòu)單位：組織人員里面配置的系部學(xué)院;采購(gòu)人：系統(tǒng)里面的正式人員;使用數(shù)量：此次采購(gòu)需使用的數(shù)量;備用數(shù)量：此次采購(gòu)備用的數(shù)量;規(guī)格參數(shù)頁(yè)簽，選擇的設(shè)備類型下面的規(guī)格參數(shù)模板、錄入相應(yīng)的參數(shù);其中“*”表示必填項(xiàng)。采購(gòu)信息界面如圖2-2所示。

設(shè)備管理主要有兩個(gè)模塊：設(shè)備信息--采購(gòu)單生成的設(shè)備信息;設(shè)備操作記錄--設(shè)備的安裝、領(lǐng)用、報(bào)廢、更新記錄。

設(shè)備信息可完成報(bào)廢、導(dǎo)出設(shè)備信息，包含搜索：查找出相對(duì)應(yīng)的數(shù)據(jù)信息;高級(jí);根據(jù)各級(jí)查詢條件搜索出相對(duì)應(yīng)的數(shù)據(jù)信息;重置：清空所有查詢條件;導(dǎo)出：根據(jù)已經(jīng)查找到的數(shù)據(jù)、導(dǎo)出供應(yīng)商數(shù)據(jù)為excel;報(bào)廢：選中一條設(shè)備信息進(jìn)行報(bào)廢操作。

報(bào)廢設(shè)備可完成輸入報(bào)廢原因、報(bào)廢時(shí)間，設(shè)備操作記錄可完成查詢?cè)O(shè)備的操作記錄。具體功能為搜索：查找出相對(duì)應(yīng)的數(shù)據(jù)信息;高級(jí)：根據(jù)各級(jí)查詢條件搜索出相對(duì)應(yīng)的數(shù)據(jù)信息;重置：清空所有查詢條件;導(dǎo)出：根據(jù)已經(jīng)查找到的數(shù)據(jù)、導(dǎo)出供應(yīng)商數(shù)據(jù)為excel;頁(yè)簽：可按頁(yè)簽快速篩選數(shù)據(jù)、安裝、領(lǐng)用、報(bào)廢等。

3 維修管理

維修管理主要有3個(gè)模塊：定期維修計(jì)劃--錄入定期維修計(jì)劃;維修記錄--記錄維修記錄;維修臺(tái)賬--統(tǒng)計(jì)分析維修記錄，如圖3-1所示。

定期維修計(jì)劃可以完成定期的設(shè)備維修，其主要功能為：新增--新增計(jì)劃信息;搜索--查找出相對(duì)應(yīng)的數(shù)據(jù)信息;高級(jí)--根據(jù)各級(jí)查詢條件搜索出相對(duì)應(yīng)的數(shù)據(jù)信息;重置--清空所有查詢條件;導(dǎo)出--根據(jù)已經(jīng)查找到的數(shù)據(jù)、導(dǎo)出數(shù)據(jù)為excel;編輯--編輯計(jì)劃。如圖3-2所示。

維修記錄主要實(shí)現(xiàn)查詢?cè)O(shè)備維修記錄，可導(dǎo)出excel，可補(bǔ)后臺(tái)錄記錄;維修臺(tái)賬可完成統(tǒng)計(jì)分析維修記錄，可導(dǎo)出excel統(tǒng)計(jì)數(shù)據(jù)，“*”表示必填項(xiàng)。如圖3-3所示。

4 人員系統(tǒng)管理

人員系統(tǒng)管理主要由系統(tǒng)管理與人員管理兩部分組成，如圖4-1所示。

系統(tǒng)管理的主要功能模塊供使用為：角色菜單--配置后臺(tái)管理角色菜單;菜單配置--系統(tǒng)擁有哪些功能菜單（建議不過分操作缺省使用）;WEB服務(wù)--系統(tǒng)cookie共享域名（建議不過分操作缺省使用）;業(yè)務(wù)字典--下拉框數(shù)據(jù)（建議不過分操作缺省使用） ;序列號(hào)配置--產(chǎn)生流水號(hào)（建議不過分操作缺省使用）。

角色菜單可以完成配置后臺(tái)管理角色人員菜單，系統(tǒng)分為兩類角色。系統(tǒng)默認(rèn)：系統(tǒng)默認(rèn)角色指在組織人員功能里面添加人員開通賬號(hào)后登錄系統(tǒng)就默認(rèn)能看到的菜單;管理員：擁有系統(tǒng)所有的菜單;其他：如需添加角色，請(qǐng)?jiān)谌纸巧绿砑油ㄓ媒巧?、名字自定義，操作哪里可以分配菜單和人員，相應(yīng)人員登錄后角色擁有權(quán)限為默認(rèn)與本角色合集（默認(rèn)角色菜單與本角色的菜單合集）。菜單配置功能為：新增--新增角色信息;刪除--刪除角色信息;賬號(hào)--查看/增加/刪除角色對(duì)應(yīng)的人員賬號(hào)信息;菜單--配置該角色的權(quán)限菜單。

組織人員主要有五個(gè)功能模塊：部門設(shè)置、崗位設(shè)置、部門崗位（部門與崗位關(guān)聯(lián)）、用戶信息（部門下的人員）、用戶賬號(hào)。部門設(shè)置用于設(shè)置使用系統(tǒng)的組織結(jié)構(gòu)，例如高等院校的二級(jí)學(xué)院。功能為：新增--新增部門信息帶紅色*號(hào)為必填;編輯--雙擊可編輯修改信息;刪除--刪除誤加數(shù)據(jù);查詢--根據(jù)搜索條件檢索。

崗位設(shè)置完成維護(hù)崗位信息，功能為：新增--新增部門信息帶紅色*號(hào)為必填;編輯--雙擊可編輯修改信息;刪除--刪除誤加數(shù)據(jù);查詢--根據(jù)搜索條件檢索。部門崗位設(shè)置崗位下的人員（在下拉菜單用戶管理里面會(huì)有添加人員功能），用戶管理可實(shí)現(xiàn)開通賬號(hào)的功能，此處人員基礎(chǔ)信息保存后此頁(yè)面并沒有關(guān)聯(lián)，后續(xù)會(huì)出現(xiàn)開通賬號(hào)按鈕，如圖4-2所示。

5 結(jié)論

多媒體設(shè)備管理系統(tǒng)的建設(shè)解決了高校在設(shè)備管理中的薄弱環(huán)節(jié)，淘汰了手工設(shè)備記賬管理，節(jié)省了有限的人力資源的輸出;完善了設(shè)備的養(yǎng)護(hù)記錄，對(duì)使用周期長(zhǎng)的部件做了質(zhì)量及用度的平衡;杜絕了部分賬面資產(chǎn)與實(shí)際情況脫節(jié)的誤點(diǎn)。

系統(tǒng)的應(yīng)用是人與機(jī)器的交互過程，前端界面的結(jié)構(gòu)設(shè)計(jì)直接影響到使用者的工作效率及狀態(tài)。針對(duì)多媒體設(shè)備管理系統(tǒng)的應(yīng)用，以維護(hù)的側(cè)重點(diǎn)及使用人員的操作習(xí)慣為抓手，本文著重優(yōu)化設(shè)計(jì)了設(shè)備管理、采購(gòu)管理、維修管理、人員管理、系統(tǒng)管理等模塊。總體來言，前端設(shè)計(jì)做到了界面清晰條理，分類細(xì)致有序，操作簡(jiǎn)單快捷的效果。后續(xù)的系統(tǒng)開發(fā)，數(shù)據(jù)庫(kù)的連接與信息接入將與前端進(jìn)一步交互，完成多媒體設(shè)備管理系統(tǒng)的整體功能實(shí)現(xiàn)。

參考文獻(xiàn)

[1]基于HTML5的Web前端設(shè)計(jì)與開發(fā)[J].薛玉倩.內(nèi)蒙古科技與經(jīng)濟(jì).2019-09

[2]基于WEB前端開發(fā)技術(shù)的網(wǎng)站設(shè)計(jì)——以連鎖超市商品銷售管理系統(tǒng)為例[J].楊正午.山西科技.2019-05

[3]高?；贖tml5技術(shù)Web前端工程師人才培養(yǎng)模式的研究與探討[J].黎曉鳳.品牌研究.2019-01

[4]基于HTML5技術(shù)下移動(dòng)Web前端設(shè)計(jì)與開發(fā)的研究[J].于圣彬.中國(guó)新通信.2018-02

[5]高校學(xué)科競(jìng)賽管理系統(tǒng)的web前端設(shè)計(jì)與實(shí)現(xiàn)[J].洪杰.電腦知識(shí)與技術(shù).2017-10

[6]基于HTML5技術(shù)的移動(dòng)Web前端設(shè)計(jì)與開發(fā)分析[J].盛婷婷，電子制作.2016-10

[7]嵌入式系統(tǒng)前端開發(fā)工具的設(shè)計(jì)與實(shí)現(xiàn)[J]，陳定君，東北大學(xué)學(xué)報(bào).1998-08

作者簡(jiǎn)介

亓相濤（1985-），男，山東濟(jì)南人，碩士研究生，講師，研究方向：物聯(lián)網(wǎng)工程、嵌入式系統(tǒng)設(shè)計(jì)。

謝鵬（1999-），男，湖北黃岡人，本科，研究方向：物聯(lián)網(wǎng)工程。