门禁端网页独立出来，全屏功能修好
This commit is contained in:
9
client-entrance-guard/README.md
Normal file
9
client-entrance-guard/README.md
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
打包需要管理员运行终端
|
||||
用 npm run package 即可
|
||||
|
||||
|
||||
npm run make 打包到后面会报错
|
||||
分为两步
|
||||
1. npm run package
|
||||
2. 生成一个可分发文件
|
||||
@@ -2,64 +2,14 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #0556c6;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 4fr;
|
||||
/* align-items: center; */
|
||||
place-items: center;
|
||||
/* justify-items: center; */
|
||||
/* place-content: center; */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* #fullscreen-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
} */
|
||||
|
||||
@@ -5,33 +5,13 @@
|
||||
<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'"> -->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src *; img-src *; connect-src *;">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src *; img-src *; connect-src *;">
|
||||
<title>社区疫情防控系统 - 门禁端</title>
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<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">
|
||||
<img id="qrcode" src="">
|
||||
<p id="refreshTimeCountDown"></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button id="fullscreen-button">全屏</button> -->
|
||||
<iframe src="https://epp.only4.work/access/index.html?inElectron=true" frameborder="0"></iframe>
|
||||
<script src="./renderer.js" type="module"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
const url = "https://epp.only4.work/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 refreshTimeCountDown = document.getElementById('refreshTimeCountDown');
|
||||
|
||||
let i = 0, refreshTime = 10 + 1;
|
||||
function updateQRCode() {
|
||||
if (i % refreshTime == 0) {
|
||||
let scene = encodeURIComponent(`guard&${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;
|
||||
}
|
||||
|
||||
updateQRCode();
|
||||
setInterval(updateQRCode, 1000);
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
const { app, BrowserWindow } = require('electron')
|
||||
const { app, BrowserWindow, ipcMain, Menu, globalShortcut } = require('electron')
|
||||
const { platform } = require('node:process')
|
||||
const path = require('path')
|
||||
|
||||
console.log(`This platform is ${platform}`);
|
||||
|
||||
const createWindow = () => {
|
||||
// 创建窗口
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: 1080,
|
||||
minWidth: 760,
|
||||
@@ -15,13 +16,25 @@ const createWindow = () => {
|
||||
},
|
||||
})
|
||||
|
||||
// 加载 HTML
|
||||
mainWindow.loadFile('html/index.html')
|
||||
|
||||
// 隐藏菜单栏
|
||||
// let menu = Menu.getApplicationMenu()
|
||||
Menu.setApplicationMenu(null)
|
||||
|
||||
// 全屏逻辑
|
||||
// mainWindow.fullScreen = true;
|
||||
//配置ESC键退出全屏
|
||||
ipcMain.on('toggle-fullscreen', () => {
|
||||
mainWindow.setFullScreen(!mainWindow.isFullScreen())
|
||||
})
|
||||
|
||||
// 配置ESC键退出全屏
|
||||
globalShortcut.register('ESC', () => {
|
||||
mainWindow.setFullScreen(false);
|
||||
})
|
||||
|
||||
// 调试窗口
|
||||
// mainWindow.webContents.openDevTools()
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,23 @@
|
||||
// import { remote } from 'electron'
|
||||
const { ipcRenderer } = require('electron')
|
||||
|
||||
// const setFullScreen = remote.getCurrentWindow().setFullScreen
|
||||
// const isFullScreen = remote.getCurrentWindow().isFullScreen
|
||||
// window.setFullScreen = setFullScreen
|
||||
// window.isFullScreen = isFullScreen
|
||||
window.addEventListener('message', function (e) {
|
||||
// 获取消息内容 data
|
||||
const { data } = e;
|
||||
console.log("[electron preload]", data)
|
||||
try {
|
||||
let message = JSON.parse(data);
|
||||
console.log(message)
|
||||
switch (message.action) {
|
||||
case 'fullscreen':
|
||||
ipcRenderer.send('toggle-fullscreen')
|
||||
break
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err", err)
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
// document.getElementById("fullscreen-button").onclick = function () {
|
||||
// alert(1)
|
||||
// window.setFullScreen(!window.isFullScreen)
|
||||
// }
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user