|
|
# 采集地址页面
|
|
|
|
|
|
> 最后更新：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：
|
|
|
```json
|
|
|
{ "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：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": { "id": 3, "name": "SIEMENS-C栋" }}
|
|
|
```
|
|
|
|
|
|
**地址下机床（§3.5 #7）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "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：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": null }
|
|
|
```
|
|
|
|
|
|
### 10. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 采集地址列表 | cnc_collect_address | 主表，需JOIN品牌名 |
|
|
|
| 品牌下拉 | cnc_brand | 弹窗表单 |
|
|
|
| 可选机床列表 | cnc_machine | 按brand_id筛选+排除已分配其他地址的机床 |
|
|
|
| 机床-地址关联 | cnc_machine.collect_address_id | 机床归属地址关系 | |