134 lines
4.1 KiB
Markdown
134 lines
4.1 KiB
Markdown
|
# FIIH质量管理数据详情页面
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
基于IoT设备详情页面的设计模式，为FIIH质量管理系统创建了数据详情页面，支持通过任务ID查看相关的质量数据记录。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 🎯 核心功能
|
|||
|
|
- **任务信息展示**：显示任务基础信息，包括任务ID、名称、版本、环节信息等
|
|||
|
|
- **状态管理**：支持进行中、完成、作废三种状态的显示和筛选
|
|||
|
|
- **通道配置**：支持24通道配置信息的展示和管理
|
|||
|
|
- **数据记录**：展示质量数据记录列表，支持分页和时间筛选
|
|||
|
|
- **数据详情**：支持查看JSON数据、分析结果和复杂数据
|
|||
|
|
|
|||
|
|
### 🔧 技术特性
|
|||
|
|
- **响应式设计**：基于Element UI的响应式布局
|
|||
|
|
- **动态通道**：根据实际数据动态显示有效通道列
|
|||
|
|
- **JSON格式化**：智能JSON数据格式化和展示
|
|||
|
|
- **时间筛选**：支持日期范围筛选和快捷选择
|
|||
|
|
|
|||
|
|
## 文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
mes-ui/src/views/mes/fiih/
|
|||
|
|
├── README.md # 说明文档
|
|||
|
|
├── index.vue # FIIH配置管理页面（已更新）
|
|||
|
|
├── fiihDetailByTaskId.vue # FIIH数据详情页面（新增）
|
|||
|
|
└── api/
|
|||
|
|
└── fiihData.js # FIIH数据API接口（新增）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 后端文件
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
yjh-mes/src/main/java/cn/sourceplan/fiih/
|
|||
|
|
├── domain/
|
|||
|
|
│ └── FiihData.java # FIIH数据实体类
|
|||
|
|
├── mapper/
|
|||
|
|
│ └── FiihDataMapper.java # FIIH数据Mapper接口
|
|||
|
|
├── service/
|
|||
|
|
│ ├── IFiihDataService.java # FIIH数据Service接口
|
|||
|
|
│ └── impl/
|
|||
|
|
│ └── FiihDataServiceImpl.java # FIIH数据Service实现
|
|||
|
|
├── controller/
|
|||
|
|
│ └── FiihDataController.java # FIIH数据控制器
|
|||
|
|
└── resources/mapper/fiih/
|
|||
|
|
└── FiihDataMapper.xml # MyBatis映射文件
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 从配置页面跳转
|
|||
|
|
在FIIH配置管理页面中，点击"查看数据"按钮即可跳转到对应任务的数据详情页面。
|
|||
|
|
|
|||
|
|
### 2. 直接访问
|
|||
|
|
通过URL直接访问：`/mes/fiih/task/{taskId}`
|
|||
|
|
|
|||
|
|
### 3. 功能操作
|
|||
|
|
- **返回**：点击返回按钮回到上一页
|
|||
|
|
- **刷新**：刷新当前页面数据
|
|||
|
|
- **时间筛选**：选择时间范围筛选数据
|
|||
|
|
- **状态筛选**：按任务状态筛选数据
|
|||
|
|
- **查看详情**：点击操作列的详情按钮查看完整数据信息
|
|||
|
|
- **查看JSON**：点击查看按钮查看格式化的JSON数据
|
|||
|
|
|
|||
|
|
## 数据库表结构
|
|||
|
|
|
|||
|
|
基于提供的`ymes_fiih_data`表结构，支持：
|
|||
|
|
- 24个数据通道（fiih_data_ch0 ~ fiih_data_ch23）
|
|||
|
|
- JSON数据存储（fiih_data_json）
|
|||
|
|
- 数据分析结果（fiih_data_analysis）
|
|||
|
|
- 复杂数据存储（fiih_data_complex）
|
|||
|
|
- 任务和环节关联信息
|
|||
|
|
|
|||
|
|
## 权限配置
|
|||
|
|
|
|||
|
|
需要配置以下权限：
|
|||
|
|
- `fiih:data:list` - 数据列表查询权限
|
|||
|
|
- `fiih:data:query` - 数据详情查询权限
|
|||
|
|
- `fiih:data:add` - 数据新增权限
|
|||
|
|
- `fiih:data:edit` - 数据修改权限
|
|||
|
|
- `fiih:data:remove` - 数据删除权限
|
|||
|
|
- `fiih:data:export` - 数据导出权限
|
|||
|
|
|
|||
|
|
## 路由配置
|
|||
|
|
|
|||
|
|
已在`mes-ui/src/router/index.js`中添加隐藏路由：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
{
|
|||
|
|
path: '/mes/fiih/task',
|
|||
|
|
component: Layout,
|
|||
|
|
hidden: true,
|
|||
|
|
permissions: ['fiih:data:query'],
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
path: ':fiihTaskId',
|
|||
|
|
component: () => import('@/views/mes/fiih/fiihDetailByTaskId'),
|
|||
|
|
name: 'FiihDetailByTaskId',
|
|||
|
|
meta: {title: 'FIIH任务详情', activeMenu: '/mes/fiih/index', noCache: true}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 扩展开发
|
|||
|
|
|
|||
|
|
### 添加新的数据字段
|
|||
|
|
1. 在`FiihData.java`实体类中添加属性
|
|||
|
|
2. 在`FiihDataMapper.xml`中添加对应的映射
|
|||
|
|
3. 在前端页面中添加显示逻辑
|
|||
|
|
|
|||
|
|
### 自定义通道配置
|
|||
|
|
通道配置支持JSON格式，可包含：
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"name": "温度传感器",
|
|||
|
|
"unit": "℃",
|
|||
|
|
"type": "temperature",
|
|||
|
|
"range": [0, 100],
|
|||
|
|
"precision": 0.1,
|
|||
|
|
"description": "环境温度监测"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 页面基于任务ID（fiihTaskId）进行数据查询
|
|||
|
|
2. 通道配置信息来自FIIH配置表
|
|||
|
|
3. 数据记录按采集时间倒序排列
|
|||
|
|
4. 支持大数据量的分页展示
|
|||
|
|
5. JSON数据支持格式化显示和复制功能
|