gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
							<!DOCTYPE html>
<html lang="zh-CN" class="iframe-content">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农机实时监控 - 爱智农</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3114978_qe0b39no76.css">
    <link rel="stylesheet" href="../assets/css/global.css">
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7f9;
            color: #333;
            margin: 0;
            padding: 0;
            height: auto; overflow-y: auto; overflow-x: hidden;
            min-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding-top: 15px; /* 添加顶部填充以确保内容不被系统元素遮挡 */
        }
        
        .page-container {
            padding: 20px;
            position: relative;
            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
            padding-top: 40px; /* 增加顶部内边距，给按钮腾出空间 */
        }
        
        /* 防止重复菜单 */
        body > div:not(.page-container):not(.modal-container),
        iframe#sidebar, 
        div.system-menu,
        [id^="system-menu"],
        [class^="system-menu"],
        #admin-sidebar,
        .menu-popup,
        .user-avatar-circle {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            opacity: 0 !important;
            position: absolute !important;
            top: -9999px !important;
            left: -9999px !important;
            z-index: -9999 !important;
            pointer-events: none !important;
        }
        
        /* 防止右侧白圈和浮动元素 */
        .circle-btn,
        .floating-circle,
        .round-button,
        .scroll-top-btn,
        [class*="round"],
        [class*="circle"],
        .help-btn,
        .chat-btn,
        body > .btn,
        body > button,
        body > div:not(.page-container):not(.modal-container) {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        
        /* 页面标题和操作按钮容器 */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e0e0e0;
            padding-top: 10px;
            position: relative;
            z-index: 10;
        }
        
        /* 添加按钮的特定样式 */
        .button-container {
            position: relative;
            z-index: 20;
        }
        
        #refreshBtn, 
        #settingsBtn {
            position: relative;
            z-index: 5;
            height: 38px;
            visibility: visible !important;
            opacity: 1 !important;
            display: inline-flex !important;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .map-container {
            height: 480px;
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .monitor-card {
            height: 100%;
            transition: all 0.3s;
        }
        
        .monitor-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }
        
        .status-online {
            background-color: #10b981;
        }
        
        .status-offline {
            background-color: #ef4444;
        }
        
        .status-warning {
            background-color: #f59e0b;
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #e5e7eb;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #388E3C;
        }
        
        .btn-default {
            background-color: white;
            border: 1px solid #d1d5db;
            color: #374151;
        }
        
        .btn-default:hover {
            background-color: #f9fafb;
        }
        
        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .btn-icon {
            margin-right: 4px;
        }
        
        .map-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
        }
        
        .map-control {
            background-color: white;
            width: 36px;
            height: 36px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .map-control:hover {
            background-color: #f3f4f6;
        }
        
        .machine-info {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            padding: 16px;
            width: 300px;
            max-width: 90%;
            display: none;
        }
        
        .machine-info.show {
            display: block;
        }
        
        .device-marker {
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .device-marker:hover {
            transform: scale(1.1);
        }
        
        .gauge {
            position: relative;
            width: 100%;
            height: 120px;
        }
        
        .gauge-value {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
            font-weight: bold;
        }
        
        .timeline {
            position: relative;
            padding-left: 32px;
        }
        
        .timeline-item {
            position: relative;
            padding-bottom: 16px;
        }
        
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        
        .timeline-item::before {
            content: "";
            position: absolute;
            left: -24px;
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #4CAF50;
            z-index: 1;
        }
        
        .timeline-item::after {
            content: "";
            position: absolute;
            left: -19px;
            top: 18px;
            width: 2px;
            height: calc(100% - 18px);
            background-color: #e5e7eb;
        }
        
        .timeline-item:last-child::after {
            display: none;
        }
        
        .timeline-time {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 2px;
        }
        
        .gauge-svg {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="page-container responsive-container">
        <div class="flex justify-between items-center mb-6 page-header">
            <h1 class="text-2xl font-bold">农机实时监控</h1>
            
            <div class="flex gap-2 button-container">
                <button class="btn btn-default" id="refreshBtn">
                    <i class="iconfont icon-reload btn-icon"></i>
                    刷新数据
                </button>
                <button class="btn btn-primary" id="settingsBtn">
                    <i class="iconfont icon-setting btn-icon"></i>
                    监控设置
                </button>
            </div>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
            <div class="card p-4 text-center">
                <div class="text-gray-500 mb-1">在线设备</div>
                <div class="text-3xl font-bold text-green-600">8</div>
                <div class="text-sm text-gray-400 mt-1">总数：12</div>
            </div>
            
            <div class="card p-4 text-center">
                <div class="text-gray-500 mb-1">作业中</div>
                <div class="text-3xl font-bold text-blue-600">5</div>
                <div class="text-sm text-gray-400 mt-1">总数：8</div>
            </div>
            
            <div class="card p-4 text-center">
                <div class="text-gray-500 mb-1">告警设备</div>
                <div class="text-3xl font-bold text-yellow-600">2</div>
                <div class="text-sm text-gray-400 mt-1">未处理：1</div>
            </div>
            
            <div class="card p-4 text-center">
                <div class="text-gray-500 mb-1">今日作业面积</div>
                <div class="text-3xl font-bold text-purple-600">126 亩</div>
                <div class="text-sm text-gray-400 mt-1">计划：180 亩</div>
            </div>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2">
                <div class="card">
                    <div class="map-container">
                        <!-- 模拟地图，实际项目中应替换为地图组件 -->
                        <svg width="100%" height="100%" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice">
                            <defs>
                                <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
                                    <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#ccc" stroke-width="1"/>
                                </pattern>
                            </defs>
                            
                            <rect width="100%" height="100%" fill="#f3f4f6"/>
                            <rect width="100%" height="100%" fill="url(#grid)"/>
                            
                            <!-- 地块区域 -->
                            <polygon points="150,150 350,150 350,250 150,250" fill="#4CAF5022" stroke="#4CAF50" stroke-width="2"/>
                            <polygon points="400,150 500,150 500,350 400,350" fill="#FF980022" stroke="#FF9800" stroke-width="2"/>
                            <polygon points="150,300 350,300 350,450 150,450" fill="#2196F322" stroke="#2196F3" stroke-width="2"/>
                            <polygon points="600,150 800,150 800,300 600,300" fill="#9C27B022" stroke="#9C27B0" stroke-width="2"/>
                            
                            <!-- 道路 -->
                            <line x1="0" y1="400" x2="1000" y2="400" stroke="#795548" stroke-width="15"/>
                            <line x1="550" y1="0" x2="550" y2="600" stroke="#795548" stroke-width="10"/>
                            
                            <!-- 设备位置标记 -->
                            <circle cx="250" cy="200" r="12" fill="#4CAF50" class="device-marker" data-id="1"/>
                            <circle cx="450" cy="250" r="12" fill="#FF9800" class="device-marker" data-id="2"/>
                            <circle cx="250" cy="350" r="12" fill="#2196F3" class="device-marker" data-id="3"/>
                            <circle cx="700" cy="220" r="12" fill="#ef4444" class="device-marker" data-id="4"/>
                            <circle cx="600" cy="400" r="12" fill="#4CAF50" class="device-marker" data-id="5"/>
                            
                            <!-- 设备移动路径 -->
                            <path d="M 250,200 L 260,210 L 270,230 L 290,240" fill="none" stroke="#4CAF5088" stroke-width="3" stroke-dasharray="5,5"/>
                            <path d="M 450,250 L 460,270 L 470,300 L 480,320" fill="none" stroke="#FF980088" stroke-width="3" stroke-dasharray="5,5"/>
                        </svg>
                        
                        <!-- 地图控制按钮 -->
                        <div class="map-controls">
                            <div class="map-control" title="放大">
                                <i class="iconfont icon-zoom-in"></i>
                            </div>
                            <div class="map-control" title="缩小">
                                <i class="iconfont icon-zoom-out"></i>
                            </div>
                            <div class="map-control" title="定位">
                                <i class="iconfont icon-location"></i>
                            </div>
                            <div class="map-control" title="全屏">
                                <i class="iconfont icon-fullscreen"></i>
                            </div>
                        </div>
                        
                        <!-- 设备信息窗口 -->
                        <div class="machine-info" id="machineInfo">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-bold">拖拉机 #1</h3>
                                <div class="flex items-center">
                                    <span class="status-indicator status-online"></span>
                                    <span>在线</span>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="mb-1 flex justify-between">
                                    <span>设备状态</span>
                                    <span class="font-medium">作业中</span>
                                </div>
                                <div class="mb-1 flex justify-between">
                                    <span>当前速度</span>
                                    <span class="font-medium">5.6 km/h</span>
                                </div>
                                <div class="mb-1 flex justify-between">
                                    <span>油量</span>
                                    <span class="font-medium">75%</span>
                                </div>
                                <div class="mb-1 flex justify-between">
                                    <span>作业面积</span>
                                    <span class="font-medium">35 亩</span>
                                </div>
                                <div class="mb-1 flex justify-between">
                                    <span>运行时间</span>
                                    <span class="font-medium">3.5 小时</span>
                                </div>
                            </div>
                            
                            <div class="flex gap-2">
                                <button class="btn btn-default btn-sm flex-1">
                                    <i class="iconfont icon-eye btn-icon"></i>
                                    实时视频
                                </button>
                                <button class="btn btn-default btn-sm flex-1">
                                    <i class="iconfont icon-file-text btn-icon"></i>
                                    详细信息
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-rows-3 gap-6">
                <!-- 设备列表 -->
                <div class="card p-4 row-span-1 overflow-auto" style="max-height: 300px;">
                    <h3 class="font-bold mb-4">设备列表</h3>
                    
                    <div class="mb-3 pb-3 border-b">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <span class="status-indicator status-online"></span>
                                <span class="font-medium">拖拉机 #1</span>
                            </div>
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">作业中</span>
                        </div>
                        <div class="text-xs text-gray-500">东区1号地块 | 驾驶员：张三</div>
                    </div>
                    
                    <div class="mb-3 pb-3 border-b">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <span class="status-indicator status-warning"></span>
                                <span class="font-medium">收割机 #2</span>
                            </div>
                            <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">告警</span>
                        </div>
                        <div class="text-xs text-gray-500">西区2号地块 | 驾驶员：李四</div>
                    </div>
                    
                    <div class="mb-3 pb-3 border-b">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <span class="status-indicator status-online"></span>
                                <span class="font-medium">播种机 #3</span>
                            </div>
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">作业中</span>
                        </div>
                        <div class="text-xs text-gray-500">南区3号地块 | 驾驶员：王五</div>
                    </div>
                    
                    <div class="mb-3 pb-3 border-b">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <span class="status-indicator status-offline"></span>
                                <span class="font-medium">喷药机 #4</span>
                            </div>
                            <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">离线</span>
                        </div>
                        <div class="text-xs text-gray-500">北区4号地块 | 驾驶员：赵六</div>
                    </div>
                    
                    <div class="mb-3 pb-3 border-b">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <span class="status-indicator status-online"></span>
                                <span class="font-medium">拖拉机 #5</span>
                            </div>
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">待机</span>
                        </div>
                        <div class="text-xs text-gray-500">中央区域 | 驾驶员：钱七</div>
                    </div>
                </div>
                
                <!-- 燃油监控 -->
                <div class="card p-4 row-span-1">
                    <h3 class="font-bold mb-4">燃油监控</h3>
                    
                    <div class="gauge">
                        <svg class="gauge-svg" viewBox="0 0 200 100">
                            <path d="M 40 90 A 60 60 0 0 1 160 90" fill="none" stroke="#e5e7eb" stroke-width="16" stroke-linecap="round" />
                            <path d="M 40 90 A 60 60 0 0 1 160 90" fill="none" stroke="#4CAF50" stroke-width="16" stroke-linecap="round" stroke-dasharray="188.5 188.5" stroke-dashoffset="47.1" />
                        </svg>
                        <div class="gauge-value">75%</div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4 mt-2">
                        <div>
                            <div class="text-xs text-gray-500 mb-1">今日消耗</div>
                            <div class="font-medium">32.5 L</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 mb-1">剩余可用</div>
                            <div class="font-medium">125.8 L</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 mb-1">平均油耗</div>
                            <div class="font-medium">9.2 L/h</div>
                        </div>
                        <div>
                            <div class="text-xs text-gray-500 mb-1">预计续航</div>
                            <div class="font-medium">13.7 小时</div>
                        </div>
                    </div>
                </div>
                
                <!-- 设备动态 -->
                <div class="card p-4 row-span-1">
                    <h3 class="font-bold mb-4">设备动态</h3>
                    
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-time">10:25</div>
                            <div class="font-medium">拖拉机 #1 开始作业</div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-time">09:48</div>
                            <div class="font-medium">收割机 #2 发出低油量警告</div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-time">09:15</div>
                            <div class="font-medium">播种机 #3 完成作业</div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-time">08:30</div>
                            <div class="font-medium">喷药机 #4 离线</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点击设备标记显示信息窗口
            const deviceMarkers = document.querySelectorAll('.device-marker');
            const machineInfo = document.getElementById('machineInfo');
            
            deviceMarkers.forEach(marker => {
                marker.addEventListener('click', function() {
                    const deviceId = this.getAttribute('data-id');
                    // 在实际应用中，这里应该根据设备ID获取详细信息
                    machineInfo.style.display = 'block';
                });
            });
            
            // 模拟实时数据更新
            setInterval(function() {
                // 这里可以添加实时数据更新逻辑
                // 例如通过WebSocket接收设备位置、状态等信息
            }, 3000);
        });
    </script>
</body>
</html>