独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRIZ 最终理想解 - 一体化自冷却外转子电机</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--bg-color: #030712;
--cyan-glow: #00f0ff;
--blue-intake: #0066ff;
--red-exhaust: #ff3c00;
--grid-color: rgba(255, 255, 255, 0.03);
--tech-font: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;
}
body {
background-color: var(--bg-color);
color: #8ab4f8;
font-family: var(--tech-font);
overflow: hidden;
margin: 0;
padding: 0;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 40px 40px;
background-position: center center;
}
/* 动画定义 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse-heat {
0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 8px var(--red-exhaust)); }
50% { opacity: 1; filter: drop-shadow(0 0 15px var(--red-exhaust)); }
}
@keyframes flow {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}
/* 类名映射 */
.animate-spin-fast { animation: spin 1.2s linear infinite; transform-origin: center; }
.animate-spin-slow { animation: spin 20s linear infinite; transform-origin: center; }
.animate-spin-reverse { animation: spin 30s linear reverse infinite; transform-origin: center; }
.heat-pulse { animation: pulse-heat 2s ease-in-out infinite; }
.airflow-line {
fill: none;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 8 16;
animation: flow 0.8s linear infinite;
opacity: 0.8;
}
/* UI 装饰线条 */
.corner-border {
position: absolute;
width: 20px;
height: 20px;
border-color: rgba(0, 240, 255, 0.4);
}
.tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }
.ui-panel {
background: rgba(3, 7, 18, 0.6);
backdrop-filter: blur(8px);
border: 1px solid rgba(0, 240, 255, 0.1);
}
.scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(to bottom, transparent, rgba(0, 240, 255, 0.05), transparent);
animation: scanline 6s linear infinite;
pointer-events: none;
z-index: 50;
}
</style>
</head>
<body class="w-screen h-screen flex items-center justify-center relative select-none">
<div class="scanline"></div>
<!-- 绝对定位的 UI 信息层，避免遮挡中央动画 -->
<div class="absolute inset-4 pointer-events-none flex flex-col justify-between z-10">
<!-- 顶部信息 -->
<div class="flex justify-between items-start">
<!-- 左上：TRIZ 原理说明 -->
<div class="ui-panel p-4 w-80 relative">
<div class="corner-border tl"></div><div class="corner-border tr"></div>
<div class="corner-border bl"></div><div class="corner-border br"></div>
<h1 class="text-xs font-bold tracking-widest text-[#00f0ff] mb-2">[ IFR: 最终理想解 ]</h1>
<h2 class="text-sm font-bold text-white mb-2">一体化自冷却外转子电机</h2>
<p class="text-[11px] leading-relaxed text-gray-300 opacity-90">
<span class="text-[#00f0ff]">消除矛盾：</span>将被动散热转化为主动强制风冷。<br>
<span class="text-[#00f0ff]">资源利用：</span>利用电机固有旋转动能，转子外壳一体化加工空气动力学微型离心叶片。<br>
<span class="text-[#00f0ff]">核心机理：</span>电机即风扇。高速旋转形成内部负压抽吸，冷空气吸入带走绕组热量。
</p>
</div>
<!-- 右上：遥测数据 -->
<div class="ui-panel p-4 w-48 relative">
<div class="corner-border tl"></div><div class="corner-border tr"></div>
<div class="corner-border bl"></div><div class="corner-border br"></div>
<h3 class="text-[10px] text-gray-400 mb-2 border-b border-gray-700 pb-1">LIVE TELEMETRY</h3>
<div class="flex flex-col space-y-1 text-xs">
<div class="flex justify-between">
<span class="text-gray-400">RPM</span>
<span id="tel-rpm" class="text-[#00f0ff] font-bold">3024</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">VELOCITY</span>
<span id="tel-vel" class="text-white font-bold">3.4 m/s</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">TEMP.IN</span>
<span class="text-[#0066ff] font-bold">24.0 °C</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">TEMP.OUT</span>
<span id="tel-temp" class="text-[#ff3c00] font-bold">65.2 °C</span>
</div>
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="flex justify-between items-end">
<!-- 左下：图例与约束 -->
<div class="ui-panel p-4 w-72 relative">
<div class="corner-border tl"></div><div class="corner-border tr"></div>
<div class="corner-border bl"></div><div class="corner-border br"></div>
<h3 class="text-[10px] text-gray-400 mb-2 border-b border-gray-700 pb-1">SYSTEM CONSTRAINTS & LEGEND</h3>
<ul class="text-[11px] space-y-1 text-gray-300">
<li class="flex items-center"><span class="w-2 h-2 rounded-full bg-[#0066ff] mr-2"></span> 定子进风孔 (冷空气吸入)</li>
<li class="flex items-center"><span class="w-2 h-2 rounded-full bg-[#ff3c00] mr-2 shadow-[0_0_5px_#ff3c00]"></span> 发热绕组 (热交换区)</li>
<li class="flex items-center"><span class="w-2 h-2 border border-[#00f0ff] mr-2"></span> 离心叶片 1.5-2mm</li>
<li class="mt-2 pt-2 border-t border-gray-700 text-gray-500 italic">
* 边界限制：开孔设计破坏防护等级，不可用于防水/防尘的绝对密封工况。
</li>
</ul>
</div>
<!-- 右下：状态标识 -->
<div class="text-right pointer-events-none">
<div class="text-[10px] text-[#00f0ff] animate-pulse">SYSTEM ACTIVE</div>
<div class="text-[8px] text-gray-500 tracking-[0.2em]">FORCED CONVECTION MODE</div>
</div>
</div>
</div>
<!-- 中央核心动画区域 -->
<div class="w-[80vmin] h-[80vmin] relative flex items-center justify-center">
<svg id="motor-svg" viewBox="-400 -400 800 800" class="w-full h-full drop-shadow-2xl">
<defs>
<!-- 发光滤镜 -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glow-strong" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- 温度渐变：从中心的冷空气(蓝)到边缘的热空气(红) -->
<radialGradient id="temp-gradient" cx="0" cy="0" r="300" gradientUnits="userSpaceOnUse">
<stop offset="10%" stop-color="#0066ff" stop-opacity="1" />
<stop offset="35%" stop-color="#00f0ff" stop-opacity="0.8" />
<stop offset="65%" stop-color="#ff8800" stop-opacity="0.9" />
<stop offset="95%" stop-color="#ff3c00" stop-opacity="1" />
</radialGradient>
<!-- 绕组纹理 -->
<pattern id="coil-pattern" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<line x1="0" y1="0" x2="0" y2="4" stroke="#ff8800" stroke-width="1.5" opacity="0.8" />
</pattern>
</defs>
<!-- 背景装饰层 (HUD 风格的静态刻度和环) -->
<g opacity="0.3">
<circle cx="0" cy="0" r="360" fill="none" stroke="#8ab4f8" stroke-width="1" stroke-dasharray="2 6" class="animate-spin-slow" />
<circle cx="0" cy="0" r="380" fill="none" stroke="#00f0ff" stroke-width="0.5" stroke-dasharray="1 10" class="animate-spin-reverse" />
<!-- 十字准星 -->
<line x1="-390" y1="0" x2="390" y2="0" stroke="#8ab4f8" stroke-width="0.5" />
<line x1="0" y1="-390" x2="0" y2="390" stroke="#8ab4f8" stroke-width="0.5" />
</g>
<!-- 结构层：定子 (固定不动的内部核心) -->
<g id="stator">
<!-- 中心轴与进风导流孔区域 -->
<circle cx="0" cy="0" r="50" fill="#030712" stroke="#0066ff" stroke-width="2" />
<circle cx="0" cy="0" r="40" fill="none" stroke="#0066ff" stroke-width="1" stroke-dasharray="4 4" />
<!-- 进风指示虚线中心 -->
<circle cx="0" cy="0" r="15" fill="#0066ff" opacity="0.3" filter="url(#glow)" />
<!-- 动态生成的定子线圈绕组 (在 JS 中渲染) -->
<g id="stator-coils" class="heat-pulse"></g>
</g>
<!-- 气流层：负压抽吸与离心排出 (利用温度渐变上色) -->
<g id="airflow-layer">
<!-- 动态生成的气流轨迹路径 (在 JS 中渲染) -->
</g>
<!-- 结构层：外转子与微型离心叶片 (高速旋转的外部壳体) -->
<g id="rotor" class="animate-spin-fast">
<!-- 外壳基础环 -->
<circle cx="0" cy="0" r="280" fill="none" stroke="#00f0ff" stroke-width="3" filter="url(#glow)" />
<circle cx="0" cy="0" r="290" fill="none" stroke="#00f0ff" stroke-width="1" stroke-dasharray="10 20" />
<circle cx="0" cy="0" r="270" fill="none" stroke="#00f0ff" stroke-width="0.5" opacity="0.5" />
<!-- 内侧磁钢环 -->
<circle cx="0" cy="0" r="240" fill="none" stroke="rgba(0, 240, 255, 0.3)" stroke-width="10" />
<!-- 动态生成的离心叶片 (在 JS 中渲染) -->
<g id="rotor-blades"></g>
<!-- 转子中心连接法兰盖 (半透明，不遮挡内部视线) -->
<circle cx="0" cy="0" r="60" fill="rgba(3, 7, 18, 0.4)" stroke="#00f0ff" stroke-width="1" stroke-dasharray="5 5" />
<circle cx="0" cy="0" r="10" fill="#00f0ff" />
</g>
<!-- 顶层标识 (不旋转) -->
<g pointer-events="none">
<!-- 中心冷风吸入标识 -->
<text x="0" y="-15" text-anchor="middle" fill="#0066ff" font-size="12" font-weight="bold" filter="url(#glow)" opacity="0.8">COLD IN</text>
<path d="M -10 -5 L 0 5 L 10 -5" fill="none" stroke="#0066ff" stroke-width="2" />
</g>
</svg>
</div>
<!-- 生成动态 SVG 内容及仪表盘逻辑 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const numPoles = 12; // 定子极数 / 线圈数
const numBlades = 16; // 转子叶片数
const numFlowLines = 24; // 气流轨迹数
// 1. 生成定子发热绕组 (静止，位于内层)
const coilsGroup = document.getElementById('stator-coils');
for (let i = 0; i < numPoles; i++) {
const angle = (i * 360) / numPoles;
const coil = document.createElementNS("http://www.w3.org/2000/svg", "g");
coil.setAttribute("transform", `rotate(${angle}) translate(0, -150)`);
// 铁芯极靴
const core = document.createElementNS("http://www.w3.org/2000/svg", "path");
core.setAttribute("d", "M -20 -40 L 20 -40 L 35 40 L -35 40 Z");
core.setAttribute("fill", "#0a1122");
core.setAttribute("stroke", "#1a2b4c");
core.setAttribute("stroke-width", "2");
// 发热的铜线绕组
const winding = document.createElementNS("http://www.w3.org/2000/svg", "path");
winding.setAttribute("d", "M -28 -20 L 28 -20 L 32 30 L -32 30 Z");
winding.setAttribute("fill", "url(#coil-pattern)");
winding.setAttribute("stroke", "#ff3c00");
winding.setAttribute("stroke-width", "1.5");
winding.setAttribute("filter", "url(#glow)");
coil.appendChild(core);
coil.appendChild(winding);
coilsGroup.appendChild(coil);
}
// 2. 生成外转子端面集成的离心叶片 (随外壳旋转)
const bladesGroup = document.getElementById('rotor-blades');
for (let i = 0; i < numBlades; i++) {
const angle = (i * 360) / numBlades;
const blade = document.createElementNS("http://www.w3.org/2000/svg", "path");
// 绘制空气动力学后掠角叶片
// 起点位于半径 70，终点位于半径 270。向后弯曲的曲线。
blade.setAttribute("d", "M 0 -70 C 40 -120, 80 -180, 60 -270 C 40 -200, 10 -130, -10 -70 Z");
blade.setAttribute("fill", "rgba(0, 240, 255, 0.15)");
blade.setAttribute("stroke", "#00f0ff");
blade.setAttribute("stroke-width", "1.5");
blade.setAttribute("transform", `rotate(${angle})`);
bladesGroup.appendChild(blade);
}
// 3. 生成强制对流气流轨迹 (静止路径，通过虚线动画展示流动)
const airflowGroup = document.getElementById('airflow-layer');
for (let i = 0; i < numFlowLines; i++) {
const angle = (i * 360) / numFlowLines;
const flowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
// 气流从中心向外侧旋出，模拟离心力作用下的流体轨迹
// 起点 r=40，终点 r=320
flowPath.setAttribute("d", "M 0 -40 Q 150 -100 200 -320");
flowPath.setAttribute("class", "airflow-line");
flowPath.setAttribute("stroke", "url(#temp-gradient)");
// 为不同线条设置略微不同的动画延迟，使流动看起来更连续自然
const delay = (Math.random() * 0.8).toFixed(2);
flowPath.style.animationDelay = `-${delay}s`;
flowPath.setAttribute("transform", `rotate(${angle})`);
airflowGroup.appendChild(flowPath);
}
// 4. 更新遥测数据 UI，增加工程保真感
const elRpm = document.getElementById('tel-rpm');
const elVel = document.getElementById('tel-vel');
const elTemp = document.getElementById('tel-temp');
setInterval(() => {
// 模拟数据微小波动
const rpmBase = 3020;
const currentRpm = rpmBase + Math.floor(Math.random() * 15);
elRpm.textContent = currentRpm;
const velBase = 3.4;
const currentVel = (velBase + (Math.random() * 0.2 - 0.1)).toFixed(2);
elVel.textContent = `${currentVel} m/s`;
const tempBase = 65.2;
const currentTemp = (tempBase + (Math.random() * 0.4 - 0.2)).toFixed(1);
elTemp.textContent = `${currentTemp} °C`;
}, 150);
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...