// 节能减排分析页面 let envMonitorChart = null; let powerTrendChart = null; let waterTrendChart = null; let currentFilterType = 'all'; let bidCode = parent.parent.$('#bidPro').val(); // 弹框相关变量 let currentModalTxType = ''; // 当前弹框的类型("用电" 或 "用水") let modalKeyword = ''; // 弹框关键字 let modalQueryParams = { startTime: '', endTime: '' }; let pageSize = 10; // 分页大小 let table = null; // layui table 实例 let laydate = null; // layui laydate 实例 // 获取当天日期 function getTodayDate() { const now = new Date(); return formatDate(now); } // 工程安全/节能分析页面通用查询参数(与工程质量分析保持一致的模式) 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 today = getTodayDate(); let queryParams = { projectId: bidCode, startTime: today, endTime: today, }; // 页面初始化 $(document).ready(function () { // 等待layui加载完成 layui.use(['laydate', 'layer', 'table'], function () { laydate = layui.laydate; table = layui.table; initDateRange(); initEnvMonitorChart(); initPowerTrendChart(); initWaterTrendChart(); initComparisonData(); initAnalysisList(); // 初始化弹框事件 initModalEvents(); // 页面初始化时,按默认当天日期加载一次接口数据 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 getEnvironmentMonitorData() { const url = commonUrl + 'screen/energyReduction/getEnvironmentList' + '?bidCode=' + (bidCode || '') + '&startTime=' + (queryParams.startTime || '') + '&endTime=' + (queryParams.endTime || ''); ajaxRequestGet(url, 'GET', true, function () { }, function (result) { console.log(result, '环境监测图表数据'); if (result && result.data) { updateEnvMonitorChart(result.data); } else if (result) { updateEnvMonitorChart(result); } }, aqEnnable); } // 获取累计用电 和 用水数据 function getAccumulatedElectricityAndWaterData() { const url = commonUrl + 'screen/energyReduction/getWaterUsageData' + '?bidCode=' + (bidCode || '') + '&startTime=' + (queryParams.startTime || '') + '&endTime=' + (queryParams.endTime || ''); ajaxRequestGet(url, 'GET', true, function () { }, function (result) { console.log(result, '累计用电和用水数据'); if (result) { updateAccumulatedData(result.data); } }, aqEnnable); } // 获取近七天用电和用水趋势数据 function getElectricAndWaterTrendData() { const url = commonUrl + 'screen/energyReduction/getWeeksWaterUsageData' + '?bidCode=' + (bidCode || '') + '&startTime=' + (queryParams.startTime || '') + '&endTime=' + (queryParams.endTime || ''); ajaxRequestGet(url, 'GET', true, function () { }, function (result) { console.log(result, '近七天用电和用水趋势数据'); if (result && result.data) { updateTrendCharts(result.data); } else if (result) { updateTrendCharts(result); } }, aqEnnable); } // 获取水电环比 function getElectricAndWaterGrowthRate() { const url = commonUrl + 'screen/energyReduction/getMonthWaterUsageData' + '?bidCode=' + (bidCode || '') + '&startTime=' + (queryParams.startTime || '') + '&endTime=' + (queryParams.endTime || ''); ajaxRequestGet(url, 'GET', true, function () { }, function (result) { console.log(result, '水电环比数据'); if (result) { updateComparisonData(result.data); } else if (result && result.data) { updateComparisonData(result.data); } }, aqEnnable); } // 获取分析提醒 function getAnalysisWarning(txType) { // txType: "全部"传空字符串,其他传对应的汉字 const txTypeParam = txType === 'all' ? '' : (txType === 'power' ? '用电' : txType === 'water' ? '用水' : ''); const url = commonUrl + 'screen/energyReduction/getWarnList' + '?bidCode=' + (bidCode || '') + '&startTime=' + (queryParams.startTime || '') + '&endTime=' + (queryParams.endTime || '') + (txTypeParam ? '&txType=' + txTypeParam : ''); ajaxRequestGet(url, 'GET', true, function () { }, function (result) { console.log(result, '分析提醒'); if (result && Array.isArray(result)) { updateAnalysisList(result); } else if (result && result.data && Array.isArray(result.data)) { updateAnalysisList(result.data); } }, aqEnnable); } // 初始化日期范围选择器(逻辑与工程质量分析模块保持一致) function initDateRange() { const laydate = layui.laydate; // 初始显示为当天范围 $('#dateRange').val(queryParams.startTime + ' ~ ' + queryParams.endTime); laydate.render({ elem: '#dateRange', type: 'date', range: true, format: 'yyyy-MM-dd', theme: 'dark', // laydate 内部使用 "起始 - 结束" 作为分隔符 value: queryParams.startTime + ' - ' + queryParams.endTime, done: function (value) { const resetToToday = function () { const today = getTodayDate(); queryParams.startTime = today; queryParams.endTime = today; $('#dateRange').val(today + ' ~ ' + today); 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.startTime = startDate; queryParams.endTime = endDateStr; // 日期变化后,重新拉取接口数据(先打印) refreshEnergyModules(); } else { resetToToday(); } } else { resetToToday(); } } }); } // 格式化日期 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 refreshEnergyModules() { // 调用环境监测图表数据接口 getEnvironmentMonitorData(); // 调用累计用电和用水数据接口 getAccumulatedElectricityAndWaterData(); // 调用近七天用电和用水趋势数据接口 getElectricAndWaterTrendData(); // 调用水电环比数据接口 getElectricAndWaterGrowthRate(); // 调用分析提醒接口(使用当前的筛选类型) getAnalysisWarning(currentFilterType); } // 查询数据 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 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 = `
${params[0].name}
`; params.forEach(p => { html += `
${p.seriesName} ${p.value}${p.seriesName === '风速' ? 'm/s' : p.seriesName === '温度' ? '°C' : '%'}
`; }); 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: [], 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: [], itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#4A90E2' }, { offset: 1, color: '#357ABD' } ]) }, barWidth: '30' }, { name: '湿度', type: 'bar', data: [], itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#1CFFA3' }, { offset: 1, color: '#19CC8A' } ]) }, barWidth: '30' }, { name: '风速', type: 'line', yAxisIndex: 1, data: [], 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 updateEnvMonitorChart(data) { if (!envMonitorChart) return; // 处理时间列表:从 "00", "02" 格式化为 "00:00", "02:00" const timeList = (data.timeList || []).map(time => { // 如果已经是完整格式,直接返回;否则格式化为 "HH:00" if (time && time.includes(':')) { return time; } // 确保是两位数,然后添加 ":00" return String(time).padStart(2, '0') + ':00'; }); // 处理温度数据:转换为数字 const wdList = (data.wdList || []).map(val => parseFloat(val) || 0); // 处理湿度数据:转换为数字 const sdList = (data.sdList || []).map(val => parseFloat(val) || 0); // 处理风速数据:转换为数字 const speedList = (data.speedList || []).map(val => parseFloat(val) || 0); // 更新图表 envMonitorChart.setOption({ xAxis: { data: timeList }, series: [ { name: '温度', data: wdList }, { name: '湿度', data: sdList }, { name: '风速', data: speedList } ] }); } // 更新累计用电和用水数据 function updateAccumulatedData(data) { // 处理累计用电:usage 字段 const usage = parseFloat(data.usage || 0); // 格式化为 "XXX.X" 格式(保留1位小数,不足5位前面补0) const usageFormatted = formatNumber(usage); $('#totalPower').text(usageFormatted); // 处理累计用水:water 字段 const water = parseFloat(data.water || 0); // 格式化为 "XXX.X" 格式(保留1位小数,不足5位前面补0) const waterFormatted = formatNumber(water); $('#totalWater').text(waterFormatted); } // 更新近七天用电和用水趋势图表 function updateTrendCharts(data) { if (!data) return; // 处理时间列表:从 "YYYY-MM-DD" 格式化为 "MM-DD" const timeList = (data.timeList || []).map(time => { if (!time) return ''; // 如果已经是 "MM-DD" 格式,直接返回 if (time.match(/^\d{2}-\d{2}$/)) { return time; } // 如果是 "YYYY-MM-DD" 格式,提取后两部分 if (time.match(/^\d{4}-\d{2}-\d{2}$/)) { const parts = time.split('-'); return parts[1] + '-' + parts[2]; } return time; }); // 处理用电数据:usageList 转换为数字 const usageList = (data.usageList || []).map(val => parseFloat(val) || 0); // 处理用水数据:waterList 转换为数字 const waterList = (data.waterList || []).map(val => parseFloat(val) || 0); // 更新用电趋势图表 if (powerTrendChart) { powerTrendChart.setOption({ xAxis: { data: timeList }, series: [ { data: usageList } ] }); } // 更新用水趋势图表 if (waterTrendChart) { waterTrendChart.setOption({ xAxis: { data: timeList }, series: [ { data: waterList } ] }); } } // 初始化近七天用电趋势图表 function initPowerTrendChart() { powerTrendChart = echarts.init(document.getElementById('powerTrendChart')); 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: [], axisLabel: { color: '#fff', fontSize: 11 }, axisLine: { lineStyle: { color: '#5A6E71' } }, axisTick: { show: false } }, yAxis: { type: 'value', min: 0, axisLabel: { color: '#fff', fontSize: 11 }, axisLine: { lineStyle: { color: '#5A6E71' } }, splitLine: { lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' } } }, series: [ { type: 'line', data: [], 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 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: [], axisLabel: { color: '#fff', fontSize: 11 }, axisLine: { lineStyle: { color: '#5A6E71' } }, axisTick: { show: false } }, yAxis: { type: 'value', min: 0, axisLabel: { color: '#fff', fontSize: 11 }, axisLine: { lineStyle: { color: '#5A6E71' } }, splitLine: { lineStyle: { color: 'rgba(90, 110, 113, 0.3)', type: 'dashed' } } }, series: [ { type: 'line', data: [], 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() { // 设置默认值 $('#currentMonthPowerNum').text('0.0'); $('#lastMonthPowerNum').text('0.0'); $('#currentMonthWaterNum').text('0.0'); $('#lastMonthWaterNum').text('0.0'); $('#powerGrowthRate').text('0%'); $('#waterGrowthRate').text('0%'); } // 更新环比数据 function updateComparisonData(data) { if (!data) return; // 更新用电数据 const usage = parseFloat(data.usage || 0).toFixed(1); const lastUsage = parseFloat(data.lastUsage || 0).toFixed(1); const usageRate = data.usageRate || '0%'; $('#currentMonthPowerNum').text(usage); $('#lastMonthPowerNum').text(lastUsage); $('#powerGrowthRate').text(usageRate); // 更新用水数据 const water = parseFloat(data.water || 0).toFixed(1); const lastWater = parseFloat(data.lastWater || 0).toFixed(1); const waterRate = data.waterRate || '0%'; $('#currentMonthWaterNum').text(water); $('#lastMonthWaterNum').text(lastWater); $('#waterGrowthRate').text(waterRate); } // 初始化分析提醒列表 function initAnalysisList() { // 初始化时调用接口获取数据 getAnalysisWarning(currentFilterType); } // 渲染分析提醒列表 function renderAnalysisList(alerts) { const html = alerts.map(item => { // 使用 txTime 作为日期,content 作为内容 const date = item.txTime || item.date || ''; const content = item.content || item.message || ''; return `
${date}: ${content}
`; }).join(''); $('#analysisList').html(html || '
暂无提醒
'); } // 筛选分析提醒 function filterAnalysis(type) { currentFilterType = type; // 更新标签状态 $('.analysis-tab').removeClass('active'); $(`.analysis-tab[data-type="${type}"]`).addClass('active'); // 重新调用接口获取筛选后的数据 getAnalysisWarning(type); } // 更新图表 function updateCharts() { // 这里可以重新加载图表数据 if (envMonitorChart) envMonitorChart.resize(); if (powerTrendChart) powerTrendChart.resize(); if (waterTrendChart) waterTrendChart.resize(); } // 更新分析提醒列表(用于渲染接口返回的数据) function updateAnalysisList(data) { if (!data || !Array.isArray(data)) { $('#analysisList').html('
暂无提醒
'); return; } renderAnalysisList(data); } // ==================== 弹框相关函数 ==================== // 初始化弹框事件 function initModalEvents() { // 绑定折线图点击事件 setTimeout(function () { if (powerTrendChart) { powerTrendChart.on('click', function (params) { openWaterUsageModal('用电'); }); } if (waterTrendChart) { waterTrendChart.on('click', function (params) { openWaterUsageModal('用水'); }); } }, 500); } // 打开用电用水详情弹框 function openWaterUsageModal(txType) { currentModalTxType = txType || ''; const modal = $('#waterUsageModal'); modal.addClass('show'); // 重置关键字输入框 modalKeyword = ''; $('#modalTypeInput').val(''); // 初始化弹框内的日期选择器 initModalDateRangePicker(); // 延迟初始化表格,确保弹框完全显示后再渲染表格 setTimeout(function () { initModalWaterUsageTable(); }, 100); } // 关闭用电用水详情弹框 function closeWaterUsageModal() { const modal = $('#waterUsageModal'); modal.removeClass('show'); } // 初始化弹框内日期范围选择器 function initModalDateRangePicker() { // 使用当前查询参数初始化弹框日期 const initialValue = queryParams.startTime + ' ~ ' + queryParams.endTime; $('#modalDateRange').val(initialValue); // 同步弹框查询参数 modalQueryParams.startTime = queryParams.startTime; modalQueryParams.endTime = queryParams.endTime; // 使用范围选择器,单个输入框显示日期范围 laydate.render({ elem: '#modalDateRange', type: 'date', range: true, format: 'yyyy-MM-dd', theme: 'dark', value: queryParams.startTime + ' - ' + queryParams.endTime, done: function (value) { const resetToToday = function () { const today = getTodayDate(); modalQueryParams.startTime = today; modalQueryParams.endTime = today; $('#modalDateRange').val(today + ' ~ ' + today); queryWaterUsageRecords(); }; if (value && value.trim() !== '') { const dates = value.split(' - '); if (dates.length === 2) { const startDate = dates[0].trim(); const endDateStr = dates[1].trim(); // 回显到输入框(使用 ~) $('#modalDateRange').val(startDate + ' ~ ' + endDateStr); // 更新弹框查询参数 modalQueryParams.startTime = startDate; modalQueryParams.endTime = endDateStr; queryWaterUsageRecords(); } else { resetToToday(); } } else { resetToToday(); } } }); } // 初始化弹框内用电用水详情表格 function initModalWaterUsageTable() { if (!table) return; table.render({ elem: '#modalWaterUsageTable', id: 'modalWaterUsageTable', url: commonUrl + 'screen/energyReduction/getWaterUsageList', headers: { decrypt: 'decrypt', Authorization: sessionStorage.getItem("zhgd_token") }, method: 'GET', where: { bidCode: bidCode, startTime: modalQueryParams.startTime, endTime: modalQueryParams.endTime, txType: currentModalTxType || '', type: modalKeyword || '' }, 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: 0, msgName: 'msg', countName: 'count', dataName: 'data' }, cols: [[ { type: 'numbers', title: '序号', width: '15%', align: 'center' }, { field: 'type', title: '类型', width: '20%', align: 'center' }, { field: 'createTime', title: '日期', width: '30%', align: 'center' }, { field: 'num', title: '数量', width: '35%', align: 'center' } ]] }); } // 弹框内查询记录 function queryWaterUsageRecords() { if (!table) return; modalKeyword = $('#modalTypeInput').val() || ''; // 重新加载表格 table.reload('modalWaterUsageTable', { where: { bidCode: bidCode, startTime: modalQueryParams.startTime, endTime: modalQueryParams.endTime, txType: currentModalTxType || '', type: modalKeyword || '' }, page: { curr: 1 } }); }