~admin/screen_api_v2.git

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page isELIgnored="false" %>
<%
    String version ="1.000004";
    response.setHeader("Cache-Control","no-store");
    response.setHeader("Pragrma","no-cache");
    response.setDateHeader("Expires",0);
%>
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <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");
          }
    </script>
    <script type="text/javascript" src="/js/moralmap.js?version=<%=version%>"></script>
    <script type="text/javascript" src="/js/paging.js"></script>
</head>
<style type="text/css">
     body,
     html,
     #mapCanvas{
         width: 100%;
         height: 100%;
         overflow: hidden;
         margin: 0;
         z-index: 0;
         font-size: 14px;
         font-family: "微软雅黑";
     }
     .anchorBL {
         display: none;
     }
     .main_body{
         border: 0;
         margin: 0;
         width: 100%;
         height: 100%;
         position: relative;
     }
*{
  margin:0;
  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;
    position: absolute;
    z-index: 1;
    height: 390px;
    width: 320px;
    margin: 0 auto;
    padding: 10px 25px;
    border: 1px solid #eee;
    background: white;
    display:none;
}
 
.listview{
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 0;
    height: 390px;
    width: 92%;
    position: absolute; 
}
 
 
.search_box {
    /*border-bottom: 1px solid #eee;*/
    border-radius: 4px;
    top: 20px;
    left: 21px;
    clear: both;
    zoom: 1;
    padding-top: 10px;
    padding-right: 15px;
    position: absolute;
    z-index: 1;
    height: 36px;
    width: 354px;
    background: white;
}
 
 
.search_box input {
    margin: 0;
    width: 245px;
    float: right;
    height: 24px;
    line-height: 24px
}
 
.search_box button {
    margin-left: 10px;
    float: right;
    width: 70px;
    height: 28px;
    line-height: 28px;
    cursor:pointer;
}
 
.list {
    padding: 10px 0;
    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;*/
}
 
.list span{
    float: right;
    position: relative;
    right: 5px;
    border-radius:4px;
    width: 40px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: bolder;
    color:  white;
    margin: 10px 0;
    padding:2px 0;
    margin-right: 8px;
}
 
.list .state00 {
background-color: #00C600
}
 
.list .state01 {
    background-color: #FF9;
    color: #ff7f00;
}
 
.list .state02 {
    
    background-color: #F93;
}
 
.list .state03 {
    background-color: #F00;
}
 
.list .state04 {
    /*background-color: #eee;*/
    /*color: #777 ;*/
    background-color: #738d99 ;
}
            /*
              * 外面盒子样式---自己定义
              */
            
            .page_div {
                margin:0 auto;
                font-size: 10px;
                font-family: "microsoft yahei";
                color: #666666;
                box-sizing: border-box;
                text-align: center;
            }
            /*
             * 页数按钮样式
             */
            
            .page_div a {
                min-width:23px;
                height: 22px;
                border: 1px solid #dce0e0!important;
                text-align: center;
                margin: 0 0px;
                margin-right: 1px;
                cursor: pointer;
                line-height: 22px;
                color: #666666;
                font-size: 10px;
                display: inline-block;
            }
            
            #firstPage,
            #lastPage {
                width: 40px;
                color: #0073A9;
                border: 1px solid #0073A9!important;
            }
            
            #prePage,
            #nextPage {
                width: 50px;
                color: #0073A9;
                border: 1px solid #0073A9!important;
            }
            
            .page_div .current {
                background-color: #0073A9;
                border-color: #0073A9;
                color: #FFFFFF;
            }
            
            .totalPages {
                margin: 0 10px;
            }
            
            .totalPages span,
            .totalSize span {
                color: #0073A9;
                margin: 0 5px;
            }
            
.equ-data-box{width:351px;border:1px solid #dad5d5;background-color:#f6f6f6;padding:12px 0 12px 0;border-radius:3px;margin:10px auto;overflow:hidden;zoom:1;}
.equ-data-box .equ-data-list{width:330px;margin:0 0 0 10px;border-left:1px solid #d0cdcd;border-top:1px solid #d0cdcd;border-bottom:1px solid #d0cdcd;overflow:hidden;zoom:1;}
.equ-data-box .equ-data-list li{background:url(/img/list_li_bg.png) left top repeat-x;width:109px;height:165px;float:left;text-align:center;color:#282828;border-right:1px solid #d0cdcd}
.equ-data-box .equ-data-list li p{height:55px;padding-top:12px;line-height:55px;font-size:18px}
.equ-data-box .equ-data-list li span{height:60px;line-height:50px;display:block;color:#fff;font-size:40px}
.equ-data-box .equ-data-list li em{font-size:14px;line-height:28px;font-style:normal;display:block}
.equ-data-box .equ-data-list li .grade00{background:url(/img/list_num_green.png) left top no-repeat}
.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="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 id="equ_list" class="listview">
            </div>
      </div> -->
      <div id="mapCanvas"></div>
      <div id="mapParams" style="display: none;">
          ${requestScope.mapParams}
      </div>
</div>
</body>
 
</html>
<script>
//页面初始化
(function($) {
    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"],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");
    }
    function loadLazy(url,paramMap,callBack,lazyKeyer){
        if(lazyKeyer==undefined){
            lazyKeyer = moralMap.lazyKeyer;
        }
        var key = lazyKeyer();
        setTimeout(function(){
            //只执行最后一次请求,防止地图抖动
            if(key==undefined||lazyKeyer(key)){
                        $.ajax({
                        type:"get",
                        url:url,
                        data:paramMap,
                        async:false,
                        cache: false,
                        success:function(res){
                            if(callBack!=null){
                                if(res.code==1&&lazyKeyer(key)){
                                    callBack(res.data);
                                }
                            }
                        }
                    });
            }
        },500);
 
    }
   function loadOverlays(url,callback){
        //从缓存取
        var oldMarkerList = moralMap.getHorizonMarkers();
        moralMap.addOverlays(oldMarkerList);
        //从缓存取
        //超界到后台取数据,地图为空时取
        if(moralMap.isOverBounds()||moralMap.getOverlays().length==0){
            var maxBounds = moralMap.getMaxBounds();
            var paramMap = {};
            paramMap["orgId"]=  params['orgId'];
            // 为了适配旧接口
            paramMap["Fe"]=  maxBounds.northeastLat;//东北角纬度，大一点
            paramMap["Ge"]=  maxBounds.northeastLng;//东北角经度，大一点
            paramMap["Ke"]=  maxBounds.southwestLat;//西北角纬度坐标，小一点
            paramMap["Le"]=  maxBounds.southwestLng;//西北角经度坐标，小一点
            // $.extend(paramMap,maxBounds);
            loadLazy(url,paramMap,callback);
        }
    }
    function addOverEquipments(jsonData){
        if(moralMap.layer()=="equipments"){
        var objs = jsonData = null?[]:jsonData;
        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();
                                       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){
                                    }
                                    if(!!window['external']&&!!window['external']['callWin']){
                                        window['external'].callWin(equStr);
                                    }else
                                    if(!!window['external']&&!!window['external']['showMonitorInfo']){
                                        window['external'].showMonitorInfo(equStr);
                                    }else{
                                        alert(equStr);
                                    }
                              }
                   var moralMask = new moralMap.Equipment(obj);
                   moralMap.addOverlay(moralMask);
                }
        }
        }
    }
  function addOverMpoints(data){
          if(moralMap.layer()=="monitorpoints"){
          var mpoints = data = null?[]:data;
        for(var i in mpoints) {
                var mpParam = mpoints[i];
                if(moralMap.getMpoint(mpParam["id"])==null){
                    mpParam['click'] = showEqus;
                   var mpObj = new moralMap.Monitorpoint(mpParam);
                   moralMap.addOverlay(mpObj);
                }
        }
          }
    }
    //地图load
    moralMap.addEventListener("load", function(type, target) {
            var paramMap = {};
            var bounds = moralMap.getBounds();
            paramMap["areaCode"]=  params['areaCode'];
            paramMap["orgId"]=  params['orgId'];
            // 为了适配旧接口
            paramMap["Fe"]=  bounds.northeastLat;//东北角纬度，大一点
            paramMap["Ge"]=  bounds.northeastLng;//东北角经度，大一点
            paramMap["Ke"]=  bounds.southwestLat;//西北角纬度坐标，小一点
            paramMap["Le"]=  bounds.southwestLng;//西北角经度坐标，小一点
            loadLazy("getMonitorpointList",paramMap,addOverMpoints);
            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()){//超过界限加载设备
                 loadOverlays("get-devices",addOverEquipments);
         }else{
                loadOverlays("get-monitorpoints",addOverMpoints);
         }
         //moralMap.closePopupbox("#popup_box");
    });
    moralMap.addEventListener('moveend', function(type) {
         var endZoom = this.getZoom();
         if(endZoom>=moralMap.getZoomConfine()){//超过界限加载设备
                 loadOverlays("get-devices",addOverEquipments);
         }else{
                loadOverlays("get-monitorpoints",addOverMpoints);
         }
         //moralMap.closePopupbox("#popup_box");
    });
    //搜索框单击事件
    $("#searchBtn").click(
        function(e) {
            var param = encodeURI($("#searchParam").val());
            //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);
    var _intervalNum=-1;
    function startRefreshPage(){
         if(_intervalNum==-1){
               _intervalNum = self.setInterval(function(){
              refreshAllState();
             },10000);
         }
         setTimeout(function(){
            refreshAllState();
         },5000);
    }
    function stopRefreshPage(){
        window.clearInterval(_intervalNum);
        _intervalNum=-1;
    }
    //刷新页面
    function refreshAllState() {
        var parma={};
        /* 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 = [];
        key = moralMap.layer()=="monitorpoints"?"id":"mac";
        for(var i in oldMarkerList){
            var marker = oldMarkerList[i];
            var key_value = marker.getOption()[key];
            if(key_value!=null){
                markerKeys.push(key_value);
            }
        }
        parma["layer"] =moralMap.layer();
        parma["markerKeys"] = markerKeys;
        parma["areaCode"] = moralMap['params']["areaCode"];
        parma["orgId"] = moralMap['params']["orgId"];
        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"]);
                        }
                    }
                }
            });
        }
    }
    
    function callJS(jsonData){
        moralMap.callJS(jsonData);
        refreshAllState();
    }
</script>