<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备总览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }

        ul li {
            list-style: none;
        }
        .btn-wrap {
            z-index: 999;
            position: fixed;
            bottom: 2rem;
            margin-left: 1rem;
            padding: .5rem .5rem;
            border-radius: .25rem;
            background-color: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
        .btn {
            width: 75px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: rgba(27, 142, 236, 1);
            font-size: 14px;
            border: 1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }
        .btn:hover {
            background-color: rgba(27, 142, 236, 0.8);
            color: #fff;
        }
    </style>
    
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4ef46ba62e8fba67b53a0becca4d05da">
	</script>
</head>

<body>
<div class="layuimini-main">

    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card top-panel">
                <div class="layui-card-header">设备数量</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md8 top-panel-number">
                            <a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
                        </div>
                        <div class="layui-col-xs3 layui-col-md4">
                            掉线数 <a style="color: #bd3004" th:text="${deviceOfflineNum}">0</a><br>
                            <div th:if="${noGGA>0}">无GGA <a style="color: #e7be1d" th:text="${noGGA}">0</a><br></div>
                            装机量 <a style="color: #000000" th:text="${deviceDeployedNum}">2020</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card top-panel">
                <div class="layui-card-header">告警统计</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md8 top-panel-number">
                            <a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
                        </div>
                        <div class="layui-col-xs3 layui-col-md4">
                            严重 <a style="color: #bd3004" th:text="${warning2Num}">5</a><br>
                            一般 <a style="color: #f6c102" th:text="${warning1Num}">20</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-card top-panel">
            <ul class="btn-wrap" style="z-index: 99;">
                <li class="light btn" onclick="showAll()">全部</li>
                <li class="night btn" onclick="showWarning1()">一般告警</li>
                <li class="night btn" onclick="showWarning2()">严重告警</li>
            </ul>
            <div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
        </div>
    </div>

</div>


<script th:inline="javascript">
    var greenMarkers=[];
    var orangeMarkers=[];
    var redMarkers=[];
    var greenLabels=[];
    var orangeLabels=[];
    var redLabels=[];
    var batch_id = 0;
    var deviceList=
    [
        [# th:each="device : ${deviceList}"]
        {deviceid:[[${device.deviceid}]],
            latitude:[[${device.latitude}]],
            longitude:[[${device.longitude}]],
            warning:[[${device.warning}]]},
        [/]
    ];
	var marker_state = 0;//0: translating; 1:all; 2:orange; 3:red

    var map = new BMapGL.Map("map-container");
    var convertor = new BMapGL.Convertor();
    var loc_green = new BMapGL.Icon("../images/loc1_green.png", new BMapGL.Size(18, 24));
    var loc_red = new BMapGL.Icon("../images/loc1_red.png", new BMapGL.Size(18, 24));
    var loc_orange = new BMapGL.Icon("../images/loc1_orange.png", new BMapGL.Size(18, 24));
        
    initialize();

    function initialize() {
        var point = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 7);
        map.enableScrollWheelZoom(true);
        //map.setMapType(BMAP_SATELLITE_MAP);

        var centerLat = 0;
        var centerLon = 0;
        //console.log(deviceList);
        for(var i=0; i<deviceList.length; i++) {
            centerLat += deviceList[i].latitude;
            centerLon += deviceList[i].longitude;
        }
        if(deviceList.length>0) {
            centerLat = centerLat/deviceList.length;
            centerLon = centerLon/deviceList.length;
            map.setCenter(new BMapGL.Point(centerLon,centerLat));
        }
		marker_state = 0;

        translateCallback = function (data){
            if(data.status === 0) {
                var i=0;
                for(; i<data.points.length; i++){
                    var label = new BMapGL.Label(deviceList[batch_id+i].deviceid,
                      {
                          position: data.points[i], // 指定文本标注所在的地理位置
                          offset: new BMapGL.Size(10, 10) // 设置文本偏移量
                      });             // 创建文本标注对象

                    var marker;
                    if(deviceList[batch_id+i].warning == 2) {
                        marker = new BMapGL.Marker(data.points[i], {
                            icon: loc_red
                        });
                        redMarkers.push(marker);
                        redLabels.push(label);
                    }
                    else if(deviceList[batch_id+i].warning == 1) {
                        marker = new BMapGL.Marker(data.points[i], {
                            icon: loc_orange
                        });
                        orangeMarkers.push(marker);
                        orangeLabels.push(label);
                    }
                    else {
                        marker = new BMapGL.Marker(data.points[i], {
                            icon: loc_green
                        });
                        greenMarkers.push(marker);
                        greenLabels.push(label);
                    }

                    // 点标记添加点击事件
                    map.addOverlay(marker);
                    map.addOverlay(label);

                }

            }
            batch_id+=10;
            // 函数内定时器的回调函数会继续调用 timer()
            if(batch_id<deviceList.length) {
                setTimeout(() => {
                    timer();
                }, 500);
            }
            else marker_state = 1;
        }

        //每秒转换10个坐标，否则会受百度并发限制
        function timer() {
            var pointArr = [];
            var count = batch_id+10;
            var totalNum = deviceList.length;
            if(count>totalNum) count=totalNum;

            for (var i = batch_id; i < count; i++) {
                point = new BMapGL.Point(deviceList[i].longitude, deviceList[i].latitude);
                pointArr.push(point);
            }

            convertor.translate(pointArr, 1, 5, translateCallback);
        }

        // 启动函数
        timer();
    }
	

   function showAll(){
	   if(marker_state == 2){
		   showGreen();
		   showRed();
		   marker_state = 1;
	   }
	   else if(marker_state == 3){
		   showGreen();
		   showOrange();
		   marker_state = 1;
	   }
   }
   
   function showWarning1(){
	   if(marker_state == 1){
		   hideGreen();
		   hideRed();
		   marker_state = 2;
	   }
	   else if(marker_state == 3){
		   hideRed();
		   showOrange();
		   marker_state = 2;
	   }
   }
   
   function showWarning2(){
   	   if(marker_state == 1){
   		   hideGreen();
   		   hideOrange();
   		   marker_state = 3;
   	   }
   	   else if(marker_state == 2){
   		   hideOrange();
   		   showRed();
   		   marker_state = 3;
   	   }
   }
   
   function showGreen(){
	   for(var i=0; i<greenMarkers.length; i++){
		   map.addOverlay(greenMarkers[i]);
           map.addOverlay(greenLabels[i]);
	   }
   }
   
   function showOrange(){
	   for(var i=0; i<orangeMarkers.length; i++){
	   		map.addOverlay(orangeMarkers[i]);
           map.addOverlay(orangeLabels[i]);
	   }
   }
   
   function showRed(){
	   for(var i=0; i<redMarkers.length; i++){
	   		map.addOverlay(redMarkers[i]);
           map.addOverlay(redLabels[i]);
	   }
   }
   
   function hideGreen(){
	   for(var i=0; i<greenMarkers.length; i++){
	   		map.removeOverlay(greenMarkers[i]);
           map.removeOverlay(greenLabels[i]);
	   }
   }
   
   function hideOrange(){
   	   for(var i=0; i<orangeMarkers.length; i++){
   	   		map.removeOverlay(orangeMarkers[i]);
           map.removeOverlay(orangeLabels[i]);
   	   }
   }
   
   function hideRed(){
   	   for(var i=0; i<redMarkers.length; i++){
   	   		map.removeOverlay(redMarkers[i]);
           map.removeOverlay(redLabels[i]);
   	   }
   }
        
        
</script>

</body>
</html>