1 托盘绑定界面样式调整实现 扫码可以实时看到设备矩阵界面的数据。

zhmes-agecal-web/src/views/screen/components/TrayBinding.vue

 <template>
-  <div class="tray-binding-container">
+  <div class="tray-binding-container" ref="container">
     <!-- 头部区域 -->
     <div class="header">
       <div class="back-button" @click="goBack">
@@ -7,7 +7,12 @@
       </div>
     </div>
 
-    <!-- 托盘ID绑定区域 -->
+    <!-- 托盘ID绑定区域 - 添加悬浮容器 -->
+    <div
+      class="tray-id-section-wrapper"
+      :class="{ 'floating': isFloating }"
+      :style="{ width: floatingWidth }"
+    >
       <div class="tray-id-section">
         <div class="tray-info">
           <div class="tray-display">
@@ -32,7 +37,7 @@
         <div
           class="scan-section"
           style="align-items: center;"
-        v-if="trayStatus !== '1'"
+          v-show="trayStatus !== '1' && trayStatus !== '2'"
         >
           <input
             type="text"
@@ -50,8 +55,12 @@
           </div>
         </div>
       </div>
+    </div>
 
-    <!-- 设备矩阵区域 -->
+    <!-- 设备矩阵容器 -->
+    <div class="devices-content-wrapper">
+      <!-- 设备矩阵区域 - 可滚动 -->
+      <div class="devices-content" ref="devicesContent">
         <div class="devices-grid-container">
           <div class="devices-grid">
             <div
@@ -65,6 +74,7 @@
                 'duplicate': device.isDuplicate
               }"
               @click="setActiveCell(index)"
+              :ref="`deviceCell_${index}`"
             >
               <div class="device-id">
                 {{ device.deviceCode || '+' }}
@@ -79,8 +89,10 @@
             </div>
           </div>
         </div>
+      </div>
 
-    <!-- 操作按钮区域 -->
+      <!-- 操作按钮区域 - 固定在设备矩阵容器底部 -->
+      <div class="binding-controls-wrapper">
         <div class="binding-controls">
           <button
             v-if="trayStatus === '0'"
@@ -107,18 +119,7 @@
             <i class="fas fa-unlink"></i> 一键解绑
           </button>
         </div>
-
-    <!-- 使用说明区域 -->
-    <div class="instructions">
-      <h3><i class="fas fa-lightbulb"></i> 使用说明</h3>
-      <ul>
-        <li v-if="trayStatus === '0'"> 点击矩阵中的单元格或按顺序扫描<span class="highlight">设备条码</span>（扫描枪自动识别）</li>
-        <li v-if="trayStatus === '0'"> 设备条码会自动填充到当前激活的单元格中</li>
-        <li v-if="trayStatus === '3'"> 请扫描设备条码进行解绑</li>
-        <li v-if="trayStatus === '3'"> 每解绑一个异常设备，待处理数量将减少</li>
-        <li> 可以手动点击任何单元格进行修改或重新扫描</li>
-        <li><i class="fas fa-bolt scanner-icon"></i> 提示：使用扫描枪时，请确保输入框获得焦点</li>
-      </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -163,12 +164,36 @@ export default {
         this.addDevice();
       }, 500); // 可根据需求调整延迟时间（如300ms-1000ms）
     },
+    // 监听激活单元格变化，实现自动滚动
+    activeCell(newIndex) {
+      this.$nextTick(() => {
+        this.handleScroll(newIndex);
+      });
+    },
   },
   beforeDestroy() {
     // 组件销毁时清除计时器，避免内存泄漏
     if (this.inputTimer) {
       clearTimeout(this.inputTimer);
     }
+    // 移除滚动监听
+    if (this.$refs.devicesContent) {
+      this.$refs.devicesContent.removeEventListener('scroll', this.handleScrollEvent);
+    }
+  },
+  mounted() {
+    // 初始化时聚焦到输入框
+    this.$nextTick(() => {
+      this.$refs.deviceInput.focus();
+      // 获取容器宽度
+      if (this.$refs.container) {
+        this.floatingWidth = `${this.$refs.container.clientWidth - 60}px`; // 减去内边距
+      }
+      // 添加滚动监听
+      if (this.$refs.devicesContent) {
+        this.$refs.devicesContent.addEventListener('scroll', this.handleScrollEvent);
+      }
+    });
   },
   data() {
     return {
@@ -184,6 +209,10 @@ export default {
       abnormalCount: 0,
       initialAbnormalCount: 0,
 
+      // 悬浮状态
+      isFloating: false,
+      floatingWidth: 'auto',
+
       // 设备矩阵数据 (8x9 = 72个设备)
       devices: Array(72).fill().map((_, i) => {
         const row = Math.floor(i / 9) + 1; // 1-8行
@@ -275,6 +304,42 @@ export default {
     }
   },
   methods: {
+    // 处理滚动
+    handleScroll(cellIndex) {
+      if (!this.$refs.devicesContent) return;
+
+      // 计算当前行（每行9个设备）
+      const currentRow = Math.floor(cellIndex / 9);
+
+      // 从第二排开始滚动（索引8是第一排最后一个，索引9是第二排第一个）
+      if (currentRow >= 1) {
+        // 滚动距离：每行90px
+        const scrollTop = currentRow * 90;
+
+        // 平滑滚动到指定位置
+        this.$refs.devicesContent.scrollTo({
+          top: scrollTop,
+          behavior: 'smooth'
+        });
+
+        // 激活悬浮模式
+        if (scrollTop > 50) {
+          this.isFloating = true;
+        }
+      } else {
+        // 回到第一排时，关闭悬浮
+        this.isFloating = false;
+      }
+    },
+
+    // 处理滚动事件
+    handleScrollEvent() {
+      if (this.$refs.devicesContent) {
+        const scrollTop = this.$refs.devicesContent.scrollTop;
+        this.isFloating = scrollTop > 50;
+      }
+    },
+
     // 在 methods 中添加一个专门判断设备是否异常的方法
     isDeviceError(device) {
       if (!device.deviceCode) return false;
@@ -629,16 +694,99 @@ export default {
       });
     }
   },
-  mounted() {
-    // 初始化时聚焦到托盘输入框
-    this.$nextTick(() => {
-      this.$refs.deviceInput.focus();
-    });
-  },
 };
 </script>
+
 <style scoped>
-/* 添加托盘信息容器样式 */
+/* 修改容器结构 */
+.tray-binding-container {
+  width: 100%;
+  height: 100%;
+  max-width: 1400px;
+  background: rgba(10, 20, 40, 0.85);
+  border-radius: 20px;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  border: 1px solid rgba(100, 180, 255, 0.3);
+  padding: 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 添加悬浮包装器样式 */
+.tray-id-section-wrapper {
+  transition: all 0.3s ease;
+  z-index: 10;
+  position: sticky; /* 使用sticky定位 */
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1340px; /* 容器宽度减去padding */
+  flex-shrink: 0; /* 防止收缩 */
+}
+
+.tray-id-section-wrapper.floating {
+  z-index: 1000;
+  background: rgba(10, 20, 40, 0.95);
+  border-radius: 0 0 15px 15px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-top: none;
+  padding: 15px;
+}
+
+/* 设备矩阵包装器 - 包含设备矩阵和操作按钮 */
+.devices-content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+  position: relative;
+  overflow: hidden; /* 隐藏超出部分 */
+}
+
+/* 设备内容区域 - 可滚动 */
+.devices-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  flex: 1; /* 占据剩余空间 */
+  border-radius: 15px;
+  background: rgba(0, 40, 80, 0.3);
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  margin-bottom: 95px; /* 为操作按钮区域留出空间 */
+}
+
+/* 操作按钮包装器 */
+.binding-controls-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background: linear-gradient(to bottom, transparent, rgba(10, 20, 40, 0.9) 30%);
+  padding: 5px 0;
+  pointer-events: none; /* 让点击穿透到下面的内容 */
+}
+
+/* 操作按钮区域 */
+.binding-controls {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  pointer-events: auto; /* 恢复按钮的点击事件 */
+  padding: 5px 5px;
+  background: rgba(0, 40, 80, 0.8);
+  border-radius: 15px;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  margin: 0 5px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+/* 调整托盘信息区域间距 */
 .tray-info {
   display: flex;
   flex-direction: column;
@@ -666,32 +814,10 @@ export default {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-body {
-  background: linear-gradient(135deg, #0a1929, #0c2a46);
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  color: #fff;
-}
-
-.tray-binding-container {
-  width: 100%;
-  max-width: 1400px;
-  background: rgba(10, 20, 40, 0.85);
-  border-radius: 20px;
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  border: 1px solid rgba(100, 180, 255, 0.3);
-  padding: 30px;
-  position: relative;
-}
-
 .header {
   text-align: right;
-  margin-bottom: 30px;
   position: relative;
+  flex-shrink: 0; /* 防止收缩 */
 }
 
 .back-button {
@@ -718,14 +844,14 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 40px;
   flex-wrap: wrap;
   gap: 30px;
   background: rgba(0, 40, 80, 0.3);
   border-radius: 15px;
-  padding: 25px;
+  padding: 10px;
   border: 1px solid rgba(64, 158, 255, 0.4);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
 }
 
 .tray-display {
@@ -795,12 +921,7 @@ body {
 }
 
 .devices-grid-container {
-  margin-bottom: 40px;
-  background: rgba(0, 40, 80, 0.3);
-  border-radius: 15px;
   padding: 25px;
-  border: 1px solid rgba(64, 158, 255, 0.4);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }
 
 .grid-title {
@@ -881,13 +1002,6 @@ body {
   color: rgba(255, 255, 255, 0.6);
 }
 
-.binding-controls {
-  display: flex;
-  justify-content: center;
-  gap: 30px;
-  margin-top: 40px;
-}
-
 .bind-btn {
   background: linear-gradient(to right, #11998e, #38ef7d);
   color: white;
@@ -937,30 +1051,6 @@ body {
   box-shadow: 0 8px 20px rgba(255, 65, 108, 0.5);
 }
 
-.instructions {
-  background: rgba(0, 30, 60, 0.4);
-  border-radius: 15px;
-  padding: 25px;
-  margin-top: 40px;
-  border: 1px solid rgba(100, 200, 255, 0.3);
-}
-
-.instructions h3 {
-  color: #64ffda;
-  margin-bottom: 15px;
-  font-size: 1.5rem;
-}
-
-.instructions ul {
-  padding-left: 25px;
-}
-
-.instructions li {
-  margin-bottom: 10px;
-  line-height: 1.6;
-  color: #a0d2ff;
-}
-
 .scanner-icon {
   color: #64ffda;
   animation: pulse 2s infinite;
@@ -998,6 +1088,19 @@ body {
   .tray-display, .scan-section {
     min-width: 100%;
   }
+
+  .binding-controls {
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .bind-btn, .reset-btn, .unbind-btn {
+    padding: 15px 30px;
+    font-size: 1.2rem;
+    width: 80%;
+    justify-content: center;
+  }
 }
 
 @media (max-width: 600px) {
@@ -1010,9 +1113,10 @@ body {
     text-align: center;
   }
 
-  .bind-btn, .reset-btn {
-    padding: 15px 30px;
-    font-size: 1.2rem;
+  .bind-btn, .reset-btn, .unbind-btn {
+    padding: 12px 25px;
+    font-size: 1.1rem;
+    width: 90%;
   }
 }
 
@@ -1133,6 +1237,7 @@ body {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(157, 78, 221, 0.5);
 }
+
 /* 托盘状态区域 */
 .tray-status {
   display: flex;