|
|
|
|
@ -1,93 +1,177 @@
|
|
|
|
|
$(() => {
|
|
|
|
|
moduleTitle()
|
|
|
|
|
safe()
|
|
|
|
|
card({top: 60, left: 30.5})
|
|
|
|
|
card({top: 60, left: 38.5})
|
|
|
|
|
card({top: 60, left: 46.5})
|
|
|
|
|
card({top: 60, left: 54.5})
|
|
|
|
|
card({top: 60, left: 62.5})
|
|
|
|
|
safe('#safe')
|
|
|
|
|
Tips(0,0,0,'#Tips')
|
|
|
|
|
total( 0,'#total')
|
|
|
|
|
card({top: 60, left: 30.5,title:'内胆检漏',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardOne')
|
|
|
|
|
card({top: 60, left: 38.5,title:'安全检测',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardTwo')
|
|
|
|
|
card({top: 60, left: 46.5,title:'成品检漏',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardThree')
|
|
|
|
|
card({top: 60, left: 54.5,title:'测温性能',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardFour')
|
|
|
|
|
card({top: 60, left: 62.5,title:'成品外观',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardFive')
|
|
|
|
|
// 公共请求地址
|
|
|
|
|
let url = '/broad/beforeLibrary'
|
|
|
|
|
|
|
|
|
|
// 轮询间隔时间
|
|
|
|
|
const INTERVAL = 30000
|
|
|
|
|
|
|
|
|
|
// IQC3
|
|
|
|
|
const IQCTwo = new AutoScrollTable(document.getElementById("IQCTwo"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']})
|
|
|
|
|
|
|
|
|
|
//每日人力出勤轮询
|
|
|
|
|
// autoUpdate(url + "/ ", INTERVAL, data => {
|
|
|
|
|
singleVerticalBarChartTwo(null, document.getElementById("manpowerAttendance"))
|
|
|
|
|
let data = [
|
|
|
|
|
{
|
|
|
|
|
name: '班组1',
|
|
|
|
|
value: 72,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组2',
|
|
|
|
|
value: 52,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组3',
|
|
|
|
|
value: 72,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组4',
|
|
|
|
|
value: 29,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组5',
|
|
|
|
|
value: 82,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组6',
|
|
|
|
|
value: 82,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组7',
|
|
|
|
|
value: 28,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组8',
|
|
|
|
|
value: 62,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组9',
|
|
|
|
|
value: 82,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组10',
|
|
|
|
|
value: 38,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '班组11',
|
|
|
|
|
value: 93,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
data.sort((a,b)=>{
|
|
|
|
|
return b.value - a.value
|
|
|
|
|
})
|
|
|
|
|
console.log(data)
|
|
|
|
|
singleVerticalBarChartTwo({
|
|
|
|
|
xName: ['班组1', '班组2', '班组3', '班组4', '班组5', '班组6', '班组7', '班组8', '班组9', '班组10'],
|
|
|
|
|
yData: [38, 60, 40, 55, 42, 39, 45, 40, 63, 38],
|
|
|
|
|
}, document.getElementById("manpowerAttendance"))
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// IQC
|
|
|
|
|
multipleVerticalBarChartTwo(null, document.getElementById("IQCOne"))
|
|
|
|
|
IQCTwo.loadData([[1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5]], Object.keys(["编号", "计划数量", "完成数量", "差异值", "时间"]))
|
|
|
|
|
hollowPieChart(null, document.getElementById("IQCThree"))
|
|
|
|
|
barChartAndLineChartTwo(null, document.getElementById("IQCFour"))
|
|
|
|
|
horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("IQC"))
|
|
|
|
|
|
|
|
|
|
// 设备功率
|
|
|
|
|
singleVerticalBarChart(null, document.getElementById("equipmentPowerOne"))
|
|
|
|
|
singleVerticalBarChart(null, document.getElementById("equipmentPowerTwo"))
|
|
|
|
|
singleVerticalBarChart(null, document.getElementById("equipmentPower"))
|
|
|
|
|
|
|
|
|
|
// 生产效率
|
|
|
|
|
// autoUpdate(url + "/ ", INTERVAL, data => {
|
|
|
|
|
horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("productionEfficiency"))
|
|
|
|
|
singleVerticalBarChart(null, document.getElementById("productionEfficiency"))
|
|
|
|
|
// })
|
|
|
|
|
// 成品入库统计
|
|
|
|
|
percentageRingDiagram(null, document.getElementById("mainData"))
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
const today = () => {
|
|
|
|
|
const currentYear = new Date().getFullYear().toString();
|
|
|
|
|
const hasTimestamp = new Date() - new Date(currentYear);
|
|
|
|
|
const hasDays = Math.ceil(hasTimestamp / 86400000);
|
|
|
|
|
return hasDays
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const curWeek = () => {
|
|
|
|
|
let today = new Date();
|
|
|
|
|
let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
|
|
|
|
|
let dayOfWeek = firstDayOfYear.getDay();
|
|
|
|
|
let spendDay = 1;
|
|
|
|
|
if (dayOfWeek != 0) {
|
|
|
|
|
spendDay = 7 - dayOfWeek + 1;
|
|
|
|
|
}
|
|
|
|
|
firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
|
|
|
|
|
let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
|
|
|
|
|
return Math.ceil(d / 7);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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">订单可视化、6S 及安全生产看板</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">班组生产6S</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 32%;color: #CFD2D0;font-size: 1.0vw">成品入库数量统计</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 73.5%;color: #CFD2D0;font-size: 1.0vw"> </span>
|
|
|
|
|
<span style="position: absolute;top: 54.5%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品入库统计</span>
|
|
|
|
|
<span style="position: absolute;top: 54.5%;left: 32%;color: #CFD2D0;font-size: 1.0vw">问题</span>
|
|
|
|
|
<span style="position: absolute;top: 54.5%;left: 73.6%;color: #CFD2D0;font-size: 1.0vw">安全生产</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">第${curWeek()}周 班组6S排行榜 </span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 32%;color: #CFD2D0;font-size: 1.0vw">三日订单执行情况</span>
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 73.5%;color: #CFD2D0;font-size: 1.0vw">当日订单入库统计</span>
|
|
|
|
|
<span style="position: absolute;top: 54.5%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">安全生产</span>
|
|
|
|
|
<span style="position: absolute;top: 54.5%;left: 32%;color: #CFD2D0;font-size: 1.0vw">质量分析(TOP3)</span>
|
|
|
|
|
<span style="position: absolute;top: 54.5%;left: 73.6%;color: #CFD2D0;font-size: 1.0vw">重点工序质量监控</span>
|
|
|
|
|
`
|
|
|
|
|
$('body').append(html)
|
|
|
|
|
}
|
|
|
|
|
const safe = () => {
|
|
|
|
|
|
|
|
|
|
const safe = (el) => {
|
|
|
|
|
const html = `
|
|
|
|
|
<span style="position: absolute;top: 74%;left: 84%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">1809<span style="font-size: 0.5vw">天</span> </span>
|
|
|
|
|
<span style="position: absolute;top: 81%;left: 84%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">QSR连续安全生产天数</span>
|
|
|
|
|
<span style="position: absolute;top: 74%;left: 16%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw">天</span> </span>
|
|
|
|
|
<span style="position: absolute;top: 81%;left: 16%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">QSR连续安全生产天数</span>
|
|
|
|
|
`
|
|
|
|
|
$('body').append(html)
|
|
|
|
|
$(el).html(html)
|
|
|
|
|
}
|
|
|
|
|
const card = (val = {top: 1, left: 1}) => {
|
|
|
|
|
|
|
|
|
|
const card = (val = {top: 1, left: 1,title:'',name1:'',value1:'',name2:'',value2:'',name3:'',value3:''},el) => {
|
|
|
|
|
const html = `
|
|
|
|
|
<div style="position: absolute;top: ${val.top}%;left: ${val.left}%;width:7%;height:15%;border: 1px solid #0E72F1;">
|
|
|
|
|
<div style="position: absolute;top: 0%;left: 0%;width:100%;height:15%;background-color: #0C71F3;text-align: center;font-size: 0.75vw;line-height: 1.2vw">
|
|
|
|
|
KTTX-1
|
|
|
|
|
${val.title}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: absolute;top: 25%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
|
|
|
|
|
<span style="position: absolute;width:60%;font-size: 0.6vw;">
|
|
|
|
|
项目名称111:
|
|
|
|
|
${val.name1}
|
|
|
|
|
</span>
|
|
|
|
|
<span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
|
|
|
|
|
值111
|
|
|
|
|
${val.value1}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: absolute;top: 50%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
|
|
|
|
|
<span style="position: absolute;width:60%;font-size: 0.6vw;">
|
|
|
|
|
项目名称111:
|
|
|
|
|
${val.name2}
|
|
|
|
|
</span>
|
|
|
|
|
<span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
|
|
|
|
|
值111
|
|
|
|
|
${val.value2}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: absolute;top: 75%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
|
|
|
|
|
<span style="position: absolute;width:60%;font-size: 0.6vw;">
|
|
|
|
|
项目名称111:
|
|
|
|
|
${val.name3}
|
|
|
|
|
</span>
|
|
|
|
|
<span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
|
|
|
|
|
值111
|
|
|
|
|
${val.value2}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
$('body').append(html)
|
|
|
|
|
$(el).html(html)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Tips = (val1 = 0, val2 = 0, val3 = 0, el) => {
|
|
|
|
|
const html = `
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 44%;color: #fff;font-size: 1vw;">订单数量:${val1} 完成数量:${val2} 清单率:${val3}%</span>
|
|
|
|
|
`
|
|
|
|
|
$(el).html(html)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const total = (val1 = 0, el) => {
|
|
|
|
|
const html = `
|
|
|
|
|
<span style="position: absolute;top: 10%;left: 85.7%;color: #fff;font-size: 1vw;">合计:${val1}</span>
|
|
|
|
|
`
|
|
|
|
|
$(el).html(html)
|
|
|
|
|
}
|