PC-application/component/statistics/resident-analysis.js

Vue.component('resident-analysis', {
	template: '<div>\
				<div class="div-qingkuang-left">\
					<div class="div-header-block">\
						<div class="div-analysis-title">缴费情况</div>\
					</div>\
					<div class="c-position-r height-140">\
						<div class="div-right-info">\
							<div class="y-amount c-f16">{{yiJiaoFeiData}}</div>\
							<div class="y-rate c-f14 mt5">{{yiJiaoFeiPer}}</div>\
							<div class="y-title c-f12 mt10">已缴费人数</div>\
						</div>\
						<div class="div-left-info">\
							<div class="y-amount c-f16">{{weiJiaoFeiData}}</div>\
							<div class="y-rate c-f14 mt5">{{weiJiaoFeiPer}}</div>\
							<div class="y-title c-f12 mt10">未缴费人数</div>\
						</div>\
						<div id="jiaoFeiChart" class="height-140"></div>\
					</div>\
				</div>\
				<div class="div-qingkuang-right">\
					<div class="div-header-block">\
						<div class="div-analysis-title">健康分布</div>\
					</div>\
					<div class="c-position-r height-140">\
						<div id="healthChart" class="height-140"></div>\
						<div class="ui-col-1 ui-grid ui-grid-vertical">\
							<div id="jkCatalogs">\
								<div class="ui-col-1">\
									<span class="span-frame cb-12b7f5"></span>\
									<span class="c-f14 c-12b7f5">{{jianKangRQPer}}</span>\
									<span class="c-f12 c-909090">(健康人群)</span>\
								</div>\
								<div class="ui-col-1">\
									<span class="span-frame cb-fb5dab"></span>\
									<span class="c-f14 c-fb5dab">{{huanBingRQPer}}</span>\
									<span class="c-f12 c-909090">(患病人群)</span>\
								</div>\
								<div class="ui-col-1">\
									<span class="span-frame cb-cd67fd"></span>\
									<span class="c-f14 c-cd67fd">{{gaoWeiRQPer}}</span>\
									<span class="c-f12 c-666">(高危人群)</span>\
								</div>\
								<div class="ui-col-1">\
									<span class="span-frame cb-ffc800"></span>\
									<span class="c-f14 c-ffc800">{{huiFuQiRQPer}}</span>\
									<span class="c-f12 c-666">(恢复期人群)</span>\
								</div>\
								<div class="ui-col-1">\
									<span class="span-frame cb-61eb41"></span>\
									<span class="c-f14 c-61eb41">{{weiBiaoZRQPer}}</span>\
									<span class="c-f12 c-666">(未标注)</span>\
								</div>\
							</div>\
						</div>\
					</div>\
				</div>\
				<div class="div-qingkuang-left">\
					<div class="div-header-block">\
						<div class="div-analysis-title">服务分布比例</div>\
					</div>\
					<div id="serviceChart" class="height-140"></div>\
				</div>\
				<div class="div-qingkuang-right">\
					<div class="div-header-block">\
						<div class="div-analysis-title">性别情况</div>\
					</div>\
					<div class="c-position-r height-140">\
						<div class="div-right-info">\
							<div class="y-amount c-f16">{{maleData}}</div>\
							<div class="y-rate c-f14 mt5">{{malePer}}</div>\
							<div class="y-title c-f12 mt10">男性</div>\
						</div>\
						<div class="div-left-info">\
							<div class="y-amount c-f16 c-fb5dab">{{femaleData}}</div>\
							<div class="y-rate c-f14 mt5 c-fb5dab">{{femalePer}}</div>\
							<div class="y-title c-f12 mt10 c-fb5dab">女性</div>\
						</div>\
						<div id="sexChart" class="height-140"></div>\
					</div>\
				</div>\
				<div class="div-service-kuang">\
					<div class="div-header-block">\
						<div class="div-analysis-title">年龄分布</div>\
					</div>\
					<div id="ageChart" class="height-140"></div>\
				</div>\
			</div>',
	props: [],
	data: function() {
		return {
			yiJiaoFeiData:"",
			yiJiaoFeiPer:"",
			weiJiaoFeiData:"",
			weiJiaoFeiPer:"",
			jianKangRQPer:"",
			huanBingRQPer:"",
			gaoWeiRQPer:"",
			huiFuQiRQPer:"",
			weiBiaoZRQPer:"",
			maleData:"",
			malePer:"",
			femaleData:"",
			femalePer:"",
			chooseYear:"",//选择年份值
			curLevel:null,//当前level值
			curCode:null,//当前选中区域的code值
			curName:null,//当前选中区域名称值
			endDate:null,
			userRole:null,
			roleLevel:null,
			filterHtml:null,
			yearHtml:null
		}
	},
	mounted: function() {
		var vm = this;
	    var now = new Date();
	    if(now.getMonth() >= 6){
	        vm.chooseYear = now.getFullYear();
	    }else{
	        vm.chooseYear = now.getFullYear() - 1;
	    }
	    vm.userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
		vm.roleLevel = vm.userRole.code == '350200'  ? 4 : vm.userRole.code.length==6 ? 3 : 2;
	    vm.endDate = getEndDate(vm.chooseYear);
		vm.curLevel = vm.roleLevel;
		vm.curCode = vm.userRole.code;
		vm.curName = vm.userRole.name;
		
    	
    	//初始化数据
		initData(vm);
		
		//监听后退按钮的操作
		EventBus.$on("back-click", function(arg) {
			history.go(-1);
		});
		//刷新数据
		EventBus.$on('refresh-click', function(arg) {
			initData(vm);
		});
		
		//弹出筛选框
		EventBus.$on('filter-click', function(arg) {
			//弹框显示筛选条件
            Vuedals.Bus.$emit('new', {
                title: '条件筛选',
                onClose:function(data){
                    vm.chooseYear = data.year;
                    vm.curName = data.name;
                    vm.curCode = data.areaCode;
                    vm.curLevel = data.level;
                    vm.endDate = getEndDate(vm.chooseYear);
                    vm.yearHtml = data.yearHtml;
                     vm.filterHtml = data.filterHtml;
                    initData(vm);//刷新数据
                },
                component: 'resident-analysis-filter',
                props: {
                    curLevel: vm.roleLevel,
                    curCode: vm.userRole.code,
                    curName: vm.userRole.name,
                    yearHtml:vm.yearHtml,
                    filterHtml:vm.filterHtml
                }
            });
		});
		
		
	},
	methods: {
		
	}
})

//请求接口数据
function initData(vm) {
	EventBus.$emit('update-area-name', {areaName:vm.curName});//更新区域名称
	EventBus.$emit('update-statistics-time', {});//更新统计时间
	EventBus.$emit('update-statistics-year', {selectDate:vm.chooseYear+"年"});//更新统计年份
	var url = "/statistics/leveltwo_increment",reqPromise = [];
	
	reqPromise.push(httpRequest.get(url, {data: {endDate:vm.endDate,area:vm.curCode,level:vm.curLevel,index:16}}));
	reqPromise.push(httpRequest.get(url, {data: {endDate:vm.endDate,area:vm.curCode,level:vm.curLevel,index:15}}));
	reqPromise.push(httpRequest.get(url, {data: {endDate:vm.endDate,area:vm.curCode,level:vm.curLevel,index:vm.chooseYear==2016?7:36}}));
	reqPromise.push(httpRequest.get(url, {data: {endDate:vm.endDate,area:vm.curCode,level:vm.curLevel,index:6}}));
	reqPromise.push(httpRequest.get(url, {data: {endDate:vm.endDate,area:vm.curCode,level:vm.curLevel,index:8}}));

	Promise.all(reqPromise).then(function(datas) {
		var jiaoFeiArr = datas[0],
		healthArr = datas[1],
		serviceArr = datas[2],
		sexArr = datas[3],
		ageArr = datas[4];
		
		//缴费情况处理
		if(jiaoFeiArr.status == "200") {
			var data = jiaoFeiArr.data.index_16;
			var yiJiaoFeiData = "";
			var weiJiaoFeiData = "";
			if(data && data.length == 1 && data[0].code == 0) { //未缴费率为100%的情况，后台没有返回已缴费的数据
				vm.yiJiaoFeiData = "0";
				vm.yiJiaoFeiPer = "0.00%";
			}
			$.each(data, function(i, v) {
				if(v.code == 0 || v.code == 1) {
					if(v.code == 1) {
						yiJiaoFeiData = v.amount;
						v.rate = parseFloat(v.rate).toFixed(2);
						vm.yiJiaoFeiData = v.amount;
						vm.yiJiaoFeiPer = v.rate + "%";
					} else {
						weiJiaoFeiData = v.amount;
						v.rate = parseFloat(v.rate).toFixed(2);
						vm.weiJiaoFeiData = v.amount;
						vm.weiJiaoFeiPer = v.rate + "%";
					}
				}
			})
			jiaoFeiData(yiJiaoFeiData,weiJiaoFeiData);
		}
		
		//健康分布处理
		if(healthArr.status == "200") {
			var data = healthArr.data.index_15;
			var wbzdata = data[0].amount;
			var jkrqdata = data[1].amount;
			var hbrqdata = data[2].amount;
			var gwrqdata = data[3].amount;
			var hfqrqdata = data[4].amount;
			vm.weiBiaoZRQPer = parseFloat(data[0].rate).toFixed(2);
			vm.jianKangRQPer = parseFloat(data[1].rate).toFixed(2);
			vm.huanBingRQPer = parseFloat(data[2].rate).toFixed(2);
			vm.gaoWeiRQPer = parseFloat(data[3].rate).toFixed(2);
			vm.huiFuQiRQPer = parseFloat(data[4].rate).toFixed(2);
			healthData(jkrqdata,hbrqdata,gwrqdata,hfqrqdata,wbzdata);
		}
		
		//服务分布处理
		if(serviceArr.status=="200"){
			var data=serviceArr.data["index_"+(vm.chooseYear==2016?7:36)];
			var amountArr = [];
			$.each(data, function(i, v) {
				amountArr.push(v.amount);
			})
			serviceData(amountArr);			
		}
		
		//性别情况处理
		if(sexArr.status=="200"){
			var data = sexArr.data.index_6;
			var femaleData,maleData;
			$.each(data, function(i, v) {
				if(v.code=="1"){//女
					femaleData = v.amount;
					vm.femaleData = v.amount;
					vm.femalePer = parseFloat(v.rate).toFixed(2)+"%";
				}else{//男
					maleData = v.amount;
					vm.maleData = v.amount;
					vm.malePer = parseFloat(v.rate).toFixed(2)+"%";
				}
			})
			sexData(femaleData,maleData);			
		}
		
		
		//年龄分布处理
		if(ageArr.status=="200"){
			 var data=ageArr.data.index_8;
			 var amountArr = [];
			$.each(data, function(i, v) {
				amountArr.push(v.amount);
			})
			ageData(amountArr);
		}
	})
}