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);
}