gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
							<!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">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7f9;
            color: #333;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s;
        }
        
        .card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        
        .stat-card {
            position: relative;
            overflow: hidden;
        }
        
        .stat-card .icon {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 48px;
            opacity: 0.1;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .weather-card {
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
            color: white;
        }
    </style>
</head>
<body>
    <div class="p-6">
        <div class="mb-6">
            <h1 class="text-2xl font-bold mb-2">智慧农业概览</h1>
            <p class="text-gray-500">欢迎回来，管理员！今天是 <span id="current-date"></span></p>
        </div>
        
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="card stat-card p-6">
                <div class="icon">🌱</div>
                <h3 class="text-gray-500 mb-2">种植面积</h3>
                <div class="text-3xl font-bold">2,560<span class="text-lg ml-1">亩</span></div>
                <div class="text-green-500 mt-2">↑ 5.2% 较上月</div>
            </div>
            
            <div class="card stat-card p-6">
                <div class="icon">🚜</div>
                <h3 class="text-gray-500 mb-2">农机设备</h3>
                <div class="text-3xl font-bold">128<span class="text-lg ml-1">台</span></div>
                <div class="text-green-500 mt-2">↑ 3.1% 较上月</div>
            </div>
            
            <div class="card stat-card p-6">
                <div class="icon">👨‍🌾</div>
                <h3 class="text-gray-500 mb-2">农事人员</h3>
                <div class="text-3xl font-bold">86<span class="text-lg ml-1">人</span></div>
                <div class="text-gray-500 mt-2">持平 较上月</div>
            </div>
            
            <div class="card stat-card p-6">
                <div class="icon">📊</div>
                <h3 class="text-gray-500 mb-2">农作产量</h3>
                <div class="text-3xl font-bold">1,850<span class="text-lg ml-1">吨</span></div>
                <div class="text-green-500 mt-2">↑ 7.8% 较上年同期</div>
            </div>
        </div>
        
        <!-- 天气和告警 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <div class="card weather-card p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold">今日天气</h3>
                    <span>晴朗</span>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="text-4xl font-bold">26°C</div>
                    <div class="text-5xl">☀️</div>
                </div>
                
                <div class="mt-4 grid grid-cols-4 gap-2 text-center">
                    <div>
                        <div class="text-xs opacity-80">湿度</div>
                        <div>65%</div>
                    </div>
                    <div>
                        <div class="text-xs opacity-80">风速</div>
                        <div>3km/h</div>
                    </div>
                    <div>
                        <div class="text-xs opacity-80">气压</div>
                        <div>1013hPa</div>
                    </div>
                    <div>
                        <div class="text-xs opacity-80">降水</div>
                        <div>0mm</div>
                    </div>
                </div>
            </div>
            
            <div class="card p-6 col-span-2">
                <h3 class="font-bold mb-4">最近告警</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="border-b">
                                <th class="text-left pb-2">类型</th>
                                <th class="text-left pb-2">位置</th>
                                <th class="text-left pb-2">时间</th>
                                <th class="text-left pb-2">状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b">
                                <td class="py-2"><span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">设备故障</span></td>
                                <td>东区3号地块</td>
                                <td>10:25</td>
                                <td><span class="text-red-500">未处理</span></td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-2"><span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">土壤湿度</span></td>
                                <td>西区1号地块</td>
                                <td>09:12</td>
                                <td><span class="text-green-500">已处理</span></td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-2"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">水位预警</span></td>
                                <td>南区灌溉系统</td>
                                <td>昨天</td>
                                <td><span class="text-green-500">已处理</span></td>
                            </tr>
                            <tr>
                                <td class="py-2"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">病虫害</span></td>
                                <td>北区2号地块</td>
                                <td>昨天</td>
                                <td><span class="text-green-500">已处理</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 图表 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <div class="card p-6">
                <h3 class="font-bold mb-4">作物分布</h3>
                <div id="cropDistribution" class="chart-container"></div>
            </div>
            
            <div class="card p-6">
                <h3 class="font-bold mb-4">月度产量趋势</h3>
                <div id="yieldTrend" class="chart-container"></div>
            </div>
        </div>
        
        <!-- 农事进度 -->
        <div class="card p-6">
            <h3 class="font-bold mb-4">农事进度</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div>
                    <div class="flex justify-between mb-2">
                        <span>水稻种植</span>
                        <span class="text-green-500">75%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between mb-2">
                        <span>小麦收割</span>
                        <span class="text-green-500">90%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 90%"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between mb-2">
                        <span>玉米播种</span>
                        <span class="text-green-500">45%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 45%"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between mb-2">
                        <span>果树修剪</span>
                        <span class="text-green-500">60%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 设置当前日期
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
        
        // 作物分布饼图
        const cropDistributionChart = echarts.init(document.getElementById('cropDistribution'));
        cropDistributionChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                data: ['水稻', '小麦', '玉米', '蔬菜', '果树', '其他']
            },
            series: [
                {
                    name: '作物分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '水稻' },
                        { value: 735, name: '小麦' },
                        { value: 580, name: '玉米' },
                        { value: 484, name: '蔬菜' },
                        { value: 300, name: '果树' },
                        { value: 200, name: '其他' }
                    ],
                    color: ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722']
                }
            ]
        });
        
        // 月度产量趋势
        const yieldTrendChart = echarts.init(document.getElementById('yieldTrend'));
        yieldTrendChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['去年产量', '今年产量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '去年产量',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(128, 255, 165, 0.7)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(1, 191, 236, 0.1)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    name: '今年产量',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410, 332, 301, 334, 390, 330],
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(0, 221, 255, 0.7)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(77, 119, 255, 0.1)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    }
                }
            ]
        });
        
        // 响应式调整图表大小
        window.addEventListener('resize', function() {
            cropDistributionChart.resize();
            yieldTrendChart.resize();
        });
    </script>
</body>
</html>