跳至主要内容

Idea

賺案目的​

本專案要開發兼顧方便 編輯 與 視覺呈現 的 專案/人力 管理頁面. 區分 編輯區塊 和 檢視區塊. 資料即時連動.

編輯區塊可切換純文字編輯模式和表格編輯模式, 檢視模式可切換 專案或人力投入 甘特圖. 透過專案檢視可看到團隊所有專案各階段的甘特圖, 及各階段投入的人力加總. 透過人力投入檢視可看到團隊每個成員在各專案階段的甘特圖. 藉由這兩個不同視角甘特圖, 可快速得知團隊人員忙碌/空閒時間. 方便進行新進專案時程規劃.

技術架構​

  • 純前端 SPA, 優先選用 Vue.js
  • 可以直接 host 在 github pages 或私人靜態網頁服務器, 不需要後端資料庫
  • 編輯區資料可以存在 browser localstorage, 下次打開頁面時自動帶出

需求詳情​

純文字編輯模式​

純文字編輯模式資料格式如下

專案 A(, pendding):
- 階段 1, 開始時間, 結束時間: 人員1 投入工時百分比, 人員2 投入工時百分比, ...
- 階段 2, 開始時間, 結束時間: 人員1 投入工時百分比, 人員3 投入工時百分比, ...
...
專案 B:
- 階段 1, 開始時間, 結束時間: 人員2 投入工時百分比, 人員4 投入工時百分比, ...
- 階段 2, 開始時間, 結束時間: 人員3 投入工時百分比, 人員5 投入工時百分比, ...
...
  • 各階段開始時間若為 '--', 則接續上個階段之後開始
  • 時間格式可支援 YYYY-MM 和 YYYY-MM-DD, 後續甘特圖檢視時表現不同
    • YYYY-MM 為完整月份
    • YYYY-MM-DD 為依日期顯示線段比例

範例如下, 後續各階段需求都將以本範例展開圖示或補充說明

AI OCR:
- BA, 2025-10-01, 2025-11-30: Andy 0.3, Ben 0.8, Cat 0.5
- SA, --, 2026-02: Andy 0.3, Danny 0.6, Elsa 0.2
- SD, --, 2026-04: Andy 0.6, Elsa 0.2, Frank 0.2
- Dev, 2026-03, 2026-05: Andy 0.1, Elsa 0.6, Frank 0.6
- Sit, --, 2026-06: Elsa 0.3, Frank 0.3
- Uat: --, 2026-07: Elsa 0.1, Frank 0.1, Ben 0.7, Cat 0.4
Staff Portal:
- BA/SA, 2026-01, 2026-06: Andy 0.3, Monica 0.7, Amber 0.4
- SD/Dev, 2026-03, 2026-09: Andy 0.2, Amber 0.7, Kevin 0.7
- Sit/Uat, --, 2026-11: Amber 0.2, Kevin 0.2, Monica 0.5, Norman 0.5
...

表單編輯模式​

  • 提供線上互動表格以便利編輯, 欄位分別為 專案, 人力投入, 階段, 開始時間, 結束時間, 人員1, 人員2, ....`
  • UI 可快速新增專案或不同階段
  • 人力投入欄位不可編輯, 程式自動加總該階段所有投入人力

前述範例示意如下圖

專案甘特圖檢視​

  • 綜軸為專案, 橫軸為時間
  • 甘特圖顯示之開始 / 結束時間依專案實際時間自動計算, 適當調配顯示比例.
  • 若某階段開始日期為 --, 則和前一個階段畫在同一列上, 透過框線與填充顏色區分
  • 提供放大縮小, 可依月份跨距橫向縮放及縱向專案間距, 方便螢幕截圖貼到簡報

前述範例示意如下圖

人力甘特圖檢視​

  • 綜軸為人員, 橫軸為時間
  • 以人員為主對各專案不同階段的投入作 group
  • 甘特圖顯示之開始 / 結束時間依專案實際時間自動計算, 適當調配顯示比例.
  • 相同專案不同階段, 若時間不重複, 可在同一列顯示
  • 甘特圖線段顏色依該人員/階段投入百分比層現濃淡區分, onMouseOver 顯示投入之百分比

前述範例示意如下圖, 僅以 Andy 為例

其他說明​

  • UI/UX 請自行配置, 精簡清楚
  • 不同專案的甘特圖線段配色請自行配置, 配色不要過於飽和或灰淡