gaoluyang
5 天以前 2722434125ecbf860b97f793b6711e7567647729
src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue
@@ -16,6 +16,7 @@
                <th>生产订单号</th>
                <th>产品名称</th>
                <th>规格</th>
                <th>工序</th>
                <th>需求数量</th>
                <th>完成数量</th>
                <th>完成进度</th>
@@ -31,6 +32,20 @@
                <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>
@@ -96,6 +111,16 @@
  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) => {
@@ -245,6 +270,8 @@
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(100% + 550px);
  margin-right: -550px;
}
.panel-item-customers {
@@ -252,6 +279,7 @@
  padding: 18px;
  width: 100%;
  height: 428px;
  box-sizing: border-box;
}
.progress-table-container {
@@ -295,27 +323,31 @@
}
.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 {
@@ -348,4 +380,42 @@
  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>