📋 项目概述
在现代企业的全球化运营中,如何直观地展示全球物流网络和高效管理库存流转,是每个企业面临的挑战。

本项目是一个BI数据可视化平台,完美整合了两大核心功能:

🗺️ 全球地图数据可视化 - 一目了然监控全球物流网络
📦 FIFO库存管理系统 - 智能先进先出管理,降低库存风险
适用场景: 跨国企业物流监控、供应链数据展示、库存批次管理
✨ 核心功能亮点
1️⃣ 全球地图可视化模块
业务价值: 让复杂的地理分布数据变得直观易懂

功能特色:

🌍 全球地图展示 - 支持世界地图交互式查看
📍 物流路线可视化 - 动态展示从天津枢纽到全球各地的物流线路
🎨 科技感UI设计 - 深空渐变背景、雷达扫描动画、脉冲标记点
🔍 智能交互 - 鼠标悬停高亮、点击选择国家、自动聚焦
多维度数据展示 - 按国家、地区、时间范围筛选数据
技术亮点:

使用 Leaflet.js 实现高性能地图渲染
Canvas渲染模式 优化边界线平滑度
多层光晕动画 + 网格线营造科技感
统一透明度策略,确保视觉一致性
2️⃣ FIFO先进先出库存管理
业务价值: 解决库存积压和过期风险,提升流转效率

功能特色:

📦 库存批次管理 - 精确跟踪每个批次的入库时间
⏰ 自动FIFO排序 - 系统自动按入库时间排序,确保旧库存优先出库
📥 Excel/CSV批量导入 - 支持多种格式,简化数据录入
多维查询筛选 - 按时间、地区、产品等多条件查询
数据明细展示 - 分页展示,支持导出
🛠️ 技术架构
后端技术栈
FastAPI - 高性能异步Web框架,自动生成API文档
SQLAlchemy - ORM数据库操作,支持SQLite/MySQL切换
Pandas + Openpyxl - Excel数据处理与解析
Jinja2 - 服务端模板渲染
前端技术栈
Leaflet.js - 开源地图库,支持GeoJSON数据
Tailwind CSS - 原子化CSS框架,快速构建响应式UI
原生JavaScript - 无框架依赖,轻量高效
项目结构
bi/
├── app/ # 主应用程序
│ ├── core/ # 核心配置与数据库
│ ├── modules/ # 业务模块
│ │ ├── map/ # 地图可视化模块
│ │ │ ├── models.py # 数据模型
│ │ │ ├── routers.py # API路由
│ │ │ ├── schemas.py # 数据验证
│ │ │ └── services.py # 业务逻辑
│ │ └── fifo/ # FIFO库存管理模块
│ └── templates/ # HTML模板
├── static/ # 静态资源
│ ├── css/ # 样式文件
│ ├── js/ # 前端脚本
│ └── libs/ # 第三方库
└── scripts/ # 运维脚本
💡 技术难点与解决方案
难点1: 地图边界线渲染不一致
问题: 不同国家边界线粗细视觉差异明显

解决方案:

启用Canvas渲染模式(preferCanvas: true)
统一所有状态线条透明度为100%
使用固定宽度(weight: 1.5)和圆角连接
通过颜色区分业务状态,而非粗细或透明度
难点2: 科技感UI设计
问题: 如何营造类似指挥中心的视觉效果

解决方案:

深空渐变背景(#0a0e1a → #1a1a2e → #0f1729)
多层径向渐变光晕 + 呼吸动画
360度旋转雷达扫描效果
脉冲标记点 + 流动物流路线动画
难点3: Excel数据导入
问题: 处理复杂格式、空值、汇总行

解决方案:

Pandas保留数据原子性,后端统一处理
严格区分业务"0"和"空"
前向填充仅限描述性字段
智能识别并过滤汇总行
📸 效果展示
地图可视化:

深空科技感背景
动态物流路线
脉冲标记点
雷达扫描动画
数据管理:

多维度筛选
分页展示
批量导入导出
🎯 适用场景
跨国企业物流监控 - 实时展示全球物流网络
供应链数据展示 - 向管理层汇报供应链状况
库存批次管理 - 医药、食品等保质期敏感行业
BI数据大屏 - 展厅、会议室数据展示
🌟 项目优势
✅ 开箱即用 - 完善的部署脚本,快速上手
✅ 高性能 - FastAPI异步处理,支持并发
✅ 易扩展 - 模块化设计,便于添加新功能
✅ 美观实用 - 科技感UI,适合展示和汇报
✅ 数据安全 - 后端统一处理,防止前端篡改

📝 后续规划
添加实时数据刷新
支持更多地图投影方式
数据导出报表功能
用户权限管理
Docker容器化部署
🤝 贡献与反馈
欢迎Star、Fork、提Issue和PR!

核心代码：

// 地图初始化 - 启用Canvas渲染提升性能
const map = L.map('map', {
    center: [20, 0],
    zoom: 2,
    zoomControl: true,
    preferCanvas: true,  // 使用Canvas代替SVG,提升平滑度
    zoomAnimation: true,
    fadeAnimation: true
});

// 统一样式函数 - 所有状态线宽一致
function styleFn(feature) {
    const featureName = feature.properties?.name || '';
    const { isSelected, isHighlighted, isActive } = getFeatureState(featureName);
    return {
        fillColor: isSelected || isHighlighted ? 'rgba(34, 197, 94, 0.7)' 
                   : isActive ? 'rgba(16, 185, 129, 0.5)' 
                   : 'rgba(30, 58, 95, 0.5)',
        color: isSelected || isHighlighted ? '#4ade80' 
              : isActive ? '#10b981' 
              : '#3b82f6',
        weight: 1.5,  // 所有状态统一线宽
        fillOpacity: isSelected || isHighlighted ? 0.85 
                     : isActive ? 0.6 
                     : 0.45,
        opacity: 1.0,  // 统一透明度,避免视觉差异
        lineCap: 'round',
        lineJoin: 'round'
    };
}

/* 地图容器 - 深空渐变背景 */
#map {
    background: linear-gradient(135deg, #0a0e1a 0%, #1a1a2e 50%, #0f1729 100%);
}

/* 多层光晕效果 + 呼吸动画 */
.main-map::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        radial-gradient(ellipse at 15% 40%, rgba(99, 102, 241, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 15%, rgba(168, 85, 247, 0.18) 0%, transparent 45%);
    pointer-events: none;
    z-index: 1;
    animation: bg-pulse 10s ease-in-out infinite;
}

@keyframes bg-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* 雷达扫描动画 */
.radar-scan {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, 
               rgba(59, 130, 246, 0.1) 60deg, transparent 120deg);
    border-radius: 50%;
    animation: radar-rotate 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes radar-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}