<%@ 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">
|
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;
|
}
|
|
#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: 1%;
|
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
|
}
|
.tools_box .charts_btn:hover {
|
cursor:pointer;
|
background:url(/img/charts_btn_bg_2.png) left top no-repeat
|
}
|
</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;
|
//通过地区名称加载地图
|
moralMap.mapInit(params["regionName"]);
|
//列表对象
|
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();
|
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'];
|
$.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 = {
|
name: _obj['name'],
|
mac: (_obj['mac']).toLowerCase(),
|
longitude: _obj['longitude'],
|
latitude: _obj['latitude'],
|
version:_obj['deviceVersion']['version']
|
}
|
var equStr = JSON.stringify(equ);
|
if(window["console"]!=undefined){
|
console.log(equStr);
|
}
|
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['Fe'];//东北角纬度，大一点
|
paramMap["Ge"]= bounds['Ge'];//东北角经度，大一点
|
paramMap["Ke"]= bounds['Ke'];//西北角纬度坐标，小一点
|
paramMap["Le"]= bounds['Le'];//西北角经度坐标，小一点
|
loadLazy("getMonitorpointList",paramMap,addOverMpoints);
|
startRefreshPage();
|
});
|
//地图加载完成后 加载监控点,速度慢
|
moralMap.addEventListener("tilesloaded", function(type, target) {
|
});
|
// 点击事件关闭 弹窗列表
|
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);
|
}
|
)
|
//跳转表单页面按钮事件
|
$(".charts_btn").click(
|
function (e) {
|
if(window['external']&&window['external']['showChartInfo']){
|
window['external'].showChartInfo("");
|
}else{
|
alert("");
|
}
|
}
|
);
|
//页面刷新
|
|
})(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"];
|
$.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"]);
|
}
|
}
|
}
|
});
|
}
|
</script>
|
