旧版报表、仓库
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.
 
 
 
 
 

624 lines
25 KiB

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("<option value='" + value.area_code + "'>" + value.descriptions + "</option>");
})
$('#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("<option value='" + value.line_id + "'>" + value.descriptions + "</option>");
})
$('#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:'<img src="../../Image/cry.png" style="width:60px;height:60px">' });
//}
//else {
// //self.chartary.push({
// // y: findres.qty,
// // color: findres.qty > stand ? 'green' : 'red',
// // img: findres.qty > stand ? '<img src="../../Image/happy.ico" style="width:50px;height:50px">' : '<img src="../../3rd/AdminLte/plugins/iCheck/square/hllogo.ico" style="width:50px;height:50px">',
// //});
// if (findres.qty > stand) {
// self.chartary.push({
// y: findres.qty,
// color: 'green',
// img: '<img src="../../Image/happy.png" style="width:60px;height:60px">'
// });
// } else if (findres.qty == stand) {
// self.chartary.push({
// y: findres.qty,
// color: 'orange',
// img: '<img src="../../Image/awkward.png" style="width:60px;height:60px">'
// });
// } else {
// self.chartary.push({
// y: findres.qty,
// color: 'red',
// img: '<img src="../../Image/cry.png" style="width:60px;height:60px">'
// });
// }
// //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: '<img src="../../Image/happy.png" style="width:60px;height:60px">'
});
} else if (findres.qty == stand) {
self.chartary.push({
y: findres.qty,
color: 'orange',
img: '<img src="../../Image/awkward.png" style="width:60px;height:60px">'
});
} else {
self.chartary.push({
y: findres.qty,
color: 'red',
img: '<img src="../../Image/cry.png" style="width:60px;height:60px">'
});
}
}
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 '<a href="' + categoriess[this.value] + '">' +
this.value + '</a>';
},
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: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
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 '<div style="display:flex;flex-wrap:wrap;justify-content: center">' + this.point.img + '<span style="color:' + this.point.color + '">' + this.point.y + '</span></div>'
//if (this.point.y < stand) {
// return '<div style="display:flex;flex-wrap:wrap;justify-content: center">' + this.point.img + '<span style="color:' + this.point.color+'">' + this.point.y + '</span></div>'
// //return this.point.img;
// //return '<span style="color:red">' + this.point.y + '</span>';
//} else if (this.point.y > stand) {
// //return '<span style="color:green">' + this.point.y + '</span>';
// return '<div style="display:flex;flex-wrap:wrap;justify-content: center">' + this.point.img + '<span style="color:' + this.point.color +'">' + this.point.y + '</span></div>'
// //return this.point.img;
//} else {
// return '<div style="display:flex;flex-wrap:wrap;justify-content: center">' + this.point.img + '<span style="color:' + this.point.color +'">' + this.point.y + '</span></div>'
//}
},
//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
},
});
}
}
})