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

Vue.component('resident-analysis', {
	template: '<div>\
	            <div class="ui-grid plr10 mt20">\
				<div class="div-qingkuang-left">\
					<div class="div-header-block">\
						<div class="div-analysis-title">缴费情况</div>\
					</div>\
					<div class="ui-grid ui-grid-middle height-140">\
					    <div class="ui-col-1 c-t-center c-ffc800">\
                            <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 ui-col-0" style="width: 40%"></div>\
						<div class="ui-col-1 c-t-center c-12b7f5">\
							<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>\
				</div>\
				<div class="ui-col-1"></div>\
				<div class="div-qingkuang-right">\
					<div class="div-header-block">\
						<div class="div-analysis-title">健康分布</div>\
					</div>\
					<div class="ui-grid ui-grid-middle height-140">\
						<div id="healthChart" class="height-140 c-t-center" style="width: 40%"></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 mt5">\
									<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 mt5">\
									<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 mt5">\
									<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 mt5">\
									<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>\
				<div class="ui-grid plr10 mt20">\
				<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="ui-col-1"></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>\
				<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.sessionStorage.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 colors = "#42C7FF,#FFC84C,#FB5DAB,#CD67FD,#795548,#607d8b,#ff5722,#cddc39,#9e9e9e,#3f51b5,#f44336,#9c27b0".split(',');
			var nameArr=[];
			var rateArr =[];
			if(vm.chooseYear == "2016") {
				$.each(data, function(i, v) {
					if(v.code == 1 || v.code == 2 || v.code == 3 || v.code == 7) {
						v.rate = parseFloat(v.rate).toFixed(2);
						nameArr.push(v.name);
						rateArr.push(v.rate);
					}
				})
				serviceData(nameArr,rateArr,colors.slice(0, nameArr.length),vm.chooseYear);
			}else{
				arry = _.chain(data).filter(function(v) {
									return !_.contains(["0","2","13"],v.code)
								}).map(function(v) {
									v.rate = parseFloat(v.rate).toFixed(2);
									return {"value":v.rate, "name":v.name}
								}).value();
				$.map(arry,function(item,index){
					nameArr.push(item.name)
					rateArr.push(item.value)
				})
				serviceData(nameArr,rateArr,colors.slice(0, nameArr.length),vm.chooseYear);
			}

		}

		//性别情况处理
		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);
		}
	})
}