jfen/MenuPython_QT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

华荣三照明、合信、荣欣八组合馈电

Browse Source
This commit is contained in:
冯佳
2025-06-25 11:36:43 +08:00
parent 37d39f4578
commit 25b3cb7f2e
494 changed files with 114074 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
templates/Index.html Normal file
View File

@ -0,0 +1,99 @@
<!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>

51
templates/history.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>历史报警</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.container {
width: 80%;
height: 80%;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
.message {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.clear-button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>历史数据: {{ topic }}</h1>
<div class="container">
{% for message in historical_data %}
<div class="message">
<p>报警编号: {{ message[2] }}</p>
<p>报警信息: {{ message[3] }}</p>
<p>小车状态: {{ message[4] }}</p>
<p>时间: {{ message[5] }}</p>
</div>
{% endfor %}
</div>
<form action="{{ url_for('clear_history', topic=topic) }}" method="post" class="clear-button">
<button type="submit">清除历史记录</button>
</form>
</body>
</html>