PC-application/app/statistics/js/sign-progress.js

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: ""
		},
		yearHtml: "",
		contentHtml: "",
        isloading:false,  //加载中
		year1:'0',
		year2:'0',
		year3:'0',
	},
	components: {
		vuedals: Vuedals.Component
	},
	methods: {
		lowlevelTotal:function(){
			var vm = this
			var url = "/statistics/leveltwo_increment"
			    params = {
			        area:vm.area, 
			        level:vm.level, 
			        endDate: vm.endDate,
					index:187,
					slaveKey2:vm.lowCode,
			    };
			httpRequest.get(url,{data:params}).then(function(res){
				if(res.status == 200) {
					var index187 = res.data.index_187
					index187.forEach(function(t){
						t.value = t.amount
						t.name = '签约' + t.name
						if(t.code == 1) {
							vm.year1 = t.value
						}else if(t.code == 2) {
							vm.year2 = t.value
						}else if(t.code == 3) {
							vm.year3 = t.value
						}
					})
					var myChart = echarts.init(document.getElementById('mainTu'));
					var option;
					option = {
						color:['#0EBF97','#15AAE0','#935DF6'],
						series: [
							{
								type: 'pie',
								radius: ['55%', '70%'],
								avoidLabelOverlap: false,
								center:[80,'50%'],
								label: {
									normal: {
										show: false,
										position: 'center'
									}
								},
								emphasis: {
									label: {
										show: true,
										fontSize: 14,
										formatter: function(e, e1, e2, e3){
											var data = e.data
											return ['{a|'+data.name+'}', '{b|'+ data.rate +'%}'].join('\n')
										},
										rich: {
											a: {
												lineHeight: 20
											},
											b: {
												lineHeight: 20
											},
										}
									}
								},
								data:index187
							}
						]
					};
					
					myChart.setOption(option);
					myChart.on('click', function (params) {
						for(var i=0; i<3; i++){
							if(i != params.dataIndex){
								myChart.dispatchAction({
								    type: 'downplay',
								    dataIndex: i
								});
							} else {
								myChart.dispatchAction({
								    type: 'highlight',
								    dataIndex: i
								});
							}
						}
					});
					$('#qianyueNXList>div').on('click', function(){
						myChart.dispatchAction({
						    type: 'downplay',
						    dataIndex: [0,1,2]
						});
						myChart.dispatchAction({
						    type: 'highlight',
						    dataIndex: $(this).index(),
						});
					})
					
				}
			})
			return
			sendGet(url, params, null, function(res){
			    if(res.status == 200){
					if(res.data&&res.data.index_187) {
						$('#qianyueMap').show()
						$('#no_result_wrap').hide()
						var index187 = res.data.index_187
						
						
					}else{
						$('#qianyueMap').hide()
						$('#no_result_wrap').show()
					}
			    }else{
			        mui.toast(res.msg);
			    }
			}, true);
		},
		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;
				this.areaTitle = arg.areaTitle;
				loadData([0, 1, 2], this);
			}
			EventBus.$emit('update-area-name', {
				areaName: this.areaTitle
			});
			//存储请求所带的参数
			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,
				analysisType: this.analysisType,
			})
		}
	},
	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,
			analysisType: this.analysisType
		});
		this.lowlevelTotal()
		//设置监听器， 监听折线图日期变化
		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.$emit('update-area-name', {areaName: vm.areaTitle});
			}
		});
		//监听页面刷新
		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) {
					vm.chooseYear = data.chooseYear;
					vm.startDate = getStartDate(vm.chooseYear);
					vm.endDate = getEndDate(vm.chooseYear);
					vm.lowCode = data.lowCode;
					vm.analysisType = data.id;
					vm.analysisName = data.name;
//					vm.yearHtml = data.yearHtml;
//					vm.contentHtml = data.contentHtml;

					//请求参数重置，页面类型重新开始
					vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
					vm.area = vm.userRole.code;
					vm.areaTitle = vm.userRole.name;
					EventBus.$emit('update-area-name', {
						areaName: vm.areaTitle
					});
					vm.selectedDateType = 1;

					//然后清空请求列表数组
					reqList.splice(0, reqList.length);

					loadData([0, 1, 2], vm); //刷新数据

					//存储请求所带的参数
					reqList.push({
						level: vm.level,
						area: vm.area,
						areaTitle: vm.areaTitle,
						index: vm.index,
						endDate: vm.endDate,
						startDate: vm.startDate,
						lowLevel: vm.lowLevel,
						lowCode: vm.lowCode,
						analysisType: vm.analysisType
					});

					EventBus.$emit('update-statistics-year', {
						selectDate: vm.chooseYear + "年"
					}); //更新年份
					EventBus.$emit('update-statistics-time', {}); //更新统计时间
					EventBus.$emit('update-dimension-name', {
						dimensionVal: data.name
					}); //更新维度名称
				},
				component: 'sign-progress-filter',
				props: {
				    chooseYear: vm.chooseYear,
				    analysisType: vm.analysisType,
				    lowCode: vm.lowCode,
				    analysisName: vm.analysisName
//					yearHtml: vm.yearHtml,
//					contentHtml: vm.contentHtml
				}
			});
		});
		$("#main").removeClass("c-hide");
	}
})

function initData(vm) {
	//获得缓存中缓存的角色权限
	var userRole = window.sessionStorage.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.areaTitle = vm.userRole.name;
	var now = new Date();
	if(now.getMonth() >= 6 || now.getFullYear()>=2023) {
		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.areaTitle,
		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 getTopTagDatas(data, vm) {
	vm.signRateData.signRateText = parseFloat(data.signRate.rate).toFixed(2) + "%"
	vm.signRateData.signRate = parseFloat(data.signRate.rate) / 100;
	vm.signRateData.signAmount = data.signRate.sign;
	vm.signRateData.signRateAll = data.signRate.people;

	vm.signRateData.completeRateText = parseFloat(data.signTaskRate.rate).toFixed(2) + "%"
	vm.signRateData.completeRate = parseFloat(data.signTaskRate.rate) / 100;
	vm.signRateData.completeAmount = data.signTaskRate.sign;
	vm.signRateData.completeRateAll = data.signTaskRate.people;
	
	var val1 = vm.signRateData.signRateAll - vm.signRateData.signAmount
	var signArr = [{
		name: '签约量',
		value: vm.signRateData.signAmount
	}, {
		name: '未签约量',
		value: val1 > 0 ? val1 : 0
	}];
    
    var val2 = vm.signRateData.completeRateAll - vm.signRateData.completeAmount;
	var completeArr = [{
		name: '完成量',
		value: vm.signRateData.completeAmount
	}, {
		name: '未达标量',
		value: val2 > 0 ? val2 : 0
	}];
	var signChart = drawPieChart('signMain', signArr, ['#12b7f5', '#ebebf5'], true); //签约率
	var completeChart = drawPieChart('completeMain', completeArr, ['#12b7f5', '#ebebf5'], true); //完成率
	window.onresize = function() {
		signChart.resize();
		completeChart.resize();
		window.lineCharts.resize(); //日周月折线图
	}
}

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]);
	}
	vm.isloading=true
	if(reqPromise.length > 0) {
		Promise.all(reqPromise).then(function(ress) {
			vm.isloading=false
			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 = [],
		taskNum = vm.lowCode ? data.index_17.taskNum : data.index_1.taskNum,
		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,
		markLineValue: taskNum,
		markLineName: "目标量"
	});
}

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 headers = ["排名", (vm.analysisType == "2" ? "人口数" : "签约量"), "目标率", "当前签约率"]; //analysisType=2 为按人口
		if(vm.lowLevel == 1 || vm.level == 2) { //团队
			if(vm.chooseYear =="2016"){
				headers = ["排名", (vm.analysisType == "2" ? "人口数" : "签约量")];
			}else{
				headers = ["排名", (vm.analysisType == "2" ? "人口数" : "签约量"), "调控量"];
			}
		}

		EventBus.$emit("render-area-data", {
			level: vm.level,
			area: vm.area,
			lowLevel: vm.lowLevel,
			headers: headers,
			rows: arr
		});
	}
}