mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
上传项目代码
This commit is contained in:
lixiaoyuan
215
bin/Release/assets/html/pages/系统总览.html
Normal file
215
bin/Release/assets/html/pages/系统总览.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<div class="myrow" style="width:100%; height:100%; padding: 10px; ">
|
||||
|
||||
|
||||
<div style="width: 25%; height: 100%; overflow: hidden">
|
||||
<div class="mypanel" style="height: calc(30% - 10px)">
|
||||
<div class="mypanel-icon"></div>
|
||||
<div class="mypanel-title">运行状况</div>
|
||||
<div class="mypanel-line"></div>
|
||||
|
||||
<myrow style="width: 100%; height: calc(100% - 40px); margin-top: 10px">
|
||||
<div class="label-bkg" style="width: 30%">
|
||||
<div class="label-val-lg">123</div>
|
||||
<div class="label-tail">天</div>
|
||||
<div class="label-key">安全运行</div>
|
||||
</div>
|
||||
<mycolumn style="width: 70%; margin-left: 5px">
|
||||
<myrow style="width: 100%; height: 33%">
|
||||
<div class="label-bkg" style="width: 50%; height: 100%">
|
||||
<div class="label-key">风机设备</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">台</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">光伏设备</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">台</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<myrow style="width: 100%; height: 33%; margin-top: 5px">
|
||||
<div class="label-bkg" style="width: 50%; height: 100%">
|
||||
<div class="label-key">累计发电电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">累计入网电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<myrow style="width: 100%; height: 33%; margin-top: 5px">
|
||||
<div class="label-bkg" style="width: 50%; height: 100%">
|
||||
<div class="label-key">累计收益</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">元</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">碳减排量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">吨</div>
|
||||
</div>
|
||||
</myrow>
|
||||
</mycolumn>
|
||||
</myrow>
|
||||
</div>
|
||||
|
||||
<div class="mypanel" style="height: calc(35% - 10px)">
|
||||
<div class="mypanel-icon"></div>
|
||||
<div class="mypanel-title">光伏设备</div>
|
||||
<div class="mypanel-line"></div>
|
||||
<myrow style="margin-top: 10px">
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
|
||||
<div class="label-key">日发电电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日入网电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日收益金额</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">元</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<div id="mychartSolar" style="width: 100%; height: calc(100% - 90px)"></div>
|
||||
</div>
|
||||
|
||||
<div class="mypanel" style="height: calc(35% - 10px)">
|
||||
<div class="mypanel-icon"></div>
|
||||
<div class="mypanel-title">储能设备</div>
|
||||
<div class="mypanel-line"></div>
|
||||
<myrow style="margin-top: 10px">
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
|
||||
<div class="label-key">日充电电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日放电电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<div id="mychartStorage" style="width: 100%; height: calc(100% - 90px)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 10px; width: 50%; height: 100%; overflow: hidden">
|
||||
<div class="mypanel" style="height: calc(70% - 10px); ">
|
||||
<myrow style="justify-content: center ; ">
|
||||
<div style="display: flex; width: 20%;">
|
||||
<div style="width:5px; height: 50px; background-color: #f69b52;"></div>
|
||||
<div style="width:50px; height: 50px; background-color: #f69b5250;"></div>
|
||||
<mycolumn style="margin-left: 10px;">
|
||||
<div>光照</div>
|
||||
<div id="envIllumination">--</div>
|
||||
</mycolumn>
|
||||
</div>
|
||||
<div style="display: flex;width: 20%;">
|
||||
<div style="float: left;width:5px; height: 50px; background-color: #9bd801;"></div>
|
||||
<div style="width:50px; height: 50px; background-color: #9bd80150;"></div>
|
||||
<mycolumn style="margin-left: 10px;">
|
||||
<div>风速</div>
|
||||
<div id="envWindspeed">--</div>
|
||||
</mycolumn>
|
||||
</div>
|
||||
<div style="display: flex;width: 20%;">
|
||||
<div style="float: left;width:5px; height: 50px; background-color: #3dfefa;"></div>
|
||||
<div style="width:50px; height: 50px; background-color: #3dfefa50;"></div>
|
||||
<mycolumn style="margin-left: 10px;">
|
||||
<div>环境温度</div>
|
||||
<div id="envTemperture">--</div>
|
||||
</mycolumn>
|
||||
</div>
|
||||
<div style="display: flex;width: 20%;">
|
||||
<div style="float: left;width:5px; height: 50px; background-color: #d83d6c;"></div>
|
||||
<div style="width:50px; height: 50px; background-color: #d83d6c50;"></div>
|
||||
<mycolumn style="margin-left: 10px;">
|
||||
<div>环境湿度</div>
|
||||
<div id="envHumidity">--</div>
|
||||
</mycolumn>
|
||||
</div>
|
||||
</myrow>
|
||||
<img src="./res/overview.png" style="width: 100%; height: calc(100% - 50px); object-fit: fill;"> </img>
|
||||
</div>
|
||||
<div class="mypanel" style="height: calc(30% - 10px)">
|
||||
<div class="mypanel-icon"></div>
|
||||
<div class="mypanel-title">发电功率和辐照度</div>
|
||||
<div class="mypanel-line"></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-icon"></div>
|
||||
<div class="mypanel-title">负荷设备</div>
|
||||
<div class="mypanel-line"></div>
|
||||
<myrow style="margin-top: 10px">
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
|
||||
<div class="label-key">日用电电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日最大功率</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kW</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<div id="mychartLoad" style="width: 100%; height: calc(100% - 90px)"></div>
|
||||
</div>
|
||||
|
||||
<div class="mypanel" style="height: calc(35% - 10px)">
|
||||
<div class="mypanel-icon"></div>
|
||||
<div class="mypanel-title">充电设备</div>
|
||||
<div class="mypanel-line"></div>
|
||||
<myrow style="margin-top: 10px">
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
|
||||
<div class="label-key">日充电电量</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">kWh</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日充电次数</div>
|
||||
<div class="label-val">10</div>
|
||||
<div class="label-tail">次</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日充电收益</div>
|
||||
<div class="label-val">100</div>
|
||||
<div class="label-tail">元</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<div id="mychartCharge" style="width: 100%; height: calc(100% - 90px)"></div>
|
||||
</div>
|
||||
|
||||
<div class="mypanel" style="height: calc(35% - 10px)">
|
||||
<div class="mypanel-icon"></div>
|
||||
<div class="mypanel-title">告警信息</div>
|
||||
<div class="mypanel-line"></div>
|
||||
<myrow style="margin-top: 10px">
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
|
||||
<div class="label-key">日光伏设备告警</div>
|
||||
<div class="label-val">1</div>
|
||||
<div class="label-tail">次</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日储能设备告警</div>
|
||||
<div class="label-val">2</div>
|
||||
<div class="label-tail">次</div>
|
||||
</div>
|
||||
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
|
||||
<div class="label-key">日负荷设备告警</div>
|
||||
<div class="label-val">3</div>
|
||||
<div class="label-tail">次</div>
|
||||
</div>
|
||||
</myrow>
|
||||
<div id="mychartAlert" style="width: 100%; height: calc(100% - 90px)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user