mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 03:09:24 +08:00
269 lines
9.6 KiB
HTML
269 lines
9.6 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" />
|
||
|
||
<script>
|
||
|
||
</script>
|
||
<style>
|
||
@font-face {
|
||
font-family: 优设标题黑;
|
||
src: url(./font/优设标题黑.ttf);
|
||
}
|
||
|
||
body {
|
||
background-image: url('../ui/bkg.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:100%;">
|
||
<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">
|
||
<!-- <button type="button" class="btn btn-danger btn-sm" id="liveAlertBtn" style="font-size: 20px;">显示警告框</button> -->
|
||
<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="alertBox"
|
||
style="position: absolute; right: 0; top: 120px; width: 600px; height: 0px; background: red; z-index: 10;">
|
||
</div>
|
||
|
||
<div style="position: absolute; left: calc(25%); top: 5px; width: calc(50%); height: 80px;
|
||
color: white; font-size: 40px; font-weight: 1000; text-align: center; ">
|
||
能源站监控与运行管理系统
|
||
</div>
|
||
|
||
</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)
|
||
G.cppNative.log("QWebChannel initialize finished.")
|
||
})
|
||
|
||
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'), '系统总览')
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
const alertTrigger = document.getElementById('liveAlertBtn')
|
||
if (alertTrigger) {
|
||
alertTrigger.addEventListener('click', () => {
|
||
G.alertMessage('danger', '这是一个错误提示信息!')
|
||
})
|
||
}
|
||
|
||
// 查询用户权限，确定页面显示内容
|
||
$(document).ready(function () {
|
||
setInterval(() => {
|
||
var now = new Date()
|
||
var dtStr = now.toLocaleString('zh-CN',
|
||
{
|
||
hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'
|
||
}).replace(/\//g, '-')
|
||
var weekday = now.toLocaleDateString('zh-CN', { weekday: "long" });
|
||
document.getElementById('currentTime').innerHTML = dtStr;
|
||
document.getElementById('currentWeekday').innerHTML = weekday
|
||
}, 1000);
|
||
|
||
// 测试： 不显示登录页，正式版本需要删除
|
||
//$("#loginPage").hide()
|
||
//onClickMenuBtn(document.getElementById('homePageBtn'), '系统总览')
|
||
|
||
const dtNow = new Date();
|
||
var dtStr = dtNow.toLocaleString('zh-CN',
|
||
{
|
||
hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'
|
||
}).replace(/\//g, '-')
|
||
G.cppNative.log(":==================================================" + dtStr)
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
</html> |