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