524 lines
18 KiB
JavaScript
524 lines
18 KiB
JavaScript
// 节能减排分析页面
|
||
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();
|
||
}
|