| | |
| | | <th>生产订单号</th> |
| | | <th>产品名称</th> |
| | | <th>规格</th> |
| | | <th>工序</th> |
| | | <th>需求数量</th> |
| | | <th>完成数量</th> |
| | | <th>完成进度</th> |
| | |
| | | <td>{{ item.npsNo || '-' }}</td> |
| | | <td>{{ item.productCategory || '-' }}</td> |
| | | <td>{{ item.specificationModel || '-' }}</td> |
| | | <td> |
| | | <div class="work-order-circles"> |
| | | <div |
| | | v-for="(workOrder, workOrderIndex) in item.productWorkOrders || []" |
| | | :key="workOrder.id || workOrderIndex" |
| | | class="work-order-circle" |
| | | :class="getWorkOrderColorClass(workOrder.color)" |
| | | :title="workOrder.processName || workOrder.workOrderNo" |
| | | > |
| | | {{ workOrder.processName ? workOrder.processName.substring(0, 2) : workOrderIndex + 1 }} |
| | | </div> |
| | | <span v-if="!item.productWorkOrders || item.productWorkOrders.length === 0">-</span> |
| | | </div> |
| | | </td> |
| | | <td>{{ item.quantity || 0 }}</td> |
| | | <td>{{ item.completeQuantity || 0 }}</td> |
| | | <td> |
| | |
| | | if (p < 50) return '#e6a23c' |
| | | if (p < 80) return '#409eff' |
| | | return '#67c23a' |
| | | } |
| | | |
| | | const getWorkOrderColorClass = (color) => { |
| | | const colorMap = { |
| | | 1: 'gray', |
| | | 2: 'yellow', |
| | | 3: 'green', |
| | | 4: 'red', |
| | | } |
| | | return colorMap[color] || 'gray' |
| | | } |
| | | |
| | | const setRowRef = (el, index) => { |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | width: calc(100% + 550px); |
| | | margin-right: -550px; |
| | | } |
| | | |
| | | .panel-item-customers { |
| | |
| | | padding: 18px; |
| | | width: 100%; |
| | | height: 428px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .progress-table-container { |
| | |
| | | } |
| | | |
| | | .progress-table th:nth-child(1) { |
| | | width: 15%; |
| | | width: 13%; |
| | | } |
| | | |
| | | .progress-table th:nth-child(2) { |
| | | width: 15%; |
| | | width: 14%; |
| | | } |
| | | |
| | | .progress-table th:nth-child(3) { |
| | | width: 15%; |
| | | width: 14%; |
| | | } |
| | | |
| | | .progress-table th:nth-child(4) { |
| | | width: 12%; |
| | | width: 18%; |
| | | } |
| | | |
| | | .progress-table th:nth-child(5) { |
| | | width: 12%; |
| | | width: 11%; |
| | | } |
| | | |
| | | .progress-table th:nth-child(6) { |
| | | width: 31%; |
| | | width: 11%; |
| | | } |
| | | |
| | | .progress-table th:nth-child(7) { |
| | | width: 19%; |
| | | } |
| | | |
| | | .progress-table td { |
| | |
| | | color: #b8c8e0; |
| | | font-size: 11px; |
| | | } |
| | | |
| | | .work-order-circles { |
| | | display: flex; |
| | | gap: 8px; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | } |
| | | |
| | | .work-order-circle { |
| | | width: 32px; |
| | | height: 32px; |
| | | border-radius: 6px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 12px; |
| | | font-weight: 500; |
| | | color: #fff; |
| | | cursor: pointer; |
| | | transition: all 0.2s ease; |
| | | } |
| | | |
| | | .work-order-circle.gray { |
| | | background-color: #909399; |
| | | } |
| | | |
| | | .work-order-circle.yellow { |
| | | background-color: #e6a23c; |
| | | } |
| | | |
| | | .work-order-circle.green { |
| | | background-color: #67c23a; |
| | | } |
| | | |
| | | .work-order-circle.red { |
| | | background-color: #f56c6c; |
| | | } |
| | | |
| | | </style> |