基于Vue.js的志愿者監控管理系統的實現

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

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

1 項目背景及需求分析

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

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

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

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

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

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

圖1 管理系統功能結構圖

2 項目組成框架

志愿者監控管理系統共分三大模塊：案件主頁模塊、人員管理模塊、統計數據模塊和對應11種功能相輔相成，共同實現后臺統一指揮、大數據可視化展示功能。

3 關鍵技術

■3.1 Vue.js框架

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

■3.2 WebSocket

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

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

圖2 WebSocket工作模式圖

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

4 志愿者監控管理系統的實現

■4.1 案件主頁實現

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

圖3 案件主頁

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

圖4 案件主頁左側以及附近信息調取

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

■4.2 人員管理實現

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

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

圖5 志愿者信息管理

圖6 老人信息管理

■4.3 數據統計界面實現

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

圖7 （數據統計頁）

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

■4.4 手機控大屏實現

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

實現過程:遙控器向服務器端發送http請求，規定傳輸命令格式:

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

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

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

5 結語

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

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

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

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

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

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

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