<template>
|
<el-row :gutter="40" class="panel-group">
|
<el-card class="bottom-card">
|
<div slot="header" class="clearfix">
|
<span style="font-size: 20px;font-weight: bold">单日累计产量</span>
|
</div>
|
|
<div style="display: flex; margin-top: 20px; height: 80px;">
|
<div class="transition-box" style="background-color: limegreen">
|
<i class="el-icon-notebook-1"></i>
|
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
|
<div>
|
<span style="margin-left: 20px" class="nextLine">合箱上线</span>
|
<span class="nextLine">{{data1}}</span>
|
</div>
|
</div>
|
<div class="transition-box" style="background-color: orange">
|
<i class="el-icon-setting"></i>
|
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
|
<div>
|
<span style="margin-left: 20px" class="nextLine">合箱下线</span>
|
<span class="nextLine">{{data2}}</span>
|
</div>
|
|
</div>
|
<div class="transition-box" style="background-color: mediumpurple">
|
<i class="el-icon-s-unfold"></i>
|
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
|
<div>
|
<span style="margin-left: 20px">总装上线</span>
|
<span class="nextLine">{{data3}}</span>
|
</div>
|
</div>
|
<div class="transition-box" style="background-color: cornflowerblue">
|
<i class="el-icon-cpu"></i>
|
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
|
<div>
|
<span style="margin-left: 20px">总装下线</span>
|
<span class="nextLine">{{data4}}</span>
|
</div>
|
</div>
|
<div class="transition-box" style="background-color: green">
|
<i class="el-icon-upload2"></i>
|
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
|
<div>
|
<span style="margin-left: 20px">CVT上线</span>
|
<span class="nextLine">{{data5}}</span>
|
</div>
|
</div>
|
<div class="transition-box" style="background-color: darkslategray">
|
<i class="el-icon-finished"></i>
|
<el-divider direction="vertical" content-position="left" style="height: 20px"></el-divider>
|
<div>
|
<span style="margin-left: 20px">CVT下线</span>
|
<span class="nextLine">{{data6}}</span>
|
</div>
|
</div>
|
</div>
|
|
|
</el-card>
|
</el-row>
|
|
</template>
|
|
<script>
|
import CountTo from 'vue-count-to'
|
import { getProduceNumToday } from '@/api/main/da/passingStationCollection/passingStationCollection'
|
|
export default {
|
components: {
|
CountTo
|
},
|
data(){
|
return{
|
query1:'box_closing_online_time',
|
data1:'',
|
query2:'closing_box_offline_time',
|
data2:'',
|
query3:'final_assembly_launch_time',
|
data3:'',
|
query4:'final_assembly_offline_time',
|
data4:'',
|
query5:'cvt_launch_time',
|
data5:'',
|
query6:'cvt_offline_time',
|
data6:'',
|
}
|
},
|
methods: {
|
handleSetLineChartData(type) {
|
this.$emit('handleSetLineChartData', type)
|
},
|
getData1(){
|
getProduceNumToday({fieldName:this.query1}).then(response => {
|
this.data1 = response.data;
|
});
|
},
|
getData2(){
|
getProduceNumToday({fieldName:this.query2}).then(response => {
|
this.data2 = response.data;
|
});
|
},
|
getData3(){
|
getProduceNumToday({fieldName:this.query3}).then(response => {
|
this.data3 = response.data;
|
});
|
},
|
getData4(){
|
getProduceNumToday({fieldName:this.query4}).then(response => {
|
this.data4 = response.data;
|
});
|
},
|
getData5(){
|
getProduceNumToday({fieldName:this.query5}).then(response => {
|
this.data5 = response.data;
|
});
|
},
|
getData6(){
|
getProduceNumToday({fieldName:this.query6}).then(response => {
|
this.data6 = response.data;
|
});
|
}
|
},
|
mounted() {
|
this.getData1(),
|
this.getData2(),
|
this.getData3(),
|
this.getData4(),
|
this.getData5(),
|
this.getData6()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.transition-box {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
width: 200px;
|
height: 80px;
|
border-radius: 4px;
|
text-align: center;
|
color: #fff;
|
padding: 40px 20px;
|
box-sizing: border-box;
|
margin-right: 10px;
|
}
|
|
.bottom-card{
|
padding: 0px 10px 20px 10px;
|
height: auto;
|
width: 1292px;
|
margin-left: 20px;
|
justify-content: center;
|
column-width: max-content;
|
}
|
.el-icon-notebook-1{
|
font-size: 40px;
|
display: flex;
|
justify-content: left;
|
}
|
.el-icon-setting{
|
font-size: 40px;
|
display: flex;
|
justify-content: left;
|
}
|
.el-icon-s-unfold{
|
font-size: 40px;
|
display: flex;
|
justify-content: left;
|
}
|
.el-icon-cpu{
|
font-size: 40px;
|
display: flex;
|
justify-content: left;
|
}
|
.el-icon-upload2 {
|
font-size: 40px;
|
display: flex;
|
justify-content: left;
|
}
|
.el-icon-finished{
|
font-size: 40px;
|
display: flex;
|
justify-content: left;
|
}
|
.el-divider--vertical{
|
width:2px;
|
height:40px; //更改竖向分割线长度
|
vertical-align:middle;
|
position:relative;
|
}
|
.nextLine{
|
display: block;
|
margin-left: 20px;
|
}
|
|
|
</style>
|
