tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增进待检颜色

Browse Source
This commit is contained in:
刘佳
2024-07-30 17:07:10 +08:00
parent 93d4deaa76
commit efbc6807a0
9 changed files with 611 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/yclView/index.vue
+172 -35
View File
@@ -1,58 +1,81 @@
<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, '1')" :key="ind" class="item-x "
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }">
<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>载具:LX001</div>
<div>物料:包装袋</div>
<div>数量:10</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.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, '2')" :key="ind" class="item-x"
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }">
<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.type == 1">载具:{{ it.carry_code }}</div>
<div v-if="it.type == 2">物料:{{ it.material_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.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']
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) {
@@ -80,27 +103,30 @@ export default {
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++) {
// 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 })
}
} else {
for (let i = 1; i < 3; i++) {
item.splice(57, 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
}
// 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
// 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 })
@@ -109,6 +135,46 @@ export default {
})
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 })
}
}
}
@@ -140,11 +206,11 @@ $sysColor: rgba(85, 110, 255, 0.9);
}
.item-x {
width: 48px;
height: 60px;
width: 51px;
height: 70px;
margin-right: 5px;
// margin-bottom: 5px;
color: rgba(0, 0, 0, .5);
color: rgba(0, 0, 0);
display: inline-grid;
position: relative;
border-radius: 8%;
@@ -158,7 +224,7 @@ $sysColor: rgba(85, 110, 255, 0.9);
// text-align: center;
line-height: 10px;
width: 100%;
font-size: 7px;
font-size: 8px;
// height: 100%;
// display: flex;
// justify-content: center;
@@ -208,7 +274,78 @@ $sysColor: rgba(85, 110, 255, 0.9);
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>