基于Vue.js的志愿者監(jiān)控管理系統(tǒng)的實現(xiàn)

許昕，葉晟澄，陳家樂，楊仕昌

（南華大學，湖南衡陽，421001)

1 項目背景及需求分析

救援隊針對走失人群開展協(xié)助家屬尋找的志愿任務，并結合以往經(jīng)驗給家屬提供專業(yè)化的建議。協(xié)助群體主要是因老年癡呆（阿爾茨海默?。┗蛘哒J知功能障礙的老人。從事這個志愿者活動中遇到了很多的問題，主要表現(xiàn)在 2 個方面：

（1）外出找人是一個專業(yè)性很強的志愿工作。

外出尋人我們需要調(diào)動前后三天天氣情況、周邊道路地圖、查找最近的醫(yī)院等信息，這些需要大量的數(shù)據(jù)存儲和其他相關系統(tǒng)的自動支持。

（2）志愿者很難7天24 小時值守待命，很多工作效率低。

救援隊在此事上的難點主要是志愿者的特殊性，導致既要保證類似部隊那樣的效率和專業(yè)性，又的確做不到部隊那樣的集中生活，集中補給。一個任務啟動，等于把原本都在干著不同事情的隊員，迅速的從四面八方拽到一個地方去干同一件事情，還不能亂，而這些人不一定都是經(jīng)過訓練的專業(yè)人員。因此需要一款能夠進行從中調(diào)度的軟件為該項公益事業(yè)提供有效的技術保障，從而有效提升團隊的合作效率，更好的為有相關需求的救援提供服務。

因此本項目開發(fā)的目標旨在于為志愿者隊搜救行動保駕護航,作強有力的技術支撐。

圖1 管理系統(tǒng)功能結構圖

2 項目組成框架

志愿者監(jiān)控管理系統(tǒng)共分三大模塊：案件主頁模塊、人員管理模塊、統(tǒng)計數(shù)據(jù)模塊和對應11種功能相輔相成，共同實現(xiàn)后臺統(tǒng)一指揮、大數(shù)據(jù)可視化展示功能。

3 關鍵技術

■3.1 Vue.js框架

Vue.js是一個構建數(shù)據(jù)驅(qū)動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。 它提供了 MVVM 風格的雙向數(shù)據(jù)綁定的Javascript 庫，專注于View 層。它的核心是 MVVM 中的VM，也就是 ViewModel。 ViewModel負責連接 View 和Model，保證視圖和數(shù)據(jù)的一致性，這種輕量級的架構讓前端開發(fā)更加高效、便捷。Vue.js的簡單高效的特性為快速開發(fā)本項目提供的技術支持。

■3.2 WebSocket

WebSocket是一種通信協(xié)議，可在單個TCP連接上進行全雙工通信。WebSocket使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，允許服務端主動向客戶端推送數(shù)據(jù)。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就可以建立持久性的連接，并進行雙向數(shù)據(jù)傳輸。

很多網(wǎng)站為了實現(xiàn)推送技術，所用的技術都是輪詢。輪詢是在特定的時間間隔（如每1秒），由瀏覽器對服務器發(fā)出HTTP請求，然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。而比較新的技術去做輪詢的效果是Comet。這種技術雖然可以雙向通信，但依然需要反復發(fā)出請求。而且在Comet中，普遍采用的長鏈接，也會消耗服務器資源。在這種情況下，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務器資源和帶寬，并且能夠更實時地進行通訊。工作方式如2圖所示。

圖2 WebSocket工作模式圖

有了WebSocket技術，我們能夠與志愿者的設備進行全雙工通信。這也是我們后續(xù)功能實現(xiàn)的技術支持。

4 志愿者監(jiān)控管理系統(tǒng)的實現(xiàn)

■4.1 案件主頁實現(xiàn)

根據(jù)志愿者的實際需求，我們重點是設計實現(xiàn)了地圖管理頁面.此頁面分左右兩個部分(圖3)。

圖3 案件主頁

頁面左側上面部分為信息搜索框，便于管理人員隨時調(diào)取相關派出所、醫(yī)院位置及電話，自由查詢其他任何可用的資源，比如收容所位置、養(yǎng)老機構等信息。左側下面部分為案件簡略列表,列表中的案件可以展開查看詳情，并帶有編輯和刪除功能。且案件動態(tài)刷新，以案件緊急程度排序，便于操作管理指揮，案件列表右側可查看對應案件線索（圖4），以及該案件涉及的地圖內(nèi)容。右側為地圖部分。初始進入地圖時，所有地區(qū)有關的案件信息將全部呈現(xiàn)，分為案件中心信息、案件中心地點、志愿者當前地點、志愿者個人簡略信息、以及志愿者行駛路徑。且案件中心信息，對應在案件發(fā)生中心，點擊標記可查看案件簡略信息。志愿者信息，對應志愿者當前所處位置，點擊也可查看該志愿者的個人信息彈窗，以及其近兩小時的行駛軌跡。

圖4 案件主頁左側以及附近信息調(diào)取

地圖部分使用了高德地圖，簡潔大方明了，實用性強。通過調(diào)用高德地圖的API，我們將從后端發(fā)來的所有人員個人信息以及行程記錄信息展示在地圖上。點擊頭像即可與志愿者進行對話，實現(xiàn)了監(jiān)控與管理的功能。

■4.2 人員管理實現(xiàn)

除了地圖實時監(jiān)控功能，人員信息的管理(增刪查改)功能也是必不可少的。

人員管理分為志愿者信息管理（圖5）與老人信息管理（圖6）。各個管理部分均可增、刪、查、改個人信息，以及根據(jù)姓名搜索對應人員信息，方便管理。

圖5 志愿者信息管理

圖6 老人信息管理

■4.3 數(shù)據(jù)統(tǒng)計界面實現(xiàn)

統(tǒng)計數(shù)據(jù)模塊（圖7）中有6個統(tǒng)計部分，從上到下從左到右依次為日期范圍選擇部分、走失老年人年齡統(tǒng)計圖表（南丁格爾玫瑰圖）、案件類型統(tǒng)計圖表（橫向柱狀圖）、地區(qū)案件數(shù)量統(tǒng)計（地區(qū)圖）、救援人員數(shù)量統(tǒng)計（折線圖）、以及丟失老人信息輪播圖。

圖7 （數(shù)據(jù)統(tǒng)計頁）

①日期范圍選擇部分：日期統(tǒng)計可選擇近一個星期、近一個月、近三個月的數(shù)據(jù)，也可手動選擇合適日期。通過日期范圍選擇后，圖表可實時刷新出當前對應日期范圍內(nèi)的統(tǒng)計數(shù)據(jù)，切換動畫流暢順滑。各個圖表標注清晰，方便預覽。②丟失老年人年齡統(tǒng)計圖：采用四種顏色來表達列舉60以下、70-80、80-90、90歲以上年齡分布情況。③案件類型統(tǒng)計圖：紅色柱狀圖表示尋找中、已找到、未找到的案件數(shù)量分布情況。④地區(qū)案件數(shù)量統(tǒng)計地圖：顯示城市各區(qū)域案件數(shù)量情況，顏色范圍由紅到藍，反映出案件數(shù)量由多到少。⑤救援人員數(shù)量統(tǒng)計折線圖：顯示選擇的時間范圍內(nèi)救援人員數(shù)量變化情況，管理人員可根據(jù)變化情況做出調(diào)整。⑥丟失老人信息輪播圖：輪播當前丟失老人信息，方便大眾查看。

■4.4 手機控大屏實現(xiàn)

為了更好的將整個志愿者監(jiān)控管理系統(tǒng)展示給管理人員和公眾觀看。我們特此設計了一款微信小程序端的遙控器app。講師無需操控Web端，直接通過該遙控器操控Web端的頁面跳轉(zhuǎn)以及在大數(shù)據(jù)展示頁面選擇數(shù)據(jù)日期范圍。

實現(xiàn)過程:遙控器向服務器端發(fā)送http請求，規(guī)定傳輸命令格式:

解 釋:（1）type的取值: case(轉(zhuǎn)到案件主頁)、lostPeopleAdmin (轉(zhuǎn)到丟失老人信息管理)、volunteer Admin（轉(zhuǎn)到志愿者信息管理）、Statistics(轉(zhuǎn)到統(tǒng)計數(shù)據(jù))。

（2）date的取值:當type = Statistics 時,date為一個長度為2的時間數(shù)組，代表起始時間和結束時間,保證startTime < endTime.否則,date = null。

服務器將來自遙控器端請求通過WebSokcet的方式主動推送給Web端。Web端解析命令，然后通過前端控制頁面跳轉(zhuǎn)。

5 結語

本文設計并實現(xiàn)了志愿者監(jiān)控管理系統(tǒng)，利用Web端的全局調(diào)控操作，以達到對傳統(tǒng)救援方式的效率的大幅度提升，為整個救援事業(yè)提供十分有效的技術保障。本項目的實施具有如下意義：

（1）有利于救援隊更有效的展開救援行動

傳統(tǒng)的救援方式對新手志愿者的要求門檻高，培訓周期長。從另一方面來說，傳統(tǒng)的救援方式也缺乏有效且規(guī)范的系統(tǒng)來支持。那么這個時候一個有效規(guī)范的智能救援系統(tǒng)，就能夠快速的解決目前的問題。我們能夠通過Web后臺對整個救援行動作全局調(diào)控，做到真正的有效展開救援行動。

（2）便于管理者及時獲取信息

我們的大數(shù)據(jù)展示頁面將數(shù)據(jù)從各個維度上呈現(xiàn)出來，便于管理者有效快速的了解救援行動的進展和成果。

（3）有利于提高公益事業(yè)的社會影響力

公益活動的參與對象并不應該是一個人或者一個組織，而是通過一個人或者一個組織帶動社會全體人員參與的不具有任何功利性的活動。通過本次項目，可以讓人們更加重視阿爾茲海默癥群體，加深人們對它的了解。從而提高公益事業(yè)的社會影響力。