Spaces:

maomaobj
/

apple2

Running

App Files Files Community

maomaobj commited on Jun 22, 2025

Commit

67bc3c7

verified ·

1 Parent(s): cffbae8

各区域库存分布的界面有错误，无限延长了。请修正错误。 - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +393 -346

index.html CHANGED Viewed

@@ -3,421 +3,468 @@
 <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>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
     <style>
         .map-container {
-            background-image: linear-gradient(to bottom, #f0f9ff, #e0f2fe);
             position: relative;
-            border-radius: 12px;
             overflow: hidden;
         }
-        .flow-line {
             position: absolute;
-            background: linear-gradient(to right, #3b82f6, #10b981);
-            height: 3px;
-            transform-origin: left center;
-            animation: flow 3s infinite ease-in-out;
-            box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
-        }
-        @keyframes flow {
-            0% { opacity: 0.3; }
-            50% { opacity: 1; }
-            100% { opacity: 0.3; }
         }
-        .city-dot {
             position: absolute;
             width: 12px;
             height: 12px;
             border-radius: 50%;
-            background-color: #3b82f6;
-            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
         }
-        .info-popup {
-            position: absolute;
-            background-color: white;
-            border-radius: 8px;
-            padding: 12px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            z-index: 10;
-            min-width: 150px;
         }
         .chart-container {
-            background-color: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-        }
-        .select-container {
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        }
-        .dropdown {
-            position: relative;
-            display: inline-block;
-            width: 100%;
         }
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: white;
-            width: 100%;
-            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-            z-index: 1;
-            border-radius: 8px;
             max-height: 300px;
             overflow-y: auto;
         }
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-        .multi-select-item {
-            padding: 8px 12px;
-            cursor: pointer;
         }
-        .multi-select-item:hover {
-            background-color: #f0f9ff;
-        }
-        .multi-select-item.selected {
-            background-color: #3b82f6;
-            color: white;
-        }
-        #sankey-chart, #bar-chart, #line-chart {
-            width: 100%;
-            height: 100%;
         }
     </style>
 </head>
-<body class="bg-gray-50 font-sans">
     <div class="container mx-auto px-4 py-6">
-        <header class="mb-6">
-            <h1 class="text-2xl font-bold text-gray-800">农产品供应链智能分析</h1>
-            <p class="text-gray-600">烟台苹果流通数据分析</p>
-        </header>
-        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
-            <!-- 左侧控制面板 -->
-            <div class="lg:col-span-3 space-y-4">
-                <div class="select-container p-4">
-                    <h3 class="font-medium text-gray-700 mb-2">产区选择</h3>
-                    <div class="dropdown">
-                        <button class="w-full px-4 py-2 text-left border border-gray-200 rounded-lg bg-white flex justify-between items-center">
-                            <span>烟台市</span>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                            </svg>
-                        </button>
-                        <div class="dropdown-content mt-1">
-                            <div class="p-2 hover:bg-blue-50 cursor-pointer">烟台市</div>
-                            <div class="p-2 hover:bg-blue-50 cursor-pointer">威海市</div>
-                            <div class="p-2 hover:bg-blue-50 cursor-pointer">青岛市</div>
-                        </div>
                     </div>
                 </div>
-                <div class="select-container p-4">
-                    <h3 class="font-medium text-gray-700 mb-2">销区选择</h3>
-                    <div class="dropdown">
-                        <button class="w-full px-4 py-2 text-left border border-gray-200 rounded-lg bg-white flex justify-between items-center">
-                            <span>已选择 4 个城市</span>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                            </svg>
-                        </button>
-                        <div class="dropdown-content mt-1 p-2">
-                            <div class="multi-select-item selected">北京市</div>
-                            <div class="multi-select-item selected">上海市</div>
-                            <div class="multi-select-item selected">广州市</div>
-                            <div class="multi-select-item selected">成都市</div>
-                            <div class="multi-select-item">深圳市</div>
-                            <div class="multi-select-item">杭州市</div>
-                            <div class="multi-select-item">武汉市</div>
-                            <div class="multi-select-item">南京市</div>
-                        </div>
                     </div>
                 </div>
-                <div class="select-container p-4">
-                    <h3 class="font-medium text-gray-700 mb-2">时间范围</h3>
-                    <input type="text" id="date-range" class="w-full px-4 py-2 border border-gray-200 rounded-lg bg-white" placeholder="选择日期范围" readonly>
                 </div>
-                <div class="select-container p-4">
-                    <h3 class="font-medium text-gray-700 mb-2">数据概览</h3>
-                    <div class="space-y-3">
-                        <div class="flex justify-between items-center">
-                            <span class="text-gray-600">总流通量</span>
-                            <span class="font-medium">12.8 万吨</span>
                         </div>
-                        <div class="flex justify-between items-center">
-                            <span class="text-gray-600">平均价格</span>
-                            <span class="font-medium">¥6.5/公斤</span>
                         </div>
-                        <div class="flex justify-between items-center">
-                            <span class="text-gray-600">流通效率</span>
-                            <span class="font-medium">92.4%</span>
                         </div>
                     </div>
                 </div>
             </div>
-            <!-- 中间地图区域 -->
-            <div class="lg:col-span-6">
-                <div class="map-container h-full p-4">
-                    <div class="relative h-full w-full" id="china-map">
-                        <!-- 这里放置中国地图和流动线条 -->
-                        <div class="city-dot" style="top: 30%; left: 40%;" data-city="烟台"></div>
-                        <div class="city-dot" style="top: 25%; left: 50%;" data-city="北京"></div>
-                        <div class="city-dot" style="top: 40%; left: 60%;" data-city="上海"></div>
-                        <div class="city-dot" style="top: 60%; left: 55%;" data-city="广州"></div>
-                        <div class="city-dot" style="top: 50%; left: 40%;" data-city="成都"></div>
-                        <div class="flow-line" style="width: 150px; top: 32%; left: 42%; transform: rotate(15deg);"></div>
-                        <div class="flow-line" style="width: 200px; top: 35%; left: 42%; transform: rotate(25deg);"></div>
-                        <div class="flow-line" style="width: 180px; top: 40%; left: 42%; transform: rotate(35deg);"></div>
-                        <div class="flow-line" style="width: 220px; top: 45%; left: 42%; transform: rotate(45deg);"></div>
-                        <div class="info-popup" style="top: 42%; left: 62%;">
-                            <div class="font-medium text-gray-800">上海市</div>
-                            <div class="text-blue-600">流入总量: 2.5万吨</div>
-                            <div class="text-sm text-gray-500">同比增长: +12.3%</div>
-                        </div>
-                    </div>
                 </div>
             </div>
-            <!-- 右侧数据可视化 -->
-            <div class="lg:col-span-3 space-y-4">
-                <div class="chart-container p-4 h-64">
-                    <h3 class="font-medium text-gray-700 mb-2">烟台苹果-主要流向分析</h3>
-                    <div id="sankey-chart"></div>
                 </div>
-                <div class="chart-container p-4 h-64">
-                    <h3 class="font-medium text-gray-700 mb-2">TOP 10 销往城市</h3>
-                    <div id="bar-chart"></div>
                 </div>
-                <div class="chart-container p-4 h-64">
-                    <h3 class="font-medium text-gray-700 mb-2">价格关联性分析</h3>
-                    <div id="line-chart"></div>
                 </div>
             </div>
         </div>
     </div>
     <script>
-        // 初始化日期选择器
-        flatpickr("#date-range", {
-            mode: "range",
-            defaultDate: ["2024-01-01", "2024-12-31"],
-            locale: "zh"
         });
-        // 多选功能
-        document.querySelectorAll('.multi-select-item').forEach(item => {
-            item.addEventListener('click', function() {
-                this.classList.toggle('selected');
-                updateSelectedCount();
-            });
-        });
-        function updateSelectedCount() {
-            const selectedCount = document.querySelectorAll('.multi-select-item.selected').length;
-            document.querySelector('.dropdown button span').textContent = `已选择 ${selectedCount} 个城市`;
-        }
-        // 初始化图表
-        document.addEventListener('DOMContentLoaded', function() {
-            // Sankey 图
-            const sankeyChart = echarts.init(document.getElementById('sankey-chart'));
-            const sankeyOption = {
-                series: [{
-                    type: 'sankey',
-                    layout: 'none',
-                    data: [
-                        {name: '烟台市'},
-                        {name: '北京市'},
-                        {name: '上海市'},
-                        {name: '广州市'},
-                        {name: '成都市'}
                     ],
-                    links: [
-                        {source: '烟台市', target: '北京市', value: 4.2},
-                        {source: '烟台市', target: '上海市', value: 2.5},
-                        {source: '烟台市', target: '广州市', value: 3.1},
-                        {source: '烟台市', target: '成都市', value: 1.8}
                     ],
-                    label: {
-                        color: '#4b5563'
-                    },
-                    itemStyle: {
-                        color: '#3b82f6'
-                    },
-                    lineStyle: {
-                        color: 'source',
-                        opacity: 0.6
-                    }
                 }]
-            };
-            sankeyChart.setOption(sankeyOption);
-            // 柱状图
-            const barChart = echarts.init(document.getElementById('bar-chart'));
-            const barOption = {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    }
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'value',
-                    axisLine: {
-                        lineStyle: {
-                            color: '#9ca3af'
-                        }
                     },
-                    axisLabel: {
-                        color: '#6b7280'
-                    }
-                },
-                yAxis: {
-                    type: 'category',
-                    data: ['北京市', '上海市', '广州市', '成都市', '深圳市', '杭州市', '武汉市', '南京市', '重庆市', '天津市'],
-                    axisLine: {
-                        lineStyle: {
-                            color: '#9ca3af'
-                        }
-                    },
-                    axisLabel: {
-                        color: '#6b7280'
-                    }
-                },
-                series: [{
-                    name: '流通量(万吨)',
-                    type: 'bar',
-                    data: [4.2, 2.5, 3.1, 1.8, 1.2, 0.9, 0.7, 0.6, 0.5, 0.4],
-                    itemStyle: {
-                        color: function(params) {
-                            const colorList = ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe'];
-                            return colorList[params.dataIndex % colorList.length];
                         }
                     }
-                }]
-            };
-            barChart.setOption(barOption);
-            // 折线图
-            const lineChart = echarts.init(document.getElementById('line-chart'));
-            const lineOption = {
-                tooltip: {
-                    trigger: 'axis'
-                },
-                legend: {
-                    data: ['烟台市(产地)', '北京市', '上海市'],
-                    textStyle: {
-                        color: '#4b5563'
-                    }
-                },
-                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: '#9ca3af'
                         }
                     },
-                    axisLabel: {
-                        color: '#6b7280'
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    axisLine: {
-                        lineStyle: {
-                            color: '#9ca3af'
                         }
-                    },
-                    axisLabel: {
-                        color: '#6b7280',
-                        formatter: '{value} ¥'
                     }
-                },
-                series: [
                     {
-                        name: '烟台市(产地)',
-                        type: 'line',
-                        data: [5.2, 5.5, 5.8, 6.2, 6.5, 6.3, 6.0, 5.8, 5.5, 5.2, 5.0, 4.8],
-                        itemStyle: {
-                            color: '#3b82f6'
-                        },
-                        lineStyle: {
-                            width: 3
-                        }
                     },
                     {
-                        name: '北京市',
-                        type: 'line',
-                        data: [6.5, 6.8, 7.0, 7.2, 7.5, 7.3, 7.0, 6.8, 6.5, 6.2, 6.0, 5.8],
-                        itemStyle: {
-                            color: '#10b981'
-                        },
-                        lineStyle: {
-                            width: 3
                         }
                     },
-                    {
-                        name: '上海市',
-                        type: 'line',
-                        data: [6.8, 7.0, 7.2, 7.5, 7.8, 7.5, 7.2, 7.0, 6.8, 6.5, 6.2, 6.0],
-                        itemStyle: {
-                            color: '#f59e0b'
                         },
-                        lineStyle: {
-                            width: 3
                         }
                     }
-                ]
-            };
-            lineChart.setOption(lineOption);
-            // 响应式调整图表大小
-            window.addEventListener('resize', function() {
-                sankeyChart.resize();
-                barChart.resize();
-                lineChart.resize();
             });
         });
     </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/apple2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <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/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.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: 400px;
+            background-color: #f8fafc;
+            border-radius: 0.5rem;
             position: relative;
             overflow: hidden;
         }
+        .map-tooltip {
             position: absolute;
+            background: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            font-size: 12px;
+            z-index: 10;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
         }
+        .risk-dot {
             position: absolute;
             width: 12px;
             height: 12px;
             border-radius: 50%;
+            transform: translate(-6px, -6px);
+            cursor: pointer;
         }
+        .risk-dot:hover {
+            transform: translate(-6px, -6px) scale(1.5);
         }
         .chart-container {
+            min-height: 300px;
         }
+        .table-container {
             max-height: 300px;
             overflow-y: auto;
         }
+        .table-container::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
         }
+        .table-container::-webkit-scrollbar-thumb {
+            background-color: rgba(0,0,0,0.2);
+            border-radius: 3px;
         }
     </style>
 </head>
+<body class="bg-gray-50 text-gray-800 font-sans">
     <div class="container mx-auto px-4 py-6">
+        <!-- 顶部标题和导航 -->
+        <div class="flex justify-between items-center mb-6">
+            <div>
+                <h1 class="text-2xl font-bold">苹果冷链库存分析与风险管理</h1>
+                <p class="text-gray-600">山东省冷链仓储实时监控与分析</p>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center">
+                    <i class="fas fa-calendar-alt mr-2 text-gray-500"></i>
+                    <span id="current-date" class="text-sm">2023年11月15日</span>
+                </div>
+                <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-md text-sm hover:bg-blue-200 transition">
+                    <i class="fas fa-sync-alt mr-1"></i>刷新数据
+                </button>
+            </div>
+        </div>
+        <!-- KPI卡片 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            <!-- 当前总库存量 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-500">当前总库存量</p>
+                        <h2 class="text-2xl font-bold mt-1">12.8 万吨</h2>
+                    </div>
+                    <div class="bg-green-50 text-green-600 px-2 py-1 rounded-full text-xs flex items-center">
+                        <i class="fas fa-arrow-up mr-1"></i>同比+5.2%
                     </div>
                 </div>
+                <div class="mt-3 h-2 bg-gray-100 rounded-full overflow-hidden">
+                    <div class="h-full bg-blue-500 rounded-full" style="width: 78%"></div>
+                </div>
+                <p class="text-xs text-gray-500 mt-1">库容利用率 78%</p>
+            </div>
+            <!-- 平均库龄 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-500">平均库龄</p>
+                        <h2 class="text-2xl font-bold mt-1">85 天</h2>
+                    </div>
+                    <div class="bg-yellow-50 text-yellow-600 px-2 py-1 rounded-full text-xs flex items-center">
+                        <i class="fas fa-arrow-up mr-1"></i>同比+12天
+                    </div>
+                </div>
+                <div class="mt-3 flex justify-between text-xs text-gray-500">
+                    <span>0天</span>
+                    <span>180���</span>
+                </div>
+                <div class="mt-1 h-2 bg-gray-100 rounded-full overflow-hidden">
+                    <div class="h-full bg-purple-500 rounded-full" style="width: 47%"></div>
+                </div>
+            </div>
+            <!-- 月度周转率 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-500">月度周转率</p>
+                        <h2 class="text-2xl font-bold mt-1">1.2 次/月</h2>
+                    </div>
+                    <div class="bg-red-50 text-red-600 px-2 py-1 rounded-full text-xs flex items-center">
+                        <i class="fas fa-arrow-down mr-1"></i>同比-0.3次
+                    </div>
+                </div>
+                <div class="mt-3 flex items-center">
+                    <div class="w-4 h-4 bg-blue-500 rounded-full mr-2"></div>
+                    <p class="text-xs text-gray-500">行业平均 1.5次/月</p>
+                </div>
+            </div>
+            <!-- 高风险库存占比 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-sm text-gray-500">高风险库存占比</p>
+                        <h2 class="text-2xl font-bold mt-1">15%</h2>
+                    </div>
+                    <div class="bg-red-50 text-red-600 px-2 py-1 rounded-full text-xs flex items-center">
+                        <i class="fas fa-exclamation-triangle mr-1"></i>需关注
                     </div>
                 </div>
+                <div class="mt-3 relative h-4">
+                    <div class="absolute top-0 left-0 h-full w-full bg-gray-100 rounded-full"></div>
+                    <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-green-400 via-yellow-400 to-red-500 rounded-full" style="width: 100%"></div>
+                    <div class="absolute top-0 h-full w-0.5 bg-gray-800" style="left: 15%"></div>
                 </div>
+                <div class="mt-1 flex justify-between text-xs text-gray-500">
+                    <span>0%</span>
+                    <span>100%</span>
+                </div>
+            </div>
+        </div>
+        <!-- 主要图表区域 -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+            <!-- 地图 -->
+            <div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold">山东省冷链仓储分布与风险等级</h3>
+                    <div class="flex items-center space-x-2">
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 bg-green-500 rounded-full mr-1"></div>
+                            <span class="text-xs">低风险</span>
                         </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 bg-yellow-500 rounded-full mr-1"></div>
+                            <span class="text-xs">中风险</span>
                         </div>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 bg-red-500 rounded-full mr-1"></div>
+                            <span class="text-xs">高风险</span>
                         </div>
                     </div>
                 </div>
+                <div class="map-container" id="shandong-map">
+                    <div class="map-tooltip" id="map-tooltip"></div>
+                    <!-- 这里会通过JS添加风险点 -->
+                </div>
             </div>
+            <!-- 区域库存分布 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold">各区域库存分布</h3>
+                    <select class="text-xs border border-gray-200 rounded px-2 py-1 bg-white">
+                        <option>按库存量</option>
+                        <option>按库龄</option>
+                        <option>按风险等级</option>
+                    </select>
+                </div>
+                <div class="chart-container" style="height: 300px;">
+                    <canvas id="region-distribution-chart"></canvas>
                 </div>
             </div>
+        </div>
+        <!-- 底部图表区域 -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- 库存量与周转率趋势 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold">库存量与周转率趋势 (过去12个月)</h3>
+                    <div class="flex space-x-2">
+                        <button class="px-2 py-1 bg-blue-50 text-blue-600 rounded text-xs">库存量</button>
+                        <button class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">周转率</button>
+                    </div>
                 </div>
+                <div class="chart-container">
+                    <canvas id="inventory-trend-chart"></canvas>
                 </div>
+            </div>
+            <!-- 高风险库存预警列表 -->
+            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-semibold">高风险库存预警列表</h3>
+                    <button class="text-xs text-blue-600 hover:text-blue-800 flex items-center">
+                        <i class="fas fa-download mr-1"></i>导出报告
+                    </button>
+                </div>
+                <div class="table-container">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">冷库名称</th>
+                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">批次号</th>
+                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">品种等级</th>
+                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">库龄(天)</th>
+                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">建议操作</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">烟台福山冷库</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">APL-2023-0456</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">特级富士</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-red-600 font-medium">156</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">
+                                    <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">紧急出库</span>
+                                </td>
+                            </tr>
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">青岛保税冷库</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">APL-2023-0789</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">一级红富士</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-red-600 font-medium">142</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">
+                                    <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">紧急出库</span>
+                                </td>
+                            </tr>
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">威海荣成冷库</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">APL-2023-0321</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">二级国光</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-yellow-600 font-medium">128</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">
+                                    <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">优先销售</span>
+                                </td>
+                            </tr>
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">临沂兰山冷库</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">APL-2023-0678</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">一级嘎啦</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-yellow-600 font-medium">118</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">
+                                    <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">优先销售</span>
+                                </td>
+                            </tr>
+                            <tr class="hover:bg-gray-50">
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">潍坊寒亭冷库</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">APL-2023-0123</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">特级富士</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-red-600 font-medium">165</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm">
+                                    <span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">紧急出库</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
     <script>
+        // 设置当前日期
+        document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            weekday: 'long'
         });
+        // 区域库存分布图表
+        const regionCtx = document.getElementById('region-distribution-chart').getContext('2d');
+        const regionChart = new Chart(regionCtx, {
+            type: 'bar',
+            data: {
+                labels: ['烟台', '青岛', '威海', '临沂', '潍坊'],
+                datasets: [{
+                    label: '库存量 (万吨)',
+                    data: [4.8, 3.5, 2.1, 1.6, 1.2],
+                    backgroundColor: [
+                        'rgba(75, 192, 192, 0.7)',
+                        'rgba(54, 162, 235, 0.7)',
+                        'rgba(153, 102, 255, 0.7)',
+                        'rgba(255, 159, 64, 0.7)',
+                        'rgba(255, 99, 132, 0.7)',
+                        'rgba(201, 203, 207, 0.7)',
                     ],
+                    borderColor: [
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)',
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(201, 203, 207, 1)',
                     ],
+                    borderWidth: 1
                 }]
+            },
+            options: {
+                indexAxis: 'y',
+                responsive: true,
+                maintainAspectRatio: true,
+                aspectRatio: 1.5,
+                plugins: {
+                    legend: {
+                        display: false
                     },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return context.parsed.x.toFixed(1) + '万吨 (' +
+                                    Math.round(context.parsed.x / 12.8 * 100) + '%)';
+                            }
                         }
                     }
                 },
+                scales: {
+                    x: {
+                        beginAtZero: true,
+                        grid: {
+                            display: true,
+                            color: 'rgba(0, 0, 0, 0.05)'
+                        },
+                        ticks: {
+                            callback: function(value) {
+                                return value + '万吨';
+                            }
                         }
                     },
+                    y: {
+                        grid: {
+                            display: true,
+                            color: 'rgba(0, 0, 0, 0.05)'
                         }
                     }
+                }
+            }
+        });
+        // 库存量与周转率趋势图表
+        const trendCtx = document.getElementById('inventory-trend-chart').getContext('2d');
+        const trendChart = new Chart(trendCtx, {
+            type: 'line',
+            data: {
+                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                datasets: [
                     {
+                        label: '库存量 (万吨)',
+                        data: [8.2, 9.5, 10.1, 11.3, 12.0, 12.5, 13.2, 12.8, 11.5, 10.8, 12.8, 13.5],
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
+                        borderWidth: 2,
+                        tension: 0.3,
+                        yAxisID: 'y'
                     },
                     {
+                        label: '周转率 (次/月)',
+                        data: [1.5, 1.4, 1.3, 1.2, 1.1, 1.0, 1.2, 1.3, 1.4, 1.3, 1.2, 1.1],
+                        borderColor: 'rgba(255, 159, 64, 1)',
+                        backgroundColor: 'rgba(255, 159, 64, 0.1)',
+                        borderWidth: 2,
+                        tension: 0.3,
+                        yAxisID: 'y1'
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                    }
+                },
+                scales: {
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        title: {
+                            display: true,
+                            text: '库存量 (万吨)'
                         }
                     },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        grid: {
+                            drawOnChartArea: false,
                         },
+                        title: {
+                            display: true,
+                            text: '周转率 (次/月)'
                         }
                     }
+                }
+            }
+        });
+        // 山东省地图模拟
+        const mapContainer = document.getElementById('shandong-map');
+        const tooltip = document.getElementById('map-tooltip');
+        // 模拟冷库位置数据
+        const coldStorages = [
+            { name: "烟台福山冷库", x: 30, y: 80, risk: "high", inventory: "4.2万吨", age: "156天" },
+            { name: "青岛保税冷库", x: 20, y: 40, risk: "high", inventory: "3.1万吨", age: "142天" },
+            { name: "威海荣成冷库", x: 60, y: 90, risk: "medium", inventory: "1.8万吨", age: "128天" },
+            { name: "临沂兰山冷库", x: 40, y: 20, risk: "medium", inventory: "1.2万吨", age: "118天" },
+            { name: "潍坊寒亭冷库", x: 50, y: 50, risk: "high", inventory: "0.9万吨", age: "165天" },
+            { name: "济南历城冷库", x: 35, y: 30, risk: "low", inventory: "0.7万吨", age: "65天" },
+            { name: "日照岚山冷库", x: 25, y: 15, risk: "low", inventory: "0.5万吨", age: "45天" }
+        ];
+        // 添加风险点到地图
+        coldStorages.forEach(storage => {
+            const dot = document.createElement('div');
+            dot.className = `risk-dot ${storage.risk === 'high' ? 'bg-red-500' : storage.risk === 'medium' ? 'bg-yellow-500' : 'bg-green-500'}`;
+            dot.style.left = `${storage.x}%`;
+            dot.style.top = `${storage.y}%`;
+            dot.addEventListener('mouseenter', () => {
+                tooltip.innerHTML = `
+                    <div class="font-semibold">${storage.name}</div>
+                    <div class="text-xs mt-1">库存: ${storage.inventory}</div>
+                    <div class="text-xs">库龄: ${storage.age}</div>
+                    <div class="text-xs mt-1 ${storage.risk === 'high' ? 'text-red-600' : storage.risk === 'medium' ? 'text-yellow-600' : 'text-green-600'}">
+                        ${storage.risk === 'high' ? '高风险' : storage.risk === 'medium' ? '中风险' : '低风险'}
+                    </div>
+                `;
+                tooltip.style.left = `${storage.x + 2}%`;
+                tooltip.style.top = `${storage.y + 2}%`;
+                tooltip.style.opacity = '1';
             });
+            dot.addEventListener('mouseleave', () => {
+                tooltip.style.opacity = '0';
+            });
+            mapContainer.appendChild(dot);
         });
     </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/apple2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>