|
@@ -40,7 +40,7 @@
|
|
|
<div class="content-list-left flex-col">
|
|
|
<h4>可用性实时监测情况</h4>
|
|
|
<div class="content-list-body">
|
|
|
- <ul>
|
|
|
+ <ul id="messageUlOne">
|
|
|
<li class="content-list-body-tit">
|
|
|
<div class="w50"><h5>站点名称</h5></div>
|
|
|
<div class="w25"><h5>监测时间</h5></div>
|
|
@@ -50,7 +50,6 @@
|
|
|
<div class="w50"><span class="h-span" th:text="${item.siteName}"></span></div>
|
|
|
<div class="w25"><span class="h-span" th:text="${item.monitorTime}"></span></div>
|
|
|
<div class="w25"><span class="h-span" th:text="${item.status}"></span></div>
|
|
|
-
|
|
|
<img class="table-triangle-top" src="img/triangle.png">
|
|
|
<img class="table-triangle-btm" src="img/triangle.png">
|
|
|
</li>
|
|
@@ -60,7 +59,7 @@
|
|
|
<div class="content-list-right flex-col">
|
|
|
<h4>本日无法访问网站列表</h4>
|
|
|
<div class="content-list-body">
|
|
|
- <ul>
|
|
|
+ <ul id="messageUlTwo">
|
|
|
<li class="content-list-body-tit">
|
|
|
<div class="w50"><h5>站点名称</h5></div>
|
|
|
<div class="w25"><h5>最近一次检测时间</h5></div>
|
|
@@ -82,5 +81,45 @@
|
|
|
<!-- 正文 End -->
|
|
|
</div>
|
|
|
<!-- 内容End -->
|
|
|
+ <script type="text/javascript" src="/js/socket.js"></script>
|
|
|
+ <script>
|
|
|
+ socket.onMessage = function (res) {
|
|
|
+ let message = []
|
|
|
+ message = JSON.parse(res).data
|
|
|
+ // 处理接收到的消息
|
|
|
+ document.getElementById("messageUlOne").innerHTML = "<li class=\"content-list-body-tit\">\n" +
|
|
|
+ " <div class=\"w50\"><h5>站点名称</h5></div>\n" +
|
|
|
+ " <div class=\"w15\"><h5>监测时间</h5></div>\n" +
|
|
|
+ " <div class=\"w15\"><h5>网站状态</h5></div>\n" +
|
|
|
+ " </li>";
|
|
|
+ for (let i = 0; i < message.length; i++) {
|
|
|
+ document.getElementById("messageUlOne").innerHTML += "<li>\n" +
|
|
|
+ ` <div class="w50"><span>${message[i].siteName}</span></div>\n` +
|
|
|
+ ` <div class="w15"><span>${message[i].monitorTime}</span></div>\n` +
|
|
|
+ ` <div class="w15"><span>${message[i].status}</span></div>\n` +
|
|
|
+ ` <img class="table-triangle-top" src="img/triangle.png"/>\n` +
|
|
|
+ ` <img class="table-triangle-btm" src="img/triangle.png"/>\n` +
|
|
|
+ ` </li>`
|
|
|
+ }
|
|
|
+ };
|
|
|
+ socket.onMessage1 = function (res) {
|
|
|
+ let message = []
|
|
|
+ message = JSON.parse(res).data
|
|
|
+ // 处理接收到的消息
|
|
|
+ document.getElementById("messageUlTwo").innerHTML = "<li class=\"content-list-body-tit\">\n" +
|
|
|
+ " <div class=\"w20\"><h5>站点名称</h5></div>\n" +
|
|
|
+ " <div class=\"w10 j-left\"><span>最近一次检测时间</span></div>\n" +
|
|
|
+ " <div class=\"w10\"><span>本日无法访问次数</span></div>\n" +
|
|
|
+ " </li";
|
|
|
+ for (let i = 0; i < message.length; i++) {
|
|
|
+ document.getElementById("messageUlTwo").innerHTML += "<li>\n" +
|
|
|
+ ` <div class=\"w20\"><span>${message[i].siteName}</span></div>\n` +
|
|
|
+ ` <div class=\"w10 j-left\"><span>${message[i].accessCountFail}</span></div>\n` +
|
|
|
+ ` <div class=\"w10\"><span>${message[i].lastMonitorTime}</span></div>\n` +
|
|
|
+ ` </li>`
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|