ah_jjzhgd_webscreen/js/pages/newDataAnalysis/environDetection.js

let table, layer, form;
let myChart = null, myChart2 = null;
layui.use(['layer', 'table', 'form'], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    initEcharts();
});


// 初始化 echarts
function initEcharts() {
    // 后端查询数据
    const url = commonUrl + "screen/largeScreen/environment/getEnvironmentList?currentDay="+ "2025-07-23" + "&hour=" + "8"+ "&proId=" + "1";
	ajaxRequest(url, "get",  null , true, function () {
	}, function (result) {
	    if (result.code === 200) {
            console.log(result.data);
			initEchartsOne(result.data);
	    } else if (result.code === 500) {
	        layer.msg(result.msg, { icon: 2 });
	    }
	}, function (xhr) {
		layer.msg(xhr, { icon: 2 });
	});
    
}

function initEchartsOne(obj) {
    const dateInput = document.querySelector('input[type="datetime-local"]');
        dateInput.addEventListener('change', function () {
            const selectedDate = new Date(this.value);
            const formattedDate = selectedDate.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        });
        const trendChart = echarts.init(document.getElementById('trendChart'));
        const gisChart = echarts.init(document.getElementById('gisChart'));
        const spaceChart = echarts.init(document.getElementById('spaceChart'));
        const trendOption = {
            animation: false,
            backgroundColor: 'transparent',
            textStyle: {
                color: '#00C6BE'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['温度', '湿度', '空气质量', '噪音', '光照度']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月14日', '1月15日', '1月16日', '1月17日', '1月18日', '1月19日', '1月20日']
            },
            yAxis: [
                {
                    type: 'value',
                    name: '温度/湿度',
                },
                {
                    type: 'value',
                    name: '其他指标',
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    data: [23, 24, 23.5, 22, 23.5, 24.5, 23.5]
                },
                {
                    name: '湿度',
                    type: 'line',
                    smooth: true,
                    data: [75, 78, 80, 82, 85, 83, 85]
                },
                {
                    name: '空气质量',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: [65, 70, 75, 72, 68, 73, 75]
                },
                {
                    name: '噪音',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: [60, 62, 65, 63, 61, 64, 65]
                },
                {
                    name: '光照度',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: [1800, 1900, 2000, 1950, 1850, 1950, 2000]
                }
            ]
        };
        const gisOption = {
            animation: false,
            backgroundColor: 'transparent',
            textStyle: {
                color: '#00C6BE'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['实时值', '标准值']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['温度 (℃)', '湿度 (%)', '粉尘度 (mg/m³)']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '实时值',
                    type: 'bar',
                    barGap: 0,
                    data: [23.5, 45, 0.08],
                    itemStyle: {
                        color: '#2563eb'
                    }
                },
                {
                    name: '标准值',
                    type: 'bar',
                    data: [25, 50, 0.10],
                    itemStyle: {
                        color: '#94a3b8'
                    }
                }
            ]
        };
        const spaceOption = {
            animation: false,
            backgroundColor: 'transparent',
            textStyle: {
                color: '#00C6BE'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    const units = {
                        '氧气': '%',
                        '一氧化碳': 'ppm',
                        '硫化氢': 'ppm',
                        '可燃气体': '%LEL'
                    };
                    let result = params[0].axisValueLabel + '<br/>';
                    params.forEach(param => {
                        result += param.marker + param.seriesName + ': ' + param.value + ' ' + units[param.axisValueLabel] + '<br/>';
                    });
                    return result;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['氧气 (%)', '一氧化碳 (ppm)', '硫化氢 (ppm)', '可燃气体 (%LEL)'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 15
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '监测值',
                }
            ],
            series: [
                {
                    name: '监测值',
                    type: 'bar',
                    barWidth: '60%',
                    data: [20.9, 0.5, 0.2, 0.8],
                    itemStyle: {
                        color: '#2563eb'
                    }
                }
            ]
        };
        const lineChartBtn = document.getElementById('lineChartBtn');
        const barChartBtn = document.getElementById('barChartBtn');
        const updateChartType = (type) => {
            const newOption = { ...trendOption };
            newOption.series = newOption.series.map(series => ({
                ...series,
                type: type
            }));
            trendChart.setOption(newOption);
        };
        lineChartBtn.addEventListener('click', () => {
            lineChartBtn.classList.add('bg-primary/10', 'text-primary');
            lineChartBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
            barChartBtn.classList.remove('bg-primary/10', 'text-primary');
            barChartBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
            updateChartType('line');
        });
        barChartBtn.addEventListener('click', () => {
            barChartBtn.classList.add('bg-primary/10', 'text-primary');
            barChartBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
            lineChartBtn.classList.remove('bg-primary/10', 'text-primary');
            lineChartBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
            updateChartType('bar');
        });
        trendChart.setOption(trendOption);
        gisChart.setOption(gisOption);
        spaceChart.setOption(spaceOption);
        window.addEventListener('resize', function () {
            trendChart.resize();
            gisChart.resize();
            spaceChart.resize();
        });
}