73 lines
2.7 KiB
Markdown
73 lines
2.7 KiB
Markdown
|
# FIIH数据总览 - 趋势分析图表功能
|
|||
|
|
|
|||
|
|
## 一、需求概述
|
|||
|
|
|
|||
|
|
在现有的FIIH数据总览页面（`dataOverview/index.vue`）顶部新增趋势分析图表区域，参考IOT数据趋势分析页面（`iot/trend/index.vue`）的实现方式。
|
|||
|
|
|
|||
|
|
**变更说明**：原计划新建独立的"质检分析"页面，现改为直接在数据总览页面添加趋势图表，减少页面跳转，提升用户体验。
|
|||
|
|
|
|||
|
|
## 二、数据结构说明
|
|||
|
|
|
|||
|
|
### 2.1 通道配对规则
|
|||
|
|
|
|||
|
|
**从ch4开始，偶数通道存储质检项名称，奇数通道存储对应的质检数据值：**
|
|||
|
|
|
|||
|
|
| 质检项通道 | 质检数据通道 | 说明 |
|
|||
|
|
|-----------|-------------|------|
|
|||
|
|
| fiih_data_ch0~ch3 | - | 前4个通道为其他用途 |
|
|||
|
|
| fiih_data_ch4 | fiih_data_ch5 | ch4存质检项名称，ch5存ch4的检测值 |
|
|||
|
|
| fiih_data_ch6 | fiih_data_ch7 | ch6存质检项名称，ch7存ch6的检测值 |
|
|||
|
|
| ... | ... | 以此类推 |
|
|||
|
|
| fiih_data_ch22 | fiih_data_ch23 | ch22存质检项名称，ch23存ch22的检测值 |
|
|||
|
|
|
|||
|
|
### 2.2 配置表通道说明
|
|||
|
|
|
|||
|
|
配置表 `ymes_fiih_config` 中的 `fiih_config_ch0~ch23` 字段存储JSON格式的通道配置：
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"data_name": "温度",
|
|||
|
|
"unit": "℃",
|
|||
|
|
"lower_limit": 20,
|
|||
|
|
"upper_limit": 40,
|
|||
|
|
"enabled": true
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 三、功能设计
|
|||
|
|
|
|||
|
|
### 3.1 趋势分析功能
|
|||
|
|
|
|||
|
|
1. **对象体多选**：支持同时选择多个对象体进行对比分析
|
|||
|
|
2. **质检项多选**：支持同时选择多个质检项，质检项会合并所有选中对象体的质检项并显示支持数量
|
|||
|
|
3. **日期范围选择**：支持自定义日期范围和快速日期按钮（近7天、近30天、近90天）
|
|||
|
|
4. **上下限线**：仅当选择单个对象体+单个质检项时显示上下限线
|
|||
|
|
5. **多系列图表**：每条线显示"对象体-质检项"（单对象体时只显示质检项名称）
|
|||
|
|
|
|||
|
|
### 3.2 图表展示
|
|||
|
|
|
|||
|
|
- X轴：采集时间
|
|||
|
|
- Y轴：质检数据值
|
|||
|
|
- 多条数据线：不同颜色区分不同对象体/质检项组合
|
|||
|
|
- 上下限线：橙色虚线（仅单对象体+单质检项时显示）
|
|||
|
|
|
|||
|
|
## 四、已完成的修改
|
|||
|
|
|
|||
|
|
### 4.1 后端文件
|
|||
|
|
|
|||
|
|
| 文件路径 | 修改内容 |
|
|||
|
|
|----------|----------|
|
|||
|
|
| `FiihDataController.java` | 添加 `/inspectionItems` 和 `/trend` 接口 |
|
|||
|
|
| `IFiihDataService.java` | 添加 `getInspectionItems` 和 `getTrendData` 方法 |
|
|||
|
|
| `FiihDataServiceImpl.java` | 实现趋势数据查询，支持多对象体多质检项 |
|
|||
|
|
|
|||
|
|
### 4.2 前端文件
|
|||
|
|
|
|||
|
|
| 文件路径 | 修改内容 |
|
|||
|
|
|----------|----------|
|
|||
|
|
| `fiihData.js` | 添加 `getInspectionItems` 和 `getTrendData` API |
|
|||
|
|
| `dataOverview/index.vue` | 添加趋势分析卡片，支持多选和ECharts图表 |
|
|||
|
|
|
|||
|
|
## 五、无需新增SQL
|
|||
|
|
|
|||
|
|
不需要新建菜单，直接在现有数据总览页面添加功能。
|