From f46269b594569ef480406af988ec857b586ba80e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期五, 20 三月 2026 09:43:26 +0800
Subject: [PATCH] fix: 生产详情样式优化
---
src/views/productionManagement/productionOrder/Detail/index.vue | 39 ++++++++++++++++++++++++---------------
1 files changed, 24 insertions(+), 15 deletions(-)
diff --git a/src/views/productionManagement/productionOrder/Detail/index.vue b/src/views/productionManagement/productionOrder/Detail/index.vue
index 8703826..6872fea 100644
--- a/src/views/productionManagement/productionOrder/Detail/index.vue
+++ b/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;
-});
-
-// 褰撳墠宸ュ簭杩涘害锛氱敤浜у嚭/鎶曞叆浼扮畻锛圲I 鍏堣窇閫氾紝鍚庣画鎸夌湡瀹炶鍒欐浛鎹級
-const currentProcessPercentage = computed(() => {
- const p = currentProcess.value;
+// 宸ュ簭杩涘害锛氱敤浜у嚭/鎶曞叆浼扮畻锛圲I 鍏堣窇閫氾紝鍚庣画鎸夌湡瀹炶鍒欐浛鎹級
+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;
--
Gitblit v1.9.3