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

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

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

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

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

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)
	var originalArr = [];// 原始数据，未处理过的表头名称
	var layer=1;//标识，区分是否为多级表头
	for (var i = 0; i < headArr.length; i++) {
		var v=isNull(temp[headArr[i]])
		originalArr.push(v)
		if(layer==1&&v.indexOf("|")!=1){
			layer=2
		}
	}
	//设置表头字段-若layer=1则只含一级表头，若layer=2则含有二级表头
	if(layer==1){
		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>'
			}
		}
	}else{
		var firstArr = [];// 存一级表头的数据
		var secondArr = [];// 存二级表头的数据
		var titleName = ""// 当前的一级表头
		var colsValue = 0// 所占列数记录数

		for (var i = 0; i < originalArr.length; i++) {
			if (originalArr[i].indexOf("|") == -1) {//不分级的表头
				var arr = {}
				arr['name'] = originalArr[i];// 列名
				arr['cols'] = 1;// 所占列数
				arr['rows'] = 2;// 所占行数
				firstArr.push(arr)
			} else {
				var first = originalArr[i].substring(0, originalArr[i].indexOf("|"))

				if (titleName != first) {// 上个一级表头数据已经遍历完成
					if (titleName == "") {// 第一个一级表头
						titleName = first
						colsValue++;// 开始记录列数
						secondArr.push(originalArr[i].substring(originalArr[i].indexOf("|") + 1, originalArr[i].length))
					} else {
						var arr = {}
						arr['name'] = titleName;// 列名
						arr['cols'] = colsValue;// 所占列数
						arr['rows'] = 1;// 所占行数
						firstArr.push(arr);// 将上一记录保存

						titleName = first;
						colsValue = 1;// 重新记录列数，含本次记录
						secondArr.push(originalArr[i].substring(originalArr[i].indexOf("|") + 1, originalArr[i].length))
					}
				} else {
					colsValue++
					secondArr.push(originalArr[i].substring(originalArr[i].indexOf("|") + 1, originalArr[i].length))
				}

				if (i == originalArr.length - 1) {// 处理最后一项字段
					var arr = {}
					arr['name'] = titleName;// 列名
					arr['cols'] = colsValue;// 所占列数
					arr['rows'] = 1;// 所占行数
					firstArr.push(arr);// 将上一记录保存
				}
			}
		}
		// 数据插入表头-一级、二级分开处理
		// 一级表头
		for(var j=0;j<firstArr.length;j++){
			if (j == 0) { 
				headStr += '<tr>' 
			} 
			headStr += '<th colspan="'+firstArr[j].cols+'" rowspan="'+firstArr[j].rows+'">' +firstArr[j].name + '</th>'
			if (j == headArr.length) {
				headStr += '</tr>' 
			}
		}
		//二级表头
		 for (var i = 0; i <secondArr.length; i++) { 
			 if (i == 0) { 
				 headStr += '<tr>' 
			} 
			 headStr += '<th>' + secondArr[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 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 : '2%',
				right : '2%',
				bottom : '1%',
				top : '20%',
				containLabel : true
			},
			legend : {
				data : [ '计划数量', '实际数量' ],
				// orient: 'vertical',
				x : 'right', // 可设定图例在左、右、居中
				top : 0,
				textStyle : {
					fontSize : fontSize(0.24),// 字体大小
					color : '#ffffff'// 字体颜色
				},
			},
			color : [ '#1D9FFF', '#02F3F0' ],
			xAxis : {
				type : 'category',
				data : xData,
				axisLabel : {
					show : true,
					interval : 0,
					rotate:25,
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.24),
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			},
			yAxis : {
				name : '数量',
				type : 'value',
				splitLine : {
					show : false
				},
				axisLabel : {
					// formatter : '{value} ',
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.24),// 字体大小
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			},
			series : [ {
				name : '计划数量',
				data : yData1,
				type : 'bar',
				barMaxWidth : 25,// 柱图宽度
				label : {
					show : true,
					position : 'top',
					textStyle : {
						fontSize : fontSize(0.24),// 字体大小
					}
				},
			}, {
				name : '实际数量',
				data : yData2,
				type : 'bar',
				barMaxWidth : 25,// 柱图宽度
				label : {
					show : true,
					position : 'top',
					textStyle : {
						fontSize : fontSize(0.24),// 字体大小
					}
				},
			} ]
		};

	}

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

function setBox3() {

	if (RESULT.data.DATA_3.result == 1) {
		return false
	}
	var dataList = RESULT.data.DATA_3.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 : '4%',
				top : '20%',
				containLabel : true
			},
			legend : {
				data : [ '不良数量', '累计不良折线' ],
				// orient: 'vertical',
				x : 'center', // 可设定图例在左、右、居中
				top : 0,
				textStyle : {
					fontSize : fontSize(0.24),// 字体大小
					color : '#ffffff'// 字体颜色
				},
			},
			color : [ '#3062FF', '#FAEF9B' ],
			xAxis : {
				type : 'category',
				data : xData,
				axisLabel : {
					show : true,
					interval : 0,
					rotate : 25,
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.22),
					},

				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},

			},
			yAxis : [ {
				name : '数量',
				type : 'value',
				max : maxVlaue,
				splitLine : {
					show : false
				},
				axisLabel : {
					// formatter : '{value} ',
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.24),// 字体大小
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			}, {
				name : '(%)',
				type : 'value',
				splitLine : {
					show : false
				},
				axisLabel : {
					// formatter : '{value} ',
					textStyle : {
						color : '#ffffff',
						fontSize : fontSize(0.24),// 字体大小
					}
				},
				axisLine : {
					lineStyle : {
						color : '#FFFFFF'
					}
				},
			} ],
			series : [ {
				name : '不良数量',
				data : yData1,
				type : 'bar',
				barMaxWidth : 25,// 柱图宽度
				label : {
					show : true,
					position : 'top',
					textStyle : {
						fontSize : fontSize(0.24),// 字体大小
					}
				},
			}, {
				name : '累计不良折线',
				data : yData2,
				type : 'line',
				yAxisIndex : 1,
				label : {
					show : true,
					position : 'bottom',
					textStyle : {
						fontSize : fontSize(0.24),// 字体大小
					}
				},
				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_3'));
	// 将选项对象赋值给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
	}
}