双级管控的钻井液振动筛智能化止流稳流系统研发 - 原理动画演示

<!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>
        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

        :root {
            --bg-color: #06070a;
            --grid-color: rgba(26, 30, 41, 0.8);
            --text-muted: #8892b0;
            --text-bright: #e2e8f0;
            --power-active: #00f0ff;
            --power-glow: rgba(0, 240, 255, 0.4);
            --spring-energy: #ffaa00;
            --spring-glow: rgba(255, 170, 0, 0.6);
            --fail-alert: #ff3333;
            --fail-glow: rgba(255, 51, 51, 0.4);
            --metal-light: #475569;
            --metal-dark: #1e293b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-bright);
            font-family: 'Share Tech Mono', 'Courier New', monospace;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            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;
        }

        /* 绝对定位的小字号说明文字 - 严格遵守边角布局约束 */
        .overlay-text {
            position: absolute;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-muted);
            pointer-events: none;
            z-index: 10;
            max-width: 250px;
        }
        
        .top-left { top: 24px; left: 24px; }
        .top-right { top: 24px; right: 24px; text-align: right; }
        .bottom-left { bottom: 24px; left: 24px; }
        .bottom-right { bottom: 24px; right: 24px; text-align: right; }

        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border: 1px solid var(--power-active);
            color: var(--power-active);
            border-radius: 2px;
            margin-bottom: 8px;
            font-weight: bold;
            letter-spacing: 1px;
            transition: all 0.2s;
        }

        .highlight-text {
            color: var(--spring-energy);
        }

        /* 核心 SVG 容器 */
        #svg-container {
            width: 100%;
            height: 100%;
            max-width: 1400px;
            max-height: 900px;
            display: block;
        }

        /* --- 动画状态类定义 --- */
        
        /* 1. 蓄能状态 (正常通电) */
        .sys-powered .power-line {
            stroke: var(--power-active);
            stroke-dasharray: 8;
            animation: flow 1s linear infinite;
            filter: drop-shadow(0 0 6px var(--power-glow));
        }
        
        .sys-powered .indicator {
            fill: var(--power-active);
            filter: drop-shadow(0 0 8px var(--power-glow));
        }

        .sys-powered .motor-coil {
            stroke: var(--power-active);
            animation: spin-pulse 2s linear infinite;
        }

        /* 执行器缓慢动作 (压缩弹簧) */
        .sys-powered .actuator-spring {
            transform: scaleY(0.35);
            transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1);
            stroke: var(--metal-light);
            filter: none;
        }

        .sys-powered .valve-disc {
            transform: rotate(0deg); /* 阀门关闭/调节位 */
            transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .sys-powered .lift-platform {
            transform: rotate(-15deg); /* 工作倾角 */
            transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .sys-powered .lift-piston {
            transform: translateY(-40px);
            transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 2. 失效保护状态 (断电复位) */
        .sys-failed .power-line {
            stroke: var(--metal-dark);
            stroke-dasharray: none;
            animation: none;
            filter: none;
        }

        .sys-failed .indicator {
            fill: var(--fail-alert);
            filter: drop-shadow(0 0 10px var(--fail-glow));
            animation: blink 0.5s infinite;
        }
        
        .sys-failed .motor-coil {
            stroke: var(--metal-dark);
            animation: none;
        }

        /* 弹簧瞬间释放 (极速复位 <=1s) */
        .sys-failed .actuator-spring {
            transform: scaleY(1);
            /* 强调：失电后机械势能瞬间爆发，无极短时间完成复位 */
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            stroke: var(--spring-energy);
            filter: drop-shadow(0 0 8px var(--spring-glow));
        }

        .sys-failed .valve-disc {
            transform: rotate(90deg); /* 阀门全开，排液 */
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .sys-failed .lift-platform {
            transform: rotate(10deg); /* 排浆倾角 */
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .sys-failed .lift-piston {
            transform: translateY(0);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* 瞬时环境特效 */
        .flash-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--fail-alert);
            opacity: 0;
            pointer-events: none;
            z-index: 5;
        }
        .flash-active {
            animation: alarm-flash 0.5s ease-out;
        }

        /* Keyframes */
        @keyframes flow {
            from { stroke-dashoffset: 16; }
            to { stroke-dashoffset: 0; }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        @keyframes spin-pulse {
            0% { transform: rotate(0deg) scale(0.9); }
            50% { transform: rotate(180deg) scale(1); }
            100% { transform: rotate(360deg) scale(0.9); }
        }
        @keyframes alarm-flash {
            0% { opacity: 0; }
            20% { opacity: 0.15; }
            100% { opacity: 0; }
        }
        
        /* 原理连接线 (指示弹簧力) */
        .force-line {
            stroke: var(--spring-energy);
            stroke-width: 1.5;
            stroke-dasharray: 4;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .sys-failed .force-line {
            opacity: 0.8;
            animation: force-flow 0.5s linear infinite;
        }
        @keyframes force-flow {
            from { stroke-dashoffset: 8; }
            to { stroke-dashoffset: 0; }
        }
    </style>
</head>
<body id="system-body" class="sys-powered">

    <!-- 环境报警闪烁层 -->
    <div id="flash-layer" class="flash-overlay"></div>

    <!-- 严格贴边的说明文字 -->
    <div class="overlay-text top-left">
        <div id="ui-status" class="status-badge">PWR: ACTIVE</div>
        <div>SYS_MODE: NORMAL OP</div>
        <div>ENERGY: ELECTRICITY -> MECH</div>
    </div>
    
    <div class="overlay-text top-right">
        <div>FAILS-SAFE SYSTEM DEMO</div>
        <div style="color:var(--metal-light)">V 2.0.4 // AUTO-RESET</div>
    </div>

    <div class="overlay-text bottom-left">
        <div style="color:var(--text-bright); margin-bottom:4px;">[ 核心参数 ]</div>
        <div>- 失电复位时间: <span class="highlight-text">≤1.0s</span></div>
        <div>- 蓄能方式: 预压弹簧势能</div>
        <div>- 优先级: 绝对安全冗余</div>
    </div>

    <div class="overlay-text bottom-right">
        <div style="color:var(--text-bright); margin-bottom:4px;">[ TRIZ 理想最终解 ]</div>
        <div>消除问题发生时的复杂外部干预。</div>
        <div>利用<span class="highlight-text">系统内置物理势能</span>作为资源，</div>
        <div>在失能状态下<b>自动</b>达成安全稳态。</div>
    </div>

    <!-- 核心 SVG 动画区 -->
    <svg id="svg-container" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid meet">
        <defs>
            <filter id="glow-cyan" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="4" result="blur" />
                <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
            
            <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
            </pattern>

            <linearGradient id="metal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#334155" />
                <stop offset="50%" stop-color="#1e293b" />
                <stop offset="100%" stop-color="#0f172a" />
            </linearGradient>

            <!-- 弹簧基础图形，通过 CSS transform 压缩 -->
            <g id="spring-path">
                <path d="M 0,0 
                         L 15,10 L -15,20 
                         L 15,30 L -15,40 
                         L 15,50 L -15,60 
                         L 15,70 L -15,80 
                         L 15,90 L -15,100
                         L 0,110 L 0,120" 
                      fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
        </defs>

        <!-- 背景网格修饰 -->
        <rect width="100%" height="100%" fill="url(#grid-pattern)" />
        <line x1="100" y1="400" x2="1100" y2="400" stroke="rgba(255,255,255,0.05)" stroke-width="1" stroke-dasharray="10 5" />
        <line x1="600" y1="100" x2="600" y2="700" stroke="rgba(255,255,255,0.05)" stroke-width="1" stroke-dasharray="10 5" />

        <!-- ============================================== -->
        <!-- 1. 中央控制与电源模块 -->
        <!-- ============================================== -->
        <g transform="translate(500, 80)">
            <rect x="0" y="0" width="200" height="100" fill="#0f172a" stroke="#475569" stroke-width="2" rx="4" />
            <text x="20" y="30" fill="#94a3b8" font-size="14">UPS / POWER CTRL</text>
            <circle cx="170" cy="25" r="6" class="indicator" />
            <line x1="20" y1="50" x2="180" y2="50" stroke="#334155" stroke-width="1" />
            
            <!-- 能量流出线路 -->
            <path d="M 50,100 L 50,160 L -150,160 L -150, 200" fill="none" stroke-width="4" class="power-line" />
            <path d="M 150,100 L 150,160 L 350,160 L 350, 200" fill="none" stroke-width="4" class="power-line" />
        </g>

        <!-- ============================================== -->
        <!-- 2. 左侧：弹簧复位电动蝶阀 (排液通道) -->
        <!-- ============================================== -->
        <g transform="translate(350, 450)">
            <!-- 管道基座 -->
            <rect x="-100" y="-40" width="200" height="80" fill="url(#metal-grad)" stroke="#1e293b" />
            <rect x="-110" y="-50" width="10" height="100" fill="#334155" />
            <rect x="100" y="-50" width="10" height="100" fill="#334155" />
            <text x="-90" y="-60" fill="#64748b" font-size="12">DRAINAGE PIPE</text>
            
            <!-- 内部流体通道背景 -->
            <rect x="-100" y="-30" width="200" height="60" fill="#020617" />

            <!-- 蝶阀阀瓣 (Pivot point at 0,0) -->
            <line x1="0" y1="-30" x2="0" y2="30" stroke="#94a3b8" stroke-width="8" stroke-linecap="round" class="valve-disc" />
            <circle cx="0" cy="0" r="8" fill="#475569" />

            <!-- 上方执行器组件 -->
            <g transform="translate(0, -220)">
                <!-- 电机线圈 (通电旋转) -->
                <circle cx="0" cy="20" r="30" fill="none" stroke-width="3" stroke-dasharray="10" class="motor-coil" />
                <rect x="-40" y="-10" width="80" height="40" fill="rgba(15,23,42,0.8)" stroke="#475569" rx="2" />
                <text x="-25" y="15" fill="#64748b" font-size="10">ACTUATOR</text>

                <!-- 蓄能弹簧外壳与弹簧本体 -->
                <rect x="-25" y="40" width="50" height="130" fill="rgba(15,23,42,0.5)" stroke="#334155" stroke-dasharray="2" />
                
                <!-- 弹簧图形：固定顶部，底部根据状态缩放 -->
                <g transform="translate(0, 45)">
                    <use href="#spring-path" class="actuator-spring" style="transform-origin: top center;" />
                </g>

                <!-- 连杆 -->
                <line x1="0" y1="170" x2="0" y2="190" stroke="#64748b" stroke-width="6" />
                
                <!-- 弹簧势能作用力指示 -->
                <path d="M 30,100 L 30,160 L 15,160" fill="none" class="force-line" />
            </g>
            
            <!-- 状态标签 -->
            <text x="30" y="30" fill="#94a3b8" font-size="10" class="valve-disc-label">VALVE</text>
        </g>

        <!-- ============================================== -->
        <!-- 3. 右侧：机械蓄能保护筛面抬升机构 -->
        <!-- ============================================== -->
        <g transform="translate(850, 450)">
            <!-- 底部支架 -->
            <path d="M -50,150 L 50,150 L 20,100 L -20,100 Z" fill="url(#metal-grad)" stroke="#1e293b" />
            
            <!-- 气缸/电动推杆外筒 -->
            <rect x="-15" y="-100" width="30" height="200" fill="#0f172a" stroke="#475569" stroke-width="2" />
            
            <!-- 蓄能弹簧锁止机构 -->
            <g transform="translate(0, -95)">
                <use href="#spring-path" class="actuator-spring" style="transform-origin: top center;" />
            </g>
            
            <!-- 活塞与推杆 -->
            <g class="lift-piston">
                <rect x="-8" y="-120" width="16" height="150" fill="#94a3b8" />
                <circle cx="0" cy="-120" r="6" fill="#cbd5e1" />
            </g>

            <!-- 动力连接点 -->
            <circle cx="0" cy="-250" r="15" fill="none" stroke="#334155" stroke-width="2" stroke-dasharray="4" />

            <!-- 筛面平台 (绕左侧铰链旋转) -->
            <g transform="translate(-150, -100)">
                <!-- 铰链 -->
                <circle cx="0" cy="0" r="10" fill="#475569" stroke="#94a3b8" stroke-width="2" />
                <path d="M -20,20 L 20,20 L 0,0 Z" fill="#334155" />
                
                <!-- 平台主体 -->
                <g class="lift-platform" style="transform-origin: 0 0;">
                    <rect x="0" y="-8" width="300" height="16" fill="url(#metal-grad)" stroke="#64748b" rx="4" />
                    <!-- 筛网纹理 -->
                    <line x1="20" y1="-8" x2="20" y2="8" stroke="#0f172a" stroke-width="2" />
                    <line x1="60" y1="-8" x2="60" y2="8" stroke="#0f172a" stroke-width="2" />
                    <line x1="100" y1="-8" x2="100" y2="8" stroke="#0f172a" stroke-width="2" />
                    <line x1="140" y1="-8" x2="140" y2="8" stroke="#0f172a" stroke-width="2" />
                    <line x1="180" y1="-8" x2="180" y2="8" stroke="#0f172a" stroke-width="2" />
                    <line x1="220" y1="-8" x2="220" y2="8" stroke="#0f172a" stroke-width="2" />
                    <line x1="260" y1="-8" x2="260" y2="8" stroke="#0f172a" stroke-width="2" />
                    
                    <!-- 顶出支撑点连接 (抽象示意) -->
                    <circle cx="150" cy="8" r="6" fill="#94a3b8" />
                    
                    <text x="210" y="-15" fill="#64748b" font-size="12">SCREEN PLATFORM</text>
                </g>
            </g>
            
            <!-- 弹簧力指示线 -->
            <path d="M 25,-50 L 40,-50 L 40,-120 L 10,-120" fill="none" class="force-line" />
            <text x="50" y="-80" fill="var(--spring-energy)" font-size="10" class="force-line">SPRING FORCE</text>
        </g>
        
    </svg>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const body = document.getElementById('system-body');
            const statusBadge = document.getElementById('ui-status');
            const flashLayer = document.getElementById('flash-layer');
            
            // 状态机常量
            const CYCLE_DURATION = 9000;
            const POWER_ON_TIME = 6000; 
            
            function setPoweredState() {
                body.className = 'sys-powered';
                statusBadge.textContent = 'PWR: ACTIVE';
                statusBadge.style.color = 'var(--power-active)';
                statusBadge.style.borderColor = 'var(--power-active)';
                flashLayer.classList.remove('flash-active');
            }

            function setFailedState() {
                body.className = 'sys-failed';
                statusBadge.textContent = 'PWR: FAILED [FAIL-SAFE ENGAGED]';
                statusBadge.style.color = 'var(--fail-alert)';
                statusBadge.style.borderColor = 'var(--fail-alert)';
                
                // 触发屏幕红色闪烁警报特效
                flashLayer.classList.remove('flash-active');
                void flashLayer.offsetWidth; // trigger reflow
                flashLayer.classList.add('flash-active');
            }

            function runSimulationCycle() {
                // 1. 系统正常通电蓄能运行
                setPoweredState();
                
                // 2. 模拟突发断电失气，触发纯机械极速复位 (<1s)
                setTimeout(() => {
                    setFailedState();
                }, POWER_ON_TIME);
            }

            // 初始化立即执行，并设置循环以保证重开即播/持续演示
            runSimulationCycle();
            setInterval(runSimulationCycle, CYCLE_DURATION);
        });
    </script>
</body>
</html>