居民分析代码提交

api/statistics-api.js

@@ -42,7 +42,17 @@
        //获得团队的详情
        getTeamInfo: function(data){
            return httpRequest.get("doctor/admin-teams/teams/info", {data: data});
        },
        //获取居民分析相关数据
        leveltwoIncrementData: function(data){
            return httpRequest.get("/statistics/leveltwo_increment", {data: data});
        },
        statisticsTime:function(data){
        	return httpRequest.get("/statistics/time", {data: data});
        }
        
        
        
    }
    exports.statisticAPI = statisticAPI;

app/statistics/css/resident-analysis.css

@@ -0,0 +1,203 @@
.c-12b7f5 {
	color: #12B7F5;
}
.c-fb5dab {
	color: #fb5dab;
}
.c-cd67fd {
	color: #cd67fd
}
.c-ffc800 {
	color: #ffc800
}
.c-61eb41 {
	color: #61eb41
}
.span-frame {
	height: 15px;
	width: 15px;
	display: inline-block;
}
.cb-12b7f5 {
	background: #12B7F5;
}
.cb-fb5dab {
	background: #fb5dab;
}
.cb-cd67fd {
	background: #cd67fd
}
.cb-ffc800 {
	background: #ffc800
}
.cb-61eb41 {
	background: #61eb41
}
.height-140 {
	height: 140px;
}
.div-qingkuang-left {
	margin: 20px 18px 0px 10px;
	width: calc(50% - 32px);
	;
	height: 180px;
	border: 1px solid rgb(220, 220, 220);
	border-radius: 10px;
	float: left;
}
.div-header-block {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid rgb(220, 220, 220);
}
.div-analysis-title {
	font-size: 14px;
	margin-left: 20px;
	color: rgb(51, 51, 51);
	font-weight: bold;
}
.div-right-info {
	position: absolute;
	right: 10px;
	color: #12B7F5;
	text-align: center;
	top: 50%;
	margin-top: -25px;
}
.div-left-info {
	position: absolute;
	left: 10px;
	color: #FFC800;
	text-align: center;
	top: 50%;
	margin-top: -25px;
}
.div-qingkuang-right {
	margin: 20px 10px 0px 18px;
	width: calc(50% - 32px);
	height: 180px;
	border: 1px solid rgb(220, 220, 220);
	border-radius: 10px;
	float: right;
}
.div-service-kuang {
	margin: 20px 18px 0px 10px;
	width: calc(100% - 32px);
	;
	height: 180px;
	border: 1px solid rgb(220, 220, 220);
	border-radius: 10px;
	float: left;
}
.ui-grid {
	position: absolute;
	top: 50%;
	margin-top: -45px;
	right: 10px;
}
.c-row .c-33 {
	text-align: center;
}
.c-row .c-33 a {
	display: inline-block;
	width: 100%;
	height: 24px;
	font-size: 12px;
	line-height: 24px;
	/*background: #EEEEEE;*/
	border: 1px solid #eee;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #666;
}
.c-row .c-33.active a {
	color: #fff;
	border: 1px solid #12B7F5;
	background: #12B7F5;
}
.c-row .c-33 {
	width: calc(31.333333333333332% - 10px);
}
.filter-title {
	color: #333333;
	font-size: 14px;
	font-weight: bold;
}
a {
	background-color: transparent;
	text-decoration: none;
}
#footer {
	position: absolute;
	bottom: 10px;
	width: 100%;
	right: 10px;
}
.fr {
	float: right;
}
.div-foot-btn {
	height: 26px;
	line-height: 26px;
	width: 68px;
	background: #fafafa;
	text-align: center;
	border: 1px solid #dcdcdc;
	display: inline-block;
}
.div-foot-btn.active {
	border: 1px solid #12b7f5;
}
.div-title {
	font-size: 14px;
	color: #323232;
	margin: 20px;
}
.vuedal {
	will-change: initial !important;
	width: 400px !important;
	padding-right: 3px !important;
}
.vuedal header {
	padding-right: 20px !important;
}
.vuedal header .title {
	font-size: 16px !important;
	font-weight: bold !important;
	color: #333 !important;
}

app/statistics/js/common.js

@@ -88,4 +88,25 @@ function drawPieChart(elId, arry, color){
    };
    $("#"+elId).removeAttr("_echarts_instance_");
    myChart.setOption(option);
}
Date.prototype.format = function(format) {
	var o = {
		"M+": this.getMonth() + 1, //month 
		"d+": this.getDate(), //day 
		"h+": this.getHours(), //hour 
		"m+": this.getMinutes(), //minute 
		"s+": this.getSeconds(), //second 
		"q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
		"S": this.getMilliseconds() //millisecond 
	}
	if(/(y+)/.test(format)) {
		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	}
	for(var k in o) {
		if(new RegExp("(" + k + ")").test(format)) {
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
		}
	}
	return format;
}

app/statistics/js/resident-analysis-charts.js

@@ -0,0 +1,345 @@
var labelBottom = {
	normal: {
		label: {
			show: false,
		},
		labelLine: {
			show: false
		}
	}
};
var jiaoFeiChart = null,
	healthChart = null,
	serviceChart = null,
	sexChart = null,
	ageChart = null;
//缴费情况
function jiaoFeiData(yiJiaoFeiData, weiJiaoFeiData) {
	jiaoFeiChart = echarts.init(document.getElementById('jiaoFeiChart'));
	var jiaoFeiOptions = {
		color: ['#12b7f5', '#FFC800'],
		series: [{
			type: 'pie',
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			data: [{
					name: '已缴费人数',
					value: yiJiaoFeiData,
					itemStyle: {
						normal: {
							label: {
								show: false,
							},
							labelLine: {
								show: false
							}
						}
					}
				},
				{
					name: '未缴费人数',
					value: weiJiaoFeiData,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'center',
								color: '#666',
								formatter: function(params) {
									return '缴费情况\n分析';
								}
							},
							labelLine: {
								show: false
							}
						}
					}
				}
			]
		}]
	};
	jiaoFeiChart.clear();
	jiaoFeiChart.setOption(jiaoFeiOptions);
}
//健康分布
function healthData(jkrqdata, hbrqdata, gwrqdata, hfqrqdata, wbzdata) {
	healthChart = echarts.init(document.getElementById('healthChart'));
	var healthOptions = {
		color: ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'],
		series: [{
			type: 'pie',
			radius: ['50%', '70%'],
			center: ['25%', '50%'], //饼图的位置 
			data: [{
					name: '健康人群',
					value: jkrqdata,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'center',
								color: '#666',
								formatter: function(params) {
									return '健康分布\n分析';
								}
							},
							labelLine: {
								show: false
							}
						}
					}
				},
				{
					name: '患病人群',
					value: hbrqdata,
					itemStyle: labelBottom
				},
				{
					name: '高危人群',
					value: gwrqdata,
					itemStyle: labelBottom
				},
				{
					name: '恢复期人群',
					value: hfqrqdata,
					itemStyle: labelBottom
				},
				{
					name: '未标注',
					value: wbzdata,
					itemStyle: labelBottom
				}
			]
		}]
	};
	healthChart.clear();
	healthChart.setOption(healthOptions);
}
//服务分布
function serviceData(arr) {
	serviceChart = echarts.init(document.getElementById('serviceChart'));
	var serviceOptions = option = {
		calculable: true,
		grid: {
			y: 25,
			y2: 30,
			x: 20,
			x2: 20,
			borderColor: '#ffffff'
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: true,
				color: '#666'
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: ['普通人群', '老年人', '高血压', '糖尿病']
		}],
		yAxis: [{
			type: 'value',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			}
		}],
		series: [{
			name: '服务分布比例',
			type: 'bar',
			barWidth: 20,
			itemStyle: {
				normal: {
					color: function(params) {
						var colorList = ['#12B7F5', '#61eb41', '#CD67FD', '#fb5dab'];
						return colorList[params.dataIndex]
					},
					label: {
						show: true,
						position: 'top',
						color: '#666',
						formatter: function(params) {
							return params.value + '%';
						}
					},
					barBorderRadius: 0
				}
			},
			data: arr
		}]
	};
	serviceChart.clear();
	serviceChart.setOption(serviceOptions);
}
//性别情况
function sexData(femaleData, maleData) {
	sexChart = echarts.init(document.getElementById('sexChart'));
	var sexOptions = {
		color: ['#12B7F5', '#FB5DAB'],
		series: [{
			type: 'pie',
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			data: [{
					name: '男性',
					value: maleData,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'center',
								color: '#666',
								formatter: function(params) {
									return '性别情况\n分析';
								}
							},
							labelLine: {
								show: false
							}
						}
					}
				},
				{
					name: '女性',
					value: femaleData,
					itemStyle: labelBottom
				}
			]
		}]
	};
	sexChart.clear();
	sexChart.setOption(sexOptions);
}
//年龄分布
function ageData(arr) {
	ageChart = echarts.init(document.getElementById('ageChart'));
	var ageOptions = {
		calculable: true,
		grid: {
			y: 25,
			y2: 30,
			x: 20,
			x2: 20,
			borderColor: '#ffffff'
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: true,
				color: '#666'
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: ['0-6岁', '7-18岁', '19-30岁', '31-50岁', '51-64岁', '65岁以上']
		}],
		yAxis: [{
			type: 'value',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			}
		}],
		series: [{
			name: '年龄分布比例',
			type: 'bar',
			barWidth: 40,
			itemStyle: {
				normal: {
					color: function(params) {
						var colorList = ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41', '#909090'];
						return colorList[params.dataIndex]
					},
					label: {
						show: true,
						position: 'top',
						formatter: function(params) {
							return params.value;
						}
					},
					barBorderRadius: 0
				}
			},
			data: arr
		}]
	};
	ageChart.clear();
	ageChart.setOption(ageOptions);
}
window.onresize = function() {
	jiaoFeiChart.resize();
	healthChart.resize();
	serviceChart.resize();
	sexChart.resize();
	ageChart.resize();
}

app/statistics/js/resident-analysis.js

@@ -1,13 +1,17 @@
Vue.use(Vuedals.default);
new Vue({
  el: '#main',
  data: {
	el: '#main',
	data: {
		appname: "居民分析",
		isback: false,
  		isrefresh: true,
  		isfilter:true,
  		isopen:true
		isrefresh: true,
		isfilter: true,
		isopen: false
	},
	components: {
		vuedals: Vuedals.Component
	},
	mounted: function() {
	
		
	},
})

app/statistics/resident-analysis.html

@@ -12,79 +12,17 @@
		<link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../plugins/toastr/toastr.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style>
			.c-12b7f5{color:#12B7F5;}
			.c-fb5dab{color: #fb5dab;}
			.c-cd67fd{color:#cd67fd}
		</style>
		<link rel="stylesheet" type="text/css" href="css/resident-analysis.css" />
	</head>
	<body style="margin: 0;">
		<div id="main">
			<header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
			<header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
			<header-prompt></header-prompt>
			<div>
				<div style="margin: 20px 18px 0px 10px;width: calc(50% - 32px);;height: 180px;border: 1px solid rgb(220, 220, 220);border-radius: 10px;float: left;">
					<div style="height: 40px; line-height: 40px; border-bottom: 1px solid rgb(220, 220, 220);">
						<div style="font-size: 14px; margin-left: 20px; color: rgb(51, 51, 51);font-weight: bold;">缴费情况</div>
					</div>
					<div style="height: 140px;position: relative;">
						<div class="div-yijiaofei" style="position: absolute;right: 10px;color:#12B7F5;text-align: center;top: 50%;margin-top: -25px;">
							<div class="y-amount c-f16">975</div>
							<div class="y-rate c-f14">82.42%</div>
							<div class="y-title c-f12">已缴费人数</div>
						</div>
						<div class="div-weijiaofei" style="position: absolute;left: 10px;color:#FFC800;text-align: center;top: 50%;margin-top: -25px;">
							<div class="y-amount c-f16">208</div>
							<div class="y-rate c-f14">17.58%</div>
							<div class="y-title c-f12">未缴费人数</div>
						</div>
						<div id="jiaoFeiChart" style="height: 140px;"></div>
					</div>
				</div>
				<div style="margin: 20px 10px 0px 18px;width: calc(50% - 32px);height: 180px;border: 1px solid rgb(220, 220, 220);border-radius: 10px;float: right;">
					<div style="height: 40px; line-height: 40px; border-bottom: 1px solid rgb(220, 220, 220);">
						<div style="font-size: 14px; margin-left: 20px; color: rgb(51, 51, 51);font-weight: bold;">健康分布</div>
					</div>
					<div style="height: 140px;position: relative;">
						<div id="healthChart" style="width: 100%;height: 140px;"></div>
						<div class="ui-col-1 ui-grid ui-grid-vertical" style="position: absolute;top: 50%;margin-top: -45px;right: 10px;">
							<div id="jkCatalogs">
								<div class="ui-col-1">
									<span style="height: 15px;background: #42C7FF;width: 15px;display: inline-block;"></span>
									<span class="div-gwrq c-f14" style="color: #42C7FF;">93.85%</span>
									<span class="c-f12 c-909090">(未标注)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #FFC84C;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #FFC84C;">2.67%</span>
									<span class="c-f12 c-909090">(健康人群)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #FB5DAB;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #FB5DAB;">3.08%</span>
									<span class="c-f12 c-666">(患病人群)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #CD67FD;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #CD67FD;">0.41%</span>
									<span class="c-f12 c-666">(高危人群)</span>
								</div>
								<div class="ui-col-1">
									<span style="height: 15px;background: #795548;width: 15px;display: inline-block"></span>
									<span class="div-gwrq c-f14" style="color: #795548;">0.00%</span>
									<span class="c-f12 c-666">(恢复期人群)</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<resident-analysis></resident-analysis>
			<vuedals></vuedals>
		</div>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
@@ -92,106 +30,18 @@
		<script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/common/event-bus.js"></script>
		<script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="UTF-8"></script>
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../../component/statistics/header-prompt.js"></script>
		<script type="text/javascript" src="../../component/statistics/resident-analysis.js"></script>
		<script type="text/javascript" src="../../component/statistics/resident-analysis-filter.js"></script>
		<script src="js/resident-analysis-charts.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/resident-analysis.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			var jiaoFeiChart = echarts.init(document.getElementById('jiaoFeiChart'));
			var jiaoFeiOptions = {
				color: ['#FFC800', '#12b7f5'],
				series: [{
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['50%', '50%'], //饼图的位置 
					data: [{
							name: '已缴费人数',
							value: 30,
							itemStyle: {
								normal: {
									label: {
										show: false,
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							name: '未缴费人数',
							value: 70,
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'center',
										color: '#666',
										formatter: function(params) {
											return '缴费情况\n分析';
										}
									},
									labelLine: {
										show: false
									}
								}
							}
						}
					]
				}]
			};
			jiaoFeiChart.setOption(jiaoFeiOptions);
			window.onresize = jiaoFeiChart.resize;
			var healthChart = echarts.init(document.getElementById('healthChart'));
			var healthOptions = {
				color: ['#FFC800', '#12b7f5'],
				series: [{
					type: 'pie',
					radius: ['50%', '70%'],
					center: ['25%', '50%'], //饼图的位置 
					data: [{
							name: '已缴费人数',
							value: 30,
							itemStyle: {
								normal: {
									label: {
										show: false,
									},
									labelLine: {
										show: false
									}
								}
							}
						},
						{
							name: '未缴费人数',
							value: 70,
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'center',
										color: '#666',
										formatter: function(params) {
											return '缴费情况\n分析';
										}
									},
									labelLine: {
										show: false
									}
								}
							}
						}
					]
				}]
			};
			healthChart.setOption(healthOptions);
			window.onresize = healthChart.resize;
		</script>
	</body>
</html>

component/statistics/header-prompt.js

@@ -1,20 +1,54 @@
Vue.component('header-prompt', {
	template: '<div class="cb-ebebf5 height-30 lheight-30 pl20 c-f12">\
					<span id="area_title" class="c-666">厦门市卫生与计划生育委员会</span> (\
					<span id="jiezhi_time" class="c-666">09:13</span>)\
					<span id="select_date" class="c-12b7f5 ml20 mr20">2017年</span>\
					<span id="dimension_val" class="c-12b7f5">按任务</span>\
					<span class="c-666">{{areaName}}</span> (\
					<span class="c-666">{{jieZhiTime}}</span>)\
					<span class="c-12b7f5 ml20 mr20">{{selectDate}}</span>\
					<span class="c-12b7f5">{{dimensionVal}}</span>\
			</div>',
	props: [],
	data: function() {
		return {
			
			areaName:"",
			jieZhiTime:"",
			selectDate:"",
			dimensionVal:""
		}
	},
	mounted: function() {
		var vm = this;
		getJieZhiTime(vm);
		
		//更新区域名称
		EventBus.$on('update-area-name', function(arg) {
			vm.areaName = arg.areaName;
		});
		
		//更新统计时间
		EventBus.$on('update-statistics-time', function(arg) {
			getJieZhiTime(vm);
		});
		
		//更新年份
		EventBus.$on('update-statistics-year', function(arg) {
			vm.selectDate = arg.selectDate;
		});
		
		//更新维度名称
		EventBus.$on('update-dimension-name', function(arg) {
			vm.dimensionVal = arg.dimensionVal;
		});
	},
	methods: {
		
	}
})
})
//获取统计时间
function getJieZhiTime(vm){
	statisticAPI.statisticsTime({}).then(function(res) {
		if(res.status=="200"){
			var date = (res.data && res.data.substring(11,16)) || "";
			vm.jieZhiTime = date;
		}
	})
}

component/statistics/header-tab.js

@@ -1,7 +1,7 @@
Vue.component('header-tab', {
	template: '<div class="div-header">\
			<div class="fl">\
				<div class="application-name">签约进展</div>\
				<div class="application-name">{{appname}}</div>\
				<div class="vertical-line"></div>\
				<img v-show="isback" @click="back" src="../../images/fanhui_icon.png" width="18" height="18" class="mr10 vam" />\
				<img v-show="isrefresh" @click="refresh" src="../../images/shuaxin_icon.png" width="18" height="18" class="vam" />\
@@ -11,7 +11,7 @@ Vue.component('header-tab', {
				<img v-show="isopen" @click="open" src="../../images/zhankai_icon.png" width="18" height="18" />\
			</div>\
		</div>',
	props: ["code","isback", "isrefresh","isfilter","isopen"],
	props: ["appname","code","isback", "isrefresh","isfilter","isopen"],
	data: function() {
		return {
			

component/statistics/resident-analysis-filter.js

@@ -0,0 +1,238 @@
(function(){
    Vue.component('resident-analysis-filter',{
        template: '<div style="height: 400px;overflow: auto;margin-bottom: 50px;">\
				<div class="mt10 ml10 filter-title">统计年份</div>\
				<div class="c-row mt20 ml40" id="signYear" v-html="yearHtml" @click="yearClick">\
				</div>\
				<div class="mt20 ml10 filter-title">统计维度</div>\
				<div class="div-content" @click="divBtnClick"></div>\
				<div id="footer">\
					<div class="c-row btn-wrap c-border-top fr">\
						<div class="div-foot-btn mr20" @click="resetClick">\
							<a href="#" class="c-666 f-fs16">重置</a>\
						</div>\
						<div class="div-foot-btn active" @click="confirmClick">\
							<a href="#" class="c-666 f-fs16">确定</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:['curLevel','curCode','curName'],
        data: function(){
            return {
                yearHtml:"",
                contentHtml:"",
                selectLevel:"",
                resultCode:"",
                roleLevel:""
            }
        },
        methods: {
        	formatYearData: function () {     
        		//显示年份最低是2016年
				var now = new Date(),
				    year = now.getFullYear();
				var yearHtml = "";
				if(now.getMonth() >= 6){
				    yearHtml += '<div class="c-33 active" data-val="'+year+'"><a>'+year+"</a></div>";
				}
				for(i=year-1; i>=2016; i--){
				    if(i == (year-1) && now.getMonth() < 6){
				        yearHtml += '<div class="c-33 active" data-val="'+i+'"><a>'+i+"</a></div>";
				    }else{
				        yearHtml += '<div class="c-33" data-val="'+i+'"><a>'+i+"</a></div>";
				    }
				}
                  this.yearHtml = yearHtml;
           },
           requestData:function(){
           		var vm = this;
           		var reqUrl = ""; 
				if(vm.curLevel == 4){//市管
					reqUrl = "/area/"+this.curCode+"/towns";
				}else if(vm.curLevel == 3){//区管
					reqUrl = "/hospitals/"+this.curCode+"/community_hospitals";
				}else{//社区管
					reqUrl = "/doctor/admin-teams/teams/"+this.curCode;
				}
				var reqUrl = [{
					url: reqUrl,
					reqType: 'get',
					data: {}
				}]
				httpRequest.getReqPromises(reqUrl).then(function(datas) {
					if(datas[0].status==200){
						vm.pingData(datas[0].data || [])
					}
				});
          },
          yearClick:function(){
          	$(event.target.closest("div")).addClass('active').siblings().removeClass('active')
          },
          divBtnClick:function(){
			var vm = this;
			if(event.target.nodeName === 'A') {
				vm.curCode = $(event.target.closest("div")).attr("data-id");
				var item = $(event.target.closest(".div-item"));
				var dataLevel = item.attr("data-level");
				if(dataLevel == 4) {
					$(".div-content .div-item[data-level='4'] .div-btn").removeClass("active");
					item.next().remove();
					item.next().remove();
					vm.curLevel = 4;
				}
				if(dataLevel == 3) {
					$(".div-content .div-item[data-level='3'] .div-btn").removeClass("active");
					item.next().remove();
					vm.curLevel = 3;
				}
				if(dataLevel == 2) {
					$(".div-content .div-item[data-level='2'] .div-btn").removeClass("active");
					vm.curLevel = 2;
				}
				$(event.target.closest(".div-btn")).addClass("active");
				if(vm.curCode != "" && dataLevel != 2) {
					vm.resultCode = vm.curCode;
				} else {
					vm.resultCode = vm.curCode;
				}
				if(vm.curCode) {
					vm.curName = $(event.target.closest(".div-btn")).find("a").html();
				} else {
					vm.curName = item.find(".div-title").html();
				}
			
				vm.selectLevel = vm.curCode ? dataLevel - 1 : dataLevel;
				if(dataLevel == 2) {
					return false;
				}
			
				vm.curLevel--;
				if(vm.curCode) {
					vm.requestData();
				}
			}
          },
         resetClick:function(){
         	var vm = this;
         	vm.resultCode = "";
			vm.selectLevel = vm.roleLevel;
			var userRole = JSON.parse(window.localStorage.getItem("selectedRole"));
			vm.curName = vm.selectLevel==4?userRole.name.substring(0,3):userRole.name;
			$("#signYear").find(".c-33").removeClass("active");
			$("#signYear").find(".c-33").eq(0).addClass("active");
			$(".div-content .div-item").find(".div-btn").removeClass("active");
			$(".div-content .div-item").eq(0).find(".div-btn").eq(0).addClass("active");
			$(".div-content .div-item").eq(1).remove();
			$(".div-content .div-item").eq(1).remove();
         },
         confirmClick:function(){
         	var vm = this;
         	console.log("area:"+vm.resultCode)
         	console.log("name:"+vm.curName)
         	console.log("level:"+vm.selectLevel)
         	console.log("year:"+$("#signYear .c-33.active").attr("data-val"))
			//触发刷新
			this.$emit('vuedals:close',{areaCode:vm.resultCode,name:vm.curName,level:vm.selectLevel,year:$("#signYear .c-33.active").attr("data-val")});
         },
         pingData:function(list){
          		var vm = this;
          		var resultData = "";
				var activeClass = "";
				if(vm.curLevel == 4){//市管
					list.unshift({"code":"","name":"厦门全市"});
					vm.curName = vm.curName.substring(0,3);
				}else if(vm.curLevel == 3){//区管
					list.unshift({"code":"","name":"全区"});
				}else{//社区管
					list.unshift({"id":"","name":"全社区"});
				}
				if(list.length>0){
					var labelName = '<div class="div-item" data-level="'+vm.curLevel+'">'+
										'<div class="div-title">'+vm.curName+'</div>';
							
					var xzResult = [];//每三条分成一组
					var xzContent = '';
					for(var i=0,len=list.length;i<len;i+=3){//形状列表切割
					   xzResult.push(list.slice(i,i+3));
					}
					for(var x in xzResult){
						var item = xzResult[x];
						if(x==0){
							activeClass = "active";
						}else{
							activeClass = "";
						} 
						if(item.length==1){//只有一条数据
							var id  = item[0].code;
							if(vm.curLevel=="2") {
								id  = item[0].id;
							}
							var name = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
							xzContent+='<div class="mt20 div-group-btn c-row ml40">'+					
											'<div class="div-btn c-33 '+activeClass+'" data-id="'+id+'" @click="">'+
												'<a href="#" class="f-fs14">'+name+'</a>'+
											'</div>'+
										'</div>';
						}
						if(item.length==2){
							var id1  = item[0].code;
							var id2  = item[1].code;
							if(vm.curLevel=="2") {
								id1  = item[0].id;
								id2  = item[1].id;
							}
							var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
							var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
							xzContent+= '<div class="mt20 div-group-btn c-row ml40">'+						
										'<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
											'<a href="#" class="f-fs14">'+name1+'</a>'+
										'</div>'+
										'<div class="div-btn c-33 " data-id="'+id2+'" data-level="'+item[1].level+'">'+
											'<a href="#" class="f-fs14">'+name2+'</a>'+
										'</div>'+
									'</div>';
						}
						if(item.length==3){
							var id1  = item[0].code;
							var id2  = item[1].code;
							var id3  = item[2].code;
							if(vm.curLevel=="2") {
								id1  = vm.curCode;
								id2  = item[1].id;
								id3  = item[2].id;
							}
							
							var name1 = vm.curLevel==3 && id1?item[0].name.substring(3,item[0].name.length):item[0].name;
							var name2 = vm.curLevel==3 && id2?item[1].name.substring(3,item[1].name.length):item[1].name;
							var name3 = vm.curLevel==3 && id3?item[2].name.substring(3,item[2].name.length):item[2].name;
							xzContent+='<div class="mt20 div-group-btn c-row ml40">'+						
										'<div class="div-btn c-33 '+activeClass+'" data-id="'+id1+'">'+
											'<a href="#" class="f-fs14">'+name1+'</a>'+
										'</div>'+
										'<div class="div-btn c-33 " data-id="'+id2+'">'+
											'<a href="#" class="f-fs14">'+name2+'</a>'+
										'</div>'+
										'<div class="div-btn c-33 " data-id="'+id3+'">'+
											'<a href="#" class="f-fs14">'+name3+'</a>'+
										'</div>'+
									'</div>';
						}
						
					}
					
					resultData += labelName+xzContent+'</div>';
				}
				$(".div-content").append(resultData);
         }
        },
        mounted: function(){
        	this.roleLevel = this.curLevel;
        	this.selectLevel = this.curLevel;
        	this.resultCode = this.curCode;
			this.formatYearData();
			this.requestData();
        }
    });
    
})()

component/statistics/resident-analysis.js

@@ -0,0 +1,315 @@
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,
		}
	},
	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('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);
                    initData(vm);//刷新数据
                },
                component: 'resident-analysis-filter',
                props: {
                    curLevel: vm.roleLevel,
                    curCode: vm.userRole.code,
                    curName: vm.userRole.name
                }
            });
		});
		
		
	},
	methods: {
		
	}
})
//请求接口数据
function initData(vm) {
	var url = "/statistics/leveltwo_increment";
	EventBus.$emit('update-area-name', {areaName:vm.curName});//更新区域名称
	EventBus.$emit('update-statistics-time', {});//更新统计时间
	EventBus.$emit('update-statistics-year', {selectDate:vm.chooseYear+"年"});//更新统计年份
	
	var reqUrl = [{
			url: url,
			reqType: 'get',
			data: {
				endDate:vm.endDate,
				area:vm.curCode,
				level:vm.curLevel,
				index:16,
			}
		},
		{
			url: url,
			reqType: 'get',
			data: {
				endDate:vm.endDate,
				area:vm.curCode,
				level:vm.curLevel,
				index:15,
			}
		},
		{
			url: url,
			reqType: 'get',
			data: {
				endDate:vm.endDate,
				area:vm.curCode,
				level:vm.curLevel,
				index:vm.chooseYear==2016?7:36,
			}
		},
		{
			url: url,
			reqType: 'get',
			data: {
				endDate:vm.endDate,
				area:vm.curCode,
				level:vm.curLevel,
				index:6,
			}
		},
		{
			url: url,
			reqType: 'get',
			data: {
				endDate:vm.endDate,
				area:vm.curCode,
				level:vm.curLevel,
				index:8,
			}
		}
	];
	httpRequest.getReqPromises(reqUrl).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);
		}
	})
}