zhanghao
d733ea8525
- 增加了检测流资源中引用循环的功能，以防止循环依赖。 - 改进了流引用的验证，以确保节点输出中不存在循环依赖。 - 增强了资源定义清理功能，以便在执行前移除过时的设备ID。 - 已实现复制资源角色的合并，以优化现有资源的优先级并避免重复。 - 更新了LoopIterationResults组件，以管理运行中迭代的自动扩展。 - 增强了NodeState和NodeTitle组件，以支持循环和子流结果的更宽弹出框显示。 - 优化了ParamsDrawer和SubFlowExecutionResults组件，以处理动态参数更新和执行结果。 - 改进了TaskExecutionLog，以统一输出处理并增强用户对日志的可见性。 - 更新了各种参数组件，以简化输入处理并提升用户体验。 - 在代码中添加了全面的注释和文档，以提高可维护性和易理解性。
181 lines
7.6 KiB
Vue
181 lines
7.6 KiB
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 })
|
||
|
||
// 后端状态枚举统一映射为 Element Plus tag 的文案和类型。
|
||
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
|
||
})
|
||
|
||
// 后端以毫秒返回耗时，短耗时保留 ms，较长耗时转秒，避免标题区域过长。
|
||
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`
|
||
}
|
||
|
||
// JSON Viewer 只在确实有内容时展示，避免空对象/空数组占据节点详情空间。
|
||
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>
|