<template>
|
<div style="width: 100%;height: 425px;background-color: #fff;">
|
|
<div class="grid-container">
|
<div v-for="(item, index) in gridItems.slice(104, 212)" :key="index" class="grid-item" :style="{ 'background-color': GetBgColor(item) }">
|
</div>
|
</div>
|
|
|
<div style="border: 1px solid #fff;width: 100%;height: 85px;background-color: #000;">
|
<div :style="{
|
background: plcData ? '#228B22' : '#00ffff',
|
transition: 'background 3s ease-in-out',
|
width: '10%',
|
height: '70px',
|
marginTop: '7px',
|
transition: 'margin-left 10s ease', // 添加动画效果，平滑过渡
|
marginLeft: plcData ? '85%' : '1%', // 计算margin-left，根据ddjSC值控制位置
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
borderRadius: '10px'
|
}"
|
:class="{ 'moving': plcData }">
|
<img src="../assets/ddj.png" style="height: 55px;" />
|
</div>
|
</div>
|
|
|
<div class="grid-container">
|
<div v-for="(item, index) in gridItems.slice(0, 104)" :key="index" class="grid-item" :style="{ 'background-color': GetBgColor(item) }">
|
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import axios from 'axios';
|
|
export default {
|
mixins: [drawMixin],
|
data() {
|
return {
|
gridItems: [], // 初始化为空数组
|
plcData:false,
|
infoMsg: [
|
{ bgcolor: "", msg: "空货位", state: "0" },
|
{ bgcolor: "#ff0", msg: "出入库锁定", state: "1" },
|
{ bgcolor: "orange", msg: "有货", state: "2" },
|
{ bgcolor: "#4C6E91", msg: "空托锁定", state: "98" },
|
{ bgcolor: "#76D7C4", msg: "空托盘", state: "99" },
|
{ bgcolor: "#FF0000", msg: "禁用", state: "100" }
|
],
|
}
|
},
|
computed: {
|
|
},
|
mounted() {
|
this.loadLocalData();
|
//this.loadLocalSC();
|
this.interval2 = setInterval(() => {
|
this.loadLocalData();
|
|
}, 2000);
|
// this.interval = setInterval(() => {
|
// this.loadLocalSC();
|
// }, 20000);
|
|
},
|
beforeDestroy() {
|
clearInterval(this.interval2);
|
clearInterval(this.interval);
|
},
|
methods: {
|
GetBgColor(col) {
|
let bgColor = "#b7ba6b";
|
// 优先显示禁用状态
|
if (col.location_lock) {
|
this.infoMsg.forEach((el) => {
|
if (el.state == "100") {
|
bgColor = el.bgcolor;
|
}
|
});
|
} else {
|
this.infoMsg.forEach((el) => {
|
if (el.state == col.location_state) {
|
bgColor = el.bgcolor;
|
}
|
});
|
}
|
return bgColor;
|
},
|
loadLocalData() {
|
axios.post("http://127.0.0.1:9290/api/LocationInfo/GetLocationStatu2").then((x) => {
|
this.gridItems = x.data;
|
})
|
},
|
loadLocalSC() {
|
axios.post("http://127.0.0.1:9291/api/Task/EquipmentInformationsc").then((res) => {
|
this.plcData = res.data;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '../assets/scss/index.scss';
|
|
/* 添加渐现动画 */
|
@keyframes move {
|
0% {
|
margin-left: 1%;
|
}
|
50% {
|
margin-left: 86%;
|
}
|
100% {
|
margin-left: 1%;
|
}
|
}
|
|
.moving {
|
animation: move 14s infinite ease-in-out;
|
}
|
|
.scroll-container {
|
width: 85%;
|
height: 95px;
|
margin: 5px auto;
|
border: 1px solid #fff;
|
overflow-y: auto;
|
/* 添加垂直滚动条 */
|
display: flex;
|
flex-direction: column;
|
/* 垂直排列子元素 */
|
}
|
|
.scroll-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 95px;
|
border-bottom: 1px solid #ddd;
|
background-color: aqua;
|
}
|
|
.scroll-item img {
|
height: 70%;
|
margin-right: 10px;
|
}
|
|
.scroll-item p {
|
margin: 0;
|
}
|
</style>
|
