<template>
|
<div class="page-container">
|
<div id="allmap"></div>
|
</div>
|
</template>
|
<script>
|
import $ from 'jquery';
|
import {CORS, ajax, timeout, Timeout, getUrlStr} from '../libs/common';
|
import {mapImgSrc} from '../libs/map';
|
export default {
|
data: function() {
|
return {
|
inmap: '',
|
timeout: new Timeout(),
|
overlay: '',
|
imgs: mapImgSrc
|
}
|
},
|
methods: {
|
// 查询地图中的坐标点
|
searchMapDot: function() {
|
var _self = this;
|
this.timeout.start(function() {
|
// 请求查询后台，获取点信息
|
ajax({
|
type: 'post',
|
url: 'Sensor_mapinfoAction!searchAll',
|
async: true,
|
data: null,
|
dataType: 'json',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
var data = rs.data;
|
_self.addOverlay(data);
|
}
|
// 开启计时器
|
_self.timeout.open();
|
}
|
});
|
}, 4000);
|
},
|
// 添加地图中的覆盖物
|
addOverlay: function(data) {
|
var _self = this;
|
var points = format(data);
|
this.overlay.setData(points);
|
|
// 格式化数据
|
function format(data) {
|
var result = [];
|
for (var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var name = _data.sinf.device_name; // 设备名称
|
var count = _self.getCount(_data.state, _data.sinf); // 权重
|
var coordinates = [_data.longitude, _data.latitude]; //经纬度
|
var smoke = { // 烟感
|
name: '烟感：',
|
value: _data.state.smoke
|
};
|
var airhum = { // 湿度
|
name: '湿度：',
|
value: _data.state.airhum
|
};
|
var airtmp = { // 温度
|
name: '温度：',
|
value: _data.state.airtmp
|
};
|
var tmp={
|
count: count,
|
name: name,
|
smoke: smoke,
|
airtmp: airtmp,
|
airhum: airhum,
|
geometry: {
|
type: 'Point',
|
coordinates: coordinates
|
},
|
plus: _data
|
};
|
result.push(tmp);
|
}
|
|
return result;
|
}
|
},
|
getCount: function(data, alarms) {
|
var result = 0;
|
if(data.smoke>=alarms.smoke_alarm) { // 烟感警戒值
|
result = 3;
|
}else if(data.airhum>=alarms.airhum_alarm){ // 湿度境界值
|
result = 2;
|
}else if(data.airtmp>=alarms.airtmp_alarm) {
|
result=1;
|
}
|
|
return result;
|
},
|
showMapPanel: function(data) {
|
var point = new BMap.Point(data.geometry.coordinates[0], data.geometry.coordinates[1]);
|
var searchInforWin = null;
|
var opts = {
|
//title : warnList[i].title+'<a href="javascript:loadToHomeInfo();" style="margin-left: 1em;text-decoration:none">详情>></a>', //标题
|
title : data.name, //标题未开启
|
width : 290, //宽度
|
height : 120, //高度
|
panel : "panel", //检索结果面板
|
enableAutoPan : true, //自动平移
|
enableSendToPhone:false,
|
searchTypes :[
|
|
]
|
};
|
var url = getUrlStr({
|
province: data.plus.sinf.province,
|
city: data.plus.sinf.city,
|
county: data.plus.sinf.county,
|
device_name: data.plus.sinf.device_name
|
});
|
var content = '<div style="padding:6px;"><span>监测烟感值：</span>'+data.smoke.value+'PPM</div>'+
|
'<div style="padding:6px;"><span>环境湿度值：</span>'+data.airhum.value+'%RH</div>'+
|
'<div style="padding:6px;"><span>环境温度值：</span>'+data.airtmp.value+'℃</div>'+
|
'<div style="padding:6px"><a href="#/control/'+url+'" target="_blank">实时数据</a><a style="margin-left: 20px" href="#/history/'+url+'" target="_blank">历史数据</a></div>';
|
|
|
|
searchInforWin = new BMapLib.SearchInfoWindow(this.inmap.getMap(), content, opts);
|
searchInforWin.open(point);
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
// 初始化地图
|
this.inmap = new inMap.Map({
|
id: "allmap",
|
center: ["114.30419679", "30.57780611"],
|
zoom: {
|
value: 11,
|
show: false,
|
max: 22
|
}
|
});
|
|
// 设置地图覆盖物信息
|
this.overlay = new inMap.ImgOverlay({
|
tooltip: {
|
show: true,
|
formatter: function(data) {
|
var smoke = data.smoke;
|
var airtmp = data.airtmp;
|
var airhum = data.airhum;
|
return data.name+'<br>'+ //设备名称
|
smoke.name+smoke.value+'PPM<br>'+ // 烟感
|
airtmp.name+airtmp.value+'℃<br>'+ // 温度
|
airhum.name+airhum.value+'%RH'; // 湿度
|
}
|
},
|
style: {
|
normal: {
|
width: 25,
|
height: 25,
|
offsets: {
|
top: "-100%",
|
left: "-50%"
|
}
|
},
|
splitList: [
|
{
|
// 正常图标
|
start: 0,
|
end: 1,
|
icon: this.imgs.normal
|
},
|
{
|
// 温度告警图标
|
start: 1,
|
end: 2,
|
icon: this.imgs.airtmp
|
},
|
{
|
// 湿度告警图标
|
start: 2,
|
end: 3,
|
icon: this.imgs.airhum
|
},
|
{
|
// 湿度告警图标
|
start: 3,
|
icon: this.imgs.smoke
|
},
|
]
|
},
|
data: [],
|
event: {
|
onMouseClick: function(item) {
|
_self.showMapPanel(item[0]);
|
}
|
}
|
|
});
|
|
this.inmap.add(this.overlay);
|
|
// 查询地图坐标信息
|
this.searchMapDot();
|
|
// 设置主导航
|
this.$bus.$emit('setMainNav', 'home');
|
|
},
|
beforeDestroy: function() {
|
this.timeout.stop();
|
}
|
}
|
</script>
|
<style scoped>
|
#allmap {
|
height: 100%;
|
}
|
</style>
|
