From 5f4e20af66ac2a9ded89b0da27ccd5a135b4d25f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?= <2291200076@qq.com> Date: Tue, 21 Mar 2023 22:39:44 +0800 Subject: [PATCH] =?UTF-8?q?=E9=97=A8=E7=A6=81=E7=AB=AF=E7=BD=91=E9=A1=B5?= =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E5=87=BA=E6=9D=A5=EF=BC=8C=E5=85=A8=E5=B1=8F?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BF=AE=E5=A5=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/static/README.txt | 1 + .../static/access/assets/css/index.css | 81 +++++++++++++++++++ .../access/assets/css/setting-panel.css | 66 +++++++++++++++ .../static/access/assets/js/setting-panel.js | 30 +++++++ .../static/access/assets/svg/close.svg | 1 + .../static/access/assets/svg/fullscreen.svg | 1 + .../static/access/assets/svg/setting.svg | 1 + .../main/resources/static/access/index.html | 55 +++++++++++++ .../main/resources/static/access/renderer.js | 71 ++++++++++++++++ client-entrance-guard/README.md | 9 +++ client-entrance-guard/html/index.css | 56 +------------ client-entrance-guard/html/index.html | 24 +----- client-entrance-guard/html/renderer.js | 25 ------ client-entrance-guard/main.js | 17 +++- client-entrance-guard/preload.js | 24 ++++-- 15 files changed, 353 insertions(+), 109 deletions(-) create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/README.txt create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/index.css create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/setting-panel.css create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/setting-panel.js create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/close.svg create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/fullscreen.svg create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/setting.svg create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/index.html create mode 100644 backend/microservice-provider-access-8002/src/main/resources/static/access/renderer.js create mode 100644 client-entrance-guard/README.md diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/README.txt b/backend/microservice-provider-access-8002/src/main/resources/static/README.txt new file mode 100644 index 0000000..347fd9b --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/README.txt @@ -0,0 +1 @@ +编辑后右键 Compile And Reload File 修改即可生效，不用频繁重启项目 diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/index.css b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/index.css new file mode 100644 index 0000000..3454ab6 --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/index.css @@ -0,0 +1,81 @@ +* { + margin: 0; + padding: 0; +} +html, +body { + height: 100%; +} + +.container { + width: 100%; + height: 100%; + background-color: #0556c6; + display: grid; + grid-template-columns: 3fr 4fr; + place-items: center; + color: white; +} + +.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; +} diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/setting-panel.css b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/setting-panel.css new file mode 100644 index 0000000..3d6a88e --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/css/setting-panel.css @@ -0,0 +1,66 @@ +.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; +} diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/setting-panel.js b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/setting-panel.js new file mode 100644 index 0000000..0a9180b --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/js/setting-panel.js @@ -0,0 +1,30 @@ +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) { + closeSettingPanel() + e.stopPropagation() +}) diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/close.svg b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/close.svg new file mode 100644 index 0000000..4caf834 --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/close.svg @@ -0,0 +1 @@ + diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/fullscreen.svg b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/fullscreen.svg new file mode 100644 index 0000000..e542fcd --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/fullscreen.svg @@ -0,0 +1 @@ + diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/setting.svg b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/setting.svg new file mode 100644 index 0000000..7e8bece --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/assets/svg/setting.svg @@ -0,0 +1 @@ + diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/index.html b/backend/microservice-provider-access-8002/src/main/resources/static/access/index.html new file mode 100644 index 0000000..109a73b --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/index.html @@ -0,0 +1,55 @@ + + + + + + + + + + 社区疫情防控系统 - 门禁端 + + + + + +
+ + +
+
+
+

进出社区请扫码

+

社区居民

+

1. 打开 微信 > 扫一扫，扫描右侧小程序码

+

2. 点击确认进入，门即开启

+ +

外来访客

+

1. 打开 微信 > 扫一扫，扫描右侧小程序码

+

2. 填写进入申请表

+ +

长期租客

+

1. 请联系管理员为你添加进出权限

+
+
+ +

+
+
+ +
+
+
+ + + +
+ +
+
+
+ + + + + diff --git a/backend/microservice-provider-access-8002/src/main/resources/static/access/renderer.js b/backend/microservice-provider-access-8002/src/main/resources/static/access/renderer.js new file mode 100644 index 0000000..3eed32f --- /dev/null +++ b/backend/microservice-provider-access-8002/src/main/resources/static/access/renderer.js @@ -0,0 +1,71 @@ +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 + +// 获取 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 +} +let urlParams = getUrlParams() +console.log("urlParams", urlParams) + +// 是否在 electron 中 +const inElectron = urlParams['inElectron'] + +// 当前的门禁端 +let gateId = urlParams['gateId'] || "" + +if (!gateId) { + // 弹出选择框 +} + +// 点击全屏 +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() + } + } +}) + +// 页面上的元素 +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) diff --git a/client-entrance-guard/README.md b/client-entrance-guard/README.md new file mode 100644 index 0000000..55122a4 --- /dev/null +++ b/client-entrance-guard/README.md @@ -0,0 +1,9 @@ + +打包需要管理员运行终端 +用 npm run package 即可 + + +npm run make 打包到后面会报错 +分为两步 +1. npm run package +2. 生成一个可分发文件 \ No newline at end of file diff --git a/client-entrance-guard/html/index.css b/client-entrance-guard/html/index.css index 603786b..1f1f10b 100644 --- a/client-entrance-guard/html/index.css +++ b/client-entrance-guard/html/index.css @@ -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; -} */ diff --git a/client-entrance-guard/html/index.html b/client-entrance-guard/html/index.html index 890bc26..e8f3686 100644 --- a/client-entrance-guard/html/index.html +++ b/client-entrance-guard/html/index.html @@ -5,33 +5,13 @@ - + 社区疫情防控系统 - 门禁端 -
-
-

进出社区请扫码

- -

社区居民

-

1. 打开 微信 > 扫一扫，扫描右侧小程序码

-

2. 点击确认进入，门即开启

- -

外来访客

-

1. 打开 微信 > 扫一扫，扫描右侧小程序码

-

2. 填写进入申请表

- -

长期租客

-

1. 请联系管理员为你添加进出权限

-
-
- -

-
-
- + diff --git a/client-entrance-guard/html/renderer.js b/client-entrance-guard/html/renderer.js index 3b1719c..e69de29 100644 --- a/client-entrance-guard/html/renderer.js +++ b/client-entrance-guard/html/renderer.js @@ -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); diff --git a/client-entrance-guard/main.js b/client-entrance-guard/main.js index 72e7fec..813d07d 100644 --- a/client-entrance-guard/main.js +++ b/client-entrance-guard/main.js @@ -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() } diff --git a/client-entrance-guard/preload.js b/client-entrance-guard/preload.js index 60b43e5..b3a9cf4 100644 --- a/client-entrance-guard/preload.js +++ b/client-entrance-guard/preload.js @@ -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) // } })