<!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>
