1

admin/src/views/home/index.vue

@@ -59,15 +59,44 @@
         <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">
-                    <Tag
-                        v-for="(cmd, index) in row.commands"
-                        :key="index"
-                        :color="getCommandColor(cmd.status)"
-                        style="margin: 2px;"
-                    >
-                        {{ cmd.commandName }}
-                    </Tag>
+                    <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>
@@ -125,21 +154,14 @@ export default {
                 },
                 {
                     title: '进度',
-                    key: 'progress',
-                    width: 100,
-                    render: (h, params) => {
-                        return h('Progress', {
-                            props: {
-                                percent: params.row.progress || 0,
-                                status: 'active'
-                            }
-                        })
-                    }
+                    slot: 'progress',
+                    width: 120,
+                    align: 'center'
                 },
                 {
                     title: '命令列表',
                     slot: 'commands',
-                    minWidth: 300
+                    minWidth: 200
                 }
             ],
             refreshTimer: null
@@ -326,7 +348,13 @@ export default {
                 console.log('执行中任务接口返回:', res)
                 
                 if (res.code === 0) {
-                    this.runningTasks = res.data || []
+                    // 处理数据并计算进度
+                    this.runningTasks = (res.data || []).map(task => {
+                        return {
+                            ...task,
+                            progress: this.calculateProgress(task.commands || [])
+                        }
+                    })
                 } else {
                     console.warn('加载执行中任务失败:', res.msg || res.message)
                     this.runningTasks = []
@@ -492,6 +520,31 @@ export default {
                 'skipped': 'warning'
             }
             return colorMap[status] || 'default'
+        },
+
+        // 获取要显示的命令列表（最多显示3个）
+        getDisplayCommands(commands) {
+            if (!commands || !Array.isArray(commands)) {
+                return []
+            }
+            return commands.slice(0, 3)
+        },
+
+        // 根据命令状态计算进度
+        calculateProgress(commands) {
+            if (!commands || !Array.isArray(commands) || commands.length === 0) {
+                return 0
+            }
+            
+            // 统计已完成和已失败的命令数（这些状态表示命令已执行完成）
+            const completedCount = commands.filter(cmd => {
+                const status = cmd.status || ''
+                return status === 'completed' || status === 'failed' || status === 'skipped'
+            }).length
+            
+            // 计算进度百分比
+            const progress = Math.round((completedCount / commands.length) * 100)
+            return progress
         }
     }
 }