From 43b07c94f417be29ad12e4a8d85be138040b2ac2 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Tue, 18 Aug 2026 10:18:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../intelligenceTest/runningTask/index.vue    |  12 +-
 .../intelligenceTest/runningTask/task-log.vue | 435 +++++++++++++++++-
 2 files changed, 443 insertions(+), 4 deletions(-)

diff --git a/src/views/intelligenceTest/runningTask/index.vue b/src/views/intelligenceTest/runningTask/index.vue
index 3a82023..1267fb4 100644
--- a/src/views/intelligenceTest/runningTask/index.vue
+++ b/src/views/intelligenceTest/runningTask/index.vue
@@ -66,7 +66,8 @@
                             :activeStep="taskRunningInfo[runTask.id]?.activeStep || 0" />
                         <div class="run-log-container">
                             <div>执行日志</div>
-                            <taskLog :height="500" :list="taskLogList[runTask.id]" />
+                            <!-- 传入任务定义 ID，task-log 会据此查询检测项并按检测项归类当前实例日志。 -->
+                            <taskLog :height="460" :task-id="runTask.taskId" :list="taskLogList[runTask.id]" />
                         </div>
                     </div>
                 </div>
@@ -154,7 +155,8 @@
         </el-dialog>
 
         <el-dialog title="任务执行日志" v-model="logDialogVisible" width="800px" append-to-body>
-            <taskLog v-loading="logDialogLoading" :list="logDialogData" :height="500" />
+            <!-- 历史弹窗也传入对应任务定义 ID，确保没有实时进度数据时仍能展示完整检测项列表。 -->
+            <taskLog v-loading="logDialogLoading" :task-id="logDialogTaskId" :list="logDialogData" :height="500" />
         </el-dialog>
 
         <el-dialog title="本次执行安排" v-model="startDialogVisible" width="820px" append-to-body>
@@ -590,11 +592,17 @@ const subscribeDebounced = debounce(async (sub) => {
 
 const logDialogVisible = ref(false)
 const logDialogData = ref([])
+
+// 历史表格行里的 taskId 是任务定义 ID；日志组件使用它查询本次任务包含的全部检测项。
+const logDialogTaskId = ref('')
 const logDialogLoading = ref(false)
 let logDialogRequestId = 0
 const handleOpenLog = async (row) => {
     const requestId = ++logDialogRequestId
     logDialogVisible.value = true
+
+    // 在请求实例日志前先更新 taskId，让检测项请求与日志请求并行执行，减少弹窗等待时间。
+    logDialogTaskId.value = row.taskId
     logDialogData.value = []
     logDialogLoading.value = true
     try {
diff --git a/src/views/intelligenceTest/runningTask/task-log.vue b/src/views/intelligenceTest/runningTask/task-log.vue
index 9156739..8d19199 100644
--- a/src/views/intelligenceTest/runningTask/task-log.vue
+++ b/src/views/intelligenceTest/runningTask/task-log.vue
@@ -1,12 +1,443 @@
 <template>
-  <TaskExecutionLog :list="list" :height="height" />
+  <div class="task-log" :style="{ height: `${height}px` }">
+    <!-- 折叠状态下只保留检测项名称和状态两列，节点日志不会提前占用页面空间。 -->
+    <div class="task-log__heading">
+      <span>检测项</span>
+      <span>状态</span>
+    </div>
+
+    <div v-if="loading" class="task-log__empty">检测项加载中...</div>
+    <div v-else-if="!groups.length" class="task-log__empty">暂无检测项</div>
+    <div v-else class="task-log__groups">
+      <section v-for="(group, index) in groups" :key="group.key" class="task-log__group">
+        <!-- 整行都可以点击；aria-expanded 同步当前展开状态，便于键盘和辅助技术识别。 -->
+        <button
+          type="button"
+          class="task-log__group-header"
+          :aria-expanded="isExpanded(group.key)"
+          @click="toggleGroup(group.key)"
+        >
+          <el-icon class="task-log__expand-icon" :class="{ 'is-expanded': isExpanded(group.key) }">
+            <ArrowRight />
+          </el-icon>
+          <span class="task-log__order">{{ String(index + 1).padStart(2, '0') }}</span>
+          <span class="task-log__name" :title="group.name">{{ group.name }}</span>
+          <el-tag class="task-log__status" :type="group.status.type" size="small">
+            {{ group.status.label }}
+          </el-tag>
+        </button>
+
+        <!-- 展开后只把当前检测项已经归类的节点日志交给通用日志组件渲染。 -->
+        <div v-if="isExpanded(group.key)" class="task-log__details">
+          <div class="task-log__details-heading">
+            <span>节点执行日志</span>
+            <span class="task-log__details-count">{{ group.logs.length }} 条</span>
+          </div>
+          <div v-if="group.nodeNames.length" class="task-log__nodes">
+            节点：{{ group.nodeNames.join('、') }}
+          </div>
+          <TaskExecutionLog
+            v-if="group.logs.length"
+            :list="group.logs"
+            :height="logHeight(group.logs)"
+          />
+          <div v-else class="task-log__details-empty">该检测项暂未产生节点日志</div>
+        </div>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { computed, ref, watch } from 'vue'
+import { ArrowRight } from '@element-plus/icons-vue'
+import { getTestCaseByTaskId } from '@/api/intelligenceTest/taskManage'
 import TaskExecutionLog from '@/views/flow/components/TaskExecutionLog.vue'
 
-defineProps({
+/**
+ * taskId: 任务定义 ID，用于查询该任务绑定的全部检测项。
+ * list: 当前任务实例产生的日志，检测项加载完成后会按 itemId/itemOrder 分组。
+ * items: 可选的外部检测项数据；传入后优先使用，可避免父组件已经查询时重复请求。
+ * height: 整个检测项日志区域的固定高度，内部超出部分滚动显示。
+ */
+const props = defineProps({
+  taskId: { type: [String, Number], default: '' },
   list: { type: Array, default: () => [] },
+  items: { type: Array, default: () => [] },
   height: { type: Number, default: 150 },
 })
+
+// taskItems 保存根据 taskId 查询到的检测项；items prop 存在时不会使用这里的数据。
+const taskItems = ref([])
+const loading = ref(false)
+
+// 默认 Set 为空，因此所有检测项初始都是折叠状态，符合“默认只展示检测项和状态”的要求。
+const expandedKeys = ref(new Set())
+
+// 每次检测项请求递增版本号，只允许最后一次请求更新页面，避免快速切换任务时旧结果覆盖新任务。
+let requestId = 0
+
+/**
+ * 接口中的 ID 可能是数字或字符串。统一转为字符串后再比较，避免 1 与 "1" 无法匹配。
+ * null、undefined 和空字符串都视为无效 ID，不参与日志分组。
+ */
+const valueOf = (value) => value === null || value === undefined || value === '' ? '' : String(value)
+
+/**
+ * actualResult、extraInfo 在不同日志来源中可能是对象，也可能是 JSON 字符串。
+ * 解析失败时返回空对象，让单条异常日志不会中断整个检测项列表的渲染。
+ */
+const parseObject = (value) => {
+  if (!value) return {}
+  if (typeof value === 'object') return value
+  try {
+    const parsed = JSON.parse(value)
+    return parsed && typeof parsed === 'object' ? parsed : {}
+  } catch {
+    return {}
+  }
+}
+
+// 标准化、过滤空值并去重，防止同一个 ID 的多个字段别名重复建立索引。
+const uniqueValues = (values) => [...new Set(values.map(valueOf).filter(Boolean))]
+
+/**
+ * 生成检测项所有可能的关联键。
+ * 当前业务主要使用 detectItemId，但保留 itemId/testCaseId/caseId/id，兼容历史数据和不同接口 DTO。
+ */
+const itemKeysOf = (item) => uniqueValues([
+  item?.detectItemId,
+  item?.itemId,
+  item?.testCaseId,
+  item?.caseId,
+  item?.id,
+])
+
+/**
+ * 生成日志所有可能的检测项关联键。
+ * 除日志顶层字段外，也读取 actualResult 和 extraInfo，兼容节点执行器把上下文放进扩展字段的情况。
+ */
+const logKeysOf = (log) => {
+  const actualResult = parseObject(log?.actualResult)
+  const extraInfo = parseObject(log?.extraInfo)
+  return uniqueValues([
+    log?.itemId,
+    log?.detectItemId,
+    log?.testItemId,
+    log?.testCaseId,
+    log?.caseId,
+    log?.item?.id,
+    log?.item?.detectItemId,
+    actualResult.itemId,
+    actualResult.detectItemId,
+    extraInfo.itemId,
+    extraInfo.detectItemId,
+  ])
+}
+
+// 检测项名称优先使用任务用例名称，其他字段作为不同后端版本的兼容回退。
+const nameOf = (item) => item?.caseName || item?.detectName || item?.itemName || item?.name || '未命名检测项'
+
+/**
+ * 提取执行节点名称，用于展开区域的节点汇总。
+ * 如果没有可读名称，最后使用 nodeId，至少能让用户定位到具体流程节点。
+ */
+const nodeNameOf = (log) => {
+  const actualResult = parseObject(log?.actualResult)
+  const extraInfo = parseObject(log?.extraInfo)
+  return log?.nodeName
+    || log?.nodeTitle
+    || log?.node?.name
+    || log?.node?.nodeName
+    || actualResult.nodeName
+    || extraInfo.nodeName
+    || log?.nodeId
+    || ''
+}
+
+// 状态统一转为小写字符串，使数字枚举和英文状态值可以使用同一套判断逻辑。
+const normalizedStatus = (value) => String(value ?? '').trim().toLowerCase()
+
+/**
+ * 根据一个检测项下的全部日志推导检测项状态。
+ * 优先级为：失败 > 终止 > 暂停 > 完成 > 执行中；没有日志时固定为“未执行”。
+ * 完成状态同时识别状态字段、progress=100 以及 completed/finished 布尔标记。
+ */
+const statusOf = (logs) => {
+  if (!logs.length) return { label: '未执行', type: 'info' }
+
+  const statuses = logs.flatMap((log) => [
+    log?.itemStatus,
+    log?.executionStatus,
+    log?.runStatus,
+    log?.resultStatus,
+    log?.state,
+    log?.status,
+  ].map(normalizedStatus))
+
+  if (statuses.some((status) => ['2', 'failed', 'failure', 'error', 'exception'].includes(status))) {
+    return { label: '执行失败', type: 'danger' }
+  }
+  if (statuses.some((status) => ['4', 'stopped', 'terminated', 'aborted'].includes(status))) {
+    return { label: '已终止', type: 'warning' }
+  }
+  if (statuses.some((status) => ['3', 'paused', 'pause'].includes(status))) {
+    return { label: '已暂停', type: 'warning' }
+  }
+  if (
+    statuses.some((status) => ['0', 'success', 'succeeded', 'completed', 'complete', 'finished'].includes(status))
+    || logs.some((log) => Number(log?.progress) >= 100 || log?.completed === true || log?.finished === true)
+  ) {
+    return { label: '已完成', type: 'success' }
+  }
+  return { label: '执行中', type: 'primary' }
+}
+
+// 父组件明确传入 items 时直接使用，否则使用 taskId 请求到的检测项。
+const taskItemsSource = computed(() => props.items.length ? props.items : taskItems.value)
+
+/**
+ * 将“检测项列表”和“任务实例日志”合并成页面需要的分组结构：
+ * 1. 先为每个检测项创建空分组，保证尚未执行的检测项也能显示；
+ * 2. 建立检测项 ID 到分组的索引，再把每条日志放入对应分组；
+ * 3. 最后计算节点名称集合和检测项状态。
+ */
+const groups = computed(() => {
+  // 每个检测项先建立空日志数组，所以初始状态能够由 statusOf 正确显示为“未执行”。
+  const result = taskItemsSource.value.map((item, index) => ({
+    key: itemKeysOf(item)[0] || `item-${index}`,
+    name: nameOf(item),
+    logs: [],
+  }))
+  const keyToGroup = new Map()
+
+  // 一个检测项可能同时存在 detectItemId、testCaseId 等多个 ID，全部映射到同一个分组。
+  taskItemsSource.value.forEach((item, index) => {
+    const group = result[index]
+    itemKeysOf(item).forEach((key) => {
+      if (!keyToGroup.has(key)) keyToGroup.set(key, group)
+    })
+  })
+
+  const unmatchedLogs = []
+  props.list.forEach((log) => {
+    const order = Number(log?.itemOrder)
+
+    // itemOrder 是任务内的 1 基序号，存在时可以准确处理同一检测项被重复编排的情况。
+    const orderedGroup = Number.isInteger(order) && order > 0 ? result[order - 1] : null
+
+    // 没有有效序号时，再使用日志 itemId 与检测项 detectItemId 等字段进行匹配。
+    const matchedGroup = orderedGroup || logKeysOf(log).map((key) => keyToGroup.get(key)).find(Boolean)
+    if (matchedGroup) matchedGroup.logs.push(log)
+    else unmatchedLogs.push(log)
+  })
+
+  // 无法关联的日志不能静默丢失，统一放入兜底分组，便于发现后端字段或历史数据问题。
+  if (unmatchedLogs.length) {
+    result.push({
+      key: 'unmatched',
+      name: '未关联检测项',
+      logs: unmatchedLogs,
+    })
+  }
+
+  return result.map((group) => ({
+    ...group,
+    nodeNames: uniqueValues(group.logs.map(nodeNameOf)),
+    status: statusOf(group.logs),
+  }))
+})
+
+const isExpanded = (key) => expandedKeys.value.has(key)
+
+// 使用新 Set 替换旧值，确保 Vue 能可靠追踪集合变化并立即更新展开区域。
+const toggleGroup = (key) => {
+  const next = new Set(expandedKeys.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  expandedKeys.value = next
+}
+
+// 展开日志设置最小、最大高度；少量日志不会留出大块空白，大量日志则在内部滚动。
+const logHeight = (logs) => Math.max(120, Math.min(320, 78 + logs.length * 58))
+
+/**
+ * 根据任务定义 ID 查询其绑定的检测项。
+ * 当 taskId 为空或父组件已经传入 items 时不发请求；请求结束前再次切换任务时，
+ * 通过 currentRequestId 与全局 requestId 比较，忽略已经过期的响应和 loading 状态更新。
+ */
+const loadTaskItems = async (taskId) => {
+  const currentRequestId = ++requestId
+  if (!taskId || props.items.length) {
+    taskItems.value = []
+    loading.value = false
+    return
+  }
+
+  loading.value = true
+  try {
+    const res = await getTestCaseByTaskId(taskId)
+    if (currentRequestId === requestId) {
+      taskItems.value = Array.isArray(res?.data) ? res.data : Array.isArray(res?.rows) ? res.rows : []
+    }
+  } catch {
+    if (currentRequestId === requestId) taskItems.value = []
+  } finally {
+    if (currentRequestId === requestId) loading.value = false
+  }
+}
+
+// immediate 保证组件首次拿到 taskId 时立即查询，而不需要父组件额外触发初始化方法。
+watch(() => props.taskId, loadTaskItems, { immediate: true })
+
+// 检测项切换后清除已经不存在的展开 key，避免新任务意外继承旧任务的展开状态。
+watch(() => groups.value.map((group) => group.key), (keys) => {
+  expandedKeys.value = new Set([...expandedKeys.value].filter((key) => keys.includes(key)))
+})
 </script>
+
+<style scoped lang="scss">
+.task-log {
+  margin-top: 12px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+
+.task-log__heading,
+.task-log__group-header {
+  display: grid;
+  grid-template-columns: 22px 34px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.task-log__heading {
+  padding: 10px 14px;
+  color: #98a2b3;
+  font-size: 12px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.task-log__heading span:first-child {
+  grid-column: 3;
+}
+
+.task-log__heading span:last-child {
+  grid-column: 4;
+}
+
+.task-log__groups {
+  padding: 0 8px 8px;
+}
+
+.task-log__group {
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.task-log__group:last-child {
+  border-bottom: 0;
+}
+
+.task-log__group-header {
+  width: 100%;
+  min-height: 48px;
+  padding: 8px 6px;
+  color: #344054;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.task-log__group-header:hover {
+  background: #f8fafc;
+}
+
+.task-log__expand-icon {
+  color: #98a2b3;
+  transition: transform 0.2s ease;
+}
+
+.task-log__expand-icon.is-expanded {
+  transform: rotate(90deg);
+}
+
+.task-log__order {
+  color: #98a2b3;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.task-log__name {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-log__status {
+  justify-self: end;
+}
+
+.task-log__details {
+  margin: 0 6px 10px 64px;
+  padding: 10px 12px 12px;
+  background: #f8fafc;
+  border-left: 2px solid #d0d5dd;
+}
+
+.task-log__details-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #475467;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.task-log__details-count,
+.task-log__nodes {
+  color: #98a2b3;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.task-log__nodes {
+  margin-top: 6px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.task-log__details :deep(.task-log) {
+  margin-top: 8px;
+  border-color: #eaecf0;
+}
+
+.task-log__empty,
+.task-log__details-empty {
+  padding: 28px 12px;
+  color: #98a2b3;
+  font-size: 13px;
+  text-align: center;
+}
+
+.task-log__details-empty {
+  padding: 18px 0 6px;
+}
+
+@media (max-width: 640px) {
+  .task-log__details {
+    margin-left: 12px;
+  }
+
+  .task-log__heading,
+  .task-log__group-header {
+    grid-template-columns: 22px 26px minmax(0, 1fr) auto;
+    gap: 6px;
+  }
+}
+</style>