ShuangHui_UI/双汇APP-h5/statics/js/index.js

mui.init({
	swipeBack: false,
})

mui.ready(function() {
	var selectType = 0

	// 投诉类型饼图
	const complaintPie = echarts.init(document.getElementById('complaintPie'));
	let pieOption = {
		animation: false,
		tooltip: {
			trigger: 'none'
		},
		legend: {
			show: false
		},
		series: [{
			type: 'pie',
			radius: ['30%', '60%'],
			center: ['50%', '50%'],
			data: [{
					value: 0,
					name: '破袋发霉',
					itemStyle: {
						color: '#5470c6'
					}
				},
				{
					value: 0,
					name: '杂质异物',
					itemStyle: {
						color: '#91cc75'
					}
				},
				{
					value: 0,
					name: '变质异味',
					itemStyle: {
						color: '#fac858'
					}
				}
			],
			label: {
				show: false
			}
		}]
	};
	complaintPie.setOption(pieOption);
	let currentHighlightIndex = -1;

	function highlightPieSection(index, name) {
		if(currentHighlightIndex === index) {
			// 取消高亮
			pieOption.series[0].data.forEach(item => {
				item.emphasis = null;
			});
			pieOption.series[0].label.show = false;
			currentHighlightIndex = -1;
		} else {
			// 设置高亮
			pieOption.series[0].data.forEach((item, i) => {
				item.emphasis = {
					scale: i === index,
					scaleSize: 10
				};
			});
			pieOption.series[0].label = {
				show: true,
				position: 'center',
				formatter: name,
				fontSize: 16,
				color: '#333'
			};
			currentHighlightIndex = index;
		}
		complaintPie.setOption(pieOption);
	}
	// 接单率图表
	const acceptanceRate = echarts.init(document.getElementById('acceptanceRate'));
	acceptanceRate.setOption({
		animation: false,
		series: [{
			type: 'gauge',
			startAngle: 90,
			endAngle: -270,
			pointer: {
				show: false
			},
			progress: {
				show: true,
				overlap: false,
				roundCap: true,
				clip: false,
				itemStyle: {
					color: '#4F46E5'
				}
			},
			axisLine: {
				lineStyle: {
					width: 12
				}
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			detail: {
				valueAnimation: true,
				offsetCenter: [0, 0],
				fontSize: 12,
				formatter: '{value}%',
				color: '#333'
			},
			data: [{
				value: 0
			}]
		}]
	});
	// 完结率图表
	const completionRate = echarts.init(document.getElementById('completionRate'));
	completionRate.setOption({
		animation: false,
		series: [{
			type: 'gauge',
			startAngle: 90,
			endAngle: -270,
			pointer: {
				show: false
			},
			progress: {
				show: true,
				overlap: false,
				roundCap: true,
				clip: false,
				itemStyle: {
					color: '#4F46E5'
				}
			},
			axisLine: {
				lineStyle: {
					width: 12
				}
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			detail: {
				valueAnimation: true,
				offsetCenter: [0, 0],
				fontSize: 12,
				formatter: '{value}%',
				color: '#333'
			},
			data: [{
				value: 0
			}]
		}]
	});
	// 趋势线图
	const trendLine = echarts.init(document.getElementById('trendLine'));

	window.addEventListener('resize', function() {
		complaintPie.resize();
		acceptanceRate.resize();
		completionRate.resize();
		trendLine.resize();
	});

	var token = localStorage.getItem("token");

	function initData() {
		// 顶部统计
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + 'Business/GetComplaint',
			async: false,
			data: {
				type: selectType,
				token: token
			},
			dataType: 'json',
			success: function(data) {

				res = data.data;

				if(res.total) $('#total').text(res.total.toLocaleString());
				if(res.thiscontrast) $('#thiscontrast').text(res.thiscontrast);
				if(res.thisnumber) $('#thisnumber').text(res.thisnumber.toLocaleString());
				if(res.othercontrast) $('#othercontrast').text(res.othercontrast);
				if(res.otherthisnumber) $('#otherthisnumber').text(res.otherthisnumber.toLocaleString());

				// 调整箭头
				if(res.thiscontrast >= 0) {
					$('#thiscontrast_i').attr('class', 'fas fa-arrow-up mr-1')
					$('#thiscontrast_div').attr('class', 'text-green-500 text-sm mt-1')
				} else {
					$('#thiscontrast_i').attr('class', 'fas fa-arrow-down mr-1')
					$('#thiscontrast_div').attr('class', 'text-red-500 text-sm mt-1')
				}

				// 调整箭头
				if(res.othercontrast >= 0) {
					$('#othercontrast_i').attr('class', 'fas fa-arrow-up mr-1')
					$('#othercontrast_div').attr('class', 'text-green-500 text-sm mt-1')
				} else {
					$('#othercontrast_i').attr('class', 'fas fa-arrow-down mr-1')
					$('#othercontrast_div').attr('class', 'text-red-500 text-sm mt-1')
				}

				// 计算比例
				let rate = 0;
				if(res.thisnumber > 0 || res.otherthisnumber > 0) {
					rate = (res.thisnumber / (res.thisnumber + res.otherthisnumber)).toFixed(2);
				}
				


				$('#total_rate').attr('style', 'width: ' + rate * 100 + '%;')
			}
		});

		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + 'Business/GetComplaintSituation',
			async: false,
			data: {
				type: selectType,
				token: token
			},
			dataType: 'json',
			success: function(data) {

				res = data.data;
				if(res.gobad) $('#gobad').text(res.gobad.toLocaleString());
				if(res.impurity) $('#impurity').text(res.impurity.toLocaleString());
				if(res.mustiness) $('#mustiness').text(res.mustiness.toLocaleString());

				if(res.gobadRate) $('#gobadRate').text(res.gobadRate);
				if(res.impurityRate) $('#impurityRate').text(res.impurityRate);
				if(res.mustinessRate) $('#mustinessRate').text(res.mustinessRate);

				if(res.gobadcontrast >= 0) {
					$('#gobadcontrast').text(res.gobadcontrast);
					$('#gobadcontrast_i').attr('class', 'fas fa-arrow-up mr-1')
					$('#gobadcontrast_span').attr('class', 'text-green-500')
				} else {
					if(res.gobadcontrast < 0) $('#gobadcontrast').text(res.gobadcontrast);
					$('#gobadcontrast_i').attr('class', 'fas fa-arrow-down mr-1')
					$('#othercontrast_div').attr('class', 'text-red-500')
				}

				if(res.impuritycontrast >= 0) {
					$('#impuritycontrast').text(res.impuritycontrast);
					$('#impuritycontrast_i').attr('class', 'fas fa-arrow-up mr-1')
					$('#impuritycontrast_span').attr('class', 'text-green-500')
				} else {
					if(res.impuritycontrast < 0) $('#impuritycontrast').text(res.impuritycontrast);
					$('#impuritycontrast_i').attr('class', 'fas fa-arrow-down mr-1')
					$('#impuritycontrast_div').attr('class', 'text-red-500')
				}

				if(res.mustinesscontrast >= 0) {
					$('#mustinesscontrast').text(res.mustinesscontrast);
					$('#mustinesscontrast_i').attr('class', 'fas fa-arrow-up mr-1')
					$('#mustinesscontrast_span').attr('class', 'text-green-500')
				} else {
					if(res.mustinesscontrast < 0) $('#mustinesscontrast').text(res.mustinesscontrast);
					$('#mustinesscontrast_i').attr('class', 'fas fa-arrow-down mr-1')
					$('#mustinesscontrast_div').attr('class', 'text-red-500')
				}

				// 重新加载饼图

				let pieOption = {
					animation: false,
					tooltip: {
						trigger: 'none'
					},
					legend: {
						show: false
					},
					series: [{
						type: 'pie',
						radius: ['30%', '60%'],
						center: ['50%', '50%'],
						data: [{
								value: res.mustiness,
								name: '破袋发霉',
								itemStyle: {
									color: '#5470c6'
								}
							},
							{
								value: res.impurity,
								name: '杂质异物',
								itemStyle: {
									color: '#91cc75'
								}
							},
							{
								value: res.gobad,
								name: '变质异味',
								itemStyle: {
									color: '#fac858'
								}
							}
						],
						label: {
							show: false
						}
					}]
				};
				complaintPie.setOption(pieOption);

			}
		});

		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + 'Business/GetComplaintCompleted',
			async: false,
			data: {
				type: selectType,
				token: token
			},
			dataType: 'json',
			success: function(data) {

				res = data.data;

				acceptanceRate.setOption({
					animation: false,
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							clip: false,
							itemStyle: {
								color: '#4F46E5'
							}
						},
						axisLine: {
							lineStyle: {
								width: 12
							}
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						detail: {
							valueAnimation: true,
							offsetCenter: [0, 0],
							fontSize: 12,
							formatter: '{value}%',
							color: '#333'
						},
						data: [{
							value: +res.receivingrate.replace('%', '')
						}]
					}]
				});

				completionRate.setOption({
					animation: false,
					series: [{
						type: 'gauge',
						startAngle: 90,
						endAngle: -270,
						pointer: {
							show: false
						},
						progress: {
							show: true,
							overlap: false,
							roundCap: true,
							clip: false,
							itemStyle: {
								color: '#4F46E5'
							}
						},
						axisLine: {
							lineStyle: {
								width: 12
							}
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						detail: {
							valueAnimation: true,
							offsetCenter: [0, 0],
							fontSize: 12,
							formatter: '{value}%',
							color: '#333'
						},
						data: [{
							value: +res.completerate.replace('%', '')
						}]
					}]
				});
			}
		});

		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + 'Business/GetComplaintTrend',
			async: false,
			data: {
				type: selectType,
				token: token
			},
			dataType: 'json',
			success: function(data) {

				res = data.data;
				var times = [];
				var receivings = [];
				var completes = [];
				if(res && res.length > -1) {
					res.forEach(function(v, i) {
						times.push(v.time);
						receivings.push(v.receiving);
						completes.push(v.complete);
					});
				}

				trendLine.setOption({
					animation: false,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								width: 1,
								color: '#019680',
							},
						},

					},
					dataZoom: [{
						type: 'inside',
						startValue: times.length - 7 - 1,
						endValue: times.length - 1,
						// start: 0,
						// end: (5 / xData.length) * 100,
						zoomLock: true,
					}, ],
					legend: {
						data: ['接单量', '完结量']
					},
					xAxis: {
						type: 'category',
						data: times,
						axisLabel: {
							interval: 0,
							rotate: 45
						}
					},
					yAxis: {
						type: 'value'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '15%',
						containLabel: true
					},
					series: [{
						name: '接单量',
						type: 'line',
						smooth: true,
						data: receivings,
					}, {
						name: '完结量',
						type: 'line',
						smooth: true,
						data: completes
					}]
				});
			}
		});
	}

	var types = ['周', '月', '年'];

	$('#changeBut').on('click', function() {
		console.log('changeType');
		selectType++;
		if(selectType > types.length - 1) selectType = 0;
		const typeName = types[selectType];

		$('[name="selectType"]').text(typeName)
		
		initData();
	})
	
	initData();

})

//function changeType() {
//	
//}