1
This commit is contained in:
张成
@@ -58,47 +58,7 @@
|
||||
<!-- 当前执行任务的命令区块（指令列表） -->
|
||||
<Card v-if="runningTasks.length > 0" style="margin-bottom: 16px;">
|
||||
<p slot="title">当前执行中的任务</p>
|
||||
<Table :columns="taskColumns" :data="runningTasks" :loading="taskLoading">
|
||||
<template slot-scope="{ row }" slot="progress">
|
||||
<Progress
|
||||
:percent="Number(row.progress) || 0"
|
||||
:status="row.progress === 100 ? 'success' : 'active'"
|
||||
style="width: 80px;"
|
||||
/>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="commands">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center;">
|
||||
<Tag
|
||||
v-for="(cmd, index) in getDisplayCommands(row.commands)"
|
||||
:key="index"
|
||||
:color="getCommandColor(cmd.status)"
|
||||
style="margin: 2px;"
|
||||
>
|
||||
{{ cmd.commandName }}
|
||||
</Tag>
|
||||
<Poptip
|
||||
v-if="row.commands && row.commands.length > 3"
|
||||
trigger="hover"
|
||||
placement="top"
|
||||
width="300"
|
||||
>
|
||||
<Tag color="default" style="margin: 2px; cursor: pointer;">
|
||||
更多({{ row.commands.length - 3 }})
|
||||
</Tag>
|
||||
<div slot="content" style="max-height: 300px; overflow-y: auto;">
|
||||
<Tag
|
||||
v-for="(cmd, index) in row.commands"
|
||||
:key="index"
|
||||
:color="getCommandColor(cmd.status)"
|
||||
style="margin: 4px; display: block;"
|
||||
>
|
||||
{{ cmd.commandName }}
|
||||
</Tag>
|
||||
</div>
|
||||
</Poptip>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<Table :columns="taskColumns" :data="commandTableData" :loading="taskLoading"></Table>
|
||||
</Card>
|
||||
|
||||
<!-- 趋势图表（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
|
||||
|
||||
Reference in New Issue
Block a user