bihuisong
/
jl_visual_monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!-- 全市政府网站群互动类栏目更新情况 -->
<!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="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}"/>
    <script th:src="@{/js/jquery-1.7.2.min.js}"></script>
    <script th: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:attr="title=${item.deptName}" th:text="${#strings.length(item.deptName) > 20}
                  ? ${#strings.substring(item.deptName, 0, 20) + '...'}
                  : ${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="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.leaveCount)}"></span></div>
                                    <div class="w15"><span th:text="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.replyCount)}"></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-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:attr="title=${item.areaName}" th:text="${#strings.length(item.areaName) > 20}
                  ? ${#strings.substring(item.areaName, 0, 20) + '...'}
                  : ${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="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.areaLeaveCount)}"></span></div>
                                    <div class="w15"><span th:text="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.areaReplyCount)}"></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-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:attr="title=${item.countyName}" th:text="${#strings.length(item.countyName) > 20}
                  ? ${#strings.substring(item.countyName, 0, 20) + '...'}
                  : ${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="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.countyLeaveCount)}"></span></div>
                                    <div class="w15"><span th:text="${T(com.ruoyi.web.controller.tool.NumberUtils).thousandFormatCount(item.countyReplyCount)}"></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>
        </div>
    </div>
    <!-- 正文 End -->
</div>
<!-- 内容End -->
<script type="text/javascript" th: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" th:src="@{img/triangle.png}" />\n` +
                    `                  <img class="table-triangle-btm" th: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" th:src="@{img/triangle.png}" />\n` +
                    `                  <img class="table-triangle-btm" th: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" th:src="@{img/triangle.png}" />\n` +
                    `                  <img class="table-triangle-btm" th:src="@{img/triangle.png}" />\n` +
                    `                </li>`
            }
        }
    };
</script>
</body>
</html>