AnYang_UI/WebChart/js/sourceChanne...

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',
		format: 'yyyy-MM-dd',
		theme: '#114a97',
		done: function(value, date) {
			var areaOneVal=$(".areaOne").val();
			partOne(value,areaOneVal)
		}
	});
	laydate.render({
		elem: '#time2',
		range: '~',
		format: 'yyyy-MM-dd',
		theme: '#114a97',
		done: function(value, date) {
			var areaOneVal=$(".areaOne").val();
			partTwo(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],areaOneVal)
		}
	});
	laydate.render({
		elem: '#time3',
		range: '~',
		theme: '#114a97',
		done: function(value, date) {
			var areaOneVal=$(".areaOne").val();
			partThree(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1],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(),areaOneVal);
		partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
		partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal);
//  	Ajax()
	});
})
// 跳轉
	$(".index").click(function(){
		window.open('detail.html','_self')
	})
	$(".second").click(function(){
		window.open('second.html','_self')
	})
	$(".third").click(function(){
		window.open('third.html','_self')
	})
	$(".fourth").click(function(){
		window.open('fourth.html','_self')
	})
	$("#department").click(function(){
		window.open('receiptDepartment.html','_self')
	})
	$("#call").click(function(){
		window.open('TelephoneDetails.html','_self')
	})
	$("#complaint").click(function(){
		window.open('complaintsReport.html','_self')
	})
	$(".nav_middle").click(function(){
		window.open('index.html','_self')
	})
//区县筛选
//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) {
				$('<option value="' + n.F_Code 
				+ '">' + n.F_Name 
				+ '</option>').appendTo($(".areaOne"));
			});
			if (areaOneVal) {
				$(".areaOne").val(areaOneVal);
			}
		}
	});
}
//part 1 //受理群众区域统计  对接完毕
var part_1 = echarts.init(document.getElementById('part_1'));
part_1.setOption({
	color: ['#69e1a9', '#6a91e0', '#ceba5f', '#f06e84', '#569d4e', '#7d55ba', '#ce5aba', '#7931dd', '#7f9d3e','#ff5500','#0a45e7'],
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			label: {
				show: true,
				backgroundColor: '#333'
			}
		}
	},
	 toolbox: {
		    x:100,
		    y:20,
	        show : true,
	        feature : {
			   
	            mark : {show: true},
	            magicType : {show: true, type: ['line', 'bar']},
	        },
			  iconStyle:{
			                    normal:{
			                      color:'#ffaa00',//设置颜色
			                    }
			                } 
	    },
	grid: {
		left: '2%',
		right: '5%',
		bottom: '6%',
		containLabel: true
	},
	legend: {
		top: 'top',
		left: '180px',
		data: [],
		textStyle: {
			color: '#00e9ff'
		},
						 selected: {
							'市区': true,
							'文峰区': false,
							'北关区': false,
							'殷都区': false,
							'龙安区': false,
							'安阳县': false,
							'汤阴县': false,
							'内黄县': false,
							'滑县': false,
							'林州市': false,
							'高新区': false
						}
	},
	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: []
});
    part_1.on('legendselectchanged', function(params) {
		console.log(params.selected)
        var option = this.getOption();
        var select_key = Object.keys(params.selected);
        var select_value = Object.values(params.selected);
		console.log(select_value,select_key)
        var n = 0;
        // select_value.map(res => {
        //    if(!res){
        //        n++;
        //     }
        // });
        // console.log('n',n)
        //    if (n == select_value.length ) {
        //                        option.legend[0].selected[params.name] = true;
        //              }
		// $sel.map(res => {
		//    console.log(res)
		// });
        this.setOption(option)
     
    });
function partOne(dates,areaOneVal) {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate",
		async: true,
		dataType: "json",
		data: {
			date: dates,
			branchcode:areaOneVal
		},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				var con = data.data;
				console.log(con)
				var part1Axis = con.hours;
				var sers = []
				$(con.cols).each(function(i, n) {
					var obj = {};
					obj.name = n;
					obj.type = "bar";
					obj.smooth = true;
					obj.showAllSymbol = true;
					obj.symbol = "emptyCircle";
					obj.symbolSize = 10;
					obj.data = con.counts[i];
					sers.push(obj);
					console.log(sers)
				})
				part_1.setOption({
					xAxis: {
						data: part1Axis
					},
					legend: {
						data: con.cols
					},
					series: sers
				});

			}
		}

	});
}
//part2 //渠道来源
var source = echarts.init(document.getElementById('source'));
source.setOption({

	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: false,
			label: {
				show: true,
				backgroundColor: '#030917'
			}
		},
	},
	//				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: [{
		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 partTwo(start, end,areaOneVal) {
	$.ajax({
		type: "get",
		url: huayi.config.callcenter_url + "info/GetSourcePercentByDate",
		dataType: 'json',
		async: true,
		data: {
			start: start,
			end: end,
			branchcode:areaOneVal
		},
		success: function(data) {
			if(data.state.toLowerCase() == "success") {
				//					layer.close(index);
				var con = data.data;
				var qd_legend = [];
				var ser_data = [];
				$(con).each(function(i, n) {
					ser_data.push(n.Count)
					qd_legend.push(n.Source);
				})
				source.setOption({
					//								legend: {
					//									data: qd_legend
					//								},
					xAxis: {
						data: qd_legend
					},
					series: {
						data: ser_data
					}

				})

			}
		}

	});

}
// part3 受理区域统计
var part3 = echarts.init(document.getElementById('part3'));
part3.setOption({
	color: ['#6ce7ac', '#6a91e0', '#ce2c10', '#cb5f79', '#ae765a', '#569d4e', '#7d55ba', '#ce5aba', '#355cdd', '#44c1c6', '#ceba5e', '#c64444','#ffff00'],
	title: {
		text: '各区县占比',
		x: 'center',
		y: '45%',
		textStyle: {
			fontWeight: 'normal',
			fontSize: 16,
			color: '#fff'

		}
	},
	tooltip: {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)",
		axisPointer: {
			crossStyle: {
				color: '#fff'
			}
		}
	},
				legend: {
					//      orient: 'vertical',
					bottom: 'bottom',
					data: ['安阳县','北关区','林州市','龙安区','内黄县','市区','汤阴县','安阳县','文峰区','殷都区','滑县','高新区'],
					textStyle: {
						color: '#fff'
					}
				},
	series: [{
		name: '数据',
		type: 'pie',
		radius: ['30%', '60%'],
		center: ['50%', '50%'],
		data: [],
		itemStyle: {
			emphasis: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			},
			normal: {
				label: {
					show: true,
					//                                 formatter: '{b} : {c} ({d}%)' 
					formatter: '{d}%'
				},
				labelLine: {
					show: true
				}
			}
		},
		label: {
			normal: {
				textStyle: {
					color: '#fff'
				}
			}
		}
	}]
});

function partThree(start, end,areaOneVal) {
	//		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: start,
			end: end,
			branchcode:areaOneVal
		},
		success: function(data) {
			if(data.state.toLowerCase() == 'success') {
				//						layer.close(index);
				$('.complaint_typeL').html('');
				$('.complaint_typeR').html('');
				var con = data.data;
				var part_1_legend = [];
				var part_1_ser = [];
				$(con).each(function(i, n) {
					part_1_legend.push(n.AreaName)
					var part_1_obj = {};
					part_1_obj.value = n.Count;
					part_1_obj.name = n.AreaName;
					part_1_ser.push(part_1_obj)
					if(n.AreaName.indexOf('城乡一体') != -1) {
						n.AreaName = "城乡示范"
					}
					var str = '<li>' +
						'<span class="type_name">' + n.AreaName + '</span>   <span class="type_count">' + n.Count + '</span>' +
						'</li>'
					if(i <= 5) {
						$(str).appendTo('.complaint_typeL');
					} else if(i <= 11&&i >5){
						$(str).appendTo('.complaint_typeR');
					}
				})
				part3.setOption({
					//									legend: {
					//										selected: {
					//										'当即办理': false
					//									}
					//									},
					series: [{
						data: part_1_ser
					}]
				})

			}
		}
	});
}

function Ajax() {
	var areaOneVal = helper.cookies.get("areaOneVal");
	var areaOneText = helper.cookies.get("areaOneText");
	partOne($('#time1').val(),areaOneVal)
	partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
	partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
}