coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

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

Browse Source
This commit is contained in:
程序员小墨 2023-04-25 01:41:23 +08:00
parent b68fde365f
commit 65563f5b75
13 changed files with 192 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TODOs.md
View File

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

6
backend/microservice-gateway/src/main/resources/application.yml
View File

@ -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

20
backend/microservice-gateway/src/main/resources/static/guard/assets/css/scan-result.css Normal file
View File

@ -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);
}

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

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

39
backend/microservice-gateway/src/main/resources/static/guard/assets/js/websocket-message-panel.js Normal file
View File

@ -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

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

@ -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()
})()

33
backend/microservice-gateway/src/main/resources/static/guard/assets/svg/enter-gate.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

33
backend/microservice-gateway/src/main/resources/static/guard/assets/svg/scan-success.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

@ -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>

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

@ -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

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

@ -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);

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

@ -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);
}

2
weixin-miniprogram/project.private.config.json
View File

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