节能减排

This commit is contained in:
jiang 2025-07-24 19:38:54 +08:00
parent 927a65be85
commit aaee9bfa8e
2 changed files with 69 additions and 64 deletions

View File

@ -158,14 +158,14 @@
</div>
<div class=" border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-1">设备能耗占比</h3>
<div id="deviceChart" style="height: 300px;width: 100%"></div>
<div id="deviceChart" style="height: 300px;width: 100%;"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-2">
<div class=" border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-2">节能减排措施落实情况</h3>
<div id="progress-container" class="space-y-4"></div>
<h3 class="text-lg font-bold mb-2">设备节能占比</h3>
<div id="renewableUsedKwh" style="height: 300px;width: 100%;"></div>
</div>
<div class=" p-4 rounded-lg shadow border border-[#004446]">
<h3 class="text-lg font-bold mb-2">能耗异常分析</h3>
@ -179,6 +179,8 @@
<script>
const trendChart = echarts.init(document.getElementById('trendChart'));
const deviceChart = echarts.init(document.getElementById('deviceChart'));
const renewableUsedKwhChart = echarts.init(document.getElementById('renewableUsedKwh'));
let table, layer, form, laydate;
layui.use(["layer", "table", "form"], function () {
layer = layui.layer;
@ -218,7 +220,6 @@
selectEnergyStatsByDateRange(data)
selectDeviceEnergyByDateRange(data)
selectAnomalyByDateRange(data)
selectLatestAll(data)
// 这里可以写你想监听后做的操作
}
});
@ -231,7 +232,6 @@
selectEnergyStatsByDateRange(data)
selectDeviceEnergyByDateRange(data)
selectAnomalyByDateRange(data)
selectLatestAll(data)
});
// 获取今天和一个月前日期,格式 yyyy-MM-dd
@ -280,6 +280,7 @@
}, function (result) {
if (result.code === 200) {
deviceChartFn(result.data)
renewableUsedKwhFn(result.data)
} else if (result.code === 500) {
console.error('数据分析应用' + result.msg);
} else if (result.code === 401) {
@ -308,42 +309,6 @@
}
/* 加载数据分析应用 */
function selectLatestAll(data) {
const url = commonUrl + 'screen/largeScreen/deviceEnergyAnalysis/selectLatestAll';
ajaxRequest(url, "post", JSON.stringify(data), true, function () {
}, function (result) {
if (result.code === 200) {
insetLatest(result.data)
} else if (result.code === 500) {
console.error('数据分析应用' + result.msg);
} else if (result.code === 401) {
}
}, function (xhr, status, error) {
}, "application/json", aqEnnable);
}
function insetLatest(data) {
const container = document.getElementById('progress-container');
container.innerHTML = ''; // 🔄 清空原有内容
data.map(item => {
const block = document.createElement('div');
block.innerHTML = `
<div class="flex justify-between mb-1">
<span>${item.measureName}</span>
<span class="font-bold">${item.coverageRate * 100}%</span>
</div>
<div class="h-2 bg-gray-200 rounded-full">
<div class="h-2 bg-primary rounded-full" style="width: ${item.coverageRate * 100}%"></div>
</div>
`;
container.appendChild(block);
})
}
function insertAlarm(data) {
const container = document.getElementById('alarm-container');
container.innerHTML = ''; // 🔄 清空原有内容
@ -416,8 +381,8 @@
data.map(item => {
statDate.push(item.statDate);
consumptionKwh.push(item.consumptionKwh);
renewableUsedKwh.push(item.renewableUsedKwh);
consumptionKwh.push(Number(parseFloat(item.consumptionKwh).toFixed(2)));
renewableUsedKwh.push(Number(parseFloat(item.renewableUsedKwh).toFixed(2)));
})
trendChart.setOption({
animation: false,
@ -481,22 +446,23 @@
let consumptionKwh = []
data.map(item => {
deviceName.push(item.deviceName);
consumptionKwh.push(item.consumptionKwh);
consumptionKwh.push(Number(parseFloat(item.consumptionKwh).toFixed(2)));
})
deviceChart.setOption({
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
axisPointer: {type: 'shadow'}
},
textStyle: {
color: '#FFFFFF'
},
xAxis: {
type: 'value'
textStyle: {color: '#FFFFFF'},
grid: {
left: 30, // 增大左边距,给长标签留出空间
right: 30,
top: 20,
bottom: 30,
containLabel: true
},
xAxis: {type: 'value'},
yAxis: {
type: 'category',
data: deviceName
@ -504,15 +470,55 @@
series: [{
type: 'bar',
data: consumptionKwh,
itemStyle: {
color: '#008781'
},
itemStyle: {color: '#008781'},
label: {
show: true, // 开启显示
position: 'right', // 数值显示在柱状图右侧(柱子尾部)
color: '#FFFFFF', // 设置字体颜色,根据背景可调整
show: true,
position: 'right',
color: '#FFFFFF',
fontSize: 12,
formatter: '{c}' // 显示对应的数值
formatter: '{c}'
}
}]
});
}
function renewableUsedKwhFn(data) {
let deviceName = [];
let renewableUsedKwh = []
data.map(item => {
deviceName.push(item.deviceName);
renewableUsedKwh.push(Number(parseFloat(item.renewableUsedKwh).toFixed(2)));
})
renewableUsedKwhChart.setOption({
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {type: 'shadow'}
},
textStyle: {color: '#FFFFFF'},
grid: {
left: 30, // 增大左边距,给长标签留出空间
right: 30,
top: 20,
bottom: 30,
containLabel: true
},
xAxis: {type: 'value'},
yAxis: {
type: 'category',
data: deviceName
},
series: [{
type: 'bar',
data: renewableUsedKwh,
itemStyle: {color: '#008781'},
label: {
show: true,
position: 'right',
color: '#FFFFFF',
fontSize: 12,
formatter: '{c}'
}
}]
});
@ -522,6 +528,7 @@
window.addEventListener('resize', function () {
trendChart.resize();
deviceChart.resize();
renewableUsedKwhChart.resize();
});
</script>
</body>

View File

@ -78,10 +78,9 @@
<script>
const adviceMap = {
'能耗波动异常': '检查能耗数据波动趋势,确认是否存在非计划性设备启停或外部环境因素干扰。',
'设备过载能耗': '检查设备运行负荷,适当分配工作任务,避免长时间高负荷运行。',
'能耗异常': '立即核查相关设备运行状态,排查是否存在故障或人为干预因素。',
'轻微异常': '持续观察能耗变化,记录趋势并安排定期巡检。',
'能耗异常': '立即核查相关设备运行状态,排查是否存在故障或人为干预因素。'
};
// 从 URL 获取参数
@ -93,9 +92,9 @@
function setParams(data) {
let item = JSON.parse(data);
document.getElementById('device-name').innerText = item.deviceName;
document.getElementById('abnormal-date').innerText = item.statDate;
document.getElementById('abnormal-date').innerText = item.statDate.split(' ')[0];
document.getElementById('anomalyDesc').innerText = item.anomalyDesc;
document.getElementById('time-range').innerText = `${item.lastRecordDate} - ${item.statDate}`;
document.getElementById('time-range').innerText = `${item.lastRecordDate.split(' ')[1]} - ${item.statDate.split(' ')[1]}`;
// 根据异常类型填充建议措施
@ -110,6 +109,5 @@
// anomalyDesc: "设备过载能耗"
// }));
</script>
</body>
</html>