Spaces:

maomaobj
/

pingguo1

Running

App Files Files Community

maomaobj commited on Jun 22, 2025

Commit

67e5611

verified ·

1 Parent(s): 6b8464c

将“苹果产销流向图谱分析系统”，修改为“苹果产销流向图谱分析” - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +428 -342

index.html CHANGED Viewed

@@ -3,413 +3,499 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>果园种植面积AI遥感分析</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .map-container {
-            height: calc(100vh - 220px);
         }
-        .sidebar {
-            background-color: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(5px);
         }
-        .map-overlay {
-            position: absolute;
-            z-index: 1000;
-            pointer-events: none;
         }
-        .progress-bar {
-            height: 4px;
-            background: linear-gradient(90deg, #4f46e5 0%, #10b981 50%, #f59e0b 100%);
-            animation: progress 2s ease-in-out infinite;
-            background-size: 200% 100%;
         }
-        @keyframes progress {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
-        .orchard-boundary {
-            stroke: #ef4444;
-            stroke-width: 2;
-            fill: rgba(239, 68, 68, 0.2);
         }
     </style>
 </head>
-<body class="bg-gray-100 font-sans">
-    <div class="flex flex-col h-screen">
-        <!-- 顶部导航栏 -->
-        <header class="bg-white shadow-sm">
-            <div class="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8 flex justify-between items-center">
-                <div class="flex items-center">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-green-500 flex items-center justify-center text-white">
-                        <i class="fas fa-satellite-dish text-xl"></i>
-                    </div>
-                    <h1 class="ml-3 text-xl font-bold text-gray-800">果园种植面积AI遥感分析</h1>
-                </div>
-                <div class="flex items-center space-x-4">
-                    <div class="text-sm text-gray-600">
-                        <i class="fas fa-calendar-alt mr-1"></i>
-                        <span id="current-date">2023年11月15日</span>
-                    </div>
-                    <div class="text-sm text-gray-600">
-                        <i class="fas fa-map-marker-alt mr-1"></i>
-                        <span>陕西省延安市</span>
-                    </div>
                 </div>
             </div>
-        </header>
-        <!-- 主内容区 -->
-        <main class="flex-1 flex overflow-hidden">
-            <!-- 左侧图层控制面板 -->
-            <div class="sidebar w-64 p-4 border-r border-gray-200 overflow-y-auto">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
-                    <i class="fas fa-layer-group mr-2 text-blue-600"></i>
-                    图层控制
                 </h2>
                 <div class="space-y-3">
-                    <div class="bg-gray-50 p-3 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-2">基础底图</h3>
-                        <div class="space-y-2">
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="radio" name="base-map" class="form-radio text-blue-600" checked>
-                                <span class="text-gray-700">卫星影像</span>
-                            </label>
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="radio" name="base-map" class="form-radio text-blue-600">
-                                <span class="text-gray-700">地形图</span>
-                            </label>
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="radio" name="base-map" class="form-radio text-blue-600">
-                                <span class="text-gray-700">行政区划</span>
-                            </label>
                         </div>
                     </div>
-                    <div class="bg-gray-50 p-3 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-2">遥感指数</h3>
-                        <div class="space-y-2">
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="checkbox" class="form-checkbox text-green-600" checked>
-                                <span class="text-gray-700">NDVI植被指数</span>
-                            </label>
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="checkbox" class="form-checkbox text-green-600">
-                                <span class="text-gray-700">EVI增强植被指数</span>
-                            </label>
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="checkbox" class="form-checkbox text-green-600">
-                                <span class="text-gray-700">NDWI水体指数</span>
-                            </label>
                         </div>
                     </div>
-                    <div class="bg-gray-50 p-3 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-2">AI识别结果</h3>
-                        <div class="space-y-2">
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="checkbox" class="form-checkbox text-red-600" checked>
-                                <span class="text-gray-700">果园边界</span>
-                            </label>
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="checkbox" class="form-checkbox text-red-600">
-                                <span class="text-gray-700">置信度热图</span>
-                            </label>
                         </div>
                     </div>
-                    <div class="bg-gray-50 p-3 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-2">透明度调节</h3>
-                        <div class="mt-2">
-                            <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                         </div>
                     </div>
                 </div>
-            </div>
-            <!-- 中央地图区域 -->
-            <div class="flex-1 relative">
-                <div id="map" class="map-container w-full h-full"></div>
-                <!-- 地图控件 -->
-                <div class="absolute top-4 right-4 z-1000">
-                    <div class="bg-white rounded-lg shadow-md p-2 flex flex-col space-y-2">
-                        <button class="p-2 text-gray-700 hover:bg-gray-100 rounded" title="放大">
-                            <i class="fas fa-plus"></i>
-                        </button>
-                        <button class="p-2 text-gray-700 hover:bg-gray-100 rounded" title="缩小">
-                            <i class="fas fa-minus"></i>
-                        </button>
-                        <button class="p-2 text-gray-700 hover:bg-gray-100 rounded" title="全图">
-                            <i class="fas fa-globe"></i>
-                        </button>
                     </div>
                 </div>
-                <!-- 比例尺 -->
-                <div class="absolute bottom-4 left-4 z-1000 bg-white p-2 rounded shadow-md">
-                    <div id="scale" class="text-xs text-gray-700">1:10,000</div>
-                </div>
-                <!-- 坐标显示 -->
-                <div class="absolute bottom-4 right-4 z-1000 bg-white p-2 rounded shadow-md">
-                    <div id="coordinates" class="text-xs text-gray-700">经度: 109.48, 纬度: 36.58</div>
-                </div>
             </div>
-            <!-- 右侧AI控制面板 -->
-            <div class="sidebar w-72 p-4 border-l border-gray-200 overflow-y-auto">
-                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
-                    <i class="fas fa-robot mr-2 text-purple-600"></i>
-                    AI识别控制
-                </h2>
-                <div class="space-y-4">
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-3">模型选择</h3>
-                        <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <option>U-Net v1 (推荐)</option>
-                            <option>U-Net v2</option>
-                            <option>DeepLab V2</option>
-                            <option>DeepLab V3+</option>
-                            <option>PSPNet</option>
-                        </select>
                     </div>
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-3">识别参数</h3>
-                        <div class="space-y-3">
-                            <div>
-                                <label class="block text-xs text-gray-500 mb-1">置信度阈值</label>
-                                <input type="range" min="50" max="95" value="80" class="w-full">
-                                <div class="text-xs text-gray-500 text-right">80%</div>
                             </div>
-                            <div>
-                                <label class="block text-xs text-gray-500 mb-1">最小地块面积</label>
-                                <div class="flex">
-                                    <input type="number" value="0.5" class="w-3/4 border border-gray-300 rounded-l-md px-2 py-1">
-                                    <span class="w-1/4 bg-gray-200 text-center text-xs flex items-center justify-center rounded-r-md">公顷</span>
-                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-3">识别状态</h3>
-                        <div class="space-y-2">
-                            <div class="flex items-center justify-between text-sm">
-                                <span class="text-gray-600">模型加载</span>
-                                <span class="text-green-600"><i class="fas fa-check-circle"></i> 完成</span>
                             </div>
-                            <div class="flex items-center justify-between text-sm">
-                                <span class="text-gray-600">图像预处理</span>
-                                <span class="text-green-600"><i class="fas fa-check-circle"></i> 完成</span>
                             </div>
-                            <div class="flex items-center justify-between text-sm">
-                                <span class="text-gray-600">AI识别</span>
-                                <span class="text-blue-600"><i class="fas fa-sync-alt animate-spin"></i> 进行中</span>
                             </div>
-                            <div class="progress-bar rounded-full mt-1"></div>
                         </div>
                     </div>
-                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center space-x-2">
-                        <i class="fas fa-play"></i>
-                        <span>重新识别</span>
-                    </button>
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <h3 class="text-sm font-medium text-gray-700 mb-3">导出结果</h3>
-                        <div class="grid grid-cols-2 gap-2">
-                            <button class="bg-white border border-green-500 text-green-600 py-1 px-2 rounded text-sm flex items-center justify-center space-x-1">
-                                <i class="fas fa-file-excel"></i>
-                                <span>Excel</span>
-                            </button>
-                            <button class="bg-white border border-blue-500 text-blue-600 py-1 px-2 rounded text-sm flex items-center justify-center space-x-1">
-                                <i class="fas fa-file-code"></i>
-                                <span>GeoJSON</span>
-                            </button>
-                            <button class="bg-white border border-purple-500 text-purple-600 py-1 px-2 rounded text-sm flex items-center justify-center space-x-1">
-                                <i class="fas fa-file-pdf"></i>
-                                <span>PDF报告</span>
-                            </button>
-                            <button class="bg-white border border-orange-500 text-orange-600 py-1 px-2 rounded text-sm flex items-center justify-center space-x-1">
-                                <i class="fas fa-image"></i>
-                                <span>图片</span>
-                            </button>
                         </div>
                     </div>
                 </div>
             </div>
-        </main>
-        <!-- 底部统计面板 -->
-        <footer class="bg-white border-t border-gray-200">
-            <div class="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                    <div class="bg-blue-50 p-3 rounded-lg">
-                        <div class="text-xs text-blue-600 font-medium">识别总面积</div>
-                        <div class="text-xl font-bold text-blue-800">1,245.67 <span class="text-sm">公顷</span></div>
-                        <div class="text-xs text-gray-500 mt-1">较上月 <span class="text-green-600">+2.3%</span></div>
-                    </div>
-                    <div class="bg-green-50 p-3 rounded-lg">
-                        <div class="text-xs text-green-600 font-medium">平均地块面积</div>
-                        <div class="text-xl font-bold text-green-800">3.45 <span class="text-sm">公顷</span></div>
-                        <div class="text-xs text-gray-500 mt-1">较上月 <span class="text-red-600">-0.8%</span></div>
-                    </div>
-                    <div class="bg-purple-50 p-3 rounded-lg">
-                        <div class="text-xs text-purple-600 font-medium">识别地块数</div>
-                        <div class="text-xl font-bold text-purple-800">361 <span class="text-sm">块</span></div>
-                        <div class="text-xs text-gray-500 mt-1">较上月 <span class="text-green-600">+5.1%</span></div>
-                    </div>
-                    <div class="bg-yellow-50 p-3 rounded-lg">
-                        <div class="text-xs text-yellow-600 font-medium">识别置信度</div>
-                        <div class="text-xl font-bold text-yellow-800">86.7 <span class="text-sm">%</span></div>
-                        <div class="text-xs text-gray-500 mt-1">较上月 <span class="text-green-600">+1.2%</span></div>
                     </div>
                 </div>
-                <div class="mt-4">
-                    <canvas id="trendChart" height="120"></canvas>
                 </div>
             </div>
-        </footer>
     </div>
     <script>
-        // 设置当前日期
-        const now = new Date();
-        document.getElementById('current-date').textContent = `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`;
         // 初始化地图
-        const map = L.map('map').setView([36.58, 109.48], 12);
-        // 添加底图
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        }).addTo(map);
-        // 模拟果园边界数据 (实际应用中应从API获取)
-        const orchardBoundary = {
-            "type": "FeatureCollection",
-            "features": [
-                {
-                    "type": "Feature",
-                    "properties": {},
-                    "geometry": {
-                        "type": "Polygon",
-                        "coordinates": [[
-                            [109.45, 36.56], [109.46, 36.56], [109.46, 36.57],
-                            [109.45, 36.57], [109.45, 36.56]
-                        ]]
-                    }
-                },
-                {
-                    "type": "Feature",
-                    "properties": {},
-                    "geometry": {
-                        "type": "Polygon",
-                        "coordinates": [[
-                            [109.47, 36.58], [109.48, 36.58], [109.48, 36.59],
-                            [109.47, 36.59], [109.47, 36.58]
-                        ]]
-                    }
-                },
-                {
-                    "type": "Feature",
-                    "properties": {},
-                    "geometry": {
-                        "type": "Polygon",
-                        "coordinates": [[
-                            [109.49, 36.57], [109.50, 36.57], [109.50, 36.58],
-                            [109.49, 36.58], [109.49, 36.57]
-                        ]]
-                    }
                 }
-            ]
         };
-        // 添加果园边界到地图
-        L.geoJSON(orchardBoundary, {
-            style: {
-                color: '#ef4444',
-                weight: 2,
-                opacity: 1,
-                fillOpacity: 0.2,
-                fillColor: '#ef4444'
             }
-        }).addTo(map);
-        // 更新比例尺
-        function updateScale() {
-            const scale = map.getScale();
-            document.getElementById('scale').textContent = `1:${Math.round(scale).toLocaleString()}`;
-        }
-        // 更新坐标显示
-        function updateCoordinates(e) {
-            const lat = e.latlng.lat.toFixed(4);
-            const lng = e.latlng.lng.toFixed(4);
-            document.getElementById('coordinates').textContent = `经度: ${lng}, 纬度: ${lat}`;
         }
-        map.on('moveend', updateScale);
-        map.on('mousemove', updateCoordinates);
-        updateScale();
-        // 初始化趋势图表
-        const ctx = document.getElementById('trendChart').getContext('2d');
-        const trendChart = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
-                datasets: [
-                    {
-                        label: '苹果园面积 (公顷)',
-                        data: [850, 880, 920, 950, 980, 1020, 1080, 1120, 1160, 1210, 1245],
-                        borderColor: '#3b82f6',
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        tension: 0.3,
-                        fill: true
-                    },
-                    {
-                        label: '其他果园面积 (公顷)',
-                        data: [420, 430, 440, 450, 460, 470, 480, 490, 500, 510, 520],
-                        borderColor: '#10b981',
-                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
-                        tension: 0.3,
-                        fill: true
                     }
-                ]
             },
-            options: {
-                responsive: true,
-                plugins: {
-                    legend: {
-                        position: 'top',
-                    },
-                    tooltip: {
-                        mode: 'index',
-                        intersect: false,
                     }
                 },
-                scales: {
-                    y: {
-                        beginAtZero: false,
-                        title: {
-                            display: true,
-                            text: '面积 (公顷)'
-                        }
                     }
                 }
-            }
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/pingguo1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>苹果产销流向图谱分析</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/china-map-data@1.0.0/dist/china.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .map-container {
+            width: 100%;
+            height: 500px;
+            background-color: #f5f7fa;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
+        .analysis-card {
+            transition: all 0.3s ease;
         }
+        .analysis-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
         }
+        .ai-suggestion {
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
+            border-left: 4px solid #3b82f6;
         }
+        .heatmap-legend {
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 4px;
+            padding: 5px 10px;
         }
+        .flow-legend {
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 4px;
+            padding: 5px 10px;
         }
     </style>
 </head>
+<body class="bg-gray-50">
+    <div class="container mx-auto px-4 py-6">
+        <!-- 标题区域 -->
+        <div class="flex justify-between items-center mb-6">
+            <div>
+                <h1 class="text-3xl font-bold text-gray-800">苹果产销流向图谱分析</h1>
+                <p class="text-gray-600">全国苹果产业链物流与价格动态监测平台</p>
+            </div>
+            <div class="flex space-x-4">
+                <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-calendar-alt mr-2"></i>
+                    <span>2023年11月数据</span>
                 </div>
+                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-download mr-2"></i>
+                    <span>导出报告</span>
+                </button>
             </div>
+        </div>
+        <!-- 主要内容区域 -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <!-- 左侧产区选择器 -->
+            <div class="lg:col-span-1 bg-white rounded-lg shadow p-4">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                    <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
+                    主产区选择
                 </h2>
                 <div class="space-y-3">
+                    <div class="p-3 rounded-lg bg-blue-50 border border-blue-200 cursor-pointer hover:bg-blue-100 transition">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium text-blue-800">烟台产区</span>
+                            <span class="text-sm text-blue-600">山东</span>
                         </div>
+                        <div class="mt-1 text-sm text-gray-600">月均出货量: 12.5万吨</div>
                     </div>
+                    <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium text-gray-800">渭南产区</span>
+                            <span class="text-sm text-gray-600">陕西</span>
                         </div>
+                        <div class="mt-1 text-sm text-gray-600">月均出货量: 8.2万吨</div>
                     </div>
+                    <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium text-gray-800">洛川产区</span>
+                            <span class="text-sm text-gray-600">陕西</span>
                         </div>
+                        <div class="mt-1 text-sm text-gray-600">月均出货量: 6.7万吨</div>
                     </div>
+                    <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium text-gray-800">静宁产区</span>
+                            <span class="text-sm text-gray-600">甘肃</span>
                         </div>
+                        <div class="mt-1 text-sm text-gray-600">月均出货量: 5.3万吨</div>
+                    </div>
+                    <div class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium text-gray-800">昭通产区</span>
+                            <span class="text-sm text-gray-600">云南</span>
+                        </div>
+                        <div class="mt-1 text-sm text-gray-600">月均出货量: 3.1万吨</div>
                     </div>
                 </div>
+                <div class="mt-6">
+                    <h3 class="font-medium text-gray-700 mb-2 flex items-center">
+                        <i class="fas fa-filter text-blue-500 mr-2"></i>
+                        筛选条件
+                    </h3>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">时间范围</label>
+                            <select class="w-full p-2 border border-gray-300 rounded-md">
+                                <option>近1个月</option>
+                                <option>近3个月</option>
+                                <option>近6个月</option>
+                                <option selected>2023年全年</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">苹果品种</label>
+                            <select class="w-full p-2 border border-gray-300 rounded-md">
+                                <option selected>全部品种</option>
+                                <option>红富士</option>
+                                <option>嘎啦</option>
+                                <option>黄元帅</option>
+                                <option>国光</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">物流方式</label>
+                            <select class="w-full p-2 border border-gray-300 rounded-md">
+                                <option selected>全部方式</option>
+                                <option>冷链运输</option>
+                                <option>普通货运</option>
+                                <option>铁路运输</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
             </div>
+            <!-- 主地图区域 -->
+            <div class="lg:col-span-3">
+                <div class="bg-white rounded-lg shadow p-4">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold text-gray-800 flex items-center">
+                            <i class="fas fa-map text-blue-500 mr-2"></i>
+                            全国苹果物流流向图谱
+                        </h2>
+                        <div class="flex space-x-2">
+                            <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center">
+                                <i class="fas fa-layer-group mr-1"></i>
+                                <span>图层控制</span>
+                            </button>
+                            <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm flex items-center">
+                                <i class="fas fa-search mr-1"></i>
+                                <span>搜索城市</span>
+                            </button>
+                        </div>
                     </div>
+                    <div class="map-container" id="mainMap"></div>
+                    <div class="flex justify-between mt-3 text-sm text-gray-600">
+                        <div class="flow-legend">
+                            <div class="flex items-center mb-1">
+                                <span class="w-4 h-1 bg-green-500 mr-2"></span>
+                                <span>价格差 < 0.5元/kg</span>
+                            </div>
+                            <div class="flex items-center mb-1">
+                                <span class="w-6 h-1 bg-yellow-500 mr-2"></span>
+                                <span>价格差 0.5-1元/kg</span>
                             </div>
+                            <div class="flex items-center">
+                                <span class="w-8 h-1 bg-red-500 mr-2"></span>
+                                <span>价格差 > 1元/kg</span>
                             </div>
                         </div>
+                        <div class="heatmap-legend">
+                            <div class="flex items-center">
+                                <span class="text-xs mr-1">低</span>
+                                <span class="w-4 h-4 bg-blue-100 mr-1"></span>
+                                <span class="w-4 h-4 bg-blue-300 mr-1"></span>
+                                <span class="w-4 h-4 bg-blue-500 mr-1"></span>
+                                <span class="w-4 h-4 bg-blue-700 mr-1"></span>
+                                <span class="w-4 h-4 bg-blue-900 mr-1"></span>
+                                <span class="text-xs">高</span>
                             </div>
+                            <div class="text-center mt-1">销售热度</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 智能分析结果 -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                    <div class="analysis-card bg-white rounded-lg shadow p-4">
+                        <div class="flex items-center mb-3">
+                            <div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3">
+                                <i class="fas fa-exchange-alt"></i>
                             </div>
+                        </div>
+                        <h3 class="font-semibold text-gray-800 mb-2">枢纽市场识别</h3>
+                        <ul class="text-sm text-gray-600 space-y-1">
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
+                                <span>北京新发地市场 (中转率82%)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
+                                <span>广州江南市场 (中转率76%)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
+                                <span>郑州万邦市场 (中转率68%)</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="analysis-card bg-white rounded-lg shadow p-4">
+                        <div class="flex items-center mb-3">
+                            <div class="bg-green-100 text-green-600 p-2 rounded-full mr-3">
+                                <i class="fas fa-map-marked-alt"></i>
                             </div>
                         </div>
+                        <h3 class="font-semibold text-gray-800 mb-2">潜在空白市场</h3>
+                        <ul class="text-sm text-gray-600 space-y-1">
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                                <span>南宁市 (需求缺口3.2万吨)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                                <span>海口市 (价格溢价15%)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                                <span>拉萨市 (运输成本高)</span>
+                            </li>
+                        </ul>
                     </div>
+                    <div class="analysis-card bg-white rounded-lg shadow p-4">
+                        <div class="flex items-center mb-3">
+                            <div class="bg-red-100 text-red-600 p-2 rounded-full mr-3">
+                                <i class="fas fa-temperature-low"></i>
+                            </div>
                         </div>
+                        <h3 class="font-semibold text-gray-800 mb-2">冷链瓶颈路径</h3>
+                        <ul class="text-sm text-gray-600 space-y-1">
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
+                                <span>烟台-广州 (损耗率8.5%)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
+                                <span>洛川-上海 (冷链覆盖率60%)</span>
+                            </li>
+                            <li class="flex items-center">
+                                <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
+                                <span>静宁-成都 (温度波动大)</span>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
+        </div>
+        <!-- AI建议框 -->
+        <div class="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <div class="lg:col-span-1"></div>
+            <div class="lg:col-span-3 ai-suggestion rounded-lg shadow p-4">
+                <div class="flex items-center mb-3">
+                    <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3">
+                        <i class="fas fa-robot"></i>
                     </div>
+                    <h3 class="font-semibold text-gray-800">AI供应链优化建议</h3>
                 </div>
+                <div class="text-sm text-gray-700">
+                    <p class="mb-2">基于当前数据分析，系统建议：</p>
+                    <ol class="list-decimal pl-5 space-y-1">
+                        <li>增加烟台至南宁的直达冷链线路，预计可降低运输成本12%</li>
+                        <li>在广州江南市场增设临时仓储，缓解11-12月旺季拥堵</li>
+                        <li>针对拉萨市场，建议采用铁路+公路联运模式，平衡成本与时效</li>
+                        <li>静宁产区可考虑与成都本地经销商建立长期合作，减少中间环节</li>
+                    </ol>
+                    <div class="mt-3 flex justify-end">
+                        <button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm">
+                            生成详细优化方案
+                        </button>
+                    </div>
                 </div>
             </div>
+        </div>
     </div>
     <script>
         // 初始化地图
+        const chartDom = document.getElementById('mainMap');
+        const myChart = echarts.init(chartDom);
+        // 模拟数据
+        const geoCoordMap = {
+            '烟台': [121.39, 37.52],
+            '渭南': [109.49, 34.50],
+            '洛川': [109.42, 35.76],
+            '北京': [116.40, 39.90],
+            '上海': [121.47, 31.23],
+            '广州': [113.26, 23.12],
+            '成都': [104.06, 30.67],
+            '郑州': [113.62, 34.75],
+            '武汉': [114.30, 30.60],
+            '南京': [118.78, 32.04],
+            '杭州': [120.15, 30.28],
+            '西安': [108.93, 34.27],
+            '长沙': [112.93, 28.23],
+            '南宁': [108.32, 22.82],
+            '海口': [110.20, 20.05],
+            '拉萨': [91.11, 29.97]
+        };
+        const heatData = [
+            {name: '北京', value: 95},
+            {name: '上海', value: 90},
+            {name: '广州', value: 88},
+            {name: '成都', value: 75},
+            {name: '郑州', value: 70},
+            {name: '武汉', value: 68},
+            {name: '南京', value: 65},
+            {name: '杭州', value: 63},
+            {name: '西安', value: 60},
+            {name: '长沙', value: 58},
+            {name: '南宁', value: 45},
+            {name: '海口', value: 40},
+            {name: '拉萨', value: 30}
+        ];
+        const convertData = function (data) {
+            const res = [];
+            for (let i = 0; i < data.length; i++) {
+                const geoCoord = geoCoordMap[data[i].name];
+                if (geoCoord) {
+                    res.push({
+                        name: data[i].name,
+                        value: geoCoord.concat(data[i].value)
+                    });
                 }
+            }
+            return res;
         };
+        const series = [{
+            name: '销售热度',
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            data: convertData(heatData),
+            symbolSize: function (val) {
+                return val[2] / 5;
+            },
+            label: {
+                formatter: '{b}',
+                position: 'right',
+                show: false
+            },
+            itemStyle: {
+                color: '#1e90ff'
+            },
+            emphasis: {
+                label: {
+                    show: true
+                }
             }
+        }, {
+            name: '热力图',
+            type: 'heatmap',
+            coordinateSystem: 'geo',
+            data: convertData(heatData),
+            pointSize: 10,
+            blurSize: 15
+        }];
+        // 添加流向数据
+        const flowData = [
+            {from: '烟台', to: '北京', value: 5, priceDiff: 0.3},
+            {from: '烟台', to: '上海', value: 4, priceDiff: 0.8},
+            {from: '烟台', to: '广州', value: 6, priceDiff: 1.2},
+            {from: '渭南', to: '北京', value: 3, priceDiff: 0.4},
+            {from: '渭南', to: '成都', value: 4, priceDiff: 0.6},
+            {from: '渭南', to: '郑州', value: 2, priceDiff: 0.2},
+            {from: '洛川', to: '上海', value: 3, priceDiff: 0.7},
+            {from: '洛川', to: '广州', value: 2, priceDiff: 1.1},
+            {from: '洛川', to: '武汉', value: 2, priceDiff: 0.5},
+            {from: '北京', to: '南京', value: 2, priceDiff: 0.4},
+            {from: '北京', to: '杭州', value: 2, priceDiff: 0.5},
+            {from: '广州', to: '南宁', value: 1, priceDiff: 0.8},
+            {from: '广州', to: '海口', value: 1, priceDiff: 1.3},
+            {from: '郑州', to: '长沙', value: 1, priceDiff: 0.6},
+            {from: '郑州', to: '西安', value: 1, priceDiff: 0.3}
+        ];
+        flowData.forEach(item => {
+            series.push({
+                name: `${item.from} → ${item.to}`,
+                type: 'lines',
+                zlevel: 1,
+                effect: {
+                    show: true,
+                    period: 6,
+                    trailLength: 0.7,
+                    color: '#fff',
+                    symbolSize: 3
+                },
+                lineStyle: {
+                    normal: {
+                        width: item.value,
+                        curveness: 0.2,
+                        color: getLineColor(item.priceDiff)
+                    }
+                },
+                data: [{
+                    coords: [geoCoordMap[item.from], geoCoordMap[item.to]],
+                    value: item.value
+                }]
+            });
+        });
+        function getLineColor(priceDiff) {
+            if (priceDiff < 0.5) return '#10B981'; // 绿色
+            if (priceDiff < 1) return '#F59E0B'; // 黄色
+            return '#EF4444'; // 红色
         }
+        // 配置项
+        const option = {
+            tooltip: {
+                trigger: 'item',
+                formatter: params => {
+                    if (params.seriesType === 'scatter') {
+                        return `${params.name}<br/>销售热度: ${params.value[2]}`;
+                    } else if (params.seriesType === 'lines') {
+                        const data = params.data;
+                        return `${params.seriesName}<br/>流量: ${data.value}万吨<br/>价格差: ${flowData.find(f => f.from === params.seriesName.split(' → ')[0] && f.to === params.seriesName.split(' → ')[1]).priceDiff}元/kg`;
                     }
+                }
             },
+            geo: {
+                map: 'china',
+                roam: true,
+                label: {
+                    emphasis: {
+                        show: true
                     }
                 },
+                itemStyle: {
+                    normal: {
+                        areaColor: '#f5f7fa',
+                        borderColor: '#d1d5db'
+                    },
+                    emphasis: {
+                        areaColor: '#e5e7eb'
                     }
                 }
+            },
+            series: series
+        };
+        myChart.setOption(option);
+        // 响应窗口大小变化
+        window.addEventListener('resize', function() {
+            myChart.resize();
         });
+        // 产区选择交互
+        document.querySelectorAll('.p-3.rounded-lg').forEach(item => {
+            item.addEventListener('click', function() {
+                // 移除所有选中状态
+                document.querySelectorAll('.p-3.rounded-lg').forEach(el => {
+                    el.classList.remove('bg-blue-50', 'border-blue-200');
+                    el.classList.add('border-gray-200');
+                });
+                // 添加当前选中状态
+                this.classList.remove('border-gray-200');
+                this.classList.add('bg-blue-50', 'border-blue-200');
+                // 模拟地图更新
+                const region = this.querySelector('.font-medium').textContent.replace('产区', '');
+                highlightRegion(region);
+            });
+        });
+        function highlightRegion(region) {
+            // 这里应该更新地图高亮显示选定产区的流向
+            console.log(`高亮显示 ${region} 的流向`);
+            // 在实际应用中，这里会调用地图API更新显示
+            // 例如：myChart.dispatchAction({...});
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/pingguo1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>