# 执行计划 - 修复报告查看TPS趋势和响应时间趋势图表不显示

> **文档类型**: 执行计划文档
> **创建日期**: 2026-08-13
> **作者**: czj
> **关联文档**: `_问题处理_报告查看TPS趋势图表不显示.md`
> **状态**: 待执行

---

## 一、改动总览

| # | 改动项 | 文件 | 说明 |
|---|--------|------|------|
| 1 | 调整 `loadReport()` 中 `loading` 状态设置时机 | `frontend/src/views/performance/ReportPanel.vue` | 数据到达后先设 `loading=false` 再初始化图表，确保图表 div 已在 DOM 中 |

---

## 二、详细执行步骤

### Step 1：修复 `loadReport()` 中的 loading 时序

**文件**：`frontend/src/views/performance/ReportPanel.vue`（第 247-261 行）

**问题**：`loading.value = true` 在 API 调用期间保持，导致 `v-if="loading"` 骨架屏优先渲染，图表 div 不在 DOM 中，`initCharts()` 获取不到 ref。

**修复方案**：在 `report.value = res` 赋值后，立即将 `loading` 设为 `false`，使 Vue 将 DOM 切换为图表区块，再调用 `initCharts()` 和 `updateCharts()`。

**改动前**：

```typescript
async function loadReport() {
  if (!taskId.value) return
  loading.value = true
  try {
    const res = await getReport(taskId.value)
    report.value = res
    await nextTick()
    initCharts()    // ❌ loading=true，图表 div 不在 DOM 中
    updateCharts()  // ❌ 操作未初始化的图表实例
  } catch (e: any) {
    ElMessage.error('加载报告失败: ' + (e.response?.data?.detail || e.message || ''))
  } finally {
    loading.value = false
  }
}
```

**改动后**：

```typescript
async function loadReport() {
  if (!taskId.value) return
  loading.value = true
  try {
    const res = await getReport(taskId.value)
    report.value = res
    loading.value = false           // ✅ 先让图表 div 渲染到 DOM
    await nextTick()                // ✅ 等待 Vue DOM 更新
    initCharts()                    // ✅ 此时 ref 有效
    updateCharts()                  // ✅ 图表正确渲染
  } catch (e: any) {
    ElMessage.error('加载报告失败: ' + (e.response?.data?.detail || e.message || ''))
    loading.value = false
  }
  // 注意：不再有 finally 中的 loading=false
}
```

**具体改动**（第 252 行后插入 `loading.value = false`，移除 `finally` 块中的 `loading.value = false`）：

```diff
  async function loadReport() {
    if (!taskId.value) return
    loading.value = true
    try {
      const res = await getReport(taskId.value)
      report.value = res
+     loading.value = false
      await nextTick()
      initCharts()
      updateCharts()
    } catch (e: any) {
      ElMessage.error('加载报告失败: ' + (e.response?.data?.detail || e.message || ''))
+     loading.value = false
-   } finally {
-     loading.value = false
    }
  }
```

### Step 2：验证前端构建

在 `frontend/` 目录下执行构建验证：

```bash
cd frontend && npm run build
```

预期结果：无 TypeScript 错误，构建成功。

### Step 3：部署到服务器

将前端构建产物上传到 192.168.5.60 并重启容器：

```bash
# 构建前端
cd frontend && npm run build

# 上传 dist 到服务器
scp -r frontend/dist/* ubains@192.168.5.60:/home/ubains/app/frontend/

# 重启容器
ssh ubains@192.168.5.60 "docker restart app"
```

---

## 三、验证步骤

| 步骤 | 操作 | 预期结果 |
|------|------|----------|
| 1 | 访问 http://localhost:3000，进入性能测试 → 报告查看 | 页面正常加载，显示任务选择器 |
| 2 | 选择一个已完成的任务，点击"查看报告" | 骨架屏短暂显示 → 摘要、指标卡片正常显示 |
| 3 | 滚动到趋势图区域 | **TPS 趋势图**显示折线面积图，**响应时间趋势图**显示多条折线 |
| 4 | 点击"刷新报告" | 图表重新加载，保持不变 |
| 5 | 切换任务 | 图表跟随新任务数据更新 |
| 6 | 进入性能测试 → 执行监控 | 实时监控面板图表不受影响（回归测试） |

---

## 四、回滚方案

如果修复后出现异常（如骨架屏闪烁、图表加载失败等），撤销 Step 1 的代码改动即可：

```bash
git checkout -- frontend/src/views/performance/ReportPanel.vue
```

---

*本文档由 Claude Code 生成，遵循项目执行计划文档规范。*