基于Web的可視化考勤管理系統(tǒng)設(shè)計*

李 禹

(1.湖南大學電氣與信息工程學院，湖南 長沙 410082；2.湖南安全技術(shù)職業(yè)學院，湖南 長沙 410151)

基于Web的可視化考勤管理系統(tǒng)設(shè)計*

李 禹1，2

(1.湖南大學電氣與信息工程學院，湖南 長沙 410082；2.湖南安全技術(shù)職業(yè)學院，湖南 長沙 410151)

給出了考勤數(shù)據(jù)可視化的架構(gòu)設(shè)計模式，并通過修改ExtJS框架中的日歷圖表控件將考勤信息在Web系統(tǒng)中渲染實時輸出.采用JavaScript腳本與ExtJS富客戶端技術(shù)結(jié)合，解決了安全培訓管理平臺學員安全培訓考勤Web可視化的問題.

ExtJS；考勤數(shù)據(jù)可視化；培訓網(wǎng)絡(luò)管理平臺；Ajax技術(shù)

現(xiàn)有安全培訓管理方式中，信息的采集、查詢、分析等手段比較原始，傳統(tǒng)方式的考勤管理，不僅效率低、勞動成本高，而且在查詢和長期保存方面均存在弊端.安全行業(yè)負責人培訓中，由于行業(yè)負責人事情多，存在考勤不嚴的情況.筆者結(jié)合目前現(xiàn)有的網(wǎng)上報名系統(tǒng)，以及湖南安全技術(shù)職業(yè)學院安全培訓行業(yè)的傳統(tǒng)流程，融合現(xiàn)有新技術(shù)，開發(fā)了一套科學、高效、針對性強的安全培訓管理系統(tǒng).[1]

ExtJS是目前比較流行的Ajax框架，它與后臺技術(shù)無關(guān)，是一個富客戶端可視化框架，提供了多種圖表、圖形的顯示方式，界面美觀，數(shù)據(jù)顯示直觀，無需下載客戶端插件，能由IE、火狐、谷歌等絕大多數(shù)瀏覽器直接顯示[1].ExtJS圖形提供了可視化數(shù)據(jù)顯示功能，使得Web應(yīng)用程序開發(fā)更有效地支持對數(shù)據(jù)的統(tǒng)計和分析，及時動態(tài)更新和管理數(shù)據(jù).圖形顯示開發(fā)能實現(xiàn)諸如列圖表、餅狀圖、曲線圖等高質(zhì)量的圖表功能，選擇不同的圖表實現(xiàn)不同的顯示需求[2].

筆者對基于射頻識別設(shè)備采集的考勤數(shù)據(jù)可視化顯示方法進行了研究，采用ExtJS圖表控制及相關(guān)技術(shù)設(shè)計，實現(xiàn)了安全培訓管理平臺考勤信息的圖形顯示.

1 可視化考勤管理系統(tǒng)架構(gòu)設(shè)計

ExtJS是Ajax框架下的富客戶端JavaScript函數(shù)庫，早期主要用于創(chuàng)建用戶界面.基于HTML/CSS設(shè)計中，ExtJS采用了Web設(shè)計的三層架構(gòu)模式[3]，使用相對獨立，后臺開發(fā)語言無關(guān).具體架構(gòu)如圖1所示.控制界面UI為用戶界面表現(xiàn)層，Store為數(shù)據(jù)訪問層，業(yè)務(wù)邏輯層完成對數(shù)據(jù)業(yè)務(wù)邏輯的處理.瀏覽器通過Ajax技術(shù)將Json格式的數(shù)據(jù)返回表現(xiàn)層并繪圖輸出，ExtJS數(shù)據(jù)訪問方式完全按照三層架構(gòu)模式實現(xiàn)，表現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)訪問層相對獨立.[4]

圖1 系統(tǒng)可視化架構(gòu)

2 考勤可視化技術(shù)圖表實現(xiàn)方法

本系統(tǒng)采用HTML/CSS與ExtJS、Ajax技術(shù)相結(jié)合方法，實現(xiàn)具有交互性的Web應(yīng)用程序.ExtJS是開源的JavaScript用戶界面函數(shù)庫，可在官網(wǎng)直接下載源文件包，其核心文件是ext￣all.css，ext￣base.js和ext￣all.js.ExtJS推出了基于組件類的UI體系結(jié)構(gòu)，通過調(diào)用UI組件代碼，采用一整套組件和控件的設(shè)計與面向?qū)ο蟮姆椒?例如，ExtJS的強大表格控件，不同類型的面板控制，樹目錄，日期時間控件，工具欄控件，圖表控件，桌面控件以及工作流界面控件等.[5]

2.1ExtJS類之間的繼承關(guān)系

ExtJS類之間的繼承關(guān)系如圖2所示，其中Ext是ExtJS的命名空間，是該框架的全局對象，且其所有的類前都有Ext前綴.

圖2 ExtJs類關(guān)系

2.2考勤模塊可視化流程

教師及以上用戶登錄考勤管理模塊將身份證識別器連接至電腦，學員開始上課之前，教師點擊開始考勤，學員可以通過此設(shè)備自行刷卡.其具體流程設(shè)計見圖3.

考勤管理模塊信息活動過程設(shè)計主要是系統(tǒng)首先確認用戶權(quán)限，然后根據(jù)用戶的指令開關(guān)考勤功能.其信息交互設(shè)計如圖4所示.

圖3 考勤管理流程

圖4 考勤管理信息活動

2.3引用文件包

在使用ExtJS 框架之前，首先下載ExtJS 源程序包至Web應(yīng)用程序工程中，這樣才可使用.ExtJS Calendar 首先引用樣式文件(calendar.css和examples.css)，并保存至resources文件夾中，然后添加include￣ext.js和options￣toolbar.js庫函數(shù)并進行調(diào)用.

2.4繪圖核心代碼

繪圖核心代碼如下：

Ext.Loader.setConfig({

enabled:true,

paths:{

'Ext.calendar':'src'

}

});

Ext.require([

//'Ext.diag.layout.Context',

//'Ext.diag.layout.ContextItem',

'Ext.calendar.App'

]);

Ext.onReady(function(){

// launch the app:

Ext.create('Ext.calendar.App');

// update the header logo date:

document.getElementById('logo￣body').innerHTML=new Date().getDate();

});

3 考勤數(shù)據(jù)可視化與后臺數(shù)據(jù)交互策略

可視化技術(shù)采用ExtJS函數(shù)庫實現(xiàn)，數(shù)據(jù)的交互采用Ajax技術(shù)，將后臺數(shù)據(jù)以Json格式返回表示層，通過ExtJS組件實現(xiàn)可視化.Web應(yīng)用程序因數(shù)據(jù)交互技術(shù)實現(xiàn)了無刷新的頁面增強了用戶和系統(tǒng)的交互性，改善了系統(tǒng)的刷新方式，讓更多有趣的前端功能成為可能[4].數(shù)據(jù)交互技術(shù)Ajax是Web應(yīng)用程序數(shù)據(jù)交換的主要方式，采用Ajax使得前端數(shù)據(jù)的更新采取無刷新的頁面技術(shù)，由于瀏覽器不同，作為跨瀏覽器的Ajax框架，重點在于使用ExtJS對Ajax進行封裝.

系統(tǒng)采用跨域獲取數(shù)據(jù)的方法實現(xiàn)考勤數(shù)據(jù)的可視化.創(chuàng)建JavaScript腳本完成數(shù)據(jù)的加載，將需要跨域并獲取數(shù)據(jù)的方法封裝使用.通過服務(wù)器端代碼直接執(zhí)行回調(diào)函數(shù)，實現(xiàn)跨域獲取數(shù)據(jù).需要使用到ScriptTagProxy，具體代碼見ExtJS官方源碼.射頻識別器數(shù)據(jù)交互如圖5所示.由圖5可知，系統(tǒng)通過射頻識別設(shè)備實現(xiàn)考勤管理模塊功能，即可將身份證信息讀入數(shù)據(jù)庫保存.[6]用戶訪問考勤數(shù)據(jù)時，瀏覽器則可通過Ajax技術(shù)實現(xiàn)無刷新頁面數(shù)據(jù)的可視化顯示.

圖5 射頻識別器數(shù)據(jù)交互過程

4 考勤可視化設(shè)計測試結(jié)果及分析

4.1考勤可視化設(shè)計測試結(jié)果

為實現(xiàn)教師及以上用戶課前考勤、查詢學員考勤情況等功能，教師在每次上課時輸入用戶名和密碼，登錄到本安全管理平臺，連接好身份證射頻識別器(2個)，選擇所在培訓專業(yè)和班級，點擊學員考勤按鈕，即可進行考勤.學員逐一進行身份證刷卡識別，簽到完畢，教師無權(quán)修改.所有缺課的學員、遲到、病假、事假以及沒有提供身份證的學員將根據(jù)其具體情況進行考勤.

(1)使用設(shè)備.考勤管理設(shè)備示意圖如圖6所示.考慮到課前刷卡費時，本設(shè)計采用雙射頻識別設(shè)備設(shè)計方法，通過USB接口可以將2個身份證讀卡識別解碼器連接至系統(tǒng)，并通過緩存技術(shù)實現(xiàn)同時識別.

圖6 設(shè)備使用示意圖

(2)考勤可視化測試結(jié)果.平臺調(diào)試主要針對系統(tǒng)運行穩(wěn)定性、模塊功能完成情況、系統(tǒng)結(jié)構(gòu)穩(wěn)定性等方面進行測試，最終測試結(jié)果基本達到設(shè)計要求.具體運行界面如圖7所示.

圖7 學員考勤信息查詢界面

4.2測試結(jié)果分析

Extjs兼容多種瀏覽器(IE6,Mozilla Firefox 1.5,蘋果Safari 3和更高版本,以及谷歌的Chrome等)，通過運行系統(tǒng)，考勤可視化界面美觀，運行狀態(tài)良好.數(shù)據(jù)通過Ajax交互技術(shù)能夠很好地實現(xiàn)考勤信息的無刷新頁面顯示.從測試結(jié)果可知：(1)本文開發(fā)的可視化的考勤數(shù)據(jù)顯示方法對后臺程序和瀏覽器來說獨立性強，使得系統(tǒng)具備可重用性和可維護性；(2)實現(xiàn)了客戶端數(shù)據(jù)緩存的機制.采用ExtJS的異步刷新函數(shù)可以實現(xiàn)多線程發(fā)送考勤數(shù)據(jù)請求,并充分利用客戶的閑置資源,提高了數(shù)據(jù)的響應(yīng)時間，減少服務(wù)器的負擔，界面的操作友好度；(3)模塊設(shè)計充分利用Ajax異步數(shù)據(jù)交互技術(shù)，提高了Web頁面和用戶的交互特性.

5 結(jié)語

本系統(tǒng)采用ASP.NET 開發(fā)了安全培訓管理平臺，前端設(shè)計采用ExtJS界面及圖表技術(shù)，兼容性和可擴展性好.采用MSSQL數(shù)據(jù)庫技術(shù)開發(fā)完成并通過嚴格測試，系統(tǒng)集成了網(wǎng)上報名、學籍管理、考勤管理等功能，并將考勤信息進行可視化處理，通過可視化圖表技術(shù)展示原本枯燥的數(shù)據(jù).

[1] 仝 虎.高校身份證信息采集系統(tǒng)設(shè)計與實現(xiàn)[J].軟件導刊，2010，9(6):85-87.

[2] 劉 鵬，郭建文，付衛(wèi)平.基于Web的科學數(shù)據(jù)可視化在數(shù)據(jù)共享中的應(yīng)用[J].遙感技術(shù)與應(yīng)用，2011，26(6):836-844.

[3] 童 吉, 徐慧英,莊新鵬.基于軟構(gòu)件的高校教務(wù)管理系統(tǒng)設(shè)計與實現(xiàn)[J].計算機技術(shù)與發(fā)展,2007，17(5): 41-44.

[4] 趙艷啟,嚴明良.高校師生信息采集系統(tǒng)的設(shè)計與開發(fā)[J].南京工業(yè)職業(yè)技術(shù)學院學報，2009，9(4):59-60.

[5] 黃天強.基于Web短消息服務(wù)的成績管理系統(tǒng)設(shè)計[J].吉首大學學報：自然科學版，2008，29(2):45-47.

[6] 陳道鑫，宋紹云，袁中旺，等.ExtJS框架在Web軟件開發(fā)中的應(yīng)用[J].電腦知識與技術(shù)，2011，7(9):2 044-2 047.

(責任編輯 陳炳權(quán))

TheDesignofVisualAttendanceManagementSystemBasedonWeb

LI Yu1，2

(1.School of Electronics and Communication Engineering,Hunan University,Changsha 410082，China;2.Hunan Vocational Institute of Safety Technology,Changsha 410151,China)

The architecture design pattern of attendance data visualization is be given in this paper,and the attendance information in Web system was real￣time rendering outputted by modifying the calendar chart controls of ExtJS framework.By using the technique of combining JavaScript and ExtJS,the Web visualization problems of students training attendance in Security Training Management Platform have been solved.

ExtJS;visualization of attendance data;Network Training management platform;Ajax Technology

1007-2985(2014)03-0049-05

2014-02-10

李 禹(1978-)，男，湖南益陽人，湖南大學電氣與信息工程學院碩士生，湖南安全技術(shù)職業(yè)學院教師，主要從事安全培訓、信息可視化技術(shù)研究.

TP311.52

A

10.3969/j.issn.1007-2985.2014.03.011