基于微信小程序的疫情健康监测系统设计与实现

周全兴 李秋贤

摘  要：疫情常态防控下，高校日常管理工作面临晨午晚体温检测、进出校门审核管理等频繁的重复性工作。微信小程序有使用便捷、无须下载客户端和开发成本低等优点，被广泛推荐使用。开发基于微信小程序的疫情健康监测系统，对解决疫情常态防控下高校日常管理中频繁的重复性事务具有较大帮助，在提高工作效率的同时，加强高校疫情防控工作。

关键词：新冠肺炎;疫情防控;健康监测;程序设计;微信小程序

中图分类号：TP311.56       文献标识码：A 文章编号：2096-4706（2020）22-0110-03

Design and Implementation of Epidemic Health Monitoring System Based on WeChat Applet

ZHOU Quanxing，LI Qiuxian

（Kaili University，Kaili  556011，China）

Abstract：Under the normal situation of epidemic prevention and control，the daily management of colleges and universities is faced with frequent repetitive work，such as body temperature detection in the morning，afternoon and evening，in and out of school audit management. WeChat applet has the advantages of easy to use，no need to download the client and low development cost，so it is widely recommended for use. The development of the epidemic health monitoring system based on WeChat applet is of great help to solve the frequent repetitive affairs in the daily management of colleges and universities under the normal epidemic prevention and control，and strengthen the epidemic prevention and control work in colleges and universities while improving the work efficiency.

Keywords：COVID-19;epidemic prevention and control;health monitoring;program design;WeChat applet

0  引  言

疫情暴发以来，全国各地区采取各种措施进行隔离，使得疫情得到有效控制。随着疫情防控形势的逐步好轉，全国各省市开始复工复产、学生分批次返校复学。学校作为学生学习和生活的场所，人群集中，传染速度快，尤其是高等学校，具有生源分布广、跨区域人数多、人员密集程度高等特点，为学校复学、校园疫情防控乃至整个社会疫情防控工作带来更大的挑战和困难[1]。疫情防控工作由应急式向常态化转变，高校的新冠肺炎疫情防控日常工作变得频繁、复杂，其中很多是重复性的工作，给工作者和管理者带来了一定的困难。通过信息技术研发相应的系统能够有效解决上述问题。

微信具有庞大的用户量。微信小程序依附于微信存在，它提供了完整的微信小程序端和后台服务器端的API应用[2]，具有开发成本低、开发维护快捷、使用便捷等特点。用户不需要下载安装软件，可直接通过扫一扫或者搜索打开应用，用完退出页面即可，需要再次访问可以通过搜索或“添加到我的小程序”的方式实现便捷使用[3]。基于微信小程序开发疫情健康监测系统，完全满足用户使用需求和系统开发设计。为提高常态化疫情防控下，我校日常管理和疫情防控工作效率，避免采用在线表格填写晨午晚体温、QQ群作业提交健康码和人工处理进出校门审批等情况，促进我校疫情防控精准施策。

1  总体设计

系统分为微信小程序端和后台管理系统两部分，微信小程序端主要实现用户的登录、身份验证、体温数据提交、查询和进出校门申请等功能;后台管理系统主要实现健康监测数据的汇总导出、用户数据添加导入、角色管理、部门院系管理、疫情监测预警等功能。

1.1  开发工具与语言

微信小程序提供的标签语言WXML与HTML5非常相

似，脚本语言使用当下流行的Vue框架。开发环境是Windows 10，程序前端开发使用微信开发者工具Stable，后台开发语言是Java，其中选择轻量级的Spring Boot快速开发平台renren-fast，它能快速开发项目并交付完善的XSS防范及脚本过滤，杜绝XSS攻击，实现前后端分离，通过token进行数据交互[4]，数据库选择的是MySQL，可视化工具使用Navicat for MySQL。

1.2  功能模块设计

系统由微信小程序端和后台管理系统组成，如图1所示。微信小程序端设计4个主要页面：首页、健康管理、进出管理、我的。后台管理系统主要是对健康监测数据的收集、统计、分析和使用。系统中设置有系统管理员、校级管理员、分院级管理员和普通用户4类权限用户，其中普通用户包括教职员工和学生，不同类型的用户具有不同的权限，用户归属于不同的院系部门、甚至班级。根据用户提交的健康监测数据、异常情况数据、定位运动数据等，进行大数据分析，形成大数据可视化的疫情健康监测大屏，可应用于批量学生返校入学、疫情情况排查隔离等。

2  系統详细设计与实现

2.1  微信小程序端

健康数据提交和管理员查询记录如图2、图3所示。

小程序页面中，禁止用户注册，所有用户均由后台管理添加完成。用户输入学（工）号、密码和验证码，勾选获取用户定位信息和同意遵守相关疫情防控规章制度，验证其OpenID方可登录。登录用户进行健康监测数据申报、异常情况申报、进出校门管理、近14天的数据查询及应用、个人信息管理，个人信息管理包括微信号绑定、手机号绑定等，确保本人使用。

2.2  后台管理系统

后台管理系统中，只允许管理员登录。在用户管理中，可以通过Excel表格批量导入用户数据。健康监测数据管理主要有数据导出、用户运动轨迹生成、异常健康数据及对应用户生成，根据生成的异常健康数据和用户管理，发送提示消息给用户进行相应的处理。进出校门审批管理主要是对学生的申请进行审批，其中可以查询其申请的记录、出校门后的运动轨迹、返校时间等，根据历史记录从而给出审批及理由。对在规定时间范围内未提交健康监测数据的用户进行提醒，发布防疫通知等。用户在登录时必须勾选自动获取定位地址，实现对用户定位信息的把控，在进行进出校门管理和疫情发生时，及时排查隔离。在学生返校时，通过大数据可视化，显示其运动轨迹，大数据分析其是否存在风险隐患。

2.3  大数据可视化

大数据可视化设计为后台管理系统中的一个功能模块，数据来源主要是用户每日提交的健康监测数据、定位数据信息和异常情况数据，通过导入ECharts实现大数据可视化呈现及大屏展示。ECharts是百度的一个开源项目，基于Canvas的、纯JavaScript的图表库，底层依赖矢量图形库ZRender，提供直观、生动、可交互、可个性化定制的数据可视化图表，赋予了用户对数据进行挖掘、整合的能力[5];使用ECharts的主题vintage框架[6]，实现大数据可视化的大屏呈现。

嵌入ECharts的代码为：

import * as echarts from 'echarts/lib/echarts';  // 引入 echarts 主模块

import 'echarts/lib/chart/line';  // 引入折线图

// 引入提示框组件、标题组件、工具箱组件

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

import 'echarts/lib/component/toolbox';

// 初始化 echarts 实例并绘制图表。

echarts.init（document.getElementById（'main'））.setOption（{

title： {text： 'Line Chart'}，

tooltip： {}，

toolbox： {

feature： {

dataView： {}，

saveAsImage： {  pixelRatio： 2  }，

restore： {}   }

}，

xAxis： {}，

yAxis： {}，

series： [{

type： 'line'，

smooth： true，

data： [[12， 5]， [24， 20]， [36， 36]， [48， 10]， [60， 10]， [72， 20]]

}]

}）;

可视化大屏vintage核心代码为：

（function （root， factory） {

if （typeof define === 'function' && define.amd） {

// AMD. Register as an anonymous module.

define（['exports'， 'echarts']， factory）;

} else if （typeof exports === 'object' && typeof exports.nodeName ！== 'string'） {

// CommonJS

factory（exports， require（'echarts'））;

} else {

// Browser globals

factory（{}， root.echarts）;

}

}（this， function （exports， echarts） {

var log = function （msg） {

if （typeof console ！== 'undefined'） {

console && console.error && console.error（msg）;   }

};

if （！echarts） {  log（'ECharts is not Loaded'）; return;  }

var colorPalette = ['#d87c7b'，'#919e8c'， '#d7ac72'，  '#6e6064'，'#61b0b8'，'#eeb18e'， '#787474'， '#cc6e63'， '#824e68'， '#6b565b'];

echarts.registerTheme（'vintage'， {

color： colorPalette，

backgroundColor： '#fef8ef'，

graph： { color： colorPalette }

}）;

}））;

2.4  部分主要数据库表设计

微信小程序通过相应的wx.request请求页面与MySQL数据库进行数据交互。系统中的信息表有：用户基本信息表epi_user_base_info、健康记录数据表epi_health_info、部门机构表epi_dept、用户部门表epi_user_dept、运动记录表epi_motion_info等15个基本数据库表。数据库中表的详细设计结构举例如表1、表2、表3所示。

字段 类型 名称 备注

id bigint 用戶id 主键

user_id bigint 用户 外键

no varchar 学工号 学生学号，教师工号，其他

name varchar 真实姓名 —

id_card varchar 身份证号 —

type tinyint 类型 0：学生，1：教师，2：其他

sex tinyint 性别 0：女，1：男

remark varchar 备注 —

4  结  论

本文介绍了基于微信小程序的疫情健康监测系统的设计思路与实现过程，对需要开发此类系统的读者具有一定参考价值，系统的应用简化了部分工作流程和工作事务，提高了工作效率，提出的通过数据可视化大屏的方式，对高校疫情防控的日常数据、运动轨迹进行监控和分析，提高了常态化疫情防控工作效果和质量，对高校日常管理工作的提升具有较大帮助，以信息技术、大数据助力高校疫情防控工作。

参考文献：

[1] 徐新艳，王娟娟，岳卫华，等.信息化助力高校疫情防控精准施策 [J].信息技术与信息化，2020（6）：28-34.

[2] 孙腾雷，毕昕宇，孙倩倩，等.基于微信小程序的疫情防控平台的设计与实现 [J].电子测试，2020（13）：77-79.

[3] 拉丁风情Salsabachata.1月9日零点开始，微信小程序正式上线 [EB/OL].（2017-01-09）.https：//www.sohu.com/a/ 123853393_571244.

[4] 人人社区.renren-fastv3.0 [EB/OL].（2019-03-04）.https：//www.renren.io/guide.

[5] ECharts.特性 [EB/OL].[2020-10-10].https：//echarts.apache.org/zh/feature.html.

[6] 吴莉莉，王健庆，杜宇翔，等.基于百度AI的校园服务小程序的设计与实现 [J].现代信息科技，2019，3（18）：8-10.

作者简介：周全兴（1986-），男，汉族，贵州遵义人，讲师，学士学位，研究方向：计算机应用、网络信息安全、区块链技术;李秋贤（1992-），女，汉族，河南焦作人，中级职称，硕士，研究方向：密码学、博弈论。