可視化Web控件開發(fā)及在設(shè)備管理系統(tǒng)中的應(yīng)用

張立成， 張 鴿， 程 鑫

(1.長安大學(xué)信息工程學(xué)院，陜西 西安 710064;2.西安中交土木科技有限公司，陜西 西安 710075)

0 引言

目前高校科研設(shè)備的種類、數(shù)量越來越多，傳統(tǒng)的人工紙質(zhì)存檔管理模式存在查詢困難、效率低、維護工作量大、存儲信息量少、易出錯等不足。隨著信息技術(shù)的迅速發(fā)展，各種各樣的管理系統(tǒng)實現(xiàn)了設(shè)備的信息化管理，提高了辦公效率，有的采用C/S模式[1-2]，有的采用B/S模式[3-8]。但這些管理系統(tǒng)存檔文本信息，沒有關(guān)聯(lián)設(shè)備的相關(guān)照片，設(shè)備借用者信息也僅僅手動錄入其姓名，不能實現(xiàn)對設(shè)備入庫、借還的可視化管理，且工作量大、錯誤率高。圖像數(shù)據(jù)信息豐富，可以使枯燥的管理工作形象有趣，降低出錯率。論文開發(fā)了適合B/S結(jié)構(gòu)的圖像在線采集處理控件和身份證掃描控件。圖像采集處理控件用于采集設(shè)備入庫單、設(shè)備照片、借用人照片等二維信息并作優(yōu)化處理，身份證掃描控件用于快速獲取借用人身份信息，不僅實現(xiàn)了設(shè)備的信息化管理，還實現(xiàn)了可視化管理，改善了工作體驗，提高了辦事效率，降低了錯誤率。

1 系統(tǒng)總體結(jié)構(gòu)

系統(tǒng)采用三層B/S結(jié)構(gòu)，自頂向下分為表示層、業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層[9]。其結(jié)構(gòu)如圖1所示，表現(xiàn)層不處理業(yè)務(wù)邏輯和數(shù)據(jù)訪問，專用于處理用戶交互，系統(tǒng)采用Flex富客戶端框架設(shè)計表現(xiàn)層，用于接收終端用戶的響應(yīng)和顯示業(yè)務(wù)邏輯返回的數(shù)據(jù)，終端用戶一般通過Web瀏覽器訪問表現(xiàn)層;邏輯層采用jsp和Servlet，定義業(yè)務(wù)處理規(guī)則，不涉及用戶體驗和數(shù)據(jù)訪問，通過Webservice、AMF等技術(shù)訪問第三方動態(tài)鏈接庫[10];數(shù)據(jù)訪問層主要完成對數(shù)據(jù)庫的操作。

圖1 系統(tǒng)采用的三層結(jié)構(gòu)

2 系統(tǒng)功能模塊

根據(jù)實際情況，將系統(tǒng)分為三個子系統(tǒng)，功能模塊如圖2所示。包括設(shè)備管理、查詢統(tǒng)計和用戶管理3個模塊。設(shè)備管理模塊包括設(shè)備檔案入庫、設(shè)備檔案維護、設(shè)備借用、設(shè)備歸還及設(shè)備類別維護5個子模塊;查詢統(tǒng)計包括基本設(shè)備信息查詢、借還記錄查詢、年度新增設(shè)備統(tǒng)計表、各系部設(shè)備借用統(tǒng)計表4個子模塊，用戶管理分為用戶登錄、增加用戶、刪除用戶、權(quán)限分配4個子模塊。

圖2 系統(tǒng)功能模塊圖

(1)設(shè)備管理。設(shè)備入庫時需要錄入設(shè)備名稱、規(guī)格型號、合同編號、經(jīng)費來源、所屬類別、供貨商名、設(shè)備照片、入庫單照片、設(shè)備編號、出廠機號、設(shè)備狀況等信息，這一工作可由管理員分配的專門用戶完成，而且該用戶在任何一臺能連上管理系統(tǒng)服務(wù)器的電腦即可完成此項工作，該電腦需要連接一個USB攝像頭，F(xiàn)lex控件會自動檢測攝像頭，加載驅(qū)動，進入預(yù)覽狀態(tài)。點擊拍照按鈕拍攝照片，照片在存入數(shù)據(jù)庫前，可以借助控件的亮度調(diào)節(jié)、對比度調(diào)節(jié)、縮放等功能對剛拍攝的圖片進行圖像調(diào)整。設(shè)備借用可由管理員分配專門用戶完成，操作簡單快捷，只需將借用者的身份證放在讀卡器上，Web控件便能自動感應(yīng)身份證，獲得借用者姓名、照片等信息，然后選擇需要借用的設(shè)備和數(shù)量即可完成借用登記，此時被借用的設(shè)備的狀態(tài)自動變?yōu)椤耙呀璩觥保瑫r該項操作的負責(zé)人即為當(dāng)前分配的用戶。設(shè)備歸還時，設(shè)備狀況、歸還者姓名、照片等信息更新至系統(tǒng)數(shù)據(jù)庫。

(2)查詢統(tǒng)計。設(shè)備信息查詢可以按照合同號、經(jīng)費來源、設(shè)備種類、借出狀態(tài)等多項標準單一或組合查詢，用于快速定位設(shè)備信息，信息不僅包括設(shè)備的基本信息，還包括設(shè)備的圖片，如果設(shè)備被借用，還可以查看設(shè)備借用者的姓名、照片、借用日期等。借還記錄查詢可以根據(jù)日期、設(shè)備種類、設(shè)備編號、設(shè)備名稱等信息定位借用記錄，快速完成歸還業(yè)務(wù)。設(shè)備統(tǒng)計功能用于發(fā)現(xiàn)一些規(guī)律數(shù)據(jù)及年度統(tǒng)計，如某一種設(shè)備借出與庫存的比例、各個設(shè)備的借用頻數(shù)統(tǒng)計等。報表打印用于打印查詢、統(tǒng)計結(jié)果。

(3)用戶管理。用戶增加和刪除及權(quán)限分配由超級管理員完成，用于系統(tǒng)業(yè)務(wù)的分工管理。

3 關(guān)鍵技術(shù)及實現(xiàn)

3.1 基于Flex的圖像在線采集與處理控件開發(fā)

(1)界面設(shè)計。首先創(chuàng)建一個Flex文件，擴展名為mxml。任何一個Flex程序都是以XML聲明開始的，在首行插入 XML聲明:＜?xml version=”1.0”encoding=”utf-8”?＞，然后在XML聲明后，添加帶命名空間的Application標簽，包含一個MX類庫命名空間的聲明，定義命名空間為:

最后添加視頻顯示框和相應(yīng)功能按鈕，視頻顯示框采用mx庫的 VideoDisplay控件[11]，功能按鈕以“拍照”為例，主要設(shè)計代碼如下:

(2)事件處理。事件處理程序位于Script標簽中的ActionScript代碼中，被包含在 ＜![CDATA[]]＞里面，這個標志里面的內(nèi)容不被XML解析器解析。這個是標準的XML用法，在這里是為了保護ActionScript的一些可能會被XML解析器誤處理的一些字符。主要的事件處理如下:①初始化加載事件。加載事件為creationComplet，該事件在控件加載完成之后響應(yīng)，完成camera對象獲取、模式設(shè)置、畫質(zhì)設(shè)置、視頻流預(yù)覽等操作。主要代碼如下:②功能按鈕響應(yīng)事件。功能按鈕包括“拍照”、“亮度調(diào)整”、“對比度調(diào)整”、“縮放”等，其中“拍照”實現(xiàn)思路為創(chuàng)建位圖對象，然后用實際視頻流的當(dāng)前幀填充位圖，創(chuàng)建UICompenent對象并將位圖對象作為孩子節(jié)點加入，最后將該UICompenent對象作為孩子節(jié)點添加到界面控件的畫布上。偽碼實現(xiàn)如下:

圖像的“亮度調(diào)整”、“對比度調(diào)整”、“縮放”等功能的實現(xiàn)思路為:獲取位圖每個像素的RGB分量，然后通過相應(yīng)的圖像處理算法分別實現(xiàn)對應(yīng)功能。像素RGB分量的獲取偽碼如下:

3.2 基于ActiveX的身份證讀取控件開發(fā)

身份證讀取采用了第三方的DLL，出于安全考慮，F(xiàn)lex不能直接調(diào)用DLL，需要通過Remoting/AMF訪問DLL，然后返回結(jié)果給客戶端[12-13]，然而身份證讀取控件需要操作本機底層硬件端口，因此該模塊采用Activex控件封裝技術(shù)對DLL功能函數(shù)進行打包，并添加數(shù)字簽名[14-16]。

(1)接口設(shè)計。用戶端在第一次使用控件時，需要在線安裝注冊。最終開發(fā)的身份證信息讀取控件的GUID 為:E0796B51-5572-4404-97A1-354309405606，根據(jù)系統(tǒng)的整體功能需求，設(shè)計的接口如表1所示。

Web客戶端通過javascript調(diào)用表1中的接口，這些接口的內(nèi)部調(diào)用了讀卡器的讀寫api，這個操作對用戶是透明的。Web客戶端只需要包含以下代碼即可使用控件提供的所有功能。

表1 身份證讀取插件接口列表

(2)實現(xiàn)過程。使用Vs.net 2008新建一個MFC Activex Control項目，在 Control setting向?qū)е羞x擇static，這樣可以利用MFC強大的界面庫，設(shè)計豐富的人機界面。同樣借助Vs.Net IDE工具，添加表1所示的 所 有 接 口。 導(dǎo) 入 sdtapi.dll，SynIDCardAPI.dll，SynIDCardAPI.lib，引用 SynPublic.h 文件，該文件聲明了SynIDCardAPI庫的所有api，部分代碼如下:

表1中的接口通過調(diào)用SynIDCardAPI庫的相應(yīng)api實現(xiàn)端口掃描，身份證感應(yīng)，信息提取等功能。

4 結(jié)語

Flex控件技術(shù)和Activex控件技術(shù)的應(yīng)用使得設(shè)備管理系統(tǒng)與傳統(tǒng)設(shè)備管理系統(tǒng)有很大差別，它克服了傳統(tǒng)設(shè)備管理系統(tǒng)只能單調(diào)錄入一維文本信息，管理人員在日后的維護中很難將一個具體設(shè)備與實際圖片及借用人情況實現(xiàn)關(guān)聯(lián)等不足，實現(xiàn)了設(shè)備信息管理的可視化，開發(fā)的控件已經(jīng)在多個B/S設(shè)備信息管理系統(tǒng)中得到成功應(yīng)用，系統(tǒng)運行穩(wěn)定可靠，進一步改善了操作體驗，提高了工作效率。

[1] 沈建華，張 碧.實驗儀器設(shè)備管理信息系統(tǒng)的設(shè)計與實現(xiàn)[J].實驗室研究與探索，2012，31(4):449-451.SHEN Jian-hua，ZHANG Bi.Design and Implementation of an Information Management System for Lab Instruments and Equipment[J].Research and Exploration in Laboratory，2012，31(4):449-451.

[2] 劉淑云，李繼才.高校儀器設(shè)備管理信息系統(tǒng)的設(shè)計與實現(xiàn)[J].實驗室研究與探索，2011，30(1):164-167.LIU Shu-yun，LI Ji-cai.Design and Implementation of a University Instrument and Equipment Management Information System [J].Research and Exploration in Laboratory，2011，30(1):164-167.

[3] 冉 征.基于B/S結(jié)構(gòu)的儀器設(shè)備管理系統(tǒng)的設(shè)計與實現(xiàn)[D].長春:吉林大學(xué)，2012.

[4] 王 聰.基于B/S架構(gòu)的教學(xué)設(shè)備管理系統(tǒng)的實現(xiàn)[J].電腦開發(fā)與應(yīng)用，2012，25(7):49-50，53.WANG Cong.Implementation ofthe B/S Architecture-Based Equipment Management System [J].Computer Development＆Application，2012，25(7):49-50，53.

[5] 李 響.基于B/S的高校硬件設(shè)備管理系統(tǒng)的研究與實現(xiàn)[J].信息安全與技術(shù)，2012(3):43-45.LiXiang.Study and Realization of Laboratory Equipment Management System Based on B/S structure[J].Information Technology，2012(3):43-45.

[6] 刁叔鈞，李 漪.高校實驗儀器設(shè)備網(wǎng)絡(luò)化管理的實踐與探討[J].實驗室研究與探索，2011，30(8):390-392.DIAO Shu-jum，LI Yi.Networking Management Practice on College ExperimentalEquipment[J]. Research and Exploration in Laboratory，2011，30(8):390-392.

[7] 黃久龍.實驗室設(shè)備網(wǎng)絡(luò)化管理的對策研究[J].實驗技術(shù)與管理，2010，27(8):214-216.Huang Jiulong.Study on countermeasures of network-based management of laboratory equipment[J].Experimental Technology and Management，2010，27(8):214-216.

[8] 侯艷君，馬子領(lǐng).基于Ajax的高校設(shè)備管理系統(tǒng)設(shè)計與實現(xiàn)[J].實驗室研究與探索，2011，30(12):183-186.HOU Yan-jun， MA Zi-ling. Design and Implementation of Equipment Management System in Colleges and University Based on Ajax[J].Research and Exploration in Laboratory，2011，30(12):183-186.

[9] 肖建芳.基于B/S三層結(jié)構(gòu)網(wǎng)上書店系統(tǒng)的設(shè)計[J].現(xiàn)代電子技術(shù)，2012，35(22):39-41.XIAO Jian-fang.Design of online-bookstore system with B/S threelayer structure[J].Modern Electronics Technique，2012，35(22):39-41.

[10] 李 杰，周明全.基于RIA的網(wǎng)絡(luò)科技資源呈現(xiàn)系統(tǒng)的研究與實現(xiàn)[J].計算機應(yīng)用與軟件，2009，26(4):69-71，84.Li Jie，Zhou Mingquan.Studying and Implementing the Presentation System for Web Scientific and Technological Resources Based on RIA[J].Computer Applications and Software，2009，26(4):69-71，84.

[11] 饒 軍，嚴夢蕓.基于Flex 4.0技術(shù)的電子商務(wù)軟件開發(fā)平臺[J].計算機應(yīng)用與軟件，2012，29(9):195-198.Rao Jun，Yan Mengyun.ADevelopment Platform of E-Commerce Software Using FLEX4.0 Technology[J].Computer Applications and Software，2012，29(9):195-198.

[12] 宋朝暉，劉曉菲.淺談基于Flex技術(shù)的RIA設(shè)計[J].電腦知識與技術(shù)，2010，6(1):124-125，129.SONG Zhao-hui， LIU Xiao-fei. Design ofFlex-based RIA Technologies[J].Computer Knowledge and Technology，2010，6(1):124-125，129.

[13] 劉坤林，李 揚.基于Flex的RIA應(yīng)用設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2010，6(18):5089-5091.LIU Kun-lin， LIYang. Design and Implementation ofRIA application Based on Flex[J]. ComputerKnowledge and Technology，2010，6(18):5089-5091.

[14] 段克曉，趙祥模.基于Web的多路視頻播放器及其在路產(chǎn)管理系統(tǒng)中的應(yīng)用[J].交通信息與安全，2010，28(4):133-136.DUAN Kexiao，Zhao Xiangmo，etc.A Web-based Multi-video Player and Its Application in Road Asset Management System[J].Journal of Transport Information and Safety，2010，28(4):133-136.

[15] 朱韶平.基于Web ActiveX數(shù)據(jù)控件的網(wǎng)絡(luò)虛擬實驗室構(gòu)建[J].計算技術(shù)與自動化，2010，29(4):104-106.ZHU Shao-ping.Construction of a Virtual Lab Based on Web ActiveX Data Controls[J].Computing Technology and Automation.2010，29(4):104-106.

[16] 梁德強.基于ActiveX控件的視頻跟蹤系統(tǒng)軟件設(shè)計[J].微計算機信息，2010，26(7):201-202，207.LIANG De-qiang.Video Tracking System Software Designing Based on ActiveX [J].Microcomputer Information，2010，26(7):201-202，207.