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

張立成， 張 鴿， 程 鑫

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

0 引言

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

1 系統(tǒng)總體結構

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

圖1 系統(tǒng)采用的三層結構

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

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

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

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

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

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

3 關鍵技術及實現(xiàn)

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

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

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

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

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

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

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

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

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

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

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

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

4 結語

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

[1] 沈建華，張 碧.實驗儀器設備管理信息系統(tǒng)的設計與實現(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] 劉淑云，李繼才.高校儀器設備管理信息系統(tǒng)的設計與實現(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結構的儀器設備管理系統(tǒng)的設計與實現(xiàn)[D].長春:吉林大學，2012.

[4] 王 聰.基于B/S架構的教學設備管理系統(tǒng)的實現(xiàn)[J].電腦開發(fā)與應用，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的高校硬件設備管理系統(tǒng)的研究與實現(xiàn)[J].信息安全與技術，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] 刁叔鈞，李 漪.高校實驗儀器設備網(wǎng)絡化管理的實踐與探討[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] 黃久龍.實驗室設備網(wǎng)絡化管理的對策研究[J].實驗技術與管理，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] 侯艷君，馬子領.基于Ajax的高校設備管理系統(tǒng)設計與實現(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三層結構網(wǎng)上書店系統(tǒng)的設計[J].現(xiàn)代電子技術，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)絡科技資源呈現(xiàn)系統(tǒng)的研究與實現(xiàn)[J].計算機應用與軟件，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技術的電子商務軟件開發(fā)平臺[J].計算機應用與軟件，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技術的RIA設計[J].電腦知識與技術，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應用設計與實現(xiàn)[J].電腦知識與技術，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)中的應用[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)絡虛擬實驗室構建[J].計算技術與自動化，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)軟件設計[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.