jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

实现系统总览页面数据接口

Browse Source
This commit is contained in:
lixiaoyuan
2025-07-28 17:14:44 +08:00
parent e6e3f4837d
commit 0958fcc224
9 changed files with 184 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
bin/Release/assets/html/pages/系统总览.html
View File

@@ -1,13 +1,12 @@
<div class="myrow" style="height:100%; padding: 10px; ">
<div class="myrow" style="height:100%; padding: 10px;">
<div style="width: 25%; height: 100%; overflow: hidden">
<div class="mypanel " style="height: calc(30% - 10px)">
<div class="mypanel " style="height: calc((100% - 12px) * 0.30)">
<div class="mypanel-title myline-lb">运行状况</div>
<div class="myrow" style="width: 100%; height: calc(100% - 40px); margin-top: 10px">
<div class="label-bkg" style="width: 30%">
<div class="label-val-lg">0</div>
<div class="label-tail">天</div>
<div class="label-key">安全运行</div>
<div class="label-tail" style="align-items: flex-end;">天</div>
<div class="label-key" style="font-size: 30px; align-items: flex-start">安全运行</div>
</div>
<div class="mycol" style="width: 70%; margin-left: 5px">
<div class="myrow" style="width: 100%; height: 33%">
@@ -50,7 +49,7 @@
</div>
</div>
<div class="mypanel" style="height: calc(35% - 10px)">
<div class="mypanel" style="height: calc((100% - 12px) * 0.34)">
<div class="mypanel-title myline-lb">光伏设备</div>
<div class="myrow" style="margin-top: 10px">
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
@@ -72,7 +71,7 @@
<div id="mychartSolar" style="width: 100%; height: calc(100% - 90px)"></div>
</div>
<div class="mypanel" style="height: calc(35% - 10px)">
<div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
<div class="mypanel-title myline-lb">储能设备</div>
<div class="myrow" style="margin-top: 10px">
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
@@ -91,7 +90,7 @@
</div>
<div style="margin-left: 10px; width: 50%; height: 100%; overflow: hidden; font-size: 14px;">
<div class="mypanel" style="height: calc(70% - 10px); background-color: #012036;">
<div class="mypanel" style="height: calc((100% - 12px) * 0.64 + 10px); background-color: #012036;">
<div class="myrow" style="justify-content: center ; ">
<div style="display: flex; width: 20%;">
<div style="width:5px; height: 50px; background-color: #f69b52;"></div>
@@ -137,14 +136,14 @@
<img src="./res/overview.png" style="width: 100%; height: calc(100% - 60px); object-fit: fill; margin-top: 20px;">
</img>
</div>
<div class="mypanel" style="height: calc(30% - 10px)">
<div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
<div class="mypanel-title myline-lb">发电功率和辐照度</div>
<div id="mychartRunning" style="width: 100%; height: 90%"></div>
</div>
</div>
<div style="margin-left: 10px; width: 25%; height: 100%; overflow: hidden">
<div class="mypanel" style="height: calc(30% - 10px)">
<div class="mypanel" style="height: calc((100% - 12px) * 0.30)">
<div class="mypanel-title myline-lb">负荷设备</div>
<div class="myrow" style="margin-top: 10px">
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
@@ -161,7 +160,7 @@
<div id="mychartLoad" style="width: 100%; height: calc(100% - 90px)"></div>
</div>
<div class="mypanel" style="height: calc(35% - 10px)">
<div class="mypanel" style="height: calc((100% - 12px) * 0.34)">
<div class="mypanel-title myline-lb">充电设备</div>
@@ -185,7 +184,7 @@
<div id="mychartCharge" style="width: 100%; height: calc(100% - 90px)"></div>
</div>
<div class="mypanel" style="height: calc(35% - 10px)">
<div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
<div class="mypanel-title myline-lb">告警信息</div>
<div class="myrow" style="margin-top: 10px">
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
@@ -207,4 +206,5 @@
<div id="mychartAlert" style="width: 100%; height: calc(100% - 90px)"></div>
</div>
</div>
</div>

64
bin/Release/assets/html/pages/系统总览.js
View File

@@ -76,20 +76,62 @@ window.onresize = () => {
}
function updatePageData() {
// 查询数据获取环境信息
$('#envIllumination').text('27.2 Lux')
$('#envWindspeed').text('1.5 m/s')
$('#envTemperture').text('27.8 ℃')
$('#envHumidity').text('37.6 %')
// 获取统计数据(累计统计)
G.cppNative.getStatisticTotal().then((res => {
// {"ccers":100,"elect_charge":0,"elect_gen":153.8,"elect_in":130.2,"income_charge":100,"income_elect":100}
$('#windTurbineNum').text('8')
$('#solarNum').text('207')
$('#electricTotal').text(res['elect_gen'])
$('#electricInTotal').text(res['elect_in'])
$('#carbonReduction').text(res['ccers'])
}))
// 查询获取统计信息
$('#windTurbineNum').text('8')
$('#solarNum').text('207')
$('#electricTotal').text('153.21')
$('#electricInTotal').text('120.35')
$('#carbonReduction').text('36.17')
// 获取统计数据(日统计，7天的数据)
G.cppNative.getStatisticDay(7).then((res => {
var xAxisData = []
var solar = { d1: [], d2: [], d3: [] }
var storage = { d1: [], d2: [], d3: [] }
var load = { d1: [], d2: [], d3: [] }
var charge = { d1: [], d2: [], d3: [] }
res.forEach(item => {
solar.d1.push(item['elect_gen_solar'])
solar.d2.push(item['elect_in_solar'])
storage.d1.push(item['elect_store'])
storage.d2.push(item['elect_discharge'])
load.d1.push(item['elect_load'])
load.d2.push(item['elect_load'])
charge.d1.push(item['elect_charge'])
charge.d2.push(item['num_charge'])
})
// 服务端获取光伏设备7天统计数据，更新图表
// var data1 = [1, 2, 3, 4, 3, 2, 1]
// var data2 = [1, 2, 3, 4, 3, 2, 1]
// var data3 = [1, 2, 3, 4, 3, 2, 1]
mychartSolar.setOption({ series: [{ data: solar.d1 }, { data: solar.d2 }, { data: solar.d3 }] });
mychartStorage.setOption({ series: [{ data: storage.d1 }, { data: storage.d2 }, { data: storage.d3 }] });
mychartLoad.setOption({ series: [{ data: load.d1 }, { data: load.d2 }, { data: load.d3 }] });
mychartCharge.setOption({ series: [{ data: charge.d1 }, { data: charge.d2 }, { data: charge.d3 }] });
mychartAlert.setOption({ series: [{ data: solar.d1 }, { data: solar.d2 }, { data: solar.d3 }] });
}))
// 查询数据获取环境信息：光照、风速、环境温度、湿度
G.cppNative.getEnvironmentInfo().then(res => {
$('#envIllumination').text(res['illumination'] + ' Lux')
$('#envWindspeed').text(res['windspeed'] + ' m/s')
$('#envTemperture').text(res['temperature'] + ' ℃')
$('#envHumidity').text(res['humidity'] + ' %')
})
}
/// 清理资源
var timerId = null
document.currentScript.addEventListener('DOMNodeRemoved', () => {
G.cppNative.log('DOMNodeRemoved: 运行监控')