TEKTRO 行動報工系統 (Mobile SFC)

彥豪精機現場行動化作業系統 — 供製造現場人員透過平板/手機進行報工過帳、設備與人員掃碼，以及管理員帳號維護。

---

專案摘要

項目	內容
專案類型	PWA (Progressive Web App)
前端框架	Vue 3 + TypeScript
UI 元件庫	Vuetify 3 + @mdi/font
建置工具	Vite 7 + vite-plugin-pwa
Service Worker	Workbox (injectManifest 模式)
後端串接	ASP.NET Core API (https://localhost:44305)
目標裝置	平板 / 手機（Chromium-based 瀏覽器）
多語系	繁體中文 (TW)、English (EN)、Tiếng Việt (VN)

---

文件索引

文件	說明
功能規格說明	角色權限、各頁面功能、掃碼規則、PWA 推播、多語系
架構設計表	技術棧、元件樹、視圖路由、狀態管理、API 串接、主題色

---

環境需求

• Node.js ^20.19.0 或 >=22.12.0
• 建議使用 Chromium-based 瀏覽器（Chrome / Edge / Brave）

---

啟動指令

# 安裝相依套件
npm install

# 開發模式 (含 PWA Service Worker)
npm run dev

# 型別檢查 + 建置產品版
npm run build

# 預覽產品版建置結果
npm run preview

開發模式下 PWA 已啟用（devOptions.enabled: true），可直接測試 Service Worker 與推播功能。

---

開發建議

• IDE: VS Code + Vue (Official) 擴充功能
• 瀏覽器: Chrome / Edge + Vue.js devtools
• 在 Chrome DevTools 開啟 Custom Object Formatter 以便檢視 Vue reactive 物件

配合Sajet MES相關Table異動

1. 資料庫StageTable要增加MobileUseFlag (原因: 決定那些區段可以被Mobile MES來使用)
2. 機況最新狀態存放的Table => G_MACHINE_STATUS ，機況Log Table => G_MACHINE_HISTORY

尚未完成進度

站台共用

• 前端:

1. @login頁面的"驗證階段103：免驗證密碼即可登入"請移除
2. @login頁面的"相機掃描識別證登入"中的"DEV測試面板"功能請只顯示於測試環境，正式環境的時候要不顯示

機況切換

• 前端:

• 後端:

1. 機況變化還要通知IOT (多呼叫IOT? 的api?)

移動WIP

• 前端:

• 後端:

1. 報工的確認報工的API (P)

2. 設備目前正在執行的RC是否相同的檢核API (P)

3. 作業人員有效性驗證API (不能為離職) (go) (V)

4. 製程卡合法性(不能為特定狀態的製程卡?) (P)

5. 報工時要檢核當下生產數量是否以滿足排單目標量 (狀態為Run的在執行檢核提示) 前段作即可

6. wip執行api (也許需要包含檢核)

7. 資料格式長度QR Code或一維條碼定義)定義 例如設備為EQP_**** 人員為EMP_****