27 changed files with 3643 additions and 232 deletions
-
2.gitignore
-
17.vscode/launch.json
-
39app/main/SinceTimeTool.js
-
BINapp/main/assets/big.png
-
BINapp/main/assets/close-new.png
-
BINapp/main/assets/mainphoto.png
-
BINapp/main/assets/small.png
-
BINapp/main/assets/test1.pdf
-
2app/main/child_process.js
-
10app/main/constant.js
-
152app/main/index.html
-
46app/main/index.js
-
339app/main/ipc.js
-
9app/main/windows/application.js
-
43app/main/windows/lib/common.js
-
2app/main/windows/lib/data.json
-
117app/main/windows/lib/preload.js
-
16app/main/windows/lib/store.js
-
108app/main/windows/main.js
-
4app/main/windows/screen.json
-
2app/main/windows/suspension.js
-
3app/package.json
-
3app/renderer/pages/suspension/index.html
-
3app/renderer/src/main/src/router/index.js
-
239app/yarn.lock
-
11package.json
-
2708yarn.lock
@ -1,3 +1,5 @@ |
|||
*.swp |
|||
node_modules |
|||
app/data.json |
|||
|
|||
OutApp* |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
// 使用 IntelliSense 了解相关属性。 |
|||
// 悬停以查看现有属性的描述。 |
|||
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 |
|||
"version": "0.2.0", |
|||
"configurations": [ |
|||
{ |
|||
"type": "pwa-node", |
|||
"request": "launch", |
|||
"name": "Launch Program", |
|||
"skipFiles": [ |
|||
"<node_internals>/**" |
|||
], |
|||
"program": "${workspaceFolder}\\app\\main\\index.js" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
let globalSinceTime = {} |
|||
|
|||
async function sinceTime(title = '默认标记') { |
|||
try { |
|||
let startTime = 0 |
|||
if (performance) { |
|||
startTime = performance.now() |
|||
} else { |
|||
startTime = new Date().getTime() |
|||
} |
|||
globalSinceTime[title] = startTime |
|||
return Promise.resolve(true) |
|||
} catch (e) { |
|||
return Promise.reject(e) |
|||
} |
|||
} |
|||
|
|||
async function sinceTimeEnd(title = '默认标记') { |
|||
try { |
|||
let endTime = 0 |
|||
if (performance) { |
|||
endTime = performance.now() |
|||
} else { |
|||
endTime = new Date().getTime() |
|||
} |
|||
let startTime = 0 |
|||
if (globalSinceTime.hasOwnProperty(title)) { |
|||
startTime = globalSinceTime[title] |
|||
} |
|||
let since = endTime - startTime |
|||
console.log(title + ' 耗时:', since, '毫秒') |
|||
return Promise.resolve(since) |
|||
} catch (e) { |
|||
return Promise.reject(e) |
|||
} |
|||
} |
|||
|
|||
exports.sinceTime = sinceTime |
|||
exports.sinceTimeEnd = sinceTimeEnd |
|||
|
After Width: 60 | Height: 60 | Size: 969 B |
|
After Width: 22 | Height: 22 | Size: 1.1 KiB |
|
After Width: 24 | Height: 24 | Size: 623 B |
|
After Width: 22 | Height: 22 | Size: 1.0 KiB |
@ -0,0 +1,152 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>系统运行监控</title> |
|||
<meta http-equiv="Pragma" content="no-cache"> |
|||
<META HTTP-EQUIV="Cache-Control" content="no-cache"> |
|||
<META HTTP-EQUIV="Expires" content="0"> |
|||
</head> |
|||
|
|||
<body class="main"> |
|||
<section style="-webkit-app-region: drag;width: 100%"> |
|||
<div class="heading"> |
|||
<div class="title"> |
|||
<img class="title-img" src="assets/mainphoto.png"> |
|||
<span class="head_title">系统运行监控</span> |
|||
</div> |
|||
<div class="use-btn" style="-webkit-app-region: no-drag"> |
|||
<a class="small" id="min" onclick="minFun()"></a> |
|||
<!-- <a class="big" id="max" onclick="maxFun()"></a> --> |
|||
<a class="close" id="closed" onclick="closeFun()"></a> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<div class="fromBox"> |
|||
<!-- <webview id="obj" class="obj" type="text/html" src="http://localhost:3806/TIS_PLATFORM?appId=TIS_APP_FRAME_YXJK&launcher=monitor"></webview> --> |
|||
<!-- <webview id="obj" class="obj" type="text/html" src="http://localhost:3806/TIS_PLATFORM/?appId=TIS_APP_FRAME_YXJK&launcher=monitor#/pc"></webview> --> |
|||
<!-- <webview id="obj" class="obj" type="text/html" src="http://10.12.33.74:3806/TIS_PLATFORM/?appId=TIS_APP_FRAME_YXJK&launcher=monitor#/pc"></webview> --> |
|||
<iframe src="./assets/test1.pdf" width="100%" height="100%" frameborder="0"></iframe> |
|||
</div> |
|||
<script type="text/javascript"> |
|||
function minFun() { |
|||
window.api && window.api.minimize() |
|||
} |
|||
function closeFun() { |
|||
window.api && window.api.exitSystem() |
|||
} |
|||
</script> |
|||
<style> |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: 思源黑体bold; |
|||
src: url("./font/SourceHanSansCN-Bold.otf"); |
|||
} |
|||
|
|||
.main { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.main .heading { |
|||
width: 100%; |
|||
height: 4vh; |
|||
/* line-height: 5vh; */ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-image: linear-gradient(0deg, #212123 0%, #383839 40%, #4e4e4e 100%), |
|||
linear-gradient(#212123, |
|||
#212123); |
|||
background-blend-mode: normal, |
|||
normal; |
|||
border-radius: 10px 10px 0px 0px; |
|||
} |
|||
|
|||
.main .heading .title { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 0 0 1vw; |
|||
font-size: 1.6vw; |
|||
color: #d8d8d8; |
|||
height: 5vh; |
|||
line-height: 5vh; |
|||
} |
|||
|
|||
.main .heading .title img { |
|||
width: 2.6vh; |
|||
height: 2.6vh; |
|||
} |
|||
|
|||
.main .heading .title span { |
|||
display: block; |
|||
padding: 0 0 0 5px; |
|||
} |
|||
|
|||
.main .heading .use-btn { |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 1.5vh 1vw; |
|||
} |
|||
|
|||
.main .heading .use-btn a { |
|||
margin-left: 3px; |
|||
width: 2vh; |
|||
height: 2vh; |
|||
} |
|||
|
|||
.main .fromBox { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: center; |
|||
background-color: #000000; |
|||
height: 95vh; |
|||
border-radius: 0 0 10px 10px; |
|||
box-shadow: 4px 4px 10px 0px rgba(33, 33, 35, 0.35); |
|||
} |
|||
|
|||
.main .fromBox .obj { |
|||
height: 99%; |
|||
width: 99%; |
|||
} |
|||
|
|||
.big { |
|||
background: url("assets/big.png") no-repeat 0 0; |
|||
background-size: 100% 100%; |
|||
margin-right: 1vw; |
|||
} |
|||
|
|||
.small { |
|||
background: url("assets/small.png") no-repeat 0 0; |
|||
background-size: 100% 100%; |
|||
margin-right: 1vw; |
|||
} |
|||
|
|||
.close { |
|||
background: url("assets/close-new.png") no-repeat 0 0; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.head_title { |
|||
width: 253px; |
|||
/* height: 54px; */ |
|||
font-family: 思源黑体bold; |
|||
font-size: 16px; |
|||
font-weight: normal; |
|||
font-stretch: normal; |
|||
line-height: 50px; |
|||
letter-spacing: 2px; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1 +1 @@ |
|||
{"test":{"a":1},"test2":{"name":"我是你爹"}} |
|||
{"firstInstall":false,"position":{"x":1155,"y":775}} |
|||
@ -1,38 +1,99 @@ |
|||
// All of the Node.js APIs are available in the preload process.
|
|||
// It has the same sandbox as a Chrome extension.
|
|||
const {ipcRenderer} = require('electron') |
|||
|
|||
const {ipcRenderer, desktopCapturer} = require('electron'); |
|||
const remote = require('@electron/remote'); |
|||
window.currentFrame = 'platform'; |
|||
window.api = [ |
|||
"showSuspensionWindow", |
|||
"resizeWindow", |
|||
"setUnReadMessage", |
|||
"getUnReadMessage", |
|||
"windowMoveHandle", |
|||
"exitSystem", |
|||
"openDevTools", |
|||
"hideMainWindow", |
|||
"showMainWindow", |
|||
"minimize", |
|||
"hideSuspensionWindow" |
|||
].reduce((acc, apiName) => { |
|||
'showSuspensionWindow', |
|||
'resizeWindow', |
|||
'setUnReadMessage', |
|||
'getUnReadMessage', |
|||
'windowMoveHandle', |
|||
'exitSystem', |
|||
'openDevTools', |
|||
'hideMainWindow', |
|||
'showMainWindow', |
|||
'minimize', |
|||
'hideSuspensionWindow', |
|||
'closeWindowById', |
|||
'PrtSc', |
|||
'downloadImg', |
|||
'removeCanvas', |
|||
].reduce( |
|||
(acc, apiName) => { |
|||
acc[apiName] = (...params) => { |
|||
return ipcRenderer.send(apiName, ...params) |
|||
} |
|||
return acc |
|||
}, { |
|||
return ipcRenderer.send(apiName, ...params); |
|||
}; |
|||
return acc; |
|||
}, |
|||
{ |
|||
on: ipcRenderer.on.bind(ipcRenderer), |
|||
send: ipcRenderer.send.bind(ipcRenderer), |
|||
removeListener: ipcRenderer.removeListener.bind(ipcRenderer) |
|||
}); |
|||
removeListener: ipcRenderer.removeListener.bind(ipcRenderer), |
|||
} |
|||
); |
|||
|
|||
ipcRenderer.on('getUnReadMessage', (e, args) => { |
|||
window.getUnReadMessage(args[0]); |
|||
window.getUnReadMessage(args[0]); |
|||
}); |
|||
window.addEventListener("keydown", e => { |
|||
const {altKey, ctrlKey, keyCode} = e; |
|||
if (altKey && ctrlKey && keyCode === 70) { |
|||
const currentWindow = require('electron').remote.getCurrentWindow(); |
|||
currentWindow && currentWindow.toggleDevTools(); |
|||
e.preventDefault(); |
|||
|
|||
let ImgSrc = null; |
|||
// 监听用户截屏
|
|||
ipcRenderer.on('PrtSc', (e, args) => { |
|||
// 显示截屏区域
|
|||
let screenContent = document.querySelector('.screen-canvas'); |
|||
screenContent.style.display = 'block'; |
|||
// 获取当前屏幕的宽高
|
|||
const {width, height} = remote.getCurrentWindow().getBounds(); |
|||
console.log(width, height); |
|||
// 获取canvas元素
|
|||
const canvas = document.getElementById('thumbnailCanvas'); |
|||
const ctx = canvas.getContext('2d'); |
|||
// 这里的300可根据需要自定义，显示的是截屏后图片显示的大小
|
|||
canvas.width = (height - 300) * 16 / 9; |
|||
canvas.height = height - 300; |
|||
desktopCapturer.getSources({types: ['screen'], thumbnailSize: {width: canvas.width, height: canvas.height}}).then(async sources => { |
|||
try { |
|||
sources.forEach(source => { |
|||
const img = new Image(); |
|||
img.src = source.thumbnail.toDataURL(); |
|||
ImgSrc = img.src |
|||
img.onload = () => { |
|||
ctx.drawImage(img, 0, 0); |
|||
}; |
|||
}); |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}) |
|||
}); |
|||
}); |
|||
|
|||
// 监听用户下载截屏图片
|
|||
ipcRenderer.on('downloadImg', (e, args) => { |
|||
downLoadImage(ImgSrc); |
|||
}); |
|||
|
|||
// 下载图片
|
|||
function downLoadImage(src) { |
|||
const link = document.createElement('a'); |
|||
link.href = src; |
|||
link.download = new Date().getTime() + '.png'; |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
document.body.removeChild(link); |
|||
} |
|||
|
|||
// 监听用户取消截屏图片显示
|
|||
ipcRenderer.on('removeCanvas', (e, args) => { |
|||
removeCanvas() |
|||
}); |
|||
function removeCanvas() { |
|||
// 获取canvas元素
|
|||
const canvas = document.getElementById('thumbnailCanvas'); |
|||
const ctx = canvas.getContext('2d'); |
|||
// 清除画布
|
|||
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|||
// 隐藏截屏区域
|
|||
let screenContent = document.querySelector('.screen-canvas'); |
|||
screenContent.style.display = 'none'; |
|||
} |
|||
@ -1,37 +1,85 @@ |
|||
const { MAIN_WINDOW_FLAG, MAIN_WINDOW_URL } = require("../constant") |
|||
const { createWindow } = require('./lib/common') |
|||
const { BrowserWindow } = require('electron') |
|||
const { create: createSuspensionWindow } = require('./suspension'); |
|||
const {MAIN_WINDOW_FLAG, MAIN_WINDOW_URL} = require("../constant") |
|||
const {createWindow} = require('./lib/common') |
|||
const {BrowserWindow} = require('electron') |
|||
const {create: createSuspensionWindow} = require('./suspension'); |
|||
const screen = require("./screen.json"); |
|||
const {sinceTimeEnd} = require('../SinceTimeTool') |
|||
|
|||
const exec = require('child_process') |
|||
const start = () => { |
|||
// 任何你期望执行的cmd命令，ls都可以
|
|||
// let cmdStr1 = 'node D:\linyun\2022-06-07\front-monitor-api\src\app.js'
|
|||
let cmdStr1 = 'D:\linyun\2022-06-07\front-monitor-api\src\app.js' |
|||
|
|||
let cmdPath = '../../../../../2022-06-07/front-monitor-api/' |
|||
// 子进程名称
|
|||
let workerProcess |
|||
function runExec (cmdStr) { |
|||
workerProcess = exec.fork(cmdStr) |
|||
// 打印正常的后台可执行程序输出
|
|||
workerProcess.stdout.on('data', function (data) { |
|||
console.log('stdout: ' + data) |
|||
}) |
|||
// 打印错误的后台可执行程序输出
|
|||
workerProcess.stderr.on('data', function (data) { |
|||
console.log('stderr: ' + data) |
|||
}) |
|||
// 退出之后的输出
|
|||
workerProcess.on('close', function (code) { |
|||
console.log('out code：' + code) |
|||
}) |
|||
} |
|||
runExec(cmdStr1) |
|||
} |
|||
const create = () => { |
|||
const windows = BrowserWindow.getAllWindows() |
|||
const found = windows.find((window) => { |
|||
return window[MAIN_WINDOW_FLAG] |
|||
}) |
|||
|
|||
if (found) { |
|||
found.show(); |
|||
found.center(); |
|||
found.maximize(); |
|||
return found; |
|||
} else { |
|||
const win = createWindow(MAIN_WINDOW_URL,{ |
|||
fullscreen:true, |
|||
offScreen:false, |
|||
frame: false, //要创建无边框窗口
|
|||
show:true |
|||
const windows = BrowserWindow.getAllWindows() |
|||
const found = windows.find((window) => { |
|||
return window[MAIN_WINDOW_FLAG] |
|||
}) |
|||
win[MAIN_WINDOW_FLAG] = true |
|||
|
|||
// win.on('ready-to-show', () => {
|
|||
// win.show();
|
|||
// });
|
|||
win.on('hide', () => { |
|||
createSuspensionWindow(); |
|||
}); |
|||
return create(); |
|||
} |
|||
if (found) { |
|||
found.show(); |
|||
found.center(); |
|||
found.maximize(); |
|||
return found; |
|||
} else { |
|||
let areaSize = require('electron').screen.getPrimaryDisplay().workAreaSize; |
|||
let width = areaSize.width; |
|||
let height = areaSize.height; |
|||
let resizable = true; |
|||
if (screen.width > 0 && screen.height > 0) { |
|||
const ratios = screen.width / screen.height; |
|||
height = areaSize.height; |
|||
width = Math.floor(areaSize.height * ratios); |
|||
resizable = false; |
|||
} |
|||
const win = createWindow(MAIN_WINDOW_URL, { |
|||
//alwaysOnTop: true, //窗口是否总是显示在其他窗口之前
|
|||
fullscreen: true, |
|||
offScreen: false, |
|||
frame: false, //要创建无边框窗口
|
|||
width: width, //悬浮窗口的宽度 比实际DIV的宽度要多2px 因为有1px的边框
|
|||
height: height, //悬浮窗口的高度 比实际DIV的高度要多2px 因为有1px的边框
|
|||
resizable: resizable, //禁止窗口大小缩放
|
|||
show: false, //先不让窗口显示
|
|||
// backgroundColor: "#0a0a0a"
|
|||
}) |
|||
win[MAIN_WINDOW_FLAG] = true |
|||
// start()
|
|||
sinceTimeEnd('createWindow') |
|||
win.on('ready-to-show', () => { |
|||
|
|||
sinceTimeEnd('ready-to-show') |
|||
win.show(); |
|||
sinceTimeEnd('win.show') |
|||
}); |
|||
win.on('hide', () => { |
|||
console.log('窗口hide'); |
|||
createSuspensionWindow(); |
|||
}); |
|||
return create(); |
|||
} |
|||
} |
|||
|
|||
|
|||
module.exports = { create } |
|||
module.exports = {create} |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"width":0, |
|||
"height":0 |
|||
} |
|||
2708
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue