cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

节能减排

This commit is contained in:
jiang 2025-07-24 09:50:13 +08:00
parent 3b14315101
commit f79a89f727
1 changed files with 52 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
pages/newDataAnalysis/energySavingAnalysis.html
View File

@ -22,8 +22,7 @@
<script src="../../api/commonRequest.js"></script>
<style>
html {
width: 100%;
height: 100%;
width: 100%;height: 90%;margin-top: 3%;color: #009B94
}
@ -32,9 +31,9 @@
background-color: #008781;
}
.shadow {
/*.shadow {
background-color: #FFFFFF;
}
}*/
.layui-laydate {
background-color: #009B94;
@ -99,7 +98,7 @@
}
</script>
</head>
<body style="width: 100%;height: 90%;margin-top: 4%;color: #009B94">
<body style="width: 100%;height: 100%;color: #FFFFFF">
<div class="max-w-[1440px] mx-auto px-4">
<div class="flex items-center justify-between mb-4">
<form class="layui-form" style="color: #009B94" action="">
@ -121,20 +120,20 @@
</form>
</div>
<div class="grid grid-cols-2 gap-6 mb-8">
<div class=" p-6 rounded-lg shadow">
<h3 class="text-lg font-bold mb-4">能耗趋势分析</h3>
<div id="trendChart" style="height: 300px;"></div>
<div class="grid grid-cols-2 gap-4 mb-2">
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-1">能耗趋势分析</h3>
<div id="trendChart" style="height: 280px;"></div>
</div>
<div class=" p-6 rounded-lg shadow">
<h3 class="text-lg font-bold mb-4">设备能耗占比</h3>
<div id="deviceChart" style="height: 300px;"></div>
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-1">设备能耗占比</h3>
<div id="deviceChart" style="height: 280px;"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-6 mb-8">
<div class=" p-6 rounded-lg shadow">
<h3 class="text-lg font-bold mb-4">节能减排措施落实情况</h3>
<div class="grid grid-cols-2 gap-4 mb-2">
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-2">节能减排措施落实情况</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
@ -165,10 +164,10 @@
</div>
</div>
</div>
<div class="p-6 rounded-lg shadow">
<h3 class="text-lg font-bold mb-4">能耗异常分析</h3>
<div class="bg-[#002628] p-4 rounded-lg shadow border border-[#004446]">
<h3 class="text-lg font-bold mb-2">能耗异常分析</h3>
<div id="alarm-container" class="space-y-4"
style="overflow-x: auto; max-height: 130px; overflow-y: auto;"></div>
style="height: 280px; overflow-y: auto;"></div>
</div>
</div>
@ -347,8 +346,14 @@
tooltip: {
trigger: 'axis'
},
textStyle: {
color: '#FFFFFF'
},
legend: {
data: ['能源消耗量', '节能减排量']
data: ['能源消耗量', '节能减排量'],
textStyle: {
color: '#FFFFFF'
}
},
xAxis: {
type: 'category',
@ -367,13 +372,27 @@
series: [{
name: '能源消耗量',
type: 'line',
data: consumptionKwh
data: consumptionKwh,
label: {
show: true,
position: 'top',
color: '#FFFFFF',
fontSize: 12,
formatter: '{c}'
}
}, {
name: '节能减排量',
type: 'line',
yAxisIndex: 1,
data: renewableUsedKwh
}]
data: renewableUsedKwh,
label: {
show: true,
position: 'top',
color: '#FFFFFF',
fontSize: 12,
formatter: '{c}'
}
},]
});
}
@ -392,6 +411,9 @@
type: 'shadow'
}
},
textStyle: {
color: '#FFFFFF'
},
xAxis: {
type: 'value'
},
@ -403,7 +425,14 @@
type: 'bar',
data: consumptionKwh,
itemStyle: {
color: '#22c55e'
color: '#00C6BE'
},
label: {
show: true, // 开启显示
position: 'right', // 数值显示在柱状图右侧（柱子尾部）
color: '#FFFFFF', // 设置字体颜色，根据背景可调整
fontSize: 12,
formatter: '{c}' // 显示对应的数值
}
}]
});