| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <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> |
|
|
| |
| <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> |
| |
| </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> |
| </html> |
