From 8e53faad5288b43b61f2fa33a26921d4e8426f29 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Thu, 4 Jun 2026 16:41:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/inspection/runTask.js               |  67 +++
 src/assets/icons/svg/pause.svg              |   6 +
 src/assets/icons/svg/remove.svg             |   1 +
 src/assets/icons/svg/start.svg              |   6 +
 src/assets/icons/svg/stop.svg               |   6 +
 src/views/inspection/runTask/index.vue      | 476 ++++++++++++++++++++
 src/views/inspection/runTask/task-steps.vue |  75 +++
 src/views/inspection/task/index.vue         |   3 +-
 8 files changed, 639 insertions(+), 1 deletion(-)
 create mode 100644 src/api/inspection/runTask.js
 create mode 100644 src/assets/icons/svg/pause.svg
 create mode 100644 src/assets/icons/svg/remove.svg
 create mode 100644 src/assets/icons/svg/start.svg
 create mode 100644 src/assets/icons/svg/stop.svg
 create mode 100644 src/views/inspection/runTask/index.vue
 create mode 100644 src/views/inspection/runTask/task-steps.vue

diff --git a/src/api/inspection/runTask.js b/src/api/inspection/runTask.js
new file mode 100644
index 0000000..5b26ff6
--- /dev/null
+++ b/src/api/inspection/runTask.js
@@ -0,0 +1,67 @@
+import request from '@/utils/request'
+
+export function getRunTaskList(params) {
+    return request({
+        url: '/inspection/taskInstance/list', 
+        method: 'get',
+        params: params
+    })
+}
+
+export function getRunTaskDetail(id) {
+    return request({
+        url: `/inspection/taskInstance/${id}`, 
+        method: 'get'
+    })
+}
+
+export function addRunTask(data) {
+    return request({
+        url: '/inspection/taskInstance',
+        method: 'post',
+        data: data
+    })
+}
+
+export function updateRunTask(data) {
+    return request({
+        url: '/inspection/taskInstance',
+        method: 'put',
+        data: data
+    })
+}
+
+export function deleteRunTask(id) {
+    return request({
+        url: `/inspection/taskInstance/${id}`,
+        method: 'delete'
+    })
+}
+
+export function startRunTask(id) {
+    return request({
+        url: `/inspection/taskInstance/start/${id}`,
+        method: 'put'
+    })
+}
+
+export function stopRunTask(id) {
+    return request({
+        url: `/inspection/taskInstance/stop/${id}`,
+        method: 'put'
+    })
+}
+
+export function pauseRunTask(id) {
+    return request({
+        url: `/inspection/taskInstance/pause/${id}`,
+        method: 'put'
+    })
+}
+
+export function resumeRunTask(id) {
+    return request({
+        url: `/inspection/taskInstance/resume/${id}`,
+        method: 'put'
+    })
+}
\ No newline at end of file
diff --git a/src/assets/icons/svg/pause.svg b/src/assets/icons/svg/pause.svg
new file mode 100644
index 0000000..0468653
--- /dev/null
+++ b/src/assets/icons/svg/pause.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1780372291375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5453" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M624.941176 360.929882c-12.408471 0-22.528 13.432471-22.528 30.117647v301.176471c0 16.624941 10.119529 30.117647 22.528 30.117647h45.296942c12.408471 0 22.528-13.492706 22.528-30.117647v-301.176471c0-16.685176-10.119529-30.117647-22.528-30.117647h-45.296942z m-271.058823 0c-12.408471 0-22.528 13.432471-22.528 30.117647v301.176471c0 16.624941 10.119529 30.117647 22.528 30.117647h45.296941c12.408471 0 22.528-13.492706 22.528-30.117647v-301.176471c0-16.685176-10.119529-30.117647-22.528-30.117647h-45.296941z" fill="currentColor" p-id="5454"></path>
+<path d="M250.036706 138.059294a141.673412 141.673412 0 0 0-141.552941 141.552941v524.047059a141.673412 141.673412 0 0 0 141.552941 141.552941h524.047059a141.673412 141.673412 0 0 0 141.552941-141.552941v-524.047059a141.673412 141.673412 0 0 0-141.552941-141.552941h-524.047059z m524.047059 885.458824h-524.047059a220.099765 220.099765 0 0 1-219.858824-219.858824v-524.047059a220.099765 220.099765 0 0 1 219.858824-219.858823h524.047059a220.099765 220.099765 0 0 1 219.858823 219.858823v524.047059a220.099765 220.099765 0 0 1-219.858823 219.858824z" fill="currentColor" p-id="5455"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/remove.svg b/src/assets/icons/svg/remove.svg
new file mode 100644
index 0000000..808f25c
--- /dev/null
+++ b/src/assets/icons/svg/remove.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1780472431337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19258" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M814.29 136.567H207.664c-55.752 0-101.274 13.3-101.274 56.776v26.086h808.663v-26.086c0.511-42.965-45.011-56.776-100.763-56.776" p-id="19259" fill="#2c2c2c"></path><path d="M723.245 191.808l-19.948-140.66c-3.58-27.62-29.667-50.125-57.287-50.125H376.456c-28.132 0-53.707 22.505-57.799 50.126l-19.948 141.17c-3.58 27.621 15.856 22.506 43.477 22.506h337.07c28.133-0.511 47.57 4.604 43.989-23.017z m-360.6-28.643L377.99 51.66h265.463l15.344 111.505H362.645zM831.17 282.342H190.785c-36.827 0-64.959 30.177-61.378 67.005l55.24 607.648c3.58 36.827 36.316 67.005 73.655 67.005h505.35c36.828 0 70.074-30.178 73.655-67.005l55.24-607.137c3.58-36.827-24.04-67.516-61.378-67.516zM376.456 953.415H245.514l-43.476-592.816h174.418v592.816z m221.474 0H423.512V360.599H597.93v592.816z m177.487 0H646.01V360.599h172.883l-43.476 592.816z" p-id="19260" fill="#2c2c2c"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/start.svg b/src/assets/icons/svg/start.svg
new file mode 100644
index 0000000..6c9ef5b
--- /dev/null
+++ b/src/assets/icons/svg/start.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1780371806721" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1692" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M703.146667 479.146667L469.333333 285.866667a42.666667 42.666667 0 0 0-69.973333 32.853333v386.56a42.666667 42.666667 0 0 0 69.973333 32.853333l232.106667-193.28a42.666667 42.666667 0 0 0 1.706667-65.706666z" fill="currentColor" p-id="1693"></path>
+<path d="M250.036706 138.059294a141.673412 141.673412 0 0 0-141.552941 141.552941v524.047059a141.673412 141.673412 0 0 0 141.552941 141.552941h524.047059a141.673412 141.673412 0 0 0 141.552941-141.552941v-524.047059a141.673412 141.673412 0 0 0-141.552941-141.552941h-524.047059z m524.047059 885.458824h-524.047059a220.099765 220.099765 0 0 1-219.858824-219.858824v-524.047059a220.099765 220.099765 0 0 1 219.858824-219.858823h524.047059a220.099765 220.099765 0 0 1 219.858823 219.858823v524.047059a220.099765 220.099765 0 0 1-219.858823 219.858824z" fill="currentColor" p-id="5455"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/stop.svg b/src/assets/icons/svg/stop.svg
new file mode 100644
index 0000000..47f964d
--- /dev/null
+++ b/src/assets/icons/svg/stop.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1780378438689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15665" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M877.696 0H146.24A146.24 146.24 0 0 0 0 146.24v731.456A146.24 146.24 0 0 0 146.24 1024h731.456A146.24 146.24 0 0 0 1024 877.696V146.24A146.24 146.24 0 0 0 877.696 0z m73.152 877.696c0 40.448-32.768 73.216-73.216 73.216H146.24a73.216 73.216 0 0 1-73.152-73.216V146.24c0-40.384 32.768-73.152 73.152-73.152h731.456c40.448 0 73.216 32.768 73.216 73.152v731.456z" fill="currentColor" p-id="15666"></path>
+<path d="M688.512 644.224a40.32 40.32 0 0 1-40.384 40.32H371.072a40.32 40.32 0 0 1-40.32-40.32V367.168a40.32 40.32 0 0 1 40.32-40.32h277.056a40.32 40.32 0 0 1 40.384 40.32v277.056z" fill="currentColor" p-id="15667"></path>
+</svg>
\ No newline at end of file
diff --git a/src/views/inspection/runTask/index.vue b/src/views/inspection/runTask/index.vue
new file mode 100644
index 0000000..c64ab82
--- /dev/null
+++ b/src/views/inspection/runTask/index.vue
@@ -0,0 +1,476 @@
+<template>
+    <div class="page-container">
+        <div class="left">
+            <div class="header">
+                <div>任务队列</div>
+                <el-button type="primary" @click="addTask">添加任务</el-button>
+            </div>
+            <div class="taskList-container">
+                <div class="task-item" v-for="task in runTaskList">
+                    <div class="task-content">
+                        <div class="task-title">{{ task.taskName }}</div>
+                        <div class="task-actions">
+                            <SvgIcon class="icon" v-if="task.status === '1'" name="pause" :size="24" color="#FFB300" @click="pauseTask(task)" />
+                            <SvgIcon class="icon" v-if="task.status === '3' || task.status === '5'" name="start" :size="24" color="#00FF88" @click="startTask(task)" />
+                            <SvgIcon class="icon" v-if="task.status != '5'" name="stop" :size="24" color="#d81e06" @click="stopTask(task)" />
+                            <SvgIcon class="icon" v-if="task.status === '5'" name="remove" :size="24" color="#FFB300" @click="removeTask(task)" />
+                        </div>
+                    </div>
+                    <div class="robot">机器人：{{ task.robotName }}</div>
+                    <el-progress :color="customColorMethod" :percentage="60" />
+                </div>
+            </div>
+        </div>
+        <div class="right"  ref="topContainerRef">
+            <div class="header">
+                <div class="label" :class="{ active: activePanel === 'current' }" @click="activePanel = 'current'">当前任务
+                </div>
+                <div class="label" :class="{ active: activePanel === 'history' }" @click="activePanel = 'history'">历史记录
+                </div>
+            </div>
+            <div>
+                <div v-if="activePanel === 'current'">
+                    <!-- 当前任务内容 -->
+                    <div class="task">
+                        <div class="task-header">
+                            <div class="task-info">
+                                <div class="title">厂区巡检</div>
+                                <div class="id">ID: 123456</div>
+                            </div>
+                            <div>执行中</div>
+                        </div>
+                        <div class="robot">
+                            <div>机器人：xxxx</div>
+                            <div>IP: 192.168.1.100</div>
+                            <div>开始时间: 2026-06-01 10:00:00</div>
+                        </div>
+                        <div class="progress-label">执行进度</div>
+                        <el-progress :color="customColorMethod" :percentage="60" />
+                        <taskSteps />
+                        <div class="run-log-container">
+                            <div>执行日志</div>
+                            <div class="log-container">
+                                <div class="log" v-for="value, index in 4">
+                                    <div class="time">11:02:06</div>
+                                    <div class="context">移动机器人至点位{{ index + 1 }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="activePanel === 'history'">
+                    <div :style="containerHeight">
+                        <el-table v-loading="loading" height="100%" :data="tableDataList">
+                            <el-table-column align="center" label="任务名称" prop="taskName" show-overflow-tooltip />
+                            <el-table-column align="center" label="任务状态" prop="status">
+                                <template #default="scope">
+                                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                                        {{ taskStatusMap[scope.row.status] || '未知状态' }}
+                                    </el-tag>
+                                </template>
+                            </el-table-column>
+                            <el-table-column align="center" label="任务类型" prop="taskType">
+                                <template #default="scope">
+                                    <el-tag :type="scope.row.taskType === '1' ? 'primary' : 'success'">
+                                        {{ scope.row.taskType === '1' ? '巡检任务' : '讲解任务' }}
+                                    </el-tag>
+                                </template>
+                            </el-table-column>
+                            <el-table-column align="center" label="机器人" prop="robotName" show-overflow-tooltip />
+                            <el-table-column align="center" label="开始时间" prop="startTime">
+                                <template #default="scope">
+                                    {{ formatDate(scope.row.startTime) }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column align="center" label="结束时间" prop="endTime">
+                                <template #default="scope">
+                                    {{ formatDate(scope.row.endTime) }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column align="center" class-name="small-padding fixed-width" label="操作"
+                                width="260">
+                                <template #default="scope">
+                                    <el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">
+                                        日志
+                                    </el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+
+                        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize"
+                            v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- 添加任务弹窗 -->
+        <el-dialog title="添加任务" v-model="open" width="500px" append-to-body>
+            <el-form ref="runTaskRef" :model="form" :rules="rules" label-width="100px">
+                <el-form-item label="选择任务" prop="taskId">
+                    <el-select v-model="form.taskId" placeholder="请选择任务" clearable style="width: 100%">
+                        <el-option v-for="task in taskList" :key="task.id" :label="task.taskName" :value="task.id" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="选择机器人" prop="robotId">
+                    <el-select v-model="form.robotId" placeholder="请选择机器人" clearable style="width: 100%">
+                        <el-option v-for="robot in robotList" :key="robot.id" :label="robot.robotName"
+                            :value="robot.id" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" @click="confirmTaskDialog">确 定</el-button>
+                    <el-button @click="cancelTaskDialog">取 消</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup>
+import SvgIcon from "@/components/SvgIcon";
+import taskSteps from "./task-steps.vue";
+import { useContainerHeight } from "@/hooks/tableHeight";
+import { getTaskList } from "@/api/inspection/task";
+import { getRobotList } from "@/api/inspection/robot";
+import { onMounted } from "vue";
+import { addRunTask, getRunTaskList, startRunTask, pauseRunTask, stopRunTask, resumeRunTask, deleteRunTask } from "@/api/inspection/runTask";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { formatDate } from "@/utils/index";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
+
+const taskStatusMap = {
+    '0': '已完成',
+    '1': '执行中',
+    '2': '失败',
+    '3': '已暂停',
+    '4': '已终止',
+    '5': '未执行',
+}
+
+const form = reactive({
+    taskId: null,
+    robotId: null,
+});
+
+const rules = reactive({
+    taskId: [{ required: true, message: '请选择任务', trigger: 'change' }],
+    robotId: [{ required: true, message: '请选择机器人', trigger: 'change' }],
+});
+
+const taskList = ref([]);
+const robotList = ref([]);
+
+const runTaskList = ref([]);
+
+const getTaskData = () => {
+    getTaskList({
+        pageNum: 1,
+        pageSize: 10000,
+    }).then((res) => {
+        taskList.value = res.rows;
+    })
+}
+
+const getRobotData = () => {
+    getRobotList({
+        pageNum: 1,
+        pageSize: 10000,
+    }).then((res) => {
+        robotList.value = res.rows;
+    })
+}
+
+const open = ref(false);
+
+const addTask = () => {
+    open.value = true;
+}
+const runTaskRef = ref();
+const confirmTaskDialog = () => {
+    runTaskRef.value.validate((valid) => {
+        if (valid) {
+            addRunTask(form).then(() => {
+                ElMessage.success("任务添加成功");
+                getList();
+                open.value = false;
+                runTaskRef.value.resetFields();
+            }).catch(() => {
+                ElMessage.error("任务添加失败");
+            })
+        }
+    });
+}
+
+const cancelTaskDialog = () => {
+    open.value = false;
+}
+
+const getList = () => {
+    loading.value = true;
+    getRunTaskList({
+        statusList: ['1', '3', '5'],
+    }).then((res) => {
+        if (res.code === 200) {
+            runTaskList.value = res.rows;
+        }
+        loading.value = false;
+    }).catch(() => {
+        loading.value = false;
+    });
+}
+
+const customColorMethod = (percentage) => {
+    if (percentage < 30) {
+        return '#6f7ad3'
+    }
+    if (percentage < 70) {
+        return '#1989fa'
+    }
+    return '#67c23a'
+}
+
+const activePanel = ref('current');
+
+const tableDataList = ref([]);
+const loading = ref(false);
+const total = ref(0);
+
+const queryParams = reactive({
+    pageNum: 1,
+    pageSize: 10,
+});
+
+const startTask = async (task) => {
+    if (task.status === '3') {
+        let res = await resumeRunTask(task.id);
+        if (res.code === 200) {
+            ElMessage.success("任务已恢复");
+            getList();
+        }
+    } else {
+        let res = await startRunTask(task.id);
+        if (res.code === 200) {
+            ElMessage.success("任务已开始");
+            getList();
+        }
+    }
+}
+
+const pauseTask = async (task) => {
+    let res = await pauseRunTask(task.id);
+    if (res.code === 200) {
+        ElMessage.success("任务已暂停");
+        getList();
+    }
+}
+
+const stopTask = async (task) => {
+    let res = await stopRunTask(task.id);
+    if (res.code === 200) {
+        ElMessage.success("任务已停止");
+        getList();
+    }
+}
+
+const removeTask = async (task) => {
+    ElMessageBox.confirm('确定要删除该任务吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(async () => {
+        let res = await deleteRunTask(task.id);
+        if (res.code === 200) {
+            ElMessage.success("任务已删除");
+            getList();
+        }
+    }).catch(() => {
+        // 取消删除
+    });
+}
+
+const getHistoryList = () => {
+    loading.value = true;
+    getRunTaskList({
+        statusList: ['0', '2', '4'],
+        pageNum: queryParams.pageNum,
+        pageSize: queryParams.pageSize,
+    }).then((res) => {
+        if (res.code === 200) {
+            tableDataList.value = res.rows;
+            total.value = res.total;
+        }
+        loading.value = false;
+    }).catch(() => {
+        loading.value = false;
+    });
+}
+
+onMounted(() => {
+    getTaskData();
+    getRobotData();
+    getList();
+    getHistoryList();
+})
+</script>
+<style lang="scss" scoped>
+.page-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: 12px;
+
+    .left {
+        width: 25%;
+        height: 100%;
+        background: #fff;
+        padding: 16px;
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-bottom: 16px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .taskList-container {
+            margin-top: 16px;
+            height: calc(100% - 100px);
+            overflow-y: auto;
+
+            .task-item {
+                padding: 12px;
+                background: #fafafa;
+                box-shadow: inset 0 0 0 1px #eee;
+                border-radius: 8px;
+                margin-bottom: 16px;
+
+                .task-content {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .task-title {
+                        font-size: 16px;
+                        font-weight: bold;
+                    }
+
+                    .task-actions {
+                        display: flex;
+                        gap: 8px;
+
+                        .icon {
+                            cursor: pointer;
+                        }
+                    }
+                }
+
+                .robot {
+                    margin-top: 8px;
+                    color: #666;
+                }
+            }
+        }
+    }
+
+    .right {
+        flex: 1;
+        padding: 16px;
+        background: #fff;
+        overflow: hidden;
+
+        .header {
+            display: flex;
+            margin-bottom: 16px;
+            border-bottom: 1px solid #eee;
+
+            .label {
+                font-size: 16px;
+                font-weight: bold;
+                color: #333;
+                cursor: pointer;
+                box-shadow: inset 0 0 0 1px #eee;
+                padding: 10px;
+            }
+
+            .active {
+                color: #409eff;
+                box-shadow: inset 0 0 0 1px #409eff;
+            }
+        }
+
+        .task {
+            padding: 16px;
+            background: #fafafa;
+            border-radius: 20px;
+
+            .task-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .title {
+                    font-size: 18px;
+                    font-weight: bold;
+                }
+
+                .id {
+                    color: #666;
+                    font-size: 14px;
+                    margin: 8px 0;
+                }
+            }
+
+            .robot {
+                display: flex;
+                align-items: center;
+                gap: 50px;
+                color: #666;
+                font-size: 14px;
+            }
+
+            .progress-label {
+                margin-top: 12px;
+                color: #666;
+                font-size: 14px;
+            }
+
+            .run-log-container {
+                padding: 16px;
+
+                .log-container {
+                    margin-top: 12px;
+                    max-height: 150px;
+                    overflow-y: auto;
+                    background: #fff;
+                    border: 1px solid #eee;
+                    border-radius: 8px;
+                    padding: 12px;
+
+                    .log {
+                        display: flex;
+                        align-items: center;
+                        gap: 12px;
+                        margin-bottom: 8px;
+
+                        .time {
+                            color: #999;
+                            font-size: 14px;
+                        }
+
+                        .context {
+                            color: #333;
+                            font-size: 14px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/inspection/runTask/task-steps.vue b/src/views/inspection/runTask/task-steps.vue
new file mode 100644
index 0000000..88f7820
--- /dev/null
+++ b/src/views/inspection/runTask/task-steps.vue
@@ -0,0 +1,75 @@
+<template>
+    <el-scrollbar ref="scrollbarRef" style="width: 100%;" class="step-scrollbar">
+        <div class="step-wrapper" ref="stepWrapperRef">
+            <el-steps :active="activeStep" finish-status="success">
+                <el-step v-for="value in 20" :key="value" :title="'点位' + value" :description="'点位' + value + '描述'" />
+            </el-steps>
+        </div>
+    </el-scrollbar>
+</template>
+<script setup>
+const scrollbarRef = ref(null)
+const stepWrapperRef = ref(null)
+
+const activeStep = ref(10)
+
+/**
+ * 滚动到当前激活的步骤
+ */
+const scrollToActiveStep = () => {
+    nextTick(() => {
+        // 获取 el-scrollbar 的可视区域宽度
+        const scrollbarEl = scrollbarRef.value?.$el
+        const wrapEl = scrollbarEl?.querySelector('.el-scrollbar__wrap')
+        if (!wrapEl) return
+
+        const viewWidth = wrapEl.clientWidth
+
+        // 获取所有 step 元素
+        const steps = stepWrapperRef.value?.querySelectorAll('.el-step')
+        if (!steps || !steps[activeStep.value]) return
+
+        // 计算激活 step 的位置
+        const activeEl = steps[activeStep.value]
+        const stepLeft = activeEl.offsetLeft
+        const stepWidth = activeEl.offsetWidth
+
+        // 让激活 step 居中显示
+        const scrollLeft = stepLeft - viewWidth / 2 + stepWidth / 2
+        console.log('滚动位置：', scrollLeft)
+        // 使用 el-scrollbar 提供的方法滚动
+        scrollbarRef.value.setScrollLeft(Math.max(0, scrollLeft))
+    })
+}
+
+setTimeout(() => {
+    scrollToActiveStep()
+}, 1000)
+</script>
+
+<style lang="scss" scoped>
+.step-scrollbar {
+    margin-top: 12px;
+    white-space: nowrap;
+
+    .step-wrapper {
+        display: inline-block;
+        /* 让wrapper宽度由内容决定 */
+        min-width: 100%;
+        /* 至少和容器一样宽 */
+        white-space: nowrap;
+        /* 防止 flex 项换行 */
+
+        :deep(.el-steps) {
+            flex-wrap: nowrap;
+
+            .el-step {
+                flex-shrink: 0 !important;
+                /* 禁止步骤项被压缩 */
+                min-width: 150px;
+                /* 每个步骤的最小宽度，按需调整 */
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/inspection/task/index.vue b/src/views/inspection/task/index.vue
index 14b28c4..7238ffa 100644
--- a/src/views/inspection/task/index.vue
+++ b/src/views/inspection/task/index.vue
@@ -160,8 +160,9 @@ function getList() {
         tableDataList.value = res.rows;
         total.value = res.total;
         loading.value = false;
+    }).finally(() => {
+        loading.value = false;
     });
-
 }
 
 // 取消按钮