26、AI 预测性维护 (燃气轮机轴承) - /安全与维护组件/ai-predictive-maintenance-turbine

76个工业组件库示例汇总

AI 预测性维护模拟组件 (燃气轮机轴承)

概述

这是一个交互式的 Web 组件，旨在模拟基于 AI 的预测性维护 (Predictive Maintenance, PdM) 概念，应用于工业燃气轮机的关键部件（例如轴承）。它通过模拟传感器数据、动态预测剩余使用寿命 (RUL)，并根据预测结果提供相应的维护建议，展示 PdM 的基本工作流程和价值。

重要提示： 此组件是一个高度简化的概念演示，其传感器数据、RUL 计算和 AI 模型均为模拟，不代表真实的物理过程或复杂的机器学习模型。它的主要目的是教学和概念展示。

主要功能

设备与部件选择: 用户可以选择模拟的燃气轮机型号和具体的监测部件（如主轴承、输出轴承）。
实时传感器数据模拟: 模拟与所选部件相关的关键传感器（如振动、温度、声发射、负载、油液颗粒等）的实时读数，并根据模拟的健康状况显示状态（正常、警告、临界）。
动态 RUL 预测: 模拟 AI 模型根据当前的传感器数据和运行时间，持续预测所选部件的剩余使用寿命 (RUL)，单位通常为小时或运行周期。
预测置信度: 显示模拟的 AI 模型对其当前 RUL 预测的置信度百分比。
三级维护建议: 根据预测的 RUL 值，自动生成并显示不同级别的维护建议：
- 监控 (Monitor): RUL 充足，状态良好，建议常规监控。
- 建议检查 (Inspect): RUL 低于警告阈值，建议在下次维护窗口进行检查。
- 紧急更换 (Replace): RUL 低于临界阈值，存在较高失效风险，建议立即安排更换。
AI 模型特征重要性 (模拟): 展示模拟的 AI 模型认为哪些传感器特征对当前的 RUL 预测影响最大，帮助理解判断依据。
可视化界面:
- 采用简洁的科技感风格（类苹果工业风）。
- 响应式三栏布局（选择区 | 传感器与预测区 | 建议与特征区），适应不同屏幕尺寸。
- 通过颜色变化（RUL 值、传感器状态、建议卡片）提供直观的状态反馈。

如何使用

打开页面: 在现代浏览器中打开 index.html 文件。
选择设备: 从左上角的"选择设备"下拉菜单中选择一个燃气轮机型号（例如 GT-101）。
选择部件: 在"选择部件"下拉菜单中选择要监控的具体部件（例如主轴承 A1）。
观察模拟:
- 中间面板会显示该部件相关的模拟传感器读数，并实时更新。
- 同时，中间面板也会显示模拟的 RUL 预测值和置信度，RUL 会随模拟时间的推移而逐渐降低。
- 右侧面板会根据当前的 RUL 显示相应的维护建议级别、描述和行动建议。
- 右下角会显示对当前预测影响最大的模拟特征及其相对重要性。
- 模拟会持续进行，直到 RUL 降至 0 或用户选择其他部件。

模拟逻辑简述

时间: 模拟以固定的时间步长（例如，每隔几秒代表运行 8 小时）推进。
传感器数据: 每个传感器有一个基础值和正常的波动范围（通过高斯噪声模拟）。当模拟的 RUL 降低时，部分传感器的读数会根据预设的退化模型（例如线性增加）逐渐偏离正常范围，模拟部件老化的过程。
RUL 计算: 每个部件有一个基础的初始 RUL。RUL 的减少速度受基础退化率和当前传感器异常程度（通过计算一个综合的"异常分数"模拟）的影响。传感器读数越异常，RUL 下降越快。
置信度: 模拟的置信度会随着 RUL 降低或传感器异常增多而逐渐下降。
特征重要性: 预设了不同部件下各传感器的相对重要性得分，并可能随 RUL 变化进行微小的模拟调整。

再次强调，以上均为简化模拟，用于演示概念。

文件结构

ai-predictive-maintenance-turbine/
├── index.html         # 组件的 HTML 结构
├── styles.css         # 定义视觉样式的 CSS 文件
├── script.js          # 实现交互逻辑和模拟功能的 JavaScript 文件
└── README.md          # 本说明文件

技术栈

HTML5
CSS3 (使用了 CSS 变量和 Flexbox/Grid 布局)
JavaScript (ES6+)
无外部库依赖。

效果展示

在这里插入图片描述

源码

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI预测性维护 - 燃气轮机轴承</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="pdm-container"><header class="main-header"><h1>基于AI的预测性维护组件</h1><div class="header-info"><span class="model-info">模型类型: LSTM</span><span class="time-display" id="currentTime">--:--:--</span></div></header><main class="main-content"><!-- Column 1: Component Selection & Sensor Dashboard --><section class="selection-sensors-panel panel"><div class="selection-section"><h2><i class="icon icon-turbine"></i> 设备与部件</h2><select id="turbineSelector"><option value="GT001">燃气轮机 GT-001</option><option value="GT002">燃气轮机 GT-002</option></select><select id="bearingSelector"><option value="B01">主轴承 #1 (输入端)</option><option value="B02">主轴承 #2 (输出端)</option></select><button class="action-button" id="loadDataBtn">加载/刷新数据</button></div><div class="sensors-dashboard-section"><h2><i class="icon icon-sensors"></i> 实时传感器数据</h2><div id="sensorDashboard" class="sensor-dashboard"><div class="sensor-reading placeholder" id="sensorPlaceholder">请选择设备并加载数据</div><!-- Sensor readings populated by JS --><!-- Example Structure (repeated by JS): --><!-- <div class="sensor-reading" data-sensor-id="vibration_rms"><span class="sensor-name">振动 RMS</span><span class="sensor-value">-- <span class="unit">mm/s</span></span><div class="status-indicator good"></div></div> --></div></div></section><!-- Column 2: AI Prediction & History --><section class="prediction-history-panel panel"><h2><i class="icon icon-ai"></i> AI 预测与历史趋势</h2><div class="prediction-output"><h3><i class="icon icon-rul"></i> 预测剩余使用寿命 (RUL)</h3><div class="rul-display"><span class="rul-value" id="predictedRulValue">--</span><span class="rul-unit" id="predictedRulUnit">小时</span></div><div class="prediction-confidence">置信度: <span id="predictionConfidence">--</span>%<div class="confidence-bar-container"><div class="confidence-bar" id="confidenceBar"></div></div></div></div><div class="history-chart-section"><h3><i class="icon icon-chart"></i> 关键传感器与 RUL 历史趋势</h3><div class="chart-placeholder" id="historyChart"><div class="fake-chart prediction-trend"></div><span class="chart-axis-label y-axis">数值 / RUL</span><span class="chart-axis-label x-axis">运行时间 / 周期</span><div class="chart-legend"><span class="legend-item sensor">传感器值 (模拟)</span><span class="legend-item rul">预测 RUL (模拟)</span></div></div></div></section><!-- Column 3: Maintenance Recommendation --><section class="recommendation-panel panel"><h2><i class="icon icon-wrench"></i> 维护建议</h2><div id="recommendationDetails" class="recommendation-details"><div class="recommendation-card placeholder" id="recommendationPlaceholder">等待预测结果...</div><!-- Recommendation card populated by JS --><!-- Example Structure:<div class="recommendation-card level-monitor"><div class="card-header"><i class="icon icon-monitor"></i><span class="level-text">继续监控</span></div><p class="card-description">当前状态正常，RUL 充足。按标准周期进行巡检。</p><div class="next-action">下次评估: <span id="nextEvalTime">--</span></div></div>--></div><div class="feature-importance-section"><h4><i class="icon icon-features"></i> 模型特征重要性 (概念)</h4><ul id="featureImportanceList" class="feature-list"><li class="placeholder">模型加载中...</li><!-- Features populated by JS --></ul></div></section></main><footer class="main-footer"><p>&copy; 2024 AI预测性维护模拟系统. 概念演示.</p></footer></div><script src="script.js"></script>
</body>
</html>

styles.css

:root {--bg-color-light: #f9f9f9;--bg-color-container: #ffffff;--header-bg: #f5f5f7;--panel-bg: #ffffff;--border-color: #d1d1d6;--border-color-subtle: #e5e5ea;--text-primary: #1d1d1f;--text-secondary: #515154;--text-label: #6e6e73;--accent-blue: #007aff;--accent-green: #34c759;--accent-orange: #ff9500;--accent-red: #ff3b30;--accent-purple: #af52de; /* AI/Prediction related */--accent-teal: #5ac8fa;   /* Sensor/Data related */--accent-grey: #8e8e93;--status-good: var(--accent-green);--status-warning: var(--accent-orange);--status-critical: var(--accent-red);--level-monitor-bg: rgba(52, 199, 89, 0.08);--level-monitor-border: var(--status-good);--level-inspect-bg: rgba(255, 149, 0, 0.08);--level-inspect-border: var(--status-warning);--level-replace-bg: rgba(255, 59, 48, 0.08);--level-replace-border: var(--status-critical);--list-item-hover-bg: #f0f0f0;--input-bg: #f0f2f5;--input-border: transparent;--input-focus-border: var(--accent-blue);--placeholder-text: #aaaaaa;--chart-placeholder-bg: #f8f8f8;--chart-axis-color: #b0b0b0;--chart-sensor-color: var(--accent-teal);--chart-rul-color: var(--accent-purple);--shadow-color: rgba(0, 0, 0, 0.05);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-monospace: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--border-radius: 8px;--border-radius-small: 4px;--transition-speed: 0.3s; /* Slightly slower for smoother transitions */
}* {box-sizing: border-box;margin: 0;padding: 0;
}body {font-family: var(--font-family);background-color: var(--bg-color-light);color: var(--text-primary);line-height: 1.4;overflow-x: hidden;
}.pdm-container {max-width: 1600px;margin: 1rem auto;background-color: var(--bg-color-container);border-radius: var(--border-radius);box-shadow: 0 4px 12px var(--shadow-color);overflow: hidden;display: flex;flex-direction: column;height: calc(100vh - 2rem); /* Limit height */min-height: 650px;
}/* Header */
.main-header {background-color: var(--header-bg);padding: 0.75rem 1.5rem;border-bottom: 1px solid var(--border-color);flex-shrink: 0;display: flex;justify-content: space-between;align-items: center;
}