zmcoding
/
data_view


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script type="text/javascript">

    function formatNumber (num) {
        num = num.toString();
        return num[1] ? num : '0' + num;
    }

    function getCurTime () {
        let date_obj = new Date();
        let cur_year = date_obj.getFullYear();
        let cur_month = date_obj.getMonth() + 1;
        let cur_date = date_obj.getDate();
        let cur_hour = date_obj.getHours();
        let cur_minute = date_obj.getMinutes();
        let cur_second = date_obj.getSeconds();
        return [cur_year,cur_month,cur_date].map(formatNumber).join('-') + ' ' + [cur_hour,cur_minute,cur_second].map(formatNumber).join(':');
    }

    function wrapLi () {
        let wrap = $(".wrap");

        wrap.map(function(){
            let that = this;
            let wrapHeight = that.offsetHeight; // 容器高度
            let wrapUl = $(that).find('ul')[0];
            // 小于容器不轮播
            if( wrapUl.offsetHeight < wrapHeight ){
                return;
            }
            let offset = 0;

            $(wrapUl).append($(wrapUl).html())
            let ls=$(wrapUl).find('li').length/2+1
            let i=0
            setInterval(function(){
                let curLiHeight =  $(wrapUl).find('li')[i].offsetHeight;
                i++
                offset += curLiHeight;
                if(i==ls){
                    i = 1;
                    offset = curLiHeight;
                    $(wrapUl).css({marginTop:0})
                    $(wrapUl).animate({marginTop: - offset +'px'},1000)
                }
                // $(wrapUl).animate({marginTop:-'.34'*i +'rem'},1000)
                $(wrapUl).animate({marginTop: - offset +'px'},1000)
                
            },2400);
                    
        })

    }

	$(document).ready(function(){
        var screen_data = [];  // 大屏数据
        
        // 更新时间
        $('.now-time').html(getCurTime());
        setInterval(function(){
            let now_time = getCurTime();
            $('.now-time').html(now_time);
        },900);
        
        // 获取数据
        let url = 'http://develop.rltest.cn/?s=datav/get_district_big_screen_data&cityid=2902';
        $.ajax({
            url: url,
            dataType: 'json',
            async: false,
            success: function(resp){
                if(!resp.success){
                    alert('数据加载失败：'+ resp.message);
                    return;
                }
                screen_data = resp.data;
            },
            error: function(resp,state){
                alert(resp.statusText);
            }
        })
        console.log(screen_data)
        var yesterday_num = screen_data.yesterday || 0, // 昨日开户数
            today_num = screen_data.today_num || 0, // 今日开户数
            monthly = screen_data.monthly || [], // 月开户数
            station_coordinate = screen_data.station_coordinate || [], // 基站坐标
            station_status = screen_data.station_status || [], // 基站状态
            stolen_list = screen_data.stolen_list || [], // 被盗列表
            vehicle_route = screen_data.vehicle_route || [], // 被盗车辆轨迹
            report_num = screen_data.report_num || 0, // 报警数
            handle_num = screen_data.handle_num || 0, // 破案数
            trace_num = screen_data.trace_num || 0,  // 追踪报警数
            wait_handle_num = screen_data.wait_handle_num || 0, // 待处理报警数
            station_total = screen_data.station_total || 0, // 基站总数
            vehicle_total = screen_data.vehicle_total || 0; // 车辆总数

        // li列表轮播
        wrapLi();


	})
</script>
<body>
    <div class="loading">
        <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1>
            <!-- <img src="images/logo.png"> -->
            淮阳县电动车防盗实时系统
        </h1>
        <div class="weather">
            <!-- <img src="images/weather.png"><span>多云转小雨</span> -->
            <span class="now-time">0000-00-00 00:00:00</span>
        </div>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 1.7rem">
                    <div class="alltitle">车辆开户数量</div>

                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2>2000</h2><span>昨日数量</span></li>
                            <li><h2>1920</h2><span>今日数量</span></li>
                        </ul>
                        <!-- <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        -->
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.65rem">
                    <div class="alltitle">今年开户数量</div>
                    <div class="sy" id="echarts1"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.95rem">
                    <div class="alltitle">基站状态</div>
                    <div id="echarts2" style="height: 2.2rem; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall bar" style="height: 1.7rem">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">12581189</li>
                            <li class="pulll_left counter">39124</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">车辆总数</li>
                            <li class="pulll_left">基站总数</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="div_any_title any_title_width">基站分布地图</div>
                    <div id="map_container"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:1.7rem">
                    <div >
                        <div id="echarts3" style="height: 1.7rem; width: 100%;"></div>
                    </div>
                    <div>

                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:3.2rem">
                    <div class="alltitle">被盗车辆</div>
                    <div class="wrap">
                        <ul class="clearfix">
                            <li>
                                <p><span>车牌号1</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号2</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号3</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号4</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号5</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号6</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号7</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号8</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号9</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                            <li>
                                <p><span>车牌号10</span><span>车主</span><span>被盗时间</span></p>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">被盗车辆轨迹</div>
                    <div class="wrap">
                        <ul>
                            <li>
                                <p>淮阳县 车牌HY120283, 在2020-05-06 11:11:20经过基站四通26, 信号0</p>
                            </li>
                            <li>
                                <p>HY120283, 在2020-05-06 13:43:18经过基站四通15</p>
                            </li>
                            <li>
                                <p>淮阳县 车牌HY120283, 在2020-05-06 10:59:19经过基站新刘庄（新）, 信号0</p>
                            </li>
                            <li>
                                <p>淮阳县 车牌HY120283, 在2020-05-06 13:44:11经过基站四通15, 信号0</p>
                            </li>
                            <li>
                                <p>淮阳县 车牌HY120283, 在2020-05-06 12:13:21经过基站四通25, 信号0</p>
                            </li>
                            <li>
                                <p>阳县 车牌HY120283, 在2020-05-06 12:13:21经过基站四通28, 信号0</p>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
 
    </div>
    <div class="back"></div>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=KMEhEKew3P5477ozjc5iivZw2Hek2rqL"></script>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <!-- <script type="text/javascript" src="js/area_echarts.js"></script> -->
    <script type="text/javascript">
        echarts_1();
        echarts_2();
        echarts_3();

        initMap();

        // $(document).ready(function () {
        //     myChart1.resize();
        //     myChart2.resize();
        //     myChart3.resize();
        //     myChart6.resize();
        //     myChart7.resize();
        //     myChart8.resize();
        // })
        // window.addEventListener("resize", function () {
        //     myChart1.resize();
        //     myChart2.resize();
        //     myChart3.resize();
        //     myChart6.resize();
        //     myChart7.resize();
        //     myChart8.resize();
        // });
    </script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript">
        $('.counter').countUp();
    </script>

</body>
</html>