mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
234 lines
8.5 KiB
HTML
234 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>光储充站控系统</title>
|
||
|
||
<script src="./libs/jquery/jquery-3.7.1.min.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>
|
||
|
||
<link rel="stylesheet" href="./libs/DataTables-2.1.8/css/dataTables.dataTables.css" />
|
||
<script src="./libs/DataTables-2.1.8/js/dataTables.js"></script>
|
||
|
||
|
||
<script src="./libs/echarts/echarts.min.js"></script>
|
||
<script src="./js/qwebchannel.js"></script>
|
||
<script src="./js/myecharts.js"></script>
|
||
|
||
<script src="./js/common.js"></script>
|
||
<link rel="stylesheet" href="./css/mystyle.css" />
|
||
|
||
<style>
|
||
@font-face {
|
||
font-family: 优设标题黑;
|
||
src: url(./font/优设标题黑.ttf);
|
||
}
|
||
|
||
body {
|
||
background-image: url('../ui/bkg01.png');
|
||
background-size: 100% 100%;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
div {
|
||
user-select: none;
|
||
}
|
||
|
||
a {
|
||
display: inline-block;
|
||
/* 添加间距，使链接之间不会紧贴 */
|
||
padding-right: 8px;
|
||
/* color: #ffffff; */
|
||
}
|
||
|
||
table {
|
||
border: solid 2px #1c797a;
|
||
font-size: 14px;
|
||
color: white;
|
||
/* font-weight: bold; */
|
||
/* width: 100%; */
|
||
/* text-align: center; */
|
||
/* border-collapse: separate; */
|
||
/* border-spacing: 0; */
|
||
|
||
}
|
||
|
||
table thead {
|
||
background-color: #125c70;
|
||
}
|
||
|
||
table tbody {
|
||
/* font-size: 13px; */
|
||
}
|
||
|
||
tr th {
|
||
border-right: solid 1px gray;
|
||
border-bottom: solid 1px gray;
|
||
}
|
||
|
||
table tbody tr td {
|
||
/* min-height: 20px; */
|
||
/* line-height: 20px; */
|
||
/* height: 30px; */
|
||
/* border-right: solid 1px gray; */
|
||
/* border-bottom: solid 1px gray; */
|
||
border: solid 1px gray;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div
|
||
style="width:100%; height: calc(8vh); display: flex; justify-content: space-between; padding-top: 1.4%; font-family: 优设标题黑;">
|
||
<div class="myrow" style="height: 30px; color:white; font-size: 20px; float: left">
|
||
<div id="currentTime" style="width:250px; margin-left: 20px; "></div>
|
||
<div id="currentWeekday"></div>
|
||
</div>
|
||
|
||
<div style=" width:500px; height: 30px; display: flex;justify-content: flex-end;">
|
||
<div style=" width: 28px; height: 28px; background-color: #01b7d1; border-radius: 14px;"></div>
|
||
<div id='username' style="line-height:28px;color: white; font-size: 20px; font-weight: 500; margin-left: 10px; ">
|
||
</div>
|
||
<button
|
||
style="width:30px; height: 30px; background-color: transparent; border: none; background-image: url('../ui/exit.png'); background-size: cover; background-repeat: no-repeat;margin-left: 10px; margin-right: 10px;"
|
||
onclick="loginOut()"></button>
|
||
</div>
|
||
</div>
|
||
<div id="mypage" style="height: calc(92vh - 60px); overflow: hidden;">
|
||
</div>
|
||
<div style="background-color: #00496e; display: flex; justify-content: center;">
|
||
<button id="homePageBtn" class="btn btn-success" style="margin: 10px"
|
||
onclick="onClickMenuBtn(this, '系统总览')">系统总览</button>
|
||
<button class="btn btn-primary" style="margin: 10px" onclick="onClickMenuBtn(this, '运行监控')">运行监控</button>
|
||
<button class="btn btn-primary" style="margin: 10px" onclick="onClickMenuBtn(this, '预测管理')">预测管理</button>
|
||
<button class="btn btn-primary" style="margin: 10px" onclick="onClickMenuBtn(this, '统计分析')">统计分析</button>
|
||
<button class="btn btn-primary" style="margin: 10px" onclick="onClickMenuBtn(this, '系统管理')">系统管理</button>
|
||
<button class="btn btn-primary" style="margin: 10px" onclick="onClickMenuBtn(this, '安全管理')">安全管理</button>
|
||
<button class="btn btn-primary" style="margin: 10px" onclick="onClickMenuBtn(this, 'test')">测试页面</button>
|
||
</div>
|
||
|
||
<div id="loginPage" style="position: fixed; top:0px; left:0px; width: 100%; height: 100%; background-color: #07486f; background-image: url('../ui/bkgLogin.png'); background-size: 100% 100%;
|
||
background-attachment: fixed;">
|
||
<form id="loginForm" class="was-validated"
|
||
style="position: fixed; top:41.0%; left:43.6%; width:17.6%; height: 13%; ">
|
||
<input id="loginForm_name" type="text" class="form-control" required
|
||
style="height: 33%; background-color: #163b7d; color: white" />
|
||
<input id="loginForm_pwd" type="password" class="form-control" required
|
||
style="margin-top: 4.5%;height: 33%; background-color: #163b7d; color: white" />
|
||
</form>
|
||
<div id="loginMsg" style="position:fixed;top:52%;left:43.7%;width:17.5%;height:30px;color:crimson"></div>
|
||
<button id="loginFormOK"
|
||
style="position: fixed; top:54.7%; left:43.7%; width: 17.5%; height: 4%; background-color: #2a82e4; border-radius:5px; border: none; color: white; font-weight: 600;"
|
||
onclick="login()"> 登 录</button>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
// 第一个参数是QtWebEngine 挂载到前端全局环境中的 window.qt.webChannelTransport
|
||
new QWebChannel(qt.webChannelTransport, function (channel) {
|
||
// 在C++侧注册的对象名称为cppNative，所以channel.objects后面的名字是cppNative
|
||
G.cppNative = channel.objects.cppNative
|
||
// 连接QWeb的信号：signalNativeTextChanged是qt侧定义的signal
|
||
G.cppNative.signalNativeTextChanged.connect(function (text) { alert('signal: ' + text) })
|
||
// 连接信号：登录完成
|
||
G.cppNative.signalLongin.connect(onSignalLogin)
|
||
})
|
||
|
||
document.addEventListener("keydown", function (e) {
|
||
if (e.keyCode == 116) { window.location.reload() }
|
||
});
|
||
|
||
var activeMenuBtn = document.getElementById('homePageBtn')
|
||
function onClickMenuBtn(btn, id) {
|
||
if (activeMenuBtn) activeMenuBtn.className = 'btn btn-primary'
|
||
activeMenuBtn = btn
|
||
activeMenuBtn.className = 'btn btn-success'
|
||
|
||
G.loadPage(id)
|
||
}
|
||
|
||
|
||
function login() {
|
||
var username = $("#loginForm_name").val()
|
||
var passwd = $("#loginForm_pwd").val()
|
||
if (!username) {
|
||
$('#loginMsg').text('请输入用户名!')
|
||
return
|
||
}
|
||
if (!passwd) {
|
||
$('#loginMsg').text('请输入密码!')
|
||
return
|
||
}
|
||
$('#loginMsg').text('')
|
||
|
||
// 调用CPP接口
|
||
G.cppNative.login(username, passwd);
|
||
}
|
||
function loginOut() {
|
||
$("#loginPage").show()
|
||
}
|
||
|
||
var form = document.getElementById('loginForm')
|
||
var formBtnOk = document.getElementById('loginFormOK')
|
||
if (form && formBtnOk) {
|
||
// 监听表单的输入事件，检查表单的必填项是否完成输入，如果未完成，则确认按钮不可用
|
||
form.addEventListener('input', function () {
|
||
formBtnOk.disabled = !form.checkValidity()
|
||
if (!$("#loginForm_name").val()) {
|
||
$('#loginMsg').text('请输入用户名!')
|
||
} else if (!$("#loginForm_pwd").val()) {
|
||
$('#loginMsg').text('请输入密码!')
|
||
} else {
|
||
$('#loginMsg').text('')
|
||
}
|
||
})
|
||
}
|
||
|
||
function onSignalLogin(username, ecode) {
|
||
if (ecode != 0) {
|
||
const ErrCode = {
|
||
101: '数据库连接错误',
|
||
102: '数据库查询SQL错误',
|
||
103: '用户不存在',
|
||
104: '密码不正确'
|
||
}
|
||
var errmsg = ErrCode[ecode]
|
||
if (!errmsg) { errmsg = '错误码:' + ecode }
|
||
$('#loginMsg').text('登入失败，' + errmsg)
|
||
// $("#loginForm_name").val('')
|
||
// $("#loginForm_pwd").val('')
|
||
} else {
|
||
G.user.username = username
|
||
$('#username').text(username)
|
||
$("#loginPage").hide()
|
||
onClickMenuBtn(document.getElementById('homePageBtn'), '系统总览')
|
||
}
|
||
}
|
||
|
||
// 查询用户权限，确定页面显示内容
|
||
$(document).ready(function () {
|
||
setInterval(() => {
|
||
var now = new Date()
|
||
var year = now.getFullYear();
|
||
var month = ('0' + (now.getMonth() + 1)).slice(-2);
|
||
var day = ('0' + now.getDate()).slice(-2);
|
||
var hours = ('0' + now.getHours()).slice(-2);
|
||
var minutes = ('0' + now.getMinutes()).slice(-2);
|
||
var seconds = ('0' + now.getSeconds()).slice(-2);
|
||
var weekday = now.toLocaleDateString('zh-CN', { weekday: "long" });
|
||
|
||
var time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
||
document.getElementById('currentTime').innerHTML = time;
|
||
document.getElementById('currentWeekday').innerHTML = weekday
|
||
}, 1000);
|
||
|
||
// 测试： 不显示登录页，正式版本需要删除
|
||
$("#loginPage").hide()
|
||
onClickMenuBtn(document.getElementById('homePageBtn'), '系统总览')
|
||
})
|
||
</script>
|
||
|
||
</html> |