/** * 呼叫数据图形分析 * */ 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) { 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(); //加载表格 } }