diff --git a/admin/src/views/home/index.vue b/admin/src/views/home/index.vue index 7ab1a1b..06174a0 100644 --- a/admin/src/views/home/index.vue +++ b/admin/src/views/home/index.vue @@ -58,47 +58,7 @@

当前执行中的任务

- - - -
+
@@ -134,36 +94,10 @@ export default { chatData: [] }, runningTasks: [], + commandTableData: [], // 指令表格数据 taskLoading: false, chartInstance: null, // ECharts实例 - taskColumns: [ - { - title: '任务名称', - key: 'taskName', - width: 200 - }, - { - title: '任务类型', - key: 'taskType', - width: 120 - }, - { - title: '开始时间', - key: 'startTime', - width: 180 - }, - { - title: '进度', - slot: 'progress', - width: 120, - align: 'center' - }, - { - title: '命令列表', - slot: 'commands', - minWidth: 200 - } - ], + taskColumns: [], refreshTimer: null } }, @@ -355,18 +289,106 @@ export default { progress: this.calculateProgress(task.commands || []) } }) + // 构建表格数据:任务作为表头,指令作为数据行 + this.buildCommandTableData() } else { console.warn('加载执行中任务失败:', res.msg || res.message) this.runningTasks = [] + this.commandTableData = [] } } catch (error) { console.error('加载执行中任务失败:', error) this.runningTasks = [] + this.commandTableData = [] } finally { this.taskLoading = false } }, + // 构建指令表格数据:任务作为表头,指令作为数据行 + buildCommandTableData() { + if (!this.runningTasks || this.runningTasks.length === 0) { + this.taskColumns = [] + this.commandTableData = [] + return + } + + // 构建表头:第一列是指令序号,后续列是每个任务 + this.taskColumns = [ + { + title: '指令序号', + key: 'sequence', + width: 100, + align: 'center', + fixed: 'left' + } + ] + + // 为每个任务添加一列,使用 render 函数渲染指令 + const self = this + this.runningTasks.forEach(task => { + this.taskColumns.push({ + title: task.taskName || task.taskType || '未知任务', + minWidth: 200, + align: 'center', + render: (h, params) => { + const row = params.row + const taskId = task.taskId + if (row.commands && row.commands[taskId]) { + const cmd = row.commands[taskId] + return h('div', { + style: { + display: 'flex', + flexWrap: 'wrap', + alignItems: 'center', + justifyContent: 'center' + } + }, [ + h('Tag', { + props: { + color: self.getCommandColor(cmd.status) + }, + style: { + margin: '2px' + } + }, cmd.commandName) + ]) + } else { + return h('span', { + style: { + color: '#999' + } + }, '-') + } + } + }) + }) + + // 找出所有任务中指令数量的最大值 + const maxCommandCount = Math.max( + ...this.runningTasks.map(task => (task.commands || []).length), + 0 + ) + + // 构建数据行:每一行代表一个指令序号 + this.commandTableData = [] + for (let i = 0; i < maxCommandCount; i++) { + const row = { + sequence: i + 1, + commands: {} + } + + // 为每个任务填充对应序号的指令 + this.runningTasks.forEach(task => { + if (task.commands && task.commands[i]) { + row.commands[task.taskId] = task.commands[i] + } + }) + + this.commandTableData.push(row) + } + }, + // 渲染图表 renderChart() { if (!this.$refs.chartContainer) return