var areaFourVal="";
var dayTime="";
$(function() {
// laydate.render({
// elem: '#time2',
// format: 'yyyy-MM-dd',
// theme: '#114a97',
// done: function(value, date) {
// fourScreen(areaFourVal,value && value.split('-')[2]);
// dayTime=value.split('-')[2];
// }
// });
laydate.render({
elem: '#time3',
range: '~',
theme: '#114a97',
done: function(value, date) {
var areaOneVal=$(".areaOne").val();
twoScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
}
});
var mySwiper = new Swiper('.swiper-container', {
loop: true,
autoplay: {
delay: 60000,
},
pagination: { /* 分页器*/
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// followFinger : false,
// speed:800,
on: {
init: function() {
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
transitionEnd: function() {
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
},
}
})
Ajax();
})
var cityObj = {
ele1: "sqs_count",
ele2: "syq_count",
ele3: "lyq_count",
ele4: "ycs_count",
ele5: "mqx_count",
ele6: "sx_count",
ele7: "nlx_count",
ele8: "zcx_count",
ele9: "ycx_count",
ele10: "xyx_count",
ele11: "cxyt_count",
ele12: "djbl_count"
}
var vars = {};
getCountUp(cityObj)
function getCountUp(obj1) {
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
$.each(obj1, function(k, v) {
new CountUp(v, 0, 100, 0, 2, options).start()
vars[v] = new CountUp(v, 0, 100, 0, 2, options)
})
}
var myDate = new Date();
function turn(aa) {
if(aa < 10) {
aa = "0" + aa;
}
return aa
}
// 第三屏 第四屏 发光外框 定时
(function() {
var i = 0;
var length = $(".orderState_ul >li").length;
var j = 0;
var length_1 = $(".orderTtype_Con li").length;
setInterval(function() {
if(i == length) {
i = 0;
$(".orderState_ul >li").removeClass('active');
}
$(".orderState_ul >li").eq(i).addClass('active').siblings().removeClass('active');
if(i == 5) {
$(".orderState_ul >li").eq(4).removeClass('active');
}
i++;
if(j == length_1) {
j = 0;
}
$(".orderTtype_Con li").eq(j).addClass('active').siblings().removeClass('active');
j++;
}, 2000);
})();
//第一屏幕 开始
function oneScreen() {
// $('.gdmap-r ul').html('');
// var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
// });
$.ajax({
type: "get",
url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
async: true,
dataType: 'json',
data: {
start: myDate.getFullYear() + "-" + turn(myDate.getMonth() + 1) + "-" + turn(myDate.getDate()),
end: myDate.getFullYear() + "-" + turn(myDate.getMonth() + 1) + "-" + turn(myDate.getDate()),
},
success: function(data) {
if(data.state.toLowerCase() == 'success') {
// layer.close(index);
var con = data.data;
console.log(con);
$(con).each(function(i, n) {
if(n.AreaName.indexOf('商丘') != -1) {
vars.sqs_count.update(n.Count);
}
if(n.AreaName.indexOf('睢阳') != -1) {
vars.syq_count.update(n.Count);
}
if(n.AreaName.indexOf('梁园') != -1) {
vars.lyq_count.update(n.Count);
}
if(n.AreaName.indexOf('永城') != -1) {
vars.ycs_count.update(n.Count);
}
if(n.AreaName.indexOf('民权') != -1) {
vars.mqx_count.update(n.Count);
}
if(n.AreaName.indexOf('睢县') != -1) {
vars.sx_count.update(n.Count);
}
if(n.AreaName.indexOf('宁陵') != -1) {
vars.nlx_count.update(n.Count);
}
if(n.AreaName.indexOf('柘城') != -1) {
vars.zcx_count.update(n.Count);
}
if(n.AreaName.indexOf('虞城') != -1) {
vars.ycx_count.update(n.Count);
}
if(n.AreaName.indexOf('夏邑') != -1) {
vars.xyx_count.update(n.Count);
}
if(n.AreaName.indexOf('城乡一体') != -1) {
vars.cxyt_count.update(n.Count);
}
if(n.AreaName.indexOf('当即办理') != -1) {
vars.djbl_count.update(n.Count);
}
})
}
}
});
}
//第二屏
function twoScreen(start, end,areaTwoVal) {
if(!areaTwoVal){
areaTwoVal="sqs12345"
}
$.ajax({
type: "get",
url: huayi.config.callcenter_url + "info/GetSourceByDate",
async: true,
dataType: 'json',
data: {
start: start,
end: end,
branchcode:areaTwoVal
},
success: function(data) {
if(data.state.toLowerCase() == 'success') {
// layer.close(index);
$('.orderSource ul li .rectangle').remove();
var con = data.data;
$(con).each(function(i, n) {
if(!n.Percent) {
n.Percent = '0.00%'
}
if(n.Source.indexOf('信箱') != -1) {
n.Source = '信箱'
}
if(n.Source.indexOf('APP') != -1) {
n.Source = 'APP'
}
if(n.Source.indexOf('政务') != -1) {
n.Source = '政务网'
}
var str = '
' +
'
' +
'
' +
'
' +
'
' +
'
' + n.Percent.split('%')[0] + '
%
占总量
' +
'
' +
'
' +
'
' +
'
' +
'' + n.Source + '' + n.Count + '' +
'
' +
'
'
$('.orderSource ul li').eq(i).prepend(str)
})
}
}
});
}
//第三屏
function threeScreen(areaThreeVal) {
if(!areaThreeVal){
areaThreeVal="sqs12345"
}
$.ajax({
type: "get",
url: huayi.config.callcenter_url + "Info/GetTypeCountNew",
data:{
branchcode:areaThreeVal
},
async: true,
dataType: 'json',
success: function(data) {
if(data.state.toLowerCase() == 'success') {
$('.orderTtype_Con ul').html('');
// layer.close(index);
var con = data.data;
var img_name = '';
$(con).each(function(i, n) {
if(n.TypeName.indexOf('咨询') != -1) {
img_name = 'order_ZX.png'
}
if(n.TypeName.indexOf('求助') != -1) {
img_name = 'order_QZ.png'
}
if(n.TypeName.indexOf('投诉') != -1) {
img_name = 'order_TS.png'
}
if(n.TypeName.indexOf('建议') != -1) {
img_name = 'order_JY.png'
}
if(n.TypeName.indexOf('表扬') != -1) {
img_name = 'order_BY.png'
}
if(n.TypeName.indexOf('其他') != -1) {
img_name = 'order_QT.png'
}
$('' +
'' + n.TypeName + '
' +
'
' +
'数据展示
' +
'' + n.DayCount + '
' +
'今日' + n.TypeName + '量
' +
'' + n.MonthCount + '
' +
'本月' + n.TypeName + '量
' +
'' + n.TotalCount + '
' +
'' + n.TypeName + '总量
' +
'' +
'
' + n.Percent + '
' +
'
' +
'总计类型占比
' +
'').appendTo('.orderTtype_Con ul');
})
}
}
});
}
// //第四屏 数字滚动
// function fourScreen(areaFourVal,dayTime) {
// if(!areaFourVal){
// areaFourVal="sqs12345"
// }
// $.ajax({
// type: "get",
// url: huayi.config.callcenter_url + "Info/GetStateCountByMonth",
// data:{
// branchcode:areaFourVal,
// day:dayTime
// },
// async: true,
// dataType: 'json',
// success: function(data) {
// if(data.state.toLowerCase() == 'success') {
// // layer.close(index);
// var con = data.data;
// $(con).each(function(i, n) {
// if(n.Name.indexOf('延时审核') != -1) {
// $("#state_yssh").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('已办理') != -1) {
// $("#state_ybl").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('已回访') != -1) {
// $("#state_yhf").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('重办中') != -1) {
// $("#state_cbz").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('已结案') != -1) {
// $("#state_yja").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('新工单') != -1) {
// $("#state_xzgd").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('待交办') != -1) {
// $("#state_djb").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('待查收') != -1) {
// $("#state_dcs").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('退回审核') != -1) {
// $("#state_thsh").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('办理中') != -1) {
// $("#state_blz").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('待审核') != -1) {
// $("#state_dsh").rollNum({
// deVal: n.Count
// });
// }
// if(n.Name.indexOf('重办待交办') != -1) {
// $("#state_cbdjb").rollNum({
// deVal: n.Count
// });
// }
// });
// }
// }
// });
// }
//第五屏js
function fiveScreen(areaFiveVal) {
if(areaFiveVal){
huawus(areaFiveVal);
jtvs(areaFiveVal);
keyWord(areaFiveVal);
}else{
areaFiveVal="sqs12345"
huawus(areaFiveVal);
jtvs(areaFiveVal);
keyWord(areaFiveVal);
}
}
function huawus(areaFiveVal) {
$.ajax({
type: "get",
url: huayi.config.callcenter_url + "info/GetTelCountByDate",
async: true,
dataType: "json",
data: {
date: myDate.getFullYear() + "-" + turn(myDate.getMonth() + 1) + "-" + turn(myDate.getDate()),
branchcode:areaFiveVal
},
success: function(data) {
if(data.state.toLowerCase() == "success") {
// layer.close(index);
var con = data.data;
huawu.setOption({
series: [{
data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
// data: [20, 100, 5, 80]
}]
})
}
}
});
}
function jtvs(areaFiveVal) {
$.ajax({
type: "get",
url: huayi.config.callcenter_url + "info/GetTelRate24ByDate",
async: true,
dataType: 'json',
data: {
// date:$('#time4').val()
branchcode:areaFiveVal
},
success: function(data) {
if(data.state.toLowerCase() == 'success') {
// layer.close(index);
var con = data.data;
// var part3=data.data.b;
jtv_num.setOption({
xAxis: {
data: con.hours
},
series: [{
data: con.rates
}]
})
}
}
});
}
// $(".depart").change(function() {
// keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1]);
// });
// 第五屏
$(".areaFive").change(function() {
var areaFiveVal=$(this).val();
fiveScreen(areaFiveVal);
});
// 第四屏
// $(".areaFour").change(function() {
// var areaFourVal=$(this).val();
// fourScreen(areaFourVal,dayTime)
// });
// 第三屏
$(".areaThree").change(function() {
var areaThreeVal=$(this).val();
threeScreen(areaThreeVal);
});
// 第二屏
$(".areaTwo").change(function() {
var areaTwoVal=$(this).val();
twoScreen($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaTwoVal);
});
//区县筛选
deprtment ();
function deprtment () {
$.getJSON( huayi.config.callcenter_url +"CountyBranch/GetBranchListS", function(result) {
if(result.state.toLowerCase() == "success") {
goodslist = result.data;
// 第五屏
$(".areaFive").empty();
$(goodslist).each(function(i, n) {
$('').appendTo($(".areaFive"));
});
//第4屏
$(".areaFour").empty();
$(goodslist).each(function(i, n) {
$('').appendTo($(".areaFour"));
});
//第3屏
$(".areaThree").empty();
$(goodslist).each(function(i, n) {
$('').appendTo($(".areaThree"));
});
//第2屏
$(".areaTwo").empty();
$(goodslist).each(function(i, n) {
$('').appendTo($(".areaTwo"));
});
}
});
}
function keyWord(areaFiveVal) {
$.ajax({
type: "get",
url: huayi.config.callcenter_url + "info/GetKeyCountByDateNew",
async: true,
dataType: 'json',
data: {
// date:$('#time4').val()
branchcode:areaFiveVal
},
success: function(data) {
if(data.state.toLowerCase() == 'success') {
// layer.close(index);
var con = data.data;
$('.tagcloud').html('');
// var strs=''
$(con).each(function(k, j) {
if(k < 10) {
var strs = '
' +
'
' + j.关键字 + '
' +
'
' + j.投诉 + '
' +
'
投诉量
' +
'
'
$('.tagcloud').append(strs);
}
})
}
},
complete: function(XMLHttpRequest) {
// setTimeout(function(){
tagcloud({
selector: ".tagcloud", //元素选择器
fontsize: 16, //基本字体大小, 单位px
radius: 150, //滚动半径, 单位px
mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast
ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: false // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
});
// },100);
}
});
}
//第五屏图表js
var huawu = echarts.init(document.getElementById('huawu_tody'));
huawu.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: false,
label: {
show: true,
backgroundColor: '#030917'
}
},
},
grid: {
left: '2%',
right: '8%',
bottom: '6%',
containLabel: true
},
xAxis: {
name: '类型',
data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
axisLine: {
lineStyle: {
color: '#038de2'
}
},
axisTick: {
alignWithLabel: true,
show: false
},
axisLabel: { //横轴字体颜色
show: true,
textStyle: {
color: '#00daf4'
}
}
},
yAxis: {
name: '数量',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#038de2'
}
}
},
series: [{
name: '数量',
type: 'bar',
barWidth: 18,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#0285ff'
},
{
offset: 1,
color: '#0385ff24'
}
]
)
}
},
label: {
normal: {
show: true,
position: 'top', //顶部数据显示位置
textStyle: {
color: '#fff' //顶部数据颜色
},
formatter: '{c}' // 这里是数据展示的时候显示的数据
}
},
data: []
}]
});
var jtv_num = echarts.init(document.getElementById('jtv_num'));
jtv_num.setOption({
// title: {
// text: '接通率统计',
// x: 'center',
// textStyle: {
// color: '#fff',
// fontSize: 18,
// fontWeight: 'normal'
// }
// },
grid: {
left: '6%',
right: '8%',
bottom: '6%',
containLabel: true
},
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: 30,
//bottom:'bottom',
// data: ['接通率'],
// textStyle: {
// color: '#fff'
// }
// },
xAxis: {
name: '时',
data: [],
axisLine: {
lineStyle: {
color: '#038de2'
}
},
axisTick: {
alignWithLabel: true,
show: false
},
axisLabel: { //横轴字体颜色
show: true,
textStyle: {
color: '#00daf4'
}
}
},
yAxis: {
name: '比率',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#038de2'
}
}
},
series: [{
name: '接通率',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#00e8fe'
},
{
offset: 1,
color: '#016fa4'
}
]
)
}
},
// data: [500, 10, 25, 78, 85, 89, 56, 120, 20, 230, 52, 85, 45, 46, 12, 600, 15, 18, 95, 150, 28, 134, 146, 145]
data: []
}]
});
function Ajax() {
oneScreen();
twoScreen();
threeScreen();
//fourScreen();
fiveScreen()
}