Tab: Báo cáo (screen-baocao)
File:app.jslines 2501-2902,index.htmllines 407-496
Style: Dark theme
1. Tổng quan
Màn hình báo cáo với 5 sub-tab, dark theme. Cho phép xem theo tháng hoặc tuần.
CODE
📊 Báo cáo Thống kê 6S
Tổng quan, Pareto, Xu hướng, Khu vực, Hiệu suất
[📊 Chọn kỳ báo cáo ▼] [Tháng | Tuần] [📥 Xuất Excel]
┌─────────────────────────────────────────────────────────────┐
│ [📊 Tổng quan] [📈 Pareto S1-S6] [📉 Xu hướng] [🏢 Khu vực] [👤 Hiệu suất] │
└─────────────────────────────────────────────────────────────┘
2. Bộ lọc chung
Select kỳ báo cáo (#reportMonth)
- Mode Tháng: 12 tháng gần nhất
- Mode Tuần: 12 tuần gần nhất
- Khi đổi → tự động render lại báo cáo
Button group Tháng/Tuần
| Button | ID | Hành vi |
|---|---|---|
| Tháng | btnGroupMonth | setReportGroup('month') |
| Tuần | btnGroupWeek | setReportGroup('week') |
Nút Export Excel
exportReportExcel() → dùng thư viện XLSX → tải file BaoCao_6S_{period}.xlsx
Cấu trúc Excel:
| Mã thẻ | Loại | S-category | Vị trí | Mô tả | Khắc phục | Người treo | Người XL | Trạng thái | Ngày tạo | Hạn XL |
|---|
3. Sub-tab 1: Tổng quan (rpt-overview)
Stats Cards (4 cards)
CODE
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ Tổng thẻ │ │ Rút OK │ │ Quá hạn │ │ Rút NG │
│ 42 │ │ 28 │ │ 5 │ │ 3 │
│ │ │ 67% │ │ │ │ │
└─────────┘ └─────────┘ └─────────┘ └─────────┘
Donut Chart — Trạng thái thẻ
- Canvas
#chartDonut(360x240) - 4 segments: Rút OK (xanh), Đang xử lý (xanh dương), Quá hạn (đỏ nhạt), Rút NG (đỏ đậm)
- Tâm: % hoàn thành (số to) + "Hoàn thành"
- Legend phía dưới
Bảng thống kê (#overviewTable)
| Chỉ tiêu | Số lượng |
|---|---|
| 🟡 Thẻ Vàng | X |
| 🔴 Thẻ Đỏ | X |
| 🔧 Đang xử lý | X |
| 🚨 Quá hạn | X |
| ✅ Rút OK | X |
| ❌ Rút NG | X |
4. Sub-tab 2: Pareto S1-S6 (rpt-pareto)
Pareto Chart — Canvas #chartPareto (400x240)
Hiển thị:
- Bar chart: S1-S6 sắp xếp giảm dần, mỗi bar có gradient màu
- Line cộng dồn: Đường màu hồng
#f472b6thể hiện % tích lũy - Mỗi bar có nhãn số + % cộng dồn
Bảng dữ liệu (#reportTable)
| Phân loại | Số lượng | Tỷ lệ | Cộng dồn |
|---|---|---|---|
| S2 | 15 | 35.7% | 35.7% |
| S3 | 10 | 23.8% | 59.5% |
| ... | ... | ... | ... |
5. Sub-tab 3: Xu hướng (rpt-trend)
Trend Chart — Canvas #chartTrend (800x240)
Dữ liệu: Theo tháng (6 kỳ) hoặc tuần (12 kỳ)
- 🔵 Line Treo thẻ (xanh dương): Số thẻ tạo mới
- Điểm tròn có glow shadow
- 🟢 Line Rút thẻ (xanh lá): Số thẻ đã hoàn tất + rejected
- Điểm tròn có glow shadow
- Grid lines mờ
rgba(255,255,255,.06)
Bảng tóm tắt xu hướng (#trendSummary)
| Chỉ tiêu | Thực tế | Xu hướng |
|---|---|---|
| 🔵 Treo thẻ | 12 | 📈 +20% |
| 🟢 Rút thẻ | 8 | 📉 -10% |
| 📊 Chênh lệch | +4 | ⚠️ Tồn tăng |
6. Sub-tab 4: Khu vực (rpt-location)
Top 10 khu vực có nhiều thẻ nhất.
Bảng (#locationReport)
| # | Khu vực | Tổng | Rút OK | Rút NG | Quá hạn |
|---|---|---|---|---|---|
| 1 | Chuyền 1 | 15 | 10 | 2 | 3 |
| 2 | Chuyền 2 | 12 | 8 | 1 | 1 |
Horizontal bar chart
CODE
Chuyền 1 ████████████████████████░░ 15
Chuyền 2 ████████████████████░░░░░░ 12
VPNS ██████████░░░░░░░░░░░░░░░░ 5
7. Sub-tab 5: Hiệu suất (rpt-perf)
Báo cáo hiệu suất theo người.
Bảng (#perfReport)
| # | Người | Task | ✅ | ❌ | TB ngày | S1 | S2 | S3 | S4 | S5 | S6 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Nguyễn Văn A | 20 | 15 | 2 | 3.5 | 5 | 3 | 4 | 2 | 1 | 5 |
| 2 | Trần Văn B | 15 | 12 | 1 | 4.2 | 3 | 4 | 2 | 3 | 1 | 2 |
Horizontal bar chart theo người
CODE
Nguyễn Văn A ████████████████████████░░░░ 20
Trần Văn B ██████████████████████░░░░░░ 15
...
8. Các hàm xử lý
| Hàm | Mô tả |
|---|---|
renderReport() | Entry point: populate select + gọi tab tương ứng |
switchReportTab(tab) | Chuyển sub-tab |
setReportGroup(mode) | Đổi mode tháng/tuần |
getMonthTags() | Lọc tags theo kỳ báo cáo đã chọn |
renderOverview() | Render stats + donut + table |
renderPareto() | Render Pareto bar + line + data table |
renderTrend() | Render trend line chart + summary |
renderLocationReport() | Render top 10 locations |
renderPerfReport() | Render performance table |
getWeekNumber(d) | Tính số tuần trong năm |
exportReportExcel() | Xuất Excel |
Screenshots
Tổng quan báo cáo - Stats CardsĐường dẫn minh họa:
images/baocao/baocao-overview-stats.pngChú thích: 4 cards thống kê Tổng thẻ, Rút OK, Quá hạn, Rút NG
Donut Chart trạng thái thẻĐường dẫn minh họa:
images/baocao/baocao-donut-chart.pngChú thích: Biểu đồ tròn thể hiện tỷ lệ trạng thái thẻ
Bảng thống kê Tổng quanĐường dẫn minh họa:
images/baocao/baocao-overview-table.pngChú thích: Bảng chi tiết số lượng theo loại thẻ và trạng thái
Pareto Chart S1-S6Đường dẫn minh họa:
images/baocao/baocao-pareto.pngChú thích: Biểu đồ Pareto cột + đường cộng dồn phân loại S1-S6
Trend Chart xu hướngĐường dẫn minh họa:
images/baocao/baocao-trend-chart.pngChú thích: Biểu đồ xu hướng Treo/Rút thẻ theo tháng/tuần
Bảng tóm tắt xu hướngĐường dẫn minh họa:
images/baocao/baocao-trend-summary.pngChú thích: Bảng so sánh Treo/Rút + chỉ báo xu hướng (tăng/giảm)
Top 10 Khu vựcĐường dẫn minh họa:
images/baocao/baocao-location-top10.pngChú thích: Bảng + biểu đồ horizontal bar top 10 khu vực nhiều thẻ nhất
Hiệu suất nhân sựĐường dẫn minh họa:
images/baocao/baocao-performance.pngChú thích: Bảng hiệu suất theo người + progress bar
Bộ lọc kỳ báo cáoĐường dẫn minh họa:
images/baocao/baocao-period-filter.pngChú thích: Select kỳ báo cáo + nút Tháng/Tuần + Export Excel