cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2f0196ae4a685799d667f7c3ebea810a7ffa8432
smart-crop-ui/src/DATA_RESET_GUIDE.md

9.8 KiB
Raw Blame History

🔄 数据重置功能使用指南

📅 更新时间

2025-10-16

🎯 问题说明

当修改了示例数据（如将第7条任务状态改为"已取消"）后，如果浏览器 localStorage 中已经保存了旧数据，页面不会自动显示新的示例数据。

为什么看不到变化？

// 数据加载逻辑
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️⃣ 页面自动刷新，显示最新示例数据

按钮位置：

┌────────────────────────────────────────────────┐
│ 驾驶员任务管理                    [重置示例数据] [创建任务] │
│ 创建、分配和跟踪驾驶员作业任务         ↑            ↑      │
│                                    新增按钮    原有按钮   │
└────────────────────────────────────────────────┘

功能说明：

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. 执行清除命令

    localStorage.removeItem('smart_agriculture_driver_tasks');

  4. 刷新页面

    • F5 或 Ctrl + R

效果：

Before: 显示旧数据（task-7 状态为"进行中"）
After:  显示新数据（task-7 状态为"已取消"）

方案3: 清除所有 localStorage

警告: 这会清除所有保存的数据！

// 清除所有 localStorage 数据
localStorage.clear();

影响范围:

  • ❌ 任务数据
  • ❌ 驾驶员数据
  • ❌ 农机数据
  • ❌ 地块数据
  • ❌ 用户登录状态
  • ❌ 所有其他保存的数据

不推荐，除非你想完全重置系统。

📊 第7条任务更新详情

修改内容

字段 修改前 修改后
状态 进行中 已取消
注释 进行中任务（有问题上报） 已取消任务（有问题上报）

任务信息

{
  id: 'task-7',
  taskNumber: 'T202510160007',
  driverName: '周九',
  machineryName: '约翰迪尔拖拉机',
  fieldName: '南七地块',
  operationType: '灌溉',
  description: '滴灌作业，确保灌溉均匀',
  status: '已取消',  // ← 已更新
  issues: [
    {
      type: '设备故障',
      description: '滴灌管道出现破损，需要更换'
    }
  ]
}

预期显示

重置数据后，第7条任务应该显示：

┌────────────────────────────────────────────────────┐
│ T202510160007 │ 周九 │ 约翰迪尔拖拉机 │ 南七地块 │
│ 灌溉          │ 10-16 06:00   │ -    │ 中 🟡   │
│ 已取消 🔴     │ ⚠️ 1个待处理问题             │
└────────────────────────────────────────────────────┘

状态徽章:

<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() 函数
    • 在页面顶部添加"重置示例数据"按钮

代码变更

// 新增重置函数
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 已清除

    // 在控制台检查
localStorage.getItem('smart_agriculture_driver_tasks')
// 应该返回 null

Q2: 重置后数据还是旧的？

A: 可能是缓存问题：

  1. 硬刷新页面

    Ctrl + Shift + R (Windows)
Cmd + Shift + R (Mac)

  2. 清除<EFBFBD><EFBFBD><EFBFBD>览器缓存

    设置 → 隐私和安全 → 清除浏览数据

Q3: 重置会丢失我创建的任务吗？

A: 是的！重置会清除所有任务数据。

解决方案:

  • 重置前导出重要数据
  • 或者不使用重置功能
  • 手动修改需要的任务

Q4: 能否只重置某一条数据？

A: 当前重置功能会清除所有任务数据。

替代方案:

  • 在任务列表中找到 task-7
  • 手动编辑状态改为"已取消"
  • 或者使用浏览器开发工具手动修改 localStorage

Q5: 其他页面有重置功能吗？

A: 目前只在驾驶员任务管理页面添加了重置功能。

其他数据重置:

// 驾驶员数据
localStorage.removeItem('smart_agriculture_drivers');

// 农机数据
localStorage.removeItem('smart_agriculture_machinery');

// 地块数据
localStorage.removeItem('smart_agriculture_fields');

✅ 验证清单

功能验证

  • "重置示例数据"按钮正常显示
  • 点击按钮后清除 localStorage
  • 自动加载新示例数据
  • 显示成功提示消息
  • 任务列表立即更新

数据验证

  • task-7 状态显示为"已取消"
  • 状态徽章颜色为红色
  • 包含设备故障问题
  • 其他任务数据完整
  • 总共12条示例数据

视觉验证

  • 按钮位于页面右上角
  • 使用 outline 样式
  • 尺寸为 sm
  • 与"创建任务"按钮对齐
  • 间距合适

🎉 总结

现在你有两种方式查看第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
影响范围: 驾驶员任务管理页面