Merge remote-tracking branch 'gitee/master'

master
wangh 3 years ago
commit 97c1419e23

@ -11,29 +11,97 @@ body {
overflow: hidden;
}
.btnOne {
.btnOneLeft {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
background-size: 100% 100%;
position: absolute;
width: 7.6%;
height: 8.5%;
top: 30.1%;
height: 10%;
aspect-ratio: 236/204;
top: 30%;
left: 0%;
}
.btnOneRight {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 30%;
right: 0%;
}
.btnTwo {
.btnTwoLeft {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
background-size: 100% 100%;
position: absolute;
width: 7.6%;
height: 8.5%;
top: 45.1%;
height: 10%;
aspect-ratio: 236/204;
top: 43%;
left: 0%;
}
.btnTwoRight {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 43%;
right: 0%;
}
.arrowsOne{
display: block;
/*display: none;*/
.btnThreeLeft {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnThree.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 56%;
left: 0%;
}
.arrowsTwo{
.btnThreeRight {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnThree.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 56%;
right: 0%;
}
.btnFourLeft {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFour.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 69%;
left: 0%;
}
.btnFourRight {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFour.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 69%;
right: 0%;
}
.btnFiveLeft {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFive.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 82%;
left: 0%;
}
.btnFiveRight {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFive.png);
background-size: 100% 100%;
position: absolute;
height: 10%;
aspect-ratio: 236/204;
top: 82%;
right: 0%;
}
.arrowsOne,.arrowsTwo,.deviceNameOne,.deviceNameTwo{
display: none;
}
.layerOne{

@ -10,38 +10,10 @@ body {
font: normal 100% Arial, sans-serif;
}
.manpowerAttendance{
.satisfaction{
position: absolute;
width: 25%;
height: 35%;
top: 15%;
left: 71.5%;
}
.IQC{
position: absolute;
width: 40%;
height: 35%;
top: 15%;
left: 30%;
}
.productionEfficiency{
position: absolute;
width: 25%;
height: 35%;
top: 60%;
left: 3%;
}
.equipmentPower{
position: absolute;
width: 39%;
height: 34%;
top: 60%;
left: 30.5%;
}
.topLeft{
position: absolute;
width: 25%;
height: 34%;
top: 15.5%;
left: 3.5%;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 40 KiB

@ -1,62 +1,144 @@
$(() => {
moduleTitle()
infoOne()
infoTwo()
infoThree()
deviceNameOne('机器人生产车间', 13, 44)
deviceNameOne('门壳成型线', 18, 35)
deviceNameOne('26工位门体发泡线', 17, 50)
deviceNameOne('门体集存库', 18, 70)
deviceNameOne('澳柯玛直播间', 25, 25)
deviceNameOne('箱体发泡集存库', 26, 36)
deviceNameOne('28工位箱体发泡线', 37, 63)
deviceNameOne('箱壳自动成型线', 43, 51)
deviceNameOne('成品分垛入库', 37, 18)
deviceNameOne('内胆库生产线', 51, 47)
deviceNameOne('压合区', 57, 61)
deviceNameOne('展厅', 45, 80)
deviceNameOne('内胆预装线', 60, 50)
deviceNameOne('内胆壁生产线', 58, 84)
deviceNameTwo('发泡箱体集存库', 13, 72)
deviceNameTwo('总装线', 11, 62)
deviceNameTwo('抽空线', 11, 30)
deviceNameTwo('灌注机', 12, 43)
deviceNameTwo('安全检测', 13, 64)
deviceNameTwo('成品检漏', 13, 52)
deviceNameTwo('测温性能检测', 24, 55)
deviceNameTwo('终检', 25, 29)
deviceNameTwo('自动装箱', 29, 18)
deviceNameTwo('自动打包', 34, 17)
deviceNameTwo('成品库', 40, 17)
deviceNameTwo('壳箱组装', 37, 35)
deviceNameTwo('箱壳集存库', 35, 75)
deviceNameTwo('内胆集存库', 45, 60)
deviceNameTwo('内胆检漏', 47, 34)
// 公共请求地址
let url = '/broad/box'
const btnOne = $('#btnOne')
const btnTwo = $('#btnTwo')
const layerOne = $('#layerOne')
const layerTwo = $('#layerTwo')
const arrowsOne = $('#arrowsOne')
const arrowsTwo = $('#arrowsTwo')
btnOne.click(() => {
data.now = 1
})
btnTwo.click(() => {
data.now = 2
})
btnThree.click(() => {
location.href='http://localhost:9090/broad/week'
})
btnFour.click(() => {
data.four = !(data.four)
})
btnFive.click(() => {
data.five = !(data.five)
})
})
const btnOne = $('#btnOneLeft')
btnOne.push($('#btnOneRight')[0])
const btnTwo = $('#btnTwoLeft')
btnTwo.push($('#btnTwoRight')[0])
const btnThree = $('#btnThreeLeft')
btnThree.push($('#btnThreeRight')[0])
const btnFour = $('#btnFourLeft')
btnFour.push($('#btnFourRight')[0])
const btnFive = $('#btnFiveLeft')
btnFive.push($('#btnFiveRight')[0])
const layerOne = $('#layerOne')
const layerTwo = $('#layerTwo')
const arrowsOne = $('#arrowsOne')
const arrowsTwo = $('#arrowsTwo')
const deviceNameOneDiv = $('#deviceNameOne')
const deviceNameTwoDiv = $('#deviceNameTwo')
const deviceNameOne = (val = '', top = 0, left = 0) => {
const html = `
<div style="position: absolute;top:${top}%;left:${left}%;width:6%;aspect-ratio: 300/166;background-image: url('../../img/board/intelligentRefrigeratorInterconnectionFactory/point.png');background-size: 100% 100%;">
<span style="position: absolute;top:10%;left:64%;transform: translateX(-50%);font-size: 0.5vw;white-space: nowrap">${val}</span>
</div>
`
$('#deviceNameOne').append(html)
}
const deviceNameTwo = (val = '', top = 0, left = 0) => {
const html = `
<div style="position: absolute;top:${top}%;left:${left}%;width:6%;aspect-ratio: 300/166;background-image: url('../../img/board/intelligentRefrigeratorInterconnectionFactory/point.png');background-size: 100% 100%;">
<span style="position: absolute;top:10%;left:64%;transform: translateX(-50%);font-size: 0.5vw;white-space: nowrap">${val}</span>
</div>
`
$('#deviceNameTwo').append(html)
}
let dataRaw = {
now: 1,
four: false,
five: false
}
let dataProxy={
get: function (obj, key) {
return obj[key];
},
set: function (obj, key, value) {
obj[key] = value;
flash()
}
}
let data = new Proxy(dataRaw,dataProxy)
const flash = () => {
if (data.now === 1){
btnOne.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png)'})
btnTwo.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png)'})
layerOne.css({display: 'block'})
layerTwo.css({display: 'none'})
arrowsOne.css({display: 'block'})
arrowsTwo.css({display: 'none'})
})
btnTwo.click(() => {
}
if (data.now === 2){
btnOne.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOne.png)'})
btnTwo.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwoClick.png)'})
layerOne.css({display: 'none'})
layerTwo.css({display: 'block'})
}
if (data.four){
btnFour.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFourClick.png)'})
if (data.now === 1){
arrowsOne.css({display: 'block'})
arrowsTwo.css({display: 'none'})
}
if (data.now === 2){
arrowsOne.css({display: 'none'})
arrowsTwo.css({display: 'block'})
}
}else{
btnFour.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFour.png)'})
arrowsOne.css({display: 'none'})
arrowsTwo.css({display: 'block'})
})
})
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>
`
$('body').append(html)
}
const infoOne = () => {
const html = `
<span style="position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">智能制造</span>
<span style="line-height: 0.8vw;position: absolute;top: 25%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">8条智能化生产线36台机器人配备MES系统实现8大系列208种产品的柔性化混流生产 </span>
<span style="line-height: 0.8vw;position: absolute;top: 55%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">日产能4200台单班定员162人人均效率13台/提升2.2</span>
<span style="line-height: 0.8vw;position: absolute;top: 75%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">打通O2O销售平台TMS物流系统实现用户的个性化定制</span>
`
$('#infoOne').append(html)
}
const infoTwo = () => {
const html = `
<span style="transform: translateX(-50%);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 9%;left: 50% ;color: rgba(255,255,255,1);font-size: 1.25vw;">冷柜行业第一个国家级智能制造示范项目</span>
`
$('#infoTwo').append(html)
}
const infoThree = () => {
const html = `
<span style=" overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">世界领先</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 30%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">大规模个性化定制冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 50%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">使用机器人最多的冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 70%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">人均效率最高的冷柜智能化工厂</span>
`
$('#infoThree').append(html)
arrowsTwo.css({display: 'none'})
}
if (data.five){
btnFive.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFiveClick.png)'})
if (data.now === 1){
deviceNameOneDiv.css({display: 'block'})
deviceNameTwoDiv.css({display: 'none'})
}
if (data.now === 2){
deviceNameOneDiv.css({display: 'none'})
deviceNameTwoDiv.css({display: 'block'})
}
}else{
btnFive.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFive.png)'})
deviceNameOneDiv.css({display: 'none'})
deviceNameTwoDiv.css({display: 'none'})
}
}

@ -1,117 +1,21 @@
$(() => {
moduleTitle()
safe('#safe')
// 公共请求地址
let url = '/broad/zhou'
// 轮询间隔时间
const INTERVAL = 30000
const orderDetailsTable = new AutoScrollTable(document.getElementById("IQC"), ["编号", "型号", "计划数量", "完成数量", "差异值"], {width: ['13%', '40%', null, null, '9%']}, 8)
//每日人力出勤轮询
autoUpdate("/broad/mtk/team6s ", INTERVAL, data => {
data.sort((a, b) => {
return b.teamNumber - a.teamNumber
})
singleVerticalBarChartTwo({
xName: data.map(val => val.teamName),
yData: data.map(val => val.teamNumber),
yImg: data.map(val => val.path),
}, document.getElementById("manpowerAttendance"))
})
// 三日订单执行情况
autoUpdate(url + "/selectOrderRateInfo", INTERVAL, data => {
let newData = []
data.forEach((val,index) => {
if (val.actual_number !== 0){
newData.push(data[index])
}
})
singleVerticalBarChart({
xName: newData.map(val => val.name_sub),
yData: newData.map(val => val.actual_number),
}, document.getElementById("productionEfficiency"), -20)
orderDetailsTable.loadData(data.map(value => [value.plan_code, value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number]), Object.keys(["编号", "型号", "计划数量", "完成数量", "差异值"]))
})
// autoUpdate(url + "/mtk_selectOrderInfoBy3dTatle", INTERVAL, data => {
// total(data.find(val => val.name === '入库订单统计').qty, '#total')
// Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips')
// })
autoUpdate(url+"/selectOrderRateInfoTatle", INTERVAL, data => {
Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips')
})
// 当日订单入库统计
autoUpdate(url + "/zhou_selectQaItemInfo", INTERVAL, data => {
let arr = [0, 0, 0, 0, 0, 0]
let yDataOne = [...(data.find(val => val.code == '内胆检漏')?.list.map(val => val.rate) || []), ...arr]
let yDataTwo = [...(data.find(val => val.code == '安全检测')?.list.map(val => val.rate) || []), ...arr]
let yDataThree = [...(data.find(val => val.code == '成品检漏')?.list.map(val => val.rate) || []), ...arr]
let yDataFour = [...(data.find(val => val.code == '测温性能')?.list.map(val => val.rate) || []), ...arr]
let yDataFive = [...(data.find(val => val.code == '成品外观')?.list.map(val => val.rate) || []), ...arr]
multipleBrokenLineAreaDiagramTwo(
{
xData: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
yDataOne: yDataOne,
yDataTwo: yDataTwo,
yDataThree: yDataThree,
yDataFour: yDataFour,
yDataFive: yDataFive,
yDataOneName: '内胆检漏',
yDataTwoName: '安全检测',
yDataThreeName: '成品检漏',
yDataFourName: '测温性能',
yDataFiveName: '成品外观',
}, document.getElementById("equipmentPower"))
// pieChart(data.map((val, index) => {
// if (index == 0 ) {
// return {
// name: val.type,
// value: val.qty,
// itemStyle: {
// color: 'red',
// }
// }
// }
// if (index == 1) {
// return {
// name: val.type,
// value: val.qty,
// itemStyle: {
// color: 'yellow',
// }
// }
// }
// return {
// name: val.type,
// value: val.qty,
// }
//
// }
// ), document.getElementById("equipmentPower"));
})
autoUpdate(url + "/selectProductInStore", INTERVAL, data => {
let list = data.map(val => val.list)
let yDataOne = []
let yDataTwo = []
list.forEach(val => {
yDataOne.push(val.find(val => val.name == '计划')?.qty || 0)
yDataTwo.push(val.find(val => val.name == '产量')?.qty || 0)
})
total(yDataTwo.reduce((val1,val2) => val1 + val2 , 0),'#total')
multipleVerticalBarChartTwo({
xName: data.map(val => val.code),
yDataOne: yDataOne,
yDataOneName: '计划',
yDataTwo: yDataTwo,
yDataTwoName: "产量",
}, document.getElementById("topLeft"), -20)
}, document.getElementById("satisfaction"), -20)
})
@ -149,23 +53,6 @@ const moduleTitle = () => {
$('body').append(html)
}
const safe = (el) => {
const html = `
<span style="position: absolute;top: 66%;left: 84%;white-space:nowrap;color: #CBE6F7;font-size: 1.3vw;font-weight:600;transform: translateX(-50%);letter-spacing: 0.3vw">${new Date().getFullYear().toString()}年连续安全生产天数</span>
<span style="position: absolute;top: 74%;left: 84%;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: 89%;left: 84%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜互联工厂</span>
`
$(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}&nbsp;&nbsp;完成数量${val2}&nbsp;&nbsp;清单率${val3}%</span>
`
$(el).html(html)
}
const total = (val1 = 0, el) => {
const html = `
<span style="position: absolute;top: 10%;left: 17.7%;color: #fff;font-size: 1vw;">合计${val1} </span>

@ -27,21 +27,46 @@
</head>
<style>
img
</style>
<body style="display:flex;">
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">澳柯玛冷柜智能互联工厂</span>
<!--按钮一-->
<div class="btnOne" id="btnOne"></div>
<div class="btnOneLeft" id="btnOneLeft"></div>
<div class="btnOneRight" id="btnOneRight"></div>
<!--按钮二-->
<div class="btnTwo" id="btnTwo"></div>
<div class="btnTwoLeft" id="btnTwoLeft"></div>
<div class="btnTwoRight" id="btnTwoRight"></div>
<!--按钮三-->
<div class="btnThreeLeft" id="btnThreeLeft"></div>
<div class="btnThreeRight" id="btnThreeRight"></div>
<!--按钮四-->
<div class="btnFourLeft" id="btnFourLeft"></div>
<div class="btnFourRight" id="btnFourRight"></div>
<!--按钮五-->
<div class="btnFiveLeft" id="btnFiveLeft"></div>
<div class="btnFiveRight" id="btnFiveRight"></div>
<!--工厂图-->
<div class="layerOne" id="layerOne"></div>
<div class="layerTwo" id="layerTwo"></div>
<!--介绍窗口-->
<div class='infoOne' id='infoOne'></div>
<div class='infoTwo' id='infoTwo'></div>
<div class='infoThree' id='infoThree'></div>
<div class='infoOne' id='infoOne'>
<span style="position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">智能制造</span>
<span style="line-height: 0.8vw;position: absolute;top: 25%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">8条智能化生产线36台机器人配备MES系统实现8大系列208种产品的柔性化混流生产。 </span>
<span style="line-height: 0.8vw;position: absolute;top: 55%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">日产能4200台单班定员162人人均效率13台/天提升2.2倍。</span>
<span style="line-height: 0.8vw;position: absolute;top: 75%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">打通O2O销售平台、TMS物流系统实现用户的个性化定制。</span>
</div>
<div class='infoTwo' id='infoTwo'>
<span style="transform: translateX(-50%);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 9%;left: 50% ;color: rgba(255,255,255,1);font-size: 1.25vw;">冷柜行业第一个国家级智能制造示范项目</span>
</div>
<div class='infoThree' id='infoThree'>
<span style=" overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">世界领先</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 30%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">大规模个性化定制冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 50%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">使用机器人最多的冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 70%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">人均效率最高的冷柜智能化工厂</span>
</div>
<!--箭头-->
<div class="arrowsOne" id="arrowsOne">
@ -150,6 +175,8 @@
<img alt="" src="../img/board/intelligentRefrigeratorInterconnectionFactory/arrows.gif"
style="width: 3vw;height: 1.4vh;position: absolute;top: 42.3%;left: 52.5%;object-fit: contain;transform: rotate(183deg);">
</div>
<div class="deviceNameOne" id="deviceNameOne"></div>
<div class="deviceNameTwo" id="deviceNameTwo"></div>
</body>
<script src="../../static/js/board/intelligentRefrigeratorInterconnectionFactory.js"
th:src="@{/js/board/intelligentRefrigeratorInterconnectionFactory.js}"></script>

@ -26,27 +26,10 @@
</head>
<body style="display:flex;">
<div id="safe"></div>
<div id="Tips"></div>
<div id="total"></div>
<div id="importData"></div>
<div id="top3Data"></div>
<!--每日人力出勤-->
<div class="manpowerAttendance" id="manpowerAttendance"></div>
<!--IQC-->
<div class="IQC" id="IQC"></div>
<!--生产效率-->
<div class="productionEfficiency" id="productionEfficiency"></div>
<!--设备功率-->
<div class="equipmentPower" id="equipmentPower"></div>
<!--设备功率-->
<div class="topLeft" id="topLeft"></div>
<!--用户满意度-->
<div class="satisfaction" id="satisfaction"></div>
</body>
<script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script>

Loading…
Cancel
Save