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>© 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;
}