mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

产量和效率

Browse Source
This commit is contained in:
‘937886381’
2024-05-29 17:05:55 +08:00
parent 5c05e6c2e4 ab4d7a8e4b
commit dc1667cdb7
83 changed files with 17006 additions and 10610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

603
src/views/copilot/factoryData/components/ProdMonitor.vue
View File

@@ -1,272 +1,395 @@
<template>
<div class="prod-monitor">
<div class="fto-box">
<div class="icon">
<img
src="./../assets/images/fto.png"
alt=""
style="width: 2.1875vw; height: 2.2875vw"
/>
<div class="data">
<div class="fto-box">
<div class="icon">
<img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" />
</div>
<div class="middle-box">
<span class="type">玻璃类型</span>
<span class="type-name">FTO投入</span>
</div>
<div class="right-box">
<span class="type">投入数量</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
</div>
</div>
<div class="middle-box">
<span class="type">玻璃类型</span>
<span class="type-name">FTO投入</span>
</div>
<div class="right-box">
<span class="type">投入数量</span>
<span class="num">8391222</span>
</div>
</div>
<div class="std-box">
<div class="icon">
<img
src="./../assets/images/std.png"
alt=""
style="width: 2.1875vw; height: 2.1875vw"
/>
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">标准组检产量</span>
<div class="std-box">
<div class="icon">
<img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">标准组检产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
}}</span>
</div>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">740</span>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
</div>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">783</span>
<div class="chip-box">
<div class="icon">
<img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">芯片产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
}}</span>
</div>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">96%</span>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
</div>
</div>
</div>
</div>
<div class="bipv-box" v-if="showBipv">
<div class="icon">
<img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">BIPV产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
}}</span>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
</div>
</div>
</div>
</div>
</div>
<div class="chip-box">
<div class="icon">
<img
src="./../assets/images/chip.png"
alt=""
style="width: 2.1875vw; height: 2.1875vw"
/>
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">芯片产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">740</span>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">783</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">96%</span>
</div>
</div>
</div>
</div>
<div class="bipv-box">
<div class="icon">
<img
src="./../assets/images/bipv.png"
alt=""
style="width: 2.1875vw; height: 2.1875vw"
/>
</div>
<div class="middle-box">
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">BIPV产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">740</span>
</div>
</div>
</div>
<div class="right-box">
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">783</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">96%</span>
</div>
</div>
<div class="chart">
<div class="chart-title">
<span class="title">生产情况</span>
<span class="line"></span>
</div>
<barChartBase :than="than" :period="period" :data="data" ref="barChart" style="height: 0;flex:1"></barChartBase>
</div>
</div>
</template>
<script>
import barChartBase from './ChipOee'
export default {
name: "ProdMonitor",
components: {
barChartBase,
},
data() {
return {
bipvVis:false,
msgObj: {
stand: {},
chip: {},
bipv: {},
},
};
},
props: {
period: {
type: Number,
default: 1,
},
than: {
type: String,
default: '同比',
},
prodOutPut: {
type: Array,
default: [],
},
prodFto: {
type: Array,
default: [],
},
data: {
type: Object,
default: {},
},
showBipv: {
type: Boolean,
default:true,
}
},
watch: {
prodOutPut() {
this.makeData();
},
},
mounted() {
this.makeData();
},
methods: {
makeData() {
console.log('msgObj', this.msgObj);
this.msgObj.chip = {};
this.msgObj.stand = {};
this.msgObj.bipv = {};
if (this.prodOutPut.length > 0) {
this.prodOutPut.map((item) => {
if (item.glassType === 0) {
this.msgObj.chip = item;
} else if (item.glassType === 1) {
this.msgObj.stand = item;
} else if (item.glassType === 2) {
this.msgObj.bipv = item;
}
});
}
},
},
};
</script>
<style lang="scss" scoped>
.prod-monitor {
height: 100%;
display: flex;
gap: 6px;
flex-direction: column;
.fto-box,
.std-box,
.chip-box,
.bipv-box {
box-shadow: inset 0 0 12px 2px #fff3;
border-radius: 4px;
display: flex;
align-items: center;
.icon {
flex: 1;
text-align: center;
}
.middle-box {
flex: 2.086;
position: relative;
}
.right-box {
flex: 2.424;
position: relative;
}
.type {
display: inline-block;
font-size: 0.9375vw;
color: #6db6ff;
position: relative;
text-align: right;
padding-right: 0.417vw;
letter-spacing: 2px;
width: 6.25vw;
}
.type1 {
display: inline-block;
font-size: 0.9375vw;
color: #6db6ff;
position: relative;
text-align: right;
padding-right: 0.6vw;
width: 6.25vw;
padding-left: 1.6vw;
text-align: justify;
text-align-last: justify;
}
.type-name {
font-size: 1.042vw;
color: #fff;
position: relative;
text-align: left;
padding-left: 0.573vw;
}
.type-name::before {
content: "";
display: inline-block;
width: 1px;
height: 1.042vw;
border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1)
)
2 2;
position: absolute;
left: 0;
top: 4px;
}
.num {
font-size: 1.042vw;
color: #fff;
position: relative;
text-align: left;
padding-left: 0.573vw;
}
.num::before {
content: "";
display: inline-block;
width: 1px;
height: 1.042vw;
border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1)
)
2 2;
position: absolute;
left: 0;
top: 4px;
}
}
.fto-box {
.chart{
flex: 1;
.type::before {
content: "";
display: inline-block;
width: 1px;
height: 1.6146vw;
border: 1px solid;
border-image: linear-gradient(
135deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1),
rgba(31, 143, 255, 0)
)
2 2;
position: absolute;
left: 0;
top: -2px;
display: flex;
flex-direction: column;
position: relative;
// gap: 6px;
.chart-title{
margin-top: 5px;
// flex: 1;
// gap: 6px;
height: 1.5vw;
width: 100%;
display: flex;
align-items: center;
// flex-direction: column;
// flex-wrap: nowrap;
// justify-content: end
// margin-top: 10px;
.title{
// flex: 1;
font-weight: 400;
font-size: 24px;
// width: 5vw;
color: #FFFFFF;
line-height: 24px;
text-align: left;
font-style: normal;
display: inline-block;
}
.line{
flex: 1;
// width: 80%;
height: 1px; // display: inline-block;
border: 1px solid;
// display: inline-block;
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
backdrop-filter: blur(3px);
}
}
}
.std-box {
flex: 1.3;
}
.chip-box {
flex: 1.3;
}
.bipv-box {
flex: 1.3;
}
.std-box,
.chip-box,
.bipv-box {
.separate::before {
content: "";
display: inline-block;
width: 1px;
height: 3.125vw;
border: 1px solid;
border-image: linear-gradient(
135deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1),
rgba(31, 143, 255, 0)
)
2 2;
position: absolute;
left: 0;
top: -2px;
}
.data{
flex: 1;
display: flex;
gap: 6px;
flex-direction: column;
.fto-box,
.std-box,
.chip-box,
.bipv-box {
box-shadow: inset 0 0 12px 2px #fff3;
border-radius: 4px;
display: flex;
align-items: center;
.icon {
flex: 1;
text-align: center;
}
.middle-box {
flex: 2.086;
position: relative;
}
.right-box {
flex: 2.424;
position: relative;
}
.type {
display: inline-block;
font-size: 0.9375vw;
color: #6db6ff;
position: relative;
text-align: right;
padding-right: 0.417vw;
letter-spacing: 2px;
width: 6.25vw;
}
.type1 {
display: inline-block;
font-size: 0.9375vw;
color: #6db6ff;
position: relative;
text-align: right;
padding-right: 0.6vw;
width: 6.25vw;
padding-left: 1.6vw;
text-align: justify;
text-align-last: justify;
}
.type-name {
font-size: 1.042vw;
color: #fff;
position: relative;
text-align: left;
padding-left: 0.573vw;
}
.type-name::before {
content: "";
display: inline-block;
width: 1px;
height: 1.042vw;
border: 1px solid;
border-image: linear-gradient(180deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1)) 2 2;
position: absolute;
left: 0;
top: 4px;
}
.num {
font-size: 1.042vw;
color: #fff;
position: relative;
text-align: left;
padding-left: 0.573vw;
}
.num::before {
content: "";
display: inline-block;
width: 1px;
height: 1.042vw;
border: 1px solid;
border-image: linear-gradient(180deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1)) 2 2;
position: absolute;
left: 0;
top: 4px;
}
}
.fto-box {
flex: 1;
.type::before {
content: "";
display: inline-block;
width: 1px;
height: 1.6146vw;
border: 1px solid;
border-image: linear-gradient(135deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1),
rgba(31, 143, 255, 0)) 2 2;
position: absolute;
left: 0;
top: -2px;
}
}
.std-box {
flex: 1.3;
}
.chip-box {
flex: 1.3;
}
.bipv-box {
flex: 1.3;
}
.std-box,
.chip-box,
.bipv-box {
.separate::before {
content: "";
display: inline-block;
width: 1px;
height: 3.125vw;
border: 1px solid;
border-image: linear-gradient(135deg,
rgba(0, 176, 243, 0),
rgba(31, 143, 255, 1),
rgba(31, 143, 255, 0)) 2 2;
position: absolute;
left: 0;
top: -2px;
}
}
}
}
</style>