longchuang-vue/src/views/modules/longtron/screen-renovation-progress.vue

<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">生产进度管理看板 · VL2.5升级/线缆COP/机加工</div>
      </div>
      <div class="tools">
        <span class="time">{{ currentTime }}</span>
      </div>
    </div>

    <div class="summary-row">
      <div class="summary-card">
        <div class="summary-title">VL2.5升级订单</div>
        <div class="summary-main">
          <span class="summary-rate">{{ renovationKpi.finishRate }}%</span>
          <span class="summary-rate-label">完工达成率</span>
        </div>
        <div class="summary-meta">排产 {{ renovationKpi.total }} · 进行中 {{ renovationKpi.processing }} · 已完成 {{ renovationKpi.finished }}</div>
      </div>
      <div class="summary-card">
        <div class="summary-title">线缆/COP任务</div>
        <div class="summary-main">
          <span class="summary-rate">{{ cableCopKpi.finishRate }}%</span>
          <span class="summary-rate-label">完工达成率</span>
        </div>
        <div class="summary-meta">排产 {{ cableCopKpi.total }} · 进行中 {{ cableCopKpi.processing }} · 已完成 {{ cableCopKpi.finished }}</div>
      </div>
      <div class="summary-card">
        <div class="summary-title">机加工任务</div>
        <div class="summary-main">
          <span class="summary-rate">{{ machiningKpi.finishRate }}%</span>
          <span class="summary-rate-label">完工达成率</span>
        </div>
        <div class="summary-meta">排产 {{ machiningKpi.total }} · 进行中 {{ machiningKpi.processing }} · 已完成 {{ machiningKpi.finished }}</div>
      </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="board-section">
      <div class="section-card section-top">
        <div class="section-header">
          <span class="section-title">VL2.5升级订单进度</span>
          <span class="section-count">第 {{ renovationPage + 1 }}/{{ renovationPageCount }} 页 · 显示 {{ displayRenovationList.length }} / 共 {{ renovationList.length }} 条</span>
        </div>
        <el-table class="board-table" :data="displayRenovationList" :height="tableHeightTop" border stripe>
          <el-table-column type="index" label="序号" width="54" align="center"></el-table-column>
          <el-table-column prop="projectNo" label="项目号" min-width="120" align="center"></el-table-column>
          <el-table-column prop="floors" label="楼层" min-width="70" align="center"></el-table-column>
          <el-table-column prop="planFinishDate" label="计划完工日期" min-width="120" align="center"></el-table-column>
          <el-table-column label="仓库配料" width="90" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'stocking')"></span></template></el-table-column>
          <el-table-column label="组装" width="84" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'assy')"></span></template></el-table-column>
          <el-table-column label="检验" width="84" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'inspect')"></span></template></el-table-column>
          <el-table-column label="打包" width="84" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'pack')"></span></template></el-table-column>
          <el-table-column prop="status" label="订单状态" width="96" align="center"><template slot-scope="scope"><el-tag class="board-tag" :class="getStatusTagClass(scope.row.status)" size="small">{{ scope.row.status }}</el-tag></template></el-table-column>
          <el-table-column prop="finishDate" label="完工时间" width="118" align="center"><template slot-scope="scope">{{ scope.row.finishDate || '-' }}</template></el-table-column>
        </el-table>
      </div>

      <div class="section-card section-bottom-left">
        <div class="section-header">
          <span class="section-title">线缆/COP任务进度</span>
          <span class="section-count">第 {{ cableCopPage + 1 }}/{{ cableCopPageCount }} 页 · 显示 {{ displayCableCopList.length }} / 共 {{ cableCopList.length }} 条</span>
        </div>
        <el-table class="board-table" :data="displayCableCopList" :height="tableHeightBottom" border stripe>
          <el-table-column type="index" label="序号" width="54" align="center"></el-table-column>
          <el-table-column prop="taskNo" label="任务单号" min-width="126" align="center"></el-table-column>
          <el-table-column prop="taskType" label="类别" min-width="96" align="center">
            <template slot-scope="scope">
              <el-tag class="board-tag" :class="getTaskTypeClass(scope.row.taskType)" size="small">{{ scope.row.taskType || '-' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="planFinishDate" label="计划完工日期" min-width="120" align="center"></el-table-column>
          <el-table-column prop="taskQty" label="任务数量" min-width="84" align="center"></el-table-column>
          <el-table-column prop="reportQty" label="已报工数量" min-width="84" align="center"></el-table-column>
          <el-table-column label="线缆生产" width="86" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'lineProduction')"></span></template></el-table-column>
          <el-table-column label="COP生产" width="86" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'copProduction')"></span></template></el-table-column>
          <el-table-column prop="status" label="任务状态" width="96" align="center">
            <template slot-scope="scope">
              <el-tag class="board-tag" :class="getStatusTagClass(scope.row.status)" size="small">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="finishDate" label="完工时间" width="118" align="center"><template slot-scope="scope">{{ scope.row.finishDate || '-' }}</template></el-table-column>
        </el-table>
      </div>

      <div class="section-card section-bottom-right">
        <div class="section-header">
          <span class="section-title">机加工任务进度</span>
          <span class="section-count">第 {{ machiningPage + 1 }}/{{ machiningPageCount }} 页 · 显示 {{ displayMachiningList.length }} / 共 {{ machiningList.length }} 条</span>
        </div>
        <el-table class="board-table" :data="displayMachiningList" :height="tableHeightBottom" border stripe>
          <el-table-column type="index" label="序号" width="54" align="center"></el-table-column>
          <el-table-column prop="modelNo" label="物料号" min-width="170" align="center"></el-table-column>
          <el-table-column prop="taskQty" label="计划数量" min-width="88" align="center"></el-table-column>
          <el-table-column prop="reportQty" label="实际数量" min-width="88" align="center"></el-table-column>
          <el-table-column prop="planFinishDate" label="计划完工日期" min-width="120" align="center"></el-table-column>
          <el-table-column prop="status" label="任务状态" width="96" align="center">
            <template slot-scope="scope">
              <el-tag class="board-tag" :class="getStatusTagClass(scope.row.status)" size="small">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="finishDate" label="实际完工日期" min-width="120" align="center">
            <template slot-scope="scope">{{ scope.row.finishDate || '-' }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getCableCopTaskList, getMachiningTaskList, getRenovationOrderList } from '@/api/longchuang/productionPlan'
import { getScreenInnerHeight } from '@/utils/screenAdapt'

const STATUS_ALLOW_LIST = ['已排产', '进行中', '已完成']
const RENOVATION_NODE_TEMPLATE = ['stocking', 'assy', 'inspect', 'pack']
const CABLE_COP_NODE_TEMPLATE = ['lineProduction', 'copProduction']
const BOARD_PAGE_SIZE = 6

export default {
  name: 'ScreenRenovationProgress',
  data() {
    return {
      loading: false,
      boardTimerId: null,
      tableHeightTop: 220,
      tableHeightBottom: 180,
      topRowLimit: BOARD_PAGE_SIZE,
      bottomRowLimit: BOARD_PAGE_SIZE,
      carouselTimerId: null,
      carouselIntervalMs: 8000,
      renovationPage: 0,
      cableCopPage: 0,
      machiningPage: 0,
      currentTime: '',
      timerId: null,
      renovationList: [],
      cableCopList: [],
      machiningList: [],
      renovationKpi: { total: 0, processing: 0, finished: 0, finishRate: 0 },
      cableCopKpi: { total: 0, processing: 0, finished: 0, finishRate: 0 },
      machiningKpi: { total: 0, processing: 0, finished: 0, finishRate: 0 }
    }
  },
  computed: {
    renovationPageCount() {
      return this.getPageCount(this.renovationList.length, this.topRowLimit)
    },
    cableCopPageCount() {
      return this.getPageCount(this.cableCopList.length, this.bottomRowLimit)
    },
    machiningPageCount() {
      return this.getPageCount(this.machiningList.length, this.bottomRowLimit)
    },
    displayRenovationList() {
      return this.getPageList(this.renovationList, this.renovationPage, this.topRowLimit)
    },
    displayCableCopList() {
      return this.getPageList(this.cableCopList, this.cableCopPage, this.bottomRowLimit)
    },
    displayMachiningList() {
      return this.getPageList(this.machiningList, this.machiningPage, this.bottomRowLimit)
    }
  },
  mounted() {
    this.setTableHeight()
    this.loadBoardData()
    this.updateTime()
    this.timerId = setInterval(this.updateTime, 1000)
    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() {
      const boardGap = 10
      const topRatio = 0.56
      const reservedHeight = 286
      const sectionHeaderHeight = 46
      const boardHeight = Math.max(420, getScreenInnerHeight() - reservedHeight)
      const topSectionHeight = Math.floor((boardHeight - boardGap) * topRatio)
      const bottomSectionHeight = boardHeight - boardGap - topSectionHeight

      this.tableHeightTop = Math.max(120, topSectionHeight - sectionHeaderHeight)
      this.tableHeightBottom = Math.max(120, bottomSectionHeight - sectionHeaderHeight)
      this.topRowLimit = BOARD_PAGE_SIZE
      this.bottomRowLimit = BOARD_PAGE_SIZE
      this.normalizeCarouselPage()
    },
    loadBoardData() {
      if (this.loading) return
      this.loading = true
      const params = { page: 1, limit: 300, statusList: STATUS_ALLOW_LIST }
      Promise.all([
        getRenovationOrderList(params).catch(() => null),
        getCableCopTaskList(params).catch(() => null),
        getMachiningTaskList(params).catch(() => null)
      ]).then(([renovationRes, cableCopRes, machiningRes]) => {
        this.renovationList = this.buildRenovationList(this.getListFromResponse(renovationRes))
        this.cableCopList = this.buildCableCopList(this.getListFromResponse(cableCopRes))
        this.machiningList = this.buildMachiningList(this.getListFromResponse(machiningRes))
        this.renovationKpi = this.buildKpi(this.renovationList)
        this.cableCopKpi = this.buildKpi(this.cableCopList)
        this.machiningKpi = this.buildKpi(this.machiningList)
        this.normalizeCarouselPage()
      }).finally(() => {
        this.loading = false
      })
    },
    getPageCount(total, pageSize) {
      if (!pageSize) return 1
      return Math.max(1, Math.ceil(total / pageSize))
    },
    getPageList(list, pageIndex, pageSize) {
      const safeSize = Math.max(1, pageSize || 1)
      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.renovationPage = Math.min(this.renovationPage, this.renovationPageCount - 1)
      this.cableCopPage = Math.min(this.cableCopPage, this.cableCopPageCount - 1)
      this.machiningPage = Math.min(this.machiningPage, this.machiningPageCount - 1)
      this.renovationPage = Math.max(this.renovationPage, 0)
      this.cableCopPage = Math.max(this.cableCopPage, 0)
      this.machiningPage = Math.max(this.machiningPage, 0)
    },
    nextPage(page, pageCount) {
      if (pageCount <= 1) return 0
      return (page + 1) % pageCount
    },
    startCarousel() {
      this.stopCarousel()
      this.carouselTimerId = setInterval(() => {
        this.renovationPage = this.nextPage(this.renovationPage, this.renovationPageCount)
        this.cableCopPage = this.nextPage(this.cableCopPage, this.cableCopPageCount)
        this.machiningPage = this.nextPage(this.machiningPage, this.machiningPageCount)
      }, this.carouselIntervalMs)
    },
    stopCarousel() {
      if (!this.carouselTimerId) return
      clearInterval(this.carouselTimerId)
      this.carouselTimerId = null
    },
    getListFromResponse(response) {
      const data = response && response.data
      const list = data && data.code === 0 && data.page && Array.isArray(data.page.list) ? data.page.list : null
      return list || this.getMockList()
    },
    buildRenovationList(sourceList) {
      return (sourceList || [])
        .filter(item => STATUS_ALLOW_LIST.includes(item.status))
        .map(item => ({
          projectNo: item.projectNo || '',
          floors: item.floors || '',
          planFinishDate: item.planFinishDate || '',
          status: item.status || '',
          finishDate: item.finishDate || '',
          nodeStatusMap: this.toNodeStatusMap(item.nodeList, RENOVATION_NODE_TEMPLATE)
        }))
    },
    buildCableCopList(sourceList) {
      return (sourceList || [])
        .filter(item => STATUS_ALLOW_LIST.includes(item.status))
        .map(item => ({
          taskNo: item.taskNo || '',
          sourceProjectNo: item.sourceProjectNo || '',
          taskType: item.taskType || '',
          planFinishDate: item.planFinishDate || '',
          status: item.status || '',
          finishDate: item.finishDate || '',
          taskQty: item.taskQty == null ? 0 : item.taskQty,
          reportQty: item.reportQty == null ? 0 : item.reportQty,
          nodeStatusMap: this.toNodeStatusMap(item.nodeList, CABLE_COP_NODE_TEMPLATE)
        }))
    },
    buildMachiningList(sourceList) {
      return (sourceList || [])
        .filter(item => STATUS_ALLOW_LIST.includes(item.status))
        .map(item => ({
          modelNo: item.modelNo || '',
          planFinishDate: item.planFinishDate || '',
          status: item.status || '',
          finishDate: item.finishDate || '',
          taskQty: item.taskQty == null ? 0 : item.taskQty,
          reportQty: item.reportQty == null ? 0 : item.reportQty
        }))
    },
    toNodeStatusMap(nodeList, template) {
      const map = {}
      ;(template || []).forEach(code => { map[code] = '未开始' })
      ;(nodeList || []).forEach(node => { map[node.nodeCode] = node.status || '未开始' })
      return map
    },
    buildKpi(list) {
      const total = list.length
      const processing = list.filter(item => item.status === '进行中').length
      const finished = list.filter(item => item.status === '已完成').length
      return { total, processing, finished, finishRate: total ? Math.round((finished / total) * 100) : 0 }
    },
    getNodeCellText(row, code) {
      return (row.nodeStatusMap && row.nodeStatusMap[code]) || '未开始'
    },
    getNodeCellClass(row, code) {
      const status = this.getNodeCellText(row, code)
      if (status === '已完成') return 'node-chip done'
      return 'node-chip todo'
    },
    getTaskTypeClass(taskType) {
      if (taskType === '线缆自制') return 'type-cable'
      if (taskType === 'COP自制') return 'type-cop'
      return 'type-default'
    },
    getStatusTagClass(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);position:relative}
.header-left{display:flex;align-items:center;min-width:110px;z-index:2}
.header-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;max-width:72%;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:37px;font-weight:800;letter-spacing:2px;line-height:1.1;text-shadow:0 0 14px rgba(79,179,255,.36)}
.tools{display:flex;align-items:center;gap:12px}
.time{color:#89d7ff;font-size:26px;font-weight:600}
.summary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 8px}
.summary-card{border-radius:10px;padding:10px 14px;background:rgba(14,43,70,.82);border:1px solid rgba(101,157,209,.22)}
.summary-title{color:#b7d3ee;font-size:16px}
.summary-main{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.summary-rate{font-size:39px;font-weight:700;color:#79d5ff;line-height:1}
.summary-rate-label{color:#9dc5e8;font-size:15px}
.summary-meta{margin-top:4px;color:#d4e6f9;font-size:15px;line-height:1.3}
.legend-row{display:flex;gap:16px;margin:0 0 10px 2px}
.legend-item{display:inline-flex;align-items:center;color:#c7dff4;font-size:15px}
.dot{width:10px;height:10px;border-radius:50%;margin-right:6px;display:inline-block}
.dot.done{background:#69e4a4}
.dot.todo{background:#dbe3ee}
.board-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);gap:10px;flex:1;min-height:0}
.section-card{display:flex;flex-direction:column;min-height:0;border-radius:10px;border:1px solid rgba(86,140,190,.35);background:rgba(12,39,64,.96)}
.section-top{grid-column:1 / span 2}
.section-bottom-left{grid-column:1}
.section-bottom-right{grid-column:2}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(80,133,181,.45)}
.section-title{color:#d7ebff;font-size:17px;font-weight:600}
.section-count{color:#9ec6e9;font-size:15px}
.board-table{border-radius:0;overflow:hidden;flex:1;min-height:0}
.board-table .cell{line-height:36px;font-size:16px;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:16px!important;padding:12px 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:48px!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:31px!important;overflow:visible!important}
.screen-wrap .board-table .el-table__body-wrapper{scrollbar-width:none;-ms-overflow-style:none}
.screen-wrap .board-table .el-table__body-wrapper::-webkit-scrollbar{width:0;height:0}
.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:#6de3a0}
.node-chip.todo{background:#dce4ee}
.board-tag{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:88px!important;height:29px!important;padding:0 10px!important;border-radius:14px!important;border:1px solid transparent!important;font-size:14px!important;font-weight:600!important;line-height:27px!important;box-sizing:border-box!important}
.board-tag.type-cable{color:#73cfff!important;background:rgba(28,88,136,.32)!important;border-color:rgba(115,207,255,.45)!important}
.board-tag.type-cop{color:#7ef0c0!important;background:rgba(31,108,89,.32)!important;border-color:rgba(126,240,192,.45)!important}
.board-tag.type-default{color:#d0e5f9!important;background:rgba(80,118,149,.28)!important;border-color:rgba(208,229,249,.34)!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>