|
|
<template> <div class="screen-wrap"> <div class="top-bar"> <div class="header-left"><img class="site-navbar__brand-logo" src="~@/assets/img/lc.png" alt="龙闯电梯"></div> <div class="header-center"> <div class="title">生产进度管理看板 · 家用电梯</div> </div> <div class="tools"> <span class="time">{{ currentTime }}</span> </div> </div>
<div class="legend-row"> <span class="legend-item"><i class="dot done"></i>已完成报工</span> <span class="legend-item"><i class="dot todo"></i>未开始报工</span> </div>
<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> <el-table-column prop="floorCount" label="层数" width="80" align="center"></el-table-column> <el-table-column prop="specialRequirement" label="特殊要求" min-width="160" align="center"></el-table-column> <el-table-column prop="planDeliveryDate" label="计划发货日期" width="130" align="center"></el-table-column> <el-table-column label="仓库配料" width="105" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'stocking')"></span></template></el-table-column> <el-table-column label="平台组装/调试" width="130" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'platformDebug')"></span></template></el-table-column> <el-table-column label="背景墙/吊顶组装" width="140" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'bgCeiling')"></span></template></el-table-column> <el-table-column label="门组装" width="95" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'doorAssy')"></span></template></el-table-column> <el-table-column label="打包" width="90" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'pack')"></span></template></el-table-column> <el-table-column prop="status" label="订单状态" width="100" align="center"><template slot-scope="scope"><el-tag class="board-tag" :class="getOrderStatusClass(scope.row.status)" size="small">{{ scope.row.status }}</el-tag></template></el-table-column> </el-table> </div></template>
<script>import { getHomeLiftOrderList } from '@/api/longchuang/productionPlan'import { getScreenInnerHeight } from '@/utils/screenAdapt'
const NODE_TEMPLATE = ['stocking', 'platformDebug', 'bgCeiling', 'doorAssy', 'pack']const DISPLAY_STATUS_LIST = ['已排产', '进行中']const DEFAULT_ROW_LIMIT = 16const CAROUSEL_INTERVAL_MS = 8000
export default { name: 'ScreenWholeLiftProgress', data() { 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() this.updateTime() this.timerId = setInterval(this.updateTime, 1000)
// 看板数据60秒刷新一次
this.boardTimerId = setInterval(() => { this.loadBoardData() }, 60000)
this.startCarousel() window.addEventListener('resize', this.setTableHeight) }, beforeDestroy() { if (this.timerId) { clearInterval(this.timerId) }
if (this.boardTimerId) { 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 this.loading = true getHomeLiftOrderList({ page: 1, limit: 300, statusList: DISPLAY_STATUS_LIST }).then(({data}) => { 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 => ({ projectNo: item.projectNo || '', modelNo: item.modelNo || '', color: item.color || '', floorCount: item.floorCount || '', specialRequirement: item.specialRequirement || '', planDeliveryDate: item.planDeliveryDate || '', status: item.status || '', finishDate: item.finishDate || '', nodeStatusMap: this.toNodeStatusMap(item.nodeList) })) }, toNodeStatusMap(nodeList) { const map = {} NODE_TEMPLATE.forEach(code => { map[code] = '未开始' }) ;(nodeList || []).forEach(node => { map[node.nodeCode] = node.status || '未开始' }) return map }, getNodeCellText(row, code) { return row.nodeStatusMap[code] || '未开始' }, getNodeCellClass(row, code) { const status = this.getNodeCellText(row, code) if (status === '已完成') return 'node-chip done' return 'node-chip todo' }, getOrderStatusClass(status) { if (status === '已完成') return 'status-done' if (status === '进行中') return 'status-doing' return 'status-planned' }, updateTime() { const now = new Date() const weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] const d = this.dayjs(now) this.currentTime = `${d.format('YYYY/MM/DD')} ${weekList[now.getDay()]} ${d.format('HH:mm:ss')}` }, getMockList() { return [] } }}</script>
<style>.screen-wrap{height:100vh;padding:16px;background:linear-gradient(165deg,#0a1f36 0%,#0f2b47 50%,#0a2037 100%);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:12px;border:1px solid rgba(109,167,219,.24);background:rgba(9,29,49,.82)}.top-bar{position:relative}.header-left{display:flex;align-items:center;min-width:110px;z-index:2}.logo-box{width:86px;height:30px;border-radius:6px;border:1px solid rgba(128,198,255,.45);color:#d8edff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;background:rgba(36,82,122,.35)}.header-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;max-width:70%;width:auto;padding:6px 24px 8px;border-radius:8px;border:1px solid rgba(96,170,232,.34);background:linear-gradient(180deg,rgba(33,73,116,.52),rgba(16,44,77,.42))}.header-center::before{content:'';position:absolute;left:50%;transform:translateX(-50%);top:-8px;width:68%;height:1px;background:linear-gradient(90deg,rgba(87,164,230,0),rgba(87,164,230,.9),rgba(87,164,230,0))}.top-bar .tools{margin-left:auto;z-index:2}.title{color:#8fe7ff;font-size:32px;font-weight:800;letter-spacing:3px;line-height:1.05;text-shadow:0 0 14px rgba(79,179,255,.36)}.subtitle{margin-top:4px;color:#c7e8ff;font-size:11px;letter-spacing:1px}.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; font-size: 17px; height: 36px;}.screen-wrap .board-table .el-table,.screen-wrap .board-table .el-table__expanded-cell,.screen-wrap .board-table .el-table__body-wrapper,.screen-wrap .board-table .el-table__empty-block,.screen-wrap .board-table .el-table__fixed-body-wrapper{background:rgba(12,39,64,.96)!important;color:#fff!important}.screen-wrap .board-table .el-table__header-wrapper th,.screen-wrap .board-table .el-table__fixed-header-wrapper th{background:#123a5e!important;color:#d9e9f8!important;border-color:rgba(80,133,181,.6)!important;font-size:15px!important;padding:14px 0!important}.screen-wrap .board-table .el-table__body tr>td,.screen-wrap .board-table .el-table__fixed-body-wrapper tr>td,.screen-wrap .board-table .el-table__fixed-right .el-table__fixed-body-wrapper tr>td{background:rgba(20,52,83,.96)!important;border-color:rgba(88,139,187,.4)!important;color:#fff!important;height:55px!important;vertical-align:middle!important}.screen-wrap .board-table .el-table--striped .el-table__body tr.el-table__row--striped>td,.screen-wrap .board-table .el-table__fixed-body-wrapper tr.el-table__row--striped>td{background:rgba(29,66,102,.96)!important}.screen-wrap .board-table .el-table--enable-row-hover .el-table__body tr:hover>td,.screen-wrap .board-table .el-table__fixed-body-wrapper tr:hover>td{background:rgba(39,81,123,.96)!important}.screen-wrap .board-table .el-table .cell{color:#fff!important;line-height:29px!important;overflow:visible!important}.screen-wrap .board-table .el-table__empty-text{color:#9ac2e7!important}.node-chip{display:inline-block!important;width:46px;height:14px;margin:0 auto;border-radius:2px}.node-chip.done{background:#05f66d}.node-chip.todo{background:#dce4ee}.board-tag{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:80px!important;height:29px!important;padding:0 10px!important;border-radius:14px!important;border:1px solid transparent!important;font-size:13px!important;font-weight:600!important;line-height:27px!important;box-sizing:border-box!important}.board-tag.status-planned{color:#b9c7d8!important;background:rgba(96,118,141,.28)!important;border-color:rgba(185,199,216,.34)!important}.board-tag.status-doing{color:#ffd774!important;background:rgba(120,92,27,.32)!important;border-color:rgba(255,215,116,.45)!important}.board-tag.status-done{color:#83f3be!important;background:rgba(31,110,84,.32)!important;border-color:rgba(131,243,190,.45)!important}</style>
|
