小程序扫码门禁端显示详情

TODOs.md

@@ -42,6 +42,9 @@
 Java代码中小程序AppID、密钥处理，小程序代码中小程序AppID处理
 
 
+# TODO 全部域名配置的地方添加 FIXME 环境配置
+
+
 # host 文件地址
 
 C:\Windows\System32\drivers\etc

backend/microservice-gateway/src/main/resources/application.yml

@@ -43,7 +43,7 @@ spring:
           filters: # 路由过滤器，使用自定义的限流过滤器工厂
             - name: RateLimitByIp # 设置每秒允许5个请求，每次请求需要1个令牌
               args:
-                rate: 5.0
+                rate: 10.0
                 permits: 1
 
         - id: access
@@ -54,7 +54,7 @@ spring:
           filters: # 路由过滤器，使用自定义的限流过滤器工厂
             - name: RateLimitByIp # 设置每秒允许5个请求，每次请求需要1个令牌
               args:
-                rate: 5.0
+                rate: 10.0
                 permits: 1
 
         - id: access-websocket
@@ -70,7 +70,7 @@ spring:
           filters: # 路由过滤器，使用自定义的限流过滤器工厂
             - name: RateLimitByIp # 设置每秒允许5个请求，每次请求需要1个令牌
               args:
-                rate: 5.0
+                rate: 10.0
                 permits: 1
 
         - id: test1

backend/microservice-gateway/src/main/resources/static/guard/assets/css/scan-result.css

@@ -0,0 +1,20 @@
+.scan-result-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 20;
+    display: grid;
+    place-items: center;
+}
+
+.scan-result-image {
+    width: min(55vw, 55vh);
+    transition: 0.3s;
+    transform: scale(0.001);
+}
+
+.scan-result-image-show {
+    transform: scale(1);
+}

backend/microservice-gateway/src/main/resources/static/guard/assets/css/setting-panel.css

@@ -62,7 +62,7 @@
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 /* 弹窗列表样式 */

backend/microservice-gateway/src/main/resources/static/guard/assets/js/websocket-message-panel.js

@@ -0,0 +1,39 @@
+const URLScanSuccessImage = "./assets/svg/scan-success.svg"
+const URLEnterGateImage = "./assets/svg/enter-gate.svg"
+const DOMFullScreenMask = document.getElementById("full-screen-mask")
+const DOMScanResultContainer = document.getElementById("scan-result-container")
+const DOMQRCodeScanSuccessImage = document.getElementById("qrcode-scan-success")
+
+var isShowing = false
+
+function showResult(imageType) {
+    console.log("showResult")
+    if (isShowing) {
+        // console.log("showResult() skipped coz showing.")
+        // 等待 0.1s 重试
+        setTimeout(() => showResult(imageType), 100)
+        return
+    }
+    isShowing = true
+    DOMQRCodeScanSuccessImage.src = imageType === "onscan" ? URLScanSuccessImage : URLEnterGateImage
+    DOMFullScreenMask.classList.remove("hidden")
+    DOMScanResultContainer.classList.remove("hidden")
+    //
+    setTimeout(() => {
+        DOMQRCodeScanSuccessImage.classList.add("scan-result-image-show")
+    }, 100)
+
+    setTimeout(function hideResult() {
+        console.log("hideResult")
+        DOMQRCodeScanSuccessImage.classList.remove("scan-result-image-show")
+        setTimeout(() => {
+            DOMQRCodeScanSuccessImage.src = ""
+            DOMFullScreenMask.classList.add("hidden")
+            DOMScanResultContainer.classList.add("hidden")
+            isShowing = false
+        }, 300)
+    }, 3000)
+}
+
+// setTimeout(showResult, 100)
+window.showResult = showResult

backend/microservice-gateway/src/main/resources/static/guard/assets/js/websocket.js

@@ -1,6 +1,11 @@
-window.wsUrl = 'wss://epp.only4.work/access/websocket/1';
+/**
-// window.wsUrl = 'ws://127.0.0.1:80/access/websocket/1';
+ * FIXME 环境配置
-// window.wsUrl = 'ws://127.0.0.1:8002/access/websocket/1';
+ *
+ * window.wsUrl
+ * - 线上环境：'wss://epp.only4.work/access/websocket/1'
+ * - 开发环境：'ws://127.0.0.1:80/access/websocket/1';   'ws://127.0.0.1:8002/access/websocket/1';
+ */
+window.wsUrl = 'ws://127.0.0.1:80/access/websocket/1';
 
 window.ws = null; // WebSocket 实例对象
 
@@ -34,9 +39,21 @@ window.ws = null; // WebSocket 实例对象
         ws.onmessage = ({data}) => {
             console.log('onmessage readyState', ws.readyState)
             // 注意此时的data是json格式的 需要转化下
-            console.log('onmessage 有新消息啦=======>', JSON.parse(data))
+            let result = JSON.parse(data)
+            console.log('onmessage 有新消息啦=======>', result)
             // 实例对象的send方法给服务器发送消息
             ws.send('客户端发送的消息')
+
+            switch (result.action) {
+                case 'onscan':
+                case 'onopen':
+                    console.log(result.action)
+                    window.showResult(result.action)
+                    break;
+                default:
+                    console.log("switch=>default", result.action)
+                    break;
+            }
         }
 
         // 实例对象的onclose属性，用于连接关闭后的回调 函数
@@ -58,5 +75,6 @@ window.ws = null; // WebSocket 实例对象
         }
         return ws
     }
+
     window.ws = createConn()
 })()

backend/microservice-gateway/src/main/resources/static/guard/assets/svg/enter-gate.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <circle cx="50" cy="50" r="45" stroke="white" stroke-width="7" fill="white"/>
+
+  <!-- 外围圆圈 -->
+  <circle cx="50" cy="50" r="45" stroke="#006600" stroke-width="8" fill="none">
+    <animate id="circle" attributeName="stroke-dasharray" from="0,282.743" to="282.743,0" dur="1s" begin="0s" fill="freeze"/>
+    <animateTransform attributeName="transform" type="rotate" from="-90 50 50" to="270 50 50" dur="1s" begin="0s" fill="freeze"/>
+  </circle>
+
+  <!-- 对勾动画 -->
+  <path d="M20 50 L40 70 L80 30" stroke="#006600" stroke-width="8" fill="none" visibility="hidden">
+    <set attributeName="visibility" from="hidden" to="visible" begin="circle.end+0.1s"/>
+    <!-- 对勾开始动画 -->
+    <!-- <animate attributeName="stroke-dasharray" from="0,120" to="120,0" dur="1s" begin="circle.end+0.1s" repeatCount="indefinite"/> -->
+    <animate id="check" attributeName="stroke-dasharray" from="0,120" to="120,0" dur="1s" begin="circle.end+0.1s" repeatCount="1"/>
+    <!-- 对勾隐藏动画 -->
+    <set attributeName="visibility" from="visible" to="hidden" begin="check.end+0.1s"/>
+  </path>
+
+  <!-- 扫码成功 -->
+  <!-- <text x="50" y="55" font-size="20" text-anchor="middle" fill="#006600" visibility="hidden">
+    扫码成功
+    <set attributeName="visibility" from="hidden" to="visible" begin="check.end+0.1s"/>
+  </text> -->
+  <text x="50" y="50" font-weight="bold" text-anchor="middle" fill="#006600" visibility="hidden">
+    <tspan x="50" dx="3" dy="-3" font-size="26">大门</tspan>
+    <tspan x="50" dy="23" font-size="20">已开启</tspan>
+    <set attributeName="visibility" from="hidden" to="visible" begin="check.end+0.1s"/>
+  </text>
+</svg>

backend/microservice-gateway/src/main/resources/static/guard/assets/svg/scan-success.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <circle cx="50" cy="50" r="45" stroke="white" stroke-width="7" fill="white"/>
+
+  <!-- 外围圆圈 -->
+  <circle cx="50" cy="50" r="45" stroke="#006600" stroke-width="8" fill="none">
+    <animate id="circle" attributeName="stroke-dasharray" from="0,282.743" to="282.743,0" dur="1s" begin="0s" fill="freeze"/>
+    <animateTransform attributeName="transform" type="rotate" from="-90 50 50" to="270 50 50" dur="1s" begin="0s" fill="freeze"/>
+  </circle>
+
+  <!-- 对勾动画 -->
+  <path d="M20 50 L40 70 L80 30" stroke="#006600" stroke-width="8" fill="none" visibility="hidden">
+    <set attributeName="visibility" from="hidden" to="visible" begin="circle.end+0.1s"/>
+    <!-- 对勾开始动画 -->
+    <!-- <animate attributeName="stroke-dasharray" from="0,120" to="120,0" dur="1s" begin="circle.end+0.1s" repeatCount="indefinite"/> -->
+    <animate id="check" attributeName="stroke-dasharray" from="0,120" to="120,0" dur="1s" begin="circle.end+0.1s" repeatCount="1"/>
+    <!-- 对勾隐藏动画 -->
+    <set attributeName="visibility" from="visible" to="hidden" begin="check.end+0.1s"/>
+  </path>
+
+  <!-- 扫码成功 -->
+  <!-- <text x="50" y="55" font-size="20" text-anchor="middle" fill="#006600" visibility="hidden">
+    扫码成功
+    <set attributeName="visibility" from="hidden" to="visible" begin="check.end+0.1s"/>
+  </text> -->
+  <text x="50" y="50" font-size="27" font-weight="bold" text-anchor="middle" fill="#006600" visibility="hidden">
+    <tspan x="50" dx="4" dy="-5">扫码</tspan>
+    <tspan x="50" dy="28">成功</tspan>
+    <set attributeName="visibility" from="hidden" to="visible" begin="check.end+0.1s"/>
+  </text>
+</svg>

backend/microservice-gateway/src/main/resources/static/guard/index.html

@@ -10,6 +10,7 @@
     <title>社区疫情防控系统 - 门禁端</title>
     <link rel="stylesheet" href="./assets/css/index.css"/>
     <link rel="stylesheet" href="./assets/css/setting-panel.css"/>
+    <link rel="stylesheet" href="./assets/css/scan-result.css"/>
 </head>
 
 <body>
@@ -36,11 +37,12 @@
     </div>
     <div class="right-container">
         <h1 id="no-qrcode">请选择大门</h1>
-        <img id="qrcode" src="" style="display: none">
+        <img id="qrcode" src="" style="display: none;"><br>
         <p id="refreshTimeCountDown"></p>
     </div>
 </div>
 
+<!-- 设置页面 -->
 <div id="full-screen-mask" class="full-screen-mask hidden"></div>
 <div id="setting-container" class="setting-container hidden">
     <div class="setting-panel">
@@ -63,8 +65,15 @@
         </div>
     </div>
 </div>
+
+<!-- 扫码成功 -->
+<div id="scan-result-container" class="scan-result-container hidden">
+    <img id="qrcode-scan-success" class="scan-result-image" src="./assets/svg/scan-success.svg">
+</div>
+
 <script src="./assets/js/setting-panel.js" type="module"></script>
 <script src="./renderer.js" type="module"></script>
+<script src="assets/js/websocket-message-panel.js"></script>
 <script src="./assets/js/websocket.js"></script>
 </body>
 

backend/microservice-gateway/src/main/resources/static/guard/renderer.js

@@ -1,8 +1,18 @@
+/**
+ * FIXME 环境配置
+ *
+ * baseUrl
+ * - 线上环境："https://epp.only4.work/"
+ * - 开发环境："/"
+ * envVersion
+ * - 线上环境："release"
+ * - 开发环境："develop"
+ */
 // 定义常量
-const baseUrl = "/" // "https://epp.only4.work/"
+const baseUrl = "/"
 const url = baseUrl + "access/wechat/getUnlimitedQRCode"
 const page = "pages/index/index" // "pages/scan/entrance"
-const envVersion = "develop" // 正式版为 "release"，体验版为 "trial"，开发版为 "develop"
+const envVersion = "release" // 正式版为 "release"，体验版为 "trial"，开发版为 "develop"
 const autoColor = true
 const isHyaline = false
 const width = 500

backend/microservice-provider-access-8002/src/main/java/com/cxyxiaomo/epp/access/controller/AccessLogController.java

@@ -61,6 +61,13 @@ public class AccessLogController {
             return Res.error("参数错误");
         }
 
+        // 推送到门禁端
+        JSONObject websocketData = new JSONObject();
+        websocketData.put("gateId", gateId);
+        websocketData.put("action", "onopen");
+        String websocketJSON = websocketData.toString();
+        WebSocketServer.sendAllMessage(websocketJSON);
+
         AccessLog accessLog = new AccessLog();
         accessLog.setId(null);
         accessLog.setType(type);

backend/microservice-provider-access-8002/src/main/java/com/cxyxiaomo/epp/access/controller/GateController.java

@@ -58,6 +58,14 @@ public class GateController {
         Long gateId = Long.valueOf(id);
         Gate gate = gateService.getGateById(gateId);
         GateVO gateVO = GateVO.convertFrom(gate);
+
+        // 推送到门禁端
+        JSONObject websocketData = new JSONObject();
+        websocketData.put("gateId", id);
+        websocketData.put("action", "onscan");
+        String websocketJSON = websocketData.toString();
+        WebSocketServer.sendAllMessage(websocketJSON);
+
         return Res.success(gateVO);
     }
 

weixin-miniprogram/project.private.config.json

@@ -3,7 +3,7 @@
   "projectname": "weixin-miniprogram",
   "setting": {
     "compileHotReLoad": true,
-    "urlCheck": true,
+    "urlCheck": false,
     "bigPackageSizeSupport": true
   }
 }