调整了货位详细信息悬浮窗的显示位置

liulijun

2026-03-31 35b1af99c388b5f03b8bf8de53852e5b5e9e60c4

调整了货位详细信息悬浮窗的显示位置

调整了货位详细信息悬浮窗的显示位置

 ÏîÄ¿´úÂë/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或rfidCode作为托盘号
                  }
            // éåŽ†æ‰€æœ‰æŽ’数据（row1和row2）
            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或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 {
@@ -306,8 +284,6 @@
    },

    GetViewData() {
      var _this = this;

      this.loading = true;
      this.rfidData = {}; // æ¸…空之前的RFID数据
      this.locationData = { row1: [], row2: [] }; // åˆå§‹åŒ–新的数据结构
@@ -318,10 +294,10 @@
        console.log(`当前选择的仓库: ${this.Area.warehouse}, å¯¹åº”çš„warehouseId: ${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 = [];
          // éåŽ†æ‰€æœ‰æŽ’数据（row1和row2）
          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 {