<template>
|
<div>
|
<!-- height:40px -->
|
<div class="title">库位平面图</div>
|
|
<!-- <div>只显示一个区域的一个堆垛机对应的状态</div> -->
|
<div class="main" :style="{ height: mian_height }">
|
<!-- 平面图显示区域 -->
|
<div class="right">
|
<div v-for="layer in locationData" :key="layer.index">
|
<div class="row_tip">第{{ layer.index }}层</div>
|
<div class="row" v-for="row in layer.rows" :key="row.index">
|
<el-tooltip
|
v-for="col in row.cols"
|
:key="col.column"
|
effect="dark"
|
:content="getTooltipContent(col)"
|
placement="top"
|
:show-after="200"
|
:hide-after="0"
|
><div
|
class="item"
|
:style="{ 'background-color': GetBgColor(col) }"
|
>
|
{{ row.index }}-{{ col.column }}-{{ layer.index }}
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
|
<!-- 选择提示区域 -->
|
<div class="left">
|
<!-- <div>区域：</div>
|
<el-select
|
size="mini"
|
filterable
|
v-model="Area.shelf_code"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in slectData"
|
:value="item.shelf_code"
|
:label="item.house_name"
|
:key="item.house_name"
|
></el-option>
|
</el-select> -->
|
<!-- <div class="tipText">堆垛机：</div>
|
<el-select
|
size="mini"
|
clearable
|
filterable
|
@change="SCChange"
|
v-model="Area.tunnel"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in scList"
|
:value="item"
|
:label="item"
|
:key="item"
|
></el-option>
|
</el-select> -->
|
<!-- <div class="tipText">层：</div>
|
<el-select
|
size="mini"
|
clearable
|
filterable
|
@change="SCChange"
|
v-model="Area.layer"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in layers"
|
:value="item"
|
:label="item"
|
:key="item"
|
></el-option>
|
</el-select> -->
|
<br />
|
<ElButton type="success" class="btn" @click="GetViewData"
|
>刷新</ElButton
|
>
|
|
<div style="margin-top: 80px">
|
<div>说明</div>
|
<div v-for="item in infoMsg" :key="item.bgcolor">
|
<div class="infoMsg" :style="{ 'background-color': item.bgcolor }">
|
{{ item.msg }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ElButton } from "element-plus";
|
|
export default {
|
data() {
|
return {
|
slectData: [],
|
scList: [],
|
layers: [],
|
Area: { house_name: "", tunnel: "", shelf_code: "" },
|
mian_height: "",
|
infoMsg: [
|
{ bgcolor: "lightgreen", msg: "空货位", state: 0 },
|
{ bgcolor: "orange", msg: "有货", state: "Stored" },
|
{ bgcolor: "#2BB3D5", msg: "执行中", state: "InAssigned" },
|
{ bgcolor: "#ccc", msg: "禁用", state: "Lock" },
|
{ bgcolor: "red", msg: "异常", state: "error" },
|
{ bgcolor: "#b7ba6b", msg: "空托", state: 99 },
|
],
|
locationData: [],
|
};
|
},
|
computed: {
|
GetBgColor() {
|
return (col) => {
|
var bgColor = "#b7ba6b";
|
//优先显示禁用状态
|
if (col.enalbeStatus == 3) {
|
this.infoMsg.forEach((el) => {
|
if (el.state == "Lock") {
|
bgColor = el.bgcolor;
|
}
|
});
|
} else {
|
this.infoMsg.forEach((el) => {
|
if (
|
col.locationStatus == 4 ||
|
col.locationStatus == 6 ||
|
col.locationStatus == 7
|
) {
|
if (el.state == "InAssigned") {
|
bgColor = el.bgcolor;
|
}
|
} else if (col.locationStatus == 2 || col.locationStatus == 3) {
|
if (el.state == "Stored") {
|
bgColor = el.bgcolor;
|
}
|
} else if (el.state == col.locationStatus) {
|
bgColor = el.bgcolor;
|
}
|
});
|
}
|
return bgColor;
|
};
|
},
|
},
|
watch: {
|
//切换库区
|
"Area.shelf_code"(newValue, oldValue) {
|
this.scList = [];
|
this.layers = [];
|
this.slectData.forEach((e) => {
|
if (e.areaName == newValue) {
|
this.Area.tunnel = e.tunnel[0];
|
this.scList = e.tunnel;
|
this.Area.layer = "第" + e.layers[0] + "层";
|
this.layers = e.layers;
|
}
|
});
|
this.GetViewData();
|
},
|
},
|
methods: {
|
getTooltipContent(col) {
|
return [
|
`状态: ${this.getStatusText(col.locationStatus)}`,
|
`启用状态: ${this.getEnableStatusText(col.enalbeStatus)}`,
|
`托盘号: ${col.palletNo || "无"}`
|
].join('\n');
|
// return `状态: ${this.getStatusText(col.locationStatus)}
|
// 启用状态: ${this.getEnableStatusText(col.enalbeStatus)}
|
// 托盘号: ${col.palletNo || "无"}`;
|
},
|
getStatusText(status) {
|
const statusMap = {
|
0: "空货位",
|
2: "有货",
|
3: "有货",
|
4: "执行中",
|
6: "执行中",
|
7: "执行中",
|
99: "空托",
|
};
|
return statusMap[status] || "未知状态";
|
},
|
getEnableStatusText(status) {
|
const enableMap = {
|
1: "正常",
|
3: "禁用",
|
};
|
return enableMap[status] || "未知";
|
},
|
GetViewData() {
|
var _this = this;
|
this.http
|
.post("/api/StockView/GetLocationStockView", {}, "查询中")
|
.then((x) => {
|
_this.locationData = x.data;
|
// console.log("后端返回:", x.data);
|
// console.log("返回数据:", _this.locationData);
|
});
|
},
|
// 切换堆垛机
|
SCChange() {
|
this.GetViewData();
|
},
|
},
|
mounted() {
|
var mainHeight = document.getElementById("vol-main");
|
this.mian_height = mainHeight.offsetHeight - 40 + "px";
|
var _this = this;
|
//加载下拉选项
|
this.http
|
.get("/api/LocationInfo/GetLocationLayer", {}, "查询中")
|
.then((x) => {
|
_this.slectData = x;
|
//加载第一个区域，第一个堆垛机
|
_this.Area.shelf_code = _this.slectData[0].areaName;
|
_this.scList = _this.slectData[0].tunnel;
|
_this.layers = _this.slectData[0].layers;
|
});
|
this.GetViewData();
|
},
|
components: { ElButton },
|
};
|
</script>
|
|
<style scoped>
|
.left {
|
height: 100%;
|
float: left;
|
width: 18%;
|
/* background: lightblue; */
|
padding-top: 20px;
|
padding-left: 20px;
|
}
|
|
.right {
|
padding: 9px;
|
height: 98%;
|
overflow-y: auto;
|
overflow-x: auto;
|
float: left;
|
width: 82%;
|
padding-top: 5px;
|
}
|
|
.title {
|
text-align: center;
|
padding: 5px 0px;
|
font-size: 20px;
|
font-weight: bold;
|
width: 82%;
|
}
|
|
.row_tip {
|
font-size: 16px;
|
padding-left: 5px;
|
}
|
|
.row {
|
overflow: auto;
|
margin-bottom: 11px;
|
}
|
|
.item {
|
float: left;
|
width: 66px;
|
height: 38px;
|
margin: 3px;
|
background-color: lightblue;
|
text-align: center;
|
font-size: 14px;
|
border-radius: 3px;
|
line-height: 38px;
|
}
|
|
.tipText {
|
margin-top: 10px;
|
}
|
|
.btn {
|
margin-top: 15px;
|
}
|
|
.infoMsg {
|
float: left;
|
width: 63px;
|
height: 35px;
|
margin: 3px;
|
text-align: center;
|
font-size: 14px;
|
border-radius: 3px;
|
line-height: 38px;
|
}
|
</style>
|
|
<style>
|
.el-input {
|
width: 180px;
|
}
|
</style>
|
