<template>
|
<div id="title">
|
<div id="bkuang" style="border-top: none">
|
|
<div class="skuang">
|
<div class="zhuname">入库8005站台</div>
|
<div class="zhankuang">
|
<div class="xname">放货完成(写):</div>
|
<div class="xzhi" :title="data.W_PutFinish5">{{ data.W_PutFinish5 }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">入库到位指令(读):</div>
|
<div class="xzhi" :title="data.R_ConveyArrivaled5">{{ data.R_ConveyArrivaled5 }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">到位托盘号(读):</div>
|
<div class="xzhi" :title="data.R_Barcode5">{{ data.R_Barcode5 }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">到位任务号(读):</div>
|
<div class="xzhi" :title="data.R_TaskNum5">{{ data.R_TaskNum5 }}</div>
|
</div>
|
</div>
|
|
<div class="skuang">
|
<div class="zhuname">出库8001站台</div>
|
<div class="zhankuang">
|
<div class="xname">放货完成(写):</div>
|
<div class="xzhi" :title="data.W_PutFinish1">{{ data.W_PutFinish1 }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否允许放货(读):</div>
|
<div class="xzhi" :title="data.R_IsCanPut">{{ data.R_IsCanPut }}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import { ref, nextTick } from "vue";
|
import { useStore } from "vuex";
|
import { onMounted } from "vue";
|
|
export default {
|
data() {
|
return {
|
xuan: 0
|
};
|
},
|
methods: {
|
},
|
setup() {
|
const store = useStore();
|
const data = ref({});
|
|
// 1. 定义普通字段的映射规则
|
const statusMap = {
|
|
};
|
|
// 2. 定义需要共用映射规则的字段列表和对应的映射规则
|
const booleanFields = [
|
"W_PutFinish5", "W_PutFinish1",
|
"R_IsCanPut", "R_ConveyArrivaled5",
|
];
|
const booleanMap = {
|
true: "是",
|
false: "否"
|
};
|
|
// 处理数据，先处理普通映射，再批量处理共用映射的字段
|
const processData = (rawData) => {
|
if (!rawData) return {};
|
const processed = { ...rawData };
|
|
// 处理普通字段映射
|
Object.keys(statusMap).forEach(key => {
|
if (processed.hasOwnProperty(key)) {
|
const map = statusMap[key];
|
processed[key] = map[processed[key]] || processed[key];
|
}
|
});
|
|
// 批量处理共用映射规则的字段
|
booleanFields.forEach(key => {
|
if (processed.hasOwnProperty(key)) {
|
processed[key] = booleanMap[processed[key]] || processed[key];
|
}
|
});
|
|
return processed;
|
};
|
|
onMounted(() => {
|
nextTick(() => {
|
setInterval(() => {
|
const rawData = store.state.homedata;
|
data.value = processData(rawData);
|
const xian = document.getElementsByClassName("xzhi");
|
for (let i = 0; i < xian.length; i++) {
|
if (xian[i].innerHTML === "是") {
|
xian[i].style.color = "yellow";
|
} else if (xian[i].innerHTML === "否") {
|
xian[i].style.color = "red";
|
}
|
}
|
});
|
});
|
});
|
|
return {
|
data,
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.ding {
|
float: left;
|
width: 20px;
|
height: 20px;
|
margin-top: 7px;
|
}
|
.yan {
|
color: white;
|
float: left;
|
font-size: 25px;
|
}
|
.dakuang {
|
width: 250px;
|
height: 50px;
|
position: absolute;
|
top: 150px;
|
left: 200px;
|
}
|
#xiugai {
|
width: 100px;
|
height: 30px;
|
float: left;
|
border-radius: 5px;
|
text-align: center;
|
line-height: 30px;
|
cursor: pointer;
|
border: 1px solid white;
|
color: white;
|
background: rgba(255, 255, 255, 0.5);
|
font-size: 25px;
|
position: absolute;
|
top: 150px;
|
left: 450px;
|
}
|
#xiugai:hover {
|
background: #f60;
|
}
|
#shu1,
|
#shu2 {
|
width: 200px;
|
height: 30px;
|
float: left;
|
margin-top: 0px;
|
margin-right: 0px;
|
border-radius: 5px;
|
border: 1px solid white;
|
}
|
#guan {
|
width: 40px;
|
height: 40px;
|
float: left;
|
font-size: 1.1cqw;
|
text-align: center;
|
line-height: 40px;
|
cursor: pointer;
|
margin-left: 560px;
|
color: white;
|
position: absolute;
|
}
|
#ti {
|
width: 600px;
|
height: 300px;
|
position: relative;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 10px;
|
top: 230px;
|
left: 35%;
|
display: none;
|
background-image: url("../../img/1.png");
|
background-repeat: no-repeat;
|
background-size: 170%;
|
background-position: -220px 0px;
|
}
|
.zhuname {
|
width: 100%;
|
height: 5vh;
|
float: left;
|
text-align: center;
|
line-height: 50px;
|
font-weight: 700;
|
font-size: 1.1cqw;
|
color: white;
|
}
|
.xname {
|
width: 70%;
|
height: 80px;
|
float: left;
|
line-height: 7vh;
|
font-size: 1.1cqw;
|
color: white;
|
}
|
.xzhi {
|
width: 30%;
|
height: 7vh;
|
float: left;
|
line-height: 50px;
|
font-size: 1.1cqw;
|
color: rgb(242, 242, 50);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.zhankuang {
|
width: 45%;
|
height: 3vh;
|
margin-top: 10px;
|
margin-left: 5%;
|
float: left;
|
}
|
#title {
|
float: left;
|
width: 95%;
|
height: 88vh;
|
margin-top: 40px;
|
margin-left: 3%;
|
background-image: url("../../img/1.png");
|
background-repeat: no-repeat;
|
background-size: 100%;
|
container-type: inline-size;
|
}
|
#bkuang {
|
width: 100%;
|
height: 55vh;
|
float: left;
|
}
|
.skuang {
|
width: 31%;
|
height: 55vh;
|
float: left;
|
border-top: none;
|
border-left: none;
|
border-bottom: none;
|
background: rgba(255, 255, 255, 0.2);
|
margin-left: 1.7%;
|
border-radius: 10px;
|
}
|
</style>
|
