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-05-19 09:54:33 +08:00
commit 4a198a7271
589 changed files with 993786 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../libs/jquery/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="../libs/DataTables-2.1.8/css/dataTables.dataTables.css" />
<script src="../libs/DataTables-2.1.8/js/dataTables.js"></script>
<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>
<script type="text/javascript" src="../js/qwebchannel.js"></script>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css" />
<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>

80
bin/Release/assets/html/pages/安全管理.html Normal file
View File

@@ -0,0 +1,80 @@
<div class="mycolumn" style="padding: 10px">
<div class="myrow" style="height: 40px">
<button id="secpolicyBtn" class="btn btn-success btn-lg" style="width: 120px"
onclick="initSubpage('secpolicy')">安全策略</button>
<button id="secrecordBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
onclick="initSubpage('secrecord')">安全日志</button>
</div>
<hr style="margin: 10px 0 10px 0;" />
<div id="secpolicy" style="display: block">
<button class="btn btn-success" style="width: 90px" onclick="showPop('secpolicy')">新增</button>
<table id="secpolicyTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="secrecord" style="display: none">
<table id="secrecordTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="secpolicyPop" class="mask">
<div class="pop" style="height: 600px">
<p id="secpolicyPopTitle" class="pop_title"></p>
<form id="secpolicyForm" 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="secpolicyForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">事件类型*</span>
<select id="secpolicyForm_type" class="form-select">
<option value="1">系统</option>
<option value="2">光伏设备</option>
<option value="3">储能设备</option>
<option value="4">充电设备</option>
<option value="5">负荷设备</option>
<option value="0">其它</option>0
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">事件编号*</span>
<input id="secpolicyForm_code" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">安全级别</span>
<select id="secpolicyForm_level" class="form-select">
<option value="1">L1</option>
<option value="2">L2</option>
<option value="3">L3</option>
<option value="4">L4</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
<textarea id="secpolicyForm_describe" class="form-control" style="height: 80px"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">操作参数</span>
<input id="secpolicyForm_email" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="secpolicyForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('secpolicyForm_on', 'secpolicyForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="secpolicyForm_on">开</label>
<input id="secpolicyForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('secpolicyForm_on', 'secpolicyForm_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="secpolicyForm_off">关</label>
</div>
</div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="secpolicyFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px"
disabled>确定</button>
<button id="secpolicyFormCannel" class="btn btn-danger" style="width: 90px; margin-left: 20px"
onclick="G.showElement('secpolicyPop', false)">取消</button>
</div>
</div>
</div>
</div>

159
bin/Release/assets/html/pages/安全管理.js Normal file
View File

@@ -0,0 +1,159 @@
var htmlOptEdit = '<button class="btn btn-outline-primary btn-sm" style="width:80px" id="btnRowEdit">编辑</button>'
var htmlOptDel = '' //'<button class="btn btn-outline-danger btn-sm" style="width:80px; margin-left:8px;" id="btnRowDel">删除</button>'
function renderIsOpen(data, type, row) {
return data == 1 ? "启用" : "禁用"
}
var secpolicyTypeDef = {
1: "系统事件",
2: "光伏设备",
3: "储能设备",
4: "充电设备",
5: "负荷设备",
6: "其它"
}
function renderSecpolicy(data, type, row) {
var text = secpolicyTypeDef[data]
return text != undefined ? text : ''
}
var seclevelDef = { 1: "L1", 2: "L2", 3: "L3", 4: "L4" }
function renderSeclevel(data, type, row) {
var text = seclevelDef[data]
return text != undefined ? text : ''
}
var tableDef = {
secpolicy: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '事件名称', width: '150px' },
{ title: '事件类型', width: '120px', render: renderSecpolicy },
{ title: '事件编号', width: '100px', },
{ title: '安全级别', width: '100px', render: renderSeclevel },
{ title: '描述' },
{ title: '操作参数' },
{ title: '是否启用', width: '120px', render: renderIsOpen },
{ title: '创建时间', width: '180px' },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
},
],
header: ['sec_policy_id', 'name', 'type', 'code', 'level', 'describe', 'action', 'is_open', 'create_time'],
query: G.cppNative.querySecPolicyList,
insert: G.cppNative.insertSecPolicy,
update: G.cppNative.updateSecPolicy,
poptitle: "安全策略",
popkeys: ['', 'name', 'type', 'code', 'level', 'describe', 'action', 'is_open', ''],
},
secrecord: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '告警时间', width: '180px' },
{ title: '事件类型' },
{ title: '事件编号' },
{ title: '安全级别' },
{ title: '告警内容' },
{ title: '设备ID' },
{ title: '操作人员', width: '180px' },
{ title: '操作时间', width: '180px' },
{ title: '处理方式', width: '180px' },
{ title: '状态', width: '80px' },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return '' },
},
],
header: ['sec_policy_id', 'name', 'type', 'code', 'level', 'describe', 'action', 'is_open', 'create_time'],
query: G.cppNative.querySecRecordList,
insert: G.cppNative.insertSecRecord,
update: G.cppNative.updateSecRecord,
poptitle: "安全策略",
popkeys: ['', 'name', 'type', 'code', 'level', 'describe', 'action', 'is_open', ''],
}
}
// 初始化页面和表格的基础数据
async function initSubpage(id) {
G.clickSubpageBtn(id)
var tableInfo = tableDef[id]
// 表格已经初始化，重新加载数据
if (tableInfo.table) {
tableInfo.table.ajax.reload()
return
}
G.initTable(id, tableInfo)
G.initForm(id, popConfirm)
// 绑定行编辑
tableInfo.table.on('click', '#btnRowEdit', function () {
var row = tableInfo.table.row($(this).closest('tr'))
showPop(id, row.data())
})
}
function showPop(id, rowData) {
var tableInfo = tableDef[id]
tableInfo.rowData = (rowData && rowData.length > 0) ? rowData : null
var isEdit = (tableInfo.rowData) ? true : false
G.showElement(id + 'Pop', true)
var tableInfo = tableDef[id]
// 设置弹框的标题
$('#' + id + 'PopTitle').text((isEdit ? '编辑' : '新增') + tableInfo.poptitle)
// 设置弹框的参数信息
G.popSetParams(id, tableInfo.popkeys, tableInfo.rowData, callbackPopSetParams)
}
function callbackPopGetParams(id, key) {
}
// 用户弹窗确认
function popConfirm(id) {
var tableInfo = tableDef[id]
// 获取弹框的参数信息
var params = G.popGetParams(id, tableInfo.popkeys, tableInfo.rowData, callbackPopGetParams)
if (tableInfo.rowData) {
var dataId = tableInfo.rowData[0]
G.cppNative.log(id + " edit: params=" + JSON.stringify(params))
tableInfo.update(dataId, params).then(ret => {
var msg = '编辑' + tableInfo.poptitle + (ret == 0 ? '操作成功!' : '操作失败!')
if (ret == 0 && id == "role" && params.permission.length > 0) {
G.cppNative.updateRolePermission(dataId, params.permission).then(ret => {
G.showElement(id + 'Pop', false)
showPrompt(msg, ret)
tableInfo.table.ajax.reload()
})
} else {
G.showElement(id + 'Pop', false)
showPrompt(msg, ret)
tableInfo.table.ajax.reload()
}
})
} else {
// tableInfo.insert(params).then(ret => {
// var msg = '新增' + tableInfo.poptitle + (ret == 0 ? '操作成功!' : '操作失败!')
// G.showElement(id + 'Pop', false)
// showPrompt(msg, ret)
// tableInfo.table.ajax.reload()
// })
}
}
$(document).ready(function () {
initSubpage('secpolicy')
})

21
bin/Release/assets/html/pages/服务管理.html Normal file
View File

@@ -0,0 +1,21 @@
<div style="width: 100%">
<div>
<button class="btn btn-primary" style="width: 120px">服务管理</button>
</div>
<div style="width: 100%; height: 600px; background-color: #052f4d; margin-top: 20px; padding: 20px 20px 20px 20px">
<button class="btn btn-success" style="width: 90px">新增</button>
<button class="btn btn-danger" style="width: 90px">删除</button>
<!--
cell-border 每个单元格四边的边框
compact 减小 DataTable 默认样式使用的空白空间，提高屏幕上的信息密度（自 1.10.1 起）
hover 鼠标经过时的高亮显示
nowrap 禁用表格中内容的换行，因此单元格中的所有文本都在一行上（自 1.10.1 起）
order-column 高亮显示当前对表格数据进行排序的列
row-border 仅为每个单元格的顶部和底部添加边框（即为行）。注意 cell-border 和 row-border 互斥，不能一起使用。
stripe 行条纹
-->
<table id="myTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<!-- <button class="btn btn-primary" onclick="jsCallCpp()">调用CPP函数</button> -->
</div>

67
bin/Release/assets/html/pages/服务管理.js Normal file
View File

@@ -0,0 +1,67 @@
var htmlOpt = '<a href="javascript:void(0);" class="table-btn-edit">编辑</a>' + '<a href="javascript:void(0);" class="table-btn-del">删除</a>'
var htmlOptEdit =
'<a href="javascript:void(0);" class="table-btn-save" style="color:green">保存</a>' +
'<a href="javascript:void(0);" class="table-btn-cannel" style="color:red">取消</a>'
// 初始化页面和表格的基础数据
async function initSubPage(id) {
var subpage = subPageDef[id]
if (subpage.table) {
// 表格已经初始化，重新加载数据
subpage.table.ajax.reload()
return
}
}
$(document).ready(function () {
var tableOption = G.tableGetOption()
tableOption.columns = [
{ title: '编号', width: '80px' },
{ title: '名称', width: '150px' },
{ title: '型号' },
{ title: '类型' },
{ title: '厂家信息' },
{ title: '生产日期' },
{ title: '通讯方式' },
{
title: '操作',
width: '200px',
render: function (data, type, row) {
return htmlOpt
},
},
]
var myTable = $('#myTable').DataTable(tableOption)
$('div.gotopage').html('<b style="color:#7f8fa4">跳转至 </b><input id="searchNumber" style="width:80px"/><b style="color:#7f8fa4;"> 页</b>')
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['5214875222', 'C018', 'XH150', '', '', '2025-03-03', 'TCP', '', '', '', '', ''])
// myTable.row.add(['1', '2', '3', '', '', '', '', '', '', '', '', ''])
// myTable.row.add(['1', '2', '3', '', '', '', '', '', '', '', '', ''])
// myTable.row.add(['1', '2', '3', '', '', '', '', '', '', '', '', ''])
myTable.draw()
})

215
bin/Release/assets/html/pages/系统总览.html Normal file
View 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>

94
bin/Release/assets/html/pages/系统总览.js Normal file
View File

@@ -0,0 +1,94 @@
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.legend.data = ['发电电量', '入网电量']
optionBar.series = [
{ name: '发电电量', type: 'bar', data: [50, 28, 35, 18, 36, 27, 19] },
{ name: '入网电量', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
]
var mychartSolar = echarts.init(document.getElementById('mychartSolar'))
mychartSolar.setOption(optionBar)
optionBar.legend.data = ['充电电量', '放电电量']
optionBar.series = [
{ name: '充电电量', type: 'bar', data: [50, 28, 35, 18, 36, 27, 19] },
{ name: '放电电量', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
]
var mychartStorage = echarts.init(document.getElementById('mychartStorage'))
mychartStorage.setOption(optionBar)
optionBar.legend.data = ['用电电量', '最大功率']
optionBar.series = [
{ name: '用电电量', type: 'bar', data: [50, 28, 35, 18, 36, 27, 19] },
{ name: '最大功率', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
]
var mychartLoad = echarts.init(document.getElementById('mychartLoad'))
mychartLoad.setOption(optionBar)
optionBar.legend.data = ['充电电量', '充电次数', '充电收益']
optionBar.series = [
{ name: '充电电量', type: 'bar', data: [50, 28, 35, 18, 36, 27, 19] },
{ name: '充电次数', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
{ name: '充电收益', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
]
var mychartCharge = echarts.init(document.getElementById('mychartCharge'))
mychartCharge.setOption(optionBar)
optionBar.legend.data = ['光伏设备', '储能设备', '负荷设备']
optionBar.series = [
{ name: '光伏设备', type: 'bar', data: [50, 28, 35, 18, 36, 27, 19] },
{ name: '储能设备', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
{ name: '负荷设备', type: 'bar', data: [10, 32, 20, 33, 39, 13, 22] },
]
var mychartAlert = echarts.init(document.getElementById('mychartAlert'))
mychartAlert.setOption(optionBar)
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) {
var t = t0 + i * step * 1000
data[i] = { name: t, value: [t, Math.sin(i * 0.1) * (n - m) + m] }
}
return data
}
optionCurve.legend.data = ['发电功率', '辐照度']
optionCurve.series = [
{ name: '发电功率', type: 'line', hoverAnimation: false, smooth: false, symbolSize: 0, data: getRandomCurveData(100, 200) },
{ name: '辐照度', type: 'line', hoverAnimation: false, smooth: false, symbolSize: 0, data: getRandomCurveData(100, 200) },
]
var mychartRunning = echarts.init(document.getElementById('mychartRunning'))
mychartRunning.setOption(optionCurve)
window.onresize = () => {
mychartSolar.resize()
mychartStorage.resize()
mychartLoad.resize()
mychartCharge.resize()
mychartAlert.resize()
mychartRunning.resize()
}
function updatePageData() {
// 查询数据获取环境信息
$('#envIllumination').text('27.2 Lux')
$('#envWindspeed').text('1.5 m/s')
$('#envTemperture').text('27.8 ℃')
$('#envHumidity').text('37.6 %')
}
var timerId = null
document.currentScript.addEventListener('DOMNodeRemoved', () => {
G.cppNative.log('DOMNodeRemoved: 运行监控')
clearInterval(timerId);
});
$(document).ready(function () {
updatePageData()
// 定时器更新页面数据
timerId = setInterval(updatePageData, 1000)
})

326
bin/Release/assets/html/pages/系统管理.html Normal file
View File

@@ -0,0 +1,326 @@
<div class="mycolumn" style="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"
onclick="initSubpage('role')">角色管理</button>
<button id="permissionBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
onclick="initSubpage('permission')">
权限管理
</button>
<button id="deviceBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
onclick="initSubpage('device')">设备管理</button>
<button id="priceBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
onclick="initSubpage('price')">计费管理</button>
<button id="policyBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
onclick="initSubpage('policy')">策略管理</button>
<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">
<button class="btn btn-success" style="width: 90px" onclick="showPop('user')">新增</button>
<button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="updateTableUser()">查询</button>
<!--
cell-border 每个单元格四边的边框
compact 减小 DataTable 默认样式使用的空白空间，提高屏幕上的信息密度（自 1.10.1 起）
hover 鼠标经过时的高亮显示
nowrap 禁用表格中内容的换行，因此单元格中的所有文本都在一行上（自 1.10.1 起）
order-column 高亮显示当前对表格数据进行排序的列
row-border 仅为每个单元格的顶部和底部添加边框（即为行）。注意 cell-border 和 row-border 互斥，不能一起使用。
stripe 行条纹
-->
<table id="userTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="role" style="display: none">
<button class="btn btn-success" style="width: 90px" onclick="showPop('role')">新增</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>
<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>
<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>
<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>
<table id="policyTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="syslog" style="display: none">
<table id="syslogTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
</div>
<div id="userPop" class="mask">
<div class="pop" style="height: 600px">
<p id="userPopTitle" class="pop_title"></p>
<form id="userForm" 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="userForm_account" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">角色*</span>
<select id="userForm_role_id" class="form-select"></select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">姓名*</span>
<input id="userForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">性别</span>
<select id="userForm_gender" class="form-select">
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">年龄</span>
<input id="userForm_age" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">手机号</span>
<input id="userForm_phone" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">邮箱</span>
<input id="userForm_email" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="userForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('userForm_on', 'userForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="userForm_on">开</label>
<input id="userForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('userForm_on', 'userForm_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="userForm_off">关</label>
</div>
</div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="userFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
<button id="userFormCannel" class="btn btn-danger" style="width: 90px; margin-left: 20px"
onclick="G.showElement('userPop', false)">取消</button>
</div>
</div>
</div>
<div id="rolePop" class="mask">
<div class="pop" style="height: 800px">
<p id="rolePopTitle" class="pop_title"></p>
<form id="roleForm" 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="roleForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
<textarea id="roleForm_describe" class="form-control" style="height: 120px"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">权限</span>
<div class="form-control" style="height: 320px; display: flex; overflow: auto">
<ul id="roleForm_permission" style="text-align: left; list-style-type: none; padding-left: 10px">
<!-- <li><input class="form-check-input" type="checkbox" value="" />系统总览-查看</li> -->
</ul>
</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="roleForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('roleForm_on', 'roleForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="roleForm_on">开</label>
<input id="roleForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('roleForm_on', 'roleForm_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="roleForm_off">关</label>
</div>
</div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="roleFormOk" 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('rolePop', false)">取消</button>
</div>
</div>
</div>
<div id="permissionPop" class="mask">
<div class="pop" style="height: 600px; width: 1000px">
<p id="permissionPopTitle" class="pop_title"></p>
<form id="permissionForm" 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="permissionForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
<textarea id="permissionForm_describe" class="form-control" style="height: 120px"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="permissionForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('permissionForm_on', 'permissionForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="permissionForm_on">开</label>
<input id="permissionForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('permissionForm_on', 'permissionForm_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="permissionForm_off">关</label>
</div>
</div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="permissionFormOk" 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('permissionPop', false)">取消</button>
</div>
</div>
</div>
<div id="devicePop" class="mask">
<div class="pop" style="height: 500px">
<p id="devicePopTitle" class="pop_title"></p>
<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 />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
<input id="deviceForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">编号</span>
<input id="deviceForm_code" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">型号</span>
<input id="deviceForm_model" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">厂家</span>
<input id="deviceForm_factory" type="text" class="form-control" />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="deviceForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('deviceForm_on', 'deviceForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="deviceForm_on">开</label>
<input id="deviceForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('deviceForm_on', 'deviceForm_off', !this.checked)" />
<label class="btn btn-outline-danger" for="deviceForm_off">关</label>
</div>
</div>
</form>
<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>
</div>
</div>
</div>
<div id="pricePop" class="mask">
<div class="pop" style="height: 500px">
<p id="pricePopTitle" class="pop_title"></p>
<form id="priceForm" class="was-validated" style="margin: 0px 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="priceForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">类型*</span>
<select id="priceForm_type" class="form-select" required></select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
<textarea id="priceForm_describe" class="form-control" style="height: 120px"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="priceForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('priceForm_on', 'priceForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="priceForm_on">开</label>
<input id="priceForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('priceForm_on', 'priceForm_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="priceForm_off">关</label>
</div>
</div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="priceFormOk" 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('pricePop', false)">取消</button>
</div>
</div>
</div>
<div id="policyPop" class="mask">
<div class="pop" style="height: 600px">
<p id="policyPopTitle" class="pop_title"></p>
<form id="policyForm" 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="policyForm_name" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">类型*</span>
<select id="policyForm_type" class="form-select" required></select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">参数</span>
<input id="policyForm_value" type="text" class="form-control" required />
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
<textarea id="policyForm_describe" class="form-control" style="height: 120px"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
<div class="btn-group" style="margin-left: 5px">
<input id="policyForm_on" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('policyForm_on', 'policyForm_off', this.checked)" />
<label class="btn btn-outline-primary" for="policyForm_on">开</label>
<input id="policyForm_off" type="checkbox" class="btn-check" autocomplete="off"
onclick="G.switchSetStatus('policyForm_on', 'policyForm_off', !this.checked)" checked />
<label class="btn btn-outline-danger" for="policyForm_off">关</label>
</div>
</div>
</form>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button id="policyFormOk" 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('policyPop', false)">取消</button>
</div>
</div>
</div>
</div>
<div id="promptPop" class="mask">
<div class="pop" style="height: 240px">
<p id="promptTitle" class="pop_title"></p>
<p id="promptText" class="pop_content"></p>
<div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
<button class="btn btn-success" style="width: 90px; margin-right: 20px"
onclick="G.showElement('promptPop', false)">确定</button>
</div>
</div>
</div>
</div>

403
bin/Release/assets/html/pages/系统管理.js Normal file
View File

@@ -0,0 +1,403 @@
var pageSys = {
}
function renderIsOpen(data, type, row) { return data == 1 ? "启用" : "禁用" }
var roleTypeDef = {} // = { 1: "角色1", 2: "角色2" } // 调用接口查询获取角色定义
function renderRole(data, type, row) {
var text = roleTypeDef[data]
return text != undefined ? text : ''
}
// 需要调用接口查询获取策略类型定义
var policyTypeDef = { 1: "发电策略", 2: "储能策略", 3: "充电策略" }
function renderPolicy(data, type, row) {
var text = policyTypeDef[data]
return text != undefined ? text : ''
}
var deviceTypeDef = {
101: "光伏设备",
102: "充电设备",
103: "储能设备",
104: "汇流箱",
105: "逆变器",
106: "储能变流器",
107: "BMS",
108: "配电柜",
109: "电表",
201: "光照监测设备",
202: "风速监测设备",
203: "温湿度监测设备",
204: "视频监控",
205: "照明设备"
}
function renderDeviceType(data, type, row) {
var text = deviceTypeDef[data]
return text != undefined ? text : ''
}
var priceTypeDef = {
1: "充电计费"
}
function renderPriceType(data, type, row) {
var text = priceTypeDef[data]
return text != undefined ? text : ''
}
var syslogTypeDef = {
0: "其它",
1: "系统日志",
2: "操作员日志",
3: "设备日志",
4: "告警日志",
}
function renderSyslogType(data, type, row) {
var text = syslogTypeDef[data]
return text != undefined ? text : ''
}
var tableDef = {
user: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '账户', width: '150px' },
{ title: '姓名' },
{ title: '性别', render: function (data, type, row) { return data == 1 ? "男" : "女" } },
{ title: '年龄' },
{ title: '手机号' },
{ title: '邮箱' },
{ title: '是否启用', width: '120px', render: renderIsOpen },
{ title: '上次登录时间', width: '180px' },
{ title: '角色', render: renderRole },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
},
],
header: ['user_id', 'account', 'name', 'gender', 'age', 'phone', 'email', 'is_open', 'login_time', 'role_id'],
query: G.cppNative.queryUserList,
update: G.cppNative.updateUser,
insert: G.cppNative.insertUser,
poptitle: "人员",
popkeys: ['', 'account', 'name', 'gender', 'age', 'phone', 'email', 'is_open', '', 'role_id'],
},
role: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '名称', width: '150px' },
{ title: '描述' },
{ title: '是否启用', width: '120px', render: renderIsOpen },
{ title: '创建时间', width: '180px' },
{ title: '更新时间', width: '180px' },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
},
],
header: ['role_id', 'name', 'describe', 'is_open', 'create_time', 'update_time', 'update_by'],
query: G.cppNative.queryRoleList,
update: G.cppNative.updateRole,
insert: G.cppNative.insertRole,
poptitle: "角色",
popkeys: ['', 'name', 'describe', 'is_open', 'permission'],
},
permission: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '名称', width: '150px' },
{ title: '描述' },
{ 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 },
},
],
header: ['permission_id', 'name', 'describe', 'is_open', 'create_time', 'update_time', 'update_by'],
query: G.cppNative.queryPermissionList,
update: G.cppNative.updatePermission,
insert: G.cppNative.insertPermission,
poptitle: "权限",
popkeys: ['', 'name', 'describe', 'is_open'],
},
device: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '类型', width: '150px', render: renderDeviceType },
{ title: '名称', width: '150px' },
{ title: '编号' },
{ title: '型号' },
{ title: '厂家' },
{ 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 },
},
],
header: ['device_id', 'type', 'name', 'code', 'model', 'factory', 'is_open', 'create_time', 'update_time', 'update_by'],
query: G.cppNative.queryDeviceList,
update: G.cppNative.updateDevice,
insert: G.cppNative.insertDevice,
poptitle: "设备",
popkeys: ['', 'type', 'name', 'code', 'model', 'factory', 'is_open'],
},
price: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '类型', width: '120px', render: renderPriceType },
{ title: '名称', width: '150px' },
{ title: '描述' },
{ title: '是否启用', width: '120px', render: renderIsOpen },
{ title: '创建时间', width: '180px' },
{ title: '更新时间', width: '180px' },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
},
],
header: ['price_id', 'type', 'name', 'describe', 'is_open', 'create_time', 'update_time'],
query: G.cppNative.queryPriceList,
update: G.cppNative.updatePrice,
insert: G.cppNative.insertPrice,
poptitle: "计费",
popkeys: ['', 'type', 'name', 'describe', 'is_open'],
},
policy: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '名称', width: '150px' },
{ title: '类型', render: renderPolicy },
{ title: '参数' },
{ title: '描述' },
{ title: '是否启用', width: '120px', render: renderIsOpen },
{ title: '创建时间', width: '180px' },
{ title: '更新时间', width: '180px' },
{
title: '操作',
width: '200px',
render: function (data, type, row) { return htmlOptEdit + htmlOptDel },
},
],
header: ['policy_id', 'name', 'type', 'value', 'describe', 'is_open', 'create_time', 'update_time'],
query: G.cppNative.queryPolicyList,
update: G.cppNative.updatePolicy,
insert: G.cppNative.insertPolicy,
poptitle: "策略",
popkeys: ['', 'name', 'type', 'value', 'describe', 'is_open'],
},
syslog: {
table: null,
columns: [
{ title: 'ID', width: '80px' },
{ title: '类型', width: '100px', render: renderSyslogType },
{ title: '用户ID', width: '120px' },
{ title: '用户账户', width: '120px' },
{ title: '内容' },
{ title: '记录时间', width: '180px' }
],
header: ['log_id', 'type', 'user_id', 'user_acount', 'content', 'create_time'],
query: G.cppNative.querySyslogList,
}
}
var htmlOptEdit = '<button class="btn btn-outline-primary btn-sm" style="width:80px" 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 popRowdata = null
// 初始化页面和表格的基础数据
async function initSubpage(id) {
G.clickSubpageBtn(id)
if (id == 'user') {
// 查询获取角色列表，初始化下拉表单和表格角色id的映射
var elementSelectRole = document.getElementById('userForm_role_id')
elementSelectRole.innerHTML = ''
await G.cppNative.queryRoleList(0, 0).then(res => {
res.data.forEach(item => {
elementSelectRole.options.add(new Option(item.name, item.role_id))
roleTypeDef[item.role_id] = item.name
})
})
}
else if (id == 'role') {
}
else if (id == 'price') {
var elementSelectPriceType = document.getElementById('priceForm_type')
elementSelectPriceType.innerHTML = ''
await G.cppNative.queryPriceTypeList().then(res => {
res.forEach(item => {
elementSelectPriceType.options.add(new Option(item.name, item.id))
})
})
}
else if (id == 'policy') {
var elementSelectPolicyType = document.getElementById('policyForm_type')
elementSelectPolicyType.innerHTML = ''
for (var k in policyTypeDef) {
elementSelectPolicyType.options.add(new Option(policyTypeDef[k], k))
}
}
var tableInfo = tableDef[id]
// 表格已经初始化，重新加载数据
if (tableInfo.table) {
tableInfo.table.ajax.reload()
return
}
G.initTable(id, tableInfo)
G.initForm(id, popConfirm)
// 绑定行编辑
tableInfo.table.on('click', '#btnRowEdit', function () {
var row = tableInfo.table.row($(this).closest('tr'))
showPop(id, row.data())
})
}
function showPop(id, rowData) {
popRowdata = (rowData && rowData.length > 0) ? rowData : null
var isEdit = (popRowdata) ? true : false
G.showElement(id + 'Pop', true)
document.getElementById(id + 'FormOk').disabled = true
var tableInfo = tableDef[id]
// 设置弹框的标题
$('#' + id + 'PopTitle').text((isEdit ? '编辑' : '新增') + tableInfo.poptitle)
// 设置弹框的参数信息
G.popSetParams(id, tableInfo.popkeys, popRowdata, callbackPopSetParams)
if (id == 'user') {
G.popSetParamReadonly('user', 'account', isEdit)
}
}
function showPrompt(text, status) {
G.showElement('promptPop', true)
var promptText = $('#promptText')
promptText.text(text)
promptText.css('color', status == 0 ? 'green' : 'red')
}
function hidePrompt() {
G.showElement('promptPop', false)
}
function callbackPopSetParams(id, key, val) {
if (key == 'permission') {
var elementFormPermission = document.getElementById('roleForm_permission')
elementFormPermission.innerHTML = ""
if (popRowdata) {
var roleId = popRowdata[0]
// 查询权限列表， 更新编辑弹框的权限列表显示内容
G.cppNative.queryRolePermissionList(roleId).then(res => {
res.forEach(item => {
// <li><input class="form-check-input" type="checkbox" value="" />系统总览-查看</li>
var elemHtml = '<li><input class="form-check-input" type="checkbox" value="' + item.permission_id + '" ' +
(item.is_open == '1' ? 'checked' : '') + '/>' + item.name + '</li>'
elementFormPermission.innerHTML += elemHtml
})
})
} else {
G.cppNative.queryPermissionList(0, 0).then(res => {
res.data.forEach(item => {
var elemHtml = '<li><input class="form-check-input" type="checkbox" value="' + item.permission_id + '" ' +
(item.is_open == '1') + '/>' + item.name + '</li>'
elementFormPermission.innerHTML += elemHtml
})
})
}
// 不需要设置参数值
return undefined
}
else {
return val
}
}
function callbackPopGetParams(id, key) {
var val = undefined
if (key == 'permission') {
val = []
var elemtFormPermission = document.getElementById('roleForm_permission')
var elemtPermissionList = elemtFormPermission.querySelectorAll('input')
elemtPermissionList.forEach((elemt => {
val.push({ permission_id: elemt.value, is_open: (elemt.checked ? 1 : 0) })
}))
}
return val
}
// 用户弹窗确认
function popConfirm(id) {
// 获取数据表格操作对象
var mytable = $('#' + id + 'Table').DataTable()
// 获取弹框的参数信息
var tableInfo = tableDef[id]
G.cppNative.log(id + " edit: rowdata=" + JSON.stringify(popRowdata))
var params = G.popGetParams(id, tableInfo.popkeys, popRowdata, callbackPopGetParams)
if (Object.keys(params).length == 0) {
G.showElement(id + 'Pop', false)
return
}
var isEdit = popRowdata ? true : false
if (isEdit) {
var msg = '编辑' + tableInfo.poptitle
var dataId = popRowdata[0]
tableInfo.update(dataId, params).then(ret => {
if (ret == 0 && id == "role" && params.permission.length > 0) {
G.cppNative.updateRolePermission(dataId, params.permission).then(ret => {
G.showElement(id + 'Pop', false)
showPrompt(msg + (ret == 0 ? '操作成功!' : '操作失败!'), ret)
mytable.ajax.reload()
})
} else {
G.showElement(id + 'Pop', false)
showPrompt(msg + (ret == 0 ? '操作成功!' : '操作失败!'), ret)
mytable.ajax.reload()
}
})
} else {
var msg = '新增' + tableInfo.poptitle
tableInfo.insert(params).then(ret => {
G.showElement(id + 'Pop', false)
showPrompt(msg + (ret == 0 ? '操作成功!' : '操作失败!'), ret)
mytable.ajax.reload()
})
}
}
$(document).ready(function () {
initSubpage('user')
})

118
bin/Release/assets/html/pages/统计分析.html Normal file
View File

@@ -0,0 +1,118 @@
<div class="mycolumn" style="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>
<button id="storageBtn" class="btn btn-primary" style="width: 200px;margin-left: 10px"
onclick="initSubPage('storage')">储能设备运行分析</button>
<button id="chargeBtn" class="btn btn-primary" style="width: 200px;margin-left: 10px"
onclick="initSubPage('charge')">充电设备运行分析</button>
</div>
<hr style="margin: 10px 0 10px 0;" />
<!-- <div
style="width: 100%; height:calc(90vh - 130px); background-color: #052f4d; margin-top: 10px; padding: 10px 10px 10px 10px; border-radius: 12px;">
测试测试测试测试测试测试测试测试测试测试
<div style="display: flex; flex-direction: row; width: 100%; height: 350px; margin-top: 10px">
<div id="myEchart1" class="myechartbox" style="width: 890px"></div>
<div id="myEchart2" class="myechartbox" style="width: 890px"></div>
</div>
<div style="display: flex; flex-direction: row; width: 100%; height: 350px; margin-top: 10px">
<div id="myEchart3" class="myechartbox" style="width: 890px"></div>
<div id="myEchart4" class="myechartbox" style="width: 890px"></div>
</div>
</div> -->
<div id="solar" class="mypanelstat" style="height: 100%; display: block;">
<!-- <mycolumn style="width:100%; height: 100%;"> -->
<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 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 id="solarEchart2" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
<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 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 id="solarEchart4" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
</div>
<div id="storage" class="mypanelstat" style="height: 100%; display: none;">
<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 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 id="storageEchart2" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
<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 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 id="storageEchart4" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
</div>
<div id="charge" class="mypanelstat" style="height: 100%; display: none;">
<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 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 id="chargeEchart2" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
<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 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 id="chargeEchart4" style="width: 100%; height:calc(100% - 30px)"></div>
</div>
</myrow>
</div>
</div>

125
bin/Release/assets/html/pages/统计分析.js Normal file
View File

@@ -0,0 +1,125 @@
var pageDef = {
solar: {
charts: [
{ id: 'solarEchart1', echart: null, type: 'bar', series: ['发电电量', '入网电量'] },
{ id: 'solarEchart2', echart: null, type: 'bar', series: ['发电时长', '故障次数'] },
{ id: 'solarEchart3', echart: null, type: 'line', series: ['日电压', '日电流'] },
{ id: 'solarEchart4', echart: null, type: 'line', series: ['日功率'] }
],
},
storage: {
charts: [
{ id: 'storageEchart1', echart: null, type: 'bar', series: ['储能电量', '放电电量'] },
{ id: 'storageEchart2', echart: null, type: 'bar', series: ['储能时长', '放电时长', '故障次数'] },
{ id: 'storageEchart3', echart: null, type: 'line', series: ['日电压', '日电流'] },
{ id: 'storageEchart4', echart: null, type: 'line', series: ['日功率'] }
],
},
charge: {
charts: [
{ id: 'chargeEchart1', echart: null, type: 'bar', series: ['充电电量', '充电收益'] },
{ id: 'chargeEchart2', echart: null, type: 'bar', series: ['充电次数', '充电时长', '故障次数'] },
{ id: 'chargeEchart3', echart: null, type: 'line', series: ['日电压', '日电流'] },
{ id: 'chargeEchart4', echart: null, type: 'line', series: ['日功率'] }
],
}
}
var xdataBar = ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7']
var ydataBar = [
[30, 28, 35, 18, 36, 27, 19],
[10, 32, 20, 33, 39, 13, 22],
]
var curActiveId = 'solar'
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) }
}
return data
}
function getCurveData(a, b, n) {
var d = [[], []]
for (var i = 0; i < n; ++i) {
var v = RAND(a, b)
d[0].push(v)
d[1].push(v - RAND(50, 200))
}
return d
}
function RAND(a, b) {
return (Math.random() * (b - a) + a).toFixed(2)
}
// 点击子页面菜单按钮，切换子页面
function initSubPage(id) {
//if (curActiveId == id) return
// 切换子菜单按钮样式，旧选择按钮恢复样式
if (curActiveId && curActiveId != '') {
document.getElementById(curActiveId + 'Btn').className = 'btn btn-primary'
// 隐藏旧菜单对应的表格子页面
$('#' + curActiveId).hide()
}
curActiveId = id
// 切换子菜单按钮样式，新选择按钮设置样式
document.getElementById(curActiveId + 'Btn').className = 'btn btn-success btn-lg'
// 显示新菜单对应的表格子页面
$('#' + curActiveId).show()
var page = pageDef[id]
if (!page) {
alert("subpage [" + id + "] is undefined")
return
}
page.charts.forEach(item => {
if (item.type == 'bar') {
item.echart = initEchartBar(item.id, item.series)
for (var i = 0; i < item.series.length; ++i) {
//updateEchartBar(item.echart, i, xdataBar, ydataBar[i])
}
} 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)))
}
}
if (id == 'solar') {
if (item.id == 'solarEchart1') {
var d = getCurveData(400, 500, 7)
updateEchartBar(item.echart, 0, xdataBar, d[0])
updateEchartBar(item.echart, 1, xdataBar, d[1])
} else if (item.id == 'solarEchart2') {
var d = getCurveData(480, 780, 7)
updateEchartBar(item.echart, 0, xdataBar, d[0])
updateEchartBar(item.echart, 1, xdataBar, [0, 2, 0, 0, 3, 0, 1])
}
} else if (id == 'storage') {
} else if (id == 'charge') {
}
});
}
window.onresize = () => {
var page = pageDef[curActiveId]
charts.charts.forEach(item => {
if (item.echart) { item.echart.resize() }
})
}
$(document).ready(function () {
initSubPage("solar")
})

65
bin/Release/assets/html/pages/运行监控.html Normal file
View File

@@ -0,0 +1,65 @@
<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="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>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(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>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(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>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(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>
<div class="mycardbtn" style="height: 15%;" onclick="clickCardBtn(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>空闲: 0 个</div>
<div style="margin-left: 30px;">离线: 0 个</div>
<div style="margin-left: 30px;">故障: 0 个</div>
</myrow>
</mycolumn>
</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>
</myrow>
</div>

95
bin/Release/assets/html/pages/运行监控.js Normal file
View File

@@ -0,0 +1,95 @@
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>
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>'
var params = {
工作状态: '运行',
在线状态: '运行',
故障状态: '运行',
额定功率: '20 kW',
电压: '220 V',
电流: '30 A',
功率: '11 kW',
}
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)
}
function updateParam(deviceId, k, v) {
var id = deviceId + '_' + k
document.getElementById(id).innerHTML = v
}
var activeCardBtn = null
function clickCardBtn(btn, id) {
if (activeCardBtn) activeCardBtn.className = 'mycardbtn'
activeCardBtn = btn
activeCardBtn.className = 'mycardbtn-active'
}
function initDeviceList() {
}
// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 开启定时器更新页面数据
var timerId = null
// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 监听当前script元素的移除事件，清理定时器
document.currentScript.addEventListener('DOMNodeRemoved', () => {
G.cppNative.log('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')
clickCardBtn(document.getElementById('solarCardBtn'), 'solar')
timerId = setInterval(() => {
updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
}, 2000);
})