feat(resource): migrate resource-status and resource-history from Jinja2 to Vue 3 + Vite

Rewrite both resource pages (1,697 lines vanilla JS + 3,200 lines Jinja2 templates) as Vue 3 SFC components. Extract resource-shared/ module with shared CSS, E10 status constants, and HierarchyTable tree component. History page charts use vue-echarts, Status page reuses useAutoRefresh composable with 5-minute interval. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 18:19:32 +08:00
parent a2653b8139
commit 720e190bc6
45 changed files with 5099 additions and 4993 deletions
--- a/README.md
+++ b/README.md
@@ -38,12 +38,14 @@
 | QC-GATE 即時狀態報表（Vue 3 + Vite） | ✅ 已完成 |
 | 數據表查詢頁面 Vue 3 遷移 | ✅ 已完成 |
 | WIP 三頁 Vue 3 遷移（Overview/Detail/Hold Detail） | ✅ 已完成 |
+| 設備雙頁 Vue 3 遷移（Status/History） | ✅ 已完成 |
 | 設備快取 DataFrame TTL 一致性修復 | ✅ 已完成 |

 ---

 ## 開發歷史（Vite 重構後）

+- 2026-02-09：完成設備雙頁 Vue 3 遷移（`/resource`、`/resource-history`）— 兩頁共 1,697 行 vanilla JS + 3,200 行 Jinja2 模板重寫為 Vue 3 SFC。抽取 `resource-shared/` 共用模組（CSS 基底、E10 狀態常數、HierarchyTable 三層展開樹表元件），History 頁 4 個 ECharts 圖表改用 vue-echarts，Status 頁複用 `useAutoRefresh` composable（5 分鐘自動刷新）。
 - 2026-02-09：完成 WIP 三頁 Vue 3 遷移（`/wip-overview`、`/wip-detail`、`/hold-detail`）— 三頁共 1,941 行 vanilla JS + Jinja2 重寫為 Vue 3 SFC。抽取共用 CSS/常數/元件至 `wip-shared/`，Pareto 圖改用 vue-echarts（與 QC-GATE 一致），Hold Detail 新增前端 URL params 判斷取代 Jinja2 注入。
 - 2026-02-09：完成數據表查詢頁面（`/tables`）Vue 3 遷移 — 第二個純 Vite 頁面，建立 `apiPost` POST 請求模式，237 行 vanilla JS 重寫為 Vue 3 SFC 元件。
 - 2026-02-09：修復設備快取 DataFrame TTL 一致性問題 — process-level DataFrame（30s TTL）過期後 derived index 仍為 ready，導致 `/api/resource/status` 回傳空資料。新增 Redis fallback reload。
@@ -423,13 +425,14 @@ sudo systemctl start mes-dashboard mes-dashboard-watchdog
  - **生產設備**：僅顯示列入生產統計的設備
  - **重點設備**：僅顯示標記為重點監控的設備
  - **監控設備**：僅顯示需特別監控的設備
- 設備狀態每 30 秒自動更新
+- 5 分鐘自動刷新 + 手動刷新按鈕

-#### 設備歷史查詢
-1. 選擇查詢日期範圍
-2. 可選擇特定設備或工作中心
-3. 查看歷史趨勢圖表和稼動率熱力圖
-4. 支援 CSV 匯出
+#### 設備歷史績效
+1. 選擇查詢日期範圍與粒度（日/週/月/年）
+2. 可多選 workcenter groups 和 families 篩選
+3. 查看趨勢折線、堆疊柱狀、workcenter 對比與 OU% 熱圖
+4. 三層階層明細表顯示各設備 hours 與百分比
+5. 支援 CSV 匯出

 ### 管理員登入

@@ -491,20 +494,25 @@ A: 請確認瀏覽器允許下載檔案，並檢查查詢結果是否有資料
 - 10 分鐘自動刷新 + AbortController 請求取消
 - **技術架構**：Vue 3 + Vite，URL params 取代 Jinja2 注入

-### 設備狀態監控
+### 設備即時概況

- 即時設備狀態總覽（PRD/SBY/UDT/SDT/EGT/NST）
- 按工作中心群組統計
- 設備稼動率（OU%）與運轉率（RUN%）
- 階層篩選（廠區/產線/重點設備/監控設備）
- Redis 快取自動更新（30 秒間隔）
+- 即時設備狀態總覽：10 張 KPI 卡片（OU%/AVAIL%/PRD/SBY/UDT/SDT/EGT/NST/OTHER/Total）
+- 三層階層矩陣表（workcenter group → family → resource），支援展開/收合與 cell click 篩選
+- 設備卡片格（auto-fill grid），顯示狀態/位置/LOT/JOB 資訊
+- LOT/JOB 浮動 tooltip（`<Teleport>` + viewport clamp 定位）
+- 階層篩選（workcenter group 下拉 + 生產設備/重點設備/監控設備 checkbox）
+- 5 分鐘自動刷新 + `visibilitychange` 即時刷新 + AbortController
+- Cache 狀態指示（green/yellow/red dot + 最後更新時間）
+- **技術架構**：Vue 3 + Vite，複用 `resource-shared/` 共用模組與 `useAutoRefresh` composable

-### 設備歷史查詢
+### 設備歷史績效

- 歷史狀態趨勢分析
- 稼動率熱力圖視覺化
- 設備狀態明細查詢
- 支援 CSV 匯出
+- 9 張 KPI 卡片（OU%/AVAIL%/PRD/SBY/UDT/SDT/EGT/NST/機台數）
+- 4 個 vue-echarts 圖表：OU%/AVAIL% 趨勢折線、E10 狀態堆疊柱狀、workcenter OU% 橫向對比、OU% 熱圖
+- 三層階層明細表（使用 `resource-shared/HierarchyTable`），hours + percentage 格式
+- 日期區間（預設 7 天）+ 粒度切換（日/週/月/年）+ 多選下拉篩選
+- CSV 串流匯出（`/api/resource/history/export`）
+- **技術架構**：Vue 3 + Vite，4 圖表全部使用 `<VChart :option autoresize />`

 ### QC-GATE 即時狀態報表

@@ -580,8 +588,8 @@ CIRCUIT_BREAKER_RECOVERY_TIMEOUT=30
 | 技術 | 用途 |
 |------|------|
 | Jinja2 | 模板引擎（既有頁面） |
-| Vue 3 | UI 框架（QC-GATE、Tables、WIP 三頁已遷移，漸進式擴展中） |
-| vue-echarts | ECharts Vue 封裝（QC-GATE、WIP Overview Pareto 圖） |
+| Vue 3 | UI 框架（QC-GATE、Tables、WIP 三頁、設備雙頁已遷移，漸進式擴展中） |
+| vue-echarts | ECharts Vue 封裝（QC-GATE、WIP Overview Pareto、Resource History 4 圖表） |
 | Vite 6 | 前端多頁模組打包（含 Vue SFC + HTML entry） |
 | ECharts | 圖表庫（npm tree-shaking + 舊版靜態檔案並存） |
 | Vanilla JS Modules | 互動功能與頁面邏輯（既有頁面） |
@@ -637,8 +645,9 @@ DashBoard_vite/
 ├── frontend/                   # Vite 前端專案
 │   ├── src/core/               # 共用 API/欄位契約/計算 helper
 │   ├── src/portal/             # Portal entry
-│   ├── src/resource-status/    # 設備即時概況 entry
-│   ├── src/resource-history/   # 設備歷史績效 entry
+│   ├── src/resource-shared/    # 設備雙頁共用 CSS/常數/元件
+│   ├── src/resource-status/    # 設備即時概況 (Vue 3 SFC)
+│   ├── src/resource-history/   # 設備歷史績效 (Vue 3 SFC)
 │   ├── src/job-query/          # 設備維修查詢 entry
 │   ├── src/excel-query/        # Excel 批次查詢 entry
 │   ├── src/tables/             # 數據表查詢 entry (Vue 3 SFC)
@@ -732,6 +741,15 @@ conda run -n mes-dashboard python scripts/run_cache_benchmarks.py --enforce

 ### 2026-02-09

+- 完成設備雙頁 Vue 3 遷移（`/resource`、`/resource-history`）：
+  - 兩頁共 1,697 行 vanilla JS + 3,200 行 Jinja2 模板（含 820 行重複 inline fallback script）重寫為 Vue 3 SFC
+  - 抽取 `resource-shared/` 共用模組：CSS 基底（`:root` 變數、status 顏色、tree table 樣式）、常數（`STATUS_DISPLAY_MAP`、`STATUS_AGGREGATION`、`STATUS_COLORS`、`OU_BADGE_THRESHOLDS`）、`HierarchyTable.vue` 三層展開樹表元件
+  - Resource History：4 個 ECharts 圖表改用 vue-echarts（趨勢折線、堆疊柱狀、workcenter 對比、OU% 熱圖）
+  - Resource Status：複用 `wip-shared/composables/useAutoRefresh.js`（5 分鐘間隔）
+  - Resource Status：自訂 `FloatingTooltip.vue`（`<Teleport to="body">` + viewport clamp），顯示 LOT/JOB 詳情
+  - Resource History：`MultiSelect.vue` 多選下拉（checkbox list + click-outside + select all/clear）
+  - 兩頁 Vite entry 從 `main.js` 改為 `index.html`，Flask route 改為 `send_from_directory`
+  - 移除兩份 Jinja2 模板（`resource_status.html`、`resource_history.html`）
 - 完成 WIP 三頁 Vue 3 遷移（`/wip-overview`、`/wip-detail`、`/hold-detail`）：
  - 三頁共 1,941 行 vanilla JS + Jinja2 模板重寫為 Vue 3 SFC 元件架構
  - 抽取 `wip-shared/` 共用模組：CSS 基底（`:root` 變數、gradient header、responsive）、常數（`NON_QUALITY_HOLD_REASONS` 11 值）、Pagination/FilterBar 元件
@@ -861,5 +879,5 @@ conda run -n mes-dashboard python scripts/run_cache_benchmarks.py --enforce

 ---

-**文檔版本**: 5.2
+**文檔版本**: 5.3
 **最後更新**: 2026-02-09