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

540
src/PARAMETER_TEMPLATE_UI_UPDATE.md Normal file
View File

@@ -0,0 +1,540 @@
# ✅ 参数模板界面入口更新完成
## 📅 更新时间
2025-10-16
## 🎯 更新内容
为**负载类型管理**添加了**参数模板查看入口**，现在您可以直接在界面上查看每种设备类型的完整参数模板定义。
## ✨ 新增功能
### 1. 参数模板列 ⭐
**位置**: 负载管理 > 负载类型 > 列表
在设备类型列表中新增了"参数模板"列：
```
┌──────────────────────────────────────────────────────────────┐
│ 设备名称 │ 类别 │ 品牌 │ 型号 │ 参数模板 │ 操作 │
├──────────────────────────────────────────────────────────────┤
│ 北斗终端 │ 北斗 │ 华为 │ ... │ [👁️ 3 个参数] │ ✏️ 🗑️ │
│ 高清摄像头 │ 摄像 │ 海康 │ ... │ [👁️ 6 个参数] │ ✏️ 🗑️ │
│ 油耗传感器 │ 油耗 │ 博世 │ ... │ [👁️ 4 个参数] │ ✏️ 🗑️ │
│ 转速传感器 │ 转速 │ 西门 │ ... │ [👁️ 4 个参数] │ ✏️ 🗑️ │
│ 温度传感器 │ 温度 │ 霍尼 │ ... │ [👁️ 4 个参数] │ ✏️ 🗑️ │
└──────────────────────────────────────────────────────────────┘
```
**功能**:
- ✅ 显示参数数量
- ✅ 点击按钮查看参数详情
- ✅ 绿色高亮提示
- ✅ 未定义参数显示"未定义"
### 2. 参数模板查看对话框 ⭐
**触发方式**: 点击"👁️ X 个参数"按钮
**对话框内容**:
```
┌───────────────────────────────────────────────────────────┐
│ 参数模板 - 高清摄像头 │
├───────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 类别: [摄像头] 品牌: 海康威视 │ │
│ │ 型号: DS-2CD2345 通信协议: RTSP │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 参数定义 (6) [3 个必填] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [1] IP地址 * [文本] │ │
│ │ 参数编码: ipAddress │ │
│ │ 默认值: 192.168.1.100 │ │
│ │ 摄像头IP地址 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [2] 端口 * [数字] │ │
│ │ 参数编码: port │ │
│ │ 默认值: 554 范围: 1 ~ 65535 │ │
│ │ RTSP端口号 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [3] 通道号 * [数字] │ │
│ │ 参数编码: channel │ │
│ │ 默认值: 1 范围: 1 ~ 16 │ │
│ │ 视频通道编号 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [4] 分辨率 [选择] │ │
│ │ 参数编码: resolution │ │
│ │ 默认值: 1080p │ │
│ │ 选项: [1080P] [4K] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [5] 帧率 (fps) [数字] │ │
│ │ 参数编码: fps │ │
│ │ 默认值: 25 范围: 15 ~ 60 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [6] 夜视功能 [布尔] │ │
│ │ 参数编码: nightVision │ │
│ │ 默认值: 是 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📋 参数模板使用说明 │ │
│ │ • 参数模板定义了该设备类型的可配置参数 │ │
│ │ • 挂载设备后，可在"负载参数"页面根据模板配置 │ │
│ │ • 必填参数标记为红色 * ，挂载设备后必须配置 │ │
│ │ • 参数编码(key)用于系统内部识别，请使用英文 │ │
│ │ • 如需修改参数模板，请编辑该设备类型 │ │
│ └───────────────────────────────<E29480><E29480>─────────────────────┘ │
│ │
│ [关闭] [✏️ 编辑设备类型] │
└───────────────────────────────────────────────────────────┘
```
**显示内容**:
1. ✅ **设备类型基本信息卡片**
- 类别（彩色徽章）
- 品牌
- 型号
- 通信协议（代码块样式）
2. ✅ **参数定义列表**
- 参数编号
- 参数名称（带必填标识*）
- 参数类型徽章（数字/文本/布尔/选择）
- 参数单位
- 参数编码（代码块样式）
- 默认值
- 范围限制（min ~ max）
- 选项列表（select类型）
- 参数说明
3. ✅ **统计信息**
- 总参数数量
- 必填参数数量（红色徽章）
4. ✅ **使用说明卡片**
- 蓝色背景
- 详细使用指引
5. ✅ **快速操作按钮**
- 关闭按钮
- 编辑设备类型按钮（可直接跳转到编辑）
### 3. 增强的统计卡片 ⭐
**新增统计项**:
```
┌──────────┬──────────────┬──────────────┬──────────┬──────────┐
│总类型数 │参数模板总数 │已配置模板 │北斗终端 │摄像头 │
│ 5 │ 21 │ 5 / 5 │ 1 │ 1 │
└──────────┴──────────────┴──────────────┴──────────┴──────────┘
```
**统计说明**:
- **总类型数**: 设备类型总数
- **参数模板总数**: 所有设备类型的参数总和（绿色高亮）
- **已配置模板**: 已定义参数的设备类型数量 / 总类型数
- **类别统计**: 前2个类别的数量
## 🎨 界面特性
### 1. 参数类型标识
**徽章颜色**:
```
[数字] - 数字类型参数
[文本] - 文本类型参数
[布尔] - 布尔类型参数
[选择] - 选择类型参数
```
### 2. 必填参数标识
```
IP地址 * ← 红色星号表示必填
端口 *
通道号 *
分辨率 ← 无星号表示可选
```
### 3. 参数编码显示
```
参数编码: ipAddress ← 代码块样式，便于识别
```
### 4. 范围限制显示
```
范围: 1 ~ 65535 ← 明确显示最小值和最大值
范围: ∞ ~ 100 ← 只有最大值
范围: 0 ~ ∞ ← 只有最小值
```
### 5. 选项列表显示
```
选项: [1080P] [4K] ← 徽章样式显示所有选项
```
### 6. 参数说明
```
┃ 摄像头IP地址 ← 左边框线，灰色文字
```
## 📊 完整示例
### 北斗终端参数模板
```
参数定义 (3) [2 个必填]
┌─────────────────────────────────────────────────────┐
│ [1] 上报间隔 * (秒) [数字] │
│ 参数编码: reportInterval │
│ 默认值: 10 范围: 1 ~ 60 │
│ 位置数据上报时间间隔 │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ [2] 精度模式 * [选择] │
│ 参数编码: accuracyMode │
│ 默认值: high │
│ 选项: [高精度] [普通] │
│ 定位精度模式 │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ [3] 数据格式 [选择] │
│ 参数编码: dataFormat │
│ 默认值: json │
│ 选项: [JSON] [XML] │
└─────────────────────────────────────────────────────┘
```
### 油耗传感器参数模板
```
参数定义 (4) [2 个必填]
┌─────────────────────────────────────────────────────┐
│ [1] 采集频率 * (Hz) [数字] │
│ 参数编码: sampleFrequency │
│ 默认值: 1 范围: 0.1 ~ 10 │
│ 数据采集频率 │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ [2] 上传频率 * (秒) [数字] │
│ 参数编码: uploadFrequency │
│ 默认值: 30 范围: 1 ~ 300 │
│ 数据上传时间间隔 │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ [3] 报警阈值 (L/h) [数字] │
│ 参数编码: alarmThreshold │
│ 默认值: 50 范围: 0 ~ 200 │
│ 油耗超过此值时报警 │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ [4] 灵敏度 [数字] │
│ 参数编码: sensitivity │
│ 默认值: 5 范围: 1 ~ 10 │
│ 传感器灵敏度等级 │
└─────────────────────────────────────────────────────┘
```
## 📋 使用指南
### 如何查看参数模板
**步骤**:
```
1. 进入"负载管理"系统
↓
2. 点击"负载类型"菜单
↓
3. 在设备类型列表中找到想查看的设备类型
↓
4. 点击"参数模板"列的"👁️ X 个参数"按钮
↓
5. 查看参数模板详情对话框
- 了解所有参数定义
- 查看参数含义和配置要求
- 了解默认值和范围限制
- 查看选项列表
↓
6. 如需修改，点击"编辑设备类型"按钮
```
### 完整的设备配置流程
```
【负载类型】查看参数模板
↓
了解设备有哪些可配置参数
查看参数的默认值、范围、选项
↓
【负载管理】挂载<EFBFBD><EFBFBD><EFBFBD>备到农机
↓
选择设备类型
填写设备名称和序列号
↓
【负载参数】配置设备参数
↓
系统根据参数模板自动生成配置表单
修改参数值（预填充默认值）
保存配置
↓
设备配置完成
```
## 🔍 界面对比
### 修改前
```
┌──────────────────────────────────────────────────────┐
│ 设备名称 │ 类别 │ 品牌 │ 型号 │ 协议 │ 格式 │ 操作 │
├──────────────────────────────────────────────────────┤
│ 北斗终端 │ 北斗 │ 华为 │ ... │ MQTT │ JSON │ ✏️ 🗑️ │
└──────────────────────────────────────────────────────┘
问题：
❌ 看不到参数模板信息
❌ 不知道设备有哪些参数
❌ 无法查看参数详情
```
### 修改后
```
┌──────────────────────────────────────────────────────────────┐
│ 设备名称 │ 类别 │ 品牌 │ 型号 │ 参数模板 │ 操作 │
├──────────────────────────────────────────────────────────────┤
│ 北斗终端 │ 北斗 │ 华为 │ ... │ [👁️ 3 个参数] │ ✏️ 🗑️ │
└──────────────────────────────────────────────────────────────┘
改进：
✅ 直观显示参数数量
✅ 点击查看参数详情
✅ 完整的参数信息展示
```
## 💡 参数模板的价值
### 1. 标准化管理 ⭐
**好处**:
- 每种设备类型有统一的参数定义
- 避免参数配置不一致
- 便于批量配置同类设备
**示例**:
```
批量配置10个摄像头，参数模板保证：
- IP地址格式一致
- 端口范围正确
- 通道号有效
- 分辨率统一
```
### 2. 快速配置 ⭐
**好处**:
- 挂载设备后自动生成配置表单
- 预填充默认值
- 减少手动输入
**示例**:
```
挂载北斗终端：
1. 选择"北斗终端"类型
2. 系统自动生成3个参数的配置表单
3. 默认值已填充：
- 上报间隔: 10秒
- 精度模式: 高精度
- 数据格式: JSON
4. 根据需要调整后保存
```
### 3. 参数验证 ⭐
**好处**:
- 自动验证参数范围
- 必填参数提醒
- 防止配置错误
**示例**:
```
配置端口参数：
- 输入: 70000
- 验证: ❌ 超出范围(1-65535)
- 输入: 554
- 验证: ✅ 通过
```
### 4. 便于理解 ⭐
**好处**:
- 查看参数模板了解设备功能
- 参数说明帮助理解含义
- 降低学习成本
**示例**:
```
查看"油耗传感器"参数模板：
- 采集频率: 数据采集频率
- 上传频率: 数据上传时间间隔
- 报警阈值: 油耗超过此值时报警
→ 立即理解设备的工作原理和配置需求
```
## 📊 统计数据
**当前系统参数模板统计**:
- 总设备类型: **5** 种
- 参数模板总数: **21** 个
- 已配置模板: **5 / 5** (100%)
- 平均每种设备: **4.2** 个参数
**各设备类型参数数量**:
- 高清摄像头: **6** 个参数（最多）
- 油耗传感器: **4** 个参数
- 转速传感器: **4** 个参数
- 温度传感器: **4** 个参数
- 北斗终端: **3** 个参数
**必填参数统计**:
- 必填参数: **13** 个
- 可选参数: **8** 个
- 必填比例: **62%**
## 📁 修改的文件
**文件**: `/components/machinery/load/LoadType.tsx`
**新增功能**:
1. ✅ 参数模板列显示
2. ✅ 参数模板查看对话框
3. ✅ 参数统计卡片
4. ✅ 参数类型标签函数
5. ✅ 查看参数处理函数
**新增导入**:
```typescript
import { Eye } from 'lucide-react'; // 眼睛图标
```
**新增状态**:
```typescript
const [showParamsDialog, setShowParamsDialog] = useState(false);
const [viewingParams, setViewingParams] = useState<DeviceType | null>(null);
```
**新增函数**:
```typescript
const handleViewParams = (type: DeviceType) => {
setViewingParams(type);
setShowParamsDialog(true);
};
const getParamTypeLabel = (type: string) => {
const labels: Record<string, string> = {
'number': '数字',
'string': '文本',
'boolean': '布尔',
'select': '选择'
};
return labels[type] || type;
};
```
**新增统计**:
```typescript
const totalParams = deviceTypes.reduce((sum, type) => sum + type.parameterDefinitions.length, 0);
const typesWithParams = deviceTypes.filter(type => type.parameterDefinitions.length > 0).length;
```
## 🎯 下一步
现在参数模板功能已经有了完整的界面入口，用户可以：
1. ✅ **查看参数模板**: 在设备类型列表中点击"X 个参数"按钮
2. ✅ **了解参数详情**: 查看参数编码、类型、默认值、范围、选项
3. ✅ **快速编辑**: 从查看对话框直接跳转到编辑
4. ✅ **统计概览**: 在统计卡片中查看参数模板总数
## 💡 常见问题
### Q1: 如何查看某个设备类型的参数模板？
**A**:
1. 进入"负载管理 > 负载类型"
2. 在列表中找到设备类型
3. 点击"参数模板"列的"👁️ X 个参数"按钮
4. 查看详细的参数模板对话框
### Q2: 参数模板对话框可以编辑参数吗？
**A**:
参数模板对话框是**只读**的，用于查看和了解参数定义。如需编辑，请点击对话框底部的"编辑设备类型"按钮，跳转到编辑表单。
### Q3: "未定义"是什么意思？
**A**:
如果参数模板列显示"未定义"，说明该设备类型还没有配置参数模板。您可以编辑该设备类型来添加参数定义。
### Q4: 参数模板总数是怎么统计的？
**A**:
参数模板总数 = 所有设备类型的参数数量之和
例如：
- 北斗终端: 3个参数
- 摄像头: 6个参数
- 油耗传感器: 4个参数
- 转速传感器: 4个参数
- 温度传感器: 4个参数
- **总计**: 21个参数
### Q5: 必填参数和可选参数有什么区别？
**A**:
- **必填参数** (标记*): 挂载设备后必须配置的参数
- **可选参数**: 可以使用默认值，不强制配置
在参数模板对话框右上角会显示必填参数的数量。
## 📞 反馈与支持
如果您在使用参数模板功能时遇到任何问题，或有改进建议，请：
1. 查看本文档和相关检查报告
2. 联系系统管理员
3. 提交功能改进建议
---
**更新完成**: 2025-10-16
**功能状态**: ✅ 已上线
**界面入口**: ✅ 已添加
**下次更新**: 根据用户反馈持续优化