hb_zhgd_screen/js/pages/dataAnalysisOctober/energySavingAnalysis.js

// 节能减排分析页面
let envMonitorChart = null;
let powerTrendChart = null;
let waterTrendChart = null;
let currentFilterType = 'all';
let bidCode = parent.parent.$('#bidPro').val();

// 工程安全/节能分析页面通用查询参数（与工程质量分析保持一致的模式）
function getCurrentMonthRange() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth();

    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);

    const startDate = formatDate(firstDay);
    const endDate = formatDate(lastDay);

    return { startDate, endDate };
}

const currentMonth = getCurrentMonthRange();
let queryParams = {
    projectId: bidCode,
    startTestDay: currentMonth.startDate,
    endTestDay: currentMonth.endDate,
};

// 页面初始化
$(document).ready(function () {
    // 等待layui加载完成
    layui.use(['laydate', 'layer'], function () {
        initDateRange();
        initEnvMonitorChart();
        initPowerTrendChart();
        initWaterTrendChart();
        initComparisonData();
        initAnalysisList();

        // 页面初始化时，按默认当月日期加载一次接口数据（仅打印）
        refreshEnergyModules();

        // 窗口大小改变时重新调整图表
        window.addEventListener('resize', debounce(() => {
            if (envMonitorChart) envMonitorChart.resize();
            if (powerTrendChart) powerTrendChart.resize();
            if (waterTrendChart) waterTrendChart.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;

    // 初始显示为当月范围
    $('#dateRange').val(queryParams.startTestDay + ' ~ ' + queryParams.endTestDay);

    laydate.render({
        elem: '#dateRange',
        type: 'date',
        range: true,
        format: 'yyyy-MM-dd',
        theme: 'dark',
        // laydate 内部使用 “起始 - 结束” 作为分隔符
        value: queryParams.startTestDay + ' - ' + queryParams.endTestDay,
        done: function (value) {
            const resetToCurrentMonth = function () {
                const cur = getCurrentMonthRange();
                queryParams.startTestDay = cur.startDate;
                queryParams.endTestDay = cur.endDate;
                $('#dateRange').val(cur.startDate + ' ~ ' + cur.endDate);
                refreshEnergyModules();
            };

            if (value && value.trim() !== '') {
                const dates = value.split(' - ');
                if (dates.length === 2) {
                    const startDate = dates[0].trim();
                    const endDateStr = dates[1].trim();

                    // 回显到输入框（使用 ~，与质量分析一致）
                    $('#dateRange').val(startDate + ' ~ ' + endDateStr);

                    // 更新查询参数
                    queryParams.startTestDay = startDate;
                    queryParams.endTestDay = endDateStr;

                    // 日期变化后，重新拉取接口数据（先打印）
                    refreshEnergyModules();
                } else {
                    resetToCurrentMonth();
                }
            } else {
                resetToCurrentMonth();
            }
        }
    });
}

// 格式化日期
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;
}

// 获取温湿度 风速 空气质量 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, '温湿度/风速/空气质量 数据');
        },
        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, '质量检测记录（工程安全分析）');
    }, aqEnnable);
}

// 统一刷新当前页面需要的接口数据（仅组装参数并打印返回）
function refreshEnergyModules() {
    // 目前只调用这两个接口，后续需要渲染图表/列表时可以在这里扩展
    getTemperatureHumidityData();
    getQualityDetectionRecord();
}

// 查询数据
function queryData() {
    const dateRange = $('#dateRange').val();
    if (!dateRange) {
        layui.layer.msg('请选择日期范围', { icon: 0 });
        return;
    }

    // 点击查询按钮时，基于当前日期范围刷新接口数据（仅打印）
    refreshEnergyModules();

    layui.layer.msg('查询成功', { icon: 1, time: 1000 });
}

// 加载数据
function loadData(dateRange) {
    // 模拟数据加载
    // 实际应该调用API
    // 示例：可以在这里调用API
    // commonRequest.get('/api/energySaving/data', { dateRange: dateRange }, function(res) {
    //     if (res.code === 200) {
    //         updateChartsWithData(res.data);
    //         updateComparisonData(res.data);
    //         updateAnalysisList(res.data.alerts);
    //     }
    // });

    updateCharts();
    updateComparisonData();
    updateAnalysisList();
}

// 格式化数字显示（三位数加小数点）
function formatNumber(num) {
    return String(num.toFixed(1)).padStart(5, '0');
}

// 初始化环境监测图表
function initEnvMonitorChart() {
    envMonitorChart = echarts.init(document.getElementById('envMonitorChart'));

    const hours = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const temperature = [25, 26, 27, 28, 29, 30, 31, 28, 29, 30, 31, 32];
    const humidity = [60, 58, 56, 54, 52, 50, 48, 55, 53, 51, 49, 47];
    const windSpeed = [2.5, 2.8, 3.0, 3.2, 3.5, 3.3, 3.1, 2.9, 3.1, 3.4, 3.6, 3.2];

    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 === '风速' ? 'm/s' : 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: '6%',
            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: 'm/s',
                nameTextStyle: { color: '#fff', fontSize: 12 },
                position: 'right',
                axisLabel: { color: '#fff', fontSize: 11 },
                axisLine: { lineStyle: { color: '#5A6E71' } },
                splitLine: { show: false }
            }
        ],
        series: [
            {
                name: '温度',
                type: 'bar',
                data: temperature,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#4A90E2' },
                        { offset: 1, color: '#357ABD' }
                    ])
                },
                barWidth: '20%'
            },
            {
                name: '湿度',
                type: 'bar',
                data: humidity,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#1CFFA3' },
                        { offset: 1, color: '#19CC8A' }
                    ])
                },
                barWidth: '20%'
            },
            {
                name: '风速',
                type: 'line',
                yAxisIndex: 1,
                data: windSpeed,
                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)' }
                    ])
                }
            }
        ]
    };

    envMonitorChart.setOption(option);
}

// 初始化近七天用电趋势图表
function initPowerTrendChart() {
    powerTrendChart = echarts.init(document.getElementById('powerTrendChart'));

    const dates = ['XXXX-XX-01', 'XXXX-XX-02', 'XXXX-XX-03', 'XXXX-XX-04', 'XXXX-XX-05', 'XXXX-XX-06', 'XXXX-XX-07'];
    const powerData = [120, 135, 150, 145, 160, 155, 170];

    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: dates,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            axisTick: { show: false }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 400,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            splitLine: {
                lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' }
            }
        },
        series: [
            {
                type: 'line',
                data: powerData,
                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)' }
                    ])
                }
            }
        ]
    };

    powerTrendChart.setOption(option);
}

// 初始化近七天用水趋势图表
function initWaterTrendChart() {
    waterTrendChart = echarts.init(document.getElementById('waterTrendChart'));

    const dates = ['XXXX-XX-01', 'XXXX-XX-02', 'XXXX-XX-03', 'XXXX-XX-04', 'XXXX-XX-05', 'XXXX-XX-06', 'XXXX-XX-07'];
    const waterData = [80, 85, 90, 88, 95, 92, 100];

    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: '8%',
            right: '6%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            axisTick: { show: false }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 400,
            axisLabel: { color: '#fff', fontSize: 11 },
            axisLine: { lineStyle: { color: '#5A6E71' } },
            splitLine: {
                lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' }
            }
        },
        series: [
            {
                type: 'line',
                data: waterData,
                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)' }
                    ])
                }
            }
        ]
    };

    waterTrendChart.setOption(option);
}

// 初始化环比数据
function initComparisonData() {
    // 设置默认值
    const currentPower = 156;
    const lastPower = 123;
    const currentWater = 156;
    const lastWater = 123;

    $('#currentMonthPower').text(currentPower + '度');
    $('#lastMonthPower').text(lastPower + '度');
    $('#currentMonthWater').text(currentWater + '吨');
    $('#lastMonthWater').text(lastWater + '吨');

    // 计算增长率
    updateGrowthRate('power', currentPower, lastPower);
    updateGrowthRate('water', currentWater, lastWater);
}

// 更新增长率显示
function updateGrowthRate(type, current, last) {
    const growth = ((current - last) / last * 100).toFixed(0);
    const isPositive = growth >= 0;
    const elementId = type === 'power' ? '#powerGrowthRate' : '#waterGrowthRate';
    const $element = $(elementId);

    $element.removeClass('down');
    if (!isPositive) {
        $element.addClass('down');
    }

    const arrow = isPositive ? '<span class="arrow-up"></span>' : '<span class="arrow-down"></span>';
    const symbol = isPositive ? '↑' : '↓';
    $element.html(arrow + '<span>' + Math.abs(growth) + '%' + symbol + '</span>');
}

// 更新环比数据
function updateComparisonData() {
    // 这里可以从API获取最新数据
    // 目前使用模拟数据
}

// 初始化分析提醒列表
function initAnalysisList() {
    const alerts = [
        { date: '2026-01-15', type: 'power', message: '本月用电比上月用电增加超过10%, 结束施工请及时关闭电源,节约用电。' },
        { date: '2026-01-15', type: 'power', message: '本月用电比上月用电增加超过10%, 结束施工请及时关闭电源,节约用电。' },
        { date: '2026-01-13', type: 'power', message: '本月用电比上月用电增加超过10%, 结束施工请及时关闭电源,节约用电。' },
        { date: '2026-01-12', type: 'water', message: '本月用水量较上月有所增加，请注意检查是否有漏水情况。' },
        { date: '2026-01-10', type: 'water', message: '用水量持续上升，建议优化用水方案。' }
    ];

    renderAnalysisList(alerts);
}

// 渲染分析提醒列表
function renderAnalysisList(alerts) {
    const filteredAlerts = currentFilterType === 'all'
        ? alerts
        : alerts.filter(item => item.type === currentFilterType);

    const html = filteredAlerts.map(item => {
        return `<div class="analysis-item">
            <span class="analysis-item-date">${item.date}:</span>
            ${item.message}
        </div>`;
    }).join('');

    $('#analysisList').html(html || '<div class="analysis-item" style="text-align:center;color:rgba(255,255,255,0.5);">暂无提醒</div>');
}

// 筛选分析提醒
function filterAnalysis(type) {
    currentFilterType = type;

    // 更新标签状态
    $('.analysis-tab').removeClass('active');
    $(`.analysis-tab[data-type="${type}"]`).addClass('active');

    // 重新渲染列表
    initAnalysisList();
}

// 更新图表
function updateCharts() {
    // 这里可以重新加载图表数据
    if (envMonitorChart) envMonitorChart.resize();
    if (powerTrendChart) powerTrendChart.resize();
    if (waterTrendChart) waterTrendChart.resize();
}

// 更新分析提醒列表
function updateAnalysisList() {
    // 这里可以从API获取最新提醒数据
    initAnalysisList();
}