本文档用于整理 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 实际入口行-层-列当前“立库详细界面”已经不是简单静态展示，而是一个具备实际业务查询能力的立库可视化页面。它已经实现了：
+同时，代码中还保留了导出、图表分析、状态筛选、定位等扩展能力，说明该页面已经具备进一步升级为完整“立库监控与查询中心”的基础。
+ + \ No newline at end of file diff --git a/docs/JY1.0-立库详细界面功能说明书.md b/docs/JY1.0-立库详细界面功能说明书.md new file mode 100644 index 00000000..59a772a2 --- /dev/null +++ b/docs/JY1.0-立库详细界面功能说明书.md @@ -0,0 +1,672 @@ +# JY1.0 立库详细界面功能说明书 + +## 1. 文档目的 + +本文档用于整理 JY1.0 项目中“立库查询/立库可视化”组件目前已经实现的界面结构、后端数据来源、交互逻辑和现有功能范围，便于后续培训、验收、维护和功能扩展。 + +本文档依据当前前端实现整理，核心代码位置如下： + +- `src/views/WarehouseManagement/WarehouseVisualization/index.vue` +- `static/config.js` + +## 2. 页面定位 + +立库详细界面当前对应的页面名称为： + +- 页面组件名：`WarehouseVisualizationSystem` +- 页面标签名：`立库可视化` +- 目录位置：`src/views/WarehouseManagement/WarehouseVisualization/index.vue` + +该页面用于展示立体仓库库位占用情况，并支持按巷道查看、按行层筛选、单击库位查看库位详情或物料明细。 + +## 3. 页面总体结构 + +**图 1：立库可视化主界面** + + + + +页面整体采用标准的 `div.app-container + el-card` 布局，主体包含以下区域： + +1. 顶部筛选与操作区 +2. 统计信息卡片区 +3. 状态图例区 +4. 立库可视化表格区 +5. 分页区 +6. 库位详情弹窗 +7. 物料信息弹窗 + +当前页面只有一个主标签页： + +- `立库可视化` + +代码中保留了图表分析相关逻辑，但当前模板中未实际启用“分析”页签。 + +## 4. 顶部筛选与操作区说明 + +**图 2：筛选区与显示模式切换示意** + + + + +顶部区域已经实现以下控件： + +### 4.1 巷道筛选 + +控件类型：`el-select` + +可选项固定为： + +- 第一巷道 +- 第二巷道 +- 第三巷道 +- 第四巷道 + +对应值为： + +- `1` +- `2` +- `3` +- `4` + +用途： + +- 用户选择巷道后，点击“搜索”，页面会调用立库接口重新获取该巷道数据。 + +### 4.2 行层筛选 + +控件类型：`el-select` + +用途： + +- 根据当前已加载的立库数据，自动生成“行-层”下拉选项。 +- 用户可筛选某一行层，只显示对应行数据。 + +特点： + +- 选项从接口返回数据动态提取。 +- 会自动去重。 +- 按数值倒序排列。 + +### 4.3 搜索按钮 + +按钮文字：`搜索` + +作用： + +- 重置当前页码为第一页。 +- 先执行前端筛选。 +- 再根据当前巷道值调用 `GetPosition` 获取最新立库数据。 + +说明： + +- 当前“搜索”动作的核心是按巷道重新取数。 +- 代码里存在 `searchKeyword` 变量，但页面上没有对应输入框，因此当前没有“按列关键字搜索”的实际入口。 + +### 4.4 重置按钮 + +按钮文字：`重置` + +作用： + +- 清空状态筛选值 +- 清空行层筛选值 +- 清空搜索关键字 +- 页码回到第一页 +- 重新执行前端筛选 + +页面提示： + +- 执行后弹出“筛选条件已重置”。 + +注意： + +- 当前重置不会主动重新按巷道取数，只是重置前端筛选状态。 + +### 4.5 刷新数据按钮 + +按钮文字：`刷新数据` + +作用： + +- 触发加载动画 +- 500ms 后重新装载当前 `defaultWarehouseData` +- 更新时间戳 +- 弹出“数据刷新成功” + +说明： + +- 刷新逻辑最终仍依赖最近一次 `GetPosition` 返回并写入的 `defaultWarehouseData`。 +- 如果前面已经切换过巷道，刷新展示的是当前缓存的该次结果。 + +### 4.6 显示模式切换开关 + +控件类型：`el-switch` + +两种模式： + +- 显示文字：`text` +- 显示图标：`icon` + +作用： + +- 控制库位单元格显示简称文字还是图标。 + +切换效果： + +- 文字模式显示：`物 / 盘 / 空 / 锁` +- 图标模式显示： + - 锁库：`el-icon-lock` + - 有物料有托盘：`el-icon-box` + - 有托盘无物料：`el-icon-tickets` + - 空库位：`el-icon-minus` + +页面提示： + +- 切换后会提示当前已切换到文字模式或图标模式。 + +## 5. 统计信息卡片区说明 + +页面中部已实现 6 个统计卡片： + +### 5.1 总库位数 + +计算方式： + +- `立库行数 * 列数` + +### 5.2 有物料有托盘 + +统计状态值为 `2` 的库位数量。 + +### 5.3 有托盘无物料 + +统计状态值为 `1` 的库位数量。 + +### 5.4 空闲库位 + +统计状态值为 `0` 的库位数量。 + +### 5.5 使用率 + +计算方式： + +- `(有物料有托盘 + 有托盘无物料) / 总库位数 * 100%` + +保留 1 位小数。 + +### 5.6 数据行数 + +显示当前 `warehouseData.length`，即当前已加载的立库行数。 + +## 6. 状态图例说明 + +页面已实现状态图例，用于帮助用户理解库位颜色含义： + +- 绿色：有物料有托盘 +- 橙色：有托盘无物料 +- 灰色：空库位 +- 蓝色边框：当前选中库位 + +另外，代码中还支持： + +- 蓝色底：锁库（状态值 `9`） + +该状态在单元格样式和状态文字中已实现，但图例区未单独展示“锁库”说明。 + +## 7. 立库可视化表格区说明 + +这是页面的核心区域。 + +### 7.1 展示形式 + +页面使用原生 `table` 绘制立库矩阵，不是 `el-table`。 + +结构包含： + +- 表头列号 +- 左侧行层标识 +- 中间库位矩阵单元格 + +### 7.2 行列组织方式 + +#### 行 + +每一行对应一个“行-层”值，例如： + +- `01-01` +- `03-12` + +页面左侧固定显示该行层编号。 + +#### 列 + +每列按照数字列号展示，从 `1` 到 `columnCount`。 + +`columnCount` 的计算规则为： + +- 读取首行对象字段 +- 排除 `行-层` +- 其余字段个数即为列数 + +### 7.3 单元格状态值 + +当前库位单元格支持以下状态： + +| 状态值 | 含义 | 前端显示简称 | 颜色 | +| --- | --- | --- | --- | +| `0` | 空库位 | 空 | 灰色 | +| `1` | 有托盘无物料 | 盘 | 橙色 | +| `2` | 有物料有托盘 | 物 | 绿色 | +| `9` | 锁库/在存取 | 锁 | 蓝色 | + +### 7.4 单元格交互效果 + +当前已实现以下交互： + +- 鼠标悬停单元格时放大 +- 鼠标悬停显示状态浮层 +- 点击后高亮选中库位 +- 点击后高亮整行对应的行层 +- 点击某列后，对应列表头也会高亮 + +### 7.5 空数据处理 + +当 `warehouseData.length === 0` 时，页面显示空白占位区域。 + +说明： + +- 代码里曾预留 `el-empty` 结构，但目前已注释，没有实际“暂无数据”文案和“加载示例数据”按钮。 + +## 8. 分页功能说明 + +页面底部已实现分页控件，条件为： + +- `totalPages > 1` 时显示 + +分页能力包括： + +- 查看总数 +- 切换每页条数 +- 上一页/下一页 +- 页码跳转 +- 直接输入页码跳转 + +每页可选条数： + +- `5` +- `8` +- `10` +- `15` + +说明： + +- 分页针对的是“行数据”，不是单元格。 +- 也就是一次显示若干个“行-层”。 + +## 9. 库位详情弹窗说明 + +**图 3：库位详情弹窗示意** + + + + +点击非物料状态库位时，会弹出“库位详情”窗口。 + +触发条件： + +- 单元格状态不等于 `2` + +### 9.1 弹窗标题 + +格式： + +- `库位详情 + 库位编号` + +例如： + +- `库位详情 03-12-01` + +### 9.2 弹窗内容 + +当前弹窗内容为库位状态说明文本，即 `selectedCellDetail.description`。 + +不同状态说明如下： + +- `0`：空闲库位，可存放物料 +- `1`：有托盘但无物料，需补充物料 +- `2`：有托盘且有物料，正常使用中 +- `9`：在存取，库位已锁 + +### 9.3 当前实现特点 + +目前该弹窗属于轻量说明弹窗，展示内容较简洁，没有进一步展示： + +- 仓库编号 +- 创建时间 +- 最近操作人 +- 任务锁定来源 + +这些字段在前端对象构造里有部分预留，但未在弹窗模板中完整展示。 + +## 10. 物料信息弹窗说明 + +**图 4：物料信息弹窗示意** + + + + +点击状态为 `2` 的库位时，会弹出“库位信息”窗口。 + +触发条件： + +- 单元格状态等于 `2` + +### 10.1 弹窗标题 + +格式： + +- `库位信息 + pno` + +即使用返回数据第一条的库位编号作为标题显示。 + +### 10.2 数据来源 + +点击单元格后会调用 `StockDetail(rowLayer, column)`，查询数据库视图： + +- `StockDetailView` + +查询方式为手写 SQL： + +- `select ... from StockDetailView where pno='xx-xx-xx'` + +### 10.3 库位编号拼接规则 + +点击单元格时，前端会把界面上的 `行-层` 和列号转换为后端查询用的 `pno`： + +1. 将列号补足 2 位 +2. 将 `行-层` 以 `-` 拆分 +3. 按 `行-列-层` 重新拼装 + +例如： + +- 页面行层：`03-01` +- 点击列：`12` +- 后端查询编码：`03-12-01` + +### 10.4 弹窗字段 + +当前弹窗表格已展示以下字段： + +- 物料编号 `mno` +- 物料名称 `mname` +- 图号 `spec` +- 型号 `thao` +- 库存数量 `qty` +- 锁定库存 `lockqty` +- 批次 `batch` + +其中数量字段已实现： + +- 保留三位小数格式化 +- 大于 0 时显示强调色 +- 在数量下方显示单位 `munit` + +### 10.5 返回数据兼容处理 + +前端对接口返回做了多种兼容判断，支持以下几类格式： + +1. `response.data` 直接就是数组 +2. `response.data.data` 是数组 +3. `response.data.rows` 是数组 +4. `response.data` 是单对象，且对象里包含 `mno` 或 `pno` + +说明： + +- 这意味着当前页面对后端返回结构的容错较强。 + +### 10.6 无数据提示 + +如果接口无返回数据，则提示： + +- `未查询到数据` + +## 11. 后端接口与数据来源说明 + +当前页面实际对接了两类立库相关数据。 + +### 11.1 立库布局/状态数据 + +请求方法： + +- `GetPosition(hang)` + +请求构造： + +- `this.CreateData('11', 'GetPositionView', param)` + +参数内容： + +- `hang`：巷道编号 +- `potvar`：空字符串 +- `tt`：固定值 `1` + +调用方式： + +- `this.ExecDatabase1(Data)` + +返回结果用途： + +- 写入 `defaultWarehouseData` +- 再触发 `refreshData()` +- 最终更新主界面矩阵 + +### 11.2 库位物料明细数据 + +请求方法： + +- `StockDetail(rowLayer, column)` + +请求方式： + +- 直接构造 SQL 查询 `StockDetailView` + +调用方式： + +- `this.ExecDatabase1(Data)` + +返回结果用途： + +- 写入 `materialInfoList` +- 打开物料信息弹窗 + +### 11.3 接口地址配置 + +立库接口使用独立配置地址： + +- `static/config.js` +- `url1 = http://192.168.1.27:10006` +- `request_config1 = url1 + '/submit/MESCommonBase.ashx'` + +说明： + +- 这表明立库数据并未走默认 MES 主接口，而是走单独的立库数据库服务入口。 + +## 12. 已实现功能清单 + +基于当前页面代码，已经实现并可确认的功能如下。 + +### 12.1 页面展示类功能 + +- 立库矩阵可视化展示 +- 行层与列号展示 +- 库位状态颜色区分 +- 文字/图标两种展示模式切换 +- 统计卡片展示 +- 状态图例展示 +- 分页展示 + +### 12.2 数据查询类功能 + +- 默认加载立库数据 +- 按巷道重新查询立库数据 +- 点击状态为 `2` 的库位查询物料明细 +- 点击非 `2` 状态库位查看库位状态说明 + +### 12.3 筛选与交互类功能 + +- 按行层筛选 +- 点击搜索按钮重新按巷道加载 +- 重置筛选条件 +- 刷新当前缓存数据 +- 鼠标悬停显示状态提示 +- 单元格选中高亮 +- 行高亮 +- 列高亮 + +### 12.4 数据展示增强功能 + +- 数量保留 3 位小数 +- 锁定库存单独显示 +- 单位显示 +- 物料列表支持多条记录显示 +- 接口返回结构兼容处理 + +## 13. 代码中存在但当前未完整启用的能力 + +以下能力在代码中已有部分实现或预留，但从当前模板和实际入口看，尚未完整开放为可见功能。 + +### 13.1 状态筛选 + +页面 `data` 中存在： + +- `statusFilter` + +筛选逻辑中也保留了状态筛选分支，但顶部没有对应状态下拉框，因此用户当前无法直接按状态筛选。 + +### 13.2 关键字搜索 + +页面 `data` 中存在： + +- `searchKeyword` + +并保留了按列搜索的逻辑入口，但模板中没有对应输入框，因此当前不构成实际功能。 + +### 13.3 图表分析功能 + +代码中已实现： + +- 状态分布饼图 +- 行列使用率图 +- ECharts 初始化与销毁 + +但模板中没有对应图表容器，也没有实际启用 `warehouse-analysis` 页签，因此当前属于预留代码。 + +### 13.4 数据导出功能 + +代码中已实现 `exportWarehouseData()`，可以把当前 `warehouseData` 导出为 JSON 文件。 + +但当前页面模板没有挂出“导出”按钮，因此用户在界面上无法直接使用。 + +### 13.5 打印报表功能 + +代码中存在 `printWarehouseReport()`，但当前只是提示“功能开发中”，没有实际打印逻辑。 + +### 13.6 物料标签打印 + +代码中存在 `printMaterialInfo()`，当前同样仅提示“功能开发中”。 + +### 13.7 焦点定位功能 + +代码中存在 `focusOnCell(rowLayer, column)`，可自动滚动到指定单元格位置。 + +但当前页面没有表格明细区或其他入口去调用它，因此属于预留能力。 + +## 14. 现有业务规则总结 + +从当前实现可归纳出以下业务规则。 + +### 14.1 单元格状态规则 + +- `2` 代表该库位已有物料，应进入物料明细查询流程 +- 非 `2` 状态不查物料，进入库位说明流程 +- `9` 表示库位正在存取或已锁定 + +### 14.2 巷道数据规则 + +- 页面默认在 `mounted` 时调用 `GetPosition(1)`，默认先加载第一巷道 +- 用户再通过顶部选择器切换其他巷道 + +### 14.3 编码转换规则 + +界面展示编码与后端查询编码不是同一个结构： + +- 界面主要使用 `行-层` +- 后端明细查询使用 `行-列-层` + +因此点击库位时必须做一次编号重组。 + +## 15. 使用流程说明 + +典型操作流程如下： + +1. 打开立库可视化页面 +2. 系统默认加载第一巷道数据 +3. 页面显示统计信息、图例和库位矩阵 +4. 用户可切换巷道并点击“搜索” +5. 用户可按“行-层”筛选关注区域 +6. 用户可切换文字/图标显示模式 +7. 鼠标悬停可查看库位状态提示 +8. 点击空库位/托盘位/锁定位，查看库位说明 +9. 点击有物料库位，查看该库位物料明细 +10. 需要恢复视图时可点击“重置”或“刷新数据” + +## 16. 当前界面优点 + +从现有实现看，该页面已经具备以下优点： + +- 视觉上能直接反映立库占用状态 +- 巷道切换清晰 +- 物料库位点击查询路径明确 +- 状态颜色和图标表达直观 +- 对后端返回结构适配较灵活 +- 前端交互响应比较轻量 + +## 17. 当前界面限制 + +从代码现状看，也存在一些限制： + +- 状态筛选未开放界面入口 +- 关键字搜索未开放界面入口 +- 导出功能未开放按钮 +- 图表分析功能未在页面中启用 +- 空数据时缺少明确提示文案 +- 锁库状态没有放入图例区 +- 库位详情弹窗信息量偏少 +- 刷新逻辑更多是前端缓存刷新，不是强制重新拉取所有条件数据 + +## 18. 维护与扩展建议 + +如果后续继续完善该页面，建议优先考虑以下方向： + +1. 增加状态筛选下拉框，补齐 `statusFilter` 实际入口 +2. 增加库位搜索输入框，支持直接定位 `行-层-列` +3. 在界面上开放“导出 JSON”按钮 +4. 补上锁库状态图例 +5. 完善空数据占位提示 +6. 把图表分析页签正式接入模板 +7. 在库位详情弹窗中增加更多业务字段 +8. 将明细查询 SQL 封装为标准后端接口名，减少前端直接拼 SQL 的耦合 + +## 19. 结论 + +当前“立库详细界面”已经不是简单静态展示，而是一个具备实际业务查询能力的立库可视化页面。它已经实现了： + +- 按巷道加载立库状态 +- 立库矩阵可视化展示 +- 库位状态识别 +- 库位详情查看 +- 库位物料明细查询 +- 筛选、分页、刷新、显示模式切换等基础交互 + +同时，代码中还保留了导出、图表分析、状态筛选、定位等扩展能力，说明该页面已经具备进一步升级为完整“立库监控与查询中心”的基础。 diff --git a/docs/JY1.0-立库详细界面功能说明书.pdf b/docs/JY1.0-立库详细界面功能说明书.pdf new file mode 100644 index 00000000..21d6a327 Binary files /dev/null and b/docs/JY1.0-立库详细界面功能说明书.pdf differ diff --git a/docs/JY1.0-采购件入库查询卡顿修改方案.md b/docs/JY1.0-采购件入库查询卡顿修改方案.md new file mode 100644 index 00000000..ab700594 --- /dev/null +++ b/docs/JY1.0-采购件入库查询卡顿修改方案.md @@ -0,0 +1,366 @@ +# JY1.0 采购件入库查询卡顿修改方案 + +## 1. 背景说明 + +仓储管理模块页面 `src/views/WarehouseManagement/PurchasePartsStorage/index.vue` 在执行查询操作时，存在页面明显卡顿、浏览器长时间无响应、严重时看起来像页面崩溃的问题。 + +本方案用于整理当前排查结论、明确问题成因，并提出分阶段修改建议。本文档只给出修改方案，不直接改动代码。 + +## 2. 问题现象 + +当前页面包含采购件入库、自制件入库、外协到货等多个页签，其中采购件入库页签在选择供应商或合同后会自动执行查询。 + +现场表现主要包括： + +- 点击查询后页面长时间卡住。 +- 表格数据返回后界面渲染明显变慢。 +- 数据量较大时浏览器出现假死或无响应。 +- 用户主观感受为“查询就崩”。 + +## 3. 涉及文件 + +- `src/views/WarehouseManagement/PurchasePartsStorage/index.vue` +- `src/main.js` +- `src/utils/request.js` + +重点排查方法： + +- `searchTable1()` +- `searchTable3()` +- `getSummaries()` +- `getSummaries1()` +- `handleSelectionChange()` +- `recalcSelection()` + +## 4. 原因分析 + +### 4.1 采购件入库查询未分页，前端一次性加载全量数据 + +在 `searchTable1()` 中，查询请求通过 `CreateData('11', ..., param)` 发送，但未传入分页参数。 + +这会带来两个问题： + +- 后端可能直接返回该供应商或合同下的全部数据。 +- 前端需要一次性渲染整张大表，数据量较大时会明显拖慢页面。 + +相比之下，自制件入库的 `searchTable3()` 已传入 `pageSize1` 和 `pageCurrent1`，说明当前页面内部本身就存在两种不同的数据加载策略，采购件入库部分的实现明显更重。 + +### 4.2 查询完成后自动逐行全选，进一步放大渲染压力 + +在 `searchTable1()` 中，查询成功后会遍历 `tableData1`，并对满足条件的行逐个执行： + +- `this.$refs.table.toggleRowSelection(row, true)` + +虽然代码里使用了 `_suppressSelectionChange` 来避免自定义选中计算被重复触发，但 Element UI 表格内部仍需要为每一行更新选中状态、复选框状态和相关渲染结果。 + +当查询结果很多时，这段“逐行自动勾选”的逻辑会成为非常重的同步操作，容易造成主线程阻塞。 + +### 4.3 表格每行挂载多个重量级组件，导致大表渲染成本过高 + +采购件入库与自制件入库表格中，每行都包含较多交互组件，例如： + +- `el-select` +- `el-input-number` +- 选择列 +- 按钮列 + +其中 `el-input-number` 和 `el-select` 在大数据表格中本身就属于渲染和响应式开销较高的组件。若查询结果达到数百行甚至更多，组件实例数、watcher 数量、DOM 节点数量都会迅速增大。 + +### 4.4 表格启用汇总行，汇总函数会对数据做多轮遍历 + +页面使用了： + +- `show-summary` +- `summary-method` + +而 `getSummaries()`、`getSummaries1()` 中对多个列执行了多次 `map + reduce` 计算。 + +这意味着： + +- 查询后首次渲染要做汇总计算。 +- 表格数据变化、选中变化、输入变化后，汇总有机会被再次触发。 +- 当数据量大时，汇总计算会持续放大卡顿感。 + +### 4.5 查询动作与下拉联动查询存在叠加请求 + +例如自制件入库页签中，订单切换时会同时触发： + +- `searchTable3()` +- `getnumberSelection()` + +这类逻辑虽然不是采购件入库“卡死”的唯一主因，但会增加同一时间段内的请求数和页面状态更新次数，让用户更容易感知到页面迟滞。 + +### 4.6 当前超时配置较大，不容易快速暴露性能问题 + +`src/utils/request.js` 中 Axios `timeout` 设置为 `1500000`。 + +这会导致： + +- 如果接口慢，页面会长时间停留在等待状态。 +- 如果前端渲染本身很重，用户更容易把“卡顿”感知为“页面崩溃”。 + +这不是根因，但会放大问题表现。 + +## 5. 结论判断 + +综合代码结构，当前“查询就卡页面崩溃”的高概率原因不是单一点故障，而是以下因素叠加： + +1. 采购件入库查询无分页。 +2. 查询完成后自动逐行勾选可入库数据。 +3. 大表格中每行挂载多个重量级输入组件。 +4. 汇总行对全量数据重复做统计计算。 + +其中，优先级最高、最值得首先处理的是前两项。 + +## 6. 修改目标 + +本次优化建议以“先止血，再优化体验”为原则，目标如下： + +- 将查询后的页面卡顿控制在可接受范围内。 +- 避免浏览器因大数据量渲染出现假死。 +- 保持现有业务流程基本不变。 +- 尽量复用项目现有分页、查询、表格处理模式。 +- 将改动范围控制在 `PurchasePartsStorage` 页面内部，避免影响其他模块。 + +## 7. 修改方案 + +### 7.1 方案一：为采购件入库查询增加分页 + +这是首要方案。 + +#### 修改思路 + +- 为采购件入库表格引入与自制件入库一致的分页机制。 +- 在 `searchTable1()` 中调用 `CreateData()` 时补充分页参数。 +- 页面新增采购件入库对应的分页组件与分页状态。 +- 后端查询过程若已支持分页，则直接接入。 +- 后端若尚未支持分页，需要同步补充分页查询能力。 + +#### 预期收益 + +- 避免一次性返回几百或几千条数据。 +- 大幅降低首屏渲染压力。 +- 为后续汇总优化、选择优化提供基础。 + +#### 风险点 + +- 需要确认后端 `仓储管理_采购入库合同明细_查询` 是否支持分页返回 `rows/total`。 +- 如果当前接口只返回普通数组，前后端都需要调整返回结构。 + +### 7.2 方案二：取消查询后自动全选所有可入库行 + +这是与分页并列的高优先级方案。 + +#### 修改思路 + +- 查询完成后不再自动执行 `toggleRowSelection` 遍历全表。 +- 保留手工勾选模式，由用户自主选择入库数据。 +- 如业务上确实需要批量选择，可增加单独按钮，例如“勾选当前页可入库项”。 +- 如仍需保留自动选择能力，建议限制为只处理当前页数据，而不是全量结果。 + +#### 预期收益 + +- 避免一次查询后产生大量同步 UI 更新。 +- 显著降低 Element 表格内部状态维护成本。 +- 使查询动作本身更纯粹，减少联动副作用。 + +#### 风险点 + +- 用户操作习惯会发生轻微变化。 +- 若一线人员依赖默认全选，需要补充一个显式批量勾选按钮作为替代。 + +### 7.3 方案三：降低表格每行组件数量 + +这是第二阶段优化方案。 + +#### 修改思路 + +- 默认以文本方式展示数值和货位。 +- 仅在用户点击某行或某单元格后切换为可编辑组件。 +- 或将数量、货位编辑能力迁移到弹窗/侧边表单中进行。 + +#### 可选实现方式 + +- 方式 A：保留表格编辑，但只对当前编辑行渲染 `el-input-number` 和 `el-select`。 +- 方式 B：表格只展示，编辑统一在“设置货位/修改本次到货数”弹窗内完成。 + +#### 预期收益 + +- 大幅减少页面初次渲染和更新渲染的组件实例数。 +- 降低响应式系统负担。 + +#### 风险点 + +- 交互形式改变较大，需业务确认。 +- 改动量大于分页和取消自动全选。 + +### 7.4 方案四：优化汇总逻辑 + +这是辅助优化方案。 + +#### 修改思路 + +- 汇总只统计当前页数据，不统计全量数据。 +- 或在查询成功后一次性计算并缓存汇总结果，避免在渲染阶段多次 `map + reduce`。 +- 对不必要展示汇总的列取消统计。 + +#### 预期收益 + +- 降低表格重渲染时的计算开销。 +- 对大页数据场景效果明显。 + +#### 风险点 + +- 需确认业务是否要求“全量合计”还是“当前页合计”。 + +### 7.5 方案五：收敛筛选联动查询，减少重复请求 + +这是体验优化方案。 + +#### 修改思路 + +- 将“切换筛选项即自动查询”改为“选择条件后点击查询按钮再执行”。 +- 对必须联动的下拉，仅查询下一级选项，不立即刷新大表。 +- 对输入型查询条件增加节流或按回车触发。 + +#### 预期收益 + +- 避免用户频繁切换条件时重复打接口和重复渲染。 +- 页面行为更可控。 + +#### 风险点 + +- 与当前“选择即查”的使用习惯不完全一致。 + +## 8. 推荐实施顺序 + +建议按以下顺序推进： + +### 第一阶段：快速止血 + +目标是在不大改页面交互的前提下，尽快解决“查询卡死”。 + +建议执行： + +1. 采购件入库增加分页。 +2. 取消查询后自动全选。 +3. 采购件入库增加显式“勾选当前页可入库项”按钮，作为自动全选替代。 + +### 第二阶段：性能优化 + +目标是继续提升大数据场景下的流畅度。 + +建议执行： + +1. 优化汇总函数。 +2. 减少表格内 `el-input-number`、`el-select` 的常驻渲染数量。 +3. 调整筛选联动逻辑，减少重复请求。 + +### 第三阶段：体验收敛 + +目标是统一仓储大表页面的实现模式。 + +建议执行： + +1. 对采购件入库、自制件入库、外协到货的查询行为做统一规范。 +2. 明确哪些页签必须分页、哪些页签允许全量查。 +3. 统一表格汇总、批量勾选、行编辑的实现方式。 + +## 9. 建议的具体改动点 + +以下为建议修改点，不代表本次已经改动： + +### 9.1 页面状态 + +在 `PurchasePartsStorage/index.vue` 中补充采购件入库分页状态，例如： + +- `pageCurrentRK` +- `pageSizeRK` +- `totalRK` + +或直接复用现有命名体系，保持与页面其他分区一致。 + +### 9.2 查询方法 + +重点调整： + +- `searchTable1()` + +建议： + +- 查询请求增加分页参数。 +- 查询结果改为接收分页结构。 +- 删除查询成功后的逐行 `toggleRowSelection` 自动勾选逻辑。 + +### 9.3 表格区域 + +采购件入库表格下方增加分页组件，行为对齐自制件入库分页实现。 + +### 9.4 批量选择逻辑 + +新增显式按钮： + +- “勾选当前页可入库” +- “取消当前页勾选” + +这样既能保留批量能力，也能避免查询完成后立即执行重计算。 + +### 9.5 汇总逻辑 + +重构： + +- `getSummaries()` +- `getSummaries1()` + +建议尽量减少重复遍历次数，并明确统计口径为“当前页合计”。 + +## 10. 验证方案 + +修改完成后建议按以下方式验证： + +### 10.1 功能验证 + +- 选择供应商后能正常查询采购件入库数据。 +- 切换合同后能正常刷新结果。 +- 分页切换后数据正确。 +- 手工勾选、批量勾选后入库功能正常。 +- 货位选择、数量输入、打印功能不受影响。 + +### 10.2 性能验证 + +- 查询 50 条、100 条、300 条时页面响应是否明显改善。 +- 查询后页面是否仍出现长时间卡死。 +- 批量勾选当前页时是否可接受。 +- 输入数量、选择货位时是否仍然卡顿。 + +### 10.3 回归验证 + +- 自制件入库页签行为不受影响。 +- 外协到货页签行为不受影响。 +- 入库单弹窗显示和合并逻辑不受影响。 + +## 11. 风险与注意事项 + +- 若后端接口当前不支持分页，本次优化需要前后端联动处理。 +- 若业务习惯依赖“查询即默认勾选全部可入库项”，需要提前通知用户交互变更。 +- 若汇总口径从全量改为当前页，需业务确认是否接受。 +- 若后续计划继续扩展该页面，建议优先统一仓储大表的分页和编辑规范，避免重复出现同类问题。 + +## 12. 最终建议 + +推荐采用“先小改止血，再做结构优化”的策略： + +1. 先做采购件入库分页。 +2. 同时取消查询后的自动逐行全选。 +3. 再根据现场体验决定是否继续推进表格轻量化和汇总优化。 + +若只能先做一项，优先级最高的是： + +- `searchTable1()` 增加分页能力。 + +若可以同时做两项，最佳组合是： + +- 采购件入库分页。 +- 取消查询后自动勾选。 + +这两项组合最有希望直接解决当前“查询就卡页面崩溃”的核心问题。 diff --git a/docs/assets/warehouse-visualization/detail.png b/docs/assets/warehouse-visualization/detail.png new file mode 100644 index 00000000..0bcac75c Binary files /dev/null and b/docs/assets/warehouse-visualization/detail.png differ diff --git a/docs/assets/warehouse-visualization/filter.png b/docs/assets/warehouse-visualization/filter.png new file mode 100644 index 00000000..6be914fe Binary files /dev/null and b/docs/assets/warehouse-visualization/filter.png differ diff --git a/docs/assets/warehouse-visualization/main.png b/docs/assets/warehouse-visualization/main.png new file mode 100644 index 00000000..f8edb478 Binary files /dev/null and b/docs/assets/warehouse-visualization/main.png differ diff --git a/docs/assets/warehouse-visualization/material.png b/docs/assets/warehouse-visualization/material.png new file mode 100644 index 00000000..b84a422a Binary files /dev/null and b/docs/assets/warehouse-visualization/material.png differ diff --git a/docs/preview-server.js b/docs/preview-server.js new file mode 100644 index 00000000..5016065e --- /dev/null +++ b/docs/preview-server.js @@ -0,0 +1,22 @@ +const http = require('http'); +const fs = require('fs'); +const path = require('path'); +const root = __dirname; +const types = { '.html': 'text/html; charset=utf-8', '.png': 'image/png', '.css': 'text/css; charset=utf-8', '.js': 'text/javascript; charset=utf-8', '.md': 'text/plain; charset=utf-8' }; +const server = http.createServer((req, res) => { + try { + const url = new URL(req.url, 'http://127.0.0.1:18765'); + const rel = decodeURIComponent(url.pathname).replace(/^\/+/, ''); + const filePath = path.resolve(root, rel); + if (!filePath.startsWith(path.resolve(root))) { + res.writeHead(403); res.end('Forbidden'); return; + } + fs.readFile(filePath, (err, data) => { + if (err) { res.writeHead(404); res.end('Not found: ' + filePath); return; } + res.writeHead(200, { 'Content-Type': types[path.extname(filePath).toLowerCase()] || 'application/octet-stream' }); + res.end(data); + }); + } catch (e) { res.writeHead(500); res.end(String(e)); } +}); +server.listen(18765, '127.0.0.1', () => console.log('preview server on 18765')); +setInterval(() => {}, 1000); diff --git a/docs/warehouse-visualization-preview.html b/docs/warehouse-visualization-preview.html new file mode 100644 index 00000000..6ce5ee6e --- /dev/null +++ b/docs/warehouse-visualization-preview.html @@ -0,0 +1,482 @@ + + + + + +| 行-层 |
|---|
| 物料编号 | +物料名称 | +图号 | +型号 | +库存数量 | +锁定库存 | +批次 | +
|---|---|---|---|---|---|---|
| 02.009.001.0012 | +直线导轨组件 | +LRS3056-0312-01 | +HGW25CA | +14.000 台 |
+ 2.000 台 |
+ BATCH031201 | +
| 02.009.001.0013 | +滑块组件 | +LRS3056-0312-02 | +HGW25CC | +6.000 台 |
+ 0.000 台 |
+ BATCH031202 | +
$1')
+ .replace(/\*\*([^*]+)\*\*/g, '$1')
+}
+
+function renderTable(lines) {
+ const rows = lines
+ .filter(line => line.trim())
+ .map(line => line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map(cell => inlineFormat(cell.trim())))
+
+ if (rows.length < 2) return ''
+
+ const head = rows[0]
+ const body = rows.slice(2)
+ return [
+ '| ' + cell + ' | ').join('') + '
|---|
| ' + cell + ' | ').join('') + '
' + inlineFormat(paragraph.join(' ')) + '
') + paragraph = [] + } + } + + function flushList() { + if (list.length) { + html.push('' + escapeHtml(code.join('\n')) + '| 状态 | +
+ |
+ 订单号 | +{{ detailRow.订单编号 }} | +
| 物料编码 | +{{ detailRow.物料编码 }} | +物料名称 | +{{ detailRow.物料名称 }} | +
| 图号或型号 | +{{ detailRow.图号或型号 }} | +||
| 采购数 | +{{ detailRow.数量 }} | +已入库数量 | +{{ detailRow.已到货数量 }} | +
| 采购合同 | +{{ detailRow.采购合同编号 }} | +||