var close = new Vue({ el: '#StationClassYield', data: { info: [], areacode: '', station: '', target: '', clock: '', ytd: '', is: '', show: '', chartary: [], categoriess: [] }, mounted() { var self = this; var height = $('.box-header').css('height'); var width = $('.box-header').css('width').substring(0, $('.box-header').css('width').length - 2); $("#arrow").css({ "left": eval(width - 20) + 'px', "top": height }); $('#ddlStation').val(''); $('#ddlStation').select2({ placeholder: "站点", allowClear: true }); $('#ddlClass').val(''); $('#ddlClass').select2({ placeholder: "班次", allowClear: true }); self.QueryddlWorkshop(); //var h = window.innerHeight // || document.documentElement.clientHeight // || document.body.clientHeight; //var contentmargin = 30 * 2; //var boxmargintop = (3 + 3 + 20) * 3 var h = parseInt($(window).height()); var height = (h - 90); console.log(height); //var aaa = window["innerHeight"]; $('#targetCapacity').css("height", height * 0.25 + "px"); $('#rptweld').css("height", height * 0.80 + "px"); $(window).resize(function () { var h = parseInt($(window).height()); var height = (h - 90); console.log(height); //var aaa = window["innerHeight"]; $('#targetCapacity').css("height", height * 0.25 + "px"); $('#rptweld').css("height", height * 0.80 + "px"); }) }, methods: { //车间 QueryddlWorkshop: function () { var promiseweld = $.ajax({ url: '/api/Orders/QueryWorkshop', //'/api/QC/QueryStatus' type: 'post', cache: true, async: true, }); promiseweld.done(function (r) { console.log(r); $.each(r.info, function (index, value) { console.log(index); $("#ddlWorkshop").append(""); }) $('#ddlWorkshop').val(''); $('#ddlWorkshop').select2({ placeholder: "车间", allowClear: true }); }); promiseweld.fail(function (error) { console.log(error) alert(error); }); }, QueryddlLine: function (workshop) { var line = $.ajax({ url: '/api/Orders/SearchLine', //'/api/QC/QueryStatus' type: 'post', cache: true, async: true, dataType: "json", contentType: "application/json; charset=utf-8", data: JSON.stringify({ workshop: workshop }), }); line.done(function (r) { console.log(r); $.each(r, function (index, value) { console.log(index); $("#ddlLine").append(""); }) $('#ddlLine').val(''); $('#ddlLine').select2({ placeholder: "线别", allowClear: true }); }); line.fail(function (error) { console.log(error) alert(error); }); }, QueryDataAsync: function (workshop, line) { var self = this; self.requestApi({ modulename: "SiteCapacityStand", funname: "SiteCapacityStand", para: { workshop: workshop, line: line }, success: (res) => { console.log(res); $('#listcbx input').each(function () { var id = $(this).attr('id'); console.log(id); $('#' + id).val(res.result[0][id]); }); }, fail: (ex) => { console.log(ex); } }) }, //请求数据方法 requestApi: function (config) {//modulename, funname, para, success, fail) { fetch("/api/" + config.modulename + "/" + config.funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(config.para) }).then( (res) => { return res.json() } ).then( (res) => { config.success(res) } ).catch( (ex) => { config.fail(ex) } ) }, FetchApi: function (funname, para) { return fetch("/api/StationClassYield/" + funname + "", { method: "post", headers: { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json" }, body: JSON.stringify(para) }) }, arrow: function () { if ($('#arrow').text() == '︽') { console.log($('#arrow').text()); var height = $(".box-header").css('height'); $(".box-header").css({ "position": "absolute", "top": "-55px", }); $('#arrow').text('︾'); } if ($('#arrow').text() == '︾') { $(".box-header").css({ "position": "relative", "top": "" }); $('#arrow').text('︽'); } }, //获取日期 curentTime: function () { var self = this; var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var ss = now.getSeconds(); //分 self.clock = year + "-"; self.ytd = year + "-"; if (month < 10) { self.clock += "0"; self.ytd += "0"; } self.clock += month + "-"; self.ytd += month + "-"; if (day < 10) { self.clock += "0"; self.ytd += "0"; } self.clock += day + " "; self.ytd += day; if (hh < 10) self.clock += "0"; self.clock += hh + ":"; if (mm < 10) self.clock += '0'; self.clock += mm + ":"; if (ss < 10) self.clock += '0'; self.clock += ss; return self.clock, self.ytd, hh; }, //查询数据 searchInfo: function () { var self = this; self.curentTime(); console.log(self.clock); console.log(self.ytd); var workshop = $('#ddlWorkshop').val(); var station = $('#ddlStation').val(); var stationval = $('#ddlStation :selected').text(); var ytd = self.ytd; var time = new Date().getHours(); var mm = new Date().getMinutes(); time = time + '.' + mm; var target = self.target; var stand = self.target / 6; $('#productvalue').text(target); self.look(workshop, station, self.clock, time, stand, stationval); }, look: function (workshop, station, clock, time, stand, stationval) { var self = this; trycatch(workshop, station, clock, time, stand, stationval); async function trycatch(workshop, station, clock, time, stand, stationval) { console.log(stand); try { let dddd = await self.FetchApi("StationClassYield", { workshop: workshop, station: station, ytd: clock, time: time }); dddd = await dddd.json(); console.log(dddd); self.handleary(dddd, time, stand); var weld = self.chartary; console.log(weld); console.log(self.categoriess); var categoriess = self.categoriess var title; let capa = await self.FetchApi("StationTotalCapacity", { workshop: workshop, station: station, ytd: clock }); capa = await capa.json(); console.log(capa[0].totalQty); if (time >= 8 && time < 20) { title = "A班" + stationval + "实时产能 : " + capa[0].totalQty; } else { title = "B班" + stationval + "实时产能 : " + capa[0].totalQty; } //将weld中每个y值取出进行倒序排序,取第一个值 var value = []; for (var i in weld) { //遍历数组 value.push(weld[i].y); } value = value.sort(function (a, b) { return b - a }); console.log(value); self.iniChart(weld, stand, categoriess, title, value[0]); } catch (err) { console.log(err); } } }, handleary: function (getdata, time, stand) { //var chartary = []; var self = this; self.chartary = []; var completionary = []; //var categoriess = []; if (time >= 8 && time < 20) { completionary = ["08", "10", "12", "14", "16", "18"]; self.categoriess = ["08:00~10:00", "10:00~12:00", "12:00~14:00", "14:00~16:00", "16:00~18:00", "18:00~20:00"]; $('#classes').text('A'); $('#sameday').text(self.ytd); } else { if (time >= 20) { $('#sameday').text(self.ytd); } if (time < 8) { var day; console.log(self.ytd); if (eval(self.ytd.substring(self.ytd.length - 2) - 1).length == 1) { day = self.ytd.substring(0, self.ytd.length - 2) + '0' + eval(self.ytd.substring(self.ytd.length - 2) - 1) } else { if (eval(self.ytd.substring(self.ytd.length - 2) - 1) == 0) { if (self.ytd.substring(5, 6) == 0) { console.log(self.ytd.substring(0, 4)); console.log(eval(self.ytd.substring(6, 7) - 1)); var d = new Date(self.ytd.substring(0, 4), eval(self.ytd.substring(6, 7) - 1), 0); console.log(d); d = d.getDate(); console.log(d); day = self.ytd.substring(0, 6) + eval(self.ytd.substring(6, 7) - 1) + '-' + d } else { var d = new Date(self.ytd.substring(0, 4), eval(self.ytd.substring(5, 6) - 1), 0); d = d.getDate(); day = self.ytd.substring(0, 4) + eval(self.ytd.substring(5, 7) - 1) + '-' + d } } else { //console.log(eval(self.ytd.substring(self.ytd.length - 2) - 1).toString().length == 1); if (eval(self.ytd.substring(self.ytd.length - 2) - 1).toString().length == 1) { day = self.ytd.substring(0, self.ytd.length - 2) + '0' + eval(self.ytd.substring(self.ytd.length - 2) - 1) } else { day = self.ytd.substring(0, self.ytd.length - 2) + eval(self.ytd.substring(self.ytd.length - 2) - 1) } } } $('#sameday').text(day); } completionary = ["20", "22", "00", "02", "04", "06"]; self.categoriess = ["20:00~22:00", "22:00~24:00", "00:00~02:00", "02:00~04:00", "04:00~06:00", "06:00~08:00"]; $('#classes').text('B'); } _.each(completionary, function (ele, index, ary) { var findres = _.find(getdata, function (item, index, obj) { var timet; console.log(item); if (item.timeSpan.toString().length == 1) { timet = '0' + item.timeSpan; } else { timet = item.timeSpan; } return timet == ele; }); //if (findres == undefined) { // self.chartary.push({ y: 0, color: 'red', img:'' }); //} //else { // //self.chartary.push({ // // y: findres.qty, // // color: findres.qty > stand ? 'green' : 'red', // // img: findres.qty > stand ? '' : '', // //}); // if (findres.qty > stand) { // self.chartary.push({ // y: findres.qty, // color: 'green', // img: '' // }); // } else if (findres.qty == stand) { // self.chartary.push({ // y: findres.qty, // color: 'orange', // img: '' // }); // } else { // self.chartary.push({ // y: findres.qty, // color: 'red', // img: '' // }); // } // //self.chartary.push(findres.qty) //} //修改为生产2小时后进行判定 if (findres == undefined) { self.chartary.push({ y: 0, color: 'orange', img: '' }); } else { var data = new Date(); var hh = data.getHours; console.log(hh); if (findres.qty > stand) { self.chartary.push({ y: findres.qty, color: 'green', img: '' }); } else if (findres.qty == stand) { self.chartary.push({ y: findres.qty, color: 'orange', img: '' }); } else { self.chartary.push({ y: findres.qty, color: 'red', img: '' }); } } console.log(findres); var date = new Date(); var hh = date.getHours(); console.log(hh); if (8 <= hh <= 20) { console.log(hh); } }) console.log(self.categoriess); return self.chartary, self.categoriess; }, ready: function () { var self = this; console.log($('#ddlWorkshop').val()); if ($('#ddlWorkshop').val() == null) { toastr.warning('请选择车间部门', '', { progressBar: true }); return; } if ($('#ddlStation').val() == null) { toastr.warning('请选择站点', '', { progressBar: true }); return; } if (self.target == '') { toastr.warning('请输入目标产能', '', { progressBar: true }); return; } var height = $(".box-header").css('height'); console.log(height); $(".box-header").css({ "position": "absolute", "top": "-" + height }); if ($('#arrow').text() == '︽') { $('#arrow').text('︾'); } $('#stats').text($('#ddlStation :selected').text()); self.searchInfo(); setInterval(function () { self.searchInfo() }, 60000) //self.requestApi({ // modulename: "Orders", // funname: "SiteCapacityStand", // para: { stand: stand }, // success: (res) => { // console.log(res); // if (res.result == 'success') { // toastr.success('站点标准产量保存完成', '', { progressBar: true }); // } // self.dayMonth = ['day']; // }, // fail: (ex) => { // console.log(ex); // stand = [$('#ddlWorkshop').val(), $('#ddlLine').val()]; // } //}) }, iniChart: function (weld, stand, categoriess, title, value) { //var colors = ['#FB9E40', '#FC4747']; //HighCharts.getOptions().colors = HighCharts.map(colors, function (color) { // return { // linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, // stops: [ // [0, '#FB9E40'], // [1, '#FC4747'] // ] // };6 //}); //HighCharts.chart(this.id, this.option, function (chart) { // SetEveryOnePointColor(chart) //}) var chart = Highcharts.chart('rptweld', { chart: { type: 'column' }, credits: { enabled: false }, title: { text: title, style: { fontSize: "22px", color: "black", } }, subtitle: { //text: '数据来源: WorldClimate.com' }, xAxis: { categories: categoriess //["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"] //[ "08:00~10:00", "10:00~12:00", "12:00~14:00", "14:00~16:00", "16:00~18:00", "18:00~20:00"] , crosshair: true, labels: { formatter: function () { return '' + this.value + ''; }, style: { fontSize: '18px', //字体 color: 'black', fontWeight: "600" } }, }, yAxis: { min: 0, //max:550, max: Number(value) + 150, title: { text: '过站数量', style: { //color: '#2EBBD9', color: 'black', fontSize: '20px', fontWeight: "600" } }, plotLines: [{ //一条延伸到整个绘图区的线,标志着轴中一个特定值。 color: 'red', dashStyle: 'Solid', //Dash,Dot,Solid,默认Solid width: 2.5, value: stand, //x轴显示位置,一个标记为1 zIndex: 5 }], labels: { style: { fontSize: '18px', //字体 fontWeight: "600", color: 'black', } }, gridLineDashStyle: "Dash", //gridLineColor: "blue" //tickPositions: [0, 25, 50, 75,100, 125,150,175,200], //stackLabels: { // 堆叠数据标签 // enabled: true, // style: { // fontWeight: 'bold', // color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' // } //} }, tooltip: { // head + 每个 point + footer 拼接成完整的 table headerFormat: '{point.key}', pointFormat: '' + '', footerFormat: '
{series.name}: {point.y:.1f} mm
', shared: true, useHTML: true, enabled: false }, exporting: { enabled: false }, plotOptions: { column: { borderWidth: 0, //pointWidth: 122, dataLabels: { inside: false, enabled: true, //设置显示对应y的值 useHTML: true, formatter: function () { return '
' + this.point.img + '' + this.point.y + '
' //if (this.point.y < stand) { // return '
' + this.point.img + '' + this.point.y + '
' // //return this.point.img; // //return '' + this.point.y + ''; //} else if (this.point.y > stand) { // //return '' + this.point.y + ''; // return '
' + this.point.img + '' + this.point.y + '
' // //return this.point.img; //} else { // return '
' + this.point.img + '' + this.point.y + '
' //} }, //color: '#4f4f4f', style: { fontWeight: '900', fontSize: '30px', "textShadow": 'none', left: '50px', top: '0' }, crop: false, overflow: 'none' } } }, series: [{ data: weld, cursor: 'pointer', style: { //color:"#fff" //fontSize: '50px', //fontWeight: 'normal', //fontFamily: '' }, events: { } }], legend: { enabled: false }, }); } } })