cavin/smart-crop-ui

Fork 0

Files

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

2025-10-23 10:57:14 +08:00

14 KiB

Raw Blame History

✅ 负载管理菜单结构调整

📅 更新时间

2025-10-16

🎯 用户需求

用户反馈:

"这四个菜单是单独的在农机负载管理下面的二级菜单，不要采用tab形式"

🔧 调整内容

之前的设计 ❌

使用Tab形式:

农机负载管理
└── 负载管理
    └── 页面内包含4个Tab:
        [负载类型] [负载参数] [负载设备] [负载管理]

现在的设计 ✅

使用独立菜单:

农机负载管理
├── 负载类型
├── 负载参数
├── 负载设备
└── 负载管理

📝 修改的文件

1. navigation.ts

文件路径: /types/navigation.ts

修改内容:

{
  id: 'load-management',
  label: '农机负载管理',
  icon: 'Gauge',
  children: [
    { id: 'load-type', label: '负载类型', path: '/machinery/load/type' },
    { id: 'load-parameter', label: '负载参数', path: '/machinery/load/parameter' },
    { id: 'load-device-library', label: '负载设备', path: '/machinery/load/library' },
    { id: 'load-device', label: '负载管理', path: '/machinery/load/device' },
  ]
}

说明:

✅ 4个独立的二级菜单项
✅ 每个菜单有独立的路由路径
✅ 路由路径清晰明确

2. MachineryManagement.tsx

文件路径: /components/dashboard/MachineryManagement.tsx

导入语句

// 农机负载管理
import { LoadDevice } from '../machinery/load/LoadDevice';
import { LoadType } from '../machinery/load/LoadType';
import { LoadParameter } from '../machinery/load/LoadParameter';
import { LoadDeviceLibrary } from '../machinery/load/LoadDeviceLibrary';

路由配置

// 农机负载管理
case '/machinery/load/type':
  return <LoadType />;
case '/machinery/load/parameter':
  return <LoadParameter />;
case '/machinery/load/library':
  return <LoadDeviceLibrary />;
case '/machinery/load/device':
  return <LoadDevice />;

说明:

✅ 每个菜单对应一个独立的路由
✅ 每个路由渲染一个独立的组件
✅ 页面切换时会重新加载组件

🎨 菜单结构对比

侧边栏菜单效果

┌─────────────────────────┐
│ 智能农机管理系统         │
├─────────────────────────┤
│ 📂 农机档案              │
│   ├─ 农机档案管理        │
│   ├─ 农机分类与标签管理   │
│   └─ 农机二维码管理      │
│                         │
│ 👤 驾驶员档案            │
│   ├─ 驾驶员信息管理      │
│   └─ 驾驶员任务管理      │
│                         │
│ ⚡ 农机负载管理          │
│   ├─ 负载类型    ← 菜单1 │
│   ├─ 负载参数    ← 菜单2 │
│   ├─ 负载设备    ← 菜单3 │
│   └─ 负载管理    ← 菜单4 │
│                         │
│ 📡 设备实时监控与定位     │
│ ...                     │
└─────────────────────────┘

点击效果

点击"负载类型":

整个主内容区切换为"负载类型"页面
显示设备类型列表和管理功能

点击"负载参数":

整个主内容区切换为"负载参数"页面
显示参数模板列表和管理功能

点击"负载设备":

整个主内容区切换为"负载设备"页面
显示设备库列表和管理功能

点击"负载管理":

整个主内容区切换为"负载管理"页面
显示设备挂载/拆卸功能

📊 4个菜单详细说明

1. 负载类型

菜单文本: 负载类型
路由路径: /machinery/load/type
组件: <LoadType />
文件: /components/machinery/load/LoadType.tsx

功能:

定义设备类别（如：高清摄像头、北斗定位器等）
管理设备类型的基本信息
为每种类型设置默认参数

页面标题: "负载类型管理"

2. 负载参数

菜单文本: 负载参数
路由路径: /machinery/load/parameter
组件: <LoadParameter />
文件: /components/machinery/load/LoadParameter.tsx

功能:

为每种设备类型定义参数模板
管理参数的名称、类型、单位等
设置参数的验证规则

页面标题: "负载参数管理"

3. 负载设备

菜单文本: 负载设备
路由路径: /machinery/load/library
组件: <LoadDeviceLibrary />
文件: /components/machinery/load/LoadDeviceLibrary.tsx

功能:

管理设备库中的设备实例
添加、编辑、删除设备
查看设备的详细信息和状态
管理设备的生命周期

页面标题: "负载设备库"

4. 负载管理

菜单文本: 负载管理
路由路径: /machinery/load/device
组件: <LoadDevice />
文件: /components/machinery/load/LoadDevice.tsx

功能:

从设备库选择设备挂载到农机
拆卸农机上的设备
查看设备挂载历史
管理设备与农机的关系

页面标题: "负载设备管理"

🔄 工作流程

完整使用流程

步骤1: 定义设备类型
  ↓ 点击"负载类型"菜单
  ↓ 添加设备类型（如：高清摄像头）
  
步骤2: 配置参数模板
  ↓ 点击"负载参数"菜单
  ↓ 为"高清摄像头"定义参数
  
步骤3: 添加设备到设备库
  ↓ 点击"负载设备"菜单
  ↓ 添加设备实例（如：摄像头-001）
  
步骤4: 挂载设备到农机
  ↓ 点击"负载管理"菜单
  ↓ 选择农机，从设备库挂载设备
  
✅ 完成

日常使用场景

场景1: 添加新设备

1. 点击"负载设备"菜单
2. 点击"新增设备"按钮
3. 选择设备类型，填写信息
4. 保存

场景2: 挂载设备

1. 点击"负载管理"菜单
2. 选择要挂载设备的农机
3. 从设备库选择可用设备
4. 确认挂载

场景3: 修改设备类型

1. 点击"负载类型"菜单
2. 找到要修改的设备类型
3. 点击编辑按钮
4. 修改信息并保存

📂 路由路径总结

菜单	路由路径	组件文件
负载类型	`/machinery/load/type`	`LoadType.tsx`
负载参数	`/machinery/load/parameter`	`LoadParameter.tsx`
负载设备	`/machinery/load/library`	`LoadDeviceLibrary.tsx`
负载管理	`/machinery/load/device`	`LoadDevice.tsx`

✅ 验证步骤

如何验证修改成功

刷新浏览器 - Ctrl + Shift + R
登录系统
检查侧边栏菜单:
- 找到"农机负载管理"
- 应该看到4个子菜单：
  - ✅ 负载类型
  - ✅ 负载参数
  - ✅ 负载设备
  - ✅ 负载管理
测试每个菜单:
- 点击"负载类型" → 显示负载类型管理页面
- 点击"负载参数" → 显示负载参数管理页面
- 点击"负载设备" → 显示负载设备库页面
- 点击"负载管理" → 显示负载设备管理页面
检查页面切换:
- 每次点击菜单，整个主内容区应该切换
- 不是Tab切换，而是整页切换
- 侧边栏对应的菜单项应该高亮

成功标志 ✅

✅ 侧边栏显示4个独立菜单项
✅ 每个菜单都可以独立点击
✅ 点击菜单时，整页切换（非Tab切换）
✅ 菜单高亮显示当前选中项
✅ 所有4个页面都能正常显示

💡 Tab vs 独立菜单对比

Tab形式的特点

优点:

✅ 快速切换，无页面重载
✅ 功能聚合在一起
✅ 适合频繁切换的场景

缺点:

❌ 侧边栏菜单结构不够直观
❌ 需要进入页面后才能看到所有功能
❌ 不符合传统的菜单使用习惯

独立菜单的特点

优点:

✅ 侧边栏菜单结构清晰
✅ 所有功能一目了然
✅ 符合传统的后台管理系统设计
✅ 可以通过URL直接访问特定页面

缺点:

❌ 切换时需要重新加载组件
❌ 侧边栏菜单项较多

用户选择

根据用户反馈，采用 独立菜单 形式 ✅

原因：

更符合传统后台管理系统的使用习惯
功能模块分布更清晰
便于快速定位和访问特定功能
侧边栏菜单结构更直观

🎨 界面效果

完整页面布局

┌─────────────────────────────────────────────────────────┐
│ 智慧农业生产管理系统                                     │
│ [智能农机] [地块信息] ... [中心配置]                    │
└─────────────────────────────────────────────────────────┘
┌───────────┬─────────────────────────────────────────────┐
│ 侧边栏     │ 主内容区                                     │
├───────────┤                                             │
│ 农机档案   │                                             │
│ 驾驶员档案 │  (根据点击的菜单显示不同的页面)              │
│           │                                             │
│ 农机负载管理│                                             │
│ → 负载类型 │  例如：点击"负载设备"后                      │
│   负载参数 │                                             │
│   负载设备 │  ┌─────────────────────────────────────┐   │
│   负载管理 │  │ 负载设备库                           │   │
│           │  │ 管理所有负载设备                      │   │
│ 设备监控   │  ├─────────────────────────────────────┤   │
│ 故障诊断   │  │ [+ 新增设备]                        │   │
│ ...       │  │                                     │   │
│           │  │ 暂无设备                             │   │
│           │  │ 还没有添加任何负载设备                │   │
│           │  └─────────────────────────────────────┘   │
│           │                                             │
└───────────┴─────────────────────────────────────────────┘

菜单切换效果