1
This commit is contained in:
张成
@@ -58,47 +58,7 @@
|
|||||||
<!-- 当前执行任务的命令区块（指令列表） -->
|
<!-- 当前执行任务的命令区块（指令列表） -->
|
||||||
<Card v-if="runningTasks.length > 0" style="margin-bottom: 16px;">
|
<Card v-if="runningTasks.length > 0" style="margin-bottom: 16px;">
|
||||||
<p slot="title">当前执行中的任务</p>
|
<p slot="title">当前执行中的任务</p>
|
||||||
<Table :columns="taskColumns" :data="runningTasks" :loading="taskLoading">
|
<Table :columns="taskColumns" :data="commandTableData" :loading="taskLoading"></Table>
|
||||||
<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>
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<!-- 趋势图表（7天趋势） -->
|
<!-- 趋势图表（7天趋势） -->
|
||||||
@@ -134,36 +94,10 @@ export default {
|
|||||||
chatData: []
|
chatData: []
|
||||||
},
|
},
|
||||||
runningTasks: [],
|
runningTasks: [],
|
||||||
|
commandTableData: [], // 指令表格数据
|
||||||
taskLoading: false,
|
taskLoading: false,
|
||||||
chartInstance: null, // ECharts实例
|
chartInstance: null, // ECharts实例
|
||||||
taskColumns: [
|
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
|
|
||||||
}
|
|
||||||
],
|
|
||||||
refreshTimer: null
|
refreshTimer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -355,18 +289,106 @@ export default {
|
|||||||
progress: this.calculateProgress(task.commands || [])
|
progress: this.calculateProgress(task.commands || [])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
// 构建表格数据：任务作为表头，指令作为数据行
|
||||||
|
this.buildCommandTableData()
|
||||||
} else {
|
} else {
|
||||||
console.warn('加载执行中任务失败:', res.msg || res.message)
|
console.warn('加载执行中任务失败:', res.msg || res.message)
|
||||||
this.runningTasks = []
|
this.runningTasks = []
|
||||||
|
this.commandTableData = []
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载执行中任务失败:', error)
|
console.error('加载执行中任务失败:', error)
|
||||||
this.runningTasks = []
|
this.runningTasks = []
|
||||||
|
this.commandTableData = []
|
||||||
} finally {
|
} finally {
|
||||||
this.taskLoading = false
|
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() {
|
renderChart() {
|
||||||
if (!this.$refs.chartContainer) return
|
if (!this.$refs.chartContainer) return
|
||||||
|
|||||||
Reference in New Issue
Block a user