app-big-data/component/intelligentDevice/device-map.js

(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: '<div id="mapWrap">\
		<div v-show="percent<100" style="position: absolute;top: 50%;left: 50%;z-index: 999999;margin-left: -50px;">\
			<div class="sk-spinner sk-spinner-chasing-dots">\
                <div class="sk-dot1"></div>\
                <div class="sk-dot2"></div>\
    		</div>\
    		<div style="color: #fff;margin-top: 10px;">加载中（{{percent}}%）...</div>\
		</div>\
						<div id="allmap"></div>\
					</div>',
		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()
			});
		}

	})

})()