扫描二维码打卡

pom.xml

@@ -299,6 +299,17 @@
             <groupId>junit</groupId>
             <artifactId>junit</artifactId>
         </dependency>
+        <!-- 二维码支持包 -->
+        <dependency>
+            <groupId>com.google.zxing</groupId>
+            <artifactId>core</artifactId>
+            <version>3.4.0</version>
+        </dependency>
+        <dependency>
+            <groupId>com.google.zxing</groupId>
+            <artifactId>javase</artifactId>
+            <version>3.4.0</version>
+        </dependency>
     </dependencies>
 
     <repositories>

src/main/java/com/dlbridge/jadp/plugins/cmpt/bean/RoadTimerCheckpoint.java

+package com.dlbridge.jadp.plugins.cmpt.bean;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Getter;
+import lombok.Setter;
+import lombok.experimental.Accessors;
+
+/**
+ * 计时的打卡点bean，作为封装返回接口的json使用
+ */
+@Getter
+@Setter
+@Accessors(chain = true)
+@ApiModel(value = "计时系统打卡点bean", description = "计时系统打卡点bean")
+public class RoadTimerCheckpoint {
+
+    @ApiModelProperty(value = "打卡点Id", notes = "打卡点Id")
+    private int cpId;
+    @ApiModelProperty(value = "打卡点名称", notes = "打卡点名称")
+    private String cpName;
+    @ApiModelProperty(value = "打卡点之间间隔的里程", notes = "打卡点之间间隔的里程")
+    private int cpLength;
+    @ApiModelProperty(value = "打卡点的分段成绩", notes = "打卡点的分段成绩")
+    private long cpTimespan;
+    @ApiModelProperty(value = "打卡点的分段的开始时间", notes = "打卡点的分段的开始时间")
+    private long cpStartTime;
+    @ApiModelProperty(value = "打卡点的分段的结束时间", notes = "打卡点的分段的结束时间")
+    private long  cpStopTime;
+
+
+}

src/main/java/com/dlbridge/jadp/plugins/cmpt/service/RemoteService.java

@@ -446,5 +446,71 @@ public class RemoteService {
         return 0L;
     }
 
+    /**
+     * 获取号码牌获取各个点的打卡信息列表
+     * @param cmptId
+     * @param markNo
+     * @return
+     */
+    public List<RoadTimerCheckpoint> getAllCPScoreByMarkNo(Integer cmptId,String markNo){
+        ResponseEntity<String> forEntity = restTemplate.getForEntity(timerURL + "personAllCPScoreByMarkNo.do?cmptId="+ cmptId + "&markNo="+markNo, String.class);
+        if (forEntity.getStatusCode() == HttpStatus.OK) {
+            List<RoadTimerCheckpoint> roadTimerCheckpointList = new ArrayList<>();
+            String resultString = forEntity.getBody();
+            log.info("计时打卡点：" + resultString);
+            JSONObject object = JSONObject.parseObject(resultString);
+            JSONArray segsResult = object.getJSONArray("segs");
+            if(segsResult == null || segsResult.isEmpty()) return null;
+            //支持多日赛
+            for(int j=0;j<segsResult.size();j++) {
+                JSONObject resultObject = (JSONObject) segsResult.get(j);
+                JSONArray result = resultObject.getJSONArray("cps");
+                if (result == null || result.isEmpty()) return null;
+                //获取每个打卡点的信息
+                for (int i = 0; i < result.size(); i++) {
+                    RoadTimerCheckpoint roadTimerCheckpoint = new RoadTimerCheckpoint();
+                    JSONObject o = (JSONObject) result.get(i);
+                    String cpId = o.getString("cpId");
+                    String cpName = o.getString("cpName");
+                    String cpLength = o.getString("cpLength");
+                    String cpTimespan= o.getString("cpTimespan");
+                    String cpStartTime=o.getString("cpStartTime");
+                    String cpStopTime=o.getString("cpStopTime");
+                    roadTimerCheckpoint.setCpId(Integer.parseInt(cpId)).setCpName(cpName).setCpLength(Integer.parseInt(cpLength)).setCpTimespan(Long.parseLong(cpTimespan)).setCpStartTime(Long.parseLong(cpStartTime)).setCpStopTime(Long.parseLong(cpStopTime));
+                    roadTimerCheckpointList.add(roadTimerCheckpoint);
+                }
+            }
+            return roadTimerCheckpointList;
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * 获取项目的信息
+     * @param cmptId
+     * @param roadId
+     * @return
+     */
+    public HashMap<String,Object> getRoadinfoByroadId(int cmptId,int roadId){
+        ResponseEntity<String> forEntity = restTemplate.getForEntity(timerURL + "getRoad.do?cmptId="+ cmptId + "&roadId="+roadId, String.class);
+        HashMap<String,Object> segsResult=new HashMap<String,Object>();
+        if (forEntity.getStatusCode() == HttpStatus.OK) {
+            String resultString = forEntity.getBody();
+            JSONObject object = JSONObject.parseObject(resultString);
+            JSONObject roadJsonObject=object.getJSONObject("road");
+            String name=roadJsonObject.getString("name");
+            long startTime=roadJsonObject.getLong("startTimeMs70");
+            long endTime=roadJsonObject.getLong("endTimeMs70");
+            segsResult.put("roadName",name);
+            segsResult.put("startTime",startTime);
+            segsResult.put("endTime",endTime);
+            return segsResult;
+        } else {
+            return null;
+        }
+    }
+
+
 
 }

src/main/java/com/dlbridge/jadp/plugins/cmpt/service/ScanService.java

+package com.dlbridge.jadp.plugins.cmpt.service;
+
+import com.dlbridge.jadp.plugins.cmpt.bean.RoadsGpsCheckpointMap;
+import com.dlbridge.jadp.plugins.cmpt.utils.QRCodeUtil;
+import lombok.extern.log4j.Log4j2;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import javax.imageio.ImageIO;
+import javax.servlet.ServletOutputStream;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.awt.image.BufferedImage;
+import java.io.IOException;
+import java.io.OutputStream;
+import java.util.List;
+import java.util.zip.ZipEntry;
+import java.util.zip.ZipOutputStream;
+
+@Service
+@Log4j2
+public class ScanService {
+
+    @Resource
+    private RemoteService remoteService;
+
+    /**
+     * 根据赛事Id和项目Id批量下载二维码的zip文件
+     * @param httpServletRequest
+     * @param httpServletResponse
+     * @param cmptId
+     * @param roadId
+     */
+   public void downLoadAllQRByRoadId(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse,int cmptId,int roadId) throws IOException,Exception {
+
+   }
+}

src/main/java/com/dlbridge/jadp/plugins/cmpt/utils/QRCodeUtil.java

+package com.dlbridge.jadp.plugins.cmpt.utils;
+
+import com.google.zxing.BarcodeFormat;
+import com.google.zxing.EncodeHintType;
+import com.google.zxing.MultiFormatWriter;
+import com.google.zxing.WriterException;
+import com.google.zxing.common.BitMatrix;
+import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
+import org.springframework.util.StringUtils;
+
+import javax.imageio.ImageIO;
+import java.awt.*;
+import java.awt.geom.RoundRectangle2D;
+import java.awt.image.BufferedImage;
+import java.io.BufferedInputStream;
+import java.io.File;
+import java.io.IOException;
+import java.io.InputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Objects;
+
+/**
+ * 二维码生成的工具类
+ */
+public class QRCodeUtil {
+
+    /**
+     * 默认是黑色
+     */
+    private static final int QRCOLOR = 0xFF000000;
+    /**
+     * 背景颜色
+     */
+    private static final int BGWHITE = 0xFFFFFFFF;
+    /**
+     * 二维码宽
+     */
+    private static final int WIDTH = 400;
+    /**
+     * 二维码高
+     */
+    private static final int HEIGHT = 400;
+
+    /**
+     * 用于设置QR二维码参数
+     */
+    public static Map<EncodeHintType, Object> hints = new HashMap<EncodeHintType, Object>() {
+        private static final long serialVersionUID = 1L;
+        {
+            // 设置QR二维码的纠错级别（H为最高级别）具体级别信息
+            put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);
+            // 设置编码方式
+            put(EncodeHintType.CHARACTER_SET, "utf-8");
+            put(EncodeHintType.MARGIN, 0);
+        }
+    };
+
+    public static void main(String[] args) {
+        HttpURLConnection httpUrl = null;
+        try {
+            String imgUrl="http://img2.imgtn.bdimg.com/it/u=2874714129,2818353273&fm=26&gp=0.jpg";
+            URL url = new URL(imgUrl);
+            httpUrl = (HttpURLConnection) url.openConnection();
+            httpUrl.connect();
+            InputStream in=httpUrl.getInputStream();
+            BufferedImage img=ImageIO.read(in);
+            File QrCodeFile = new File("F:/down/textsss.png");
+            ImageIO.write(img, "png", QrCodeFile);
+        } catch (IOException e) {
+        } catch (ClassCastException e) {
+        } finally {
+            try {
+                httpUrl.disconnect();
+            } catch (NullPointerException e) {
+            }
+        }
+    }
+
+    /**
+     * 生成带logo的二维码图片
+     * @param logo logo图片地址
+     * @param qrUrl
+     */
+    public static BufferedImage getBufferedImage(BufferedImage logo, String qrUrl) {
+        try {
+            MultiFormatWriter multiFormatWriter = new MultiFormatWriter();
+            // 参数顺序分别为：编码内容，编码类型，生成图片宽度，生成图片高度，设置参数
+            BitMatrix bm = multiFormatWriter.encode(qrUrl, BarcodeFormat.QR_CODE, WIDTH, HEIGHT, hints);
+            BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
+            // 开始利用二维码数据创建Bitmap图片，分别设为黑（0xFFFFFFFF）白（0xFF000000）两色
+            for (int x = 0; x < WIDTH; x++) {
+                for (int y = 0; y < HEIGHT; y++) {
+                    image.setRGB(x, y, bm.get(x, y) ? QRCOLOR : BGWHITE);
+                }
+            }
+            int width = image.getWidth();
+            int height = image.getHeight();
+            if (Objects.nonNull(logo)) {
+                // 设置圆角
+                //logo=setRadius(logo,width);
+                // 构建绘图对象
+                Graphics2D g = image.createGraphics();
+                // 开始绘制logo图片
+                g.drawImage(logo, width * 2 / 5, height * 2 / 5, width * 2 / 10, height * 2 / 10, null);
+                g.dispose();
+                logo.flush();
+            }
+
+            image.flush();
+            return image;
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return null;
+
+
+    }
+
+    /**
+     * 图片设置圆角
+     * @param image 图片流
+     * @return radius 半径
+     */
+    public static BufferedImage setRadius(BufferedImage image,int radius){
+        int w = image.getWidth();
+        int h = image.getHeight();
+        BufferedImage output = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
+        Graphics2D g2 = output.createGraphics();
+        g2.setComposite(AlphaComposite.Src);
+        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
+        g2.setColor(Color.WHITE);
+        g2.fill(new RoundRectangle2D.Float(0, 0, w, h, radius, radius));
+        g2.setComposite(AlphaComposite.SrcAtop);
+        g2.drawImage(image, 0, 0, null);
+        g2.dispose();
+        return output;
+    }
+
+    /**
+     * 设置图片文本
+     * @param image
+     * @param height
+     * @param note
+     * @return
+     */
+    public static BufferedImage setImgText(BufferedImage image,int height,String note){
+        // 自定义文本描述
+        if (!StringUtils.isEmpty(note)) {
+            // 新的图片，把带logo的二维码下面加上文字
+            BufferedImage outImage = new BufferedImage(400, 445, BufferedImage.TYPE_4BYTE_ABGR);
+            Graphics2D outg = outImage.createGraphics();
+            // 画二维码到新的面板
+            outg.drawImage(image, 0, 0, image.getWidth(), image.getHeight(), null);
+            // 画文字到新的面板
+            outg.setColor(Color.BLACK);
+            // 字体、字型、字号
+            outg.setFont(new Font("宋体", Font.BOLD, 20));
+            int strWidth = outg.getFontMetrics().stringWidth(note);
+            if (strWidth > 399) {
+                // 长度过长就换行
+                String note1 = note.substring(0, note.length() / 2);
+                String note2 = note.substring(note.length() / 2, note.length());
+                int strWidth1 = outg.getFontMetrics().stringWidth(note1);
+                int strWidth2 = outg.getFontMetrics().stringWidth(note2);
+                outg.drawString(note1, 200 - strWidth1 / 2, height + (outImage.getHeight() - height) / 2 + 12);
+                BufferedImage outImage2 = new BufferedImage(400, 485, BufferedImage.TYPE_4BYTE_ABGR);
+                Graphics2D outg2 = outImage2.createGraphics();
+                outg2.drawImage(outImage, 0, 0, outImage.getWidth(), outImage.getHeight(), null);
+                outg2.setColor(Color.BLACK);
+                // 字体、字型、字号
+                outg2.setFont(new Font("宋体", Font.BOLD, 30));
+                outg2.drawString(note2, 200 - strWidth2 / 2,outImage.getHeight() + (outImage2.getHeight() - outImage.getHeight()) / 2 + 5);
+                outg2.dispose();
+                outImage2.flush();
+                outImage = outImage2;
+            } else {
+                // 画文字
+                outg.drawString(note, 200 - strWidth / 2, height + (outImage.getHeight() - height) / 2 + 12);
+            }
+            outg.dispose();
+            outImage.flush();
+            image = outImage;
+        }
+        return image;
+    }
+
+}
\ No newline at end of file

src/main/java/com/dlbridge/jadp/plugins/cmpt/web/MicroApiController.java

@@ -991,12 +991,18 @@ public class MicroApiController {
         return Result.fail().setContent(results);
     }
 
-
+    /**
+     * 自动打卡获取开枪时间或者结束时间及其是否清空小程序内存
+     * @param cmptId
+     * @param roadId
+     * @param markNo
+     * @return
+     */
     @GetMapping(value = "/getRoadOpenTimeAndCloseTime/{cmptId}/{roadId}/{markNo}")
     @ApiResponses({
             @ApiResponse(code = -1, message = "失败", response = ObjectUtils.Null.class),
             @ApiResponse(code = 200, message = "成功", response = Result.class, responseContainer = "List")})
-    @ApiOperation(value = "自动打卡获取开枪时间或者结束时间", notes = "自动打卡获取开枪时间或者结束时间",  tags = "自动打卡获取开枪时间或者结束时间")
+    @ApiOperation(value = "自动打卡获取开枪时间或者结束时间及其是否清空小程序内存", notes = "自动打卡获取开枪时间或者结束时间及其是否清空小程序内存",  tags = "自动打卡获取开枪时间或者结束时间及其是否清空小程序内存")
     public Result getRoadOpenTimeAndCloseTime(@PathVariable("cmptId") int cmptId,@PathVariable("roadId") int roadId,@PathVariable("markNo") String markNo){
         HashMap<String,Long> roadsGpsCheckpointMapList=remoteService.getRoadOpenTimeAndCloseTime(cmptId,roadId);
         long  _isclean=remoteService.getIsCleanByMarkNo(cmptId,roadId,markNo);
@@ -1004,4 +1010,20 @@ public class MicroApiController {
         return Result.success().setContent(roadsGpsCheckpointMapList);
     }
 
+    /**
+     * 根据号码牌获取此号码牌的打卡记录和成绩
+     * @param cmptId
+     * @param markNo
+     * @return
+     */
+    @GetMapping(value = "/getCheckPointRecordByMarkNo/{cmptId}/{markNo}")
+    @ApiResponses({
+            @ApiResponse(code = -1, message = "失败", response = ObjectUtils.Null.class),
+            @ApiResponse(code = 200, message = "成功", response = Result.class, responseContainer = "List")})
+    @ApiOperation(value = "根据号码牌获取此号码牌的打卡记录和成绩", notes = "根据号码牌获取此号码牌的打卡记录和成绩",  tags = "根据号码牌获取此号码牌的打卡记录和成绩")
+    public Result getCheckPointRecordByMarkNo(@PathVariable("cmptId") int cmptId,@PathVariable("markNo") String markNo){
+        List<RoadTimerCheckpoint> roadTimerCheckpointList=remoteService.getAllCPScoreByMarkNo(cmptId,markNo);
+        return Result.success().setContent(roadTimerCheckpointList);
+    }
+
 }

src/main/java/com/dlbridge/jadp/plugins/cmpt/web/ScanController.java

+package com.dlbridge.jadp.plugins.cmpt.web;
+
+import com.dlbridge.feign.ScoreService;
+import com.dlbridge.jadp.common.interceptor.PageView;
+import com.dlbridge.jadp.plugins.cmpt.bean.Road;
+import com.dlbridge.jadp.plugins.cmpt.bean.RoadsGpsCheckpointMap;
+import com.dlbridge.jadp.plugins.cmpt.dao.model.Cmpt;
+import com.dlbridge.jadp.plugins.cmpt.service.*;
+import com.dlbridge.jadp.plugins.cmpt.utils.QRCodeUtil;
+import lombok.extern.log4j.Log4j2;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.servlet.ModelAndView;
+import springfox.documentation.annotations.ApiIgnore;
+
+import javax.annotation.Resource;
+import javax.imageio.ImageIO;
+import javax.servlet.ServletOutputStream;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.awt.image.BufferedImage;
+import java.io.File;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.util.HashMap;
+import java.util.List;
+import java.util.zip.ZipEntry;
+import java.util.zip.ZipOutputStream;
+import java.net.URL;
+@Controller
+@Log4j2
+@RequestMapping("gk/scan")
+@ApiIgnore
+public class ScanController {
+
+    @Resource
+    private CmptService cmptService;
+
+    @Resource
+    private CmptScoreFieldService cmptScoreFieldService;
+    @Resource
+    private CmptScoreFieldValueService cmptScoreFieldValueService;
+
+    @Resource
+    private CmptScoreRuleService ruleService;
+
+    @Resource
+    private ScoreService scoreService;
+
+    @Resource
+    RemoteService remoteService;
+    @Resource
+    ScanService scanService;
+
+    /**
+     * 返回扫描打卡的设置页面
+     * @param cmptId
+     * @param mv
+     * @return
+     */
+    @RequestMapping("index/{cmptId}")
+    @PageView
+    public ModelAndView index(@PathVariable("cmptId") Integer cmptId, ModelAndView mv) {
+        Cmpt cmpt = cmptService.queryCmptBycmptId(cmptId);
+        List<Road> roads = remoteService.getRoads(cmptId);
+        mv.setViewName("cmpt/scan");
+        mv.addObject("cmpt", cmpt);
+        mv.addObject("roads", roads);
+        return mv;
+    }
+
+    /**
+     * 根据赛事id或者项目Id，获取全部的二维码图片，下载zip文件
+     * @param httpServletRequest
+     * @param httpServletResponse
+     * @param cmptId
+     * @param roadId
+     * @throws IOException
+     * @throws Exception
+     */
+    @GetMapping("downLoadAllQRByRoadId/{cmptId}/{roadId}")
+    public  void  downLoadAllQRByRoadId(HttpServletRequest httpServletRequest, HttpServletResponse  httpServletResponse, @PathVariable("cmptId") int cmptId,@PathVariable("roadId") int roadId) {
+        //获取项目的名字
+        HashMap<String,Object> roadinfo= remoteService.getRoadinfoByroadId(cmptId,roadId);
+        String roadName=(String)roadinfo.get("roadName");
+        //获取赛事logo放在二维码中间
+        Cmpt cmpt=cmptService.queryCmptBycmptId(cmptId);
+        String logostr=cmpt.getLogo();
+        HttpURLConnection httpUrl = null;
+        try {
+            URL url = new URL(logostr);
+            httpUrl = (HttpURLConnection) url.openConnection();
+            httpUrl.connect();
+            InputStream in=httpUrl.getInputStream();
+            BufferedImage logoimg=ImageIO.read(in);
+        //导出zip文件的名字
+        String zipName=new String(roadName.getBytes(),"ISO-8859-1") + ".zip";
+        //定义返回zip文件的输出流格式
+        httpServletResponse.setContentType("application/zip");
+        //设置heard头
+        httpServletResponse.setHeader("Content-disposition","attachment; filename=" +zipName );
+        //将文件的输出流放在zip输出流中，以zip格式输出
+        OutputStream outputStream = httpServletResponse.getOutputStream();
+        ZipOutputStream zipOutputStream = new ZipOutputStream(outputStream);
+        //获取这个项目有多少打卡点，生成相应的二维码
+        List<RoadsGpsCheckpointMap> roadsGpsCheckpointMapList=remoteService.getTimeCheckpointByRoadId(cmptId,roadId);
+        for(int i=0;i<roadsGpsCheckpointMapList.size();i++){
+            int checkpointId=roadsGpsCheckpointMapList.get(i).getCheckpointId();
+            String checkpointName=roadsGpsCheckpointMapList.get(i).getCheckpointName();
+            BufferedImage buffImg = QRCodeUtil.getBufferedImage(logoimg, String.valueOf(checkpointId));
+            ZipEntry entry = new ZipEntry(checkpointName+".png");
+            zipOutputStream.putNextEntry(entry);
+            ImageIO.write(buffImg, "png", zipOutputStream);
+        }
+        //zip文件流执行完，将各种流关闭
+        zipOutputStream.flush();
+        zipOutputStream.close();
+        outputStream.flush();
+        outputStream.close();
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+    }
+
+}

src/main/resources/application.properties

-spring.profiles.active=test
+spring.profiles.active=dev

src/main/webapp/WEB-INF/views/cmpt/scan.jsp

+<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
+<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
+<!doctype html>
+<html>
+<head>
+    <title>扫描打卡</title>
+    <!-- Bootstrap CSS-->
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/vendor/bootstrap/css/bootstrap.min.css">
+    <!-- Font Awesome CSS-->
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/vendor/font-awesome/css/font-awesome.min.css">
+    <!-- Fontastic Custom icon font-->
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/fontastic.css">
+    <!-- Google fonts - Poppins -->
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/font-css.css">
+    <!-- theme stylesheet-->
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/style.default.css" id="theme-stylesheet">
+    <!-- Custom stylesheet - for your changes-->
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/custom.css">
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/juery-ui-1.12.css">
+    <!-- Favicon-->
+    <link rel="shortcut icon" href="img/favicon.ico">
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/custom.css">
+    <link rel="stylesheet" href="${ctxStatic}/newdermon/css/main.css">
+    <link rel="stylesheet" href="${ctxStatic}/cmpt/setting.css">
+    <link rel="stylesheet" href="${ctxStatic}/leaflet/css/leaflet.css?v=<%=System.currentTimeMillis()%>"/>
+    <link rel="stylesheet" href="${ctxStatic}/leaflet/css/leaflet_label.css"/>
+    <link rel="stylesheet" href="${ctxStatic}/cmpt/road.css"/>
+    <link rel="stylesheet" href="${ctxStatic}/cmpt/road-new.css"/>
+    <script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
+    <script src="${ctxStatic}/newdermon/vendor/jquery/jquery.min.js"></script>
+    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/layer/layer.js"></script>
+    <link rel="stylesheet" href="${ctxStatic}/layer/skin/layer.css">
+    <link rel="stylesheet" href="/static/cmpt/score.css?<%=System.currentTimeMillis()%>">
+    <style>
+        .data{
+            width: 100%;
+            margin: 20px 0px;
+            background: #FFFFFF;
+            position: relative;
+        }
+        .road-name{
+            font-size: 20px;
+            color: #999999;
+            line-height: 65px;
+            padding: 0px 27px;
+            cursor: pointer;
+            height: 65px;
+            border-radius: 0px 4px 0px 0px;
+            border: 1px solid rgba(229,229,229,1);
+            position: relative;
+            min-width: 170px;
+            text-align: center;
+        }
+        .road-name.active{
+            color: #ce3939;
+            border-bottom: 1px solid white;
+        }
+        table{
+            width: 96%;
+            padding: 0px 2%;
+        }
+        table thead th{
+            padding-left: 26px;
+        }
+        table thead th td{
+            font-size: 12px;
+            color: #f3f3f3;
+        }
+        table tbody tr{
+            background: rgba(250,250,250,1);
+            height: 70px;
+            border-bottom: 5px solid white;
+            border-radius: 5px;
+        }
+        table tbody tr td{
+            padding-left: 26px;
+        }
+        .road{
+            display: flex;
+            border-bottom: 1px solid #f4f4f4;
+        }
+        .select-group{
+            position: relative;
+            width: 200px;
+        }
+        .select{
+            text-transform: none;
+            width: 200px;
+            height: 40px;
+            padding: 0px 5px;
+            border-radius: 4px;
+            background: rgba(250,250,250,1);
+            border: none;
+            outline: none;
+            appearance:none;
+            -moz-appearance:none;
+            -webkit-appearance:none;
+            cursor: pointer;
+        }
+        .load{
+            display: none;
+            width: 146px;
+            height: 40px;
+            background: rgba(206,57,57,1);
+            border-radius: 4px;
+            color: white;
+            display: inline-block;
+            line-height: 40px;
+            position: absolute;
+            right: 35px;
+            top: 72px;
+            text-align: center;
+            font-size: 18px;
+            cursor: pointer;
+        }
+        .QRCodeDown{
+            width:146px;
+            height:40px;
+            border-radius:4px;
+            border:1px solid rgba(206,57,57,1);
+            font-size:16px;
+            font-family:PingFangSC-Regular,PingFang SC;
+            font-weight:400;
+            color:rgba(206,57,57,1);
+            line-height:22px;
+            position: absolute;
+            cursor: pointer;
+            text-align: center;
+            padding-top: 8px;
+            right: 200px;
+            top: 72px;
+
+        }
+        .no-route-icon{
+            width: 16px;
+            height: 16px;
+            background: url("/static/images/warning.png");
+            background-size: contain;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+        .load{
+            display: none;
+        }
+        .noroute{
+            display: none;
+            position: absolute;
+            width: 140px;
+            font-size: 16px;
+            bottom: -32px;
+            height: 65px;
+            left: 50%;
+            margin-left: -69px;
+        }
+    </style>
+</head>
+<body>
+<jsp:include page="../common/header.jsp"></jsp:include>
+<div class="page-content d-flex align-items-stretch main-body">
+    <jsp:include page="../common/menu.jsp"></jsp:include>
+    <div class="rght">
+        <div class="title-new">
+            <span class="title">扫描打卡</span>
+            <div style="line-height: 22px">
+                <span class="road-notice"></span>
+                <span class="road-notice-txt">此功能仅适用于线下自助赛</span>
+            </div>
+        </div>
+
+        <div class="section">
+            <h3 class="title">设置打卡点</h3>
+            <div style="line-height: 22px">
+                <span class="road-notice"></span>
+                <span class="road-notice-txt">仅比赛日之前可修改；所有项目和打卡点设置源自计时设置</span>
+            </div>
+
+            <div class="data">
+                <div class="road">
+                    <c:forEach var="item" items="${roads}" varStatus="idx">
+                        <div class="road-name ${idx.index==0?'active':''}" road-id="${item.roadId}">
+                            <input type="hidden" id="roadId" name="roadId" value="${item.roadId}">
+                            <span>${item.name}</span>
+                        </div>
+                    </c:forEach>
+                </div>
+                <span class="QRCodeDown">下载全部二维码</span>
+                <span class="load">导入路线</span>
+                <div class="noroute">
+                    <span class="no-route-icon"></span>
+                    <span class="no-route">未检索到标记点</span>
+                </div>
+                <table>
+                    <thead>
+                    <tr>
+                        <th  style="width: 120px">打卡点</th><th style="width: 120px">路线标注</th><th>经纬度</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <%--
+                    <tr>
+                        <td>终点</td>
+                        <td>
+                            <div class="select-group">
+                                <select name="" class="select">
+                                    <option value="">-- --</option>
+                                    <option value="">1</option>
+                                </select>
+                                <span class="down-arrow"></span>
+                            </div>
+                        </td>
+                        <td>121.12193,39.1929182</td>
+                    </tr>--%>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div style="display: flex;justify-content: center; margin: 60px;">
+            <span class=" save-btn">保存</span>
+        </div>
+
+    </div>
+
+    <script src="${ctxStatic}/newdermon/vendor/popper.js/umd/popper.min.js"></script>
+    <script src="${ctxStatic}/js/qikoo.js"></script>
+    <script src="${ctxStatic}/js/scan.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file

src/main/webapp/WEB-INF/views/common/menu.jsp

@@ -154,13 +154,19 @@
                     <span class="menu-txt">自动打卡</span>
                 </a>
             </li>
+            <li class="scan menu-item">
+                <a href="/gk/scan/index/${cmpt.cmptId}?uId=${uId}&cId=${cId}&timestamp=${timestamp}&sign=${sign}">
+                    <span class="menuico left-arrow"></span>
+                    <span class="menu-txt">扫描打卡</span>
+                </a>
+            </li>
         </ul>
     </ul>
 </nav>
 <script>
     var classes = ['cmptSetting', 'nameList', 'manual', 'contact',
                     'route', 'road', 'equip', 'photo', 'news',
-                    'banner','score','auto'];
+                    'banner','score','auto','scan'];
     let url = document.location.href;
     var done = false;
     for (var i in classes) {

src/main/webapp/static/js/scan.js

+$(document).ready(function () {
+    //切换项目，获取不同计时的打卡点
+    var roadId = $('.road-name').first().attr('road-id');
+    getTimeCp(roadId);
+    //获取gpx路线上的打卡点
+
+    //初始化已经配置好的GPS计时点配置列表
+
+    $('body').on('change','table select',function () {
+        var option = $(this).find('option:selected')
+        var lat = Number(option.attr('data-lat')).toFixed(6);
+        var lng = Number(option.attr('data-lng')).toFixed(6);
+        $(this).parents('td').next().text(lat+","+lng);
+    });
+
+
+    /**
+     * 点击项目切换不同项目的配置情况
+     */
+    $('body').on('click','.road-name',function () {
+        $('.road-name').removeClass('active');
+        $(this).addClass("active");
+        var roadId=$(this).attr('road-id');
+        //获取计时系统的计时点列表
+        getTimeCp(roadId);
+    });
+
+    $('.save-btn').click(function () {
+        var params = [];
+        var roadId = $('.road-name.active').attr('road-id');
+        $.each($('tbody tr'),function (i,e) {
+            var param = {};
+            var id = $(e).attr('data-cpmap-id');
+            var checkpointId = $(e).find('td:eq(0)').attr('data-cp-id');
+            var checkpointDistance=$(e).find('td:eq(0)').attr('data-cp-distance');
+            var cmptId = getCmptId();
+            var checkpointName = $(e).find('td:eq(0)').text();
+            var checkpointGpsName = $(e).find('select').val()
+            var checkpointLatitude = $(e).find('td:eq(2)').text().split(',')[0];
+            var checkpointLongitude = $(e).find('td:eq(2)').text().split(',')[1];
+
+            param.id = id;
+            param.roadId = roadId;
+            param.checkpointId = checkpointId;
+            param.checkpointDistance=checkpointDistance;
+            param.cmptId = cmptId;
+            param.checkpointName = checkpointName;
+            param.checkpointGpsName = checkpointGpsName;
+            param.checkpointLatitude = checkpointLatitude;
+            param.checkpointLongitude = checkpointLongitude;
+            params.push(param)
+        });
+        saveCpMap(params)
+    });
+
+    $('.load').click(function () {
+        $('li.road a').get()[0].click();
+    });
+
+    /**
+     * 点击‘下载全部二维码’按钮，完成二维码的下载
+     */
+    $('.QRCodeDown').click(function () {
+        var roadId = $('.road-name.active').attr('road-id');
+        console.log(roadId);
+        // $.ajax({
+        //     type: 'GET',
+        //     url : '/gk/scan/downLoadAllQRByRoadId/'+getCId()+"/"+roadId,
+        //     contentType: 'application/zip',
+        //     dataType: 'text',
+        //     headers: {'Api-Version': '3.4'}
+        // });
+        const link = document.createElement('a')
+        const body = document.querySelector('body')
+        link.href = "/gk/scan/downLoadAllQRByRoadId/"+getCId()+"/"+roadId
+        // fix Firefox
+        link.style.display = 'none'
+        body.appendChild(link)
+        link.click()
+        body.removeChild(link)
+    });
+
+});
+
+
+
+//路线标注下来点击事情，获取下拉值，并更新选中的值
+$(".selectgpscheckpoint").change(function(){
+
+});
+
+
+/**
+ * 初始化已经配置好的GPS计时点配置列表
+ * @param roadId
+ */
+function getCpGpsList(roadId) {
+    $.ajax({
+        url : '/gk/roadGpsCheckpoint/getRoadsGpsCheckpoint/'+getCId()+"/"+roadId,
+        success:function (data) {
+            if(data.status){
+
+                $.each(data.content,function (i,e) {
+                    var tr = $('td[data-cp-id='+e.checkpointId+']').parent();
+                    tr.find('select').val(e.checkpointGpsName);
+                    tr.find('select').trigger('change');
+                    tr.attr('data-cpmap-id',e.id);
+                });
+            }
+        }
+    })
+}
+
+
+/**
+ * 获取计时的打卡点
+ * @param roadId
+ */
+function getTimeCp(roadId) {
+    $('tbody').empty()
+    $.ajax({
+        url : '/gk/roadGpsCheckpoint/getTimeCheckpointByRoadId/'+getCId()+"/"+roadId,
+        success:function (data) {
+            if(data.status){
+                $.each(data.content,function (i,e) {
+                    $('tbody').append(' \n' +
+                        '                    <tr>\n' +
+                        '                        <td data-cp-id="'+e.checkpointId+'" data-cp-distance="'+e.checkpointDistance+'">'+e.checkpointName+'</td>\n' +
+                        '                        <td>\n' +
+                        '                            <div class="select-group">\n' +
+                        '                                <select class="select gpscheckpoint">\n' +
+                        '                                </select>\n' +
+                        '                                <span class="down-arrow"></span>\n' +
+                        '                            </div>\n' +
+                        '                        </td>\n' +
+                        '                        <td>'+Number(e.checkpointLatitude).toFixed(6)+','+Number(e.checkpointLongitude).toFixed(6)+'</td>\n' +
+                        '                    </tr>');
+                })
+                getGpsCp(roadId);
+            }
+        }
+    })
+}
+
+
+
+/**
+ * 获取路线上的打卡点
+ * @param roadId
+ */
+function getGpsCp(roadId) {
+    $.ajax({
+        url : '/gk/roadGpsCheckpoint/getGpsCheckPointByRoadId/'+getCId()+"/"+roadId,
+        success:function (data) {
+            if(data.status){
+                $('.load').hide();
+                $('.noroute').hide();
+                var optionstring="<option value='' data-lat='' data-lng='' >- -</option>";
+                //将之前的下拉框的值清空
+                $(".gpscheckpoint").empty();
+                $.each(data.content,function (i,e) {
+                    //获取项目路线上的打卡点并初始化到下拉框
+                    optionstring+='<option data-lat="'+e.checkpointLatitude+'"  data-lng="'+e.checkpointLongitude+'" value="'+e.checkpointGpsName+'">'+e.checkpointGpsName+'</option>';
+                });
+                $.each($(".gpscheckpoint"),function (i,e) {
+                    $(e).append(optionstring);
+                });
+                getCpGpsList(roadId);
+            }else{
+                $('.road-name[road-id="'+roadId+'"]').append($('.noroute'));
+                $('.noroute').show();
+                $('.load').attr('road-id',roadId)
+                $('.load').show();
+                $(".gpscheckpoint").append("<option value='' data-lat='' data-lng=''>- -</option>");
+            }
+        }
+    })
+}
+
+/**
+ *
+ * 保存对应关系
+ *
+ */
+function saveCpMap(param){
+    $.ajax({
+        url : '/gk/roadGpsCheckpoint/save',
+        type:'post',
+        contentType:'application/json',
+        data:JSON.stringify(param),
+        success:function (data) {
+            if(data.status){
+                layer.msg('保存成功！')
+            }else{
+                layer.msg('操作失败！')
+            }
+        }
+
+    })
+}
\ No newline at end of file