独立渲染引擎就绪引擎就绪
<!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-dark: #060911;
--panel-bg: rgba(10, 16, 30, 0.75);
--panel-border: rgba(0, 229, 255, 0.2);
--accent-cyan: #00f2fe;
--accent-blue: #4facfe;
--accent-orange: #ff8c00;
--accent-hot: #ff3366;
--accent-glow: #ffe600;
--text-main: #e2e8f0;
--text-muted: #64748b;
--font-mono: "SF Mono", "Fira Code", "Courier New", monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
/* 主视区容器 */
.stage-container {
position: relative;
flex: 1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* 核心 SVG 画布 */
svg#geothermal-svg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
}
/* 极简角隅 HUD 覆盖层（严格控制字号与区域，杜绝遮挡中心动画） */
.hud-header {
position: absolute;
top: 16px;
left: 20px;
z-index: 10;
pointer-events: none;
}
.hud-title {
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.hud-title .badge {
font-size: 10px;
padding: 2px 6px;
background: rgba(0, 242, 254, 0.15);
border: 1px solid var(--accent-cyan);
border-radius: 3px;
color: var(--accent-cyan);
font-family: var(--font-mono);
}
.hud-subtitle {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
letter-spacing: 0.5px;
}
/* 右上角实时参数遥测面板 */
.hud-telemetry {
position: absolute;
top: 16px;
right: 20px;
background: var(--panel-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--panel-border);
border-radius: 6px;
padding: 10px 14px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
z-index: 10;
pointer-events: none;
}
.metric-item {
display: flex;
flex-direction: column;
}
.metric-label {
font-size: 10px;
color: var(--text-muted);
margin-bottom: 2px;
}
.metric-value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--accent-cyan);
}
.metric-value.hot {
color: var(--accent-hot);
}
.metric-value.gold {
color: var(--accent-glow);
}
/* 底部轻量交互微调面板 */
.hud-controls {
position: absolute;
bottom: 16px;
right: 20px;
background: var(--panel-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--panel-border);
border-radius: 6px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 16px;
z-index: 10;
}
.ctrl-group {
display: flex;
align-items: center;
gap: 8px;
}
.ctrl-label {
font-size: 11px;
color: var(--text-main);
}
.ctrl-slider {
appearance: none;
-webkit-appearance: none;
width: 90px;
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.ctrl-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent-cyan);
box-shadow: 0 0 6px var(--accent-cyan);
cursor: pointer;
}
.ctrl-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent-cyan);
min-width: 48px;
}
/* 左下角极简图例说明 */
.hud-legend {
position: absolute;
bottom: 16px;
left: 20px;
background: var(--panel-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--panel-border);
border-radius: 6px;
padding: 8px 12px;
display: flex;
gap: 14px;
font-size: 11px;
color: var(--text-main);
z-index: 10;
pointer-events: none;
}
.legend-tag {
display: flex;
align-items: center;
gap: 5px;
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
/* 动画与高光发光滤镜 */
@keyframes pulse-heat {
0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 3px rgba(255, 51, 102, 0.4)); }
50% { opacity: 0.95; filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8)); }
}
@keyframes turbine-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes wave-flow {
0% { stroke-dashoffset: 200; }
100% { stroke-dashoffset: 0; }
}
@keyframes power-pulse {
0%, 100% { stroke: #ffe600; opacity: 0.5; }
50% { stroke: #ffffff; opacity: 1; filter: drop-shadow(0 0 6px #ffe600); }
}
.heat-fracture {
animation: pulse-heat 3.5s ease-in-out infinite;
}
.power-line {
animation: power-pulse 2s infinite;
}
</style>
</head>
<body>
<div class="stage-container">
<!-- 顶部极简 HUD -->
<header class="hud-header">
<div class="hud-title">
<span>中深层多分支水平井压裂换热系统</span>
<span class="badge">IFR 最终理想解</span>
</div>
<div class="hud-subtitle">以“面积置换深度”：5.5 km 主井 + 鱼骨分支压裂人工裂隙网络 (≥10⁶ m²)</div>
</header>
<!-- 右上角遥测数据仪表 (紧凑小字号) -->
<div class="hud-telemetry">
<div class="metric-item">
<span class="metric-label">换热有效总面积</span>
<span class="metric-value gold" id="val-area">1.25 × 10⁶ m²</span>
</div>
<div class="metric-item">
<span class="metric-label">产出水温 (热端)</span>
<span class="metric-value hot" id="val-temp">192.8 °C</span>
</div>
<div class="metric-item">
<span class="metric-label">净发电功率输出</span>
<span class="metric-value" id="val-power">14.6 MWe</span>
</div>
</div>
<!-- 左下角图例 -->
<div class="hud-legend">
<div class="legend-tag">
<span class="legend-dot" style="background:#00f2fe; box-shadow:0 0 6px #00f2fe;"></span>
<span>冷流体注入 (65°C)</span>
</div>
<div class="legend-tag">
<span class="legend-dot" style="background:#ff9900; box-shadow:0 0 6px #ff9900;"></span>
<span>微裂隙渗流吸热网</span>
</div>
<div class="legend-tag">
<span class="legend-dot" style="background:#ff3366; box-shadow:0 0 6px #ff3366;"></span>
<span>高温热流体产出 (190°C+)</span>
</div>
</div>
<!-- 右下角控制微调器 -->
<div class="hud-controls">
<div class="ctrl-group">
<span class="ctrl-label">注采流量:</span>
<input type="range" id="slider-flow" class="ctrl-slider" min="50" max="90" value="72" step="1">
<span class="ctrl-val" id="flow-display">72 L/s</span>
</div>
<div class="ctrl-group">
<span class="ctrl-label">裂隙导流率:</span>
<input type="range" id="slider-perm" class="ctrl-slider" min="80" max="130" value="105" step="1">
<span class="ctrl-val" id="perm-display">105%</span>
</div>
</div>
<!-- 核心 SVG 原理图 (视口 1200 x 780，主体居中无遮挡) -->
<svg id="geothermal-svg" viewBox="0 0 1200 780" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 背景渐变与地层热力学渐变 -->
<linearGradient id="strata-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0c1424" />
<stop offset="28%" stop-color="#111c2e" />
<stop offset="60%" stop-color="#1d1b28" />
<stop offset="85%" stop-color="#341a22" />
<stop offset="100%" stop-color="#47141f" />
</linearGradient>
<!-- HDR 结晶岩热储热场辐射 -->
<radialGradient id="hdr-heat-glow" cx="50%" cy="85%" r="60%">
<stop offset="0%" stop-color="rgba(255, 60, 40, 0.28)" />
<stop offset="45%" stop-color="rgba(255, 120, 0, 0.12)" />
<stop offset="100%" stop-color="rgba(20, 10, 15, 0)" />
</radialGradient>
<!-- 注入管渐变 (冷蓝) -->
<linearGradient id="inj-tube-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0080ff" />
<stop offset="50%" stop-color="#00f2fe" />
<stop offset="100%" stop-color="#0080ff" />
</linearGradient>
<!-- 生产管渐变 (热红) -->
<linearGradient id="prod-tube-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#cc0044" />
<stop offset="50%" stop-color="#ff4d6d" />
<stop offset="100%" stop-color="#cc0044" />
</linearGradient>
<!-- 裂隙网络微发光滤镜 -->
<filter id="glow-heat" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2.5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="glow-bright" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="4" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- 管道流体流动虚线动画定义 -->
<style>
.flow-blue-down {
stroke-dasharray: 8 6;
animation: dash-down 1.2s linear infinite;
}
.flow-red-up {
stroke-dasharray: 8 6;
animation: dash-up 1.1s linear infinite;
}
.flow-fracture-stream {
stroke-dasharray: 5 5;
animation: dash-fracture 2s linear infinite;
}
@keyframes dash-down {
from { stroke-dashoffset: 28; }
to { stroke-dashoffset: 0; }
}
@keyframes dash-up {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 28; }
}
@keyframes dash-fracture {
from { stroke-dashoffset: 30; }
to { stroke-dashoffset: 0; }
}
</style>
</defs>
<!-- 1. 背景地层结构与深度温度标尺 -->
<rect x="0" y="0" width="1200" height="780" fill="url(#strata-grad)" />
<!-- 深层高温结晶岩底色光晕 (4.5km~5.5km区域) -->
<rect x="0" y="470" width="1200" height="310" fill="url(#hdr-heat-glow)" />
<!-- 地层分界虚线与弱文字标注 (置于左边缘侧) -->
<g stroke="rgba(255,255,255,0.08)" stroke-width="1" stroke-dasharray="4 4">
<!-- 地表 0m -->
<line x1="60" y1="120" x2="1140" y2="120" stroke="rgba(0, 242, 254, 0.3)" stroke-width="1.5" />
<!-- 沉积层底 2000m -->
<line x1="60" y1="260" x2="1140" y2="260" />
<!-- 致密花岗岩顶 4500m (造斜点 KOP) -->
<line x1="60" y1="520" x2="1140" y2="520" stroke="rgba(255, 140, 0, 0.2)" />
<!-- 完井靶底 5500m -->
<line x1="60" y1="710" x2="1140" y2="710" stroke="rgba(255, 51, 102, 0.3)" />
</g>
<!-- 左侧深度 & 地温梯度标尺 (小字号、高科技微刻度) -->
<g font-family="var(--font-mono)" font-size="10" fill="rgba(255,255,255,0.4)">
<text x="68" y="115">0 m (地表 15°C)</text>
<text x="68" y="255">2000 m (沉积盖层 ~65°C)</text>
<text x="68" y="515" fill="#ffaa44">4500 m (造斜分支点 KOP ~145°C)</text>
<text x="68" y="705" fill="#ff4466">5500 m (结晶岩目标层 ~195°C)</text>
<!-- 刻度线 -->
<line x1="60" y1="120" x2="60" y2="710" stroke="rgba(255,255,255,0.2)" stroke-width="1" />
<line x1="56" y1="120" x2="60" y2="120" stroke="rgba(255,255,255,0.5)" stroke-width="1" />
<line x1="56" y1="260" x2="60" y2="260" stroke="rgba(255,255,255,0.5)" stroke-width="1" />
<line x1="56" y1="520" x2="60" y2="520" stroke="#ffaa44" stroke-width="2" />
<line x1="56" y1="710" x2="60" y2="710" stroke="#ff4466" stroke-width="2" />
</g>
<!-- 2. 地表发电与换热中枢系统 (0m ~ 120m 区域) -->
<g id="surface-facilities">
<!-- 地表网格基线 -->
<line x1="160" y1="120" x2="1040" y2="120" stroke="#334155" stroke-width="2" />
<!-- 发电厂房外轮廓 (ORC 有机朗肯循环机组) -->
<path d="M 520,120 L 520,55 L 680,55 L 680,120 Z" fill="rgba(15, 23, 42, 0.85)" stroke="#38bdf8" stroke-width="1.5" />
<text x="600" y="48" font-size="11" fill="#38bdf8" font-weight="bold" text-anchor="middle">地面闭式换热与 ORC 发电站</text>
<!-- 汽轮机旋转叶轮动画 -->
<g transform="translate(600, 85)">
<circle cx="0" cy="0" r="18" fill="none" stroke="#64748b" stroke-width="2" />
<g id="turbine-blades" style="transform-origin: 0 0; animation: turbine-spin 3s linear infinite;">
<line x1="-14" y1="0" x2="14" y2="0" stroke="#00f2fe" stroke-width="2.5" />
<line x1="0" y1="-14" x2="0" y2="14" stroke="#00f2fe" stroke-width="2.5" />
<line x1="-10" y1="-10" x2="10" y2="10" stroke="#00f2fe" stroke-width="2.5" />
<line x1="-10" y1="10" x2="10" y2="-10" stroke="#00f2fe" stroke-width="2.5" />
</g>
<circle cx="0" cy="0" r="4" fill="#fff" />
</g>
<!-- 地面换热器冷热回路管线 -->
<!-- 热水入换热器 (来自生产井 480 处) -->
<path d="M 500,120 L 500,85 L 560,85" fill="none" stroke="#ff3366" stroke-width="3" />
<!-- 冷却后冷水去注入泵 (去往注入井 720 处) -->
<path d="M 640,85 L 700,85 L 700,120" fill="none" stroke="#00f2fe" stroke-width="3" />
<!-- 高压注入泵图标 -->
<rect x="686" y="96" width="28" height="18" rx="2" fill="#0369a1" stroke="#38bdf8" />
<text x="700" y="109" font-size="9" fill="#ffffff" font-family="var(--font-mono)" text-anchor="middle">泵</text>
<!-- 电网电力输出高压线 -->
<path d="M 680,65 L 750,40 L 820,40" fill="none" stroke="#ffe600" stroke-width="2" stroke-dasharray="4 2" class="power-line" />
<!-- 电力输送铁塔 -->
<path d="M 820,40 L 810,120 M 820,40 L 830,120 M 805,75 L 835,75 M 812,55 L 828,55" stroke="rgba(255, 230, 0, 0.6)" stroke-width="1.2" fill="none" />
<text x="838" y="44" font-size="10" fill="#ffe600" font-family="var(--font-mono)">14.6 MW 绿色电能并网</text>
</g>
<!-- 3. 井下主体结构 (0m ~ 5.5km) -->
<!-- 3.1 垂直主井段 (双井系统: 左生产热井 x=500, 右注入冷井 x=700) -->
<g id="vertical-wellbores">
<!-- 井筒外壁护套管 (套管与水泥环) -->
<rect x="495" y="120" width="10" height="400" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1" />
<rect x="695" y="120" width="10" height="400" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1" />
<!-- 垂直流体通道 -->
<!-- 左侧产出井 (上升热流) -->
<line x1="500" y1="520" x2="500" y2="120" stroke="#ff3366" stroke-width="3.5" />
<line x1="500" y1="520" x2="500" y2="120" stroke="#ffe600" stroke-width="1.8" class="flow-red-up" />
<!-- 右侧注入井 (下行冷流) -->
<line x1="700" y1="120" x2="700" y2="520" stroke="#0080ff" stroke-width="3.5" />
<line x1="700" y1="120" x2="700" y2="520" stroke="#00f2fe" stroke-width="1.8" class="flow-blue-down" />
<!-- 井身中段文字注释 (靠井侧微型胶囊) -->
<g font-size="10" fill="rgba(255,255,255,0.6)">
<text x="440" y="320" text-anchor="end" fill="#ff758c">热流体产出管路 ↑</text>
<text x="760" y="320" text-anchor="start" fill="#38bdf8">↓ 低温水注水管路</text>
<text x="600" y="440" font-family="var(--font-mono)" text-anchor="middle" fill="rgba(255,255,255,0.3)">垂深 4500m 无电子机械纯通道</text>
</g>
</g>
<!-- 3.2 4.5km 造斜点 (KOP) 与 5.5km 水平鱼骨分支系统 (核心创新区域) -->
<g id="horizontal-multilaterals">
<!-- 造斜导向弧线 -->
<!-- 左侧生产井 3 条鱼骨分支 (汇聚段) -->
<!-- 分支 L1 (深度约 5200m) -->
<path id="path-prod-1" d="M 500,520 Q 480,560 380,565 L 180,565" fill="none" stroke="#ff3366" stroke-width="3" />
<!-- 分支 L2 (深度约 5400m) -->
<path id="path-prod-2" d="M 500,535 Q 490,620 390,625 L 160,625" fill="none" stroke="#ff3366" stroke-width="3" />
<!-- 分支 L3 (深度约 5500m 完井底) -->
<path id="path-prod-3" d="M 500,550 Q 500,680 400,685 L 190,685" fill="none" stroke="#ff3366" stroke-width="3" />
<!-- 生产分支内部流动动画 -->
<path d="M 180,565 L 380,565 Q 480,560 500,520" fill="none" stroke="#ffffff" stroke-width="1.5" class="flow-red-up" />
<path d="M 160,625 L 390,625 Q 490,620 500,535" fill="none" stroke="#ffffff" stroke-width="1.5" class="flow-red-up" />
<path d="M 190,685 L 400,685 Q 500,680 500,550" fill="none" stroke="#ffffff" stroke-width="1.5" class="flow-red-up" />
<!-- 右侧注入井 3 条鱼骨分支 (分流段) -->
<!-- 分支 R1 (深度约 5200m) -->
<path id="path-inj-1" d="M 700,520 Q 720,560 820,565 L 1020,565" fill="none" stroke="#0099ff" stroke-width="3" />
<!-- 分支 R2 (深度约 5400m) -->
<path id="path-inj-2" d="M 700,535 Q 710,620 810,625 L 1040,625" fill="none" stroke="#0099ff" stroke-width="3" />
<!-- 分支 R3 (深度约 5500m 完井底) -->
<path id="path-inj-3" d="M 700,550 Q 700,680 800,685 L 1010,685" fill="none" stroke="#0099ff" stroke-width="3" />
<!-- 注入分支内部流动动画 -->
<path d="M 700,520 Q 720,560 820,565 L 1020,565" fill="none" stroke="#00f2fe" stroke-width="1.5" class="flow-blue-down" />
<path d="M 700,535 Q 710,620 810,625 L 1040,625" fill="none" stroke="#00f2fe" stroke-width="1.5" class="flow-blue-down" />
<path d="M 700,550 Q 700,680 800,685 L 1010,685" fill="none" stroke="#00f2fe" stroke-width="1.5" class="flow-blue-down" />
<!-- 分段机械滑套与隔离封隔器定位点标注 -->
<g fill="#ffe600">
<rect x="360" y="562" width="6" height="6" rx="1" />
<rect x="270" y="562" width="6" height="6" rx="1" />
<rect x="370" y="622" width="6" height="6" rx="1" />
<rect x="250" y="622" width="6" height="6" rx="1" />
<rect x="380" y="682" width="6" height="6" rx="1" />
<rect x="280" y="682" width="6" height="6" rx="1" />
<rect x="834" y="562" width="6" height="6" rx="1" />
<rect x="924" y="562" width="6" height="6" rx="1" />
<rect x="824" y="622" width="6" height="6" rx="1" />
<rect x="944" y="622" width="6" height="6" rx="1" />
<rect x="814" y="682" width="6" height="6" rx="1" />
<rect x="914" y="682" width="6" height="6" rx="1" />
</g>
</g>
<!-- 4. 核心创新：人造密集压裂裂隙网络 (Fracture Matrix) 与热传导渗流 -->
<g id="fracture-network" class="heat-fracture" filter="url(#glow-heat)">
<!-- 裂隙网络微细裂纹与连通流道 (从右侧注入分支渗流至左侧生产分支) -->
<!-- 上层裂隙群 (540~590m 高度) -->
<g stroke-width="1.2" fill="none">
<path d="M 830,565 Q 730,530 600,550 T 370,565" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<path d="M 900,565 Q 770,510 610,545 T 280,565" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<path d="M 980,565 Q 820,535 600,560 T 200,565" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<!-- 纵向交错微裂缝 -->
<path d="M 760,540 L 730,585 M 650,535 L 670,580 M 550,545 L 530,585 M 450,540 L 430,580" stroke="rgba(255, 140, 0, 0.5)" stroke-dasharray="2 3" />
</g>
<!-- 中层裂隙群 (600~650m 高度) -->
<g stroke-width="1.4" fill="none">
<path d="M 820,625 Q 720,590 600,610 T 380,625" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<path d="M 910,625 Q 780,585 600,615 T 270,625" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<path d="M 1000,625 Q 830,600 600,630 T 180,625" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<!-- 纵向交错微裂缝 -->
<path d="M 780,600 L 760,645 M 680,595 L 690,640 M 520,605 L 510,645 M 420,600 L 400,640" stroke="rgba(255, 140, 0, 0.6)" stroke-dasharray="2 3" />
</g>
<!-- 下层裂隙群 (660~710m 高度) -->
<g stroke-width="1.5" fill="none">
<path d="M 810,685 Q 710,650 600,670 T 390,685" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<path d="M 890,685 Q 760,640 600,675 T 300,685" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<path d="M 980,685 Q 810,660 600,690 T 210,685" stroke="url(#heat-grad-1)" class="flow-fracture-stream" />
<!-- 纵向交错微裂缝 -->
<path d="M 750,660 L 730,705 M 640,655 L 660,700 M 560,665 L 540,705 M 460,660 L 440,700" stroke="rgba(255, 51, 102, 0.6)" stroke-dasharray="2 3" />
</g>
<!-- 层间网状交织互通通道 (体现立体 U 型闭环热交换) -->
<g stroke="rgba(255, 180, 50, 0.4)" stroke-width="1" stroke-dasharray="3 4">
<path d="M 720,565 Q 670,595 710,625 Q 660,655 700,685" fill="none" />
<path d="M 600,550 Q 560,585 600,620 Q 550,655 600,680" fill="none" />
<path d="M 480,565 Q 520,595 490,625 Q 530,655 500,685" fill="none" />
</g>
</g>
<!-- 裂隙渗流渐变着色 (右蓝/冷 -> 中橙/温 -> 左红/热) -->
<defs>
<linearGradient id="heat-grad-1" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#00f2fe" />
<stop offset="25%" stop-color="#38bdf8" />
<stop offset="55%" stop-color="#ff9900" />
<stop offset="85%" stop-color="#ff3366" />
<stop offset="100%" stop-color="#ff0033" />
</linearGradient>
</defs>
<!-- 5. 核心创新说明浮标 (精简文字，不遮挡主体) -->
<g transform="translate(600, 745)">
<!-- 胶囊底框 -->
<rect x="-240" y="-18" width="480" height="34" rx="17" fill="rgba(10, 18, 35, 0.85)" stroke="rgba(0, 242, 254, 0.4)" stroke-width="1" />
<!-- 动态指示标签 -->
<circle cx="-218" cy="-1" r="5" fill="#ffaa00" filter="url(#glow-bright)" />
<text x="-204" y="3" font-size="11" fill="#ffffff" font-weight="600">换热机理:</text>
<text x="-144" y="3" font-size="11" fill="#94a3b8">井筒仅作通道，压裂裂隙网络制造巨大换热面 (以面积替代超深直井)</text>
</g>
<!-- 水平段长度标注刻度标尺 (地下5.5km) -->
<g font-family="var(--font-mono)" font-size="10" fill="rgba(255, 255, 255, 0.5)">
<!-- 左侧水平支标注 -->
<line x1="180" y1="715" x2="490" y2="715" stroke="rgba(255,255,255,0.2)" stroke-width="1" />
<line x1="180" y1="710" x2="180" y2="720" stroke="rgba(255,255,255,0.4)" />
<line x1="490" y1="710" x2="490" y2="720" stroke="rgba(255,255,255,0.4)" />
<text x="335" y="730" text-anchor="middle">分支单支长 2500 m</text>
<!-- 右侧水平支标注 -->
<line x1="710" y1="715" x2="1020" y2="715" stroke="rgba(255,255,255,0.2)" stroke-width="1" />
<line x1="710" y1="710" x2="710" y2="720" stroke="rgba(255,255,255,0.4)" />
<line x1="1020" y1="710" x2="1020" y2="720" stroke="rgba(255,255,255,0.4)" />
<text x="865" y="730" text-anchor="middle">多分支总长 ≥10000 m</text>
</g>
<!-- 动态热流粒子模拟层 (Canvas在JS中同步渲染到此或者SVG动态粒子) -->
<g id="particle-group"></g>
</svg>
</div>
<script>
// 页面加载后自动运行，确保无须用户点击即全自动平稳播放
document.addEventListener("DOMContentLoaded", () => {
initSimulation();
});
// 核心物理仿真变量
const state = {
flowRate: 72, // 注采流量 L/s (60 ~ 80)
permeability: 1.05, // 裂隙导流系数
baseRockTemp: 196.5,// 5.5km 岩体温度 °C
injTemp: 65.0 // 注入冷水温度 °C
};
// DOM 元素引用
const sliderFlow = document.getElementById("slider-flow");
const sliderPerm = document.getElementById("slider-perm");
const flowDisplay = document.getElementById("flow-display");
const permDisplay = document.getElementById("perm-display");
const valArea = document.getElementById("val-area");
const valTemp = document.getElementById("val-temp");
const valPower = document.getElementById("val-power");
const turbineBlades = document.getElementById("turbine-blades");
// 数据动态解算模型 (体现面积置换深度与热平衡)
function updateThermodynamics() {
// 换热面积计算 (随导流率微调)
const effectiveArea = (1.20 * state.permeability).toFixed(2);
valArea.innerText = `${effectiveArea} × 10⁶ m²`;
// 产出温度计算: 热传导效率与面积正比，与流速呈热平衡非线性关系
// T_prod = T_rock - (T_rock - T_inj) * exp(- (U * Area) / (m_dot * Cp))
const heatExchangeFactor = (state.permeability * 1.8) / (state.flowRate * 0.022);
const tempDiff = state.baseRockTemp - state.injTemp;
const prodTemp = state.baseRockTemp - tempDiff * Math.exp(-heatExchangeFactor);
valTemp.innerText = `${prodTemp.toFixed(1)} °C`;
// 热功率与发电净功率输出计算
// P_th = m_dot * Cp * Delta_T; ORC 转换效率按 ~14.5%
const deltaT = prodTemp - state.injTemp;
const thermalPowerMW = (state.flowRate * 4.184 * deltaT) / 1000; // MW_th
const electricPowerMW = thermalPowerMW * 0.148; // MW_e
valPower.innerText = `${electricPowerMW.toFixed(1)} MWe`;
// 汽轮机转速与流速及热能联动动画速率
const spinDuration = Math.max(0.8, 3.2 - (electricPowerMW / 15) * 1.8);
if (turbineBlades) {
turbineBlades.style.animationDuration = `${spinDuration.toFixed(2)}s`;
}
}
// 交互控件绑定
sliderFlow.addEventListener("input", (e) => {
state.flowRate = parseFloat(e.target.value);
flowDisplay.innerText = `${state.flowRate} L/s`;
updateThermodynamics();
});
sliderPerm.addEventListener("input", (e) => {
const val = parseFloat(e.target.value);
state.permeability = val / 100;
permDisplay.innerText = `${val}%`;
updateThermodynamics();
});
// 动态 SVG 渗流微粒子生成器 (全自动持续运转)
const svgNS = "http://www.w3.org/2000/svg";
const particleGroup = document.getElementById("particle-group");
const particles = [];
const MAX_PARTICLES = 36;
// 裂隙流道路径坐标定义 (从注入井右分支流向左生产分支)
const fractureTracks = [
{ startX: 880, startY: 565, midX: 580, midY: 545, endX: 280, endY: 565 },
{ startX: 840, startY: 625, midX: 590, midY: 615, endX: 300, endY: 625 },
{ startX: 920, startY: 625, midX: 610, midY: 605, endX: 220, endY: 625 },
{ startX: 860, startY: 685, midX: 580, midY: 670, endX: 320, endY: 685 },
{ startX: 940, startY: 685, midX: 620, midY: 660, endX: 240, endY: 685 }
];
function createParticle() {
const track = fractureTracks[Math.floor(Math.random() * fractureTracks.length)];
const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("r", (Math.random() * 1.8 + 1.2).toFixed(1));
circle.setAttribute("opacity", "0");
particleGroup.appendChild(circle);
return {
el: circle,
track: track,
progress: Math.random(), // 随机分布
speed: (Math.random() * 0.004 + 0.003) * (state.flowRate / 70)
};
}
function initSimulation() {
updateThermodynamics();
// 初始化粒子
for (let i = 0; i < MAX_PARTICLES; i++) {
particles.push(createParticle());
}
// 启动粒子物理动画循环
function animateLoop() {
particles.forEach(p => {
p.progress += p.speed * (state.flowRate / 72);
if (p.progress >= 1) {
p.progress = 0;
p.track = fractureTracks[Math.floor(Math.random() * fractureTracks.length)];
}
// 二次贝塞尔曲线坐标插值: B(t) = (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2
const t = p.progress;
const u = 1 - t;
const x = u * u * p.track.startX + 2 * u * t * p.track.midX + t * t * p.track.endX;
const y = u * u * p.track.startY + 2 * u * t * p.track.midY + t * t * p.track.endY;
p.el.setAttribute("cx", x.toFixed(1));
p.el.setAttribute("cy", y.toFixed(1));
// 粒子渐变颜色演化: 冷蓝(0.0) -> 琥珀金(0.5) -> 炽热绯红(1.0)
let color = "#00f2fe";
if (t > 0.65) {
color = "#ff3366";
} else if (t > 0.3) {
color = "#ffaa00";
}
p.el.setAttribute("fill", color);
// 边缘淡入淡出透明度
let alpha = 0.8;
if (t < 0.15) alpha = t / 0.15 * 0.8;
else if (t > 0.85) alpha = (1 - t) / 0.15 * 0.8;
p.el.setAttribute("opacity", alpha.toFixed(2));
});
requestAnimationFrame(animateLoop);
}
requestAnimationFrame(animateLoop);
}
</script>
</body>
</html>
积分规则：每轮对话扣10分
等待动画代码生成...