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">{{data["高血压人群"].总人数 | formatData}}</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">{{data["高血压人群"].上月新增 | formatData}}</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">{{data["高血压人群"].环比}}</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">{{data["糖尿病人群"].总人数 | formatData}}</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">{{data["糖尿病人群"].上月新增 | formatData}}</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">{{data["糖尿病人群"].环比}}</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>\
				<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">{{data["孕产妇人群"].总人数 | formatData}}</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">{{data["孕产妇人群"].上月新增 | formatData}}</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">{{data["孕产妇人群"].环比}}</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>\
				<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">{{data["65岁以上老年人人数"].总人数 }}</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">{{data["65岁以上老年人人数"].上月新增}}</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">{{data["65岁以上老年人人数"].环比}}</span>\
						</div>\
					</div>\
				</div>\
			</div>\
		</div>',
		props: ["data"],
		data: function() {
			return {
				activeIndex:0,
				cacheActiveIndex:0
			}
		},
		mounted: function() {
			
		},
		filters:{
			formatData:function(value){
				return toThousands(value)
			}
		},
		methods: {
			diseaseClick:function(type){
				this.activeIndex = type;
				this.cacheActiveIndex = type;
				EventBus.$emit('refresh-json-data', {type:type});
			},
			diseaseMouseOver:function(){
				this.activeIndex = null;
			},
			diseaseMouseOut:function(){
				this.activeIndex = this.cacheActiveIndex;
			},
			detailClick:function(type){//type:0高血压 1糖尿病
				var height = (0.42 * window.screen.width) + 'px';
				parent.layer.open({
					id: 'LAY_layuipro', //设定一个id，防止重复弹出
				    type: 2,
				    title: false,
				    closeBtn: 0,
				    shade: 0.5,
				    shadeClose: true,
				    area:  ['7.604rem', '4.1875rem'],
				    content: '../../../page/bigData/html/alert.html?type='+type
				});
			}
		},
		watch:{
			data:function(data){
				this.data = data;
			}
		}
		
	})

})()