app-big-data/page/bigData/component/disease-crowd.js

(function() {

	Vue.component('disease-crowd', {
		template: '<div v-if="data" class="left-panel-img">\
			<div class="div-disease-item" @click="diseaseClick(0)" :class="{active: activeIndex == 0}" @mouseout="diseaseMouseOut" @mouseover="diseaseMouseOver">\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">高血压人群</h4>\
				<img src="../images/icon.png" class="icon-img" @click="detailClick(0)">\
				<div class="c-row">\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data1.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data1.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data1.ringRatio}}</span>\
						</div>\
					</div>\
				</div>\
			</div>\
			<div class="div-disease-item mt10" @click="diseaseClick(1)" :class="{active: activeIndex == 1}" @mouseout="diseaseMouseOut" @mouseover="diseaseMouseOver">\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">糖尿病人群</h4>\
				<img src="../images/icon.png" class="icon-img" @click="detailClick(1)">\
				<div class="c-row">\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data2.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data2.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data2.ringRatio}}</span>\
						</div>\
					</div>\
				</div>\
			</div>\
			<div class="div-disease-item mt10" @click="diseaseClick(2)" :class="{active: activeIndex == 2}" @mouseout="diseaseMouseOut" @mouseover="diseaseMouseOver">\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">孕产妇人群</h4>\
				<img src="../images/icon.png" class="icon-img" @click="detailClick(2)">\
				<div class="c-row">\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data3.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data3.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data3.ringRatio}}</span>\
						</div>\
					</div>\
				</div>\
			</div>\
			<div class="div-disease-item mt10" @click="diseaseClick(3)" :class="{active: activeIndex == 3}" @mouseout="diseaseMouseOut" @mouseover="diseaseMouseOver">\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">65岁以上老年人人数</h4>\
				<img src="../images/icon.png" class="icon-img" @click="detailClick(3)">\
				<div class="c-row">\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">总人数</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data4.totalNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">上月新增</span>\
							</p>\
							<span class="c-fff71a c-f26 c-bold">{{data4.addNumber}}</span>\
							<span class="c-b5e1fc c-f16">人</span>\
						</div>\
					</div>\
					<div class="c-33 bg-icon">\
						<div class="absolute-content">\
							<p class="c-b5e1fc c-f12">\
								<span class="c-b5e1fc c-f16">环比</span>\
							</p>\
							<img src="../images/zengzhang.png" class="zengzhang-img"/>\
							<span class="c-b5e1fc c-f26 ml20 c-bold">{{data4.ringRatio}}</span>\
						</div>\
					</div>\
				</div>\
			</div>\
		</div>',
		props: ["data","town"],
		data: function() {
			return {
				activeIndex:0,
				cacheActiveIndex:0,
				data1:{},//高血压
				data2:{},//糖尿病
				data3:{},//孕产妇人群
				data4:{},//65岁以上老年人人数
			}
		},
		mounted: function() {
			
		},
		filters:{
			formatData:function(value){
				return toThousands(value)
			}
		},
		methods: {
			initData:function(){
				var data1 = this.data[0].successFlg?this.data[0].detailModelList:[];
				var data2 = this.data[1].successFlg?this.data[1].detailModelList:[];
				var data3 = this.data[2].successFlg?this.data[2].detailModelList:[];
				var data4 = this.data[3].successFlg?this.data[3].detailModelList:[];
				this.gxyformatData(data1);
				this.tnbformatData(data2);
				this.ycfformatData(data3);
				this.lnrformatData(data4);
			},
			gxyformatData:function(data){//高血压数据
				var vm = this,idx;
				_.map(data[0].VIEW_13_0013,function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data1 = {totalNumber:data[0].VIEW_13_0013[idx].HC_13_0021,addNumber:data[1].VIEW_13_0036[idx].HC_13_0021,ringRatio:(data[2].VIEW_13_0037[idx]&&data[2].VIEW_13_0037[idx].HC_13_0023 || "0")};
			},
			tnbformatData:function(data){//糖尿病数据
				var vm = this,idx;
				_.map(data[0].VIEW_13_0026 || [],function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data2 = {totalNumber:data[0].VIEW_13_0026[idx].HC_15_1006,addNumber:data[1].VIEW_13_0034[idx].HC_15_1006,ringRatio:(data[2].VIEW_13_0027[idx]&&data[2].VIEW_13_0027[idx].HC_15_1007 || "0")};
			},
			ycfformatData:function(data){//孕产妇数据
				var vm = this,idx;
				_.map(data[0].VIEW_16_0009,function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data3 = {totalNumber:data[0].VIEW_16_0009[idx].HC_15_1006,addNumber:data[1].VIEW_16_0010[idx].HC_15_1006,ringRatio:data[2].VIEW_16_0011[idx].HC_15_1007};
			},
			lnrformatData:function(data){//老年人数据
				var vm = this,idx;
				_.map(data[0].VIEW_15_0001,function(item,index){
					if(vm.town=="上饶市" && item.firstColumn=="合计"){//上饶市
						idx = index;
					}else if(item.firstColumn==vm.town){
						idx = index;
					}
				})
				vm.data4 = {totalNumber:data[0].VIEW_15_0001[idx].HC_15_1006,addNumber:data[1].VIEW_15_0011[idx].HC_15_1006,ringRatio:data[2].VIEW_15_0008[idx].HC_15_1009};
			},
			diseaseClick:function(type){
				this.activeIndex = type;
				this.cacheActiveIndex = type;
				if($(event.target).hasClass("icon-img")){//点击图片,则不触发重新请求数据
					return false;
				}
				EventBus.$emit('refresh-json-data', {type:type});//触发首页重新请求数据方法
			},
			diseaseMouseOver:function(){
				this.activeIndex = null;
			},
			diseaseMouseOut:function(){
				this.activeIndex = this.cacheActiveIndex;
			},
			detailClick:function(type){//type:0高血压 1糖尿病,2孕产妇3老年人
				var height = (0.42 * window.screen.width) + 'px',url=httpRequest.alertUrl;
				if(type==0){
					url += '/page/bigData/html/alert1.html';
				}else if(type==1){
					url += '/page/bigData/html/alert2.html';
				}else if(type==2){
					url += '/page/bigData/html/alert3.html';
				}else if(type==3){
					url += '/page/bigData/html/alert4.html';
				}
				var width = (0.7604 * window.screen.width) + 'px';
				var height = (0.41875 * window.screen.width) + 'px';
				var hei
				top.layer.open({
					id: 'LAY_layuipro', //设定一个id，防止重复弹出
				    type: 2,
				    title: false,
				    closeBtn: 0,
				    shade: 0.5,
				    shadeClose: true,
				    area:  [width, height],
				    content: url
				});
			}
		},
		watch:{
			data:function(data){
				if(data&&data.length>0){
					this.data = data;
					this.initData();
				}
			}
		}
		
	})

})()