<style scoped>
|
#mapSearch {
|
position: absolute;
|
top: 50px;
|
z-index: 200;
|
width: 80%;
|
margin-left: 10%;
|
background-color: #FFFFFF;
|
padding: 2px;
|
border-radius: 6px;
|
}
|
.mapSearch-inner {
|
position: relative;
|
}
|
.mapSearch-inner .icon {
|
width: 32px;
|
height: 32px;
|
line-height: 32px;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.mapSearch-inner input {
|
position: absolute;
|
width: 90%;
|
top: 0;
|
left: 32px;
|
right: 10px;
|
height: 32px;
|
}
|
#mapHomeList {
|
position: fixed;
|
top:0;
|
right: 0;
|
bottom:0;
|
left: 0;
|
z-index: 600;
|
}
|
</style>
|
<template>
|
<div data-name="home" class="page">
|
<!-- Top Navbar -->
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="left">
|
<a href="javascript:window.location.href='../mobil/loginm.html'" class="link">
|
<i class="icon f7-icons">chevron_left</i>
|
<span>退出</span>
|
</a>
|
</div>
|
<div class="title center">首页</div>
|
<div class="right">
|
<a href="#" class="link panel-open" data-panel="right">
|
<i class="icon f7-icons">menu</i>
|
</a>
|
</div>
|
</div>
|
</div>
|
<!-- Scrollable page content -->
|
<div class="page-content">
|
<!-- <div id="mapSearch">
|
<div class="mapSearch-inner">
|
<i class="icon f7-icons">search</i>
|
<input type="text" placeholder="请输入机房名，查找指定机房" disabled="disabled">
|
</div>
|
</div> -->
|
<div id="map" style="height: 100%;"></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
return {
|
methods: {
|
// 初始化地图
|
initMap: function(id) {
|
var map = new BMap.Map(id);
|
var point = new BMap.Point(125.3192,43.8090);
|
map.centerAndZoom(point, 11); // 用城市名设置地图中心点
|
map.enableScrollWheelZoom();
|
map.disableDoubleClickZoom();
|
this.BMap = map;
|
this.centerMapByPoint();
|
},
|
createMapDot: function() {
|
if(!appAllStationStats) {
|
setTimeout(this.createMapDot, 1000);
|
return;
|
}
|
var _this = this;
|
var map = this.BMap;
|
var dotList = $.extend([], appAllStation);
|
this.setMapPages(dotList.length);
|
var markers = [];
|
for(var i=0; i<dotList.length; i++) {
|
var _dotList = dotList[i];
|
var dotIcon = new BMap.Icon(this.getMapStateImg(dotList[i].msg), new BMap.Size(36, 30)); // 设置图片
|
var pt = new BMap.Point(dotList[i].lng, dotList[i].lat);
|
var mk = new BMap.Marker(pt, {icon: dotIcon}); // 定义marker点
|
|
// 设置label
|
var label = new BMap.Label(dotList[i].msg, {offset:new BMap.Size(20,-10)}); // 标记当前图标的状态
|
label.setStyle({display: 'none', padding: '4px 2px'}); // 设置不可见
|
mk.setLabel(label);
|
|
// 设置点击事件
|
mk.addEventListener('click', function(e) {
|
var target = e.target;
|
_this.showPanelInfo(target);
|
});
|
|
// 设置标题
|
mk.setTitle(dotList[i].title);
|
this.markers.push(mk); // 将mk点添加到全局对象中
|
}
|
this.markerClusterer = new BMapLib.MarkerClusterer(map, {markers: this.markers});
|
this.updateMapDot();
|
},
|
updateMapDot: function() {
|
if(!appAllStationStats || !this.isRun) {
|
setTimeout(this.updateMapDot, 1000);
|
return;
|
}
|
var _this = this;
|
var mapPages = this.mapPages;
|
// 请求后台更新图标
|
$.ajax({
|
type: "post",
|
async: true,
|
url: "BattMap_informationAction!searchUserManageStation2",
|
data: "json="+JSON.stringify(mapPages),
|
dataType: "json",
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
for(var i=0; i<rs.length; i++) {
|
var _rs = rs[i];
|
var _data = _rs.data;
|
var mk = _this.getMarker(_data.StationName);
|
if(mk) {
|
var dotIcon = new BMap.Icon(_this.getMapStateImg(_rs.msg), new BMap.Size(36, 30)); // 设置图片
|
var label = new BMap.Label(_rs.msg, {offset:new BMap.Size(20,-10)}); // 标记当前图标的状态
|
label.setStyle({display: 'none', padding: '4px 2px'}); // 设置不可见
|
mk.setLabel(label);
|
|
// 设置地图图标
|
mk.setIcon(dotIcon);
|
mk.setTop(true);
|
}
|
}
|
|
// 更新分页信息
|
mapPages.pageCurr++;
|
if(mapPages.pageCurr>mapPages.pageNum || rs.length<mapPages.pageSize) {
|
mapPages.pageCurr=1;
|
}
|
},
|
complete: function() {
|
setTimeout(_this.updateMapDot, 4000);
|
}
|
|
});
|
},
|
recovery: function() {
|
var map = this.BMap;
|
this.markerClusterer.clearMarkers();
|
this.markerClusterer = new BMapLib.MarkerClusterer(map, {markers: this.markers});
|
this.centerMapByPoint();
|
},
|
getStaionByPoint(point) {
|
var stationInfo = false;
|
// 遍历所有机房
|
for(var i=0; i<appAllStation.length; i++) {
|
var info = appAllStation[i];
|
if(info.lng == point.lng && info.lat == point.lat) {
|
stationInfo = info;
|
}
|
}
|
return stationInfo;
|
},
|
getMapImageUrls() { // 地图图标列表
|
var user_logo = this.user_logo;
|
var rs = new Object();
|
var mapImages = this.mapImages;
|
rs.normal = mapImages.Chart_normal_str; // 普通机房图标
|
rs.behind = mapImages.Chart_behind_str; // 落后图标
|
rs.timeout = mapImages.Chart_timeout_str; // 延时机房图标
|
rs.warn = mapImages.Chart_warn_str; // 告警机房图标
|
rs.nuclear = mapImages.Chart_nuclear_cap_str; // 核容放电
|
rs.devalarm = mapImages.Chart_dev_alarm_str; // 设备告警
|
rs.precharge = mapImages.Chart_pre_charge_str; // 预充电
|
rs.float = mapImages.Chart_online_charge_str; // 浮充
|
rs.powercut = mapImages.Chart_poff_str;
|
rs.defaults = mapImages.Chart_install_str;
|
rs.xuhang = mapImages.Chart_xuhang_str;
|
|
/* rs.normal = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_normal}"; // 普通机房图标
|
rs.behind = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_behind}"; // 落后图标
|
rs.timeout = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_timeout}"; // 延时机房图标
|
rs.warn = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_warn}"; // 告警机房图标
|
rs.nuclear = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_nuclear_cap}"; // 核容放电
|
rs.devalarm = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_dev_alarm}"; // 设备告警
|
rs.precharge = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_pre_charge}"; // 预充电
|
rs.float = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_online_charge}"; // 浮充
|
rs.powercut = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_poff}";
|
rs.defaults = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:chart_install}";
|
rs.xuhang = "User_ChartAction!serchByInfo?json={Chart_file:'"+user_logo+"',Chart_name:Chart_xuhang}"; */
|
return rs;
|
},
|
setMapImages: function() {
|
var _this = this;
|
var user_logo = this.user_logo;
|
var temp = {
|
"Chart_file": user_logo
|
};
|
var _this = this;
|
$.ajax({
|
type: 'post',
|
async: false,
|
url: 'User_ChartAction!serchByInfo1',
|
data: 'json='+JSON.stringify(temp),
|
dataType: 'json',
|
success:function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
console.log(rs.data);
|
_this.mapImages = rs.data[0];
|
}
|
},
|
error: function() {
|
|
}
|
});
|
},
|
getMapStateImg(cla) {
|
var imgs = this.getMapImageUrls();
|
var rs = imgs.normal;
|
switch(cla) {
|
case 'item-normal':
|
rs = imgs.normal;
|
break
|
case 'item-warn': // 告警
|
rs = imgs.warn;
|
break;
|
case 'item-behind': // 落后
|
rs = imgs.behind;
|
break;
|
case 'item-diaozhan':
|
rs = imgs.timeout; // 掉站
|
break;
|
case 'item-timeout': // 延时
|
rs = imgs.timeout;
|
break;
|
case 'item-poff': // 停电
|
rs = imgs.powercut;
|
break;
|
case 'item-dev_alarm': // 61850告警
|
rs = imgs.devalarm;
|
break;
|
case 'item-online_charge': // 61850在线浮充
|
rs = imgs.float;
|
break;
|
case 'item-nuclear_cap': // 61850核容
|
rs = imgs.nuclear;
|
break;
|
case 'item-pre_charge': // 61850预充电
|
rs = imgs.precharge;
|
break;
|
case 'item-xuhang': // 续航不足
|
rs = imgs.xuhang;
|
break;
|
default:
|
rs = imgs.defaults;
|
break;
|
}
|
|
return rs;
|
},
|
centerMapByPoint() {
|
var map = this.BMap;
|
// 请求后台根据数据更改地图中心坐标
|
$.ajax({
|
type: "post",
|
url: "Positiomap_usrAction!serchByCondition",
|
async:true,
|
dataType:'text',
|
data:null,
|
success: function(rs){
|
rs = eval('('+rs+')');
|
var model = eval('('+rs.result+')');
|
if(model.code == 1) {
|
var data = model.data[0];
|
var _point = new BMap.Point(data.map_longitude,data.map_latitude);
|
map.centerAndZoom(_point, data.map_level); // 用城市名设置地图中心点
|
}
|
}
|
});
|
},
|
setMapPages(num) {
|
var mapPages = this.mapPages;
|
mapPages.pageAll = num;
|
var pageNum = Math.ceil(mapPages.pageAll/mapPages.pageSize);
|
mapPages.pageNum = pageNum;
|
},
|
getMarker: function(title) {
|
var markers = this.markers;
|
var rs = false;
|
for(var i=0;i<markers.length; i++) {
|
var marker = markers[i];
|
var _title = marker.getTitle();
|
if(_title == title) {
|
rs = marker;
|
}
|
}
|
return rs;
|
},
|
showPanelInfo: function(data) {
|
var _this = this;
|
var point = new BMap.Point(data.point.lng, data.point.lat);
|
var stationInfo = this.getStaionByPoint(point);
|
if(!stationInfo) {
|
alert('面板信息查询失败！');
|
return;
|
}
|
var temp = {
|
StationId: stationInfo.sId
|
};
|
// 查询面板信息
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattMap_informationAction!searchUserManageStation3',
|
data: 'json='+JSON.stringify(temp),
|
dataType: 'json',
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
if(rs.length != 0) {
|
var data = rs[0];
|
//console.info(data);
|
var content = '<div style="padding:6px;"><span>蓄电池组告警数目：</span>'+data.code+'<a style="margin-left: 14px" href="javascript:loadToWarnPage();"></a></div>'+
|
'<div style="padding:6px;"><span>蓄电池组落后数目：</span>'+data.sum+'<a style="margin-left: 14px" href="javascript:loadToBehindPage();"></a></div>'+
|
'<div style="padding:6px;"><span>蓄电池组延时数目：</span>'+data.newsum+'<a style="margin-left: 14px" href="javascript:loadToDischargeDelay();"></a></div>'+
|
'<div style="padding:6px"><a href="javascript:showContrlInfo();">监测数据</a>'+
|
'<a style="margin-left: 20px" href="javascript:showHomeInfo();">基站信息</a></div>'+
|
'<div style="padding:6px;"><span>地址：</span>'+data.data.Address+'</div>'+
|
'<input type="hidden" class="ipt-hide home" value="'+data.data.StationName+'">'+
|
'<input type="hidden" class="ipt-hide province" value="'+data.data.stationName1+'">'+
|
'<input type="hidden" class="ipt-hide county" value="'+data.data.stationName5+'">'+
|
'<input type="hidden" class="ipt-hide sid" value="'+data.data.StationId+'">'+
|
'<input type="hidden" class="ipt-hide city" value="'+data.data.stationName2+'">';
|
|
var list = {
|
title: data.data.StationName,
|
content: content
|
};
|
|
_this.showMapPanelByPoint(point, list);
|
}
|
|
}
|
});
|
},
|
showMapPanelByPoint: function(point, dataList) {
|
var map = this.BMap;
|
var searchInforWin = null;
|
var opts = {
|
title : dataList.title, //标题未开启
|
width : '290', //宽度
|
height : 160, //高度
|
panel : "panel", //检索结果面板
|
enableAutoPan : true, //自动平移
|
enableSendToPhone:false,
|
searchTypes :[
|
// BMAPLIB_TAB_SEARCH, //周边检索
|
// BMAPLIB_TAB_TO_HERE, //到这里去
|
// BMAPLIB_TAB_FROM_HERE //从这里出发
|
]
|
};
|
|
searchInforWin = new BMapLib.SearchInfoWindow(map, dataList.content, opts);
|
searchInforWin.open(point);
|
},
|
getOverlays: function() {
|
var map = this.BMap;
|
var allOverlays = map.getOverlays();
|
var rs = [];
|
for (var i = 0; i < allOverlays.length; i++){
|
var allOverlay = allOverlays[i];
|
if(typeof allOverlay.getTitle == 'function') {
|
rs.push(allOverlay);
|
}
|
}
|
return rs;
|
|
},
|
removeOverlay: function(title) {
|
var map = this.BMap;
|
var overlays = this.getOverlays();
|
for (var i = 0; i < overlays.length; i++){
|
var overlay = overlays[i];
|
var overlayTitle = overlay.getTitle();
|
if(overlayTitle == title) {
|
console.log(title);
|
map.removeOverlay(overlay);
|
}
|
}
|
},
|
delMarker: function(title) {
|
var map = this.BMap;
|
var marker = this.getMarker(title);
|
map.removeOverlay(marker);
|
},
|
changeMarkers: function(data) {
|
var map = this.BMap;
|
var markers = this.markers;
|
var points = [];
|
var tmpMarkers = [];
|
for(var i=0; i<markers.length; i++) {
|
var marker = markers[i];
|
var markerTitle = marker.getTitle();
|
for(var k=0; k<data.length; k++) {
|
var _data = data[k];
|
if(_data.title == markerTitle) {
|
tmpMarkers.push(marker);
|
var point = marker.point;
|
points.push(new BMap.Point(point.lng, point.lat));
|
break;
|
}
|
}
|
|
}
|
this.markerClusterer.clearMarkers();
|
if(tmpMarkers.length> 200) {
|
this.markerClusterer = new BMapLib.MarkerClusterer(map, {markers: tmpMarkers});
|
}else {
|
map.clearOverlays();
|
for(var i=0; i<tmpMarkers.length; i++) {
|
var marker = tmpMarkers[i];
|
map.addOverlay(marker);
|
}
|
}
|
var v = map.getViewport(points);
|
map.centerAndZoom(v.center,v.zoom);
|
}
|
},
|
data: function() {
|
return {
|
isRun:"",
|
Bmap: "", // 地图对象
|
markerClusterer: '',
|
user_logo: getCookie('user_logo'), // 地图图标的组
|
markers: [], // 地图makers的集合
|
mapImages: {},
|
mapPages: {
|
pageSize:50, // 每页的行数
|
pageCurr:1, // 当前页码数
|
pageAll:1, // 数目
|
pageNum: 0,
|
pageNew: true
|
}
|
}
|
},
|
on:{
|
pageInit:function(e, page) {
|
var _this = this;
|
pages.home = this; // 将this对象绑定到全局
|
setIsRun(this, "#view-home"); // 开启检测页面是否被激活
|
this.initMap('map');
|
this.setMapImages();
|
this.createMapDot();
|
},
|
pageAfterOut: function() {
|
this.isRun = false;
|
}
|
}
|
}
|
</script>
|
