<!-- 网站普查指标监测 -->
<!DOCTYPE html>
<html lang="en" xmlns:overflow-y="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="stylesheet" type="text/css" href="/style/html.css"/>
    <link rel="stylesheet" type="text/css" 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">
        <div class="content-list flex-col" style="top: 0">
            <!-- 网站普查要素 -->
            <div class="content-list-left w100 flex-col">
                <div class="pc-content-title"><span>网站普查要素</span></div>
                <div class="content-list-body" style="width: auto;  overflow-y: scroll; padding: 0 25px; height: auto">
                <ul>
                    <li class="content-list-body-tit"  style="position: sticky;">
                        <div class="w50"><h5>站点名称</h5></div>
                        <div class="w15"><h5>结果</h5></div>
                        <div class="w15"><h5>时间</h5></div>
                        <div class="w15"><h5>备注</h5></div>
                    </li>
                </ul>
                </div>
                <div class="content-list-body height-28" style="width: auto;  overflow-y: auto; padding-top: 0">
                    <ul id="messageUlOne" >
                        <li th:each="item : ${dataSourceOne}">
                            <div class="w50"><span th:text="${item.siteName}"></span></div>
                            <div class="w15">
                                <span th:if="${item.result == '1'}">
                                    <img src="img/yes-img.png" alt=""/>
                                </span>
                                <span th:if="${item.result == '2'}">
                                    <img src="img/no-img.png" alt=""/>
                                </span>
                            </div>
                            <div class="w15"><span th:text="${item.censusTime}"></span></div>
                            <div class="w15"><span th:text="${item.remark}"></span></div>
                            <img class="table-triangle-top" src="img/triangle.png"/>
                            <img class="table-triangle-btm" src="img/triangle.png"/>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 网站普查单项否信息 -->
            <div class="content-list-left w100 flex-col m-t-20">
                <div class="pc-content-title"><span>网站普查单项否信息</span></div>
                <div class="content-list-body" style="width: auto;  overflow-y: scroll;  padding: 0 25px; height: auto">
                    <ul>
                <li class="content-list-body-tit" style="position: sticky;">
                    <div class="w20"><h5>站点名称</h5></div>
                    <div class="w10 j-left"><h5><span>网址</span></h5></div>
                    <div class="w10"><h5><span>首页类别</span></h5></div>
                    <div class="w10"><h5><span>要闻动态</span></h5></div>
                    <div class="w10"><h5><span>空栏目超5个</span></h5></div>
                    <div class="w10"><h5><span>互动回应</span></h5></div>
                    <div class="w10"><h5><span>未更新栏目超10个</span></h5></div>
                    <div class="w10"><h5><span>通知公告/政策文件类</span></h5></div>
                    <div class="w10"><h5><span>监测时间</span></h5></div>
                </li>
                    </ul>
                </div>
                <div class="content-list-body height-28" style="width: auto;  overflow-y: auto;padding-top: 0">
                    <ul id="messageUlTwo" >
                        <li th:each="item : ${dataSourceTwo}">
                            <div class="w20"><span th:text="${item.siteName}"></span></div>
                            <div class="w10 j-left"><span th:text="${item.siteUrl}"></span></div>
                            <div class="w10"><span th:text="${item.homepageType}"></span></div>
                            <div class="w10"><span th:text="${item.trends}"></span></div>
                            <div class="w10"><span th:text="${item.columnFive}"></span></div>
                            <div class="w10"><span th:text="${item.interactiveResponse}"></span></div>
                            <div class="w10"><span th:text="${item.columnTen}"></span></div>
                            <div class="w10"><span th:text="${item.notice}"></span></div>
                            <div class="w10"><span th:text="${item.monitorTime}"></span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 正文 End -->
</div>
<!-- 内容End -->
<script type="text/javascript" src="/js/socket.js"></script>
<script>
    socket.onMessage = function (res) {
        let message = []
        if (10001 == JSON.parse(res).code) {
            message = JSON.parse(res).data
            // 处理接收到的消息
            document.getElementById("messageUlOne").innerHTML = "";
            for (let i = 0; i < message.length; i++) {
                let imgSrc = message[i].result == "1" ? 'img/yes-img.png' : 'img/no-img.png';
                document.getElementById("messageUlOne").innerHTML += "<li>\n" +
                    `                  <div class="w50"><span>${message[i].siteName}</span></div>\n` +
                    `                  <div class="w15">
                                        <span>
                                           <img src="${imgSrc}" alt="" />
                                        </span>
                                   </div>\n` +
                    `                  <div class="w15"><span>${message[i].censusTime}</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].remark}</span></div>\n` +
                    `                  <img class="table-triangle-top" src="img/triangle.png"/>\n` +
                    `                  <img class="table-triangle-btm" src="img/triangle.png"/>\n` +
                    `                </li>`
            }
        }
        if (10002 == JSON.parse(res).code) {
            message = JSON.parse(res).data
            // 处理接收到的消息
            document.getElementById("messageUlTwo").innerHTML = "";
            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].siteUrl}</span></div>\n` +
                    `              <div class=\"w10\"><span>${message[i].homepageType}</span></div>\n` +
                    `                  <div class=\"w10\"><span>${message[i].trends}</span></div>\n` +
                    `                  <div class=\"w10\"><span>${message[i].columnFive}</span></div>\n` +
                    `                  <div class=\"w10\"><span>${message[i].interactiveResponse}</span></div>\n` +
                    `                  <div class=\"w10\"><span>${message[i].columnTen}</span></div>\n` +
                    `                  <div class=\"w10\"><span>${message[i].notice}</span></div>\n` +
                    `                  <div class=\"w10\"><span>${message[i].monitorTime}</span></div>\n` +
                    `                </li>`
            }
        }
    };

</script>
</body>

</html>

