forked from SmartBench/CMVR-IOT-UI
feat: 动态计算任务日志高度
This commit is contained in:
parent
6a24cd17cc
commit
f26519a824
@ -35,7 +35,7 @@
|
||||
<div class="label" :class="{ active: activePanel === 'history' }" @click="activePanel = 'history'">历史记录
|
||||
</div>
|
||||
</div>
|
||||
<div class="context-container">
|
||||
<div ref="contextContainerRef" class="context-container">
|
||||
<div v-if="activePanel === 'current'">
|
||||
<!-- 当前任务区域只展示左侧任务队列中选中的任务，避免同时渲染所有执行中任务。 -->
|
||||
<div v-if="selectedRunTask" :key="selectedRunTask.id" class="task"
|
||||
@ -63,9 +63,9 @@
|
||||
:percentage="parseFloat(taskRunningInfo[selectedRunTask.id]?.progress?.toFixed(2)) || 0" />
|
||||
<taskSteps :list="pointList_runningTask[selectedRunTask.taskId]"
|
||||
:activeStep="taskRunningInfo[selectedRunTask.id]?.activeStep || 0" />
|
||||
<div class="run-log-container">
|
||||
<div>执行日志</div>
|
||||
<taskLog :list="taskLogList[selectedRunTask.id]" />
|
||||
<div ref="taskLogContainerRef" class="run-log-container">
|
||||
<div ref="taskLogTitleRef">执行日志</div>
|
||||
<taskLog :height="taskLogHeight" :list="taskLogList[selectedRunTask.id]" />
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无任务" />
|
||||
@ -173,6 +173,7 @@ import taskLog from "./task-log.vue";
|
||||
import { useContainerHeight } from "@/hooks/tableHeight";
|
||||
import { getTaskList, getWaypointByTaskId } from "@/api/inspection/task";
|
||||
import { computed, onMounted, onUnmounted } from "vue";
|
||||
import { useElementBounding, useElementSize } from '@vueuse/core'
|
||||
import { addRunTask, getRunTaskList, startRunTask, rerunRunTask, pauseRunTask, stopRunTask, resumeRunTask, deleteRunTask, getTaskLogListApi } from "@/api/inspection/runTask";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { formatDate } from "@/utils/index";
|
||||
@ -189,6 +190,38 @@ import {
|
||||
|
||||
const topContainerRef = ref();
|
||||
const containerHeight = useContainerHeight(topContainerRef);
|
||||
const contextContainerRef = ref(null)
|
||||
const taskLogContainerRef = ref(null)
|
||||
const taskLogTitleRef = ref(null)
|
||||
|
||||
// 通过元素边界实时获取当前任务内容区底部和日志容器顶部，避免依赖固定的 460px。
|
||||
const { bottom: contextContainerBottom } = useElementBounding(contextContainerRef)
|
||||
const { top: taskLogContainerTop } = useElementBounding(taskLogContainerRef)
|
||||
const { height: taskLogTitleHeight } = useElementSize(taskLogTitleRef)
|
||||
|
||||
const TASK_LOG_MARGIN_TOP = 12
|
||||
const CURRENT_TASK_BOTTOM_PADDING = 16
|
||||
const MIN_TASK_LOG_HEIGHT = 150
|
||||
|
||||
/**
|
||||
* 计算当前任务页面中日志组件可以使用的剩余高度。
|
||||
*
|
||||
* 计算基准是右侧内容区的底部，而不是窗口高度，因此页面外层布局、浏览器窗口
|
||||
* 尺寸或右侧面板高度发生变化时都能得到正确结果。日志容器顶部到内容区底部之间，
|
||||
* 还需要扣除“执行日志”标题高度、taskLog 组件自身的上间距，以及当前任务卡片的
|
||||
* 底部内边距，确保日志不会覆盖任务卡片边界。元素尚未挂载时使用最低高度作为初始值，
|
||||
* 待 VueUse 完成首次测量后会自动更新为实际剩余高度。
|
||||
*/
|
||||
const taskLogHeight = computed(() => {
|
||||
const remainingHeight = contextContainerBottom.value
|
||||
- taskLogContainerTop.value
|
||||
- taskLogTitleHeight.value
|
||||
- TASK_LOG_MARGIN_TOP
|
||||
- CURRENT_TASK_BOTTOM_PADDING
|
||||
|
||||
return Math.max(MIN_TASK_LOG_HEIGHT, Math.floor(remainingHeight))
|
||||
})
|
||||
|
||||
const socket = inject('ws');
|
||||
const startDialogVisible = ref(false)
|
||||
const startSubmitting = ref(false)
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<div class="label" :class="{ active: activePanel === 'history' }" @click="activePanel = 'history'">历史记录
|
||||
</div>
|
||||
</div>
|
||||
<div class="context-container">
|
||||
<div ref="contextContainerRef" class="context-container">
|
||||
<div v-if="activePanel === 'current'">
|
||||
<!-- 当前任务区域只展示左侧队列选中的任务，不再同时渲染全部执行中任务。 -->
|
||||
<div v-if="selectedRunTask" :key="selectedRunTask.id" class="task"
|
||||
@ -65,13 +65,13 @@
|
||||
:percentage="parseFloat(taskRunningInfo[selectedRunTask.id]?.progress?.toFixed(2)) || 0" />
|
||||
<taskSteps :list="pointList_runningTask[selectedRunTask.taskId]"
|
||||
:activeStep="taskRunningInfo[selectedRunTask.id]?.activeStep || 0" />
|
||||
<div class="run-log-container">
|
||||
<div>执行日志</div>
|
||||
<div ref="taskLogContainerRef" class="run-log-container">
|
||||
<div ref="taskLogTitleRef">执行日志</div>
|
||||
<!--
|
||||
taskId 用于查询检测项，taskStatus 用于在完成/失败/终止后推导最后一个已执行检测项的状态；
|
||||
两者与实例日志分开传入，避免把任务级字段重复写进每一条日志。
|
||||
-->
|
||||
<taskLog :height="460" :task-id="selectedRunTask.taskId"
|
||||
<taskLog :height="taskLogHeight" :task-id="selectedRunTask.taskId"
|
||||
:task-status="selectedRunTask.status" :list="taskLogList[selectedRunTask.id]" />
|
||||
</div>
|
||||
</div>
|
||||
@ -194,6 +194,7 @@ import { getTaskList, getTestCaseByTaskId } from "@/api/intelligenceTest/taskMan
|
||||
import { getPhoneList } from "@/api/intelligenceTest/mobilePhone";
|
||||
import { getVehicleList } from "@/api/intelligenceTest/car";
|
||||
import { computed, onMounted, onUnmounted } from "vue";
|
||||
import { useElementBounding, useElementSize } from '@vueuse/core'
|
||||
import {
|
||||
addTaskinstance,
|
||||
getTaskinstanceList,
|
||||
@ -219,6 +220,38 @@ import {
|
||||
|
||||
const topContainerRef = ref();
|
||||
const containerHeight = useContainerHeight(topContainerRef);
|
||||
const contextContainerRef = ref(null)
|
||||
const taskLogContainerRef = ref(null)
|
||||
const taskLogTitleRef = ref(null)
|
||||
|
||||
// 通过元素边界实时获取当前任务内容区底部和日志容器顶部，避免依赖固定的 460px。
|
||||
const { bottom: contextContainerBottom } = useElementBounding(contextContainerRef)
|
||||
const { top: taskLogContainerTop } = useElementBounding(taskLogContainerRef)
|
||||
const { height: taskLogTitleHeight } = useElementSize(taskLogTitleRef)
|
||||
|
||||
const TASK_LOG_MARGIN_TOP = 12
|
||||
const CURRENT_TASK_BOTTOM_PADDING = 16
|
||||
const MIN_TASK_LOG_HEIGHT = 150
|
||||
|
||||
/**
|
||||
* 计算当前任务页面中日志组件可以使用的剩余高度。
|
||||
*
|
||||
* 计算基准是右侧内容区的底部，而不是窗口高度，因此页面外层布局、浏览器窗口
|
||||
* 尺寸或右侧面板高度发生变化时都能得到正确结果。日志容器顶部到内容区底部之间，
|
||||
* 还需要扣除“执行日志”标题高度、taskLog 组件自身的上间距，以及当前任务卡片的
|
||||
* 底部内边距，确保日志不会覆盖任务卡片边界。元素尚未挂载时使用最低高度作为初始值，
|
||||
* 待 VueUse 完成首次测量后会自动更新为实际剩余高度。
|
||||
*/
|
||||
const taskLogHeight = computed(() => {
|
||||
const remainingHeight = contextContainerBottom.value
|
||||
- taskLogContainerTop.value
|
||||
- taskLogTitleHeight.value
|
||||
- TASK_LOG_MARGIN_TOP
|
||||
- CURRENT_TASK_BOTTOM_PADDING
|
||||
|
||||
return Math.max(MIN_TASK_LOG_HEIGHT, Math.floor(remainingHeight))
|
||||
})
|
||||
|
||||
const socket = inject('ws');
|
||||
const startDialogVisible = ref(false)
|
||||
const startSubmitting = ref(false)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user