|
|
|
|
@ -1,80 +1,126 @@
|
|
|
|
|
$(() => {
|
|
|
|
|
moduleTitle()
|
|
|
|
|
LOSS()
|
|
|
|
|
yieldTabs()
|
|
|
|
|
Tips()
|
|
|
|
|
// 公共请求地址
|
|
|
|
|
let url = '/broad/box'
|
|
|
|
|
let url = '/broad/zz'
|
|
|
|
|
|
|
|
|
|
const INTERVAL = 30000
|
|
|
|
|
|
|
|
|
|
// LOSS(分类)
|
|
|
|
|
autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => {
|
|
|
|
|
verticalBarChart(null, document.getElementById("LOSSClassify"));
|
|
|
|
|
})
|
|
|
|
|
const request = () => {
|
|
|
|
|
// 目标
|
|
|
|
|
$.post(url + "/selectProductInByTeam/0", {}, data => {
|
|
|
|
|
data = JSON.parse(data)
|
|
|
|
|
if (isFirst) {
|
|
|
|
|
// target.top = data.map(val => val.val)
|
|
|
|
|
// target.bottom = data.val
|
|
|
|
|
// request()
|
|
|
|
|
// isFirst = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// LOSS(分类)
|
|
|
|
|
$.post(url + "/selectLossInfo", {}, data => {
|
|
|
|
|
data = JSON.parse(data)
|
|
|
|
|
LOSS(data.find(val => val.name == '1').qty)
|
|
|
|
|
verticalBarChart({
|
|
|
|
|
xName: ["0-3分钟", "3-10分钟", ">10分钟"],
|
|
|
|
|
yData: [data.find(val => val.name == '2').qty, data.find(val => val.name == '3').qty, data.find(val => val.name == '4').qty],
|
|
|
|
|
}, document.getElementById("LOSSClassify"));
|
|
|
|
|
})
|
|
|
|
|
// 产量
|
|
|
|
|
$.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => {
|
|
|
|
|
data = JSON.parse(data)
|
|
|
|
|
barChartAndLineChartThree({
|
|
|
|
|
xName: data.map(val => val.name),
|
|
|
|
|
yDataOne: data.map(val => val.qty),
|
|
|
|
|
yDataOneName: "实际产量",
|
|
|
|
|
yDataTwo: target.top,
|
|
|
|
|
yDataTwoName: "目标产量",
|
|
|
|
|
}, document.getElementById("yield"));
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 产量
|
|
|
|
|
autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => {
|
|
|
|
|
barChartAndLineChartThree(null, document.getElementById("yield"));
|
|
|
|
|
})
|
|
|
|
|
// 一次装配不合格率
|
|
|
|
|
$.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => {
|
|
|
|
|
data = JSON.parse(data)
|
|
|
|
|
barChartAndLineChartFour({
|
|
|
|
|
xName: data.map(val => val.name),
|
|
|
|
|
yDataOne: data.map(val => val.qty),
|
|
|
|
|
yDataOneName: "不良数",
|
|
|
|
|
yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5],
|
|
|
|
|
yDataTwoName: "一次装配不合格率",
|
|
|
|
|
yDataThree: target.bottom,
|
|
|
|
|
yDataThreeName: "目标",
|
|
|
|
|
}, document.getElementById("fractionDefective"));
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 一次装配不合格率
|
|
|
|
|
autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => {
|
|
|
|
|
barChartAndLineChartFour(null, document.getElementById("fractionDefective"));
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
//追踪事件轮询
|
|
|
|
|
autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => {
|
|
|
|
|
$('#trackEvents').remove()
|
|
|
|
|
$('.trackEventsScrollTable').html('<div class="trackEvents" id="trackEvents"></div>')
|
|
|
|
|
dynamicTable({
|
|
|
|
|
el: '#trackEvents',
|
|
|
|
|
rowNum: 5,
|
|
|
|
|
timeout: 0,
|
|
|
|
|
header: [ "编号", "计划数量", "完成数量", "差异值", "时间"],
|
|
|
|
|
data: data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]),
|
|
|
|
|
index: false,
|
|
|
|
|
fontColor: '#B4B7BF ',
|
|
|
|
|
indexBGC: '#86F3FF',
|
|
|
|
|
headerBGC: 'rgba(8,36,75,0.2)',
|
|
|
|
|
oddRowBGC: 'rgba(8,36,75,0.2)',
|
|
|
|
|
evenRowBGC: 'rgba(8,36,75,0.2)',
|
|
|
|
|
colWidth: ['30%', '13%', '13%', '14%', '30%']
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
//追踪事件轮询
|
|
|
|
|
$.post("/broad/beforeLibrary/selectOrderInfo", {}, data => {
|
|
|
|
|
data = JSON.parse(data)
|
|
|
|
|
console.log(data)
|
|
|
|
|
$('#trackEvents').remove()
|
|
|
|
|
$('.trackEventsScrollTable').html('<div class="trackEvents" id="trackEvents"></div>')
|
|
|
|
|
dynamicTable({
|
|
|
|
|
el: '#trackEvents',
|
|
|
|
|
rowNum: 5,
|
|
|
|
|
timeout: 0,
|
|
|
|
|
header: ["编号", "计划数量", "完成数量", "差异值", "时间"],
|
|
|
|
|
data: data.map(value => [value.plan_code.slice(4, value.plan_code.length), value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]),
|
|
|
|
|
index: false,
|
|
|
|
|
fontColor: '#B4B7BF ',
|
|
|
|
|
indexBGC: '#86F3FF',
|
|
|
|
|
headerBGC: 'rgba(8,36,75,0.2)',
|
|
|
|
|
oddRowBGC: 'rgba(8,36,75,0.2)',
|
|
|
|
|
evenRowBGC: 'rgba(8,36,75,0.2)',
|
|
|
|
|
colWidth: ['30%', '13%', '13%', '14%', '30%']
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const yieldTabs = () => {
|
|
|
|
|
$('#yieldTabs div').click(function () {
|
|
|
|
|
yieldType = $(this).attr('type')
|
|
|
|
|
$(this).css({backgroundColor: '#2C95FD', color: '#C2D8FF'})
|
|
|
|
|
$(this).siblings().css({backgroundColor: '#C2D8FF', color: '#2C95FD'})
|
|
|
|
|
request()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
request()
|
|
|
|
|
yieldTabs()
|
|
|
|
|
tableAnimation('#trackEvents')
|
|
|
|
|
setInterval(request, INTERVAL)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
let yieldType = '1'
|
|
|
|
|
const LOSS = () => {
|
|
|
|
|
let yieldType = '0'
|
|
|
|
|
let isFirst = true
|
|
|
|
|
let target = {
|
|
|
|
|
top: [382, 102, 186, 200, 102, 186, 315, 1, 1, 1, 1],
|
|
|
|
|
bottom: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
|
|
|
|
|
topTips: '2000',
|
|
|
|
|
bottomTips: '3.05',
|
|
|
|
|
}
|
|
|
|
|
const LOSS = (val1=0,val2=24) => {
|
|
|
|
|
const html = `
|
|
|
|
|
<span style="position: absolute;top: 15.7%;left: 61.8%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">123.32</span>
|
|
|
|
|
<span style="position: absolute;top: 15.7%;left: 85.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">123</span>
|
|
|
|
|
<span style="position: absolute;top: 15.7%;left: 61.8%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val1}</span>
|
|
|
|
|
<span style="position: absolute;top: 15.7%;left: 85.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val2}</span>
|
|
|
|
|
`
|
|
|
|
|
$('body').append(html)
|
|
|
|
|
$('#LOSS').html(html)
|
|
|
|
|
}
|
|
|
|
|
const moduleTitle = () => {
|
|
|
|
|
const html = `
|
|
|
|
|
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">总装生产数据及质量数据</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 53%;color: #CFD2D0;font-size: 1.0vw">LOSS(分钟)</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 76.5%;color: #CFD2D0;font-size: 1.0vw">标准节拍(秒)</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">入库量</span>
|
|
|
|
|
<span style="position: absolute;top: 54.3%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">外观检测</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品产量</span>
|
|
|
|
|
<span style="position: absolute;top: 54.3%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">一次装配不合格率</span>
|
|
|
|
|
<span style="position: absolute;top: 24.8%;left: 53%;color: #CFD2D0;font-size: 1.0vw">LOSS分类</span>
|
|
|
|
|
<span style="position: absolute;top: 54.3%;left: 53%;color: #CFD2D0;font-size: 1.0vw">外观质量问题</span>
|
|
|
|
|
<span style="position: absolute;top: 54.3%;left: 53%;color: #CFD2D0;font-size: 1.0vw">入库订单</span>
|
|
|
|
|
`
|
|
|
|
|
$('body').append(html)
|
|
|
|
|
}
|
|
|
|
|
const yieldTabs = () => {
|
|
|
|
|
$('#yieldTabs div').click(function () {
|
|
|
|
|
yieldType = $(this).attr('type')
|
|
|
|
|
$(this).css({backgroundColor: '#2C95FD', color: '#C2D8FF'})
|
|
|
|
|
$(this).siblings().css({backgroundColor: '#C2D8FF', color: '#2C95FD'})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const Tips = () => {
|
|
|
|
|
const Tips = (top={target:target.topTips,progress:0,reality:0,gap:0,rate:0},bottom={target:target.bottomTips,reality:0,total:0}) => {
|
|
|
|
|
const html = `
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 19%;color: #fff;font-size: 1vw;">目标:2000 进度目标:1500 实际:1000 差异:500 达成率:66% </span>
|
|
|
|
|
<span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 1vw">目标:3.05% 实际:2.16% 累计不良数:40</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 19%;color: #fff;font-size: 1vw;">目标:${top.target} 进度目标:${top.progress} 实际:${top.reality} 差异:${top.gap} 达成率:${top.rate}% </span>
|
|
|
|
|
<span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 1vw">目标:${bottom.target}% 实际:${bottom.reality}% 累计不良数:${bottom.total}</span>
|
|
|
|
|
`
|
|
|
|
|
$('body').append(html)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|