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 |  338 ++++++++++++++++++++++++++++++-------------------------
 1 files changed, 183 insertions(+), 155 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 07854b1..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"
@@ -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>
@@ -150,9 +160,9 @@
       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 },
-        { bgcolor: "#2BB3D5", msg: "涓撶敤璐т綅", state: 3 },
       ],
       locationData: [],
       showTooltipFlag: false,
@@ -170,6 +180,9 @@
           case 0: //绌洪棽
             bgColor = "#f0f0f0"; //寰堟祬鐏�
             break;
+          case 1: //閿佸畾
+            bgColor = "#2BB3D5"; //钃濊壊
+            break;
           case 20: //绌洪棽閿佸畾
             bgColor = "#a0a0a0"; //娣辩伆
             break;
@@ -178,9 +191,6 @@
             break;
           case 10: //鏈夎揣閿佸畾
             bgColor = "#228b22"; //娣辩豢
-            break;
-          case 3: //涓撶敤搴撲綅
-            bgColor = "#2BB3D5"; //钃濊壊(涓嶅彉)
             break;
           default:
             bgColor = "#f0f0f0"; //榛樿寰堟祬鐏�
@@ -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鎴杛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 {
@@ -296,8 +284,6 @@
     },
 
     GetViewData() {
-      var _this = this;
-
       this.loading = true;
       this.rfidData = {}; // 娓呯┖涔嬪墠鐨凴FID鏁版嵁
       this.locationData = { row1: [], row2: [] }; // 鍒濆鍖栨柊鐨勬暟鎹粨鏋�
@@ -308,86 +294,109 @@
         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) {
             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 = [];
+          // 閬嶅巻鎵�鏈夋帓鏁版嵁锛坮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;
                 });
               });
             }
-          }
-
-          // 鎻愬彇鎵�鏈夎揣浣嶇紪鍙�
-          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 {

--
Gitblit v1.9.3