100 lines
3.1 KiB
HTML
100 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>实时报警显示</title>
|
|
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: 'Orbitron', sans-serif;
|
|
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
color: #ffffff;
|
|
}
|
|
h1 {
|
|
margin-bottom: 20px;
|
|
font-size: 2.5em;
|
|
text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 80%;
|
|
height: 80%;
|
|
overflow-y: auto;
|
|
border: 2px solid #00b7ff;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 20px rgba(0, 255, 153, 0.5);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
.topic {
|
|
border: 1px solid #00ff99;
|
|
padding: 15px;
|
|
margin: 10px;
|
|
width: 300px;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
cursor: pointer;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 10px;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
.topic:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 15px rgba(0, 255, 153, 0.7);
|
|
}
|
|
.topic h2 {
|
|
margin-top: 0;
|
|
font-size: 1.2em;
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
|
|
}
|
|
.topic p {
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>实时报警显示</h1>
|
|
<div class="container">
|
|
<!-- 这里将根据不同 topic 动态插入数据 -->
|
|
</div>
|
|
|
|
<script>
|
|
const socket = io();
|
|
const container = document.querySelector('.container');
|
|
|
|
socket.on('new_message', (data) => {
|
|
let topicDiv = document.getElementById(data.topic);
|
|
if (!topicDiv) {
|
|
topicDiv = document.createElement('div');
|
|
topicDiv.id = data.topic;
|
|
topicDiv.className = 'topic';
|
|
topicDiv.innerHTML = `<h2>Topic: ${data.topic}</h2>`;
|
|
container.appendChild(topicDiv);
|
|
|
|
// 添加点击事件监听器
|
|
topicDiv.addEventListener('click', () => {
|
|
window.location.href = `/history/${encodeURIComponent(data.topic)}`; // 点击后跳转到历史数据页面
|
|
});
|
|
}
|
|
topicDiv.innerHTML = `
|
|
<h2>订阅消息: ${data.topic}</h2>
|
|
<p>报警编号: ${data.alarm_id}</p>
|
|
<p>报警信息: ${data.alarm_value}</p>
|
|
<p>小车状态: ${data.car_position_msg}</p>
|
|
<p>时间: ${data.timestamp}</p>
|
|
`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|