<!-- 日更新量 -->
<!DOCTYPE html>
<html lang="en">
<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"/>
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jquery.SuperSlide.2.1.1.js"></script>
</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" style="top:60px" src="img/bg-line.png" alt="">
        <div class="content-list flex-col">
            <div class="content-list-left flex-col w100">
                <div class="tab-title flex-row">
                    <h4 class="current">市政府工作部门日更新量</h4>
                    <h4 class="c-l-right">县（市）区政府日更新量</h4>
                </div>
                <div class="tab_con">
                    <div class="content-list-body m-t-10 height-72 dis-none no-bg" style="width: auto; display: block;">
                        <div class="bd">
                            <ul class="infoList" id="messageUlOne">
                                <li th:each="item : ${dataSourceOne}">
                                    <div class="paihang" th:text="${item.ranking}"></div>
                                    <div class="gov-name" th:text="${item.renewName}"></div>
                                    <div class="click-num" th:text="${item.renewCount}"><span
                                            class="font-small-size">条</span></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="content-list-body m-t-10 height-72 dis-none no-bg" style="width: auto; display: block;">
                        <div class="bd">
                            <ul class="infoList" id="messageUlTwo">
                                <li th:each="item : ${dataSourceTwo}">
                                    <div class="paihang" th:text="${item.ranking}"></div>
                                    <div class="gov-name" th:text="${item.renewName}"></div>
                                    <div class="click-num" th:text="${item.renewCount}"><span
                                            class="font-small-size">条</span></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 正文 End -->
</div>
<!-- 内容End -->
<script type="text/javascript" src="/js/socket.js"></script>
<script>
    $(".tab-title h4").click(function () {
        // 获得点击li的索引号
        var index = $(this).index();
        // 给当前选中的tab加上current类名，其他兄弟的类名去掉
        $(this).addClass("current").siblings().removeClass("current");
        // 第index位的div显示，其他div隐藏
        $(".tab_con .dis-none").eq(index).show().siblings().hide();
    });

    socket.onMessage = function (res) {
        let message = []
        if (10003 == JSON.parse(res).code) {
            message = JSON.parse(res).data
            // 处理接收到的消息
            document.getElementById("messageUlOne").innerHTML = "";
            for (let i = 0; i < message.length; i++) {
                document.getElementById("messageUlOne").innerHTML += "<li>\n" +
                    `                  <div class="paihang">${message[i].ranking}</div>\n` +
                    `                  <div class="gov-name">${message[i].renewName}</div>\n` +
                    `                  <div class="click-num">${message[i].renewCount}<span class="font-small-size">条</span></div>\n` +
                    `                </li>`
            }
        }
        if (10004 == 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="paihang">${message[i].ranking}</div>\n` +
                    `                  <div class="gov-name">${message[i].renewName}</div>\n` +
                    `                  <div class="click-num">${message[i].renewCount}<span class="font-small-size">条</span></div>\n` +
                    `                </li>`
            }
        }
    };

</script>
</body>
</html>