1托盘查询加了一个老化开始时间

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

@@ -33,6 +33,7 @@
       <!-- 带滚动条的表格容器 -->
       <div class="table-scroll-container">
         <el-table
+          ref="trayTable"
           :data="filteredTrays"
           border
           style="width: 100%"
@@ -42,13 +43,29 @@
           :header-cell-style="headerCellStyle"
           :cell-style="cellStyle"
           height="100%"
+          :row-key="getRowKey"
+        >
+          <!-- 固定列：托盘编号 -->
+          <el-table-column
+            prop="trayId"
+            label="托盘编号"
+            align="center"
+            fixed="left"
+            width="150px"
           >
-          <el-table-column prop="trayId" label="托盘编号" align="center">
             <template slot-scope="scope">
               <div class="tray-id">{{ scope.row.fTrayCode }}</div>
             </template>
           </el-table-column>
-          <el-table-column prop="status" label="状态" align="center">
+
+          <!-- 固定列：状态 -->
+          <el-table-column
+            prop="status"
+            label="状态"
+            align="center"
+            fixed="left"
+            width="150px"
+          >
             <template slot-scope="scope">
               <el-tag :type="statusTagType(scope.row.fStatus)" v-if="scope.row.fStatus === '1'" class="status-tag">运行中</el-tag>
               <el-tag :type="statusTagType(scope.row.fStatus)" v-else-if="scope.row.fStatus === '2'" class="status-tag">老化完成</el-tag>
@@ -57,12 +74,22 @@
               <el-tag :type="statusTagType(scope.row.fStatus)" v-else class="status-tag">空闲</el-tag>
             </template>
           </el-table-column>
+
+          <!-- 可滚动列：老化开始时间 -->
           <el-table-column prop="fAgingStartTime" label="老化开始时间" align="center" width="200px">
             <template slot-scope="scope">
               <div class="device-code">{{ scope.row.fAgingStartTime ? formatDate(scope.row.fAgingStartTime) : '-' }}</div>
             </template>
           </el-table-column>
-          <el-table-column prop="boardCount" label="主板数量" align="center">
+
+          <!-- 可滚动列：预计老化结束时间 -->
+          <el-table-column prop="fAgingStartTime" label="预计老化结束时间" align="center" width="200px">
+            <template slot-scope="scope">
+              <div class="device-code">{{ scope.row.fAgingStartTime ? formatDate(scope.row.fAgingStartTime) : '-' }}</div>
+            </template>
+          </el-table-column>
+          <!-- 可滚动列：主板数量 -->
+          <el-table-column prop="boardCount" label="主板数量" align="center" width="150px">
             <template slot-scope="scope">
               <div class="board-count">
                 <span class="count-number">{{ (scope.row.boardCount == null || scope.row.boardCount == 0) ? '0' : scope.row.boardCount }}</span>
@@ -70,6 +97,8 @@
               </div>
             </template>
           </el-table-column>
+
+          <!-- 可滚动列：位置 -->
           <el-table-column prop="location" label="位置" align="center">
             <template slot-scope="scope">
               <div class="location-text">{{ scope.row.fStoreyCode }}</div>
@@ -97,6 +126,7 @@
 <script>
 import { listTray } from "@/api/tray/tray"
 import {formatDate} from "@/utils";
+
 export default {
   name: "TrayInformation",
   data() {
@@ -117,6 +147,17 @@ export default {
   created() {
     this.fetchTrays();
   },
+  mounted() {
+    // 监听窗口大小变化，调整表格布局
+    window.addEventListener('resize', this.handleResize);
+    // 初始化时也计算一次
+    this.$nextTick(() => {
+      this.adjustTableLayout();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+  },
   computed: {
     // 表格头部样式
     headerCellStyle() {
@@ -128,10 +169,6 @@ export default {
         'border-bottom': '1px solid rgba(64, 158, 255, 0.5)',
         'height': '60px',
         'padding': '0 15px',
-        // 关键：固定表头的样式设置
-        'position': 'sticky',
-        'top': '0',
-        'z-index': '3'
       }
     },
     // 表格单元格样式
@@ -148,7 +185,7 @@ export default {
       let filtered = this.trays;
       if (this.searchKeyword) {
         filtered = filtered.filter(tray =>
-          tray.trayId.includes(this.searchKeyword)
+          tray.fTrayCode && tray.fTrayCode.includes(this.searchKeyword)
         );
       }
       return filtered;
@@ -159,12 +196,22 @@ export default {
     formatDate(date) {
       return formatDate(date, "yyyy-MM-dd HH:mm:ss");
     },
+
+    // 获取行唯一键
+    getRowKey(row) {
+      return row.fTrayCode || row.trayId;
+    },
+
     // 获取托盘数据
     fetchTrays() {
       listTray(this.queryParams).then(response => {
         this.trays = response.rows;
         this.total = response.total;
         this.loading = false;
+        // 数据加载完成后调整表格布局
+        this.$nextTick(() => {
+          this.adjustTableLayout();
+        });
       })
     },
 
@@ -184,7 +231,7 @@ export default {
       return 'clickable-row';
     },
 
-// 状态标签类型
+    // 状态标签类型
     statusTagType(status) {
       const statusMap = {
         '0': 'info',       // 空闲 - 灰色
@@ -207,6 +254,45 @@ export default {
       this.queryParams.pageNum = val;
       this.fetchTrays();
     },
+
+    // 窗口大小变化处理
+    handleResize() {
+      this.adjustTableLayout();
+    },
+
+    // 调整表格布局
+    adjustTableLayout() {
+      // 确保表格填满容器宽度，避免大屏幕留白
+      const tableContainer = this.$el.querySelector('.tray-table-container');
+      if (tableContainer) {
+        const containerWidth = tableContainer.clientWidth;
+        // 计算所有列的总宽度
+        const fixedColsWidth = 150 + 120; // 固定列宽度
+        const scrollableColsWidth = 200 + 200 + 130 + 150; // 可滚动列宽度
+        const totalColsWidth = fixedColsWidth + scrollableColsWidth;
+
+        // 如果容器宽度大于列总宽度，自动调整可滚动列宽度
+        if (containerWidth > totalColsWidth) {
+          // 计算额外的可用宽度
+          const extraWidth = containerWidth - totalColsWidth;
+          // 按比例分配给可滚动列
+          const widthPerCol = extraWidth / 4; // 有4个可滚动列
+
+          // 更新可滚动列的宽度
+          this.updateScrollableColumnsWidth(widthPerCol);
+        }
+      }
+    },
+
+    // 更新可滚动列宽度
+    updateScrollableColumnsWidth(extraWidth) {
+      // 更新列宽度
+      const table = this.$refs.trayTable;
+      if (table && table.columns) {
+        // 这里主要是样式调整，实际列宽会在CSS中控制
+        // 我们通过CSS来确保表格填满容器
+      }
+    }
   }
 }
 </script>
@@ -329,19 +415,21 @@ export default {
   border: 1px solid rgba(64, 158, 255, 0.3);
   box-shadow: 0 0 20px rgba(0, 153, 255, 0.15);
   margin-top: 10px;
+  min-width: 0; /* 关键：防止flex容器溢出 */
 }
 
-/* 表格滚动容器 */
+/* 表格滚动容器 - 关键修改：支持水平滚动 */
 .table-scroll-container {
   flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: auto; /* 改为auto，同时支持水平和垂直滚动 */
   position: relative;
+  width: 100%;
 }
 
-/* 自定义滚动条样式，与整体风格统一 */
+/* 自定义滚动条样式 */
 .table-scroll-container::-webkit-scrollbar {
-  width: 8px;
+  width: 10px; /* 垂直滚动条宽度 */
+  height: 10px; /* 水平滚动条高度 */
 }
 
 .table-scroll-container::-webkit-scrollbar-track {
@@ -360,28 +448,44 @@ export default {
   box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
 }
 
-.table-scroll-container::-webkit-scrollbar-button {
-  display: none;
+.table-scroll-container::-webkit-scrollbar-corner {
+  background: rgba(10, 35, 80, 0.5);
 }
 
-/* 表格样式 */
+/* 表格样式 - 关键修改：确保表格填满容器 */
 .tray-table >>> .el-table {
   background: transparent;
   color: #e0f0ff;
   border-radius: 10px 10px 0 0;
   overflow: hidden;
-  width: 100%;
+  width: 100% !important; /* 确保表格宽度100% */
+  min-width: auto !important; /* 移除最小宽度限制 */
+  table-layout: auto !important; /* 使用自动布局，让列宽自适应 */
+}
+
+/* 固定列样式 */
+.tray-table >>> .el-table__fixed,
+.tray-table >>> .el-table__fixed-right {
+  box-shadow: 0 0 10px rgba(0, 100, 255, 0.2);
+  z-index: 2;
+}
+
+.tray-table >>> .el-table__fixed::before,
+.tray-table >>> .el-table__fixed-right::before {
+  background-color: transparent;
 }
 
-/* 表头样式增强 - 确保固定效果 */
-.tray-table >>> .el-table__header {
-  overflow: visible !important;
+.tray-table >>> .el-table th.is-fixed-left,
+.tray-table >>> .el-table th.is-fixed-right {
+  background: linear-gradient(to bottom, rgba(10, 35, 80, 0.95), rgba(8, 28, 65, 0.95));
 }
 
-.tray-table >>> .el-table__header-wrapper {
-  overflow: visible !important;
+.tray-table >>> .el-table td.is-fixed-left,
+.tray-table >>> .el-table td.is-fixed-right {
+  background: rgba(8, 28, 65, 0.7);
 }
 
+/* 表头样式 */
 .tray-table >>> .el-table th {
   background: linear-gradient(to bottom, rgba(10, 35, 80, 0.9), rgba(8, 28, 65, 0.9));
   color: #a0d0ff;
@@ -389,18 +493,22 @@ export default {
   font-weight: bold;
   border-bottom: 1px solid rgba(64, 158, 255, 0.5);
   height: 60px;
-  /* 关键：表头固定的核心样式 */
-  position: sticky !important;
-  top: 0 !important;
-  z-index: 3 !important;
-  /* 防止表头边框在滚动时被遮挡 */
-  box-shadow: 0 1px 0 rgba(64, 158, 255, 0.5);
+  white-space: nowrap; /* 防止表头文字换行 */
+  min-width: 0; /* 允许表头列收缩 */
 }
 
-/* 处理表格边框在滚动时的显示问题 */
-.tray-table >>> .el-table__body-wrapper {
-  position: relative;
-  z-index: 1;
+/* 大屏幕优化：列宽自适应 */
+@media (min-width: 1200px) {
+  .tray-table >>> .el-table th,
+  .tray-table >>> .el-table td {
+    min-width: 0; /* 允许列宽自适应 */
+    max-width: none; /* 移除最大宽度限制 */
+  }
+
+  /* 可滚动列宽度自适应 */
+  .tray-table >>> .el-table .el-table__body-wrapper .el-table__body td:not(.is-fixed-left):not(.is-fixed-right) {
+    min-width: 120px; /* 设置一个最小宽度 */
+  }
 }
 
 .tray-table >>> .el-table tr {
@@ -418,26 +526,15 @@ export default {
   border-bottom: 1px solid rgba(64, 158, 255, 0.2);
   padding: 16px 15px;
   font-size: 15px;
+  white-space: nowrap; /* 防止单元格内容换行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0; /* 允许单元格内容自适应 */
 }
 
-.tray-table >>> .el-table--border {
-  border: none;
-}
-
-.tray-table >>> .el-table--border th,
-.tray-table >>> .el-table--border td {
-  border-right: 1px solid rgba(64, 158, 255, 0.2);
-}
-
-.tray-table >>> .el-table--border th:last-child,
-.tray-table >>> .el-table--border td:last-child {
-  border-right: none;
-}
-
-.tray-table >>> .el-table--border::after,
-.tray-table >>> .el-table--group::after,
-.tray-table >>> .el-table::before {
-  background-color: rgba(64, 158, 255, 0.3);
+/* 行点击样式 */
+.clickable-row {
+  cursor: pointer;
 }
 
 /* 表格内容样式 */
@@ -477,10 +574,9 @@ export default {
 
 .location-text {
   color: #a0d0ff;
-}
-
-.clickable-row {
-  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 /* 分页样式 */
@@ -491,6 +587,7 @@ export default {
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  flex-shrink: 0; /* 防止分页区域被压缩 */
 }
 
 .pagination-container >>> .el-pagination {
@@ -560,10 +657,6 @@ export default {
   .search-input {
     width: 250px;
   }
-
-  .table-scroll-container {
-    max-height: calc(100vh - 300px);
-  }
 }
 
 @media (max-width: 800px) {
@@ -589,10 +682,6 @@ export default {
     padding: 12px 8px;
     font-size: 14px;
   }
-
-  .table-scroll-container {
-    max-height: calc(100vh - 340px);
-  }
 }
 
 @media (max-width: 500px) {
@@ -627,9 +716,26 @@ export default {
     min-width: 60px;
     font-size: 12px;
   }
+}
+
+/* 大屏幕优化：填满容器，避免留白 */
+@media (min-width: 1400px) {
+  .tray-table-container {
+    min-width: 100%;
+  }
 
   .table-scroll-container {
-    max-height: calc(100vh - 320px);
+    overflow-x: hidden; /* 大屏幕上如果宽度足够，隐藏水平滚动条 */
+  }
+
+  .tray-table >>> .el-table {
+    table-layout: fixed !important; /* 大屏幕上使用固定布局，确保列宽平均分配 */
+  }
+
+  /* 在大屏幕上平均分配列宽 */
+  .tray-table >>> .el-table .el-table__body-wrapper .el-table__body td:not(.is-fixed-left):not(.is-fixed-right) {
+    width: calc((100% - 270px) / 4) !important; /* 4个可滚动列平均分配剩余宽度 */
+    min-width: 150px; /* 保持最小宽度 */
   }
 }
 </style>