<template>
|
<div class="container">
|
|
|
<div style="margin-top: -6px;">
|
<!--车间之下的辊道线-->
|
<!-- <div style="margin-top: -30px;">
|
<div class="box" >
|
<div v-for="items in plcList_one.section_fourteen" class="box_sto"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_sto_dt">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
|
</div> -->
|
<!--车间之下的辊道线-->
|
|
<!--下车间中间辊道-->
|
<div style="margin-top: -124px;margin-right: 30px;">
|
|
<div class="box" style="height: 66px;display: flex;width: 350px;">
|
<div v-for="items in plcList_one.section_sixteen" class="box_sto2"
|
:style="{ 'background-color': getBackgroundColor2(items.r_wheel_SN) }">
|
<el-tooltip class="item" effect="dark" placement="left">
|
<template #content v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<div>r_wheel_SN：{{ items.r_wheel_SN }}</div>
|
<div>r_wheel_type：{{ items.r_wheel_type }}</div>
|
<div>r_part_status：{{ items.r_part_status }}</div>
|
<div>r_part_process： {{ items.r_part_process }}</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<template #content v-else>
|
<div>目前暂无车轮信息</div>
|
<div>stackerNo:{{ items.stackerNo }}</div>
|
</template>
|
<div class="box_sto_dt">
|
<div class="quan_div" v-if="items.r_wheel_SN != '' && items.r_wheel_SN != null">
|
<img src="../../../assets/imgs/pcs_lun.png" style="width: 100%;">
|
</div>
|
<div v-else>{{ items.stackerNo }}</div>
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<!--下车间中间辊道-->
|
</div>
|
</div>
|
|
|
</template>
|
|
<script>
|
import axios from 'axios';
|
|
export default {
|
props: {
|
dataList: {
|
type: Array,
|
required: true
|
},
|
plcList_one: {
|
type: Array,
|
required: true
|
}
|
},
|
data() {
|
return {
|
isModalVisible: false,
|
isModalVisible2: false,
|
isModalVisible3: false,
|
dataFList: []
|
};
|
},
|
mounted() {
|
},
|
methods: {
|
open(staname) {
|
this.http.get('api/Readplc/Four_unit_plc3?staname=' + staname).then(x => {
|
this.dataFList = x;
|
this.isModalVisible = true;
|
})
|
.catch(error => {
|
console.error('请求出错：', error);
|
});
|
},
|
getBackgroundColor4(vk_state){
|
if(vk_state==1){
|
return 'lightgreen';
|
}else if(vk_state==2){
|
return '#3c3ca5';
|
}else if(vk_state>=10 && vk_state<=20){
|
return '#cccc33';
|
}else if(vk_state>20){
|
return '#d53d3d';
|
}else{
|
return 'rgb(195 176 176)';
|
}
|
},
|
getBackgroundColor(enable, locationState) {
|
if (enable == '0') {
|
return '#C0C4CC';
|
}
|
else {
|
switch (locationState) {
|
case 'Stroge':
|
return '#409eff';
|
case 'Empty':
|
return 'lightgreen';
|
case 'InBusy':
|
return 'yellow';
|
case 'OutBusy':
|
return 'yellow';
|
case 'Busy':
|
return 'yellow';
|
case 'Abnormal':
|
return 'red';
|
case 'Abnormal':
|
return 'yellow';
|
default:
|
return 'transparent';
|
}
|
}
|
|
},
|
getBackgroundColor2(r_wheel_SN) {
|
if (r_wheel_SN != '') {
|
return 'lightgreen';
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.contents {
|
display: flex;
|
align-items: flex-end;
|
}
|
|
|
.box {
|
background-color: rgb(129, 179, 182);
|
width: 69px;
|
margin-left: 10px;
|
margin-left: 3px;
|
color: rgb(255, 255, 255);
|
font-size: 16px;
|
}
|
|
.box_sto {
|
width: 100%;
|
border: 1px solid #000000;
|
height: 45px;
|
background-image: url(../../../assets/lines.png);
|
background-size: 100%;
|
margin-top: 6px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.div_cl {
|
width: 30px;
|
height: 25px;
|
float: right;
|
background-color: greenyellow;
|
text-align: center;
|
padding-top: 5px;
|
}
|
|
.div_inp{
|
margin-left: 40px;
|
}
|
.div_cl2 {
|
width: 30px;
|
height: 25px;
|
float: right;
|
background-color: darkgrey;
|
text-align: center;
|
padding-top: 5px;
|
}
|
.box_sto2 {
|
width: 67px;
|
border: 1px solid #000000;
|
height: 65px;
|
background-image: url(../../../assets/linesd.png);
|
background-size: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-left: 4px;
|
}
|
|
.box_sto_dt {
|
height: 17px;
|
text-align: center;
|
line-height: 17px;
|
margin-bottom: 3px;
|
}
|
|
|
.quan_div {
|
border: 1px solid #000000;
|
border-radius: 50px;
|
width: 30px;
|
height: 30px;
|
background-color: #818181;
|
margin-top: -3px;
|
}
|
|
.box2_sto_baox {
|
width: 137px;
|
height: 45px;
|
background-color: rgb(129, 179, 182);
|
margin-left: 5px;
|
border-radius: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 18px;
|
padding: 5px;
|
text-align: center
|
}
|
|
.box_stoy {
|
width: 35px;
|
height: 35px;
|
background-color: rgb(129, 179, 182);
|
margin-left: 4px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center
|
}
|
|
.box2_sto_yj {
|
width: 70px;
|
height: 70px;
|
margin-left: 5px;
|
border-radius: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 18px;
|
padding: 5px;
|
text-align: center;
|
background-color: rgb(129, 179, 182);
|
}
|
|
.box2_sto_yj2 {
|
width: 50px;
|
height: 50px;
|
|
margin-left: 5px;
|
border-radius: 10px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 18px;
|
padding: 5px;
|
}
|
|
.x_div {
|
border: 1px solid #757373;
|
width: 57px;
|
height: 52px;
|
}
|
|
.jie_div {
|
|
width: 57px;
|
height: 52px;
|
color: #ffffff;
|
}
|
|
.w_div {
|
height: 43px;
|
width: 40px;
|
margin: 5px auto;
|
}
|
|
</style>
|
