From 1c631b345aae30bb6aa7e9dc8d856a0f40d5f1e3 Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期五, 20 三月 2026 10:49:08 +0800
Subject: [PATCH] 修复货位平面图锁定状态的显示
---
项目代码/WMS/WMSClient/src/views/Home.vue | 761 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 750 insertions(+), 11 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue"
index 820437a..daeffe0 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WMSClient/src/views/Home.vue"
@@ -1,24 +1,763 @@
-<template>
- <div class="title"></div>
-</template>
+ <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" :style="{ 'background-color': GetBgColor(column) }"
+ v-for="(column, colIndex) in item.locationObj" :key="'row1-' + item.layer + '-' + colIndex"
+ @mouseenter="showTooltip(column, $event)" @mouseleave="hideTooltip">
+ {{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}
+ </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" :style="{ 'background-color': GetBgColor(column) }"
+ v-for="(column, colIndex) in item.locationObj" :key="'row2-' + item.layer + '-' + colIndex"
+ @mouseenter="showTooltip(column, $event)" @mouseleave="hideTooltip">
+ {{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}
+ </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 + "m" : "鏃�" }}</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 { ref, reactive } from 'vue'
+import { ElButton } from "element-plus";
export default {
- setup() {
+ 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: {}, // 瀛樺偍璐т綅缂栧彿涓嶳FID鐨勬槧灏勫叧绯�
+ };
+ },
+ 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("娌℃湁璐т綅缂栧彿锛岃烦杩嘡FID鏌ヨ");
+ 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}鏉FID璁板綍`);
+
+ // 灏哛FID鏁版嵁杞崲涓轰互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(`璺宠繃鏃犳晥鐨凴FID鏁版嵁椤�(${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鎴杛fidCode浣滀负鎵樼洏鍙�
+ }
+ });
+ });
+ }
+
+ // 澶勭悊绗�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鎴杛fidCode浣滀负鎵樼洏鍙�
+ }
+ });
+ });
+ }
+
+ console.log("鏇存柊鍚庣殑璐т綅鏁版嵁:", this.locationData);
+ } else {
+ console.log("RFID鏌ヨAPI杩斿洖鐘舵�佸け璐ユ垨鏁版嵁涓虹┖");
+ }
+ })
+ .catch((error) => {
+ console.error("鑾峰彇RFID淇℃伅澶辫触:", error);
+ });
+ },
+
+ GetViewData() {
+ var _this = this;
+
+ this.loading = true;
+ this.rfidData = {}; // 娓呯┖涔嬪墠鐨凴FID鏁版嵁
+ this.locationData = { row1: [], row2: [] }; // 鍒濆鍖栨柊鐨勬暟鎹粨鏋�
+
+ let warehouseId = 0;
+ if (this.Area.warehouse) {
+ warehouseId = this.warehouseMap[this.Area.warehouse] || 1;
+ console.log(`褰撳墠閫夋嫨鐨勪粨搴�: ${this.Area.warehouse}, 瀵瑰簲鐨剋arehouseId: ${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;
+
+ // 瀵圭1鎺掓暟鎹繘琛屾帓搴�
+ if (this.locationData.row1) {
+ // 鎸夊眰鍙蜂粠楂樺埌浣庢帓搴�
+ this.locationData.row1.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));
+
+ // 瀵规瘡灞傚唴鐨勮揣浣嶆寜鍒楀彿浠庡寳鍒板崡鎺掑簭锛�01-64锛�
+ this.locationData.row1.forEach(layer => {
+ layer.locationObj.sort((a, b) => {
+ // 纭繚鍒楀彿鎸夋暟瀛楅『搴忔帓鍒�
+ const colA = parseInt(a.column);
+ const colB = parseInt(b.column);
+ return colA - colB;
+ });
+ });
+ }
+
+ // 瀵圭2鎺掓暟鎹繘琛屽悓鏍风殑鎺掑簭
+ if (this.locationData.row2) {
+ // 鎸夊眰鍙蜂粠楂樺埌浣庢帓搴�
+ this.locationData.row2.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));
+
+ // 瀵规瘡灞傚唴鐨勮揣浣嶆寜鍒楀彿浠庡寳鍒板崡鎺掑簭锛�01-64锛�
+ this.locationData.row2.forEach(layer => {
+ layer.locationObj.sort((a, b) => {
+ // 纭繚鍒楀彿鎸夋暟瀛楅『搴忔帓鍒�
+ const colA = parseInt(a.column);
+ const colB = parseInt(b.column);
+ return colA - colB;
+ });
+ });
+ }
+ }
+
+ // 鎻愬彇鎵�鏈夎揣浣嶇紪鍙�
+ 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) {
+ // 鎻愬彇鍘熷宸烽亾鍙凤紝濡係C01_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'
+ }
+ };
+
+ // 浠巆olumn.row鑾峰彇琛屽彿锛屾敞鎰廲olumn.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>
-.title {
- line-height: 70vh;
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ padding: 10px;
+}
+
+.header {
text-align: center;
- font-size: 28px;
- color: orange;
+ 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: 470%;
+ max-width: 470%;
+ overflow: auto;
+ padding: 20px;
+ background-color: #f5f7fa;
+ border-radius: 8px;
+}
+
+.row {
+ display: flex;
+ margin-bottom: 8px;
+ cursor: pointer;
+ flex-wrap: nowrap;
+}
+
+.location-cell {
+ width: 120px;
+ height: 50px;
+ margin: 5px;
+ 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;
+}
+
+/* 宸烽亾鍖哄煙鏍峰紡 */
+.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>
\ No newline at end of file
--
Gitblit v1.9.3