fix: 生产详情样式优化

spring

2 天以前 f46269b594569ef480406af988ec857b586ba80e

 src/views/productionManagement/productionOrder/Detail/index.vue

@@ -42,15 +42,16 @@
                  </div>
                </template>
                <template #description>
                  <div class="step-panel">
                    <div v-if="idx === active" class="current-progress">
                  <div class="step-panel" :class="{ 'step-panel-active': idx === active }">
                    <div v-if="p.status !== 'wait'" class="current-progress">
                      <div class="current-progress-head">
                        <span class="current-progress-title">当前工序进度</span>
                        <!-- <span class="current-progress-value">{{ currentProcessPercentage }}%</span> -->
                        <span class="current-progress-title">工序进度</span>
                        <!-- <span class="current-progress-value">{{ processPercentage(p) }}%</span> -->
                      </div>
                      <el-progress
                        :percentage="currentProcessPercentage"
                        :status="currentProcessPercentage >= 100 ? 'success' : ''"
                        :percentage="processPercentage(p)"
                        :color="progressColor(processPercentage(p))"
                        :status="processPercentage(p) >= 100 ? 'success' : ''"
                        :stroke-width="10"
                      />
                    </div>
@@ -233,20 +234,23 @@
  return idx >= 0 ? idx : 0;
});

const currentProcess = computed(() => {
  const list = processes.value || [];
  return list[active.value] || null;
});

// 当前工序进度：用产出/投入估算（UI 先跑通，后续按真实规则替换）
const currentProcessPercentage = computed(() => {
  const p = currentProcess.value;
// 工序进度：用产出/投入估算（UI 先跑通，后续按真实规则替换）
const processPercentage = (p) => {
  if (!p) return 0;
  const input = Number(p.inputQty ?? 0);
  const output = Number(p.outputQty ?? 0);
  if (!Number.isFinite(input) || input <= 0) return 0;
  return clampPercentage((output / input) * 100);
});
};

// 30/50/80/100 分段颜色：红/橙/蓝/绿
const progressColor = (percentage) => {
  const p = clampPercentage(percentage);
  if (p < 30) return "#f56c6c";
  if (p < 50) return "#e6a23c";
  if (p < 80) return "#409eff";
  return "#67c23a";
};

// 不良率：不良数量 / 产出数量（先按此口径，后续对接接口可调整）
const defectRateText = (p) => {
@@ -379,6 +383,11 @@
    max-width: none;
    box-sizing: border-box;
  }
  .step-panel-active {
    background: #ecf5ff;
    border-color: #79bbff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
  }

  .right-panel {
    border: 1px solid #ebeef5;