节能减排
This commit is contained in:
parent
927a65be85
commit
aaee9bfa8e
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue