feat: 执行任务
This commit is contained in:
parent
2d2854814b
commit
64d6cad887
@ -65,3 +65,11 @@ export function resumeRunTask(id) {
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskLogListApi(params) {
|
||||
return request({
|
||||
url: '/inspection/taskLog/list',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
@ -21,7 +21,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="robot">机器人：{{ task.robotName }}</div>
|
||||
<el-progress :color="customColorMethod" :percentage="parseFloat(taskRunningInfo[task.id]?.progress.toFixed(2)) || 0" />
|
||||
<el-progress :color="customColorMethod"
|
||||
:percentage="parseFloat(taskRunningInfo[task.id]?.progress?.toFixed(2)) || 0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,17 +57,12 @@
|
||||
|
||||
<div class="progress-label">执行进度</div>
|
||||
<el-progress :color="customColorMethod"
|
||||
:percentage="parseFloat(taskRunningInfo[runTask.id]?.progress.toFixed(2)) || 0" />
|
||||
<taskSteps :list="pointList_runintTask[runTask.taskId]"
|
||||
:percentage="parseFloat(taskRunningInfo[runTask.id]?.progress?.toFixed(2)) || 0" />
|
||||
<taskSteps :list="pointList_runningTask[runTask.taskId]"
|
||||
:activeStep="taskRunningInfo[runTask.id]?.activeStep || 0" />
|
||||
<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>
|
||||
<taskLog :list="taskLogList[runTask.id]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -145,11 +141,12 @@
|
||||
<script setup>
|
||||
import SvgIcon from "@/components/SvgIcon";
|
||||
import taskSteps from "./task-steps.vue";
|
||||
import taskLog from "./task-log.vue";
|
||||
import { useContainerHeight } from "@/hooks/tableHeight";
|
||||
import { getTaskList, getWaypointByTaskId } from "@/api/inspection/task";
|
||||
import { getRobotList } from "@/api/inspection/robot";
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import { addRunTask, getRunTaskList, startRunTask, pauseRunTask, stopRunTask, resumeRunTask, deleteRunTask } from "@/api/inspection/runTask";
|
||||
import { addRunTask, getRunTaskList, startRunTask, pauseRunTask, stopRunTask, resumeRunTask, deleteRunTask, getTaskLogListApi } from "@/api/inspection/runTask";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { formatDate } from "@/utils/index";
|
||||
import { debounce } from 'lodash'; // 引入 lodash 的防抖函数
|
||||
@ -216,6 +213,9 @@ const taskChange = (value) => {
|
||||
}
|
||||
|
||||
const runTaskRef = ref();
|
||||
/**
|
||||
* 确定添加执行任务
|
||||
*/
|
||||
const confirmTaskDialog = () => {
|
||||
runTaskRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
@ -249,19 +249,41 @@ const getList = () => {
|
||||
runingTaskList.value = res.rows.filter(item => item.status !== '5')
|
||||
for (let i = 0; i < runTaskList.value.length; i++) {
|
||||
getPointByTaskId(runTaskList.value[i].taskId)
|
||||
getTaskLogList(runTaskList.value[i].id)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const pointList_runintTask = ref({})
|
||||
const pointList_runningTask = ref({})
|
||||
/**
|
||||
* 获取正在执行任务的点位列表
|
||||
* @param taskId
|
||||
*/
|
||||
const getPointByTaskId = async (taskId) => {
|
||||
const res = await getWaypointByTaskId(taskId)
|
||||
if (res.code === 200) {
|
||||
pointList_runintTask.value[taskId] = res.data
|
||||
pointList_runningTask.value[taskId] = res.data
|
||||
}
|
||||
}
|
||||
|
||||
const taskLogList = ref({})
|
||||
|
||||
/**
|
||||
* 获取正在执行任务的执行日志
|
||||
* @param taskInstanceId
|
||||
*/
|
||||
const getTaskLogList = async (taskInstanceId) => {
|
||||
const res = await getTaskLogListApi({ taskInstanceId })
|
||||
if (res.code === 200) {
|
||||
taskLogList.value[taskInstanceId] = res.rows
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义进度条值不同区间所显示的颜色
|
||||
* @param percentage
|
||||
*/
|
||||
const customColorMethod = (percentage) => {
|
||||
if (percentage < 30) {
|
||||
return '#6f7ad3'
|
||||
@ -283,6 +305,10 @@ const queryParams = reactive({
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
/**
|
||||
* 开始执行任务
|
||||
* @param task
|
||||
*/
|
||||
const startTask = async (task) => {
|
||||
if (task.status === '3') {
|
||||
let res = await resumeRunTask(task.id);
|
||||
@ -299,6 +325,10 @@ const startTask = async (task) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 暂停执行任务
|
||||
* @param task
|
||||
*/
|
||||
const pauseTask = async (task) => {
|
||||
let res = await pauseRunTask(task.id);
|
||||
if (res.code === 200) {
|
||||
@ -307,6 +337,10 @@ const pauseTask = async (task) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止执行任务
|
||||
* @param task
|
||||
*/
|
||||
const stopTask = async (task) => {
|
||||
let res = await stopRunTask(task.id);
|
||||
if (res.code === 200) {
|
||||
@ -315,6 +349,10 @@ const stopTask = async (task) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除执行任务
|
||||
* @param task
|
||||
*/
|
||||
const removeTask = async (task) => {
|
||||
ElMessageBox.confirm('确定要删除该任务吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
@ -356,6 +394,9 @@ const taskRunningInfo = ref({})
|
||||
const socketChannelCallbacks = ref({})
|
||||
const channel = 'InspectionTaskInstance';
|
||||
|
||||
/**
|
||||
* 订阅websocket
|
||||
*/
|
||||
const subscribeDebounced = debounce(async (sub) => {
|
||||
if (!socket) {
|
||||
console.warn(`执行任务订阅失败: socket=${!!socket}`);
|
||||
@ -379,19 +420,25 @@ const subscribeDebounced = debounce(async (sub) => {
|
||||
const callback = (data) => {
|
||||
if (data !== '500') {
|
||||
if (data.status !== 0) {
|
||||
let activeStep = pointList_runintTask.value[data.taskId].findIndex(item => item.detectItemId === data.itemId) || 0
|
||||
let activeStep = pointList_runningTask.value[data.taskId].findIndex(item => item.detectItemId === data.itemId) || 0
|
||||
if (data.progress == 100) {
|
||||
activeStep += 1
|
||||
}
|
||||
taskRunningInfo.value[data.insId] = {
|
||||
taskRunningInfo.value[data.taskInstanceId] = {
|
||||
...data,
|
||||
activeStep
|
||||
}
|
||||
if (!taskLogList.value[data.taskInstanceId]) {
|
||||
taskLogList.value[data.taskInstanceId] = []
|
||||
}
|
||||
taskLogList.value[data.taskInstanceId].push({
|
||||
...data
|
||||
})
|
||||
} else {
|
||||
delete taskRunningInfo.value[data.insId]
|
||||
delete taskRunningInfo.value[data.taskInstanceId]
|
||||
delete taskLogList.value[data.taskInstanceId]
|
||||
getList()
|
||||
}
|
||||
console.log('taskRunningInfo', taskRunningInfo.value)
|
||||
} else {
|
||||
// 错误处理：取消订阅后重新订阅
|
||||
subscribeDebounced(false);
|
||||
@ -559,32 +606,7 @@ onUnmounted(() => {
|
||||
|
||||
.run-log-container {
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
70
src/views/inspection/runTask/task-log.vue
Normal file
70
src/views/inspection/runTask/task-log.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="log-container" ref="messageContainer">
|
||||
<div class="log" v-for="log, index in list">
|
||||
<div class="time">{{ formatDate(log.logTime) }}</div>
|
||||
<div class="context">{{ log.logContent }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { formatDate } from "@/utils/index";
|
||||
import { watch } from "vue";
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const messageContainer = ref(null)
|
||||
|
||||
const SCROLL_DELAY = 100
|
||||
const scrollToBottom = () => {
|
||||
console.log(123, messageContainer.value)
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
if (messageContainer.value) {
|
||||
console.log('messageContainer.value.scrollHeight', messageContainer.value.scrollHeight)
|
||||
messageContainer.value.scrollTop = messageContainer.value.scrollHeight
|
||||
}
|
||||
}, SCROLL_DELAY)
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.list, () => {
|
||||
scrollToBottom()
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
scrollToBottom()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.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>
|
||||
Loading…
Reference in New Issue
Block a user