產線視覺化模擬器
Production Line Visualization Simulator · 玻璃強化線吞吐量分析工具
關於這個專案
這是一個以單頁 HTML + JavaScript 寫成的產線吞吐量模擬器,用來分析包含入料貨架、清洗機、強化機、預烘機、烤箱、出料貨架等多站玻璃強化產線的穩態 UPH、瓶頸設備、各站利用率與烤箱負載。所有計算在瀏覽器端執行,不需要任何後端或安裝。
主要功能
- 即時 Canvas 視覺化整條產線的物料流動與手臂取放動作
- 可調整 ~40 個設備參數(動作秒數、機台容量、CT 等),修改即時生效
- 計算穩態 UPH、瓶頸設備、各站利用率、過烘片數、只出不進時間等
- 預烘機採線性步進模型(入口/出口固定,移動中禁止取放)
- 手臂3 採 drain/fill 平衡策略,避免動作間隔造成 throughput cliff
- 各站利用率從「烤箱首次出料」之後才起算,排除暖機期影響
- 全域動作間隔 (GAP) 參數,模擬真實設備動作之間的緩衝時間
- 一鍵匯出 HTML 快照(含主畫面 PNG、所有參數、統計、利用率、事件記錄),方便比對不同設定
兩個版本
使用方式
- 左側欄位調整設備參數(每個欄位都會即時生效)
- 頂部按「▶ 開始」啟動模擬,「⏸ 暫停」暫停,「↻ 重置」回到 t=0
- 右上角「速度」調整模擬倍率(預設 999×,跑 8 hr 大約幾秒完成)
- 右側統計面板觀察 UPH、瓶頸、利用率、烤箱狀態
- 「💾 存檔」/「📂 載入」儲存或載入參數組合(JSON)
- 「📊 匯出」產生當下狀態的 HTML 快照,用瀏覽器直接開即可比對
- 「❓ 說明」開啟瓶頸辨識 SOP(就是下面這份)
瓶頸辨識 SOP
傳統的「利用率最高 = 瓶頸」在連動式產線常常誤判 — 一台 100% 忙的設備可能是真瓶頸,也可能是被下游卡住或被上游餓死。模擬器把每個設備的時間細分為 5 種狀態,讓你能準確找出真正的瓶頸:
1. 5 種狀態分類
| 符號 | 名稱 | 意義 |
|---|
| █ P | 產出 (productive) | 真正在做有用工作 |
| ▓ B | 擋 (blocked) | 想動但下游滿(出不去) |
| ▒ S | 餓 (starved) | 想動但上游空(等不到料) |
| ░ CG | 週期等 (cycleGap) | 設計性等待(機台必要的循環時間) |
| · I | 真閒 (idle) | 沒明確原因的閒置 |
2. 三個關鍵 UI 區塊
- 「瓶頸設備」卡片:顯示主要瓶頸設備名 + 主因(自身慢 / 下游卡 / 上游缺 / 週期等) + 5 分鐘最久連續產出時間
- 「各站狀態 5min」卡片:全部設備按 P% 排名的 stacked bar(P/B/S/CG 用不同符號疊起來)
- 「WIP 堆積」卡片:每個 buffer 的即時數量 + 5 分鐘平均
3. 判讀流程
- 跑滿 30 分鐘(讓暖機效應消失,數據才有代表性)
- 看「瓶頸設備」卡的主因:
自身慢 + 最久連續 > 1 min → 它就是真瓶頸,直接改這個設備的參數下游卡 ↓ 看下游 → 顯示的是症狀,真兇在下游上游缺 ↑ 看上游 → 真兇在上游週期等 → 機台 cycle 結構問題,要改 sequence
- 用 WIP 黃金法則找真瓶頸位置:
「瓶頸的上游 WIP 滿、下游 WIP 空」。掃過 WIP 列,找「上面數字大、下面數字小」的交界點 — 那就是真瓶頸所在的位置。
- 用「最久連續」校驗:
- 大(> 1 min)= 真瓶頸,從不停手
- 小(< 10 sec)= 假瓶頸,被頻繁打斷,真兇在第二、三名
- 匯出快照 → 改參數 → 重跑 → 再匯出 → diff。如果 UPH 沒進步,代表你改的是症狀而非病因,看新的瓶頸卡再來一次。
4. 常見陷阱
- 看 P% 最高就以為是瓶頸 — 必須同時看「主因」是不是「自身慢」,且「最久連續」夠長
- 改了某設備但 UPH 沒變 — 你改的是症狀不是病因,看新的瓶頸卡(瓶頸會漂移)
- 多瓶頸接近(P% 差 < 5%) — 表示產線平衡,改任何一個都可能讓另一個變瓶頸,要分批優化
- WIP 上下游都滿 — 表示瓶頸在最末端(出料貨架換車或 armB)
- WIP 上下游都空 — 表示瓶頸在最前端(入料貨架換車或 armA)
技術細節
單一 HTML 檔(含 CSS/JS,~90 KB),純前端,不需後端、不需 build、不需任何套件。在 Chrome / Edge / Firefox 任一現代瀏覽器點開即用。規格文件以 OpenSpec 管理,放在 openspec/specs/simulation-ui/。