// 节能减排分析页面
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 = `
${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: 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 ? '' : '';
const symbol = isPositive ? '↑' : '↓';
$element.html(arrow + '' + Math.abs(growth) + '%' + symbol + '');
}
// 更新环比数据
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 `
${item.date}:
${item.message}
`;
}).join('');
$('#analysisList').html(html || '暂无提醒
');
}
// 筛选分析提醒
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();
}