基于微信小程序的疫情健康監測系統設計與實現

周全興 李秋賢

摘? 要：疫情常態防控下，高校日常管理工作面臨晨午晚體溫檢測、進出校門審核管理等頻繁的重復性工作。微信小程序有使用便捷、無須下載客戶端和開發成本低等優點，被廣泛推薦使用。開發基于微信小程序的疫情健康監測系統，對解決疫情常態防控下高校日常管理中頻繁的重復性事務具有較大幫助，在提高工作效率的同時，加強高校疫情防控工作。

關鍵詞：新冠肺炎;疫情防控;健康監測;程序設計;微信小程序

中圖分類號：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-），女，漢族，河南焦作人，中級職稱，碩士，研究方向：密碼學、博弈論。