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

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

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>