floorCount

src/views/modules/longtron/screen-whole-lift-progress.vue

@@ -15,8 +15,13 @@
       <span class="legend-item"><i class="dot todo"></i>未开始报工</span>
     </div>
 
-    <el-table class="board-table" :data="boardList" :height="tableHeight" border stripe>
-      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
+    <div class="section-header">
+      <span class="section-title">整梯订单进度</span>
+      <span class="section-count">第 {{ boardPage + 1 }}/{{ boardPageCount }} 页 · 显示 {{ displayBoardList.length }} / 共 {{ boardList.length }} 条</span>
+    </div>
+
+    <el-table class="board-table" :data="displayBoardList" :height="tableHeight" border stripe>
+      <el-table-column type="index" :index="boardPage * rowLimit + 1" label="序号" width="60" align="center"></el-table-column>
       <el-table-column prop="projectNo" label="项目号" width="140" align="center"></el-table-column>
       <el-table-column prop="modelNo" label="型号" width="130" align="center"></el-table-column>
       <el-table-column prop="color" label="颜色" width="90" align="center"></el-table-column>
@@ -39,6 +44,8 @@ import { getScreenInnerHeight } from '@/utils/screenAdapt'
 
 const NODE_TEMPLATE = ['stocking', 'platformDebug', 'bgCeiling', 'doorAssy', 'pack']
 const DISPLAY_STATUS_LIST = ['已排产', '进行中']
+const DEFAULT_ROW_LIMIT = 16
+const CAROUSEL_INTERVAL_MS = 8000
 
 export default {
   name: 'ScreenWholeLiftProgress',
@@ -46,12 +53,24 @@ export default {
     return {
       loading: false,
       tableHeight: 640,
+      rowLimit: DEFAULT_ROW_LIMIT,
       currentTime: '',
       timerId: null,
       boardTimerId: null,
+      carouselTimerId: null,
+      boardPage: 0,
+      carouselIntervalMs: CAROUSEL_INTERVAL_MS,
       boardList: []
     }
   },
+  computed: {
+    boardPageCount() {
+      return this.getPageCount(this.boardList.length, this.rowLimit)
+    },
+    displayBoardList() {
+      return this.getPageList(this.boardList, this.boardPage, this.rowLimit)
+    }
+  },
   mounted() {
     this.setTableHeight()
     this.loadBoardData()
@@ -63,6 +82,7 @@ export default {
       this.loadBoardData()
     }, 60000)
 
+    this.startCarousel()
     window.addEventListener('resize', this.setTableHeight)
   },
   beforeDestroy() {
@@ -74,11 +94,14 @@ export default {
       clearInterval(this.boardTimerId)
     }
 
+    this.stopCarousel()
     window.removeEventListener('resize', this.setTableHeight)
   },
   methods: {
     setTableHeight() {
       this.tableHeight = Math.max(420, getScreenInnerHeight() - 280)
+      this.rowLimit = DEFAULT_ROW_LIMIT
+      this.normalizeCarouselPage()
     },
     loadBoardData() {
       if (this.loading) return
@@ -87,11 +110,43 @@ export default {
         this.loading = false
         const source = (data && data.code === 0 && data.page && data.page.list) ? data.page.list : this.getMockList()
         this.boardList = this.buildBoardList(source)
+        this.normalizeCarouselPage()
       }).catch(() => {
         this.loading = false
         this.boardList = this.buildBoardList(this.getMockList())
+        this.normalizeCarouselPage()
       })
     },
+    getPageCount(total, pageSize) {
+      const safeSize = Math.max(1, pageSize || DEFAULT_ROW_LIMIT)
+      return Math.max(1, Math.ceil(total / safeSize))
+    },
+    getPageList(list, pageIndex, pageSize) {
+      const safeSize = Math.max(1, pageSize || DEFAULT_ROW_LIMIT)
+      const count = this.getPageCount((list || []).length, safeSize)
+      const safePage = Math.min(Math.max(pageIndex, 0), count - 1)
+      const start = safePage * safeSize
+      return (list || []).slice(start, start + safeSize)
+    },
+    normalizeCarouselPage() {
+      this.boardPage = Math.min(this.boardPage, this.boardPageCount - 1)
+      this.boardPage = Math.max(this.boardPage, 0)
+    },
+    nextPage(page, pageCount) {
+      if (pageCount <= 1) return 0
+      return (page + 1) % pageCount
+    },
+    startCarousel() {
+      this.stopCarousel()
+      this.carouselTimerId = setInterval(() => {
+        this.boardPage = this.nextPage(this.boardPage, this.boardPageCount)
+      }, this.carouselIntervalMs)
+    },
+    stopCarousel() {
+      if (!this.carouselTimerId) return
+      clearInterval(this.carouselTimerId)
+      this.carouselTimerId = null
+    },
     buildBoardList(sourceList) {
       const statusAllow = DISPLAY_STATUS_LIST
       return sourceList.filter(item => statusAllow.includes(item.status)).map(item => ({
@@ -152,6 +207,9 @@ export default {
 .tools{display:flex;align-items:center;gap:12px}.time{color:#89d7ff;font-size:22px;font-weight:600}
 .legend-row{display:flex;gap:16px;margin:10px 0 10px 2px}.legend-item{display:inline-flex;align-items:center;color:#c7dff4;font-size:13px}
 .dot{width:10px;height:10px;border-radius:50%;margin-right:6px;display:inline-block}.dot.done{background:#69e4a4}.dot.doing{background:#ffd35d}.dot.todo{background:#dbe3ee}
+.section-header{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
+.section-title{color:#d7ebff;font-size:18px;font-weight:600}
+.section-count{color:#9ec6e9;font-size:14px}
 .board-table{border-radius:10px;overflow:hidden;border:1px solid rgba(86,140,190,.35);flex:1;min-height:0}
 .board-table .cell {
   line-height: 36px;