{extend name="common/common2" /}
{block name="main"}
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key={$gdKey}"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

<style>
    #ydw ul {list-style:none;margin:0px;}
    #ydw ul li {float:left;width: 235px}
    #wdw ul {list-style:none;margin:0px;}
    #wdw ul li {float:left;width: 235px}
    #ydw {margin-left:-25px;}
    #wdw {margin-left:-25px;}
</style>
<div class="ibox">
    <div class="ibox-content">
        <div class="row">
            <div class="col-xs-12" style="display: flex">

                <div class="input-group" id="online_number">
                    在线设备数量:0
                </div>
                &nbsp;&nbsp;
                <div class="input-group" id="cpage">
                    <a href="">上一页&nbsp;&nbsp;|</a>
                    <a style="color:black;">&nbsp;&nbsp;当前第1页&nbsp;&nbsp;</a>
                    <a>|&nbsp;&nbsp;下一页&nbsp;&nbsp;|</a>
                    <a style="color:black;">&nbsp;&nbsp;共0条</a>
                </div>
                &nbsp;&nbsp;
                <div class="input-group" onclick="layerOpenReload(this)" url="{:url('getSosList')}" data-title="紧急呼叫列表" data-table="1" id="sos_num" style="display: none;color: red;cursor: pointer">
                    紧急呼叫数量:0
                </div>
            </div>

        </div>

    </div>
    <div class="jqGrid_wrapper" style="background: #ffffff">
        <div id="container" style="border-collapse: collapse;margin-left: 10px;margin-top:82px;width: 820px;height: 435px;"></div>

    </div>
    <div class="ibox-content" style="height: 450px;width: 295px;position: relative;float: right;overflow-x: hidden;overflow-y: scroll;">
        <fieldset>
            <div class="col-xs-12">
                <label class="cr-inline" onclick="a_tap(1)">
                    <input type="radio" checked name="type" value="1" >有定位设备&nbsp;&nbsp;
                </label>
                <label class="cr-inline" onclick="a_tap(0)">
                    <input type="radio"  name="type" value="0" >无定位设备
                </label>
            </div>
            <div id="ydw">
                <ul id="ydwul">

                </ul>
            </div>
            <div id="wdw" style="display: none">
                <ul id="wdwul">

                </ul>
            </div>
        </fieldset>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    getSosNum();
    function getSosNum() {

        $.ajax({
            type: "post",
            url: '/admin/Location/getSosNum.html',
            async: false,
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    if(res.data > 0){
                        $('#sos_num').attr('style','display:block;color:red;cursor:pointer');
                        $('#sos_num').html('紧急呼叫数量:'+res.data);
                    }else {
                        $('#sos_num').attr('style','display:none');
                    }
                } else {
                    layer.msg(res.msg, {icon: 2})
                }

            },

        });
    }
    window.setInterval(getSosNum,10000);
    function a_tap(val) {
        if(val==1){
            $("#ydw").attr('style','display:block');
            $("#wdw").attr('style','display:none');
        }else {
            $("#wdw").attr('style','display:block');
            $("#ydw").attr('style','display:none');
        }
    }

    //初始化地图对象，加载地图
    var data = [];
    var page = 1;
    get_data(page)

    function setPage(page) {
        get_data(page);
    }


    function get_data(page) {
        $.ajax({
            type: "post",
            url: '/admin/Location/index.html',
            async: false,
            dataType: 'json',
            data: {
                page: page,
            },
            success: function (res) {
                if (res.code == 1) {
                    console.log(res)
                    data = res.data.data;
                    $('#online_number').html('在线设备数量:'+res.data.online_numbers);
                    $('#cpage').html(res.data.page);
                    $('#ydwul').html(res.data.ydw);
                    $('#wdwul').html(res.data.wdw);
                } else {
                    layer.msg(res.msg, {icon: 2})
                }

            },

        });

    }
    var map = new AMap.Map("container", {resizeEnable: true});
    var lnglats = data;
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});

    for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
            position: lnglats[i]['lonLat'],
            map: map,
            icon: lnglats[i]['icon'],
        });
        marker.content = '设备:' + lnglats[i]['imeI'] + '</br>昵称:' + lnglats[i]['name']
            + '</br>时间:' + lnglats[i]['updated_at']
            + '</br>地址:' + lnglats[i]['address']
            + '</br>经度:' + lnglats[i]['lon'] + ',纬度:' + lnglats[i]['lat']
        ;
        marker.on('click', markerClick);

    }

    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }

    map.setFitView();
</script>

{/block}