|
|
# 采集地址详情页面
|
|
|
|
|
|
> 最后更新：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的次数 |
|