app-big-data/component/intelligentDevice/manbing-tab.js

(function() {

	Vue.component('manbing-tab', {
		template: '<div style="position:relative;height:100%;">\
					<div class="sk-spinner sk-spinner-chasing-dots" v-show="!isRequestEnd" style="top: 50%;left:50%;margin-left:-0.1rem;margin-top: -0.1rem;position:absolute;">\
			            <div class="sk-dot1"></div>\
			            <div class="sk-dot2"></div>\
			       </div>\
	        		<div class="slider" v-show="isRequestEnd">\
							<div class="btn-group slider-nav" data-toggle="buttons">\
								<label @click="activeTab(0)" class="btn btn-default active bullet" data-index="1"><input type="radio" name="options" autocomplete="off" checked="">全部</label>\
								<label @click="activeTab(1)" class="btn btn-default bullet" data-index="2"><input type="radio" name="options" autocomplete="off">高血压</label>\
								<label @click="activeTab(2)" class="btn btn-default bullet" data-index="3"><input type="radio" name="options" autocomplete="off">糖尿病</label>\
							</div>\
							<div class="slider-container">\
								<div class="slider-wrapper">\
									<div class="slide" v-for="(disease,index) in diseaseData">\
										<div class="mt20">\
											<div class="div-juming-info" v-for="(data,dIndex) in disease" :class="{active: (activeidx == data.diseaseIndex)}" @click="activeContent(data,index)">\
												<div class="div-line1"></div>\
												<div class="div-line2"></div>\
												<div class="div-line3"></div>\
												<div class="div-line4"></div>\
												<div style="clear:both;" v-if="data.diseaseCondition === 0">\
													<div style="width:0.47rem;margin:0 auto;float:left;" class="dis-inblock">\
														<img src="../images/lvbiao_icon.png" class="c-vam" />\
													</div>\
												    <span class="c-B5E1FC c-f20 div-juming-color-name" style="float:left;">绿标居民&emsp;</span>\
													<span class="c-B5E1FC c-f26" style="float:left;">{{data.num}}</span>\
												</div>\
												<div style="clear:both;" v-if="data.diseaseCondition === 1">\
													<div style="width:0.47rem;margin:0 auto;float:left;" class="dis-inblock">\
														<img src="../images/huangbiao_icon.png" class="c-vam" />\
													</div>\
												    <span class="c-B5E1FC c-f20 div-juming-color-name" style="float:left;">黄标居民&emsp;</span>\
													<span class="c-B5E1FC c-f26" style="float:left;">{{data.num}}</span>\
												</div>\
												<div style="clear:both;" v-if="data.diseaseCondition === 2">\
													<div style="width:0.47rem;margin:0 auto;float:left;" class="dis-inblock">\
														<img src="../images/hongbiao_icon.png" class="c-vam" />\
													</div>\
												    <span class="c-B5E1FC c-f20 div-juming-color-name" style="float:left;">红标居民&emsp;</span>\
													<span class="c-B5E1FC c-f26" style="float:left;">{{data.num}}</span>\
												</div>\
												<div style="clear:both;" v-if="data.diseaseCondition === -1">\
													<div style="width:0.47rem;margin:0 auto;float:left;" class="dis-inblock">\
														<img src="../images/wubiao_icon.png" class="c-vam" />\
													</div>\
												    <span class="c-B5E1FC c-f20 div-juming-color-name" style="float:left;">无标签居民</span>\
													<span class="c-B5E1FC c-f26" style="float:left;">{{data.num}}</span>\
												</div>\
											</div>\
										</div>\
									</div>\
								</div>\
							</div>\
						</div>\
				</div>',
		props: ["activeidx"],
		data: function() {
			return {
				diseaseData: [],
				isRequestEnd:false
			}
		},
		methods: {
			activeContent: function(data, activeIndex) {
				//diseaseType为tab标签的值(0:全部;1:高血压;2:糖尿病)
				//activeIndex为子项的值(-1:无标签;0:绿标;1黄标;2红标)
				var diseaseType = $(".btn-group .btn.active").index();
				if(this.activeidx != data.diseaseIndex) {
					$(".div-juming-info").removeClass("active");
					this.activeidx = data.diseaseIndex;
				}
				
				//[叶泽华 ]代码添加处
				EventBus.$emit('device-map-filter', {
					diseaseType: diseaseType,
					diseaseCondition: data.diseaseCondition
				});
			},
			activeTab: function(type) {
				EventBus.$emit('device-map-filter', {
					diseaseType: type,
					diseaseCondition: ""
				});
			}
		},
		mounted: function() {
			var _self = this;
			getRequestData(_self);
		}
	})

	function getRequestData(_self) {
		var url = "/svr-iot/wlyy/chronicDiseaseCount";
		var reqUrl = [{
				url: url,
				reqType: 'get',
				data: {
					type: ""
				}
			},
			{
				url: url,
				reqType: 'get',
				data: {
					type: "1"
				}
			},
			{
				url: url,
				reqType: 'get',
				data: {
					type: "2"
				}
			}
		];

		httpRequest.getReqPromises(reqUrl).then(function(datas) {
			var allData = datas[0]; //全部tab数据
			var gaoxueyaData = datas[1]; //高血压tab数据
			var tangniaobingData = datas[2]; //糖尿病tab数据

			//获取全部的疾病数据
			if(allData.status == 200) {
				var allDiseaseData = allData.data.reverse();
				allDiseaseData = _.map(allDiseaseData, function(data, index) {
					data.diseaseIndex = index;
					return data;
				});
				_self.diseaseData.push(allDiseaseData);
			} else {
				toastr.error(allData.msg)
			}

			//获取高血压的疾病数据
			if(gaoxueyaData.status == 200) {
				var gaoXYDiseaseData = gaoxueyaData.data.reverse();
				gaoXYDiseaseData = _.map(gaoXYDiseaseData, function(data, index) {
					data.diseaseIndex = index + 4;
					return data;
				});
				_self.diseaseData.push(gaoXYDiseaseData);
			} else {
				toastr.error(gaoxueyaData.msg)
			}
			//获取糖尿病的疾病数据
			if(tangniaobingData.status == 200) {
				var tangLBDiseaseData = tangniaobingData.data.reverse();
				tangLBDiseaseData = _.map(tangLBDiseaseData, function(data, index) {
					data.diseaseIndex = index + 8;
					return data;
				});
				_self.diseaseData.push(tangLBDiseaseData);
			} else {
				toastr.error(tangniaobingData.msg)
			}
			_self.isRequestEnd = true;
			EventBus.$emit('data-load-complete', {});
				
			//【慢病患者情况】轮播
			setTimeout(function() {
				var slider1 = Slider.init({
					target: $('.slider'),
					time: 6000
				});
				
			}, 500)

		});


	}

})()