<!DOCTYPE html>
<!-- saved from url=(0064)https://www.17sucai.com/preview/703246/2019-09-02/map/index.html -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>大数据可视化平台</title>
    <link rel="stylesheet" href="/css/_files/css/index.css">
    <link rel="stylesheet" href="/css/_files/css/globle.css">
    <link rel="stylesheet" href="/css/_files/css/sousuo.css">
    <script src="/css/_files/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/_files/css/liMarquee.css">
    <link rel="stylesheet" href="/css/_files/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .canvas {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            height: 99%;
            z-index: 1;
        }
        .sycm li {
            text-align: center;
            padding: 10px 0;
            position: relative;
            padding:5px 0;
            width:100%;
            text-align:left;
        }
        .sycm li i{width:20px; height:20px; background:#F00;display: block;float:left;}
        .sycm li i.one{background:url(../../img/zmqbj.jpg); background-size:100% 100%;}
        .sycm li i.two{background:#fc3;}
        .sycm li i.three{background:#ffff99;}
        .sycm li i.four{background:#f66;}
        .sycm li i.five{background:#cc66ff}
        .sycm li i.six{background:#09f}
        .sycm li i.seven{background:#00cc99}
        .sycm li span{padding-left:30px;display:block}
        .sycm{width:110px;position:absolute;bottom:50px;right:-20px;color:#fff;}
    </style>

</head>
<body style="background:#05154d">
<div style="position: absolute;width: 100%;left: 0;top: 0;height:99.5%;z-index: 1">
    <iframe src="/system/bjlb/canvasbg" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div class="main" style="height:100% !important;background:url(/css/_files/images/bk.png)">
    <div id="date1" style="color: white;position: absolute;right: 10rem;top:3rem;font-size: 20px;"></div>
    <div class="top_title">
        <img src="/css/_files/images/ctq.png">
    </div>
    <div class="datas">
        <div class="data_left">
            <div class="left_top">
                <div class="left_top_title">大厅总取号量</div>
                <div class="left_top_main">
                    <div class="left_main_circle" style="background:none;vertical-align:bottom">
                        <span class="counter-value circle_num1 fl"
                              style="color: #fef000;font-size: 60px;">[[${zong}]]</span>
                        <span class="span_font fl" style=";">(次)</span>
                    </div>
                    <div class="left_main_circle" >
                        <p class="counter-value circle_num2">[[${monthqh}]]</p>
                        <span class="span_font">本月取号<br>(次)</span>
                    </div>
                    <div class="left_main_circle">
                        <p class="counter-value circle_num3">[[${weekqh}]]</p>
                        <span class="span_font">本周取号<br>(次)</span>
                    </div>
                    <div class="left_main_circle">
                        <p class="counter-value circle_num2">[[${today}]]</p>
                        <span class="span_font">今日取号<br>(次)</span>
                    </div>
                </div>
            </div>
            <div class="left_bottom">
                <div class="left_top_title">审批服务类别比例</div>
                <div class="box" style="width:100%;height:220px;">
                    <iframe src="/system/bjlb/echars" frameborder="0" width="100%" height="100%"></iframe>
                </div>
                <ul class="deep little" id="pienum">

                </ul>

            </div>
        </div>
        <div class="data_middle">
            <div class="dare" style="position:relative">
                <p style="text-align:center;font-size:24px;color:#FFF">河北省正定县空间发展思路</p>
                <p style="text-align:center;font-size:16px;color:#FFF">全域空间结构规划图</p>
<!--                margin-top: -43px;-->
                <img class="bjt" src="/css/_files/images/bjt.svg" width="800" height=""  alt=""/>
                <div class="sycm">
                    <div class="zuobiao">
                        <ul style="margin-left:-30px">
                            <li ><i class="one"></i><span>自 贸 区</span></li>
                            <li ><i class="two"></i><span>正定新区</span></li>
                            <li ><i class="three"></i><span>高 新 区</span></li>
                            <li ><i class="four"></i><span>正定县城</span></li>
                            <li ><i class="six"></i><span>临空经济区</span></li>
                            <li><i class="five"></i><span>西部城乡统筹示范区</span></li>
                            <li><i class="seven"></i><span>拥河发展带</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="position:relative">
                <p style="font-size:24px;color:#FFF;position:absolute;left:9%;top:-20px;">市场主体数据分布</p>
                <ul class="zj">
                    <li><p id="zj">总计 60376户</p></li>
                    <li><p id="qy">其中企业 14085户</p></li>
                    <li><p id="gt">个体 46291户</p></li>
                </ul>
            </div>
            <div class="deaf">
                <ul class="deep">
                    <li class="jieshao">
                        <a href="javascript:;" style="background:red"></a>
                        <p id="zmq" style="color:red"></p>
                    </li>
                    <li class="zhinan">
                        <a href="javascript:;"></a>
                        <p id="zdxq">正定新区 5134户</p>
                    </li>
                    <li class="zhinan">
                        <a href="javascript:;"></a>
                        <p id="zdz">正定镇 31682户</p>
                    </li>
                    <li class="xinwen">
                        <a href="javascript:;"></a>
                        <p id="xaz">新安镇 3043户</p>
                    </li>
                    <li class="shixiang">
                        <a href="javascript:;"></a>
                        <p id="xcpz">新城铺镇 3025户</p>
                    </li>
                    <li class="shixiang">
                        <a href="javascript:;"></a>
                        <p id="nlx">南楼乡 2629户</p>
                    </li>
                    <li class="shixiang">
                        <a href="javascript:;"></a>
                        <p id="xplx">西平乐乡 1323户</p>
                    </li>
                    <li class="shixiang">
                        <a href="javascript:;"></a>
                        <p id="bzxx">北早现乡 5433户</p>
                    </li>

                    <li class="shixiang">
                        <a href="javascript:;"></a>
                        <p id="nnx">南牛乡 4147户</p>
                    </li>
                    <li class="shixiang">
                        <a href="javascript:;"></a>
                        <p id="qxqx">曲阳桥乡 4960户</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="data_right">
            <div class="right_top">
<!--                th:text="${month['threecurrentMonthCount']}"-->
                <div class="left_top_title" id="left">


                </div>
                <div class="box" style="width:560px;height:140px;">
                    <iframe src="/system/bjlb/mone" frameborder="0" width="100%" height="100%"></iframe>
                </div>
                <div class="left_top_title" style="padding-top:10px;">上周办件统计 总计 <font style="color:yellow"th:text="${week['seven']}">648</font>件
                </div>
                <div class="box" style="width:560px;height:140px;">
                    <iframe src="/system/bjlb/line" frameborder="0" width="100%" height="100%"></iframe>
                </div>
            </div>
            <div class="right_bottom">


                <div class="left_top_title">办件公示</div>
                <table class="drug" style="	margin-top:20px;">
                    <tbody>
                    <tr class="drum">
                        <td class="child1">办理事项</td>
                        <td class="child2">企业（个人）名称</td>
                        <td class="child3">项目名称</td>
                        <td class="child4">办理进度</td>
                    </tr>
                    </tbody>
                </table>
                <div id="marquee"  style="overflow:hidden;height:240px;width:100%;margin-left:0px;">
                    <div id="marqueecont">
                        <table class="drug" >
                            <tbody  id="tb">

                            </tbody>
                        </table>

                    </div>
                    <div id="marqueecont2"> </div>

                </div>




            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        sum();
        setInterval(function () {
            sum();
          },60*1000*10)
    })



    function sum() {

        $.ajax({
            url: "/bjtj/bjtj/selMonthes",
            type: "post",
            dataType: 'json',
            data: {},
            success: function (data) {
                console.log(data);
                var monthDate=[];
                var numDate=[];
                var twe =0
                for (var i = 0; i <data.length ; i++) {
                    console.log(data[i]);
                    monthDate.push(data[i].month_num+"月");
                    numDate.push(data[i].num)
                    twe +=data[i].num;
                }
                // alert(twe)

                document.getElementById('left').innerHTML='办件月度统计 总计 <font style="color:yellow" id="font">'+twe+'</font>件';
            }
        });

        //总计
        $.ajax({
            url: "/system/statistics/zj",
            type: 'post',
            cache: false,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('zj').innerHTML = "总计 " + result.sum + "户";
            }
        });
        //总计企业
        var formData = new FormData();
        formData.append('type', "企业");
        $.ajax({
            url: "/system/statistics/type",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {

                document.getElementById('qy').innerHTML = "其中企业 " + result.sum + "户";
            }
        });
        //总计企业
        var formData = new FormData();
        formData.append('type', "个体");
        $.ajax({
            url: "/system/statistics/type",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('gt').innerHTML = "其中个体 " + result.sum + "户";
            }
        });
        //总计自贸区
        var formData = new FormData();
        formData.append('areaName', "自贸区");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('zmq').innerHTML = "自贸区 " + result.sum + "户";
            }
        });
        //总计正定新区
        var formData = new FormData();
        formData.append('areaName', "正定新区");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('zdxq').innerHTML = "正定新区 " + result.sum + "户";
            }
        });
        //总计正定镇
        var formData = new FormData();
        formData.append('areaName', "正定镇");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('zdz').innerHTML = "正定镇 " + result.sum + "户";
            }
        });
        //总计新安镇
        var formData = new FormData();
        formData.append('areaName', "新安镇");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('xaz').innerHTML = "新安镇 " + result.sum + "户";
            }
        });
        //总计新城铺镇
        var formData = new FormData();
        formData.append('areaName', "新城铺镇");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('xcpz').innerHTML = "新城铺镇 " + result.sum + "户";
            }
        });
        //总计南楼乡
        var formData = new FormData();
        formData.append('areaName', "南楼乡");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('nlx').innerHTML = "南楼乡 " + result.sum + "户";
            }
        });
        //总计西平乐乡
        var formData = new FormData();
        formData.append('areaName', "西平乐乡");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('xplx').innerHTML = "西平乐乡  " + result.sum + "户";
            }
        });

        //总计北早现乡
        var formData = new FormData();
        formData.append('areaName', "北早现乡");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('bzxx').innerHTML = "北早现乡  " + result.sum + "户";
            }
        });
        //总计南牛乡
        var formData = new FormData();
        formData.append('areaName', "南牛乡");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('nnx').innerHTML = "南牛乡  " + result.sum + "户";
            }
        });
        //总计曲阳桥乡
        var formData = new FormData();
        formData.append('areaName', "曲阳桥乡");
        $.ajax({
            url: "/system/statistics/areaName",
            type: 'post',
            cache: false,
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            error: function () {
                alert('暂时无法操作，请刷新后再试！');
            },
            success: function (result) {
                document.getElementById('qxqx').innerHTML = "曲阳桥乡  " + result.sum + "户";
            }
        });

        //办结公示
        $.ajax({
            url: "/system/bjlb/selList",
            type: "post",
            dataType: 'json',
            data: {},
            success: function (data) {
                console.log(data);
                var thisHtml = '';
                $.each(data.list,function(index,item){
                        thisHtml += '<tr class="drum">' +
                            '<td class="child1">'+item.matters+'</td>';
                        thisHtml += '<td class="child2">'+item.firmName+'</td>';
                        thisHtml += '<td class="child3">'+item.projectName+'</td>';
                        thisHtml += '<td class="child4">'+item.progress+'</td>' +
                            '</tr>';

                })
                document.getElementById('tb').innerHTML = thisHtml;
                var marquee = document.getElementById('marquee');
                var marqueecont = document.getElementById('marqueecont');
                var marqueecont2 = document.getElementById('marqueecont2');
                MarqTop(marquee,marqueecont,marqueecont2,50);
            }
        });

        //审批服务类别比例
         jhtjbintu() ;
    }

    var myChart2 = echarts.init(document.getElementById('Land_analysis'));

    option2 = {
        legend: {
            x: 'right',
            y: 'top',
            textStyle: {
                color: '#4ADEFE',
            }
        },
        grid: {
            x: 30,
            y: 100,
            x2: 0,
            y2: 45
        },
        tooltip: {},
        dataset: {

            source: [
                ['product', '叫号统计'],
                ['一月', 1808],
                ['二月', 99],
                ['三月', 1170],
                ['四月', 0],
                ['五月', 0],
                ['六月', 0],
                ['七月', 0],
                ['八月', 0],
                ['九月', 0],
                ['十月', 0],
                ['十一月', 0],
                ['十二月', 0],
            ]
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#4ADEFE",
                },
            },

        },
        yAxis: {
            axisLine: {
                lineStyle: {
                    color: "#4ADEFE",
                }
            },

        },
        series: [
            {
                type: 'bar',
                barMaxWidth: '15',
                itemStyle: {
                    normal: {
                        color: '#4ADEFE'
                    },
                },
            },

        ]
    };
    myChart2.setOption(option2);
</script>

<script type="text/javascript">
    function getTime() {
        var dateObj = new Date();
        var year = dateObj.getFullYear();//年
        var month = dateObj.getMonth() + 1;//月  (注意：月份+1)
        var date = dateObj.getDate();//日
        var day = dateObj.getDay();
        var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var week = weeks[day];//根据day值，获取星期数组中的星期数。
        var hours = dateObj.getHours();//小时
        var minutes = dateObj.getMinutes();//分钟
        var seconds = dateObj.getSeconds();//秒

        if (month < 10) {
            month = "0" + month;
        }
        if (date < 10) {
            date = "0" + date;
        }
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }

        var newDate = year + "-" + month + "-" + date + "  " + hours + ":" + minutes + ":" + seconds + "&nbsp &nbsp" + week;
        document.getElementById("date1").innerHTML = newDate;//在div中写入时间
        setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
    }
    getTime()

</script>

<script type="text/javascript" th:inline="javascript">
    function  jhtjbintu() {
        var pieNum = [[${pieNum}]];
        var zmqxmtz="";
        var zdxxmtz="";
        var zdxqzh=0;
        var qt="";
        var zdxq="";
        $.each(pieNum, function (k, v) {
            //var item = [k, v];
            //dataArray.push(item);

            if(k=="项目投资(自贸区)")
            {
                zmqxmtz="<li> <p style='color:red'>自贸区项目投资 "+v+"</p> </li>";
            }
            else if(k=="项目投资")
            {
                zdxxmtz="<li> <p>正定县项目投资 "+v+"</p> </li>";
            }
            else if(k=="建设局(正定新区)" || k=="经发局(正定新区)")
            {
                zdxqzh+=v;
            }
            else if(k!="市场主体" && k!="市场主体(自贸区)"){
                if(k=="代办公司")
                {
                    qt+="<li> <p>代办服务 "+v+"</p> </li>";
                }
                else
                {
                    qt+="<li> <p>"+k+"   "+v+"</p> </li>";
                }
            }
        });
        $("#pienum").append(zmqxmtz);
        $("#pienum").append(zdxxmtz);
        $("#pienum").append("<li> <p>正定新区 "+zdxqzh+"</p> </li>");
        $("#pienum").append(qt);
    }

</script>

<script>


    function MarqTop(marquee,marqueecont,marqueecont2,speed){

        marqueecont2.innerHTML=marqueecont.innerHTML;
        var i=0
        function Marquee(){
            if( marquee.scrollTop>=marqueecont.offsetHeight){
                marquee.scrollTop=0;
                i=0;
            }else{
                marquee.scrollTop=i++;

            }
        }

        var MyMar=setInterval(Marquee,speed);
        marquee.onmouseover=function() {clearInterval(MyMar);}
        marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    }

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


