// 节能减排分析页面
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
}
});
}