$(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 += "测试:" + ls.name + ""; //} ////$("#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("") }) 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');