<%@ 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/sockjs.min.js"></script>
|
<script type="text/javascript" src="/js/stomp.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/newmoralmap.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 {
|
border-bottom: 1px dotted #eee;
|
line-height: 25px;
|
height: 25px;
|
font-size: 12px;
|
/*cursor: pointer;*/
|
}
|
|
.list span {
|
float: right;
|
position: relative;
|
right: 5px;
|
border-radius: 4px;
|
width: 40px;
|
text-align: center;
|
height: 20px;
|
line-height: 20px;
|
font-size: 12px;
|
font-weight: bolder;
|
color: lightgrey;
|
margin-right: 8px;
|
margin-top: 2.5px;
|
}
|
|
.list .state00 {
|
background-color: #00C600
|
}
|
|
.list .state01 {
|
background-color: #FF9;
|
}
|
|
.list .state02 {
|
background-color: #F93;
|
}
|
|
.list .state03 {
|
background-color: #F00;
|
}
|
|
.list .state04 {
|
background-color: #488FD2;
|
}
|
|
/*
|
* 外面盒子样式---自己定义
|
*/
|
|
.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>
|
<textarea style="width: 300px;height:400px;" id="searchParam"></textarea>
|
</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 hostAndPort = document.location.host;
|
var moralMap = window.moralMap;
|
var params = $.parseJSON($("#mapParams").html());
|
moralMap['params'] = params;
|
var orgId = params["orgId"];
|
var regionCode = params["regionCode"];
|
var provinceCode = regionCode.toString().substring(0, 2) + "0000";
|
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();
|
var oldWindMarkerList = moralMap.getHorizonWindMarkers();
|
|
moralMap.addOverlays(oldMarkerList);
|
moralMap.addOverlays(oldWindMarkerList);
|
//从缓存取
|
//超界到后台取数据,地图为空时取
|
if (moralMap.isOverBounds() || moralMap.getOverlays().length == 0) {
|
var maxBounds = moralMap.getMaxBounds();
|
var paramMap = {};
|
paramMap["orgId"] = params['orgId'];
|
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);
|
}
|
}
|
|
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: 'showVoc',
|
name: _obj['name'],
|
mac: (_obj['mac']).toLowerCase(),
|
longitude: _obj['longitude'],
|
latitude: _obj['latitude'],
|
monitorPointId: _obj['monitorPointId'],
|
version: _obj['deviceVersion']['version'],
|
provinceCode: provinceCode
|
}
|
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']['showVocInfo']) {
|
window['external'].showVocInfo(equStr);
|
} else {
|
alert(equStr);
|
}
|
}
|
var moralMask = new moralMap.Equipment(obj);
|
moralMap.addOverlay(moralMask);
|
if (obj['hasWindInfo'] && obj['state'] != 4) {
|
var moralDeviceWind = new moralMap.Device(obj);
|
moralMap.addOverlay(moralDeviceWind);
|
}
|
}
|
}
|
}
|
}
|
|
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) {
|
loadOverlays("get-devices", addOverEquipments);
|
//moralMap.closePopupbox("#popup_box");
|
});
|
moralMap.addEventListener('moveend', function (type) {
|
loadOverlays("get-devices", addOverEquipments);
|
//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);
|
}
|
}
|
);
|
|
var ws;
|
if (typeof (WebSocket) === "undefined") {
|
alert("您的浏览器不支持WebSocket");
|
} else {
|
ws = new WebSocket('ws://' + hostAndPort + '/screen/webSocket/' + orgId + '&' + regionCode);
|
ws.onopen = function () {
|
};
|
|
//获得消息事件
|
ws.onmessage = function (msg) {
|
// $("#searchParam").val(JSON.parse(msg.data));
|
moralMap.refreshWindDir(JSON.parse(JSON.parse(msg.data)));
|
if (moralMap.showSensors && typeof (moralMap.showSensors) == "function") {
|
moralMap.showSensors(JSON.parse(JSON.parse(msg.data)));
|
}
|
};
|
|
//关闭事件
|
ws.onclose = function () {
|
};
|
//发生了错误事件
|
ws.onerror = function () {
|
};
|
}
|
|
})(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);
|
}
|
}
|
}
|
|
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;
|
// $("#searchParam").val(JSON.stringify(jsonData));
|
if ("JumpBaiduMap" == methodName) {
|
moralMap.callJS(jsonData);
|
} else if ("RefreshState" == methodName) {
|
var states = jsonData.states;
|
moralMap.refreshState(states);
|
} else if ("DeliverSensors" == methodName) {
|
// moralMap.showSensors(jsonData);
|
}
|
}
|
</script>
|
