|
@@ -6,124 +6,133 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>吉林市政府网站可用性实时监测</title>
|
|
|
<link rel="shortcut icon" th:href="@{favicon.ico}">
|
|
|
- <link rel="stylesheet" type="text/css" th:href="@{/style/html.css}" />
|
|
|
- <link rel="stylesheet" type="text/css" th:href="@{/style/base.css}" />
|
|
|
+ <link rel="stylesheet" type="text/css" th:href="@{/style/html.css}"/>
|
|
|
+ <link rel="stylesheet" type="text/css" th:href="@{/style/base.css}"/>
|
|
|
</head>
|
|
|
<body class="black-bg">
|
|
|
- <!-- 头部 Start -->
|
|
|
- <div class="header flex-row flex-y-center">
|
|
|
- <h1>吉林市政府网站可用性实时监测</h1>
|
|
|
+<!-- 头部 Start -->
|
|
|
+<div class="header flex-row flex-y-center">
|
|
|
+ <h1>吉林市政府网站可用性实时监测</h1>
|
|
|
+</div>
|
|
|
+<!-- 头部 End -->
|
|
|
+<!-- 内容 Start -->
|
|
|
+<div class="container">
|
|
|
+ <!-- 上方总数 Start -->
|
|
|
+ <div class="row-top flex-row flex-y-center">
|
|
|
+ <!-- <div class="row-top-list flex-row flex-x-center">-->
|
|
|
+ <!-- <span>网站总数</span>-->
|
|
|
+ <!-- <span>25</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="row-top-list flex-row flex-x-center">-->
|
|
|
+ <!-- <span>正常</span>-->
|
|
|
+ <!-- <span>25</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="row-top-list flex-row flex-x-center">-->
|
|
|
+ <!-- <span>故障</span>-->
|
|
|
+ <!-- <span>25</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
</div>
|
|
|
- <!-- 头部 End -->
|
|
|
- <!-- 内容 Start -->
|
|
|
- <div class="container">
|
|
|
- <!-- 上方总数 Start -->
|
|
|
- <div class="row-top flex-row flex-y-center">
|
|
|
-<!-- <div class="row-top-list flex-row flex-x-center">-->
|
|
|
-<!-- <span>网站总数</span>-->
|
|
|
-<!-- <span>25</span>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="row-top-list flex-row flex-x-center">-->
|
|
|
-<!-- <span>正常</span>-->
|
|
|
-<!-- <span>25</span>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="row-top-list flex-row flex-x-center">-->
|
|
|
-<!-- <span>故障</span>-->
|
|
|
-<!-- <span>25</span>-->
|
|
|
-<!-- </div>-->
|
|
|
- </div>
|
|
|
- <!-- 上方总数 End -->
|
|
|
+ <!-- 上方总数 End -->
|
|
|
|
|
|
- <!-- 正文 Start -->
|
|
|
- <div class="content">
|
|
|
- <img class="x-line" th:src="@{img/bg-line.png}" alt="">
|
|
|
- <div class="content-list flex-row">
|
|
|
+ <!-- 正文 Start -->
|
|
|
+ <div class="content">
|
|
|
+ <img class="x-line" th:src="@{img/bg-line.png}" alt="">
|
|
|
+ <div class="content-list flex-row">
|
|
|
<div class="content-list-left flex-col">
|
|
|
- <h4>可用性实时监测情况</h4>
|
|
|
- <div class="content-list-body">
|
|
|
- <ul id="messageUlOne">
|
|
|
- <li class="content-list-body-tit">
|
|
|
- <div class="w50"><h5>站点名称</h5></div>
|
|
|
- <div class="w25"><h5>监测时间</h5></div>
|
|
|
- <div class="w25"><h5>网站状态</h5></div>
|
|
|
- </li>
|
|
|
- <li th:each="item : ${dataSourceOne}">
|
|
|
- <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" th:src="@{img/triangle.png}">
|
|
|
- <img class="table-triangle-btm" th:src="@{img/triangle.png}">
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <h4>可用性实时监测情况</h4>
|
|
|
+ <div class="content-list-body">
|
|
|
+ <ul id="messageUlOne">
|
|
|
+ <li class="content-list-body-tit">
|
|
|
+ <div class="w50"><h5>站点名称</h5></div>
|
|
|
+ <div class="w25"><h5>监测时间</h5></div>
|
|
|
+ <div class="w25"><h5>网站状态</h5></div>
|
|
|
+ </li>
|
|
|
+ <li th:each="item : ${dataSourceOne}">
|
|
|
+ <div class="w50">
|
|
|
+ <span class="h-span"
|
|
|
+ th:attr="title=${item.siteName}"
|
|
|
+ th:text="${#strings.length(item.siteName) > 20}
|
|
|
+ ? ${#strings.substring(item.siteName, 0, 20) + '...'}
|
|
|
+ : ${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" th:src="@{img/triangle.png}">
|
|
|
+ <img class="table-triangle-btm" th:src="@{img/triangle.png}">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="content-list-right flex-col">
|
|
|
- <h4>本日无法访问网站列表</h4>
|
|
|
- <div class="content-list-body">
|
|
|
- <ul id="messageUlTwo">
|
|
|
- <li class="content-list-body-tit">
|
|
|
- <div class="w50"><h5>站点名称</h5></div>
|
|
|
- <div class="w25"><h5>最近一次检测时间</h5></div>
|
|
|
- <div class="w25"><h5>本日无法访问次数</h5></div>
|
|
|
- </li>
|
|
|
- <li th:each="item : ${dataSourceTwo}">
|
|
|
- <div class="w50"><span class="h-span" th:text="${item.siteName}"></span></div>
|
|
|
- <div class="w25"><span class="h-span" th:text="${item.lastMonitorTime}"></span></div>
|
|
|
- <div class="w25"><span class="h-span" th:text="${item.accessCountFail}"></span></div>
|
|
|
- <img class="table-triangle-top" th:src="@{img/triangle.png}">
|
|
|
- <img class="table-triangle-btm" th:src="@{img/triangle.png}">
|
|
|
- </li>
|
|
|
+ <h4>本日无法访问网站列表</h4>
|
|
|
+ <div class="content-list-body">
|
|
|
+ <ul id="messageUlTwo">
|
|
|
+ <li class="content-list-body-tit">
|
|
|
+ <div class="w50"><h5>站点名称</h5></div>
|
|
|
+ <div class="w25"><h5>最近一次检测时间</h5></div>
|
|
|
+ <div class="w25"><h5>本日无法访问次数</h5></div>
|
|
|
+ </li>
|
|
|
+ <li th:each="item : ${dataSourceTwo}">
|
|
|
+ <div class="w50"><span class="h-span" th:attr="title=${item.siteName}" th:text="${#strings.length(item.siteName) > 20}
|
|
|
+ ? ${#strings.substring(item.siteName, 0, 20) + '...'}
|
|
|
+ : ${item.siteName}"></span></div>
|
|
|
+ <div class="w25"><span class="h-span" th:text="${item.lastMonitorTime}"></span></div>
|
|
|
+ <div class="w25"><span class="h-span" th:text="${item.accessCountFail}"></span></div>
|
|
|
+ <img class="table-triangle-top" th:src="@{img/triangle.png}">
|
|
|
+ <img class="table-triangle-btm" th:src="@{img/triangle.png}">
|
|
|
+ </li>
|
|
|
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 正文 End -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 内容End -->
|
|
|
- <script type="text/javascript" th:src="@{/js/socket.js}"></script>
|
|
|
- <script>
|
|
|
- socket.onMessage = function (res) {
|
|
|
- let message = []
|
|
|
- if (10014 == JSON.parse(res).code) {
|
|
|
- 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=\"w25\"><h5>监测时间</h5></div>\n" +
|
|
|
- " <div class=\"w25\"><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" th:src="@{img/triangle.png}"/>\n` +
|
|
|
- ` <img class="table-triangle-btm" th:src="@{img/triangle.png}"/>\n` +
|
|
|
- ` </li>`
|
|
|
- }
|
|
|
+ <!-- 正文 End -->
|
|
|
+</div>
|
|
|
+<!-- 内容End -->
|
|
|
+<script type="text/javascript" th:src="@{/js/socket.js}"></script>
|
|
|
+<script>
|
|
|
+ socket.onMessage = function (res) {
|
|
|
+ let message = []
|
|
|
+ if (10014 == JSON.parse(res).code) {
|
|
|
+ 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=\"w25\"><h5>监测时间</h5></div>\n" +
|
|
|
+ " <div class=\"w25\"><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" th:src="@{img/triangle.png}"/>\n` +
|
|
|
+ ` <img class="table-triangle-btm" th:src="@{img/triangle.png}"/>\n` +
|
|
|
+ ` </li>`
|
|
|
}
|
|
|
- if (10015 == JSON.parse(res).code) {
|
|
|
- message = JSON.parse(res).data
|
|
|
- // 处理接收到的消息
|
|
|
- document.getElementById("messageUlTwo").innerHTML = "<li class=\"content-list-body-tit\">\n" +
|
|
|
- " <div class=\"w50\"><h5>站点名称</h5></div>\n" +
|
|
|
- " <div class=\"w25\"><h5>最近一次检测时间</h5></div>\n" +
|
|
|
- " <div class=\"w25\"><h5>本日无法访问次数</h5></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\"><span>${message[i].lastMonitorTime}</span></div>\n` +
|
|
|
- ` <div class=\"w10 j-left\"><span>${message[i].accessCountFail}</span></div>\n` +
|
|
|
- ` <img class="table-triangle-top" th:src="@{img/triangle.png}">\n` +
|
|
|
- ` <img class="table-triangle-btm" th:src="@{img/triangle.png}">\n` +
|
|
|
- ` </li>`
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (10015 == JSON.parse(res).code) {
|
|
|
+ message = JSON.parse(res).data
|
|
|
+ // 处理接收到的消息
|
|
|
+ document.getElementById("messageUlTwo").innerHTML = "<li class=\"content-list-body-tit\">\n" +
|
|
|
+ " <div class=\"w50\"><h5>站点名称</h5></div>\n" +
|
|
|
+ " <div class=\"w25\"><h5>最近一次检测时间</h5></div>\n" +
|
|
|
+ " <div class=\"w25\"><h5>本日无法访问次数</h5></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\"><span>${message[i].lastMonitorTime}</span></div>\n` +
|
|
|
+ ` <div class=\"w10 j-left\"><span>${message[i].accessCountFail}</span></div>\n` +
|
|
|
+ ` <img class="table-triangle-top" th:src="@{img/triangle.png}">\n` +
|
|
|
+ ` <img class="table-triangle-btm" th:src="@{img/triangle.png}">\n` +
|
|
|
+ ` </li>`
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- </script>
|
|
|
+</script>
|
|
|
</body>
|
|
|
</html>
|