生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
817
src/HISTORY_COMPARISON_FEATURE_CHECK.md
Normal file
817
src/HISTORY_COMPARISON_FEATURE_CHECK.md
Normal file
@@ -0,0 +1,817 @@
|
||||
# 📊 历史数据查询与对比功能 - 完整性检查报告
|
||||
|
||||
## 🎯 需求对照检查
|
||||
|
||||
### ✅ 已实现功能
|
||||
|
||||
| 需求项 | 状态 | 实现情况 |
|
||||
|--------|------|---------|
|
||||
| **用户灵活选择设备** | ✅ 部分实现 | 有设备筛选器，但未连接实际数据 |
|
||||
| **灵活选择时间范围** | ⚠️ 部分实现 | 有对比类型选择，但缺少自定义时间范围 |
|
||||
| **灵活选择指标** | ✅ 部分实现 | 有指标选择器，但未实现切换逻辑 |
|
||||
| **时间对比功能** | ✅ 已实现 | 支持年度、季度、月度对比 |
|
||||
| **折线图可视化** | ✅ 已实现 | 使用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
|
||||
**状态**: ⚠️ **需要完善核心功能**
|
||||
|
||||
**总体评价**: 基础框架良好，但需要完善数据联动、图表类型和导出功能才能满足完整需求。
|
||||
Reference in New Issue
Block a user