haoliang-net/docs/02-功能清单/管理后台/05-采集地址/05-01-采集地址页面.md

采集地址页面

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

---

1. 基本信息

项	值
路由	/collect-address
权限	admin
入口	侧边栏采集地址
面包屑	首页 / 采集地址管理

2. 界面布局

┌──────────────────────────────────────────────────────────┐ │ [面包屑] 首页 / 采集地址管理 │ ├──────────────────────────────────────────────────────────┤ │ [操作栏] [+ 新增地址] │ ├──────────────────────────────────────────────────────────┤ │ [列表区] │ │ 名称 | URL | 品牌 | 间隔 | 状态 | 上次采集 | 连续失败 | 操作 │ │ FANUC-A栋 | http://10.1.1.1/ | FANUC| 30s | 启用 | 3秒前 | 0 | [编辑][停用]│ │ FANUC-B栋 | http://10.1.2.1/ | FANUC| 60s | 启用 | 58秒前 | 0 | [编辑][停用]│ └──────────────────────────────────────────────────────────┘

3. 查询条件

无（地址数量少）。

4. 列表字段

字段名	列宽	排序	超长处理	对齐
名称	-	y	tooltip	left
URL	min-width=200	-	tooltip	left
品牌	-	-	-	center
采集间隔	-	-	-	center
状态	-	-	-	center
上次采集	-	-	-	center
连续失败	-	-	-	center
操作	120	-	-	center

列宽规则见 02-前端全局规范.md el-table列宽均分规则：数据列不设width自动均分，URL列设min-width=200保证可读性，操作列固定120。

5. 操作按钮

名称	权限编码	位置	显示条件	点击行为
新增地址	address:create	页头	始终	打开新增弹窗
编辑	address:update	行操作	始终	打开编辑弹窗
启用/停用	address:toggle	行操作	始终	确认->切换

6. 弹窗规格

新增/编辑采集地址弹窗：

• 宽度600px，遮罩有，ESC关闭是(脏数据检测)

表单字段：

字段	控件	必填	默认值	校验	联动
地址名称	el-input maxlength=100	是	-	必填	-
HTTP地址	el-input maxlength=500	是	-	必填+URL格式	-
关联品牌	el-select	是	-	必填	选定后下方加载该品牌机床
采集间隔	el-input-number min=5 max=300	是	30	必填+正整数	-
选择机床	el-checkbox-group	否	空	-	品牌变化时重新加载机床列表

机床选择区域说明：

• 允许不选机床（先创建地址，后续在机床管理中关联）
• 只显示属于该品牌且未分配到其他地址的机床（编辑时含当前已分配的）
• 每个checkbox显示：device_code (机床名称) 车间 IP

7. 状态机

采集地址is_enabled：

• 1(启用): el-tag success -> 可编辑/停用
• 0(停用): el-tag danger -> 可编辑/启用

8. 交互流程

• 加载：请求采集地址列表->渲染
• 新增：弹窗->选品牌(加载机床)->勾选机床->保存->关闭->刷新
• 编辑：弹窗(回填数据+已选机床)->修改->保存->关闭->刷新
• 启停：确认->调API->刷新

9. 空状态

列表无数据：el-empty 暂无采集地址数据，点击新增地址添加

10. 接口引用与数据结构

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

接口引用

接口名称	端点编号	界面用途
地址列表	§3.5 #1	表格数据渲染
新增地址	§3.5 #3	新增弹窗保存
编辑地址	§3.5 #4	编辑弹窗保存
删除地址	§3.5 #5	删除操作
启停地址	§3.5 #6	启停切换
地址下机床	§3.5 #7	弹窗中机床列表
品牌下拉	§3.13 #2	弹窗表单下拉

数据结构

地址列表（§3.5 #1）：

Response：

{ "code": 0, "data": { "items": [
  { "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 },
  { "id": 2, "name": "FANUC-B栋", "url": "http://10.1.2.1/", "brandName": "FANUC", "collectInterval": 60, "isEnabled": 1, "lastCollectTime": "2026-04-25T17:35:38", "failCount": 0, "machineCount": 28 }
]}}

新增地址（§3.5 #3）：

Response：

{ "code": 0, "message": "success", "data": { "id": 3, "name": "SIEMENS-C栋" }}

地址下机床（§3.5 #7）：

Response：

{ "code": 0, "data": { "items": [
  { "id": 1, "deviceCode": "fanake_1.8", "name": "西-1.8", "workshopName": "A栋", "ipAddress": "10.1.1.8", "isAssigned": false },
  { "id": 2, "deviceCode": "fanake_1.10", "name": "西-1.10", "workshopName": "A栋", "ipAddress": "10.1.1.10", "isAssigned": true }
]}}

编辑地址（§3.5 #4）/ 删除地址（§3.5 #5）/ 启停地址（§3.5 #6）：

Response：

{ "code": 0, "message": "success", "data": null }

10. 数据需求

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

数据需求	草案对应	说明
采集地址列表	cnc_collect_address	主表，需JOIN品牌名
品牌下拉	cnc_brand	弹窗表单
可选机床列表	cnc_machine	按brand_id筛选+排除已分配其他地址的机床
机床-地址关联	cnc_machine.collect_address_id	机床归属地址关系