bihuisong
/
jl_visual_monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!-- 错别字 -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <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}" />
</head>
<body class="black-bg">
    <!-- 头部 Start -->
    <div class="header flex-row  flex-y-center">
        <h1>错别字监测</h1>
    </div>
    <!-- 头部 End -->
    <!-- 内容 Start -->
    <div class="container">
       <!-- 正文 Start -->
       <div class="content m-t-20">
          <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 height-74">
                  <ul id="messageUlOne">
                  <li class="content-list-body-tit">
                    <div class="w50"><h5>站点名称</h5></div>
                    <div class="w25"><h5>错别字数量</h5></div>
                  </li>
                    <li th:each="item : ${dataSource}">
                        <div class="w50"><span th:attr="title=${item.misprintName}" th:text="${#strings.length(item.misprintName) > 20}
                  ? ${#strings.substring(item.misprintName, 0, 20) + '...'}
                  : ${item.misprintName}"></span></div>
                        <div class="w25"><span th:text="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.misprintCount)}"></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 height-74">
                  <ul id="messageUlTwo">
                  <li class="content-list-body-tit">
                    <div class="w50"><h5>站点名称</h5></div>
                    <div class="w25"><h5>错别字数量</h5></div>
                  </li>
                    <li th:each="item : ${dataAccess}">
                        <div class="w50"><span th:attr="title=${item.misprintName}" th:text="${#strings.length(item.misprintName) > 20}
                  ? ${#strings.substring(item.misprintName, 0, 20) + '...'}
                  : ${item.misprintName}"></span></div>
                        <div class="w25"><span th:text="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.misprintCount)}"></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>
       </div>
       <!-- 正文 End -->
    </div>
    <!-- 内容End -->
    <script type="text/javascript" th:src="@{/js/socket.js}"></script>
    <script>
        socket.onMessage = function (res) {
            let message = []
            if (10011 == 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" +
                    "                        </li>";
                for (let i = 0; i < message.length; i++) {
                    document.getElementById("messageUlOne").innerHTML += "<li>\n" +
                        `                  <div class="w50"><span>${message[i].misprintName}</span></div>\n` +
                        `                  <div class="w25"><span>${message[i].misprintCount}</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 (10012 == 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" +
                    "            </li";
                for (let i = 0; i < message.length; i++) {
                    document.getElementById("messageUlTwo").innerHTML += "<li>\n" +
                        `                  <div class=\"W50\"><span>${message[i].misprintName}</span></div>\n` +
                        `                  <div class=\"W25\"><span>${message[i].misprintCount}</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>
</body>
</html>