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

(function() {

	Vue.component('disease-crowd', {
		template: '<div v-if="data">\
			<div class="div-disease-item" @click="diseaseClick(0)" :class="{active: activeIndex == 0}" >\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">高血压人群</h4>\
				<img src="../images/icon.png" class="icon-img">\
				<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}" >\
				<h4 class="c-b5e1fc c-f16 c-t-center div-disease-title">糖尿病人群</h4>\
				<img src="../images/icon.png" class="icon-img">\
				<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">\
				<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">\
				<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
			}
		},
		mounted: function() {
			
		},
		filters:{
			formatData:function(value){
				return toThousands(value)
			}
		},
		methods: {
			diseaseClick:function(type){
				this.activeIndex = type;
				if(type==0){//高血压
					EventBus.$emit('refresh-json-data', {type:0});
				}else if(type==1){//糖尿病
					EventBus.$emit('refresh-json-data', {type:1});
				}
			}
		},
		watch:{
			data:function(data){
				this.data = data;
			}
		}
		
	})

})()