// 全局变量
let currentModule = 'data-reception';
let dataStreamInterval;
let timeUpdateInterval;
let processingTaskInterval;

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

// 应用初始化
function initializeApp() {
    setupNavigation();
    setupTimeDisplay();
    setupDataStream();
    setupProcessingNodes();
    setupVisualizationControls();
    setupDataPoints();
    
    console.log('海洋数据系统DEMO已启动');
}

// 设置导航功能
function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const modules = document.querySelectorAll('.module');
    
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            const targetModule = this.getAttribute('data-module');
            
            // 更新导航状态
            navItems.forEach(nav => nav.classList.remove('active'));
            this.classList.add('active');
            
            // 切换模块显示
            modules.forEach(module => module.classList.remove('active'));
            document.getElementById(targetModule).classList.add('active');
            
            currentModule = targetModule;
            
            // 根据模块执行特定初始化
            switch(targetModule) {
                case 'data-reception':
                    startDataReception();
                    break;
                case 'data-processing':
                    startProcessingMonitor();
                    break;
                case 'data-visualization':
                    startVisualization();
                    break;
            }
            
            console.log(`切换到模块: ${targetModule}`);
        });
    });
}

// 设置时间显示
function setupTimeDisplay() {
    const timeDisplay = document.getElementById('currentTime');
    
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        timeDisplay.textContent = timeString;
    }
    
    updateTime();
    timeUpdateInterval = setInterval(updateTime, 1000);
}

// 设置数据流显示
// 数据流管理类
class DataStreamManager {
    constructor() {
        this.container = null;
        this.interval = null;
        this.maxItems = 12;
        this.updateFrequency = 500; // 1秒更新一次
        this.isRunning = false;
    }

    init() {
        this.container = document.querySelector('.data-stream');
        if (!this.container) {
            console.error('数据流容器未找到');
            return false;
        }
        
        // 清空容器
        this.container.innerHTML = '';
        
        // 初始化几个数据项
        this.generateInitialData();
        
        // 开始定期更新
        this.start();
        
        console.log('数据流管理器初始化完成');
        return true;
    }

    generateInitialData() {
        // 生成3-5个初始数据项
        const initialCount = Math.floor(Math.random() * 3) + 3;
        for (let i = 0; i < initialCount; i++) {
            setTimeout(() => {
                this.addDataItem();
            }, i * 300);
        }
    }

    addDataItem() {
        if (!this.container) return;

        // 随机选择设备
        const device = oceanDevices[Math.floor(Math.random() * oceanDevices.length)];
        const param = device.parameters[Math.floor(Math.random() * device.parameters.length)];
        const value = this.generateValue(param);
        
        const timestamp = new Date().toLocaleTimeString('zh-CN', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });

        // 创建数据项
        const item = this.createDataItem(device, param, value, timestamp);
        
        // 添加到容器顶部
        this.container.insertBefore(item, this.container.firstChild);
        
        // 限制数量
        this.limitItems();
        
        // 触发进入动画
        requestAnimationFrame(() => {
            item.style.opacity = '1';
            item.style.transform = 'translateX(0)';
        });
    }

    createDataItem(device, param, value, timestamp) {
        const item = document.createElement('div');
        item.className = `stream-item ${this.getDeviceClass(device.type)}`;
        
        // 参数名称映射
        const paramNames = {
            'time': '时间', 'lng_lat': '经纬度', 'temp': '温度', 'cond': '电导率',
            'depth': '深度', 'salinity': '盐度', 'flow_velocity': '流速', 'flow_direction': '流向',
            'gravity': '重力', 'magnetic_field_1': '磁场强度1', 'magnetic_field_2': '磁场强度2',
            'wave_height_max': '最大波高', 'wave_height_effective': '有效波高', 'cycle_max': '最大周期',
            'wind_speed': '风速', 'wind_direction': '风向', 'air_pressure': '气压',
            'humidity': '湿度', 'visibility': '能见度', 'cloud_height_1': '云高1',
            'irradiance': '辐照度', 'turbidity': '浊度', 'chlorophyll': '叶绿素'
        };

        item.innerHTML = `
            <div class="stream-device-info">
                <div class="stream-device-icon">${this.getDeviceIcon(device.type)}</div>
                <div class="stream-device-details">
                    <div class="stream-device-name">${device.name}</div>
                    <div class="stream-parameter">${paramNames[param] || param}</div>
                </div>
            </div>
            <div class="stream-value-section">
                <div class="stream-value" style="color: ${device.color}">${value}</div>
                <div class="stream-timestamp">${timestamp}</div>
            </div>
        `;

        // 添加点击事件
        item.addEventListener('click', () => {
            this.showItemDetails(device, param, value, timestamp);
        });

        return item;
    }

    limitItems() {
        const items = this.container.querySelectorAll('.stream-item');
        if (items.length > this.maxItems) {
            const excess = items.length - this.maxItems;
            for (let i = 0; i < excess; i++) {
                const lastItem = items[items.length - 1 - i];
                lastItem.classList.add('removing');
                setTimeout(() => {
                    if (lastItem.parentNode) {
                        lastItem.remove();
                    }
                }, 300);
            }
        }
    }

    generateValue(param) {
        const valueRanges = {
            'temp': () => (Math.random() * 30 + 5).toFixed(1) + '°C',
            'depth': () => (Math.random() * 6000 + 10).toFixed(0) + 'm',
            'flow_velocity': () => (Math.random() * 2 + 0.1).toFixed(2) + 'm/s',
            'wind_speed': () => (Math.random() * 20 + 2).toFixed(1) + 'm/s',
            'air_pressure': () => (Math.random() * 50 + 1000).toFixed(1) + 'hPa',
            'humidity': () => (Math.random() * 40 + 40).toFixed(0) + '%',
            'wave_height_max': () => (Math.random() * 8 + 0.5).toFixed(1) + 'm',
            'salinity': () => (Math.random() * 5 + 30).toFixed(2) + 'psu',
            'gravity': () => (Math.random() * 0.1 + 9.8).toFixed(3) + 'm/s²',
            'visibility': () => (Math.random() * 20 + 5).toFixed(1) + 'km',
            'cloud_height_1': () => (Math.random() * 3000 + 500).toFixed(0) + 'm'
        };

        return valueRanges[param] ? valueRanges[param]() : (Math.random() * 100).toFixed(2);
    }

    getDeviceClass(type) {
        const classMap = {
            'CTD': 'device-ctd', 'ADCP_38K': 'device-adcp', 'ADCP_150K': 'device-adcp',
            'GRAVITY': 'device-gravity', 'MAGNETIC': 'device-magnetic', 'WAVE_GAUGE': 'device-wave',
            'DEPTH_SOUNDER': 'device-depth', 'WAVE_RADAR': 'device-radar', 'MULTI_SENSOR': 'device-multi',
            'WAVE_BUOY': 'device-buoy', 'BEIDOU': 'device-beidou', 'WIND_PROFILER': 'device-wind',
            'WEATHER_STATION': 'device-weather', 'SKY_SCANNER': 'device-sky', 'TURBULENCE': 'device-turbulence',
            'LIDAR_WIND': 'device-lidar', 'VISIBILITY': 'device-visibility', 'CLOUD_HEIGHT': 'device-cloud',
            'NAVIGATION': 'device-navigation'
        };
        return classMap[type] || 'device-default';
    }

    getDeviceIcon(type) {
        const iconMap = {
            'CTD': '🌊', 'ADCP_38K': '🌀', 'ADCP_150K': '🌀', 'GRAVITY': '⚖️', 'MAGNETIC': '🧲',
            'WAVE_GAUGE': '〰️', 'DEPTH_SOUNDER': '📏', 'WAVE_RADAR': '📡', 'MULTI_SENSOR': '🔬',
            'WAVE_BUOY': '🛟', 'BEIDOU': '🛰️', 'WIND_PROFILER': '💨', 'WEATHER_STATION': '🌤️',
            'SKY_SCANNER': '🌌', 'TURBULENCE': '🌪️', 'LIDAR_WIND': '🔦', 'VISIBILITY': '👁️',
            'CLOUD_HEIGHT': '☁️', 'NAVIGATION': '🧭'
        };
        return iconMap[type] || '📊';
    }

    showItemDetails(device, param, value, timestamp) {
        // 创建模态框
        const modal = document.createElement('div');
        modal.className = 'stream-detail-modal';
        modal.style.cssText = `
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8); display: flex; align-items: center;
            justify-content: center; z-index: 1000; backdrop-filter: blur(5px);
        `;

        const content = document.createElement('div');
        content.style.cssText = `
            background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
            border-radius: 16px; padding: 24px; max-width: 400px; width: 90%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        `;

        content.innerHTML = `
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
                <div style="font-size: 24px;">${this.getDeviceIcon(device.type)}</div>
                <div>
                    <h3 style="margin: 0; color: white; font-size: 1.2rem;">${device.name}</h3>
                    <p style="margin: 4px 0 0 0; color: #94a3b8; font-size: 0.9rem;">设备ID: ${device.id}</p>
                </div>
            </div>
            <div style="background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 16px; margin-bottom: 16px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span style="color: #94a3b8;">参数</span>
                    <span style="color: white; font-weight: 600;">${param}</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span style="color: #94a3b8;">数值</span>
                    <span style="color: ${device.color}; font-weight: 700; font-family: monospace;">${value}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #94a3b8;">时间</span>
                    <span style="color: white; font-family: monospace;">${timestamp}</span>
                </div>
            </div>
            <button onclick="this.closest('.stream-detail-modal').remove()" 
                    style="width: 100%; padding: 12px; background: ${device.color}; color: white; 
                           border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">
                关闭
            </button>
        `;

        modal.appendChild(content);
        document.body.appendChild(modal);

        // 点击背景关闭
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.remove();
        });
    }

    start() {
        if (this.isRunning) return;
        
        this.isRunning = true;
        this.interval = setInterval(() => {
            this.addDataItem();
        }, this.updateFrequency);
        
        console.log('数据流开始运行');
    }

    stop() {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
        this.isRunning = false;
        console.log('数据流已停止');
    }

    restart() {
        this.stop();
        setTimeout(() => {
            this.start();
        }, 100);
    }
}

// 创建全局数据流管理器实例
const dataStreamManager = new DataStreamManager();

// 重新定义setupDataStream函数
function setupDataStream() {
    return dataStreamManager.init();
}

// 设置数据点交互
function setupDataPoints() {
    const dataPoints = document.querySelectorAll('.data-point');
    const sourceDetails = document.getElementById('sourceDetails');
    
    const sourceInfo = {
        '浮标-001': {
            location: '北纬 25.2°, 东经 120.5°',
            status: '在线',
            lastUpdate: '2分钟前',
            type: '海洋浮标'
        },
        '卫星-A': {
            location: '轨道高度 705km',
            status: '在线',
            lastUpdate: '1分钟前',
            type: '海洋观测卫星'
        },
        '监测站-B': {
            location: '北纬 22.8°, 东经 118.3°',
            status: '在线',
            lastUpdate: '30秒前',
            type: '海岸监测站'
        },
        '船舶-C': {
            location: '北纬 24.1°, 东经 119.7°',
            status: '在线',
            lastUpdate: '5分钟前',
            type: '科考船'
        }
    };
    
    dataPoints.forEach(point => {
        point.addEventListener('click', function() {
            const sourceName = this.getAttribute('data-source');
            const info = sourceInfo[sourceName];
            
            if (info && sourceDetails) {
                sourceDetails.innerHTML = `
                    <div class="detail-item">
                        <span class="detail-label">数据源:</span>
                        <span class="detail-value">${sourceName}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">类型:</span>
                        <span class="detail-value">${info.type}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">位置:</span>
                        <span class="detail-value">${info.location}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">状态:</span>
                        <span class="detail-value status-online">${info.status}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">最后更新:</span>
                        <span class="detail-value">${info.lastUpdate}</span>
                    </div>
                `;
            }
            
            // 高亮效果
            dataPoints.forEach(p => p.classList.remove('highlighted'));
            this.classList.add('highlighted');
        });
    });
}

// 设置处理节点交互
function setupProcessingNodes() {
    const nodes = document.querySelectorAll('.pipeline-node');
    const nodeTitle = document.getElementById('nodeTitle');
    const nodeDetails = document.getElementById('nodeDetails');
    
    const nodeInfo = {
        'input': {
            title: '原始数据输入',
            details: `
                <div class="node-info">
                    <p><strong>功能:</strong> 接收来自各种数据源的原始海洋数据</p>
                    <p><strong>数据类型:</strong> 温度、盐度、叶绿素、波高等</p>
                    <p><strong>当前状态:</strong> <span style="color: #10b981;">正常运行</span></p>
                    <p><strong>处理速率:</strong> 15.2 MB/s</p>
                </div>
            `
        },
        'clean': {
            title: '数据清洗',
            details: `
                <div class="node-info">
                    <p><strong>功能:</strong> 去除异常值、填补缺失数据</p>
                    <p><strong>质量指标:</strong></p>
                    <ul>
                        <li>数据完整性: 98.5%</li>
                        <li>异常值检出率: 2.1%</li>
                        <li>处理成功率: 99.8%</li>
                    </ul>
                    <p><strong>算法:</strong> 3σ准则 + 卡尔曼滤波</p>
                </div>
            `
        },
        'format': {
            title: '数据格式化',
            details: `
                <div class="node-info">
                    <p><strong>功能:</strong> 统一数据格式和坐标系统</p>
                    <p><strong>输出格式:</strong> NetCDF-4</p>
                    <p><strong>坐标系:</strong> WGS84</p>
                    <p><strong>时间标准:</strong> UTC</p>
                    <p><strong>处理延迟:</strong> < 5秒</p>
                </div>
            `
        },
        'interpolation': {
            title: '三维插值',
            details: `
                <div class="node-info">
                    <p><strong>功能:</strong> 生成规则网格的三维温度场</p>
                    <p><strong>插值方法:</strong> 克里金插值</p>
                    <p><strong>质量评估:</strong></p>
                    <ul>
                        <li>相关系数: 0.95</li>
                        <li>RMSE: 0.2°C</li>
                        <li>标准差: 0.15</li>
                    </ul>
                    <p><strong>网格分辨率:</strong> 0.1° × 0.1°</p>
                </div>
            `
        },
        'analysis': {
            title: '叶绿素反演',
            details: `
                <div class="node-info">
                    <p><strong>功能:</strong> 基于多光谱数据反演叶绿素浓度</p>
                    <p><strong>算法:</strong> OC4v6 + 神经网络</p>
                    <p><strong>波段:</strong> 443, 490, 510, 555 nm</p>
                    <p><strong>精度:</strong> ±0.3 mg/m³</p>
                    <p><strong>覆盖范围:</strong> 全球海域</p>
                </div>
            `
        },
        'output': {
            title: '产品数据库',
            details: `
                <div class="node-info">
                    <p><strong>功能:</strong> 存储最终处理产品</p>
                    <p><strong>存储格式:</strong> HDF5 + 元数据</p>
                    <p><strong>数据产品:</strong></p>
                    <ul>
                        <li>海表温度场</li>
                        <li>叶绿素分布图</li>
                        <li>三维温盐结构</li>
                    </ul>
                    <p><strong>更新频率:</strong> 每小时</p>
                </div>
            `
        }
    };
    
    nodes.forEach(node => {
        node.addEventListener('click', function() {
            const step = this.getAttribute('data-step');
            const info = nodeInfo[step];
            
            if (info && nodeTitle && nodeDetails) {
                nodeTitle.textContent = info.title;
                nodeDetails.innerHTML = info.details;
            }
            
            // 高亮效果
            nodes.forEach(n => n.classList.remove('highlighted'));
            this.classList.add('highlighted');
        });
    });
}

// 设置可视化控件
function setupVisualizationControls() {
    const playButton = document.querySelector('#data-visualization .btn-primary');
    const dataSelect = document.querySelector('#data-visualization .control-select');
    
    if (playButton) {
        playButton.addEventListener('click', function() {
            const icon = this.querySelector('i');
            const text = this.querySelector('span') || this.childNodes[this.childNodes.length - 1];
            
            if (icon.classList.contains('fa-play')) {
                icon.classList.remove('fa-play');
                icon.classList.add('fa-pause');
                if (text) text.textContent = ' 暂停动画';
                startTemperatureAnimation();
            } else {
                icon.classList.remove('fa-pause');
                icon.classList.add('fa-play');
                if (text) text.textContent = ' 播放动画';
                stopTemperatureAnimation();
            }
        });
    }
    
    if (dataSelect) {
        dataSelect.addEventListener('change', function() {
            updateVisualizationData(this.value);
        });
    }
}

// 启动数据接收
function startDataReception() {
    console.log('数据接收模块已激活');
    // 重新启动数据流（如果已停止）
    if (!dataStreamInterval) {
        setupDataStream();
    }
}

// 启动处理监控
function startProcessingMonitor() {
    console.log('数据处理模块已激活');
    startProcessingTask();
}

// 启动可视化
function startVisualization() {
    console.log('数据可视化模块已激活');
    updateMetrics();
}

// 启动处理任务演示
function startProcessingTask() {
    const nodes = document.querySelectorAll('.pipeline-node');
    const logContent = document.getElementById('logContent');
    
    function addLogEntry(message, type = 'info') {
        if (!logContent) return;
        
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        
        const logEntry = document.createElement('div');
        logEntry.className = `log-entry ${type}`;
        logEntry.textContent = `[${timeString}] ${message}`;
        
        logContent.insertBefore(logEntry, logContent.firstChild);
        
        // 限制日志条数
        while (logContent.children.length > 20) {
            logContent.removeChild(logContent.lastChild);
        }
    }
    
    function simulateProcessing() {
        const messages = [
            { msg: '数据块 #A7B2 处理完成', type: 'info' },
            { msg: '三维插值算法执行成功', type: 'info' },
            { msg: '叶绿素反演计算完成', type: 'info' },
            { msg: '警告: 数据源 浮标-003 信号弱', type: 'warning' },
            { msg: '产品数据已存储到数据库', type: 'info' },
            { msg: '质量检验通过率: 98.5%', type: 'info' }
        ];
        
        const randomMessage = messages[Math.floor(Math.random() * messages.length)];
        addLogEntry(randomMessage.msg, randomMessage.type);
    }
    
    // 定期添加日志
    processingTaskInterval = setInterval(simulateProcessing, 5000);
    
    // 初始日志
    setTimeout(() => addLogEntry('南海温度场与叶绿素产品生成任务启动'), 1000);
}

// 温度动画控制
let temperatureAnimationInterval;

function startTemperatureAnimation() {
    const temperatureZones = document.querySelectorAll('.temperature-zone');
    
    temperatureAnimationInterval = setInterval(() => {
        temperatureZones.forEach(zone => {
            // 随机改变温度区域的大小和位置
            const newTop = Math.random() * 70 + 10;
            const newLeft = Math.random() * 70 + 10;
            const newWidth = Math.random() * 20 + 15;
            const newHeight = Math.random() * 15 + 10;
            
            zone.style.top = newTop + '%';
            zone.style.left = newLeft + '%';
            zone.style.width = newWidth + '%';
            zone.style.height = newHeight + '%';
        });
    }, 2000);
}

function stopTemperatureAnimation() {
    if (temperatureAnimationInterval) {
        clearInterval(temperatureAnimationInterval);
        temperatureAnimationInterval = null;
    }
}

// 更新可视化数据
function updateVisualizationData(dataType) {
    const metrics = document.querySelectorAll('.metric-value');
    
    const dataValues = {
        '温度数据': ['24.5°C', '2.8m', '3'],
        '盐度数据': ['34.2‰', '1.9m', '2'],
        '叶绿素数据': ['0.8mg/m³', '2.1m', '4']
    };
    
    const values = dataValues[dataType] || dataValues['温度数据'];
    
    metrics.forEach((metric, index) => {
        if (values[index]) {
            metric.textContent = values[index];
        }
    });
    
    console.log(`切换到${dataType}显示`);
}

// 更新指标数据
function updateMetrics() {
    const statValues = document.querySelectorAll('.stat-value');
    
    // 模拟数据更新
    setInterval(() => {
        statValues.forEach(stat => {
            const currentText = stat.textContent;
            if (currentText.includes('MB/s')) {
                const newValue = (Math.random() * 10 + 10).toFixed(1);
                stat.textContent = newValue + ' MB/s';
            } else if (currentText.includes('°C')) {
                const newValue = (Math.random() * 5 + 22).toFixed(1);
                stat.textContent = newValue + '°C';
            } else if (!isNaN(parseInt(currentText))) {
                const baseValue = parseInt(currentText);
                const variation = Math.floor(Math.random() * 10 - 5);
                stat.textContent = Math.max(0, baseValue + variation);
            }
        });
    }, 10000);
}

// 添加CSS类用于高亮效果
const style = document.createElement('style');
style.textContent = `
    .data-point.highlighted {
        transform: scale(1.5);
        box-shadow: 0 0 20px var(--accent-green);
        z-index: 20;
    }
    
    .pipeline-node.highlighted {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
        border-color: var(--accent-blue);
    }
    
    .node-info {
        line-height: 1.6;
    }
    
    .node-info ul {
        margin: 0.5rem 0;
        padding-left: 1rem;
    }
    
    .node-info li {
        margin: 0.25rem 0;
        color: var(--text-secondary);
    }
    
    .node-info strong {
        color: var(--accent-blue);
    }
`;
document.head.appendChild(style);

// 清理函数
function cleanup() {
    if (dataStreamInterval) clearInterval(dataStreamInterval);
    if (timeUpdateInterval) clearInterval(timeUpdateInterval);
    if (processingTaskInterval) clearInterval(processingTaskInterval);
    if (temperatureAnimationInterval) clearInterval(temperatureAnimationInterval);
}

// 页面卸载时清理
window.addEventListener('beforeunload', cleanup);

// 导出主要函数供调试使用
window.OceanDemo = {
    switchModule: function(moduleName) {
        const navItem = document.querySelector(`[data-module="${moduleName}"]`);
        if (navItem) navItem.click();
    },
    startProcessingDemo: startProcessingTask,
    updateVisualization: updateVisualizationData,
    cleanup: cleanup
};

console.log('海洋数据系统DEMO脚本加载完成');

// 真实海洋设备数据配置
const oceanDevices = [
    {
        id: 'ctd_001',
        name: 'CTD温盐深仪',
        type: 'CTD',
        position: { lat: 35.2, lng: 120.5 },
        parameters: ['time', 'lng_lat', 'temp', 'cond', 'depth'],
        status: 'online',
        color: '#00ff88'
    },
    {
        id: 'adcp_38k_001',
        name: '船载ADCP系统(38k)',
        type: 'ADCP_38K',
        position: { lat: 36.1, lng: 121.2 },
        parameters: ['data_time', 'lng_lat', 'depth', 'flow_velocity', 'flow_direction', 'flow_velocity_e', 'flow_velocity_n', 'flow_velocity_v'],
        status: 'online',
        color: '#0088ff'
    },
    {
        id: 'adcp_150k_001',
        name: '船载ADCP系统(150k)',
        type: 'ADCP_150K',
        position: { lat: 34.8, lng: 119.8 },
        parameters: ['data_time', 'lng_lat', 'depth', 'flow_velocity', 'flow_direction', 'flow_velocity_e', 'flow_velocity_n', 'flow_velocity_v'],
        status: 'online',
        color: '#0066ff'
    },
    {
        id: 'gravity_001',
        name: '重力仪',
        type: 'GRAVITY',
        position: { lat: 35.5, lng: 120.8 },
        parameters: ['data_time', 'lng_lat', 'gravity'],
        status: 'online',
        color: '#ff6600'
    },
    {
        id: 'magnetic_001',
        name: '磁力仪',
        type: 'MAGNETIC',
        position: { lat: 36.3, lng: 121.5 },
        parameters: ['data_time', 'lng_lat', 'magnetic_field_1', 'magnetic_field_2'],
        status: 'online',
        color: '#ff0066'
    },
    {
        id: 'wave_gauge_001',
        name: '波潮仪',
        type: 'WAVE_GAUGE',
        position: { lat: 35.8, lng: 120.2 },
        parameters: ['data_time', 'lng_lat', 'wave_height_max', 'cycle_max', 'wave_height_1_10', 'cycle_1_10', 'wave_height_effective', 'cycle_effective', 'wave_height_average', 'cycle_average'],
        status: 'online',
        color: '#00ffff'
    },
    {
        id: 'depth_sounder_001',
        name: '6000米测深仪',
        type: 'DEPTH_SOUNDER',
        position: { lat: 34.5, lng: 119.5 },
        parameters: ['data_time', 'lng_lat', 'depth_f', 'depth_m'],
        status: 'online',
        color: '#8800ff'
    },
    {
        id: 'wave_radar_001',
        name: '测波雷达',
        type: 'WAVE_RADAR',
        position: { lat: 36.5, lng: 122.1 },
        parameters: ['data_time', 'lng_lat', 'wave_height_effective', 'cycle_tm2', 'direction_peak', 'cycle_peak', 'wavelength_peak', 'direction_swell_primary', 'cycle_swell_primary', 'wavelength_swell_primary', 'direction_wind_wave', 'cycle_wind_wave', 'wavelength_wind_wave', 'current_direction', 'current_velocity', 'encounter_current_direction', 'encounter_current_velocity'],
        status: 'online',
        color: '#ffff00'
    },
    {
        id: 'multi_sensor_001',
        name: '表层多要素自动测定系统',
        type: 'MULTI_SENSOR',
        position: { lat: 35.1, lng: 119.9 },
        parameters: ['data_time', 'lng_lat', 'temp', 'cond', 'salinity', 'chlorophyll', 'cdom', 'turbidity'],
        status: 'online',
        color: '#00ff00'
    },
    {
        id: 'wave_buoy_001',
        name: '小型波浪浮标',
        type: 'WAVE_BUOY',
        position: { lat: 34.9, lng: 120.7 },
        parameters: ['time', 'lng_lat', 'wave_height_average', 'cycle_average', 'wave_height_max', 'cycle_max', 'wave_height_1_10', 'cycle_1_10', 'wave_height_effective'],
        status: 'online',
        color: '#ff8800'
    },
    {
        id: 'beidou_001',
        name: '北斗探测系统',
        type: 'BEIDOU',
        position: { lat: 36.0, lng: 121.8 },
        parameters: ['data_time', 'lng_lat', 'temp', 'relative_humidity', 'air_pressure', 'wind_speed', 'height', 'wind_direction'],
        status: 'online',
        color: '#ff4400'
    },
    {
        id: 'wind_profiler_001',
        name: '舰载风廓线雷达',
        type: 'WIND_PROFILER',
        position: { lat: 35.7, lng: 121.0 },
        parameters: ['time', 'lng_lat', 'height', 'wind_direction', 'wind_speed', 'wind_speed_v', 'reliability_l', 'reliability_v', 'cn2'],
        status: 'online',
        color: '#4400ff'
    },
    {
        id: 'weather_station_001',
        name: '船载自动气象站',
        type: 'WEATHER_STATION',
        position: { lat: 34.7, lng: 119.3 },
        parameters: ['data_time', 'lng_lat', 'wind_speed_realtime', 'wind_direction_realtime', 'wind_speed_average', 'wind_direction_average', 'wind_speed_max', 'wind_direction_max', 'time_wind_speed_max', 'temperature', 'humidity', 'pressure', 'rainfall_minute', 'rainfall_hour', 'rainfall_day', 'status_sensor'],
        status: 'online',
        color: '#88ff00'
    },
    {
        id: 'sky_scanner_001',
        name: '全天空背景扫描仪',
        type: 'SKY_SCANNER',
        position: { lat: 36.2, lng: 120.3 },
        parameters: ['data_time', 'lng_lat', 'irradiance', 'radiance'],
        status: 'online',
        color: '#ff0088'
    },
    {
        id: 'turbulence_001',
        name: '大气湍流谱仪',
        type: 'TURBULENCE',
        position: { lat: 35.4, lng: 121.7 },
        parameters: ['data_time', 'lng_lat', 'temp', 'air_pressure', 'cn2'],
        status: 'online',
        color: '#0044ff'
    },
    {
        id: 'lidar_wind_001',
        name: '激光测风雷达',
        type: 'LIDAR_WIND',
        position: { lat: 34.6, lng: 120.1 },
        parameters: ['data_time', 'lng_lat', 'height', 'wind_speed_l', 'wind_direction_l', 'wind_speed_v'],
        status: 'online',
        color: '#ff6600'
    },
    {
        id: 'visibility_001',
        name: '天气现象及能见度仪',
        type: 'VISIBILITY',
        position: { lat: 35.9, lng: 119.6 },
        parameters: ['data_time', 'lng_lat', 'height', 'visibility', 'azimuth_angle', 'elevation'],
        status: 'online',
        color: '#66ff00'
    },
    {
        id: 'cloud_height_001',
        name: '激光云高仪',
        type: 'CLOUD_HEIGHT',
        position: { lat: 36.4, lng: 120.9 },
        parameters: ['data_time', 'lng_lat', 'cloud_height_1', 'cloud_height_2', 'cloud_height_3', 'cloud_height_4', 'cloud_height_5', 'cloud_thickness_1', 'cloud_thickness_2', 'cloud_thickness_3', 'cloud_thickness_4', 'cloud_thickness_5'],
        status: 'online',
        color: '#00aaff'
    },
    {
        id: 'navigation_001',
        name: '船舶航行数据',
        type: 'NAVIGATION',
        position: { lat: 35.3, lng: 121.3 },
        parameters: ['POS惯导', 'GNSS', '计程仪', '电罗经', '测深仪'],
        status: 'online',
        color: '#aa00ff'
    }
];

function initDataReception() {
    const earthContainer = document.getElementById('earth-container');
    if (!earthContainer) return;

    // 清空容器
    earthContainer.innerHTML = '';

    // 创建地球
    const earth = document.createElement('div');
    earth.className = 'earth';
    earthContainer.appendChild(earth);

    // 添加真实设备数据源点
    oceanDevices.forEach((device, index) => {
        const point = document.createElement('div');
        point.className = 'data-source-point';
        point.style.backgroundColor = device.color;
        point.style.boxShadow = `0 0 20px ${device.color}`;
        
        // 根据经纬度计算位置（简化的球面投影）
        const x = 50 + (device.position.lng - 120) * 8; // 相对于120度经线
        const y = 50 - (device.position.lat - 35) * 8;   // 相对于35度纬线
        
        point.style.left = `${Math.max(10, Math.min(90, x))}%`;
        point.style.top = `${Math.max(10, Math.min(90, y))}%`;
        
        point.setAttribute('data-device-id', device.id);
        point.setAttribute('data-device-name', device.name);
        point.setAttribute('data-device-type', device.type);
        
        // 添加点击事件
        point.addEventListener('click', () => showDeviceDetails(device));
        
        earthContainer.appendChild(point);

        // 创建数据流线
        const streamLine = document.createElement('div');
        streamLine.className = 'data-stream-line';
        streamLine.style.background = `linear-gradient(45deg, transparent, ${device.color}, transparent)`;
        streamLine.style.left = point.style.left;
        streamLine.style.top = point.style.top;
        streamLine.style.animationDelay = `${index * 0.2}s`;
        
        earthContainer.appendChild(streamLine);
    });

    // 更新统计信息
    updateReceptionStats();
}

function updateReceptionStats() {
    const totalDevices = oceanDevices.length;
    const onlineDevices = oceanDevices.filter(d => d.status === 'online').length;
    const totalParams = oceanDevices.reduce((sum, device) => sum + device.parameters.length, 0);
    
    // 更新统计显示
    const statsElements = {
        'total-received': `${(Math.random() * 50000 + 150000).toFixed(0)}`,
        'reception-rate': `${(Math.random() * 200 + 800).toFixed(0)} 包/秒`,
        'online-sources': `${onlineDevices}/${totalDevices}`,
        'data-types': `${totalParams} 种参数`
    };
    
    Object.entries(statsElements).forEach(([id, value]) => {
        const element = document.getElementById(id);
        if (element) element.textContent = value;
    });
}

// 底部数据流面板管理
class BottomDataStreamManager {
    constructor() {
        this.isCollapsed = false;
        this.dataStreamManager = new DataStreamManager();
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.startDataStream();
    }

    setupEventListeners() {
        const streamHeader = document.querySelector('.stream-header');
        const streamToggle = document.querySelector('.stream-toggle');
        
        if (streamHeader) {
            streamHeader.addEventListener('click', () => this.togglePanel());
        }
        
        if (streamToggle) {
            streamToggle.addEventListener('click', (e) => {
                e.stopPropagation();
                this.togglePanel();
            });
        }
    }

    togglePanel() {
        const panel = document.querySelector('.bottom-data-stream');
        if (panel) {
            this.isCollapsed = !this.isCollapsed;
            panel.classList.toggle('collapsed', this.isCollapsed);
            
            // 更新按钮文本
            const toggleText = document.querySelector('.stream-toggle span');
            if (toggleText) {
                toggleText.textContent = this.isCollapsed ? '展开' : '收起';
            }
        }
    }

    startDataStream() {
        // 启动数据流管理器
        this.dataStreamManager.start();
        
        // 每1秒添加新数据 - 加快生成速度
        setInterval(() => {
            this.addNewDataItem();
        }, 1000);
    }

    addNewDataItem() {
        const container = document.querySelector('.data-stream.horizontal');
        if (!container) return;

        const newItem = this.dataStreamManager.generateDataItem();
        const itemElement = this.createStreamItemElement(newItem);
        
        // 为新卡片添加特殊类名
        itemElement.classList.add('new-item');
        
        // 为现有卡片添加推动效果
        const existingItems = container.querySelectorAll('.stream-item');
        existingItems.forEach((item, index) => {
            if (index < 5) { // 对前5个卡片添加推动效果
                // 先移除可能存在的重置类
                item.classList.remove('reset-position');
                // 添加推动效果
                setTimeout(() => {
                    item.classList.add('push-right');
                }, 50); // 小延迟确保DOM更新
            }
        });
        
        // 添加到容器开头
        container.insertBefore(itemElement, container.firstChild);
        
        // 延迟重置卡片位置，创建流动效果
        setTimeout(() => {
            const allItems = container.querySelectorAll('.stream-item');
            allItems.forEach((item, index) => {
                if (item.classList.contains('push-right')) {
                    item.classList.remove('push-right');
                    item.classList.add('reset-position');
                }
            });
        }, 100);
        
        // 限制显示的数据项数量，为超出的卡片添加淡出动画
        setTimeout(() => {
            const items = container.querySelectorAll('.stream-item');
            if (items.length > 20) {
                const itemToRemove = items[items.length - 1];
                itemToRemove.classList.add('fade-out');
                
                // 动画完成后移除元素
                setTimeout(() => {
                    if (itemToRemove.parentNode) {
                        itemToRemove.remove();
                    }
                }, 500);
            }
        }, 200);
        
        // 清理类名
        setTimeout(() => {
            itemElement.classList.remove('new-item');
            const allItems = container.querySelectorAll('.stream-item');
            allItems.forEach(item => {
                item.classList.remove('reset-position');
            });
        }, 800);
        
        // 自动滚动到最新数据
        container.scrollLeft = 0;
    }

    createStreamItemElement(data) {
        const item = document.createElement('div');
        item.className = 'stream-item';
        
        // 设备类型颜色
        const deviceColors = {
            'temperature': { bg: 'rgba(239, 68, 68, 0.2)', border: '#ef4444', icon: '🌡️' },
            'pressure': { bg: 'rgba(59, 130, 246, 0.2)', border: '#3b82f6', icon: '📊' },
            'salinity': { bg: 'rgba(34, 197, 94, 0.2)', border: '#22c55e', icon: '🧂' },
            'ph': { bg: 'rgba(168, 85, 247, 0.2)', border: '#a855f7', icon: '⚗️' },
            'oxygen': { bg: 'rgba(6, 182, 212, 0.2)', border: '#06b6d4', icon: '💨' },
            'turbidity': { bg: 'rgba(245, 158, 11, 0.2)', border: '#f59e0b', icon: '🌊' }
        };
        
        const colorInfo = deviceColors[data.type] || deviceColors['temperature'];
        
        item.innerHTML = `
            <div class="stream-device-info">
                <div class="stream-device-icon" style="background: ${colorInfo.bg}; border-color: ${colorInfo.border}; color: ${colorInfo.border};">
                    ${colorInfo.icon}
                </div>
                <div class="stream-device-details">
                    <div class="stream-device-name">${data.deviceName}</div>
                    <div class="stream-parameter">${data.parameter}</div>
                </div>
            </div>
            <div class="stream-value-section">
                <div class="stream-value" style="color: ${colorInfo.border};">${data.value}</div>
                <div class="stream-timestamp">${data.timestamp}</div>
            </div>
        `;
        
        return item;
    }
}

// 初始化底部数据流面板
document.addEventListener('DOMContentLoaded', () => {
    // 检查是否存在底部数据流面板
    if (document.querySelector('.bottom-data-stream')) {
        new BottomDataStreamManager();
    }
});

function showDeviceDetails(device) {
    // 创建设备详情弹窗
    const modal = document.createElement('div');
    modal.className = 'device-modal';
    modal.innerHTML = `
        <div class="device-modal-content">
            <div class="device-modal-header">
                <h3>${device.name}</h3>
                <span class="device-modal-close">&times;</span>
            </div>
            <div class="device-modal-body">
                <div class="device-info">
                    <p><strong>设备ID:</strong> ${device.id}</p>
                    <p><strong>设备类型:</strong> ${device.type}</p>
                    <p><strong>位置:</strong> ${device.position.lat}°N, ${device.position.lng}°E</p>
                    <p><strong>状态:</strong> <span class="status-${device.status}">${device.status === 'online' ? '在线' : '离线'}</span></p>
                </div>
                <div class="device-parameters">
                    <h4>测量参数:</h4>
                    <div class="parameters-grid">
                        ${device.parameters.map(param => `<span class="parameter-tag">${param}</span>`).join('')}
                    </div>
                </div>
                <div class="device-stats">
                    <h4>实时数据:</h4>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <span class="stat-label">数据包数:</span>
                            <span class="stat-value">${Math.floor(Math.random() * 1000 + 500)}</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">传输速率:</span>
                            <span class="stat-value">${Math.floor(Math.random() * 50 + 20)} KB/s</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">数据质量:</span>
                            <span class="stat-value">${(Math.random() * 10 + 90).toFixed(1)}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    // 关闭弹窗事件
    const closeBtn = modal.querySelector('.device-modal-close');
    closeBtn.addEventListener('click', () => {
        document.body.removeChild(modal);
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    });
}

// 更新数据流显示函数
function updateDataStream() {
    const streamContainer = document.querySelector('.data-stream');
    if (!streamContainer) return;

    // 随机选择一个设备
    const device = oceanDevices[Math.floor(Math.random() * oceanDevices.length)];
    const param = device.parameters[Math.floor(Math.random() * device.parameters.length)];
    const value = generateRandomValue(param);
    
    const now = new Date();
    const timestamp = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
    
    // 获取参数的中文名称
    const paramNames = {
        'time': '时间',
        'lng_lat': '经纬度',
        'temp': '温度',
        'cond': '电导率',
        'depth': '深度',
        'salinity': '盐度',
        'flow_velocity': '流速',
        'flow_direction': '流向',
        'gravity': '重力',
        'magnetic_field_1': '磁场强度1',
        'magnetic_field_2': '磁场强度2',
        'wave_height_max': '最大波高',
        'wave_height_effective': '有效波高',
        'cycle_max': '最大周期',
        'wind_speed': '风速',
        'wind_direction': '风向',
        'air_pressure': '气压',
        'humidity': '湿度',
        'visibility': '能见度',
        'cloud_height_1': '云高1',
        'irradiance': '辐照度',
        'turbidity': '浊度',
        'chlorophyll': '叶绿素'
    };
    
    // 创建数据流项目
    const streamItem = document.createElement('div');
    streamItem.className = `stream-item ${getDeviceTypeClass(device.type)}`;
    
    streamItem.innerHTML = `
        <div class="stream-device-info">
            <div class="stream-device-icon">${deviceTypeIcons[device.type] || '📊'}</div>
            <div class="stream-device-details">
                <div class="stream-device-name">${device.name}</div>
                <div class="stream-parameter">${paramNames[param] || param}</div>
            </div>
        </div>
        <div class="stream-value-section">
            <div class="stream-value" style="color: ${device.color}">${value}</div>
            <div class="stream-timestamp">${timestamp}</div>
        </div>
    `;
    
    // 添加点击事件
    streamItem.addEventListener('click', () => {
        showStreamItemDetails(device, param, value, timestamp);
    });
    
    // 添加到流中
    streamContainer.insertBefore(streamItem, streamContainer.firstChild);
    
    // 限制显示的项目数量
    const items = streamContainer.querySelectorAll('.stream-item');
    if (items.length > 12) {
        const lastItem = items[items.length - 1];
        lastItem.classList.add('removing');
        setTimeout(() => {
            if (lastItem.parentNode) {
                lastItem.remove();
            }
        }, 300);
    }
}

// 显示数据流项目详细信息
function showStreamItemDetails(device, param, value, timestamp) {
    const modal = document.createElement('div');
    modal.className = 'stream-detail-modal';
    modal.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(5px);
    `;
    
    const content = document.createElement('div');
    content.style.cssText = `
        background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
        border-radius: 16px;
        padding: 24px;
        max-width: 400px;
        width: 90%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    `;
    
    content.innerHTML = `
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
            <div style="font-size: 24px;">${deviceTypeIcons[device.type] || '📊'}</div>
            <div>
                <h3 style="margin: 0; color: white; font-size: 1.2rem;">${device.name}</h3>
                <p style="margin: 4px 0 0 0; color: #94a3b8; font-size: 0.9rem;">设备ID: ${device.id}</p>
            </div>
        </div>
        <div style="background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 16px; margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span style="color: #94a3b8;">参数</span>
                <span style="color: white; font-weight: 600;">${param}</span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <span style="color: #94a3b8;">数值</span>
                <span style="color: ${device.color}; font-weight: 700; font-family: 'Courier New', monospace;">${value}</span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="color: #94a3b8;">时间</span>
                <span style="color: white; font-family: 'Courier New', monospace;">${timestamp}</span>
            </div>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
            <span style="color: #94a3b8;">位置</span>
            <span style="color: white; font-family: 'Courier New', monospace;">${device.position.lat.toFixed(2)}°N, ${device.position.lng.toFixed(2)}°E</span>
        </div>
        <button onclick="this.closest('.stream-detail-modal').remove()" 
                style="width: 100%; padding: 12px; background: ${device.color}; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;">
            关闭
        </button>
    `;
    
    modal.appendChild(content);
    document.body.appendChild(modal);
    
    // 点击背景关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

// 更新数据源点渲染函数
function renderDataSourcePoints() {
    const earthSphere = document.querySelector('.earth-sphere');
    if (!earthSphere) return;

    // 清除现有的数据点
    earthSphere.querySelectorAll('.data-source-point').forEach(point => point.remove());
    earthSphere.querySelectorAll('.data-stream-line').forEach(line => line.remove());

    oceanDevices.forEach((device, index) => {
        // 创建数据源点
        const point = document.createElement('div');
        point.className = 'data-source-point';
        point.style.backgroundColor = deviceTypeColors[device.type] || '#00d4ff';
        point.style.color = deviceTypeColors[device.type] || '#00d4ff';
        
        // 根据经纬度计算位置（简化的球面投影）
        const x = ((device.longitude + 180) / 360) * 100;
        const y = ((90 - device.latitude) / 180) * 100;
        
        point.style.left = `${x}%`;
        point.style.top = `${y}%`;
        
        // 添加点击事件
        point.addEventListener('click', () => showDeviceDetails(device));
        
        // 添加悬停提示
        point.title = `${device.name} (${device.type})`;
        
        earthSphere.appendChild(point);
        
        // 创建数据流线
        if (Math.random() < 0.3) { // 30%的概率显示数据流
            const streamLine = document.createElement('div');
            streamLine.className = 'data-stream-line';
            streamLine.style.background = `linear-gradient(to top, ${deviceTypeColors[device.type] || '#00d4ff'}, transparent)`;
            streamLine.style.left = `${x}%`;
            streamLine.style.top = `${y}%`;
            streamLine.style.animationDelay = `${Math.random() * 3}s`;
            
            earthSphere.appendChild(streamLine);
        }
    });
}

// 更新设备详情显示函数
function showDeviceDetails(device) {
    // 创建模态框
    const modal = document.createElement('div');
    modal.className = 'device-modal';
    
    modal.innerHTML = `
        <div class="device-modal-content">
            <div class="device-modal-header">
                <h3>${deviceTypeIcons[device.type] || '📊'} ${device.name}</h3>
                <span class="device-modal-close">&times;</span>
            </div>
            <div class="device-info">
                <p><strong>设备类型:</strong> ${device.type}</p>
                <p><strong>位置:</strong> ${device.latitude.toFixed(4)}°N, ${device.longitude.toFixed(4)}°E</p>
                <p><strong>状态:</strong> <span class="${device.status === 'online' ? 'status-online' : 'status-offline'}">${device.status === 'online' ? '在线' : '离线'}</span></p>
                <p><strong>设备ID:</strong> ${device.id}</p>
            </div>
            <div class="device-parameters">
                <h4>监测参数</h4>
                <div class="parameters-grid">
                    ${device.parameters.map(param => `<span class="parameter-tag">${param}</span>`).join('')}
                </div>
            </div>
            <div class="device-stats">
                <h4>实时数据</h4>
                <div class="stats-grid">
                    ${device.parameters.slice(0, 6).map(param => `
                        <div class="stat-item">
                            <span class="stat-label">${param}</span>
                            <span class="stat-value">${generateRandomValue(param)}</span>
                        </div>
                    `).join('')}
                </div>
            </div>
        </div>
    `;
    
    // 添加关闭事件
    modal.querySelector('.device-modal-close').addEventListener('click', () => {
        modal.remove();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
    
    document.body.appendChild(modal);
}

function generateRandomValue(param) {
    const valueMap = {
        'temp': `${(Math.random() * 30 + 5).toFixed(2)}°C`,
        'temperature': `${(Math.random() * 30 + 5).toFixed(2)}°C`,
        'depth': `${(Math.random() * 6000).toFixed(1)}m`,
        'wind_speed': `${(Math.random() * 20 + 2).toFixed(1)}m/s`,
        'wave_height_max': `${(Math.random() * 8 + 1).toFixed(2)}m`,
        'pressure': `${(Math.random() * 50 + 1000).toFixed(1)}hPa`,
        'humidity': `${(Math.random() * 40 + 40).toFixed(1)}%`,
        'salinity': `${(Math.random() * 5 + 30).toFixed(2)}‰`,
        'flow_velocity': `${(Math.random() * 3).toFixed(2)}m/s`,
        'gravity': `${(Math.random() * 0.1 + 9.8).toFixed(4)}m/s²`,
        'visibility': `${(Math.random() * 20 + 5).toFixed(1)}km`,
        'irradiance': `${(Math.random() * 1000 + 200).toFixed(1)}W/m²`
    };
    
    // 检查参数名是否包含特定关键词
    for (const [key, value] of Object.entries(valueMap)) {
        if (param.includes(key)) {
            return value;
        }
    }
    
    // 默认返回数值
    return `${(Math.random() * 100).toFixed(2)}`;
}

// 数据处理模块
function initDataProcessing() {
    const pipelineContainer = document.querySelector('.pipeline-container');
    if (!pipelineContainer) return;

    // 清空现有内容
    pipelineContainer.innerHTML = '';

    // 创建处理流水线
    const pipelineFlow = document.createElement('div');
    pipelineFlow.className = 'pipeline-flow';

    // 定义处理节点（基于真实海洋数据处理流程）
    const processingNodes = [
        {
            id: 'data-ingestion',
            type: 'input-node',
            icon: 'fas fa-download',
            title: '数据接收',
            description: '接收来自19种海洋观测设备的原始数据'
        },
        {
            id: 'data-validation',
            type: 'process-node',
            icon: 'fas fa-check-circle',
            title: '数据验证',
            description: '验证CTD、ADCP、重力仪等设备数据的完整性和准确性'
        },
        {
            id: 'quality-control',
            type: 'process-node',
            icon: 'fas fa-filter',
            title: '质量控制',
            description: '对温度、盐度、流速等参数进行质量检查和异常值过滤'
        },
        {
            id: 'data-calibration',
            type: 'compute-node',
            icon: 'fas fa-cogs',
            title: '数据校准',
            description: '校准传感器漂移，统一时间基准和坐标系统'
        },
        {
            id: 'oceanographic-analysis',
            type: 'compute-node',
            icon: 'fas fa-chart-line',
            title: '海洋学分析',
            description: '计算海水密度、声速、地转流等海洋学参数'
        },
        {
            id: 'data-fusion',
            type: 'compute-node',
            icon: 'fas fa-layer-group',
            title: '数据融合',
            description: '融合多源观测数据，生成综合海洋环境场'
        },
        {
            id: 'data-output',
            type: 'output-node',
            icon: 'fas fa-upload',
            title: '数据输出',
            description: '输出标准格式的海洋数据产品和可视化结果'
        }
    ];

    // 创建节点元素
    processingNodes.forEach((node, index) => {
        const nodeElement = document.createElement('div');
        nodeElement.className = `pipeline-node ${node.type}`;
        nodeElement.id = node.id;
        nodeElement.innerHTML = `
            <i class="${node.icon}"></i>
            <span>${node.title}</span>
            <div class="node-pulse"></div>
        `;

        // 添加点击事件
        nodeElement.addEventListener('click', () => showNodeDetails(node));

        pipelineFlow.appendChild(nodeElement);

        // 添加连接线（除了最后一个节点）
        if (index < processingNodes.length - 1) {
            const connection = document.createElement('div');
            connection.className = 'pipeline-connection';
            connection.style.left = `${(index + 1) * 150 - 75}px`;
            connection.style.width = '150px';
            pipelineFlow.appendChild(connection);
        }
    });

    pipelineContainer.appendChild(pipelineFlow);

    // 更新处理统计
    updateProcessingStats();
    
    // 启动处理监控
    startProcessingMonitor();
}

// 显示节点详情
function showNodeDetails(node) {
    const detailsPanel = document.querySelector('.node-details');
    if (!detailsPanel) return;

    // 根据节点类型显示不同的详细信息
    let detailsContent = '';
    
    switch(node.id) {
        case 'data-ingestion':
            detailsContent = `
                <h4>数据接收节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>CTD数据：温度、盐度、深度</li>
                    <li>ADCP数据：流速、流向</li>
                    <li>重力仪：重力异常</li>
                    <li>磁力仪：磁场强度</li>
                    <li>气象数据：风速、气压、湿度</li>
                    <li>波浪数据：波高、周期、方向</li>
                </ul>
                <p><strong>处理速度：</strong> 1000条/秒</p>
                <p><strong>数据格式：</strong> NetCDF, ASCII, Binary</p>
            `;
            break;
        case 'data-validation':
            detailsContent = `
                <h4>数据验证节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>时间戳连续性检查</li>
                    <li>地理坐标合理性验证</li>
                    <li>物理参数范围检查</li>
                    <li>数据完整性验证</li>
                </ul>
                <p><strong>验证规则：</strong> 127项</p>
                <p><strong>通过率：</strong> 98.5%</p>
            `;
            break;
        case 'quality-control':
            detailsContent = `
                <h4>质量控制节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>统计异常值检测</li>
                    <li>物理一致性检查</li>
                    <li>时间序列平滑</li>
                    <li>空间插值质量评估</li>
                </ul>
                <p><strong>QC标准：</strong> IOC/UNESCO</p>
                <p><strong>处理算法：</strong> 3σ准则, Hampel滤波</p>
            `;
            break;
        case 'data-calibration':
            detailsContent = `
                <h4>数据校准节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>传感器漂移校正</li>
                    <li>时间同步校准</li>
                    <li>坐标系统转换</li>
                    <li>单位标准化</li>
                </ul>
                <p><strong>校准精度：</strong> ±0.001°C (温度)</p>
                <p><strong>时间精度：</strong> ±1ms</p>
            `;
            break;
        case 'oceanographic-analysis':
            detailsContent = `
                <h4>海洋学分析节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>海水状态方程计算</li>
                    <li>地转流计算</li>
                    <li>混合层深度估算</li>
                    <li>海洋锋面识别</li>
                </ul>
                <p><strong>计算模型：</strong> TEOS-10</p>
                <p><strong>分析算法：</strong> 动力高度法, 梯度检测</p>
            `;
            break;
        case 'data-fusion':
            detailsContent = `
                <h4>数据融合节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>多源数据时空配准</li>
                    <li>最优插值算法</li>
                    <li>卡尔曼滤波融合</li>
                    <li>不确定性评估</li>
                </ul>
                <p><strong>融合方法：</strong> 变分同化</p>
                <p><strong>网格分辨率：</strong> 0.1° × 0.1°</p>
            `;
            break;
        case 'data-output':
            detailsContent = `
                <h4>数据输出节点</h4>
                <p>${node.description}</p>
                <ul>
                    <li>标准格式转换</li>
                    <li>元数据生成</li>
                    <li>可视化产品制作</li>
                    <li>质量报告生成</li>
                </ul>
                <p><strong>输出格式：</strong> NetCDF-4, HDF5, GeoTIFF</p>
                <p><strong>产品类型：</strong> L1, L2, L3级数据产品</p>
            `;
            break;
        default:
            detailsContent = `<h4>${node.title}</h4><p>${node.description}</p>`;
    }

    detailsPanel.innerHTML = detailsContent;
}

// 更新处理统计
function updateProcessingStats() {
    const stats = [
        { label: '处理任务', value: Math.floor(Math.random() * 50) + 150, id: 'processing-tasks' },
        { label: '完成任务', value: Math.floor(Math.random() * 30) + 120, id: 'completed-tasks' },
        { label: '等待队列', value: Math.floor(Math.random() * 20) + 10, id: 'pending-tasks' },
        { label: '错误任务', value: Math.floor(Math.random() * 5) + 2, id: 'error-tasks', error: true }
    ];

    stats.forEach(stat => {
        const element = document.getElementById(stat.id);
        if (element) {
            const numberElement = element.querySelector('.stat-number');
            if (numberElement) {
                numberElement.textContent = stat.value;
                if (stat.error) {
                    element.classList.add('error');
                }
            }
        }
    });

    // 更新资源监控
    updateResourceMonitor();
}

// 更新资源监控
function updateResourceMonitor() {
    const resources = [
        { id: 'cpu-usage', value: Math.floor(Math.random() * 30) + 45 },
        { id: 'memory-usage', value: Math.floor(Math.random() * 20) + 60 },
        { id: 'storage-usage', value: Math.floor(Math.random() * 15) + 35 }
    ];

    resources.forEach(resource => {
        const element = document.getElementById(resource.id);
        if (element) {
            const progressRing = element.querySelector('.progress-ring');
            const progressValue = element.querySelector('.progress-value');
            
            if (progressRing && progressValue) {
                // 更新环形进度条
                const percentage = resource.value;
                progressRing.style.background = `conic-gradient(var(--accent-blue) ${percentage * 3.6}deg, rgba(255, 255, 255, 0.1) ${percentage * 3.6}deg)`;
                progressValue.textContent = `${percentage}%`;
            }
        }
    });
}

// 启动处理监控
function startProcessingMonitor() {
    // 模拟处理日志
    const logContent = document.querySelector('.log-content');
    if (!logContent) return;

    const logMessages = [
        { type: 'info', message: '[INFO] 开始处理CTD数据批次 #2024-001' },
        { type: 'info', message: '[INFO] 数据验证完成，通过率: 98.7%' },
        { type: 'warning', message: '[WARN] ADCP设备 #03 数据延迟 5分钟' },
        { type: 'info', message: '[INFO] 质量控制完成，标记异常值 12个' },
        { type: 'info', message: '[INFO] 海洋学参数计算完成' },
        { type: 'error', message: '[ERROR] 重力仪数据校准失败，重试中...' },
        { type: 'info', message: '[INFO] 数据融合完成，生成L3级产品' },
        { type: 'info', message: '[INFO] 输出NetCDF文件: ocean_data_20240115.nc' }
    ];

    let logIndex = 0;
    const addLogEntry = () => {
        if (logIndex < logMessages.length) {
            const log = logMessages[logIndex];
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry ${log.type}`;
            logEntry.textContent = `${new Date().toLocaleTimeString()} ${log.message}`;
            
            logContent.appendChild(logEntry);
            logContent.scrollTop = logContent.scrollHeight;
            
            logIndex++;
            setTimeout(addLogEntry, Math.random() * 3000 + 2000);
        } else {
            // 重置日志
            setTimeout(() => {
                logContent.innerHTML = '';
                logIndex = 0;
                addLogEntry();
            }, 5000);
        }
    };

    addLogEntry();
}

// 设备类型颜色映射
const deviceTypeColors = {
    'CTD': '#00ff88',
    'ADCP': '#0088ff',
    'Gravity': '#ff6600',
    'Magnetic': '#ff0066',
    'Wave': '#00ffff',
    'Depth': '#8800ff',
    'Radar': '#ffff00',
    'Multi': '#00ff00',
    'Buoy': '#ff8800',
    'Beidou': '#ff4400',
    'Wind': '#4400ff',
    'Weather': '#88ff00',
    'Sky': '#ff0088',
    'Turbulence': '#0044ff',
    'Lidar': '#ff6600',
    'Visibility': '#66ff00',
    'Cloud': '#00aaff',
    'Navigation': '#aa00ff'
};

// 设备类型图标映射
const deviceTypeIcons = {
    'CTD': '🌊',
    'ADCP': '🌀',
    'Gravity': '⚖️',
    'Magnetic': '🧲',
    'Wave': '〰️',
    'Depth': '📏',
    'Radar': '📡',
    'Multi': '🔬',
    'Buoy': '🛟',
    'Beidou': '🛰️',
    'Wind': '💨',
    'Weather': '🌤️',
    'Sky': '🌌',
    'Turbulence': '🌪️',
    'Lidar': '🔦',
    'Visibility': '👁️',
    'Cloud': '☁️',
    'Navigation': '🧭'
};

// 获取设备类型的CSS类名
function getDeviceTypeClass(deviceType) {
    const typeMap = {
        'CTD': 'ctd',
        'ADCP': 'adcp',
        'Gravity': 'gravity',
        'Magnetic': 'magnetic',
        'Wave': 'wave',
        'Depth': 'depth',
        'Radar': 'radar',
        'Multi': 'multi',
        'Buoy': 'buoy',
        'Beidou': 'beidou',
        'Wind': 'wind',
        'Weather': 'weather',
        'Sky': 'sky',
        'Turbulence': 'turbulence',
        'Lidar': 'lidar',
        'Visibility': 'visibility',
        'Cloud': 'cloud',
        'Navigation': 'navigation'
    };
    return `device-${typeMap[deviceType] || 'default'}`;
}

// 更新数据流显示函数
function updateDataStream() {
    const streamContainer = document.querySelector('.data-stream');
    if (!streamContainer) return;

    // 随机选择一个设备
    const device = oceanDevices[Math.floor(Math.random() * oceanDevices.length)];
    const param = device.parameters[Math.floor(Math.random() * device.parameters.length)];
    const value = generateRandomValue(param);
    
    const time = new Date().toLocaleTimeString();
    
    // 创建数据流项目
    const streamItem = document.createElement('div');
    streamItem.className = `stream-item ${getDeviceTypeClass(device.type)}`;
    
    streamItem.innerHTML = `
        <div class="stream-time">${time}</div>
        <div class="stream-device">
            <span class="device-icon">${deviceTypeIcons[device.type] || '📊'}</span>
            ${device.name}
        </div>
        <div class="stream-param">${param}</div>
        <div class="stream-value" style="color: ${deviceTypeColors[device.type] || '#00d4ff'}">${value}</div>
    `;
    
    // 添加到流中
    streamContainer.insertBefore(streamItem, streamContainer.firstChild);
    
    // 限制显示的项目数量
    const items = streamContainer.querySelectorAll('.stream-item');
    if (items.length > 10) {
        items[items.length - 1].remove();
    }
    
    // 添加进入动画
    streamItem.style.opacity = '0';
    streamItem.style.transform = 'translateX(-20px)';
    setTimeout(() => {
        streamItem.style.transition = 'all 0.3s ease';
        streamItem.style.opacity = '1';
        streamItem.style.transform = 'translateX(0)';
    }, 50);
}

// 更新数据源点渲染函数
function renderDataSourcePoints() {
    const earthSphere = document.querySelector('.earth-sphere');
    if (!earthSphere) return;

    // 清除现有的数据点
    earthSphere.querySelectorAll('.data-source-point').forEach(point => point.remove());
    earthSphere.querySelectorAll('.data-stream-line').forEach(line => line.remove());

    oceanDevices.forEach((device, index) => {
        // 创建数据源点
        const point = document.createElement('div');
        point.className = 'data-source-point';
        point.style.backgroundColor = deviceTypeColors[device.type] || '#00d4ff';
        point.style.color = deviceTypeColors[device.type] || '#00d4ff';
        
        // 根据经纬度计算位置（简化的球面投影）
        const x = ((device.longitude + 180) / 360) * 100;
        const y = ((90 - device.latitude) / 180) * 100;
        
        point.style.left = `${x}%`;
        point.style.top = `${y}%`;
        
        // 添加点击事件
        point.addEventListener('click', () => showDeviceDetails(device));
        
        // 添加悬停提示
        point.title = `${device.name} (${device.type})`;
        
        earthSphere.appendChild(point);
        
        // 创建数据流线
        if (Math.random() < 0.3) { // 30%的概率显示数据流
            const streamLine = document.createElement('div');
            streamLine.className = 'data-stream-line';
            streamLine.style.background = `linear-gradient(to top, ${deviceTypeColors[device.type] || '#00d4ff'}, transparent)`;
            streamLine.style.left = `${x}%`;
            streamLine.style.top = `${y}%`;
            streamLine.style.animationDelay = `${Math.random() * 3}s`;
            
            earthSphere.appendChild(streamLine);
        }
    });
}

// 更新设备详情显示函数
function showDeviceDetails(device) {
    // 创建模态框
    const modal = document.createElement('div');
    modal.className = 'device-modal';
    
    modal.innerHTML = `
        <div class="device-modal-content">
            <div class="device-modal-header">
                <h3>${deviceTypeIcons[device.type] || '📊'} ${device.name}</h3>
                <span class="device-modal-close">&times;</span>
            </div>
            <div class="device-info">
                <p><strong>设备类型:</strong> ${device.type}</p>
                <p><strong>位置:</strong> ${device.latitude.toFixed(4)}°N, ${device.longitude.toFixed(4)}°E</p>
                <p><strong>状态:</strong> <span class="${device.status === 'online' ? 'status-online' : 'status-offline'}">${device.status === 'online' ? '在线' : '离线'}</span></p>
                <p><strong>设备ID:</strong> ${device.id}</p>
            </div>
            <div class="device-parameters">
                <h4>监测参数</h4>
                <div class="parameters-grid">
                    ${device.parameters.map(param => `<span class="parameter-tag">${param}</span>`).join('')}
                </div>
            </div>
            <div class="device-stats">
                <h4>实时数据</h4>
                <div class="stats-grid">
                    ${device.parameters.slice(0, 6).map(param => `
                        <div class="stat-item">
                            <span class="stat-label">${param}</span>
                            <span class="stat-value">${generateRandomValue(param)}</span>
                        </div>
                    `).join('')}
                </div>
            </div>
        </div>
    `;
    
    // 添加关闭事件
    modal.querySelector('.device-modal-close').addEventListener('click', () => {
        modal.remove();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
    
    document.body.appendChild(modal);
}