SQ12345_Web/WebChart/js/index.js

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];
		}
	});
	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;
					$(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(areaTwoVal) {
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetSourceByDate",
			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()),
				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 = '<div class="source_kuang rectangle">' +
							'<div class="pbout">' +
							'<div class="percent_box">' +
							'<div class="percent_out"></div>	' +
							' <div class="percent_in"></div>' +
							' <div class="percent_word"><p>' + n.Percent.split('%')[0] + '</p>%<p style="margin-top: 16px;">占总量</p>' +
							'</div>' +
							'</div>' +
							'</div>' +
							'<p class="num_word">' +
							'<span>' + n.Source + '</span><span>' + n.Count + '</span>' +
							'</p>' +
							'</div>'
						$('.orderSource ul li').eq(i).prepend(str)
					})
				}
			}
		});
	}

	//第三屏

	function threeScreen(areaThreeVal) {
		$.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'
						}
						$('<li>' +
							'<div class="typeWord">' + n.TypeName + '</div>' +
							'<img src="img/' + img_name + '" alt="" />' +
							'<p class="typeWord_line">数据展示</p>' +
							'<p class="order_count">' + n.DayCount + '</p>' +
							'<p class="typeWord_line">今日' + n.TypeName + '量</p>' +
							'<p class="order_count">' + n.MonthCount + '</p>' +
							'<p class="typeWord_line">本月' + n.TypeName + '量</p>' +
							'<p class="order_count">' + n.TotalCount + '</p>' +
							'<p class="typeWord_line">' + n.TypeName + '总量</p>' +
							'<div class="persent_box">' +
							'<div class="persent_kuang">' + n.Percent + '</div>' +
							'</div>' +
							'<p class="persent_word">总计类型占比</p>' +
							'</li>').appendTo('.orderTtype_Con ul');

					})
				}
			}
		});
	}

	//第四屏 数字滚动
	function fourScreen(areaFourVal,dayTime) {
		$.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(areaTwoVal);
	});
	//区县筛选
	deprtment ();
	function deprtment () {
		$.getJSON( huayi.config.callcenter_data +"CountyBranch/GetBranchListS", function(result) {
			if(result.state.toLowerCase() == "success") {
				goodslist = result.data;
//				第五屏
				$(".areaFive").empty();
				$(goodslist).each(function(i, n) {
					$('<option value="' + n.F_Code 
					+ '">' + n.F_Name 
					+ '</option>').appendTo($(".areaFive"));
				});
				//第4屏
				$(".areaFour").empty();
				$(goodslist).each(function(i, n) {
					$('<option value="' + n.F_Code 
					+ '">' + n.F_Name 
					+ '</option>').appendTo($(".areaFour"));
				});
				//第3屏
				$(".areaThree").empty();
				$(goodslist).each(function(i, n) {
					$('<option value="' + n.F_Code 
					+ '">' + n.F_Name 
					+ '</option>').appendTo($(".areaThree"));
				});
				//第2屏
				$(".areaTwo").empty();
				$(goodslist).each(function(i, n) {
					$('<option value="' + n.F_Code 
					+ '">' + n.F_Name 
					+ '</option>').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='<div class="tagcloud">'
					$(con).each(function(k, j) {
						if(k < 10) {
							var strs = '<div>' +
								'<p class="tag_title">' + j.关键字 + '</p>' +
								'<p class="imgs">' + j.投诉 + '</p>' +
								'<p class="ts_count">投诉量</p>' +
								'</div>'
							$('.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 + '<br/>',
				val;
			for(var i = 0, length = datas.length; i < length; i++) {
				val = (datas[i].value) + '%';
				res += datas[i].seriesName + '：' + val + '<br/>';
			}
			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()
	}