265 lines
6.3 KiB
Vue
265 lines
6.3 KiB
Vue
<template>
|
||
<div class="dataBox">
|
||
<div class="side1"></div>
|
||
<div class="side2"></div>
|
||
<div class='titleBox'>
|
||
<svg-icon icon-class="energy" />
|
||
{{title}}
|
||
<span class='line1' style='left: 0px'></span>
|
||
<span class='line2' style='left: 0px'></span>
|
||
<span class='line2' style='right: 0px'></span>
|
||
<span class='line1' style='right: 0px'></span>
|
||
</div>
|
||
<span class='lt' v-if='position == "lt"'></span>
|
||
<span class='rt' v-if='position == "rt"'></span>
|
||
<span class='lb' v-if='position == "lb"'></span>
|
||
<span class='rb' v-if='position == "rb"'></span>
|
||
<div class="centerBox">
|
||
<div class="centerBoxItem1">
|
||
<span class='num'>{{msgData?.cut || '-'}}片</span>
|
||
<span class='name'>- 预计切割片数 -</span>
|
||
</div>
|
||
<div class="centerBoxItem1">
|
||
<span class='num'>{{msgData?.allRatio ? msgData?.allRatio*100:'-'}}%</span>
|
||
<span class='name'>- 综合面积良品率 -</span>
|
||
</div>
|
||
<div class="centerBoxItem2">
|
||
<span class='name'>掰边后片数：</span>
|
||
<span class='num'>{{msgData?.bai || '-'}}片</span>
|
||
</div>
|
||
<div class="centerBoxItem2">
|
||
<span class='name'>掰边后良品率：</span>
|
||
<span class='num'>{{msgData?.baiRatio ? msgData?.baiRatio*100 : '-'}}%</span>
|
||
</div>
|
||
<div class="centerBoxItem2">
|
||
<span class='name'>顶板后片数：</span>
|
||
<span class='num'>{{msgData?.ding || '-'}}片</span>
|
||
</div>
|
||
<div class="centerBoxItem2">
|
||
<span class='name'>顶板后良品率：</span>
|
||
<span class='num'>{{msgData?.dingRatio ? msgData?.dingRatio*100 : '-'}}%</span>
|
||
</div>
|
||
<div class="centerBoxItem2">
|
||
<span class='name'>下片片数：</span>
|
||
<span class='num'>{{msgData?.xia || '-'}}片</span>
|
||
</div>
|
||
<div class="centerBoxItem2">
|
||
<span class='name'>下片良品率：</span>
|
||
<span class='num'>{{msgData?.xiaRatio ? msgData?.xiaRatio*100 : '-'}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'DataBox',
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
position:{
|
||
type: String,
|
||
default: ''
|
||
},
|
||
msgData: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
created() {},
|
||
methods: {}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.dataBox {
|
||
width: 909px;
|
||
height: 430px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
backdrop-filter: blur(10px);
|
||
z-index: 0;
|
||
}
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
display: inline-block;
|
||
width: 909px;
|
||
height: 2px;
|
||
border-radius: 2px;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: radial-gradient(circle at center,
|
||
rgba(88, 194, 255, 1) 10%,
|
||
rgba(0, 176, 243, 0) 90%,
|
||
transparent);
|
||
}
|
||
.side1 {
|
||
content: "";
|
||
position: absolute;
|
||
display: inline-block;
|
||
height: 400px;
|
||
width: 2px;
|
||
border-radius: 2px;
|
||
top: 40px;
|
||
left: 0;
|
||
background: radial-gradient(circle at center,
|
||
rgba(88, 194, 255, 1) 10%,
|
||
rgba(0, 176, 243, 0) 80%,
|
||
transparent);
|
||
}
|
||
.side2 {
|
||
content: "";
|
||
position: absolute;
|
||
display: inline-block;
|
||
height: 400px;
|
||
width: 2px;
|
||
border-radius: 2px;
|
||
top: 40px;
|
||
right: 0;
|
||
background: radial-gradient(circle at center,
|
||
rgba(88, 194, 255, 1) 10%,
|
||
rgba(0, 176, 243, 0) 80%,
|
||
transparent);
|
||
}
|
||
|
||
.titleBox {
|
||
width: 100%;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
padding-left: 23px;
|
||
background-color: rgba(0, 106, 205, 0.22);
|
||
font-size: 22px;
|
||
color: #fff;
|
||
.line1 {
|
||
display: inline-block;
|
||
width: 2px;
|
||
height: 16px;
|
||
background-color: #0078E4;
|
||
position: absolute;
|
||
top: 0px;
|
||
}
|
||
.line2 {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 2px;
|
||
background-color: #0078E4;
|
||
position: absolute;
|
||
top: 0px;
|
||
}
|
||
}
|
||
.lt {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border: 10px solid transparent;
|
||
border-left-color: #1F8FFF;
|
||
border-top-color: #1F8FFF;
|
||
}
|
||
.rt {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border: 10px solid transparent;
|
||
border-right-color: #1F8FFF;
|
||
border-top-color: #1F8FFF;
|
||
}
|
||
.lb {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border: 10px solid transparent;
|
||
border-left-color: #1F8FFF;
|
||
border-bottom-color: #1F8FFF;
|
||
}
|
||
.rb {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border: 10px solid transparent;
|
||
border-right-color: #1F8FFF;
|
||
border-bottom-color: #1F8FFF;
|
||
}
|
||
.centerBox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-content: space-between;
|
||
padding: 20px 24px 35px 24px;
|
||
.centerBoxItem1 {
|
||
width: 426px;
|
||
height: 106px;
|
||
background: url(../../../../assets/img/cold-data-board-msg1.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 16px;
|
||
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
|
||
text-align: center;
|
||
.num {
|
||
font-family: '站酷庆科黄油体';
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-top:15px;
|
||
margin-bottom: 3px;
|
||
color: #48D6FF;
|
||
letter-spacing: 6px;
|
||
text-shadow: 1px 4px 2px #000000;
|
||
}
|
||
.name {
|
||
display: block;
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
color: rgba(255,255,255,0.9);
|
||
}
|
||
}
|
||
.centerBoxItem2 {
|
||
width: 426px;
|
||
height: 56px;
|
||
line-height: 56px;
|
||
background: url(../../../../assets/img/cold-data-board-msg2.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 16px;
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
.name {
|
||
display: inline-block;
|
||
text-align: right;
|
||
width: 213px;
|
||
color: rgba(255,255,255,0.9);
|
||
}
|
||
.num {
|
||
display: inline-block;
|
||
text-align: left;
|
||
width: 213px;
|
||
color: #15C1F2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dataBox > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
</style> |