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
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
|
|
},
|
|
});
|
|
}
|
|
}
|
|
})
|
|
|