hanst
/
longchuang-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
18 Commits
1 Branch
0 Tags
122 MiB
Tree: 10e99eae47
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '10e99eae47'
${ noResults }
longchuang-vue/src/views/modules/longtron/screen-whole-lift-progress.vue

177 lines
14 KiB
Raw Normal View History

首次提交：上传项目基础代码
1 month ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <template>
  2. <div class="screen-wrap">
  3. <div class="top-bar">
  4. <div class="header-left"><div class="logo-box">LOGO</div></div>
  5. <div class="header-center">
  6. <div class="title">生产进度管理看板 · 家用电梯</div>
  7. </div>
  8. <div class="tools">
  9. <span class="time">{{ currentTime }}</span>
  10. </div>
  11. </div>
  13. <div class="kpi-row">
  14. <div class="kpi-card"><div class="kpi-label">排产订单</div><div class="kpi-value">{{ kpi.total }}</div></div>
  15. <div class="kpi-card"><div class="kpi-label">进行中</div><div class="kpi-value warning">{{ kpi.processing }}</div></div>
  16. <div class="kpi-card"><div class="kpi-label">已完成</div><div class="kpi-value success">{{ kpi.finished }}</div></div>
  17. <div class="kpi-card"><div class="kpi-label">完工达成率</div><div class="kpi-value highlight">{{ kpi.finishRate }}%</div></div>
  18. </div>
  20. <div class="legend-row">
  21. <span class="legend-item"><i class="dot done"></i>已完成</span>
  22. <span class="legend-item"><i class="dot todo"></i>未开始</span>
  23. </div>
  25. <el-table class="board-table" :data="boardList" :height="tableHeight" v-loading="loading" border stripe>
  26. <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
  27. <el-table-column prop="projectNo" label="项目号" width="140" align="center"></el-table-column>
  28. <el-table-column prop="modelNo" label="型号" width="130" align="center"></el-table-column>
  29. <el-table-column prop="color" label="颜色" width="90" align="center"></el-table-column>
  30. <el-table-column prop="floorCount" label="层数" width="80" align="center"></el-table-column>
  31. <el-table-column prop="specialRequirement" label="特殊要求" min-width="160" show-overflow-tooltip></el-table-column>
  32. <el-table-column prop="planDeliveryDate" label="计划发货日期" width="130" align="center"></el-table-column>
  33. <el-table-column label="仓库配料" width="105" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'stocking')"></span></template></el-table-column>
  34. <el-table-column label="平台组装/调试" width="130" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'platformDebug')"></span></template></el-table-column>
  35. <el-table-column label="背景墙/吊顶组装" width="140" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'bgCeiling')"></span></template></el-table-column>
  36. <el-table-column label="门组装" width="95" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'doorAssy')"></span></template></el-table-column>
  37. <el-table-column label="打包" width="90" align="center"><template slot-scope="scope"><span :class="getNodeCellClass(scope.row, 'pack')"></span></template></el-table-column>
  38. <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>
  39. <el-table-column prop="finishDate" label="完工时间" width="120" align="center"><template slot-scope="scope">{{ scope.row.finishDate || '-' }}</template></el-table-column>
  40. </el-table>
  41. </div>
  42. </template>
  44. <script>
  45. import { getHomeLiftOrderList } from '@/api/longchuang/productionPlan'
  47. const NODE_TEMPLATE = ['stocking', 'platformDebug', 'bgCeiling', 'doorAssy', 'pack']
  49. export default {
  50. name: 'ScreenWholeLiftProgress',
  51. data() {
  52. return {
  53. loading: false,
  54. tableHeight: 640,
  55. currentTime: '',
  56. timerId: null,
  57. boardList: [],
  58. kpi: { total: 0, processing: 0, finished: 0, finishRate: 0 }
  59. }
  60. },
  61. mounted() {
  62. this.setTableHeight()
  63. this.loadBoardData()
  64. this.updateTime()
  65. this.timerId = setInterval(this.updateTime, 1000)
  66. window.addEventListener('resize', this.setTableHeight)
  67. },
  68. beforeDestroy() {
  69. if (this.timerId) clearInterval(this.timerId)
  70. window.removeEventListener('resize', this.setTableHeight)
  71. },
  72. methods: {
  73. setTableHeight() {
  74. this.tableHeight = Math.max(420, window.innerHeight - 240)
  75. },
  76. loadBoardData() {
  77. this.loading = true
  78. getHomeLiftOrderList({ page: 1, limit: 300 }).then(({data}) => {
  79. this.loading = false
  80. const source = (data && data.code === 0 && data.page && data.page.list) ? data.page.list : this.getMockList()
  81. this.boardList = this.buildBoardList(source)
  82. this.buildKpi()
  83. }).catch(() => {
  84. this.loading = false
  85. this.boardList = this.buildBoardList(this.getMockList())
  86. this.buildKpi()
  87. })
  88. },
  89. buildBoardList(sourceList) {
  90. const statusAllow = ['已排产', '进行中', '已完成']
  91. return sourceList.filter(item => statusAllow.includes(item.status)).map(item => ({ ...item, nodeStatusMap: this.toNodeStatusMap(item.nodeList) }))
  92. },
  93. toNodeStatusMap(nodeList) {
  94. const map = {}
  95. NODE_TEMPLATE.forEach(code => { map[code] = '未开始' })
  96. ;(nodeList || []).forEach(node => { map[node.nodeCode] = node.status || '未开始' })
  97. return map
  98. },
  99. buildKpi() {
  100. const total = this.boardList.length
  101. const processing = this.boardList.filter(item => item.status === '进行中').length
  102. const finished = this.boardList.filter(item => item.status === '已完成').length
  103. this.kpi = { total, processing, finished, finishRate: total ? Math.round((finished / total) * 100) : 0 }
  104. },
  105. getNodeCellText(row, code) {
  106. return row.nodeStatusMap[code] || '未开始'
  107. },
  108. getNodeCellClass(row, code) {
  109. const status = this.getNodeCellText(row, code)
  110. if (status === '已完成') return 'node-chip done'
  111. return 'node-chip todo'
  112. },
  113. getOrderStatusClass(status) {
  114. if (status === '已完成') return 'status-done'
  115. if (status === '进行中') return 'status-doing'
  116. return 'status-planned'
  117. },
  118. updateTime() {
  119. const now = new Date()
  120. const weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  121. const d = this.dayjs(now)
  122. this.currentTime = `${d.format('YYYY/MM/DD')} ${weekList[now.getDay()]} ${d.format('HH:mm:ss')}`
  123. },
  124. getMockList() {
  125. return [
  126. { projectNo: 'LC-202604-001', modelNo: 'LC-HOME-820', color: '香槟白', floorCount: 4, specialRequirement: '厅门防刮', planDeliveryDate: '2026-03-18', status: '进行中', finishDate: '', nodeList: [{ nodeCode: 'stocking', status: '已完成' }, { nodeCode: 'platformDebug', status: '进行中' }] },
  127. { projectNo: 'LC-202604-002', modelNo: 'LC-HOME-1050', color: '希腊白', floorCount: 4, specialRequirement: '静音模式', planDeliveryDate: '2026-03-18', status: '已排产', finishDate: '', nodeList: [] },
  128. { projectNo: 'LC-202604-003', modelNo: 'LC-HOME-920', color: '灰灰', floorCount: 6, specialRequirement: '加装语音报站', planDeliveryDate: '2026-03-20', status: '已完成', finishDate: '2026-03-19', nodeList: NODE_TEMPLATE.map(code => ({ nodeCode: code, status: '已完成' })) },
  129. { projectNo: 'LC-202604-004', modelNo: 'LC-HOME-980', color: '砂岩金', floorCount: 5, specialRequirement: '加宽门套', planDeliveryDate: '2026-03-21', status: '进行中', finishDate: '', nodeList: [{ nodeCode: 'stocking', status: '已完成' }, { nodeCode: 'platformDebug', status: '已完成' }, { nodeCode: 'bgCeiling', status: '进行中' }] },
  130. { projectNo: 'LC-202604-005', modelNo: 'LC-HOME-760', color: '深空灰', floorCount: 3, specialRequirement: '井道照明增强', planDeliveryDate: '2026-03-22', status: '已排产', finishDate: '', nodeList: [{ nodeCode: 'stocking', status: '未开始' }] },
  131. { projectNo: 'LC-202604-006', modelNo: 'LC-HOME-1100', color: '曜石黑', floorCount: 7, specialRequirement: '门机静音升级', planDeliveryDate: '2026-03-23', status: '进行中', finishDate: '', nodeList: [{ nodeCode: 'stocking', status: '已完成' }, { nodeCode: 'platformDebug', status: '进行中' }, { nodeCode: 'bgCeiling', status: '未开始' }] },
  132. { projectNo: 'LC-202604-007', modelNo: 'LC-HOME-900', color: '雾霾蓝', floorCount: 4, specialRequirement: '控制柜防潮', planDeliveryDate: '2026-03-24', status: '已完成', finishDate: '2026-03-23', nodeList: NODE_TEMPLATE.map(code => ({ nodeCode: code, status: '已完成' })) },
  133. { projectNo: 'LC-202604-008', modelNo: 'LC-HOME-840', color: '珍珠白', floorCount: 5, specialRequirement: '门头发光字定制', planDeliveryDate: '2026-03-25', status: '进行中', finishDate: '', nodeList: [{ nodeCode: 'stocking', status: '已完成' }, { nodeCode: 'platformDebug', status: '已完成' }, { nodeCode: 'bgCeiling', status: '已完成' }, { nodeCode: 'doorAssy', status: '进行中' }] }
  134. ]
  135. }
  136. }
  137. }
  138. </script>
  140. <style>
  141. .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}
  142. .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)}
  143. .top-bar{position:relative}
  144. .header-left{display:flex;align-items:center;min-width:110px;z-index:2}
  145. .logo-box{width:86px;height:30px;border-radius:6px;border:1px solid rgba(128,198,255,.45);color:#d8edff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;background:rgba(36,82,122,.35)}
  146. .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))}
  147. .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))}
  148. .top-bar .tools{margin-left:auto;z-index:2}
  149. .title{color:#8fe7ff;font-size:30px;font-weight:800;letter-spacing:3px;line-height:1.05;text-shadow:0 0 14px rgba(79,179,255,.36)}
  150. .subtitle{margin-top:4px;color:#c7e8ff;font-size:12px;letter-spacing:1px}
  151. .tools{display:flex;align-items:center;gap:12px}.time{color:#89d7ff;font-size:20px;font-weight:600}
  152. .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 8px}
  153. .kpi-card{border-radius:10px;padding:12px 14px;background:rgba(14,43,70,.82);border:1px solid rgba(101,157,209,.22)}
  154. .kpi-label{color:#b7d3ee;font-size:13px}.kpi-value{margin-top:6px;font-size:30px;font-weight:700;color:#edf6ff}
  155. .kpi-value.warning{color:#ffd166}.kpi-value.success{color:#74dfa3}.kpi-value.highlight{color:#79d5ff}
  156. .legend-row{display:flex;gap:16px;margin:0 0 10px 2px}.legend-item{display:inline-flex;align-items:center;color:#c7dff4;font-size:12px}
  157. .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}
  158. .board-table{border-radius:10px;overflow:hidden;border:1px solid rgba(86,140,190,.35);flex:1;min-height:0}
  159. .board-table .cell {
  160. line-height: 30px;
  161. font-size: 16px;
  162. height: 30px;
  163. }
  164. .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}
  165. .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:14px!important;padding:12px 0!important}
  166. .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:46px!important;vertical-align:middle!important}
  167. .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}
  168. .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}
  169. .screen-wrap .board-table .el-table .cell{color:#fff!important;line-height:24px!important;overflow:visible!important}
  170. .screen-wrap .board-table .el-table__empty-text{color:#9ac2e7!important}
  171. .node-chip{display:inline-block!important;width:46px;height:14px;margin:0 auto;border-radius:2px}
  172. .node-chip.done{background:#6de3a0}.node-chip.todo{background:#dce4ee}
  173. .board-tag{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:66px!important;height:24px!important;padding:0 10px!important;border-radius:12px!important;border:1px solid transparent!important;font-size:12px!important;font-weight:600!important;line-height:22px!important;box-sizing:border-box!important}
  174. .board-tag.status-planned{color:#b9c7d8!important;background:rgba(96,118,141,.28)!important;border-color:rgba(185,199,216,.34)!important}
  175. .board-tag.status-doing{color:#ffd774!important;background:rgba(120,92,27,.32)!important;border-color:rgba(255,215,116,.45)!important}
  176. .board-tag.status-done{color:#83f3be!important;background:rgba(31,110,84,.32)!important;border-color:rgba(131,243,190,.45)!important}
  177. </style>