后端添加域名访问首页入口单页；前端打包塞入Gateway中
This commit is contained in:
@@ -1 +0,0 @@
|
||||
编辑后右键 Compile And Reload File 修改即可生效，不用频繁重启项目
|
||||
@@ -1,89 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0556c6;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 4fr;
|
||||
grid-template-rows: 60px 1fr;
|
||||
place-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.top-container,
|
||||
.left-container {
|
||||
text-shadow: 2px 2px 2px #00000066;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 30px;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 22px;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.4vw;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
box-shadow: 0px 0px 17px 12px rgb(0 0 0 / 50%);
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: min(40vw, 68vh);
|
||||
height: min(40vw, 68vh);
|
||||
}
|
||||
|
||||
#refreshTimeCountDown {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 2em;
|
||||
color: #ffffff9c;
|
||||
}
|
||||
|
||||
/* 右上角按钮 */
|
||||
.ctrl-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
filter: invert(1) opacity(0.8);
|
||||
}
|
||||
|
||||
.btn-ctrl {
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#fullscreen-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
.full-screen-mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: black;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.setting-panel {
|
||||
width: 320px;
|
||||
height: 450px;
|
||||
background-color: white;
|
||||
border-radius: 40px;
|
||||
position: relative;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#close-setting-button {
|
||||
position: absolute;
|
||||
right: -17px;
|
||||
top: -21px;
|
||||
transform: rotate(12deg) scale(0.9);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#close-setting-button:hover {
|
||||
transform: rotate(102deg) scale(1.1);
|
||||
}
|
||||
|
||||
.save-button-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.save-setting-button {
|
||||
width: 120px;
|
||||
font-weight: 200;
|
||||
font-size: 1.1em;
|
||||
color: white;
|
||||
background-color: #0556C6;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 弹窗列表样式 */
|
||||
#gate-list {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
/*box-shadow: 0 2px 10px 0 rgb(0 0 0 / 19%);*/
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.gate-list-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 70px;
|
||||
height: 50px;
|
||||
margin: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
place-items: center;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.gate-list-item > p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gate-list-item:hover {
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.gate-list-item.active {
|
||||
background-color: #b7b7b7;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.open {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.closed {
|
||||
color: red;
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
const DOMSettingButton = document.getElementById("setting-button")
|
||||
const DOMFullScreenMask = document.getElementById("full-screen-mask")
|
||||
const DOMCloseSettingButton = document.getElementById("close-setting-button")
|
||||
const DOMSettingContainer = document.getElementById("setting-container")
|
||||
const DOMSettingPanel = document.querySelector(".setting-panel")
|
||||
const DOMSaveSettingButton = document.querySelector(".save-setting-button")
|
||||
|
||||
function showSettingPanel() {
|
||||
console.log("showSettingPanel")
|
||||
DOMFullScreenMask.classList.remove("hidden")
|
||||
DOMSettingContainer.classList.remove("hidden")
|
||||
}
|
||||
|
||||
function closeSettingPanel() {
|
||||
console.log("closeSettingPanel")
|
||||
DOMFullScreenMask.classList.add("hidden")
|
||||
DOMSettingContainer.classList.add("hidden")
|
||||
}
|
||||
|
||||
DOMSettingButton?.addEventListener('click', showSettingPanel)
|
||||
// DOMFullScreenMask?.addEventListener('click', closeSettingPanel)
|
||||
DOMSettingContainer?.addEventListener('click', closeSettingPanel)
|
||||
DOMCloseSettingButton?.addEventListener('click', closeSettingPanel)
|
||||
DOMSettingPanel.addEventListener('click', function (e) {
|
||||
e.stopPropagation()
|
||||
})
|
||||
DOMSaveSettingButton.addEventListener('click', function (e) {
|
||||
e.stopPropagation()
|
||||
if (window.selectGateId) {
|
||||
closeSettingPanel()
|
||||
location.href = "./index.html?gateId=" + window.selectGateId
|
||||
} else {
|
||||
alert("请选择大门")
|
||||
}
|
||||
})
|
||||
|
||||
// 绑定到全局
|
||||
window.showSettingPanel = showSettingPanel
|
||||
window.closeSettingPanel = closeSettingPanel
|
||||
@@ -1,62 +0,0 @@
|
||||
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';
|
||||
|
||||
window.ws = null; // WebSocket 实例对象
|
||||
|
||||
(function () {
|
||||
if (!'WebSocket' in window) {
|
||||
alert("不支持当前浏览器，请升级浏览器。")
|
||||
return
|
||||
}
|
||||
|
||||
function createConn() {
|
||||
// 创建webscoket 对象
|
||||
const ws = new WebSocket(window.wsUrl)
|
||||
// 执行上面的语句之后，客户端就会与服务器进行连接
|
||||
|
||||
// readyState返回当前实例对象的当前状态
|
||||
/*
|
||||
共有四种状态
|
||||
CONNECTING: 值为0，表示正在连接
|
||||
OPEN: 值为1，表示连接成功，可以通信了
|
||||
CLOSING 值为2， 表示连接正在关闭
|
||||
CLOSED 值为3，表示连接已经关闭了，或者打开连接失败
|
||||
*/
|
||||
|
||||
// 实例对象的onopen属性，用于指定连接成功后的回调函数
|
||||
ws.onopen = (res) => {
|
||||
console.log('onopen readyState', ws.readyState)
|
||||
console.log('onopen 连接成功==========>', res)
|
||||
}
|
||||
|
||||
// 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数
|
||||
ws.onmessage = ({data}) => {
|
||||
console.log('onmessage readyState', ws.readyState)
|
||||
// 注意此时的data是json格式的 需要转化下
|
||||
console.log('onmessage 有新消息啦=======>', JSON.parse(data))
|
||||
// 实例对象的send方法给服务器发送消息
|
||||
ws.send('客户端发送的消息')
|
||||
}
|
||||
|
||||
// 实例对象的onclose属性，用于连接关闭后的回调 函数
|
||||
// 当关闭了服务器后 会走到此回调函数
|
||||
ws.onclose = () => {
|
||||
console.log('onclose readyState', ws.readyState)
|
||||
console.log('onclose websocket连接关闭=======>')
|
||||
console.log("等待 1s 尝试重新建立连接...");
|
||||
setTimeout(function () {
|
||||
window.ws = createConn();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 连接发生错误的回调方法
|
||||
// 如当服务器没有启动 就会走到这个错误回调
|
||||
ws.onerror = (error) => {
|
||||
console.log('onerror readyState', ws.readyState)
|
||||
console.log('onerror 发生错误==========>', error)
|
||||
}
|
||||
return ws
|
||||
}
|
||||
window.ws = createConn()
|
||||
})()
|
||||
@@ -1 +0,0 @@
|
||||
<?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 viewBox="0 0 1102 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="215" height="200"><path d="M701.597538 511.842462l366.119385-366.119385a57.974154 57.974154 0 0 0 0-82.077539l-41.038769-41.038769a57.974154 57.974154 0 0 0-82.077539 0L578.481231 388.726154 212.283077 22.528a57.974154 57.974154 0 0 0-82.077539 0l-41.117538 41.117538a57.974154 57.974154 0 0 0 0 82.077539l366.119385 366.119385-366.119385 366.119384a58.131692 58.131692 0 0 0 0 82.156308l41.038769 41.038769a57.974154 57.974154 0 0 0 82.077539 0l366.119384-366.119385 366.119385 366.119385a57.974154 57.974154 0 0 0 82.077538 0l41.03877-41.038769a58.131692 58.131692 0 0 0 0-82.156308L701.597538 511.842462z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 886 B |
@@ -1 +0,0 @@
|
||||
<?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 viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M692.705882 24.094118h240.941177c36.141176 0 60.235294 24.094118 60.235294 60.235294s-24.094118 60.235294-60.235294 60.235294h-240.941177c-36.141176 0-60.235294-24.094118-60.235294-60.235294s24.094118-60.235294 60.235294-60.235294z"></path><path d="M933.647059 24.094118c36.141176 0 60.235294 24.094118 60.235294 60.235294v240.941176c0 36.141176-24.094118 60.235294-60.235294 60.235294s-60.235294-24.094118-60.235294-60.235294v-240.941176c0-36.141176 24.094118-60.235294 60.235294-60.235294z"></path><path d="M915.576471 96.376471c18.070588 24.094118 18.070588 60.235294 0 84.329411l-246.964706 246.964706c-24.094118 24.094118-60.235294 24.094118-84.329412 0-24.094118-24.094118-24.094118-60.235294 0-84.329412l246.964706-246.964705c24.094118-18.070588 60.235294-18.070588 84.329412 0zM90.352941 867.388235h240.941177c36.141176 0 60.235294 24.094118 60.235294 60.235294s-24.094118 60.235294-60.235294 60.235295H90.352941c-36.141176 0-60.235294-24.094118-60.235294-60.235295s24.094118-60.235294 60.235294-60.235294z"></path><path d="M90.352941 626.447059c36.141176 0 60.235294 24.094118 60.235294 60.235294v240.941176c0 36.141176-24.094118 60.235294-60.235294 60.235295s-60.235294-24.094118-60.235294-60.235295v-240.941176c0-36.141176 24.094118-60.235294 60.235294-60.235294z"></path><path d="M102.4 909.552941c-24.094118-24.094118-24.094118-60.235294 0-84.329412l246.964706-246.964705c24.094118-24.094118 60.235294-24.094118 84.329412 0 24.094118 24.094118 24.094118 60.235294 0 84.329411l-246.964706 246.964706c-24.094118 18.070588-60.235294 18.070588-84.329412 0zM90.352941 24.094118h240.941177c36.141176 0 60.235294 24.094118 60.235294 60.235294s-24.094118 60.235294-60.235294 60.235294H90.352941c-36.141176 0-60.235294-24.094118-60.235294-60.235294s24.094118-60.235294 60.235294-60.235294z"></path><path d="M90.352941 24.094118c36.141176 0 60.235294 24.094118 60.235294 60.235294v240.941176c0 36.141176-24.094118 60.235294-60.235294 60.235294s-60.235294-24.094118-60.235294-60.235294v-240.941176c0-36.141176 24.094118-60.235294 60.235294-60.235294z"></path><path d="M102.4 96.376471c-18.070588 24.094118-18.070588 60.235294 0 84.329411l246.964706 246.964706c24.094118 24.094118 60.235294 24.094118 84.329412 0 24.094118-24.094118 24.094118-60.235294 0-84.329412L186.729412 96.376471c-24.094118-18.070588-60.235294-18.070588-84.329412 0zM692.705882 867.388235h240.941177c36.141176 0 60.235294 24.094118 60.235294 60.235294s-24.094118 60.235294-60.235294 60.235295h-240.941177c-36.141176 0-60.235294-24.094118-60.235294-60.235295s24.094118-60.235294 60.235294-60.235294z"></path><path d="M933.647059 626.447059c36.141176 0 60.235294 24.094118 60.235294 60.235294v240.941176c0 36.141176-24.094118 60.235294-60.235294 60.235295s-60.235294-24.094118-60.235294-60.235295v-240.941176c0-36.141176 24.094118-60.235294 60.235294-60.235294z"></path><path d="M915.576471 909.552941c24.094118-24.094118 24.094118-60.235294 0-84.329412l-246.964706-246.964705c-24.094118-24.094118-60.235294-24.094118-84.329412 0-24.094118 24.094118-24.094118 60.235294 0 84.329411l246.964706 246.964706c24.094118 18.070588 60.235294 18.070588 84.329412 0z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
@@ -1 +0,0 @@
|
||||
<?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 viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.5 390.6c-29.9 0-57.9 11.6-79.1 32.8-21.1 21.2-32.8 49.2-32.8 79.1 0 29.9 11.7 57.9 32.8 79.1 21.2 21.1 49.2 32.8 79.1 32.8 29.9 0 57.9-11.7 79.1-32.8 21.1-21.2 32.8-49.2 32.8-79.1 0-29.9-11.7-57.9-32.8-79.1-21.2-21.2-49.2-32.8-79.1-32.8z"></path><path d="M924.8 626.1l-65.4-55.9c3.1-19 4.7-38.4 4.7-57.7s-1.6-38.8-4.7-57.7l65.4-55.9c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.4-44.8-96.8-79.6-137.7l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.2 28.9c-30-24.6-63.4-44-99.6-57.5l-15.7-84.9c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52-9.4-106.8-9.4-158.8 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.3c-35.9 13.6-69.1 32.9-98.9 57.3l-81.8-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.5 87.4-79.6 137.7l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.2 56.5c-3.1 18.8-4.6 38-4.6 57 0 19.2 1.5 38.4 4.6 57l-66 56.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.3 44.8 96.8 79.6 137.7l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.8-29.1c29.8 24.5 63 43.9 98.9 57.3l15.8 85.3c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.7 7.1 79.4 7.1 26.7 0 53.4-2.4 79.4-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-84.9c36.2-13.6 69.6-32.9 99.6-57.5l81.2 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.5-87.4 79.6-137.7l0.9-2.6c4.3-12.4 0.6-26.3-9.5-35z m-412.3 52.2c-97.1 0-175.8-78.7-175.8-175.8s78.7-175.8 175.8-175.8 175.8 78.7 175.8 175.8-78.7 175.8-175.8 175.8z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,71 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
|
||||
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
|
||||
<!-- Electron -->
|
||||
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src *; img-src *; connect-src *;"> -->
|
||||
<title>社区疫情防控系统 - 门禁端</title>
|
||||
<link rel="stylesheet" href="./assets/css/index.css"/>
|
||||
<link rel="stylesheet" href="./assets/css/setting-panel.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ctrl-btn">
|
||||
<img class="btn btn-ctrl" id="setting-button" src="./assets/svg/setting.svg" alt="">
|
||||
<img class="btn btn-ctrl" id="fullscreen-button" src="./assets/svg/fullscreen.svg" alt="">
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="top-container">
|
||||
<p id="gate-name" style="font-size: 28px;">Loading...</p>
|
||||
</div>
|
||||
<div class="left-container">
|
||||
<h1>进出社区请扫码</h1>
|
||||
<h3>社区居民</h3>
|
||||
<p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
|
||||
<p>2. 点击确认进入，门即开启</p>
|
||||
|
||||
<h3>外来访客</h3>
|
||||
<p>1. 打开 微信 > 扫一扫，扫描右侧小程序码</p>
|
||||
<p>2. 填写进入申请表</p>
|
||||
|
||||
<h3>长期租客</h3>
|
||||
<p>1. 请联系管理员为你添加进出权限</p>
|
||||
</div>
|
||||
<div class="right-container">
|
||||
<h1 id="no-qrcode">请选择大门</h1>
|
||||
<img id="qrcode" src="" style="display: none">
|
||||
<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">
|
||||
<!-- 关闭按钮 -->
|
||||
<img id="close-setting-button" class="btn" src="./assets/svg/close.svg" alt="">
|
||||
|
||||
<h3 style="text-align: center;">请选择大门</h3>
|
||||
|
||||
<div id="gate-list">
|
||||
<div class="gate-list-item">
|
||||
<p>大门1</p>
|
||||
<p class="status open closed">
|
||||
开放 封闭
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="save-button-container" style="text-align: center;">
|
||||
<button class="save-setting-button">保 存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./assets/js/setting-panel.js" type="module"></script>
|
||||
<script src="./renderer.js" type="module"></script>
|
||||
<script src="./assets/js/websocket.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,152 +0,0 @@
|
||||
// 定义常量
|
||||
const baseUrl = "https://epp.only4.work/"
|
||||
const url = baseUrl + "access/wechat/getUnlimitedQRCode"
|
||||
const page = "pages/index/index" // "pages/scan/entrance"
|
||||
const envVersion = "develop" // 正式版为 "release"，体验版为 "trial"，开发版为 "develop"
|
||||
const autoColor = true
|
||||
const isHyaline = false
|
||||
const width = 500
|
||||
|
||||
// 页面上的元素
|
||||
const image = document.getElementById('qrcode')
|
||||
const noQrInfo = document.getElementById('no-qrcode')
|
||||
const refreshTimeCountDown = document.getElementById('refreshTimeCountDown')
|
||||
const DOMGateList = document.getElementById('gate-list')
|
||||
|
||||
// 大门列表
|
||||
window.gateList = []
|
||||
|
||||
// 当前大门
|
||||
window.currentGate = null
|
||||
|
||||
// 获取 Url 参数
|
||||
function getUrlParams() {
|
||||
let params = {}
|
||||
location.search.substring(1).split("&").map(param => {
|
||||
let a = param.indexOf("=")
|
||||
if (a < 0)
|
||||
params[param] = ''
|
||||
else
|
||||
params[param.substring(0, a)] = decodeURIComponent(param.substring(a + 1))
|
||||
})
|
||||
// console.log(params)
|
||||
return params
|
||||
}
|
||||
|
||||
// 获取 url 参数
|
||||
let urlParams = getUrlParams()
|
||||
console.log("urlParams", urlParams)
|
||||
|
||||
// 是否在 electron 中
|
||||
const inElectron = urlParams['inElectron']
|
||||
|
||||
// 点击全屏
|
||||
document.getElementById("fullscreen-button").addEventListener("click", function () {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
if (inElectron) {
|
||||
// electron 中
|
||||
const message = JSON.stringify({
|
||||
action: 'fullscreen'
|
||||
});
|
||||
window.parent.postMessage(message, '*');
|
||||
} else {
|
||||
// 浏览器中
|
||||
document.body.requestFullscreen()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 定时更新页面上的小程序码
|
||||
let i = 0, refreshTime = 10 + 1
|
||||
|
||||
function updateQRCode() {
|
||||
// 取消图片隐藏
|
||||
image.style.visibility = '';
|
||||
image.style.display = '';
|
||||
noQrInfo.style.display = 'none';
|
||||
|
||||
if (i % refreshTime == 0) {
|
||||
// scene 最长支支持 32 位，所以这里不传入时间戳
|
||||
let scene = encodeURIComponent(`guard;${window.currentGate.id}`); // &${Date.now()}
|
||||
image.src = `${url}?page=${page}&scene=${scene}&envVersion=${envVersion}&width=${width}&autoColor=${autoColor}&isHyaline=${isHyaline}`
|
||||
console.log(image.src)
|
||||
refreshTimeCountDown.innerHTML = ` `
|
||||
} else {
|
||||
refreshTimeCountDown.textContent = `${refreshTime - i}秒后刷新`
|
||||
}
|
||||
i = i % refreshTime + 1
|
||||
}
|
||||
|
||||
// 挂载到 window 上
|
||||
window.updateQRCode = updateQRCode
|
||||
|
||||
// 弹窗中修改 item
|
||||
function changePanelSelectGate(gateId) {
|
||||
// 删除旧的 active
|
||||
let activeList = document.querySelectorAll('.gate-list-item.active')
|
||||
for (let a of activeList) {
|
||||
a.classList.remove('active')
|
||||
}
|
||||
|
||||
// 添加新的 active
|
||||
let newActiveItem = document.getElementById(`gate-list-${gateId}`)
|
||||
if (newActiveItem) {
|
||||
newActiveItem.classList.add('active')
|
||||
window.selectGateId = gateId
|
||||
}
|
||||
}
|
||||
|
||||
// 挂载到 window 上
|
||||
window.changePanelSelectGate = changePanelSelectGate
|
||||
|
||||
// 发送请求，获取大门列表
|
||||
async function getGateList() {
|
||||
const response = await fetch(baseUrl + 'access/gate/guard-client/getGateList');
|
||||
const data = await response.json();
|
||||
return data.data;
|
||||
}
|
||||
|
||||
window.onload = async function () {
|
||||
|
||||
// 当前的门禁端
|
||||
let gateId = urlParams['gateId'] || ""
|
||||
|
||||
// 获取大门列表
|
||||
window.gateList = await getGateList()
|
||||
console.log("gateList", window.gateList)
|
||||
|
||||
let domList = []
|
||||
for (let gate of window.gateList) {
|
||||
domList.push(`
|
||||
<div id="gate-list-${gate.id}" class="gate-list-item" onclick="window.changePanelSelectGate('${gate.id}')">
|
||||
<p>${gate.name}</p>
|
||||
<p class="status ${gate.open ? 'open' : 'closed'}">
|
||||
${gate.open ? '开放' : '封闭'}
|
||||
</p>
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
DOMGateList.innerHTML = domList.join('')
|
||||
|
||||
// 通过id 找门禁
|
||||
window.currentGate = gateList.find((gate) => gate.id === gateId)
|
||||
|
||||
if (!window.currentGate) {
|
||||
// 弹出选择框
|
||||
window.showSettingPanel && window.showSettingPanel()
|
||||
} else {
|
||||
// 显示大门名称及状态
|
||||
document.querySelector('#gate-name').innerHTML = `
|
||||
<span>${window.currentGate.name}</span>
|
||||
<span style="font-weight: bold; color: ${window.currentGate.open ? '#40f940' : 'red'};">${window.currentGate.open ? '允许通行' : '禁止通行'}</span>`
|
||||
|
||||
// 开始更新图片
|
||||
updateQRCode()
|
||||
setInterval(updateQRCode, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user