hb_zhgd_screen/js/pages/dataAnalysisOctober/engineeringSafetyAnalysis.js

let table, layer, form, laydate;
let temperatureHumidityChart = null;
let windSpeedChart = null;
let airQualityChart = null;
let currentPage = 1;
let pageSize = 10;
let bidCode = parent.parent.$('#bidPro').val();
let keyword = ''; // 监测点关键字

// 获取当天日期
function getTodayDate() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return year + '-' + month + '-' + day;
}

// 获取当月第一天和最后一天（保留用于其他功能）
function getCurrentMonthRange() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth();

    // 当月第一天
    const firstDay = new Date(year, month, 1);
    const startDate = year + '-' + String(month + 1).padStart(2, '0') + '-' + String(firstDay.getDate()).padStart(2, '0');

    // 当月最后一天
    const lastDay = new Date(year, month + 1, 0);
    const endDate = year + '-' + String(month + 1).padStart(2, '0') + '-' + String(lastDay.getDate()).padStart(2, '0');

    return { startDate, endDate };
}

const today = getTodayDate();
let queryParams = {
    projectId: bidCode,
    startTestDay: today,
    endTestDay: today,
}

layui.use(["layer", "table", "form", "laydate"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    laydate = layui.laydate;

    // 响应成功后的拦截器
    $.ajaxSetup({
        beforeSend: function (xhr, options) {
            var originalSuccess = options.success;
            options.success = function (data, textStatus, jqXhr) {
                data = modifyResponseData(data);
                originalSuccess.apply(this, arguments);
            };
        },
    });

    // 初始化页面
    initPage();

    // 初始化顶部单个日期选择器
    initDatePicker();
    // 初始化质量监测记录模块的日期范围选择器
    initRecordDateRangePicker();
});

// 初始化页面
function initPage() {
    initTemperatureHumidityChart();
    initWindSpeedChart();
    initAirQualityChart();
    initEnvironmentRecordTable();

    // 页面初始化时，按默认当天日期加载一次接口数据
    refreshAllModules();
}


// 初始化顶部单个日期选择器
function initDatePicker() {
    // 设置初始显示值为当天
    const initialValue = queryParams.startTestDay;
    $('#dateRange').val(initialValue);

    // 使用单个日期选择器
    laydate.render({
        elem: '#dateRange',
        type: 'date',
        format: 'yyyy-MM-dd',
        theme: 'dark',
        // 默认值使用当天
        value: queryParams.startTestDay,
        done: function (value, date) {
            if (value && value.trim() !== '') {
                // 更新查询参数，startTestDay和endTestDay传相同的值
                queryParams.startTestDay = value.trim();
                queryParams.endTestDay = value.trim();
                $('#dateRange').val(value.trim());

                // 日期变化后，重新调用所有模块接口（不包括质量监测记录表格）
                refreshAllModules();
            } else {
                // 清空时，重置为当天日期
                const today = getTodayDate();
                queryParams.startTestDay = today;
                queryParams.endTestDay = today;
                $('#dateRange').val(today);
                refreshAllModules();
            }
        }
    });
}

// 初始化质量监测记录模块的日期范围选择器
function initRecordDateRangePicker() {
    const today = getTodayDate();
    // 设置初始显示值为当天范围
    const initialValue = today + ' ~ ' + today;
    $('#recordDateRange').val(initialValue);

    // 使用范围选择器
    laydate.render({
        elem: '#recordDateRange',
        type: 'date',
        range: true, // 启用范围选择
        format: 'yyyy-MM-dd',
        theme: 'dark',
        // 默认值使用当天范围
        value: today + ' - ' + today,
        done: function (value, date, endDate) {
            console.log('日期范围选择器回调:', { value, date, endDate });
            if (value && value.trim() !== '') {
                // laydate返回的格式是 "2026-01-14 - 2026-01-31"
                const dates = value.split(' - ');
                if (dates.length === 2) {
                    const startDate = dates[0].trim();
                    const endDateStr = dates[1].trim();
                    // 在输入框中显示日期范围（使用 ~ 分隔符）
                    const displayValue = startDate + ' ~ ' + endDateStr;
                    // 使用setTimeout确保DOM更新完成
                    setTimeout(function () {
                        $('#recordDateRange').val(displayValue);
                        console.log('设置日期范围值:', displayValue, '当前输入框值:', $('#recordDateRange').val());
                    }, 0);
                } else {
                    // 如果格式不正确，重置为当天日期范围
                    $('#recordDateRange').val(today + ' ~ ' + today);
                }
            } else {
                // 清空时，重置为当天日期范围
                $('#recordDateRange').val(today + ' ~ ' + today);
            }
        }
    });
}

// 刷新所有模块数据（不包括质量监测记录表格，它使用自己的日期范围）
function refreshAllModules() {
    // 重新调用接口获取数据（使用顶部单个日期，startTestDay和endTestDay相同）
    getTemperatureHumidityData();
    getQualityDetectionRecord();

    // 注意：质量监测记录表格不在这里刷新，它使用自己的日期范围筛选
}

// 查询数据（统一刷新所有模块）
function queryData() {
    refreshAllModules();
}

// 初始化温湿度图表（柱状图+折线图，双Y轴）
function initTemperatureHumidityChart() {
    const chartDom = document.getElementById('temperatureHumidityChart');
    if (!chartDom) return;

    if (temperatureHumidityChart) {
        temperatureHumidityChart.dispose();
    }

    temperatureHumidityChart = echarts.init(chartDom);

    // 模拟数据 - 后续替换为真实接口数据
    const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const temperatures = [25, 28, 30, 32, 30, 28, 26]; // 温度（°C）
    const humidities = [60, 65, 70, 75, 72, 68, 65]; // 湿度（%）

    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 34, 37, 0.95)',
            borderColor: 'rgba(6, 189, 221, 0.8)',
            borderWidth: 1,
            borderRadius: 4,
            padding: [12, 16],
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            }
        },
        legend: {
            data: ['温度', '湿度'],
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: times,
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '°C',
                nameTextStyle: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLabel: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.15)',
                        type: 'dashed',
                        width: 1
                    }
                }
            },
            {
                type: 'value',
                name: '%',
                nameTextStyle: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLabel: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                        width: 1
                    }
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '温度',
                type: 'bar',
                yAxisIndex: 0,
                data: temperatures,
                barWidth: '40%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#4A90E2'
                    }, {
                        offset: 1,
                        color: '#2E5C8A'
                    }]),
                    borderRadius: [2, 2, 0, 0]
                },
                label: {
                    show: false
                }
            },
            {
                name: '湿度',
                type: 'line',
                yAxisIndex: 1,
                data: humidities,
                itemStyle: {
                    color: '#50E3C2'
                },
                lineStyle: {
                    width: 2,
                    color: '#50E3C2'
                },
                symbol: 'circle',
                symbolSize: 6,
                label: {
                    show: false
                }
            }
        ]
    };

    temperatureHumidityChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        if (temperatureHumidityChart) {
            temperatureHumidityChart.resize();
        }
    });
}

// 初始化风速图表（折线图）
function initWindSpeedChart() {
    const chartDom = document.getElementById('windSpeedChart');
    if (!chartDom) return;

    if (windSpeedChart) {
        windSpeedChart.dispose();
    }

    windSpeedChart = echarts.init(chartDom);

    // 模拟数据 - 后续替换为真实接口数据
    const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const windSpeeds = [5.2, 6.1, 5.8, 4.5, 5.0, 6.2, 5.5]; // 风速（m/s）

    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 34, 37, 0.95)',
            borderColor: 'rgba(6, 189, 221, 0.8)',
            borderWidth: 1,
            borderRadius: 4,
            padding: [12, 16],
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            }
        },
        legend: {
            data: ['风速'],
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: times,
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: 'm/s',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.15)',
                    type: 'dashed',
                    width: 1
                }
            }
        },
        series: [
            {
                name: '风速',
                type: 'line',
                data: windSpeeds,
                itemStyle: {
                    color: '#50E3C2'
                },
                lineStyle: {
                    width: 2,
                    color: '#50E3C2'
                },
                symbol: 'circle',
                symbolSize: 6,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(80, 227, 194, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(80, 227, 194, 0.05)'
                    }])
                },
                label: {
                    show: false
                }
            }
        ]
    };

    windSpeedChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        if (windSpeedChart) {
            windSpeedChart.resize();
        }
    });
}

// 初始化空气质量图表（单折线图，只显示PM2.5）
function initAirQualityChart() {
    const chartDom = document.getElementById('airQualityChart');
    if (!chartDom) return;

    if (airQualityChart) {
        airQualityChart.dispose();
    }

    airQualityChart = echarts.init(chartDom);

    // 默认空数据
    const times = [];
    const pm25 = [];

    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 34, 37, 0.95)',
            borderColor: 'rgba(6, 189, 221, 0.8)',
            borderWidth: 1,
            borderRadius: 4,
            padding: [12, 16],
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            }
        },
        legend: {
            data: ['PM2.5'],
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: times,
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: 'µg/m³',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.15)',
                    type: 'dashed',
                    width: 1
                }
            }
        },
        series: [
            {
                name: 'PM2.5',
                type: 'line',
                data: pm25,
                itemStyle: {
                    color: '#87CEEB'
                },
                lineStyle: {
                    width: 2,
                    color: '#87CEEB'
                },
                symbol: 'circle',
                symbolSize: 6,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(135, 206, 235, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(135, 206, 235, 0.05)'
                    }])
                },
                label: {
                    show: false
                }
            }
        ]
    };

    airQualityChart.setOption(option);

    // 响应式调整
    window.addEventListener('resize', function () {
        if (airQualityChart) {
            airQualityChart.resize();
        }
    });
}


// 初始化环境监测记录表格
function initEnvironmentRecordTable() {
    // 初始化时使用当天日期范围
    const today = getTodayDate();
    table.render({
        elem: '#environmentRecordTable',
        url: commonUrl + 'screen/project/projectSafety/list',
        headers: {
            decrypt: 'decrypt',
            Authorization: token
        },
        method: 'GET',
        where: {
            projectId: bidCode,
            startTestDay: today,
            endTestDay: today,
            monitoringPointName: keyword || ''
        },
        skin: 'line',
        page: {
            layout: ['prev', 'page', 'next', 'count', 'skip'],
            groups: 5,
            limit: pageSize,
            limits: [10, 20, 30, 50]
        },
        height: 'full',
        request: {
            pageName: 'pageNum',
            limitName: 'pageSize'
        },
        response: {
            statusName: 'code',
            statusCode: 200,
            msgName: 'msg',
            countName: 'total',
            dataName: 'rows'
        },
        cols: [[
            { type: 'numbers', title: '序号', width: '8%', align: 'center' },
            { field: 'proName', title: '工程名称', width: '15%', align: 'center' },
            { field: 'planNum', title: '作业计划编号', width: '10%', align: 'center' },
            { field: 'workLocation', title: '作业地点', width: '10%', align: 'center' },
            { field: 'monitorCode', title: '监测点编号', width: '10%', align: 'center' },
            { field: 'monitorName', title: '监测点名称', width: '15%', align: 'center' },
            { field: 'detectionTime', title: '监测时间', width: '12%', align: 'center' },
            { field: 'wd', title: '温度', width: '6%', align: 'center' },
            { field: 'sd', title: '湿度', width: '6%', align: 'center' },
            { field: 'speed', title: '风速', width: '6%', align: 'center' },
            { field: 'airQuality', title: '空气质量', width: '6%', align: 'center' },
            {
                title: '视频查看', width: '6%', align: 'center', templet: function (d) {
                    return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="viewVideo()">查看</a>';
                }
            },
            {
                field: 'analysis',
                title: '分析改进',
                width: '18%',
                align: 'left',
                fixed: 'right',
                templet: function (d) {
                    const text = d.analysis || '';
                    return '<div class="analysis-text-cell" title="' + text + '">' + text + '</div>';
                }
            },
            // {
            //     title: '分析改进', width: '8%', align: 'center', templet: function (d) {
            //         return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="analyzeImprove(\'' + (d.monitoringPointNumber || '') + '\')">分析与改进</a>';
            //     }
            // }
        ]]
    });
}

// 查询记录（监测点输入框查询）
function queryRecords() {
    keyword = $('#keywordInput').val() || '';

    // 获取质量监测记录模块的日期范围
    const recordDateRangeInput = document.getElementById('recordDateRange');
    const recordDateRange = recordDateRangeInput ? recordDateRangeInput.value || '' : '';
    let recordStartDate = '';
    let recordEndDate = '';

    console.log('查询时获取的日期范围输入框值:', recordDateRange);

    // 解析日期范围，支持两种格式："2026-01-14 ~ 2026-01-31" 或 "2026-01-14 - 2026-01-31"
    if (recordDateRange && recordDateRange.trim() !== '') {
        let dates = [];
        if (recordDateRange.includes(' ~ ')) {
            dates = recordDateRange.split(' ~ ');
        } else if (recordDateRange.includes(' - ')) {
            dates = recordDateRange.split(' - ');
        }

        if (dates.length === 2) {
            recordStartDate = dates[0].trim();
            recordEndDate = dates[1].trim();
        }
    }

    // 如果没有选择日期范围，使用当天
    if (!recordStartDate || !recordEndDate) {
        const today = getTodayDate();
        recordStartDate = today;
        recordEndDate = today;
        console.log('未获取到日期范围，使用默认当天:', today);
    }

    console.log('查询参数:', {
        keyword: keyword,
        recordDateRange: recordDateRange,
        recordStartDate: recordStartDate,
        recordEndDate: recordEndDate
    });

    // 重新加载表格，使用质量监测记录模块的日期范围
    table.reload('environmentRecordTable', {
        where: {
            projectId: bidCode,
            startTestDay: recordStartDate,
            endTestDay: recordEndDate,
            monitorName: keyword
        },
        page: {
            curr: 1
        }
    });
}

// 查看视频
function viewVideo() {
    // 清空视频源（占位）
    const videoPlayer = document.getElementById('videoPlayer');
    if (videoPlayer) {
        videoPlayer.src = '';
    }

    // 显示弹框
    $('#videoModal').addClass('show');
}

// 关闭视频查看弹框
function closeVideoModal() {
    const videoPlayer = document.getElementById('videoPlayer');
    if (videoPlayer) {
        // 暂停视频并清空源
        videoPlayer.pause();
        videoPlayer.src = '';
    }

    // 隐藏弹框
    $('#videoModal').removeClass('show');
}

// 分析与改进
function analyzeImprove(monitoringPointNumber) {
    layer.msg('分析与改进: ' + monitoringPointNumber, { icon: 1 });
    // 后续实现分析改进功能
}

// 从detectionTime字段提取时:分格式
function extractTime(detectionTime) {
    if (!detectionTime) return '';

    // 如果包含时间部分（格式：2026-01-24 07:08:00）
    if (detectionTime.includes(' ')) {
        const timePart = detectionTime.split(' ')[1];
        if (timePart) {
            // 提取时:分（前5个字符，例如 "07:08"）
            return timePart.substring(0, 5);
        }
    }

    // 如果只有日期，返回空字符串或默认值
    return '';
}

// 获取温湿度 风速 空气质量 3个图表数据（只调用一次接口，渲染3个图表）
function getTemperatureHumidityData() {
    const url = commonUrl +
        'screen/project/projectSafety/hjlist?projectId=' + bidCode +
        '&startTestDay=' + queryParams.startTestDay +
        '&endTestDay=' + queryParams.endTestDay;

    ajaxRequestGet(
        url,
        'GET',
        true,
        function () { },
        function (result) {
            console.log(result, '温湿度/风速/空气质量 3个图表数据');

            if (result && result.rows && Array.isArray(result.rows)) {
                const data = result.rows;

                // 处理数据：提取时间和各字段值，只保留有完整时间的数据
                const processedData = data
                    .map(item => {
                        const time = extractTime(item.detectionTime);
                        if (time === '') return null; // 过滤掉没有时间的数据

                        return {
                            time: time,
                            temperature: parseFloat(item.wd) || 0,
                            humidity: parseFloat(item.sd) || 0,
                            windSpeed: parseFloat(item.speed) || 0,
                            airQuality: parseFloat(item.airQuality) || 0
                        };
                    })
                    .filter(item => item !== null); // 过滤掉null值

                // 提取各字段数组
                const times = processedData.map(item => item.time);
                const temperatures = processedData.map(item => item.temperature);
                const humidities = processedData.map(item => item.humidity);
                const windSpeeds = processedData.map(item => item.windSpeed);
                const airQualities = processedData.map(item => item.airQuality);

                // 更新3个图表
                updateTemperatureHumidityChart(times, temperatures, humidities);
                updateWindSpeedChart(times, windSpeeds);
                updateAirQualityChart(times, airQualities);
            }
        },
        aqEnnable
    );
}

// 获取质量检测记录（完善查询逻辑）
function getQualityDetectionRecord() {
    const url = commonUrl +
        'screen/project/projectSafety/list?projectId=' + bidCode +
        '&startTestDay=' + queryParams.startTestDay +
        '&endTestDay=' + queryParams.endTestDay;

    ajaxRequestGet(
        url,
        'GET',
        true,
        function () { },
        function (result) {
            console.log(result, '环境监测记录（工程安全分析）');

            // 表格数据通过layui table的url自动加载，这里只打印返回数据
        },
        aqEnnable
    );
}

// 更新温湿度图表
function updateTemperatureHumidityChart(times, temperatures, humidities) {
    if (!temperatureHumidityChart) return;

    temperatureHumidityChart.setOption({
        xAxis: {
            data: times
        },
        series: [
            {
                name: '温度',
                data: temperatures
            },
            {
                name: '湿度',
                data: humidities
            }
        ]
    });
}


// 更新风速图表
function updateWindSpeedChart(times, windSpeeds) {
    if (!windSpeedChart) return;

    windSpeedChart.setOption({
        xAxis: {
            data: times
        },
        series: [{
            name: '风速',
            data: windSpeeds
        }]
    });
}

// 更新空气质量图表（单折线，只显示PM2.5）
function updateAirQualityChart(times, airQualities) {
    if (!airQualityChart) return;

    airQualityChart.setOption({
        xAxis: {
            data: times
        },
        series: [
            {
                name: 'PM2.5',
                data: airQualities
            }
        ]
    });
}