gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
							<!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">
    <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;
        }
        
        .page-container {
            padding: 20px;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .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;
        }
        
        .chart-container {
            height: 350px;
            width: 100%;
        }
        
        .prediction-card {
            background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
            border-left: 4px solid #4CAF50;
        }
        
        .yield-indicator {
            position: relative;
            height: 40px;
            width: 100%;
            background-color: #f3f4f6;
            border-radius: 20px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .yield-range {
            position: absolute;
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 20px;
        }
        
        .yield-marker {
            position: absolute;
            top: -6px;
            width: 12px;
            height: 52px;
            background-color: #1e293b;
            z-index: 5;
        }
        
        .yield-label {
            position: absolute;
            bottom: -25px;
            transform: translateX(-50%);
            font-size: 12px;
            white-space: nowrap;
        }
        
        .factor-card {
            border-left: 3px solid;
            transition: all 0.2s;
        }
        
        .factor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .positive-factor {
            border-color: #4CAF50;
        }
        
        .negative-factor {
            border-color: #f44336;
        }
        
        .neutral-factor {
            border-color: #9e9e9e;
        }
        
        .factor-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .positive-icon {
            background-color: #e8f5e9;
            color: #4CAF50;
        }
        
        .negative-icon {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .neutral-icon {
            background-color: #f5f5f5;
            color: #9e9e9e;
        }
        
        .impact-meter {
            height: 6px;
            background-color: #e5e7eb;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .impact-fill {
            height: 100%;
            border-radius: 3px;
        }
        
        .positive-impact {
            background-color: #4CAF50;
        }
        
        .negative-impact {
            background-color: #f44336;
        }
        
        .neutral-impact {
            background-color: #9e9e9e;
        }
        
        .filter-button {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .filter-button.active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold">产量智能预测</h1>
            <div class="flex gap-2">
                <button class="btn btn-default">
                    <i class="iconfont icon-history mr-1"></i>
                    历史预测
                </button>
                <button class="btn btn-default">
                    <i class="iconfont icon-download mr-1"></i>
                    导出报告
                </button>
                <button class="btn btn-primary">
                    <i class="iconfont icon-reload mr-1"></i>
                    更新预测
                </button>
            </div>
        </div>
        
        <!-- 筛选器 -->
        <div class="mb-6 flex items-center">
            <div class="mr-3 text-gray-500">筛选:</div>
            <div class="flex gap-2">
                <button class="filter-button bg-gray-100 active">全部作物</button>
                <button class="filter-button bg-gray-100">水稻</button>
                <button class="filter-button bg-gray-100">小麦</button>
                <button class="filter-button bg-gray-100">玉米</button>
                <button class="filter-button bg-gray-100">大豆</button>
            </div>
            <div class="ml-auto">
                <select class="px-3 py-2 bg-white border border-gray-300 rounded-md">
                    <option>2023年</option>
                    <option>2022年</option>
                    <option>2021年</option>
                </select>
            </div>
        </div>
        
        <!-- 产量预测总览 -->
        <div class="card p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="col-span-2">
                    <h2 class="text-lg font-bold mb-4">农场产量预测</h2>
                    <div id="yieldPredictionChart" class="chart-container"></div>
                </div>
                
                <div>
                    <h2 class="text-lg font-bold mb-4">本年度产量预计</h2>
                    <div class="space-y-6">
                        <div class="prediction-card p-4 rounded-md">
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-gray-600">总产量预测</div>
                                <div class="text-lg font-bold">2,850 吨</div>
                            </div>
                            <div class="text-sm text-green-600 mt-1">
                                <i class="iconfont icon-arrow-up"></i>
                                较去年 +8.2%
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                置信区间: 2,730 - 2,950 吨
                            </div>
                        </div>
                        
                        <div class="prediction-card p-4 rounded-md">
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-gray-600">亩均产量预测</div>
                                <div class="text-lg font-bold">1,120 斤</div>
                            </div>
                            <div class="text-sm text-green-600 mt-1">
                                <i class="iconfont icon-arrow-up"></i>
                                较去年 +5.6%
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                置信区间: 1,080 - 1,150 斤
                            </div>
                        </div>
                        
                        <div class="prediction-card p-4 rounded-md">
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-gray-600">潜在最高产量</div>
                                <div class="text-lg font-bold">3,120 吨</div>
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                实现率: 91.3% (优)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 作物产量预测详情 -->
        <div class="card p-6 mb-6">
            <h2 class="text-lg font-bold mb-4">各作物产量预测详情</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="bg-gray-50">
                            <th class="px-4 py-3 text-left">作物</th>
                            <th class="px-4 py-3 text-left">种植面积(亩)</th>
                            <th class="px-4 py-3 text-left">预测产量(吨)</th>
                            <th class="px-4 py-3 text-left">亩均产量(斤)</th>
                            <th class="px-4 py-3 text-left">较去年</th>
                            <th class="px-4 py-3 text-left">预测准确率</th>
                            <th class="px-4 py-3 text-left">风险因素</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
                                        🌾
                                    </div>
                                    水稻
                                </div>
                            </td>
                            <td class="px-4 py-3">1,200</td>
                            <td class="px-4 py-3 font-medium">1,380</td>
                            <td class="px-4 py-3">1,150</td>
                            <td class="px-4 py-3 text-green-600">+9.1%</td>
                            <td class="px-4 py-3">92%</td>
                            <td class="px-4 py-3">
                                <span class="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-xs">高温</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-2">
                                        🌽
                                    </div>
                                    玉米
                                </div>
                            </td>
                            <td class="px-4 py-3">800</td>
                            <td class="px-4 py-3 font-medium">920</td>
                            <td class="px-4 py-3">1,150</td>
                            <td class="px-4 py-3 text-green-600">+7.3%</td>
                            <td class="px-4 py-3">88%</td>
                            <td class="px-4 py-3">
                                <span class="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-xs">雨量</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-amber-50 flex items-center justify-center mr-2">
                                        🌾
                                    </div>
                                    小麦
                                </div>
                            </td>
                            <td class="px-4 py-3">600</td>
                            <td class="px-4 py-3 font-medium">480</td>
                            <td class="px-4 py-3">800</td>
                            <td class="px-4 py-3 text-red-600">-2.1%</td>
                            <td class="px-4 py-3">85%</td>
                            <td class="px-4 py-3">
                                <span class="bg-red-100 text-red-800 rounded-full px-2 py-1 text-xs">病害</span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
                                        🫘
                                    </div>
                                    大豆
                                </div>
                            </td>
                            <td class="px-4 py-3">120</td>
                            <td class="px-4 py-3 font-medium">70</td>
                            <td class="px-4 py-3">583</td>
                            <td class="px-4 py-3 text-green-600">+11.5%</td>
                            <td class="px-4 py-3">90%</td>
                            <td class="px-4 py-3">
                                <span class="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-xs">无</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 水稻产量详细预测 -->
        <div class="card p-6 mb-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold">水稻产量详细预测</h2>
                        <select class="px-3 py-2 bg-white border border-gray-300 rounded-md text-sm">
                            <option>按地块查看</option>
                            <option>按月份查看</option>
                            <option>按品种查看</option>
                        </select>
                    </div>
                    
                    <div id="detailedPredictionChart" class="chart-container mb-4"></div>
                    
                    <div>
                        <h3 class="font-medium mb-2">产量预测区间</h3>
                        <div class="yield-indicator">
                            <div class="yield-range" style="left: 20%; right: 20%"></div>
                            <div class="yield-marker" style="left: 50%"></div>
                            
                            <div class="yield-label" style="left: 0%">
                                低产 (1,000吨)
                            </div>
                            <div class="yield-label" style="left: 20%">
                                1,240吨
                            </div>
                            <div class="yield-label" style="left: 50%">
                                预测值: 1,380吨
                            </div>
                            <div class="yield-label" style="left: 80%">
                                1,520吨
                            </div>
                            <div class="yield-label" style="left: 100%">
                                高产 (1,650吨)
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h2 class="text-lg font-bold mb-4">影响因素分析</h2>
                    <div class="space-y-3">
                        <div class="factor-card positive-factor p-3 bg-white rounded-md shadow-sm">
                            <div class="flex items-center">
                                <div class="factor-icon positive-icon mr-3">
                                    <i class="iconfont icon-sun"></i>
                                </div>
                                <div>
                                    <div class="font-medium">光照充足</div>
                                    <div class="text-xs text-gray-500">平均日照时长较理想值高8%</div>
                                    <div class="flex items-center mt-1">
                                        <div class="text-xs mr-2">影响:</div>
                                        <div class="impact-meter flex-grow">
                                            <div class="impact-fill positive-impact" style="width: 75%"></div>
                                        </div>
                                        <div class="text-xs ml-2">+7.5%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="factor-card positive-factor p-3 bg-white rounded-md shadow-sm">
                            <div class="flex items-center">
                                <div class="factor-icon positive-icon mr-3">
                                    <i class="iconfont icon-experiment"></i>
                                </div>
                                <div>
                                    <div class="font-medium">优质品种</div>
                                    <div class="text-xs text-gray-500">使用"丰优838"高产水稻品种</div>
                                    <div class="flex items-center mt-1">
                                        <div class="text-xs mr-2">影响:</div>
                                        <div class="impact-meter flex-grow">
                                            <div class="impact-fill positive-impact" style="width: 60%"></div>
                                        </div>
                                        <div class="text-xs ml-2">+6.0%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="factor-card neutral-factor p-3 bg-white rounded-md shadow-sm">
                            <div class="flex items-center">
                                <div class="factor-icon neutral-icon mr-3">
                                    <i class="iconfont icon-water"></i>
                                </div>
                                <div>
                                    <div class="font-medium">降水量适中</div>
                                    <div class="text-xs text-gray-500">降水量与多年平均值相当</div>
                                    <div class="flex items-center mt-1">
                                        <div class="text-xs mr-2">影响:</div>
                                        <div class="impact-meter flex-grow">
                                            <div class="impact-fill neutral-impact" style="width: 40%"></div>
                                        </div>
                                        <div class="text-xs ml-2">+0.5%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="factor-card negative-factor p-3 bg-white rounded-md shadow-sm">
                            <div class="flex items-center">
                                <div class="factor-icon negative-icon mr-3">
                                    <i class="iconfont icon-temperature"></i>
                                </div>
                                <div>
                                    <div class="font-medium">高温胁迫</div>
                                    <div class="text-xs text-gray-500">灌浆期连续5天高温(>35°C)</div>
                                    <div class="flex items-center mt-1">
                                        <div class="text-xs mr-2">影响:</div>
                                        <div class="impact-meter flex-grow">
                                            <div class="impact-fill negative-impact" style="width: 50%"></div>
                                        </div>
                                        <div class="text-xs ml-2">-5.0%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4 p-4 bg-gray-50 rounded-md">
                        <h3 class="font-medium mb-2">AI优化建议</h3>
                        <ul class="text-sm space-y-2">
                            <li class="flex">
                                <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
                                <span>针对高温胁迫，建议增加灌溉频次，保持田间湿度</span>
                            </li>
                            <li class="flex">
                                <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
                                <span>适当增加钾肥施用量，提高植株抗逆性</span>
                            </li>
                            <li class="flex">
                                <i class="iconfont icon-check-circle text-green-500 mr-2"></i>
                                <span>预计产量可提升至1,450吨(+5%)</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 总体产量预测图表
            const yieldPredictionChart = echarts.init(document.getElementById('yieldPredictionChart'));
            yieldPredictionChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['实际产量', '预测产量', '误差范围']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
                },
                yAxis: {
                    type: 'value',
                    name: '产量(吨)'
                },
                series: [
                    {
                        name: '实际产量',
                        type: 'bar',
                        data: [1800, 1920, 2100, 2250, 2400, 2630, null],
                        color: '#66BB6A'
                    },
                    {
                        name: '预测产量',
                        type: 'bar',
                        data: [null, null, null, null, null, null, 2850],
                        color: '#42A5F5'
                    },
                    {
                        name: '误差范围',
                        type: 'boxplot',
                        data: [
                            [null, null, null, null, null],
                            [null, null, null, null, null],
                            [null, null, null, null, null],
                            [null, null, null, null, null],
                            [null, null, null, null, null],
                            [null, null, null, null, null],
                            [2730, 2800, 2850, 2900, 2950]
                        ],
                        itemStyle: {
                            color: '#90CAF9'
                        }
                    }
                ]
            });
            
            // 详细预测图表
            const detailedPredictionChart = echarts.init(document.getElementById('detailedPredictionChart'));
            detailedPredictionChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['去年产量', '预测产量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['东区A', '东区B', '西区A', '西区B', '南区', '北区A', '北区B']
                },
                yAxis: {
                    type: 'value',
                    name: '产量(吨)'
                },
                series: [
                    {
                        name: '去年产量',
                        type: 'bar',
                        data: [220, 182, 191, 234, 290, 150, 198],
                        color: '#AED581'
                    },
                    {
                        name: '预测产量',
                        type: 'bar',
                        data: [240, 195, 210, 250, 310, 160, 215],
                        color: '#4CAF50'
                    }
                ]
            });
            
            // 响应式调整图表大小
            window.addEventListener('resize', function() {
                yieldPredictionChart.resize();
                detailedPredictionChart.resize();
            });
            
            // 筛选按钮点击事件
            const filterButtons = document.querySelectorAll('.filter-button');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>