项目实战：核酸检测平台第四章 冲锋陷阵

摘要：战争，冲在最前面的永远是最危险的人群，新冠之战，冲在最前的则是医护人员、防疫工作者。

核酸检测平台的采集人员APP做为先头部队的重要武器，一定要做的好用、实用，才能解决问题。

本章目标

完成采集人员APP

用到技术：

• 存储过程
• 游标
• 条码、二维码扫码组件

难点

• 选择采集点页面搜索过滤效果
• 行政区划级联选择和默认数据显示

文章目录

• 项目实战：核酸检测平台第四章 冲锋陷阵
• • 本章目标
  • 概述
  • 准备测试数据
  • 登录、注册
  • 选择采集点
  • 开箱
  • 转运箱列表页面
  • 试管列表、开管
  • 试管页面、添加采样人
  • 封管、封箱
  • 辅助功能
  • • 变更注册信息
    • 试管查箱码
  • End

概述

战争，冲在最前面的永远是最危险的人群，新冠之战，冲在最前端的正是医护人员、防疫工作者。

核酸检测平台的采集人员APP做为先头部队的重要武器，一定要做的好用、实用，才能成为核酸采集部队的利器。

虽然我们是做模拟，不去做性能方面的优化，但是在业务逻辑的设计方面一定要尽可能的实用、好用。还要确保数据的准确性。

再来回顾一下核酸采集的流程，这次我们在流程图的最后加上了一列业务逻辑说明。

采集人员模块虽然是一个独立的模块，但还是需要和其它模块协同工作的，其中协同的点有下面几个：

1. 箱码、试管码条码要提前生成好，并且箱码、试管码也是要提前生成好数据的。
2. 核酸码是由普通用户端填写数据后生成的二维码。
3. 封箱后，由转运人员继续后面的操作

总体来说采集人员模块的功能中要注意下面一些点，在功能页面编码的时候要注意。

1. 开箱、开管操作时并没有创建数据、而是修改箱码、试管码对应的状态。

2. 添加样本（被检测人）信息的时候，有三种添加方式：扫身份证、扫核酸码、手动录入。

   1. 扫身份证涉及身份证识别模块，可以调用大厂提供的AI接口，最后就是返回文本数据，暂且先不实现。
   2. 扫核酸码时，核酸码中的数据应是普通用户的信息标识，只是一个数字，这个数字对应的应是people中的标识。所以扫描完成后要到后台提取人员信息。
   3. 手动录入时，如果people库中已经有数据了，可以在身份证输入完成后，自动提取人员信息；在提交保存信息时，要检测录入人的信息是否在people中，如果没有，应当在people中添加人员信息，便于下次手动录入信息时可以手动录入。

3. 添加样本时要检测试管数量，前端界面要提醒剩余样本数量，超过试管数量时要给予提示，为便于采集人员使用，少量超量采集，应当也是允许的。所以在后端添加样本的时候不做强制约束。

4. 添加样本时要检查身份证信息重重录入的情况。

5. 样本允许修改和删除

6. 试管应允许删除，但删除时并不是删除数据，而是还原试管状态。

7. 封箱时要检查是否有未封管的试管码，如果有，应禁止封箱。

8. 实际运行的模块中有一个变更注册信息功能。

   开始不太理解这个功能的意义所在，在用APP的时候如果你留意的话就会发现，选择采集点是从你选择的区开始往下加载数据的，如果变更了注册信息之后，就会切换到其它区。

   因为第一章中给大家的APP下载链接是上海市的，为什么要这么做呢？

   上海市常住人口2400万，再加上非常住人口，有可能超过3000万，大规模采集的时候一般都是在6小时内完成采集工作，平均算下来一分钟要采集8万份样本，平均一秒种就是将近1400份样本。

   采集一份样本在界面上要操作3-5次，与后台接口大概也是3-5次数据操作。所以服务器端平均的并发量在7000左右的级别，峰值并发量可能会更高。这个并发量不算太大，但也不少。完全有可能切分为不同的区采用不同的服务来支撑。

下面我们来开始实现逐步完成这些功能的开发。

准备测试数据

因为该模块和其它模块是有关联的，也就是说有些数据是由其它模块生成之后才到了采集人员模块，都有哪些数据呢？

1. 采集点数据
2. 箱码数据
3. 试管码数据
4. 人员信息数据

为了方便在写程序的时候好调试，我们还是需要建出一些测试数据的，其中采集点数据要注意和行政区划数据绑定。

创建测试数据你可以采用手动录入的方式，也可以写个脚本来生成，在这里我用数据库存储过程来写了生成测试数据的脚本.

-- 创建采集点测试数据
-- 创建采集点的是在行政区划中第一个村、社区下创建3个采集点，
-- 所以要先查询出area表中的数据，然后用游标提取出每个村、社区的内容，再生成数据，往point表中添加数据。
-- 为便于区分采集点，采集点名称取村、社区名，在后面加上随机数字。
DROP procedure  IF EXISTS generate_points;CREATE procedure  generate_points()
BEGINDECLARE _areaId bigint;DECLARE _pointName varchar(50);DECLARE _areaName varchar(30);DECLARE var_done int DEFAULT FALSE;-- area表中是全国的行政区划，所以不能全查，而是做了一个区的限定。DECLARE cursor_area CURSOR FOR select areaId,name from area where areacode = 410307 and level=5;
-- 游标结束时会设置var_done为true，后续可以使用var_done来判断游标是否结束DECLARE CONTINUE HANDLER FOR NOT FOUND SET var_done=TRUE;open cursor_area;select_loop:LOOPFETCH cursor_area INTO _areaId,_areaName;set _areaName=replace(_areaName,'村民委员会','');-- 			每个村随机生成3个采集点SET _pointName = concat(_areaName,'采集点',CEILING(RAND()*50));insert into point (pointName,areaCode)values (_pointName,_areaId);SET _pointName = concat(_areaName,'采集点',CEILING(RAND()*50));insert into point (pointName,areaCode)values (_pointName,_areaId);SET _pointName = concat(_areaName,'采集点',CEILING(RAND()*50));insert into point (pointName,areaCode)values (_pointName,_areaId);IF var_done THENLEAVE select_loop;END IF;END LOOP;CLOSE cursor_area;
End;
call generate_points();-- 创建采集箱测试数据，boxCode 从10001开始，创建100个
-- 箱码数据boxCode一般是连续的，并且是不能够重复的，创建测试数据的时候要注意这个问题。
-- 下面的存储过程有两个入参，一个是开始编码，一个是结束编码。
DROP procedure  IF EXISTS generate_boxs;CREATE procedure  generate_boxs(IN beginCode bigint,in endCode int)
BEGINselect_loop:LOOPIF beginCode <=endCode THEN-- 箱码要初始status数据为0，表示箱码已打印。其它信息在开箱的时候再更新insert into box (boxCode,`status`)values(beginCode,0);set beginCode = beginCode+1;else LEAVE select_loop;end if;END LOOP;
END;
call generate_boxs(100001,100100);-- 创建试管码测试数据
-- 规则与箱码的生成一样
DROP procedure  IF EXISTS generate_testtubes;CREATE procedure  generate_testtubes(IN beginCode bigint,in endCode bigint)
BEGINselect_loop:LOOPIF beginCode <=endCode THEN-- 试管码要初始status数据为0，表示试管码已打印。其它信息在开管的时候再更新insert into testtube (testTubeCode,`status`)values(beginCode,0);set beginCode = beginCode+1;else LEAVE select_loop;end if;END LOOP;
END;
call generate_testtubes(20221001000001,20221001000501);-- 创建人员信息测试数据
-- 为了在测试的时候方便区分，第个人的名字后面加上了一个编号。
DROP procedure  IF EXISTS generate_peoples;CREATE procedure  generate_peoples(IN beginIdcardCode bigint,in endIdcardCode bigint)
BEGINdeclare _index int;set _index = 1;select_loop:LOOPIF beginIdcardCode <=endIdcardCode THENinsert into people (idcard,name,tel)values(beginIdcardCode,concat('张三',_index),(18700010000+_index));set beginIdcardCode = beginIdcardCode+1;set _index =_index+1;else LEAVE select_loop;end if;END LOOP;
END;
call generate_peoples(280103199901020001,280103199901020100);

登录、注册

所以软件系统最常见的功能，需要注意的时候正常的系统中密码是一定要进行加密的。加密方法最基本最常见的就是MD5加密，但是他的强度是比较弱的，相对比较容易被破解。高级一点可以采用加随机盐的方式，本篇采用最基本的加密方式。

@RestController
@RequestMapping("/collector")
public class CollectorController {@AutowiredICollectorService collectorService;@PostMapping("login")public ResultModel login(@RequestBody @Valid LoginModel model) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {Collector collector = collectorService.login(model);//虽然采用了token的登录验证方式，但还是要在session中存储一下，取当前登录用户时就可以直接从session取，减少sql查询请求SessionUtil.setCurrentUser(collector);return ResultModel.success(collector);}
}

登录接口参数类型为LoginModel，是单独定义和BO类，放在采集人员模块的pojo.bo包中。

类的字段上还定义了自定义验证规则。要注意的时要想让验证规则生效，还需要在controller参数前面加上@Valid注解。

package com.hawkon.collector.pojo.bo;import lombok.Data;import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Size;@Data
public class LoginModel {@NotEmpty(message = "手机号不能为空")@Size(min = 11, max = 11,message = "手机号必须是11位")private String tel;@NotEmpty(message = "密码不能为空")@Size(min = 6,message = "密码至少6位 ")private String password;
}

@Service
public class CollectorService implements ICollectorService {@AutowiredCollectorDao collectorDao;@Overridepublic Collector login(LoginModel model) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {String md5Password = Md5Util.encode(model.getPassword());//数据库中存储的是加密的密码，所以要先把输入的密码加密再进行查询Collector collector = collectorDao.login(model.getTel(), md5Password);if (collector == null) {throw new BusinessException("用户名或密码不正确", ResultCodeEnum.LOGIN_ERROR);}String token = getToken(collector);//把token存到cokkie中，并设置过期时间，一天Cookie cookie = new Cookie("token", token);cookie.setPath("/");cookie.setMaxAge(7 * 24 * 60 * 60);Global.response.addCookie(cookie);//返回前端之前要把密文的密码清除掉。collector.setPassword(null);return collector;}/*** 根据用户信息生成token* @param user* @return*/public String getToken(Collector user) {Date start = new Date();//有效期设置为7天是为开发阶段方便，实际项目应用中一天足够。long currentTime = System.currentTimeMillis() + 7 * 24 * 60 * 60 * 1000;//7天有效时间Date end = new Date(currentTime);String token = "";token = JWT.create().withAudience(user.getCollectorId().toString()).withIssuedAt(start).withExpiresAt(end).sign(Algorithm.HMAC256(user.getPassword()));return token;}
}

//MD5加密工具类
public class Md5Util {public static String encode(String str) throws NoSuchAlgorithmException, UnsupportedEncodingException {//确定计算方法MessageDigest md5=MessageDigest.getInstance("MD5");BASE64Encoder base64en = new BASE64Encoder();//加密后的字符串String newstr=base64en.encode(md5.digest(str.getBytes("utf-8")));return newstr;}
}

注册的时候要验证电话、身份证号是否已经注册，还要注意，密码默认是身份证后6位，密码也要注意加密一下。

从实际来看这个APP的密码比较随意，弄个身份证后6位了事，密码强度看来非常的差。没错，这种密码机制的涉及在任何一个互联网项目中看起来是不可思议的。但是，对于这个项目来说密码强度过于苛刻其实使用起来并不便捷，况且密码被破解并不会带来太过于严重的后果。所以这样做从实际使用的角度来说，是可以接受的。

@Override
public void register(Collector model) throws Exception {Collector modelByTel = collectorDao.getCollectorByTel(model.getTel());if (modelByTel != null) {throw new BusinessException("电话号码已注册，请直接登录", ResultCodeEnum.REGISTER_ERROR);}Collector modelByIdcard = collectorDao.getCollectorByIdCard(model.getIdcard());if (modelByIdcard != null) {throw new BusinessException("身份证号已注册", ResultCodeEnum.REGISTER_ERROR);}//取身份证后6位进行加密String md5String = Md5Util.encode(model.getIdcard().substring(model.getIdcard().length() - 6));model.setPassword(md5String);model.setCollectorType(CollectorType.Volunteer.getCode());collectorDao.register(model);
}

Login.vue页面

Register.vue页面

注册页面的多级级联比较麻烦，考虑过一次返回到前端，由前端来过滤，但是行政区划直接到第5级数据量还是挺大的，因此还是放弃了。

选择采集点

这个页面有一点有难度的地方，页面中有搜索功能，搜索的时候过滤的是采集点，但是显示的时候不仅仅要过滤采集点，还要过滤对应的县区、街道、村社区，以便快速选中。

这个效果可以在前端做，也可以在后端做，项目的使用量来说，在前端来做过滤对服务器的压力会小一些。

因此后端直接返回所有的采集点，行政区划数据则通过注册的采集人员的行政区划数据显示对应区的行政区划数据。

后端代码：

//controller层/*** 获取区下面的所有行政区划，由前端来处理* @param model* @return*/@PostMapping("getAllAreaByAreaCode")public ResultModel> getAllAreaByAreaCode(@RequestBody Collector model){//前端直接传回当前用户的areaid,是直接到社区的，这里要转换为区的编码，并把区下面的所有数据全部取回;Long areaId = model.getAreaId();Long areaCode = areaId/1000000;List areas = areaService.getAreasByAreaCode(areaCode);return ResultModel.success(areas);}
//service层@Overridepublic List getAreasByAreaCode(Long areaCode) {List areas = areaDao.getAreasByAreaCode(areaCode);return areas;}

//获取采集点
//constroller层
@PostMapping("getPoints")
public ResultModel> getPoints() throws BusinessException {List provinces = pointService.getPointsByCurrentUser();return ResultModel.success(provinces);
}
//service层
@Autowired
PointDao pointDao;
@Override
public List getPointsByCurrentUser() throws BusinessException {Collector currentUser = SessionUtil.getCurrentUser();//因为collector中存的areaId是12位的，可以精确到村社区，//但是选择采集点是从区开始的，只列出采集人员所在区的采集点。//采集点上的areaId也是精确到村社区一层的，而查询的时候是需要将区下面的所有采集点查询出来，//所以查询采集点的时候先取出当前采集人员绑定的areaId，再换算成区的areaCode，// 例如，采集人员的areaId是410325108204,区的id应是410325，所以用areaId/1000000即可得到区的id//执行查询的时候，采集点中的areaId存的也是到村/社区的，在sql语句中可以采用Like运算，//前端页面上的搜索功能可以在前商实现，这样可以减少数据查询的请求次数，减少服务器压力。Long areaCode = currentUser.getAreaId()/1000000;return pointDao.getPointsByAreaCode(areaCode);
}

SQL语句：

select *from areawhere areaCode = #{areaCode}select *from pointwhere areaCode like concat(#{areaCode},'%');

前端代码

SelectPoint.vue

开箱

开箱后端接口做好箱码的校验和箱码状态的校验即可

//Service层
@Override
public Box openBox(Box model) throws BusinessException {if(model.getPointId()==null){throw new BusinessException("参数错误，没有采集点ID", ResultCodeEnum.BUSSINESS_ERROR);}Box modelDb = boxDao.getBoxByBoxCode(model.getBoxCode());if (modelDb == null) {throw new BusinessException("非法箱码", ResultCodeEnum.BUSSINESS_ERROR);}if(modelDb.getStatus()>1){throw new  BusinessException("转运箱已封箱，请检查箱码", ResultCodeEnum.BUSSINESS_ERROR);}if(modelDb.getStatus()==1){return modelDb;}Integer collectorId = SessionUtil.getCurrentUser().getCollectorId();model.setCollectorId(collectorId);boxDao.openBox(model);modelDb.setStatus(1);modelDb.setCollectorId(collectorId);return modelDb;
}

前端页面Box.vue，因为要使用摄像头实现扫码，我们可以用@zxing/library组件来完成。安装方式： npm install @zxing/library。

安装完之后还需要把项目改为https方式，否则摄像头将无法开启。

开启Https的方法：

第一步：安装组件，npm install @vitejs/plugin-basic-ssl

第二步：在vite.config.js中添加代码

//引入类库
import basicSsl from '@vitejs/plugin-basic-ssl'export default defineConfig({plugins: [basicSsl(),//添加插件配置vue(),Components({resolvers: [VantResolver()],}),],....

配置好之后重启前端项目，看到下面的命令提示就OK了。需要注意的是，访问页面的时候也要改成https协议。

@zxing/library组件调用摄像头扫描的方法如下：

页面中显示摄像头拍摄画面的标签

扫描的方法：

//打开摄像头
const openCamera = () => {codeReader.value.getVideoInputDevices().then((videoInputDevices) => {tipMsg.value = "正在调用摄像头...";// 因为获取的摄像头有可能是前置有可能是后置，但是一般最后一个会是后置，所以在这做一下处理// 默认获取第一个摄像头设备idlet firstDeviceId = videoInputDevices[0].deviceId;if (videoInputDevices.length > 1) {// 获取后置摄像头let deviceLength = videoInputDevices.length;--deviceLength;firstDeviceId = videoInputDevices[deviceLength].deviceId;}decodeFromInputVideoFunc(firstDeviceId);}).catch((err) => {tipMsg.value = JSON.stringify(err);console.error(err);});
}
//扫描时会不断调用该回调
const decodeFromInputVideoFunc = (firstDeviceId) => {codeReader.value.reset(); // 重置codeReader.value.decodeFromInputVideoDeviceContinuously(firstDeviceId, "video", (result, err) => {tipMsg.value = "正在尝试识别...";if (result) {// 获取到的是条码内容，然后在这个if里面写业务逻辑即可boxCode.value = result.text;tipMsg.value = "识别成功：" + boxCode.value;//扫码成功直接调用开箱方法openBox();}if (err && !err) {tipMsg.value = JSON.stringify(err);console.error(err);}});
}
const closeCamera = () => {codeReader.value.stopContinuousDecode();codeReader.value.reset();
}

Box.vue完整的代码

转运箱列表页面

该页面显示还没有转运走的转运箱列表，没查询的时候注意做好转运箱状态的条件筛选即可。

试管列表、开管

开管操作一样需要调用摄像头，前面已经做过，到这里就没什么难的了。CV+改就好了。

扫码之后跳转到手动输入界面，并不是直接开管，而是要选择一下采集类型是单采还是混采。

TestTubeList.vue

后端，试管的controller页面，注意做好参数的验证和状态验证

package com.hawkon.collector.service.impl;import com.hawkon.collector.dao.BoxDao;
import com.hawkon.collector.dao.TestTubeDao;
import com.hawkon.collector.service.ITestTubeService;
import com.hawkon.common.enums.ResultCodeEnum;
import com.hawkon.common.exception.BusinessException;
import com.hawkon.common.pojo.Box;
import com.hawkon.common.pojo.TestTube;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class TestTubeServiceImpl implements ITestTubeService {@AutowiredTestTubeDao testTubeDao;@AutowiredBoxDao boxDao;@Overridepublic List getTestTubeListByBoxId(Integer boxId) throws BusinessException {Box box = boxDao.getBoxByBoxId(boxId);if (box == null) {throw new BusinessException("箱码不存在", ResultCodeEnum.BUSSINESS_ERROR);}if (box.getStatus() == 0 || box.getStatus() > 2) {throw new BusinessException("箱码状态异常", ResultCodeEnum.BUSSINESS_ERROR);}List list = testTubeDao.getTestTubeListByBoxId(boxId);return list;}@Overridepublic TestTube openTestTube(TestTube model) throws BusinessException {if(model.getBoxId()==null){throw new BusinessException("参数错误，没有箱码ID", ResultCodeEnum.BUSSINESS_ERROR);}TestTube modelDb = testTubeDao.getTestTubeByCode(model.getTestTubeCode());if (modelDb == null) {throw new BusinessException("非法试管码", ResultCodeEnum.BUSSINESS_ERROR);}if(modelDb.getStatus()>1){throw new  BusinessException("试管已封管，请检查试管码", ResultCodeEnum.BUSSINESS_ERROR);}if(modelDb.getStatus()==1){return modelDb;}testTubeDao.openTestTube(model);modelDb.setStatus(1);return modelDb;}@Overridepublic void closeTestTube(TestTube model) throws BusinessException {testTubeDao.closeTestTube(model);}
}

试管列表页面效果图

试管页面、添加采样人

试管页面默认显示已录入的样本信息，可以支持三种录入方式：扫身份证、扫核酸码、手工录入。

我们这里实现后两种。需要注意的是扫身份证和扫核酸码后都要跳到手工录入界面确认信息点击提交后才能够完成添加。

手工录入

点击列表页面的样本信息后可以修改样本信息

TestTube.vue

后端代码。

package com.hawkon.collector.controller;import com.hawkon.collector.service.ISampleService;
import com.hawkon.common.exception.BusinessException;
import com.hawkon.common.pojo.ResultModel;
import com.hawkon.common.pojo.Sample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.validation.Valid;
import java.util.List;@RestController
@RequestMapping("/sample")
public class SampleController {@AutowiredISampleService sampleService;@PostMapping("getSampleByTestTubeId")public ResultModel> getSampleByTestTubeId(@RequestBody Sample model) throws BusinessException {List list = sampleService.getSampleByTestTubeId(model.getTestTubeId());return ResultModel.success(list);}@PostMapping("addSample")public ResultModel