czapp/pages/amap/fence/fence.js

(function () {
    var page = {
        init: function ($page, param) {
            
            $page.find('#fence-switch').rlswitch();
            var userinfo = renlian.storage.get('userinfo');



            // //地图初始化
            var map = new AMap.Map("fence-map", {
                center: [120.210649,30.246071],//地图中心点
                zoom: 12 //地图显示的缩放级别
            });
            renlian.layer.loading(true, "加载数据中");


            map.on('complete', function(){
                getFenceData();
                renlian.layer.loading(false);
            });
            

            var oldCircle = null;
            var circleFence = null;
            var rangeObj = $('#fence-radius');

            function getFenceData(){
                renlian.httpget(config.webapi+'?s=api/get_fence_info',userinfo.baseinfo.plate,function(res){
                    if(!res.success){
                        // renlian.layer.toast(res.message);
                        var fenceInfo = {radius:500, center:param.default}
                        if(!circleFence){
                            circleFence = new AMap.Circle({
                                center: fenceInfo.center,
                                radius: fenceInfo.radius, 
                                strokeOpacity: 0,
                                strokeWeight: 0,
                                strokeOpacity: 0.2,
                                fillOpacity: 0.3,
                                fillColor : '#1791fc',
                                zIndex: 50,
                            });
                        }

                        if(!oldCircle){
                            oldCircle = new AMap.Circle({
                                center: [0,0],
                                radius: 0, 
                                strokeOpacity: 0,
                                strokeWeight: 0,
                                strokeOpacity: 0.2,
                                fillOpacity: 0.3,
                                fillColor : '#ff1111',
                                zIndex: 50,
                            });
                            oldCircle.setMap(map);
                        }

                        if(!rangeObj){
                            rangeObj = $('#fence-radius');
                        }
    
    
                        rangeObj[0].value = fenceInfo.radius;
                        $('#display-radius')[0].innerHTML = rangeObj[0].value;
    
    
                        circleFence.setMap(map)
                        map.setFitView(circleFence);
                        return;
                    }
                    if(!oldCircle){
                        oldCircle = new AMap.Circle({
                            center: [0,0],
                            radius: 0, 
                            strokeOpacity: 0,
                            strokeWeight: 0,
                            strokeOpacity: 0.2,
                            fillOpacity: 0.3,
                            fillColor : '#ff1111',
                            zIndex: 50,
                        });
                    }
                    var fence = JSON.parse(res.data);
                    var fenceStatus = fence.fenceStatus;
                    if(fenceStatus !== false){
                        $('#fence-switch').addClass('f-active');
                    }

                  
                    if(fence.fenceInfo){
                        var fenceInfo = fence.fenceInfo.data;
                        fenceInfo.radius =  parseInt(fenceInfo.radius)
                        fenceInfo.center = new AMap.LngLat(fenceInfo.center.lng, fenceInfo.center.lat)
                        oldCircle.setCenter(fenceInfo.center);
                        oldCircle.setRadius(fenceInfo.radius);
                        oldCircle.setMap(map);
                    }else{
                        
                    }

                    if(!circleFence){
                        circleFence = new AMap.Circle({
                            center: fenceInfo.center,
                            radius: fenceInfo.radius, 
                            strokeOpacity: 0,
                            strokeWeight: 0,
                            strokeOpacity: 0.2,
                            fillOpacity: 0.3,
                            fillColor : '#1791fc',
                            zIndex: 50,
                        });
                    }
                    if(!rangeObj){
                        rangeObj = $('#fence-radius');
                    }


                    rangeObj[0].value = fenceInfo.radius;
                    $('#display-radius')[0].innerHTML = rangeObj[0].value;


                    circleFence.setMap(map)
                    map.setFitView(circleFence);
        
                });
            }

            // getFenceData()


            

            


            //获取要设置的半径
            function getSetRadius(){
                return rangeObj[0].value; 
            }

            $('#fence-radius').on('input',function(){
                $('#display-radius')[0].innerHTML = this.value;
                var radius = getSetRadius();
                circleFence.setRadius(radius);
                map.setFitView([ circleFence ]);
                
            });

            map.on('moveend', function(){
                var center = map.getCenter();
                circleFence.setCenter(center);
            });

            //保存
            $page.find('#save-fence').on('tap', function(){
                
                renlian.layer.confirm('保存将会覆盖原围栏', function (_index) { 
                    if(_index === '1'){
                        var data = getPostData();
                        if(!data){
                            renlian.layer.toast('围栏信息有误或者为空');
                            return;
                        }
                        postFence(data);
                    }else{
                        return;
                    }
                }, '保存围栏', ['否', '是']);
            });

            //获取提交数据
            function getPostData(){
                var fenceEnable = getAbleStatus();
                var circleCenter = circleFence.getCenter();
                var center = {lng: circleCenter.lng, lat:circleCenter.lat}

                var fenceData = {};
                fenceData.type = 'circle';
                fenceData.data = {};
                fenceData.data.radius = circleFence.getRadius();
                fenceData.data.center = center;

                var data = {};
                data.vehicleNumber = userinfo.baseinfo.deviceNumber;
                data.plate = userinfo.baseinfo.plate;
                data.data =  JSON.stringify(fenceData);
                data.fenceAlarmEnable = fenceEnable;
                return data;
            }

            //获取启用状态
            function getAbleStatus(){
                var status = $('#fence-switch').hasClass('f-active');
                if(status){
                    return true;
                }else{
                    return false;
                }
            }


            //post围栏信息
            function postFence(data){
                renlian.httppost(config.webapi+'?s=api/save_fence_info',data,function(res){
                    if(!res.success){
                        renlian.layer.toast(res.message);
                        return;
                    }
                    var oldInfo = JSON.parse(data.data);
                    var center = new AMap.LngLat(oldInfo.data.center.lng, oldInfo.data.center.lat)
                    if(oldCircle){
                        oldCircle.setCenter(center);
                        oldCircle.setRadius(oldInfo.data.radius);
                    }
                    renlian.layer.toast('保存成功');

                });
            }


            

            
        }
    };

    return page;
})();