# 📊 历史数据查询与对比功能 - 完整性检查报告

## 🎯 需求对照检查

### ✅ 已实现功能

| 需求项 | 状态 | 实现情况 |
|--------|------|---------|
| **用户灵活选择设备** | ✅ 部分实现 | 有设备筛选器，但未连接实际数据 |
| **灵活选择时间范围** | ⚠️ 部分实现 | 有对比类型选择，但缺少自定义时间范围 |
| **灵活选择指标** | ✅ 部分实现 | 有指标选择器，但未实现切换逻辑 |
| **时间对比功能** | ✅ 已实现 | 支持年度、季度、月度对比 |
| **折线图可视化** | ✅ 已实现 | 使用Recharts折线图展示 |
| **柱状图可视化** | ❌ 未实现 | 只有折线图，缺少柱状图 |
| **数据导出Excel** | ⚠️ 占位实现 | 按钮存在，但只是alert提示 |
| **增长率计算** | ✅ 已实现 | 自动计算并显示增长率 |

---

## 📋 详细功能分析

### 1️⃣ 设备选择功能 ⚠️

**当前状态**:
```tsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="全部设备" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="all">全部设备</SelectItem>
    <SelectItem value="m1">约翰迪尔拖拉机</SelectItem>
    <SelectItem value="m2">久保田收割机</SelectItem>
  </SelectContent>
</Select>
```

**问题**:
- ❌ 没有 `value` 和 `onValueChange` 绑定
- ❌ 设备列表是硬编码的，未从存储加载
- ❌ 选择设备后不会过滤数据

**需要改进**:
- ✅ 从 machineryStorage 加载实际设备列表
- ✅ 添加状态管理和数据筛选逻辑
- ✅ 选择设备后更新图表和表格数据

---

### 2️⃣ 时间范围选择 ⚠️

**当前状态**:
```tsx
<Select value={compareType} onValueChange={setCompareType}>
  <SelectItem value="year">年度对比</SelectItem>
  <SelectItem value="quarter">季度对比</SelectItem>
  <SelectItem value="month">月度对比</SelectItem>
</Select>
```

**问题**:
- ❌ 只能选择对比类型，不能选择具体的时间范围
- ❌ 缺少"本年vs去年"这样的快捷选项
- ❌ 没有自定义时间段选择器

**需要改进**:
- ✅ 添加时间范围选择器（开始时间、结束时间）
- ✅ 添加快捷选项："本年vs去年"、"本季度vs去年同期"
- ✅ 支持自定义对比周期

---

### 3️⃣ 指标选择功能 ⚠️

**当前状态**:
```tsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="作业面积" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="area">作业面积</SelectItem>
    <SelectItem value="efficiency">作业效率</SelectItem>
    <SelectItem value="cost">作业成本</SelectItem>
    <SelectItem value="quality">作业质量</SelectItem>
  </SelectContent>
</Select>
```

**问题**:
- ❌ 没有状态绑定，选择后不会更新
- ❌ 图表数据没有根据指标切换
- ❌ Y轴标签没有根据指标变化

**需要改进**:
- ✅ 添加指标状态管理
- ✅ 根据选择的指标切换图表数据
- ✅ 动态更新Y轴标签和单位

---

### 4️⃣ 时间对比功能 ✅

**当前状态**:
```tsx
// 年度对比
{ month: '1月', year2023: 420, year2024: 480 }

// 季度对比
{ week: '第1周', q1: 120, q2: 135 }
```

**优点**:
- ✅ 支持多种对比维度
- ✅ 数据结构清晰
- ✅ 自动切换对比周期

**可以改进**:
- 添加更多快捷对比选项
- 支持自定义对比周期

---

### 5️⃣ 可视化图表 ⚠️

**当前状态**:
```tsx
<LineChart data={compareType === 'year' ? yearComparisonData : quarterComparisonData}>
  <Line dataKey="year2023" name="2023年" />
  <Line dataKey="year2024" name="2024年" />
</LineChart>
```

**优点**:
- ✅ 折线图实现完整
- ✅ 图例清晰
- ✅ 响应式设计

**问题**:
- ❌ 只有折线图，缺少柱状图
- ❌ 不支持图表类型切换
- ❌ 缺少面积图等其他图表类型

**需要改进**:
- ✅ 添加柱状图选项
- ✅ 添加图表类型切换器
- ✅ 支持组合图表（折线+柱状）

---

### 6️⃣ 数据导出 ⚠️

**当前状态**:
```tsx
const exportToExcel = () => {
  alert('导出Excel功能');
};
```

**问题**:
- ❌ 只是一个占位符
- ❌ 没有实际的导出逻辑
- ❌ 不能真正导出Excel文件

**需要改进**:
- ✅ 实现真实的Excel导出功能
- ✅ 包含图表和数据表
- ✅ 支持自定义导出格式

---

## 🔧 需要完善的功能

### 优先级1: 高（核心功能）

#### 1. 设备选择与数据联动

```tsx
const [selectedMachinery, setSelectedMachinery] = useState('all');
const [machinery, setMachinery] = useState<MachineryRecord[]>([]);

useEffect(() => {
  // 加载农机列表
  const machineryData = machineryStorage.getAllMachinery();
  setMachinery(machineryData);
}, []);

// 根据选择的设备过滤数据
const filteredData = useMemo(() => {
  if (selectedMachinery === 'all') return allData;
  return allData.filter(item => item.machineryId === selectedMachinery);
}, [selectedMachinery, allData]);
```

---

#### 2. 指标切换功能

```tsx
const [selectedMetric, setSelectedMetric] = useState('area');

const metricConfig = {
  area: { label: '作业面积', unit: '亩' },
  efficiency: { label: '作业效率', unit: '亩/小时' },
  cost: { label: '作业成本', unit: '元' },
  quality: { label: '作业质量', unit: '分' },
};

// 根据指标获取数据
const getMetricValue = (item: OperationData, metric: string) => {
  switch (metric) {
    case 'area': return item.area;
    case 'efficiency': return item.area / item.duration;
    case 'cost': return item.cost;
    case 'quality': return item.quality;
    default: return 0;
  }
};
```

---

#### 3. 柱状图选项

```tsx
const [chartType, setChartType] = useState<'line' | 'bar'>('line');

<div className="flex gap-2 mb-4">
  <Button 
    variant={chartType === 'line' ? 'default' : 'outline'}
    onClick={() => setChartType('line')}
  >
    折线图
  </Button>
  <Button 
    variant={chartType === 'bar' ? 'default' : 'outline'}
    onClick={() => setChartType('bar')}
  >
    柱状图
  </Button>
</div>

{chartType === 'line' ? (
  <LineChart data={comparisonData}>
    {/* 折线图 */}
  </LineChart>
) : (
  <BarChart data={comparisonData}>
    {/* 柱状图 */}
  </BarChart>
)}
```

---

### 优先级2: 中（增强功能）

#### 4. 自定义时间范围

```tsx
const [customTimeRange, setCustomTimeRange] = useState({
  period1: { start: '', end: '' },
  period2: { start: '', end: '' },
});

<div className="grid grid-cols-2 gap-4">
  <div>
    <h4>对比周期1</h4>
    <Input type="date" value={customTimeRange.period1.start} />
    <Input type="date" value={customTimeRange.period1.end} />
  </div>
  <div>
    <h4>对比周期2</h4>
    <Input type="date" value={customTimeRange.period2.start} />
    <Input type="date" value={customTimeRange.period2.end} />
  </div>
</div>
```

---

#### 5. 快捷时间对比

```tsx
const quickComparisons = [
  { label: '本年 vs 去年', value: 'year-to-year' },
  { label: '本月 vs 上月', value: 'month-to-month' },
  { label: '本季度 vs 去年同期', value: 'quarter-yoy' },
];

<Select>
  <SelectTrigger>
    <SelectValue placeholder="选择对比周期" />
  </SelectTrigger>
  <SelectContent>
    {quickComparisons.map(option => (
      <SelectItem key={option.value} value={option.value}>
        {option.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>
```

---

#### 6. Excel导出功能

```tsx
import * as XLSX from 'xlsx';

const exportToExcel = () => {
  const worksheet = XLSX.utils.json_to_sheet(comparisonData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '对比数据');
  
  const fileName = `历史数据对比_${new Date().toLocaleDateString()}.xlsx`;
  XLSX.writeFile(workbook, fileName);
};
```

---

### 优先级3: 低（优化功能）

#### 7. 多指标对比

```tsx
const [selectedMetrics, setSelectedMetrics] = useState(['area', 'efficiency']);

// 支持选择多个指标同时展示
<LineChart data={comparisonData}>
  {selectedMetrics.map(metric => (
    <Line 
      key={metric}
      dataKey={metric}
      name={metricConfig[metric].label}
      stroke={colors[metric]}
    />
  ))}
</LineChart>
```

---

#### 8. 趋势分析

```tsx
// 添加趋势分析卡片
<Card className="p-6">
  <h3>趋势分析</h3>
  <div className="grid grid-cols-3 gap-4">
    <div>
      <div className="text-sm text-muted-foreground">平均增长率</div>
      <div className="text-2xl text-green-600">+12.5%</div>
    </div>
    <div>
      <div className="text-sm text-muted-foreground">最大增幅</div>
      <div className="text-2xl text-blue-600">+20.3%</div>
    </div>
    <div>
      <div className="text-sm text-muted-foreground">趋势预测</div>
      <div className="text-2xl">📈 上升</div>
    </div>
  </div>
</Card>
```

---

## 📊 功能完善建议

### 建议1: 完善数据联动

```tsx
// 完整的数据筛选逻辑
const filteredData = useMemo(() => {
  let data = allOperationData;
  
  // 按设备筛选
  if (selectedMachinery !== 'all') {
    data = data.filter(item => item.machineryId === selectedMachinery);
  }
  
  // 按时间范围筛选
  data = data.filter(item => {
    const itemDate = new Date(item.date);
    return itemDate >= startDate && itemDate <= endDate;
  });
  
  return data;
}, [selectedMachinery, startDate, endDate, allOperationData]);

// 按指标聚合数据
const aggregatedData = useMemo(() => {
  return aggregateByPeriod(filteredData, compareType, selectedMetric);
}, [filteredData, compareType, selectedMetric]);
```

---

### 建议2: 增强图表功能

```tsx
// 图表类型切换
<Tabs value={chartType} onValueChange={setChartType}>
  <TabsList>
    <TabsTrigger value="line">折线图</TabsTrigger>
    <TabsTrigger value="bar">柱状图</TabsTrigger>
    <TabsTrigger value="area">面积图</TabsTrigger>
  </TabsList>
  
  <TabsContent value="line">
    <LineChart data={comparisonData}>
      {/* 折线图配置 */}
    </LineChart>
  </TabsContent>
  
  <TabsContent value="bar">
    <BarChart data={comparisonData}>
      {/* 柱状图配置 */}
    </BarChart>
  </TabsContent>
  
  <TabsContent value="area">
    <AreaChart data={comparisonData}>
      {/* 面积图配置 */}
    </AreaChart>
  </TabsContent>
</Tabs>
```

---

### 建议3: 实现真实Excel导出

```tsx
const exportToExcel = () => {
  // 准备数据
  const exportData = comparisonData.map(row => ({
    '时间': row.month || row.week,
    [period1Label]: row.period1,
    [period2Label]: row.period2,
    '增长率': `${((row.period2 - row.period1) / row.period1 * 100).toFixed(1)}%`,
  }));
  
  // 创建工作表
  const worksheet = XLSX.utils.json_to_sheet(exportData);
  
  // 设置列宽
  worksheet['!cols'] = [
    { wch: 10 },
    { wch: 15 },
    { wch: 15 },
    { wch: 12 },
  ];
  
  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '历史数据对比');
  
  // 导出文件
  const fileName = `历史数据对比_${selectedMetric}_${new Date().toLocaleDateString()}.xlsx`;
  XLSX.writeFile(workbook, fileName);
  
  // 显示成功提示
  toast.success('数据已成功导出！');
};
```

---

## ✅ 功能完善清单

### 核心功能（必须）

- [ ] ❌ 设备选择器连接实际数据
- [ ] ❌ 指标切换功能实现
- [ ] ❌ 添加柱状图选项
- [ ] ❌ 实现真实Excel导出
- [ ] ❌ 添加时间范围选择器

### 增强功能（推荐）

- [ ] ❌ 添加"本年vs去年"快捷选项
- [ ] ❌ 支持自定义对比周期
- [ ] ❌ 图表类型切换（折线/柱状/面积）
- [ ] ❌ 多指标同时对比
- [ ] ❌ 趋势分析功能

### 优化功能（可选）

- [ ] ❌ 数据钻取功能
- [ ] ❌ 预测分析
- [ ] ❌ 同比环比分析
- [ ] ❌ 导出包含图表的PDF

---

## 🎯 实施计划

### Phase 1: 核心功能完善（2-3小时）

**任务**:
1. 设备选择器数据联动
2. 指标切换功能
3. 添加柱状图
4. Excel导出功能

**预期结果**:
- ✅ 所有选择器都能正常工作
- ✅ 数据根据选择实时更新
- ✅ 支持折线图和柱状图
- ✅ 可以导出Excel文件

---

### Phase 2: 时间对比增强（1-2小时）

**任务**:
1. 添加快捷时间对比选项
2. 实现自定义时间范围
3. 完善对比逻辑

**预期结果**:
- ✅ 支持"本年vs去年"等快捷选项
- ✅ 可以自定义对比任意两个时间段
- ✅ 对比结果准确可靠

---

### Phase 3: 可视化优化（1小时）

**任务**:
1. 添加更多图表类型
2. 优化图表样式
3. 添加趋势分析

**预期结果**:
- ✅ 支持多种图表类型
- ✅ 图表美观易读
- ✅ 提供数据洞察

---

## 📝 代码示例

### 完整的HistoryComparison组件（改进版）

```tsx
import { useState, useMemo, useEffect } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
import { 
  LineChart, Line, BarChart, Bar, 
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer 
} from 'recharts';
import { Download, Calendar, TrendingUp, BarChart3 } from 'lucide-react';
import { machineryStorage } from '../../../lib/machineryStorage';
import { MachineryRecord } from '../../../types/machinery';
import * as XLSX from 'xlsx';
import { toast } from 'sonner';

export function HistoryComparison() {
  // 状态管理
  const [compareType, setCompareType] = useState('year');
  const [selectedMachinery, setSelectedMachinery] = useState('all');
  const [selectedMetric, setSelectedMetric] = useState('area');
  const [chartType, setChartType] = useState<'line' | 'bar'>('line');
  const [machinery, setMachinery] = useState<MachineryRecord[]>([]);
  
  // 加载农机列表
  useEffect(() => {
    const machineryData = machineryStorage.getAllMachinery();
    setMachinery(machineryData);
  }, []);
  
  // 指标配置
  const metricConfig = {
    area: { label: '作业面积', unit: '亩' },
    efficiency: { label: '作业效率', unit: '亩/小时' },
    cost: { label: '作业成本', unit: '元' },
    quality: { label: '作业质量', unit: '分' },
  };
  
  // 模拟数据（实际应该从后端或存储加载）
  const yearComparisonData = [
    { month: '1月', year2023: 420, year2024: 480 },
    { month: '2月', year2023: 380, year2024: 410 },
    // ...
  ];
  
  // Excel导出
  const exportToExcel = () => {
    const exportData = yearComparisonData.map(row => ({
      '时间': row.month,
      '2023年': row.year2023,
      '2024年': row.year2024,
      '增长率': `${((row.year2024 - row.year2023) / row.year2023 * 100).toFixed(1)}%`,
    }));
    
    const worksheet = XLSX.utils.json_to_sheet(exportData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '历史数据对比');
    
    XLSX.writeFile(workbook, `历史数据对比_${new Date().toLocaleDateString()}.xlsx`);
    toast.success('数据已成功导出！');
  };
  
  return (
    <div className="space-y-6">
      {/* 标题和导出按钮 */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-green-800">历史数据查询与对比</h2>
          <p className="text-muted-foreground">多维度历史数据对比分析</p>
        </div>
        <Button onClick={exportToExcel}>
          <Download className="w-4 h-4 mr-2" />
          导出Excel
        </Button>
      </div>

      {/* 查询条件 */}
      <Card className="p-6">
        <h3 className="mb-4">查询条件</h3>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {/* 对比类型 */}
          <div>
            <label className="text-sm mb-2 block">对比类型</label>
            <Select value={compareType} onValueChange={setCompareType}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="year">年度对比</SelectItem>
                <SelectItem value="quarter">季度对比</SelectItem>
                <SelectItem value="month">月度对比</SelectItem>
                <SelectItem value="year-to-year">本年 vs 去年</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* 设备筛选 */}
          <div>
            <label className="text-sm mb-2 block">设备筛选</label>
            <Select value={selectedMachinery} onValueChange={setSelectedMachinery}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部设备</SelectItem>
                {machinery.map(m => (
                  <SelectItem key={m.id} value={m.id}>
                    {m.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 指标选择 */}
          <div>
            <label className="text-sm mb-2 block">指标选择</label>
            <Select value={selectedMetric} onValueChange={setSelectedMetric}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(metricConfig).map(([key, config]) => (
                  <SelectItem key={key} value={key}>
                    {config.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* 查询按钮 */}
          <div className="flex items-end">
            <Button className="w-full">
              <Calendar className="w-4 h-4 mr-2" />
              查询
            </Button>
          </div>
        </div>
      </Card>

      {/* 图表类型切换 */}
      <Card className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3>
            {compareType === 'year' ? '年度对比' : compareType === 'quarter' ? '季度对比' : '月度对比'}
            - {metricConfig[selectedMetric].label}
          </h3>
          <div className="flex gap-2">
            <Button
              variant={chartType === 'line' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setChartType('line')}
            >
              <TrendingUp className="w-4 h-4 mr-1" />
              折线图
            </Button>
            <Button
              variant={chartType === 'bar' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setChartType('bar')}
            >
              <BarChart3 className="w-4 h-4 mr-1" />
              柱状图
            </Button>
          </div>
        </div>
        
        <ResponsiveContainer width="100%" height={400}>
          {chartType === 'line' ? (
            <LineChart data={yearComparisonData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Line type="monotone" dataKey="year2023" stroke="#3b82f6" strokeWidth={2} name="2023年" />
              <Line type="monotone" dataKey="year2024" stroke="#10b981" strokeWidth={2} name="2024年" />
            </LineChart>
          ) : (
            <BarChart data={yearComparisonData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="year2023" fill="#3b82f6" name="2023年" />
              <Bar dataKey="year2024" fill="#10b981" name="2024年" />
            </BarChart>
          )}
        </ResponsiveContainer>
      </Card>

      {/* 对比数据表 */}
      <Card className="p-6">
        <h3 className="mb-4">对比数据详情</h3>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-2 text-left text-sm">时间</th>
                <th className="px-4 py-2 text-right text-sm">2023年</th>
                <th className="px-4 py-2 text-right text-sm">2024年</th>
                <th className="px-4 py-2 text-right text-sm">增长率</th>
              </tr>
            </thead>
            <tbody>
              {yearComparisonData.map((row, index) => (
                <tr key={index} className="border-t">
                  <td className="px-4 py-2 text-sm">{row.month}</td>
                  <td className="px-4 py-2 text-sm text-right">
                    {row.year2023} {metricConfig[selectedMetric].unit}
                  </td>
                  <td className="px-4 py-2 text-sm text-right">
                    {row.year2024} {metricConfig[selectedMetric].unit}
                  </td>
                  <td className={`px-4 py-2 text-sm text-right ${
                    row.year2024 > row.year2023 ? 'text-green-600' : 'text-red-600'
                  }`}>
                    {((row.year2024 - row.year2023) / row.year2023 * 100).toFixed(1)}%
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}
```

---

## ✅ 总结

### 当前状态

**优点**:
- ✅ 基础框架完整
- ✅ UI设计合理
- ✅ 基本的对比功能可用

**不足**:
- ❌ 缺少数据联动
- ❌ 指标切换未实现
- ❌ 只有折线图
- ❌ Excel导出是占位符
- ❌ 缺少自定义时间范围

---

### 完善建议

**优先级排序**:
1. **高**: 数据联动、指标切换、柱状图
2. **中**: Excel导出、时间范围选择
3. **低**: 高级可视化、趋势分析

**预计工作量**: 4-6小时完成核心功能

---

**文档版本**: v1.0  
**检查日期**: 2025-10-17  
**状态**: ⚠️ **需要完善核心功能**

**总体评价**: 基础框架良好，但需要完善数据联动、图表类型和导出功能才能满足完整需求。