(function() {
var rs = [], //最新的结果
page = 1, // 当前分页索引
pageSize = 100, // 每页条数
diseaseType = "",
diseaseCondition = "",
colorMap = {
"0": ["#19ff8a"], // 绿标
"1": ["#ffae32"], // 黄标
"2": ["#ff2f6a"], // 红标
"-1": ["#aadeff"], // 没有标注
}
var flashTimer = null
Vue.component('device-map', {
template: '
\
\
\
加载中({{percent}}%)...
\
\
\
',
props: [],
data: function() {
return {
percent: 0,
points: [],
map: null
}
},
computed: {
},
methods: {
initMap: function() {
var vm = this
// 百度地图API功能
var map = new BMap.Map("allmap", {enableMapClick: false});
map.centerAndZoom(new BMap.Point(118.10,24.46),13);
map.enableScrollWheelZoom();
var mapStyle ={
style : "midnight" //设置地图风格为高端黑
}
map.setMapStyle(mapStyle);
// //单击获取点击的经纬度
map.addEventListener("click",function(e){
map.setCenter(new BMap.Point(e.point.lng, e.point.lat))
map.setZoom(18)
var pts = vm.filterByLocation(e.point.lng , e.point.lat)
if(vm.percent == 100) {
var idcards = _.pluck(pts,"idCard").join(",")
if(idcards) {
intelligentAPI.searchPatient({
idcards: idcards
}).then(function(res) {
if(res.status == 200) {
EventBus.$emit('update-patient-info', {
patientData: JSON.stringify(res.data)
})
}
})
}
}
setTimeout(function() {
map.panTo(new BMap.Point(e.point.lng, e.point.lat));
}, 300)
});
// map.addEventListener("tilesloaded",function(){
//
// });
vm.map = map
window.map = map
},
getLocations: function() {
var vm = this
var pointArr = []
intelligentAPI.findLocationByIdCard({
pageSize: pageSize,
page: page
}).then(function(res) {
if(res.status == 200) {
pointArr = _.map(res.detailModelList, function(o) {
o.lat = o.location.lat
o.lng = o.location.lon
o.lnglat = [o.location.lon, o.location.lat]
o.type = 'circle',
o.speed = 0.1,
o.color = colorMap[o.diseaseCondition][0]
o.max = 5
return o
})
vm.points = vm.points.concat(pointArr)
rs = vm.filterByDisease()
window.clearTimeout(flashTimer)
flashTimer = null
flashTimer = setTimeout(function() {
vm.initFlashMaker()
}, 2000)
vm.percent = ((page / Math.ceil(res.totalCount / pageSize))* 100).toFixed(2)
if(vm.percent >= 100) {
vm.percent = 100
}
if(Math.ceil(res.totalCount / pageSize) > page) {
setTimeout(function() {
page++
vm.getLocations()
}, 300)
} else {
vm.percent = 100
}
} else {
setTimeout(function() {
vm.getLocations()
}, 300)
}
}).catch(function() {
setTimeout(function() {
vm.getLocations()
}, 300)
})
},
filterByLocation: function(lng,lat) {
var vm = this
var p1 = new BMap.Point(lng,lat);
return _.filter(rs, function(o) {
var p2 = new BMap.Point(o.lng,o.lat);
return map.getDistance(p1,p2).toFixed(2) <= 100
})
},
filterByDisease: function() {
// diseaseType值(0:全部;1:高血压;2:糖尿病)
// diseaseCondition(-1:无标签;0:绿标;1黄标;2红标)
var vm = this
if(diseaseType) {
return _.filter(vm.points, function(o) {
return (!diseaseCondition || o.diseaseCondition == diseaseCondition)
&& (diseaseType=="0" || (diseaseType == o.label))
})
} else {
return vm.points
}
},
initFlashMaker: function() {
var vm = this
map.clearOverlays()
new FlashMarker(vm.map, rs)
}
},
mounted: function() {
var vm = this
vm.initMap()
vm.getLocations()
EventBus.$on('device-map-filter', function(o) {
diseaseType = o.diseaseType + ""
diseaseCondition = o.diseaseCondition + ""
rs = vm.filterByDisease()
vm.initFlashMaker()
});
}
})
})()