cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

Browse Source
This commit is contained in:
peng
2025-10-23 10:57:14 +08:00
parent 83523dad64
commit 28229ce795
354 changed files with 147599 additions and 7892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

487
src/LOAD_DEVICE_LIBRARY_COMPLETE.md Normal file
View File

@@ -0,0 +1,487 @@
# ✅ 负载设备库功能 - 开发完成
## 🎯 功能概述
负载设备库是一个完整的设备管理系统，用于管理所有负载设备的基本信息和生命周期。
## 📋 字段说明
### 核心字段（5个）
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| 设备名称 | 文本 | ✅ 是 | 设备的唯一名称标识 |
| 负载类型 | 下拉选择 | ✅ 是 | 从"负载类型"中选择 |
| 采购时间 | 日期 | ✅ 是 | 设备采购日期 |
| 使用时间 | 日期 | ⭕ 否 | 设备投入使用日期，留空表示待使用 |
| 备注 | 多行文本 | ⭕ 否 | 设备用途、注意事项等 |
### 系统字段（自动生成）
| 字段 | 说明 |
|------|------|
| id | 唯一标识符 |
| createdAt | 创建时间 |
| updatedAt | 更新时间 |
## 🎨 界面功能
### 1️⃣ 统计卡片（4个）
```
┌──────────┬──────────┬──────────┬──────────┐
│总设备数 │已投入使用│待使用 │本月采购 │
│ 3 │ 2 │ 1 │ 0 │
└──────────┴──────────┴──────────┴──────────┘
```
**说明**:
- **总设备数**: 所有设备总数
- **已投入使用**: 有使用时间的设备数量（绿色）
- **待使用**: 没有使用时间的设备数量（橙色）
- **本月采购**: 本月采购的设备数量（蓝色）
### 2️⃣ 搜索功能
**搜索范围**:
- ✅ 设备名称
- ✅ 负载类型名称
- ✅ 备注内容
**特点**:
- 实时搜索
- 高亮显示
- 一键清除
### 3️⃣ 设备列表
**列表字段**:
| 列名 | 说明 |
|------|------|
| 设备名称 | 设备的名称 |
| 负载类型 | 类型名称 + 品牌 + 型号 |
| 采购时间 | 格式化日期显示 |
| 使用时间 | 绿色显示，未使用显示"-" |
| 备注 | 超过20字自动截断 |
| 状态 | 已使用/待使用徽章 |
| 操作 | 查看、编辑、删除 |
**状态徽章**:
- 🟢 **已使用**: 有使用时间（绿色背景）
- 🟠 **待使用**: 无使用时间（橙色背景）
### 4️⃣ 分页功能
**特点**:
- ✅ 默认每页10条
- ✅ 可选每页数量: 10/20/50/100
- ✅ 支持首页/上一页/下一页/末页
- ✅ 显示总数和当前范围
- ✅ 使用通用分页组件
### 5️⃣ 操作功能
#### 🔍 查看详情
- 完整显示所有字段
- 显示创建和更新时间
- 显示关联的负载类型详情
- 类型品牌、型号、描述
#### ✏️ 编辑设备
- 修改所有字段
- 表单验证
- 自动保存更新时间
#### ➕ 新增设备
- 填写必填字段
- 选择负载类型
- 日期选择器
- 表单验证
#### 🗑️ 删除设备
- 二次确认弹窗
- 防止误删
- 不可恢复提示
## 📊 数据示例
### 示例1: 已使用设备
```yaml
设备名称: 北斗定位终端-001
负载类型: 北斗定位终端 (华为)
型号: BD-200
采购时间: 2024-01-15
使用时间: 2024-01-20 ✅
备注: 用于拖拉机实时定位
状态: 已使用 🟢
```
### 示例2: 待使用设备
```yaml
设备名称: 油耗传感器-F01
负载类型: 油耗传感器 (博世)
型号: FS-100
采购时间: 2024-03-05
使用时间: - ⭕
备注: 待安装
状态: 待使用 🟠
```
### 示例3: 监控设备
```yaml
设备名称: 高清摄像头-A01
负载类型: 高清摄像头 (海康威视)
型号: DS-2CD2345
采购时间: 2024-02-10
使用时间: 2024-02-15 ✅
备注: 监控农田作业情况
状态: 已使用 🟢
```
## 🔗 与负载类型的关联
### 数据关联
负载设备库中的"负载类型"字段，关联到"负载类型"页面的数据：
```
负载类型页面 (LoadType)
↓
类型数据
↓
负载设备库 (LoadDeviceLibrary)
↓
下拉选择
```
### 选择器显示格式
```
北斗定位终端 (华为) - BD-200
高清摄像头 (海康威视) - DS-2CD2345
油耗传感器 (博世) - FS-100
转速传感器 (西门子) - RS-500
温度传感器 (霍尼韦尔) - TS-300
```
### 列表显示格式
```
负载类型列:
北斗定位终端 (华为)
BD-200 ← 型号（灰色小字）
```
## 💾 数据存储
### LocalStorage Key
```javascript
smart_agriculture_load_devices
```
### 数据结构
```typescript
interface LoadDeviceRecord {
id: string; // 唯一标识
deviceName: string; // 设备名称
loadTypeId: string; // 负载类型ID（外键）
purchaseDate: string; // 采购时间 (YYYY-MM-DD)
usageDate?: string; // 使用时间 (YYYY-MM-DD)
remarks?: string; // 备注
createdAt: string; // 创建时间 (ISO 8601)
updatedAt: string; // 更新时间 (ISO 8601)
}
```
### 示例数据
```json
{
"id": "device-1",
"deviceName": "北斗定位终端-001",
"loadTypeId": "type-1",
"purchaseDate": "2024-01-15",
"usageDate": "2024-01-20",
"remarks": "用于拖拉机实时定位",
"createdAt": "2024-01-15T08:00:00.000Z",
"updatedAt": "2024-01-15T08:00:00.000Z"
}
```
## 🎯 使用流程
### 流程1: 新增设备
1. 点击"新增设备"按钮
2. 填写设备名称（必填）
3. 选择负载类型（必填，从下拉列表选择）
4. 选择采购时间（必填，日期选择器）
5. 选择使用时间（可选，留空表示待使用）
6. 填写备注（可选）
7. 点击"添加"保存
### 流程2: 编辑设备
1. 在列表中找到要编辑的设备
2. 点击"编辑"按钮（铅笔图标）
3. 修改需要更改的字段
4. 点击"保存"
### 流程3: 查看详情
1. 在列表中找到要查看的设备
2. 点击"查看"按钮（眼睛图标）
3. 查看完整的设备信息
4. 包括关联的负载类型详情
5. 点击"关闭"退出
### 流程4: 删除设备
1. 在列表中找到要删除的设备
2. 点击"删除"按钮（垃圾桶图标）
3. 在确认对话框中点击"确认删除"
4. 设备被永久删除
### 流程5: 搜索设备
1. 在搜索框输入关键词
2. 实时过滤列表
3. 点击"清除"恢复完整列表
## 📱 界面预览
### 统计卡片区域
```
┌─────────────────────────────────────────────────────┐
│ 负载设备库 [+ 新增设备] │
│ 管理所有负载设备的基本信息和采购记录 │
├─────────────────────────────────────────────────────┤
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │总设备数│ │已投入使│ │待使用 │ │本月采购│ │
│ │ 3 │ │ 2 │ │ 1 │ │ 0 │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
└─────────────────────────────────────────────────────┘
```
### 搜索栏
```
┌─────────────────────────────────────────────────────┐
│ 🔍 搜索设备名称、类型或备注... [清除] │
└─────────────────────────────────────────────────────┘
```
### 设备列表表格
```
┌──────────┬───────────<EFBFBD><EFBFBD><EFBFBD>┬──────────┬──────────┬──────┬──────┬────────┐
│设备名称 │负载类型 │采购时间 │使用时间 │备注 │状态 │操作 │
├──────────┼────────────┼──────────┼──────────┼──────┼──────┼────────┤
│北斗定位 │北斗定位终端│2024-01-15│2024-01-20│用于..│已使用│👁✏️🗑️ │
│终端-001 │(华为) │ │ │ │ │ │
│ │BD-200 │ │ │ │ │ │
├──────────┼────────────┼──────────┼──────────┼──────┼──────┼────────┤
│高清摄像 │高清摄像头 │2024-02-10│2024-02-15│监控..│已使用│👁✏️🗑️ │
│头-A01 │(海康威视) │ │ │ │ │ │
│ │DS-2CD2345 │ │ │ │ │ │
├──────────┼────────────┼──────────┼──────────┼──────┼──────┼────────┤
│油耗传感 │油耗传感器 │2024-03-05│ - │待安装│待使用│👁✏️🗑️ │
│器-F01 │(博世) │ │ │ │ │ │
│ │FS-100 │ │ │ │ │ │
└──────────┴────────────┴──────────┴──────────┴──────┴──────┴────────┘
```
### 分页控制
```
┌─────────────────────────────────────────────────────┐
│ 显示 1-3 条，共 3 条 │
│ [每页: 10▼] [首页] [上一页] 1 [下一页] [末页] │
└─────────────────────────────────────────────────────┘
```
## ✨ 功能特点
### 1. 完整的CRUD操作
- ✅ Create (新增)
- ✅ Read (查看)
- ✅ Update (编辑)
- ✅ Delete (删除)
### 2. 数据验证
- ✅ 必填字段验证
- ✅ 日期格式验证
- ✅ 类型关联验证
### 3. 用户体验
- ✅ 实时搜索
- ✅ 分页浏览
- ✅ 状态徽章
- ✅ 二次确认
- ✅ Toast提示
### 4. 数据展示
- ✅ 统计卡片
- ✅ 格式化日期
- ✅ 文本截断
- ✅ 状态标识
### 5. 关联数据
- ✅ 自动加载负载类型
- ✅ 下拉选择器
- ✅ 详情展示类型信息
- ✅ 安全的数据规范化
## 🔧 技术实现
### 核心技术栈
- React Hooks (useState, useEffect)
- React Hook Form (表单管理)
- 自定义分页Hook (usePagination)
- LocalStorage (数据持久化)
- Shadcn UI (UI组件库)
### 组件依赖
```typescript
// UI组件
import { Button } from '../../ui/button';
import { Card } from '../../ui/card';
import { Badge } from '../../ui/badge';
import { Table, ... } from '../../ui/table';
import { Dialog, ... } from '../../ui/dialog';
import { AlertDialog, ... } from '../../ui/alert-dialog';
import { Input } from '../../ui/input';
import { Label } from '../../ui/label';
import { Select, ... } from '../../ui/select';
import { Textarea } from '../../ui/textarea';
// 功能组件
import { DataPagination } from '../../ui/data-pagination';
import { usePagination } from '../../../lib/usePagination';
// 第三方库
import { toast } from 'sonner@2.0.3';
import { useForm } from 'react-hook-form@7.55.0';
// 图标
import { Plus, Edit, Trash2, Eye, Search } from 'lucide-react';
```
### 关键函数
#### loadData()
- 加载负载类型数据
- 加载设备数据
- 初始化示例数据
- 数据规范化处理
#### onSubmit()
- 新增/编辑设备
- 数据验证
- LocalStorage保存
- Toast通知
#### handleDelete()
- 删除确认
- 数据更新
- LocalStorage同步
#### 搜索过滤
```typescript
const filteredDevices = devices.filter(device => {
const searchLower = searchTerm.toLowerCase();
return (
device.deviceName.toLowerCase().includes(searchLower) ||
getLoadTypeName(device.loadTypeId).toLowerCase().includes(searchLower) ||
(device.remarks && device.remarks.toLowerCase().includes(searchLower))
);
});
```
#### 统计计算
```typescript
const stats = {
total: devices.length,
withUsageDate: devices.filter(d => d.usageDate).length,
withoutUsageDate: devices.filter(d => !d.usageDate).length,
thisMonth: devices.filter(d => {
const purchaseDate = new Date(d.purchaseDate);
const now = new Date();
return purchaseDate.getMonth() === now.getMonth() &&
purchaseDate.getFullYear() === now.getFullYear();
}).length,
};
```
## 📝 注意事项
### 1. 数据依赖
- 负载设备库依赖于负载类型数据
- 如果负载类型为空，选择器会显示"暂无可用类型"
- 确保先在"负载类型"页面添加类型
### 2. 日期处理
- 采购时间为必填
- 使用时间可选，留空表示待使用
- 使用HTML5日期选择器（type="date"）
### 3. 状态判断
- 有使用时间 = 已使用（绿色徽章）
- 无使用时间 = 待使用（橙色徽章）
### 4. 删除操作
- 删除是永久性的，不可恢复
- 有二次确认对话框
- 删除后从LocalStorage中移除
### 5. 搜索功能
- 支持模糊搜索
- 搜索范围：设备名称、类型名称、备注
- 大小写不敏感
## 🚀 快速开始
### 访问路径
```
智能农机管理系统 → 农机负载管理 → 负载设备库
```
### 初始数据
系统会自动创建3条示例数据：
1. 北斗定位终端-001（已使用）
2. 高清摄像头-A01（已使用）
3. 油耗传感器-F01（待使用）
### 第一次使用
1. 确保负载类型数据已存在
2. 刷新页面加载数据
3. 查看示例设备
4. 尝试添加新设备
## 📚 相关文档
- `/LOAD_TYPE_PARAMETER_EXAMPLES.md` - 负载类型参数示例
- `/PARAMETER_EXAMPLES_QUICK_VIEW.md` - 参数模板快速查看
- `/lib/usePagination.ts` - 分页Hook源码
- `/components/ui/data-pagination.tsx` - 分页组件源码
## 🎉 开发状态
- ✅ 基础架构完成
- ✅ CRUD功能完成
- ✅ 搜索功能完成
- ✅ 分页功能完成
- ✅ 统计功能完成
- ✅ 表单验证完成
- ✅ 数据关联完成
- ✅ 界面优化完成
**状态**: 🟢 **已完成，可以使用**
---
**开发时间**: 2025-10-17
**版本**: v1.0
**开发者**: AI Assistant