<template>
|
<div class="container">
|
<div class="content-wrapper">
|
<!-- 控制面板区域 -->
|
<!-- <div class="form-group">
|
<label>区域：</label>
|
<el-select
|
size="mini"
|
filterable
|
v-model="Area.shelf_code"
|
placeholder="请选择"
|
class="full-width"
|
>
|
<el-option
|
v-for="item in slectData"
|
:value="item.shelf_code"
|
:label="item.house_name"
|
:key="item.house_name"
|
></el-option>
|
</el-select>
|
</div> -->
|
|
<div class="form-group">
|
<div style="display:flex;flex-direction: column;">
|
<h4>仓库</h4>
|
<el-select size="mini" @change="onWarehouseChange" v-model="Area.warehouse" placeholder="请选择仓库"
|
class="full-width">
|
<el-option v-for="item in warehouseList" :value="item" :label="item" :key="item"></el-option>
|
</el-select>
|
<h4>巷道</h4>
|
<el-select size="mini" @change="SCChange" v-model="Area.roadwayNo" placeholder="请选择巷道" class="full-width">
|
<el-option v-for="item in scList" :value="item" :label="item" :key="item"></el-option>
|
</el-select>
|
<el-button type="success" class="refresh-btn" @click="GetViewData">
|
刷新
|
</el-button>
|
</div>
|
|
<div class="legend-section" style="margin-left: 20px;">
|
<h4>说明</h4>
|
<div class="legend-grid">
|
<div class="legend-item" v-for="item in infoMsg" :key="item.bgcolor">
|
<span class="color-box" :style="{ 'background-color': item.bgcolor }"></span>
|
<span class="legend-label">{{ item.msg }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 货位展示区域 -->
|
<div v-if="loading" class="loading-container">
|
<span>加载中...</span>
|
</div>
|
|
<div
|
v-else-if="(!locationData.row1 || locationData.row1.length === 0) && (!locationData.row2 || locationData.row2.length === 0)"
|
class="empty-container">
|
<el-empty description="暂无数据" />
|
</div>
|
|
<div v-else>
|
<div class="location-view">
|
<!-- 第1排（东面） -->
|
<div class="roadway-section">
|
<h2 class="roadway-title">{{ Area.roadwayNo }} 第1巷道第1排(东面:北>南)</h2>
|
<div class="row" v-for="(item, index) in locationData.row1" :key="'row1-' + index">
|
<div
|
class="location-cell"
|
:class="{ 'empty-cell': column.location_lock === -1 }"
|
:style="{ 'background-color': column.location_lock === -1 ? 'transparent' : GetBgColor(column) }"
|
v-for="(column, colIndex) in item.locationObj"
|
:key="'row1-' + item.layer + '-' + colIndex"
|
@mouseenter="column.location_lock !== -1 && showTooltip(column, $event)"
|
@mouseleave="hideTooltip">
|
<span v-if="column.location_lock !== -1">{{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 第2排（西面） -->
|
<div class="roadway-section">
|
<h2 class="roadway-title">{{ Area.roadwayNo }} 第1巷道第2排(西面:北>南)</h2>
|
<div class="row" v-for="(item, index) in locationData.row2" :key="'row2-' + index">
|
<div
|
class="location-cell"
|
:class="{ 'empty-cell': column.location_lock === -1 }"
|
:style="{ 'background-color': column.location_lock === -1 ? 'transparent' : GetBgColor(column) }"
|
v-for="(column, colIndex) in item.locationObj"
|
:key="'row2-' + item.layer + '-' + colIndex"
|
@mouseenter="column.location_lock !== -1 && showTooltip(column, $event)"
|
@mouseleave="hideTooltip">
|
<span v-if="column.location_lock !== -1">{{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 悬浮提示框 -->
|
<div v-if="showTooltipFlag" class="location-tooltip" :style="{
|
left: tooltipPosition.x + 'px',
|
top: tooltipPosition.y + 'px',
|
}">
|
<div v-if="currentLocation">
|
<p><strong>仓库:</strong><span>{{ Area.warehouse || "未选择" }}</span></p>
|
<p><strong>货位号:</strong><span>{{ currentLocation.locationCode }}</span></p>
|
<!-- 根据仓库类型显示不同的标签和内容 -->
|
<!-- 原料库显示内容 -->
|
<div v-if="Area.warehouse === '原料库'">
|
<p><strong>纸卷:</strong><span>{{ currentLocation.paperRoll || "无" }}</span></p>
|
<p><strong>门幅:</strong><span>{{ currentLocation.width ? currentLocation.width : "无" }}</span></p>
|
<p><strong>条码:</strong><span>{{ currentLocation.barcode || "无" }}</span></p>
|
<p><strong>RFID:</strong><span>{{ currentLocation.rfid || "无" }}</span></p>
|
</div>
|
<!-- 成品库显示内容 -->
|
<div v-else-if="Area.warehouse === '成品库'">
|
<p><strong>成品名称:</strong><span>{{ currentLocation.productName || currentLocation.paperRoll || "无" }}</span></p>
|
<p><strong>成品数量:</strong><span>{{ currentLocation.quantity || currentLocation.width || "无" }}</span></p>
|
<p><strong>托盘号:</strong><span>{{ currentLocation.rfid || currentLocation.rfidCode ||
|
this.rfidData[currentLocation.locationCode] || "无" }}</span></p>
|
</div>
|
<p>
|
<strong>排列层:</strong> <span>{{ currentLocation.row }}排{{ currentLocation.column }}列{{ currentLocation.layer
|
}}层</span>
|
</p>
|
<p><strong>状态:</strong> <span>{{ getStatusText(currentLocation) }}</span></p>
|
<p><strong>入库日期:</strong><span>{{ currentLocation.inDate ? new Date(currentLocation.inDate).toLocaleString() :
|
"无" }}</span></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ElButton } from "element-plus";
|
|
export default {
|
data() {
|
return {
|
slectData: [],
|
scList: [],
|
allRoadways: [], // 保存所有巷道列表
|
warehouseList: ["原料库", "成品库"],
|
warehouseMap: {
|
"原料库": 1,
|
"成品库": 2
|
},
|
// 巷道类型映射
|
roadwayTypeMap: {
|
"原料库": ["SC01_YL", "SC02_YL", "SC03_YLDual", "SC04_YLDual", "SC05_YLDual"],
|
"成品库": ["SC01_CP", "SC02_CP", "SC03_CP", "SC04_CP", "SC05_CP"]
|
},
|
Area: {
|
warehouse: "原料库",
|
roadwayNo: "",
|
shelf_code: ""
|
},
|
mian_height: "",
|
loading: false,
|
infoMsg: [
|
{ bgcolor: "#f0f0f0", msg: "空闲", state: 0 },
|
{ bgcolor: "#90ee90", msg: "有货", state: 100 },
|
{ bgcolor: "#2BB3D5", msg: "锁定", state: 1 },
|
{ bgcolor: "#a0a0a0", msg: "空闲锁定", state: 20 },
|
{ bgcolor: "#228b22", msg: "有货锁定", state: 10 },
|
],
|
locationData: [],
|
showTooltipFlag: false,
|
currentLocation: null,
|
tooltipPosition: { x: 0, y: 0 },
|
rfidData: {}, // 存储货位编号与RFID的映射关系
|
};
|
},
|
computed: {
|
GetBgColor() {
|
return (col) => {
|
var bgColor = "";
|
//根据状态设置颜色
|
switch (col.location_lock) {
|
case 0: //空闲
|
bgColor = "#f0f0f0"; //很浅灰
|
break;
|
case 1: //锁定
|
bgColor = "#2BB3D5"; //蓝色
|
break;
|
case 20: //空闲锁定
|
bgColor = "#a0a0a0"; //深灰
|
break;
|
case 100: //有货
|
bgColor = "#90ee90"; //浅绿
|
break;
|
case 10: //有货锁定
|
bgColor = "#228b22"; //深绿
|
break;
|
default:
|
bgColor = "#f0f0f0"; //默认很浅灰
|
}
|
return bgColor;
|
};
|
},
|
},
|
methods: {
|
// 获取RFID信息
|
getRfidInfo(locationCodes, warehouseId) {
|
if (!locationCodes || locationCodes.length === 0) {
|
console.log("没有货位编号，跳过RFID查询");
|
return;
|
}
|
|
console.log("调用RFID查询API:", {
|
locationCodes: locationCodes,
|
warehouseId: warehouseId
|
});
|
|
this.http
|
.post(`/api/LocationInfo/GetRfid`, { locationCodes, warehouseId }, "查询RFID中")
|
.then((response) => {
|
console.log("RFID查询API返回结果:", response);
|
if (response.status && response.data) {
|
console.log(`成功获取${response.data.length}条RFID记录`);
|
|
// 将RFID数据转换为以locationCode为键的映射
|
const rfidDataMap = {};
|
response.data.forEach((item, index) => {
|
try {
|
// 检查字段名，支持大小写两种格式
|
const locationCode = item.LocationCode || item.locationCode;
|
if (item && locationCode !== undefined) {
|
rfidDataMap[locationCode] = {
|
paperRoll: item.PaperRoll || item.paperRoll || "",
|
productName: item.ProductName || item.productName || item.PaperRoll || item.paperRoll || "", // 优先使用ProductName字段
|
width: item.Width || item.width || 0,
|
quantity: item.Quantity || item.quantity || item.Width || item.width || 0, // 优先使用Quantity字段
|
barcode: item.Barcode || item.barcode || "",
|
rfid: item.RfidCode || item.rfidCode || "",
|
rfidCode: item.RfidCode || item.rfidCode || "", // 确保rfidCode字段存在
|
status: item.Status || item.status || 0,
|
inDate: item.InDate || item.inDate || null
|
};
|
} else {
|
console.warn(`跳过无效的RFID数据项(${index}):`, item);
|
}
|
} catch (error) {
|
console.error(`处理RFID数据项(${index})时出错:`, error, item);
|
}
|
});
|
|
console.log("RFID数据映射:", rfidDataMap);
|
|
// 更新货位数据，将RFID信息合并到对应的货位对象中
|
|
// 处理第1排数据
|
if (this.locationData.row1) {
|
this.locationData.row1.forEach(layer => {
|
layer.locationObj.forEach(location => {
|
const rfidInfo = rfidDataMap[location.locationCode];
|
if (rfidInfo) {
|
// 更新货位对象的字段
|
location.paperRoll = rfidInfo.paperRoll;
|
location.productName = rfidInfo.productName; // 新增成品名称字段
|
location.width = rfidInfo.width;
|
location.quantity = rfidInfo.quantity; // 新增成品数量字段
|
location.barcode = rfidInfo.barcode;
|
location.rfid = rfidInfo.rfid;
|
location.rfidCode = rfidInfo.rfidCode; // 新增rfidCode字段
|
location.status = rfidInfo.status;
|
location.inDate = rfidInfo.inDate;
|
// 更新rfidData映射（保持向后兼容）
|
this.rfidData[location.locationCode] = rfidInfo.rfid || rfidInfo.rfidCode; // 使用rfid或rfidCode作为托盘号
|
}
|
});
|
});
|
}
|
|
// 处理第2排数据
|
if (this.locationData.row2) {
|
this.locationData.row2.forEach(layer => {
|
layer.locationObj.forEach(location => {
|
const rfidInfo = rfidDataMap[location.locationCode];
|
if (rfidInfo) {
|
// 更新货位对象的字段
|
location.paperRoll = rfidInfo.paperRoll;
|
location.productName = rfidInfo.productName; // 新增成品名称字段
|
location.width = rfidInfo.width;
|
location.quantity = rfidInfo.quantity; // 新增成品数量字段
|
location.barcode = rfidInfo.barcode;
|
location.rfid = rfidInfo.rfid;
|
location.rfidCode = rfidInfo.rfidCode; // 新增rfidCode字段
|
location.status = rfidInfo.status;
|
location.inDate = rfidInfo.inDate;
|
// 更新rfidData映射（保持向后兼容）
|
this.rfidData[location.locationCode] = rfidInfo.rfid || rfidInfo.rfidCode; // 使用rfid或rfidCode作为托盘号
|
}
|
});
|
});
|
}
|
|
console.log("更新后的货位数据:", this.locationData);
|
} else {
|
console.log("RFID查询API返回状态失败或数据为空");
|
}
|
})
|
.catch((error) => {
|
console.error("获取RFID信息失败:", error);
|
});
|
},
|
|
GetViewData() {
|
var _this = this;
|
|
this.loading = true;
|
this.rfidData = {}; // 清空之前的RFID数据
|
this.locationData = { row1: [], row2: [] }; // 初始化新的数据结构
|
|
let warehouseId = 0;
|
if (this.Area.warehouse) {
|
warehouseId = this.warehouseMap[this.Area.warehouse] || 1;
|
console.log(`当前选择的仓库: ${this.Area.warehouse}, 对应的warehouseId: ${warehouseId}`);
|
}
|
|
console.log(`调用GetLocationStatus API: roadwayNo=${_this.Area.roadwayNo}, warehouseId=${warehouseId}`);
|
|
this.http
|
.post(`/api/LocationInfo/GetLocationStatus?roadwayNo=${_this.Area.roadwayNo}&warehouseId=${warehouseId}`, {}, "查询中")
|
.then((x) => {
|
console.log("GetLocationStatus API返回结果:", x);
|
if (x.data) {
|
this.locationData = x.data;
|
|
// 确保货位按列号排序并计算最大列数，用于对齐
|
const ensureColumnsAlignment = (rowData) => {
|
if (!rowData || rowData.length === 0) return;
|
|
// 按层号从高到低排序
|
rowData.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));
|
|
// 确定最大列数（假设是64列，从01-64）
|
const maxColumns = 64;
|
|
// 处理每层数据
|
rowData.forEach(layer => {
|
// 对每层内的货位按列号从北到南排序（01-64）
|
layer.locationObj.sort((a, b) => {
|
// 确保列号按数字顺序排列
|
const colA = parseInt(a.column);
|
const colB = parseInt(b.column);
|
return colA - colB;
|
});
|
|
// 创建完整的列数组
|
const completeColumns = [];
|
|
// 当前已有的货位，按列号映射
|
const existingLocations = {};
|
layer.locationObj.forEach(loc => {
|
existingLocations[parseInt(loc.column)] = loc;
|
});
|
|
// 遍历所有可能的列号（1-64）
|
for (let col = 1; col <= maxColumns; col++) {
|
if (existingLocations[col]) {
|
// 如果该列有货位数据，直接使用
|
completeColumns.push(existingLocations[col]);
|
} else {
|
// 如果该列没有货位数据，添加空占位符
|
completeColumns.push({
|
locationCode: `empty-${layer.row}-${String(col).padStart(2, '0')}-${layer.layer}`,
|
row: layer.row,
|
column: String(col).padStart(2, '0'),
|
layer: layer.layer,
|
location_lock: -1, // 特殊标记，用于表示空占位符
|
paperRoll: '',
|
productName: '',
|
width: 0,
|
quantity: 0,
|
barcode: '',
|
rfid: '',
|
rfidCode: '',
|
inDate: null,
|
warehouseId: layer.warehouseId || 0
|
});
|
}
|
}
|
|
// 更新该层的货位数据为完整列
|
layer.locationObj = completeColumns;
|
});
|
};
|
|
// 处理第1排数据
|
ensureColumnsAlignment(this.locationData.row1);
|
|
// 处理第2排数据
|
ensureColumnsAlignment(this.locationData.row2);
|
}
|
|
// 提取所有货位编号
|
let locationCodes = [];
|
|
// 提取第1排货位编号
|
if (this.locationData.row1) {
|
this.locationData.row1.forEach(layer => {
|
layer.locationObj.forEach(location => {
|
locationCodes.push(location.locationCode);
|
// 初始化每个货位的RFID相关字段
|
if (!location.paperRoll) location.paperRoll = "无";
|
if (!location.productName) location.productName = "无";
|
if (!location.width) location.width = 0;
|
if (!location.quantity) location.quantity = 0;
|
if (!location.barcode) location.barcode = "无";
|
if (!location.rfid) location.rfid = "无";
|
if (!location.rfidCode) location.rfidCode = "无";
|
if (!location.inDate) location.inDate = null;
|
});
|
});
|
}
|
|
// 提取第2排货位编号
|
if (this.locationData.row2) {
|
this.locationData.row2.forEach(layer => {
|
layer.locationObj.forEach(location => {
|
locationCodes.push(location.locationCode);
|
// 初始化每个货位的RFID相关字段
|
if (!location.paperRoll) location.paperRoll = "无";
|
if (!location.productName) location.productName = "无";
|
if (!location.width) location.width = 0;
|
if (!location.quantity) location.quantity = 0;
|
if (!location.barcode) location.barcode = "无";
|
if (!location.rfid) location.rfid = "无";
|
if (!location.rfidCode) location.rfidCode = "无";
|
if (!location.inDate) location.inDate = null;
|
});
|
});
|
}
|
|
console.log(`从货位数据中提取到${locationCodes.length}个货位编号`);
|
console.log("提取的货位编号:", locationCodes);
|
|
// 调用API获取RFID信息
|
this.getRfidInfo(locationCodes, warehouseId);
|
})
|
.catch((error) => {
|
this.$message.error("获取数据失败，请重试");
|
console.error("获取货位状态失败:", error);
|
})
|
.finally(() => {
|
this.loading = false;
|
});
|
},
|
|
// 切换排
|
SCChange() {
|
this.GetViewData();
|
},
|
// 根据仓库类型过滤巷道列表
|
filterRoadwaysByWarehouse(warehouse) {
|
const allowedRoadways = this.roadwayTypeMap[warehouse] || [];
|
this.scList = this.allRoadways.filter(roadway => allowedRoadways.includes(roadway));
|
|
// 如果当前选中的巷道不在过滤后的列表中，重置选择
|
if (this.Area.roadwayNo && !this.scList.includes(this.Area.roadwayNo)) {
|
this.Area.roadwayNo = this.scList[0] || "";
|
} else if (!this.Area.roadwayNo && this.scList.length > 0) {
|
this.Area.roadwayNo = this.scList[0];
|
}
|
},
|
|
// 切换仓库
|
onWarehouseChange() {
|
// 根据仓库类型过滤巷道列表
|
this.filterRoadwaysByWarehouse(this.Area.warehouse);
|
// 重置排选择后获取数据
|
this.GetViewData();
|
},
|
showTooltip(location, event) {
|
this.currentLocation = location;
|
this.showTooltipFlag = true;
|
|
// 设置提示框位置，稍微偏移避免遮挡鼠标
|
this.tooltipPosition = {
|
x: event.clientX + 10,
|
y: event.clientY + 10,
|
};
|
},
|
|
hideTooltip() {
|
this.showTooltipFlag = false;
|
this.currentLocation = null;
|
},
|
|
getStatusText(location) {
|
if (location.location_lock === 0) return "空闲";
|
if (location.location_lock === 1) return "锁定";
|
if (location.location_lock === 100) return "有货";
|
if (location.location_lock === 20) return "空闲锁定";
|
if (location.location_lock === 10) return "有货锁定";
|
return "其他";
|
},
|
getRoadwayNo(column) {
|
// 根据用户要求的规则生成标准化巷道号
|
// 巷道/排：从东到西 11、12、21、22、31、32、41、42、51、52
|
// 列：从北到南 01—64
|
// 层：01—10
|
|
if (column && column.locationCode && column.row) {
|
// 提取原始巷道号，如SC01_YL
|
const locationCode = column.locationCode;
|
const row = column.row;
|
const originalRoadwayNo = locationCode.split('-')[0];
|
|
// 根据原始巷道号和行号映射到标准化巷道号
|
const standardizedRoadwayMap = {
|
// 原料库巷道映射
|
// SC01_YL, 第1排 -> 11，第2排 -> 12
|
'SC01_YL': {
|
'01': '11',
|
'1': '11',
|
'02': '12',
|
'2': '12'
|
},
|
// SC02_YL, 第1排 -> 21，第2排 -> 22
|
'SC02_YL': {
|
'01': '21',
|
'1': '21',
|
'02': '22',
|
'2': '22'
|
},
|
// SC03_YLDual, 第1排 -> 31，第2排 -> 32
|
'SC03_YLDual': {
|
'01': '31',
|
'1': '31',
|
'02': '32',
|
'2': '32'
|
},
|
// SC04_YLDual, 第1排 -> 41，第2排 -> 42
|
'SC04_YLDual': {
|
'01': '41',
|
'1': '41',
|
'02': '42',
|
'2': '42'
|
},
|
// SC05_YLDual, 第1排 -> 51，第2排 -> 52
|
'SC05_YLDual': {
|
'01': '51',
|
'1': '51',
|
'02': '52',
|
'2': '52'
|
},
|
// 成品库巷道映射
|
// SC01_CP, 第1排 -> 11，第2排 -> 12
|
'SC01_CP': {
|
'01': '11',
|
'1': '11',
|
'02': '12',
|
'2': '12'
|
},
|
// SC02_CP, 第1排 -> 21，第2排 -> 22
|
'SC02_CP': {
|
'01': '21',
|
'1': '21',
|
'02': '22',
|
'2': '22'
|
},
|
// SC03_CP, 第1排 -> 31，第2排 -> 32
|
'SC03_CP': {
|
'01': '31',
|
'1': '31',
|
'02': '32',
|
'2': '32'
|
},
|
// SC04_CP, 第1排 -> 41，第2排 -> 42
|
'SC04_CP': {
|
'01': '41',
|
'1': '41',
|
'02': '42',
|
'2': '42'
|
},
|
// SC05_CP, 第1排 -> 51，第2排 -> 52
|
'SC05_CP': {
|
'01': '51',
|
'1': '51',
|
'02': '52',
|
'2': '52'
|
}
|
};
|
|
// 从column.row获取行号，注意column.row是带前导零的字符串
|
const rowStr = row;
|
|
// 查找映射
|
if (standardizedRoadwayMap[originalRoadwayNo]) {
|
const rowMap = standardizedRoadwayMap[originalRoadwayNo];
|
if (rowMap[rowStr]) {
|
return rowMap[rowStr];
|
}
|
// 尝试不带前导零的情况
|
const rowStrWithoutZero = rowStr.replace(/^0/, '');
|
if (rowMap[rowStrWithoutZero]) {
|
return rowMap[rowStrWithoutZero];
|
}
|
}
|
|
// 如果没有匹配的映射，返回原始巷道号
|
return originalRoadwayNo;
|
}
|
return '';
|
},
|
getWarehouseName(location) {
|
if (location.warehouseId === 1) return "原料库";
|
if (location.warehouseId === 2) return "成品库";
|
return "未知仓库";
|
}
|
},
|
mounted() {
|
var mainHeight = document.getElementById("vol-main");
|
if (mainHeight) {
|
this.mian_height = mainHeight.offsetHeight - 40 + "px";
|
}
|
var _this = this;
|
//加载下拉选项
|
this.http.post("/api/LocationInfo/GetRow", {}, "查询中").then((x) => {
|
//保存所有巷道
|
_this.allRoadways = x.data;
|
//根据当前仓库类型过滤巷道
|
_this.filterRoadwaysByWarehouse(_this.Area.warehouse);
|
if (_this.scList.length > 0) {
|
_this.Area.roadwayNo = _this.scList[0];
|
}
|
_this.GetViewData();
|
});
|
},
|
components: { ElButton }
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
width: 100%;
|
padding: 10px;
|
}
|
|
.header {
|
text-align: center;
|
margin-bottom: 20px;
|
}
|
|
.title {
|
font-size: 20px;
|
font-weight: bold;
|
margin: 0;
|
}
|
|
.content-wrapper {
|
display: flex;
|
flex: 1;
|
min-height: 0;
|
padding: 10px;
|
}
|
|
.full-width {
|
width: 100%;
|
}
|
|
.refresh-btn {
|
margin-top: 10px;
|
width: 35%;
|
}
|
|
.legend-section h4 {
|
margin-bottom: 10px;
|
}
|
|
.legend-grid {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
.legend-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.color-box {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
margin-right: 8px;
|
border-radius: 3px;
|
}
|
|
.legend-label {
|
font-size: 13px;
|
}
|
|
.location-view {
|
flex: 1;
|
width: 360%;
|
max-width: 360%;
|
overflow: auto;
|
padding: 20px;
|
background-color: #f5f7fa;
|
border-radius: 8px;
|
}
|
|
.row {
|
display: flex;
|
margin-bottom: 8px;
|
cursor: pointer;
|
flex-wrap: nowrap;
|
width: 100%;
|
min-width: max-content;
|
}
|
|
.location-cell {
|
flex: 0 0 120px;
|
height: 50px;
|
text-align: center;
|
font-size: 16px;
|
border-radius: 4px;
|
line-height: 50px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
border: 1px solid #ccc;
|
background-color: #f9f9f9;
|
margin: 0 5px;
|
}
|
|
/* 空占位符样式 */
|
.location-cell.empty-cell {
|
background-color: transparent;
|
border: none;
|
box-shadow: none;
|
cursor: default;
|
}
|
|
/* 添加货位网格容器样式，确保所有行对齐 */
|
.roadway-section {
|
overflow-x: auto;
|
overflow-y: hidden;
|
}
|
|
.location-cell {
|
width: 120px;
|
height: 50px;
|
text-align: center;
|
font-size: 16px;
|
border-radius: 4px;
|
line-height: 50px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
border: 1px solid #ccc;
|
background-color: #f9f9f9;
|
margin: 0;
|
}
|
|
/* 巷道区域样式 */
|
.roadway-section {
|
margin-bottom: 40px;
|
padding: 20px;
|
background-color: white;
|
border-radius: 6px;
|
border: 1px solid #eaeaea;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
}
|
|
.roadway-title {
|
margin: 0 0 20px 0;
|
font-size: 24px;
|
font-weight: bold;
|
color: #2c3e50;
|
text-align: left;
|
padding-bottom: 15px;
|
border-bottom: 3px solid #409EFF;
|
}
|
|
.location-tooltip {
|
position: fixed;
|
z-index: 9999;
|
background-color: white;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
padding: 12px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
pointer-events: none;
|
min-width: 280px;
|
max-width: 320px;
|
}
|
|
.location-tooltip p {
|
margin: 6px 0;
|
font-size: 14px;
|
line-height: 1.5;
|
display: flex;
|
align-items: center;
|
}
|
|
.location-tooltip strong {
|
display: inline-block;
|
width: 80px;
|
color: #555;
|
font-weight: 600;
|
text-align: right;
|
margin-right: 12px;
|
flex-shrink: 0;
|
}
|
|
.location-tooltip span {
|
display: inline-block;
|
color: #333;
|
font-weight: 500;
|
flex: 1;
|
text-align: left;
|
}
|
|
.form-group {
|
display: flex;
|
}
|
|
.loading-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 200px;
|
font-size: 16px;
|
}
|
|
.empty-container {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 200px;
|
}
|
</style>
|
