新增前端页面
This commit is contained in:
364
web_page/index.html
Normal file
364
web_page/index.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>指监智能场景识别系统</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
color: #e5e7eb;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #111827;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.log-panel {
|
||||
height: 50%;
|
||||
background: #020617;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.log-header {
|
||||
padding: 8px 12px;
|
||||
background: #0f172a;
|
||||
border-bottom: 1px solid #1f2937;
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.log-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
.log-entry {
|
||||
margin-bottom: 6px;
|
||||
padding: 4px 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.log-info {
|
||||
color: #60a5fa;
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
.log-success {
|
||||
color: #34d399;
|
||||
background: rgba(52, 211, 153, 0.1);
|
||||
}
|
||||
.log-warning {
|
||||
color: #fbbf24;
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
}
|
||||
.log-error {
|
||||
color: #f87171;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left-panel {
|
||||
width: 320px;
|
||||
border-right: 1px solid #1f2937;
|
||||
background: #020617;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid #1f2937;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #1f2937;
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
.message-item {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #111827;
|
||||
cursor: pointer;
|
||||
}
|
||||
.message-item:hover {
|
||||
background: #111827;
|
||||
}
|
||||
.message-item.active {
|
||||
background: #1f2937;
|
||||
}
|
||||
.message-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.message-meta {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
#liveImage {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
.status-bar {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: 12px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
font-size: 12px;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.action-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
margin-right: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.action-action {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
.action-face {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60a5fa;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<main>
|
||||
<aside class="left-panel">
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">异常消息</div>
|
||||
<div id="messageList" class="message-list"></div>
|
||||
</div>
|
||||
<div class="log-panel">
|
||||
<div class="log-header">系统日志</div>
|
||||
<div id="logContent" class="log-content"></div>
|
||||
</div>
|
||||
</aside>
|
||||
<section class="content">
|
||||
<img id="liveImage" alt="live" style="display: none;" />
|
||||
<div id="status" class="status-bar">连接中...</div>
|
||||
<div id="waitingPlaceholder" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6b7280; font-size: 16px; text-align: center;">
|
||||
<div>正在连接 WebSocket...</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const WS_PORT = 8765;
|
||||
const WS_HOST = 'localhost';
|
||||
|
||||
const liveImage = document.getElementById('liveImage');
|
||||
const statusBar = document.getElementById('status');
|
||||
const messageListEl = document.getElementById('messageList');
|
||||
const logContent = document.getElementById('logContent');
|
||||
|
||||
let alerts = [];
|
||||
let ws = null;
|
||||
let wsConnected = false;
|
||||
let currentDetectedActions = [];
|
||||
|
||||
function setMode(newMode) {
|
||||
// 模式切换功能已禁用
|
||||
}
|
||||
|
||||
function renderMessages() {
|
||||
messageListEl.innerHTML = '';
|
||||
for (const msg of alerts.slice().reverse()) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'message-item';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'message-title';
|
||||
title.textContent = `检测到异常: `;
|
||||
|
||||
msg.result_type.forEach(action => {
|
||||
const tag = document.createElement('span');
|
||||
tag.className = 'action-tag';
|
||||
|
||||
if (action === 'face') {
|
||||
tag.classList.add('action-face');
|
||||
tag.textContent = '检测到黑名单';
|
||||
} else {
|
||||
tag.classList.add('action-action');
|
||||
const actionMap = {
|
||||
'Slap': '扇巴掌',
|
||||
'LeavingPost': '离岗',
|
||||
'Collision': '撞击',
|
||||
'Push': '推搡',
|
||||
'Lyingdown': '倒下',
|
||||
'Hanging': '自缢'
|
||||
};
|
||||
tag.textContent = actionMap[action] || action;
|
||||
}
|
||||
|
||||
title.appendChild(tag);
|
||||
});
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'message-meta';
|
||||
const date = new Date(msg.timestamp * 1000);
|
||||
meta.textContent = date.toLocaleString();
|
||||
|
||||
div.appendChild(title);
|
||||
div.appendChild(meta);
|
||||
|
||||
messageListEl.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function addLog(message, type = 'info') {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const logEntry = document.createElement('div');
|
||||
logEntry.className = `log-entry log-${type}`;
|
||||
logEntry.textContent = `[${timestamp}] ${message}`;
|
||||
|
||||
logContent.appendChild(logEntry);
|
||||
logContent.scrollTop = logContent.scrollHeight;
|
||||
}
|
||||
|
||||
function connectWebSocket() {
|
||||
const wsUrl = `ws://${WS_HOST}:${WS_PORT}`;
|
||||
statusBar.textContent = '连接中...';
|
||||
|
||||
addLog(`正在连接WebSocket: ${wsUrl}`, 'info');
|
||||
|
||||
ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
wsConnected = true;
|
||||
statusBar.textContent = '直播中';
|
||||
addLog('WebSocket连接成功', 'success');
|
||||
|
||||
const placeholder = document.getElementById('waitingPlaceholder');
|
||||
if (placeholder) {
|
||||
placeholder.remove();
|
||||
}
|
||||
liveImage.style.display = 'block';
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
wsConnected = false;
|
||||
statusBar.textContent = '连接断开，重试中...';
|
||||
addLog('WebSocket连接断开，2秒后重试', 'warning');
|
||||
setTimeout(() => {
|
||||
connectWebSocket();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error('WebSocket error', err);
|
||||
addLog('WebSocket连接错误', 'error');
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
|
||||
if (msg.msg_type === 'frame') {
|
||||
if (msg.image_base64) {
|
||||
liveImage.src = `data:image/jpeg;base64,${msg.image_base64}`;
|
||||
}
|
||||
|
||||
currentDetectedActions = msg.result_type || [];
|
||||
|
||||
if (currentDetectedActions.length > 0) {
|
||||
const actionText = currentDetectedActions.join(', ');
|
||||
statusBar.textContent = `直播中 | 检测到: ${actionText}`;
|
||||
} else {
|
||||
statusBar.textContent = '直播中';
|
||||
}
|
||||
|
||||
if (msg.result_type && msg.result_type.length > 0) {
|
||||
const alertMsg = {
|
||||
camera_id: msg.camera_id,
|
||||
timestamp: msg.timestamp,
|
||||
result_type: msg.result_type
|
||||
};
|
||||
|
||||
const now = msg.timestamp;
|
||||
const timeThreshold = now - 10;
|
||||
|
||||
const existingAlert = alerts.find(alert =>
|
||||
JSON.stringify(alert.result_type) === JSON.stringify(alertMsg.result_type) &&
|
||||
alert.timestamp > timeThreshold
|
||||
);
|
||||
|
||||
if (!existingAlert) {
|
||||
alerts.push(alertMsg);
|
||||
|
||||
renderMessages();
|
||||
|
||||
const alertTypes = alertMsg.result_type.join(', ');
|
||||
addLog(`检测到异常: ${alertTypes}`, 'warning');
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('invalid ws message', e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 初始化
|
||||
addLog('AI Monitor 系统启动', 'info');
|
||||
addLog('界面初始化完成', 'success');
|
||||
|
||||
setTimeout(() => {
|
||||
connectWebSocket();
|
||||
}, 500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user