<template>
|
<div class="fixed-row">
|
<span style="margin-left: 40px;font-size: 20px;">
|
<el-button style="background-color: #409eff;color: #000;width: 70px;height: 50px;">有货</el-button>
|
<el-button style="background-color: lightgreen;color: #000;width: 70px;height: 50px;">空货位</el-button>
|
<el-button style="background-color: yellow;color: #000;width: 70px;height: 50px;">出入库占用</el-button>
|
<el-button style="background-color: red;color: #000;width: 70px;height: 50px;">异常</el-button>
|
<el-button style="background-color: #C0C4CC;color: #000;width: 70px;height: 50px;">禁用</el-button>
|
</span>
|
</div>
|
<div style="height: 60px;">
|
|
</div>
|
<div style="width: 1100px;">
|
<!--外协区-->
|
<div style="width: 100px;float: right;height: 180px;">
|
<div v-for="(items, inst) in dataList[0].item1" :key="inst">
|
<div>
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content
|
v-if="items.stationType !== '' && items.stationType !== null && items.bindSN !== null">
|
<div>库位编号：{{ items.stationCode }}</div>
|
<div>物料类型(图号)： {{ items.stationType }}</div>
|
<div>炉号： {{ items.heatNumber }}</div>
|
<div style="width: 76px;">车轮SN号：{{ items.bindSN }}</div>
|
<div>钢坯号：{{ items.billetID }}</div>
|
</template>
|
<template #content v-else>
|
<div>库位编号：{{ items.stationCode }}</div>
|
<div>目前暂无车轮信息</div>
|
|
</template>
|
<div class="w_div" :style="{ 'background-color': getBackgroundColor(items.enable, items.location_state) }">
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-for="(item, inst) in dataList" :key="inst" :style="{ 'margin-left': getmargin(inst) }" v-if="inst !=='1'">
|
<div class="table-container">
|
<div class="scrollable-table">
|
<table class="one_tal" >
|
<tr v-if="inst !== 1 && inst !== 0" v-for="(item, k) in dataList[inst].item2" :key="k">
|
<td v-for="items in filteredItems(dataList[inst].item1, k+1)" :key="items.stationCode"
|
:style="{ 'background-color': getBackgroundColor(items.enable,items.location_state) }">
|
<el-tooltip class="item" effect="dark" placement="right">
|
<template #content
|
v-if="items.stationType!=='' && items.stationType!==null && items.bindSN !== null">
|
<div>库位编号：{{ items.stationCode }}</div>
|
<div>物料类型(图号)： {{ items.stationType }}</div>
|
<div>炉号： {{ items.heatNumber }}</div>
|
<div style="width: 76px;">车轮SN号：{{ items.bindSN }}</div>
|
<div>钢坯号：{{ items.billetID }}</div>
|
</template>
|
<template #content v-else>
|
<div>库位编号：{{ items.stationCode }}</div>
|
<div>目前暂无车轮信息</div>
|
</template>
|
<div style="height: 20px;writing-mode: vertical-lr;" :style="{ 'width': getwidth(inst) }"></div>
|
</el-tooltip>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios';
|
|
export default {
|
props: {
|
dataList: {
|
type: Array,
|
required: true
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
};
|
},
|
methods: {
|
getmargin(inst){
|
if(inst =="2"){
|
return '190px';
|
}
|
},
|
getwidth(inst){
|
if(inst =="4"){
|
return '23px';
|
}else{
|
return '20px';
|
}
|
},
|
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';
|
}
|
}
|
|
}
|
},
|
mounted() {
|
},
|
computed: {
|
filteredItems() {
|
return (itemList, line) => {
|
return itemList.filter(item => item.line === line);
|
};
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.scrollable-table {
|
width: 100%;
|
}
|
|
.one_tal {
|
padding-right: 100px;
|
}
|
|
.one_tal tr {
|
margin-top: 5px;
|
margin-bottom: 5px;
|
}
|
.w_div{
|
height: 20px;
|
width: 20px;
|
margin-top: 4px;
|
}
|
.one_tal td {
|
background-color: rgb(36, 227, 241);
|
text-align: center;
|
|
}
|
|
.table-container::-webkit-scrollbar {
|
width: 1px;
|
height: 15px;
|
}
|
|
|
|
.fixed-row {
|
position: fixed;
|
width: 100%;
|
|
z-index: 3;
|
}
|
</style>
|
