//车间看板
var interval_do = null;// 页面刷新定时器
clearInterval(interval_do);

var MyMarhq = '';// 滚动定时器
clearInterval(MyMarhq);

var MyMarhq_1 = '';// 滚动定时器
clearInterval(MyMarhq_1);

var MyMarhq_2 = '';// 滚动定时器
clearInterval(MyMarhq_2);

var MyMarhq_3 = '';// 滚动定时器
clearInterval(MyMarhq_3);

$(function() {
	doData()
	interval_do = setInterval(getKanbanData, 60 * 1000); // 启动,执行默认方法
})

function doData() {
	setTitle()
	setBox1()
	setBox2()
	setBox3()
	setBox4()
}

function setTitle() {
	if(RESULT.data.DATA_0.result==1){
		return false
	}
	var list = RESULT.data.DATA_0.data[0]
	$("#title_0").text(list.TITILE0)
	$("#title_1").text(list.TITILE1)
	$("#title_2").text(list.TITILE2)
	$("#title_3").text(list.TITILE3)
	$("#title_4").text(list.TITILE4)
}

function setBox1() {
	
	if(RESULT.data.DATA_1.result==1){
		return false
	}
	
	var dataList = RESULT.data.DATA_1.data
	var Items = dataList
	$('.tbl-body tbody').empty();
	$('.tbl-header tbody').empty();
	$('.tbl-body thead').empty();
	$('.tbl-header thead').empty();
	var headStr = '';
	var str = '';
	var temp = Items[0]
	var headArr = getObjectKeys(temp);// 存放表头数据
	for (var i = 0; i < headArr.length; i++) {
		if (i == 0) {
			headStr = '<tr>'
		}
		headStr += '<th>' + isNull(temp[headArr[i]]) + '</th>'
		if (i == headArr.length) {
			headStr += '</tr>'
		}
	}
	$('.tbl-body thead').append(headStr);
	$('.tbl-header thead').append(headStr);

	for (var j = 1; j < Items.length; j++) {
		var item = Items[j]
		for (var q = 0; q < headArr.length; q++) {
			if (q == 0) {
				str += '<tr>'
			}
			str += '<td>' + isNull(item[headArr[q]]) + '</td>'
			if (q == headArr.length) {
				str += '</tr>'
			}
		}
	}
	$('.tbl-body tbody').append(str);
	$('.tbl-header tbody').append(str);

	if (MyMarhq_1 != null) {// 判断计时器是否为空-关闭
		clearInterval(MyMarhq_1);
		MyMarhq_1 = null;
	}

	if (Items.length > 8) {
		$('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
		$('.tbl-body').css('top', '0');
		var tblTop = 0;
		var speedhq = 50; // 数值越大越慢
		var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
		function Marqueehq() {
			if (tblTop <= -outerHeight * Items.length) {
				tblTop = 0;
			} else {
				tblTop -= 1;
			}
			$('.tbl-body').css('top', tblTop + 'px');
		}
		MyMarhq_1 = setInterval(Marqueehq, speedhq);

		// 鼠标移上去取消事件
		$(".tbl-header tbody").hover(function() {
			clearInterval(MyMarhq_1);
		}, function() {
			clearInterval(MyMarhq_1);
			MyMarhq_1 = setInterval(Marqueehq, speedhq);
		})
	}
}

function setBox2() {
	
	if(RESULT.data.DATA_2.result==1){
		return false
	}
	var dataList = RESULT.data.DATA_2.data
	var Items = dataList
	$('.tbl-body-2 tbody').empty();
	$('.tbl-header-2 tbody').empty();
	$('.tbl-body-2 thead').empty();
	$('.tbl-header-2 thead').empty();
	var headStr = '';
	var str = '';
	var temp = Items[0]
	var headArr = getObjectKeys(temp);// 存放表头数据
	for (var i = 0; i < headArr.length; i++) {
		if (i == 0) {
			headStr = '<tr>'
		}
		headStr += '<th>' + isNull(temp[headArr[i]]) + '</th>'
		if (i == headArr.length) {
			headStr += '</tr>'
		}
	}
	$('.tbl-body-2 thead').append(headStr);
	$('.tbl-header-2 thead').append(headStr);

	for (var j = 1; j < Items.length; j++) {
		var item = Items[j]
		for (var q = 0; q < headArr.length; q++) {
			if (q == 0) {
				str += '<tr>'
			}
			str += '<td>' + isNull(item[headArr[q]]) + '</td>'
			if (q == headArr.length) {
				str += '</tr>'
			}
		}
	}
	$('.tbl-body-2 tbody').append(str);
	$('.tbl-header-2 tbody').append(str);

	if (MyMarhq_2 != null) {// 判断计时器是否为空-关闭
		clearInterval(MyMarhq_2);
		MyMarhq_2 = null;
	}

	if (Items.length > 8) {
		$('.tbl-body-2 tbody').html($('.tbl-body-2 tbody').html() + $('.tbl-body-2 tbody').html());
		$('.tbl-body-2').css('top', '0');
		var tblTop = 0;
		var speedhq = 50; // 数值越大越慢
		var outerHeight = $('.tbl-body-2 tbody').find("tr").outerHeight();
		function Marqueehq() {
			if (tblTop <= -outerHeight * Items.length) {
				tblTop = 0;
			} else {
				tblTop -= 1;
			}
			$('.tbl-body-2').css('top', tblTop + 'px');
		}
		MyMarhq_2 = setInterval(Marqueehq, speedhq);

		// 鼠标移上去取消事件
		$(".tbl-header_2 tbody").hover(function() {
			clearInterval(MyMarhq_2);
		}, function() {
			clearInterval(MyMarhq_2);
			MyMarhq_2 = setInterval(Marqueehq, speedhq);
		})
	}
}

function setBox3() {

	if(RESULT.data.DATA_3.result==1){
		return false
	}
	var dataList = RESULT.data.DATA_3.data
	var xData = []// 工单
	var yData1 = []// 计划数量
	var yData2 = []// 实际数量
	if (dataList) {
		for (var i = 0; i < dataList.length; i++) {
			xData.push(dataList[i].TASK_NO) // 工单
			yData1.push(dataList[i].PLAN_QTY) // 计划数量
			yData2.push(dataList[i].ACT_QTY) // 实际数量
		}

		option = {
			grid : {
				left : '4%',
				right : '4%',
				bottom : '2%',
				top : '15%',
				containLabel : true
			},
			legend : {
				data : ['计划数量','实际数量'],
				// orient: 'vertical',
				x : 'right', // 可设定图例在左、右、居中
				top : 0,
				textStyle : {
					fontSize : fontSize(0.22),// 字体大小
					color : '#ffffff'// 字体颜色
				},
			},
			color : [ '#1D9FFF', '#02F3F0' ],
			xAxis : {
				type : 'category',
				data : xData,
				axisLabel : {
					show : true,
					rotate : 25,
					interval : 0,
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.22),
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			},
			yAxis : {
				name:'数量',
				type : 'value',
				splitLine : {
					show : false
				},
				axisLabel : {
					// formatter : '{value} ',
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.22),// 字体大小
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			},
			series : [ {
				name : '计划数量',
				data : yData1,
				type : 'bar',
				barMaxWidth : 25,// 柱图宽度
				label : {
					show : true,
					position : 'top',
					textStyle : {
						fontSize : fontSize(0.22),// 字体大小
					}
				},
			}, {
				name : '实际数量',
				data : yData2,
				type : 'bar',
				barMaxWidth : 25,// 柱图宽度
				label : {
					show : true,
					position : 'top',
					textStyle : {
						fontSize : fontSize(0.22),// 字体大小
					}
				},
			} ]
		};

	}

	// 创建echarts对象在哪个节点上
	var myCharts1 = echarts.init(document.getElementById('part_3'));
	// 将选项对象赋值给echarts对象。
	myCharts1.setOption(option, true);
}

function setBox4(){
	
	if(RESULT.data.DATA_4.result==1){
		return false
	}
	var dataList = RESULT.data.DATA_4.data
	var xData = []// 工单
	var yData1 = []// 计划数量
	var yData2 = []// 实际数量
	var maxVlaue=0;//数量坐标的最大值
	if (dataList) {
		for (var i = 0; i < dataList.length; i++) {
			xData.push(dataList[i].DEFECT_NAME) // 不良名称
			yData1.push(dataList[i].QTY) // 不良数量
			maxVlaue+=Number(dataList[i].QTY)
			yData2.push(Number(dataList[i].ACT)) // 累计不良折线
		}

		option = {
			grid : {
				left : '4%',
				right : '4%',
				bottom : '2%',
				top : '20%',
				containLabel : true
			},
			legend : {
				data : ['不良数量','累计不良折线'],
				// orient: 'vertical',
				x : 'center', // 可设定图例在左、右、居中
				top : 0,
				textStyle : {
					fontSize : fontSize(0.22),// 字体大小
					color : '#ffffff'// 字体颜色
				},
			},
			color : [ '#3062FF', '#FAEF9B'],
			xAxis : {
				type : 'category',
				data : xData,
				axisLabel : {
					show : true,
					interval : 0,
					rotate : 25,
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.20),
					},
				
					
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},

			},
			yAxis : [{
				name:'数量',
				type : 'value',
				max:maxVlaue,
				splitLine : {
					show : false
				},
				axisLabel : {
					// formatter : '{value} ',
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.22),// 字体大小
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			},{
				name:'(%)',
				type : 'value',
				splitLine : {
					show : false
				},
				axisLabel : {
					// formatter : '{value} ',
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.22),// 字体大小
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			}],
			series : [ {
				name : '不良数量',
				data : yData1,
				type : 'bar',
				barMaxWidth : 25,// 柱图宽度
				label : {
					show : true,
					position : 'top',
					textStyle : {
						fontSize : fontSize(0.22),// 字体大小
					}
				},
			}, {
				name : '累计不良折线',
				data : yData2,
				type : 'line',
				yAxisIndex: 1,
				label : {
					show : true,
					position : 'bottom',
					textStyle : {
						fontSize : fontSize(0.22),// 字体大小
					}
				},
				markLine : {
					symbol : "none",
					data : [ {
						silent : true, // 鼠标悬停事件 true没有，false有
						label : {
							// formatter : '标产',
							show : false,
						},
						lineStyle : { // 警戒线的样式 ，虚实 颜色
							type : "solid",
							color : "#FF3366",
						},
						yAxis : 0.8
					// 警戒线的标注值，可以有多个yAxis,多条警示线
					} ]
				}
			} ]
		};

	}

	// 创建echarts对象在哪个节点上
	var myCharts1 = echarts.init(document.getElementById('part_4'));
	// 将选项对象赋值给echarts对象。
	myCharts1.setOption(option, true);
}

function getObjectKeys(object) {
	var keys = [];
	for ( var property in object)
		keys.push(property);
	return keys;
}

function getKanbanData() {
	getDataType();
}


//获取屏幕宽度并计算比例-设置echarts文字
function fontSize(res) {
	var docEl = document.documentElement, clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	if (!clientWidth)
		return;
	var fontSize = 100 * (clientWidth / 2880);// 原：1920/2400/2880
	return res * fontSize;
}

function getDataType() {
	var params = {
		"kanbanNo" : FTYPE,
		"frequency" : FREQUENCY,
		"lineNo":""
	};
	$.ajax({
		type : "GET",
		url : context + "kanban/getTemplateList",
		data : params,
		dataType : "json",
		success : function(res) {
			console.log(res)
			if (res.result) {

				RESULT=res
				
				doData()

			} else {
				// clearInterval(interval_do);//错误-关闭定时器
			}
		}
	});
}

function isNull(str) {
	if (str == null) {
		return ""
	} else {
		return str
	}
}