IMPORTANT NOTICE
免责声明
⚠ 重要声明
本说明书仅供参考，文档中描述的功能、界面及操作流程可能随软件版本更新而有所调整，实际功能请以您使用的软件实际版本为准。
版本说明：本文档对应 物料流转瓶颈监控看板 V1.0 版本。如您的系统版本号与本文档不一致，部分功能描述可能存在差异。
获取最新版本：如需获取最新版本的系统功能说明，请联系名北拓科技技术支持团队，或访问官方网站 Mbyte.cn 查阅最新文档。
| 项目 | 说明 |
|---|
| 文档版本 | V1.0（2026年07月发布） |
| 适用系统 | 物料流转瓶颈监控看板 V1.0 |
| 技术支持 | 服务号：MBT321 | 官网：Mbyte.cn |
| 更新频率 | 随系统版本迭代同步更新 |
CHAPTER 01
系统总览与管理思想
1.1 生产物流管理中心思想
核心管理理念
生产过程中的大部分问题，会以物流呆滞的形式表现出来。
抓好物流呆滞问题，就解决了生产中大部分日常问题。
—— 生产物流管理中心
这一管理思想揭示了生产管理的本质：物流是生产过程的血液。当物料流动顺畅时，生产各环节协调运转；当物料出现呆滞——无论是待检验积压、退回原料库未处理，还是待入成品库长时间滞留——都意味着生产流程中存在瓶颈或异常。
传统的生产管理往往关注设备稼动率、人员出勤等"显性指标"，而忽视了物料流转状态这一"隐性信号"。物料流转瓶颈监控看板正是基于这一管理思想而设计，它将物料流转状态作为生产健康的"体温计"，通过实时监控和预警，帮助管理者第一时间发现并解决生产中的问题。
管理思想的三层含义
| 层次 | 含义 | 具体表现 |
|---|
| 第一层：问题显性化 | 物流呆滞是生产问题的"晴雨表" | 待检验积压 → 质检环节瓶颈；退回原料库未处理 → 原料异常或工艺问题 |
| 第二层：管理聚焦 | 抓住物流呆滞就抓住了生产管理的关键 | 关注滞留时长和责任人，而非仅关注产量 |
| 第三层：闭环改善 | 通过持续监控物流状态驱动问题改善 | 发现呆滞 → 定位责任人 → 推动处理 → 验证效果 |
系统如何践行这一思想
🔴
滞留预警
按滞留时长自动标记颜色（绿/橙/红），让问题物料一目了然，超过48小时红色预警
👤
责任到人
持有人汇总视图将物料呆滞精确关联到具体责任人，推动问题快速闭环
📊
趋势洞察
通过Top12排名和时间趋势图，发现系统性瓶颈工序，驱动流程改善
🔄
实时监控
30秒自动刷新，确保问题不被遗漏，实现"发现-处理-验证"的管理闭环
1.2 功能定位与设计理念
物料流转瓶颈监控看板是名北拓科技专为制造型企业打造的生产物流实时监控工具。系统以"让物流问题无处隐藏"为核心理念，通过KPI预警、多维度清单、持有人追踪和趋势分析，帮助管理者实时掌握在制物料的流转状态，快速定位瓶颈环节。
1.3 核心功能模块
物料流转瓶颈监控看板围绕生产物流监控，设置六大核心功能模块：
📋
KPI 预警卡片
四大关键状态（待检验、退回原料库、待入仓库、全部在制）实时数量与最长滞留双指标展示
👤
持有人汇总视图
按责任人维度汇总物料流动性，支持展开查看明细，联动右侧趋势图
📦
物料明细视图
逐条展示在制物料清单，支持排序、列筛选、状态切换，固定表头和合计行
📈
趋势分析图表
默认显示Top12持有人排名柱状图，展开持有人后切换为时间趋势折线图
🔄
自动刷新
每30秒自动拉取最新数据，页面隐藏时暂停，重新可见时立即刷新
🖥️
全屏展示
适合车间大屏监控，3秒无操作自动隐藏鼠标光标，沉浸式监控体验
1.4 页面布局结构
系统界面采用清晰的分区布局设计，整体分为五个区域：
| 界面区域 | 位置 | 功能说明 |
|---|
| 标题栏 | 页面顶部 | 显示系统标题、实时时间、刷新按钮和全屏按钮 |
| KPI 卡片行 | 标题栏下方 | 4个关键状态卡片：待检验、退回原料库、待入仓库（轮播）、全部在制 |
| 物料清单区域 | 左侧（2/3宽度） | 视图切换标签 + 状态切换按钮 + 数据表格（含排序和列筛选） |
| 图表区域 | 右侧（1/3宽度） | Top12持有人排名柱状图 或 持有人时间趋势折线图 |
| 底部状态栏 | 页面底部 | 显示自动刷新倒计时、API连接状态、版权信息 |
布局特点：采用CSS Grid弹性布局，左侧表格与右侧图表按2:1比例分配宽度，确保在不同屏幕尺寸下都能获得最佳显示效果。
CHAPTER 02
KPI 关键指标卡片
2.1 四大状态卡片
页面顶部设置4个KPI卡片，每个卡片提供双指标展示：物料数量和最长滞留时长。
| 卡片名称 | 英文标识 | 统计范围 | 点击效果 |
|---|
| 待检验 | Pending QC | 状态为"待检验"的物料 | 下方表格切换为待检验物料清单 |
| 退回原料库 | Return to Warehouse | 状态为"退回原料库"的物料 | 下方表格切换为退回原料库清单 |
| 待入仓库 | 轮播卡片 | 轮播显示3种仓库状态 | 跳转到当前轮播显示的仓库清单 |
| 全部在制 | Total In Production | 未知+待检验+通过三种状态合计 | 下方表格切换为全部在制物料清单 |
双指标设计：每个卡片上方显示物料数量（大字），下方显示"最长滞留: XX小时"（小字），滞留时长根据阈值自动变色，帮助管理者同时关注数量和紧急程度。
2.2 待入仓库轮播卡片
第三个KPI卡片采用自动轮播设计，每4秒切换一次，依次展示三种仓库待入状态：
| 轮播位置 | 状态名称 | 图标 | 英文说明 |
|---|
| 第1页 | 待入成品库 | 🏭 仓库图标 | To Finished Goods |
| 第2页 | 待入废品库 | 🗑️ 废品图标 | To Scrap |
| 第3页 | 待入原料库成品 | ♻️ 回收图标 | 成品退回原料库 |
交互说明：底部圆点指示器可点击手动切换，点击后暂停自动轮播5秒；点击卡片本体可跳转到对应状态的物料清单。
2.3 滞留时长预警机制
系统根据滞留时长自动标记颜色，实现分级预警：
| 滞留时长 | 颜色标识 | 预警级别 | 管理建议 |
|---|
| ≤ 12 小时 | 绿色 | 正常 | 常规流转，无需特别关注 |
| 12 - 48 小时 | 橙色 | 注意 | 关注流转进度，确认是否有异常 |
| > 48 小时 | 红色 | 预警 | 需立即排查原因，推动处理 |
管理提示：根据"生产物流管理中心"思想，红色预警的物料就是当前生产中最可能存在的问题点。建议每日晨会优先关注红色预警项。
CHAPTER 03
在制物料清单与视图切换
3.1 视图切换：持有人汇总 / 物料明细
在制物料清单区域顶部设有视图切换标签栏，位于表格左上角（序号列位置），与表头融为一体，提供两种查看维度：
| 视图名称 | 图标 | 查看维度 | 适用场景 |
|---|
| 持有人汇总 | 👤 默认激活 | 按责任人汇总物料流动性 | 快速了解每位责任人的物料积压情况，定位瓶颈责任人 |
| 物料明细 | 📋 | 逐条展示每批物料详情 | 查看具体物料的工序、数量、滞留时长等详细信息 |
设计理念：标签栏嵌入表格顶部，与表头同色同宽，视觉上浑然一体。默认显示"持有人汇总"视图，契合"抓物流呆滞先抓责任人"的管理思路。
3.2 持有人汇总视图
持有人汇总视图将物料按责任人聚合，展示每位责任人的物料流动性概况：
| 列名 | 说明 | 可排序 |
|---|
| 序号 | 自动编号，点击行可展开/收起明细 | ❌ |
| 持有人 | 责任人简称 | ❌ |
| 批数 | 该持有人当前持有的物料总批数 | ✅ |
| 物料数 | 该持有人当前持有的物料总数量 | ✅ |
| 最短滞留 | 该持有人最早接收物料的滞留时长 | ✅ |
| 最长滞留 | 该持有人最晚接收物料的滞留时长（默认倒序排列） | ✅ |
| 状态种类 | 持有物料涉及的状态种类数 | ❌ |
| 持有状态 | 以彩色标签展示具体的物料状态 | ❌ |
展开明细功能
点击持有人汇总行中的任意位置，可以展开/收起该持有人的物料明细子表：
- 展开：行前图标从 ▶ 变为 ▼，下方插入该持有人的所有物料明细（含物料名称、型号、工序、数量、接收时间、滞留时长、状态）
- 收起：再次点击，子表收回，图标恢复为 ▶
- 联动图表：展开后右侧图表自动切换为该持有人的物料时间趋势折线图；可展开多个持有人同时对比
使用建议：默认按"最长滞留"倒序排列，排在最前面的就是物料积压最严重的责任人。展开后可精确定位具体哪些物料造成了呆滞。
3.3 物料明细视图
切换到"物料明细"视图后，逐条展示每一批在制物料的完整信息：
| 列名 | 说明 | 对齐方式 | 可排序 | 可筛选 |
|---|
| 序号 | 自动编号 | 居中 | ❌ | ❌ |
| 物料名称 | 物料的名称 | 左对齐 | ✅ | 文本搜索 |
| 型号 | 物料的型号 | 左对齐 | ✅ | 文本搜索 |
| 规格 | 物料的规格 | 左对齐 | ✅ | 文本搜索 |
| 工序 | 当前所在工序 | 居中 | ✅ | 下拉选择 |
| 下道工序 | 下一个流转工序 | 居中 | ✅ | 下拉选择 |
| 责任人 | 物料持有人 | 左对齐 | ✅ | 文本搜索 |
| 数量 | 物料数量 | 右对齐 | ✅ | 范围筛选 |
| 批数 | 物料批次数 | 右对齐 | ✅ | 范围筛选 |
| 接收时间 | 物料接收时间 | 居中 | ✅ | ❌ |
| 滞留时长 | 从接收到当前的时长 | 右对齐 | ✅ | 范围筛选（天） |
| 物料状态 | 当前状态标识 | 居中 | ✅ | 下拉选择 |
合计行：表格底部固定显示合计行，统计当前显示记录的总条数、总数量、总批数和最大滞留时长。
3.4 状态切换与物料类型筛选
状态切换按钮组
表格标题栏右侧提供三个状态切换按钮：
| 按钮 | 显示内容 | 说明 |
|---|
| 全部在制 | 未知+待检验+通过 | 默认显示，包含所有在制物料 |
| 待加工 | 状态为"未知"的物料 | 尚未进入加工流程的物料 |
| 已加工 | 状态为"通过"的物料 | 已完成当前工序等待流转的物料 |
3.5 表格排序与列筛选
排序功能
- 首次点击列头：升序排列（↑）
- 再次点击：降序排列（↓）
- 第三次点击：取消排序，恢复默认
- 视觉反馈：当前排序列表头高亮显示
列筛选功能
物料明细视图的表头下方自动显示筛选行，根据列类型提供不同的筛选方式：
| 筛选类型 | 适用列 | 筛选方式 |
|---|
| 文本搜索 | 物料名称、型号、规格、责任人 | 输入关键字即时过滤，支持模糊匹配 |
| 下拉选择 | 工序、下道工序、物料状态 | 从唯一值列表中选取 |
| 范围筛选 | 数量、批数、滞留时长 | 输入最小-最大值范围（滞留时长单位为"天"） |
防抖优化：文本和范围筛选输入带有200ms防抖，输入停止后才执行筛选，避免频繁刷新。
CHAPTER 04
图表分析功能
4.1 Top12 持有人排名（默认模式）
页面加载后，右侧图表默认显示最长滞留 Top12 持有人对比横向柱状图：
- 数据内容：展示滞留时长最长的前12位持有人
- 柱状方向：横向柱状图，持有人名称在Y轴，滞留时长在X轴
- 颜色编码：根据滞留时长自动分配颜色（绿/橙/红）
- 悬停提示：鼠标悬停显示具体滞留时长和批数
管理价值：Top12排名直观展示哪些责任人的物料积压最严重，是每日生产调度会的重要参考依据。
4.2 持有人物料时间趋势（展开模式）
在持有人汇总视图中展开一个或多个持有人的明细后，右侧图表自动切换为时间趋势折线图：
| 显示模式 | 触发条件 | X轴 | Y轴 | 数据线 |
|---|
| 单人趋势 | 展开1位持有人 | 接收时间（按小时） | 批次数 | 蓝色折线 |
| 多人对比 | 展开多位持有人 | 接收时间（按小时） | 批次数 | 每人一条不同颜色折线 |
联动机制：收起所有持有人后，图表自动恢复为默认的Top12排名柱状图。展开/收起操作带有200ms防抖，避免频繁切换导致图表闪烁。
CHAPTER 05
自动刷新与全屏模式
自动刷新机制
| 功能 | 说明 |
|---|
| 刷新间隔 | 每30秒自动拉取最新数据 |
| 倒计时显示 | 底部状态栏实时显示距下次刷新的秒数 |
| 手动刷新 | 点击标题栏右侧的 🔄 刷新按钮，立即拉取数据并重置倒计时 |
| 页面可见性 | 页面隐藏时暂停所有定时器；重新可见时立即刷新数据并恢复定时器 |
全屏模式
| 操作 | 方法 | 效果 |
|---|
| 进入全屏 | 点击标题栏 ⛶ 全屏按钮 | 页面最大化显示，适合车间大屏 |
| 隐藏光标 | 全屏后3秒无鼠标操作 | 自动隐藏鼠标光标，减少视觉干扰 |
| 退出全屏 | 按 Esc 键或再次点击全屏按钮 | 恢复正常窗口显示 |
大屏监控：全屏模式特别适合车间或办公室的大屏监控场景。配合30秒自动刷新，管理者可以实时掌握生产物流状态，无需人工干预。
CHAPTER 06
常见问题解答
Q1: 数据不更新或一直显示"--"？
可能原因：网络连接异常、API服务未启动、后端数据源异常
解决方法：检查底部状态栏的API连接状态、点击刷新按钮手动拉取、检查网络连接、如持续异常请联系技术支持
Q2: 底部显示"模拟数据模式"？
说明：当API请求失败时，系统自动降级为模拟数据，确保界面可正常展示和操作。
解决方法：检查网络连接和API服务状态，恢复后点击刷新按钮即可切回真实数据。
Q3: 持有人汇总视图看不到标签栏？
说明：视图切换标签栏位于表格内部左上角（序号列上方），与表头同色融合。请查看表格左上角区域，"持有人汇总"和"物料明细"两个标签与表头背景色一致。
解决方法：标签栏始终显示在表格顶部，如确实不可见请刷新页面或联系技术支持。
Q4: 展开持有人后图表没有数据？
可能原因：该持有人当前无物料明细数据、数据正在加载中
解决方法：等待数据加载完成、确认该持有人确实有物料数据、尝试刷新页面
Q5: 表格列筛选不生效？
说明：列筛选仅在"物料明细"视图下可用，"持有人汇总"视图不支持列筛选。
解决方法：先切换到"物料明细"视图，再使用表头下方的筛选行进行过滤。点击筛选行最左侧的"清除"按钮可重置所有筛选条件。
Q6: 全屏模式下看不清？
解决方法：移动鼠标显示光标、调整浏览器缩放比例（Ctrl + +/-）、退出全屏后查看
Q7: KPI卡片点击无反应？
说明：KPI卡片点击会切换下方表格的显示内容。如果当前已在对应视图，可能看不到明显变化。
解决方法：注意观察表格标题是否变化，或先切换到"物料明细"视图再点击KPI卡片。
Q8: 轮播卡片如何手动切换？
操作说明：
- 点击卡片底部的圆点指示器可手动切换到对应的仓库状态
- 点击后自动轮播暂停5秒，之后恢复
- 点击卡片本体（非指示器区域）会跳转到当前显示状态的物料清单
CHAPTER 07
技术特性与规范
技术栈
| 技术 | 版本/来源 | 用途 |
|---|
| HTML5 | - | 页面结构 |
| CSS3 | - | 样式和动画（Grid/Flexbox/Sticky） |
| JavaScript (ES6+) | - | 核心逻辑 |
| Chart.js | v3.x | 图表绘制（柱状图/折线图） |
| Font Awesome | v5.x | 图标库 |
| CryptoJS | v3.x | MD5加密（权限认证） |
API接口规范
| 项目 | 说明 |
|---|
| 配置文件 | js/env-config.js |
| API客户端 | fieldMaterialsAPIClient |
| 数据源 | mbtfieldMatsFunc |
| 刷新间隔 | 30秒 |
| 降级策略 | API失败自动切换模拟数据 |
API 核心数据提取方法
| 方法名 | 功能 | 输出 |
|---|
| extractKPIData | 提取KPI卡片数据 | 各状态的物料数量和最长滞留时长 |
| extractOperatorSummary | 持有人汇总 | 按责任人聚合的批数、物料数、滞留时长 |
| extractStatusList | 状态列表 | 指定状态的物料明细列表 |
| extractHolderRanking | 持有人排名 | Top N持有人滞留时长排名 |
| extractOperatorTimeSeries | 时间趋势 | 持有人物料接收时间序列数据 |
性能优化策略
- 渲染优化：图表（轻量Canvas）优先渲染，表格（重量级DOM操作）延迟到下一帧
- 防抖处理：筛选输入200ms防抖，图表刷新200ms防抖
- 页面可见性：页面隐藏时暂停所有定时器，节省资源
- 图表销毁：渲染新图表前销毁旧实例，避免内存泄漏
- 粒子动画：移动端自动禁用，节省性能
- 光标隐藏：全屏模式下3秒无操作隐藏光标，触摸设备自动禁用
浏览器兼容性
| 浏览器 | 最低版本 | 备注 |
|---|
| Chrome | 60+ | ✅ 完全支持 |
| Edge | 79+ | ✅ 完全支持 |
| Firefox | 55+ | ✅ 完全支持 |
| Safari | 11+ | ✅ 完全支持 |
| IE | ❌ | 不支持 |
滞留时长颜色阈值
| 场景 | 绿色（正常） | 橙色（注意） | 黄色（警告） | 红色（严重） |
|---|
| KPI卡片 | ≤ 12 小时 | 12 - 48 小时 | - | > 48 小时 |
| 表格单元格 | < 24 小时 | - | 24 - 48 小时 | ≥ 72 小时 |
注意：KPI卡片和表格单元件的滞留颜色阈值不同。KPI卡片采用更严格的标准（12/48小时），以便更早发出预警；表格单元格采用24/48/72小时的分级标准，便于区分严重程度。