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:""
	},
	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,
				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
		});

		//设置监听器， 监听折线图日期变化
		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){
					vm.analysisType = data.id;
					vm.lowCode = data.lowCode;
					vm.yearHtml = data.yearHtml;
					vm.contentHtml = data.contentHtml;
					vm.chooseYear = data.year;
					vm.startDate = getStartDate(vm.chooseYear);
					vm.endDate = getEndDate(vm.chooseYear);
					
					loadData([0, 1, 2], vm);//刷新数据
					EventBus.$emit('update-statistics-year', {selectDate:data.year + "年"});//更新年份
					EventBus.$emit('update-dimension-name', {dimensionVal:data.name});//更新维度名称
					EventBus.$emit('update-statistics-time', {});//更新统计时间
                },
                component: 'sign-progress-filter',
                props: {
                    yearHtml:vm.yearHtml,
                    contentHtml:vm.contentHtml
                }
            });
		});
	}
})

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.areaTitle = 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.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 = 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 = [],
		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){//团队
			headers = ["排名", (vm.analysisType=="2"?"人口数":"签约量"), "调控量"];
		}

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