874 lines
27 KiB
JavaScript
874 lines
27 KiB
JavaScript
// 节能减排分析页面
|
||
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);
|
||
} 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 = `<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: [],
|
||
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 `<div class="analysis-item">
|
||
<span class="analysis-item-date">${date}:</span>
|
||
${content}
|
||
</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');
|
||
|
||
// 重新调用接口获取筛选后的数据
|
||
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('<div class="analysis-item" style="text-align:center;color:rgba(255,255,255,0.5);">暂无提醒</div>');
|
||
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
|
||
}
|
||
});
|
||
}
|