DESIGN_SPEC_ANOMALY_WRW.md 15 KB

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

项目 说明
文档版本 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

详情页 QueryfieldCodefieldIdengineIdengineNamedatatime、可选 taball/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 sensorHeatmapdetectorHeatmap
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 汇总)
风场表 各风场异常风机数,自动滚动,点击跳转异常检测页
跳转 navigateToAnomalyDashboardanomalyDetectionListState

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

分类 接口 参数级别
风场级 getAnomalyOverviewgetAnomalyModelgetAnomalyModelCountgetAnomalySensorCountgetBarChartStatsgetAnomalyModelMap { fieldCode, datatime? }
机组级 getAnomalyWindpwrgeAnomalyYawgetAnomalyPitchgetAnomalyCtrlParamgetAerodynamicsgetPitchAnomalyTrend { 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_MODULESMODULE_PO_CONFIG 同步扩展。
  2. 尾流:新增图表类型在 wrwWakeMapperCHART_PATH_KEYS 注册路径键。
  3. 共用:风场选择、日期、权限跳转逻辑优先复用 HealthHeadercockpitFieldNavigate
  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