独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双头错相并联蠕动泵 - 理想最终解 (IFR)</title>
<style>
:root {
--bg-color: #07090f;
--surface: #111522;
--surface-border: #1f273c;
--text-main: #e2e8f0;
--text-muted: #8b9bb4;
--color-pump-a: #ff2a6d; /* 赛博粉 */
--color-pump-b: #ffb400; /* 琥珀黄 */
--color-output: #00ffcc; /* 荧光青 */
--font-tech: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: var(--font-ui);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
padding: 2rem;
background-image:
radial-gradient(circle at 50% 0%, #111b3d 0%, transparent 50%),
radial-gradient(circle at 100% 100%, #1a0b1c 0%, transparent 50%);
}
/* 页面入场动画 */
@keyframes fadeInScale {
0% { opacity: 0; transform: translateY(20px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.header {
text-align: center;
margin-bottom: 2rem;
animation: fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.header h1 {
font-size: 2.2rem;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, #fff, #8b9bb4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header p {
color: var(--text-muted);
font-size: 1rem;
max-width: 600px;
margin: 0 auto;
}
.dashboard {
display: flex;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
max-width: 1400px;
justify-content: center;
align-items: flex-start;
}
/* 卡片通用样式 */
.card {
background: rgba(17, 21, 34, 0.6);
backdrop-filter: blur(12px);
border: 1px solid var(--surface-border);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
opacity: 0;
animation: fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: #fff;
border-bottom: 1px solid var(--surface-border);
padding-bottom: 0.8rem;
}
/* 左侧：机构原理图 */
.mechanism-container {
flex: 1 1 600px;
max-width: 700px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.mechanism-svg {
width: 100%;
height: auto;
display: block;
}
/* 右侧布局：波形图 + 核心控制 */
.analytics-container {
flex: 1 1 400px;
max-width: 500px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.chart-svg {
width: 100%;
height: 220px;
background: #0b0d14;
border-radius: 8px;
border: 1px solid #1f273c;
}
/* 交互控制区 */
.controls {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.control-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.control-group label {
font-size: 0.9rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
.control-group label span.value {
font-family: var(--font-tech);
color: var(--color-output);
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--color-output);
cursor: pointer;
margin-top: -6px;
box-shadow: 0 0 10px var(--color-output);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: var(--surface-border);
border-radius: 2px;
}
/* 方案详解区块 */
.info-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.info-item {
display: flex;
gap: 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.info-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.8rem;
}
.icon-a { background: rgba(255, 42, 109, 0.2); color: var(--color-pump-a); border: 1px solid var(--color-pump-a); }
.icon-b { background: rgba(255, 180, 0, 0.2); color: var(--color-pump-b); border: 1px solid var(--color-pump-b); }
.icon-out { background: rgba(0, 255, 204, 0.2); color: var(--color-output); border: 1px solid var(--color-output); }
.info-content strong {
color: #fff;
display: block;
margin-bottom: 0.2rem;
}
.info-content span {
color: var(--text-muted);
font-size: 0.85rem;
}
/* SVG 内部样式 */
.svg-grid { stroke: #1a2235; stroke-width: 1; }
.svg-text { fill: var(--text-muted); font-family: var(--font-tech); font-size: 12px; }
.svg-text-title { fill: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: bold; }
.pump-housing { fill: #111622; stroke: #2a344a; stroke-width: 2; }
.rotor-arm { stroke: #465673; stroke-width: 8; stroke-linecap: round; }
.roller { fill: #ffffff; stroke: #8b9bb4; stroke-width: 2; }
.tube-base { fill: none; stroke: #1a2235; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
/* 流体发光管道 */
.tube-fluid { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke-opacity 0.1s; }
.tube-fluid.a { stroke: var(--color-pump-a); filter: drop-shadow(0 0 6px var(--color-pump-a)); }
.tube-fluid.b { stroke: var(--color-pump-b); filter: drop-shadow(0 0 6px var(--color-pump-b)); }
.tube-fluid.out { stroke: var(--color-output); filter: drop-shadow(0 0 8px var(--color-output)); }
/* 虚线流动效果 */
.tube-dash {
fill: none;
stroke: #ffffff;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 4 12;
opacity: 0.8;
stroke-linejoin: round;
}
/* 坐标图样式 */
.axis { stroke: #2a344a; stroke-width: 1; }
.grid-line { stroke: #1a2235; stroke-width: 1; stroke-dasharray: 4 4; }
.chart-path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-path.a { stroke: var(--color-pump-a); filter: drop-shadow(0 0 4px rgba(255,42,109,0.5)); }
.chart-path.b { stroke: var(--color-pump-b); filter: drop-shadow(0 0 4px rgba(255,180,0,0.5)); }
.chart-path.out { stroke: var(--color-output); stroke-width: 3; filter: drop-shadow(0 0 6px var(--color-output)); }
</style>
</head>
<body>
<div class="header">
<h1>双头错相并联低脉动蠕动泵</h1>
<p>基于 TRIZ 最终理想解 (IFR) 原理：无需增加结构复杂度，利用同轴双转子 90° 机械相位错位，实现波峰波谷流量在 Y 型汇流处的完美自抵消。</p>
</div>
<div class="dashboard">
<!-- 左侧：机构原理可视化 -->
<div class="card mechanism-container">
<h2 class="card-title" style="position:absolute; top: 1.5rem; left: 1.5rem; border:none; z-index: 10;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
动态拓扑构型 (2D平铺视图)
</h2>
<svg class="mechanism-svg" viewBox="0 0 600 500" preserveAspectRatio="xMidYMid meet">
<!-- 背景网格 -->
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" class="svg-grid"/>
</pattern>
<!-- Y型接头融合渐变 -->
<linearGradient id="merge-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="var(--color-output)"/>
</linearGradient>
</defs>
<rect width="600" height="500" fill="url(#grid)" opacity="0.3"/>
<!-- 同轴电机虚线连杆 -->
<line x1="200" y1="50" x2="200" y2="450" stroke="#465673" stroke-width="2" stroke-dasharray="6 6"/>
<text x="210" y="255" class="svg-text">同轴驱动轴</text>
<!-- 流体底层管道 (背景槽) -->
<!-- 进液主管 -->
<path d="M 20 250 L 80 250" class="tube-base"/>
<!-- 分支 A (上) -->
<path d="M 80 250 L 80 100 L 200 100 A 70 70 0 0 1 200 240 L 350 240 L 400 250" class="tube-base"/>
<!-- 分支 B (下) -->
<path d="M 80 250 L 80 400 L 200 400 A 70 70 0 0 0 200 260 L 350 260 L 400 250" class="tube-base"/>
<!-- 汇流后主管 -->
<path d="M 400 250 L 560 250" class="tube-base"/>
<!-- 动态发光流体管道 -->
<path id="fluid-main-in" d="M 20 250 L 80 250" class="tube-fluid" stroke="#5a6b8c"/>
<path id="fluid-a" d="M 80 250 L 80 100 L 200 100 A 70 70 0 0 1 200 240 L 350 240 L 400 250" class="tube-fluid a"/>
<path id="fluid-b" d="M 80 250 L 80 400 L 200 400 A 70 70 0 0 0 200 260 L 350 260 L 400 250" class="tube-fluid b"/>
<path id="fluid-out" d="M 400 250 L 560 250" class="tube-fluid out"/>
<!-- 虚线流动粒子 -->
<path d="M 20 250 L 80 250" class="tube-dash flow-dash-in"/>
<path d="M 80 250 L 80 100 L 200 100 A 70 70 0 0 1 200 240 L 350 240 L 400 250" class="tube-dash flow-dash-a"/>
<path d="M 80 250 L 80 400 L 200 400 A 70 70 0 0 0 200 260 L 350 260 L 400 250" class="tube-dash flow-dash-b"/>
<path d="M 400 250 L 560 250" class="tube-dash flow-dash-out"/>
<!-- 泵头 A (上) -->
<g id="pump-a-group" transform="translate(0, 0)">
<circle cx="200" cy="170" r="90" class="pump-housing"/>
<text x="130" y="70" class="svg-text-title" fill="var(--color-pump-a)">泵头 A (相位 0°)</text>
<!-- 中心轴 -->
<circle cx="200" cy="170" r="8" fill="#465673"/>
<!-- 转子 A -->
<g id="rotor-a">
<line x1="140" y1="170" x2="260" y2="170" class="rotor-arm"/>
<circle cx="140" cy="170" r="16" class="roller"/>
<circle cx="260" cy="170" r="16" class="roller"/>
</g>
</g>
<!-- 泵头 B (下) -->
<g id="pump-b-group" transform="translate(0, 0)">
<circle cx="200" cy="330" r="90" class="pump-housing"/>
<text x="130" y="445" class="svg-text-title" fill="var(--color-pump-b)">泵头 B (相位 90°)</text>
<!-- 中心轴 -->
<circle cx="200" cy="330" r="8" fill="#465673"/>
<!-- 转子 B (默认错开90度) -->
<g id="rotor-b">
<line x1="200" y1="270" x2="200" y2="390" class="rotor-arm"/>
<circle cx="200" cy="270" r="16" class="roller"/>
<circle cx="200" cy="390" r="16" class="roller"/>
</g>
</g>
<!-- Y型接头高亮标记 -->
<circle cx="400" cy="250" r="12" fill="none" stroke="var(--color-output)" stroke-width="2" stroke-dasharray="4 4">
<animateTransform attributeName="transform" type="rotate" from="0 400 250" to="360 400 250" dur="4s" repeatCount="indefinite"/>
</circle>
<text x="365" y="225" class="svg-text" fill="var(--color-output)">Y型动态汇流</text>
<!-- 流量标签 -->
<text x="50" y="235" class="svg-text">输入</text>
<text x="480" y="235" class="svg-text" fill="var(--color-output)" font-weight="bold">恒定平稳输出</text>
</svg>
</div>
<!-- 右侧：分析与控制 -->
<div class="analytics-container">
<!-- 实时波形分析图 -->
<div class="card" style="padding: 1rem;">
<h2 class="card-title" style="font-size: 1rem; margin-bottom: 0.5rem; border-bottom: none;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M18 9l-5 5-4-4-4 4"/></svg>
实时流量叠加分析
</h2>
<svg class="chart-svg" viewBox="0 0 400 220" preserveAspectRatio="none">
<!-- 背景网格与坐标系 -->
<line x1="40" y1="200" x2="380" y2="200" class="axis"/>
<line x1="40" y1="20" x2="40" y2="200" class="axis"/>
<line x1="40" y1="110" x2="380" y2="110" class="grid-line"/> <!-- 0.5 刻度 -->
<line x1="40" y1="20" x2="380" y2="20" class="grid-line"/> <!-- 1.0 刻度 -->
<text x="15" y="25" class="svg-text">1.0</text>
<text x="15" y="115" class="svg-text">0.5</text>
<text x="15" y="200" class="svg-text">0.0</text>
<text x="360" y="215" class="svg-text">时间(t)</text>
<!-- 动态路径 -->
<path id="chart-line-a" class="chart-path a" d=""/>
<path id="chart-line-b" class="chart-path b" d=""/>
<path id="chart-line-out" class="chart-path out" d=""/>
<!-- 图例 -->
<rect x="60" y="10" width="10" height="10" fill="var(--color-pump-a)"/>
<text x="75" y="20" class="svg-text">泵A流量</text>
<rect x="140" y="10" width="10" height="10" fill="var(--color-pump-b)"/>
<text x="155" y="20" class="svg-text">泵B流量</text>
<rect x="220" y="10" width="10" height="10" fill="var(--color-output)"/>
<text x="235" y="20" class="svg-text" fill="var(--color-output)">总流量 (完美互补)</text>
</svg>
</div>
<!-- 控制面板 -->
<div class="card controls">
<div class="control-group">
<label>
<span>主电机转速 (RPM)</span>
<span class="value" id="speed-value">60</span>
</label>
<input type="range" id="speed-slider" min="10" max="150" value="60">
</div>
</div>
<!-- 原理说明 -->
<div class="card">
<ul class="info-list">
<li class="info-item">
<div class="info-icon icon-a">A</div>
<div class="info-content">
<strong>泵头 A 脉动特性</strong>
<span>标准双滚轮结构，单圈产生 2 次深度流量低谷（正弦平方规律），寿命极长但流量波动大。</span>
</div>
</li>
<li class="info-item">
<div class="info-icon icon-b">B</div>
<div class="info-content">
<strong>泵头 B 精准错相</strong>
<span>与泵 A 同轴驱动，但机械安装固定错位 90 度。巧妙利用现有动力源提取新的时间维资源。</span>
</div>
</li>
<li class="info-item">
<div class="info-icon icon-out">∑</div>
<div class="info-content">
<strong>最终理想解 (IFR)</strong>
<span>依据数学原理: sin²(θ) + cos²(θ) = 1。泵 A 波谷回抽时，恰逢泵 B 波峰挤压，两者在 Y 型接头处动态抵消，输出零脉动的直线流量。</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 系统状态变量
let globalAngle = 0;
let motorSpeed = 60; // 对应 slider 的基础速度映射
let baseSpeedMultiplier = 0.05; // 角度增量基数
// DOM 元素获取
const rotorA = document.getElementById('rotor-a');
const rotorB = document.getElementById('rotor-b');
const fluidA = document.getElementById('fluid-a');
const fluidB = document.getElementById('fluid-b');
const fluidOut = document.getElementById('fluid-out');
const dashIn = document.querySelector('.flow-dash-in');
const dashA = document.querySelector('.flow-dash-a');
const dashB = document.querySelector('.flow-dash-b');
const dashOut = document.querySelector('.flow-dash-out');
const chartPathA = document.getElementById('chart-line-a');
const chartPathB = document.getElementById('chart-line-b');
const chartPathOut = document.getElementById('chart-line-out');
const speedSlider = document.getElementById('speed-slider');
const speedValue = document.getElementById('speed-value');
// 历史数据存储（用于绘制波形）
const maxDataPoints = 170; // 控制图表横向数据点密度 (对应 X=40 到 X=380，每 2px 一个点)
const historyA = [];
const historyB = [];
const historyTotal = [];
// 监听滑块
speedSlider.addEventListener('input', (e) => {
motorSpeed = parseInt(e.target.value);
speedValue.textContent = motorSpeed;
});
// 动画主循环
let lastTime = 0;
function animate(timestamp) {
if (!lastTime) lastTime = timestamp;
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
// 计算当前角度增量 (帧率独立)
const angleDelta = motorSpeed * baseSpeedMultiplier * (deltaTime / 16.66);
globalAngle = (globalAngle + angleDelta) % 360;
// 蠕动泵的双滚轮脉动特性近似为周期两倍的波： sin^2(theta)
// 角度转弧度，考虑双滚轮，一圈两个周期，所以乘以 1 (因为本身泵转半圈就一个周期)
const rad = globalAngle * Math.PI / 180;
// 流量数学模型：由于两个滚轮对称，流量与转角呈正弦平方关系。
// 泵 A 相位 0
const flowA = Math.pow(Math.sin(rad), 2);
// 泵 B 相位 90度 (PI/2)，cos^2
const flowB = Math.pow(Math.cos(rad), 2);
// 理论总和恒等于 1
const totalFlow = flowA + flowB;
// --- 1. 更新机构视觉旋转 ---
// 注意中心点坐标：泵 A (200, 170), 泵 B (200, 330)
rotorA.setAttribute('transform', `rotate(${globalAngle}, 200, 170)`);
rotorB.setAttribute('transform', `rotate(${globalAngle + 90}, 200, 330)`);
// --- 2. 更新管道发光强度与流动 ---
// 基础透明度 0.2，随流量波动增加至 1.0
fluidA.style.strokeOpacity = 0.2 + 0.8 * flowA;
fluidB.style.strokeOpacity = 0.2 + 0.8 * flowB;
// 输出管道保持恒定亮度
fluidOut.style.strokeOpacity = 1.0;
// 移动虚线 (流动感)
const dashOffset = -(globalAngle * 1.5);
dashIn.style.strokeDashoffset = dashOffset;
dashA.style.strokeDashoffset = dashOffset;
dashB.style.strokeDashoffset = dashOffset;
// 输出管流速恒定，且为单管的两倍流量表现
dashOut.style.strokeDashoffset = dashOffset * 1.5;
// --- 3. 更新示波器图表 ---
// 每隔一定角度采样一次，防止图表滚动过快
historyA.push(flowA);
historyB.push(flowB);
historyTotal.push(totalFlow);
if (historyA.length > maxDataPoints) {
historyA.shift();
historyB.shift();
historyTotal.shift();
}
drawChart();
requestAnimationFrame(animate);
}
// 绘制实时波形函数
function drawChart() {
if (historyA.length === 0) return;
// 坐标映射参数
const startX = 40;
const endX = 380;
const stepX = (endX - startX) / maxDataPoints;
// Y轴：0.0 映射到 Y=200, 1.0 映射到 Y=20 (高度 180)
const baseY = 200;
const scaleY = -180;
let d_A = '';
let d_B = '';
let d_Out = '';
for (let i = 0; i < historyA.length; i++) {
const x = startX + i * stepX;
const yA = baseY + historyA[i] * scaleY;
const yB = baseY + historyB[i] * scaleY;
const yOut = baseY + historyTotal[i] * scaleY;
if (i === 0) {
d_A += `M ${x} ${yA} `;
d_B += `M ${x} ${yB} `;
d_Out += `M ${x} ${yOut} `;
} else {
d_A += `L ${x} ${yA} `;
d_B += `L ${x} ${yB} `;
d_Out += `L ${x} ${yOut} `;
}
}
chartPathA.setAttribute('d', d_A);
chartPathB.setAttribute('d', d_B);
chartPathOut.setAttribute('d', d_Out);
}
// 初始化后立即预填充一些数据让图表直接有线
for(let i=0; i<maxDataPoints; i++){
const rad = (i * 2 * Math.PI) / 180;
historyA.push(Math.pow(Math.sin(rad), 2));
historyB.push(Math.pow(Math.cos(rad), 2));
historyTotal.push(1);
}
// 启动动画
requestAnimationFrame(animate);
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...