CMVR-IOT-UI/src/views/flow/components/SubFlowExecutionResults.vue

<template>
  <div class="subflow-results">
    <div class="subflow-results__summary">
      <div>
        <strong>{{ data.name || '子流程' }}</strong>
        <span v-if="data.versionNo">V{{ data.versionNo }}</span>
      </div>
      <div class="subflow-results__summary-status">
        <el-tag v-if="analysisMeta" :type="analysisMeta.type" size="small">{{ analysisMeta.label }}</el-tag>
        <el-tag :type="statusMeta(data.status).type" size="small">{{ statusMeta(data.status).label }}</el-tag>
        <span>{{ formatDuration(data.durationMs) }}</span>
      </div>
    </div>

    <el-empty v-if="!executions.length" description="暂无内部节点日志" :image-size="56" />
    <el-collapse v-else v-model="expandedExecutions" class="subflow-results__groups">
      <el-collapse-item v-for="execution in executions" :key="execution.key" :name="execution.key">
        <template #title>
          <div class="subflow-results__group-title">
            <strong>{{ execution.label }}</strong>
            <el-tag :type="statusMeta(execution.status).type" size="small">
              {{ statusMeta(execution.status).label }}
            </el-tag>
            <span>{{ execution.nodes?.length || 0 }} 个节点</span>
          </div>
        </template>

        <div class="subflow-results__nodes">
          <details v-for="(node, index) in execution.nodes || []" :key="`${execution.key}:${node.nodeId}:${index}`">
            <summary>
              <span class="subflow-results__order">{{ index + 1 }}</span>
              <span class="subflow-results__node-name">{{ node.nodeName }}</span>
              <span v-if="node.actionLabel && node.actionLabel !== node.nodeName" class="subflow-results__action">
                {{ node.actionLabel }}
              </span>
              <el-tag :type="statusMeta(node.status).type" size="small">{{ statusMeta(node.status).label }}</el-tag>
              <el-tag v-if="node.passed !== null && node.passed !== undefined" :type="node.passed ? 'success' : 'danger'" size="small">
                {{ node.passed ? '通过' : '未通过' }}
              </el-tag>
              <span class="subflow-results__duration">{{ formatDuration(node.durationMs) }}</span>
            </summary>
            <div v-if="node.error" class="subflow-results__error">{{ node.error }}</div>
            <div v-if="hasValue(node.input)" class="subflow-results__data">
              <div class="subflow-results__label">输入</div>
              <JsonViewer :value="node.input" copyable boxed sort theme="light" />
            </div>
            <div v-if="hasValue(node.output)" class="subflow-results__data">
              <div class="subflow-results__label">输出</div>
              <JsonViewer :value="node.output" copyable boxed sort theme="light" />
            </div>
          </details>
        </div>
      </el-collapse-item>
    </el-collapse>

    <details v-if="hasValue(data.output)" class="subflow-results__final-output">
      <summary>子流程最终输出</summary>
      <JsonViewer :value="data.output" copyable boxed sort theme="light" />
    </details>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({ data: { type: Object, default: () => ({}) } })
const executions = computed(() => Array.isArray(props.data.executions) ? props.data.executions : [])
const expandedExecutions = ref([])
let initialized = false

watch(executions, (groups) => {
  if (initialized || !groups.length) return
  const active = groups.find((group) => String(group.status || '').toUpperCase() === 'RUNNING')
  expandedExecutions.value = [active?.key || groups[groups.length - 1].key]
  initialized = true
}, { immediate: true })

const statusMeta = (status) => {
  const value = String(status || '').toUpperCase()
  if (value === 'SUCCESS') return { label: '执行完成', type: 'success' }
  if (value === 'FAILED') return { label: '执行失败', type: 'danger' }
  if (value === 'STOPPED') return { label: '已停止', type: 'info' }
  if (value === 'PAUSED') return { label: '已暂停', type: 'warning' }
  return { label: '执行中', type: 'warning' }
}

const analysisMeta = computed(() => {
  if (props.data.analysisStatus === 'PASSED') return { label: '分析通过', type: 'success' }
  if (props.data.analysisStatus === 'FAILED') return { label: '分析未通过', type: 'danger' }
  if (props.data.analysisStatus === 'RUNNING') return { label: '分析中', type: 'warning' }
  return null
})

const formatDuration = (value) => {
  const duration = Number(value)
  if (!Number.isFinite(duration) || duration < 0) return '-'
  if (duration < 1000) return `${duration} ms`
  return `${(duration / 1000).toFixed(2)} s`
}

const hasValue = (value) => {
  if (value === null || value === undefined || value === '') return false
  if (Array.isArray(value)) return value.length > 0
  if (typeof value === 'object') return Object.keys(value).length > 0
  return true
}
</script>

<style scoped lang="scss">
.subflow-results__summary,
.subflow-results__summary-status,
.subflow-results__group-title,
.subflow-results__nodes summary {
  display: flex;
  align-items: center;
}

.subflow-results__summary {
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 12px;
  color: #344054;
}

.subflow-results__summary > div,
.subflow-results__summary-status { display: flex; align-items: center; gap: 8px; }
.subflow-results__summary span { color: #667085; font-size: 12px; }
.subflow-results__groups { border-top: 0; }

.subflow-results__group-title {
  min-width: 0;
  flex: 1;
  gap: 8px;
  padding-right: 8px;
}

.subflow-results__group-title > span:last-child {
  margin-left: auto;
  color: #909399;
  font-size: 12px;
}

.subflow-results__nodes { display: grid; gap: 5px; padding-bottom: 10px; }
.subflow-results__nodes details { border-bottom: 1px solid #ebeef5; }

.subflow-results__nodes summary {
  min-height: 36px;
  gap: 7px;
  padding: 3px 4px;
  cursor: pointer;
  list-style: none;
}

.subflow-results__nodes summary::-webkit-details-marker { display: none; }
.subflow-results__order { width: 20px; color: #98a2b3; font-size: 11px; text-align: center; }
.subflow-results__node-name { min-width: 0; overflow: hidden; color: #303133; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.subflow-results__action { color: #98a2b3; font-size: 11px; white-space: nowrap; }
.subflow-results__duration { margin-left: auto; color: #909399; font-size: 12px; white-space: nowrap; }

.subflow-results__error {
  margin: 4px 4px 8px 31px;
  padding: 7px 9px;
  border-left: 3px solid var(--el-color-danger);
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger-dark-2);
  overflow-wrap: anywhere;
}

.subflow-results__data { margin: 6px 4px 10px 31px; }
.subflow-results__label { margin-bottom: 5px; color: #667085; font-size: 12px; font-weight: 600; }
.subflow-results__final-output { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ebeef5; }
.subflow-results__final-output summary { margin-bottom: 8px; color: #344054; cursor: pointer; font-size: 12px; font-weight: 600; }
</style>