|
|
@@ -1,9 +1,13 @@
|
|
|
# 供应链可视化大屏实现 - Brownfield Epic
|
|
|
|
|
|
## Epic Goal
|
|
|
-实现8个农业产业的供应链可视化大屏,提供直观的数据展示和供应链网络可视化,集成到现有项目的home页面中,为农业企业决策者提供全面的产业数据洞察。
|
|
|
+实现4套农业产业组合的供应链可视化大屏,通过浏览器地址路由参数切换不同组合,每套组合内支持产业切换,提供直观的数据展示和供应链网络可视化,集成到现有项目的home页面中,为农业企业决策者提供全面的产业数据洞察。
|
|
|
|
|
|
-**更新说明**:基于最新的Figma设计文档分析,产业数量从4个扩展到8个(粮食、油脂、种业、果蔬、畜牧、水产、鲜食、泛盐)。
|
|
|
+**架构更新**:从8个独立大屏改为4套组合大屏:
|
|
|
+- 粮食-油脂组合
|
|
|
+- 种业-果蔬组合
|
|
|
+- 畜牧-水产组合
|
|
|
+- 鲜食-泛盐组合
|
|
|
|
|
|
## Epic Description
|
|
|
|
|
|
@@ -14,82 +18,61 @@
|
|
|
- **现有页面**:✅ 已有HomePage、LoginPage、MemberPage等基础页面
|
|
|
|
|
|
### 增强详情
|
|
|
-- **新增内容**:8个农业产业的可视化大屏(粮食、油脂、种业、果蔬、畜牧、水产、鲜食、泛盐),包含地图可视化、供应链网络、关键指标展示
|
|
|
-- **集成方式**:在`src/client/home/pages/SupplyChainDashboards/`目录下创建新的页面组件,使用现有Tailwind CSS样式系统
|
|
|
-- **技术实现**:React组件 + CSS可视化效果 + Recharts图表库,不引入额外地图库
|
|
|
+- **新增内容**:4套农业产业组合的可视化大屏(粮食-油脂、种业-果蔬、畜牧-水产、鲜食-泛盐),包含地图可视化、供应链网络、关键指标展示
|
|
|
+- **集成方式**:创建统一的`SupplyChainDashboard`组件,通过路由参数动态加载不同组合数据
|
|
|
+- **技术实现**:React组件 + CSS可视化效果 + Recharts图表库 + 统一数据Context,不引入额外地图库
|
|
|
+- **路由架构**:通过路由参数动态切换组合,如`/supply-chain/grain-oil`、`/supply-chain/seed-fruit`等
|
|
|
- **成功标准**:
|
|
|
- - ✅ 8个大屏功能完整实现
|
|
|
+ - ✅ 4套组合大屏功能完整实现
|
|
|
- ⏱️ 大屏页面加载时间 < 3秒
|
|
|
- 🎨 视觉设计与Figma设计一致
|
|
|
- 📊 关键数据指标准确显示
|
|
|
- - 🔄 大屏切换响应时间 < 1秒
|
|
|
+ - 🔄 组合内切换响应时间 < 1秒
|
|
|
- 🎯 严格遵循1920*1080分辨率设计
|
|
|
+ - 🔗 路由参数切换正常工作
|
|
|
|
|
|
## Stories
|
|
|
|
|
|
-1. **Story 005.001**: ✅ 粮食大屏实现
|
|
|
+1. **Story 005.001**: ✅ 粮食-油脂组合大屏实现
|
|
|
- ✅ 创建GrainOilDashboard组件(支持粮食和油脂切换)
|
|
|
- ✅ 实现粮食供应链地图可视化
|
|
|
- ✅ 添加粮食产业关键指标展示
|
|
|
- ✅ 集成粮食产业数据卡片
|
|
|
- ✅ 实现导航和交互功能
|
|
|
-
|
|
|
-2. **Story 005.002**: 油脂大屏实现
|
|
|
- - 创建OilDashboard组件
|
|
|
- - 实现油脂供应链地图可视化
|
|
|
- - 添加油脂产业关键指标展示
|
|
|
- - 集成油脂产业数据卡片
|
|
|
- - 实现菜籽油产业链联合体展示
|
|
|
-
|
|
|
-3. **Story 005.003**: 种业大屏实现
|
|
|
- - 创建SeedDashboard组件
|
|
|
- - 实现种业供应链地图可视化
|
|
|
- - 添加种业产业关键指标展示
|
|
|
- - 集成种业产业数据卡片
|
|
|
- - 实现种业产业链展示
|
|
|
-
|
|
|
-4. **Story 005.004**: 果蔬大屏实现
|
|
|
- - 创建FruitVegetableDashboard组件
|
|
|
- - 实现果蔬供应链地图可视化
|
|
|
- - 添加果蔬产业关键指标展示
|
|
|
- - 集成果蔬产业数据卡片
|
|
|
- - 实现果蔬供应链网络展示
|
|
|
-
|
|
|
-5. **Story 005.005**: 畜牧大屏实现
|
|
|
- - 创建LivestockDashboard组件
|
|
|
- - 实现畜牧供应链地图可视化
|
|
|
- - 添加畜牧产业关键指标展示
|
|
|
- - 集成畜牧产业数据卡片
|
|
|
- - 实现畜牧产业链展示
|
|
|
-
|
|
|
-6. **Story 005.006**: 水产大屏实现
|
|
|
- - 创建AquacultureDashboard组件
|
|
|
- - 实现水产供应链地图可视化
|
|
|
- - 添加水产产业关键指标展示
|
|
|
- - 集成水产产业数据卡片
|
|
|
- - 实现水产供应链网络展示
|
|
|
-
|
|
|
-7. **Story 005.007**: 鲜食大屏实现
|
|
|
- - 创建FreshFoodDashboard组件
|
|
|
- - 实现鲜食供应链地图可视化
|
|
|
- - 添加鲜食产业关键指标展示
|
|
|
- - 集成鲜食产业数据卡片
|
|
|
- - 实现鲜食供应链网络展示
|
|
|
-
|
|
|
-8. **Story 005.008**: 泛盐大屏实现
|
|
|
- - 创建SaltDashboard组件
|
|
|
- - 实现泛盐供应链地图可视化
|
|
|
- - 添加泛盐产业关键指标展示
|
|
|
- - 集成泛盐产业数据卡片
|
|
|
- - 实现盐业产业链展示
|
|
|
-
|
|
|
-9. **Story 005.009**: 大屏导航和切换功能
|
|
|
- - 创建统一的导航组件
|
|
|
- - 实现8个大屏间快速切换
|
|
|
- - 添加状态管理和路由
|
|
|
- - 优化用户体验和响应速度
|
|
|
-
|
|
|
-10. **Story 005.010**: 数据集成和API对接
|
|
|
+ - 🔄 重构为统一数据Context架构
|
|
|
+
|
|
|
+2. **Story 005.002**: 统一数据Context和路由架构
|
|
|
+ - 扩展ThemeContext为SupplyChainContext,统一管理所有产业数据
|
|
|
+ - 创建统一数据结构:定位点坐标、关键指标、供应链网络数据
|
|
|
+ - 实现路由参数解析,通过React Router的useParams获取当前组合
|
|
|
+ - 配置路由:`/supply-chain/grain-oil`、`/supply-chain/seed-fruit`、`/supply-chain/livestock-aquaculture`、`/supply-chain/fresh-food-salt`
|
|
|
+ - 优化数据加载和缓存机制
|
|
|
+
|
|
|
+3. **Story 005.003**: 统一SupplyChainDashboard组件
|
|
|
+ - 创建统一的SupplyChainDashboard组件作为所有组合的入口
|
|
|
+ - 根据路由参数动态加载对应组合的数据
|
|
|
+ - 实现组合内产业切换功能
|
|
|
+ - 集成所有基础组件(地图、指标、导航等)
|
|
|
+
|
|
|
+4. **Story 005.004**: 种业-果蔬组合数据集成
|
|
|
+ - 实现种业供应链地图可视化(定位点坐标:base1[1142.89,717.84], base2[1664.25,530.82], base3[1435,527.14], base4[1203.07,514.31], chain1[1273.12,551.14], chain2[1403,597.5], chain3[1694.25,645.5], chain4[1237.87,761.84])
|
|
|
+ - 实现果蔬供应链地图可视化(定位点坐标:base1[985,610.22], base2[1125.81,409.52], base3[1229.57,570], base4[1445,560.35], chain1[949.08,680.31])
|
|
|
+ - 添加种业和果蔬产业关键指标展示
|
|
|
+ - 集成种业和果蔬产业数据卡片
|
|
|
+
|
|
|
+5. **Story 005.005**: 畜牧-水产组合数据集成
|
|
|
+ - 实现畜牧供应链地图可视化(定位点坐标:base1[1203.07,514.31], chain1[1273.12,551.14], chain2[1403,597.5], chain3[1694.25,645.5], chain4[1237.87,761.84])
|
|
|
+ - 实现水产供应链地图可视化(定位点坐标:base1[1445,560.35], chain1[949.08,680.31], chain2[1178.36,418.4], chain3[1307.42,551.47], chain4[1403.37,603.77])
|
|
|
+ - 添加畜牧和水产产业关键指标展示
|
|
|
+ - 集成畜牧和水产产业数据卡片
|
|
|
+
|
|
|
+6. **Story 005.006**: 鲜食-泛盐组合数据集成
|
|
|
+ - 实现鲜食供应链地图可视化(定位点坐标:base1[1203.07,514.31], chain1[1273.12,551.14], chain2[1403,597.5], chain3[1694.25,645.5], chain4[1237.87,761.84])
|
|
|
+ - 实现泛盐供应链地图可视化(定位点坐标:base1[1445,560.35], chain1[949.08,680.31], chain2[1178.36,418.4], chain3[1319.74,441.51], chain4[1403.37,603.77])
|
|
|
+ - 添加鲜食和泛盐产业关键指标展示
|
|
|
+ - 集成鲜食和泛盐产业数据卡片
|
|
|
+
|
|
|
+7. **Story 005.007**: 数据集成和API对接
|
|
|
- 创建供应链数据模型
|
|
|
- 实现后端API接口
|
|
|
- 集成前端数据获取
|
|
|
@@ -114,8 +97,11 @@
|
|
|
## 完成定义
|
|
|
|
|
|
- [x] Story 005.001完成且验收标准满足
|
|
|
-- [ ] Story 005.002-005.008完成且验收标准满足
|
|
|
-- [ ] 8个大屏功能完整实现
|
|
|
+- [ ] Story 005.002-005.007完成且验收标准满足
|
|
|
+- [ ] 统一SupplyChainDashboard组件正常工作
|
|
|
+- [ ] 4套组合数据完整集成
|
|
|
+- [ ] 路由参数切换功能正常工作
|
|
|
+- [ ] 统一数据Context架构完整实现
|
|
|
- [ ] 视觉设计与Figma设计一致
|
|
|
- [ ] 性能指标达标(加载时间<3秒)
|
|
|
- [ ] 集成点正常工作
|
|
|
@@ -150,14 +136,14 @@
|
|
|
### 前端架构
|
|
|
- **位置**:`src/client/home/pages/SupplyChainDashboards/`
|
|
|
- **组件结构**:
|
|
|
- - `GrainDashboard.tsx` - 粮食大屏
|
|
|
- - `OilDashboard.tsx` - 油脂大屏
|
|
|
- - `SeedDashboard.tsx` - 种业大屏
|
|
|
- - `FruitVegetableDashboard.tsx` - 果蔬大屏
|
|
|
- - `LivestockDashboard.tsx` - 畜牧大屏
|
|
|
- - `AquacultureDashboard.tsx` - 水产大屏
|
|
|
- - `FreshFoodDashboard.tsx` - 鲜食大屏
|
|
|
- - `SaltDashboard.tsx` - 泛盐大屏
|
|
|
+ - `SupplyChainDashboard.tsx` - 统一入口组件,根据路由参数动态加载数据
|
|
|
+ - `SupplyChainContext.tsx` - 统一数据Context(扩展自ThemeContext)
|
|
|
+ - `GrainOilDashboard.tsx` - 粮食-油脂组合(可重构为数据配置)
|
|
|
+- **路由架构**:
|
|
|
+ - `/supply-chain/grain-oil` - 粮食-油脂组合
|
|
|
+ - `/supply-chain/seed-fruit` - 种业-果蔬组合
|
|
|
+ - `/supply-chain/livestock-aquaculture` - 畜牧-水产组合
|
|
|
+ - `/supply-chain/fresh-food-salt` - 鲜食-泛盐组合
|
|
|
|
|
|
### 组件库架构
|
|
|
- **位置**:`src/client/home/pages/SupplyChainDashboards/components/`
|
|
|
@@ -249,19 +235,59 @@
|
|
|
- 鲜食产业:主色 #DE7E66
|
|
|
- 泛盐产业:主色 #92A5FE
|
|
|
|
|
|
+### 统一数据Context设计
|
|
|
+- **扩展ThemeContext**:创建SupplyChainContext,统一管理所有产业数据
|
|
|
+- **数据结构**:
|
|
|
+ ```typescript
|
|
|
+ // 组合类型定义
|
|
|
+ type DashboardType = 'grain-oil' | 'seed-fruit' | 'livestock-aquaculture' | 'fresh-food-salt';
|
|
|
+
|
|
|
+ interface SupplyChainData {
|
|
|
+ // 组合名称
|
|
|
+ name: string;
|
|
|
+ // 支持的产业
|
|
|
+ industries: IndustryType[];
|
|
|
+ // 定位点数据
|
|
|
+ mapPoints: Record<IndustryType, LocationPoint[]>;
|
|
|
+ // 关键指标数据
|
|
|
+ keyMetrics: Record<IndustryType, MetricData[]>;
|
|
|
+ // 供应链网络数据
|
|
|
+ supplyChainNetwork: Record<IndustryType, SupplyChainNetwork>;
|
|
|
+ // 弹出框数据
|
|
|
+ popupData: Record<IndustryType, PopupData[]>;
|
|
|
+ }
|
|
|
+
|
|
|
+ interface SupplyChainContextType {
|
|
|
+ // 当前组合类型
|
|
|
+ currentDashboard: DashboardType;
|
|
|
+ // 当前产业
|
|
|
+ currentIndustry: IndustryType;
|
|
|
+ // 主题色
|
|
|
+ themeColor: string;
|
|
|
+ // 当前组合数据
|
|
|
+ currentData: SupplyChainData | null;
|
|
|
+ // 设置方法
|
|
|
+ setDashboard: (dashboard: DashboardType) => void;
|
|
|
+ setIndustry: (industry: IndustryType) => void;
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
### 数据集成
|
|
|
- **API端点**:新增供应链相关API
|
|
|
- **数据模型**:创建供应链实体和关系
|
|
|
- **状态管理**:使用React Query进行服务端状态管理
|
|
|
+- **路由集成**:通过URL参数加载对应组合数据
|
|
|
|
|
|
## 验收标准
|
|
|
|
|
|
### 功能验收
|
|
|
-- [ ] 8个大屏页面正常显示
|
|
|
+- [ ] 4套组合大屏页面正常显示
|
|
|
+- [ ] 路由参数切换正常工作(`?dashboard=粮食-油脂`等)
|
|
|
+- [ ] 组合内产业切换功能正常
|
|
|
- [ ] 地图可视化效果正确
|
|
|
- [ ] 供应链网络展示完整
|
|
|
- [ ] 关键数据指标准确
|
|
|
-- [ ] 导航切换功能正常
|
|
|
+- [ ] 统一数据Context正常工作
|
|
|
- [ ] 产业图标和颜色系统正确
|
|
|
- [ ] 数据卡片组件统一规范
|
|
|
- [ ] 严格遵循1920*1080分辨率
|
|
|
@@ -400,4 +426,6 @@
|
|
|
|------|---------|-------------|--------|
|
|
|
| 2025-11-06 | 1.0 | 初始史诗创建 | Bob (SM) |
|
|
|
| 2025-11-06 | 1.1 | 基于最新Figma设计更新,产业数量从4个扩展到8个 | Bob (SM) |
|
|
|
-| 2025-11-15 | 1.2 | Story 005.001粮食大屏实现完成,更新验收标准和完成状态 | Claude |
|
|
|
+| 2025-11-15 | 1.2 | Story 005.001粮食大屏实现完成,更新验收标准和完成状态 | Claude |
|
|
|
+| 2025-11-15 | 1.3 | **架构重构**:从8个独立大屏改为4套组合大屏,添加路由参数和统一数据Context | Claude |
|
|
|
+| 2025-11-15 | 1.4 | **架构优化**:采用统一入口组件,通过路由参数动态加载数据 | Claude |
|