本文档用于整理 JY1.0 项目中“立库查询/立库可视化”组件目前已经实现的界面结构、后端数据来源、交互逻辑和现有功能范围，便于后续培训、验收、维护和功能扩展。
本文档依据当前前端实现整理，核心代码位置如下：
src/views/WarehouseManagement/WarehouseVisualization/index.vuestatic/config.js立库详细界面当前对应的页面名称为：
WarehouseVisualizationSystem立库可视化src/views/WarehouseManagement/WarehouseVisualization/index.vue该页面用于展示立体仓库库位占用情况，并支持按巷道查看、按行层筛选、单击库位查看库位详情或物料明细。
图 1：立库可视化主界面
页面整体采用标准的 div.app-container + el-card 布局，主体包含以下区域：
当前页面只有一个主标签页：
立库可视化代码中保留了图表分析相关逻辑，但当前模板中未实际启用“分析”页签。
图 2：筛选区与显示模式切换示意
顶部区域已经实现以下控件：
控件类型：el-select
可选项固定为：
对应值为：
1234用途：
控件类型：el-select
用途：
特点：
按钮文字：搜索
作用：
GetPosition 获取最新立库数据。说明：
searchKeyword 变量，但页面上没有对应输入框，因此当前没有“按列关键字搜索”的实际入口。按钮文字：重置
作用：
页面提示：
注意：
按钮文字：刷新数据
作用：
defaultWarehouseData说明：
GetPosition 返回并写入的 defaultWarehouseData。控件类型：el-switch
两种模式：
texticon作用：
切换效果：
物 / 盘 / 空 / 锁- 锁库：el-icon-lock - 有物料有托盘：el-icon-box - 有托盘无物料：el-icon-tickets - 空库位：el-icon-minus
页面提示：
页面中部已实现 6 个统计卡片：
计算方式：
立库行数 * 列数统计状态值为 2 的库位数量。
统计状态值为 1 的库位数量。
统计状态值为 0 的库位数量。
计算方式：
(有物料有托盘 + 有托盘无物料) / 总库位数 * 100%保留 1 位小数。
显示当前 warehouseData.length，即当前已加载的立库行数。
页面已实现状态图例，用于帮助用户理解库位颜色含义：
另外，代码中还支持：
9）该状态在单元格样式和状态文字中已实现，但图例区未单独展示“锁库”说明。
这是页面的核心区域。
页面使用原生 table 绘制立库矩阵，不是 el-table。
结构包含：
每一行对应一个“行-层”值，例如：
01-0103-12页面左侧固定显示该行层编号。
每列按照数字列号展示，从 1 到 columnCount。
columnCount 的计算规则为：
行-层当前库位单元格支持以下状态：
| 状态值 | 含义 | 前端显示简称 | 颜色 |
|---|---|---|---|
0 | 空库位 | 空 | 灰色 |
1 | 有托盘无物料 | 盘 | 橙色 |
2 | 有物料有托盘 | 物 | 绿色 |
9 | 锁库/在存取 | 锁 | 蓝色 |
当前已实现以下交互：
当 warehouseData.length === 0 时，页面显示空白占位区域。
说明：
el-empty 结构，但目前已注释，没有实际“暂无数据”文案和“加载示例数据”按钮。页面底部已实现分页控件，条件为：
totalPages > 1 时显示分页能力包括：
每页可选条数：
581015说明：
图 3：库位详情弹窗示意
点击非物料状态库位时，会弹出“库位详情”窗口。
触发条件：
2格式：
库位详情 + 库位编号例如：
库位详情 03-12-01当前弹窗内容为库位状态说明文本，即 selectedCellDetail.description。
不同状态说明如下：
0：空闲库位，可存放物料1：有托盘但无物料，需补充物料2：有托盘且有物料，正常使用中9：在存取，库位已锁目前该弹窗属于轻量说明弹窗，展示内容较简洁，没有进一步展示：
这些字段在前端对象构造里有部分预留，但未在弹窗模板中完整展示。
图 4：物料信息弹窗示意
点击状态为 2 的库位时，会弹出“库位信息”窗口。
触发条件：
2格式：
库位信息 + pno即使用返回数据第一条的库位编号作为标题显示。
点击单元格后会调用 StockDetail(rowLayer, column)，查询数据库视图：
StockDetailView查询方式为手写 SQL：
select ... from StockDetailView where pno='xx-xx-xx'点击单元格时，前端会把界面上的 行-层 和列号转换为后端查询用的 pno：
行-层 以 - 拆分行-列-层 重新拼装例如：
03-011203-12-01当前弹窗表格已展示以下字段：
mnomnamespecthaoqtylockqtybatch其中数量字段已实现：
munit前端对接口返回做了多种兼容判断，支持以下几类格式：
response.data 直接就是数组response.data.data 是数组response.data.rows 是数组response.data 是单对象，且对象里包含 mno 或 pno说明：
如果接口无返回数据，则提示：
未查询到数据当前页面实际对接了两类立库相关数据。
请求方法：
GetPosition(hang)请求构造：
this.CreateData('11', 'GetPositionView', param)参数内容：
hang：巷道编号potvar：空字符串tt：固定值 1调用方式：
this.ExecDatabase1(Data)返回结果用途：
defaultWarehouseDatarefreshData()请求方法：
StockDetail(rowLayer, column)请求方式：
StockDetailView调用方式：
this.ExecDatabase1(Data)返回结果用途：
materialInfoList立库接口使用独立配置地址：
static/config.jsurl1 = http://192.168.1.27:10006request_config1 = url1 + '/submit/MESCommonBase.ashx'说明：
基于当前页面代码，已经实现并可确认的功能如下。
2 的库位查询物料明细2 状态库位查看库位状态说明以下能力在代码中已有部分实现或预留，但从当前模板和实际入口看，尚未完整开放为可见功能。
页面 data 中存在：
statusFilter筛选逻辑中也保留了状态筛选分支，但顶部没有对应状态下拉框，因此用户当前无法直接按状态筛选。
页面 data 中存在：
searchKeyword并保留了按列搜索的逻辑入口，但模板中没有对应输入框，因此当前不构成实际功能。
代码中已实现：
但模板中没有对应图表容器，也没有实际启用 warehouse-analysis 页签，因此当前属于预留代码。
代码中已实现 exportWarehouseData()，可以把当前 warehouseData 导出为 JSON 文件。
但当前页面模板没有挂出“导出”按钮，因此用户在界面上无法直接使用。
代码中存在 printWarehouseReport()，但当前只是提示“功能开发中”，没有实际打印逻辑。
代码中存在 printMaterialInfo()，当前同样仅提示“功能开发中”。
代码中存在 focusOnCell(rowLayer, column)，可自动滚动到指定单元格位置。
但当前页面没有表格明细区或其他入口去调用它，因此属于预留能力。
从当前实现可归纳出以下业务规则。
2 代表该库位已有物料，应进入物料明细查询流程2 状态不查物料，进入库位说明流程9 表示库位正在存取或已锁定mounted 时调用 GetPosition(1)，默认先加载第一巷道界面展示编码与后端查询编码不是同一个结构：
行-层行-列-层因此点击库位时必须做一次编号重组。
典型操作流程如下：
从现有实现看，该页面已经具备以下优点：
从代码现状看，也存在一些限制：
如果后续继续完善该页面，建议优先考虑以下方向：
statusFilter 实际入口行-层-列当前“立库详细界面”已经不是简单静态展示，而是一个具备实际业务查询能力的立库可视化页面。它已经实现了：
同时，代码中还保留了导出、图表分析、状态筛选、定位等扩展能力，说明该页面已经具备进一步升级为完整“立库监控与查询中心”的基础。