生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
421
src/DATA_RESET_GUIDE.md
Normal file
421
src/DATA_RESET_GUIDE.md
Normal file
@@ -0,0 +1,421 @@
|
||||
# 🔄 数据重置功能使用指南
|
||||
|
||||
## 📅 更新时间
|
||||
2025-10-16
|
||||
|
||||
## 🎯 问题说明
|
||||
|
||||
当修改了示例数据（如将第7条任务状态改为"已取消"）后，如果浏览器 localStorage 中已经保存了旧数据，页面不会自动显示新的示例数据。
|
||||
|
||||
### 为什么看不到变化？
|
||||
|
||||
```typescript
|
||||
// 数据加载逻辑
|
||||
const tasksData = localStorage.getItem('smart_agriculture_driver_tasks');
|
||||
if (tasksData) {
|
||||
// ❌ 如果 localStorage 有数据，直接加载旧数据
|
||||
setTasks(JSON.parse(tasksData));
|
||||
} else {
|
||||
// ✅ 只有 localStorage 为空时，才加载新的示例数据
|
||||
setTasks(mockTasks);
|
||||
}
|
||||
```
|
||||
|
||||
**原因**:
|
||||
- localStorage 保存了旧的任务数据
|
||||
- 代码优先从 localStorage 加载，不会重新加载示例数据
|
||||
- 需要清除 localStorage 才能看到新数据
|
||||
|
||||
## ✨ 解决方案
|
||||
|
||||
### 方案1: 使用重置按钮（推荐）⭐
|
||||
|
||||
我已经在驾驶员任务管理页面添加了"重置示例数据"按钮！
|
||||
|
||||
#### 使用步骤：
|
||||
|
||||
```
|
||||
1️⃣ 进入"驾驶员任务管理"页面
|
||||
2️⃣ 点击右上角"重置示例数据"按钮
|
||||
3️⃣ 页面自动刷新，显示最新示例数据
|
||||
```
|
||||
|
||||
#### 按钮位置：
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ 驾驶员任务管理 [重置示例数据] [创建任务] │
|
||||
│ 创建、分配和跟踪驾驶员作业任务 ↑ ↑ │
|
||||
│ 新增按钮 原有按钮 │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 功能说明：
|
||||
|
||||
```typescript
|
||||
const handleResetData = () => {
|
||||
// 1. 清除 localStorage 中的任务数据
|
||||
localStorage.removeItem('smart_agriculture_driver_tasks');
|
||||
|
||||
// 2. 重新加载数据（会加载最新示例数据）
|
||||
loadData();
|
||||
|
||||
// 3. 显示成功提示
|
||||
toast.success('示例数据已重置');
|
||||
};
|
||||
```
|
||||
|
||||
**效果**:
|
||||
- ✅ 一键清除旧数据
|
||||
- ✅ 自动加载新示例数据
|
||||
- ✅ 显示成功提示
|
||||
- ✅ 立即看到更新
|
||||
|
||||
### 方案2: 浏览器控制台
|
||||
|
||||
如果你想手动清除数据：
|
||||
|
||||
#### 步骤：
|
||||
|
||||
1. **打开浏览器开发者工具**
|
||||
- Windows: `F12` 或 `Ctrl + Shift + I`
|
||||
- Mac: `Cmd + Option + I`
|
||||
|
||||
2. **切换到 Console 标签**
|
||||
|
||||
3. **执行清除命令**
|
||||
```javascript
|
||||
localStorage.removeItem('smart_agriculture_driver_tasks');
|
||||
```
|
||||
|
||||
4. **刷新页面**
|
||||
- `F5` 或 `Ctrl + R`
|
||||
|
||||
#### 效果：
|
||||
```
|
||||
Before: 显示旧数据（task-7 状态为"进行中"）
|
||||
After: 显示新数据（task-7 状态为"已取消"）
|
||||
```
|
||||
|
||||
### 方案3: 清除所有 localStorage
|
||||
|
||||
**警告**: 这会清除所有保存的数据！
|
||||
|
||||
```javascript
|
||||
// 清除所有 localStorage 数据
|
||||
localStorage.clear();
|
||||
```
|
||||
|
||||
**影响范围**:
|
||||
- ❌ 任务数据
|
||||
- ❌ 驾驶员数据
|
||||
- ❌ 农机数据
|
||||
- ❌ 地块数据
|
||||
- ❌ 用户登录状态
|
||||
- ❌ 所有其他保存的数据
|
||||
|
||||
**不推荐**，除非你想完全重置系统。
|
||||
|
||||
## 📊 第7条任务更新详情
|
||||
|
||||
### 修改内容
|
||||
|
||||
| 字段 | 修改前 | 修改后 |
|
||||
|------|--------|--------|
|
||||
| 状态 | 进行中 | **已取消** |
|
||||
| 注释 | 进行中任务（有问题上报） | **已取消任务（有问题上报）** |
|
||||
|
||||
### 任务信息
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: 'task-7',
|
||||
taskNumber: 'T202510160007',
|
||||
driverName: '周九',
|
||||
machineryName: '约翰迪尔拖拉机',
|
||||
fieldName: '南七地块',
|
||||
operationType: '灌溉',
|
||||
description: '滴灌作业，确保灌溉均匀',
|
||||
status: '已取消', // ← 已更新
|
||||
issues: [
|
||||
{
|
||||
type: '设备故障',
|
||||
description: '滴灌管道出现破损，需要更换'
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 预期显示
|
||||
|
||||
重置数据后，第7条任务应该显示：
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────┐
|
||||
│ T202510160007 │ 周九 │ 约翰迪尔拖拉机 │ 南七地块 │
|
||||
│ 灌溉 │ 10-16 06:00 │ - │ 中 🟡 │
|
||||
│ 已取消 🔴 │ ⚠️ 1个待处理问题 │
|
||||
└────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**状态徽章**:
|
||||
```tsx
|
||||
<Badge className="bg-red-100 text-red-800">
|
||||
已取消
|
||||
</Badge>
|
||||
```
|
||||
|
||||
## 🎯 使用场景对比
|
||||
|
||||
### 场景1: 查看示例数据更新
|
||||
|
||||
**目标**: 查看第7条任务状态已改为"已取消"
|
||||
|
||||
**操作**:
|
||||
```
|
||||
1. 点击"重置示例数据"按钮
|
||||
2. 查看任务列表第7条
|
||||
3. 确认状态显示为"已取消" 🔴
|
||||
```
|
||||
|
||||
**优势**:
|
||||
- ✅ 快速简单
|
||||
- ✅ 一键操作
|
||||
- ✅ 有成功提示
|
||||
- ✅ 不影响其他数据
|
||||
|
||||
### 场景2: 开发测试
|
||||
|
||||
**目标**: 反复测试功能，需要重置数据
|
||||
|
||||
**操作**:
|
||||
```
|
||||
1. 进行各种操作（创建、修改任务）
|
||||
2. 想要恢复到初始状态
|
||||
3. 点击"重置示例数据"
|
||||
4. 数据恢复到示例状态
|
||||
```
|
||||
|
||||
**优势**:
|
||||
- ✅ 快速恢复初始状态
|
||||
- ✅ 无需刷新页面
|
||||
- ✅ 立即生效
|
||||
- ✅ 保留其他数据
|
||||
|
||||
### 场景3: 演示展示
|
||||
|
||||
**目标**: 向他人展示系统，需要干净的示例数据
|
||||
|
||||
**操作**:
|
||||
```
|
||||
1. 演示前点击"重置示例数据"
|
||||
2. 获得完整的示例数据
|
||||
3. 开始演示
|
||||
```
|
||||
|
||||
**优势**:
|
||||
- ✅ 数据完整规范
|
||||
- ✅ 展示效果好
|
||||
- ✅ 各种状态都有
|
||||
- ✅ 包含问题示例
|
||||
|
||||
## 📁 修改文件
|
||||
|
||||
### 核心文件
|
||||
1. ✅ `/components/machinery/driver/DriverTask.tsx`
|
||||
- 新增 `handleResetData()` 函数
|
||||
- 在页面顶部添加"重置示例数据"按钮
|
||||
|
||||
### 代码变更
|
||||
|
||||
```typescript
|
||||
// 新增重置函数
|
||||
const handleResetData = () => {
|
||||
localStorage.removeItem('smart_agriculture_driver_tasks');
|
||||
loadData();
|
||||
toast.success('示例数据已重置');
|
||||
};
|
||||
|
||||
// 新增按钮
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleResetData} size="sm">
|
||||
重置示例数据
|
||||
</Button>
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
创建任务
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 💡 最佳实践
|
||||
|
||||
### 1. 何时使用重置功能
|
||||
|
||||
**适合使用**:
|
||||
- ✅ 代码更新了示例数据
|
||||
- ✅ 数据测试后想恢复
|
||||
- ✅ 演示前准备
|
||||
- ✅ 学习系统功能
|
||||
|
||||
**不需要使用**:
|
||||
- ❌ 正常创建/修改任务
|
||||
- ❌ 日常使用系统
|
||||
- ❌ 数据没有问题时
|
||||
|
||||
### 2. 数据安全提示
|
||||
|
||||
**重置功能只影响**:
|
||||
- ✅ 驾驶员任务数据
|
||||
- ✅ localStorage 中的任务列表
|
||||
|
||||
**不影响**:
|
||||
- ✅ 驾驶员档案
|
||||
- ✅ 农机档案
|
||||
- ✅ 地块信息
|
||||
- ✅ 其他系统数据
|
||||
|
||||
### 3. 重置后的数据
|
||||
|
||||
重置后会加载完整的示例数据，包含：
|
||||
|
||||
| 状态类型 | 数量 | 说明 |
|
||||
|---------|------|------|
|
||||
| 待接收 | 3条 | 展示任务分配流程 |
|
||||
| 已接收 | 1条 | 展示接收状态 |
|
||||
| 进行中 | 2条 | 展示执行状态 |
|
||||
| 已取消 | 3条 | 展示取消场景（包含task-7）|
|
||||
| 已完成 | 3条 | 展示完成记录 |
|
||||
|
||||
**特殊示例**:
|
||||
- ✅ task-7: 已取消 + 设备故障问题
|
||||
- ✅ task-11: 已取消 + 天气问题
|
||||
- ✅ task-12: 已取消 + 地块问题
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### Q1: 点击重置按钮后没有变化？
|
||||
|
||||
**A**: 检查以下几点：
|
||||
|
||||
1. **刷新页面**
|
||||
```
|
||||
按 F5 或 Ctrl+R 刷新
|
||||
```
|
||||
|
||||
2. **检查控制台**
|
||||
```
|
||||
打开 F12，查看是否有错误
|
||||
```
|
||||
|
||||
3. **确认 localStorage 已清除**
|
||||
```javascript
|
||||
// 在控制台检查
|
||||
localStorage.getItem('smart_agriculture_driver_tasks')
|
||||
// 应该返回 null
|
||||
```
|
||||
|
||||
### Q2: 重置后数据还是旧的？
|
||||
|
||||
**A**: 可能是缓存问题：
|
||||
|
||||
1. **硬刷新页面**
|
||||
```
|
||||
Ctrl + Shift + R (Windows)
|
||||
Cmd + Shift + R (Mac)
|
||||
```
|
||||
|
||||
2. **清除<E6B885><E999A4><EFBFBD>览器缓存**
|
||||
```
|
||||
设置 → 隐私和安全 → 清除浏览数据
|
||||
```
|
||||
|
||||
### Q3: 重置会丢失我创建的任务吗？
|
||||
|
||||
**A**: 是的！重置会清除所有任务数据。
|
||||
|
||||
**解决方案**:
|
||||
- 重置前导出重要数据
|
||||
- 或者不使用重置功能
|
||||
- 手动修改需要的任务
|
||||
|
||||
### Q4: 能否只重置某一条数据？
|
||||
|
||||
**A**: 当前重置功能会清除所有任务数据。
|
||||
|
||||
**替代方案**:
|
||||
- 在任务列表中找到 task-7
|
||||
- 手动编辑状态改为"已取消"
|
||||
- 或者使用浏览器开发工具手动修改 localStorage
|
||||
|
||||
### Q5: 其他页面有重置功能吗？
|
||||
|
||||
**A**: 目前只在驾驶员任务管理页面添加了重置功能。
|
||||
|
||||
**其他数据重置**:
|
||||
```javascript
|
||||
// 驾驶员数据
|
||||
localStorage.removeItem('smart_agriculture_drivers');
|
||||
|
||||
// 农机数据
|
||||
localStorage.removeItem('smart_agriculture_machinery');
|
||||
|
||||
// 地块数据
|
||||
localStorage.removeItem('smart_agriculture_fields');
|
||||
```
|
||||
|
||||
## ✅ 验证清单
|
||||
|
||||
### 功能验证
|
||||
- [x] "重置示例数据"按钮正常显示
|
||||
- [x] 点击按钮后清除 localStorage
|
||||
- [x] 自动加载新示例数据
|
||||
- [x] 显示成功提示消息
|
||||
- [x] 任务列表立即更新
|
||||
|
||||
### 数据验证
|
||||
- [x] task-7 状态显示为"已取消"
|
||||
- [x] 状态徽章颜色为红色
|
||||
- [x] 包含设备故障问题
|
||||
- [x] 其他任务数据完整
|
||||
- [x] 总共12条示例数据
|
||||
|
||||
### 视觉验证
|
||||
- [x] 按钮位于页面右上角
|
||||
- [x] 使用 outline 样式
|
||||
- [x] 尺寸为 sm
|
||||
- [x] 与"创建任务"按钮对齐
|
||||
- [x] 间距合适
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
现在你有两种方式查看第7条任务的更新：
|
||||
|
||||
### 推荐方式 ⭐
|
||||
```
|
||||
1. 进入"驾驶员任务管理"页面
|
||||
2. 点击右上角"重置示例数据"按钮
|
||||
3. 立即看到 task-7 状态为"已取消" 🔴
|
||||
```
|
||||
|
||||
### 手动方式
|
||||
```
|
||||
1. 打开浏览器控制台 (F12)
|
||||
2. 执行: localStorage.removeItem('smart_agriculture_driver_tasks')
|
||||
3. 刷新页面 (F5)
|
||||
```
|
||||
|
||||
**第7条任务更新内容**:
|
||||
- ✅ 状态: 进行中 → **已取消**
|
||||
- ✅ 原因: 设备故障（滴灌管道破损）
|
||||
- ✅ 徽章: 🔴 红色"已取消"
|
||||
- ✅ 问题: ⚠️ 1个待处理问题
|
||||
|
||||
现在点击"重置示例数据"按钮，就能看到更新后的第7条任务了！🎊
|
||||
|
||||
---
|
||||
|
||||
**更新人**: AI助手
|
||||
**更新日期**: 2025-10-16
|
||||
**版本**: v1.0
|
||||
**影响范围**: 驾驶员任务管理页面
|
||||
Reference in New Issue
Block a user