风机数据管理平台 — 异常检测及风资源尾流子系统设计说明
| 项目 |
说明 |
| 文档版本 |
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. 扩展建议
- 异常:新增检测模块时在
CAROUSEL_MODULES、MODULE_PO_CONFIG 同步扩展。
- 尾流:新增图表类型在
wrwWakeMapper 的 CHART_PATH_KEYS 注册路径键。
- 共用:风场选择、日期、权限跳转逻辑优先复用
HealthHeader、cockpitFieldNavigate。
- 文档:接口变更同步更新
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 |