| | |
| | | <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"); |
| | |
| | | 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; |
| | |
| | | <div class="charts_btn"> |
| | | </div> |
| | | </div> |
| | | <div class="search_box"> |
| | | <!-- <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} |
| | |
| | | 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"); |
| | |
| | | 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); |
| | | } |
| | | } |
| | |
| | | obj['mouseover'] = function (type) { |
| | | if(type.target.getData()==null){ |
| | | //当前设备数据为空时,设备悬停事件中 刷新一下数据 |
| | | refreshAllState(); |
| | | //refreshAllState(); |
| | | } |
| | | } |
| | | obj['click'] = function(){ |
| | |
| | | return; |
| | | } |
| | | var equ = { |
| | | methodName : 'showDeviceMonitor', |
| | | name: _obj['name'], |
| | | mac: (_obj['mac']).toLowerCase(), |
| | | longitude: _obj['longitude'], |
| | |
| | | } |
| | | 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); |
| | |
| | | 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.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) { |
| | | if(window['external']&&window['external']['showChartInfo']){ |
| | | 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(""); |
| | | alert(objStr); |
| | | } |
| | | } |
| | | ); |
| | |
| | | //刷新页面 |
| | | 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 = []; |
| | |
| | | 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; |
| | | for(var i in states){ |
| | | var state = states[i]; |
| | | var mpoint = moralMap.getMpoint(state.id); |
| | | if(mpoint!=null){ |
| | | mpoint.refreshState(state.state); |
| | | } |
| | | for(var j in state.devices){ |
| | | var marker = state.devices[j]; |
| | | var marker_mac = marker["mac"]; |
| | | var equipment = moralMap.getEquipment(marker_mac); |
| | | if(equipment!=null){ |
| | | equipment.refreshState(marker); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |