<template style = "width: 100%;height:100%">
|
<el-container class="outer">
|
<el-main >
|
|
<el-row type="flex" justify="center" align="middle">
|
<el-col :span="24">
|
<div style="text-align: center;font-size: 55px;padding: 20px;color:white">出库口数据指引</div>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="21" justify="center">
|
|
<el-col :span="6">
|
<!-- <div class="grid-content bg-purple title-div" v-for="(item, index) in showDatas" :key="index"> -->
|
<div style="color:#FF6600;font-weight:bold;margin-right:0px;margin-left:0px" class="grid-content bg-purple title-div">
|
1号出库口状态
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
装车车牌：
|
</div>
|
<div class="title-sub-dic-1">
|
{{ data_1.carPlate }}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
需要出库铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_1.totalNumber}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
已出铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_1.hadBeenOut}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
未出铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_1.retainOut}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
一号顶升机状态：
|
</div>
|
<div v-if="data_1.upStatus_1" class="title-sub-dic-1">
|
{{data_1.upStatus_1}}
|
</div>
|
<div v-else class="title-sub-dic-1">
|
{{data_1.upStatus_2}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
二号顶升机状态：
|
</div>
|
<div v-if="data_1.upStatus_2" class="title-sub-dic-1">
|
{{data_1.upStatus_1}}
|
</div>
|
<div v-else class="title-sub-dic-1">
|
{{data_1.upStatus_2}}
|
</div>
|
</div>
|
|
</div>
|
|
</el-col>
|
<el-col :span="0.7">
|
<div >
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div style="color:#FF6600;font-weight:bold;margin-right:0px" class="grid-content bg-purple title-div" >
|
2号出库口状态
|
<div class="forside">
|
<div class="title-sub-dic">
|
装车车牌：
|
</div>
|
<div class="title-sub-dic-1">
|
{{ data_2.carPlate }}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
需要出库铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_2.totalNumber}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
已出铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_2.hadBeenOut}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
未出铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_2.retainOut}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
一号顶升机状态：
|
</div>
|
<div v-if="data_2.upStatus_1" class="title-sub-dic-1">
|
{{data_2.upStatus_2}}
|
</div>
|
<div v-else class="title-sub-dic-1">
|
{{data_2.upStatus_2}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
二号顶升机状态：
|
</div>
|
<div v-if="data_2.upStatus_2" class="title-sub-dic-1">
|
{{data_2.upStatus_1}}
|
</div>
|
<div v-else class="title-sub-dic-1">
|
{{data_2.upStatus_2}}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="0.7">
|
<div >
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div style="color:#FF6600;font-weight:bold;margin-right:0px" class="grid-content bg-purple title-div">
|
3号出库口状态
|
<div class="forside">
|
<div class="title-sub-dic">
|
装车车牌：
|
</div>
|
<div class="title-sub-dic-1">
|
{{ data_3.carPlate }}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
需要出库铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_3.totalNumber}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
已出铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_3.hadBeenOut}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
未出铜剁数：
|
</div>
|
<div class="title-sub-dic-1">
|
{{data_3.retainOut}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
一号顶升机状态：
|
</div>
|
<div v-if="data_3.upStatus_1" class="title-sub-dic-1">
|
{{data_3.upStatus_1}}
|
</div>
|
<div v-else class="title-sub-dic-1">
|
{{data_3.upStatus_2}}
|
</div>
|
</div>
|
|
<div class="forside">
|
<div class="title-sub-dic">
|
二号顶升机状态：
|
</div>
|
<div v-if="data_3.upStatus_2" class="title-sub-dic-1">
|
{{data_3.upStatus_1}}
|
</div>
|
<div v-else class="title-sub-dic-1">
|
{{data_3.upStatus_2}}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
|
</el-row>
|
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
|
export default {
|
components: {},
|
data() {
|
return {
|
timer: '',
|
data_1:{
|
// carPlate:"湘A12345",
|
// totalNumber:13,
|
// hadBeenOut:5,
|
// retainOut:8,
|
// upStatus_1:true,
|
// upStatus_2:false
|
},
|
data_2:{
|
// carPlate:"湘HVM773",
|
// totalNumber:11,
|
// hadBeenOut:5,
|
// retainOut:6,
|
// upStatus_1:true,
|
// upStatus_2:true
|
},
|
data_3:{
|
// carPlate:"云G66666",
|
// totalNumber:12,
|
// hadBeenOut:10,
|
// retainOut:2,
|
// upStatus_1:false,
|
// upStatus_2:false
|
},
|
|
|
};
|
},
|
|
mounted() {
|
this.timer = setInterval(this.getShowData, 2000);
|
},
|
|
methods:{
|
getShowData() {
|
this.http.post("/api/VV_OutboundOrderInfo/GetOutBoundStationData","数据获取...").then(x=>{
|
|
if(x.status===true){
|
this.data_1 = x.data[0];
|
this.data_2 = x.data[1];
|
this.data_3 = x.data[2];
|
}
|
})
|
},
|
},
|
|
beforeUnmount(){
|
clearInterval(this.timer); // 清除定时器
|
this.timer = null;
|
},
|
|
};
|
</script>
|
|
|
|
|
<style>
|
|
.forside{
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.title-sub-dic{
|
margin-top: 40px;
|
margin-left: 5px;
|
text-align: left;
|
color: #444444;
|
font-weight:normal;
|
}
|
|
.title-sub-dic-1{
|
margin-top: 40px;
|
margin-left: 5px;
|
text-align: left;
|
color: #444444;
|
font-weight:bold;
|
}
|
|
.title-div{
|
padding: 20px;
|
text-align: center;
|
font-size: 25px;
|
height: 540px;
|
color: #303133;
|
border:5px dashed #cccccc
|
}
|
|
.outer {
|
background-color: #0066CC;
|
height: 100%;
|
width: 100%;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
.bg-purple-dark {
|
background: #f5f5f5;
|
}
|
.bg-purple {
|
background: #f5f5f5;
|
}
|
.bg-purple-light {
|
background: #f5f5f5;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
|
</style>
|
