# 风机数据管理平台 — 异常检测及风资源尾流子系统设计说明

| 项目 | 说明 |
|------|------|
| 文档版本 | V1.0 |
| 适用系统 | 异常检测子系统、风资源尾流子系统 |
| 文档类型 | 软件设计说明 |
| 适用对象 | 开发、测试、运维、项目交付 |
| 编制日期 | 2026-07-06 |

---

## 1. 设计概述

### 1.1 建设目标

本子系统包含两个并列业务模块：

| 模块 | 目标 |
|------|------|
| **异常检测** | 对风电场风机 **数据感知异常** 与 **功能诊断异常** 进行监测、统计、热力分布展示及单机组多模块下钻分析 |
| **风资源尾流** | 对风场风资源分布与尾流影响进行可视化评估，包括风速分布、风向玫瑰、速度亏损散点及尾流明细表 |

两模块均以 **风场（fieldCode）**、**分析日期（datatime）** 为查询维度，前端统一走分析服务网关（`/healthApi`）。

### 1.2 技术栈

| 层级 | 技术选型 |
|------|----------|
| 前端框架 | Vue 2.6 + Vue Router 3 + Vuex 3 |
| UI 组件 | Element UI |
| 图表 | ECharts 5；异常详情支持 Plotly JSON / 远程图片 |
| 样式 | SCSS + 多主题 CSS 变量 |
| HTTP | `healthRequest`（`/healthApi`） |
| 后端服务 | `energy-manage-analyse-service`（异常 12 接口 + 尾流 1 接口） |

---

## 2. 系统架构设计

### 2.1 逻辑架构

```
┌──────────────────────────────────────────────────────────────────┐
│                     风机数据管理平台（前端）                       │
├─────────────────┬──────────────────────┬─────────────────────────┤
│ 驾驶舱异常 Tab   │  异常检测模块         │  风资源尾流模块          │
│ CockpitAbnormal │  anomalyDetection/   │  windResourceWake/      │
│ Panel           │  index + detail      │  index (概览+尾流 Tab)   │
└────────┬────────┴──────────┬─────────┴──────────┬──────────────┘
         │                   │                    │
         │ getAnomalyOverview  │ 12 个 anomaly API  │ getWakeWindFarm
         └───────────────────┴────────────────────┘
                              │
                    /healthApi → energy-manage-analyse-service
```

### 2.2 模块关系

| 关系 | 说明 |
|------|------|
| 共享查询头 | 异常检测列表页复用 `HealthHeader`（风场树 + 日期） |
| 驾驶舱集成 | 仅异常检测有驾驶舱 Tab；尾流仅菜单入口 |
| 远程资源 | 尾流与异常详情均支持 `*Path` 字段二次拉取 JSON/图片 |
| 列表状态保持 | 异常检测使用 `sessionStorage.anomalyDetectionListState` |

---

## 3. 异常检测 — 功能设计

### 3.1 路由设计

| 页面 | 路由 | 注册方式 |
|------|------|----------|
| 异常全景 | `/home/anomalyDetection/index` | 权限菜单动态注入 |
| 机组详情 | `/home/anomalyDetection/detail` | 静态路由，`meta.hidden: true` |

**详情页 Query**：`fieldCode`、`fieldId`、`engineId`、`engineName`、`datatime`、可选 `tab`（`all/wind/yaw/pitch/run/aero`）。

### 3.2 异常全景页（`anomalyDetection/index.vue`）

#### 3.2.1 页面布局

| 区域 | 组件 | 功能 |
|------|------|------|
| 顶栏 | `HealthHeader` | 风场 + 日期 |
| 概览区 | `AnomalyOverviewPanel` | 异常 KPI、数据感知雷达、功能诊断雷达 |
| 热力图 | `AnomalyHeatmapPanel` ×2 | 数据感知 / 功能诊断 机组×类型矩阵 |
| 轮播柱图 | `AnomalyCarouselPanel` | 五大模块柱状对比，5s 自动轮播，悬停暂停 |
| 风机列表 | `AnomalyWindCard` 网格 | 模块占比 + 传感器类型，支持名称升/降序 |

#### 3.2.2 并行数据加载

`fetchDashboard` 使用 `Promise.all` 并发请求 6 个接口，经 `mapAnomalyDashboard` 合并为单一 `dashboard` 对象：

| 接口 | 映射产物 |
|------|----------|
| `getAnomalyOverview` | `overview`（总数、占比文案） |
| `getAnomalySensorCount` | `sensorRadar` |
| `getAnomalyModelCount` | `detectorRadar` |
| `getAnomalyModelMap` | `sensorHeatmap`、`detectorHeatmap` |
| `getBarChartStats` | `carouselModules` |
| `getAnomalyModel` | `windCards` |

#### 3.2.3 异常类型定义

| 类型 | 含义 | 展示位置 |
|------|------|----------|
| 数据感知异常 | 传感器及运行数据类异常（7 维雷达） | 热力图、概览 |
| 功能诊断异常 | 五大功能模块诊断异常（5 维雷达） | 轮播柱图、风机卡片 |

**五大功能模块**：风速-功率、偏航系统、变桨系统、运行状态综合、气动性能。

### 3.3 异常详情页（`anomalyDetectionDetail.vue`）

| Tab | 内容 |
|-----|------|
| 异常趋势总览 | 五模块占比饼图 + 各模块 7/30 天折线趋势 |
| 风速-功率 / 偏航 / 变桨 / 运行状态 / 气动 | `AnomalyDetailModulePanel`：手风琴检测器项、双明细表、诊断图轮播 |

**模块 API 映射**（`MODULE_API`）：

| key | 接口 |
|-----|------|
| wind | `getAnomalyWindpwr` |
| yaw | `getAnomalyYaw`（后端路径 `geAnomalyYaw`） |
| pitch | `getAnomalyPitch` |
| run | `getAnomalyCtrlParam` |
| aero | `getAerodynamics` |

趋势数据：`getPitchAnomalyTrend` + `mapTrendToChartLines`。

### 3.4 数值与占比设计

| 工具 | 职责 |
|------|------|
| `anomalyValueUtils.toAnomalyPercent` | 接口 0~1 小数 → 百分数值（仅原始接口值调用一次） |
| `formatAnomalyPercentDisplay` | 展示已换算百分数（如 0.54 表示 0.54%） |
| `formatAnomalyRatioText` | 概览占比文案，保留 2 位小数 |

**注意**：`summary`、轮播 series 等已换算数据不得再次 `toAnomalyPercent`，避免 100 倍放大。

### 3.5 首页驾驶舱 — 异常 Tab

**组件**：`CockpitAbnormalPanel`（嵌于 `CockpitHealthPanel`）。

| 功能 | 设计 |
|------|------|
| 权限 | Tab 与内容需 `home:anomalyDetection:btn` |
| KPI | 接入台数（`queryWindTurbineCount`）+ 异常台数（`getAnomalyOverview` 汇总） |
| 风场表 | 各风场异常风机数，自动滚动，点击跳转异常检测页 |
| 跳转 | `navigateToAnomalyDashboard` → `anomalyDetectionListState` |

---

## 4. 风资源尾流 — 功能设计

### 4.1 路由与入口

| 项 | 说明 |
|----|------|
| 路由 | `/home/windResourceWake/index`（权限菜单动态注入） |
| 驾驶舱 | 无集成，仅左侧菜单进入 |
| 筛选 | `WrwFilterBar`：组织树风场 + 日期（默认昨日） |

### 4.2 页面结构（`windResourceWake/index.vue`）

| Tab | 组件 | 内容 |
|-----|------|------|
| 资源概览 | `WrwOverviewTab` | 各机组风速概率密度曲线；多机组风向玫瑰图网格 |
| 尾流情况 | `WrwWakeTab` | 散点/柱图 + `WrwWakeTable` 明细表 |

### 4.3 资源概览 Tab

| 图表 | 数据来源 | 交互设计 |
|------|----------|----------|
| 风速分布 | `windSpeedDistribution` | 图例/曲线按风机名称升序；tooltip 与柱顶标签一致 |
| 风向玫瑰 | `wakeRose`（全场 + 分机 `*Path` 合并） | 玫瑰图支持升/降序；图例置于网格上方 |

### 4.4 尾流情况 Tab

| 区块 | 图表/组件 | 说明 |
|------|-----------|------|
| 速度与损失分布 | 布局散点或 `wakeDistribute` 图片 | 东西/南北坐标 + 损失着色 |
| 尾流置信度 | `wakeLossConfident` 散点 | X：速度亏损，Y：置信度 |
| 尾流影响评估 | 双柱状图 | 各机组日尺度发电量损失；各机组附加湍流强度 |
| 明细表 | `WrwWakeTable` | 受尾流筛选、列排序、分页、缩略图预览 |

**柱状图 X 轴**：长风机名缩短为「N号风机」展示，tooltip 保留全名；机组过多时 dataZoom 缩放。

### 4.5 数据管道（`wrwWakeMapper.loadWakePageData`）

```
getWakeWindFarm({ fieldCode, datatime })
  → 解析 WakeWindFarmVO
  → 内联 charts 或按 *Path 远程 fetch JSON
  → 按 turbineList 合并 per-turbine 玫瑰图
  → 缺图表时由 turbineList 合成柱图/散点数据
  → 输出 { charts, tableData, turbineList, meta }
```

**远程资源**：`wrwRemoteData.resolveResourceUrl` 拼接 MinIO/静态资源前缀。

---

## 5. 接口设计

### 5.1 异常检测接口（12 个 POST）

前缀：`/energy-manage-analyse-service/anomaly`

| 分类 | 接口 | 参数级别 |
|------|------|----------|
| 风场级 | `getAnomalyOverview`、`getAnomalyModel`、`getAnomalyModelCount`、`getAnomalySensorCount`、`getBarChartStats`、`getAnomalyModelMap` | `{ fieldCode, datatime? }` |
| 机组级 | `getAnomalyWindpwr`、`geAnomalyYaw`、`getAnomalyPitch`、`getAnomalyCtrlParam`、`getAerodynamics`、`getPitchAnomalyTrend` | `{ fieldId, engineId, datatime?, timeRange? }` |

### 5.2 风资源尾流接口（1 个 POST）

| 接口 | 参数 | 响应 |
|------|------|------|
| `getWakeWindFarm` | `fieldCode`(必填), `datatime?` | `WakeWindFarmVO`（图表路径/内联 JSON + 风机列表） |

### 5.3 辅助接口

| 接口 | 用途 |
|------|------|
| `getSysOrganizationAuthTreeByRoleId` | 风场组织树 |
| `queryWindTurbineCount` | 驾驶舱接入台数 |

---

## 6. 数据流设计

### 6.1 异常检测列表

```
HealthHeader.change
  → fetchDashboard(fieldCode)
  → Promise.all(6 APIs)
  → mapAnomalyDashboard
  → 子组件 props 渲染
  → 点击风机卡片 goDetail
  → saveAnomalyListState + router.push /detail
```

**返回列表**：`consumeAnomalyListState` 恢复风场/日期/滚动位置，并 `scrollIntoView` 目标机组。

### 6.2 异常检测详情

```
route.query 初始化
  → getAnomalyModel（风机下拉，名称升序）
  → 各模块 MODULE_API 并行/按需
  → mapModuleApiToDetail → enrichModuleItems（拉 filePath 明细表）
  → getPitchAnomalyTrend → 总览折线/饼图
  → API 失败时 anomalyMockData 兜底
```

### 6.3 风资源尾流

```
WrwFilterBar 选风场/日期
  → getWakeWindFarm
  → loadWakePageData
  → wakeChartData / wakeTableData
  → Tab 切换时 initCharts / refreshCharts
```

---

## 7. 前端目录结构

### 7.1 异常检测

```
src/views/anomalyDetection/
├── index.vue
├── anomalyDetectionDetail.vue
├── components/
│   ├── AnomalyOverviewPanel.vue
│   ├── AnomalyHeatmapPanel.vue
│   ├── AnomalyCarouselPanel.vue
│   ├── AnomalyWindCard.vue
│   ├── AnomalyDetailModulePanel.vue
│   └── AnomalyDetectorPlotCarousel.vue
├── styles/
│   ├── anomaly-dashboard.scss
│   └── anomaly-detail.scss
└── utils/
    ├── anomalyDashboardMapper.js
    ├── anomalyDetailMapper.js
    ├── anomalyChartOptions.js
    ├── anomalyDetailChartOptions.js
    ├── anomalyValueUtils.js
    ├── anomalyMapEnums.js
    ├── anomalyListState.js
    ├── anomalyRemoteData.js
    └── anomalyDetectorPlotRegistry.js
```

### 7.2 风资源尾流

```
src/views/windResourceWake/
├── index.vue
├── components/
│   ├── WrwFilterBar.vue
│   ├── WrwOverviewTab.vue
│   ├── WrwWakeTab.vue
│   └── WrwWakeTable.vue
├── styles/windResourceWake.scss
└── utils/
    ├── wrwWakeMapper.js
    ├── wrwRemoteData.js
    ├── overviewChartOptions.js
    ├── wakeChartOptions.js
    └── wrwTableUtils.js
```

### 7.3 API 封装

| 文件 | 模块 |
|------|------|
| `src/api/anomalyAnalyse.js` | 异常检测 12 接口 |
| `src/api/wakeAnalyse.js` | 尾流 1 接口 |
| `src/utils/healthRequest.js` | 分析服务 Axios 实例 |

---

## 8. 图表与交互设计要点

### 8.1 异常检测

| 特性 | 实现 |
|------|------|
| 热力图 | 机组×异常类型，`visualMap` 渐变，X 轴 dataZoom |
| 轮播柱图 | 每模块多检测器分组柱，柱顶 `formatAnomalyPercentDisplay` |
| 雷达图 | 各维度台数标注在 indicator name |
| 详情诊断图 | `graphPath` JSON → Plotly 配置渲染；或图片 URL |
| 风机排序 | `compareEngineNames` / `sortByTurbineName` 自然排序 |

### 8.2 风资源尾流

| 特性 | 实现 |
|------|------|
| 风速分布 | 阶梯折线 + 滚动图例 |
| 玫瑰图 | 极坐标堆叠柱，风速段色带统一图例 |
| 尾流表 | `compareTurbineName` 列排序；受尾流 yes/no 筛选 |
| 柱图 | 双图独立 dataZoom；短标签 + 全名 tooltip |

---

## 9. 权限设计

| 权限码 | 作用域 |
|--------|--------|
| `home:anomalyDetection:btn` | 驾驶舱异常 Tab |
| 菜单 permissionCode | 「异常检测」「风资源尾流」菜单可见性 |
| 组织树 | 按角色过滤风场 |

---

## 10. 主题设计

| 模块 | 样式策略 |
|------|----------|
| 异常检测 | 默认适配 `tech-blue` 大屏；变量 `--anomaly-*` |
| 风资源尾流 | `windResourceWake.scss`；业务主题 `--wrw-*`；`tech-blue` 独立块 |
| 驾驶舱 | `cockpit-dashboard.scss` 异常 KPI 角框样式 |

**原则**：新主题仅追加 `html[data-theme="xxx"]` 选择器，不修改已验收 `tech-blue` 规则。

---

## 11. 异常、空态与性能

| 场景 | 处理 |
|------|------|
| 接口失败 | 异常详情 fallback mock；尾流清空图表与表格 |
| 远程 JSON 失败 | `console.warn`，对应图表显示「暂无数据」 |
| 图表销毁 | 路由离开 / Tab 切换 `dispose` ECharts 实例 |
| 轮播/滚动 | `clearInterval`；Tab 不可见时 `IntersectionObserver` 暂停滚动 |
| 并发请求 | 异常列表 6 接口并行；尾流玫瑰图按机组 `Promise.all` |

---

## 12. 部署与联调

| 项 | 说明 |
|----|------|
| 代理 | `vue.config.js`：`/healthApi` → 分析服务 |
| 运行时配置 | `public/runtime-config.js` 生产网关 |
| 尾流字段说明 | `docs/wind-resource-wake-chart-data.md` |
| 验证清单 | 异常 6 区块渲染、详情 5 模块、尾流双 Tab 图表与表格排序 |

---

## 13. 扩展建议

1. **异常**：新增检测模块时在 `CAROUSEL_MODULES`、`MODULE_PO_CONFIG` 同步扩展。
2. **尾流**：新增图表类型在 `wrwWakeMapper` 的 `CHART_PATH_KEYS` 注册路径键。
3. **共用**：风场选择、日期、权限跳转逻辑优先复用 `HealthHeader`、`cockpitFieldNavigate`。
4. **文档**：接口变更同步更新 `API_DESIGN_REPORT` 与操作说明。

---

## 14. 参考文档

| 文档 | 路径 |
|------|------|
| 异常检测操作说明 | `docs/OPERATION_MANUAL_ANOMALY.md` |
| 尾流图表数据说明 | `docs/wind-resource-wake-chart-data.md` |
| 分析服务 API 报告 | `docs/API_DESIGN_REPORT_energy-manage-analyse.md` |
| 前端部署说明 | `docs/DEPLOY_FRONTEND.md` |