439 lines
14 KiB
JavaScript
439 lines
14 KiB
JavaScript
// 节能减排分析页面
|
||
let envMonitorChart = null;
|
||
let powerTrendChart = null;
|
||
let waterTrendChart = null;
|
||
let currentFilterType = 'all';
|
||
|
||
// 页面初始化
|
||
$(document).ready(function () {
|
||
// 等待layui加载完成
|
||
layui.use(['laydate', 'layer'], function () {
|
||
initDateRange();
|
||
initEnvMonitorChart();
|
||
initPowerTrendChart();
|
||
initWaterTrendChart();
|
||
initComparisonData();
|
||
initAnalysisList();
|
||
|
||
// 窗口大小改变时重新调整图表
|
||
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;
|
||
laydate.render({
|
||
elem: '#dateRange',
|
||
type: 'date',
|
||
range: true,
|
||
format: 'yyyy-MM-dd',
|
||
value: getDefaultDateRange(),
|
||
done: function (value) {
|
||
// 日期选择完成后的回调
|
||
}
|
||
});
|
||
}
|
||
|
||
// 获取默认日期范围（最近7天）
|
||
function getDefaultDateRange() {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setDate(start.getDate() - 6);
|
||
return formatDate(start) + ' ~ ' + formatDate(end);
|
||
}
|
||
|
||
// 格式化日期
|
||
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 queryData() {
|
||
const dateRange = $('#dateRange').val();
|
||
if (!dateRange) {
|
||
layui.layer.msg('请选择日期范围', { icon: 0 });
|
||
return;
|
||
}
|
||
|
||
// 这里可以调用API获取数据
|
||
// 目前使用模拟数据
|
||
loadData(dateRange);
|
||
|
||
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();
|
||
}
|