|
|
|
@ -5,6 +5,26 @@
|
|
|
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
|
|
|
{{ i }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title1">班组</div>
|
|
|
|
|
<div class="title2">上线数量</div>
|
|
|
|
|
|
|
|
|
|
<div class="nowClass">总装</div>
|
|
|
|
|
<div class="num">1122</div>
|
|
|
|
|
|
|
|
|
|
<div class="info1Title">产品条码</div>
|
|
|
|
|
<div class="info1">B23120783055009802101</div>
|
|
|
|
|
<div class="info2Title">扫描时间</div>
|
|
|
|
|
<div class="info2">2023/12/7 12:01:53</div>
|
|
|
|
|
<div class="info3Title">产品型号</div>
|
|
|
|
|
<div class="info3">发泡箱体,BCD-530WPG,标准白</div>
|
|
|
|
|
<div class="info4Title">订单编号</div>
|
|
|
|
|
<div class="info4">11232394</div>
|
|
|
|
|
<div class="info5Title">订单数量</div>
|
|
|
|
|
<div class="info5">300</div>
|
|
|
|
|
<div class="info6Title">上线数量</div>
|
|
|
|
|
<div class="info6">63</div>
|
|
|
|
|
<div class="info7Title">提示信息</div>
|
|
|
|
|
<div class="info7">扫描成功</div>
|
|
|
|
|
|
|
|
|
|
<div class="scrollTable">
|
|
|
|
|
<div style="background-color: #094170">
|
|
|
|
@ -74,9 +94,6 @@
|
|
|
|
|
<div class="chart2">
|
|
|
|
|
<Chart ref="chart2"></Chart>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart3">
|
|
|
|
|
<Chart ref="chart3"></Chart>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -95,27 +112,22 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
title: [
|
|
|
|
|
'工单计划',
|
|
|
|
|
'泡后库存',
|
|
|
|
|
'小时产量',
|
|
|
|
|
'库存统计',
|
|
|
|
|
'当日小时产量统计',
|
|
|
|
|
'当日型号产量统计',
|
|
|
|
|
'表格',
|
|
|
|
|
],
|
|
|
|
|
titlePosition: [
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 5.5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 55.4,
|
|
|
|
|
top: 31.3,
|
|
|
|
|
left: 5.5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.5,
|
|
|
|
|
left: 52.7
|
|
|
|
|
top: 31.3,
|
|
|
|
|
left: 52.8
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 55.4,
|
|
|
|
|
left: 52.7
|
|
|
|
|
top: 62.2,
|
|
|
|
|
left: 5.5
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
scrollTableOption: {
|
|
|
|
@ -285,75 +297,6 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// 坐标轴指示器,坐标轴触发有效
|
|
|
|
|
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: "0",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: "0",
|
|
|
|
|
top: 20,
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.chart3.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "数量",
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#0f8ad7",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#0b30d9",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.chart3.y.data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {}
|
|
|
|
@ -361,7 +304,7 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.app-container {
|
|
|
|
|
background-image: url("../../../assets/board/pourInto.jpg");
|
|
|
|
|
background-image: url("../../../assets/board/finalAssembly.jpg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
@ -392,10 +335,10 @@ export default {
|
|
|
|
|
|
|
|
|
|
.scrollTable {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15%;
|
|
|
|
|
left: 4%;
|
|
|
|
|
width: 45%;
|
|
|
|
|
height: 36%;
|
|
|
|
|
top: 66%;
|
|
|
|
|
left: 3.7%;
|
|
|
|
|
width: 92.5%;
|
|
|
|
|
height: 30%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -413,25 +356,198 @@ export default {
|
|
|
|
|
|
|
|
|
|
.chart1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 58.5%;
|
|
|
|
|
top: 34.5%;
|
|
|
|
|
left: 3.6%;
|
|
|
|
|
width: 45.5%;
|
|
|
|
|
height: 35%;
|
|
|
|
|
height: 22.5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15%;
|
|
|
|
|
top: 34.5%;
|
|
|
|
|
left: 51%;
|
|
|
|
|
width: 45.5%;
|
|
|
|
|
height: 35%;
|
|
|
|
|
height: 22.5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart3 {
|
|
|
|
|
.title1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 58.5%;
|
|
|
|
|
left: 51%;
|
|
|
|
|
width: 45.5%;
|
|
|
|
|
height: 35%;
|
|
|
|
|
top: 12.5%;
|
|
|
|
|
left: 12.7%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12.5%;
|
|
|
|
|
left: 87.2%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nowClass {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20%;
|
|
|
|
|
left: 12.7%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20%;
|
|
|
|
|
left: 87.2%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info1Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 9%;
|
|
|
|
|
left: 23.5%;;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 9%;
|
|
|
|
|
left: 32%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info2Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 9%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 9%;
|
|
|
|
|
left: 58.5%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info3Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 13.5%;
|
|
|
|
|
left: 23.5%;;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 13.5%;
|
|
|
|
|
left: 32%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info4Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 13.5%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info4 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 13.5%;
|
|
|
|
|
left: 58.5%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info5Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 18%;
|
|
|
|
|
left: 23.5%;;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info5 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 18%;
|
|
|
|
|
left: 32%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info6Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 18%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info6 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 18%;
|
|
|
|
|
left: 58.5%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info7Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 22.5%;
|
|
|
|
|
left: 23.5%;;
|
|
|
|
|
width: 8.5%;
|
|
|
|
|
font-size: 1.1vw;
|
|
|
|
|
color: #55c280;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info7 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 22.5%;
|
|
|
|
|
left: 32%;
|
|
|
|
|
width: 18%;
|
|
|
|
|
font-size: 1.2vw;
|
|
|
|
|
color: #d6eaed;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|