gebadi
/
aizhunongDom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884
							<!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: #001529;
            color: #fff;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        
        .dashboard-container {
            padding: 20px;
            min-height: 100vh; width: 100%; max-width: 100%; box-sizing: border-box;
        }
        
        .dashboard-header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        .dashboard-title {
            font-size: 36px;
            font-weight: bold;
            background: linear-gradient(90deg, #4CAF50, #8BC34A, #CDDC39);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            display: inline-block;
            padding: 0 50px;
        }
        
        .dashboard-title::before,
        .dashboard-title::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
        }
        
        .dashboard-title::before {
            left: 0;
        }
        
        .dashboard-title::after {
            right: 0;
        }
        
        .card {
            background: rgba(16, 36, 64, 0.8);
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
            padding: 20px;
            position: relative;
            overflow: hidden;
            height: 100%;
        }
        
        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
        }
        
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #4CAF50;
            display: flex;
            align-items: center;
        }
        
        .card-title::before {
            content: "";
            display: block;
            width: 4px;
            height: 16px;
            background: #4CAF50;
            margin-right: 8px;
            border-radius: 2px;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .number-card {
            text-align: center;
            padding: 20px;
        }
        
        .number-value {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 5px;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .number-label {
            font-size: 14px;
            color: #aaa;
        }
        
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(76, 175, 80, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(76, 175, 80, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: -1;
        }
        
        .map-container {
            height: 400px;
            position: relative;
        }
        
        .map-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(16, 36, 64, 0.9);
            padding: 10px;
            border-radius: 4px;
            z-index: 10;
        }
        
        .map-legend {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .map-legend-color {
            width: 12px;
            height: 12px;
            margin-right: 5px;
            border-radius: 2px;
        }
        
        .progress-container {
            margin-bottom: 15px;
        }
        
        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
        }
        
        .device-status {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-online {
            background-color: #4CAF50;
        }
        
        .status-offline {
            background-color: #F44336;
        }
        
        .status-warning {
            background-color: #FF9800;
        }
        
        .clock {
            font-size: 18px;
            color: #8BC34A;
            margin-bottom: 10px;
            text-align: center;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="grid-bg"></div>
    
    <div class="dashboard-container">
        <header class="dashboard-header">
            <h1 class="dashboard-title">智慧农业数据可视化平台</h1>
            <div class="clock" id="dashboard-clock"></div>
        </header>
        
        <div class="grid grid-cols-4 gap-6 mb-6">
            <div class="number-card card">
                <div class="number-value pulse-animation">2,560</div>
                <div class="number-label">农业总面积（亩）</div>
            </div>
            
            <div class="number-card card">
                <div class="number-value pulse-animation">1,850</div>
                <div class="number-label">年产量（吨）</div>
            </div>
            
            <div class="number-card card">
                <div class="number-value pulse-animation">86%</div>
                <div class="number-label">设备在线率</div>
            </div>
            
            <div class="number-card card">
                <div class="number-value pulse-animation">12</div>
                <div class="number-label">智能农机设备（台）</div>
            </div>
        </div>
        
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="card">
                <h3 class="card-title">农作物分布</h3>
                <div id="cropDistribution" class="chart-container"></div>
            </div>
            
            <div class="card">
                <h3 class="card-title">年度产量趋势</h3>
                <div id="yieldTrend" class="chart-container"></div>
            </div>
        </div>
        
        <div class="grid grid-cols-1 gap-6 mb-6">
            <div class="card">
                <h3 class="card-title">区域分布地图</h3>
                <div class="map-container">
                    <div id="regionMap" class="chart-container" style="height: 100%;"></div>
                    <div class="map-overlay">
                        <div class="map-legend">
                            <div class="map-legend-color" style="background-color: rgba(76, 175, 80, 0.8);"></div>
                            <div>农田区域</div>
                        </div>
                        <div class="map-legend">
                            <div class="map-legend-color" style="background-color: rgba(33, 150, 243, 0.8);"></div>
                            <div>水源区域</div>
                        </div>
                        <div class="map-legend">
                            <div class="map-legend-color" style="background-color: rgba(255, 152, 0, 0.8);"></div>
                            <div>设施区域</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="grid grid-cols-3 gap-6 mb-6">
            <div class="card">
                <h3 class="card-title">农事进展</h3>
                <div class="progress-container">
                    <div class="progress-label">
                        <span>水稻种植</span>
                        <span>75%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 75%;"></div>
                    </div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-label">
                        <span>小麦收割</span>
                        <span>90%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 90%;"></div>
                    </div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-label">
                        <span>玉米播种</span>
                        <span>45%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 45%;"></div>
                    </div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-label">
                        <span>果树修剪</span>
                        <span>60%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 60%;"></div>
                    </div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-label">
                        <span>蔬菜采收</span>
                        <span>80%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 80%;"></div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <h3 class="card-title">设备在线状态</h3>
                <div id="deviceStatus" class="chart-container"></div>
            </div>
            
            <div class="card">
                <h3 class="card-title">农业资源消耗</h3>
                <div id="resourceUsage" class="chart-container"></div>
            </div>
        </div>
        
        <div class="grid grid-cols-2 gap-6">
            <div class="card">
                <h3 class="card-title">气象数据监测</h3>
                <div id="weatherMonitor" class="chart-container"></div>
            </div>
            
            <div class="card">
                <h3 class="card-title">智能设备分布</h3>
                <div id="deviceDistribution" class="chart-container"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 设置当前时间
        function updateClock() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric', 
                weekday: 'long',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            document.getElementById('dashboard-clock').textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        updateClock();
        setInterval(updateClock, 1000);
        
        // 作物分布饼图
        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',
                textStyle: {
                    color: '#fff'
                },
                data: ['水稻', '小麦', '玉米', '蔬菜', '果树', '其他']
            },
            series: [
                {
                    name: '作物分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#001529',
                        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: ['去年产量', '今年产量'],
                textStyle: {
                    color: '#fff'
                }
            },
            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月'],
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisLabel: {
                    color: '#aaa'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisLabel: {
                    color: '#aaa'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                }
            },
            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'
                    }
                }
            ]
        });
        
        // 区域分布地图
        const regionMapChart = echarts.init(document.getElementById('regionMap'));
        regionMapChart.setOption({
            geo: {
                map: 'china',
                roam: true,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: '农田分布',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [
                        {name: '北京', value: [116.46, 39.92, 100]},
                        {name: '上海', value: [121.48, 31.22, 80]},
                        {name: '广州', value: [113.23, 23.16, 70]},
                        {name: '深圳', value: [114.07, 22.62, 60]},
                        {name: '杭州', value: [120.19, 30.26, 90]},
                        {name: '西安', value: [108.95, 34.27, 50]},
                        {name: '成都', value: [104.06, 30.67, 85]}
                    ],
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    itemStyle: {
                        color: '#4CAF50'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                }
            ]
        });
        
        // 设备在线状态
        const deviceStatusChart = echarts.init(document.getElementById('deviceStatus'));
        deviceStatusChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '设备状态',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#001529',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 86, name: '在线', itemStyle: { color: '#4CAF50' } },
                        { value: 8, name: '离线', itemStyle: { color: '#F44336' } },
                        { value: 6, name: '维护中', itemStyle: { color: '#FF9800' } }
                    ]
                }
            ]
        });
        
        // 农业资源消耗
        const resourceUsageChart = echarts.init(document.getElementById('resourceUsage'));
        resourceUsageChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['水资源', '肥料', '农药', '能源'],
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisLabel: {
                    color: '#aaa'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['一季度', '二季度', '三季度', '四季度'],
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisLabel: {
                    color: '#aaa'
                }
            },
            series: [
                {
                    name: '水资源',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 302, 301, 334],
                    color: '#2196F3'
                },
                {
                    name: '肥料',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134],
                    color: '#4CAF50'
                },
                {
                    name: '农药',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234],
                    color: '#FF9800'
                },
                {
                    name: '能源',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 212, 201, 154],
                    color: '#9C27B0'
                }
            ]
        });
        
        // 气象数据监测
        const weatherMonitorChart = echarts.init(document.getElementById('weatherMonitor'));
        weatherMonitorChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['温度', '湿度', '降水量'],
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisLabel: {
                    color: '#aaa'
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#aaa'
                    }
                },
                axisLabel: {
                    color: '#aaa'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                }
            },
            series: [
                {
                    name: '温度',
                    type: 'line',
                    data: [22, 24, 26, 25, 23, 22, 21],
                    color: '#FF5722'
                },
                {
                    name: '湿度',
                    type: 'line',
                    data: [65, 60, 55, 58, 62, 68, 70],
                    color: '#2196F3'
                },
                {
                    name: '降水量',
                    type: 'line',
                    data: [0, 0, 5, 10, 2, 0, 0],
                    color: '#00BCD4'
                }
            ]
        });
        
        // 智能设备分布
        const deviceDistributionChart = echarts.init(document.getElementById('deviceDistribution'));
        deviceDistributionChart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '设备类型',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 30, name: '气象站', itemStyle: { color: '#2196F3' } },
                        { value: 28, name: '摄像头', itemStyle: { color: '#4CAF50' } },
                        { value: 26, name: '土壤传感器', itemStyle: { color: '#FF9800' } },
                        { value: 24, name: '水质监测', itemStyle: { color: '#00BCD4' } },
                        { value: 22, name: '自动灌溉', itemStyle: { color: '#9C27B0' } },
                        { value: 20, name: '无人机', itemStyle: { color: '#F44336' } }
                    ],
                    label: {
                        color: '#fff'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                }
            ]
        });
        
        // 响应式调整图表大小
        window.addEventListener('resize', function() {
            cropDistributionChart.resize();
            yieldTrendChart.resize();
            regionMapChart.resize();
            deviceStatusChart.resize();
            resourceUsageChart.resize();
            weatherMonitorChart.resize();
            deviceDistributionChart.resize();
        });
    </script>
</body>
</html>