feat: 执行任务
This commit is contained in:
parent
e9717c85e2
commit
8e53faad52
67
src/api/inspection/runTask.js
Normal file
67
src/api/inspection/runTask.js
Normal file
@ -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'
|
||||
})
|
||||
}
|
||||
6
src/assets/icons/svg/pause.svg
Normal file
6
src/assets/icons/svg/pause.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/assets/icons/svg/remove.svg
Normal file
1
src/assets/icons/svg/remove.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
6
src/assets/icons/svg/start.svg
Normal file
6
src/assets/icons/svg/start.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
6
src/assets/icons/svg/stop.svg
Normal file
6
src/assets/icons/svg/stop.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 966 B |
476
src/views/inspection/runTask/index.vue
Normal file
476
src/views/inspection/runTask/index.vue
Normal file
@ -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>
|
||||
75
src/views/inspection/runTask/task-steps.vue
Normal file
75
src/views/inspection/runTask/task-steps.vue
Normal file
@ -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>
|
||||
@ -160,8 +160,9 @@ function getList() {
|
||||
tableDataList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
|
||||
Loading…
Reference in New Issue
Block a user