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

提交系统管理web端代码

Browse Source
This commit is contained in:
lixiaoyuan
2025-07-18 09:09:30 +08:00
parent 7b3f32f334
commit 387237c81c
74 changed files with 1997 additions and 918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
bin/Release/assets/html/pages/test.html
View File

@@ -1,34 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<div style="width: 100%; height: 100%; ;">
<script src="../libs/jquery/jquery-3.7.1.min.js"></script>
<div id="workspace" class="myrow">
<div class="mycard" style="width:320px">
<div class="myrow" style="margin-bottom: 20px; border: solid 1px salmon;">
<div style="width: 65px;height: 65px; background-color: #2991b6;border-radius: 10px;"></div>
<div class="mycol" style="margin-left: 10px; font-size:15px;">
<div> 编号111 </div>
<div style="font-size:15px;"> 名称 </div>
<div style="color: #08afff; font-size:14px; font-weight: bold;"> 设备类型 </div>
</div>
</div>
<link rel="stylesheet" href="../libs/DataTables-2.1.8/css/dataTables.dataTables.css" />
<script src="../libs/DataTables-2.1.8/js/dataTables.js"></script>
<div class="mycard-param">
<div class="mycard-param-key">工作状态: </div>
<div id="id" class="mycard-param-text">运行/空闲</div>
</div>
</div>
<link rel="stylesheet" href="../libs/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
<script src="../libs/bootstrap-5.3.3-dist/js/bootstrap.min.js"></script>
<script src="../libs/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<div class="mycard" style="width:320px">
<div class="myrow" style="margin-bottom: 20px; ">
<div style="width: 65px;height: 65px; background-color: #2991b6;border-radius: 10px;"></div>
<div class="mycol" style="margin-left: 10px; font-size:15px;">
<div> 编号222 </div>
<div style="font-size:15px;"> 名称 </div>
<div style="color: #08afff; font-size:14px; font-weight: bold;"> 设备类型 </div>
</div>
</div>
<div class="myrow">
<div style="width: calc(50% - 10px); border: solid gray; border-width: 0 1px 0 0;">
<div class="myrow" style="font-size:14px; margin-left: 10px;">
<div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
<div style="margin-left: 10px;">枪: #1</div>
<div class="status-ok" style="margin: 3px 0 0 30px; ">
</div>
</div>
<script type="text/javascript" src="../js/qwebchannel.js"></script>
<div class=" mycard-param">
<div class="mycard-param-key">状态: </div>
<div id="id" class="mycard-param-text">运行</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">电压: </div>
<div id="id" class="mycard-param-text">220 V</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">电流: </div>
<div id="id" class="mycard-param-text">10 A</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">功率: </div>
<div id="id" class="mycard-param-text">2.2 kW</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">温度: </div>
<div id="id" class="mycard-param-text">2.2 kW</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">SOC: </div>
<div id="id" class="mycard-param-text">20.6%</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">SOH: </div>
<div id="id" class="mycard-param-text">89.7%</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css" />
<div style="width: calc(50% - 10px); margin-left: 10px;">
<div class="myrow" style="font-size:14px; margin-left: 10px;">
<div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
<div style="margin-left: 10px;">枪: #2</div>
<div class="status-err" style="margin: 3px 0 0 30px; "></div>
</div>
<style>
.tablebox {
width: 100%;
height: 600px;
background-color: #052f4d;
margin-top: 20px;
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<iframe src="./index.html"></iframe>
<script src="./index.js"></script>
<>
</body>
</html>
<div class="mycard-param">
<div class="mycard-param-key">状态: </div>
<div id="id" class="mycard-param-text">运行</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">电压: </div>
<div id="id" class="mycard-param-text">220 V</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">电流: </div>
<div id="id" class="mycard-param-text">10 A</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">功率: </div>
<div id="id" class="mycard-param-text">2.2 kW</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">温度: </div>
<div id="id" class="mycard-param-text">2.2 kW</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">SOC: </div>
<div id="id" class="mycard-param-text">57.3%</div>
</div>
<div class="mycard-param">
<div class="mycard-param-key">SOH: </div>
<div id="id" class="mycard-param-text">93.2%</div>
</div>
</div>
</div>
</div>
</div>
<table id="myTable"></table>
</div>

149
bin/Release/assets/html/pages/test.js Normal file
View File

@@ -0,0 +1,149 @@
function addCardPanel(code, name, type, subList) {
var root = document.getElementById('workspace')
var card = document.createElement('div')
card.className = 'mycard'
card.setAttribute('id', code);
card.innerHTML =
`<div class="myrow" style="margin-bottom: 20px">
<div style="width: 65px;height: 65px; background-color: #2991b6;border-radius: 10px;"></div>
<div class="mycol" style="margin-left: 10px; font-size:15px;">
<div> ${code} </div>
<div style="font-size:15px;"> ${name} </div>
<div style="color: #08afff; font-size:14px; font-weight: bold;"> ${type} </div>
</div>
</div>`
// '<div class="mycard-param">'
// '<div class="mycard-param-key">工作状态: </div>'
// '<div id="id" class="mycard-param-text">运行/空闲</div>'
// '</div>'
if (subList && subList.length > 1) {
card.innerHTML +=
`<div class="myrow">
<div id="${code}_${subList[0]}" style="width: calc(50% - 10px); border: solid gray; border-width: 0 1px 0 0;">
<div class="myrow" style="font-size:14px; margin-left: 10px;">
<div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
<div style="margin-left: 10px;">#${subList[0]}</div>
<div class="status-ok" style="margin: 3px 0 0 30px; "></div>
</div>
</div>
<div id="${code}_${subList[1]}" style="width: calc(50% - 10px); margin-left: 10px;">
<div class="myrow" style="font-size:14px; margin-left: 10px;">
<div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
<div style="margin-left: 10px;">#${subList[1]}</div>
<div class="status-err" style="margin: 3px 0 0 30px; "></div>
</div>
</div>
</div>`
}
root.appendChild(card)
return card
}
function addCardParam(cardid, subid, key, text) {
var paramid = cardid + (subid ? ("_" + subid) : "") + "_" + key
param = document.createElement('div')
param.className = 'mycard-param'
param.innerHTML = `<div class="mycard-param-key">${key}: </div>
<div id="${paramid}" class="mycard-param-text">${text}</div>`
if (subid) {
$('#' + cardid + '_' + subid).append(param)
} else {
$('#' + cardid).append(param)
}
}
function setCardParam(cardid, subid, key, text) {
var paramid = cardid + (subid ? ("_" + subid) : "") + "_" + key
$("#" + paramid).text(text);
}
addCardPanel('编号1', '名称', '设备类型')
addCardParam('编号1', null, "电压", "220 V");
setCardParam('编号1', null, "电压", "290 V");
addCardPanel('编号2', '名称', '设备类型', ['1', '2'])
addCardParam('编号2', '1', "电压", "200 V");
addCardParam('编号2', '1', "电流", "10 V");
addCardParam('编号2', '2', "电压", "220 V");
setCardParam('编号2', '1', "电压", "210 V");
// var dataTablesOption = {
// data: [],
// columns: [],
// scrollY: "800px",
// bSort: false,
// aLengthMenu: [10, 20, 50, 100], //设置每页显示数据条数的下拉选项
// displayLength: 20, //每页初始显示最大记录数量
// // 设置：表格（t）、分页数据条数（l）、搜索框（f）、表格信息（i）、分页（p）、加载信息（r）
// //dom: '<"table-ext"<"item"f><"item"l><"item"i><"item"p>>rt',
// language: {
// lengthMenu: '每页显示 _MENU_ 条记录',
// sZeroRecords: '对不起，查询不到任何相关数据',
// sInfo: '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录',
// sInfoEmtpy: '找不到相关数据',
// sInfoFiltered: '数据表中共为 _MAX_ 条记录)',
// processing: '正在加载中...',
// search: '结果中搜索: ',
// paginate: { sPrevious: ' 上一页 ', sNext: ' 下一页 ', },
// },
// }
// var htmlOptEdit = '<button class="btn btn-outline-primary btn-sm" style="width:80px; height: 28px;" id="btnRowEdit">编辑</button>'
// var htmlOptHref = '<a href="javascript:void(0);" class="table-btn-edit">编辑</a>' +
// // '<a href="javascript:void(0);" class="table-btn-del">删除</a>' +
// '<a href="javascript:void(0);" class="">采购</a>' +
// '<a href="javascript:void(0);" class="">入库</a>' +
// '<a href="javascript:void(0);" class="">销售</a>' +
// '<a href="javascript:void(0);" class="">出库</a>'
// dataTablesOption.columns = [
// { title: '编号', width: '50px' },
// { title: '产品名称', width: '150px' },
// { title: '规格型号', width: '150px' },
// { title: '类别', width: '150px' },
// { title: '库存量', width: '80px' },
// { title: '采购总量', width: '80px' },
// { title: '入库总量', width: '80px' },
// { title: '销售总量', width: '80px' },
// { title: '出库总量', width: '80px' },
// { title: '异常总量', width: '80px' },
// { title: '异常说明' },
// {
// title: '操作',
// width: '300px',
// render: function (data, type, row) { return htmlOptEdit },
// },
// ]
// var table = $('#myTable').DataTable(dataTablesOption)
// var rowid = 0;
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.draw()

2
bin/Release/assets/html/pages/安全管理.html
View File

@@ -1,4 +1,4 @@
<div class="mycolumn" style="padding: 10px">
<div class="mycol" style="width:100%;padding: 10px">
<div class="myrow" style="height: 40px">
<button id="secpolicyBtn" class="btn btn-success btn-lg" style="width: 120px"
onclick="initSubpage('secpolicy')">安全策略</button>

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

@@ -1,177 +1,174 @@
<div class="myrow" style="width:100%; 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-icon"></div>
<div class="mypanel-title">运行状况</div>
<div class="mypanel-line"></div>
<div class="mypanel " style="height: calc(30% - 10px)">
<myrow style="width: 100%; height: calc(100% - 40px); margin-top: 10px">
<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">123</div>
<div class="label-val-lg">0</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="mycol" style="width: 70%; margin-left: 5px">
<div class="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 id="windTurbineNum" class="label-val">0</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 id="solarNum" class="label-val">0</div>
<div class="label-tail">台</div>
</div>
</myrow>
<myrow style="width: 100%; height: 33%; margin-top: 5px">
</div>
<div class="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 id="electricTotal" class="label-val">0</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 id="electricInTotal" class="label-val">0</div>
<div class="label-tail">kWh</div>
</div>
</myrow>
<myrow style="width: 100%; height: 33%; margin-top: 5px">
</div>
<div class="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 id="incomeTotal" class="label-val">0</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 id="carbonReduction" class="label-val">0</div>
<div class="label-tail">吨</div>
</div>
</myrow>
</mycolumn>
</myrow>
</div>
</div>
</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="mypanel-title myline-lb">光伏设备</div>
<div class="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-val">0</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-val">0</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-val">0</div>
<div class="label-tail">元</div>
</div>
</myrow>
</div>
<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="mypanel-title myline-lb">储能设备</div>
<div class="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-val">0</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-val">0</div>
<div class="label-tail">kWh</div>
</div>
</myrow>
</div>
<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="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="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;">
<img src="./res/icon-brightness.png"
style="width:50px; height: 50px; object-fit: fill; background-color: #f69b5250;">
<!-- <div style="width:50px; height: 50px; background-color: #f69b5250;"></div> -->
<div class="mycol" style="margin-left: 10px; margin-top: 5px;">
<div>光照</div>
<div id="envIllumination">--</div>
</mycolumn>
</div>
</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;">
<img src="./res/icon-windspeed.png"
style="width:50px; height: 50px; object-fit: fill; background-color: #9bd80150;">
<!-- <div style="width:50px; height: 50px; background-color: #9bd80150;"></div> -->
<div class="mycol" style="margin-left: 10px; margin-top: 5px;">
<div>风速</div>
<div id="envWindspeed">--</div>
</mycolumn>
</div>
</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;">
<img src="./res/icon-temperature.png"
style="width:50px; height: 50px; object-fit: fill; background-color: #3dfefa50;">
<!-- <div style="width:50px; height: 50px; background-color: #3dfefa50;"></div> -->
<div class="mycol" style="margin-left: 10px; margin-top: 5px;">
<div>环境温度</div>
<div id="envTemperture">--</div>
</mycolumn>
</div>
</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;">
<img src="./res/icon-humidity.png"
style="width:50px; height: 50px; object-fit: fill; background-color: #d83d6c50;">
<!-- <div style="width:50px; height: 50px; background-color: #d83d6c50;"></div> -->
<div class="mycol" style="margin-left: 10px; margin-top: 5px;">
<div>环境湿度</div>
<div id="envHumidity">--</div>
</mycolumn>
</div>
</div>
</myrow>
<img src="./res/overview.png" style="width: 100%; height: calc(100% - 50px); object-fit: fill;"> </img>
</div>
<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-icon"></div>
<div class="mypanel-title">发电功率和辐照度</div>
<div class="mypanel-line"></div>
<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-icon"></div>
<div class="mypanel-title">负荷设备</div>
<div class="mypanel-line"></div>
<myrow style="margin-top: 10px">
<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">
<div class="label-key">日用电电量</div>
<div class="label-val">100</div>
<div class="label-val">0</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-val">0</div>
<div class="label-tail">kW</div>
</div>
</myrow>
</div>
<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="mypanel-title myline-lb">充电设备</div>
<div class="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-val">0</div>
<div class="label-tail">kWh</div>
</div>
<div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
@@ -181,18 +178,16 @@
</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-val">0</div>
<div class="label-tail">元</div>
</div>
</myrow>
</div>
<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="mypanel-title myline-lb">告警信息</div>
<div class="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>
@@ -208,7 +203,7 @@
<div class="label-val">3</div>
<div class="label-tail">次</div>
</div>
</myrow>
</div>
<div id="mychartAlert" style="width: 100%; height: calc(100% - 90px)"></div>
</div>
</div>

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

@@ -1,4 +1,4 @@
optionBar.xAxis.data = ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7']
optionBar.xAxis.data = ['03/01', '03/02', '03/03', '03/04', '03/05', '03/06', '03/07']
optionBar.legend.data = ['发电电量', '入网电量']
optionBar.series = [
{ name: '发电电量', type: 'bar', data: [50, 28, 35, 18, 36, 27, 19] },
@@ -47,9 +47,12 @@ function getRandomCurveData(m, n) {
var t0 = Date.parse('2025-03-01 00:00:00')
var step = 600
var N = 86400 / step
var y = 500
for (var i = 0; i <= N; ++i) {
var t = t0 + i * step * 1000
data[i] = { name: t, value: [t, Math.sin(i * 0.1) * (n - m) + m] }
//var y = Math.sin(i * 0.1) * (n - m) + m
y = Math.floor((y + RAND(0, 50) - 25) * 100) / 100
data[i] = { name: t, value: [t, y] }
}
return data
}
@@ -78,6 +81,13 @@ function updatePageData() {
$('#envWindspeed').text('1.5 m/s')
$('#envTemperture').text('27.8 ℃')
$('#envHumidity').text('37.6 %')
// 查询获取统计信息
$('#windTurbineNum').text('8')
$('#solarNum').text('207')
$('#electricTotal').text('153.21')
$('#electricInTotal').text('120.35')
$('#carbonReduction').text('36.17')
}
var timerId = null

42
bin/Release/assets/html/pages/系统管理.html
View File

@@ -1,4 +1,5 @@
<div class="mycolumn" style="padding: 10px">
<div class="mycol" style="width:100%;padding: 10px">
<div class="myrow" style="height: 40px">
<button id="userBtn" class="btn btn-success btn-lg" style="width: 120px" onclick="initSubpage('user')">人员管理</button>
<button id="roleBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
@@ -16,6 +17,7 @@
<button id="syslogBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
onclick="initSubpage('syslog')">系统日志</button>
</div>
<hr style="margin: 10px 0 10px 0;" />
<div id="user" style="display: block">
@@ -35,26 +37,31 @@
<div id="role" style="display: none">
<button class="btn btn-success" style="width: 90px" onclick="showPop('role')">新增</button>
<button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="">查询</button>
<table id="roleTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="permission" style="display: none">
<button class="btn btn-success" style="width: 90px" onclick="showPop('permission')">新增</button>
<button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="">查询</button>
<table id="permissionTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="device" style="display: none">
<button class="btn btn-success" style="width: 90px" onclick="showPop('device')">新增</button>
<button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="">查询</button>
<table id="deviceTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="price" style="display: none">
<button class="btn btn-success" style="width: 90px" onclick="showPop('price')">新增</button>
<button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="">查询</button>
<table id="priceTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="policy" style="display: none">
<button class="btn btn-success" style="width: 90px" onclick="showPop('policy')">新增</button>
<button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="">查询</button>
<table id="policyTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
@@ -196,7 +203,18 @@
<form id="deviceForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">类型*</span>
<input id="deviceForm_type" type="text" class="form-control" required />
<select id="deviceForm_type" class="form-select" required>
<option value="101">逆变器</option>
<option value="102">汇流箱</option>
<option value="103">光伏板</option>
<option value="104">风力发电机</option>
<option value="105">储能变流器</option>
<option value="106">储能电池</option>
<option value="107">BMS</option>
<option value="108">充电桩</option>
<option value="109">充电枪</option>
<option value="110">集中器</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
@@ -229,7 +247,23 @@
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="deviceFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
<button class="btn btn-danger" style="width: 90px; margin-left: 20px"
onclick="G.showElement('device', false)">取消</button>
onclick="G.showElement('devicePop', false)">取消</button>
</div>
</div>
</div>
<div id="deviceAttrPop" class="mask">
<div class="pop" style="height: 500px">
<p id="devicePopTitle" class="pop_title">设备属性设置</p>
<form id="deviceAttrForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
<div class="input-group mb-3"></div>
<div class="input-group mb-3"></div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="deviceAttrFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px"
disabled>确定</button>
<button class="btn btn-danger" style="width: 90px; margin-left: 20px"
onclick="G.showElement('deviceAttrPop', false)">取消</button>
</div>
</div>
</div>
@@ -313,6 +347,8 @@
</div>
</div>
<div id="promptPop" class="mask">
<div class="pop" style="height: 240px">
<p id="promptTitle" class="pop_title"></p>

109
bin/Release/assets/html/pages/系统管理.js
View File

@@ -19,20 +19,29 @@ function renderPolicy(data, type, row) {
}
var deviceTypeDef = {
101: "光伏设备",
102: "充电设备",
103: "储能设备",
104: "汇流箱",
105: "逆变器",
106: "储能变流器",
1: "变压器",
2: "配电柜",
3: "电表",
4: "门禁",
5: "空调",
6: "照明",
7: "消防",
8: "光照监测设备",
9: "风速监测设备",
10: "温湿度监测设备",
11: "烟感监测设备",
12: "水浸传感器",
13: "视频监控",
101: "逆变器",
102: "汇流箱",
103: "光伏板",
104: "风力发电机",
105: "储能变流器",
106: "储能电池",
107: "BMS",
108: "配电柜",
109: "电表",
201: "光照监测设备",
202: "风速监测设备",
203: "温湿度监测设备",
204: "视频监控",
205: "照明设备"
108: "充电桩",
109: "充电枪",
110: "集中器",
}
function renderDeviceType(data, type, row) {
var text = deviceTypeDef[data]
@@ -146,14 +155,13 @@ var tableDef = {
{ title: '是否启用', width: '120px', render: renderIsOpen },
{ title: '创建时间', width: '180px' },
{ title: '更新时间', width: '180px' },
{ title: '更新人', width: '180px' },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
render: function (data, type, row) { return htmlOptEdit + htmlOptAttrs },
},
],
header: ['device_id', 'type', 'name', 'code', 'model', 'factory', 'is_open', 'create_time', 'update_time', 'update_by'],
header: ['device_id', 'type', 'name', 'code', 'model', 'factory', 'is_open', 'create_time', 'update_time', 'attrs'],
query: G.cppNative.queryDeviceList,
update: G.cppNative.updateDevice,
insert: G.cppNative.insertDevice,
@@ -225,9 +233,9 @@ var tableDef = {
}
}
var htmlOptEdit = '<button class="btn btn-outline-primary btn-sm" style="width:80px" id="btnRowEdit">编辑</button>'
var htmlOptEdit = '<button class="btn btn-primary btn-sm" style="width:80px; height:28px;" id="btnRowEdit">编辑</button>'
var htmlOptDel = '' //'<button class="btn btn-outline-danger btn-sm" style="width:80px; margin-left:8px;" id="btnRowDel">删除</button>'
var htmlOptAttrs = '<button class="btn btn-outline-warning btn-sm" style="width:80px; margin-left:8px;" id="btnRowAttrs">属性设置</button>'
var htmlOptAttrs = '<button class="btn btn-primary btn-sm" style="width:80px; height:28px; margin-left:8px;" id="btnRowAttrs">属性设置</button>'
var popRowdata = null
@@ -280,6 +288,11 @@ async function initSubpage(id) {
var row = tableInfo.table.row($(this).closest('tr'))
showPop(id, row.data())
})
tableInfo.table.on('click', '#btnRowAttrs', function () {
var row = tableInfo.table.row($(this).closest('tr'))
showPopDeviceAttr(row.data())
})
}
@@ -302,6 +315,46 @@ function showPop(id, rowData) {
}
}
var deviceAttrKeyDef = {
commType: "通讯方式",
ip: "通讯地址",
port: "通讯端口",
isclient: "客户端",
}
// 显示设备的属性编辑弹窗，属性字段格式为JSON: attrs="{}"
function showPopDeviceAttr(rowData) {
G.showElement('deviceAttrPop', true)
var device_id = rowData[0]
var deviceType = rowData[1]
var deviceTypeStr = deviceTypeDef[deviceType]
var attrsStr = rowData[9]
var attrs = { commType: "", ip: "", port: 0, isclient: 1 }
try {
attrs = JSON.parse(attrsStr);
} catch (error) {
}
var elemtForm = document.getElementById('deviceAttrForm')
elemtForm.innerHTML =
`<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">编号</span>
<input type="text" class="form-control" value='${device_id}' disabled />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">设备类型</span>
<input type="text" class="form-control" value='${deviceTypeStr}' disabled />
</div>`
for (k in attrs) {
var title = deviceAttrKeyDef[k]
elemtForm.innerHTML += `<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">${title}</span>
<input type="text" class="form-control" value='${attrs[k]}' />
</div>`
}
}
function showPrompt(text, status) {
G.showElement('promptPop', true)
var promptText = $('#promptText')
@@ -358,6 +411,17 @@ function callbackPopGetParams(id, key) {
return val
}
function updateTableData(id) {
var info = tableDef[id]
var queryFunc = info.query
if (!queryFunc) return
queryFunc(1, 10).then((res) => {
})
}
// 用户弹窗确认
function popConfirm(id) {
// 获取数据表格操作对象
@@ -398,6 +462,15 @@ function popConfirm(id) {
}
}
// 设置设备类型下拉列表
var elementSelectDeviceType = document.getElementById('deviceForm_type')
elementSelectDeviceType.innerHTML = ''
for (k in deviceTypeDef) {
elementSelectDeviceType.options.add(new Option(deviceTypeDef[k], k))
}
$(document).ready(function () {
initSubpage('user')
//G.initTable('user', tableDef['user'])
})

78
bin/Release/assets/html/pages/统计分析.html
View File

@@ -1,4 +1,4 @@
<div class="mycolumn" style="padding: 10px; overflow: hidden">
<div class="mycol" style="width:100%; height:100%; padding: 10px; overflow: hidden">
<div class="myrow" style="height: 40px">
<button id="solarBtn" class="btn btn-success btn-lg" style="width: 200px"
onclick="initSubPage('solar')">光伏设备运行分析</button>
@@ -22,97 +22,75 @@
</div> -->
<div id="solar" class="mypanelstat" style="height: 100%; display: block;">
<!-- <mycolumn style="width:100%; height: 100%;"> -->
<myrow style="height: 50%; ">
<!-- <div class="mycol" style="width:100%; height: 100%;"> -->
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">电量与收益分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">电量与收益分析</div>
<div id="solarEchart1" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">运行状态分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">运行状态分析</div>
<div id="solarEchart2" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
<myrow style="height: 50%; ">
</div>
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">日电压/电流分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">日电压/电流分析</div>
<div id="solarEchart3" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">日功率分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">日功率分析</div>
<div id="solarEchart4" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
</div>
</div>
<div id="storage" class="mypanelstat" style="height: 100%; display: none;">
<myrow style="height: 50%; ">
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">储能放电分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">储能放电分析</div>
<div id="storageEchart1" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">运行状态分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">运行状态分析</div>
<div id="storageEchart2" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
<myrow style="height: 50%; ">
</div>
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">日电压电流分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">日电压电流分析</div>
<div id="storageEchart3" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">日功率分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">日功率分析</div>
<div id="storageEchart4" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
</div>
</div>
<div id="charge" class="mypanelstat" style="height: 100%; display: none;">
<myrow style="height: 50%; ">
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">充电与收益分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">充电与收益分析</div>
<div id="chargeEchart1" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">运行状态分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">运行状态分析</div>
<div id="chargeEchart2" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
<myrow style="height: 50%; ">
</div>
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">日电压电流分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">日电压电流分析</div>
<div id="chargeEchart3" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-icon"></div>
<div class="mypanel-title">日功率分析</div>
<!-- <div class="mypanel-line"></div> -->
<div class="mypanel-title myline-l">日功率分析</div>
<div id="chargeEchart4" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
</div>
</div>
</div>

9
bin/Release/assets/html/pages/统计分析.js
View File

@@ -39,8 +39,11 @@ function getRandomCurveData(m, n) {
var t0 = Date.parse('2025-03-01 00:00:00')
var step = 600
var N = 86400 / step
var y = 500;
for (var i = 0; i < N; ++i) {
data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
// data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
y = Math.floor((y + RAND(0, 50) - 25) * 100) / 100
data[i] = { x: t0 + i * step * 1000, y: y }
}
return data
}
@@ -56,7 +59,7 @@ function getCurveData(a, b, n) {
}
function RAND(a, b) {
return (Math.random() * (b - a) + a).toFixed(2)
return a + Math.random() * (b - a)
}
// 点击子页面菜单按钮，切换子页面
@@ -89,7 +92,7 @@ function initSubPage(id) {
} else if (item.type == 'line') {
item.echart = initEchartCurve(item.id, item.series)
for (var i = 0; i < item.series.length; ++i) {
updateEchartCurve(item.echart, i, getRandomCurveData(100 * (i + 1), 200 * (i + 1)))
updateEchartCurve(item.echart, i, G.getRandDataDay(100 * (i + 1), 200 * (i + 1)))
}
}

188
bin/Release/assets/html/pages/运行监控.html
View File

@@ -1,65 +1,157 @@
<div class="mypanelstat" style="height: calc(100% - 20px); margin: 10px">
<myrow style="height: 100%">
<div class="mycolumn" style="width: 18%; height: 100%; padding-top: 10px; ">
<div id="solarCardBtn" class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(this, 'solar')">
<div class="mypanelstat" style="width:100%; height: calc(100% - 20px); margin: 10px">
<div class="myrow" style="height: 100%">
<div class="mycol" style="width: 300px; height: 100%; padding-top: 10px; ">
<div id="solarCardBtn" class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'solar')">
<div class="mypanel-title">光伏系统</div>
<mycolumn style="margin-top: 20px; height:60%">
<div>光伏板数量: 100 个</div>
<myrow style="font-size: 14px; margin-top: 10px;">
<div>空闲: 0 个</div>
<div style="margin-left: 30px;">离线: 0 个</div>
<div style="margin-left: 30px;">故障: 0 个</div>
</myrow>
</mycolumn>
<div class="mycol" style="margin-top: 20px; height:60%">
<div id="solarDeviceNum">光伏板数量: 100 个</div>
<div class="myrow" style="font-size: 14px; margin-top: 10px;">
<div id="solarIdleNum">空闲: 0 个</div>
<div id="solarOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
<div id="solarFaultNum" style="margin-left: 30px;">故障: 0 个</div>
</div>
</div>
</div>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(this, 'storage')">
<div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'storage')">
<div class="mypanel-title">储能系统</div>
<mycolumn style="margin-top: 20px; height:60%">
<div>储能电池数量: 10 个</div>
<myrow style="font-size: 14px; margin-top: 10px;">
<div>空闲: 0 个</div>
<div style="margin-left: 30px;">离线: 0 个</div>
<div style="margin-left: 30px;">故障: 0 个</div>
</myrow>
</mycolumn>
<div class="mycol" style="margin-top: 20px; height:60%">
<div id="storageDeviceNum">储能电池数量: 0 个</div>
<div class="myrow" style="font-size: 14px; margin-top: 10px;">
<div id="storageIdleNum">空闲: 0 个</div>
<div id="storageOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
<div id="storageFaultNum" style="margin-left: 30px;">故障: 0 个</div>
</div>
</div>
</div>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(this, 'charge')">
<div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'charge')">
<div class="mypanel-title">充电系统</div>
<mycolumn style="margin-top: 20px; height:60%">
<div>充电桩数量: 50 个</div>
<myrow style="font-size: 14px; margin-top: 10px;">
<div>空闲: 0 个</div>
<div style="margin-left: 30px;">离线: 0 个</div>
<div style="margin-left: 30px;">故障: 0 个</div>
</myrow>
</mycolumn>
<div class="mycol" style="margin-top: 20px; height:60%">
<div id="chargeDeviceNum">充电桩数量: 0 个</div>
<div class="myrow" style="font-size: 14px; margin-top: 10px;">
<div id="chargeIdleNum">空闲: 0 个</div>
<div id="chargeOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
<div id="chargeFaultNum" style="margin-left: 30px;">故障: 0 个</div>
</div>
</div>
</div>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(this, 'load')">
<div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'load')">
<div class="mypanel-title">负荷系统</div>
<mycolumn style="margin-top: 20px; height:60%">
<div>照明设备数量: 100 个</div>
<myrow style="font-size: 14px; margin-top: 10px;">
<div>空闲: 0 个</div>
<div style="margin-left: 30px;">离线: 0 个</div>
<div style="margin-left: 30px;">故障: 0 个</div>
</myrow>
</mycolumn>
<div class="mycol" style="margin-top: 20px; height:60%">
<div id="loadDeviceNum">照明设备数量: 0 个</div>
<div class="myrow" style="font-size: 14px; margin-top: 10px;">
<div id="loadIdleNum">空闲: 0 个</div>
<div id="loadOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
<div id="loadFaultNum" style="margin-left: 30px;">故障: 0 个</div>
</div>
</div>
</div>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(this, 'security')">
<div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'security')">
<div class="mypanel-title">安防系统</div>
<mycolumn style="margin-top: 20px; height:60%">
<div>摄像头数量: 50 个</div>
<myrow style="font-size: 14px; margin-top: 10px;">
<div class="mycol" style="margin-top: 20px; height:60%">
<div id="securityDeviceNum">摄像头数量: 0 个</div>
<div class="myrow" style="font-size: 14px; margin-top: 10px;">
<div>空闲: 0 个</div>
<div style="margin-left: 30px;">离线: 0 个</div>
<div style="margin-left: 30px;">故障: 0 个</div>
</myrow>
</mycolumn>
</div>
</div>
</div>
</div>
<div style="width: 82%; height: 100%; overflow: auto">
<div id="deviceList" class="myrow" style="width: 100%; height: 100%; flex-wrap: wrap;"> </div>
<div class="myrow" style="width: calc(100% - 300px); height: 100%; ">
<div id="deviceList" class="myrow" style="width: 100%; height: 100%; flex-wrap: wrap; overflow-y: auto;">
<!-- <div class="mycard">
<div class='btn-group' style="width: 80px; position: absolute; left: 100px; top: 30px;">
<input id="_off" type="checkbox" class="btn-check" //
onclick="G.switchSetStatus('_on', '_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="_off" style="padding: 0;">关</label>
<input id="_on" type="checkbox" class="btn-check" //
onclick="G.switchSetStatus('_on', '_off', this.checked)" />
<label class="btn btn-outline-success" for="_on" style="padding: 0;">开</label>
</div>
</div> -->
</div>
<div id="envpanel" style="width: 300px; height: 100%; display: block">
<div class="mycol" style="width: 250px; height: 100%; padding: 12px;">
<div style="font-size: 16px; font-weight: 600;">环境温湿度信息</div>
<div class="mypanel-line"></div>
<div style="margin-top: 12px;">
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; border: solid #00fffb; border-radius: 8px 8px 0 0; border-width: 1px 1px 0 1px; background-color: #115d73; height: 40px;line-height: 40px;">
<div style="width: 33%; text-align: center;">点位</div>
<div style="width: 33%; text-align: center;">温度</div>
<div style="width: 33%; text-align: center;">湿度</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; border: solid #00fffb; border-radius: 0 0 8px 8px; border-width: 0 1px 1px 1px; height: 40px; line-height: 40px;">
<div style="width: 33%; text-align: center;">#1</div>
<div style="width: 33%; text-align: center;">20℃</div>
<div style="width: 33%; text-align: center;">20%</div>
</div>
</div>
<div style="font-size: 16px; font-weight: 600; margin-top: 30px;">消防信息</div>
<div class="mypanel-line"></div>
<div style="margin-top: 12px; border: 1px solid #00fffb; border-radius: 8px; ">
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; border-radius: 8px 8px 0 0; background-color: #115d73; height: 40px;line-height: 40px;">
<div style="width: 50%; text-align: center;">点位</div>
<div style="width: 50%; text-align: center;">烟感状态</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
<div class="myrow"
style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
<div style="width: 50%; text-align: center;">#1</div>
<div style="width: 50%; text-align: center;">正常</div>
</div>
</div>
</div>
</div>
</div>
</myrow>
<div id="deviceSettingPop" class="mask" style="display: none;">
<div
style="margin: 200px auto;width:800px; padding: 20px; height: 500px; background-color: #012036f0; border:4px solid #14dcfb; ">
<div class="myline-b" style="color:white;">控制功能</div>
<div style="display: flex; justify-content: center; width: 100%; margin-top: 100px;">
<button class="btn btn-success" style="width:80px; color: white;"
onclick="G.showElement('deviceSettingPop', false)">确定</button>
<button class="btn btn-default" style="width:80px; color: white; margin-left: 50px;"
onclick="G.showElement('deviceSettingPop', false)">取消</button>
</div>
</div>
</div>
</div>
</div>

320
bin/Release/assets/html/pages/运行监控.js
View File

@@ -1,64 +1,244 @@
var mapDeviceTypeDef = new Map([
['1', '变压器'],
['2', '配电柜'],
['3', '电表'],
['4', '门禁'],
['5', '空调'],
['6', '照明'],
['7', '消防'],
['8', '光照监测设备'],
['9', '风速监测设备'],
['10', '温湿度监测设备'],
['11', '烟感监测设备'],
['12', '水浸传感器'],
['13', '视频监控'],
['101', '逆变器'],
['102', '汇流箱'],
['103', '光伏板'],
['104', '风力发电机'],
['105', '储能变流器'],
['106', '储能电池'],
['107', 'BMS'],
['108', '充电桩'],
['109', '充电枪'],
['110', '集中器'],
])
function getDeviceTypeId(name) {
var res = ''
mapDeviceTypeDef.forEach((v, k) => { if (v == name) { res = k } })
return res;
}
function getDeviceTypeName(id) {
var res = ''
mapDeviceTypeDef.forEach((v, k) => { if (k == id) { res = v } })
return res;
}
function addCard(deviceId, type, name, code) {
var a = '<div class="myrow">' +
'< div style = "width: 100px;height: 70px; background-color: #2991b6;border-radius: 10px;" > </div>' +
'< div class="mycolumn" style = "margin-left: 10px;" > ' +
'<div>3201001234567890</div>' +
'<div>逆变器1 </div>' +
'<div style="color: #08afff; font-size:14px; font-weight: bold;">逆变器 </div>' +
'</div >' +
'</div >'
var elementDeviceList = document.getElementById('deviceList')
// <div class="mycard" ></div>
function addDeviceCardPanel(root, deviceid, name, type, subList) {
var card = document.createElement('div')
card.className = 'mycard'
card.innerHTML = '<div class="myrow" style="margin-bottom: 20px">' +
'<div style="width: 100px;height: 70px; background-color: #2991b6;border-radius: 10px;"></div>' +
'<div class="mycolumn" style="margin-left: 10px;">' +
'<div>' + code + '</div><div>' + name + '</div>' +
'<div style="color: #08afff; font-size:14px; font-weight: bold;">' + type + '</div>' +
'</div></div>'
card.setAttribute('id', deviceid) // 设置id
if (type == "充电桩") { card.style.width = '320px' }
card.innerHTML =
`<div class="myrow" style="margin-bottom: 20px">
<div style="width:64px; height:64px; background-color: #2991b6;border-radius: 10px;"></div>
<div class="mycol" style="margin-left: 10px; font-size:15px;">
<div> ${deviceid} </div>
<div style="font-size:15px;"> ${name} </div>
<div style="color: #08afff; font-size:14px; font-weight: bold;"> ${type} </div>
</div>
</div>`
var params = {
工作状态: '运行',
在线状态: '运行',
故障状态: '运行',
额定功率: '20 kW',
电压: '220 V',
电流: '30 A',
功率: '11 kW',
// 充电桩区分1号枪和2号枪
if (subList && subList.length > 1) {
card.innerHTML +=
`<div class="myrow">
<div id="${deviceid}_${subList[0]}" style="width: calc(50% - 10px); border: solid gray; border-width: 0 1px 0 0;">
<div class="myrow" style="font-size:14px; margin-left: 10px;">
<div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
<div style="margin-left: 10px;">#${subList[0]}</div>
</div>
</div>
<div id="${deviceid}_${subList[1]}" style="width: calc(50% - 10px); margin-left: 10px;">
<div class="myrow" style="font-size:14px; margin-left: 10px;">
<div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
<div style="margin-left: 10px;">#${subList[1]}</div>
</div>
</div>
</div>`
}
Object.keys(params).forEach((k) => {
var id = deviceId + '_' + k
card.innerHTML += ('<div class="mycard-param">' +
'<div class="mycard-param-title">' + k + '</div>' + '<div id="' + id + '" class="mycard-param-text">' + params[k] + '</div>' +
'</div>')
});
elementDeviceList.appendChild(card)
root.appendChild(card)
return card
}
function updateParam(deviceId, k, v) {
var id = deviceId + '_' + k
document.getElementById(id).innerHTML = v
/// ===========================================================
// 创建设备卡片的参数信息
// @param deviceid: 设备 ID
// @param subid: 参数子分类 ID，如充电桩的充电枪的编号：1号枪，2号枪
// @param key: 参数名称
// @param key: 参数值
// 说明： 每个参数值的 element 的 id 设置为：{deviceid}_{subid}_{key}
function addDeviceCardParam(deviceid, subid, key, text) {
var elemtid = deviceid + (subid ? ("_" + subid) : "") + "_" + key
param = document.createElement('div')
param.className = 'mycard-param'
param.innerHTML = `<div class="mycard-param-key">${key}: </div>
<div id="${elemtid}" class="mycard-param-text">${text}</div>`
if (subid) {
$('#' + deviceid + '_' + subid).append(param)
} else {
$('#' + deviceid).append(param)
}
if (text == '离线' | text == '故障') {
$("#" + elemtid).css("color", "red")
}
}
/// ===========================================================
// 设置设备卡片的参数值
// @param deviceid: 设备ID
// @param subid: 参数子分类ID，如充电桩的充电枪的编号：1号枪，2号枪
// @param key: 参数名称
// @param key: 参数值
// 说明： 每个参数值的 element 的 id 设置为：{deviceid}_{subid}_{key}
function setDeviceCardParam(deviceid, subid, key, text) {
var elemtid = deviceid + (subid ? ("_" + subid) : "") + "_" + key
$("#" + elemtid).text(text);
// 特殊状态设置颜色区分显示
if (text == '离线' | text == '故障') {
$("#" + elemtid).css("color", "red")
}
}
var activeCardBtn = null
function clickCardBtn(btn, id) {
function onClickCardBtn(btn, id) {
if (activeCardBtn) activeCardBtn.className = 'mycardbtn'
activeCardBtn = btn
activeCardBtn.className = 'mycardbtn-active'
var deviceType = id
initDeviceList(deviceType)
}
function initDeviceList() {
function creatElementSwitch(id, x, y) {
var eswitch = document.createElement('div')
eswitch.className = 'btn-group'
eswitch.setAttribute('style', `margin-left: 5px; width: 60px; height: 26px; position:absolute; left: ${x}px; top: ${y}px`);
eswitch.innerHTML = `
<input id="${id}_off" type="checkbox" class="btn-check"
onclick="G.switchSetStatus('${id}_on', '${id}_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="${id}_off" style="padding: 0;">关</label>
<input id="${id}_on" type="checkbox" class="btn-check"
onclick="G.switchSetStatus('${id}_on', '${id}_off', this.checked)" />
<label class="btn btn-outline-success" for="${id}_on" style="padding: 0;">开</label>`
return eswitch;
}
function creatElementCard() {
var card = document.createElement('div')
card.className = 'mycard'
return card;
}
function createCardVideo(name) {
var elemt = document.createElement('div')
elemt.className = 'mycard'
elemt.style.width = '320px'
elemt.innerHTML = `
<div>${name}</div>
<div style='width=90%; height:84%; margin-top:10px; border: 5px solid black;'>
<div style='width:100%; height:100%; line-height:200px; text-align: center; background-color: gray'> 无信号</div>
</div>`
return elemt;
}
function initDeviceList(deviceType) {
var elemtDeviceList = document.getElementById('deviceList')
elemtDeviceList.innerHTML = ''
var subList = [null]
if (deviceType === 'security') {
document.getElementById('envpanel').style.display = 'block'
elemtDeviceList.appendChild(createCardVideo('监控点1'))
elemtDeviceList.appendChild(createCardVideo('监控点2'))
elemtDeviceList.appendChild(createCardVideo('监控点3'))
elemtDeviceList.appendChild(createCardVideo('监控点4'))
elemtDeviceList.appendChild(createCardVideo('监控点5'))
elemtDeviceList.appendChild(createCardVideo('监控点6'))
elemtDeviceList.appendChild(createCardVideo('监控点7'))
elemtDeviceList.appendChild(createCardVideo('监控点8'))
elemtDeviceList.appendChild(createCardVideo('监控点9'))
elemtDeviceList.appendChild(createCardVideo('监控点1'))
elemtDeviceList.appendChild(createCardVideo('监控点2'))
elemtDeviceList.appendChild(createCardVideo('监控点3'))
elemtDeviceList.appendChild(createCardVideo('监控点4'))
elemtDeviceList.appendChild(createCardVideo('监控点5'))
elemtDeviceList.appendChild(createCardVideo('监控点6'))
elemtDeviceList.appendChild(createCardVideo('监控点7'))
elemtDeviceList.appendChild(createCardVideo('监控点8'))
elemtDeviceList.appendChild(createCardVideo('监控点9'))
return
}
var reqDeviceType = ['101', '102', '103']
if (deviceType === 'storage') {
reqDeviceType = ['101', '102', '106']
}
else if (deviceType === 'charge') {
subList = ['1', '2']
reqDeviceType = ['108']
}
else {
document.getElementById('envpanel').style.display = 'none'
}
// 查询数据库，获取设备信息
//G.cppNative.queryDevice({ type: reqDeviceType }).then((res) => {
G.cppNative.getDeviceInfo(reqDeviceType).then((res) => {
res.forEach(function (item, index) {
var deviceType = getDeviceTypeName(item.type)
addDeviceCardPanel(elemtDeviceList, item.device_id, item.name, deviceType, subList)
var params = {
在线状态: (item.online == 0) ? '离线' : '在线',
工作状态: (item.status == 0) ? '空闲' : '运行',
故障状态: (item.err == 0) ? '正常' : '故障',
额定功率: '-- kW',
电压: '-- V',
电流: '-- A',
功率: '-- kW',
}
if (subList) {
subList.forEach((subid) => {
Object.keys(params).forEach((k) => {
addDeviceCardParam(item.device_id, subid, k, params[k]);
});
})
}
var elemtPanel = document.getElementById(item.device_id)
elemtPanel.innerHTML += `<button
class="btn btn-outline-primary btn-sm"
style="height:30px; margin: 5px 0 0 10px"
onclick="onDeviceSetting(${item.device_id})">
参数设置
</button>`
})
})
}
function onDeviceSetting(deviceid) {
G.showElement('deviceSettingPop', true)
}
// ====================================================================================================
// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 开启定时器更新页面数据
var timerId = null
@@ -69,27 +249,43 @@ document.currentScript.addEventListener('DOMNodeRemoved', () => {
clearInterval(timerId);
});
$(document).ready(function () {
addCard('1', '逆变器', '逆变器1', '1111')
addCard('2', '汇流箱', '汇流箱', '2222')
addCard('3', '光伏板', '光伏板1', '3333')
addCard('4', '光伏板', '光伏板2', '4444')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
addCard('5', '光伏板', '光伏板3', '5555')
onClickCardBtn(document.getElementById('solarCardBtn'), 'solar')
// timerId = setInterval(() => {
// updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
// }, 2000);
clickCardBtn(document.getElementById('solarCardBtn'), 'solar')
G.cppNative.getDeviceInfo([0]).then((res) => {
var nums = {
'103': { num: 0, numIdle: 0, numOffline: 0, numFault: 0 },
'106': { num: 0, numIdle: 0, numOffline: 0, numFault: 0 },
'108': { num: 0, numIdle: 0, numOffline: 0, numFault: 0 },
}
res.forEach(function (item, index) {
var deviceType = item.type + ''
if (nums[deviceType]) {
nums[deviceType].num += 1
if (item.status == 0) nums[deviceType].numIdle += 1
if (item.online == 0) nums[deviceType].numOffline += 1
if (item.err != 0) nums[deviceType].numFault += 1
}
})
$('#solarDeviceNum').text('光伏板数量: ' + nums['103'].num + ' 个')
$('#solarIdleNum').text('空闲: ' + nums['103'].numIdle + ' 个')
$('#solarOfflineNum').text('离线: ' + nums['103'].numOffline + ' 个')
$('#solarFaultNum').text('故障: ' + nums['103'].numFault + ' 个')
$('#storageDeviceNum').text('储能电池数量: ' + nums['106'].num + ' 个')
$('#storageIdleNum').text('空闲: ' + nums['106'].numIdle + ' 个')
$('#storageOfflineNum').text('离线: ' + nums['106'].numOffline + ' 个')
$('#storageFaultNum').text('故障: ' + nums['106'].numFault + ' 个')
$('#chargeDeviceNum').text('充电桩数量: ' + nums['108'].num + ' 个')
$('#chargeIdleNum').text('空闲: ' + nums['108'].numIdle + ' 个')
$('#chargeOfflineNum').text('离线: ' + nums['108'].numOffline + ' 个')
$('#chargeFaultNum').text('故障: ' + nums['108'].numFault + ' 个')
})
timerId = setInterval(() => {
updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
}, 2000);
})

30
bin/Release/assets/html/pages/预测管理.html Normal file
View File

@@ -0,0 +1,30 @@
<div class="mycol" style="width:100%; height:100%; padding: 10px; overflow: hidden">
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 100%; height: calc(100% - 20px); margin: 10px; position:relative">
<div class="myrow">
<div class="mypanel-title myline-l">光伏发电预测</div>
<div style="margin: 0px 0 0 50px; font-size: 12px; font-weight:bold; color:#a6a6a6; ">
当天累计发电量 <span style="font-size: 16px; font-weight:bold; color:white"> 1520 kW/h</span>
</div>
</div>
<div id="solarEchart" style="width: 100%; height:calc(100% - 30px); "></div>
</div>
</div>
<div class="myrow" style="height: 50%; ">
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-title myline-l">充电负荷预测</div>
<!-- <div class="mypanel-line"></div> -->
<div id="chargeEchart" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
<div class="mypanel" style="width: 50%; height: calc(100% - 20px); margin: 10px; ">
<div class="mypanel-title myline-l">用电负荷预测</div>
<!-- <div class="mypanel-line"></div> -->
<div id="loadEchart" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</div>
<table id="myTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>

45
bin/Release/assets/html/pages/预测管理.js Normal file
View File

@@ -0,0 +1,45 @@
var chartDef = [
{ id: 'solarEchart', echart: null, type: 'bar', series: ['预测功率', '实时功率', '预测发电量', '实时发电量'] },
{ id: 'chargeEchart', echart: null, type: 'bar', series: ['预测功率', '实时功率'] },
{ id: 'loadEchart', echart: null, type: 'line', series: ['预测功率', '实时功率'] },
]
function RAND(a, b) {
return (a + Math.random() * (b - a))
}
function getRandomCurveData(m, n) {
var data = []
var t0 = Date.parse('2025-03-01 00:00:00')
var step = 600
var N = 86400 / step
for (var i = 0; i < N; ++i) {
//data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
data[i] = { x: t0 + i * step * 1000, y: RAND(m, n) }
}
return data
}
function getRandomData1(m, n) {
var data = []
var t0 = Date.parse('2025-03-01 00:00:00')
var step = 600
var N = 86400 / step
var y = 500;
for (var i = 0; i < N; ++i) {
//data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
y = Math.floor((y + RAND(0, 50) - 25) * 100) / 100
data[i] = { x: t0 + i * step * 1000, y: y }
}
return data
}
chartDef.forEach((item) => {
item.echart = initEchartCurve(item.id, item.series)
updateEchartCurve(item.echart, 1, getRandomData1(100, 200))
for (var i = 0; i < item.series.length; ++i) {
updateEchartCurve(item.echart, i, getRandomData1(300 * (i + 1), 400 * (i + 1)))
}
})