Przeglądaj źródła

fix(photography):修复进度条显示和请求状态管理问题

- 清空之前的进度步骤以避免数据冲突
-重置请求状态,确保可以重新发起生成请求- 调整步骤组件中进度条的显示条件
- 修改步骤标题获取逻辑,直接使用状态值- 更新步骤图标和连接线的样式及位置-优化完成按钮的样式和交互效果- 统一处理步骤状态的颜色展示逻辑
panqiuyao 1 miesiąc temu
rodzic
commit
23ab8abed5

+ 17 - 30
frontend/src/views/Photography/components/ProgressSteps.vue

@@ -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>

+ 5 - 1
frontend/src/views/Photography/detail.vue

@@ -1106,6 +1106,8 @@ const generate = async function () {
 
   // 启用新的进度条并初始化步骤
   useNewProgress.value = true
+  // 清空之前的进度步骤
+  progressSteps.value = []
   // 从检测结果中获取步骤信息
   const backendSteps = checkResult?.data?.progress || []
   initProgressSteps(backendSteps)
@@ -1199,6 +1201,7 @@ const generate = async function () {
       if (errorMsg) {
         ElMessage.error(errorMsg)
       }
+      requesting.value = false  // 重置请求状态,允许再次生成
 
       // 处理完成后停止监听进度消息
      // clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
@@ -1214,7 +1217,7 @@ const generate = async function () {
       progress.value = 100
       disabledButton.value = false
       message.value = loadingMsg
-
+      requesting.value = false  // 重置请求状态,允许再次生成
 
       handleComplete()
     }
@@ -1246,6 +1249,7 @@ const generate = async function () {
       progress.value = 100
       disabledButton.value = true
       message.value = '全部货号生成失败'
+      requesting.value = false  // 重置请求状态,允许再次生成
 
     }
     requesting.value = true