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

2023-04-25 01:41:23 +08:00
parent b68fde365f
commit 65563f5b75
13 changed files with 192 additions and 12 deletions
--- a/backend/microservice-gateway/src/main/resources/application.yml
+++ b/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
--- a/backend/microservice-gateway/src/main/resources/static/guard/assets/css/scan-result.css
+++ b/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);
+}
--- a/backend/microservice-gateway/src/main/resources/static/guard/assets/css/setting-panel.css
+++ b/backend/microservice-gateway/src/main/resources/static/guard/assets/css/setting-panel.css
@@ -62,7 +62,7 @@
 }

 .hidden {
-    display: none;
+    display: none !important;
 }

 /* 弹窗列表样式 */
--- a/backend/microservice-gateway/src/main/resources/static/guard/assets/js/websocket-message-panel.js
+++ b/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
--- a/backend/microservice-gateway/src/main/resources/static/guard/assets/js/websocket.js
+++ b/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';
-// window.wsUrl = 'ws://127.0.0.1:8002/access/websocket/1';
+/**
+ * FIXME 环境配置
+ *
+ * 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()
 })()
--- a/backend/microservice-gateway/src/main/resources/static/guard/assets/svg/enter-gate.svg
+++ b/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>
--- a/backend/microservice-gateway/src/main/resources/static/guard/assets/svg/scan-success.svg
+++ b/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>
--- a/backend/microservice-gateway/src/main/resources/static/guard/index.html
+++ b/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>

--- a/backend/microservice-gateway/src/main/resources/static/guard/renderer.js
+++ b/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