PC-application/app/statistics/js/renew-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: '',
		analysisName: "所有居民",
		renewRange: {
			renewRangeText: "",
			renewRange: "",
			renewAmount: "",
			renewRateAll: ""
		},
		switchRange: {
			switchRangeText: "",
			switchRange: "",
			switchAmount: "",
			switchRateAll: ""
		},
		contentHtml: "",
        isloading:false,  //加载中
	},
	components: {
		vuedals: Vuedals.Component
	},
	methods: {
		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,
			})
		}
	},
	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.$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.lowCode = data.lowCode;
					vm.analysisName = data.name;
					vm.startDate = getStartDate(vm.chooseYear);
					vm.endDate = getEndDate(vm.chooseYear);
					//请求参数重置，页面类型重新开始
					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-dimension-name', {
						dimensionVal: data.name
					}); //更新维度名称
					EventBus.$emit('update-statistics-time', {}); //更新统计时间
					
				},
				component: 'renew-progress-filter',
				props: {
				    chooseYear: vm.chooseYear,
				    analysisType: vm.analysisType,
				    lowCode: vm.lowCode,
				    analysisName: vm.analysisName					
				}
			});
		});
		$("#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) {
	var topIndex = {
			"4": "29",
			"3": "44",
			"2": "43"
		}, //顶部区域对应的level ： index 
		bottomIndex = {
			"4": "44",
			"3": "43",
			"2": "42"
		}; //与选中的当前底部区域tab的值有关 areaType

	if(vm.lowCode && vm.lowCode != "0") {
		var topIndex = {
				"4": "51",
				"3": "54",
				"2": "53"
			}, //顶部区域对应的level ： index 
			bottomIndex = {
				"4": "54",
				"3": "53",
				"2": "52"
			}; //与选中的当前底部区域tab的值有关 areaType
	}
	var areaType = vm.lowLevel==2 ? "3" : vm.lowLevel==1?"2":vm.level;
	var index = topIndex[vm.level],
		bIndex = bottomIndex[areaType];
	reqParam = [{
		url: "/statistics/getRenewPercentAndChangePercent",
		reqType: 'get',
		data: {
			level: vm.level,
			code: vm.area,
			year: vm.chooseYear,
			index: index,
			lowCode: vm.lowCode
		}
	}, {
		url: "/statistics/interval_total",
		reqType: 'get',
		data: {
			level: vm.level,
			area: vm.area,
			startDate: vm.startDate,
			endDate: vm.endDate,
			interval: vm.selectedDateType,
			index: index,
			lowCode: vm.lowCode
		}
	}, {
		url: "/statistics/lowlevel_all_sign_renew",
		reqType: 'post',
		data: {
			sort: 1,
			date: vm.endDate,
			level: vm.level,
			index: bIndex,
			area: vm.area,
			lowCode: vm.lowCode,
			year: vm.chooseYear
		}
	}];
	if(vm.lowLevel) {
		reqParam[2].data.lowLevel = vm.lowLevel;
	}

	return reqParam;
}

function getTopTagDatas(data, vm) {
	vm.renewRange.renewRangeText = data.renewRange;
	vm.renewRange.renewRange = parseFloat(data.renewRange) / 100;
	vm.renewRange.renewAmount = data.thisYearRenew;
	vm.renewRange.renewRateAll = data.yesterYearSign;

	vm.switchRange.switchRangeText = data.switchRange;
	vm.switchRange.switchRange = parseFloat(data.switchRange) / 100;
	vm.switchRange.switchAmount = data.thisYearSwithch;
	vm.switchRange.switchRateAll = data.thisYearRenew;
	
	var val1 = vm.renewRange.renewRateAll - vm.renewRange.renewAmount;
	var renewArr = [{
		name: '续签量',
		value: vm.renewRange.renewAmount
	}, {
		name: '未达标量',
		value: val1 > 0 ? val1 : 0
	}];
    
    var val2 = vm.switchRange.switchRateAll - vm.switchRange.switchAmount;
	var switchArr = [{
		name: '转签量',
		value: vm.switchRange.switchAmount
	}, {
		name: '未达标量',
		value: val2 > 0 ? val2 : 0
	}];
	var renewChart = drawPieChart('renewMain', renewArr, ['#12b7f5', '#ebebf5'], true); //续签率
	var switchChart = drawPieChart('switchMain', switchArr, ['#12b7f5', '#ebebf5'], true); //转签率
	window.onresize = function() {
		renewChart.resize();
		switchChart.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 = [],
		colors = ['#12b7f5'];
	for(var p in data) {
		names.push("总续签人数");
		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, 'renewNum'));
		var arr = _.map(list, function(o, index) {
			var cols = [o.name];
			cols.push(o.rate);
			cols.push(o.renewNum);
			cols.push(o.signNum);
			return {
				rank: topArr[index],
				code: o.code,
				name: o.name,
				cols: cols
			}
		});
		var headers = ["排名", "续签率", "续签量", "去年签约量"]; 

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