# Requirements Specification: OEE Overview Dashboard สำหรับจอ 55 นิ้ว **Feature:** OEE Overview 55-inch Display **Version:** 1.0 **Date:** 2025-01-XX **Status:** Draft — รอ Dev Review --- ## Introduction ฟีเจอร์นี้คือหน้า OEE Overview Dashboard ที่ออกแบบเฉพาะสำหรับจอแสดงผลขนาด 55 นิ้ว โดยมี URL แยกต่างหาก (แบบเดียวกับ Call Systems) เพื่อแสดงข้อมูล OEE ของเครื่องจักรทุกเครื่องทุก Zone ในหน้าจอเดียวโดยไม่ต้อง scroll ประกอบด้วย Gauge แสดงค่า OEE/Availability/Performance/Quality รวม และ Card Machine แยกตาม Zone พร้อม Filter สำหรับเลือกช่วงเวลา --- ## Glossary | คำศัพท์ | ความหมาย | |---------|----------| | Dashboard_55inch | หน้า Overview Dashboard สำหรับจอ 55 นิ้ว (1920x1080 / 3840x2160) เข้าถึงผ่าน URL แยก | | OEE | Overall Equipment Effectiveness = Availability × Performance × Quality | | Availability | อัตราความพร้อมใช้งาน (เวลาเดินเครื่องจริง / เวลาที่วางแผนผลิต) | | Performance | อัตราสมรรถนะ (จำนวนผลิตจริง / จำนวนที่ควรผลิตได้) | | Quality | อัตราคุณภาพ (จำนวนชิ้นงานดี / จำนวนผลิตทั้งหมด) | | Gauge | แผนภูมิวงกลมแสดงค่า % ของ OEE, A, P, Q | | Card_Machine | การ์ดแสดงข้อมูล OEE ของเครื่องจักรแต่ละเครื่อง | | Zone | กลุ่มเครื่องจักรตามพื้นที่ เช่น Die Casting, Finishing, Injection | | Up_to_Date | ช่วงเวลาตั้งแต่เวลาเริ่มต้น Shift แรกของวันปัจจุบัน (ตาม setup) ถึง เวลาปัจจุบัน | | Auto_Refresh | รีเฟรชข้อมูลอัตโนมัติ เลือกรอบได้: 5s, 15s, 30s, 1min, 3min, 5min หรือ Disable | | Only_on_Job | กรองแสดงเฉพาะเครื่องที่มี Job เปิดอยู่ | | Sidebar | แถบเมนูด้านซ้าย | | Filter_Bar | แถบตัวกรองด้านบน | --- ## Requirements ### Req 1: URL แยกสำหรับจอ 55 นิ้ว **User Story:** As a ผู้จัดการโรงงาน, I want to เข้าถึงหน้า OEE Overview ผ่าน URL แยกเฉพาะสำหรับจอ 55 นิ้ว, so that สามารถแสดงผลบนจอขนาดใหญ่ในพื้นที่โรงงานได้โดยไม่กระทบกับระบบหลัก **Acceptance Criteria:** | # | Criteria | |---|----------| | 1.1 | มี URL path แยกจากระบบ OEE หลัก (แบบเดียวกับ Call Systems) ไม่ต้องผ่านหน้า login | | 1.2 | แสดงหน้า Overview ในโหมด read-only ไม่ต้อง login ไม่มี navigation link ไปหน้าที่ต้อง auth | | 1.3 | แสดงผล full viewport ไม่มี horizontal/vertical scroll — target resolution หลักคือ 1920x1080 (4K ใช้ browser scaling) | | 1.4 | หากโหลดข้อมูลไม่ได้ → แสดงข้อความแจ้งสถานะ + layout ปกติ + ค่า OEE/A/P/Q เป็น "N/A" | --- ### Req 2: Sidebar แสดง OEE Overall พร้อม Drill-down **User Story:** As a ผู้จัดการโรงงาน, I want to เห็น sidebar ที่แสดง OEE Overall และ drill-down ลงไป Zone/Machine ได้, so that สามารถเลือกดูข้อมูลเฉพาะ Zone หรือเครื่องจักรที่สนใจได้ **Acceptance Criteria:** | # | Criteria | |---|----------| | 2.1 | แสดงเมนู "OEE Overall" เป็นเมนูหลัก สามารถ drill-down ลงไป Zone → Machine ได้เหมือนระบบเดิม | | 2.2 | ไม่แสดงเมนู "Support MC" (ตัดออก) | | 2.3 | Default เป็น collapsed (icon only) กว้างไม่เกิน 80px | | 2.4 | ตำแหน่ง fixed ด้านซ้าย ไม่ซ้อนทับพื้นที่แสดงผลหลัก | | 2.5 | เลือก Zone จาก Sidebar → Gauge + Card แสดงเฉพาะ scope ของ Zone ที่เลือก | | 2.6 | เลือก Machine จาก Sidebar → Gauge + Card แสดงเฉพาะเครื่องที่เลือก | --- ### Req 3: Filter Bar ด้านบน **User Story:** As a ผู้จัดการโรงงาน, I want to เลือกช่วงเวลาและโหมดการแสดงผลผ่าน Filter Bar, so that สามารถดูข้อมูล OEE ในช่วงเวลาที่ต้องการได้ **Acceptance Criteria:** | # | Criteria | |---|----------| | 3.1 | แสดงตัวเลือกช่วงเวลา: Up to date, Weekly, Monthly, Custom | | 3.2 | แสดงตัวเลือก Only on Job | | 3.3 | แสดงตัวเลือก Auto Refresh (เปิด/ปิด) | | 3.4 | "Up to date" → ข้อมูลตั้งแต่เวลาเริ่มต้น Shift แรกของวันปัจจุบัน (ตาม setup) ถึง เวลาปัจจุบัน | | 3.5 | "Weekly" → ข้อมูลสัปดาห์ปัจจุบัน เริ่มวันเริ่มต้นสัปดาห์ตาม codeTable (default: จันทร์) เวลา Shift แรก ถึง เวลาปัจจุบัน | | 3.6 | "Monthly" → ข้อมูลเดือนปัจจุบัน เริ่มวันที่ 1 เวลา Shift แรก ถึง เวลาปัจจุบัน | | 3.7 | "Custom" → date picker เลือก From/To เมื่อเลือกฝั่งใดฝั่งหนึ่งแล้ว disable วันที่ใน calendar ที่เกิน 3 เดือนจากวันที่เลือกไว้ | | 3.8 | กรณี edge case เลือกเกิน 3 เดือน → แจ้งเตือน + ไม่โหลดข้อมูล | | 3.9 | เปลี่ยน filter → แสดง loading indicator + อัปเดตภายใน 5 วินาที | --- ### Req 4: Default State **User Story:** As a ผู้จัดการโรงงาน, I want to เห็นหน้าจอแสดงค่า default ทันทีเมื่อเปิดหน้า, so that ไม่ต้องตั้งค่าทุกครั้งที่เปิดจอ **Acceptance Criteria:** | # | Criteria | |---|----------| | 4.1 | โหลด/refresh → ใช้ค่า default ทั้งหมดตามเดิมของหน้า Overview ที่มีอยู่แล้ว (Filter, Only_on_Job, Auto_Refresh) | | 4.2 | โหลด/refresh → แสดง OEE Overall พร้อม Gauge + Card_Machine ภายใน 5 วินาที | | 4.3 | หากโหลดก่อนเวลา Shift แรก → แสดงข้อมูลตั้งแต่เวลา Shift แรกของวันก่อนหน้า ถึง เวลาปัจจุบัน | | 4.4 | หากไม่มีข้อมูล → Gauge = 0% ทุกตัว + Card_Machine ค่า OEE/A/P/Q = 0% | --- ### Req 5: Gauge แสดงค่า OEE รวม **User Story:** As a ผู้จัดการโรงงาน, I want to เห็น Gauge แสดงค่า OEE, Availability, Performance, Quality รวมทั้งโรงงาน, so that ทราบสถานะประสิทธิภาพโดยรวมได้ทันที **Acceptance Criteria:** | # | Criteria | |---|----------| | 5.1 | แสดง Gauge 4 ตัว: Overall OEE, Availability, Performance, Quality ตามรูปแบบเดิมของ Overview | | 5.2 | แสดงค่า % พร้อม Target line + color coding (แดง/เหลือง/เขียว) ตามเดิม | | 5.3 | แต่ละ Gauge แสดงค่าแยกตาม Zone ด้านล่าง (เช่น Die Casting Zone xx%, Finishing Zone xx%) | | 5.4 | คำนวณค่ารวมจากเครื่องจักรทุกเครื่องทุก Zone ที่แสดงอยู่ | | 5.5 | เปลี่ยน Filter → อัปเดตค่าภายใน 3 วินาที | | 5.6 | ไม่มีเครื่องจักรแสดง → Gauge = 0.0% ทั้ง 4 ตัว | --- ### Req 6: Card Machine แสดงครบทุกเครื่องทุก Zone **User Story:** As a ผู้จัดการโรงงาน, I want to เห็น Card Machine ของทุกเครื่องจักรทุก Zone ในหน้าจอเดียว, so that สามารถมองเห็นสถานะเครื่องจักรทั้งหมดได้โดยไม่ต้อง scroll **Acceptance Criteria:** | # | Criteria | |---|----------| | 6.1 | แสดง Card_Machine ทุกเครื่องทุก Zone ในหน้าจอเดียว | | 6.2 | ไม่มี vertical scroll bar | | 6.3 | แต่ละ Card แสดง: ชื่อเครื่อง + สถานะ badge (Running/Standby/Not Running/Offline) + OEE/A/P/Q % ทศนิยม 1 ตำแหน่ง | | 6.4 | เครื่องไม่มีข้อมูล → แสดง "N/A" ทุกค่า | --- ### Req 7: การแยก Zone **User Story:** As a ผู้จัดการโรงงาน, I want to เห็น Card Machine จัดกลุ่มตาม Zone, so that สามารถเปรียบเทียบประสิทธิภาพระหว่าง Zone ได้ง่าย **Acceptance Criteria:** | # | Criteria | |---|----------| | 7.1 | จัดกลุ่ม Card ตาม Zone + แสดงชื่อ Zone เป็น header เรียงตามลำดับในระบบ | | 7.2 | แสดง Zone ทั้งหมดใน OEE Overall ที่มี support_mc = false | | 7.3 | Card ภายใน Zone เรียงตาม Machine Name | | 7.4 | Zone ไม่มี Card แสดง (เช่น Only_on_Job) → ซ่อน Zone header | --- ### Req 8: Auto Refresh **User Story:** As a ผู้จัดการโรงงาน, I want to ให้หน้าจอรีเฟรชข้อมูลอัตโนมัติ, so that ข้อมูลบนจอ 55 นิ้วเป็นปัจจุบันเสมอ **Acceptance Criteria:** | # | Criteria | |---|----------| | 8.1 | แสดง dropdown เลือกรอบ: 5 seconds, 15 seconds, 30 seconds, 1 minute, 3 minutes, 5 minutes, Disable auto-refresh | | 8.2 | Auto_Refresh เปิด → รีเฟรชตามรอบที่เลือก | | 8.3 | เลือก "Disable auto-refresh" → หยุดรีเฟรช + คงข้อมูลล่าสุดไว้ | | 8.4 | Default = "Refresh every 5 seconds" | | 8.5 | รีเฟรชล้มเหลว (network error / API timeout 10 วินาที) → คงข้อมูลเดิม + แจ้งเตือน + retry รอบถัดไป | | 8.6 | แสดง Last Updated timestamp บนหน้าจอ | --- ### Req 9: Only on Job Filter **User Story:** As a ผู้จัดการโรงงาน, I want to กรองแสดงเฉพาะเครื่องจักรที่กำลังทำงาน, so that โฟกัสดูเฉพาะเครื่องที่มี Job อยู่ได้ **Acceptance Criteria:** | # | Criteria | |---|----------| | 9.1 | เปิด Only_on_Job → แสดงเฉพาะ Card ที่มี Job + ซ่อน Card ที่ไม่มี Job | | 9.2 | ปิด Only_on_Job → แสดง Card ทุกเครื่องทุก Zone | | 9.3 | Only_on_Job เปิด → Gauge คำนวณเฉพาะเครื่องที่มี Job | | 9.4 | Only_on_Job เปิด + Zone ไม่มีเครื่องที่มี Job → ซ่อน Zone header | | 9.5 | Default = เปิด (แสดงเฉพาะเครื่องที่มี Job ตาม default เดิมของ Overview) | --- ### Req 10: การคำนวณค่า OEE/A/P/Q รวม **User Story:** As a ผู้จัดการโรงงาน, I want to เห็นค่า OEE/A/P/Q รวมที่คำนวณถูกต้อง, so that ใช้ข้อมูลในการตัดสินใจได้อย่างแม่นยำ **สูตรคำนวณ:** ใช้สูตรเดิมของหน้า Overview ที่มีอยู่แล้ว (ไม่เปลี่ยนแปลง logic การคำนวณ) **Acceptance Criteria:** | # | Criteria | |---|----------| | 10.1 | ใช้สูตรคำนวณ OEE/A/P/Q รวมตามเดิมของหน้า Overview ที่มีอยู่แล้ว | | 10.2 | Card แต่ละใบ = OEE/A/P/Q เฉพาะเครื่องนั้น ตามช่วงเวลาที่เลือก (ทศนิยม 2 ตำแหน่ง) | | 10.3 | ไม่มีเครื่องที่มีข้อมูล → Gauge = 0.00% + ข้อความ "ไม่มีข้อมูล" | | 10.4 | เครื่องไม่มีข้อมูลการผลิต → ไม่นำมารวมคำนวณค่ารวม | --- ### Req 11: Layout หน้าจอเดียว **User Story:** As a ผู้จัดการโรงงาน, I want to เห็นข้อมูลทั้งหมด (Gauge + Card Machine ทุก Zone) ในหน้าจอเดียว, so that ไม่ต้อง scroll หรือเปลี่ยนหน้าเพื่อดูข้อมูล **Acceptance Criteria:** | # | Criteria | |---|----------| | 11.1 | Gauge ด้านบน (≤25% viewport height) + Card แยก Zone ด้านล่าง (พื้นที่ที่เหลือ) | | 11.2 | Layout พอดี viewport จอ TV 55" (1920x1080) ไม่มี vertical scroll | | 11.3 | ขนาดตัวอักษรคงที่ (ไม่ปรับ responsive) ออกแบบให้อ่านได้ชัดบนจอ 55" | | 11.4 | แสดง Card ต่อแถวให้ได้มากที่สุดตามความเหมาะสมของ layout (เพิ่มจากเดิม 4 ใบ) โดยยังคงอ่านได้ชัดเจนบนจอ 55" | | 11.5 | แยก Zone ด้วยสี background/border ที่แตกต่างชัดเจน มองแล้วแยกออกได้ทันทีว่า Zone ไหนมี Machine อะไร | | 11.6 | Zone header แสดงจำนวนเครื่อง + สถานะสรุป (Running / Not Running / Standby / Offline) ตามเดิม | --- ## สรุปภาพรวม Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ [Sidebar] │ Filter Bar │ │ OEE │ [Up to date ▼] [Custom] [Only on Job] [Auto] │ │ Overall ├─────────────────────────────────────────────────│ │ (icon) │ [Gauge OEE] [Gauge A] [Gauge P] [Gauge Q] │ │ ├─────────────────────────────────────────────────│ │ │ DIE CASTING ZONE │ │ │ [Card1][Card2][Card3][Card4]... │ │ ├─────────────────────────────────────────────────│ │ │ FINISHING ZONE │ │ │ [Card1][Card2][Card3]... │ │ ├─────────────────────────────────────────────────│ │ │ INJECTION ZONE │ │ │ [Card1][Card2][Card3][Card4]... │ └─────────────────────────────────────────────────────────────┘ ``` --- ## หมายเหตุสำหรับ Dev - URL แยกแบบ Call Systems → ไม่ต้อง auth, read-only - ใช้ API + สูตรคำนวณ OEE/A/P/Q เดิมของหน้า Overview ทั้งหมด (ไม่เปลี่ยน logic) - Target resolution หลัก: 1920x1080 (4K ใช้ browser scaling) - Auto Refresh เป็น dropdown เลือกรอบได้: 5s / 15s / 30s / 1min / 3min / 5min / Disable (default = 5 seconds) - Card แสดง 7-8 ใบต่อแถว (เพิ่มจากเดิม 4 ใบ) ขนาดตัวอักษรคงที่ - แต่ละ Card มี status badge (Running/Standby/Not Running/Offline) ตามเดิม - แยก Zone ด้วยสี background/border ให้มองแยกออกชัดเจน - Zone กรองเฉพาะ support_mc = false - Sidebar drill-down ได้เหมือนเดิม แต่ตัด Support MC ออก - เวลาเริ่มต้นทุก filter อ้างอิง Shift แรกจาก setup - Weekly อ้างอิงวันเริ่มสัปดาห์จาก codeTable (default: จันทร์)