XinXiangXLX_UI/CallCenterWe.../js/callDataStat...

/**
 * 呼叫数据图形分析
 * */

var token = $.cookie("token");
var tabIndex = 0;
var endyear = helper.DateFormat.getNowYear(); //初始化当前年份	
var beginyear = endyear - 1;
var hjCompaer; //图形
var legendCon; //图形legend

$(document).ready(function() {
	$('#chooseTime').val(beginyear + ' ~ ' + endyear);
	layui.use('laydate', function() {
		var laydate = layui.laydate;
		laydate.render({
			elem: '#chooseTime',
			format: 'yyyy',
			range: "~",
			type: 'year',
			theme: '#1ab394',
		});
	});

	//tab切换
	$('.hu-tab li').click(function() {
		$(this).addClass('active')
			.siblings().removeClass('active');

		tabIndex = $(this).index();
		$('.hu-content >div').eq(tabIndex).show()
			.siblings().hide();
		loadDatas();
	});
	//初始化图形
	initChart();
	//加载数据
	loadDatas();
	//搜索事件
	$(".sear").click(function() {
		loadDatas();
	});

	//导出
	$('.export').click(function() {
		dcexcel(this);
	})
});

//初始化图形
function initChart() {
	hjCompaer = echarts.init(document.getElementById('hjCompaer'));
	hjCompaer.clear();
	hjCompaer.showLoading();
	option = {
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: legendCon,
			bottom: 0
		},
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
			axisPointer: {
				type: ''
			}
		}],
		yAxis: [{
			type: 'value',
			name: '电话数量',
			nameLocation: 'end',
			nameGap: 40,
			axisLabel: {
				formatter: '{value} '
			}
		}, {
			type: 'value',
			name: '百分比',
			nameLocation: 'end',
			nameGap: 35,
			interval: 10,
			axisLabel: {
				formatter: '{value} '
			}
		}],
		series: [{
			name: '',
			type: 'bar',
			data: []
		}, {
			name: '',
			type: 'bar',
			data: []
		}, {
			name: '',
			type: 'line',
			yAxisIndex: 1,
			data: []
		}, {
			name: '',
			type: 'bar',
			data: []
		}, {
			name: '',
			type: 'bar',
			data: []
		}, {
			name: '',
			type: 'line',
			yAxisIndex: 1,
			data: []
		}],
		color: ['#1ab394', '#adcbfd', '#fbbe5b', '#f26ea2', '#88ebc4', '#fa957f']
	};
	hjCompaer.setOption(option);
}

//获取图形数据
function getDataList() {
	$.ajax({
		type: 'get',
		url: huayi.config.callcenter_url + 'YearContrast/GetDataList',
		dataType: 'json',
		data: {
			token: token,
			beginyear: $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0],
			endyear: $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[1],
		},
		async: true,
		success: function(res) {
			hjCompaer.hideLoading();
			var arr = [];
			var allData = [];
			var content = res.data;
			if(content && content.length > 0) {
				$.each(content, function(index, ele) {
					arr.push(content[index].key);
					allData.push(content[index].value) //console.log(allData);
				});

				option.legend.data = arr; //图例
				option.series[0].name = arr[0]; //图例
				//添加数据name
				for(var i = 0; i < arr.length; i++) {
					option.series[i].name = arr[i];
				}
				//添加图形数据
				for(var j = 0; j < allData.length; j++) {
					option.series[j].data = allData[j];
				}
				hjCompaer.setOption(option);
			}
		}
	});
}

//获取表格
function getTableDataList() {
	var colsArr = [];
	var dataArr = [];
	var loadindex;
	$.ajax({
		type: 'get',
		url: huayi.config.callcenter_url + "YearContrast/GetDataList",
		async: true,
		dataType: 'json',
		beforeSend: function() {
			loadindex = layer.load()
		},
		data: {
			beginyear: $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0],
			endyear: $('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[1],
			token: token,
		},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				var res = data.data;
				if(res && res.length > 0) {
					var newArr = [];
					newArr.push({
						field: '月份',
						title: '月份',
						align: 'center',
						fixed: true,
						width: 150,
					});
					for(var l = 0; l < res.length; l++) {
						newArr.push({
							field: res[l].key,
							title: res[l].key,
							align: 'center',
						});
					}
					colsArr.push(newArr);
					for(var i = 0; i < 12; i++) {
						var newobj = {};
						newobj.月份 = (i + 1) + '月份';
						$.each(res, function(j, k) {
							newobj[k.key] = k.value[i];
						});
						dataArr.push(newobj);
					}
				}
				layui.use('table', function() {
					var table = layui.table;
					//方法级渲染
					table.render({
						elem: '#t_callTotal',
						skin: 'row', //line （行边框风格） row （列边框风格） nob （无边框风格）
						even: true, //开启隔行背景
						size: 'md', //sm,lg,md尺寸的表格
						page: false, //是否显示分页
						limit: 20, //每页默认显示的数量
						cellMinWidth: 100,
						cols: colsArr,
						data: dataArr,
						//height: 'full-132'
					});
				});

			}
		},
	}).then(function() {
		layer.close(loadindex);
	});
}

//导出功能
function dcexcel(obj) {
	if($('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0] == $('#chooseTime').val().split(' ~ ')[1]){
		layer.msg('请选择不同的年份');
		return
	}
	var url = huayi.config.callcenter_url + "YearContrast/ExptList?token=" + token;
	url += "&beginyear=" + ($('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[0]) + "&endyear=" + ($('#chooseTime').val() && $('#chooseTime').val().split(' ~ ')[1]);
	obj.href = url;
}

function loadDatas() {
	if(tabIndex == 0) {
		getDataList(); //加载图形
	} else if(tabIndex == 1) {
		getTableDataList(); //加载表格
	}
}