bin/Release/assets/html/main.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: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>
  <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'), '系统总览')
  })

  const alertTrigger = document.getElementById('liveAlertBtn')
  if (alertTrigger) {
    alertTrigger.addEventListener('click', () => {
      G.alertMessage('danger', '这是一个错误提示信息!')
    })
  }

</script>

</html>