# 采集地址详情页面

> 最后更新：2026-04-25
> 状态：已设计

---

### 1. 基本信息

| 项 | 值 |
|----|-----|
| 路由 | /collect-address/:id |
| 权限 | admin |
| 入口 | 采集地址列表点击名称链接 / 仪表盘采集服务状态区点击地址名称 |
| 面包屑 | 首页 / 采集地址管理 / {地址名称} |

### 2. 界面布局

┌──────────────────────────────────────────────────────────┐
│ [面包屑] 首页 / 采集地址管理 / FANUC-A栋                    │
├──────────────────────────────────────────────────────────┤
│ [基本信息区]                                              │
│ < 返回    采集地址详情：FANUC-A栋                           │
│ 名称：FANUC-A栋         HTTP地址：http://10.1.1.1/          │
│ 品牌：FANUC             采集间隔：30秒                      │
│ 状态：启用               上次采集：3秒前                     │
│ 连续失败：0次            总机床数：32台                      │
├──────────────────────────────────────────────────────────┤
│ [关联机床区]                                              │
│ 机床名称    | device_code  | 车间 | 在线 | 当前程序 | 零件数 │
│ 西-1.8     | fanake_1.8  | A栋 | 在线 | 1566.NC | 580   │
│ 西-1.10    | fanake_1.10 | A栋 | 在线 | O123.NC | 120   │
│ ...                                                      │
├──────────────────────────────────────────────────────────┤
│ [最近采集记录]                        [查看原始JSON]        │
│ 采集时间     | 耗时  | 状态  | 机床数 | 失败数              │
│ 17:36:38    | 1.2s | 成功 | 32    | 0                   │
│ 17:36:08    | 1.1s | 成功 | 32    | 0                   │
│ 17:35:38    | 3.5s | 成功 | 31    | 1                   │
│ 17:35:08    | -    | 失败 | -     | -                   │
├──────────────────────────────────────────────────────────┤
│ [采集失败趋势（近7天折线图）]                                │
│ [============图表区域============]                         │
└──────────────────────────────────────────────────────────┘

### 3. 数据区块

| 区块 | 展示字段 | 控件类型 | 刷新策略 |
|------|---------|---------|---------|
| 基本信息 | 名称、URL、品牌、间隔、状态、上次采集、连续失败、机床数 | 文本展示 | 页面加载时请求一次 |
| 关联机床 | 机床名称、device_code、车间、在线、当前程序、零件数 | el-table | 页面加载时请求一次 |
| 最近采集记录 | 采集时间、耗时、状态、机床数、失败数 | el-table | 页面加载时请求一次 |
| 采集失败趋势 | 日期、失败次数 | 折线图 | 页面加载时请求一次 |

### 4. 操作按钮

| 名称 | 位置 | 显示条件 | 点击行为 |
|------|------|---------|---------|
| 返回 | 页头左侧 | 始终 | router.back() |
| 机床名称 | 行内链接 | 始终 | 跳转机床详情页(/machine/:id) |
| 查看原始JSON | 采集记录表头 | 始终 | 弹窗显示选中采集记录的原始JSON |

### 5. 弹窗规格

**原始JSON查看弹窗：**
- 宽度800px，标题=原始采集JSON
- 内容：代码高亮显示JSON，只读不可编辑
- 支持：复制到剪贴板

### 6. 交互流程

- 加载：请求地址详情API+关联机床API+最近采集记录API+失败趋势API->渲染
- 点击机床名称：router.push到机床详情页
- 查看原始JSON：点击"查看原始JSON"->弹窗显示最近一次成功采集的原始JSON（或选择某条记录的JSON）
- 返回：router.back()

### 7. 空状态

- 关联机床无数据：el-empty 该地址暂无关联机床
- 采集记录无数据：el-empty 暂无采集记录

### 8. 接口引用与数据结构

> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.5 端点清单，本节仅引用编号并定义返回数据结构。

#### 接口引用

| 接口名称 | 端点编号 | 界面用途 |
|---------|---------|---------|
| 地址详情 | §3.5 #2 | 基本信息卡片 |
| 关联机床 | §3.5 #7 | 机床列表表格 |
| 近期采集记录 | §3.5 #8 | 采集记录表格 |
| 最新原始JSON | §3.5 #9 | 原始JSON弹窗 |

#### 数据结构

**地址详情（§3.5 #2）：**

Response：
```json
{ "code": 0, "data": {
  "id": 1, "name": "FANUC-A栋", "url": "http://10.1.1.1/", "brandName": "FANUC",
  "collectInterval": 30, "isEnabled": 1, "lastCollectTime": "2026-04-25T17:36:38",
  "failCount": 0, "machineCount": 32
}}
```

**关联机床（§3.5 #7）：**

Response：
```json
{ "code": 0, "data": { "items": [
  { "machineId": 1, "machineName": "西-1.8", "deviceCode": "fanake_1.8", "workshopName": "A栋", "isOnline": 1, "programName": "1566.NC", "partCount": 580 },
  { "machineId": 2, "machineName": "西-1.10", "deviceCode": "fanake_1.10", "workshopName": "A栋", "isOnline": 1, "programName": "O123.NC", "partCount": 120 }
]}}
```

**近期采集记录（§3.5 #8）：**

Response：
```json
{ "code": 0, "data": { "items": [
  { "requestTime": "2026-04-25T17:36:38", "duration": 1200, "isSuccess": 1, "machineCount": 32, "failMachineCount": 0 },
  { "requestTime": "2026-04-25T17:36:08", "duration": 1100, "isSuccess": 1, "machineCount": 32, "failMachineCount": 0 },
  { "requestTime": "2026-04-25T17:35:38", "duration": 3500, "isSuccess": 1, "machineCount": 31, "failMachineCount": 1 },
  { "requestTime": "2026-04-25T17:35:08", "duration": null, "isSuccess": 0, "machineCount": null, "failMachineCount": null }
]}}
```

**最新原始JSON（§3.5 #9）：**

Response：
```json
{ "code": 0, "data": { "rawJson": "[{\"device\":\"fanake_1.8\",\"desc\":\"西-1.8\",\"tags\":[{\"id\":\"_io_status\",\"desc\":\"设备状态\",\"value\":\"1.00000\"},{\"id\":\"Tag5\",\"desc\":\"执行的NC主程序名\",\"value\":\"1566.NC\"},{\"id\":\"Tag8\",\"desc\":\"当前加工零件数\",\"value\":\"580.00000\"}]}]" }}
```

### 8. 数据需求

> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。

| 数据需求 | 草案对应 | 说明 |
|---------|---------|------|
| 采集地址基本信息 | cnc_collect_address | 主表 |
| 关联机床列表 | cnc_machine | 按collect_address_id查询 |
| 最近采集记录 | log_collect_raw (日志库) | 按collect_address_id+时间倒序，跨库查询 |
| 原始JSON查看 | log_collect_raw.raw_json | 弹窗展示，MEDIUMTEXT字段 |
| 采集失败趋势 | log_collect_raw聚合 | 按天统计is_success=0的次数 |