# 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数据支持格式化显示和复制功能