<!-- 全市政府网站群互动类栏目更新情况 -->
<!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">
        <div class="content-list flex-col" style="top: 0; padding: 0 20px">
            <div class="content-list-left flex-row w100">
                <div class="tab-title flex-flex">
                    <h4 class="current h4-y">工作部门</h4>
                    <h4 class="h4-y">区、开发区</h4>
                    <h4 class="h4-y">县(市)</h4>
                </div>
                <div class="tab_con w100">
                    <div class="content-list-body m-t-10 height-79 dis-none" style="width: auto; display: block">
                        <div class="bd">
                            <ul id="messageUlOne">
                                <li class="content-list-body-tit">
                                    <div class="w20"><h5>诉求单位</h5></div>
                                    <div class="w30"><span></span></div>
                                    <div class="w15"><h5>答复率</h5></div>
                                    <div class="w15"><h5>留言条数</h5></div>
                                    <div class="w15"><h5>回复条数</h5></div>
                                </li>
                                <li th:each="item,itemStat : ${dataSourceOne}">
                                    <div class="w20 flex-row ph-title-gx" style="padding-left: 0;">
                                        <div class="ph-img-bg" th:text="${itemStat.count}"><h3></h3></div>
                                        <div class="title" th:text="${item.deptName}"></div>
                                    </div>
                                    <div class="w30">
                                        <span>
                                            <div class="horizontal-percen">
                                                <span th:style="'width:'+${item.municipalReply} + '%'"></span>
                                            </div>
                                        </span>
                                    </div>
                                    <div class="w15"><span th:text="${item.municipalReply + '%'}"></span></div>
                                    <div class="w15"><span th:text="${item.leaveCount}"></span></div>
                                    <div class="w15"><span th:text="${item.replyCount}"></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-body m-t-10 height-79 dis-none" style="width: auto" >
                        <div class="bd">
                            <ul id="messageUlTwo">
                                <li class="content-list-body-tit">
                                    <div class="w20"></h5><h5>诉求单位</h5></div>
                                    <div class="w30"><span></span></div>
                                    <div class="w15"><h5>答复率</h5></div>
                                    <div class="w15"><h5>留言条数</h5></div>
                                    <div class="w15"><h5>回复条数</h5></div>
                                </li>
                                <li th:each="item,itemStat : ${dataSourceTwo}">
                                    <div class="w20 flex-row ph-title-gx" style="padding-left: 0;">
                                        <div class="ph-img-bg" th:text="${itemStat.count}"><h3></h3></div>
                                        <div class="title" th:text="${item.areaName}"></div>
                                    </div>
                                    <div class="w30">
                                        <span>
                                            <div class="horizontal-percen">
                                                <span th:style="'width:'+${item.areaReply} + '%'"></span>
                                            </div>
                                        </span>
                                    </div>
                                    <div class="w15"><span th:text="${item.areaReply + '%'}"></span></div>
                                    <div class="w15"><span th:text="${item.areaLeaveCount}"></span></div>
                                    <div class="w15"><span th:text="${item.areaReplyCount}"></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-body m-t-10 height-79 dis-none" style="width: auto" >
                        <div class="bd">
                            <ul id="messageUlThree">
                                <li class="content-list-body-tit">
                                    <div class="w20"><h5>诉求单位</h5></div>
                                    <div class="w30"><span></span></div>
                                    <div class="w15"><h5>答复率</h5></div>
                                    <div class="w15"><h5>留言条数</h5></div>
                                    <div class="w15"><h5>回复条数</h5></div>
                                </li>
                                <li th:each="item,itemStat : ${dataSourceThree}">
                                    <div class="w20 flex-row ph-title-gx" style="padding-left: 0;">
                                        <div class="ph-img-bg" th:text="${itemStat.count}"><h3></h3></div>
                                        <div class="title" th:text="${item.countyName}"></div>
                                    </div>
                                    <div class="w30">
                                        <span>
                                            <div class="horizontal-percen">
                                                <span th:style="'width:'+${item.countyReply} + '%'"></span>
                                            </div>
                                        </span>
                                    </div>
                                    <div class="w15"><span th:text="${item.countyReply + '%'}"></span></div>
                                    <div class="w15"><span th:text="${item.countyLeaveCount}"></span></div>
                                    <div class="w15"><span th:text="${item.countyReplyCount}"></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>
            </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();
    });
</script>
<script>
    socket.onMessage = function (res) {
        let message = []
        if (10007 == JSON.parse(res).code) {
            message = JSON.parse(res).data
            // 处理接收到的消息
            document.getElementById("messageUlOne").innerHTML = "<li class=\"content-list-body-tit\">\n" +
                "                            <div class=\"w20\"><h5>诉求单位</h5></div>\n" +
                "                            <div class=\"w30\"><span></span></div>\n" +
                "                            <div class=\"w15\"><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="w20 flex-row ph-title-gx" style="padding-left: 0;">
                                        <div class="ph-img-bg"><h3>1</h3></div>
                                        <div class="title">${message[i].deptName}</div>
                                    </div>\n` +
                    `               <div class="w30">
                                        <span>
                                            <div class="horizontal-percen">
                                                <span style="width: ${message[i].municipalReply}%"></span>
                                            </div>
                                        </span>
                                    </div>\n` +
                    `                  <div class="w15"><span>${message[i].municipalReply}%</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].leaveCount}</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].replyCount}</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 (10008 == JSON.parse(res).code) {
            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=\"w30\"><span></span></div>\n" +
                "                            <div class=\"w15\"><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("messageUlTwo").innerHTML += "<li>\n" +
                    `                 <div class="w20 flex-row ph-title-gx" style="padding-left: 0;">
                                        <div class="ph-img-bg"><h3>1</h3></div>
                                        <div class="title">${message[i].areaName}</div>
                                    </div>\n` +
                    `               <div class="w30">
                                        <span>
                                            <div class="horizontal-percen">
                                                <span style="width: ${message[i].areaReply}%"></span>
                                            </div>
                                        </span>
                                    </div>\n` +
                    `                  <div class="w15"><span>${message[i].areaReply}%</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].areaLeaveCount}</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].areaReplyCount}</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 (10009 == JSON.parse(res).code) {
            message = JSON.parse(res).data
            // 处理接收到的消息
            document.getElementById("messageUlThree").innerHTML = "<li class=\"content-list-body-tit\">\n" +
                "                            <div class=\"w20\"><h5>诉求单位</h5></div>\n" +
                "                            <div class=\"w30\"><span></span></div>\n" +
                "                            <div class=\"w15\"><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("messageUlThree").innerHTML += "<li>\n" +
                    `                 <div class="w20 flex-row ph-title-gx" style="padding-left: 0;">
                                        <div class="ph-img-bg"><h3>1</h3></div>
                                        <div class="title">${message[i].countyName}</div>
                                    </div>\n` +
                    `               <div class="w30">
                                        <span>
                                            <div class="horizontal-percen">
                                                <span style="width: ${message[i].countyReply}%"></span>
                                            </div>
                                        </span>
                                    </div>\n` +
                    `                  <div class="w15"><span>${message[i].countyReply}%</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].countyLeaveCount}</span></div>\n` +
                    `                  <div class="w15"><span>${message[i].countyReplyCount}</span></div>\n` +
                    `                  <img class="table-triangle-top" src="img/triangle.png" />\n` +
                    `                  <img class="table-triangle-btm" src="img/triangle.png" />\n` +
                    `                </li>`
            }
        }
    };
</script>
</body>
</html>
