开发签约进展

app/statistics/css/common.css

@@ -1,376 +1,433 @@
.c-12b7f5{
    color: #12b7f5;
}
.c-17b3ec{
    color: #17b3ec;
}
.c-4ecd70{
    color: #4ecd70;
}
.c-323232{
    color: #323232;
}
.c-19d5c5{
    color: #19d5c5;
}
.c-ffc800{
    color: #ffc800;
}
.c-75ed59{
    color: #75ed59;
}
.c-w-33{
    width: 33%;
}
ul{
    list-style: none;
}
.info-icon{
    vertical-align: middle;
    margin-bottom: 5px;
}
.information{
    background-color: rgba(0,0,0,0.5);
    font-size: 14px;
    color: #fff;
}
.information .ui-col-0{
    width: 40px;
    text-align: center;
}
.location-div{
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}
.location-div img{
    vertical-align: text-bottom;
}
.choose-label{
    color: #17B3EC;
    display: inline-block;
    max-width: 100%;
    _width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.blue-column{
    display: inline-block;
    width: 4px;
    height: 12px;
    background-color: #12b7f5;
}
.date-tag{
    display: inline-block;
    text-align: center;
    width: 50px;
    padding: 5px 0;
    font-size: 14px;
    color: #17b3ec;
    border: 1px solid #17b3ec;
}
.date-tag:first-child{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.date-tag:nth-child(2){
    border-right: 0;
    border-left: 0;
}
.date-tag:nth-child(3){
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.date-tag.active{
    background-color: #17b3ec;
    color: #fff;
}
.area-tab-panel{
    display: -webkit-box;
    height: 45px;
    line-height: 45px;
    margin: 0 50px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0px 0px 1px #ccc;
}
.area-tab{
    -webkit-box-flex: 1;
    text-align: center;
    position: relative;
}
.area-tab:after{
    content: '';
    position: absolute;
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #e1e1e1;
}
.area-tab:last-child:after{
    width: 0;
}
.area-tab .border-line-right{
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 20px;
    right: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #e1e1e1;
}
.area-tab span{
    display: inline-block;
    height: 45px;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    color: #666;
    padding: 0 10px;
}
.area-tab.active span{
    color: #12b7f5;
    border-bottom: 2px solid #12b7f5;
}
.bottom-list-table{
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    background-color: #fff;
    width: 100%;
    text-align: center;
    font-size: 14px;
    border-spacing: 0;
}
.bottom-list-table thead{
    height: 40px;
    background-color: #ebebf5;
    border-bottom: 1px solid #e1e1e1;
    color: #999;
}
.bottom-list-table thead tr{
    height: 40px;
.c-12b7f5 {
	color: #12b7f5;
}
.c-17b3ec {
	color: #17b3ec;
}
.c-4ecd70 {
	color: #4ecd70;
}
.c-323232 {
	color: #323232;
}
.c-19d5c5 {
	color: #19d5c5;
}
.c-ffc800 {
	color: #ffc800;
}
.c-75ed59 {
	color: #75ed59;
}
.c-w-33 {
	width: 33%;
}
ul {
	list-style: none;
}
.info-icon {
	vertical-align: middle;
	margin-bottom: 5px;
}
.information {
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 14px;
	color: #fff;
}
.information .ui-col-0 {
	width: 40px;
	text-align: center;
}
.location-div {
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
}
.location-div img {
	vertical-align: text-bottom;
}
.choose-label {
	color: #17B3EC;
	display: inline-block;
	max-width: 100%;
	_width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.blue-column {
	display: inline-block;
	width: 4px;
	height: 12px;
	background-color: #12b7f5;
}
.date-tag {
	display: inline-block;
	text-align: center;
	width: 50px;
	padding: 5px 0;
	font-size: 14px;
	color: #17b3ec;
	border: 1px solid #17b3ec;
}
.date-tag:first-child {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}
.date-tag:nth-child(2) {
	border-right: 0;
	border-left: 0;
}
.date-tag:nth-child(3) {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}
.date-tag.active {
	background-color: #17b3ec;
	color: #fff;
}
.area-tab-panel {
	display: -webkit-box;
	height: 45px;
	line-height: 45px;
	margin: 0 50px;
	background-color: #fff;
	border: 1px solid #e1e1e1;
	border-bottom: 0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	box-shadow: 0px 0px 1px #ccc;
}
.area-tab {
	-webkit-box-flex: 1;
	text-align: center;
	position: relative;
}
.area-tab:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 20px;
	right: 0;
	top: 50%;
	margin-top: -10px;
	background-color: #e1e1e1;
}
.area-tab:last-child:after {
	width: 0;
}
.area-tab .border-line-right {
	display: inline-block;
	position: absolute;
	width: 1px;
	height: 20px;
	right: 0;
	top: 50%;
	margin-top: -10px;
	background-color: #e1e1e1;
}
.area-tab span {
	display: inline-block;
	height: 45px;
	border-bottom: 2px solid transparent;
	font-size: 16px;
	color: #666;
	padding: 0 10px;
}
.area-tab.active span {
	color: #12b7f5;
	border-bottom: 2px solid #12b7f5;
}
.bottom-list-table {
	border-top: 1px solid #e1e1e1;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	background-color: #fff;
	width: 100%;
	text-align: center;
	font-size: 14px;
	border-spacing: 0;
}
.bottom-list-table thead {
	height: 40px;
	background-color: #ebebf5;
	border-bottom: 1px solid #e1e1e1;
	color: #999;
}
.bottom-list-table thead tr {
	height: 40px;
}
.bottom-list-table td,
.bottom-list-table th{
    text-align: center;
    vertical-align: middle;
.bottom-list-table th {
	text-align: center;
	vertical-align: middle;
}
.bottom-list-table td{
    padding: 10px 0;
    border-bottom: 1px solid #e1e1e1;
.bottom-list-table td {
	padding: 10px 0;
	border-bottom: 1px solid #e1e1e1;
}
.bottom-list-table tbody>tr{
    border-bottom: 1px solid #e1e1e1;
.bottom-list-table tbody>tr {
	border-bottom: 1px solid #e1e1e1;
}
.bottom-list-table tbody>tr:hover{
    background-color: #f2f4f6;
.bottom-list-table tbody>tr:hover {
	background-color: #f2f4f6;
}
/*.bottom-list-table tbody>tr:first-child{
    border-top: 0;
}*/
.bottom-list-table tbody tr td.area-name{
    text-align: left;
    padding-left: 10px;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
.bottom-list-table tbody tr td.area-name {
	text-align: left;
	padding-left: 10px;
	font-size: 16px;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}
@media only screen and (max-width: 320px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 125px;
    }
	.bottom-list-table tbody tr td.area-name {
		max-width: 125px;
	}
}
@media only screen and (min-width: 321px) and (max-width: 414px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 180px;
    }
	.bottom-list-table tbody tr td.area-name {
		max-width: 180px;
	}
}
@media only screen and (min-width: 414px) and (max-width: 640px) {
    .bottom-list-table tbody tr td.area-name{
        max-width: 200px;
    }
}
.bottom-list-table .fa{
    font-size: 18px;
    color: #909090;
}
.ranking{
    background-image: url(../../../images/paiming_4_icon.png);
    background-size: 18px 24px;
    width: 18px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    -webkit-box-flex: 0;
}
.ranking1{
    background-image: url(../../../images/paiming_1_icon.png);
}
.ranking2{
    background-image: url(../../../images/paiming_2_icon.png);
}
.ranking3{
    background-image: url(../../../images/paiming_3_icon.png);
}
.modal-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}
.modal-overlay.modal-overlay-visible{
    visibility: visible;
    opacity: 1;
	.bottom-list-table tbody tr td.area-name {
		max-width: 200px;
	}
}
.bottom-list-table .fa {
	font-size: 18px;
	color: #909090;
}
.ranking {
	background-image: url(../../../images/paiming_4_icon.png);
	background-size: 18px 24px;
	width: 18px;
	height: 24px;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	margin-right: 10px;
	-webkit-box-flex: 0;
}
.ranking1 {
	background-image: url(../../../images/paiming_1_icon.png);
}
.ranking2 {
	background-image: url(../../../images/paiming_2_icon.png);
}
.ranking3 {
	background-image: url(../../../images/paiming_3_icon.png);
}
.modal-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	-webkit-transition-duration: 400ms;
	transition-duration: 400ms;
}
.modal-overlay.modal-overlay-visible {
	visibility: visible;
	opacity: 1;
}
.modal-content {
    height: 400px;
    position: absolute;
    width: 80%;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin-left: -40%;
    margin-top: -200px;
    display: none;
	height: 400px;
	position: absolute;
	width: 80%;
	z-index: 9999;
	top: 50%;
	left: 50%;
	margin-left: -40%;
	margin-top: -200px;
	display: none;
}
.div-header-title {
    height: 80px;
    background: #17B3EC;
    width: 100%;
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	height: 80px;
	background: #17B3EC;
	width: 100%;
	position: relative;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.div-close {
    width: 26px;
    height: 26px;
    background: url(../images/tankuang_guanbi_icon.png) no-repeat center top;
    background-size: 26px;
    position: absolute;
    top: 10px;
    right: 10px;
	width: 26px;
	height: 26px;
	background: url(../images/tankuang_guanbi_icon.png) no-repeat center top;
	background-size: 26px;
	position: absolute;
	top: 10px;
	right: 10px;
}
.div-overlay-img {
    width: 170px;
    height: 53px;
    background: url(../images/tankuang_bg_img.png) no-repeat center top;
    background-size: 170px 53px;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -85px;
	width: 170px;
	height: 53px;
	background: url(../images/tankuang_bg_img.png) no-repeat center top;
	background-size: 170px 53px;
	position: absolute;
	top: 15px;
	left: 50%;
	margin-left: -85px;
}
.div-overlay-title {
    position: absolute;
    top: 38px;
    left: 40%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
	position: absolute;
	top: 38px;
	left: 40%;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}
.div-overlay-content {
    height: 320px;
    background: #fff;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.div-jf-title2{
    position: absolute;
    font-size: 14px;
    top: 50%;
    width: 100%;
    margin-top: -21px;
	height: 320px;
	background: #fff;
	width: 100%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.div-jf-title2 {
	position: absolute;
	font-size: 14px;
	top: 50%;
	width: 100%;
	margin-top: -21px;
}
/*总体分析页面样式*/
.l-banner{
    display: -webkit-box;
    height: auto;
    margin-bottom: 10px;
    padding: 0 10px;
}
.l-banner li{
    -webkit-box-flex: 0;
    width: calc(100% / 3);
}
.l-banner li:first-child{
    /*margin-left: 0;*/
}
.l-banner li .tag{
    width: 80%;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    text-align: center;
    padding: 17px 0;
    margin: 0 auto;
    position: relative;
}
.l-banner li .l-name{
    color: #666;
.l-banner {
	display: -webkit-box;
	height: auto;
	margin-bottom: 10px;
	padding: 0 10px;
}
.l-banner li {
	-webkit-box-flex: 0;
	width: calc(100% / 3);
}
.l-banner li:first-child {
	/*margin-left: 0;*/
}
.l-banner li .tag {
	width: 80%;
	border: 1px solid #e1e1e1;
	border-radius: 5px;
	text-align: center;
	padding: 17px 0;
	margin: 0 auto;
	position: relative;
}
.l-banner li .l-name {
	color: #666;
}
.l-banner li .tag.active,
.l-banner li .tag.active .l-name
{
    color: #12B7F5;
    border-color: #12B7F5;
}
.l-banner li .tag.active:after{
    content: "";
    width: 100%;
    height: 4px;
    background-color: #12B7F5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.blur-cycle-box{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    margin-top: -35px;
    left: 50%;
    margin-left: -35px;
    /*z-index: 2;*/
    background-color: #17b3ec;
    border-radius: 50%;
    text-align: center;
}
.position-center-text{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    margin-top: -10px;
.l-banner li .tag.active .l-name {
	color: #12B7F5;
	border-color: #12B7F5;
}
.l-banner li .tag.active:after {
	content: "";
	width: 100%;
	height: 4px;
	background-color: #12B7F5;
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.blur-cycle-box {
	position: absolute;
	width: 70px;
	height: 70px;
	top: 50%;
	margin-top: -35px;
	left: 50%;
	margin-left: -35px;
	/*z-index: 2;*/
	background-color: #17b3ec;
	border-radius: 50%;
	text-align: center;
}
.position-center-text {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	text-align: center;
	margin-top: -10px;
}
.div-header {
	padding: 0px 10px 0px 20px;
@@ -460,44 +517,165 @@ ul{
.tac {
	text-align: center;
}
.role-select{
    height: 30px;
    min-width: 100px;
    display: inline-block;
}
.role-select select{
    width: 100%;
    height: 30px;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url(../../../images/zhankai_jiantou_icon.png) no-repeat scroll right center transparent;
    background-position-x: 95%;
    background-size: 11px 11px;
    padding-right: 30px;
    padding-left: 10px;
    border: none;
    color: #909090;
}
.section-header{
    position: relative;
}
.section-label{
    display: inline-block;
    padding: 3px 15px;
    background-color: #ebebf5;
    border-radius: 12px;
    font-size: 14px;
    position: relative;
}
.section-header .grey-line{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    height: 1px;
    background-color: #ebebf5;
    z-index: -1;
.role-select {
	height: 30px;
	min-width: 100px;
	display: inline-block;
}
.role-select select {
	width: 100%;
	height: 30px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: url(../../../images/zhankai_jiantou_icon.png) no-repeat scroll right center transparent;
	background-position-x: 95%;
	background-size: 11px 11px;
	padding-right: 30px;
	padding-left: 10px;
	border: none;
	color: #909090;
}
.section-header {
	position: relative;
}
.section-label {
	display: inline-block;
	padding: 3px 15px;
	background-color: #ebebf5;
	border-radius: 12px;
	font-size: 14px;
	position: relative;
}
.section-header .grey-line {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 10px;
	right: 10px;
	width: calc(100% - 20px);
	height: 1px;
	background-color: #ebebf5;
	z-index: -1;
}
.div-radius-panel {
	width: 60px;
	height: 60px;
	background: #EBEBF5;
	border-radius: 60px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}
.height-120 {
	height: 120px;
}
.div-data-value {
	position: absolute;
	bottom: -20px;
	width: 150px;
	left: 50%;
	margin-left: -75px;
}
.mlr8 {
	margin-left: 8px;
	margin-right: 8px;
}
.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/comprehensive-analysis.js

@@ -294,6 +294,7 @@ function loadData(loadArr, vm){
                            name: '健康指导',
                            value: vm.topDatas.index_5
                        }];
                        debugger
                        drawPieChart('pieChart', arr, ['#ffc800', '#17b3ec']);
                    }
                }else{

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

@@ -21,6 +21,9 @@ function jiaoFeiData(yiJiaoFeiData, weiJiaoFeiData) {
		color: ['#12b7f5', '#FFC800'],
		series: [{
			type: 'pie',
			legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			data: [{
@@ -71,6 +74,9 @@ function healthData(jkrqdata, hbrqdata, gwrqdata, hfqrqdata, wbzdata) {
		color: ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'],
		series: [{
			type: 'pie',
			legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['25%', '50%'], //饼图的位置 
			data: [{
@@ -215,6 +221,9 @@ function sexData(femaleData, maleData) {
		color: ['#12B7F5', '#FB5DAB'],
		series: [{
			type: 'pie',
			legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			data: [{

app/statistics/js/sign-progress.js

@@ -0,0 +1,374 @@
var reqList = []; //记录请求的参数和url，用于后退时使用
Vue.use(Vuedals.default);
new Vue({
	el: "#main",
	data: {
		appname: "签约进展",
		isback: true,
		isrefresh: true,
		isfilter: true,
		isopen: false,
		//请求页面所需参数
		level: '',
		area: '',
		areaTitle: '',
		index: '3',
		selectedDateType: 1, //折线图坐标值1-日，2-周，3-月
		endDate: '',
		startDate: '',
		lowLevel: '',
		lowCode: '',
		chooseYear: '',
		userRole: '',
		analysisType: "1", // 筛选维度的id, 1-按任务，2-按人口，3-高血压，4-糖尿病，5-65岁以上人群
		analysisName:"按任务",
		signRateData:{
			signRateText:"",
			signRate:"",
			signAmount:"",
			signRateAll:"",
			completeRateText:"",
			completeRate:"",
			completeAmount:"",
			completeRateAll:""
		}
	},
	components: {
		vuedals: Vuedals.Component
	},
	methods: {
		changeTag: function(val) {
			this.index = val;
			loadData([1, 2], this);
			//存储请求所带的参数
			reqList.push({
				level: this.level,
				area: this.area,
				areaTitle: this.areaTitle,
				index: this.index,
				endDate: this.endDate,
				startDate: this.startDate,
				lowLevel: this.lowLevel,
				lowCode:this.lowCode
			})
		},
		getNewLineData: function(arg) {
			this.selectedDateType = arg.dateType;
			loadData([1], this);
		},
		getAreaData: function(arg) {
			//如果level改变，则需要重新加载整个页面的数据，否则只需加载底部区域数据
			if(arg.level == this.level) {
				this.lowLevel = arg.lowLevel;
				loadData([2], this);
			} else {
				this.level = arg.level;
				this.lowLevel = arg.lowLevel;
				this.area = arg.area;
				loadData([0, 1, 2], this);
			}
			//存储请求所带的参数
			reqList.push({
				level: this.level,
				area: this.area,
				areaTitle: this.areaTitle,
				index: this.index,
				endDate: this.endDate,
				startDate: this.startDate,
				lowLevel: this.lowLevel,
				lowCode:this.lowCode
			})
		}
	},
	mounted: function() {
		//初始化数据
		initData(this);
		//获得顶部各tab的值
		loadData([0, 1, 2], this); //参数组数表示请求的区域为上中下
		//存储请求所带的参数
		reqList.push({
			level: this.level,
			area: this.area,
			areaTitle: this.areaTitle,
			index: this.index,
			endDate: this.endDate,
			startDate: this.startDate,
			lowLevel: this.lowLevel,
			lowCode:this.lowCode
		});
		//设置监听器， 监听折线图日期变化
		var vm = this;
		//监听后退按钮的操作
		EventBus.$on("back-click", function(arg) {
			EventBus.$emit('update-statistics-time', {});//更新统计时间
			if(reqList.length == 1) {
				history.go(-1);
			} else {
				var preInfo = reqList.pop();
				var info = reqList[reqList.length - 1];
				vm.level = info.level;
				vm.area = info.area;
				vm.areaTitle = info.areaTitle;
				vm.lowLevel = info.lowLevel;
				vm.index = info.index;
				vm.lowCode = info.lowCode;
				loadData([0, 1, 2], vm);
			}
		});
		//监听页面刷新
		EventBus.$on("refresh-click", function(arg) {
			EventBus.$emit('update-statistics-time', {});//更新统计时间
			loadData([0, 1, 2], vm);
		});
		
		//弹出筛选框
		EventBus.$on('filter-click', function(arg) {
			//弹框显示筛选条件
            Vuedals.Bus.$emit('new', {
                title: '条件筛选',
                onClose:function(data){
                    
                },
                component: 'sign-progress-filter',
                props: {
                    
                }
            });
		});
	}
})
function initData(vm) {
	//获得缓存中缓存的角色权限
	var userRole = window.localStorage.getItem("selectedRole");
	if(!userRole) {
		return false;
	}
	vm.userRole = JSON.parse(userRole);
	vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
	vm.area = vm.userRole.code;
	vm.areaTile = vm.userRole.name;
	var now = new Date();
	if(now.getMonth() >= 6) {
		vm.chooseYear = now.getFullYear();
	} else {
		vm.chooseYear = now.getFullYear() - 1;
	}
	vm.startDate = getStartDate(vm.chooseYear);
	vm.endDate = getEndDate(vm.chooseYear);
	//更新头部信息
	EventBus.$emit('update-all-prompt-info', {areaName:vm.areaTile,selectDate:vm.chooseYear+"年",dimensionVal:vm.analysisName});
}
function initReqParams(vm) {
	vm.index = 13;
	if(vm.lowCode) {
		vm.index = 17;
	}
	reqParam = [{
		url: "/statistics/sign_info",
		reqType: 'get',
		data: {
			level: vm.level,
			area: vm.area,
			lowCode: vm.lowCode,
			year: vm.chooseYear,
			endDate: vm.endDate
		}
	}, {
		url: "/statistics/interval_total",
		reqType: 'get',
		data: {
			level: vm.level,
			area: vm.area,
			startDate: vm.startDate,
			endDate: vm.endDate,
			interval: vm.selectedDateType,
			index: vm.index,
			lowCode: vm.lowCode
		}
	}, {
		url: "/statistics/lowlevel_all",
		reqType: 'get',
		data: {
			sort: 1,
			date: vm.endDate,
			level: vm.level,
			index: vm.index,
			area: vm.area,
			lowCode: vm.lowCode
		}
	}];
	if(vm.lowLevel) {
		reqParam[2].data.lowLevel = vm.lowLevel;
	}
	return reqParam;
}
function getTopReqParams(index1, vm) {
	var url = "statistics/interval_total",
		data = {
			index: index1,
			level: vm.level,
			area: vm.area,
			year: vm.chooseYear,
			endDate: vm.endDate,
			startDate: vm.startDate
		};
	return {
		url: url,
		data: data
	};
}
function getTopTagDatas(data,vm) {
	vm.signRateData.signRateText = data.signRate.rate.substring(0,data.signRate.rate.length-2) + "%"
	vm.signRateData.signRate = parseFloat(data.signRate.rate)/100;
	vm.signRateData.signAmount = data.signRate.sign;
	vm.signRateData.signRateAll = data.signRate.people;
	
	vm.signRateData.completeRateText = data.signTaskRate.rate.substring(0,data.signTaskRate.rate.length-2) + "%"
	vm.signRateData.completeRate = parseFloat(data.signTaskRate.rate)/100;
	vm.signRateData.completeAmount = data.signTaskRate.sign;
	vm.signRateData.completeRateAll = data.signTaskRate.people;
	 var signArr = [{
            name: '签约量',
            value: vm.signRateData.signAmount
        },{
            name: '签约总量',
            value: vm.signRateData.signRateAll
        }];
        
        var completeArr = [{
            name: '完成量',
            value: vm.signRateData.completeAmount
        },{
            name: '完成总量',
            value: vm.signRateData.completeRateAll
        }];
	 drawPieChart('signMain', signArr, ['#12b7f5', '#ebebf5']);//签约率
	 drawPieChart('completeMain', completeArr, ['#12b7f5', '#ebebf5']);//完成率
}
function loadData(loadArr, vm) {
	//获取其他请求的参数
	var reqParams = initReqParams(vm),
		reqPromise = [],
		newArr = []; //记录非顶部请求的请求数组
	for(i = 0; i < loadArr.length; i++) {
		var j = loadArr[i];
		var param = reqParams[j];
		reqPromise.push(httpRequest.get(param.url, {
			data: param.data
		}));
		newArr.push(loadArr[i]);
	}
	if(reqPromise.length > 0) {
		Promise.all(reqPromise).then(function(ress) {
			var res1, res2, res3;
			for(var i = 0; i < loadArr.length; i++) {
				var j = loadArr[i] + 1;
				if(j == 1) {
					res1 = ress[i];
				}
				if(j == 2) {
					res2 = ress[i];
				}
				if(j == 3) {
					res3 = ress[i];
				}
			}
			if(res1 && res1.status == 200) {
				getTopTagDatas(res1.data,vm);
			}
			if(res2 && res2.status == 200) {
				handleSecondPanelData(res2.data, vm);
			}
			if(res3) {
				if(res3.status == 200) {
					listHandle(res3.data, vm);
				} else {
					console.log(res3.msg);
				}
			}
		})
	}
}
function handleSecondPanelData(data, vm) {
	var xDatas = [],
		yDatas = [],
		names = [],
		colors = ['#12b7f5'],
		index_names = {
			'index_1': '总签约人数'
		};
	for(var p in data) {
		names.push(index_names[p]);
		var xData = _.map(data[p].data, function(o) {
			return o.range;
		});
		var yData = _.map(data[p].data, function(o) {
			return o.amount;
		});
		xDatas.push(xData);
		yDatas.push(yData);
	}
	EventBus.$emit("draw-line-chart", {
		panelName: "签约量趋势",
		quotaNames: names,
		xData: xDatas[0],
		yDatas: yDatas,
		colors: colors
	});
}
function listHandle(data, vm) {
	for(i in data) {
		var list = data[i];
		var topArr = [];
		topArr = soreRank(getKeyValueArr(list, 'amount'));
		var arr = _.map(list, function(o, index) {
			var cols = [o.name];
			if(vm.analysisType=="2" && vm.level>2 && vm.lowLevel!=1){
				cols.push(o.num);
			}else{
				cols.push(o.amount);
			}
            if(vm.level>2 && vm.lowLevel!=1){
	          	cols.push(o.signTaskNum);
	          	cols.push(parseFloat(o.rate).toFixed(2)+"%");
	        }else if(vm.chooseYear!="2016"){
	          cols.push(o.signRegulationNum);
	        }
			
			return {
				rank: topArr[index],
				code: o.code,
				name: o.name,
				cols: cols
			}
		});
		var activeTab =  $(".area-tab-panel .area-tab.active span").html();
		var headers = ["排名", "签约量", "目标率","当前签约率"];
		if(activeTab=="团队"){
			headers = ["排名", "签约量", "调控量"];
		}
		EventBus.$emit("render-area-data", {
			level: vm.level,
			area: vm.area,
			lowLevel: vm.lowLevel,
			headers: headers,
			rows: arr
		});
	}
}

app/statistics/sign-progress.html

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>签约进展</title>
		<meta name="author" content="yihu.com" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<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="css/common.css" />
	</head>
	<body style="margin: 0;">
		<div id="main">
			<header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
			<header-prompt></header-prompt>
			<!-- 饼图 -->
			<div class="mt10 mb30">
				<div class="c-row">
					<div class="c-50 c-t-center c-position-r">
						<div class="div-radius-panel">
							<div class="c-f16 c-12b7f5 mt15">{{signRateData.signRateText}}</div>
							<div class="c-f14 c-666">签约率</div>
						</div>
						<div id="signMain" class="c-100 height-120"></div>
						<div class="c-f12 c-999 div-data-value">
							<span class="c-f12 c-12b7f5 qianyuelv">{{signRateData.signAmount}}</span>/
							<span class="c-f12 c-333 qianyuezong">{{signRateData.signRateAll}}</span>
						</div>
					</div>
					<div class="c-50 c-t-center c-position-r">
						<div class="div-radius-panel">
							<div class="c-f16 c-12b7f5 mt15">{{signRateData.completeRateText}}</div>
							<div class="c-f14 c-666">完成率</div>
						</div>
						<div id="completeMain" class="c-100" style="height: 120px;"></div>
						<div class="c-f12 c-999 div-data-value">
							<span class="c-f12 c-12b7f5">{{signRateData.completeAmount}}</span>/
							<span class="c-f12 c-333">{{signRateData.completeRateAll}}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 折线图 -->
			<line-chart v-on:getlinedata="getNewLineData" class="mlr8"></line-chart>
			<!-- 底部区域图 -->
			<area-data-panel class="mt20 mlr8" v-on:getnewdata="getAreaData"></area-data-panel>
			<!--模态框组件-->
			<vuedals></vuedals>
		</div>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
		<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="../../js/util.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="../../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/event-bus.js"></script>
		<script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../component/statistics/sign-progress-filter.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/sign-progress.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

component/statistics/header-prompt.js

@@ -37,6 +37,14 @@ Vue.component('header-prompt', {
		EventBus.$on('update-dimension-name', function(arg) {
			vm.dimensionVal = arg.dimensionVal;
		});
		
		//更新所有信息
		EventBus.$on('update-all-prompt-info', function(arg) {
			vm.areaName = arg.areaName;
			getJieZhiTime(vm);
			vm.selectDate = arg.selectDate;
			vm.dimensionVal = arg.dimensionVal;
		});
	},
	methods: {
		

component/statistics/sign-progress-filter.js

@@ -0,0 +1,63 @@
(function(){
    Vue.component('sign-progress-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">\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33 active">\
							<a href="#" class="f-fs14">按任务</a>\
						</div>\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">按人口</a>\
						</div>\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">65岁以上签约</a>\
						</div>\
					</div>\
					<div class="mt20 div-group-btn c-row ml40">\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">高血压</a>\
						</div>\
						<div class="div-btn c-33">\
							<a href="#" class="f-fs14">糖尿病</a>\
						</div>\
					</div>\
				</div>\
			</div>',
        props:[],
        data: function(){
            return {
                yearHtml:""
            }
        },
        methods: {
        	 yearClick:function(){
	          	$(event.target.closest("div")).addClass('active').siblings().removeClass('active')
	          },
        	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;
           },
        },
        mounted: function(){
        	this.formatYearData();
        }
    });
    
})()