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

2025-06-25 11:36:43 +08:00
parent 37d39f4578
commit 25b3cb7f2e
494 changed files with 114074 additions and 0 deletions
--- a/templates/Index.html
+++ b/templates/Index.html
@ -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>