独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>超深层连续油管液动冲击钻井与地面反演系统原理演示</title>
<style>
:root {
--bg-dark: #070b12;
--panel-bg: rgba(13, 21, 37, 0.78);
--panel-border: rgba(0, 229, 255, 0.25);
--neon-cyan: #00f0ff;
--neon-blue: #0077ff;
--neon-orange: #ff6b00;
--neon-amber: #ffaa00;
--neon-green: #00ff88;
--text-main: #e2e8f0;
--text-muted: #88a0bf;
--strata-top: #1a2634;
--strata-deep: #120e18;
--font-mono: "Fira Code", "JetBrains Mono", Consolas, monospace;
--font-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-sans);
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
/* 顶部微型状态条（极简，不遮挡主体） */
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(7, 11, 18, 0.95) 0%, rgba(7, 11, 18, 0) 100%);
z-index: 30;
pointer-events: none;
}
.system-title {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.8px;
color: #ffffff;
display: flex;
align-items: center;
gap: 8px;
}
.badge-ifr {
font-size: 10px;
font-family: var(--font-mono);
background: rgba(0, 240, 255, 0.12);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
padding: 2px 6px;
border-radius: 3px;
letter-spacing: 0.5px;
}
.system-tag {
font-size: 11px;
font-family: var(--font-mono);
color: var(--neon-green);
display: flex;
align-items: center;
gap: 6px;
}
.tag-pulse {
width: 7px;
height: 7px;
background: var(--neon-green);
border-radius: 50%;
box-shadow: 0 0 8px var(--neon-green);
animation: pulse-dot 1.5s infinite ease-in-out;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.7); }
}
/* 中央核心动画主视区（占最大比例空间） */
#main-stage {
flex: 1;
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
svg#drill-sim {
width: 100%;
height: 100%;
max-width: 1600px;
max-height: 960px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
}
/* 角落与边缘半透明说明悬浮卡（精炼紧凑，字号12-13px） */
.hud-card {
position: absolute;
background: var(--panel-bg);
border: 1px solid var(--panel-border);
backdrop-filter: blur(8px);
border-radius: 6px;
padding: 10px 14px;
z-index: 20;
pointer-events: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* 左上：地面反演感知监视窗 */
#surface-hud {
top: 54px;
left: 20px;
width: 250px;
}
/* 右上：系统核心理想机制解构 */
#concept-hud {
top: 54px;
right: 20px;
width: 270px;
}
/* 井底特写聚焦指示框（右下） */
#bha-hud {
bottom: 74px;
right: 20px;
width: 280px;
}
.hud-title {
font-size: 12px;
font-weight: 600;
color: var(--neon-cyan);
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 4px;
}
.hud-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.45;
margin-bottom: 6px;
}
.telemetry-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
margin: 3px 0;
}
.telemetry-val {
color: #ffffff;
font-weight: 500;
}
/* 示波器曲线画布 */
canvas#wave-canvas {
width: 100%;
height: 48px;
background: rgba(0, 10, 22, 0.6);
border-radius: 3px;
border: 1px solid rgba(0, 240, 255, 0.15);
margin-top: 5px;
display: block;
}
/* 底部极简控制与参数微调栏 */
#control-bar {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
height: 46px;
background: rgba(10, 17, 30, 0.88);
border: 1px solid rgba(0, 240, 255, 0.3);
backdrop-filter: blur(10px);
border-radius: 23px;
padding: 0 18px;
display: flex;
align-items: center;
gap: 18px;
z-index: 30;
box-shadow: 0 4px 20px rgba(0, 240, 255, 0.15);
}
.ctrl-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--text-muted);
}
.ctrl-item label {
white-space: nowrap;
color: var(--neon-cyan);
font-weight: 500;
}
input[type="range"] {
-webkit-appearance: none;
width: 110px;
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--neon-cyan);
box-shadow: 0 0 8px var(--neon-cyan);
cursor: pointer;
}
.btn-toggle {
background: rgba(0, 240, 255, 0.12);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
font-size: 11px;
padding: 4px 12px;
border-radius: 12px;
cursor: pointer;
font-family: var(--font-mono);
transition: all 0.2s ease;
}
.btn-toggle:hover {
background: var(--neon-cyan);
color: var(--bg-dark);
box-shadow: 0 0 10px var(--neon-cyan);
}
.btn-toggle.active {
background: var(--neon-orange);
border-color: var(--neon-orange);
color: #fff;
}
/* 关键动画定义 */
@keyframes fluidFlowDown {
0% { stroke-dashoffset: 60; }
100% { stroke-dashoffset: 0; }
}
@keyframes fluidFlowUp {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 60; }
}
@keyframes hammerImpact {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(5px); }
60% { transform: translateY(-1px); }
}
@keyframes shockRing {
0% { r: 6; opacity: 1; stroke-width: 3.5; }
100% { r: 52; opacity: 0; stroke-width: 0.5; }
}
@keyframes rockCrush {
0% { opacity: 0.9; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15) rotate(4deg); }
100% { opacity: 0; transform: scale(0.6) translate(-10px, -20px); }
}
@keyframes reelSpin {
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- 顶部轻量标头 -->
<header>
<div class="system-title">
<span>超深层无接头连续油管 · 液动冲击破岩系统</span>
<span class="badge-ifr">最终理想解 (IFR) 模型</span>
</div>
<div class="system-tag">
<div class="tag-pulse"></div>
<span>井下全机械无源 · 1500 BPM 脉冲自激破岩中</span>
</div>
</header>
<!-- 左上：地面反演与特征提取监视 -->
<aside class="hud-card" id="surface-hud">
<div class="hud-title">
<span>地面高频反演监视台</span>
<span style="color:var(--neon-green)">ONLINE</span>
</div>
<div class="hud-desc">利用井口压力波动/声振频谱反演井底岩性与轨迹，替代易损井下高温电子仪器。</div>
<div class="telemetry-row">
<span>水力脉冲瞬态峰值:</span>
<span class="telemetry-val" id="val-pressure">34.8 MPa</span>
</div>
<div class="telemetry-row">
<span>冲击声发射主频:</span>
<span class="telemetry-val" id="val-freq">1,480 Hz</span>
</div>
<div class="telemetry-row">
<span>反演定位精度:</span>
<span class="telemetry-val" style="color:var(--neon-green);">±2.3 m</span>
</div>
<canvas id="wave-canvas" width="220" height="48"></canvas>
</aside>
<!-- 右上：TRIZ 理想解机制解构 -->
<aside class="hud-card" id="concept-hud">
<div class="hud-title">
<span>理想化破矛盾机理</span>
<span style="color:var(--neon-cyan)">IFR</span>
</div>
<div class="telemetry-row">
<span>1. 消除传扭矛盾:</span>
<span class="telemetry-val" style="color:var(--neon-cyan)">管体纯静止·不转动</span>
</div>
<div class="hud-desc">无接头连续油管仅承重与输流，自重扭矩衰减降为0。</div>
<div class="telemetry-row">
<span>2. 就地能量转换:</span>
<span class="telemetry-val" style="color:var(--neon-orange)">流体脉冲→高频锤击</span>
</div>
<div class="hud-desc">1200~1800次/min 轴向脆性碎岩，破岩效率提升400%。</div>
<div class="telemetry-row">
<span>3. 井下全无源耐温:</span>
<span class="telemetry-val" style="color:var(--neon-green)">>350℃ 极地层全适应</span>
</div>
</aside>
<!-- 右下：井底总成特写说明 -->
<aside class="hud-card" id="bha-hud">
<div class="hud-title">
<span>井下动力总成 (BHA) 局部特写</span>
<span style="color:var(--neon-amber)">无电子·纯水力</span>
</div>
<div class="telemetry-row">
<span>单次冲击功:</span>
<span class="telemetry-val" id="val-energy">420 Joules</span>
</div>
<div class="telemetry-row">
<span>造斜率 (固定弯接头):</span>
<span class="telemetry-val">±3.0° / 30m</span>
</div>
<div class="telemetry-row">
<span>岩屑清除返速:</span>
<span class="telemetry-val" style="color:var(--neon-cyan)">1.85 m/s (环空上返)</span>
</div>
</aside>
<!-- 中央核心 SVG 可视化舞台 -->
<main id="main-stage">
<svg id="drill-sim" viewBox="0 0 1400 840" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 背景渐变与地层 -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#091322" />
<stop offset="100%" stop-color="#0e1b2f" />
</linearGradient>
<linearGradient id="groundGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1b2535" />
<stop offset="25%" stop-color="#141a27" />
<stop offset="65%" stop-color="#1b1220" />
<stop offset="100%" stop-color="#2a0d16" />
</linearGradient>
<!-- 高温地层红外光晕 -->
<radialGradient id="heatGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff3b00" stop-opacity="0.3" />
<stop offset="60%" stop-color="#ff0055" stop-opacity="0.08" />
<stop offset="100%" stop-color="#ff0000" stop-opacity="0" />
</radialGradient>
<!-- 冲击能量波扩散渐变 -->
<radialGradient id="shockGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
<stop offset="30%" stop-color="#00f0ff" stop-opacity="0.6" />
<stop offset="70%" stop-color="#0055ff" stop-opacity="0.2" />
<stop offset="100%" stop-color="#0022ff" stop-opacity="0" />
</radialGradient>
<!-- 高压水流脉冲滤镜 -->
<filter id="glow-cyan" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glow-orange" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="4.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- 连续油管材质 -->
<linearGradient id="pipeGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#4a607a" />
<stop offset="30%" stop-color="#8ba5c4" />
<stop offset="70%" stop-color="#567292" />
<stop offset="100%" stop-color="#2c3c4f" />
</linearGradient>
<!-- 水力冲击锤金属机身 -->
<linearGradient id="hammerGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1f2937" />
<stop offset="35%" stop-color="#4b5e78" />
<stop offset="70%" stop-color="#2a374a" />
<stop offset="100%" stop-color="#111827" />
</linearGradient>
<!-- 钎头金刚石齿渐变 -->
<linearGradient id="bitGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#00f0ff" />
<stop offset="50%" stop-color="#0077ff" />
<stop offset="100%" stop-color="#002266" />
</linearGradient>
<!-- 装饰图案：网格 -->
<pattern id="techGrid" width="40" height="40" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="40" y2="0" stroke="rgba(0, 240, 255, 0.04)" stroke-width="1" />
<line x1="0" y1="0" x2="0" y2="40" stroke="rgba(0, 240, 255, 0.04)" stroke-width="1" />
</pattern>
</defs>
<!-- ================= 1. 地质背景与深层剖面 ================= -->
<!-- 天空背景 (地表以上) -->
<rect x="0" y="0" width="1400" height="150" fill="url(#skyGrad)" />
<!-- 地层 (地表以下) -->
<rect x="0" y="150" width="1400" height="690" fill="url(#groundGrad)" />
<!-- 背景科技网格 -->
<rect x="0" y="0" width="1400" height="840" fill="url(#techGrid)" />
<!-- 地层分界层线与标注 (微型字号，靠左) -->
<g opacity="0.35">
<line x1="0" y1="280" x2="680" y2="280" stroke="#486581" stroke-dasharray="4 4" stroke-width="1" />
<text x="20" y="275" fill="#829ab1" font-size="10" font-family="var(--font-mono)">层段 I : 沉积覆盖层 (0 ~ 3000m)</text>
<line x1="0" y1="460" x2="680" y2="460" stroke="#627d98" stroke-dasharray="4 4" stroke-width="1" />
<text x="20" y="455" fill="#9fb3c8" font-size="10" font-family="var(--font-mono)">层段 II : 致密过渡地层 (3000 ~ 6500m)</text>
<line x1="0" y1="640" x2="680" y2="640" stroke="#f03e3e" stroke-dasharray="4 4" stroke-width="1" />
<text x="20" y="635" fill="#ff8787" font-size="10" font-family="var(--font-mono)">层段 III : 8000m+ 结晶花岗岩干热岩靶区 (>280℃ / 超硬脆性)</text>
</g>
<!-- 深部高温干热岩热晕 -->
<circle cx="530" cy="740" r="160" fill="url(#heatGlow)" />
<circle cx="1120" cy="620" r="230" fill="url(#heatGlow)" opacity="0.8" />
<!-- 地表基准线 -->
<line x1="0" y1="150" x2="1400" y2="150" stroke="#00f0ff" stroke-width="1.5" opacity="0.5" />
<text x="310" y="142" fill="#00f0ff" font-size="11" font-family="var(--font-mono)">地表基准标高 ±0.00m</text>
<!-- ================= 2. 地面系统设备 ================= -->
<!-- 作业滚筒支架与卷盘 (Reel) -->
<g transform="translate(90, 48)">
<!-- 滚筒底座 -->
<polygon points="10,95 70,95 60,65 20,65" fill="#1e293b" stroke="#334155" stroke-width="1.5" />
<!-- 旋转卷盘轮辐 -->
<circle cx="40" cy="50" r="42" fill="none" stroke="#38bdf8" stroke-width="3" opacity="0.4" />
<circle cx="40" cy="50" r="40" fill="#0f172a" stroke="#0ea5e9" stroke-width="2" />
<!-- 盘绕的连续油管纹理 (自转动画) -->
<g id="reel-spokes" style="transform-origin: 40px 50px; animation: reelSpin 12s linear infinite;">
<circle cx="40" cy="50" r="32" fill="none" stroke="#64748b" stroke-width="12" stroke-dasharray="3 2" />
<line x1="40" y1="10" x2="40" y2="90" stroke="#0284c7" stroke-width="1.5" />
<line x1="0" y1="50" x2="80" y2="50" stroke="#0284c7" stroke-width="1.5" />
<circle cx="40" cy="50" r="10" fill="#0369a1" />
</g>
<text x="40" y="107" fill="#94a3b8" font-size="10" text-anchor="middle" font-family="var(--font-sans)">连续油管滚筒</text>
</g>
<!-- 导向鹅颈架 (Gooseneck) -->
<path d="M 130 65 Q 185 20 220 75" fill="none" stroke="#475569" stroke-width="5" />
<path d="M 130 65 Q 185 20 220 75" fill="none" stroke="#38bdf8" stroke-width="1.5" stroke-dasharray="4 2" />
<!-- 注入头 (Injector Head) & 防喷器组 -->
<g transform="translate(205, 75)">
<rect x="0" y="0" width="30" height="42" rx="3" fill="#1e293b" stroke="#0ea5e9" stroke-width="1.5" />
<!-- 驱动链条示意 -->
<line x1="7" y1="6" x2="7" y2="36" stroke="#38bdf8" stroke-width="2" stroke-dasharray="2 2" />
<line x1="23" y1="6" x2="23" y2="36" stroke="#38bdf8" stroke-width="2" stroke-dasharray="2 2" />
<rect x="5" y="44" width="20" height="28" fill="#334155" stroke="#64748b" />
<text x="-5" y="30" fill="#94a3b8" font-size="9" text-anchor="end">注入头</text>
</g>
<!-- 地面高压泥浆泵输入 -->
<path d="M 285 110 L 235 110" fill="none" stroke="var(--neon-cyan)" stroke-width="3" />
<polygon points="238,107 230,110 238,113" fill="var(--neon-cyan)" />
<text x="290" y="113" fill="var(--neon-cyan)" font-size="10" font-family="var(--font-mono)">高压流体注入 45MPa</text>
<!-- 地面反演声振/压力回波传感器 -->
<circle cx="210" cy="148" r="4" fill="var(--neon-green)" filter="url(#glow-cyan)" />
<path d="M 210 148 L 190 170 L 140 170" fill="none" stroke="var(--neon-green)" stroke-width="1" stroke-dasharray="2 2" />
<text x="135" y="173" fill="var(--neon-green)" font-size="10" text-anchor="end" font-family="var(--font-mono)">井口反演传感器组</text>
<!-- ================= 3. 全局井筒轨迹 (左侧主深孔) ================= -->
<!-- 井眼外壁 (Wellbore Wall) -->
<path d="M 210 150 L 210 500 Q 210 650 330 730 L 460 770" fill="none" stroke="#2d3748" stroke-width="36" stroke-linecap="round" />
<path d="M 210 150 L 210 500 Q 210 650 330 730 L 460 770" fill="none" stroke="#101726" stroke-width="32" stroke-linecap="round" />
<!-- 环空返出流与岩屑 (向地表上返) -->
<path d="M 450 760 L 325 722 Q 216 645 216 500 L 216 150" fill="none" stroke="rgba(0, 240, 255, 0.25)" stroke-width="26" stroke-dasharray="6 14" style="animation: fluidFlowUp 1.2s linear infinite;" />
<!-- 无接头连续油管 (管体静止不旋转) -->
<path id="coiled-tubing" d="M 220 120 L 220 500 Q 220 640 330 715 L 450 755" fill="none" stroke="url(#pipeGrad)" stroke-width="12" />
<!-- 油管内部高压脉冲流 (向下高速流动) -->
<path d="M 220 120 L 220 500 Q 220 640 330 715 L 450 755" fill="none" stroke="var(--neon-cyan)" stroke-width="4" stroke-dasharray="10 8" filter="url(#glow-cyan)" style="animation: fluidFlowDown 0.6s linear infinite;" />
<!-- 宏观井底动力冲击锤位置指示 -->
<g transform="translate(450, 755) rotate(18.5)">
<!-- 冲击锤外筒 -->
<rect x="0" y="-8" width="46" height="16" rx="2" fill="url(#hammerGrad)" stroke="#38bdf8" stroke-width="1.2" />
<!-- 冲击钎头 -->
<polygon points="46,-7 58,-4 58,4 46,7" fill="url(#bitGrad)" />
<!-- 高频微震动冲击波示意 (宏观) -->
<circle cx="62" cy="0" r="10" fill="none" stroke="var(--neon-cyan)" opacity="0.8" style="animation: shockRing 0.8s ease-out infinite;" />
<circle cx="62" cy="0" r="18" fill="none" stroke="var(--neon-orange)" opacity="0.6" style="animation: shockRing 0.8s ease-out infinite 0.4s;" />
</g>
<!-- 宏观井深标尺刻度 -->
<g opacity="0.5" transform="translate(170, 0)">
<line x1="0" y1="150" x2="0" y2="780" stroke="#4a5568" stroke-width="1" />
<line x1="-4" y1="200" x2="0" y2="200" stroke="#4a5568" />
<line x1="-8" y1="300" x2="0" y2="300" stroke="#4a5568" /><text x="-12" y="303" fill="#718096" font-size="9" text-anchor="end" font-family="var(--font-mono)">2000m</text>
<line x1="-4" y1="400" x2="0" y2="400" stroke="#4a5568" />
<line x1="-8" y1="500" x2="0" y2="500" stroke="#4a5568" /><text x="-12" y="503" fill="#718096" font-size="9" text-anchor="end" font-family="var(--font-mono)">5000m</text>
<line x1="-4" y1="600" x2="0" y2="600" stroke="#4a5568" />
<line x1="-8" y1="700" x2="0" y2="700" stroke="#4a5568" /><text x="-12" y="703" fill="#718096" font-size="9" text-anchor="end" font-family="var(--font-mono)">8500m</text>
</g>
<!-- 特写放大引导虚线框 (从宏观井底连接到右侧放大图) -->
<polygon points="430,710 520,710 520,795 430,795" fill="rgba(0, 240, 255, 0.05)" stroke="var(--neon-cyan)" stroke-width="1" stroke-dasharray="3 3" />
<path d="M 520 720 L 730 460" fill="none" stroke="rgba(0, 240, 255, 0.3)" stroke-width="1" stroke-dasharray="4 4" />
<path d="M 520 785 L 730 760" fill="none" stroke="rgba(0, 240, 255, 0.3)" stroke-width="1" stroke-dasharray="4 4" />
<!-- ================= 4. 右侧井底液动冲击破岩动力总成 (超高精放大特写) ================= -->
<g id="bha-detail-view" transform="translate(730, 220)">
<!-- 放大视窗外框 -->
<rect x="0" y="0" width="640" height="550" rx="8" fill="#080e18" stroke="rgba(0, 240, 255, 0.4)" stroke-width="1.5" />
<!-- 视窗背景科技栅格 -->
<rect x="0" y="0" width="640" height="550" rx="8" fill="url(#techGrid)" opacity="0.6" />
<!-- 视窗角标 -->
<text x="16" y="26" fill="var(--neon-cyan)" font-size="12" font-family="var(--font-mono)" font-weight="600">
[ 井底动力总成与就地破岩机理微观解剖 ]
</text>
<text x="620" y="26" fill="var(--neon-orange)" font-size="11" font-family="var(--font-mono)" text-anchor="end">
无旋转 · 纯水力脉冲驱动
</text>
<!-- 井壁与致密岩石基质剖面 (右侧) -->
<g transform="translate(0, 40)">
<!-- 岩层背景 -->
<rect x="30" y="20" width="580" height="460" fill="#110d18" rx="4" />
<!-- 岩石晶粒与微裂纹网格 -->
<path d="M 440 60 L 460 120 L 510 140 M 470 190 L 530 220 L 590 200 M 450 280 L 500 320 L 580 300 M 430 400 L 490 430 L 560 390" stroke="#3d2b45" stroke-width="1.5" fill="none" opacity="0.6" />
<!-- 环空流体返出通道 (上/下两翼) -->
<!-- 上环空 -->
<rect x="30" y="55" width="400" height="30" fill="rgba(0, 30, 60, 0.6)" />
<path d="M 420 70 L 40 70" stroke="rgba(0, 240, 255, 0.4)" stroke-width="4" stroke-dasharray="8 8" style="animation: fluidFlowDown 0.8s linear infinite;" />
<!-- 下环空 -->
<rect x="30" y="415" width="400" height="30" fill="rgba(0, 30, 60, 0.6)" />
<path d="M 420 430 L 40 430" stroke="rgba(0, 240, 255, 0.4)" stroke-width="4" stroke-dasharray="8 8" style="animation: fluidFlowDown 0.8s linear infinite;" />
<!-- 连续油管末端接入部 (左侧入口) -->
<rect x="30" y="160" width="70" height="180" fill="url(#pipeGrad)" stroke="#4a6984" stroke-width="2" />
<text x="65" y="255" fill="#ffffff" font-size="10" font-family="var(--font-mono)" transform="rotate(-90 65 255)" text-anchor="middle">连续油管(不承扭)</text>
<!-- 水力驱动流道 (管内向右高速脉冲) -->
<path d="M 30 250 L 100 250" stroke="var(--neon-cyan)" stroke-width="18" opacity="0.3" />
<path d="M 30 250 L 100 250" stroke="#ffffff" stroke-width="6" stroke-dasharray="12 6" filter="url(#glow-cyan)" style="animation: fluidFlowUp 0.3s linear infinite;" />
<!-- 动力冲击锤壳体 (BHA 机械主体) -->
<g transform="translate(100, 110)">
<!-- 外套筒 -->
<rect x="0" y="15" width="310" height="250" rx="6" fill="#172234" stroke="#2563eb" stroke-width="2" />
<!-- 结构分区说明 -->
<!-- 1. 射流脉冲阀组腔室 (Fluidic Oscillator) -->
<rect x="15" y="40" width="85" height="200" rx="3" fill="#0f172a" stroke="#0284c7" stroke-width="1.2" />
<text x="57" y="58" fill="#38bdf8" font-size="10" text-anchor="middle" font-weight="600">双稳态射流阀</text>
<!-- 阀芯脉冲流线切换动画 -->
<path d="M 25 140 Q 55 90 85 110" fill="none" stroke="var(--neon-cyan)" stroke-width="4" stroke-dasharray="6 4" style="animation: fluidFlowUp 0.4s linear infinite;" />
<path d="M 25 140 Q 55 190 85 170" fill="none" stroke="var(--neon-cyan)" stroke-width="4" stroke-dasharray="6 4" style="animation: fluidFlowDown 0.4s linear infinite;" />
<circle cx="55" cy="140" r="7" fill="var(--neon-orange)" filter="url(#glow-orange)" />
<!-- 2. 高频往复活塞冲击腔 (Percussion Piston) -->
<rect x="110" y="40" width="110" height="200" rx="3" fill="#0b1320" stroke="#0284c7" stroke-width="1.2" />
<text x="165" y="58" fill="#38bdf8" font-size="10" text-anchor="middle" font-weight="600">机械活塞冲击总成</text>
<!-- 往复运动的重型活塞 (带高频打击关键帧动画) -->
<g id="impact-piston" style="animation: hammerImpact 0.08s infinite ease-in-out;">
<!-- 活塞主体 -->
<rect x="125" y="75" width="80" height="130" rx="4" fill="url(#pipeGrad)" stroke="#93c5fd" stroke-width="1.5" />
<!-- 活塞密封环 -->
<line x1="135" y1="85" x2="135" y2="195" stroke="#1d4ed8" stroke-width="4" />
<line x1="185" y1="85" x2="185" y2="195" stroke="#1d4ed8" stroke-width="4" />
<!-- 冲击撞砧锤头 -->
<rect x="205" y="115" width="22" height="50" fill="#e2e8f0" stroke="#ffffff" stroke-width="1" />
</g>
<!-- 3. 无源定角弯接头 / 导向造斜节 (Bend Sub, 预置固定倾角) -->
<polygon points="230,40 300,50 300,230 230,240" fill="#1e293b" stroke="#3b82f6" stroke-width="1.5" />
<text x="265" y="145" fill="#93c5fd" font-size="9" text-anchor="middle" transform="rotate(8 265 145)">预置定角<br/>造斜结构</text>
<!-- 冲击受力传递杆 -->
<rect x="290" y="120" width="30" height="40" fill="#cbd5e1" stroke="#475569" />
</g>
<!-- 4. 冲击破岩钎头 (Impacting Drill Bit) -->
<g transform="translate(420, 200)" id="hammer-bit" style="animation: hammerImpact 0.08s infinite ease-in-out;">
<!-- 钎头基体 -->
<polygon points="0,15 25,0 45,10 45,70 25,80 0,65" fill="#1e293b" stroke="#00f0ff" stroke-width="1.5" />
<!-- 金刚石/硬质合金球齿 (直接硬碰硬打击岩石) -->
<circle cx="46" cy="18" r="5" fill="#ffdd00" stroke="#fff" stroke-width="1" filter="url(#glow-orange)" />
<circle cx="48" cy="40" r="6" fill="#ffdd00" stroke="#fff" stroke-width="1" filter="url(#glow-orange)" />
<circle cx="46" cy="62" r="5" fill="#ffdd00" stroke="#fff" stroke-width="1" filter="url(#glow-orange)" />
<!-- 水眼喷嘴 (喷射高压液清洗岩屑) -->
<polygon points="35,34 46,36 46,44 35,46" fill="#00f0ff" />
<path d="M 46 40 L 70 28 M 46 40 L 70 52" stroke="var(--neon-cyan)" stroke-width="2.5" stroke-dasharray="3 2" />
</g>
<!-- 5. 脆性断裂碎岩区与动态应力冲击波 (Fracture Zone) -->
<g transform="translate(470, 240)">
<!-- 动态扩散应力震波 (多重波前) -->
<circle cx="0" cy="0" r="10" fill="none" stroke="var(--neon-cyan)" opacity="0.9" style="animation: shockRing 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;" />
<circle cx="0" cy="0" r="15" fill="none" stroke="#ffff00" opacity="0.8" style="animation: shockRing 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 0.2s;" />
<circle cx="0" cy="0" r="25" fill="none" stroke="var(--neon-orange)" opacity="0.7" style="animation: shockRing 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 0.4s;" />
<!-- 岩石放射状脆性开裂微纹理 -->
<path d="M 2 0 L 35 -25 M 5 2 L 48 5 M 2 2 L 38 32 M 15 -10 L 55 -40 M 12 15 L 50 45" stroke="#ff3838" stroke-width="2" stroke-linecap="round" />
<!-- 飞溅崩落的岩屑颗粒 (随流体向上/下环空返出) -->
<g id="cuttings-particles">
<circle cx="15" cy="-22" r="3.5" fill="#e2e8f0" style="animation: rockCrush 0.7s infinite linear;" />
<polygon points="25,-35 30,-30 22,-28" fill="#94a3b8" style="animation: rockCrush 0.6s infinite linear 0.15s;" />
<circle cx="18" cy="24" r="3" fill="#cbd5e1" style="animation: rockCrush 0.65s infinite linear 0.3s;" />
<polygon points="28,32 35,38 27,42" fill="#64748b" style="animation: rockCrush 0.8s infinite linear 0.45s;" />
</g>
</g>
<!-- 环空岩屑向左上返流动画 (颗粒群) -->
<g fill="#94a3b8" opacity="0.8">
<circle cx="380" cy="68" r="2.5"><animate attributeName="cx" values="420;40" dur="2s" repeatCount="indefinite" /></circle>
<circle cx="310" cy="74" r="3"><animate attributeName="cx" values="420;40" dur="2.3s" repeatCount="indefinite" /></circle>
<circle cx="240" cy="65" r="2"><animate attributeName="cx" values="420;40" dur="1.8s" repeatCount="indefinite" /></circle>
<circle cx="360" cy="428" r="3"><animate attributeName="cx" values="420;40" dur="2.1s" repeatCount="indefinite" /></circle>
<circle cx="270" cy="432" r="2"><animate attributeName="cx" values="420;40" dur="1.9s" repeatCount="indefinite" /></circle>
</g>
<!-- 特写剖面文字标签 (极小字号 9-10px) -->
<g font-size="9" font-family="var(--font-mono)">
<!-- 阀组标注 -->
<line x1="140" y1="90" x2="115" y2="40" stroke="#00f0ff" stroke-width="0.8" />
<text x="110" y="34" fill="#00f0ff" text-anchor="end">水力自激振荡阀</text>
<!-- 活塞标注 -->
<line x1="260" y1="120" x2="260" y2="75" stroke="#38bdf8" stroke-width="0.8" />
<text x="260" y="70" fill="#38bdf8" text-anchor="middle">1500 BPM 高频活塞</text>
<!-- 碎岩机制标注 -->
<line x1="510" y1="210" x2="560" y2="150" stroke="#ffaa00" stroke-width="0.8" />
<text x="565" y="146" fill="#ffaa00">高能冲击脆性崩落区</text>
<!-- 返屑标注 -->
<line x1="330" y1="60" x2="330" y2="35" stroke="#67e8f9" stroke-width="0.8" />
<text x="330" y="30" fill="#67e8f9" text-anchor="middle">洗井液携岩屑环空上返 →</text>
</g>
</g>
</g>
</svg>
</main>
<!-- 底部微调与交互控制台 -->
<footer id="control-bar">
<div class="ctrl-item">
<label for="freq-slider">冲击频率 / 泵压:</label>
<input type="range" id="freq-slider" min="1000" max="2000" step="50" value="1500" />
<span id="slider-disp" style="font-family:var(--font-mono); color:#fff; width:65px;">1500 BPM</span>
</div>
<div style="width:1px; height:20px; background:rgba(255,255,255,0.15)"></div>
<div class="ctrl-item">
<button class="btn-toggle active" id="btn-pulse-mode">自激脉冲: 开启</button>
<button class="btn-toggle" id="btn-cam-focus">视角切换: 井底特写</button>
</div>
<div style="width:1px; height:20px; background:rgba(255,255,255,0.15)"></div>
<div class="ctrl-item" style="font-size:10px; color:var(--text-muted);">
<span>连续油管外径: <b>60.3mm</b></span>
<span style="margin-left:8px;">疲劳寿命提升: <b style="color:var(--neon-green)">+850%</b></span>
</div>
</footer>
<script>
// ================= 页面加载后自动运行与交互逻辑 =================
document.addEventListener("DOMContentLoaded", () => {
// 示波器画布渲染 (模拟地面采集到的瞬态水锤压力脉冲波形与高频振动谱)
const canvas = document.getElementById("wave-canvas");
const ctx = canvas.getContext("2d");
let phase = 0;
let animRunning = true;
let currentBPM = 1500;
// 实时示波器动画
function drawWaveform() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 网格标线
ctx.strokeStyle = "rgba(0, 240, 255, 0.08)";
ctx.lineWidth = 1;
ctx.beginPath();
for (let x = 0; x < canvas.width; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
}
for (let y = 0; y < canvas.height; y += 12) {
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
}
ctx.stroke();
// 脉冲波形 (合成水力脉冲与冲击尖峰)
ctx.strokeStyle = "#00f0ff";
ctx.lineWidth = 1.5;
ctx.beginPath();
const freqFactor = (currentBPM / 1500) * 0.08;
for (let x = 0; x < canvas.width; x++) {
// 主频正弦 + 高频冲击谐波 + 随机岩石响应毛刺
const baseSine = Math.sin(x * freqFactor + phase);
const spike = Math.pow(Math.abs(Math.sin((x * freqFactor + phase) * 0.5)), 6) * 12;
const noise = (Math.random() - 0.5) * 2;
const y = canvas.height / 2 + baseSine * 10 - spike + noise;
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
// 能量包络发光线 (地面提取的特征包络)
ctx.strokeStyle = "rgba(255, 170, 0, 0.6)";
ctx.lineWidth = 1;
ctx.beginPath();
for (let x = 0; x < canvas.width; x += 4) {
const envY = canvas.height / 2 - Math.abs(Math.sin(x * freqFactor + phase)) * 14;
if (x === 0) ctx.moveTo(x, envY);
else ctx.lineTo(x, envY);
}
ctx.stroke();
phase += 0.12 * (currentBPM / 1500);
if (animRunning) {
requestAnimationFrame(drawWaveform);
}
}
// 启动示波器
drawWaveform();
// DOM 元素与遥测数值联动
const freqSlider = document.getElementById("freq-slider");
const sliderDisp = document.getElementById("slider-disp");
const valPressure = document.getElementById("val-pressure");
const valFreq = document.getElementById("val-freq");
const valEnergy = document.getElementById("val-energy");
const pistonElem = document.getElementById("impact-piston");
const bitElem = document.getElementById("hammer-bit");
const btnPulse = document.getElementById("btn-pulse-mode");
const btnCam = document.getElementById("btn-cam-focus");
const svgRoot = document.getElementById("drill-sim");
// 滑块调节频率与能量响应
freqSlider.addEventListener("input", (e) => {
currentBPM = parseInt(e.target.value);
sliderDisp.innerText = `${currentBPM} BPM`;
// 计算对应的物理参数
const pressure = (28 + (currentBPM - 1000) * (14 / 1000)).toFixed(1);
const freqHz = Math.round(currentBPM * 0.98 + (Math.random() * 20 - 10));
const energy = Math.round(320 + (currentBPM - 1000) * (200 / 1000));
valPressure.innerText = `${pressure} MPa`;
valFreq.innerText = `${freqHz.toLocaleString()} Hz`;
valEnergy.innerText = `${energy} Joules`;
// 动态改变活塞振荡 CSS 速率
const dur = (120 / currentBPM).toFixed(3);
pistonElem.style.animationDuration = `${dur}s`;
bitElem.style.animationDuration = `${dur}s`;
});
// 脉冲模式切换
let pulseActive = true;
btnPulse.addEventListener("click", () => {
pulseActive = !pulseActive;
if (pulseActive) {
btnPulse.classList.add("active");
btnPulse.innerText = "自激脉冲: 开启";
pistonElem.style.animationPlayState = "running";
bitElem.style.animationPlayState = "running";
} else {
btnPulse.classList.remove("active");
btnPulse.innerText = "自激脉冲: 抑制中";
pistonElem.style.animationPlayState = "paused";
bitElem.style.animationPlayState = "paused";
}
});
// 镜头视角切换（全景 / 井底特写自适应 viewBox）
let zoomed = false;
btnCam.addEventListener("click", () => {
zoomed = !zoomed;
if (zoomed) {
btnCam.classList.add("active");
btnCam.innerText = "视角切换: 全局剖面";
// 聚焦至右侧放大 BHA 区域
svgRoot.setAttribute("viewBox", "700 200 700 600");
} else {
btnCam.classList.remove("active");
btnCam.innerText = "视角切换: 井底特写";
// 恢复全景
svgRoot.setAttribute("viewBox", "0 0 1400 840");
}
});
// 页面重新可见时自动同步播放（保证重开即播）
document.addEventListener("visibilitychange", () => {
if (!document.hidden && !animRunning) {
animRunning = true;
drawWaveform();
}
});
});
</script>
</body>
</html>
积分规则：每轮对话扣10分
等待动画代码生成...