修改原材仓和成品仓看板,新增try看板

.env.dev

@@ -8,7 +8,8 @@ VUE_APP_TITLE = WMS开发环境
 # VUE_APP_BASE_API = 'http://192.168.1.94:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.26:48080'
 # VUE_APP_BASE_API = 'http://113.105.183.190:48028'
-VUE_APP_BASE_API = 'http://113.105.183.190:15980'
+VUE_APP_BASE_API = 'http://113.105.183.190:48159'
+# VUE_APP_BASE_API = 'http://113.105.183.190:15980'
 # VUE_APP_BASE_API = 'http://61.155.26.34:36936'
 # VUE_APP_BASE_API = 'http://127.0.0.1:48080'
 # VUE_APP_BASE_API = 'http://2227el9013.iok.la'

src/views/bulletinBoard/components/queryNew.vue

@@ -57,7 +57,6 @@
       border
       :row-style="rowStyle"
       show-overflow-tooltip
-      style="font-size: 8px"
       @selection-change="handleSelectionChange"
       @header-dragend="handleResize"
     >
@@ -1212,4 +1211,26 @@ export default {
   border: none !important; /* 完全移除边框 */
   margin: 0 1px; /* 用微小外边距替代视觉分隔 */
 }
+/* ========= 表头字体大小设置 ========= */
+>>> .el-table th > .cell {
+  font-size: 4px !important; /* 表头字体大小 */
+  font-weight: 600; /* 字体粗细：normal(400), bold(700) */
+  color: #fff !important; /* 确保颜色为白色 */
+}
+
+/* 表头行高调整（配合字体大小） */
+>>> .el-table th {
+  height: 24px !important; /* 减小表头高度 */
+  padding: 0 !important;
+}
+
+/* 表格内容字体大小 */
+>>> .el-table td > .cell {
+  font-size: 4px !important; /* 表格内容字体可以更小 */
+}
+
+/* 表格整体字体 */
+>>> .el-table {
+  font-size: 5px !important; /* 全局字体基准 */
+}
 </style>

src/views/bulletinBoard/components/queryNew1.vue

@@ -1,27 +1,25 @@
 <template>
-  <!-- 唯一根节点：el-card -->
   <el-card
     class="el-content-wrap mb-3px"
     shadow="never"
     style="height: 100%; display: flex; flex-direction: column"
   >
-    <!-- 原 content-wrap 的 slot 内容 -->
     <el-row class="mb-10px" style="flex-shrink: 0">
       <!-- 按钮区域已注释 -->
     </el-row>
 
-    <!-- 表格 - 设置高度为100%以撑满剩余空间 -->
+    <!-- 表格 -->
     <el-table
       id="table_excel"
       ref="tableRef"
       v-loading="loading"
-      class="dark-panel"
+      class="dark-panel auto-scroll-table"
       :data="list"
       border
       :row-style="rowStyle"
       :cell-style="cellStyle"
       height="100%"
-      style="font-size: 11px; flex: 1"
+      style="font-size: 9px; flex: 1"
       show-overflow-tooltip
       @selection-change="handleSelectionChange"
       @header-dragend="handleResize"
@@ -30,9 +28,9 @@
         v-if="showMultipleList.length"
         key="selection-column"
         type="selection"
-        width="45"
+        width="40"
       />
-      <el-table-column type="index" width="45" align="center" />
+      <el-table-column type="index" width="40" align="center" />
 
       <template v-for="(item, i) in queryData">
         <el-table-column
@@ -41,17 +39,19 @@
           :label="item.columnComment"
           :prop="item.columnComment"
           align="center"
-          :min-width="item.javaField || ''"
+          :min-width="item.javaField || '120'"
           :sortable="false"
           show-overflow-tooltip
         >
           <template slot="header">
-            <div class="mr-5px flex items-center" style="font-size: 11px">
-              <!-- 排序图标 -->
+            <div
+              class="mr-5px flex items-center"
+              style="font-size: 9px; white-space: nowrap"
+            >
               <div v-show="item.ifSort" class="mr-5px flex flex-col gap-0">
                 <i
                   class="el-icon-caret-top"
-                  style="font-size: 12px; cursor: pointer"
+                  style="font-size: 10px; cursor: pointer"
                   :class="{
                     'is-sort':
                       currentSortField === item.columnComment &&
@@ -60,9 +60,8 @@
                   @click="handleSort(item.columnComment, 'asc')"
                 />
                 <i
-                  ref=""
                   class="el-icon-caret-bottom -mt-1.2"
-                  style="font-size: 12px; cursor: pointer"
+                  style="font-size: 10px; cursor: pointer"
                   :class="{
                     'is-sort':
                       currentSortField === item.columnComment &&
@@ -71,8 +70,7 @@
                   @click="handleSort(item.columnComment, 'desc')"
                 />
               </div>
-
-              <span>{{ item.columnComment }}</span>
+              <span style="font-size: 9px">{{ item.columnComment }}</span>
             </div>
           </template>
 
@@ -105,7 +103,7 @@
       </template>
     </el-table>
 
-    <!-- 分页 - 仅在刷新时间为0时显示 -->
+    <!-- 分页 -->
     <pagination
       v-show="total > 0 && refreshMin == 0"
       :total="total"
@@ -176,6 +174,11 @@ export default {
       filterKey: 0,
       filterAlive: true,
       autoPageTimer: null,
+      // 新增：横向滚动相关（单向向左）
+      autoScrollTimer: null,
+      isHovering: false,
+      scrollStep: 2, // 每次滚动像素（向左移动速度）
+      scrollInterval: 200, // 滚动间隔(ms)
     };
   },
   watch: {
@@ -196,10 +199,22 @@ export default {
       },
       immediate: true,
     },
+    // 监听数据变化，重新计算是否需要滚动
+    list: {
+      handler() {
+        this.$nextTick(() => {
+          this.initAutoScroll();
+        });
+      },
+      deep: true,
+    },
   },
   mounted() {
     this.init();
     this.startAutoPage();
+    this.$nextTick(() => {
+      this.initAutoScroll();
+    });
   },
   activated() {
     this.init();
@@ -207,11 +222,92 @@ export default {
   beforeDestroy() {
     this.stopAutoPage();
     this.saveColumnWidth();
+    this.stopAutoScroll(); // 清理横向滚动定时器
   },
   created() {
     this.baseUrl = process.env.VUE_APP_REPORT_API;
   },
   methods: {
+    /* ========== 新增：横向自动滚动方法（单向向左，跳回式） ========== */
+
+    // 初始化自动滚动
+    initAutoScroll() {
+      this.stopAutoScroll();
+
+      const tableBody = this.getTableBodyWrapper();
+      if (!tableBody) return;
+
+      // 检查是否需要横向滚动
+      const hasHorizontalScroll = tableBody.scrollWidth > tableBody.clientWidth;
+      if (!hasHorizontalScroll) return; // 不需要滚动
+
+      // 绑定鼠标事件
+      this.bindHoverEvents(tableBody);
+
+      // 启动自动滚动（从右往左）
+      this.startAutoScroll(tableBody);
+    },
+
+    // 获取表格body容器
+    getTableBodyWrapper() {
+      const tableRef = this.$refs.tableRef;
+      if (!tableRef) return null;
+      return tableRef.$el.querySelector(".el-table__body-wrapper");
+    },
+
+    // 绑定鼠标悬停事件
+    bindHoverEvents(tableBody) {
+      // 移除旧事件
+      tableBody.removeEventListener("mouseenter", this.handleMouseEnter);
+      tableBody.removeEventListener("mouseleave", this.handleMouseLeave);
+
+      // 添加新事件
+      this.handleMouseEnter = () => {
+        this.isHovering = true;
+      };
+      this.handleMouseLeave = () => {
+        this.isHovering = false;
+      };
+
+      tableBody.addEventListener("mouseenter", this.handleMouseEnter);
+      tableBody.addEventListener("mouseleave", this.handleMouseLeave);
+    },
+
+    // 开始自动滚动（单向向左）
+    startAutoScroll(tableBody) {
+      // 初始位置：最右侧（显示最后面的列）
+      tableBody.scrollLeft = tableBody.scrollWidth - tableBody.clientWidth;
+
+      this.autoScrollTimer = setInterval(() => {
+        if (this.isHovering) return; // 鼠标悬停时暂停
+
+        // 继续向左滚动
+        tableBody.scrollLeft -= this.scrollStep;
+
+        // 检查是否到达最左侧（考虑浮点数精度问题）
+        if (tableBody.scrollLeft <= 0) {
+          // 瞬间跳回最右侧
+          tableBody.scrollLeft = tableBody.scrollWidth - tableBody.clientWidth;
+        }
+      }, this.scrollInterval);
+    },
+
+    // 停止自动滚动
+    stopAutoScroll() {
+      if (this.autoScrollTimer) {
+        clearInterval(this.autoScrollTimer);
+        this.autoScrollTimer = null;
+      }
+      // 清理事件监听
+      const tableBody = this.getTableBodyWrapper();
+      if (tableBody && this.handleMouseEnter) {
+        tableBody.removeEventListener("mouseenter", this.handleMouseEnter);
+        tableBody.removeEventListener("mouseleave", this.handleMouseLeave);
+      }
+    },
+
+    /* ========== 原有方法保持不变 ========== */
+
     async init() {
       this.title =
         this.$route.query?.name ||
@@ -884,7 +980,7 @@ export default {
 
     // 修改后的 rowStyle - 添加固定行高
     rowStyle({ row }) {
-      const baseStyle = { height: "28px" };
+      const baseStyle = { height: "24px" };
       if (row.colorControl) {
         return {
           ...baseStyle,
@@ -897,8 +993,8 @@ export default {
     // 新增 cellStyle - 控制单元格内边距
     cellStyle() {
       return {
-        padding: "2px 0",
-        fontSize: "11px",
+        padding: "1px 2px",
+        fontSize: "9px",
       };
     },
   },
@@ -927,40 +1023,56 @@ export default {
 }
 
 /* ---------- 表格样式优化 ---------- */
-/* 行高设置 - 修改为28px */
+/* 行高设置 - 修改为24px */
 :deep(.el-table__row) {
-  height: 28px !important;
+  height: 24px !important;
 }
 
 /* 单元格样式 */
 :deep(.el-table .cell) {
-  line-height: 24px !important;
-  padding: 2px 4px !important;
-  font-size: 11px !important;
+  line-height: 20px !important;
+  padding: 1px 2px !important;
+  font-size: 9px !important;
+  white-space: nowrap !important; /* 防止文字换行 */
 }
 
 /* 表头样式 */
 :deep(.el-table th) {
-  height: 28px !important;
+  height: 24px !important;
   padding: 0 !important;
 }
 
 :deep(.el-table th > .cell) {
-  line-height: 28px !important;
-  font-size: 11px !important;
+  line-height: 24px !important;
+  font-size: 9px !important;
   font-weight: 600;
+  white-space: nowrap !important;
 }
 
 /* 表格整体字体 */
 :deep(.el-table) {
-  font-size: 11px !important;
+  font-size: 9px !important;
 }
 
 /* 选中列和索引列宽度调整 */
 :deep(.el-table-column--selection),
 :deep(.el-table-column--index) {
-  width: 45px !important;
-  min-width: 45px !important;
+  width: 40px !important;
+  min-width: 40px !important;
+}
+
+/* 横向滚动条样式 - 隐藏但保留滚动功能 */
+:deep(.el-table__body-wrapper::-webkit-scrollbar) {
+  height: 3px !important;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-radius: 2px !important;
+}
+
+:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
+  background-color: transparent !important;
 }
 
 .active:hover {
@@ -1053,4 +1165,74 @@ export default {
   background-color: rgba(255, 255, 255, 0.15) !important;
   color: #fff !important;
 }
+
+/* 分页组件自适应样式 */
+>>> .pagination-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  min-height: 28px;
+}
+
+>>> .pagination-container .el-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+}
+
+>>> .el-pagination .el-pager {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  gap: 2px;
+}
+
+>>> .el-pagination.is-background .el-pager li {
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 11px;
+  padding: 0 2px;
+  border: 1px solid rgba(255, 255, 255, 0.25) !important;
+}
+
+>>> .el-pagination .el-pagination__sizes {
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+
+>>> .el-pagination .el-pagination__jump {
+  flex-shrink: 0;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+/* 响应式处理 */
+@media screen and (max-width: 768px) {
+  >>> .pagination-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  >>> .pagination-container .el-pagination {
+    justify-content: center;
+  }
+
+  >>> .el-pagination .el-pager {
+    justify-content: center;
+  }
+}
+
+/* 移除页码按钮边框以节省空间 */
+>>> .el-pagination.is-background .el-pager li {
+  border: none !important;
+  margin: 0 1px;
+}
 </style>

src/views/bulletinBoard/try/index.vue

@@ -0,0 +1,988 @@
+<template>
+  <div class="app-container">
+    <!-- 控制栏 -->
+    <div class="control-bar">
+      <span class="control-label">刷新时间（秒，输入0关闭刷新）</span>
+      <el-input
+        v-model="num"
+        class="refresh-input"
+        placeholder="请添加刷新时间"
+        :min="1"
+        type="number"
+        @change="handleChange"
+      />
+    </div>
+
+    <!-- 标题 -->
+    <div class="header-section">
+      <DashboardHeader height="100%" content="成品仓看板" />
+    </div>
+
+    <!-- 列表区域 -->
+    <div class="content-section">
+      <div class="grid-container">
+        <!-- 成品待入库列表 -->
+        <div class="grid-item">
+          <el-card header="成品待入库列表" shadow="hover" class="list-card">
+            <div ref="wrapper_preRollPass" class="table-wrapper">
+              <el-table
+                v-loading="loading.preRollPass"
+                :data="tableData.preRollPass"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="入库数量"
+                  label="入库数量"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                />
+                <el-table-column
+                  prop="预计入库时间"
+                  label="预计入库时间"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["预计入库时间"])
+                  }}</template>
+                </el-table-column>
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.preRollPass || 1 }} /
+                {{
+                  Math.max(1, Math.ceil((total.preRollPass || 0) / pageSize))
+                }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 每日入库信息列表 -->
+        <div class="grid-item">
+          <el-card header="每日入库信息列表" shadow="hover" class="list-card">
+            <div ref="wrapper_mergedPreRollPass" class="table-wrapper">
+              <el-table
+                v-loading="loading.mergedPreRollPass"
+                :data="tableData.mergedPreRollPass"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="申请单号"
+                  label="申请单号"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="业务类型"
+                  label="业务类型"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="业务分类"
+                  label="业务分类"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="入库数量"
+                  label="入库数量"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="入库时间"
+                  label="入库时间"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["入库时间"])
+                  }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="审核人"
+                  label="审核人"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.mergedPreRollPass || 1 }} /
+                {{
+                  Math.max(
+                    1,
+                    Math.ceil((total.mergedPreRollPass || 0) / pageSize)
+                  )
+                }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 每日出库信息列表 -->
+        <div class="grid-item">
+          <el-card header="每日出库信息列表" shadow="hover" class="list-card">
+            <div ref="wrapper_rollUp" class="table-wrapper">
+              <el-table
+                v-loading="loading.rollUp"
+                :data="tableData.rollUp"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="申请单号"
+                  label="申请单号"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="业务类型"
+                  label="业务类型"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="业务分类"
+                  label="业务分类"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                />
+                <el-table-column
+                  prop="出库数量"
+                  label="出库数量"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                />
+                <el-table-column
+                  prop="出库时间"
+                  label="出库时间"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["出库时间"])
+                  }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="审核人"
+                  label="审核人"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.rollUp || 1 }} /
+                {{ Math.max(1, Math.ceil((total.rollUp || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 库存呆滞料列表 -->
+        <div class="grid-item">
+          <el-card header="库存呆滞料列表" shadow="hover" class="list-card">
+            <div ref="wrapper_finalPass" class="table-wrapper">
+              <el-table
+                v-loading="loading.finalPass"
+                :data="tableData.finalPass"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="规格型号"
+                  label="规格型号"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                />
+                <el-table-column
+                  prop="在库数量"
+                  label="在库数量"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                />
+                <el-table-column
+                  prop="批次号"
+                  label="批次号"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                />
+                <el-table-column
+                  prop="库存天数"
+                  label="库存天数"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                />
+                <el-table-column
+                  prop="创建日期"
+                  label="创建日期"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["创建日期"])
+                  }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="生产日期"
+                  label="生产日期"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["生产日期"])
+                  }}</template>
+                </el-table-column>
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.finalPass || 1 }} /
+                {{ Math.max(1, Math.ceil((total.finalPass || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 客退列表 -->
+        <div class="grid-item">
+          <el-card header="客退列表" shadow="hover" class="list-card">
+            <div ref="wrapper_slitting" class="table-wrapper">
+              <el-table
+                v-loading="loading.slitting"
+                :data="tableData.slitting"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="申请单号"
+                  label="申请单号"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="数量"
+                  label="数量"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="状态"
+                  label="状态"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                />
+                <el-table-column
+                  prop="审核人"
+                  label="审核人"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.slitting || 1 }} /
+                {{ Math.max(1, Math.ceil((total.slitting || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardHeader from "@/views/bulletinBoard/components/dashboardHeader.vue";
+import DictTag from "@/components/DictTag";
+import screenfull from "screenfull";
+import * as QueryManageApi from "@/api/mes/queryManage";
+
+export default {
+  name: "TraceResult",
+  components: { DashboardHeader, DictTag },
+  data() {
+    return {
+      num: 10,
+      pageSize: 5,
+
+      tableData: {
+        preRollPass: [],
+        mergedPreRollPass: [],
+        rollUp: [],
+        finalPass: [],
+        slitting: [],
+      },
+
+      loading: {
+        preRollPass: false,
+        mergedPreRollPass: false,
+        rollUp: false,
+        finalPass: false,
+        slitting: false,
+      },
+
+      pageNo: {
+        preRollPass: 1,
+        mergedPreRollPass: 1,
+        rollUp: 1,
+        finalPass: 1,
+        slitting: 1,
+      },
+
+      total: {
+        preRollPass: 0,
+        mergedPreRollPass: 0,
+        rollUp: 0,
+        finalPass: 0,
+        slitting: 0,
+      },
+
+      autoTimers: {},
+      resizeTimer: null,
+      wrapperWidths: {},
+
+      colCounts: {
+        preRollPass: 5,
+        mergedPreRollPass: 9,
+        rollUp: 9,
+        finalPass: 9,
+        slitting: 7,
+      },
+
+      tabs: [
+        { name: "preRollPass", documentId: "2005529291432038402" },
+        { name: "mergedPreRollPass", documentId: "2005530261935263746" },
+        { name: "rollUp", documentId: "2005530339370504194" },
+        { name: "finalPass", documentId: "2005530481674850305" },
+        { name: "slitting", documentId: "2005540102913298433" },
+      ],
+    };
+  },
+  watch: {
+    num() {
+      this.restartAllAutoPage();
+    },
+  },
+  mounted() {
+    this.init();
+    this.enterFullScreen();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    this.clearAllTimers();
+    window.removeEventListener("resize", this.handleResize);
+    clearTimeout(this.resizeTimer);
+  },
+  methods: {
+    async init() {
+      this.$nextTick(() => {
+        this.updateWrapperWidths();
+      });
+
+      for (const tab of this.tabs) {
+        await this.loadTableData(tab);
+      }
+      this.startAllAutoPage();
+    },
+
+    updateWrapperWidths() {
+      this.tabs.forEach((tab) => {
+        const wrapper = this.$refs[`wrapper_${tab.name}`];
+        if (wrapper) {
+          const rect = wrapper.getBoundingClientRect();
+          this.$set(this.wrapperWidths, tab.name, Math.floor(rect.width));
+        }
+      });
+    },
+
+    getIndexWidth() {
+      return 25;
+    },
+
+    getColWidth(tableName) {
+      let containerWidth = this.wrapperWidths[tableName];
+
+      if (!containerWidth) {
+        const wrapper = this.$refs[`wrapper_${tableName}`];
+        if (wrapper) {
+          const rect = wrapper.getBoundingClientRect();
+          containerWidth = Math.floor(rect.width);
+          this.$set(this.wrapperWidths, tableName, containerWidth);
+        } else {
+          containerWidth = 280;
+        }
+      }
+
+      const colCount = this.colCounts[tableName] || 7;
+      const indexWidth = this.getIndexWidth();
+      const borderWidth = colCount * 2;
+      const availableWidth = containerWidth - indexWidth - borderWidth - 4;
+      const dataColCount = colCount - 1;
+      const avgWidth = Math.floor(availableWidth / dataColCount);
+
+      return Math.max(25, avgWidth);
+    },
+
+    handleResize() {
+      clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.updateWrapperWidths();
+        this.$forceUpdate();
+      }, 100);
+    },
+
+    async loadTableData(tab) {
+      if (this.loading[tab.name]) return;
+      try {
+        this.$set(this.loading, tab.name, true);
+        const currentPage = this.pageNo[tab.name] || 1;
+
+        const { data } = await QueryManageApi.loadTableData({
+          pageNo: currentPage,
+          pageSize: this.pageSize,
+          paramList: [],
+          id: tab.documentId,
+        });
+
+        this.$set(this.tableData, tab.name, data?.list || []);
+        this.$set(this.total, tab.name, data?.total || 0);
+
+        this.$nextTick(() => {
+          this.updateWrapperWidths();
+        });
+      } catch (error) {
+        console.error("加载数据失败:", error);
+        this.$set(this.tableData, tab.name, []);
+      } finally {
+        this.$set(this.loading, tab.name, false);
+      }
+    },
+
+    startAutoPage(tab) {
+      this.stopAutoPage(tab);
+      const ms = this.num * 1000;
+      if (!ms || ms <= 0) return;
+
+      this.autoTimers[tab.name] = setInterval(async () => {
+        const maxPage = Math.max(
+          1,
+          Math.ceil((this.total[tab.name] || 0) / this.pageSize)
+        );
+        const currentPage = this.pageNo[tab.name] || 1;
+        const nextPage = currentPage < maxPage ? currentPage + 1 : 1;
+
+        this.$set(this.pageNo, tab.name, nextPage);
+        await this.loadTableData(tab);
+      }, ms);
+    },
+
+    stopAutoPage(tab) {
+      if (this.autoTimers[tab.name]) {
+        clearInterval(this.autoTimers[tab.name]);
+        delete this.autoTimers[tab.name];
+      }
+    },
+
+    startAllAutoPage() {
+      this.tabs.forEach((tab) => this.startAutoPage(tab));
+    },
+
+    clearAllTimers() {
+      Object.keys(this.autoTimers).forEach((key) => {
+        clearInterval(this.autoTimers[key]);
+      });
+      this.autoTimers = {};
+    },
+
+    restartAllAutoPage() {
+      this.clearAllTimers();
+      this.startAllAutoPage();
+    },
+
+    formatTimestamp(val) {
+      if (!val) return "";
+      const timestamp = String(val).length === 10 ? val * 1000 : val;
+      const d = new Date(Number(timestamp));
+      if (isNaN(d.getTime())) return val;
+      const pad = (n) => String(n).padStart(2, "0");
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    },
+
+    // 行样式 - 优先使用后端返回的colorControl
+    rowStyle({ row, rowIndex }) {
+      if (row.colorControl) {
+        return {
+          backgroundColor: row.colorControl,
+        };
+      }
+      return {};
+    },
+
+    // 行类名 - 用于CSS选择器和斑马纹
+    tableRowClassName({ row, rowIndex }) {
+      if (row.colorControl) {
+        return "has-color-control";
+      }
+      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
+    },
+
+    // 单元格样式 - 优先使用后端colorControl，否则斑马纹
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      const baseStyle = {
+        padding: "1px",
+        fontSize: "3px",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        height: "12px",
+        lineHeight: "10px",
+        color: "#fff",
+      };
+
+      if (row.colorControl) {
+        return {
+          ...baseStyle,
+          backgroundColor: row.colorControl,
+        };
+      }
+
+      const bgColor = rowIndex % 2 === 0 ? "#0a1e44" : "#132a55";
+      return {
+        ...baseStyle,
+        backgroundColor: bgColor,
+      };
+    },
+
+    headerCellStyle() {
+      return {
+        padding: "1px",
+        fontSize: "3px",
+        fontWeight: 600,
+        backgroundColor: "#071b38",
+        color: "#fff",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        height: "14px",
+        lineHeight: "12px",
+      };
+    },
+
+    handleChange(v) {
+      const n = Number(v);
+      if (isNaN(n) || n < 0) {
+        this.$message.warning("请输入≥0的整数，输入0关闭刷新");
+        this.num = 10;
+        return;
+      }
+      this.num = n;
+    },
+
+    enterFullScreen() {
+      setTimeout(() => {
+        if (screenfull.isEnabled) {
+          screenfull.toggle();
+        }
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app-container {
+  background: -webkit-radial-gradient(
+    50% 35%,
+    farthest-corner,
+    #034f8e,
+    #034987,
+    #02366d,
+    #002353
+  );
+  height: 100vh;
+  width: 100vw;
+  padding: 6px 8px;
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.control-bar {
+  flex-shrink: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.control-label {
+  color: white;
+  font-weight: bold;
+  margin-right: 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.refresh-input {
+  width: 160px !important;
+}
+
+.refresh-input ::v-deep .el-input__inner {
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+.header-section {
+  flex-shrink: 0;
+  height: 32px;
+  margin-bottom: 6px;
+}
+
+.content-section {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  height: 100%;
+  width: 100%;
+}
+
+.grid-item {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.grid-item:nth-child(4) {
+  grid-column: 1 / 2;
+  justify-self: end;
+  width: 95%;
+}
+
+.grid-item:nth-child(5) {
+  grid-column: 2 / 3;
+  justify-self: start;
+  width: 95%;
+}
+
+.list-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.list-card ::v-deep .el-card__header {
+  color: #8adfec;
+  font-weight: 600;
+  background-color: #192849;
+  padding: 4px 8px;
+  height: 26px;
+  line-height: 18px;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.list-card ::v-deep .el-card__body {
+  flex: 1;
+  padding: 2px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.page-indicator {
+  text-align: center;
+  color: #8adfec;
+  font-size: 3px;
+  padding: 1px 0;
+  background-color: #192849;
+  border-top: 1px solid #1a2e5a;
+  flex-shrink: 0;
+}
+
+::v-deep .el-input__inner {
+  background: transparent !important;
+  border: 1px solid #034f8e;
+  color: #fff;
+}
+
+::v-deep .el-input__inner::placeholder {
+  color: #ccc;
+  font-size: 12px;
+}
+
+::v-deep .el-card {
+  background-color: #0a1e44 !important;
+  border: 1px solid #1a2e5a !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
+  padding: 0 !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep .el-card__header {
+  border-bottom: 1px solid #1a2e5a;
+}
+
+/* ========= 表格样式（含背景色） ========= */
+::v-deep .auto-fit-table {
+  width: 100% !important;
+  flex: 1;
+  font-size: 3px !important;
+  background-color: #0a1e44 !important;
+}
+
+::v-deep .auto-fit-table .el-table__body-wrapper,
+::v-deep .auto-fit-table .el-table__header-wrapper {
+  overflow: hidden !important;
+  background-color: #0a1e44 !important;
+}
+
+/* 空数据提示样式 */
+::v-deep .auto-fit-table .el-table__empty-block {
+  background-color: #0a1e44 !important;
+  min-height: 60px;
+}
+
+::v-deep .auto-fit-table .el-table__empty-text {
+  color: #8adfec !important;
+  font-size: 3px;
+  line-height: 60px;
+}
+
+::v-deep .auto-fit-table .el-table__body,
+::v-deep .auto-fit-table .el-table__header {
+  width: 100% !important;
+  table-layout: fixed !important;
+  background-color: #0a1e44 !important;
+}
+
+/* 表头背景色 */
+::v-deep .auto-fit-table .el-table__header th {
+  padding: 0 !important;
+  font-size: 3px !important;
+  height: auto !important;
+  line-height: 1.1;
+  font-weight: 600;
+  background-color: #071b38 !important;
+  color: #fff !important;
+}
+
+/* 单元格基础背景色 */
+::v-deep .auto-fit-table .el-table__body td {
+  padding: 0 !important;
+  font-size: 3px !important;
+  height: auto !important;
+  line-height: 1.1;
+  color: #fff !important;
+}
+
+/* 有colorControl时的行 - 背景色由inline style控制 */
+::v-deep .auto-fit-table .has-color-control td {
+  background-color: inherit !important;
+}
+
+/* 斑马纹 - 仅对没有colorControl的行生效 */
+::v-deep .auto-fit-table .even-row td {
+  background-color: #0a1e44 !important;
+}
+
+::v-deep .auto-fit-table .odd-row td {
+  background-color: #132a55 !important;
+}
+
+/* 鼠标悬停 - 有colorControl时不改变颜色 */
+::v-deep .auto-fit-table .has-color-control:hover td {
+  background-color: inherit !important;
+}
+
+::v-deep .auto-fit-table .even-row:hover td,
+::v-deep .auto-fit-table .odd-row:hover td {
+  background-color: rgba(138, 223, 236, 0.2) !important;
+}
+
+::v-deep .auto-fit-table.el-table--border,
+::v-deep .auto-fit-table.el-table--border th,
+::v-deep .auto-fit-table.el-table--border td {
+  border-color: #1a2e5a !important;
+  border-width: 1px !important;
+}
+
+::v-deep .auto-fit-table .cell {
+  font-size: 3px !important;
+  line-height: 1.1 !important;
+  padding: 0 1px !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  background-color: transparent !important;
+}
+
+::v-deep .auto-fit-table td .cell,
+::v-deep .auto-fit-table th .cell {
+  padding-left: 1px !important;
+  padding-right: 1px !important;
+}
+
+::v-deep .el-loading-mask {
+  background-color: rgba(10, 30, 68, 0.8) !important;
+}
+</style>

src/views/bulletinBoard/try/index2.vue

@@ -0,0 +1,1057 @@
+<template>
+  <div class="app-container">
+    <!-- 控制栏 -->
+    <div class="control-bar">
+      <span class="control-label">刷新时间（秒，输入0关闭刷新）</span>
+      <el-input
+        v-model="num"
+        class="refresh-input"
+        placeholder="请添加刷新时间"
+        :min="1"
+        type="number"
+        @change="handleChange"
+      />
+    </div>
+
+    <!-- 标题 -->
+    <div class="header-section">
+      <DashboardHeader height="100%" content="原材仓看板" />
+    </div>
+
+    <!-- 列表区域 - 3列2行Grid布局 -->
+    <div class="content-section">
+      <div class="grid-container">
+        <!-- 已登记未质检列表 -->
+        <div class="grid-item">
+          <el-card header="已登记未质检列表" shadow="hover" class="list-card">
+            <div ref="wrapper_preRollPass" class="table-wrapper">
+              <el-table
+                v-loading="loading.preRollPass"
+                :data="tableData.preRollPass"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="物料批次"
+                  label="物料批次"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="采购订单"
+                  label="采购订单"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                />
+                <el-table-column
+                  prop="到货数量"
+                  label="到货数量"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                />
+                <el-table-column
+                  prop="供应商名称"
+                  label="供应商名称"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                />
+                <el-table-column
+                  prop="送货单批次"
+                  label="送货单批次"
+                  align="center"
+                  :width="getColWidth('preRollPass')"
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.preRollPass || 1 }} /
+                {{
+                  Math.max(1, Math.ceil((total.preRollPass || 0) / pageSize))
+                }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 已QC通过待入库列表 -->
+        <div class="grid-item">
+          <el-card header="已QC通过待入库列表" shadow="hover" class="list-card">
+            <div ref="wrapper_mergedPreRollPass" class="table-wrapper">
+              <el-table
+                v-loading="loading.mergedPreRollPass"
+                :data="tableData.mergedPreRollPass"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="物料批次"
+                  label="物料批次"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="采购订单"
+                  label="采购订单"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="规格"
+                  label="规格"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="数量"
+                  label="数量"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="供应商编码"
+                  label="供应商编码"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+                <el-table-column
+                  prop="供应商名称"
+                  label="供应商名称"
+                  align="center"
+                  :width="getColWidth('mergedPreRollPass')"
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.mergedPreRollPass || 1 }} /
+                {{
+                  Math.max(
+                    1,
+                    Math.ceil((total.mergedPreRollPass || 0) / pageSize)
+                  )
+                }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 每日入库信息列表 -->
+        <div class="grid-item">
+          <el-card header="每日入库信息列表" shadow="hover" class="list-card">
+            <div ref="wrapper_rollUp" class="table-wrapper">
+              <el-table
+                v-loading="loading.rollUp"
+                :data="tableData.rollUp"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="业务类型"
+                  label="业务类型"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="入库数量"
+                  label="入库数量"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                />
+                <el-table-column
+                  prop="入库时间"
+                  label="入库时间"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["入库时间"])
+                  }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="审核人"
+                  label="审核人"
+                  align="center"
+                  :width="getColWidth('rollUp')"
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.rollUp || 1 }} /
+                {{ Math.max(1, Math.ceil((total.rollUp || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 每日出库信息列表 -->
+        <div class="grid-item">
+          <el-card header="每日出库信息列表" shadow="hover" class="list-card">
+            <div ref="wrapper_finalPass" class="table-wrapper">
+              <el-table
+                v-loading="loading.finalPass"
+                :data="tableData.finalPass"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="业务类型"
+                  label="业务类型"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="出库数量"
+                  label="出库数量"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                />
+                <el-table-column
+                  prop="出库时间"
+                  label="出库时间"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["出库时间"])
+                  }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="审核人"
+                  label="审核人"
+                  align="center"
+                  :width="getColWidth('finalPass')"
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.finalPass || 1 }} /
+                {{ Math.max(1, Math.ceil((total.finalPass || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 已入库原材料不良列表 -->
+        <div class="grid-item">
+          <el-card
+            header="已入库原材料不良列表"
+            shadow="hover"
+            class="list-card"
+          >
+            <div ref="wrapper_slitting" class="table-wrapper">
+              <el-table
+                v-loading="loading.slitting"
+                :data="tableData.slitting"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="申请单号"
+                  label="申请单号"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="业务类型"
+                  label="业务类型"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="入库数量"
+                  label="入库数量"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                />
+                <el-table-column
+                  prop="入库时间"
+                  label="入库时间"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["入库时间"])
+                  }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="审核人"
+                  label="审核人"
+                  align="center"
+                  :width="getColWidth('slitting')"
+                />
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.slitting || 1 }} /
+                {{ Math.max(1, Math.ceil((total.slitting || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+
+        <!-- 库存呆滞料查询 -->
+        <div class="grid-item">
+          <el-card header="库存呆滞料查询" shadow="hover" class="list-card">
+            <div ref="wrapper_annealing" class="table-wrapper">
+              <el-table
+                v-loading="loading.annealing"
+                :data="tableData.annealing"
+                border
+                class="auto-fit-table"
+                size="small"
+                :cell-style="cellStyle"
+                :row-style="rowStyle"
+                :header-cell-style="headerCellStyle"
+                :row-class-name="tableRowClassName"
+              >
+                <el-table-column
+                  type="index"
+                  :width="getIndexWidth()"
+                  align="center"
+                  label="序号"
+                />
+                <el-table-column
+                  prop="物料编码"
+                  label="物料编码"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="物料名称"
+                  label="物料名称"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="规格型号"
+                  label="规格型号"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                />
+                <el-table-column
+                  prop="在库数量"
+                  label="在库数量"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                />
+                <el-table-column
+                  prop="批次号"
+                  label="批次号"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                />
+                <el-table-column
+                  prop="库存天数"
+                  label="库存天数"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                />
+                <el-table-column
+                  prop="入库日期"
+                  label="入库日期"
+                  align="center"
+                  :width="getColWidth('annealing')"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">{{
+                    formatTimestamp(scope.row["入库日期"])
+                  }}</template>
+                </el-table-column>
+              </el-table>
+              <div v-if="num > 0" class="page-indicator">
+                {{ pageNo.annealing || 1 }} /
+                {{ Math.max(1, Math.ceil((total.annealing || 0) / pageSize)) }}
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DashboardHeader from "@/views/bulletinBoard/components/dashboardHeader.vue";
+import DictTag from "@/components/DictTag";
+import screenfull from "screenfull";
+import * as QueryManageApi from "@/api/mes/queryManage";
+
+export default {
+  name: "TraceResult",
+  components: { DashboardHeader, DictTag },
+  data() {
+    return {
+      num: 10,
+      pageSize: 5,
+
+      tableData: {
+        preRollPass: [],
+        mergedPreRollPass: [],
+        rollUp: [],
+        finalPass: [],
+        slitting: [],
+        annealing: [],
+      },
+
+      loading: {
+        preRollPass: false,
+        mergedPreRollPass: false,
+        rollUp: false,
+        finalPass: false,
+        slitting: false,
+        annealing: false,
+      },
+
+      pageNo: {
+        preRollPass: 1,
+        mergedPreRollPass: 1,
+        rollUp: 1,
+        finalPass: 1,
+        slitting: 1,
+        annealing: 1,
+      },
+
+      total: {
+        preRollPass: 0,
+        mergedPreRollPass: 0,
+        rollUp: 0,
+        finalPass: 0,
+        slitting: 0,
+        annealing: 0,
+      },
+
+      autoTimers: {},
+      resizeTimer: null,
+      wrapperWidths: {},
+
+      // 每个表格的列数（序号列+数据列）- 3列2行布局，空间较紧
+      colCounts: {
+        preRollPass: 8, // 1+7
+        mergedPreRollPass: 9, // 1+8
+        rollUp: 7, // 1+6
+        finalPass: 7, // 1+6
+        slitting: 8, // 1+7
+        annealing: 8, // 1+7
+      },
+
+      tabs: [
+        { name: "preRollPass", documentId: "2005460172242325506" },
+        { name: "mergedPreRollPass", documentId: "2005466606724091905" },
+        { name: "rollUp", documentId: "2005468337855959041" },
+        { name: "finalPass", documentId: "2005468804044460033" },
+        { name: "slitting", documentId: "2005487894289092609" },
+        { name: "annealing", documentId: "2005521571224129538" },
+      ],
+    };
+  },
+  watch: {
+    num() {
+      this.restartAllAutoPage();
+    },
+  },
+  mounted() {
+    this.init();
+    this.enterFullScreen();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    this.clearAllTimers();
+    window.removeEventListener("resize", this.handleResize);
+    clearTimeout(this.resizeTimer);
+  },
+  methods: {
+    async init() {
+      this.$nextTick(() => {
+        this.updateWrapperWidths();
+      });
+
+      for (const tab of this.tabs) {
+        await this.loadTableData(tab);
+      }
+      this.startAllAutoPage();
+    },
+
+    updateWrapperWidths() {
+      this.tabs.forEach((tab) => {
+        const wrapper = this.$refs[`wrapper_${tab.name}`];
+        if (wrapper) {
+          const rect = wrapper.getBoundingClientRect();
+          this.$set(this.wrapperWidths, tab.name, Math.floor(rect.width));
+        }
+      });
+    },
+
+    getIndexWidth() {
+      return 25;
+    },
+
+    getColWidth(tableName) {
+      let containerWidth = this.wrapperWidths[tableName];
+
+      if (!containerWidth) {
+        const wrapper = this.$refs[`wrapper_${tableName}`];
+        if (wrapper) {
+          const rect = wrapper.getBoundingClientRect();
+          containerWidth = Math.floor(rect.width);
+          this.$set(this.wrapperWidths, tableName, containerWidth);
+        } else {
+          // 3列2行布局，父容器950，每列约300，减去padding和边框
+          containerWidth = 280;
+        }
+      }
+
+      const colCount = this.colCounts[tableName] || 7;
+      const indexWidth = this.getIndexWidth();
+      const borderWidth = colCount * 2;
+      const availableWidth = containerWidth - indexWidth - borderWidth - 4;
+      const dataColCount = colCount - 1;
+      const avgWidth = Math.floor(availableWidth / dataColCount);
+
+      // 3列布局空间较紧，最小宽度35px
+      return Math.max(35, avgWidth);
+    },
+
+    handleResize() {
+      clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.updateWrapperWidths();
+        this.$forceUpdate();
+      }, 100);
+    },
+
+    async loadTableData(tab) {
+      if (this.loading[tab.name]) return;
+      try {
+        this.$set(this.loading, tab.name, true);
+        const currentPage = this.pageNo[tab.name] || 1;
+
+        const { data } = await QueryManageApi.loadTableData({
+          pageNo: currentPage,
+          pageSize: this.pageSize,
+          paramList: [],
+          id: tab.documentId,
+        });
+
+        this.$set(this.tableData, tab.name, data?.list || []);
+        this.$set(this.total, tab.name, data?.total || 0);
+
+        this.$nextTick(() => {
+          this.updateWrapperWidths();
+        });
+      } catch (error) {
+        console.error("加载数据失败:", error);
+        this.$set(this.tableData, tab.name, []);
+      } finally {
+        this.$set(this.loading, tab.name, false);
+      }
+    },
+
+    startAutoPage(tab) {
+      this.stopAutoPage(tab);
+      const ms = this.num * 1000;
+      if (!ms || ms <= 0) return;
+
+      this.autoTimers[tab.name] = setInterval(async () => {
+        const maxPage = Math.max(
+          1,
+          Math.ceil((this.total[tab.name] || 0) / this.pageSize)
+        );
+        const currentPage = this.pageNo[tab.name] || 1;
+        const nextPage = currentPage < maxPage ? currentPage + 1 : 1;
+
+        this.$set(this.pageNo, tab.name, nextPage);
+        await this.loadTableData(tab);
+      }, ms);
+    },
+
+    stopAutoPage(tab) {
+      if (this.autoTimers[tab.name]) {
+        clearInterval(this.autoTimers[tab.name]);
+        delete this.autoTimers[tab.name];
+      }
+    },
+
+    startAllAutoPage() {
+      this.tabs.forEach((tab) => this.startAutoPage(tab));
+    },
+
+    clearAllTimers() {
+      Object.keys(this.autoTimers).forEach((key) => {
+        clearInterval(this.autoTimers[key]);
+      });
+      this.autoTimers = {};
+    },
+
+    restartAllAutoPage() {
+      this.clearAllTimers();
+      this.startAllAutoPage();
+    },
+
+    formatTimestamp(val) {
+      if (!val) return "";
+      const timestamp = String(val).length === 10 ? val * 1000 : val;
+      const d = new Date(Number(timestamp));
+      if (isNaN(d.getTime())) return val;
+      const pad = (n) => String(n).padStart(2, "0");
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+    },
+
+    // 行样式 - 优先使用后端返回的colorControl
+    rowStyle({ row, rowIndex }) {
+      if (row.colorControl) {
+        return {
+          backgroundColor: row.colorControl,
+        };
+      }
+      return {};
+    },
+
+    // 行类名 - 用于CSS选择器和斑马纹
+    tableRowClassName({ row, rowIndex }) {
+      if (row.colorControl) {
+        return "has-color-control";
+      }
+      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
+    },
+
+    // 单元格样式 - 优先使用后端colorControl，否则斑马纹
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      const baseStyle = {
+        padding: "1px",
+        fontSize: "3px",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        height: "12px",
+        lineHeight: "10px",
+        color: "#fff",
+      };
+
+      if (row.colorControl) {
+        return {
+          ...baseStyle,
+          backgroundColor: row.colorControl,
+        };
+      }
+
+      const bgColor = rowIndex % 2 === 0 ? "#0a1e44" : "#132a55";
+      return {
+        ...baseStyle,
+        backgroundColor: bgColor,
+      };
+    },
+
+    headerCellStyle() {
+      return {
+        padding: "1px",
+        fontSize: "3px",
+        fontWeight: 600,
+        backgroundColor: "#071b38",
+        color: "#fff",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        height: "14px",
+        lineHeight: "12px",
+      };
+    },
+
+    handleChange(v) {
+      const n = Number(v);
+      if (isNaN(n) || n < 0) {
+        this.$message.warning("请输入≥0的整数，输入0关闭刷新");
+        this.num = 10;
+        return;
+      }
+      this.num = n;
+    },
+
+    enterFullScreen() {
+      setTimeout(() => {
+        if (screenfull.isEnabled) {
+          screenfull.toggle();
+        }
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app-container {
+  background: -webkit-radial-gradient(
+    50% 35%,
+    farthest-corner,
+    #034f8e,
+    #034987,
+    #02366d,
+    #002353
+  );
+  height: 100vh;
+  width: 100vw;
+  padding: 6px 8px;
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.control-bar {
+  flex-shrink: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.control-label {
+  color: white;
+  font-weight: bold;
+  margin-right: 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.refresh-input {
+  width: 160px !important;
+}
+
+.refresh-input ::v-deep .el-input__inner {
+  height: 24px;
+  line-height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+.header-section {
+  flex-shrink: 0;
+  height: 32px;
+  margin-bottom: 6px;
+}
+
+.content-section {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ========== 3列2行布局 ========== */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  height: 100%;
+  width: 100%;
+}
+
+.grid-item {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.list-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.list-card ::v-deep .el-card__header {
+  color: #8adfec;
+  font-weight: 600;
+  background-color: #192849;
+  padding: 4px 8px;
+  height: 26px;
+  line-height: 18px;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.list-card ::v-deep .el-card__body {
+  flex: 1;
+  padding: 2px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.page-indicator {
+  text-align: center;
+  color: #8adfec;
+  font-size: 3px;
+  padding: 1px 0;
+  background-color: #192849;
+  border-top: 1px solid #1a2e5a;
+  flex-shrink: 0;
+}
+
+::v-deep .el-input__inner {
+  background: transparent !important;
+  border: 1px solid #034f8e;
+  color: #fff;
+}
+
+::v-deep .el-input__inner::placeholder {
+  color: #ccc;
+  font-size: 12px;
+}
+
+::v-deep .el-card {
+  background-color: #0a1e44 !important;
+  border: 1px solid #1a2e5a !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
+  padding: 0 !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep .el-card__header {
+  border-bottom: 1px solid #1a2e5a;
+}
+
+/* ========= 表格样式（含背景色） ========= */
+::v-deep .auto-fit-table {
+  width: 100% !important;
+  flex: 1;
+  font-size: 3px !important;
+  background-color: #0a1e44 !important;
+}
+
+::v-deep .auto-fit-table .el-table__body-wrapper,
+::v-deep .auto-fit-table .el-table__header-wrapper {
+  overflow: hidden !important;
+  background-color: #0a1e44 !important;
+}
+
+/* 空数据提示样式 */
+::v-deep .auto-fit-table .el-table__empty-block {
+  background-color: #0a1e44 !important;
+  min-height: 60px;
+}
+
+::v-deep .auto-fit-table .el-table__empty-text {
+  color: #8adfec !important;
+  font-size: 3px;
+  line-height: 60px;
+}
+
+::v-deep .auto-fit-table .el-table__body,
+::v-deep .auto-fit-table .el-table__header {
+  width: 100% !important;
+  table-layout: fixed !important;
+  background-color: #0a1e44 !important;
+}
+
+/* 表头背景色 */
+::v-deep .auto-fit-table .el-table__header th {
+  padding: 0 !important;
+  font-size: 3px !important;
+  height: auto !important;
+  line-height: 1.1;
+  font-weight: 600;
+  background-color: #071b38 !important;
+  color: #fff !important;
+}
+
+/* 单元格基础背景色 */
+::v-deep .auto-fit-table .el-table__body td {
+  padding: 0 !important;
+  font-size: 3px !important;
+  height: auto !important;
+  line-height: 1.1;
+  color: #fff !important;
+}
+
+/* 有colorControl时的行 - 背景色由inline style控制 */
+::v-deep .auto-fit-table .has-color-control td {
+  background-color: inherit !important;
+}
+
+/* 斑马纹 - 仅对没有colorControl的行生效 */
+::v-deep .auto-fit-table .even-row td {
+  background-color: #0a1e44 !important;
+}
+
+::v-deep .auto-fit-table .odd-row td {
+  background-color: #132a55 !important;
+}
+
+/* 鼠标悬停 - 有colorControl时不改变颜色 */
+::v-deep .auto-fit-table .has-color-control:hover td {
+  background-color: inherit !important;
+}
+
+::v-deep .auto-fit-table .even-row:hover td,
+::v-deep .auto-fit-table .odd-row:hover td {
+  background-color: rgba(138, 223, 236, 0.2) !important;
+}
+
+::v-deep .auto-fit-table.el-table--border,
+::v-deep .auto-fit-table.el-table--border th,
+::v-deep .auto-fit-table.el-table--border td {
+  border-color: #1a2e5a !important;
+  border-width: 1px !important;
+}
+
+::v-deep .auto-fit-table .cell {
+  font-size: 3px !important;
+  line-height: 1.1 !important;
+  padding: 0 1px !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  background-color: transparent !important;
+}
+
+::v-deep .auto-fit-table td .cell,
+::v-deep .auto-fit-table th .cell {
+  padding-left: 1px !important;
+  padding-right: 1px !important;
+}
+
+::v-deep .el-loading-mask {
+  background-color: rgba(10, 30, 68, 0.8) !important;
+}
+</style>