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