-
@@ -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)
diff --git a/src/views/intelligenceTest/runningTask/index.vue b/src/views/intelligenceTest/runningTask/index.vue
index ab3e0de..a9b1fa9 100644
--- a/src/views/intelligenceTest/runningTask/index.vue
+++ b/src/views/intelligenceTest/runningTask/index.vue
@@ -36,7 +36,7 @@
历史记录
-
+
-
@@ -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)