415 lines
11 KiB
Vue
415 lines
11 KiB
Vue
<template>
|
|
<div class="prod-monitor">
|
|
|
|
<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.toLocaleString() : 0 }}</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>
|
|
<div>
|
|
<span class="type">良品数量</span>
|
|
<span class="type-name">{{
|
|
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<div class="separate">
|
|
<div>
|
|
<span class="type">生产数量</span>
|
|
<span class="num">{{
|
|
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="type1">良品率</span>
|
|
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span>
|
|
</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">{{
|
|
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<div class="separate">
|
|
<div>
|
|
<span class="type">生产数量</span>
|
|
<span class="num">{{
|
|
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="type1">良品率</span>
|
|
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bipv-box" v-if="companyId != 0">
|
|
<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.toLocaleString() : 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.toLocaleString() : 0
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="type1">良品率</span>
|
|
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div class="chart-title">
|
|
<span class="title">生产情况</span>
|
|
<div class="button-than" style="position: absolute;right: 0%;">
|
|
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
|
@click="() => $emit('update:than', i)" />
|
|
</div>
|
|
<!-- <span class="line"></span> -->
|
|
</div>
|
|
<barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
|
|
ref="barChart" style="height: 0;flex:1">
|
|
</barChartBase>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { number } from 'echarts';
|
|
import barChartBase from './ChipOee'
|
|
import CopilotButton from "./button.vue"
|
|
export default {
|
|
name: "ProdMonitor",
|
|
components: {
|
|
barChartBase,
|
|
CopilotButton
|
|
},
|
|
data() {
|
|
return {
|
|
bipvVis:false,
|
|
msgObj: {
|
|
stand: {},
|
|
chip: {},
|
|
bipv: {},
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
period: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
companyId: {
|
|
type: Number,
|
|
default:0
|
|
},
|
|
than: {
|
|
type: String,
|
|
},
|
|
than: {
|
|
type: String,
|
|
default: '同比',
|
|
},
|
|
prodOutPut: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
prodFto: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
factoryData: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
showBipv: {
|
|
type: Boolean,
|
|
default:true,
|
|
}
|
|
},
|
|
watch: {
|
|
prodOutPut() {
|
|
this.makeData();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.makeData();
|
|
this.$nextTick(() => {
|
|
let button = document.getElementsByClassName('button-than')
|
|
button[0].children[0].style.borderRadius = '4px 0 0 4px'
|
|
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
|
|
})
|
|
},
|
|
methods: {
|
|
makeData() {
|
|
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;
|
|
flex-direction: column;
|
|
.chart{
|
|
flex: 1.3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
// gap: 6px;
|
|
.chart-title{
|
|
margin-top: 20px;
|
|
// 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);
|
|
// }
|
|
}
|
|
}
|
|
.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: .5;
|
|
|
|
.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: .6;
|
|
}
|
|
|
|
.chip-box {
|
|
flex: .6;
|
|
}
|
|
|
|
.bipv-box {
|
|
flex: .6;
|
|
}
|
|
|
|
.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>
|