351 lines
11 KiB
Vue
351 lines
11 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="loadbox" v-if="loadboxV">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<div v-for="(item, index) of data" :key="index" class="box-x">
|
||
<div class="index">{{ ab[index] }}</div>
|
||
<div>
|
||
<div class="item-top">
|
||
<div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x "
|
||
:class="`type${it.status}`"
|
||
:style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
|
||
@mouseleave="mouseleave(it, $event)">
|
||
<div class="lists">
|
||
<div>{{ it.location_code }}</div>
|
||
<!-- <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div> -->
|
||
<div v-if="it.type == 2">{{ it.material_code }}</div>
|
||
<div v-if="it.type == 2">{{ it.material_name }}</div>
|
||
<div v-if="it.type == 2">数量:{{ it.num }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-bo">
|
||
<div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x"
|
||
:class="`type${it.status}`"
|
||
:style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
|
||
@mouseleave="mouseleave(it, $event)">
|
||
<div class="lists">
|
||
<div>{{ it.location_code }}</div>
|
||
<div v-if="it.type == 2">{{ it.material_name }}</div>
|
||
<div v-if="it.type == 2">{{ it.material_specification }}</div>
|
||
<div v-if="it.type == 2">{{ it.code_batch }}</div>
|
||
<div v-if="it.type == 2">数量:{{ it.num }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="float" ref="float">
|
||
<div>库位编号：{{ this.mouseInfo.location_code }}</div>
|
||
<div>物料编码：{{ this.mouseInfo.material_code }}</div>
|
||
<div>物料批次：{{ this.mouseInfo.code_batch }}</div>
|
||
<div>数量：{{ this.mouseInfo.qty }}</div>
|
||
<div>载具编号：{{ this.mouseInfo.carry_code }}</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 0 空库（包括已锁定）
|
||
// 1 空载具码垛
|
||
// 2 合格品
|
||
// 3 待检
|
||
// 4 让步接受
|
||
// 5 不合格
|
||
import { getYclList } from '@/api/index'
|
||
export default {
|
||
name: 'yclView',
|
||
data() {
|
||
return {
|
||
data: [],
|
||
ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'],
|
||
mouseInfo: {},
|
||
loadboxV: false
|
||
}
|
||
},
|
||
created() {
|
||
this.getYclList()
|
||
this.timer = setInterval(this.getYclListLoad, 30000);
|
||
},
|
||
mounted() {
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer);
|
||
},
|
||
methods: {
|
||
filterData(arr, key) {
|
||
return arr.filter(item => { return item.layers == key })
|
||
},
|
||
getYclList() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
getYclList().then(res => {
|
||
console.log(res);
|
||
this.data = res.data.data || []
|
||
this.data.forEach((item, index) => {
|
||
const arr = [1]
|
||
const arrone = [3, 7, 10, 13, 14, 17]
|
||
// const obj = { type: 1, location_code: '', layer: '1' }
|
||
|
||
if (arrone.some(it => { return it == index + 1 })) {
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(8, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(24, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
// if (index + 1 !== 17) {
|
||
// for (let i = 1; i < 3; i++) {
|
||
// item.splice(50, 0, { type: 4, location_code: '', layers: i })
|
||
// }
|
||
// } else {
|
||
// for (let i = 1; i < 3; i++) {
|
||
// item.splice(50, 0, { type: 4, location_code: '', layers: i })
|
||
// }
|
||
// }
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(50, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
|
||
}
|
||
if (arr.some(it => { return it !== index + 1 })) {
|
||
// let fig = false
|
||
// if (index + 1 == 18) {
|
||
// for (let i = 1; i < 3; i++) {
|
||
// item.splice(37, 0, { type: 4, location_code: '', layers: i })
|
||
// }
|
||
// fig = true
|
||
// }
|
||
for (let i = 1; i < 3; i++) {
|
||
// if (fig) break
|
||
item.splice(36, 0, { type: 4, location_code: '', layers: i })
|
||
// item.splice(36, 0, { type: 4, location_code: '', layers: i })
|
||
// item.splice(36, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
}
|
||
})
|
||
console.log(this.data, 99);
|
||
}).finally(e => { loading.close(); })
|
||
},
|
||
mouseenter(it, e) {
|
||
// this.$refs.float.style.display = "block"
|
||
// this.$refs.float.style.left = e.clientX / document.body.clientWidth * 100 + "%"
|
||
// this.$refs.float.style.top = e.clientY / document.body.clientHeight * 100 + "%"
|
||
// this.mouseInfo = it
|
||
// console.log(it);
|
||
},
|
||
mouseleave(it, e) {
|
||
// this.$refs.float.style.display = "none"
|
||
},
|
||
// 定时器重复加载
|
||
getYclListLoad() {
|
||
this.loadboxV = true
|
||
getYclList().then(res => {
|
||
console.log(res);
|
||
this.data = res.data.data || []
|
||
this.data.forEach((item, index) => {
|
||
const arr = [1]
|
||
const arrone = [3, 7, 10, 13, 14, 17]
|
||
if (arrone.some(it => { return it == index + 1 })) {
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(8, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(24, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(50, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
|
||
}
|
||
if (arr.some(it => { return it !== index + 1 })) {
|
||
for (let i = 1; i < 3; i++) {
|
||
item.splice(36, 0, { type: 4, location_code: '', layers: i })
|
||
}
|
||
}
|
||
})
|
||
console.log(this.data, 99);
|
||
}).finally(e => { this.loadboxV = false })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$sysColor: rgba(85, 110, 255, 0.9);
|
||
|
||
|
||
@import '@/assets/scss/tianyi.scss';
|
||
|
||
.box {
|
||
width: 100%;
|
||
height: 860px;
|
||
margin: 30px;
|
||
overflow-y: scroll;
|
||
// margin-bottom: 20px;
|
||
|
||
.box-x {
|
||
display: flex;
|
||
margin-bottom: 40px;
|
||
|
||
.index {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 30px;
|
||
width: 10px;
|
||
}
|
||
}
|
||
|
||
.item-x {
|
||
width: 51px;
|
||
height: 70px;
|
||
margin-right: 5px;
|
||
// margin-bottom: 5px;
|
||
color: rgba(0, 0, 0);
|
||
display: inline-grid;
|
||
position: relative;
|
||
border-radius: 8%;
|
||
|
||
// div {
|
||
// text-align: center;
|
||
// line-height: 18px;
|
||
// // display: inline-grid;
|
||
// }
|
||
.lists {
|
||
// text-align: center;
|
||
line-height: 10px;
|
||
width: 100%;
|
||
font-size: 8px;
|
||
// height: 100%;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// flex-direction: column;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
div {
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-top {
|
||
border-bottom: 2px solid $sysColor;
|
||
border-left: 2px solid $sysColor;
|
||
border-right: 2px solid $sysColor;
|
||
// padding-bottom: 5px;
|
||
padding-left: 5px;
|
||
|
||
// margin-bottom: 5px;
|
||
// div {
|
||
// position: relative;
|
||
// }
|
||
|
||
// div:nth-child(18):before {
|
||
// width: 45px;
|
||
// height: 125px;
|
||
// content: "";
|
||
// border: solid 2px rgba(85, 110, 255, 0.9);
|
||
// padding: 2px;
|
||
// margin: 0 10px 0 0;
|
||
// position: absolute;
|
||
// top: 110%;
|
||
// left: 160%;
|
||
// transform: translate(-50%, -50%);
|
||
// }
|
||
|
||
}
|
||
|
||
.item-bo {
|
||
border-left: 2px solid $sysColor;
|
||
border-right: 2px solid $sysColor;
|
||
padding-top: 5px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.float {
|
||
width: 220px;
|
||
// height: 240px;
|
||
background-color: antiquewhite;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
// background-color: rgb(44, 43, 43);
|
||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.5)66%, rgba(0, 0, 0, 0)99%);
|
||
color: #fff;
|
||
// text-align: center;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
}
|
||
|
||
// 加载动画
|
||
.loadbox {
|
||
position: relative;
|
||
width: 90px;
|
||
height: 50px;
|
||
// margin: 50px auto;
|
||
position: fixed;
|
||
top: 40px;
|
||
right: 20px;
|
||
}
|
||
|
||
.loadbox span {
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #3498db;
|
||
opacity: 0.5;
|
||
border-radius: 100%;
|
||
animation: anim 1s infinite ease-in-out;
|
||
}
|
||
|
||
.loadbox> :nth-child(2) {
|
||
left: 20px;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
.loadbox> :nth-child(3) {
|
||
left: 40px;
|
||
animation-delay: 0.4s;
|
||
}
|
||
|
||
.loadbox> :nth-child(4) {
|
||
left: 60px;
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
.loadbox> :nth-child(5) {
|
||
left: 80px;
|
||
animation-delay: 0.8s;
|
||
}
|
||
|
||
@keyframes anim {
|
||
0% {
|
||
opacity: 0.3;
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: translateY(-10px);
|
||
background: #64dbe3;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0.3;
|
||
transform: translateY(0px);
|
||
}
|
||
}
|
||
}
|
||
</style> |