当前位置：首页 > news >正文

4、反应釜压力监控系统 - /自动化与控制组件/reaction-vessel-monitor

news 来源：原创 2025/8/16 5:46:15

76个工业组件库示例汇总

反应釜压力监控组件

这是一个用于反应釜压力监控的自定义组件，专为化工厂反应釜压力监控设计。采用苹果工业风格界面，简洁优雅，功能实用，易于使用。

功能特点

实时压力可视化：直观展示反应釜压力数据变化趋势
多反应釜监控：支持同时监控多个反应釜设备
压力预警系统：提供高/低压力阈值监控和报警
设备状态指示：清晰展示各反应釜工作状态
简洁数据面板：展示关键数据指标和统计信息
苹果工业风格：优雅简洁的界面设计，符合现代工业审美

组件区域说明

组件主要包含以下功能区域：

总览视图：顶部显示反应釜系统整体状态和关键指标
压力趋势图：中部展示历史压力数据和实时变化趋势
设备状态列表：右侧显示各反应釜的详细状态和当前压力
告警信息区：底部显示最近的告警信息和处理状态

自定义选项

可以根据实际需求调整以下内容：

压力阈值：在脚本中设置高/低压力预警阈值
监控反应釜数量：通过修改配置调整监控的设备数量
图表显示时长：调整历史数据显示的时间范围
刷新频率：根据需要调整数据更新频率
颜色主题：修改CSS变量来调整整体配色方案

连接实际数据源

组件默认使用模拟数据。如需连接真实数据源：

替换fetchVesselData()函数中的数据模拟逻辑
实现与实际数据API的连接
根据实际数据格式调整数据处理逻辑

项目结构

在这里插入图片描述

效果展示

在这里插入图片描述

源码

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>反应釜监控系统</title><link rel="stylesheet" href="styles.css"><!-- 添加Chart.js库 --><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body><div id="reaction-vessel-monitor"><header class="rv-header"><div class="rv-logo"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 17.25V9.75M15 17.25V9.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><span>反应釜监控系统</span></div><div class="rv-actions"><button class="rv-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.59322 18C9.59322 18.5523 9.14551 19 8.59322 19C8.04093 19 7.59322 18.5523 7.59322 18C7.59322 17.4477 8.04093 17 8.59322 17C9.14551 17 9.59322 17.4477 9.59322 18Z" fill="currentColor"/><path d="M16.5932 18C16.5932 18.5523 16.1455 19 15.5932 19C15.0409 19 14.5932 18.5523 14.5932 18C14.5932 17.4477 15.0409 17 15.5932 17C16.1455 17 16.5932 17.4477 16.5932 18Z" fill="currentColor"/><path d="M9.59322 12C9.59322 12.5523 9.14551 13 8.59322 13C8.04093 13 7.59322 12.5523 7.59322 12C7.59322 11.4477 8.04093 11 8.59322 11C9.14551 11 9.59322 11.4477 9.59322 12Z" fill="currentColor"/><path d="M16.5932 12C16.5932 12.5523 16.1455 13 15.5932 13C15.0409 13 14.5932 12.5523 14.5932 12C14.5932 11.4477 15.0409 11 15.5932 11C16.1455 11 16.5932 11.4477 16.5932 12Z" fill="currentColor"/><path d="M9.59322 6C9.59322 6.55228 9.14551 7 8.59322 7C8.04093 7 7.59322 6.55228 7.59322 6C7.59322 5.44772 8.04093 5 8.59322 5C9.14551 5 9.59322 5.44772 9.59322 6Z" fill="currentColor"/><path d="M16.5932 6C16.5932 6.55228 16.1455 7 15.5932 7C15.0409 7 14.5932 6.55228 14.5932 6C14.5932 5.44772 15.0409 5 15.5932 5C16.1455 5 16.5932 5.44772 16.5932 6Z" fill="currentColor"/></svg>菜单</button></div></header><div class="rv-content"><!-- 系统概览面板 --><div class="rv-panel rv-overview"><div class="rv-panel-header"><h2>系统概览</h2><span class="rv-status-badge status-normal">系统正常</span></div><div class="rv-panel-body"><div class="rv-overview-stats"><div class="rv-stat"><div class="rv-stat-value">5</div><div class="rv-stat-label">反应釜总数</div></div><div class="rv-stat"><div class="rv-stat-value">4</div><div class="rv-stat-label">正常运行</div></div><div class="rv-stat"><div class="rv-stat-value">1</div><div class="rv-stat-label">需要注意</div></div><div class="rv-stat"><div class="rv-stat-value">0</div><div class="rv-stat-label">严重警告</div></div></div></div></div><!-- 压力趋势图面板 --><div class="rv-panel rv-trend"><div class="rv-panel-header"><h2>压力趋势图</h2><div class="rv-panel-actions"><select id="time-range"><option value="1h">1小时</option><option value="8h" selected>8小时</option><option value="24h">24小时</option></select></div></div><div class="rv-panel-body"><div class="chart-container"><canvas id="pressure-chart"></canvas><div class="chart-loading"><div class="loading-spinner"></div><div class="loading-text">加载中...</div></div></div></div></div><!-- 设备状态列表面板 --><div class="rv-panel rv-vessels"><div class="rv-panel-header"><h2>设备状态</h2><div class="rv-panel-actions"><button class="rv-btn rv-btn-sm">刷新</button></div></div><div class="rv-panel-body"><div id="vessel-list" class="rv-vessel-list"><!-- 设备列表将通过JavaScript动态生成 --><div class="rv-vessel-loading">加载设备数据中...</div></div></div></div><!-- 告警信息面板 --><div class="rv-panel rv-alerts"><div class="rv-panel-header"><h2>告警信息</h2><div class="rv-badge">3</div></div><div class="rv-panel-body"><div id="alert-list" class="rv-alert-list"><!-- 告警列表将通过JavaScript动态生成 --></div></div></div></div><!-- 设备详情模态框 --><div id="vessel-detail-modal" class="rv-modal"><div class="rv-modal-content"><div class="rv-modal-header"><h3 id="vessel-detail-title">设备详情</h3><button class="rv-modal-close">&times;</button></div><div class="rv-modal-body"><div id="vessel-detail-content"></div></div><div class="rv-modal-footer"><button class="rv-btn rv-btn-secondary modal-close-btn">关闭</button><button class="rv-btn">查看历史数据</button></div></div></div></div><!-- 先加载脚本 --><script src="script.js"></script><!-- 脚本加载完成后再初始化 --><script>// 等待DOM完全加载后再初始化系统document.addEventListener('DOMContentLoaded', function() {// 确保函数存在if (typeof initReactionVesselMonitor === 'function') {// 调用初始化函数initReactionVesselMonitor();} else if (typeof initializeMonitor === 'function') {// 兼容性调用initializeMonitor();} else {console.error('初始化函数未找到');}});</script>
</body>
</html>

styles.css

/* 反应釜压力监控系统 - 苹果工业风格 */:root {/* 颜色变量 - 苹果风格 */--background: #F2F2F7;--card-bg: #FFFFFF;--primary-text: #1C1C1E;--secondary-text: #8E8E93;--accent-blue: #007AFF;--accent-green: #34C759;--accent-orange: #FF9500;--accent-red: #FF3B30;--accent-purple: #5856D6;--border-color: #E5E5EA;--chart-grid: #D1D1D6;/* 阴影 */--card-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);--header-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);/* 尺寸变量 */--header-height: 60px;--footer-height: 120px;--panel-gap: 16px;--border-radius: 10px;
}/* 基础样式 */
#reaction-vessel-monitor {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;color: var(--primary-text);background-color: var(--background);display: flex;flex-direction: column;height: 100%;width: 100%;position: relative;box-sizing: border-box;margin: 0;padding: 0;overflow: hidden;
}#reaction-vessel-monitor * {box-sizing: border-box;
}/* 顶部导航栏 */
.rv-header {height: var(--header-height);background-color: var(--card-bg);border-bottom: 1px solid var(--border-color);display: flex;justify-content: space-between;align-items: center;padding: 0 20px;box-shadow: var(--header-shadow);z-index: 10;
}.rv-logo {display: flex;align-items: center;gap: 10px;
}.rv-logo-icon {font-size: 24px;
}.rv-logo-text {font-size: 18px;font-weight: 600;
}.rv-system-status {display: flex;align-items: center;gap: 8px;
}.status-indicator {width: 10px;height: 10px;border-radius: 50%;
}.status-indicator.online {background-color: var(--accent-green);box-shadow: 0 0 5px var(--accent-green);
}.status-indicator.offline {background-color: var(--accent-red);box-shadow: 0 0 5px var(--accent-red);
}.status-indicator.warning {background-color: var(--accent-orange);box-shadow: 0 0 5px var(--accent-orange);
}.status-text {font-size: 14px;color: var(--secondary-text);
}/* 主内容区域 */
.rv-content {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto 1fr auto;grid-gap: var(--panel-gap);padding: 20px;overflow: hidden;height: calc(100% - var(--header-height));width: 100%;
}/* 面板布局 */
.rv-overview {grid-column: 1;grid-row: 1;
}.rv-trend {grid-column: 1 / 3;grid-row: 2;
}.rv-vessels {grid-column: 2;grid-row: 1;
}.rv-alerts {grid-column: 1 / 3;grid-row: 3;
}/* 面板样式 */
.rv-panel {background-color: var(--card-bg);border-radius: var(--border-radius);box-shadow: var(--card-shadow);display: flex;flex-direction: column;overflow: hidden;
}.rv-panel-header {display: flex;justify-content: space-between;align-items: center;padding: 15px;border-bottom: 1px solid var(--border-color);
}.rv-panel-header h2 {margin: 0;font-size: 16px;font-weight: 600;
}.rv-panel-actions {display: flex;gap: 10px;
}.rv-panel-body {flex: 1;padding: 15px;overflow: auto;
}/* 按钮样式 */
.rv-btn {display: flex;align-items: center;gap: 5px;padding: 8px 12px;border-radius: 6px;border: 1px solid var(--border-color);background-color: var(--card-bg);color: var(--primary-text);font-size: 14px;cursor: pointer;transition: all 0.2s;
}.rv-btn:hover {background-color: var(--background);
}.rv-btn-sm {padding: 5px 10px;font-size: 12px;
}.rv-btn-secondary {background-color: var(--background);
}/* 状态徽章 */
.rv-status-badge {padding: 4px 8px;border-radius: 12px;font-size: 12px;font-weight: 500;
}.status-normal {background-color: rgba(52, 199, 89, 0.1);color: var(--accent-green);
}.status-warning {background-color: rgba(255, 149, 0, 0.1);color: var(--accent-orange);
}.status-error {background-color: rgba(255, 59, 48, 0.1);color: var(--accent-red);
}/* 统计数据 */
.rv-overview-stats {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;
}.rv-stat {background-color: var(--background);border-radius: 8px;padding: 15px;text-align: center;
}.rv-stat-value {font-size: 24px;font-weight: 700;margin-bottom: 5px;
}.rv-stat-label {font-size: 12px;color: var(--secondary-text);
}/* 设备列表 */
.rv-vessel-list {display: flex;flex-direction: column;gap: 10px;width: 100%;
}.rv-vessel-item {background-color: var(--background);border-radius: 8px;padding: 15px;display: flex;flex-direction: column;gap: 10px;cursor: pointer;transition: transform 0.2s, box-shadow 0.2s;
}.rv-vessel-item:hover {transform: translateY(-2px);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}.rv-vessel-info {display: flex;justify-content: space-between;align-items: center;
}.rv-vessel-name {font-weight: 600;font-size: 14px;
}.rv-vessel-status {font-size: 12px;padding: 3px 8px;border-radius: 10px;
}.status-normal {background-color: rgba(52, 199, 89, 0.1);color: var(--accent-green);
}.status-warning {background-color: rgba(255, 149, 0, 0.1);color: var(--accent-orange);
}.status-error {background-color: rgba(255, 59, 48, 0.1);color: var(--accent-red);
}.rv-vessel-metrics {display: flex;justify-content: space-between;gap: 10px;
}.rv-vessel-metric {text-align: center;flex: 1;
}.rv-metric-value {font-size: 18px;font-weight: 700;display: flex;align-items: center;justify-content: center;gap: 5px;
}.rv-metric-label {font-size: 11px;color: var(--secondary-text);margin-top: 2px;
}.rv-vessel-actions {display: flex;justify-content: flex-end;
}.rv-trend-indicator {font-size: 12px;
}.rising {color: var(--accent-red);
}.falling {color: var(--accent-green);
}.stable {color: var(--secondary-text);
}/* 告警列表 */
.rv-alert-list {display: flex;flex-direction: column;gap: 8px;
}.rv-alert-item {display: flex;align-items: center;gap: 10px;background-color: var(--background);border-radius: 8px;padding: 12px 15px;
}.alert-warning {border-left: 3px solid var(--accent-orange);
}.alert-error {border-left: 3px solid var(--accent-red);
}.alert-info {border-left: 3px solid var(--accent-blue);
}.rv-alert-icon {display: flex;color: var(--accent-orange);
}.alert-error .rv-alert-icon {color: var(--accent-red);
}.alert-info .rv-alert-icon {color: var(--accent-blue);
}.rv-alert-content {flex: 1;
}.rv-alert-message {font-size: 13px;
}.rv-alert-time {font-size: 11px;color: var(--secondary-text);margin-top: 2px;
}.rv-alert-actions {flex-shrink: 0;
}.rv-alert-btn {padding: 3px 8px;border-radius: 4px;font-size: 12px;border: 1px solid var(--border-color);background-color: transparent;color: var(--accent-blue);cursor: pointer;
}.rv-alert-btn:hover {background-color: var(--accent-blue);color: white;
}/* 徽章 */
.rv-badge {background-color: var(--accent-red);color: white;font-size: 12px;font-weight: 500;padding: 2px 6px;border-radius: 10px;min-width: 20px;text-align: center;
}/* 设备加载状态 */
.rv-vessel-loading {text-align: center;padding: 20px;color: var(--secondary-text);
}/* 模态框 */
.rv-modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;justify-content: center;align-items: center;
}.rv-modal-content {background-color: var(--card-bg);border-radius: var(--border-radius);width: 90%;max-width: 500px;max-height: 90vh;display: flex;flex-direction: column;overflow: hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}.rv-modal-header {display: flex;justify-content: space-between;align-items: center;padding: 15px 20px;border-bottom: 1px solid var(--border-color);
}.rv-modal-header h3 {margin: 0;font-size: 18px;font-weight: 600;
}.rv-modal-close {background: none;border: none;font-size: 20px;cursor: pointer;color: var(--secondary-text);
}.rv-modal-body {padding: 20px;overflow-y: auto;flex: 1;
}.rv-modal-footer {display: flex;justify-content: flex-end;gap: 10px;padding: 15px 20px;border-top: 1px solid var(--border-color);
}/* 设备详情样式 */
.rv-detail-status {display: inline-block;padding: 5px 10px;border-radius: 6px;margin-bottom: 15px;
}.rv-detail-info {margin-bottom: 20px;
}.rv-detail-info p {margin: 5px 0;line-height: 1.5;
}.rv-detail-metrics {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 15px;margin-bottom: 20px;
}.rv-detail-metric {background-color: var(--background);border-radius: 8px;padding: 15px;text-align: center;
}.rv-detail-metric-value {font-size: 24px;font-weight: 700;margin-bottom: 5px;
}.rv-detail-metric-label {font-size: 12px;color: var(--secondary-text);
}.rv-detail-params {background-color: var(--background);border-radius: 8px;padding: 15px;
}.rv-detail-params h4 {margin-top: 0;margin-bottom: 10px;font-size: 14px;font-weight: 600;
}.rv-detail-params table {width: 100%;border-collapse: collapse;
}.rv-detail-params td {padding: 6px 0;border-bottom: 1px solid var(--border-color);font-size: 13px;
}.rv-detail-params tr:last-child td {border-bottom: none;
}/* 图表容器 */
.chart-container {position: relative;width: 100%;height: 300px;
}.chart-loading {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: rgba(255, 255, 255, 0.8);gap: 12px;
}.loading-spinner {width: 30px;height: 30px;border: 3px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top-color: var(--accent-blue);animation: spin 1s linear infinite;
}.loading-text {font-size: 14px;color: var(--secondary-text);
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}/* 响应式布局调整 */
@media (max-width: 992px) {.rv-content {grid-template-columns: 1fr;grid-template-rows: auto auto auto auto;}.rv-overview {grid-column: 1;grid-row: 1;}.rv-vessels {grid-column: 1;grid-row: 2;}.rv-trend {grid-column: 1;grid-row: 3;}.rv-alerts {grid-column: 1;grid-row: 4;}
}/* 告警列表中的"更多信息"样式 */
.rv-alert-more-info {text-align: center;padding: 10px;margin-top: 8px;background-color: var(--background);border-radius: 8px;color: var(--secondary-text);font-size: 13px;cursor: pointer;transition: background-color 0.2s;
}.rv-alert-more-info:hover {background-color: rgba(0, 122, 255, 0.05);color: var(--accent-blue);
}

script.js

// 反应釜压力监控系统 JavaScript// 全局变量
let vessels = []; // 存储反应釜数据
let pressureChart = null;
let vesselData = [];
let alertHistory = [];
let systemStatus = 'online'; // 系统状态
const pressureThresholds = {low: 0.2, // 低压警告阈值 (MPa)high: 0.8, // 高压警告阈值 (MPa)critical: 1.0 // 临界压力阈值 (MPa)
};// 初始化函数 - 与HTML中调用的函数名保持一致
function initReactionVesselMonitor() {console.log('初始化反应釜压力监控系统');// 初始化系统状态updateSystemStatus(systemStatus);// 初始化模拟数据generateVesselData();// 将生成的数据复制到vessels变量vessels = [...vesselData];// 初始化图表initializePressureChart();// 渲染反应釜列表renderVesselList();// 设置事件监听器setupEventListeners();// 渲染告警列表renderAlertList();// 添加示例告警addAlert('警告', '反应釜 #2 压力接近高阈值');addAlert('信息', '系统自检完成，所有传感器正常');// 设置数据刷新定时器setInterval(() => {updateVesselData();updatePressureChart();renderVesselList();checkForAlerts();}, 5000);// 隐藏加载提示document.querySelector('.chart-loading').style.display = 'none';document.querySelector('.rv-vessel-loading').style.display = 'none';// 初始化完成console.log('反应釜压力监控系统初始化完成');
}// 原始的初始化函数，保留以保证向后兼容
function initializeMonitor() {initReactionVesselMonitor();
}// 生成模拟船只数据
function generateVesselData() {const data = [];const statusOptions = ['normal', 'warning', 'error', 'maintenance'];const namePrefix = ['A', 'B', 'C', 'D', 'E'];for (let i = 0; i < 5; i++) {// 生成过去8小时的压力历史数据点 (48个点，每10分钟一个)const pressureHistory = [];const now = new Date();for (let j = 47; j >= 0; j--) {const timestamp = new Date(now.getTime() - j * 10 * 60 * 1000); // 每10分钟一个数据点const basePressure = 5 + Math.random() * 2; // 基础压力在5-7之间let pressure;// 为了使图表更有变化，随机添加一些波动if (j % 12 === 0) { // 每2小时出现一次较大波动pressure = basePressure + (Math.random() * 1.5 - 0.5);} else {pressure = basePressure + (Math.random() * 0.4 - 0.2);}pressureHistory.push({timestamp: timestamp,value: pressure.toFixed(2)});}// 创建反应釜对象data.push({id: i + 1,name: `反应釜${namePrefix[i]}`,status: i === 2 ? 'warning' : 'normal', // 让第3个反应釜处于警告状态pressureHistory: pressureHistory,currentPressure: pressureHistory[pressureHistory.length - 1].value,temperature: (75 + Math.random() * 10).toFixed(1),fillLevel: Math.floor(60 + Math.random() * 30),lastUpdated: new Date(),description: `${namePrefix[i]}系列化学反应容器，用于${['聚合', '中和', '催化', '分解', '合成'][i]}反应`});}vesselData = data;
}// 更新船只数据
function updateVesselData() {const now = new Date();vesselData.forEach(vessel => {// 更新压力const lastPressure = parseFloat(vessel.currentPressure);const pressureChange = (Math.random() * 0.6 - 0.3); // -0.3到0.3的变化const newPressure = Math.max(4.5, Math.min(8.5, lastPressure + pressureChange)).toFixed(2);// 添加新的压力历史记录vessel.pressureHistory.push({timestamp: now,value: newPressure});// 只保留最近48个数据点if (vessel.pressureHistory.length > 48) {vessel.pressureHistory.shift();}// 更新当前压力vessel.currentPressure = newPressure;// 更新温度const lastTemp = parseFloat(vessel.temperature);const tempChange = (Math.random() * 1.0 - 0.5); // -0.5到0.5的变化vessel.temperature = Math.max(70, Math.min(90, lastTemp + tempChange)).toFixed(1);// 更新液位const fillChange = Math.floor(Math.random() * 5 - 2); // -2到2的变化vessel.fillLevel = Math.max(30, Math.min(95, vessel.fillLevel + fillChange));// 偶尔改变状态if (Math.random() < 0.05) { // 5%的概率改变状态const currentStatus = vessel.status;if (currentStatus === 'normal') {vessel.status = Math.random() < 0.7 ? 'warning' : 'normal';} else if (currentStatus === 'warning') {vessel.status = Math.random() < 0.3 ? 'error' : (Math.random() < 0.6 ? 'normal' : 'warning');} else if (currentStatus === 'error') {vessel.status = Math.random() < 0.5 ? 'warning' : 'error';}}// 更新最后更新时间vessel.lastUpdated = now;});
}// 初始化压力趋势图表
function initializePressureChart() {const ctx = document.getElementById('pressure-chart').getContext('2d');// 获取所有反应釜的最近数据const labels = [];const datasets = [];// 生成时间标签const now = new Date();const timeRange = document.getElementById('time-range').value;const pointCount = timeRange === '1h' ? 6 : (timeRange === '8h' ? 24 : 48);const interval = timeRange === '1h' ? 10 : (timeRange === '8h' ? 20 : 30);for (let i = pointCount - 1; i >= 0; i--) {const time = new Date(now.getTime() - i * interval * 60 * 1000);const timeStr = time.getHours().toString().padStart(2, '0') + ':' + time.getMinutes().toString().padStart(2, '0');labels.push(timeStr);}// 为每个反应釜创建一个数据集const colors = ['rgba(54, 162, 235, 1)', 'rgba(255, 99, 132, 1)', 'rgba(75, 192, 192, 1)', 'rgba(255, 159, 64, 1)', 'rgba(153, 102, 255, 1)'];vesselData.forEach((vessel, index) => {// 获取最近的压力数据const pressureData = vessel.pressureHistory.slice(-pointCount).map(p => p.value);datasets.push({label: vessel.name,data: pressureData,borderColor: colors[index % colors.length],backgroundColor: colors[index % colors.length].replace('1)', '0.1)'),borderWidth: 2,pointRadius: 2,pointHoverRadius: 5,tension: 0.3});});// 创建图表pressureChart = new Chart(ctx, {type: 'line',data: {labels: labels,datasets: datasets},options: {responsive: true,maintainAspectRatio: false,plugins: {legend: {position: 'top',labels: {boxWidth: 12,usePointStyle: true,pointStyle: 'circle'}},tooltip: {mode: 'index',intersect: false}},scales: {x: {grid: {color: 'rgba(200, 200, 200, 0.1)'}},y: {beginAtZero: false,min: 4,max: 9,ticks: {stepSize: 1},grid: {color: 'rgba(200, 200, 200, 0.1)'},title: {display: true,text: '压力 (MPa)'}}}}});
}// 更新压力趋势图
function updatePressureChart() {if (!pressureChart) {console.error('图表尚未初始化');return;}// 获取时间范围const timeRange = document.getElementById('time-range').value;const pointCount = timeRange === '1h' ? 6 : (timeRange === '8h' ? 24 : 48);// 更新标签const now = new Date();const labels = [];const interval = timeRange === '1h' ? 10 : (timeRange === '8h' ? 20 : 30);for (let i = pointCount - 1; i >= 0; i--) {const time = new Date(now.getTime() - i * interval * 60 * 1000);const timeStr = time.getHours().toString().padStart(2, '0') + ':' + time.getMinutes().toString().padStart(2, '0');labels.push(timeStr);}pressureChart.data.labels = labels;// 更新数据集vesselData.forEach((vessel, index) => {// 获取最近的压力数据const pressureData = vessel.pressureHistory.slice(-pointCount).map(p => p.value);// 确保数据集存在if (pressureChart.data.datasets[index]) {pressureChart.data.datasets[index].data = pressureData;}});// 更新图表pressureChart.update();
}// 渲染反应釜列表
function renderVesselList() {const container = document.getElementById('vessel-list');if (!container) {console.error('找不到反应釜列表容器元素');return;}// 清空容器container.innerHTML = '';// 遍历反应釜并创建列表项vesselData.forEach(vessel => {const item = document.createElement('div');item.className = `rv-vessel-item status-${vessel.status}`;item.dataset.id = vessel.id;// 设置趋势图标let trendIcon = '→'; // 稳定let trendClass = 'stable';// 计算趋势if (vessel.pressureHistory && vessel.pressureHistory.length >= 2) {const last = vessel.pressureHistory[vessel.pressureHistory.length - 1].value;const prev = vessel.pressureHistory[vessel.pressureHistory.length - 2].value;if (parseFloat(last) > parseFloat(prev)) {trendIcon = '↑';trendClass = 'rising';} else if (parseFloat(last) < parseFloat(prev)) {trendIcon = '↓';trendClass = 'falling';}}item.innerHTML = `<div class="rv-vessel-info"><div class="rv-vessel-name">${vessel.name}</div><div class="rv-vessel-status status-${vessel.status}">${vessel.status === 'normal' ? '正常' : vessel.status === 'warning' ? '警告' : '错误'}</div></div><div class="rv-vessel-metrics"><div class="rv-vessel-metric"><div class="rv-metric-value">${vessel.currentPressure} <span class="rv-trend-indicator ${trendClass}">${trendIcon}</span></div><div class="rv-metric-label">压力 (MPa)</div></div><div class="rv-vessel-metric"><div class="rv-metric-value">${vessel.temperature}°C</div><div class="rv-metric-label">温度</div></div><div class="rv-vessel-metric"><div class="rv-metric-value">${vessel.fillLevel}%</div><div class="rv-metric-label">液位</div></div></div><div class="rv-vessel-actions"><button class="rv-btn rv-btn-sm view-details" data-id="${vessel.id}">查看详情</button></div>`;// 点击查看详情item.querySelector('.view-details').addEventListener('click', (e) => {e.stopPropagation(); // 防止事件冒泡showVesselDetails(vessel.id);});container.appendChild(item);});// 更新统计信息updateStatistics();
}// 更新统计信息
function updateStatistics() {// 使用正确的选择器或跳过不存在的元素// 反应釜总数由系统概览面板中的数据显示，无需更新if (vessels.length === 0) return; // 防止除零错误try {// 统计正常/警告/错误状态的反应釜数量const normalCount = vessels.filter(v => v.status === 'normal').length;const warningCount = vessels.filter(v => v.status === 'warning').length;const errorCount = vessels.filter(v => v.status === 'error').length;// 查找并更新统计值的显示元素const statElements = document.querySelectorAll('.rv-stat-value');if (statElements.length >= 4) {statElements[0].textContent = vessels.length; // 总数statElements[1].textContent = normalCount; // 正常statElements[2].textContent = warningCount; // 警告statElements[3].textContent = errorCount; // 错误}// 更新告警数量显示const alertBadge = document.querySelector('.rv-badge');if (alertBadge) {alertBadge.textContent = alertHistory.length;}} catch (error) {console.error('更新统计信息时出错:', error);}
}// 检查告警
function checkForAlerts() {vesselData.forEach(vessel => {const pressure = parseFloat(vessel.currentPressure);// 检查是否超过阈值if (pressure >= 8.0) {addAlert('危险', `${vessel.name} 压力过高: ${vessel.currentPressure} MPa`);} else if (pressure >= 7.5) {addAlert('警告', `${vessel.name} 压力偏高: ${vessel.currentPressure} MPa`);} else if (pressure <= 5.0) {addAlert('警告', `${vessel.name} 压力偏低: ${vessel.currentPressure} MPa`);}});// 更新告警列表显示renderAlertList();
}// 刷新数据
function refreshData() {console.log('刷新数据...');updateVesselData();renderVesselList();updatePressureChart();
}// 添加告警
function addAlert(type, message) {const alert = {id: Date.now(),type: type,message: message,time: new Date(),processed: false};// 添加到列表开头alertHistory.unshift(alert);// 最多保留20条告警if (alertHistory.length > 20) {alertHistory.pop();}// 更新告警列表显示renderAlertList();// 更新统计信息updateStatistics();
}// 渲染告警列表
function renderAlertList() {const container = document.getElementById('alert-list');if (!container) {console.error('找不到告警列表容器元素');return;}// 清空容器container.innerHTML = '';// 如果没有告警，显示空消息if (alertHistory.length === 0) {container.innerHTML = '<div class="rv-alert-empty">暂无告警信息</div>';return;}// 只显示最新的5条告警信息const recentAlerts = alertHistory.slice(0, 5);// 遍历告警并创建列表项recentAlerts.forEach(alert => {let alertClass = 'alert-info';if (alert.type === '警告') alertClass = 'alert-warning';if (alert.type === '危险') alertClass = 'alert-error';const item = document.createElement('div');item.className = `rv-alert-item ${alertClass}`;const timeFormatted = formatTime(alert.time);item.innerHTML = `<div class="rv-alert-icon">${alert.type === '危险' ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'}</div><div class="rv-alert-content"><div class="rv-alert-message">${alert.message}</div><div class="rv-alert-time">${timeFormatted}</div></div><div class="rv-alert-actions"><button class="rv-alert-btn view-vessel" data-id="${alert.id}">查看</button></div>`;container.appendChild(item);});// 如果有更多告警，显示提示信息if (alertHistory.length > 5) {const moreInfoElement = document.createElement('div');moreInfoElement.className = 'rv-alert-more-info';moreInfoElement.textContent = `还有 ${alertHistory.length - 5} 条更多告警信息`;container.appendChild(moreInfoElement);}// 添加告警列表中的"查看"按钮点击事件document.querySelectorAll('.view-vessel').forEach(button => {button.addEventListener('click', function(e) {e.stopPropagation();const alertId = parseInt(this.getAttribute('data-id'));const alert = alertHistory.find(a => a.id === alertId);if (alert && alert.message) {// 提取反应釜IDconst match = alert.message.match(/反应釜(\w+)/);if (match && match[1]) {// 查找对应的反应釜并显示详情const vessel = vesselData.find(v => v.name.includes(match[1]));if (vessel) {showVesselDetails(vessel.id);}}}});});
}// 处理告警
function processAlert(alertId) {const alert = alertHistory.find(a => a.id === alertId);if (alert) {alert.processed = true;renderAlertList();updateStatistics();}
}// 清除已处理的告警
function clearProcessedAlerts() {alertHistory = alertHistory.filter(alert => !alert.processed);renderAlertList();updateStatistics();
}// 显示反应釜详情
function showVesselDetails(vesselId) {const vessel = vesselData.find(v => v.id == vesselId);if (!vessel) return;const modal = document.getElementById('vessel-detail-modal');const title = document.getElementById('vessel-detail-title');const content = document.getElementById('vessel-detail-content');title.textContent = vessel.name + ' 详情';// 格式化最后更新时间const lastUpdated = vessel.lastUpdated;const timeString = `${lastUpdated.getHours().toString().padStart(2, '0')}:${lastUpdated.getMinutes().toString().padStart(2, '0')}:${lastUpdated.getSeconds().toString().padStart(2, '0')}`;content.innerHTML = `<div class="rv-detail-status status-${vessel.status}"><strong>状态:</strong> ${getStatusText(vessel.status)}</div><div class="rv-detail-info"><p><strong>描述:</strong> ${vessel.description}</p><p><strong>最后更新:</strong> ${timeString}</p></div><div class="rv-detail-metrics"><div class="rv-detail-metric"><div class="rv-detail-metric-value">${vessel.currentPressure}</div><div class="rv-detail-metric-label">压力 (MPa)</div></div><div class="rv-detail-metric"><div class="rv-detail-metric-value">${vessel.temperature}°C</div><div class="rv-detail-metric-label">温度</div></div><div class="rv-detail-metric"><div class="rv-detail-metric-value">${vessel.fillLevel}%</div><div class="rv-detail-metric-label">液位</div></div></div><div class="rv-detail-params"><h4>运行参数</h4><table><tr><td>安全压力范围:</td><td>5.0 - 7.5 MPa</td></tr><tr><td>最佳温度范围:</td><td>75 - 85 °C</td></tr><tr><td>建议液位范围:</td><td>40% - 80%</td></tr><tr><td>搅拌速度:</td><td>60 rpm</td></tr><tr><td>反应类型:</td><td>${['聚合', '中和', '催化', '分解', '合成'][vessel.id - 1]}反应</td></tr></table></div>`;// 显示模态框modal.style.display = 'flex';// 添加关闭模态框的事件document.querySelector('.rv-modal-close').onclick = function() {modal.style.display = 'none';};document.querySelector('.modal-close-btn').onclick = function() {modal.style.display = 'none';};// 点击模态框外部关闭window.onclick = function(event) {if (event.target == modal) {modal.style.display = 'none';}};
}// 辅助函数 - 获取状态文本
function getStatusText(status) {switch (status) {case 'normal': return '正常';case 'warning': return '警告';case 'error': return '错误';case 'maintenance': return '维护中';default: return '未知';}
}// 设置事件监听器
function setupEventListeners() {// 监听时间范围选择document.getElementById('time-range').addEventListener('change', function() {updatePressureChart();});// 监听刷新按钮const refreshBtn = document.querySelector('.rv-vessels .rv-btn');if (refreshBtn) {refreshBtn.addEventListener('click', function() {refreshData();});}// 监听模态框关闭按钮const modalCloseBtn = document.querySelector('.rv-modal-close');if (modalCloseBtn) {modalCloseBtn.addEventListener('click', function() {document.getElementById('vessel-detail-modal').style.display = 'none';});}const secondaryCloseBtn = document.querySelector('.modal-close-btn');if (secondaryCloseBtn) {secondaryCloseBtn.addEventListener('click', function() {document.getElementById('vessel-detail-modal').style.display = 'none';});}
}// 检查所有设备
function checkAllVessels() {// 模拟设备检查const checkTime = document.getElementById('check-time');checkTime.textContent = formatTime(new Date());// 显示检查成功消息const message = `设备检查完成，发现 ${vessels.filter(v => v.status !== 'normal').length} 个异常设备`;addAlert('信息', message);// 更新系统状态const hasIssues = vessels.some(v => v.status === 'critical');updateSystemStatus(hasIssues ? 'warning' : 'online');// 视觉反馈const btn = document.getElementById('check-all-btn');btn.textContent = '检查完成';btn.disabled = true;setTimeout(() => {btn.textContent = '检查所有设备';btn.disabled = false;}, 2000);
}// 更新系统状态
function updateSystemStatus(status) {systemStatus = status;// 添加空检查，防止报错const indicator = document.querySelector('.status-indicator');const statusText = document.querySelector('.status-text');// 如果元素不存在，则更新状态栏const statusBadge = document.querySelector('.rv-status-badge');if (statusBadge) {statusBadge.className = 'rv-status-badge';if (status === 'online') {statusBadge.classList.add('status-normal');statusBadge.textContent = '系统正常';} else if (status === 'warning') {statusBadge.classList.add('status-warning');statusBadge.textContent = '系统警告';} else if (status === 'offline') {statusBadge.classList.add('status-error');statusBadge.textContent = '系统离线';}return;}// 兼容旧版本接口if (indicator) {indicator.className = 'status-indicator';indicator.classList.add(status);}if (statusText) {if (status === 'online') {statusText.textContent = '系统运行正常';} else if (status === 'warning') {statusText.textContent = '系统警告';} else if (status === 'offline') {statusText.textContent = '系统离线';}}
}// 格式化时间
function formatTime(date) {return new Intl.DateTimeFormat('zh-CN', {hour: '2-digit',minute: '2-digit',second: '2-digit'}).format(date);
}// 自动增加模拟设备函数
function addSimulatedVessel() {const newId = vessels.length + 1;const pressure = Math.random() * 0.8 + 0.1;const newVessel = {id: newId,name: `反应釜 #${newId}`,currentPressure: pressure.toFixed(2),status: getStatusFromPressure(pressure),temperature: (Math.random() * 30 + 70).toFixed(1),pressureHistory: [],fillLevel: Math.round(Math.random() * 100),lastUpdated: new Date(),description: `新增反应釜 #${newId} 已连接`};vessels.push(newVessel);addAlert('信息', newVessel.description);renderVesselList();updatePressureChart();
}// 初始化监控系统
window.onload = function() {// 确认Chart.js是否已加载if (typeof Chart === 'undefined') {console.error('Chart.js库未加载，尝试动态加载');loadChartJs();} else {try {initializeMonitor();} catch (error) {console.error('初始化监控系统失败:', error);updateSystemStatus('offline');// 不再尝试添加告警，防止错误循环if (document.querySelector('.rv-badge')) {document.querySelector('.rv-badge').textContent = '错误';}// 显示错误信息const chartContainer = document.querySelector('.chart-container');if (chartContainer) {const loadingDiv = chartContainer.querySelector('.chart-loading');if (loadingDiv) {loadingDiv.innerHTML = `<div class="loading-text" style="color: var(--accent-red)">加载失败: ${error.message}</div><button class="rv-btn rv-btn-sm" onclick="location.reload()">重试</button>`;}}}}
};// 动态加载Chart.js
function loadChartJs() {const script = document.createElement('script');script.src = 'https://cdn.jsdelivr.net/npm/chart.js';script.onload = function() {console.log('Chart.js加载成功');initializeMonitor();};script.onerror = function() {console.error('Chart.js加载失败');const chartContainer = document.querySelector('.chart-container');if (chartContainer) {const loadingDiv = chartContainer.querySelector('.chart-loading');if (loadingDiv) {loadingDiv.innerHTML = `<div class="loading-text" style="color: var(--accent-red)">Chart.js加载失败，请检查网络连接</div><button class="rv-btn rv-btn-sm" onclick="location.reload()">重试</button>`;}}};document.head.appendChild(script);
}// 导出函数供 Appsmith 使用
window.reactionVesselMonitor = {// 初始化函数initialize: initializeMonitor,// 功能函数refreshData,addSimulatedVessel,checkAllVessels,clearProcessedAlerts,// 获取数据函数getVessels: () => vessels,getAlerts: () => alertHistory,getSystemStatus: () => systemStatus,// 设置函数setWarningThresholds: (low, high, critical) => {pressureThresholds.low = parseFloat(low) || 0.2;pressureThresholds.high = parseFloat(high) || 0.8;pressureThresholds.critical = parseFloat(critical) || 1.0;// 更新状态vessels.forEach(vessel => {vessel.status = getStatusFromPressure(parseFloat(vessel.currentPressure));});renderVesselList();}
};// 根据压力获取状态
function getStatusFromPressure(pressure) {if (pressure >= pressureThresholds.critical) {return 'critical';} else if (pressure >= pressureThresholds.high || pressure <= pressureThresholds.low) {return 'warning';} else {return 'normal';}
}

4、反应釜压力监控系统 - /自动化与控制组件/reaction-vessel-monitor

76个工业组件库示例汇总反应釜压力监控组件这是一个用于反应釜压力监控的自定义组件，专为化工厂反应釜压力监控设计。采用苹果工业风格界面，简洁优雅，功能实用，易于使用。功能特点实时压力可视化：直观展示反应…...

编程日记 2025/8/16 5:46:15

五、Hadoop集群部署：从零搭建三节点Hadoop环境（保姆级教程）

作者：IvanCodes 日期：2025年5月7日专栏：Hadoop教程前言： 想玩转大数据，Hadoop集群是绕不开的一道坎。很多小伙伴一看到集群部署就头大，各种配置、各种坑。别慌！这篇教程就是你的“救生圈”。 …...

编程日记 2025/8/16 5:46:12

详细剖析传输层协议（TCP和UDP）

详细讲解传输层的网络协议，为什么TCP是可靠连接协议，凭什么能做到不丢包，有哪些机制保证可靠呢？ TCP/UDP UDPTCP**三次握手和四次挥手****滑动窗口****拥塞控制**（socket套接字）**listen的第二个参数** UD…...

编程日记 2025/8/16 5:46:10

ZYNQ移植FreeRTOS与OpenAMP双核开发实践指南

ZYNQ系列芯片凭借其“ARM处理器（PS）+ FPGA（PL）”的异构架构，在嵌入式系统中被广泛应用于高性能计算与实时控制场景。然而，如何高效利用其双核资源并实现实时操作系统（如FreeRTOS）的移植与双核通信，是开发者面临的关键挑战。本文将深入探讨FreeRTOS移植、双核固化启动以…...

编程日记 2025/8/16 5:46:07

VUE+ElementUI 使用el-input类型type=“number” 时，取消右边的上下箭头

项目场景： 提示：这里简述项目相关背景： 在项目中有时候需要输入框的type“number”，这个时候，输入框的右边就会出现两个按钮，这两个按钮可以递增/递减，但是这样输入框看上去就不太美观&#x…...

编程日记 2025/8/16 5:46:04

RabbitMQ高级特性

1.消息的可靠投递在使用 RabbitMQ 的时候，作为消息发送方希望杜绝任何消息丢失或者投递失败场景。RabbitMQ 为我们提供了两种方式用来控制消息的投递可靠性模式。 1.confirm 确认模式 2.return 退回模式 rabbitmq 整个消息投递的路径为： producer…...

编程日记 2025/8/16 5:46:00

在Python中调用C/C++函数并与MPI集成

在Python中调用C/C函数并与MPI集成要在Python环境中调用C/C函数并让Python和C/C端都能使用MPI进行通信，有几种方法可以实现。下面我将介绍几种常见的方法。方法一：使用mpi4py C/C MPI扩展 1. 准备工作首先确保你已安装: MPI实现 (如OpenMPI或MP…...

编程日记 2025/8/16 5:45:58

软件架构评估方法全面解析

介绍在软件开发过程中，架构设计的好坏直接影响系统的可维护性、可扩展性和性能。因此，软件架构评估（Software Architecture Evaluation）成为确保架构质量的关键步骤。本文将介绍几种主流的架构评估方法，包括ATAM、SA…...

编程日记 2025/8/16 5:45:56

场景可视化与数据编辑器：构建数据应用情境

场景可视化是将数据与特定的应用场景相结合，借助数据编辑器对数据进行灵活处理和调整，通过模拟和展示真实场景，使企业能够更直观地理解数据在实际业务中的应用和影响，为企业的决策和运营提供有力支持。它能够将抽象的数据转化为具…...

编程日记 2025/8/16 19:38:05

MATLAB导出和导入Excel文件表格数据并处理

20250507 1.MATLAB使用table函数和writetable函数将数据导出Excel表格文件我们以高斯函数为例子，高斯函数在数学和工程领域有着广泛的应用，它的一般形式为： 其中是均值，决定了函数的中心位置； 是标准差，决…...

编程日记 2025/8/16 5:45:52

2025年渗透测试面试题总结-渗透岗位全职工作面试（附回答）（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录一、通用基础类问题 1. 自我介绍 2. 职业动机与规划 3. 加班/出差接受度二、安全技术类问题 1. 漏…...

编程日记 2025/8/16 5:45:50

【django.db.utils.OperationalError: unable to open database file】

解决platform.sh 环境下，无法打开数据库问题场景在platform.sh 执行python manage.py createsuperuser是提示 django.db.utils.OperationalError: unable to open database file 错误原因由于settings.py文件中本地数据库配置在线上配置后，导致…...

编程日记 2025/8/16 5:45:48

【人工智能】解锁AI潜能：LM Studio多模型并行运行DeepSeek与开源大模型的实践指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界随着大语言模型（LLM）的快速发展，LM Studio作为一款本地化部署工具，以其简单易用的图形化界面和强大的模型管理能力受到广泛关注。本文深…...

编程日记 2025/8/16 5:45:45

集群免密登录

免密登录原理核心步骤在hadoop100上生成密钥对。把hadoop100的公钥发到hadoop101上。在hadoop100上登录hadoop101，验证效果具体操作登录 hadoop100。使用finalshell连接。在hadoop100上，运行命令：ssh-keygen -t rsa。然后根据提示连续敲…...

编程日记 2025/8/16 5:45:43

【C/C++】errno/strerror 和 GetLastError()/FormatMessage 的区别

strerror 和 errno 详解 printf("Error: %s\n", strerror(errno));这行代码用于在 C 语言中输出系统错误信息，但它与 Windows 的 GetLastError() 有重要区别。下面我将详细解释每个部分及其工作原理。 1. 组件解析 errno 定义：errno 是一个…...

编程日记 2025/8/16 5:45:41

ASP.NET MVC4 技术单选及多选题目汇编

一、单选题（共50题，每题2分） 1、ASP.NET MVC4 的核心架构模式是什么？ A. MVP B. MVVM C. MVC D.三层架构答案：C 2、在 MVC4 中，默认的路由配置文件名是？ A. Global.asax B. RouteConfig.cs C.…...

编程日记 2025/8/16 5:45:39

趣味编程：梦幻万花筒

目录 1.效果展示 2.源码展示 3.代码逻辑详解 3.1 头文件与宏定义 3.2 HSV函数转RGB颜色函数 3.3 主函数初始化部分循环部分线条绘制部分刷新和延时部分结束部分 4.小结本篇博客主要介绍趣味编程用C语言实现万花筒小程序。 1.效果展示 2.源码展示 #define…...

编程日记 2025/8/16 5:45:37

使用 Selenium 截图功能，截不到原生 JavaScript 弹窗

本篇内容源自ai注意甄别 Selenium WebDriver 的标准截图 (getScreeenshotAs) 捕获的是浏览器渲染的 DOM 内容，而 JavaScript 的 alert()、confirm()、prompt() 这类弹窗是浏览器级别的原生 UI 元素，它们不属于页面的 DOM 结构。为什么会这样&#xff…...

编程日记 2025/8/16 5:45:35

服务提供者过滤器 import java.util.Map; import java.util.Objects;/*** title ProviderTokenFilter* description 服务提供者 token 验证* author zzw* version 1.0.0* create 2025/5/7 22:17**/ Activate(group CommonConstants.PROVIDER) public class ProviderTokenFilt…...

编程日记 2025/8/16 5:45:33

C++入门之认识整型

目录一、变量 1.导入 2.变量 2.1 变量的作用 2.2 变量的定义方式 2.3 变量的“规矩” 二、数据类型 1.概念 2.int整型三、C的常见运算四、输入操作 4.1 cin 4.2 try 1 try 4.2.1 cin>> 4.2.2 定义的整数类型，输入字母会怎么样？ …...

编程日记 2025/8/16 5:45:30

【数据结构入门训练DAY-28】蓝桥杯算法提高VIP-产生数

文章目录前言一、题目二、解题思路结语前言本次训练内容训练高精度乘法。训练解题思维。一、题目给出一个整数 n 和 k 个变换规则。规则：一位数可变换成另一个一位数：规则的右部不能为零。例如：n234。有规则（k&…...

编程日记 2025/8/16 5:45:28

学习笔记：黑马程序员JavaWeb开发教程(2025.3.29)

11.5 案例-文件上传-阿里云OSS-入门出现报错：Process exited with an error: 1 (Exit value: 1)，点击exec那一行，出现错误原因：Command execution failed. 在CSDN上找到了解决方法： 之后出现新的报错：Caug…...

编程日记 2025/8/16 5:45:26

大语言模型中的“温度”参数到底是什么？如何正确设置？

近年来，市面上涌现了大量调用大模型的工具，如 Dify、Cherry Studio 等开源或自研平台，几乎都提供了 “温度”（Temperature） 选项。然而，很多人在使用时并不清楚该如何选择合适的温度值。今天，…...

编程日记 2025/8/16 5:45:24

【C++】C++中的类型转换

🚀write in front🚀 📜所属专栏： C学习 🛰️博客主页：睿睿的博客主页 🛰️代码仓库：🎉VS2022_C语言仓库 🎡您的点赞、关注、收藏、评论，是对我最大…...

编程日记 2025/8/16 4:09:25

Go语言基础学习详细笔记

文章目录初步了解Go语言Go语言诞生的主要问题和目标Go语言应用典型代表Go语言开发环境搭建经典HelloWorld 基本程序结构编写学习变量常量数据类型运算符条件语句if语句switch 语句跳转语句常用集合和字符串数组切片Map实现Set**字符串** 函数**基本使用用例验证** 面向对象编…...

编程日记 2025/8/16 7:26:16

初始图形学(7)

上一章完成了相机类的实现，对之前所学的内容进行了封装与整理，现在要学习新的内容。抗锯齿我们放大之前渲染的图片，往往会发现我们渲染的图像边缘有尖锐的"阶梯"性质。这种阶梯状被称为"锯齿"。当真实的相机拍照时&a…...

编程日记 2025/8/16 2:58:11

Linux 安装交叉编译器后丢失 `＜asm/errno.h＞` 的问题及解决方案

前言在 Linux （Ubuntu等）环境下安装某些软件或开发环境时，我们可能会意外地引入交叉编译工具链，尤其是用于 ARM 架构的交叉编译器，比如 gcc-arm-linux-gnueabi 等。而这种行为会修改系统原有的开发环境，甚至导致无法编译原生程序。本文记录一次在 Ubuntu 18.04 上编译 …...

编程日记 2025/8/15 21:00:02

无人机上的热成像相机可以单独使用吗？

想知道无人机上的热成像相机是否可以单独使用，这需要从多个方面来分析。首先，得理解热成像相机的工作原理和依赖条件。热成像本身需要传感器和处理器来捕捉和处理红外辐射，所以无人机是否必须作为载体呢？ 无人机上的热成像相机是否…...

编程日记 2025/8/16 5:45:21

go基于redis+jwt进行用户认证和权限控制

go基于redisjwt进行用户认证和权限控制： 基于 jwt 实现用户认证基于 redis 记录用户的角色和权限效果实现用户认证和权限控制核心实现下面的例子：有三个用户，分别为三个角色：admin、user、manager 路由： …...

编程日记 2025/8/16 5:45:19

深入理解Java三大特性：封装、继承和多态

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/8/16 5:45:17

复刻低成本机械臂 SO-ARM100 上位机控制调试

视频讲解： 复刻低成本机械臂 SO-ARM100 上位机控制调试 SO-ARM100机械臂组装并且标定完成后，下一步就是整臂的调试，由于只做了follower这个从臂，所以要使用lerobot仓库中遥操作控制的方式就不行了，这里发现了bambot这个…...

编程日记 2025/8/15 23:30:37

代码随想录图论part4

图论part04 字符串接龙代码随想录该题本质是最短路径问题，方法：广搜通过逐个修改字符完成从一点到另一点的变换具体是通过对栈顶字符串的每个字符用26个字母逐个替换每次替换要判断是否抵达终点抵达终点返回结果没有抵达终点就判断是否是已…...

编程日记 2025/8/16 5:45:15

台州智惠自动化签约智橙PLM，让创新持续发生

日前，台州智惠自动化科技有限公司（以下简称“智惠自动化”）正式签约了智橙PLM，本次签约是工业自动化领域的革新者和工业研发创新平台的“新新联合”，对“制造之都”台州的制造业转型有着重要意义和深远影响。智惠自动…...

编程日记 2025/8/16 5:45:13

南京大学OpenHarmony技术俱乐部正式揭牌仓颉编程语言引领生态创新

2025年4月24日，由OpenAtom OpenHarmony（以下简称“OpenHarmony”）项目群技术指导委员会与南京大学软件学院共同举办的“南京大学OpenHarmony技术俱乐部成立大会暨基础软件与生态应用论坛”在南京大学仙林校区召开。大会聚焦国产自主编程语言…...

编程日记 2025/8/16 5:45:11

实现一个漂亮的Three.js 扫光地面圆形贴图扫光

实现一个漂亮的Three.js 扫光地面圆形贴图扫光 https://threehub.cn/#/codeMirror?navigationThreeJS&classifyshader&idcircleWave import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GUI } fr…...

编程日记 2025/8/16 5:45:09

第16章 Python数据类型详解：列表（List）与运维开发实践

文章目录第16章 Python数据类型详解：列表（List）与运维开发实践一、列表的基础和入门1. 基本操作2. 常用方法3. 列表推导式（List Comprehension）二、AIOps运维视角下的列表应用1. 日志分析与异常检测2. 时间序列数据处理3. 自动化决策与响应三、DevOps运维开发视角下的列表…...

编程日记 2025/8/16 5:45:07

浅谈广告投放从业者底层思维逻辑

世界上的人分为两种：一种是“思辨者”，而另一种就是“吃瓜群众”。——周国元绝大多数人因潜意识懒惰和不愿走出思维舒适区放弃思考，乐于成为“吃瓜群众”。深以为然。工作中，我接触的投手较多，有时候和投手A交谈…...

编程日记 2025/8/16 7:26:15

报表的那些事：四部演进史——架构视角下的技术跃迁与实战思考

引言作为企业数据流转的核心载体，报表系统的设计与演进始终面临‌高性能、灵活性、可扩展性‌的平衡挑战。本文从架构师视角，以四阶段演进为脉络，结合电商等高并发场景，分享报表系统从定制化开发到混合计算体系的演进实践&#x…...

编程日记 2025/8/16 7:26:13

Pdf转Word案例（java）

Pdf转Word案例（java） 需要导入aspose-pdf.jar 需要先手动下载jar包到本地，然后通过systemPath在pom文件中引入。下载地址：https://releases.aspose.com/java/repo/com/aspose/aspose-pdf/25.4/ <dependency><groupId&…...

编程日记 2025/8/16 7:26:11

HTML基础2-空元素，元素属性与页面的结构

目录空元素（Void Element） 元素属性 （Attribute） 页面结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"w…...

编程日记 2025/8/16 7:26:10

2025FIC初赛（手机）

前言记录一下自己的学习过程，网上已经有很多大佬出来全篇教程，但是我还是写出小部分，希望自己可以以点破面，什么都会等于不会，肯定是拿自己和大佬比，大佬都是全栈的。手机取证 1. 请分析检材二&#x…...

编程日记 2025/8/16 1:44:41

《Python星球日记》第43天：机器学习概述与Scikit-learn入门

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏：《Python星球日记》，限时特价订阅中ing 目录一、什么是机器学习？1. 机器学习的三大类型1.1 监督学习1.2 无监督学习1.3 强化学习二、Scikit…...

编程日记 2025/8/16 7:26:06

Carlink 技术：搭建汽车与手机的智能桥梁

随着汽车智能化浪潮的推进，手机与车机的无缝连接已成为现代出行体验的重要组成部分。在这一背景下，ICCOA联盟推出的Carlink技术应运而生。一、什么是Carlink Carlink是由智慧车联开放联盟(ICCOA)主导开发的新一代车机互联协议，旨在实现安卓…...

编程日记 2025/8/16 7:26:04

嵌入式学习--江协51单片机day2

今天学的不多，内容为：静态、动态数码管的控制，模块化编程和lcd1602调试工具数码管的控制由于内部电路的设计，数码管每次只能显示一个位置的一个数字，动态的实现是基于不同位置的闪烁频率高。 P2_4,P2_3,P2_2控制位…...

编程日记 2025/8/16 7:26:03

LLaMA-Omni 2:基于 LLM 的自回归流语音合成实时口语聊天机器人

LLaMA-Omni 2 是基于 Qwen2.5-0.5B/1.5B/3B/7B/14B/32B-Instruct 模型的一系列语音语言模型。与 LLaMA-Omni 类似，它可以同时生成文本和语音应答，从而实现高质量、低延迟的语音交互。通过新引入的流式自回归语音解码器，LLaMA-Omni 2 与 LLaMA…...

编程日记 2025/8/15 15:27:11

CODESYS开发环境下的快捷键和软件操作汇总

CODESYS访问变量属性无需添加应用路径的方法 CODESYS访问变量(属性)无需添加引用路径的方法_attribute qualified only-CSDN博客文章浏览阅读410次。CODESYS平台下的变量相关知识介绍大家还可以参考下面文章连接：CODESYS面向对象编程:方法/动作/属性的使用-CSDN博客文章浏览阅…...

编程日记 2025/8/16 7:25:59

英伟达发布Llama-Nemotron系列新模型，性能超越DeepSeek-R1

近期，英伟达重磅推出开源模型系列 Llama-Nemotron，以强悍的推理能力与高效性能引发广泛关注，被认为可能重新定义开源AI的技术格局。该系列模型在推理速度上全面超越DeepSeek-R1，内存使用效率与吞吐表现也大幅提升。其训练策略融合…...

编程日记 2025/8/16 7:25:58

堆与二叉树——C语言

一、顺序表底层 #pragma once #include<stdio.h> #include<stdlib.h> #include<assert.h>typedef int data; typedef struct Heap {data* arr;int size;int capacity; }Heap;void HeapInit(Heap* php); void HeapDestroy(Heap* php); //把已有堆进行排序 vo…...

编程日记 2025/8/16 7:25:56

如何检查 Watchtower 是否正常工作及更新未生效的排查方法【日常排错】

文章目录前言一、验证 Watchtower 是否正在运行1. 检查 Watchtower 容器状态2. 查看 Watchtower 日志二、检查5分钟间隔设置是否正确1. 确认启动命令2. 验证环境变量三、排查更新未生效的原因1. 检查是否有镜像更新2. 检查容器标签3. 检查监控范围四、测试 Watchtower 功能…...

编程日记 2025/8/16 7:25:54

网站网页经常 400 错误，清缓存后就好了的原因剖析

目录一、HTTP 400 错误的常见起因（一）URL 有问题（二）缓存或 Cookie 出状况（三）文件尺寸超标（四）请求头信息不对劲二、清缓存为何能奏效三、其他可以尝试的解决办法（一）重新检查 URL（二）暂时关闭浏览器插件（三）切换网络环境（四）更新浏览器版本（五）检查服务器…...

编程日记 2025/8/16 4:30:07