页面调整，添加状态检测

2025-09-15 21:01:40 +08:00 · 2022-03-14 09:03:15 +08:00
parent da4aaa0c91
commit 0ebbf5fc3a
20 changed files with 447 additions and 111 deletions
--- a/bookshelfplus-frontend/views/status.html
+++ b/bookshelfplus-frontend/views/status.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <%- include("./component/header.html"); %>
+    <style>
+        .info-disabled {
+            color: #999;
+        }
+    </style>
+</head>
+<body>
+    <%- include("./component/navbar.html"); %>
+    <main class="main">
+        <h1>
+            <%= title %>
+        </h1>
+        <div id="container">
+            <input id="checkBtn" type="button" value="检测" onclick="startCheck()">
+
+            <div class="parentNode">
+                <div class="childrenNode">
+                    <h3 class="title">网络连通性</h3>
+                    <span id="onlineStatus" class="info"></span>
+                </div>
+                <div>
+                    <h3 class="title">网络后台状态</h3>
+                    <span id="backendStatus" class="info"></span>
+                </div>
+                <div>
+                    <h3 class="title">网络数据库状态</h3>
+                    <span id="databaseStatus" class="info info-disabled">暂不提供检测</span>
+                </div>
+                <div>
+                    <h3 class="title">服务器时间与本机时间差</h3>
+                    <span id="timeOff" class="info">正在计算</span>
+                </div>
+            </div>
+        </div>
+    </main>
+    <%- include("./component/footer.html"); %>
+    <script>
+        var timeout = null;
+        $('.info').css("display", "none");
+
+        function startCheck() {
+            if (timeout) clearTimeout(timeout);
+
+            document.getElementById("checkBtn").value = "检测中";
+            document.getElementById("checkBtn").disabled = "disabled";
+            $('.info').html("loading...");
+            $('.info-disabled').html("暂不提供检测");
+            $('.info').css("display", "");
+
+            var i = 0, timeSpan = 300;
+            setTimeout(checkOnlineStatus, timeSpan * ++i);
+            setTimeout(checkBackendStatus, timeSpan * ++i);
+            setTimeout(checkTimeOff, timeSpan * ++i);
+            setTimeout(finishCheck, timeSpan * ++i);
+        }
+
+        function checkOnlineStatus() {
+            var onlineStatus = window.navigator.onLine;
+            $("#onlineStatus").text(onlineStatus ? "已连接" : "您当前未连接互联网");
+        }
+
+        function checkBackendStatus() {
+            var backendStatus = false;
+            getRequest("/status/getProcessCpu", {})
+                .then(function (response) {
+                    console.log("response.data", response.data);
+                    if (response.data == 0) {
+                        backendStatus = true;
+                    }
+                    $("#backendStatus").text("后台连接正常");
+                })
+                .catch(function (error) {
+                    $("#backendStatus").text("后台连接异常");
+                });
+        }
+
+        function checkTimeOff() {
+            var oldScriptDom = document.getElementById("timeCalibrationScript");
+            if (oldScriptDom) oldScriptDom.parentNode.removeChild(oldScriptDom);
+
+            oldScriptDom = document.createElement("script");
+            oldScriptDom.id = "timeCalibrationScript";
+            oldScriptDom.src = "./assets/javascripts/timeCalibration.js?" + Date.now() + "-" + new Date().getTime();
+            document.body.appendChild(oldScriptDom);
+        }
+
+        function finishCheck() {
+            document.getElementById("checkBtn").value = "重新检测";
+            document.getElementById("checkBtn").disabled = "";
+
+            if (timeout) clearTimeout(timeout);
+            timeout = setTimeout(startCheck, 5000);
+        }
+
+        // $(document).ready(function () {
+        //     startCheck();
+        // });
+    </script>
+</body>
+</html>