# 问题处理 - 执行机资源图表显示太窄

> **文档类型**: 问题处理
> **创建日期**: 2026-08-21
> **模块**: 性能测试 - 执行机资源监控 UI
> **优先级**: P1
> **关联文档**: `_PRD_执行机资源监控.md`、`_PRD_执行机资源监控_计划执行.md`

---

## 一、问题描述

### 1.1 现象

压测任务执行中，在**实时监控页（MonitorPanel）**、**批量监控页（BatchMonitor）**、**报告页（ReportPanel）** 打开「执行机资源 Resource Monitor」区块时，**资源趋势图显示过窄**：

- CPU & 内存趋势图与网络趋势图**并排显示**（各占 50% 宽度 `el-col :span="12"`），每个图仅约页面一半宽
- 资源曲线在窄图中难以辨认趋势细节（CPU 波动、内存爬升被横向压缩）
- 与上方 TPS / 响应时间图（独占全宽）对比明显失衡

### 1.2 影响

| 影响项 | 说明 |
|--------|------|
| 可读性 | 曲线被横向压缩，波动细节难以观察，影响瓶颈定位分析 |
| 一致性 | 其他趋势图均为全宽，资源图半宽显示风格不统一 |
| 操作体验 | 用户需反复缩放/悬停才能读取数据，交互成本高 |

### 1.3 截图对比（示意）

```
现状（半宽并排）                    期望（全宽堆叠）
┌────────────────────┐            ┌──────────────────────────┐
│ CPU&内存  │  网络   │            │       CPU & 内存趋势       │
│ (窄)      │ (窄)   │            │        (全宽)              │
└────────────────────┘            ├──────────────────────────┤
                                  │       网络趋势（全宽）      │
                                  └──────────────────────────┘
```

---

## 二、问题定位

### 2.1 根因分析

资源趋势图在两个页面中均使用 `el-col :span="12"` 左右并排布局，导致每个图表只占半屏宽度：

| 文件 | 位置 | 问题代码 |
|------|------|---------|
| `frontend/src/views/performance/MonitorPanel.vue` | 第 171-184 行 | `<el-col :span="12">` × 2，resourceChartRef / networkChartRef 并排 |
| `frontend/src/views/performance/BatchMonitor.vue` | 第 249-262 行 | `<el-col :span="12">` × 2，与 MonitorPanel 相同的并排结构 |
| `frontend/src/views/performance/ReportPanel.vue` | 第 322-335 行 | `<el-col :span="12">` × 2，resourceChartRef / networkChartRef 并排 |

`el-col :span="12"` 表示占据 24 栅格中的 12 格 = 50% 宽度。两图并排时彼此各占一半，图表区域被横向压缩。

### 2.2 同类对比

监控页 / 批量监控页 / 报告页的**主趋势图**（TPS、响应时间、状态码、延迟、并发）均为：
- 全宽（`:span="24"` 或整行独占）
- 高度 280px（`.chart`）

而资源区块的图表：
- 半宽（`:span="12"`）
- 高度 220px（`.chart-sm`）

---

## 三、修复方案

### 3.1 方案：资源图表改为全宽堆叠

| 项 | 现状 | 修复后 |
|----|------|--------|
| 布局 | CPU&内存 + 网络 左右并排（span 12 + 12） | 上下堆叠（span 24 + 24） |
| 图表高度 | 220px（.chart-sm） | 280px（.chart，与其他趋势图一致） |
| 样式类 | chart-sm | chart |

### 3.2 修改点

| 文件 | 修改内容 |
|------|---------|
| `MonitorPanel.vue` | 资源区块 `el-row` 改为两个独立 `el-row`，每个 `el-col :span="24"`；class 由 `chart-sm` 改为 `chart`（280px） |
| `BatchMonitor.vue` | 同上 |
| `ReportPanel.vue` | 资源区块 `el-row :span="12"` 改为 `span="24"` 堆叠；class 由 `chart` 保持 280px |

### 3.3 不改动项

- 后端数据（resourceSummary 结构）不变
- ECharts 配置项不变
- 折叠面板（默认折叠）行为不变
- 资源卡片（CPU/内存/网络 4 卡片）布局不变

---

## 四、验收标准

| # | 验收项 | 通过标准 |
|---|--------|---------|
| 1 | MonitorPanel 资源区块 | CPU&内存趋势图、网络趋势图各占全宽，上下堆叠，高度 280px |
| 2 | BatchMonitor 资源区块 | 同上 |
| 3 | ReportPanel 资源区块 | 同上 |
| 4 | 前端构建 | `npm run build` 无错误 |
| 5 | 回归 | 折叠展开正常、无数据时区块隐藏、图表渲染正常 |

---

## 五、实施进度

- [ ] 编写问题处理文档（本文档）
- [ ] 输出计划执行文档
- [ ] 修改 MonitorPanel.vue
- [ ] 修改 BatchMonitor.vue
- [ ] 修改 ReportPanel.vue
- [ ] 前端构建验证
- [ ] 更新 HANDOFF 文档

---

*本文档为执行机资源图表过窄问题的分析与处理记录。*