工业级后台API v2
blame | history | patch | commit | commitdiff | ignore whitespace
xufenglei
2019-06-17 1dc145aab7bbf5128d5c75d52ba4e03f1fc2725b 
 src/main/webapp/view/map.jsp


@@ -2,7 +2,7 @@


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%@page isELIgnored="false" %>


<%


   String version ="1.000003";


   String version ="1.000004";


   response.setHeader("Cache-Control","no-store");


   response.setHeader("Pragrma","no-cache");


   response.setDateHeader("Expires",0);


@@ -13,6 +13,7 @@


    <title></title>


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


    <script type="text/javascript" src="/js/jquery.min.js"></script>


    <script type="text/javascript" src="/js/utils.js"></script>


   <script type="text/javascript">


        if(typeof (JSON) == 'undefined'){


           $.getScript("js/json2.js");


@@ -48,7 +49,17 @@


  padding:0;


  list-style:none;


}




a{


    color: #1900c6;


   text-decoration: none;


   cursor: pointer;


   font-size: 14px;


   font-weight: 300;


}


a:hover {


   text-decoration: underline;


   color: #e60012;


}


#popup_box {


   top: 75px;


   left: 20px;


@@ -105,7 +116,8 @@


   float: right;


   width: 70px;


   height: 28px;


   line-height: 28px


   line-height: 28px;


   cursor:pointer;


}




.list {


@@ -113,26 +125,31 @@


   clear: both;


   zoom: 1


}




.list-chart-span {


   cursor: pointer;


   background-color: #4c9bf1


}


.list li {


   padding: 10px 0;


   border-bottom: 1px dotted #eee;


   line-height: 40px;


   height: 40px;


   font-size: 20px;


   cursor: pointer;


   /*cursor: pointer;*/


}




.list span{


   float: right;


   position: relative;


   right: 18px;


   right: 5px;


   border-radius:4px;


   width: 70px;


   width: 40px;


   text-align: center;


   height: 24px;


   line-height: 24px;


   font-size: 16px;


   font-size: 14px;


   font-weight: bolder;


   color:  white;


   margin: 10px 0;


   padding:2px 0;


   margin-right: 8px;


@@ -144,6 +161,7 @@




.list .state01 {


   background-color: #FF9;


    color: #ff7f00;


}




.list .state02 {


@@ -156,9 +174,9 @@


}




.list .state04 {




   background-color: #eee;


   color: #777


   /*background-color: #eee;*/


   /*color: #777 ;*/


   background-color: #738d99 ;


}


         /*


           * 外面盒子样式---自己定义


@@ -230,17 +248,44 @@


.equ-data-box .equ-data-list li .grade01{color:#282828;background:url(/img/list_num_yellow.png) left top no-repeat}


.equ-data-box .equ-data-list li .grade02{background:url(/img/list_num_orange.png) left top no-repeat}


.equ-data-box .equ-data-list li .grade03{background:url(/img/list_num_red.png) left top no-repeat}


.tools_box{


   position: absolute;


   height: 120px;


   width: 400px;


   right: 1px;


   top: 20px;


   z-index: 1;


}


 .tools_box .charts_btn {


    position: relative;


   float: right;


   margin: 0;


   border: 0;


    height: 85px;


    width: 85px;


    background:url(/img/charts_btn_bg_1.png) left top no-repeat;


   background-size: 70%;


 }


 .tools_box .charts_btn:hover {


    cursor:pointer;


    background:url(/img/charts_btn_bg_2.png) left top no-repeat;


    background-size: 70%;


 }


</style>


<body>


<div class="main_body">


       <div class="search_box">


       <div class="tools_box">


         <div class="charts_btn">


         </div>


      </div>


       <!-- <div class="search_box">


      <button id="searchBtn" type="button">搜索</button>


      <input id="searchParam"/>


      </div>


     <div id="popup_box">


      </div> -->


     <!-- <div id="popup_box">


         <div id="equ_list" class="listview">


         </div>


     </div>


     </div> -->


     <div id="mapCanvas"></div>


     <div id="mapParams" style="display: none;">


        ${requestScope.mapParams}


@@ -255,15 +300,23 @@


   var moralMap = window.moralMap;


   var params = $.parseJSON($("#mapParams").html());


   moralMap['params'] = params;


    var mapType = getUrlParam("mapType");


    var mapOption = {};


    if(!!mapType && !!eval(mapType)) {


        mapOption["mapType"] = eval(mapType);


    }


    var showZoom = getUrlParam("showZoom");


   //通过地区名称加载地图


   moralMap.mapInit(params["regionName"]);


   moralMap.mapInit(params["regionName"],mapOption,showZoom);


   //列表对象


     var listView  =moralMap.initListView({id: "#equ_list",pageSize:12});


     window["listView"] = listView;


   //展示设备列表，click事件触发


   function showEqus(obj) {




      var params = moralMap['params'];


      var mpoint = obj.currentTarget.getOption();


        //$("#searchParam").val(mpoint['name']);


      var url = 'get-devices-by-mid-oid?mpId=' + mpoint['id'] + "&orgId=" + params['orgId'];


      listView.load(url); 


      moralMap.showPopupbox("#popup_box");


@@ -304,7 +357,13 @@


          var maxBounds = moralMap.getMaxBounds();


          var paramMap = {};


          paramMap["orgId"]=  params['orgId'];


          $.extend(paramMap,maxBounds);


           paramMap["regionCode"]=  params['regionCode'];


          // 为了适配旧接口


            paramMap["Fe"]=  maxBounds.northeastLat;//东北角纬度，大一点


            paramMap["Ge"]=  maxBounds.northeastLng;//东北角经度，大一点


            paramMap["Ke"]=  maxBounds.southwestLat;//西北角纬度坐标，小一点


            paramMap["Le"]=  maxBounds.southwestLng;//西北角经度坐标，小一点


          // $.extend(paramMap,maxBounds);


         loadLazy(url,paramMap,callback);


       }


   }


@@ -314,31 +373,39 @@


      for(var i in objs) {


            var obj = objs[i];


            if(moralMap.getEquipment(obj["mac"])==null){


                    obj['mouseover'] = function (type) {


                        if(type.target.getData()==null){


                            //当前设备数据为空时，设备悬停事件中 刷新一下数据


                            //refreshAllState();


                        }


                    }


               obj['click'] = function(){


                           var _obj = this.getOption();


                                       var _obj = this.getOption();


                                       if(_obj['mac']==null){


                                           alert("mac项未配置，请联系管理员设置");


                                           return;


                                       }


                                  var equ = {


                               methodName : 'showDeviceMonitor',


                              name: _obj['name'],


                              mac: (_obj['mac']).toLowerCase(),


                              longitude: _obj['longitude'],


                              latitude: _obj['latitude'],


                                        monitorPointId: _obj['monitorPointId'],


                               version:_obj['deviceVersion']['version']


                           }


                           var equStr = JSON.stringify(equ);


                           if(window["console"]!=undefined){


                              console.log(equStr);


                           }


                            if(window['external']&&window['external']['showMonitorInfo']){


                                 if(!!window['external']&&!!window['external']['callWin']){


                                        window['external'].callWin(equStr);


                           }else


                            if(!!window['external']&&!!window['external']['showMonitorInfo']){


                                window['external'].showMonitorInfo(equStr);


                             }else{


                                alert(equStr);


                             }


                          }


                    obj['mouseover'] = function (type) {


                  if(type.target.getData()==null){


                            //当前设备数据为空时，设备悬停事件中 刷新一下数据


                            refreshAllState();


                  }


                    }


               var moralMask = new moralMap.Equipment(obj);


                   moralMap.addOverlay(moralMask);


            }


@@ -364,46 +431,137 @@


            var bounds = moralMap.getBounds();


           paramMap["areaCode"]=  params['areaCode'];


           paramMap["orgId"]=  params['orgId'];


           paramMap["Fe"]=  bounds['Fe'];//东北角纬度，大一点


           paramMap["Ge"]=  bounds['Ge'];//东北角经度，大一点


           paramMap["Ke"]=  bounds['Ke'];//西北角纬度坐标，小一点


           paramMap["Le"]=  bounds['Le'];//西北角经度坐标，小一点


           // 为了适配旧接口


           paramMap["Fe"]=  bounds.northeastLat;//东北角纬度，大一点


           paramMap["Ge"]=  bounds.northeastLng;//东北角经度，大一点


           paramMap["Ke"]=  bounds.southwestLat;//西北角纬度坐标，小一点


           paramMap["Le"]=  bounds.southwestLng;//西北角经度坐标，小一点


            loadLazy("getMonitorpointList",paramMap,addOverMpoints);


            startRefreshPage();


            //startRefreshPage();


            showGrid();


   });


   //地图加载完成后 加载监控点,速度慢


   moralMap.addEventListener("tilesloaded", function(type, target) {


        showGrid();


   });




    //map为地图对象


    // TODO 临时


    function getBounds() {


        var bs = moralMap.getBounds();  //获取当前地图范围的经纬度


        // var bssw = bs.getSouthWest();      //获取西南角的经纬度(左下端点)


        // var bsne = bs.getNorthEast();      //获取东北角的经纬度(右上端点)


      if(!getBounds.topLeftAnchor){


            getBounds.topLeftAnchor = {};


            getBounds.topLeftAnchor.x0 =  bs.southwestLng;


            getBounds.topLeftAnchor.y0 =  bs.northeastLat;


      }


        return { 'x1': bs.southwestLng, 'y1': bs.southwestLat, 'x2': bs.northeastLng, 'y2': bs.northeastLat };


    }


    /**


     * 显示网格


     */


    // TODO 临时


    function showGrid(){


        var isShowGrid = getUrlParam("isShowGrid");


        if(!!isShowGrid){


            $(".tools_box").hide();


      }


        // if(!isShowGrid||moralMap.getZoom()<14){


        if(!isShowGrid||moralMap.getZoom()<14){


           return;


      }


        var XY = getBounds();


        var polygons = [];


        console.log(XY);


        var X1 = XY.x1;


        var Y2 = XY.y2;


        var X0 = getBounds.topLeftAnchor.x0;


        var Y0 = getBounds.topLeftAnchor.y0;


        var width = 0.0063;


        var height = 0.0048;


        // var multiple = 1000000;


        if(!!getBounds.topLeftAnchor) {


            X1=X0 + Math.ceil((X1-X0)/width-1)*width;


            Y2=Y0 + Math.ceil((Y2-Y0)/height)*height;


      }


        for (var i = X1; i < XY.x2; i = i + width) {


            for (var j = Y2; j > XY.y1; j = j - height) {


                //此类表示绘制一个多边形覆盖物（注意:一定要下面的Point列表为多变形的顶点,描线顺序为从上到下,从左到右，顺序乱了,绘制出来的多边形也会乱，如图二所示，图二是将顶点的顺序给错了（网格左上端点,网格左下端点，网格右上端点，网格右下端点））


                var polygon = new BMap.Polygon([


                    new BMap.Point(i, j),    //网格左上端点


                    new BMap.Point(i, j-height),  //网格左下端点


                    new BMap.Point(i+width, j-height),    //网格右下端点


                    new BMap.Point(i+width, j)         //网格右上端点


                ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.1});


                // polygon .addEventListener("click",function clickFunction(){


                //     alert("你居然敢点我");


                // });


                // moralMap.addOverlay(polygon);


                polygons.push(polygon);


            }


        }


        moralMap.addOverlays(polygons);


        if(!!showGrid.polygons){


            moralMap.removeOverlays(showGrid.polygons);


      }


        showGrid.polygons = polygons;


    }


   // 点击事件关闭 弹窗列表


    moralMap.addEventListener("click", function(type, target) {


        //moralMap.closePopupbox("#popup_box");


    });


   //地图放大缩小事件时，关闭弹窗


   moralMap.addEventListener('zoomstart', function(type) {});


   //地图放大缩小事件时，关闭弹窗


   moralMap.addEventListener('zoomend', function(type) {


        var endZoom = this.getZoom();


        if(endZoom>=moralMap.getZooMConfine()){//超过界限加载设备


        if(endZoom>=moralMap.getZoomConfine()){//超过界限加载设备


              loadOverlays("get-devices",addOverEquipments);


        }else{


            loadOverlays("get-monitorpoints",addOverMpoints);


        }


        moralMap.closePopupbox("#popup_box");


        //moralMap.closePopupbox("#popup_box");


   });


   moralMap.addEventListener('moveend', function(type) {


        var endZoom = this.getZoom();


        if(endZoom>=moralMap.getZooMConfine()){//超过界限加载设备


        if(endZoom>=moralMap.getZoomConfine()){//超过界限加载设备


              loadOverlays("get-devices",addOverEquipments);


        }else{


            loadOverlays("get-monitorpoints",addOverMpoints);


        }


        moralMap.closePopupbox("#popup_box");


        //moralMap.closePopupbox("#popup_box");


   });


   //搜索框单击事件


   $("#searchBtn").click(


      function(e) {


         var param = encodeURI($("#searchParam").val());


         moralMap.showPopupbox("#popup_box");


         //moralMap.showPopupbox("#popup_box");


         var url = 'get-devices-for-popup?name=' + param + "&orgId=" + params['orgId'];


         listView.load(url); 


      }


   )


   );


   $("#searchParam").keydown(function (event) {


        if(event.keyCode ==13) {


            $("#searchBtn").trigger("click");


        }


    })


   //跳转表单页面按钮事件


   $(".charts_btn").click(


       function (e) {


            var obj = {};


            obj['methodName'] = 'showChart';


            var objStr = JSON.stringify(obj);


            if(!!window['external']&&!!window['external']['callWin']){


                window['external'].callWin(objStr);


            }else


            if(!!window['external']&&!!window['external']['showChartInfo']){


                window['external'].showChartInfo("");


            }else{


                alert(objStr);


            }


        }


   );


   //页面刷新




})(jQuery);


@@ -425,12 +583,12 @@


   //刷新页面


   function refreshAllState() {


      var parma={};


      if(moralMap.isPopupBoxShow("#popup_box")) {


      /* if(moralMap.isPopupBoxShow("#popup_box")) {


         var popupEquMacs = moralMap.getPopupEquMacs();


         if(popupEquMacs!=null&&popupEquMacs.length>0){


            parma["popupEquMacs"] = popupEquMacs;


         }


      }


      } */


      //从缓存取


       var oldMarkerList = moralMap.getHorizonMarkers(true);


       var markerKeys = [];


@@ -446,49 +604,76 @@


       parma["markerKeys"] = markerKeys;


        parma["areaCode"] = moralMap['params']["areaCode"];


        parma["orgId"] = moralMap['params']["orgId"];


        $.ajax({


         type: "post",


         url: "get-real-state-data",


         data:JSON.stringify(parma),


         dataType:"json",


         contentType:"application/json;charset=utf-8",


         cache: false,


         async: true,


         success: function(data) {


            if(data!=null&&typeof data === 'object') {


                var resultMap = data["extData"];


                if(resultMap==null){


                   return;


                }


                  var markers = resultMap["markers"];


                  var layer = resultMap["layer"];


                  if(markers!=null&&markers.length>0){


                         if(layer=="monitorpoints"){


                             for(var a_i in markers){


                                var marker = markers[a_i];


                                var marker_id = marker["id"];


                                var mpoint = moralMap.getMpoint(marker_id);


                                if(mpoint!=null){


                                   mpoint.refreshState(marker["state"]);


                                }


        if((!!parma["popupEquMacs"]&&!!parma["popupEquMacs"].length)


         ||(!!parma["markerKeys"]&&!!parma["markerKeys"].length)){


            $.ajax({


                type: "post",


                url: "get-real-state-data",


                data:JSON.stringify(parma),


                dataType:"json",


                contentType:"application/json;charset=utf-8",


                cache: false,


                async: true,


                success: function(data) {


                    if(data!=null&&typeof data === 'object') {


                        var resultMap = data["extData"];


                        if(resultMap==null){


                            return;


                        }


                        var markers = resultMap["markers"];


                        var layer = resultMap["layer"];


                        if(markers!=null&&markers.length>0){


                            if(layer=="monitorpoints"){


                                for(var a_i in markers){


                                    var marker = markers[a_i];


                                    var marker_id = marker["id"];


                                    var mpoint = moralMap.getMpoint(marker_id);


                                    if(mpoint!=null){


                                        mpoint.refreshState(marker["state"]);


                                    }


//                           mpoint.refreshState(4);


                             }


                         }else{


                               for(var b_i in markers){


                                var marker = markers[b_i];


                                var marker_mac = marker["mac"];


                                var equipment = moralMap.getEquipment(marker_mac);


                                if(equipment!=null){


                                   equipment.refreshState(marker);


                                }


                               }


                         }


                  }


                  if(resultMap["popupEquStates"]!=null){


                     listView.refreshState(resultMap["popupEquStates"]);


                  }


            }


         }


      });


                                }


                            }else{


                                for(var b_i in markers){


                                    var marker = markers[b_i];


                                    var marker_mac = marker["mac"];


                                    var equipment = moralMap.getEquipment(marker_mac);


                                    if(equipment!=null){


                                        equipment.refreshState(marker);


                                    }


                                }


                            }


                            


                            var equ = {


                               methodName : 'refreshState',


                              markers : markers,


                              layer : layer	


                           }


                            var equStr = JSON.stringify(equ);


                     if(window["console"]!=undefined){


                     }


                               if(!!window['external']&&!!window['external']['callWin']){


                                      window['external'].callWin(equStr);


                     }


                        }


                        if(resultMap["popupEquStates"]!=null){


                            listView.refreshState(resultMap["popupEquStates"]);


                        }


                    }


                }


            });


      }


   }


	


   function callJS(jsonData){


      var jsonData = JSON.parse(jsonData);


      var methodName = jsonData.methodName;


      if("JumpBaiduMap" == methodName){


         moralMap.callJS(jsonData);


      } else if ("RefreshState" == methodName) {


         //$("#searchParam").val(JSON.stringify(jsonData));


         var states = jsonData.states;


         moralMap.refreshState(states);


      }


   }


</script>