基于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）有利于提高公益事业的社会影响力

公益活动的参与对象并不应该是一个人或者一个组织，而是通过一个人或者一个组织带动社会全体人员参与的不具有任何功利性的活动。通过本次项目，可以让人们更加重视阿尔兹海默症群体，加深人们对它的了解。从而提高公益事业的社会影响力。