From 35b1af99c388b5f03b8bf8de53852e5b5e9e60c4 Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期二, 31 三月 2026 14:08:21 +0800
Subject: [PATCH] 调整了货位详细信息悬浮窗的显示位置
---
项目代码/WMS/WMSClient/src/views/Home.vue | 245 ++++++++++++++++++++-----------------------------
1 files changed, 100 insertions(+), 145 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 a863757..4796488 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"
@@ -248,52 +248,30 @@
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浣滀负鎵樼洏鍙�
- }
+ // 閬嶅巻鎵�鏈夋帓鏁版嵁锛坮ow1鍜宺ow2锛�
+ Object.values(this.locationData).forEach(rowData => {
+ if (rowData && rowData.length > 0) {
+ rowData.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 {
@@ -306,8 +284,6 @@
},
GetViewData() {
- var _this = this;
-
this.loading = true;
this.rfidData = {}; // 娓呯┖涔嬪墠鐨凴FID鏁版嵁
this.locationData = { row1: [], row2: [] }; // 鍒濆鍖栨柊鐨勬暟鎹粨鏋�
@@ -318,10 +294,10 @@
console.log(`褰撳墠閫夋嫨鐨勪粨搴�: ${this.Area.warehouse}, 瀵瑰簲鐨剋arehouseId: ${warehouseId}`);
}
- console.log(`璋冪敤GetLocationStatus API: roadwayNo=${_this.Area.roadwayNo}, warehouseId=${warehouseId}`);
+ console.log(`璋冪敤GetLocationStatus API: roadwayNo=${this.Area.roadwayNo}, warehouseId=${warehouseId}`);
this.http
- .post(`/api/LocationInfo/GetLocationStatus?roadwayNo=${_this.Area.roadwayNo}&warehouseId=${warehouseId}`, {}, "鏌ヨ涓�")
+ .post(`/api/LocationInfo/GetLocationStatus?roadwayNo=${this.Area.roadwayNo}&warehouseId=${warehouseId}`, {}, "鏌ヨ涓�")
.then((x) => {
console.log("GetLocationStatus API杩斿洖缁撴灉:", x);
if (x.data) {
@@ -334,12 +310,9 @@
// 鎸夊眰鍙蜂粠楂樺埌浣庢帓搴�
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);
@@ -347,7 +320,16 @@
return colA - colB;
});
- // 鍒涘缓瀹屾暣鐨勫垪鏁扮粍
+ // 鎵惧嚭璇ュ眰瀹為檯瀛樺湪鐨勬渶澶у垪鍙�
+ let maxActualColumns = 0;
+ layer.locationObj.forEach(loc => {
+ const colNum = parseInt(loc.column);
+ if (colNum > maxActualColumns) {
+ maxActualColumns = colNum;
+ }
+ });
+
+ // 鍒涘缓瀹屾暣鐨勫垪鏁扮粍锛屽彧鏄剧ず鍒板疄闄呯殑鏈�澶у垪鏁�
const completeColumns = [];
// 褰撳墠宸叉湁鐨勮揣浣嶏紝鎸夊垪鍙锋槧灏�
@@ -356,8 +338,8 @@
existingLocations[parseInt(loc.column)] = loc;
});
- // 閬嶅巻鎵�鏈夊彲鑳界殑鍒楀彿锛�1-64锛�
- for (let col = 1; col <= maxColumns; col++) {
+ // 閬嶅巻鎵�鏈夊彲鑳界殑鍒楀彿锛�1鍒板疄闄呮渶澶у垪鏁帮級
+ for (let col = 1; col <= maxActualColumns; col++) {
if (existingLocations[col]) {
// 濡傛灉璇ュ垪鏈夎揣浣嶆暟鎹紝鐩存帴浣跨敤
completeColumns.push(existingLocations[col]);
@@ -394,44 +376,27 @@
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;
+ // 鎻愬彇鎵�鏈夎揣浣嶇紪鍙峰拰鍒濆鍖栬揣浣嶅瓧娈�
+ const locationCodes = [];
+ // 閬嶅巻鎵�鏈夋帓鏁版嵁锛坮ow1鍜宺ow2锛�
+ Object.values(this.locationData).forEach(rowData => {
+ if (rowData && rowData.length > 0) {
+ rowData.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);
@@ -476,10 +441,36 @@
this.currentLocation = location;
this.showTooltipFlag = true;
- // 璁剧疆鎻愮ず妗嗕綅缃紝绋嶅井鍋忕Щ閬垮厤閬尅榧犳爣
+ // 鑾峰彇鎻愮ず妗嗗昂瀵革紙鍋囪鍥哄畾瀹藉害320px锛岄珮搴︽牴鎹唴瀹瑰姩鎬佸彉鍖栵紝杩欓噷浣跨敤浼拌鍊�150px锛�
+ const tooltipWidth = 320;
+ const tooltipHeight = 250;
+
+ // 鑾峰彇灞忓箷灏哄
+ const screenWidth = window.innerWidth;
+ const screenHeight = window.innerHeight;
+
+ // 璁＄畻鍒濆浣嶇疆
+ let x = event.clientX + 10;
+ let y = event.clientY + 10;
+
+ // 杈圭晫妫�娴� - 鍙充晶
+ if (x + tooltipWidth > screenWidth) {
+ x = event.clientX - tooltipWidth - 10;
+ }
+
+ // 杈圭晫妫�娴� - 搴曢儴
+ if (y + tooltipHeight > screenHeight) {
+ y = event.clientY - tooltipHeight - 10;
+ }
+
+ // 纭繚涓嶈秴鍑哄睆骞曞乏渚у拰椤堕儴
+ x = Math.max(10, x);
+ y = Math.max(10, y);
+
+ // 璁剧疆鎻愮ず妗嗕綅缃�
this.tooltipPosition = {
- x: event.clientX + 10,
- y: event.clientY + 10,
+ x: x,
+ y: y,
};
},
@@ -514,73 +505,53 @@
// 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'
}
};
@@ -616,17 +587,16 @@
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.allRoadways = x.data;
//鏍规嵁褰撳墠浠撳簱绫诲瀷杩囨护宸烽亾
- _this.filterRoadwaysByWarehouse(_this.Area.warehouse);
- if (_this.scList.length > 0) {
- _this.Area.roadwayNo = _this.scList[0];
+ this.filterRoadwaysByWarehouse(this.Area.warehouse);
+ if (this.scList.length > 0) {
+ this.Area.roadwayNo = this.scList[0];
}
- _this.GetViewData();
+ this.GetViewData();
});
},
components: { ElButton }
@@ -698,12 +668,14 @@
.location-view {
flex: 1;
- width: 470%;
- max-width: 470%;
- overflow: auto;
+ width: auto;
+ max-width: none;
+ overflow: visible;
padding: 20px;
background-color: #f5f7fa;
border-radius: 8px;
+ white-space: nowrap;
+ display: inline-block;
}
.row {
@@ -725,7 +697,7 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
border: 1px solid #ccc;
background-color: #f9f9f9;
- margin: 0 5px;
+ margin: 0 5px 5px 5px;
}
/* 绌哄崰浣嶇鏍峰紡 */
@@ -736,25 +708,6 @@
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;
@@ -763,6 +716,8 @@
border-radius: 6px;
border: 1px solid #eaeaea;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ overflow-x: auto;
+ overflow-y: hidden;
}
.roadway-title {
--
Gitblit v1.9.3