|
|
@@ -4,7 +4,7 @@
|
|
|
docs/prd/epic-005-supply-chain-visualization.md
|
|
|
|
|
|
## Status
|
|
|
-In Progress
|
|
|
+Completed
|
|
|
|
|
|
## Story
|
|
|
**As a** 前端开发者
|
|
|
@@ -20,18 +20,18 @@ In Progress
|
|
|
4. **验证数据完整性** - 确保种业和果蔬的所有定位点、关键指标、供应链网络和弹出框数据都能正确显示
|
|
|
|
|
|
## Tasks / Subtasks
|
|
|
-- [ ] 修改SupplyChainMap组件使用动态数据 (AC: #1, #3, #4)
|
|
|
- - [ ] 移除组件中的硬编码defaultPoints
|
|
|
- - [ ] 从SupplyChainContext中获取当前产业的定位点数据
|
|
|
- - [ ] 实现定位点数据的动态渲染
|
|
|
- - [ ] 验证种业定位点正确显示（8个点：4个基地+4个产业链）
|
|
|
- - [ ] 验证果蔬定位点正确显示（5个点：4个基地+1个产业链）
|
|
|
-- [ ] 修改KeyMetrics组件使用动态数据 (AC: #2, #3, #4)
|
|
|
- - [ ] 移除组件中的硬编码defaultMetrics
|
|
|
- - [ ] 从SupplyChainContext中获取当前产业的关键指标数据
|
|
|
- - [ ] 实现关键指标数据的动态渲染
|
|
|
- - [ ] 验证种业关键指标正确显示（良种繁育能力、自建育种基地、辐射带动面积）
|
|
|
- - [ ] 验证果蔬关键指标正确显示（加工能力、自建果蔬基地、辐射带动面积）
|
|
|
+- [x] 修改SupplyChainMap组件使用动态数据 (AC: #1, #3, #4)
|
|
|
+ - [x] 移除组件中的硬编码defaultPoints
|
|
|
+ - [x] 从SupplyChainContext中获取当前产业的定位点数据
|
|
|
+ - [x] 实现定位点数据的动态渲染
|
|
|
+ - [x] 验证种业定位点正确显示（8个点：4个基地+4个产业链）
|
|
|
+ - [x] 验证果蔬定位点正确显示（5个点：4个基地+1个产业链）
|
|
|
+- [x] 修改KeyMetrics组件使用动态数据 (AC: #2, #3, #4)
|
|
|
+ - [x] 移除组件中的硬编码defaultMetrics
|
|
|
+ - [x] 从SupplyChainContext中获取当前产业的关键指标数据
|
|
|
+ - [x] 实现关键指标数据的动态渲染
|
|
|
+ - [x] 验证种业关键指标正确显示（良种繁育能力、自建育种基地、辐射带动面积）
|
|
|
+ - [x] 验证果蔬关键指标正确显示（加工能力、自建果蔬基地、辐射带动面积）
|
|
|
- [x] 修改PopupInfoBox组件使用动态数据 (AC: #3, #4)
|
|
|
- [x] 移除组件中的硬编码defaultData
|
|
|
- [x] 从SupplyChainContext中获取当前产业的弹出框数据
|
|
|
@@ -49,15 +49,15 @@ In Progress
|
|
|
- [x] 第一个款式以右下角为定位基准
|
|
|
- [x] 第二个款式以右上角为定位基准
|
|
|
- [x] 验证所有组合的款式切换正确性
|
|
|
-- [ ] 验证种业-果蔬组合路由功能 (AC: #3, #4)
|
|
|
- - [ ] 测试路由`/supply-chain/seed-fruit`正确加载种业-果蔬数据
|
|
|
- - [ ] 验证组合内产业切换功能（种业↔果蔬）
|
|
|
- - [ ] 验证主题色正确应用（种业：#5DEF8B，果蔬：#FFF586）
|
|
|
-- [ ] 测试数据集成完整性 (AC: #4)
|
|
|
- - [ ] 验证地图定位点正确显示
|
|
|
- - [ ] 验证关键指标数据正确展示
|
|
|
- - [ ] 验证弹出框数据内容准确
|
|
|
- - [ ] 验证供应链网络连接线正确绘制
|
|
|
+- [x] 验证种业-果蔬组合路由功能 (AC: #3, #4)
|
|
|
+ - [x] 测试路由`/supply-chain/seed-fruit`正确加载种业-果蔬数据
|
|
|
+ - [x] 验证组合内产业切换功能（种业↔果蔬）
|
|
|
+ - [x] 验证主题色正确应用（种业：#5DEF8B，果蔬：#FFF586）
|
|
|
+- [x] 测试数据集成完整性 (AC: #4)
|
|
|
+ - [x] 验证地图定位点正确显示
|
|
|
+ - [x] 验证关键指标数据正确展示
|
|
|
+ - [x] 验证弹出框数据内容准确
|
|
|
+ - [x] 验证供应链网络连接线正确绘制
|
|
|
|
|
|
## Dev Notes
|
|
|
|
|
|
@@ -189,21 +189,19 @@ const keyMetrics = currentData?.keyMetrics[currentIndustry] || [];
|
|
|
#### 双款式PopupInfoBox设计
|
|
|
|
|
|
**款式分配规则：**
|
|
|
-- **第一个定位点**：使用当前款式（右下角定位）
|
|
|
-- **第二个定位点**：使用新款式（右上角定位）
|
|
|
-- **后续定位点**：交替使用两种款式
|
|
|
+- **每组大屏中的第一个产业**：使用第一款（右下角定位）
|
|
|
+- **每组大屏中的第二个产业**：使用第二款（右上角定位）
|
|
|
+- **规则说明**：在每组大屏中（如粮食-油脂、种业-果蔬等），第一个产业使用第一款，第二个产业使用第二款
|
|
|
|
|
|
**定位逻辑：**
|
|
|
```typescript
|
|
|
-// 根据定位点索引确定款式和定位方式
|
|
|
-const getPopupStyle = (pointIndex: number) => {
|
|
|
- const isFirstStyle = pointIndex % 2 === 0; // 偶数索引使用第一款，奇数索引使用第二款
|
|
|
-
|
|
|
- return {
|
|
|
- variant: isFirstStyle ? 'first' : 'second',
|
|
|
- anchor: isFirstStyle ? 'bottom-right' : 'top-right'
|
|
|
- };
|
|
|
-};
|
|
|
+// 根据产业在组合中的位置确定款式和定位方式
|
|
|
+function getIndustryVariant(industry: string, industries: string[]): 'first' | 'second' | null {
|
|
|
+ const index = industries.indexOf(industry);
|
|
|
+ if (index === 0) return 'first'; // 第一个产业使用第一款
|
|
|
+ if (index === 1) return 'second'; // 第二个产业使用第二款
|
|
|
+ return null; // 其他情况返回null，使用默认值
|
|
|
+}
|
|
|
```
|
|
|
|
|
|
**实现策略：**
|
|
|
@@ -371,21 +369,30 @@ const KeyMetrics: React.FC<KeyMetricsProps> = ({ title, subtitle }) => {
|
|
|
14. **映射规则一致性已验证** - 所有组合的定位点ID与弹出框ID映射关系100%正确
|
|
|
15. **双款式PopupInfoBox需求已识别** - 需要为PopupInfoBox组件添加两种款式支持，并实现不同的定位逻辑
|
|
|
16. **双款式PopupInfoBox功能已实现** - 已成功实现两种款式支持和不同的定位逻辑
|
|
|
-17. **款式分配规则已实现** - 偶数索引使用第一款（右下角定位），奇数索引使用第二款（右上角定位）
|
|
|
+17. **款式分配逻辑已修正** - 修正为按产业分配而非按定位点索引：每组大屏中的第一个产业使用第一款，第二个产业使用第二款
|
|
|
18. **PopupInfoBox2图标已修复** - 已修复SVG属性语法问题
|
|
|
+19. **大屏初始化问题已修复** - 修复了大屏打开时未自动选定第一个产业的问题，现在每个大屏打开时会自动选择第一个产业
|
|
|
+20. **SupplyChainContext初始化逻辑已优化** - 添加了根据组合类型自动设置默认产业的逻辑
|
|
|
+21. **所有产业图标已创建** - 为所有8个产业创建了对应的SVG图标组件
|
|
|
+22. **IndustryIcon组件已更新** - 现在使用真实的产业图标而非灰色占位符
|
|
|
|
|
|
### File List
|
|
|
-#### 需要修改的文件
|
|
|
-- `src/client/home/pages/SupplyChainDashboards/components/SupplyChainMap.tsx` - 需要修改为使用动态定位点数据
|
|
|
-- `src/client/home/pages/SupplyChainDashboards/components/KeyMetrics.tsx` - 需要修改为使用动态关键指标数据
|
|
|
-
|
|
|
-#### 需要创建的文件
|
|
|
-- 无
|
|
|
-
|
|
|
#### 已完成修改的文件
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/SupplyChainMap.tsx` - ✅ 已修改为使用动态定位点数据
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/KeyMetrics.tsx` - ✅ 已修改为使用动态关键指标数据
|
|
|
- `src/client/home/pages/SupplyChainDashboards/components/PopupInfoBox.tsx` - ✅ 已修改为使用动态弹出框数据，并建立定位点ID与弹出框数据的映射关系，添加双款式支持和定位逻辑
|
|
|
- `src/client/home/pages/SupplyChainDashboards/components/icons/PopupInfoBox2.tsx` - ✅ 已修复SVG属性语法
|
|
|
-- `src/client/home/pages/SupplyChainDashboards/context/SupplyChainContext.tsx` - ✅ 已为所有4个组合的49个定位点添加对应的弹出框数据，并移除重复的坐标定义
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/context/SupplyChainContext.tsx` - ✅ 已为所有4个组合的49个定位点添加对应的弹出框数据，并移除重复的坐标定义，优化初始化逻辑
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/SupplyChainDashboard.tsx` - ✅ 已优化组件逻辑，移除pointIndex相关代码
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/IndustryIcon.tsx` - ✅ 已更新为使用真实的产业图标
|
|
|
+
|
|
|
+#### 已创建的文件
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/SeedIcon.tsx` - ✅ 种业图标
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/FruitIcon.tsx` - ✅ 果蔬图标
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/LivestockIcon.tsx` - ✅ 畜牧图标
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/AquacultureIcon.tsx` - ✅ 水产图标
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/FreshFoodIcon.tsx` - ✅ 鲜食图标
|
|
|
+- `src/client/home/pages/SupplyChainDashboards/components/icons/SaltIcon.tsx` - ✅ 泛盐图标
|
|
|
|
|
|
#### 已完成的文件
|
|
|
- `src/client/home/pages/SupplyChainDashboards/context/SupplyChainContext.tsx` - 包含完整的种业-果蔬组合数据
|
|
|
@@ -395,11 +402,11 @@ const KeyMetrics: React.FC<KeyMetricsProps> = ({ title, subtitle }) => {
|
|
|
- `src/client/home/pages/SupplyChainDashboards/SupplyChainDashboard.tsx` - 统一组件已支持所有组合
|
|
|
|
|
|
## QA Results
|
|
|
-- **功能完整性**: ⚠️ 数据已实现但组件未使用动态数据，双款式功能已实现
|
|
|
-- **代码质量**: ✅ TypeScript类型安全，数据结构完整
|
|
|
+- **功能完整性**: ✅ 所有组件已使用动态数据，双款式功能已实现，大屏初始化已修复
|
|
|
+- **代码质量**: ✅ TypeScript类型安全，数据结构完整，初始化逻辑优化
|
|
|
- **性能**: ✅ React Query缓存机制已实现
|
|
|
- **兼容性**: ✅ 与现有架构完全兼容
|
|
|
- **测试覆盖**: ⚠️ 需要添加单元测试验证数据正确性和款式切换
|
|
|
-- **文档**: ✅ 代码注释完整，接口定义清晰
|
|
|
-- **组件数据流**: ❌ SupplyChainMap和KeyMetrics组件使用硬编码数据，需要修改
|
|
|
-- **UI/UX**: ✅ 双款式弹出框设计已实现，定位逻辑正确
|
|
|
+- **文档**: ✅ 代码注释完整，接口定义清晰，故事文档已更新
|
|
|
+- **组件数据流**: ✅ 所有组件已使用SupplyChainContext动态数据
|
|
|
+- **UI/UX**: ✅ 双款式弹出框设计已实现，定位逻辑正确，所有产业图标已更新
|
yourname