面向多平臺的經濟簽證管理系統的設計與實現?

劉卓炫 劉賢梅 田 楓 趙 婭

面向多平臺的經濟簽證管理系統的設計與實現?

劉卓炫 劉賢梅 田 楓 趙 婭

（東北石油大學計算機與信息技術學院 大慶 163318）

針對經濟簽證的傳統文檔管理方式效率低、成本高的問題以及企業對經濟簽證的信息化管理需求，結合移動端和PC端同時使用的用戶需要，設計并開發了面向多平臺的經濟簽證管理系統。論文描述了系統設計情況和整體方案，總結了系統中聯想提示、基于模板的word導出和基于NPOI插件的Excel導出等關鍵技術。該系統有利于提高經濟簽證管理效率，降低管理成本和優化經濟簽證辦理流程，具有良好的應用價值和實際意義。

多平臺；經濟簽證；信息化管理

AbstractAimed at the problems that traditional paper document management for economic visa has the poor efficiency and high cost，and demands for the informatization management of economic visa from enterprises，the management system for economic visa on multiplatform is designed and developed with considering the user demand to support the simultaneous use of PC and mobile devices.The design and whole scheme of system is described and the key technologies such as prompting relevant content，exporting the word document based on template and exporting the excel workbook based on NPOIand so on are summed up in this paper.The system will help improve the efficiency of economic visa management，reduce management costs and optimize the process of econom?ic visa processing and it has good application value and practical significance.

Key Wordsmultiplatform，economic visa，informatization management

Class NumberTP311

1 引言

經濟簽證是把工程量清單外增加的必要工程量和合理開銷通過經濟簽證變為可進入工程決算計量的工程量的依據和過程。當現場工程量發生合理變更時，經濟簽證由施工單位申報，需寫明簽證原因、內容、具體工程量等，由業主組織施工單位、監理單位、建設單位參加現場核定。

隨著互聯網與信息技術的發展，經濟簽證的信息化管理方式憑借其管理效率高、管理成本低、信息安全性和可靠性強等特點逐漸取代了傳統文檔管理方式，成為經濟簽證管理的必然選擇。智能手機的出現進一步改善和優化了經濟簽證的信息化管理方式，因此基于對經濟簽證信息化管理的需要，設計并開發了面向PC機、手機和平板等多平臺的經濟簽證管理系統。

2 系統設計

經濟簽證管理系統采用瀏覽器（Browser）、WEB服務器、數據庫系統（DBMS）構成的BWD體系結構［1］，是一個多層的B/S模式［2］，如圖1所示。

圖1 B/S系統運行方式

整個系統邏輯架構分為四層：數據層、業務邏輯層、表現層和用戶層，系統邏輯架構如圖2所示。

圖2 系統邏輯架構圖

3 整體方案

面向多平臺的經濟簽證管理系統基于ASP.NET開發技術，采用Oracle10g數據庫，以C#作為主要開發語言。系統基于B/S模式構建，針對傳統PC端與移動端瀏覽器在顯示和功能上的區別，結合現場多使用移動端進行現場簽證填報和批量上傳照片以及多使用PC端進行簽證信息管理的工作特點，提供自適應樣式來支持PC端和移動端頁面的顯示，方便用戶在多平臺上對系統的使用。

4 關鍵技術

4.1 識別瀏覽器運行平臺

在識別瀏覽器運行平臺［3］方面，主要使用了HttpBrowserCapabilities類和HttpCapabilitiesBase類。利用HttpBrowserCapabilities類能夠使服務器通過在客戶端運行的瀏覽器獲取相關功能信息，包括瀏覽器類型、瀏覽器版本號以及客戶端是否是基于Win32的計算機等。而HttpCapabilitiesBase類則能夠提供對客戶端瀏覽器功能的詳細信息的訪問，其中可利用IsMobileDevice屬性獲取一個值來指示瀏覽器運行平臺是否為已識別移動設備。代碼如下。

System.Web.HttpBrowserCapabilities myBrowserCaps=Request.Browser；int isMobile=（（System.Web.Configuration.HttpCapabilitiesBase）myBrowserCaps）.IsMobileDevice？1：0；

4.2 批量圖片上傳

批量圖片上傳原理即循環執行單張圖片上傳，直至所選批量圖片全部上傳完成［4］。首先，利用HttpContext.Current.Request.Files選取上傳的批量圖片并賦值給HttpFileCollection類對象聲明的數組變量files，再循環取出數組中每個元素的值并利用HttpContext.Current.Server.MapPath（“../”）獲得對應的圖片路徑，最后利用SaveAs（存儲路徑）方法對圖片進行存儲。批量圖片存儲時為了提高交互性，利用進度條來顯示當前上傳進度，代碼如下。

var percent=（loaded/total*100）.toFixed（2）+‘%’；//計算圖片當前已上傳的進度。

eleProgress.children （‘.uploadify-progress-bar’）.css（‘width’，percent）；//更新進度條。

4.3 聯想提示

在錄入時根據用戶輸入內容給予相關提示輔助錄入已成為一種必然趨勢。AJAX技術［5］利用XMLHttpRequset為JavaScript腳本提供了在頁面之內與服務器通信的手段［6］，同時DOM和XML為腳本語言提供了交互和存儲的新渠道［7］，使得AJAX異步式交互技術成為實現聯想提示功能的最佳選擇。

在ASP.NET中，對AJAX相關技術進行了封裝［8］。本系統中實現聯想提示功能時主要使用了封裝的AjaxControlToolkit控件，具體實現方法如下。

1）添加腳本控制域

＜ajaxToolkit： ToolkitScriptManager＞... ＜/ajax?Toolkit：ToolkitScriptManager＞。

2）在腳本控制域中添加Textbox和AutoCom?pleteExtender控件［9］，并設置相關必要參數。Tar?getControl ID是必須指定的屬性，它指出Extender應該實時監聽哪個控件，把目標控件的ID賦給它即可；ServicePath指出要使用的Web服務的路徑，這里指的是asmx文件的路徑；ServiceMethod指定返回數據的函數，填入目標函數名即可；Minimum?PrefixLength是最少需要錄入的長度，當輸入的內容長度滿足此條件時，監聽才會調用指定服務獲取數據并彈出下拉列表；Completion Interval屬性是指用戶錄入后多長時間，程序去調用服務來獲取數據，單位是毫秒；EnableCaching屬性用來指定是否允許緩存，若設為true，表示允許緩存，在多數情況下，它可以減少數據訪問次數，但在數據源經常變化的情況下，它會向用戶提供過時的錯誤信息；CompletionSetCount屬性指定一次應該返回多少項；FirstRowSelected屬性表示是否默認選中第一項。

3）在完成AutoCompleteExtender控件的參數設置后，按照ServicePath屬性的對應路徑新建后綴為.asmx的WebService服務文件并將文件中的［Sys?tem.Web.Script.Services.ScriptService］語 句 解 除 注釋，從而允許使用ASP.NET AJAX從腳本中調用此Web服務。

4）在WebService服務文件中，撰寫控件Ser?viceMethod屬性指定的帶返回值的方法；方法中的prefixText是獲取到的用戶當前輸入的內容，count是CompletionSetCount屬性指定的返回的項的數目。

在完成屬性設置和方法撰寫后便可實現聯想提示功能，效果如圖3所示。

圖3 聯想提示效果

4.4 基于模板的W ord導出

常見的Word導出實現方法有兩種，一種是利用預先創建的。dot格式的Word模板來實現Word導出［10］，另一種是直接創建Word文件并進行相應讀寫和導出操作［11］。由于系統中的經濟簽證單具有規范格式，故本系統采用第一種方法，利用模板來實現Word文件導出功能，該功能實現效果如圖4所示。

圖4 經濟簽證Word導出樣式

基于模板的Word導出實現方法如下：

1）制作.dot格式的Word模板并在需填寫內容處添加標簽。

2）利用 Application.Documents.Open（ref文件名，ref oMissing，ref oMissing，ref oMissing，...）方法打開模板，并通過語句doc.Bookmarks［“標簽名”］.Range.Text=label.text.toString（）向模板中對應標簽處添加所賦內容。

3）利用Word.Tables tabs1=doc.Tables獲取模板中的全部table，并向選定的Table中插入一行：dt_Word.Rows.Add（ref oMissing）。

4）在選定的行中利用 dt_Word.Cell（row Idex，1）.Select（）插入并選擇第一個單元格，利用Align?men屬性設置第一個單元格中內容位置。

5）向被選定單元格插入圖片：App.Selection.InlineShapes.AddPicture（basePicdir+pics［i］，ref oMissing，ref oMissing，ref oMissing），并設置圖片寬度 App.ActiveDocument.InlineShapes［1+i］.Width 和高 度 App.ActiveDocument.InlineShapes［1+i］.Height。

6）用SaveAs（）方法將模板另存為.doc文件，并通 過 Response.AddHeader（"Content-Disposition"，"attachment； filename="+ Server.UrlEncode （fi.Name））添加頭信息通知瀏覽器激活文件下載對話框執行下載而非打開文件，另外將Response.Con?tentType屬性設置為application/octet-stream來指定服務器響應的HTTP內容類型為字節流。

7）利用 Response.W riteFile（fi.FullName）輸出寫好的word文件。

4.5 基于NPOI插件的Excel導出

常見的Excel導出實現方法為利用Excel模板實現導出［12］或直接創建Excel文件進行讀寫和導出操作，本系統采用第二種方法實現Excel導出。由于官方提供的Excel文檔存取方法效率低、兼容性差［13］且基本不支持服務器端的處理［14］，因此借助了第三方NPOI插件來方便Excel操作。

NPOI為POI項目的.NET版本，是一套用Java寫成的開源的用于讀寫Excel、Word等微軟OLE組件文檔［15］的第三方類庫，能夠幫助Webform的開發者在沒有安裝Office的情況下讀寫Excel格式的文件，目前支持到Excel2007。NPOI對Excel進行讀寫的主要方法是按照Excel組織文件的格式規則和方法通過文件流方式生成Excel文件，避免了通過OLE方式激活龐大的Excel進程，大量節省了服務器資源，提高了服務器生成Excel文件的性能［16］。

基于NPOI插件的Excel導出實現方法如下。

1）NPOI包括6個常用子類庫，分別為基礎輔助庫 NPOI.Util、OLE 格式讀寫庫 NPOI.POIFS、Mi?crosoft Drawing格式讀寫庫NPOI.DDF、Excel公式計算庫 NPOI.SS、OLE的 Summary Information和Document Summary Information屬性讀寫庫NPOI.HPSF和Excel BIFF格式讀寫庫NPOI.HSSF，開發人員可按需加載相應類庫。系統中主要使用了NPOI.Util、NPOI.SS、NPOI.POIFS和NPOI.HSSF。

2） 利 用 HSSFWorkbook hssfworkbook=new HSSFWorkbook（）創建工作薄。

3）創建名為sheetName的工作表：ISheet sheet=hssfworkbook.CreateSheet（"sheetName"）。

4）IRow row0=sheet.CreateRow（行序號）創建行，工作表中的行序號從0開始。

5）ICell cell0=row0.CreateCell（單元格序號）創建指定行上的單元格，單元格序號從0開始，并利用cell0.SetCellValue（“單元格內容”）對指定單元格賦值。

6）利用sheet.GetRow（行序號）.HeightInPoints設置指定行行高，利用sheet.SetColumnWidth（列序號，數值）設置指定列列寬。

7）創建單元格樣式：ICellStyle style=hssfwork?book.CreateCellStyle（），利用 Alignment和 Vertica?lAlignment屬性設置水平和豎直方向的對齊方式，利用style.SetFont（字體樣式）設置字體樣式，Bor?derTop、BorderBottom、BorderLeft和 BorderRight用于設置上下左右邊框、DataFormat設置數據格式。

8）IFont font_zd=hssfworkbook.CreateFont（）創建字體樣式，FontHeightInPoints屬性用于設置字號，FontName設置字體，Color設置顏色，Boldweight設置加粗。

9）設置合并a～b行的x～y列的單元格：sheet.AddMergedRegion（new CellRangeAddress（a，b，x，y））。

10）先實例化MemoryStream類來初始化數組用于封裝以無符號字節數組形式存儲的數據，再調用工作薄對象的W rite（MemoryStream類變量）方法將數據從緩存區寫入MemoryStream流對象。

11）添加Http頭信息通知瀏覽器激活文件下載對話框執行下載而非打開文件，設置顯示的文件名和使用UTF-8編碼方式：Response.AddHeader（“Content-Disposition”，string.Format（“attachment；filename=｛0｝.xls”，HttpUtility.UrlEncode（“工作薄名”，System.Text.Encoding.UTF8）））。

12）利用 Response.BinaryW rite（ms.ToArray（））將MemoryStream流對象中數據以二進制流形式輸出到瀏覽器。

以上NPOI操作均為常用基本操作，NPOI中還提供了凍結行列、函數計算以及繪圖等多種操作，可根據需要進行使用。

5 結語

面向多平臺的經濟簽證管理系統綜合利用ASP.NET技術、Web客戶端技術以及數據庫技術等滿足了用戶現場通過移動端填報簽證和批量上傳現場照片，同時利用PC端進行簽證管理與導出工作的需求，優化了傳統簽證辦理流程，提高了簽證管理效率，降低了簽證管理成本，實現了經濟簽證的自動化、信息化管理，具有良好的應用和推廣前景。

［1］張學軍，包亞萍.基于BWD模式的電子商務系統的研究與設計［J］.計算機應用研究，2003（5）：99-101.

ZHANG Xuejun，BAO Yaping.The Research and Design of Electronic Commerce Based on BWD Mode［J］.Appli?cation Research of Computers，2003（5）：99-101.

［2］蘭麗娜，文福安，王建坤.基于B/S多層結構的個性化網絡教學系統設計［J］.吉林大學學報（信息科學版），2007，25（3）：308-313.

LAN Lina，WEN Fuan，WANG Jiankun.Design of Individ?uality E-Learning System Based on B/S Multi-Layer Ar?chitecture［J］.Journal of Jilin University（Information Sci?ence Edition），2007，25（3）：308-313.

［3］李周輝，黃燕群，唐屹.瀏覽器識別研究［J］.信息網絡安全，2016（3）：34-39.

LI Zhouhui，HUANG Yanqun，TANG Yi.Research on Browsers Recognition［J］.Netinfo Security，2016（3）：34-39.

［4］顧梅華.基于C#.NET的文件傳輸關鍵技術研究與系統實現［D］.成都：電子科技大學，2013：47-49.

GU Meihua.File Transmission Key Technology Research and The System Realization Based on C#.NET［D］.Cheng?du：University of Electronic Science and Technology of China，2013：47-49.

［5］賀濤，繆淮扣，錢忠勝.基于Ajax技術的Web應用的建模與測試用例生成［J］.計算機科學，2014，41（8）：219-223.

HE Tao，MIAO Huaikou，QIAN Zhongsheng.Modeling and Test Case Generation for Ajax-based WA［J］.Comput?er Science，2014，41（8）：219-223.

［6］黃志春.基于AJAX技術的環保監控系統［D］.杭州：浙江大學，2006：6-22.

HUANG Zhichun.The Environmental Monitor System based on AJAX［D］.Hangzhou：Zhejiang University，2006：6-22.

［7］楊俊峰，黎建輝，楊風雷.深層網站Ajax頁面數據采集研 究 綜 述［J］.計 算 機 應 用 研 究 ，2013，30（6）：1606-1610.

YANG Junfeng，LI Jianhui，YANG Fenglei.Survey on re?search of data collection from supporting Ajax technology deep Websites［J］.Application Research of Computers，2013，30（6）：1606-1610.

［8］仰燕蘭，金曉雪，葉樺.ASP.NET AJAX框架研究及其在Web開發中的應用［J］.計算機應用與軟件，2011，28（6）：195-198.

YANG Yanlan，JIN Xiaoxue，YE Hua.On ASP.NET AJAX Framework and its Application in Web Development［J］.Computer Applications and Software，2011，28（6）：195-198.

［9］張正做，龔青.AJAX及其在科研咨詢服務系統中的應用［J］.微型電腦應用，2012，28（3）：59-64.

ZHANG Zhengzuo，GONG Qing.AJAX and its Applica?tion in Scientific Research and Consulting Service System［J］.Microcomputer Applications，2012，28（3）：59-64.

［10］孫靜靜.基于標簽技術的Word智能報表的研究［D］.青島：中國海洋大學，2013：7-26.

SUN Jingjing.Research on Intelligent Word Report Based on Tag［D］.Qingdao：Ocean University of China，2013：7-26.

［11］葉明，張諍.基于C#.NET的Word報告生成功能開發［J］.計算機工程與應用，2008，44（9）：104-106.

YE Ming，ZHANG Zheng.Development of Word Report

Design and Im p lementation of M anagement System for Econom ic Visa on M ulti Platform

LIU Zhuoxuan LIU Xianmei TIAN Feng ZHAO Ya
（School of Computer and Information Technology，Northeast Petroleum University，Daqing 163318）

TP311

10.3969/j.issn.1672-9722.2017.09.027

2017年3月10日，

2017年4月17日

國家自然科學基金項目（編號：61502094）；黑龍江省自然科學基金項目（編號：F2016002）；黑龍江省教育科學規劃重點課題（編號：GJB1215019）資助。

劉卓炫，男，碩士研究生，研究方向：虛擬現實。劉賢梅，女，教授，碩士生導師，研究方向：虛擬現實。田楓，男，副教授，博士，碩士生導師，研究方向：多媒體計算。趙婭，女，副教授，碩士，研究方向：虛擬現實。