(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() }); } }) })()