//车间看板
|
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
|
}
|
}
|
