更新装配、销售、精工车间、技术中心、仓储多个模块，整理文档和SQL脚本
This commit is contained in:
Developer
291
docs/立库/JY1.0-立库详细界面功能说明书.html
Normal file
291
docs/立库/JY1.0-立库详细界面功能说明书.html
Normal file
@@ -0,0 +1,291 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>JY1.0 立库详细界面功能说明书</title>
|
||||
<style>
|
||||
@page { size: A4; margin: 16mm 13mm 15mm; }
|
||||
body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color:#222; line-height:1.62; font-size:13.5px; }
|
||||
h1,h2,h3,h4 { color:#111; margin: 1.1em 0 0.5em; page-break-after: avoid; }
|
||||
h1 { font-size: 25px; border-bottom: 2px solid #2f6fed; padding-bottom: 10px; }
|
||||
h2 { font-size: 19px; border-left: 4px solid #2f6fed; padding-left: 10px; }
|
||||
h3 { font-size: 16px; }
|
||||
p { margin: 0.35em 0 0.75em; }
|
||||
ul,ol { margin: 0.35em 0 0.75em 1.4em; }
|
||||
li { margin: 0.18em 0; }
|
||||
code { background:#f5f7fa; padding:2px 6px; border-radius:4px; font-family: Consolas, monospace; font-size: 12px; }
|
||||
table { width:100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 13px; }
|
||||
th,td { border:1px solid #dcdfe6; padding:8px 10px; vertical-align: top; }
|
||||
th { background:#f5f7fa; }
|
||||
tr:nth-child(even) td { background:#fafafa; }
|
||||
figure { margin: 10px 0 18px; page-break-inside: avoid; }
|
||||
img { display:block; width:100%; max-width:100%; border:1px solid #dcdfe6; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
|
||||
strong { color:#111; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>JY1.0 立库详细界面功能说明书</h1>
|
||||
<h2>1. 文档目的</h2>
|
||||
<p>本文档用于整理 JY1.0 项目中“立库查询/立库可视化”组件目前已经实现的界面结构、后端数据来源、交互逻辑和现有功能范围，便于后续培训、验收、维护和功能扩展。</p>
|
||||
<p>本文档依据当前前端实现整理，核心代码位置如下：</p>
|
||||
<ul><li><code>src/views/WarehouseManagement/WarehouseVisualization/index.vue</code></li><li><code>static/config.js</code></li></ul>
|
||||
<h2>2. 页面定位</h2>
|
||||
<p>立库详细界面当前对应的页面名称为：</p>
|
||||
<ul><li>页面组件名：<code>WarehouseVisualizationSystem</code></li><li>页面标签名：<code>立库可视化</code></li><li>目录位置：<code>src/views/WarehouseManagement/WarehouseVisualization/index.vue</code></li></ul>
|
||||
<p>该页面用于展示立体仓库库位占用情况，并支持按巷道查看、按行层筛选、单击库位查看库位详情或物料明细。</p>
|
||||
<h2>3. 页面总体结构</h2>
|
||||
<p><strong>图 1：立库可视化主界面</strong></p>
|
||||
<figure><img src="assets/warehouse-visualization/main.png" alt="立库可视化主界面" /></figure>
|
||||
<p>页面整体采用标准的 <code>div.app-container + el-card</code> 布局，主体包含以下区域：</p>
|
||||
<ol><li>顶部筛选与操作区</li><li>统计信息卡片区</li><li>状态图例区</li><li>立库可视化表格区</li><li>分页区</li><li>库位详情弹窗</li><li>物料信息弹窗</li></ol>
|
||||
<p>当前页面只有一个主标签页：</p>
|
||||
<ul><li><code>立库可视化</code></li></ul>
|
||||
<p>代码中保留了图表分析相关逻辑，但当前模板中未实际启用“分析”页签。</p>
|
||||
<h2>4. 顶部筛选与操作区说明</h2>
|
||||
<p><strong>图 2：筛选区与显示模式切换示意</strong></p>
|
||||
<figure><img src="assets/warehouse-visualization/filter.png" alt="筛选区与显示模式切换" /></figure>
|
||||
<p>顶部区域已经实现以下控件：</p>
|
||||
<h3>4.1 巷道筛选</h3>
|
||||
<p>控件类型：<code>el-select</code></p>
|
||||
<p>可选项固定为：</p>
|
||||
<ul><li>第一巷道</li><li>第二巷道</li><li>第三巷道</li><li>第四巷道</li></ul>
|
||||
<p>对应值为：</p>
|
||||
<ul><li><code>1</code></li><li><code>2</code></li><li><code>3</code></li><li><code>4</code></li></ul>
|
||||
<p>用途：</p>
|
||||
<ul><li>用户选择巷道后，点击“搜索”，页面会调用立库接口重新获取该巷道数据。</li></ul>
|
||||
<h3>4.2 行层筛选</h3>
|
||||
<p>控件类型：<code>el-select</code></p>
|
||||
<p>用途：</p>
|
||||
<ul><li>根据当前已加载的立库数据，自动生成“行-层”下拉选项。</li><li>用户可筛选某一行层，只显示对应行数据。</li></ul>
|
||||
<p>特点：</p>
|
||||
<ul><li>选项从接口返回数据动态提取。</li><li>会自动去重。</li><li>按数值倒序排列。</li></ul>
|
||||
<h3>4.3 搜索按钮</h3>
|
||||
<p>按钮文字：<code>搜索</code></p>
|
||||
<p>作用：</p>
|
||||
<ul><li>重置当前页码为第一页。</li><li>先执行前端筛选。</li><li>再根据当前巷道值调用 <code>GetPosition</code> 获取最新立库数据。</li></ul>
|
||||
<p>说明：</p>
|
||||
<ul><li>当前“搜索”动作的核心是按巷道重新取数。</li><li>代码里存在 <code>searchKeyword</code> 变量，但页面上没有对应输入框，因此当前没有“按列关键字搜索”的实际入口。</li></ul>
|
||||
<h3>4.4 重置按钮</h3>
|
||||
<p>按钮文字：<code>重置</code></p>
|
||||
<p>作用：</p>
|
||||
<ul><li>清空状态筛选值</li><li>清空行层筛选值</li><li>清空搜索关键字</li><li>页码回到第一页</li><li>重新执行前端筛选</li></ul>
|
||||
<p>页面提示：</p>
|
||||
<ul><li>执行后弹出“筛选条件已重置”。</li></ul>
|
||||
<p>注意：</p>
|
||||
<ul><li>当前重置不会主动重新按巷道取数，只是重置前端筛选状态。</li></ul>
|
||||
<h3>4.5 刷新数据按钮</h3>
|
||||
<p>按钮文字：<code>刷新数据</code></p>
|
||||
<p>作用：</p>
|
||||
<ul><li>触发加载动画</li><li>500ms 后重新装载当前 <code>defaultWarehouseData</code></li><li>更新时间戳</li><li>弹出“数据刷新成功”</li></ul>
|
||||
<p>说明：</p>
|
||||
<ul><li>刷新逻辑最终仍依赖最近一次 <code>GetPosition</code> 返回并写入的 <code>defaultWarehouseData</code>。</li><li>如果前面已经切换过巷道，刷新展示的是当前缓存的该次结果。</li></ul>
|
||||
<h3>4.6 显示模式切换开关</h3>
|
||||
<p>控件类型：<code>el-switch</code></p>
|
||||
<p>两种模式：</p>
|
||||
<ul><li>显示文字：<code>text</code></li><li>显示图标：<code>icon</code></li></ul>
|
||||
<p>作用：</p>
|
||||
<ul><li>控制库位单元格显示简称文字还是图标。</li></ul>
|
||||
<p>切换效果：</p>
|
||||
<ul><li>文字模式显示：<code>物 / 盘 / 空 / 锁</code></li><li>图标模式显示：</li></ul>
|
||||
<p>- 锁库：<code>el-icon-lock</code> - 有物料有托盘：<code>el-icon-box</code> - 有托盘无物料：<code>el-icon-tickets</code> - 空库位：<code>el-icon-minus</code></p>
|
||||
<p>页面提示：</p>
|
||||
<ul><li>切换后会提示当前已切换到文字模式或图标模式。</li></ul>
|
||||
<h2>5. 统计信息卡片区说明</h2>
|
||||
<p>页面中部已实现 6 个统计卡片：</p>
|
||||
<h3>5.1 总库位数</h3>
|
||||
<p>计算方式：</p>
|
||||
<ul><li><code>立库行数 * 列数</code></li></ul>
|
||||
<h3>5.2 有物料有托盘</h3>
|
||||
<p>统计状态值为 <code>2</code> 的库位数量。</p>
|
||||
<h3>5.3 有托盘无物料</h3>
|
||||
<p>统计状态值为 <code>1</code> 的库位数量。</p>
|
||||
<h3>5.4 空闲库位</h3>
|
||||
<p>统计状态值为 <code>0</code> 的库位数量。</p>
|
||||
<h3>5.5 使用率</h3>
|
||||
<p>计算方式：</p>
|
||||
<ul><li><code>(有物料有托盘 + 有托盘无物料) / 总库位数 * 100%</code></li></ul>
|
||||
<p>保留 1 位小数。</p>
|
||||
<h3>5.6 数据行数</h3>
|
||||
<p>显示当前 <code>warehouseData.length</code>，即当前已加载的立库行数。</p>
|
||||
<h2>6. 状态图例说明</h2>
|
||||
<p>页面已实现状态图例，用于帮助用户理解库位颜色含义：</p>
|
||||
<ul><li>绿色：有物料有托盘</li><li>橙色：有托盘无物料</li><li>灰色：空库位</li><li>蓝色边框：当前选中库位</li></ul>
|
||||
<p>另外，代码中还支持：</p>
|
||||
<ul><li>蓝色底：锁库（状态值 <code>9</code>）</li></ul>
|
||||
<p>该状态在单元格样式和状态文字中已实现，但图例区未单独展示“锁库”说明。</p>
|
||||
<h2>7. 立库可视化表格区说明</h2>
|
||||
<p>这是页面的核心区域。</p>
|
||||
<h3>7.1 展示形式</h3>
|
||||
<p>页面使用原生 <code>table</code> 绘制立库矩阵，不是 <code>el-table</code>。</p>
|
||||
<p>结构包含：</p>
|
||||
<ul><li>表头列号</li><li>左侧行层标识</li><li>中间库位矩阵单元格</li></ul>
|
||||
<h3>7.2 行列组织方式</h3>
|
||||
<h4>行</h4>
|
||||
<p>每一行对应一个“行-层”值，例如：</p>
|
||||
<ul><li><code>01-01</code></li><li><code>03-12</code></li></ul>
|
||||
<p>页面左侧固定显示该行层编号。</p>
|
||||
<h4>列</h4>
|
||||
<p>每列按照数字列号展示，从 <code>1</code> 到 <code>columnCount</code>。</p>
|
||||
<p><code>columnCount</code> 的计算规则为：</p>
|
||||
<ul><li>读取首行对象字段</li><li>排除 <code>行-层</code></li><li>其余字段个数即为列数</li></ul>
|
||||
<h3>7.3 单元格状态值</h3>
|
||||
<p>当前库位单元格支持以下状态：</p>
|
||||
<table><thead><tr><th>状态值</th><th>含义</th><th>前端显示简称</th><th>颜色</th></tr></thead><tbody><tr><td><code>0</code></td><td>空库位</td><td>空</td><td>灰色</td></tr><tr><td><code>1</code></td><td>有托盘无物料</td><td>盘</td><td>橙色</td></tr><tr><td><code>2</code></td><td>有物料有托盘</td><td>物</td><td>绿色</td></tr><tr><td><code>9</code></td><td>锁库/在存取</td><td>锁</td><td>蓝色</td></tr></tbody></table>
|
||||
<h3>7.4 单元格交互效果</h3>
|
||||
<p>当前已实现以下交互：</p>
|
||||
<ul><li>鼠标悬停单元格时放大</li><li>鼠标悬停显示状态浮层</li><li>点击后高亮选中库位</li><li>点击后高亮整行对应的行层</li><li>点击某列后，对应列表头也会高亮</li></ul>
|
||||
<h3>7.5 空数据处理</h3>
|
||||
<p>当 <code>warehouseData.length === 0</code> 时，页面显示空白占位区域。</p>
|
||||
<p>说明：</p>
|
||||
<ul><li>代码里曾预留 <code>el-empty</code> 结构，但目前已注释，没有实际“暂无数据”文案和“加载示例数据”按钮。</li></ul>
|
||||
<h2>8. 分页功能说明</h2>
|
||||
<p>页面底部已实现分页控件，条件为：</p>
|
||||
<ul><li><code>totalPages > 1</code> 时显示</li></ul>
|
||||
<p>分页能力包括：</p>
|
||||
<ul><li>查看总数</li><li>切换每页条数</li><li>上一页/下一页</li><li>页码跳转</li><li>直接输入页码跳转</li></ul>
|
||||
<p>每页可选条数：</p>
|
||||
<ul><li><code>5</code></li><li><code>8</code></li><li><code>10</code></li><li><code>15</code></li></ul>
|
||||
<p>说明：</p>
|
||||
<ul><li>分页针对的是“行数据”，不是单元格。</li><li>也就是一次显示若干个“行-层”。</li></ul>
|
||||
<h2>9. 库位详情弹窗说明</h2>
|
||||
<p><strong>图 3：库位详情弹窗示意</strong></p>
|
||||
<figure><img src="assets/warehouse-visualization/detail.png" alt="库位详情弹窗" /></figure>
|
||||
<p>点击非物料状态库位时，会弹出“库位详情”窗口。</p>
|
||||
<p>触发条件：</p>
|
||||
<ul><li>单元格状态不等于 <code>2</code></li></ul>
|
||||
<h3>9.1 弹窗标题</h3>
|
||||
<p>格式：</p>
|
||||
<ul><li><code>库位详情 + 库位编号</code></li></ul>
|
||||
<p>例如：</p>
|
||||
<ul><li><code>库位详情 03-12-01</code></li></ul>
|
||||
<h3>9.2 弹窗内容</h3>
|
||||
<p>当前弹窗内容为库位状态说明文本，即 <code>selectedCellDetail.description</code>。</p>
|
||||
<p>不同状态说明如下：</p>
|
||||
<ul><li><code>0</code>：空闲库位，可存放物料</li><li><code>1</code>：有托盘但无物料，需补充物料</li><li><code>2</code>：有托盘且有物料，正常使用中</li><li><code>9</code>：在存取，库位已锁</li></ul>
|
||||
<h3>9.3 当前实现特点</h3>
|
||||
<p>目前该弹窗属于轻量说明弹窗，展示内容较简洁，没有进一步展示：</p>
|
||||
<ul><li>仓库编号</li><li>创建时间</li><li>最近操作人</li><li>任务锁定来源</li></ul>
|
||||
<p>这些字段在前端对象构造里有部分预留，但未在弹窗模板中完整展示。</p>
|
||||
<h2>10. 物料信息弹窗说明</h2>
|
||||
<p><strong>图 4：物料信息弹窗示意</strong></p>
|
||||
<figure><img src="assets/warehouse-visualization/material.png" alt="物料信息弹窗" /></figure>
|
||||
<p>点击状态为 <code>2</code> 的库位时，会弹出“库位信息”窗口。</p>
|
||||
<p>触发条件：</p>
|
||||
<ul><li>单元格状态等于 <code>2</code></li></ul>
|
||||
<h3>10.1 弹窗标题</h3>
|
||||
<p>格式：</p>
|
||||
<ul><li><code>库位信息 + pno</code></li></ul>
|
||||
<p>即使用返回数据第一条的库位编号作为标题显示。</p>
|
||||
<h3>10.2 数据来源</h3>
|
||||
<p>点击单元格后会调用 <code>StockDetail(rowLayer, column)</code>，查询数据库视图：</p>
|
||||
<ul><li><code>StockDetailView</code></li></ul>
|
||||
<p>查询方式为手写 SQL：</p>
|
||||
<ul><li><code>select ... from StockDetailView where pno='xx-xx-xx'</code></li></ul>
|
||||
<h3>10.3 库位编号拼接规则</h3>
|
||||
<p>点击单元格时，前端会把界面上的 <code>行-层</code> 和列号转换为后端查询用的 <code>pno</code>：</p>
|
||||
<ol><li>将列号补足 2 位</li><li>将 <code>行-层</code> 以 <code>-</code> 拆分</li><li>按 <code>行-列-层</code> 重新拼装</li></ol>
|
||||
<p>例如：</p>
|
||||
<ul><li>页面行层：<code>03-01</code></li><li>点击列：<code>12</code></li><li>后端查询编码：<code>03-12-01</code></li></ul>
|
||||
<h3>10.4 弹窗字段</h3>
|
||||
<p>当前弹窗表格已展示以下字段：</p>
|
||||
<ul><li>物料编号 <code>mno</code></li><li>物料名称 <code>mname</code></li><li>图号 <code>spec</code></li><li>型号 <code>thao</code></li><li>库存数量 <code>qty</code></li><li>锁定库存 <code>lockqty</code></li><li>批次 <code>batch</code></li></ul>
|
||||
<p>其中数量字段已实现：</p>
|
||||
<ul><li>保留三位小数格式化</li><li>大于 0 时显示强调色</li><li>在数量下方显示单位 <code>munit</code></li></ul>
|
||||
<h3>10.5 返回数据兼容处理</h3>
|
||||
<p>前端对接口返回做了多种兼容判断，支持以下几类格式：</p>
|
||||
<ol><li><code>response.data</code> 直接就是数组</li><li><code>response.data.data</code> 是数组</li><li><code>response.data.rows</code> 是数组</li><li><code>response.data</code> 是单对象，且对象里包含 <code>mno</code> 或 <code>pno</code></li></ol>
|
||||
<p>说明：</p>
|
||||
<ul><li>这意味着当前页面对后端返回结构的容错较强。</li></ul>
|
||||
<h3>10.6 无数据提示</h3>
|
||||
<p>如果接口无返回数据，则提示：</p>
|
||||
<ul><li><code>未查询到数据</code></li></ul>
|
||||
<h2>11. 后端接口与数据来源说明</h2>
|
||||
<p>当前页面实际对接了两类立库相关数据。</p>
|
||||
<h3>11.1 立库布局/状态数据</h3>
|
||||
<p>请求方法：</p>
|
||||
<ul><li><code>GetPosition(hang)</code></li></ul>
|
||||
<p>请求构造：</p>
|
||||
<ul><li><code>this.CreateData('11', 'GetPositionView', param)</code></li></ul>
|
||||
<p>参数内容：</p>
|
||||
<ul><li><code>hang</code>：巷道编号</li><li><code>potvar</code>：空字符串</li><li><code>tt</code>：固定值 <code>1</code></li></ul>
|
||||
<p>调用方式：</p>
|
||||
<ul><li><code>this.ExecDatabase1(Data)</code></li></ul>
|
||||
<p>返回结果用途：</p>
|
||||
<ul><li>写入 <code>defaultWarehouseData</code></li><li>再触发 <code>refreshData()</code></li><li>最终更新主界面矩阵</li></ul>
|
||||
<h3>11.2 库位物料明细数据</h3>
|
||||
<p>请求方法：</p>
|
||||
<ul><li><code>StockDetail(rowLayer, column)</code></li></ul>
|
||||
<p>请求方式：</p>
|
||||
<ul><li>直接构造 SQL 查询 <code>StockDetailView</code></li></ul>
|
||||
<p>调用方式：</p>
|
||||
<ul><li><code>this.ExecDatabase1(Data)</code></li></ul>
|
||||
<p>返回结果用途：</p>
|
||||
<ul><li>写入 <code>materialInfoList</code></li><li>打开物料信息弹窗</li></ul>
|
||||
<h3>11.3 接口地址配置</h3>
|
||||
<p>立库接口使用独立配置地址：</p>
|
||||
<ul><li><code>static/config.js</code></li><li><code>url1 = http://192.168.1.27:10006</code></li><li><code>request_config1 = url1 + '/submit/MESCommonBase.ashx'</code></li></ul>
|
||||
<p>说明：</p>
|
||||
<ul><li>这表明立库数据并未走默认 MES 主接口，而是走单独的立库数据库服务入口。</li></ul>
|
||||
<h2>12. 已实现功能清单</h2>
|
||||
<p>基于当前页面代码，已经实现并可确认的功能如下。</p>
|
||||
<h3>12.1 页面展示类功能</h3>
|
||||
<ul><li>立库矩阵可视化展示</li><li>行层与列号展示</li><li>库位状态颜色区分</li><li>文字/图标两种展示模式切换</li><li>统计卡片展示</li><li>状态图例展示</li><li>分页展示</li></ul>
|
||||
<h3>12.2 数据查询类功能</h3>
|
||||
<ul><li>默认加载立库数据</li><li>按巷道重新查询立库数据</li><li>点击状态为 <code>2</code> 的库位查询物料明细</li><li>点击非 <code>2</code> 状态库位查看库位状态说明</li></ul>
|
||||
<h3>12.3 筛选与交互类功能</h3>
|
||||
<ul><li>按行层筛选</li><li>点击搜索按钮重新按巷道加载</li><li>重置筛选条件</li><li>刷新当前缓存数据</li><li>鼠标悬停显示状态提示</li><li>单元格选中高亮</li><li>行高亮</li><li>列高亮</li></ul>
|
||||
<h3>12.4 数据展示增强功能</h3>
|
||||
<ul><li>数量保留 3 位小数</li><li>锁定库存单独显示</li><li>单位显示</li><li>物料列表支持多条记录显示</li><li>接口返回结构兼容处理</li></ul>
|
||||
<h2>13. 代码中存在但当前未完整启用的能力</h2>
|
||||
<p>以下能力在代码中已有部分实现或预留，但从当前模板和实际入口看，尚未完整开放为可见功能。</p>
|
||||
<h3>13.1 状态筛选</h3>
|
||||
<p>页面 <code>data</code> 中存在：</p>
|
||||
<ul><li><code>statusFilter</code></li></ul>
|
||||
<p>筛选逻辑中也保留了状态筛选分支，但顶部没有对应状态下拉框，因此用户当前无法直接按状态筛选。</p>
|
||||
<h3>13.2 关键字搜索</h3>
|
||||
<p>页面 <code>data</code> 中存在：</p>
|
||||
<ul><li><code>searchKeyword</code></li></ul>
|
||||
<p>并保留了按列搜索的逻辑入口，但模板中没有对应输入框，因此当前不构成实际功能。</p>
|
||||
<h3>13.3 图表分析功能</h3>
|
||||
<p>代码中已实现：</p>
|
||||
<ul><li>状态分布饼图</li><li>行列使用率图</li><li>ECharts 初始化与销毁</li></ul>
|
||||
<p>但模板中没有对应图表容器，也没有实际启用 <code>warehouse-analysis</code> 页签，因此当前属于预留代码。</p>
|
||||
<h3>13.4 数据导出功能</h3>
|
||||
<p>代码中已实现 <code>exportWarehouseData()</code>，可以把当前 <code>warehouseData</code> 导出为 JSON 文件。</p>
|
||||
<p>但当前页面模板没有挂出“导出”按钮，因此用户在界面上无法直接使用。</p>
|
||||
<h3>13.5 打印报表功能</h3>
|
||||
<p>代码中存在 <code>printWarehouseReport()</code>，但当前只是提示“功能开发中”，没有实际打印逻辑。</p>
|
||||
<h3>13.6 物料标签打印</h3>
|
||||
<p>代码中存在 <code>printMaterialInfo()</code>，当前同样仅提示“功能开发中”。</p>
|
||||
<h3>13.7 焦点定位功能</h3>
|
||||
<p>代码中存在 <code>focusOnCell(rowLayer, column)</code>，可自动滚动到指定单元格位置。</p>
|
||||
<p>但当前页面没有表格明细区或其他入口去调用它，因此属于预留能力。</p>
|
||||
<h2>14. 现有业务规则总结</h2>
|
||||
<p>从当前实现可归纳出以下业务规则。</p>
|
||||
<h3>14.1 单元格状态规则</h3>
|
||||
<ul><li><code>2</code> 代表该库位已有物料，应进入物料明细查询流程</li><li>非 <code>2</code> 状态不查物料，进入库位说明流程</li><li><code>9</code> 表示库位正在存取或已锁定</li></ul>
|
||||
<h3>14.2 巷道数据规则</h3>
|
||||
<ul><li>页面默认在 <code>mounted</code> 时调用 <code>GetPosition(1)</code>，默认先加载第一巷道</li><li>用户再通过顶部选择器切换其他巷道</li></ul>
|
||||
<h3>14.3 编码转换规则</h3>
|
||||
<p>界面展示编码与后端查询编码不是同一个结构：</p>
|
||||
<ul><li>界面主要使用 <code>行-层</code></li><li>后端明细查询使用 <code>行-列-层</code></li></ul>
|
||||
<p>因此点击库位时必须做一次编号重组。</p>
|
||||
<h2>15. 使用流程说明</h2>
|
||||
<p>典型操作流程如下：</p>
|
||||
<ol><li>打开立库可视化页面</li><li>系统默认加载第一巷道数据</li><li>页面显示统计信息、图例和库位矩阵</li><li>用户可切换巷道并点击“搜索”</li><li>用户可按“行-层”筛选关注区域</li><li>用户可切换文字/图标显示模式</li><li>鼠标悬停可查看库位状态提示</li><li>点击空库位/托盘位/锁定位，查看库位说明</li><li>点击有物料库位，查看该库位物料明细</li><li>需要恢复视图时可点击“重置”或“刷新数据”</li></ol>
|
||||
<h2>16. 当前界面优点</h2>
|
||||
<p>从现有实现看，该页面已经具备以下优点：</p>
|
||||
<ul><li>视觉上能直接反映立库占用状态</li><li>巷道切换清晰</li><li>物料库位点击查询路径明确</li><li>状态颜色和图标表达直观</li><li>对后端返回结构适配较灵活</li><li>前端交互响应比较轻量</li></ul>
|
||||
<h2>17. 当前界面限制</h2>
|
||||
<p>从代码现状看，也存在一些限制：</p>
|
||||
<ul><li>状态筛选未开放界面入口</li><li>关键字搜索未开放界面入口</li><li>导出功能未开放按钮</li><li>图表分析功能未在页面中启用</li><li>空数据时缺少明确提示文案</li><li>锁库状态没有放入图例区</li><li>库位详情弹窗信息量偏少</li><li>刷新逻辑更多是前端缓存刷新，不是强制重新拉取所有条件数据</li></ul>
|
||||
<h2>18. 维护与扩展建议</h2>
|
||||
<p>如果后续继续完善该页面，建议优先考虑以下方向：</p>
|
||||
<ol><li>增加状态筛选下拉框，补齐 <code>statusFilter</code> 实际入口</li><li>增加库位搜索输入框，支持直接定位 <code>行-层-列</code></li><li>在界面上开放“导出 JSON”按钮</li><li>补上锁库状态图例</li><li>完善空数据占位提示</li><li>把图表分析页签正式接入模板</li><li>在库位详情弹窗中增加更多业务字段</li><li>将明细查询 SQL 封装为标准后端接口名，减少前端直接拼 SQL 的耦合</li></ol>
|
||||
<h2>19. 结论</h2>
|
||||
<p>当前“立库详细界面”已经不是简单静态展示，而是一个具备实际业务查询能力的立库可视化页面。它已经实现了：</p>
|
||||
<ul><li>按巷道加载立库状态</li><li>立库矩阵可视化展示</li><li>库位状态识别</li><li>库位详情查看</li><li>库位物料明细查询</li><li>筛选、分页、刷新、显示模式切换等基础交互</li></ul>
|
||||
<p>同时，代码中还保留了导出、图表分析、状态筛选、定位等扩展能力，说明该页面已经具备进一步升级为完整“立库监控与查询中心”的基础。</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user