旧版报表、仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

838 lines
32 KiB

$(document).ready(function () {
//初始化input
for (var i = 0; i < 10; i++) {
var center = document.getElementsByClassName('center')[i];
var input = document.createElement('input');
input.type = 'text';
input.className = 'knob';
input.value = '50%';
center.appendChild(input);
}
pie();
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
var $height = parseInt($(window).height());
console.log($height);
var $width = parseInt($(window).width());
console.log($width + '宽');
if ($width > 991) {
$('.row:first').css('height', eval($height - 80) + 'px');
$('.meiti').css('height', '100%');
//$('.panel').css('margin-bottom', '8%');
} else if ($width >= 768 && $width < 991) {
$('.row:first').css('height', ($height * 1.8) + 'px');
$('.meiti').css('height', '50%');
$('.panel').css('margin-bottom', '10px');
} else {
$('.row:first').css('height', ($height * 2.7) + 'px');
$('.meiti').css('height', '33%');
$('.panel').css('margin-bottom', '10px');
}
$("input[type='checkbox']").click(function () {
//console.log($(this).attr("checked"));
console.log($(this).is(":checked"));
if ($(this).is(":checked")) {
var value = $(this).val();
console.log(value);
$(this).siblings("input").removeAttr('disabled')
} else {
$(this).siblings("input").val('');
$(this).siblings("input").attr('disabled','disabled')
}
});
$('.box-title').click();
})
$('#save').click(function () {
var i = 0;
$('.input[disabled!="disabled"]').each(function () {
//console.log($(".select"));
//console.log($(this).select2().find("option:selected").text());
if ($(this).val() == '') {
i++;
$(this).css('background-color', 'red');
$('#save').removeAttr('data-toggle');
console.log($(this).css('background-color'));
if ($(this).css('background-color') == 'rgb(255, 0, 0)') {
$(this).on('input', function () {
$(this).css('background-color','');
})
}
}
});
if (i == 0) {
$('#save').attr('data-toggle', 'control-sidebar');
$('.panel').show();
console.log($('.input[disabled!="disabled"]').val());
var title = /\d*$/.exec($('#cbxWorkshop').val())[0]
title = title.replace(/\b0*/, '');
$('#wotitle').text(title);
var workshop = $('#wotitle').text();
var stations = []; //存储需要显示的站点
var stationsTheory = []; //存储需要显示的站点理论产能
//var relevance = {};
$("input[type='checkbox']").each(function () {
if ($(this).is(":checked")) {
stations.push($(this).val());
stationsTheory.push($(this).siblings("input").val());
}
})
console.log(stations);
console.log(stationsTheory);
//for (let i = 0; i < stations.length; i++) {
// relevance[stations[i]] = stationsTheory[i];
//}
//console.log(relevance);
var site = ['焊接', '叠层', '层压', '层压后检验', '装框', '清洗', 'IV', 'EL', '全检', '包装'];
//移除不需要的站点
for (let i = 0; i < stations.length; i++) {
console.log(stations[i]);
var index = site.indexOf(stations[i]);
if (index > -1) {
site.splice(index, 1);
}
console.log(index);
}
console.log(site);
//界面隐藏不必要站点
for (let i = 0; i < site.length; i++) {
if (site[i] == '焊接') {
console.log(site[i]);
$('.panel').eq(0).hide();
}
if (site[i] == '叠层') {
$('.panel').eq(1).hide();
}
if (site[i] == '层压') {
$('.panel').eq(2).hide();
}
if (site[i] == '层压后检验') {
$('.panel').eq(3).hide();
}
if (site[i] == '装框') {
$('.panel').eq(4).hide();
}
if (site[i] == '清洗') {
$('.panel').eq(5).hide();
}
if (site[i] == 'IV') {
$('.panel').eq(6).hide();
}
if (site[i] == 'EL') {
$('.panel').eq(7).hide();
}
if (site[i] == '全检') {
$('.panel').eq(8).hide();
}
if (site[i] == '包装') {
$('.panel').eq(9).hide();
}
}
//console.log(relevance[stations[0]])
//将input中的值对应的放到站点的理论产能里面
var weld = ''; //焊接
var lamin = ''; //叠层
var lamination = ''; //层压
var laminationQC = ''; //层压后检验
var frame = ''; //装框
var clean = ''; //清洗
var iv = ''; //IV
var el = ''; //EL
var complete = ''; //全检
var pack = ''; //包装
for (let i = 0; i < stations.length; i++) {
if ($('.color:contains(' + stations[i] + ')').next().val() != '') {
if (stations[i] == '焊接') {
$('.panel').eq(0).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
weld = stationsTheory[i];
}
if (stations[i] == '叠层') {
$('.panel').eq(1).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
lamin = stationsTheory[i];
}
if (stations[i] == '层压') {
$('.panel').eq(2).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
lamination = stationsTheory[i];
}
if (stations[i] == '层压后检验') {
$('.panel').eq(3).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
laminationQC = stationsTheory[i];
}
if (stations[i] == '装框') {
$('.panel').eq(4).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
frame = stationsTheory[i];
}
if (stations[i] == '清洗') {
$('.panel').eq(5).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
clean = stationsTheory[i];
}
if (stations[i] == 'IV') {
$('.panel').eq(6).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
iv = stationsTheory[i];
}
if (stations[i] == 'EL') {
$('.panel').eq(7).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
el = stationsTheory[i];
}
if (stations[i] == '全检') {
$('.panel').eq(8).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
complete = stationsTheory[i];
}
if (stations[i] == '包装') {
$('.panel').eq(9).find('.label').eq(1).children('label').eq(1).text($('.color:contains(' + stations[i] + ')').next().val());
pack = stationsTheory[i];
}
}
}
if (site.length == 10) {
$('#leftStation').hide();
$('#middleStation').hide();
$('#chart').attr('class', 'col-md-12 col-sm-12 col-lg-12 meiti col-xs-12')
} else {
$('#leftStation').show();
$('#middleStation').show();
$('#chart').attr('class', 'col-md-8 col-sm-12 col-lg-8 meiti col-xs-12')
sitecapacity(workshop, weld, lamin, lamination, laminationQC, frame, clean, iv, el, complete, pack);
//定时切换各站点产能
console.log(weld);
var times = setInterval(sitecapacity(workshop, weld, lamin, lamination, laminationQC, frame, clean, iv, el, complete, pack), 300000)
}
requestData(workshop);
}
});
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething() {
if (document.readyState == 'complete') //当页面加载状态
{
setTimeout(function () {
QueryWorkshop();
//handleIframeContent();
}, 1000); // wait 50ms until window resize finishes.
}
}
//订单良率图表
function requestData(workshop) {
console.log(JSON.stringify({ "workshop": workshop }));
var count = 0;
$.ajax({
url: '/api/Orders/ORDERs', //API地址
dataType: "json",
type: "post",
contentType: "application/json",
data: JSON.stringify({ "workshop": workshop}),
async: false,
success: function (data) {
console.log(data);
if (data.length != 0) {
var completion = [];//Y轴订单完成率
var yieldr = [];//Y轴成品率数据
var sale_order = [];//X坐标显示订单号
var alldata = [];
var completions = [];//Y轴订单完成率
//定义变量取参数的前10个数据
var yieldrs = [];//Y轴成品率数据
var sale_orders = [];//X坐标显示订单号
var alldatas = [];
//for循环获取返回data参数的长度,装到数组里
for (var i = 0; i < data.length; i++) {
sale_order.push(data[i].sale_order);
completion.push(parseFloat(data[i].completion)); //parseFloat:浮点类型,只能用于小数获取。
yieldr.push(parseFloat(data[i].yield));
alldata.push(data[i])
}
//for循环取返回参数前10 的数据
circulate();
function circulate() {
console.log(count);
$('#tbRole').bootstrapTable('removeAll');
for (var i = count, j = 0; i < (count + 10); i++ , j++) {
completions[j] = completion[i];
yieldrs[j] = yieldr[i];
sale_orders[j] = sale_order[i];
alldatas[j] = alldata[i];
}
//completions = completions.sort(sortby);
//yieldrs = yieldrs.sort(sortby);
//sale_orders = sale_orders.sort(sortby);
//插入数据
for (var i = 0; i < 10; i++) {
$('#tbRole').bootstrapTable('insertRow', { index: i, row: alldatas[i] });
}
};
//排序
//function sortby(a, b) {
// //return a - b; //由小到大排序
// return b - a; //由大到小排序
//}
console.log("============sale_order===========");
console.log(sale_order);
console.log(completion);
console.log(yieldr);
var options = null;
options = {
credits: {
enabled: false // 禁用版权信息
},
chart: {
backgroundColor: '#0d1950',
//renderTo: 'rptweld',
// type: 'column'
},
title: {
text: '订单良率看板', //标题
style: {
color: '#0f76ce',
fontSize: '18px',
fontWeight: '600',
letterSpacing:'1px'
}
},
//副标题
//subtitle: {
// text: 'JK' //
//},
xAxis: [{
categories: sale_orders, //X轴参数显示
crosshair: true,
labels: {
style: {
color: '#fff'
}
}
}],
yAxis: [{
labels: {
style: {
color: '#fff'
}
},
gridLineColor: '#91e8e1',
gridLineDashStyle:'Dash',
title: {
//categories: sale_orders, //Y轴参数显示
text: '百分比(%)',
style: {
//color: Highcharts.getOptions().colors[1]
color:'#ffffff'
},
min: 95
}
}, { // Secondary yAxis
labels: {
style: {
color: '#fff'
}
},
gridLineColor:'#91e8e1',
gridLineDashStyle: 'Dash',
title: {
//categories: yieldrs,
text: '成品率(%)',
style: {
//color: Highcharts.getOptions().colors[0]
color:'#ffffff'
},
min: 95
},
opposite: true //把坐标轴显示到反面去
}],
tooltip: {
shared: true
},
//plotOptions是整个图形的色彩属性:图表的颜色、阴影都在这里设置
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 3,
colorByPoint: true, //随机分配柱状图的颜色
dataLabels: //显示柱状图数值
{
enabled: true,
inside:true
}
},
spline: {
dataLabels: //显示柱状图数值
{
enabled: true,
color:'#7cb5ec'
}
},
showAxes: true
},
legend: {
itemStyle: { cursor: 'pointer', color: '#ffffff' },
itemHoverStyle: { color: '#91e8e1' }
},
series: [
{
yAxis: 0, //Y轴设置两个坐标轴的时候,必须从0开始。
name: '完成率',
type: 'column', //图形(柱状图)折线图
data: completions,
style: {
color:'#fff'
}
}, {
yAxis: 1, //Y轴设置两个坐标轴的时候,必须从0开始。
name: '成品率',
type: 'spline', //图形(spline)折线图
data: yieldrs,
style: {
color: '#fff'
}
}
]
};
//定时修改数据
var chart = Highcharts.chart('rptweld', options);
if (data.length <= 10) {
setTimeout(requestData, 600000)
}
//console.log(count);
var setinter = setInterval(function () {
//console.log(count);
if (data.length - count >= 20) {
count += 10;
} else {
count = data.length - 10;
}
circulate();
chart = Highcharts.chart('rptweld', options);
setTimeout(function () {
if (data.length - count == 10) {
console.log("完成");
clearInterval(setinter);
//let count = 0;
requestData();
}
}, 20000)
}, 600000);
}
//var setinter = setInterval(function () {
// console.log(count);
// if (data.length - count == 10) {
// clearInterval(setinter);
// console.log(setinter);
// requestData();
// //console.log(count);
// }
// if (data.length - count >= 20) {
// count += 10;
// } else {
// count = data.length - 10;
// }
// circulate();
// console.log(alldatas);
// console.log(options);
// Highcharts.chart('rptweld', options);
// //console.log(count);
//}, 20000);
}
});
}
var TableInit = function () {
var oTableInit = new Object();
oTableInit.Init = function () {
$('#tbRole').bootstrapTable({
//striped: true,
columns: [{
field: 'sale_order',
title: '订单编号'
}, {
field: 'planqty',
title: '投产数量'
}, {
field: 'OEMcustomer',
title: '客户名称'
}, {
field: 'plan_date',
title: '投产日期'
}, {
field: 'pallqty',
title: '包装数量'
}, {
field: 'completion',
title: '订单完成率'
}, {
field: 'yield',
title: '成品率'
}]
});
};
return oTableInit;
}
//订单良率表格数据
//$(function () {
// //1.初始化Table
// var oTable = new TableInit();
// oTable.Init();
//});
//var TableInit = function () {
// var oTableInit = new Object();
// //初始化Table
// oTableInit.Init = function () {
// $('#tbRole').bootstrapTable({
// url: '/api/Orders/ORDERs', //请求后台的URL(*)
// method: 'post', //请求方式(*)
// //toolbar: '#toolbar', //工具按钮用哪个容器
// striped: true, //是否显示行间隔色
// //cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
// //pagination: true, //是否显示分页(*)
// //sortable: false, //是否启用排序
// // sortOrder: "asc", //排序方式
// //queryParams: oTableInit.queryParams,//传递参数(*)
// //sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
// //contentType: 'application/json',
// //pageNumber: 1, //初始化加载第一页,默认第一页
// //pageSize: 10, //每页的记录行数(*)
// //pageList: [], //可供选择的每页的行数(*)
// //search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
// //strictSearch: true,
// //showColumns: false, //是否显示所有的列
// //showRefresh: false, //是否显示刷新按钮
// // minimumCountColumns: 2, //最少允许的列数
// // clickToSelect: true, //是否启用点击选中行
// //height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
// // uniqueId: "ID", //每一行的唯一标识,一般为主键列
// //showToggle: false, //是否显示详细视图和列表视图的切换按钮
// //cardView: false, //是否显示详细视图
// //detailView: false, //是否显示父子表
// // showExport: false, //是否显示导出
// //exportDataType: "all", //basic', 'all', 'selected'.
// //exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
// //exportHiddenCells: true,
// columns: [{
// field: 'sale_order',
// title: '订单编号'
// }, {
// field: 'expected_nbr',
// title: '投产数量'
// }, {
// field: 'customer',
// title: '客户名称'
// }, {
// field: 'plan_date',
// title: '投产日期'
// }, {
// field: 'pack_nbr',
// title: '包装数量'
// }, {
// field: 'completion',
// title: '订单完成率'
// }, {
// field: 'yield',
// title: '成品率'
// },]
// });
// };
// //var allTableData = $('#tbRole').bootstrapTable('getData');
// //console.log(allTableData);
// //$.each(allTableData, function (i, e) {
// // console.log(e)//a_barcode是table下columns的field
// //})
// //得到查询的参数
// //oTableInit.queryParams = function (params) {
// // var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
// // limit: params.limit, //页面大小
// // offset: params.offset, //页码
// // departmentname: $("#txt_search_departmentname").val(),
// // statu: $("#txt_search_statu").val()
// // };
// // return temp;
// //};
// return oTableInit;
//};
//防止刷新页面跳转到顶部
//function showInfo(type, code) {
// window.location.href = "__URL__/show" + type + "/id/" + code;
//}
//function Trim(strValue) {
// return strValue.replace(/^s*|s*$/g, "");
//}
//function SetCookie(sName, sValue) {
// document.cookie = sName + "=" + escape(sValue);
//}
//function GetCookie(sName) {
// var aCookie = document.cookie.split(";");
// for (var i = 0; i < aCookie.length; i++) {
// var aCrumb = aCookie[i].split("=");
// if (sName == Trim(aCrumb[0])) {
// return unescape(aCrumb[1]);
// }
// }
// return null;
//}
//function scrollback() {
// if (GetCookie("scroll") != null) { document.body.scrollTop = GetCookie("scroll") }
//}
//var content = document.getElementsByClassName('content')[0]
//content.onscroll = SetCookie("scroll", content.scrollTop);
//content.onload = scrollback();
//各站点产能
function sitecapacity(workshop,weld,lamin,lamination,laminationQC,frame,clean,iv,el,complete,pack ) {
$.ajax({
url: "/api/Orders/FoursHours",//后台请求的数据,用的是PHP
dataType: "json",//数据格式
type: "post",//请求方式
contentType: "application/json",
data: JSON.stringify({ "workshop": workshop, "weld": weld, "lamin": lamin, "lamination": lamination, "laminationQC": laminationQC, "frame": frame, "clean": clean, "iv": iv, "el": el, "complete": complete,"pack":pack }),
async: false,//是否异步请求
success: function (data) {   //如果请求成功,返回数据。
//获取子级向上找.row父级上面的那个同级p标签的innertext
var $fx = $('.weld').parents('.quan').children('p').text();
//console.log($fx);
console.log(data);
var namearray = $fx.split(' ').reverse();
console.log(namearray.length);
console.log($('p').text());
var dataname = new Array();//站点名
var databili = new Array();//站点比例名
for (var i = 0; i < namearray.length;i++) {
databili[i] = eval('data[0].' + namearray[i] + '比例');
if (namearray[i]=='EL') {
namearray[i] = 'el'
}
console.log(namearray);
if (namearray[i] == 'IV') {
namearray[i] = 'iv'
}
dataname[i] = eval('data[0].' + namearray[i]);
}
console.log(dataname);
console.log(databili);
//随机数据,做演示
var random = parseInt(Math.random() * 10);
if (random == 0) {
random = 1;
}
console.log(random);
var x = 10;
for (var i = 0; i < namearray.length; i++) {
for (var j = 0; j < namearray.length; j++) {
if (document.getElementsByTagName('p')[i].innerText.toLowerCase() === namearray[j]) {
document.getElementsByClassName('weld')[i].innerText = dataname[i];
//document.getElementsByClassName('knob')[i].value = databili[i];
//console.log(databili[0]);
//databili[i] = random * x + '%';
//x=x-0.8;
$(".knob:eq(" + i + ")").val(databili[i]).trigger("change");
//var str = databili[i].replace("%", "") / 100;
//document.getElementsByClassName('weld')[i].innerText = Math.round(str * 2000);
//document.getElementsByClassName('knob')[i].value = '60%';
}
}
}
console.log(eval((databili[0]) * 2000))
var str = databili[0].replace("%", "") / 100;
console.log(str * 2000)
console.log(databili)
//var html = "";
//for (var i = 0; i < data.length; i++) {    //遍历data数组
// var ls = data[i];
// html += "<span>测试:" + ls.name + "</span>";
//}
////$("#weld").html(html); //在html页面id=test的标签里显示html内容
//console.log(data[0]);
},
error: function () {
console.log('error')
}
})
}
//饼图
function pie() {
$(".knob").knob({
max: 100,
min: 0,
readOnly: true,
width: 70,
height: 70,
thickness: .3,
fgColor: '#1bf3e3',
bgColor: '#ffffff',
'release': function (e) {
//console.log("release : " + value);
}
});
};
//左侧各站点以及整体高度自适应
$(".panel").click(function () {
//$(this).hide();
});
$(window).resize(function () {
var $height = parseInt($(window).height());
console.log($height);
var $width = parseInt($(window).width());
console.log($width + '宽');
if ($width > 991) {
$('.row:first').css('height', eval($height - 80) + 'px');
$('.meiti').css('height', '100%');
//$('.panel').css('margin-bottom', '8%');
} else if ($width >= 768 && $width < 991) {
$('.row:first').css('height', ($height * 1.8) + 'px');
$('.meiti').css('height', '50%');
$('.panel').css('margin-bottom', '10px');
} else {
$('.row:first').css('height', ($height*2.7) + 'px');
$('.meiti').css('height', '33%');
$('.panel').css('margin-bottom', '10px');
}
//$('.row:first').css({ "width":'4000px',"height":'2000px' }); //用来测试大屏
//var $h = $height / 5;
//$(".panel").css("height", $h + 'px');
//if ($h > 120) {
// $(".panel").css('margin-bottom', ($h - 120) + 'px');
//}
})
//引用过来
//async function QueryDataAsync(paraworkshop) {
// try {
// let dddd = await FetchApi("Twohours", { workshop: paraworkshop });
// dddd = await dddd.json();
// _.each(dddd, function (ele, index, ary) {
// if (ele.station == "weld") {
// let weld = handleary(ele.res)
// iniChart('rptweld', '焊接', weld)
// }
// if (ele.station == "lamination") {
// let lamination = handleary(ele.res)
// iniChart('rptlamination', '叠层', lamination);
// }
// if (ele.station == "layup") {
// let layup = handleary(ele.res)
// iniChart('rptlayup', '层压', layup);
// }
// if (ele.station == "inspectionafterlayup") {
// let inspectionafterlayup = handleary(ele.res)
// iniChart('rptinspectionafterlayup', '层压后检验', inspectionafterlayup);
// }
// if (ele.station == "frame") {
// let frame = handleary(ele.res)
// iniChart('rptframe', '装框', frame);
// }
// if (ele.station == "clean") {
// let clean = handleary(ele.res)
// iniChart('rptclean', '清洗', clean);
// }
// if (ele.station == "IV") {
// let iv = handleary(ele.res)
// iniChart('rptiv', 'IV测试', iv);
// }
// if (ele.station == "EL") {
// let el = handleary(ele.res)
// iniChart('rptel', 'EL测试', el);
// }
// if (ele.station == "fullinspection") {
// let el = handleary(ele.res)
// iniChart('rptfullinspection', '全检', el);
// }
// })
// }
// catch (err) {
// console.log(err);
// }
//}
//async function QueryDataAsync(paraworkshop) { }
//fetchApi方法
function FetchApi(funname, para) {
return fetch("/api/Orders/" + funname + "", {
method: "post",
headers: {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify(para)
})
}
//车间替换
async function QueryWorkshop() {
let workshop = await FetchApi("QueryWorkshop", {})
workshop = await workshop.json();
console.log(workshop);
$('#cbxWorkshop').empty()
_.each(workshop.info, function (ele,index,list) {
$('#cbxWorkshop').append("<option value='" + ele.area_code + "'>" + ele.descriptions + "</option>")
})
console.log(workshop)
console.log('query workshop end')
var title = /\d*$/.exec($('#cbxWorkshop').val())[0]
title = title.replace(/\b0*/, '')
$('#wotitle').text(title)
//await QueryDataAsync($('#cbxWorkshop').val())
}
//修改为点击确定进行信息查询
//车间下拉选项事件
//$('#cbxWorkshop').on('change', function () {
// console.log('车间选项变成:' + $('#cbxWorkshop').val())
// //QueryDataAsync($('#cbxWorkshop').val());
// //后期进行的修改,点击确定再进行查询,显示
// //requestData($('#cbxWorkshop').val());
// //sitecapacity($('#cbxWorkshop').val());
// //sitecapacity($('#cbxWorkshop').val());
// //var title = /\d*$/.exec($('#cbxWorkshop').val())[0]
// //title = title.replace(/\b0*/, '')
// //$('#wotitle').text(title)
//})
//测试
//$('.panel').removeClass('bg-aqua');
//$('.panel').css('color', '#000000 !important');