hb_zhgd_screen/js/pages/dataAnalysisOctober/environDetection.js

// 环境监测分析页面
let temperatureHumidityChart = null;
let windSpeedChart = null;
let noiseChart = null;
let airQualityChart = null;

// 页面初始化
$(document).ready(function () {
    // 等待layui加载完成
    layui.use(['laydate', 'layer'], function () {
        initDateRange();
        initTemperatureHumidityChart();
        initWindSpeedChart();
        initNoiseChart();
        initAirQualityChart();
        initAlertTable();

        // 窗口大小改变时重新调整图表
        window.addEventListener('resize', debounce(() => {
            if (temperatureHumidityChart) temperatureHumidityChart.resize();
            if (windSpeedChart) windSpeedChart.resize();
            if (noiseChart) noiseChart.resize();
            if (airQualityChart) airQualityChart.resize();
        }, 300));
    });
});

// 防抖函数
function debounce(fn, delay) {
    let t = null;
    return function () {
        clearTimeout(t);
        t = setTimeout(() => fn.apply(this, arguments), delay);
    };
}

// 初始化日期范围选择器
function initDateRange() {
    const laydate = layui.laydate;
    laydate.render({
        elem: '#dateRange',
        type: 'date',
        range: true,
        format: 'yyyy-MM-dd',
        value: getDefaultDateRange(),
        done: function (value) {
            // 日期选择完成后的回调
        }
    });
}

// 获取默认日期范围（今天）
function getDefaultDateRange() {
    const today = new Date();
    return formatDate(today) + ' ~ ' + formatDate(today);
}

// 格式化日期
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return year + '-' + month + '-' + day;
}

// 查询数据
function queryData() {
    const dateRange = $('#dateRange').val();
    if (!dateRange) {
        layui.layer.msg('请选择日期范围', { icon: 0 });
        return;
    }
    
    // 这里可以调用API获取数据
    // 目前使用模拟数据
    loadData(dateRange);
    
    layui.layer.msg('查询成功', { icon: 1, time: 1000 });
}

// 加载数据
function loadData(dateRange) {
    // 模拟数据加载
    // 实际应该调用API
    updateCharts();
    updateAlertTable();
}

// 初始化温湿度图表
function initTemperatureHumidityChart() {
    temperatureHumidityChart = echarts.init(document.getElementById('temperatureHumidityChart'));
    
    const hours = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const temperature = [25, 26, 27, 28, 29, 30, 31];
    const humidity = [60, 58, 56, 54, 52, 50, 48];

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
            backgroundColor: 'rgba(19, 51, 55, 0.9)',
            borderColor: 'rgba(0, 254, 252, 0.5)',
            borderWidth: 1,
            textStyle: { color: '#fff' },
            formatter: function (params) {
                if (!params || !params.length) return '';
                let html = `<div style="font-weight:bold;margin-bottom:6px;">${params[0].name}</div>`;
                params.forEach(p => {
                    html += `
                        <div style="display:flex;align-items:center;margin-bottom:2px;">
                            <span style="display:inline-block;width:10px;height:10px;background:${p.color};margin-right:8px;border-radius:2px;"></span>
                            <span style="color:#B9D6D9;margin-right:6px;">${p.seriesName}</span>
                            <span style="color:#fff;margin-left:auto;font-weight:bold;">${p.value}${p.seriesName === '温度' ? '°C' : '%'}</span>
                        </div>`;
                });
                return html;
            }
        },
        legend: {
            data: ['温度', '湿度'],
            top: 10,
            right: 20,
            textStyle: { color: '#fff', fontSize: 12 },
            itemWidth: 12,
            itemHeight: 8,
            itemGap: 15
        },
        grid: {
            top: '18%',
            left: '8%',
            right: '8%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: hours,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            axisTick: { show: false }
        },
        yAxis: [
            {
                type: 'value',
                name: '°C',
                nameTextStyle: { color: '#fff', fontSize: 12 },
                position: 'left',
                axisLabel: { color: '#fff', fontSize: 11 },
                axisLine: { lineStyle: { color: '#5A6E71' } },
                splitLine: { 
                    lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' } 
                }
            },
            {
                type: 'value',
                name: '%',
                nameTextStyle: { color: '#fff', fontSize: 12 },
                position: 'right',
                axisLabel: { color: '#fff', fontSize: 11 },
                axisLine: { lineStyle: { color: '#5A6E71' } },
                splitLine: { show: false }
            }
        ],
        series: [
            {
                name: '温度',
                type: 'bar',
                yAxisIndex: 0,
                data: temperature,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#4A90E2' },
                        { offset: 1, color: '#357ABD' }
                    ])
                },
                barWidth: '30%'
            },
            {
                name: '湿度',
                type: 'line',
                yAxisIndex: 1,
                data: humidity,
                smooth: true,
                lineStyle: { width: 2, color: '#1CFFA3' },
                itemStyle: { color: '#1CFFA3' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(28, 255, 163, 0.3)' },
                        { offset: 1, color: 'rgba(28, 255, 163, 0.05)' }
                    ])
                }
            }
        ]
    };

    temperatureHumidityChart.setOption(option);
}

// 初始化风速图表
function initWindSpeedChart() {
    windSpeedChart = echarts.init(document.getElementById('windSpeedChart'));
    
    const hours = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const windSpeed = [2.5, 2.8, 3.0, 3.2, 3.5, 3.3, 3.1];

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'line' },
            backgroundColor: 'rgba(19, 51, 55, 0.9)',
            borderColor: 'rgba(28, 255, 163, 0.5)',
            borderWidth: 1,
            textStyle: { color: '#fff' }
        },
        grid: {
            top: '15%',
            left: '10%',
            right: '8%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: hours,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            axisTick: { show: false }
        },
        yAxis: {
            type: 'value',
            name: 'm/s',
            nameTextStyle: { color: '#fff', fontSize: 12 },
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            splitLine: { 
                lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' } 
            }
        },
        series: [
            {
                type: 'line',
                data: windSpeed,
                smooth: true,
                lineStyle: { width: 2, color: '#1CFFA3' },
                itemStyle: { color: '#1CFFA3' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(28, 255, 163, 0.4)' },
                        { offset: 1, color: 'rgba(28, 255, 163, 0.05)' }
                    ])
                }
            }
        ]
    };

    windSpeedChart.setOption(option);
}

// 初始化噪声图表
function initNoiseChart() {
    noiseChart = echarts.init(document.getElementById('noiseChart'));
    
    const hours = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const noise = [45, 48, 50, 52, 55, 53, 51];

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'line' },
            backgroundColor: 'rgba(19, 51, 55, 0.9)',
            borderColor: 'rgba(0, 254, 252, 0.5)',
            borderWidth: 1,
            textStyle: { color: '#fff' }
        },
        grid: {
            top: '15%',
            left: '8%',
            right: '6%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: hours,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            axisTick: { show: false }
        },
        yAxis: {
            type: 'value',
            name: '分贝',
            nameTextStyle: { color: '#fff', fontSize: 12 },
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            splitLine: { 
                lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' } 
            }
        },
        series: [
            {
                type: 'line',
                data: noise,
                smooth: true,
                lineStyle: { width: 2, color: '#00FEFC' },
                itemStyle: { color: '#00FEFC' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(0, 254, 252, 0.4)' },
                        { offset: 1, color: 'rgba(0, 254, 252, 0.05)' }
                    ])
                }
            }
        ]
    };

    noiseChart.setOption(option);
}

// 初始化空气质量图表
function initAirQualityChart() {
    airQualityChart = echarts.init(document.getElementById('airQualityChart'));
    
    const hours = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const pm25 = [35, 38, 40, 42, 45, 43, 41];
    const pm10 = [55, 58, 60, 62, 65, 63, 61];

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'line' },
            backgroundColor: 'rgba(19, 51, 55, 0.9)',
            borderColor: 'rgba(28, 255, 163, 0.5)',
            borderWidth: 1,
            textStyle: { color: '#fff' },
            formatter: function (params) {
                if (!params || !params.length) return '';
                let html = `<div style="font-weight:bold;margin-bottom:6px;">${params[0].name}</div>`;
                params.forEach(p => {
                    html += `
                        <div style="display:flex;align-items:center;margin-bottom:2px;">
                            <span style="display:inline-block;width:10px;height:10px;background:${p.color};margin-right:8px;border-radius:2px;"></span>
                            <span style="color:#B9D6D9;margin-right:6px;">${p.seriesName}</span>
                            <span style="color:#fff;margin-left:auto;font-weight:bold;">${p.value}µg/m³</span>
                        </div>`;
                });
                return html;
            }
        },
        legend: {
            data: ['PM2.5', 'PM10'],
            top: 10,
            right: 20,
            textStyle: { color: '#fff', fontSize: 12 },
            itemWidth: 12,
            itemHeight: 8,
            itemGap: 15
        },
        grid: {
            top: '18%',
            left: '10%',
            right: '8%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: hours,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            axisTick: { show: false }
        },
        yAxis: {
            type: 'value',
            name: 'µg/m³',
            nameTextStyle: { color: '#fff', fontSize: 12 },
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            splitLine: { 
                lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' } 
            }
        },
        series: [
            {
                name: 'PM2.5',
                type: 'line',
                data: pm25,
                smooth: true,
                lineStyle: { width: 2, color: '#00FEFC' },
                itemStyle: { color: '#00FEFC' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(0, 254, 252, 0.3)' },
                        { offset: 1, color: 'rgba(0, 254, 252, 0.05)' }
                    ])
                }
            },
            {
                name: 'PM10',
                type: 'line',
                data: pm10,
                smooth: true,
                lineStyle: { width: 2, color: '#1CFFA3' },
                itemStyle: { color: '#1CFFA3' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(28, 255, 163, 0.3)' },
                        { offset: 1, color: 'rgba(28, 255, 163, 0.05)' }
                    ])
                }
            }
        ]
    };

    airQualityChart.setOption(option);
}

// 初始化环境预警表格
function initAlertTable() {
    const alerts = [
        { id: '01', type: '自然环境预警', time: 'XXXX-XX-XX XX', content: '风速超过阈值' },
        { id: '02', type: 'GIS安装环境预警', time: 'XXXX-XX-XX XX', content: '温度超过阈值' },
        { id: '03', type: '有限空间环境预警', time: 'XXXX-XX-XX XX', content: '有毒气体超标' },
        { id: '04', type: 'XXXXXXXX', time: 'XXXXXXXX', content: 'XXXXXXXX' },
        { id: '05', type: 'XXXXXXXX', time: 'XXXXXXXX', content: 'XXXXXXXX' },
        { id: '06', type: 'XXXXXXXX', time: 'XXXXXXXX', content: 'XXXXXXXX' },
        { id: '07', type: 'XXXXXXXX', time: 'XXXXXXXX', content: 'XXXXXXXX' }
    ];
    
    renderAlertTable(alerts);
}

// 渲染环境预警表格
function renderAlertTable(alerts) {
    const tbody = $('#alertTableBody');
    tbody.empty();
    
    alerts.forEach(alert => {
        const row = `
            <tr>
                <td>${alert.id}</td>
                <td>${alert.type}</td>
                <td>${alert.time}</td>
                <td>${alert.content}</td>
            </tr>
        `;
        tbody.append(row);
    });
}

// 更新图表
function updateCharts() {
    // 这里可以重新加载图表数据
    // 实际应该从API获取数据并更新图表
    if (temperatureHumidityChart) temperatureHumidityChart.resize();
    if (windSpeedChart) windSpeedChart.resize();
    if (noiseChart) noiseChart.resize();
    if (airQualityChart) airQualityChart.resize();
}

// 更新预警表格
function updateAlertTable() {
    // 这里可以从API获取最新预警数据
    // 目前使用模拟数据
    initAlertTable();
}