base_region.html

{extend name="public:form" /}
{block name="body"}
<style type="text/css">
.BMap_cpyCtrl {
        display: none;
    }

    .anchorBL {
        display: none;
    }
</style>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body" >
                          <form class="layui-form" >
                            <div class="layui-input-inline layui-show-xs-block"  style="width:130px;">
                              <select name="search_type" id="search_type">
                                <option value="1" {if $search_type eq 1 } selected {/if}>站名</option>
                                <option value="2" {if $search_type eq 2 } selected {/if}>站号</option>
                                <option value="3" {if $search_type eq 3 } selected {/if}>项目编号</option>
                                <option value="4" {if $search_type eq 4 } selected {/if}>机房二维码</option>
                              </select>
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                              <input type="text" name="search_text" placeholder="搜索内容" style="width:150px;" autocomplete="off" id="search_text" value="{$search_text}" class="layui-input">
                            </div>
                            <div class="layui-input-inline layui-show-xs-block"  style="width:130px;">
                              <select name="original_sp_id" id="original_sp_id">
                                <option value="0">运营商</option>
                                {volist name="operators" id="item"}
                                <option value="{$item.operator_id}"  {if $original_sp_id eq $item.operator_id } selected {/if} >{$item.operator_name}</option>
                                {/volist}
                              </select>
                            </div>
                             <div class="layui-input-inline layui-show-xs-block"  style="width:130px;">

                              <select name="area_id" id="area_id">
                              <option value="0"> 区域</option>
                              {volist name="regions" id="region"}
                              {if $region.level == 0}
                                <option disabled='disabled'  class='layui-disabled' >{$region.region_name}</option>
                              {else /}
                              <option value="{$region.id}" {if $area_id eq $region.id } selected {/if} >{$region.region_name}</option>
                              {/if}
                              {/volist}
                              </select>
                            </div>


                             <div class="layui-input-inline layui-show-xs-block"  style="width:130px;">
                               <select name="base_station_state"  id="base_station_state">
                                 <option value="0"> 基站状态</option>
                                    {volist name="basestatus" id="basestatu"}
                                    {if $basestatu.level == 0}
                                      <option disabled='disabled'  class='layui-disabled' >{$basestatu.cate_name}</option>
                                    {else /}
                                    <option value="{$basestatu.cate_id}" {if $base_station_state eq  $basestatu.cate_id} selected {/if} >&nbsp;&nbsp;&nbsp;&nbsp;{$basestatu.cate_name}</option>
                                    {/if}
                                    
                                    {/volist}
                              </select>
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                              <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i></button>
                            </div>
                          </form>
                          </div>
                            <div class="layui-card-header">
                            <div class="layui-input-inline layui-show-xs-block">
                            <p >
                                查询到基站 <span id="counts" >0</span> 座，其中有坐标的基站数量是 <span id="datacount">0</span> 座
                                ，本页显示 <span id="total" >0</span> 座
                            </p>
                            </div>
                        </div> 
                            <div class="layui-card-body" style='height:500px;'>
                            <div id="allmap" style='width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";'>
                            </div>

                        </div>
     
                      
                    </div>

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

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rhvOB6ZbAVXOb0yjajc6WOLFSCAsGGVC"></script>


<script type="text/javascript">
        var map = new BMap.Map("allmap", {enableMapClick: false}); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 初始化地图,设置中心点坐标和地图级别

        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
            ]
            }));
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        layui.use(['form', 'layer', 'laydate', 'upload'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
            layer = layui.layer;
            var timer = null;
            form.on('submit(search)',
                function(data) {
                    clearTimeout(timer)
                    timer = setTimeout(function(){
                    var search_type = $('#search_type').val();
                    var search_text = $('#search_text').val();
                    var original_sp_id = $('#original_sp_id').val();
                    var area_id = $('#area_id').val();
                    var base_station_state = $('#base_station_state').val();

                         $.ajax({
                            url: '/base_regiondata',
                            method: "get",
                            data: {original_sp_id:original_sp_id,search_type:search_type,search_text:search_text,area_id:area_id,base_station_state:base_station_state},
                           
                            success: function (res) {
                               if(res==null){
                                       layer.open({
                                    content: "没有查询到匹配数据",
                                    btn: ['确定'],
                                    yes: function () {
                                        layer.closeAll();
                                        window.location.reload();
                                    }
                                });
                               }

                        var datacount = res.datacount;
                        var counts = res.counts;
                        delete res.counts;
                        delete res.datacount;
                        var points = [];
                        var bm = new BMap.Map("allmap", {enableMapClick: false}); // 创建Map实例
                        var time = 0;
                        for (var i in res) {
                           time++;
                        }
                        var total = time - 2;
                        if (total < 1) {
                           total = 0
                        }
                        $("#total").text(total);
                            $("#counts").text(counts);
                            $("#datacount").text(datacount);
                            if (time <= 3) {
                                var point = new BMap.Point(res[0].longitude, res[0].latitude);
                                var content =
                                    "<p style= 'width: 200px;overflow: hidden;display: inline-block;text-overflow: ellipsis;white-space: nowrap;'>基站名称：" + res[0].station_name + "<br/>项目编号：" + res[0].proj_number + "<br/><a onclick=xadmin.add_tab('地图显示','/base_detai?id="+res[0].station_id+"',true,true)>查看详情</a></p>";

                                bm.addControl(new BMap.MapTypeControl({
                                    mapTypes: [
                                        BMAP_NORMAL_MAP,
                                        BMAP_HYBRID_MAP
                                    ]
                                }));
                                addMarker(point, content);
                                var opts = {
                                    width: 200,     // 信息窗口宽度
                                    height: 100,     // 信息窗口高度
                                    title: "", // 信息窗口标题
                                    enableMessage: true//设置允许信息窗发送短息
                                };


                                function addClickHandler(content, marker) {
                                    marker.addEventListener("mouseover", function (e) {
                                            openInfo(content, e)
                                        }
                                    );
                                }

                                function openInfo(content, e) {
                                    var p = e.target;
                                    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                                    bm.openInfoWindow(infoWindow, point); //开启信息窗口
                                }

                                //分拆执行 先执行虚拟坐标
                                function addMarker(point, content) {
                                    translateCallback = function (data) {
                                        bm.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别
                                        if (data.status === 0) {
                                            var marker = new BMap.Marker(data.points[0]);

                                            bm.addOverlay(marker); //把标注添加到地图上
                                            bm.setCenter(data.points[0]);
                                            addClickHandler(content, marker);
                                            bm.enableScrollWheelZoom(true);
                                        }
                                    }
                                    setTimeout(function () {
                                        var convertor = new BMap.Convertor();
                                        var pointArr = [];
                                        pointArr.push(point);
                                        convertor.translate(pointArr, 1, 5, translateCallback)
                                    }, 100);

                                }

                                return false;
                            }


                            //初始化坐标
                            var zPoint = res.zPoint;
                            var oPoint = res.oPoint;
                            delete res.zPoint;
                            delete res.oPoint;

                            var oGgPoint = new BMap.Point(oPoint.longitude, oPoint.latitude)

                            //设置缩放级别
                            var zZoom = getZoom(zPoint);
                            bm.centerAndZoom(oGgPoint, zZoom)
                            bm.enableScrollWheelZoom(true);
                            //添加地图类型控件
                            bm.addControl(new BMap.MapTypeControl({
                                mapTypes: [
                                    BMAP_NORMAL_MAP,
                                    BMAP_HYBRID_MAP
                                ]
                            }));

                            for (var i in res) {
                                var point = new BMap.Point(res[i].longitude, res[i].latitude)
                                var content =
                                    "<p style= 'width: 200px;overflow: hidden;display: inline-block;text-overflow: ellipsis;white-space: nowrap;'>基站名称：" + res[i].station_name + "<br/>项目编号：" + res[i].proj_number + "<br/><a onclick=xadmin.add_tab('地图显示','/base_detai?id="+res[i].station_id+"',true,true)>查看详情</a></p>";
                                addMarker(point, content);
                            }


                            var opts = {
                                width: 200,     // 信息窗口宽度
                                height: 80,     // 信息窗口高度
                                title: "", // 信息窗口标题
                                enableMessage: true//设置允许信息窗发送短息
                            };

                            function addClickHandler(content, marker) {
                                marker.addEventListener("mouseover", function (e) {
                                        openInfo(content, e)
                                    }
                                );
                            }

                            function openInfo(content, e) {
                                var p = e.target;
                                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                                var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                                bm.openInfoWindow(infoWindow, point); //开启信息窗口
                            }

                            //分拆执行 先执行虚拟坐标
                            function addMarker(point, content) {
                                translateCallback = function (data) {
                                    if (data.status === 0) {
                                        var marker = new BMap.Marker(data.points[0]);
                                        bm.addOverlay(marker); //把标注添加到地图上

                                        addClickHandler(content, marker);
                                    }
                                }
                                var convertor = new BMap.Convertor();
                                var pointArr = [];
                                pointArr.push(point);
                                convertor.translate(pointArr, 1, 5, translateCallback)
                            }


                             function getZoom(point) {
                                var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]//级别18到3。
                                var pointA = new BMap.Point(point.maxLng, point.maxLat);  // 创建点坐标A
                                var pointB = new BMap.Point(point.minLng, point.minLat);  // 创建点坐标B
                                var distance = map.getDistance(pointA, pointB).toFixed(2);
                                
                                 //获取两点距离,保留小数点后两位
                                for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                                    var result = zoom[i] - distance;
                                    if ((result > 0) && result < 1000){
                                        return 18 - i - 1
                                    } 
                                    else if(result > 0){
                                        return 18 - i + 3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                                    }
                                }
                            }












                               
                            },
                            error : function (XMLHttpRequest, textStatus, errorThrow ) {
                                console.log('AJAX 执行失败...');
                            }

                        });


                
                    },300)
                    return false;
                });


           

        });


</script>










<!-- <script type="text/javascript">
  // 百度地图API功能
        var map = new BMap.Map("allmap", {enableMapClick: false}); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 初始化地图,设置中心点坐标和地图级别

        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
     layui.use(['layer','form'], function(){
        $ = layui.jquery;
        var form = layui.form
        var search_type = $('#search_type').val();
        var search_text = $('#search_text').val();
        var original_sp_id = $('#original_sp_id').val();
        var area_id = $('#area_id').val();
        var base_station_state = $('#base_station_state').val();
         
         $.get("/base_regiondata",
          {search_type:search_type,search_text:search_text,original_sp_id:original_sp_id,area_id:area_id,base_station_state:base_station_state}, 
          function(res){
             
                            // var res = JSON.parse(res);
                               // console.log(res);
                            var points = [];
                            var bm = new BMap.Map("allmap", {enableMapClick: false}); // 创建Map实例
                            var time = 0;
                            for (var i in res) {
                                time++;
                            }
                            var total = time - 2;
                            if (total < 1) {
                                total = 0
                            }
                          
                            if (time <= 3) {
                                var point = new BMap.Point(res[0].longitude, res[0].latitude);
                                var content =
                                    "<p>基站名称：" + res[0].station_name + "<br/>项目编号：" + res[0].proj_number + "<br/><a onclick=xadmin.add_tab('地图显示','/base_detai?id="+res[0].station_id+"',true,true)>查看详情</a></p>";

                                bm.addControl(new BMap.MapTypeControl({
                                    mapTypes: [
                                        BMAP_NORMAL_MAP,
                                        BMAP_HYBRID_MAP
                                    ]
                                }));
                                addMarker(point, content);
                                var opts = {
                                    width: 200,     // 信息窗口宽度
                                    height: 80,     // 信息窗口高度
                                    title: "", // 信息窗口标题
                                    enableMessage: true//设置允许信息窗发送短息
                                };


                                function addClickHandler(content, marker) {
                                    marker.addEventListener("mouseover", function (e) {
                                            openInfo(content, e)
                                        }
                                    );
                                }

                                function openInfo(content, e) {
                                    var p = e.target;
                                    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                                    bm.openInfoWindow(infoWindow, point); //开启信息窗口
                                }

                                //分拆执行 先执行虚拟坐标
                                function addMarker(point, content) {
                                    translateCallback = function (data) {
                                        bm.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别
                                        if (data.status === 0) {
                                            var marker = new BMap.Marker(data.points[0]);

                                            bm.addOverlay(marker); //把标注添加到地图上
                                            bm.setCenter(data.points[0]);
                                            addClickHandler(content, marker);
                                            bm.enableScrollWheelZoom(true);
                                        }
                                    }
                                    setTimeout(function () {
                                        var convertor = new BMap.Convertor();
                                        var pointArr = [];
                                        pointArr.push(point);
                                        convertor.translate(pointArr, 1, 5, translateCallback)
                                    }, 100);

                                }

                                return false;
                            }


                            //初始化坐标
                            var zPoint = res.zPoint;
                            var oPoint = res.oPoint;
                            delete res.zPoint;
                            delete res.oPoint;

                            var oGgPoint = new BMap.Point(oPoint.longitude, oPoint.latitude)

                            //设置缩放级别
                            var zZoom = getZoom(zPoint);
                            bm.centerAndZoom(oGgPoint, zZoom)
                            bm.enableScrollWheelZoom(true);
                            //添加地图类型控件
                            bm.addControl(new BMap.MapTypeControl({
                                mapTypes: [
                                    BMAP_NORMAL_MAP,
                                    BMAP_HYBRID_MAP
                                ]
                            }));

                            for (var i in res) {
                                var point = new BMap.Point(res[i].longitude, res[i].latitude)
                                var content =
                                    "<p>基站名称：" + res[i].station_name + "<br/>项目编号：" + res[i].proj_number + "<br/><a onclick=xadmin.add_tab('地图显示','/base_detai?id="+res[i].station_id+"',true,true)>查看详情</a></p>";
                                addMarker(point, content);
                            }


                            var opts = {
                                width: 200,     // 信息窗口宽度
                                height: 80,     // 信息窗口高度
                                title: "", // 信息窗口标题
                                enableMessage: true//设置允许信息窗发送短息
                            };

                            function addClickHandler(content, marker) {
                                marker.addEventListener("mouseover", function (e) {
                                        openInfo(content, e)
                                    }
                                );
                            }

                            function openInfo(content, e) {
                                var p = e.target;
                                var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                                var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                                bm.openInfoWindow(infoWindow, point); //开启信息窗口
                            }

                            //分拆执行 先执行虚拟坐标
                            function addMarker(point, content) {
                                translateCallback = function (data) {
                                    if (data.status === 0) {
                                        var marker = new BMap.Marker(data.points[0]);
                                        bm.addOverlay(marker); //把标注添加到地图上

                                        addClickHandler(content, marker);
                                    }
                                }
                                var convertor = new BMap.Convertor();
                                var pointArr = [];
                                pointArr.push(point);
                                convertor.translate(pointArr, 1, 5, translateCallback)
                            }


                             function getZoom(point) {
                                var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]//级别18到3。
                                var pointA = new BMap.Point(point.maxLng, point.maxLat);  // 创建点坐标A
                                var pointB = new BMap.Point(point.minLng, point.minLat);  // 创建点坐标B
                                var distance = map.getDistance(pointA, pointB).toFixed(2);
                                
                                 //获取两点距离,保留小数点后两位
                                for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                                    var result = zoom[i] - distance;
                                    if ((result > 0) && result < 1000){
                                        return 18 - i - 1
                                    } 
                                    else if(result > 0){
                                        return 18 - i + 3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                                    }
                                }
                            }
                
            });
        return false;
         });
    
  
</script> -->
{/block}