wangxinhui
2026-03-31 01ced53414f6be455f280c35982873e984113650
ÏîÄ¿´úÂë/WMS/WMSClient/src/views/Home.vue
@@ -65,10 +65,15 @@
            <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
                  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>
@@ -77,10 +82,15 @@
            <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
                  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>
@@ -97,7 +107,7 @@
              <!-- åŽŸæ–™åº“æ˜¾ç¤ºå†…å®¹ -->
              <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.width ? currentLocation.width : "无" }}</span></p>
                <p><strong>条码:</strong><span>{{ currentLocation.barcode || "无" }}</span></p>
                <p><strong>RFID:</strong><span>{{ currentLocation.rfid || "无" }}</span></p>
              </div>
@@ -238,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 {
@@ -296,8 +284,6 @@
    },
    GetViewData() {
      var _this = this;
      this.loading = true;
      this.rfidData = {}; // æ¸…空之前的RFID数据
      this.locationData = { row1: [], row2: [] }; // åˆå§‹åŒ–新的数据结构
@@ -308,86 +294,109 @@
        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) {
            this.locationData = x.data;
            // å¯¹ç¬¬1排数据进行排序
            if (this.locationData.row1) {
            // ç¡®ä¿è´§ä½æŒ‰åˆ—号排序并计算最大列数,用于对齐
            const ensureColumnsAlignment = (rowData) => {
              if (!rowData || rowData.length === 0) return;
              // æŒ‰å±‚号从高到低排序
              this.locationData.row1.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));
              // å¯¹æ¯å±‚内的货位按列号从北到南排序(01-64)
              this.locationData.row1.forEach(layer => {
              rowData.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));
              // å¤„理每层数据
              rowData.forEach(layer => {
                // å¯¹æ¯å±‚内的货位按列号从北到南排序
                layer.locationObj.sort((a, b) => {
                  // ç¡®ä¿åˆ—号按数字顺序排列
                  const colA = parseInt(a.column);
                  const colB = parseInt(b.column);
                  return colA - colB;
                });
                // æ‰¾å‡ºè¯¥å±‚实际存在的最大列号
                let maxActualColumns = 0;
                layer.locationObj.forEach(loc => {
                  const colNum = parseInt(loc.column);
                  if (colNum > maxActualColumns) {
                    maxActualColumns = colNum;
                  }
                });
                // åˆ›å»ºå®Œæ•´çš„列数组,只显示到实际的最大列数
                const completeColumns = [];
                // å½“前已有的货位,按列号映射
                const existingLocations = {};
                layer.locationObj.forEach(loc => {
                  existingLocations[parseInt(loc.column)] = loc;
                });
                // éåŽ†æ‰€æœ‰å¯èƒ½çš„åˆ—å·ï¼ˆ1到实际最大列数)
                for (let col = 1; col <= maxActualColumns; 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);
          }
            // å¯¹ç¬¬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;
          // æå–所有货位编号和初始化货位字段
          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;
                });
              });
            }
          }
          // æå–所有货位编号
          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);
@@ -432,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,
      };
    },
@@ -470,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'
          }
        };
@@ -572,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 }
@@ -654,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 {
@@ -667,12 +683,13 @@
  margin-bottom: 8px;
  cursor: pointer;
  flex-wrap: nowrap;
  width: 100%;
  min-width: max-content;
}
.location-cell {
  width: 120px;
  flex: 0 0 120px;
  height: 50px;
  margin: 5px;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
@@ -680,6 +697,15 @@
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  margin: 0 5px 5px 5px;
}
/* ç©ºå ä½ç¬¦æ ·å¼ */
.location-cell.empty-cell {
  background-color: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
}
/* å··é“区域样式 */
@@ -690,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 {