var areaOneVal = helper.cookies.get("areaOneVal"); var areaOneText = helper.cookies.get("areaOneText"); if (areaOneVal) { var areaOneVal = helper.cookies.get("areaOneVal"); } else{ var areaOneVal="sqs12345" } $(function() { laydate.render({ elem: '#time1', range: '~', theme: '#114a97', done: function(value, date) { var areaOneVal=$(".areaOne").val(); partOne(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal); } }); laydate.render({ elem: '#time2', theme: '#114a97', done: function(value, date) { var areaOneVal=$(".areaOne").val(); partTwo(value,areaOneVal) } }); laydate.render({ elem: '#time3', theme: '#114a97', done: function(value, date) { var areaOneVal=$(".areaOne").val(); partThree(value,areaOneVal) } }); Ajax(); $(".areaOne").change(function() { var areaOneVal=$(this).val(); var areaOneText=$(".areaOne").find("option:selected").text(); helper.cookies.set("areaOneVal", areaOneVal, 7); helper.cookies.set("areaOneText", areaOneText, 7); partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal); partTwo($('#time2').val(),areaOneVal); partThree( $('#time3').val(),areaOneVal); // Ajax() }); }) //区县筛选 deprtment(); function deprtment() { $.getJSON( huayi.config.callcenter_url +"CountyBranch/GetBranchListS", function(result) { if(result.state.toLowerCase() == "success") { goodslist = result.data; // 第五屏 $(".areaOne").empty(); $(goodslist).each(function(i, n) { $('').appendTo($(".areaOne")); }); if (areaOneVal) { $(".areaOne").val(areaOneVal); } } }); } var sitProportion = echarts.init(document.getElementById('sitProportion')); //坐席闲忙比例 sitProportion.setOption({ color: ['#4ab7c7', '#2484d9', '#2e39c1'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', label: { show: true, backgroundColor: '#333' } }, formatter: function(datas) { var res = datas[0].name + '
', val; for(var i = 0, length = datas.length; i < length; i++) { val = (datas[i].value) + '%'; res += datas[i].seriesName + ':' + val + '
'; } return res; } }, legend: { top: 'top', left: '135px', data: ['置忙', '通话', '空闲'], textStyle: { color: '#00e9ff' } }, grid: { left: '1%', right: '3%', bottom: '5%', containLabel: true }, xAxis: { name: '时', data: [], axisLine: { lineStyle: { color: '#3061a2' } }, axisTick: { alignWithLabel: true, show: false }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, yAxis: { name: '(比率)', splitLine: { show: false }, axisLine: { lineStyle: { color: '#3061a2' } }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, series: [{ name: '置忙', type: 'bar', data: [] }, { name: '通话', type: 'bar', data: [] }, { name: '空闲', type: 'bar', data: [] }] }); function partOne(starts, ends,areaOneVal) { $.ajax({ type: "get", url: huayi.config.callcenter_url + "info/GetUserStateCount24ByDate", async: true, dataType: 'json', data: { start: starts, end: ends, branchcode:areaOneVal }, success: function(data) { if(data.state.toLowerCase() == 'success') { // layer.close(index); var con = data.data; sitProportion.setOption({ xAxis: { data: con.hours }, series: [{ data: con.thpercents }, { data: con.zmpercents }, { data: con.kxpercents }] }) } } }); } //part 2 var phoneTimeCount = echarts.init(document.getElementById('phoneTimeCount')); phoneTimeCount.setOption({ color: ['#ceba5f', '#4da991', '#f06e84', '#6a91e0'], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { show: true, backgroundColor: '#333' } } }, grid: { left: '2%', right: '5%', bottom: '6%', containLabel: true }, legend: { top: 'top', left: '180px', data: ["来电数量", "接通数量", "放弃数量", "黑名单拒接数量"], textStyle: { color: '#00e9ff' } }, xAxis: { name: '时', data: [], axisLine: { lineStyle: { color: '#3061a2' } }, axisTick: { alignWithLabel: true, show: false }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, yAxis: { name: '数量', splitLine: { show: false }, axisLine: { lineStyle: { color: '#3061a2' } }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, series: [] }); function partTwo(dates,areaOneVal) { // var index = layer.load(1, { // shade: [0.5, '#030303'] //0.1透明度的白色背景 // }); $.ajax({ type: "get", url: huayi.config.callcenter_url + "info/GetTelCount24ByDate", async: true, dataType: "json", data: { date: dates, branchcode:areaOneVal }, success: function(data) { if(data.state.toLowerCase() == "success") { // layer.close(index); var con = data.data; phoneTimeCount.setOption({ xAxis: { data: con.hours }, series: [{ name: "来电数量", type: "line", smooth: true, showAllSymbol: true, symbol: "emptyCircle", symbolSize: 10, data: con.rcounts }, { name: "接通数量", type: "line", smooth: true, showAllSymbol: true, symbol: "emptyCircle", symbolSize: 10, data: con.ccounts }, { name: "放弃数量", type: "line", smooth: true, showAllSymbol: true, symbol: "emptyCircle", symbolSize: 10, data: con.gcounts }, { name: "黑名单拒接数量", type: "line", smooth: true, showAllSymbol: true, symbol: "emptyCircle", symbolSize: 10, data: con.scounts } ] }) } } }); } //part3 var todyPhoneCount = echarts.init(document.getElementById('todyPhoneCount')); todyPhoneCount.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: false, label: { show: true, backgroundColor: '#030917' } }, }, xAxis: { name: '类型', data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"], axisLine: { lineStyle: { color: '#3061a2' } }, axisTick: { alignWithLabel: true, show: false }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, yAxis: { name: '数量', splitLine: { show: false }, axisLine: { lineStyle: { color: '#3061a2' } }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, series: [{ name: '数量', type: 'bar', barWidth: 18, itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#368cab', '#54b793', '#4b6ab0', '#2531a9' ]; return colorList[params.dataIndex] } } }, label: { normal: { show: true, position: 'top', //顶部数据显示位置 textStyle: { color: '#fff' //顶部数据颜色 }, formatter: '{c}' // 这里是数据展示的时候显示的数据 } }, data: [] }] }); function partThree(dates,areaOneVal) { $.ajax({ type: "get", url: huayi.config.callcenter_url + "info/GetTelCountByDate", async: true, dataType: "json", data: { date: dates, branchcode:areaOneVal }, success: function(data) { if(data.state.toLowerCase() == "success") { // layer.close(index); var con = data.data; todyPhoneCount.setOption({ series: [{ data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes] }] }) } } }); } function Ajax() { var areaOneVal = helper.cookies.get("areaOneVal"); var areaOneText = helper.cookies.get("areaOneText"); partOne($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1],areaOneVal); partTwo($('#time2').val(),areaOneVal) partThree($('#time3').val(),areaOneVal); }