生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
609
src/HISTORY_COMPARISON_FIX.md
Normal file
609
src/HISTORY_COMPARISON_FIX.md
Normal file
@@ -0,0 +1,609 @@
|
||||
# ✅ 历史数据查询与对比 - 图表联动修复完成
|
||||
|
||||
## 🐛 问题描述
|
||||
|
||||
**问题**: 选择月度、季度、年度对比时，下方图表没有跟着变化
|
||||
|
||||
**原因分析**:
|
||||
1. ❌ 缺少月度对比数据 (monthComparisonData)
|
||||
2. ❌ 图表条件渲染逻辑不完整（只判断 year 和非 year）
|
||||
3. ❌ 数据表固定显示年度数据，不会根据选择变化
|
||||
4. ❌ XAxis 和 Line 的 dataKey 判断不完整
|
||||
|
||||
---
|
||||
|
||||
## ✅ 修复方案
|
||||
|
||||
### 1️⃣ 添加月度对比数据
|
||||
|
||||
```tsx
|
||||
// 月度对比数据（按天）
|
||||
const monthComparisonData = [
|
||||
{ day: '1日', current: 15, previous: 12 },
|
||||
{ day: '5日', current: 18, previous: 15 },
|
||||
{ day: '10日', current: 22, previous: 19 },
|
||||
{ day: '15日', current: 20, previous: 18 },
|
||||
{ day: '20日', current: 25, previous: 21 },
|
||||
{ day: '25日', current: 23, previous: 20 },
|
||||
{ day: '30日', current: 21, previous: 17 },
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2️⃣ 使用 useMemo 动态切换数据
|
||||
|
||||
**修复前**:
|
||||
```tsx
|
||||
// 硬编码判断，缺少 month 的处理
|
||||
<LineChart data={compareType === 'year' ? yearComparisonData : quarterComparisonData}>
|
||||
```
|
||||
|
||||
**修复后**:
|
||||
```tsx
|
||||
// 动态获取当前数据
|
||||
const currentData = useMemo(() => {
|
||||
switch (compareType) {
|
||||
case 'year':
|
||||
return yearComparisonData;
|
||||
case 'quarter':
|
||||
return quarterComparisonData;
|
||||
case 'month':
|
||||
return monthComparisonData;
|
||||
default:
|
||||
return yearComparisonData;
|
||||
}
|
||||
}, [compareType]);
|
||||
|
||||
<LineChart data={currentData}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3️⃣ 创建动态图表配置
|
||||
|
||||
**修复前**:
|
||||
```tsx
|
||||
// 硬编码配置
|
||||
<XAxis dataKey={compareType === 'year' ? 'month' : 'week'} />
|
||||
<Line dataKey="year2023" name="2023年" />
|
||||
<Line dataKey="year2024" name="2024年" />
|
||||
```
|
||||
|
||||
**修复后**:
|
||||
```tsx
|
||||
// 动态图表配置
|
||||
const chartConfig = useMemo(() => {
|
||||
switch (compareType) {
|
||||
case 'year':
|
||||
return {
|
||||
xDataKey: 'month',
|
||||
line1Key: 'year2023',
|
||||
line2Key: 'year2024',
|
||||
line1Name: '2023年',
|
||||
line2Name: '2024年',
|
||||
};
|
||||
case 'quarter':
|
||||
return {
|
||||
xDataKey: 'month',
|
||||
line1Key: 'q1_2024',
|
||||
line2Key: 'q2_2024',
|
||||
line1Name: '第一季度',
|
||||
line2Name: '第二季度',
|
||||
};
|
||||
case 'month':
|
||||
return {
|
||||
xDataKey: 'day',
|
||||
line1Key: 'previous',
|
||||
line2Key: 'current',
|
||||
line1Name: '上月',
|
||||
line2Name: '本月',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
xDataKey: 'month',
|
||||
line1Key: 'year2023',
|
||||
line2Key: 'year2024',
|
||||
line1Name: '2023年',
|
||||
line2Name: '2024年',
|
||||
};
|
||||
}
|
||||
}, [compareType]);
|
||||
|
||||
// 应用动态配置
|
||||
<XAxis dataKey={chartConfig.xDataKey} />
|
||||
<Line dataKey={chartConfig.line1Key} name={chartConfig.line1Name} />
|
||||
<Line dataKey={chartConfig.line2Key} name={chartConfig.line2Name} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4️⃣ 数据表动态渲染
|
||||
|
||||
**修复前**:
|
||||
```tsx
|
||||
<tbody>
|
||||
{yearComparisonData.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.month}</td>
|
||||
<td>{row.year2023} 亩</td>
|
||||
<td>{row.year2024} 亩</td>
|
||||
<td>{增长率}%</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
```
|
||||
|
||||
**修复后**:
|
||||
```tsx
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>{chartConfig.line1Name}</th> {/* 动态列名 */}
|
||||
<th>{chartConfig.line2Name}</th> {/* 动态列名 */}
|
||||
<th>增长率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentData.map((row, index) => {
|
||||
const timeValue = row[chartConfig.xDataKey as keyof typeof row];
|
||||
const value1 = row[chartConfig.line1Key as keyof typeof row] as number;
|
||||
const value2 = row[chartConfig.line2Key as keyof typeof row] as number;
|
||||
const growthRate = ((value2 - value1) / value1 * 100).toFixed(1);
|
||||
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{timeValue}</td> {/* 动态时间列 */}
|
||||
<td>{value1} 亩</td> {/* 动态数据1 */}
|
||||
<td>{value2} 亩</td> {/* 动态数据2 */}
|
||||
<td>{growthRate}%</td> {/* 动态增长率 */}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 修复效果
|
||||
|
||||
### ✅ 年度对比
|
||||
```
|
||||
选择: 年度对比
|
||||
┌────────────────────────────────────────┐
|
||||
│ 年度对比（2023年 vs 2024年） │
|
||||
├────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 图表显示: 12个月的数据 │
|
||||
│ - 蓝线: 2023年 │
|
||||
│ - 绿线: 2024年 │
|
||||
│ X轴: 1月-12月 │
|
||||
│ │
|
||||
└────────────────────────────────────────┘
|
||||
|
||||
数据表:
|
||||
┌─────┬─────────┬─────────┬────────┐
|
||||
│ 时间│ 2023年 │ 2024年 │ 增长率 │
|
||||
├─────┼─────────┼─────────┼────────┤
|
||||
│ 1月 │ 420 亩 │ 480 亩 │ +14.3% │
|
||||
│ 2月 │ 380 亩 │ 410 亩 │ +7.9% │
|
||||
│ ... │ ... │ ... │ ... │
|
||||
└─────┴─────────┴─────────┴────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ✅ 季度对比
|
||||
```
|
||||
选择: 季度对比
|
||||
┌────────────────────────────────────────┐
|
||||
│ 季度对比（第一季度 vs 第二季度） │
|
||||
├────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 图表显示: 3个月的数据 │
|
||||
│ - 蓝线: 第一季度 │
|
||||
│ - 绿线: 第二季度 │
|
||||
│ X轴: 1月-3月 │
|
||||
│ │
|
||||
└────────────────────────────────────────┘
|
||||
|
||||
数据表:
|
||||
┌─────┬──────────┬──────────┬────────┐
|
||||
│ 时间│ 第一季度 │ 第二季度 │ 增长率 │
|
||||
├─────┼──────────┼──────────┼────────┤
|
||||
│ 1月 │ 480 亩 │ 520 亩 │ +8.3% │
|
||||
│ 2月 │ 410 亩 │ 450 亩 │ +9.8% │
|
||||
│ 3月 │ 580 亩 │ 620 亩 │ +6.9% │
|
||||
└─────┴──────────┴──────────┴────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ✅ 月度对比
|
||||
```
|
||||
选择: 月度对比
|
||||
┌────────────────────────────────────────┐
|
||||
│ 月度对比（上月 vs 本月） │
|
||||
├────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 图表显示: 7个采样点的数据 │
|
||||
│ - 蓝线: 上月 │
|
||||
│ - 绿线: 本月 │
|
||||
│ X轴: 1日, 5日, 10日... │
|
||||
│ │
|
||||
└────────────────────────────────────────┘
|
||||
|
||||
数据表:
|
||||
┌─────┬────────┬────────┬────────┐
|
||||
│ 时间│ 上月 │ 本月 │ 增长率 │
|
||||
├─────┼────────┼────────┼────────┤
|
||||
│ 1日 │ 12 亩 │ 15 亩 │ +25.0% │
|
||||
│ 5日 │ 15 亩 │ 18 亩 │ +20.0% │
|
||||
│10日 │ 19 亩 │ 22 亩 │ +15.8% │
|
||||
│15日 │ 18 亩 │ 20 亩 │ +11.1% │
|
||||
│20日 │ 21 亩 │ 25 亩 │ +19.0% │
|
||||
│25日 │ 20 亩 │ 23 亩 │ +15.0% │
|
||||
│30日 │ 17 亩 │ 21 亩 │ +23.5% │
|
||||
└─────┴────────┴────────┴────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 关键改进点
|
||||
|
||||
### 1. 使用 useMemo 优化性能
|
||||
|
||||
```tsx
|
||||
// ✅ 只在 compareType 变化时重新计算
|
||||
const currentData = useMemo(() => {
|
||||
// ...
|
||||
}, [compareType]);
|
||||
|
||||
const chartConfig = useMemo(() => {
|
||||
// ...
|
||||
}, [compareType]);
|
||||
```
|
||||
|
||||
**优势**:
|
||||
- 避免不必要的重新渲染
|
||||
- 提高性能
|
||||
- 代码更清晰
|
||||
|
||||
---
|
||||
|
||||
### 2. 动态配置系统
|
||||
|
||||
```tsx
|
||||
// ✅ 所有配置集中管理
|
||||
const chartConfig = {
|
||||
xDataKey: 'month', // X轴数据字段
|
||||
line1Key: 'year2023', // 第一条线数据字段
|
||||
line2Key: 'year2024', // 第二条线数据字段
|
||||
line1Name: '2023年', // 第一条线名称
|
||||
line2Name: '2024年', // 第二条线名称
|
||||
};
|
||||
```
|
||||
|
||||
**优势**:
|
||||
- 配置统一
|
||||
- 易于维护
|
||||
- 扩展性强
|
||||
|
||||
---
|
||||
|
||||
### 3. 类型安全的数据访问
|
||||
|
||||
```tsx
|
||||
// ✅ 使用 keyof typeof 确保类型安全
|
||||
const timeValue = row[chartConfig.xDataKey as keyof typeof row];
|
||||
const value1 = row[chartConfig.line1Key as keyof typeof row] as number;
|
||||
const value2 = row[chartConfig.line2Key as keyof typeof row] as number;
|
||||
```
|
||||
|
||||
**优势**:
|
||||
- TypeScript 类型检查
|
||||
- 避免运行时错误
|
||||
- IDE 智能提示
|
||||
|
||||
---
|
||||
|
||||
## 📋 测试验证
|
||||
|
||||
### 测试步骤
|
||||
|
||||
1. **访问页面**
|
||||
```
|
||||
农机管理 → 数据管理与分析报告 → 历史数据查询与对比
|
||||
```
|
||||
|
||||
2. **测试年度对比**
|
||||
- 选择"年度对比"
|
||||
- ✅ 图表显示 12 个月数据点
|
||||
- ✅ 图表标题显示"年度对比（2023年 vs 2024年）"
|
||||
- ✅ 数据表列名显示"2023年"和"2024年"
|
||||
- ✅ 数据表显示 12 行数据
|
||||
|
||||
3. **测试季度对比**
|
||||
- 切换到"季度对比"
|
||||
- ✅ 图表立即切换到 3 个月数据点
|
||||
- ✅ 图表标题变为"季度对比（第一季度 vs 第二季度）"
|
||||
- ✅ 数据表列名变为"第一季度"和"第二季度"
|
||||
- ✅ 数据表显示 3 行数据
|
||||
|
||||
4. **测试月度对比**
|
||||
- 切换到"月度对比"
|
||||
- ✅ 图表立即切换到 7 个数据点
|
||||
- ✅ 图表标题变为"月度对比（上月 vs 本月）"
|
||||
- ✅ X轴显示"1日"、"5日"等
|
||||
- ✅ 数据表列名变为"上月"和"本月"
|
||||
- ✅ 数据表显示 7 行数据
|
||||
|
||||
5. **验证增长率计算**
|
||||
- ✅ 增长率计算正确
|
||||
- ✅ 正增长显示绿色
|
||||
- ✅ 负增长显示红色（如果有）
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术要点
|
||||
|
||||
### 数据结构设计
|
||||
|
||||
```tsx
|
||||
// 年度对比数据结构
|
||||
interface YearComparisonData {
|
||||
month: string; // 时间维度
|
||||
year2023: number; // 对比维度1
|
||||
year2024: number; // 对比维度2
|
||||
}
|
||||
|
||||
// 季度对比数据结构
|
||||
interface QuarterComparisonData {
|
||||
month: string; // 时间维度
|
||||
q1_2024: number; // 对比维度1
|
||||
q2_2024: number; // 对比维度2
|
||||
}
|
||||
|
||||
// 月度对比数据结构
|
||||
interface MonthComparisonData {
|
||||
day: string; // 时间维度
|
||||
previous: number; // 对比维度1
|
||||
current: number; // 对比维度2
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 配置系统设计
|
||||
|
||||
```tsx
|
||||
interface ChartConfig {
|
||||
xDataKey: string; // X轴字段名
|
||||
line1Key: string; // 第一条线字段名
|
||||
line2Key: string; // 第二条线字段名
|
||||
line1Name: string; // 第一条线显示名
|
||||
line2Name: string; // 第二条线显示名
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 修复清单
|
||||
|
||||
- [x] ✅ 添加月度对比数据
|
||||
- [x] ✅ 使用 useMemo 动态获取数据
|
||||
- [x] ✅ 创建动态图表配置系统
|
||||
- [x] ✅ 修复图表数据联动
|
||||
- [x] ✅ 修复数据表联动
|
||||
- [x] ✅ 优化图表标题显示
|
||||
- [x] ✅ 优化表头列名显示
|
||||
- [x] ✅ 确保类型安全
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI/UX 改进
|
||||
|
||||
### 标题更清晰
|
||||
|
||||
**修复前**:
|
||||
```
|
||||
年度对比
|
||||
```
|
||||
|
||||
**修复后**:
|
||||
```
|
||||
年度对比（2023年 vs 2024年）
|
||||
季度对比（第一季度 vs 第二季度）
|
||||
月度对比（上月 vs 本月）
|
||||
```
|
||||
|
||||
**优势**: 用户一眼就能看出对比的是哪两个时间段
|
||||
|
||||
---
|
||||
|
||||
### 表头更直观
|
||||
|
||||
**修复前**:
|
||||
```
|
||||
┌─────┬─────────┬─────────┬────────┐
|
||||
│ 时间│ 2023年 │ 2024年 │ 增长率 │ （固定）
|
||||
└─────┴─────────┴─────────┴────────┘
|
||||
```
|
||||
|
||||
**修复后**:
|
||||
```
|
||||
年度对比:
|
||||
┌─────┬─────────┬─────────┬────────┐
|
||||
│ 时间│ 2023年 │ 2024年 │ 增长率 │
|
||||
└─────┴─────────┴─────────┴────────┘
|
||||
|
||||
季度对比:
|
||||
┌─────┬──────────┬──────────┬────────┐
|
||||
│ 时间│ 第一季度 │ 第二季度 │ 增长率 │
|
||||
└─────┴──────────┴──────────┴────────┘
|
||||
|
||||
月度对比:
|
||||
┌─────┬────────┬────────┬────────┐
|
||||
│ 时间│ 上月 │ 本月 │ 增长率 │
|
||||
└─────┴────────┴────────┴────────┘
|
||||
```
|
||||
|
||||
**优势**: 表头与选择的对比类型完全匹配
|
||||
|
||||
---
|
||||
|
||||
## 📊 数据示例
|
||||
|
||||
### 年度对比数据（12个月）
|
||||
|
||||
```tsx
|
||||
[
|
||||
{ month: '1月', year2023: 420, year2024: 480 }, // +14.3%
|
||||
{ month: '2月', year2023: 380, year2024: 410 }, // +7.9%
|
||||
{ month: '3月', year2023: 510, year2024: 580 }, // +13.7%
|
||||
{ month: '4月', year2023: 620, year2024: 680 }, // +9.7%
|
||||
{ month: '5月', year2023: 580, year2024: 650 }, // +12.1%
|
||||
{ month: '6月', year2023: 650, year2024: 720 }, // +10.8%
|
||||
{ month: '7月', year2023: 680, year2024: 750 }, // +10.3%
|
||||
{ month: '8月', year2023: 710, year2024: 780 }, // +9.9%
|
||||
{ month: '9月', year2023: 640, year2024: 700 }, // +9.4%
|
||||
{ month: '10月', year2023: 590, year2024: 660 }, // +11.9%
|
||||
{ month: '11月', year2023: 520, year2024: 580 }, // +11.5%
|
||||
{ month: '12月', year2023: 450, year2024: 520 }, // +15.6%
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 季度对比数据（3个月）
|
||||
|
||||
```tsx
|
||||
[
|
||||
{ month: '1月', q1_2024: 480, q2_2024: 520 }, // +8.3%
|
||||
{ month: '2月', q1_2024: 410, q2_2024: 450 }, // +9.8%
|
||||
{ month: '3月', q1_2024: 580, q2_2024: 620 }, // +6.9%
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 月度对比数据（7个采样点）
|
||||
|
||||
```tsx
|
||||
[
|
||||
{ day: '1日', current: 15, previous: 12 }, // +25.0%
|
||||
{ day: '5日', current: 18, previous: 15 }, // +20.0%
|
||||
{ day: '10日', current: 22, previous: 19 }, // +15.8%
|
||||
{ day: '15日', current: 20, previous: 18 }, // +11.1%
|
||||
{ day: '20日', current: 25, previous: 21 }, // +19.0%
|
||||
{ day: '25日', current: 23, previous: 20 }, // +15.0%
|
||||
{ day: '30日', current: 21, previous: 17 }, // +23.5%
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 性能优化
|
||||
|
||||
### useMemo 的使用
|
||||
|
||||
```tsx
|
||||
// ✅ currentData 只在 compareType 变化时重新计算
|
||||
const currentData = useMemo(() => {
|
||||
switch (compareType) {
|
||||
case 'year': return yearComparisonData;
|
||||
case 'quarter': return quarterComparisonData;
|
||||
case 'month': return monthComparisonData;
|
||||
default: return yearComparisonData;
|
||||
}
|
||||
}, [compareType]);
|
||||
|
||||
// ✅ chartConfig 只在 compareType 变化时重新计算
|
||||
const chartConfig = useMemo(() => {
|
||||
// ...
|
||||
}, [compareType]);
|
||||
```
|
||||
|
||||
**性能收益**:
|
||||
- 避免每次渲染都重新计算
|
||||
- 减少不必要的组件更新
|
||||
- 提高大数据量时的性能
|
||||
|
||||
---
|
||||
|
||||
## 📝 代码质量
|
||||
|
||||
### TypeScript 类型安全
|
||||
|
||||
```tsx
|
||||
// ✅ 使用 keyof typeof 确保类型安全
|
||||
const timeValue = row[chartConfig.xDataKey as keyof typeof row];
|
||||
const value1 = row[chartConfig.line1Key as keyof typeof row] as number;
|
||||
const value2 = row[chartConfig.line2Key as keyof typeof row] as number;
|
||||
```
|
||||
|
||||
### 代码可维护性
|
||||
|
||||
```tsx
|
||||
// ✅ 配置集中管理，易于扩展
|
||||
const chartConfig = useMemo(() => {
|
||||
switch (compareType) {
|
||||
case 'year': return { /* 年度配置 */ };
|
||||
case 'quarter': return { /* 季度配置 */ };
|
||||
case 'month': return { /* 月度配置 */ };
|
||||
// 未来可以轻松添加更多对比类型
|
||||
case 'week': return { /* 周度配置 */ };
|
||||
default: return { /* 默认配置 */ };
|
||||
}
|
||||
}, [compareType]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 修复总结
|
||||
|
||||
### 问题根源
|
||||
- 缺少完整的数据切换逻辑
|
||||
- 硬编码的条件判断不完整
|
||||
- 数据表未与图表联动
|
||||
|
||||
### 解决方案
|
||||
- ✅ 添加完整的三种对比类型数据
|
||||
- ✅ 使用 useMemo 实现动态数据切换
|
||||
- ✅ 创建统一的配置系统
|
||||
- ✅ 图表和数据表完全联动
|
||||
|
||||
### 修复效果
|
||||
- ✅ 选择任意对比类型，图表立即响应
|
||||
- ✅ 数据表同步更新
|
||||
- ✅ 标题和列名动态变化
|
||||
- ✅ 用户体验显著提升
|
||||
|
||||
---
|
||||
|
||||
## 🎯 后续优化建议
|
||||
|
||||
### 短期（已完成）
|
||||
- [x] ✅ 修复图表联动问题
|
||||
- [x] ✅ 添加月度对比数据
|
||||
- [x] ✅ 优化标题显示
|
||||
|
||||
### 中期（推荐）
|
||||
- [ ] 🔄 添加设备筛选功能
|
||||
- [ ] 🔄 添加指标切换功能
|
||||
- [ ] 🔄 实现真实Excel导出
|
||||
- [ ] 🔄 添加柱状图选项
|
||||
|
||||
### 长期（可选）
|
||||
- [ ] 💡 支持自定义时间范围
|
||||
- [ ] 💡 添加趋势预测
|
||||
- [ ] 💡 支持多指标对比
|
||||
- [ ] 💡 添加数据钻取功能
|
||||
|
||||
---
|
||||
|
||||
**修复完成时间**: 2025-10-17
|
||||
**修复文件**: `/components/machinery/data/HistoryComparison.tsx`
|
||||
**测试状态**: ✅ **已验证通过**
|
||||
|
||||
现在选择不同的对比类型，图表和数据表都能正确切换了！🎉
|
||||
Reference in New Issue
Block a user