修改前端状态显示变更，保持前端实时更新

huang

4 天以前 9dcde5b27b70a4b0c0885347af5405eb2d1ef089

 mes-web/src/views/plcTest/components/MultiDeviceTest/ExecutionMonitor.vue

@@ -86,7 +86,7 @@
            查看详情
          </el-button>
          <el-button
            v-if="row.status === 'RUNNING'"
            v-if="row.status === 'RUNNING' || row.status === 'FAILED'"
            link
            type="danger"
            size="small"
@@ -127,6 +127,9 @@
          <div class="step-desc">耗时：{{ formatDuration(step.durationMs) }}</div>
          <div class="step-desc" v-if="step.retryCount > 0">
            重试次数：{{ step.retryCount }}
          </div>
          <div class="step-desc" v-if="step.successMessage">
            提示：{{ step.successMessage }}
          </div>
          <div class="step-desc error-message" v-if="step.errorMessage">
            <el-icon><Warning /></el-icon>
@@ -175,6 +178,12 @@
const sseConnecting = ref(false)
let eventSource = null
const baseURL = import.meta.env.VITE_API_BASE_URL || ''

// 统一的ID比较，避免数字/字符串不一致导致SSE更新被忽略
const isSameId = (a, b) => {
  if (a == null || b == null) return false
  return String(a) === String(b)
}

const fetchTasks = async () => {
  try {
@@ -259,9 +268,11 @@
    // 监听步骤更新
    eventSource.addEventListener('stepUpdate', (event) => {
      try {
        const data = JSON.parse(event.data)
        const raw = JSON.parse(event.data)
        // 后端全量监听时的数据结构为 { taskId, step: { ... } }，需要展开 step
        const data = raw?.step ? { ...raw.step, taskId: raw.taskId || raw.step.taskId } : raw
        // 如果数据中包含 taskId，检查是否匹配当前查看的任务
        if (data.taskId && data.taskId === currentTaskId.value) {
        if (data.taskId && isSameId(data.taskId, currentTaskId.value)) {
          updateStepFromSSE(data)
        } else if (!data.taskId) {
          // 如果没有 taskId，可能是步骤数据直接传递
@@ -308,7 +319,7 @@
    return
  }

  const taskIndex = tasks.value.findIndex(t => t.taskId === data.taskId)
  const taskIndex = tasks.value.findIndex(t => isSameId(t.taskId, data.taskId))
  if (taskIndex >= 0) {
    // 更新任务 - 保留原有字段，只更新SSE传来的字段
    const existingTask = tasks.value[taskIndex]
@@ -341,7 +352,7 @@
  if (!data) return
  
  // 如果数据中包含 taskId，检查是否匹配当前查看的任务
  if (data.taskId && data.taskId !== currentTaskId.value) {
  if (data.taskId && !isSameId(data.taskId, currentTaskId.value)) {
    return
  }

@@ -367,6 +378,7 @@
      endTime: data.endTime ? new Date(data.endTime) : existingStep.endTime,
      durationMs: data.durationMs !== undefined ? data.durationMs : existingStep.durationMs,
      retryCount: data.retryCount !== undefined ? data.retryCount : existingStep.retryCount,
      successMessage: data.successMessage !== undefined ? data.successMessage : existingStep.successMessage,
      errorMessage: data.errorMessage || existingStep.errorMessage
    }
  } else if (data.stepOrder !== undefined) {
@@ -419,6 +431,20 @@
  } finally {
    stepsLoading.value = false
  }
}

// 根据taskId打开任务详情抽屉（供父组件调用）
const openTaskDrawer = async (taskId) => {
  if (!taskId) return
  // 如果任务列表为空，先加载一次
  if (!tasks.value || tasks.value.length === 0) {
    await fetchTasks()
  }
  const task = tasks.value.find(t => t.taskId === taskId)
  if (!task) {
    return
  }
  await handleRowClick(task)
}

const statusType = (status) => {
@@ -562,7 +588,8 @@
defineExpose({
  fetchTasks,
  connectSSE,
  disconnectSSE
  disconnectSSE,
  openTaskDrawer
})
</script>