egg/DashBoard
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
main
DashBoard/openspec/changes/archive/2026-02-09-migrate-resource-duo-vue/tasks.md
egg 720e190bc6 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

6.0 KiB
Raw Permalink Blame History

1. resource-shared 共用模組

  • 1.1 建立 frontend/src/resource-shared/styles.css — 從兩頁 Jinja2 模板抽取共用 CSS：:root 變數、status 顏色類別（.col-prd/.col-sby/...）、tree table 樣式（.row-level-0/.row-level-1/.row-level-2、.indent-1/.indent-2、.expand-btn）、KPI 卡片樣式、OU badge 色碼（.ou-badge.high/medium/low）、loading overlay、filter indicator
  • 1.2 建立 frontend/src/resource-shared/constants.js — STATUS_DISPLAY_MAP（PRD→生產中 等 6+值）、STATUS_AGGREGATION（PM/BKD→UDT、ENG→EGT、OFF→NST）、STATUS_COLORS（PRD=#22c55e 等 6 色）、OU_BADGE_THRESHOLDS（high≥80、medium≥50、low<50）、MATRIX_STATUS_COLUMNS 順序定義
  • 1.3 建立 frontend/src/resource-shared/components/HierarchyTable.vue — 三層展開/收合樹表元件，props: hierarchy（三層資料）、columns（欄位定義陣列）、expandedState（reactive 物件）；events: @cell-click、@toggle-row、@toggle-all；支援 Level 0/1/2 行樣式和縮排

2. resource-status Vue 3 遷移

  • 2.1 建立 frontend/src/resource-status/index.html — HTML entry point，引用 main.js，設定 <title>設備即時概況</title>
  • 2.2 建立 frontend/src/resource-status/App.vue — 頂層元件，整合所有子元件，管理全域狀態（allEquipment、matrixFilter、hierarchyState），呼叫 loadData/loadOptions/loadSummary
  • 2.3 建立 frontend/src/resource-status/components/StatusHeader.vue — cache 狀態指示（green/yellow/red dot）、最後更新時間、手動刷新按鈕
  • 2.4 建立 frontend/src/resource-status/components/FilterBar.vue — workcenter group 下拉（GET /api/resource/status/options）+ 3 個 checkbox（生產設備/重點設備/監控設備）
  • 2.5 建立 frontend/src/resource-status/components/SummaryCards.vue — 10 張 KPI 卡片（Total/PRD/SBY/UDT/SDT/EGT/NST/OTHER/OU%/AVAIL%），含 click 篩選、active 狀態、百分比顯示
  • 2.6 建立 frontend/src/resource-status/components/MatrixSection.vue — 使用 resource-shared/HierarchyTable，buildMatrixHierarchy 邏輯（3 層聚合 + 狀態歸類），toolbar（expand/collapse all），cell click 篩選設備
  • 2.7 建立 frontend/src/resource-status/components/EquipmentGrid.vue + EquipmentCard.vue — 設備卡片格（auto-fill grid, min 280px），每卡顯示 resource name/status badge/workcenter/group/family/location/LOT count/JOB indicator，狀態色邊框，篩選指示器
  • 2.8 建立 frontend/src/resource-status/components/FloatingTooltip.vue — <Teleport to="body"> + v-if，LOT 詳情（LOTID/QTY/track-in time/employee）和 JOB 詳情（order/status/model/technician/codes），viewport clamp 定位邏輯
  • 2.9 整合 useAutoRefresh — import wip-shared/composables/useAutoRefresh.js，intervalMs 設為 5 分鐘（5 * 60 * 1000），接入 loadData 作為 onRefresh

3. resource-history Vue 3 遷移

  • 3.1 建立 frontend/src/resource-history/index.html — HTML entry point，設定 <title>設備歷史績效</title>
  • 3.2 建立 frontend/src/resource-history/App.vue — 頂層元件，管理 summaryData/detailData/hierarchyState/filters 狀態，executeQuery 整合 parallel API calls
  • 3.3 建立 frontend/src/resource-history/components/FilterBar.vue — 日期區間（預設 last 7 days）+ 粒度按鈕（日/週/月/年）+ 查詢按鈕
  • 3.4 建立 frontend/src/resource-history/components/MultiSelect.vue — 多選下拉元件（checkbox list + click-outside-close + select all/clear），v-model 綁定 selectedItems 陣列，供 workcenter groups 和 families 使用
  • 3.5 建立 frontend/src/resource-history/components/KpiCards.vue — 9 張 KPI 卡片（OU%/AVAIL%/PRD/SBY/UDT/SDT/EGT/NST/Machine Count），使用 buildResourceKpiFromHours() 計算，大數值用 K 格式
  • 3.6 建立 frontend/src/resource-history/components/TrendChart.vue — vue-echarts 折線圖（OU%+AVAIL% 雙線，smooth area fill 0.2 opacity），<VChart :option="chartOption" autoresize />
  • 3.7 建立 frontend/src/resource-history/components/StackedChart.vue — vue-echarts 堆疊柱狀圖（6 狀態 hours per period），使用 resource-shared STATUS_COLORS
  • 3.8 建立 frontend/src/resource-history/components/ComparisonChart.vue — vue-echarts 橫向柱狀圖（top 15 workcenters by OU%），色碼 green/yellow/red（同 OU badge 閾值）
  • 3.9 建立 frontend/src/resource-history/components/HeatmapChart.vue — vue-echarts 2D 熱圖（workcenters × dates），visualMap red→yellow→green，workcenter_seq 排序
  • 3.10 建立 frontend/src/resource-history/components/DetailSection.vue — 使用 resource-shared/HierarchyTable，buildHierarchy 邏輯（3 層聚合 + hours 計算），toolbar（expand/collapse all + CSV export 按鈕）
  • 3.11 實作 CSV 匯出 — 點擊按鈕建立臨時 <a> 導向 /api/resource/history/export?... 下載

4. Vite 建置與 Flask 路由

  • 4.1 更新 frontend/vite.config.js — resource-status 和 resource-history entry 從 main.js 改為 index.html
  • 4.2 更新 frontend/package.json build script — 新增 resource-status.html 和 resource-history.html 的 copy 指令
  • 4.3 更新 src/mes_dashboard/app.py — /resource route 改為 send_from_directory(dist_dir, 'resource-status.html')，/resource-history route 改為 send_from_directory(dist_dir, 'resource-history.html')

5. 清理與驗證

  • 5.1 刪除 Jinja2 模板 templates/resource_status.html 和 templates/resource_history.html
  • 5.2 刪除 resource-status/main.js 和 resource-history/main.js 中的舊 vanilla JS 程式碼（替換為 Vue 3 的 createApp 入口）
  • 5.3 執行 npm run build 確認建置成功，確認 static/dist/ 產出 resource-status.html/js/css 和 resource-history.html/js/css
  • 5.4 驗證兩頁在 portal iframe 中正常載入，CSP frame-ancestors 'self' 允許嵌入