|
|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<div class="progress-steps">
|
|
|
<div class="steps-container">
|
|
|
- <div
|
|
|
- v-for="(step, index) in steps"
|
|
|
- :key="step.msg_type"
|
|
|
+ <div
|
|
|
+ v-for="(step, index) in steps"
|
|
|
+ :key="step.msg_type"
|
|
|
class="step-item"
|
|
|
:class="getStepClass(step)"
|
|
|
>
|
|
|
@@ -27,13 +27,7 @@
|
|
|
<div class="step-content">
|
|
|
<div class="step-title">{{ getStepTitle(step) }}</div>
|
|
|
<div class="step-description">{{ step.name }}</div>
|
|
|
- <div v-if="step.status === '正在处理'" class="step-progress">
|
|
|
- <div class="progress-bar">
|
|
|
- <div
|
|
|
- class="progress-fill"
|
|
|
- :style="{ width: getProgressPercentage(step) + '%' }"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
+ <div v-if="step.status !== '等待处理'" class="step-progress">
|
|
|
<span class="progress-text">{{ step.current }}/{{ step.total }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -45,8 +39,8 @@
|
|
|
|
|
|
<!-- 完成按钮 -->
|
|
|
<div v-if="allStepsCompleted" class="completion-section">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
class="completion-button"
|
|
|
@click="handleComplete"
|
|
|
>
|
|
|
@@ -83,17 +77,10 @@ const emit = defineEmits<{
|
|
|
(e: 'complete'): void
|
|
|
}>()
|
|
|
|
|
|
-// 步骤标题映射
|
|
|
-const stepTitleMap: Record<string, string> = {
|
|
|
- 'segment_progress': '处理完成',
|
|
|
- 'scene_progress': '正在处理',
|
|
|
- 'upper_footer_progress': '等待处理',
|
|
|
- 'detail_progress': '等待处理'
|
|
|
-}
|
|
|
|
|
|
// 获取步骤标题
|
|
|
const getStepTitle = (step: StepData) => {
|
|
|
- return stepTitleMap[step.msg_type] || step.status
|
|
|
+ return step.status
|
|
|
}
|
|
|
|
|
|
// 获取步骤样式类
|
|
|
@@ -181,7 +168,7 @@ watch(() => props.steps, (newSteps) => {
|
|
|
}
|
|
|
|
|
|
.step-icon.completed {
|
|
|
- background: linear-gradient(135deg, #67C23A, #85CE61);
|
|
|
+ background: linear-gradient(135deg, #409EFF, #66B1FF);
|
|
|
}
|
|
|
|
|
|
.step-icon.processing {
|
|
|
@@ -194,7 +181,7 @@ watch(() => props.steps, (newSteps) => {
|
|
|
}
|
|
|
|
|
|
.step-icon.waiting {
|
|
|
- background: linear-gradient(135deg, #C0C4CC, #DCDFE6);
|
|
|
+ background: linear-gradient(135deg, #DCDFE6, #DCDFE6);
|
|
|
color: #909399;
|
|
|
}
|
|
|
|
|
|
@@ -263,9 +250,9 @@ watch(() => props.steps, (newSteps) => {
|
|
|
|
|
|
.step-connector {
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: calc(100% + 10px);
|
|
|
- width: 20px;
|
|
|
+ top: 35px;
|
|
|
+ left: calc(100% - 20px);
|
|
|
+ width: 60px;
|
|
|
height: 2px;
|
|
|
background: #E4E7ED;
|
|
|
z-index: 1;
|
|
|
@@ -283,10 +270,10 @@ watch(() => props.steps, (newSteps) => {
|
|
|
.completion-button {
|
|
|
background: linear-gradient(135deg, #2FB0FF, #B863FB);
|
|
|
border: none;
|
|
|
- padding: 12px 30px;
|
|
|
+ padding: 25px 30px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
- border-radius: 25px;
|
|
|
+ border-radius: 10px;
|
|
|
box-shadow: 0 4px 15px rgba(47, 176, 255, 0.3);
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
@@ -299,13 +286,13 @@ watch(() => props.steps, (newSteps) => {
|
|
|
// 步骤状态样式
|
|
|
.step-completed {
|
|
|
.step-title {
|
|
|
- color: #67C23A;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.step-processing {
|
|
|
.step-title {
|
|
|
- color: #409EFF;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -320,4 +307,4 @@ watch(() => props.steps, (newSteps) => {
|
|
|
color: #909399;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|