diff --git a/src/views/modules/longtron/screen-whole-lift-progress.vue b/src/views/modules/longtron/screen-whole-lift-progress.vue index 943456d9..3794c564 100644 --- a/src/views/modules/longtron/screen-whole-lift-progress.vue +++ b/src/views/modules/longtron/screen-whole-lift-progress.vue @@ -15,8 +15,13 @@ 未开始报工 - - +
+ 整梯订单进度 + 第 {{ boardPage + 1 }}/{{ boardPageCount }} 页 · 显示 {{ displayBoardList.length }} / 共 {{ boardList.length }} 条 +
+ + + @@ -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;