可视化Web控件开发及在设备管理系统中的应用

张立成， 张 鸽， 程 鑫

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

0 引言

目前高校科研设备的种类、数量越来越多，传统的人工纸质存档管理模式存在查询困难、效率低、维护工作量大、存储信息量少、易出错等不足。随着信息技术的迅速发展，各种各样的管理系统实现了设备的信息化管理，提高了办公效率，有的采用C/S模式[1-2]，有的采用B/S模式[3-8]。但这些管理系统存档文本信息，没有关联设备的相关照片，设备借用者信息也仅仅手动录入其姓名，不能实现对设备入库、借还的可视化管理，且工作量大、错误率高。图像数据信息丰富，可以使枯燥的管理工作形象有趣，降低出错率。论文开发了适合B/S结构的图像在线采集处理控件和身份证扫描控件。图像采集处理控件用于采集设备入库单、设备照片、借用人照片等二维信息并作优化处理，身份证扫描控件用于快速获取借用人身份信息，不仅实现了设备的信息化管理，还实现了可视化管理，改善了工作体验，提高了办事效率，降低了错误率。

1 系统总体结构

系统采用三层B/S结构，自顶向下分为表示层、业务逻辑层和数据访问层[9]。其结构如图1所示，表现层不处理业务逻辑和数据访问，专用于处理用户交互，系统采用Flex富客户端框架设计表现层，用于接收终端用户的响应和显示业务逻辑返回的数据，终端用户一般通过Web浏览器访问表现层;逻辑层采用jsp和Servlet，定义业务处理规则，不涉及用户体验和数据访问，通过Webservice、AMF等技术访问第三方动态链接库[10];数据访问层主要完成对数据库的操作。

图1 系统采用的三层结构

2 系统功能模块

根据实际情况，将系统分为三个子系统，功能模块如图2所示。包括设备管理、查询统计和用户管理3个模块。设备管理模块包括设备档案入库、设备档案维护、设备借用、设备归还及设备类别维护5个子模块;查询统计包括基本设备信息查询、借还记录查询、年度新增设备统计表、各系部设备借用统计表4个子模块，用户管理分为用户登录、增加用户、删除用户、权限分配4个子模块。

图2 系统功能模块图

(1)设备管理。设备入库时需要录入设备名称、规格型号、合同编号、经费来源、所属类别、供货商名、设备照片、入库单照片、设备编号、出厂机号、设备状况等信息，这一工作可由管理员分配的专门用户完成，而且该用户在任何一台能连上管理系统服务器的电脑即可完成此项工作，该电脑需要连接一个USB摄像头，Flex控件会自动检测摄像头，加载驱动，进入预览状态。点击拍照按钮拍摄照片，照片在存入数据库前，可以借助控件的亮度调节、对比度调节、缩放等功能对刚拍摄的图片进行图像调整。设备借用可由管理员分配专门用户完成，操作简单快捷，只需将借用者的身份证放在读卡器上，Web控件便能自动感应身份证，获得借用者姓名、照片等信息，然后选择需要借用的设备和数量即可完成借用登记，此时被借用的设备的状态自动变为“已借出”，同时该项操作的负责人即为当前分配的用户。设备归还时，设备状况、归还者姓名、照片等信息更新至系统数据库。

(2)查询统计。设备信息查询可以按照合同号、经费来源、设备种类、借出状态等多项标准单一或组合查询，用于快速定位设备信息，信息不仅包括设备的基本信息，还包括设备的图片，如果设备被借用，还可以查看设备借用者的姓名、照片、借用日期等。借还记录查询可以根据日期、设备种类、设备编号、设备名称等信息定位借用记录，快速完成归还业务。设备统计功能用于发现一些规律数据及年度统计，如某一种设备借出与库存的比例、各个设备的借用频数统计等。报表打印用于打印查询、统计结果。

(3)用户管理。用户增加和删除及权限分配由超级管理员完成，用于系统业务的分工管理。

3 关键技术及实现

3.1 基于Flex的图像在线采集与处理控件开发

(1)界面设计。首先创建一个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对象获取、模式设置、画质设置、视频流预览等操作。主要代码如下:②功能按钮响应事件。功能按钮包括“拍照”、“亮度调整”、“对比度调整”、“缩放”等，其中“拍照”实现思路为创建位图对象，然后用实际视频流的当前帧填充位图，创建UICompenent对象并将位图对象作为孩子节点加入，最后将该UICompenent对象作为孩子节点添加到界面控件的画布上。伪码实现如下:

图像的“亮度调整”、“对比度调整”、“缩放”等功能的实现思路为:获取位图每个像素的RGB分量，然后通过相应的图像处理算法分别实现对应功能。像素RGB分量的获取伪码如下:

3.2 基于ActiveX的身份证读取控件开发

身份证读取采用了第三方的DLL，出于安全考虑，Flex不能直接调用DLL，需要通过Remoting/AMF访问DLL，然后返回结果给客户端[12-13]，然而身份证读取控件需要操作本机底层硬件端口，因此该模块采用Activex控件封装技术对DLL功能函数进行打包，并添加数字签名[14-16]。

(1)接口设计。用户端在第一次使用控件时，需要在线安装注册。最终开发的身份证信息读取控件的GUID 为:E0796B51-5572-4404-97A1-354309405606，根据系统的整体功能需求，设计的接口如表1所示。

Web客户端通过javascript调用表1中的接口，这些接口的内部调用了读卡器的读写api，这个操作对用户是透明的。Web客户端只需要包含以下代码即可使用控件提供的所有功能。

表1 身份证读取插件接口列表

(2)实现过程。使用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实现端口扫描，身份证感应，信息提取等功能。

4 结语

Flex控件技术和Activex控件技术的应用使得设备管理系统与传统设备管理系统有很大差别，它克服了传统设备管理系统只能单调录入一维文本信息，管理人员在日后的维护中很难将一个具体设备与实际图片及借用人情况实现关联等不足，实现了设备信息管理的可视化，开发的控件已经在多个B/S设备信息管理系统中得到成功应用，系统运行稳定可靠，进一步改善了操作体验，提高了工作效率。

[1] 沈建华，张 碧.实验仪器设备管理信息系统的设计与实现[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] 刘淑云，李继才.高校仪器设备管理信息系统的设计与实现[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结构的仪器设备管理系统的设计与实现[D].长春:吉林大学，2012.

[4] 王 聪.基于B/S架构的教学设备管理系统的实现[J].电脑开发与应用，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的高校硬件设备管理系统的研究与实现[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] 刁叔钧，李 漪.高校实验仪器设备网络化管理的实践与探讨[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] 黄久龙.实验室设备网络化管理的对策研究[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的高校设备管理系统设计与实现[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三层结构网上书店系统的设计[J].现代电子技术，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的网络科技资源呈现系统的研究与实现[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技术的电子商务软件开发平台[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应用设计与实现[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的多路视频播放器及其在路产管理系统中的应用[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数据控件的网络虚拟实验室构建[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控件的视频跟踪系统软件设计[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.