<template>
|
<div class="qhuan">
|
<el-button type="primary" :class="{ 'qh_box': true, 'selected': selected === '下料区' }"
|
v-on:click="selectss(0)">下料区</el-button>
|
<el-button type="primary" :class="{ 'qh_box': true, 'selected': selected === '库区' }"
|
v-on:click="selectss(1)">库区</el-button>
|
</div>
|
|
<!-- 下料区代码 -->
|
<div v-if="selected === '下料区'" style="margin-top: 30px;">
|
<centerLeft1 :dataList="dataxlist" :plcList_one="plcList_one" :plcList_two="plcList_two" :plcList_three="plcList_three" />
|
<div style="height: 50px;width: 100%;">
|
<div class="dd_div" :style="{ 'background-color': getBackgroundColor(item1.enable, item1.location_state) }">
|
<el-tooltip class="item" effect="dark" placement="left">
|
<template #content v-if="item1.quantity !== 0 && item1.tray_type !== ''">
|
<div>库位编号：{{ item1.stationCode }}</div>
|
<div v-if="item1.tray_type == 'SmallTray'">托盘类型：小托盘</div>
|
<div v-else>托盘类型：大托盘</div>
|
<div>托盘数量： {{ item1.quantity }}</div>
|
</template>
|
<template #content v-else>
|
<div>库位编号：{{ item1.stationCode }}</div>
|
<div>目前暂无叠盘数据</div>
|
</template>
|
<!-- <div >
|
</div> -->
|
<div class="v_dd" v-if="item1.location_state === 'Stroge'">
|
<img src="../assets/imgs/huojia.png" style="width: 100%;" />
|
</div>
|
<div class="v_dd" v-else></div>
|
</el-tooltip>
|
</div>
|
</div>
|
<div style="margin-left: 65px;">
|
<div class="table-container">
|
<div class="scrollable-table" >
|
<table class="one_tal">
|
<tr v-for="(item, k) in 2" :key="k">
|
<td v-for="items in filteredItems(ddataList, k + 1)" :key="items.stationCode"
|
:style="{ 'background-color': getBackgroundColor(items.enable, items.location_state) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content>
|
<div>库位编号：{{ items.stationCode }}</div>
|
<div v-if="items.tray_type=='SmallTray'">托盘类型：小托盘</div>
|
<div v-else>托盘类型：大托盘</div>
|
<div>数量：{{ items.quantity }}</div>
|
<div v-if="items.location_state === 'Stroge'">货位状态：有货</div>
|
<div v-if="items.location_state === 'Empty'">货位状态：无货</div>
|
</template>
|
<div style="height: 35px;writing-mode: vertical-lr;width: 35px;">
|
<img src="../assets/imgs/huojia.png" style="width: 100%;" v-if="items.location_state === 'Stroge'" />
|
</div>
|
</el-tooltip>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
<!--托盘叠放区-->
|
<div style="height: 50px;"></div>
|
</div>
|
<!-- 下料区代码 -->
|
|
|
<!-- 库区代码 -->
|
<div v-else-if="selected === '库区'" style="margin-top: 30px;margin-left: 30px;">
|
<centerLeft2 :dataList="datalist" />
|
</div>
|
<!-- 库区代码 -->
|
</template>
|
|
<script>
|
import axios from 'axios';
|
import centerLeft1 from '@/views/Homes/centerLeft1.vue';
|
import centerLeft2 from '@/views/Homes/centerLeft2.vue';
|
export default {
|
|
data() {
|
return {
|
selected: '下料区', // 默认选中上下料区
|
datalist: [],
|
dataxlist: [],
|
item1: [],
|
ddataList: [],
|
url: "http://192.168.12.101:8098/api/",
|
plcList_one:[],
|
plcList_two:[],
|
plcList_three:[],
|
};
|
},
|
components: {
|
centerLeft1,
|
centerLeft2
|
},
|
mounted() {
|
|
},
|
created() {
|
this.One_unit_plc();
|
this.Two_unit_plc();
|
this.Three_unit_plc();
|
this.selList();
|
this.selListxl();
|
|
setInterval(() => {
|
this.selList();
|
}, 60000);
|
|
setInterval(() => {
|
this.selListxl();
|
this.One_unit_plc();
|
this.Two_unit_plc();
|
this.Three_unit_plc();
|
}, 1000);
|
|
},
|
methods: {
|
openDialog() {
|
this.isModalVisible = true;
|
},
|
//切换
|
selectss(selvelue) {
|
if (selvelue == "0") {
|
this.selected = "下料区";
|
} else {
|
|
this.selected = "库区";
|
this.selList();
|
}
|
},
|
//获取库区的数据
|
selList() {
|
this.loading = true;
|
axios.post(this.url + "dt_stationinfo/dt_stationinfolist").then(x => {
|
this.datalist = x.data.data;
|
for (var i = 0; i < x.data.data[1].item1.length; i++) {
|
this.ddataList[i] = x.data.data[1].item1[i];
|
}
|
})
|
.catch(error => {
|
console.error('请求出错：', error);
|
});
|
},
|
//获取下料口的数据
|
selListxl() {
|
this.loading = true;
|
axios.post(this.url + "dt_stationinfo/pcs_dt_stationinfolist").then(x => {
|
this.dataxlist = x.data.data;
|
this.item1 = x.data.data[4].item1[0];
|
|
})
|
.catch(error => {
|
console.error('请求出错：', error);
|
});
|
},
|
//更改颜色
|
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';
|
}
|
}
|
},
|
//获取辊道线1单元上的数据
|
One_unit_plc(){
|
this.http.post('api/Readplc/One_unit_plc')
|
.then((response) => {
|
this.plcList_one=response;
|
|
})
|
.catch((error) => {
|
console.error('Error fetching current user info:', error);
|
});
|
},
|
//获取辊道线2单元上的数据
|
Two_unit_plc(){
|
this.http.post('api/Readplc/Two_unit_plc')
|
.then((response) => {
|
this.plcList_two=response;
|
})
|
.catch((error) => {
|
console.error('Error fetching current user info:', error);
|
});
|
},
|
//获取辊道线3单元上的数据
|
Three_unit_plc(){
|
this.http.post('api/Readplc/Three_unit_plc')
|
.then((response) => {
|
this.plcList_three=response;
|
})
|
.catch((error) => {
|
console.error('Error fetching current user info:', error);
|
});
|
}
|
|
},
|
computed: {
|
filteredItems() {
|
return (itemList, line) => {
|
return itemList.filter(item => item.line === line);
|
};
|
}
|
}
|
}
|
</script>
|
|
<style>
|
body {
|
background-image: url("../assets/imgs/pageBg.png");
|
}
|
|
.dd_div {
|
width: 57px;
|
height: 53px;
|
margin-left: 1300px;
|
margin-top: 70px;
|
}
|
|
.v_dd {
|
width: 57px;
|
height: 50px;
|
margin-top: 10px;
|
}
|
</style>
|
