2b46490d54
- Add design specification for ODF v1.0.2.1 optical box rack type support - Add requirements document outlining optical box feature scope and constraints - Add task breakdown for implementation across backend, frontend, and database layers - Add design mockups for rack list page and optical box detail page layout - Add requirements document detailing dual-column layout for optical box racks - Document port naming conventions for optical box (A-1, B-2) vs ODF (1-1, 2-2) formats - Establish database schema changes for rack_type and port count fields - Define API contract changes for OdfRacksDto with new type and port count properties
7.7 KiB
7.7 KiB
设计：ODF v1.0.2.1 - 光交箱机架类型支持
设计图参考
docs/v1.0.2.1/设计图.png— 机架列表页（机房详情），机架卡片右侧显示"类型：ODF"或"类型：光交箱"，光交箱卡片有浅蓝色左边框docs/v1.0.2.1/光交箱机架详情页.png— 光交箱机架详情页，每个框内左右两栏并排显示
涉及文件
后端（C# .NET）
server/ZR.Model/Business/OdfRacks.cs- 机架模型，新增字段server/ZR.Model/Business/Dto/OdfRacksDto.cs- 机架 DTO，新增字段server/ZR.Model/Business/Dto/OdfPortsDto.cs- 端口 DTO，导入导出适配server/ZR.Service/Business/OdfRacksService.cs- 机架服务层server/ZR.Vue/src/views/business/OdfRacks.vue- 管理后台机架列表页server/ZR.Vue/src/components/business/OdfRackForm.vue- 管理后台机架表单
前端（uni-app）
odf-uniapp/pages/rack/index.vue- 机架列表页（机房详情）odf-uniapp/pages/rack-detail/index.vue- 机架详情页（核心改动）odf-uniapp/services/machine.js- API 服务层
数据库变更
odf_racks 表新增字段
ALTER TABLE odf_racks ADD COLUMN rack_type INT NOT NULL DEFAULT 0 COMMENT '机架类型：0=ODF机架, 1=光交箱';
ALTER TABLE odf_racks ADD COLUMN left_ports_count INT NULL COMMENT '左侧端子数量（光交箱侧）';
ALTER TABLE odf_racks ADD COLUMN right_ports_count INT NULL COMMENT '右侧端子数量（ODF侧）';
后端模型变更
OdfRacks.cs 新增属性
/// <summary>
/// 机架类型：0=ODF机架, 1=光交箱
/// </summary>
public int RackType { get; set; }
/// <summary>
/// 左侧端子数量（光交箱侧）
/// </summary>
public int? LeftPortsCount { get; set; }
/// <summary>
/// 右侧端子数量（ODF侧）
/// </summary>
public int? RightPortsCount { get; set; }
OdfRacksDto.cs 新增属性
public int RackType { get; set; }
public int? LeftPortsCount { get; set; }
public int? RightPortsCount { get; set; }
管理后台变更
OdfRackForm.vue
- 新增"机架类型"选择器（el-select），选项：ODF机架(0) / 光交箱(1)
- 新增"左侧端子数"和"右侧端子数"输入框（el-input-number）
- 光交箱类型时标签显示为"光交箱端子数"和"ODF端子数"
OdfRacks.vue
- 表格新增"机架类型"列，使用标签展示（ODF机架 / 光交箱）
uni-app 前端变更
rack/index.vue（机架列表页 - 参考设计图2）
根据设计图，机架卡片布局为：
- 卡片内左侧显示机架名称，右侧显示"类型：ODF"或"类型：光交箱"
- 光交箱类型的卡片有浅蓝色左边框（
border-left: 6rpx solid #1A73EC）区分 - 布局为 flex row，justify-content: space-between
<view class="rack-card" v-for="item in rackList" :key="item.id"
:class="{ 'rack-card-optical': item.rackType === 1 }"
@click="goDetail(item)">
<text class="rack-name">{{ item.rackName }}</text>
<text class="rack-type">类型：{{ item.rackType === 1 ? '光交箱' : 'ODF' }}</text>
</view>
样式：
.rack-card {
display: flex;
align-items: center;
justify-content: space-between;
/* ...existing styles... */
}
.rack-card-optical {
border-left: 6rpx solid #1A73EC;
}
.rack-type {
font-size: 26rpx;
color: #666;
}
rack-detail/index.vue（机架详情页 - 核心改动，参考设计图1）
根据设计图，详情页布局如下：
顶部信息区
- 导航栏标题：
{rackName}详情 - 导航栏下方显示：左侧"机房名称机房名称"，右侧"类型：类型名称"
- 图例栏：绿色=已连接，红色=已断开
光交箱类型 - 框内双栏并排布局（核心）
每个 frame-card 内部分为左右两栏并排（flex row）：
-
左栏（光交箱端子）：粉色背景
#FFB6C1/#FFC0CB- 6行，每行12个端口
- 行命名：第1行=A，第2行=B，第3行=C，第4行=D，第5行=E，第6行=F
- 端口命名：A-1, A-2, A-3...A-12；B-1, B-2...B-12；以此类推
- 行号显示在行左侧（1, 2, 3, 4, 5, 6）
-
右栏（ODF端子）：浅蓝色背景
#B3E5FC/#E0F7FA- 6行，每行12个端口
- 端口命名：1-1, 1-2...1-12；2-1, 2-2...2-12；3-1, 3-2...3-12；以此类推
- 行号显示在行左侧（1, 2, 3, 4, 5, 6）
-
左右两栏之间无明显间距，紧密排列
-
整个框可横向滚动（scroll-x）
┌─────────────────────────────────────────────────────────────────┐
│ 1框 │
│ ┌──────────────────────────┐┌──────────────────────────────────┐│
│ │ 粉色背景（光交箱端子） ││ 浅蓝色背景（ODF端子） ││
│ │ 1 ││ 1 ││
│ │ ● ● ● ● ● ● ● ● ● ● ● ●││ ● ● ● ● ● ● ● ● ● ● ● ● ││
│ │ A-1 A-2 A-3 ... A-12 ││ 1-1 1-1 1-1 ... 1-12 ││
│ │ 2 ││ 2 ││
│ │ ● ● ● ● ● ● ● ● ● ● ● ●││ ● ● ● ● ● ● ● ● ● ● ● ● ││
│ │ B-1 B-2 ... B-12 ││ 2-1 2-2 ... 2-12 ││
│ │ ... ││ ... ││
│ │ 6 ││ 6 ││
│ │ ● ● ● ● ● ● ● ● ● ● ● ●││ ● ● ● ● ● ● ● ● ● ● ● ● ││
│ │ F-1 ... F-12││ 1-1 ... 1-12 ││
│ └──────────────────────────┘└──────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘
ODF 类型 - 保持现有布局不变
现有的单栏布局，白色背景，不做任何改动。
端子命名逻辑
// 光交箱侧端子命名（左栏）
// 行按 A/B/C/D/E/F 命名，端口为 A-1, A-2, A-3...
function getOpticalBoxPortName(rowIndex, portIndex) {
const rowLetter = String.fromCharCode(65 + rowIndex) // A=65, B=66...
return `${rowLetter}-${portIndex + 1}` // A-1, A-2, B-1, B-2...
}
// ODF侧端子命名（右栏）
// 行按 1/2/3/4/5/6 命名，端口为 1-1, 1-2, 2-1, 2-2...
function getOdfPortName(rowIndex, portIndex) {
return `${rowIndex + 1}-${portIndex + 1}` // 1-1, 1-2, 2-1, 2-2...
}
参数传递
goDetail 跳转时需传递 rackType 参数：
function goDetail(item) {
uni.navigateTo({
url: '/pages/rack-detail/index?rackId=' + item.id
+ '&rackName=' + encodeURIComponent(item.rackName)
+ '&roomName=' + encodeURIComponent(roomName.value)
+ '&rackType=' + (item.rackType || 0)
})
}
services/machine.js
getRackList返回数据已包含 rackType（后端 DTO 自动映射，无需改动）getRackDetail返回数据需包含机架类型信息，可能需要后端调整接口或通过 URL 参数传递
导入导出适配
导入
- 导入模板新增"机架类型"列
- 解析时根据机架类型判断端子命名格式
- 光交箱端子支持 A-1、B-2 格式的行号/端口号解析
导出
- 导出数据新增"机架类型"列
- 光交箱端子按 A-1 格式导出行号和端口名