Project

General

Profile

Feature #25903

[OEE] Line Layout : เพิ่มเมนู

Added by Suphawan Phiwngam about 1 month ago. Updated 6 days ago.

Status:
Closed
Priority:
Urgent
Assignee:
Suphawan Phiwngam
Start date:
03/05/2026
Due date:
% Done:

0%

Estimated time:

Description

  • Upload Photo / แสดงรูปที่ Upload ไว้เพื่อให้ระบุตำแหน่งบนรูปได้
    UPDATE ms_file SET ... WHERE table_name='line-layout-pic'
  • เพิ่มตำแหน่งของ Machine บนรูปได้
    เมื่อคลิ้กในภาพให้ขึ้นจุดสี, แสดง Popover โดยมี select Machine ที่ยังไม่ได้ระบุจุดขึ้นมาให้เลือกด้านใน และบันทึกลง ms_plot_point(เพิ่ม table)
  • กดดูรายละเอียดของ Machine ที่มีการระบุตำแหน่งบนรูปได้
    กดที่จุดเพื่อแสดงรายละเอียดของเครื่องนั้น (Ref data: Card Overview)
  • กรองการแสดงจุดบนรูปตาม Zone/Machine ที่เลือกในด้านซ้ายได้

link spec Figma: https://www.figma.com/design/X2QNIfK0Jm3UaSj5fZoya9/Spec-OEE?node-id=5078-18275&m=dev

History

#1

Updated by Suphawan Phiwngam about 1 month ago

  • Description updated (diff)
#2

Updated by Suphawan Phiwngam 20 days ago

  • Priority changed from Normal to Urgent
#3

Updated by Supparoek Sariphan 18 days ago

  • Status changed from New to In Progress

menu added

#4

Updated by Supparoek Sariphan 15 days ago

  • Status changed from In Progress to Resolved
  • Assignee changed from Supparoek Sariphan to Suphawan Phiwngam

DONE add, delete, move point
DONE change image

#5

Updated by Suphawan Phiwngam 15 days ago

  • Status changed from Resolved to Feedback
  • Assignee changed from Suphawan Phiwngam to Supparoek Sariphan
เข้าใจ concept ผิดค่ะ ที่ต้องการคือ
  • 1 โรงงานมีรูปเดียวเท่านั้น
  • ถ้าเลือก my factory ให้แสดงจุดเครื่องทั้งหมด (is_machine = true ทั้งหมด)
  • ถ้าเลือก zone,group (is_machine = false) ให้กรองแสดงจุดที่อยู่ภายใต้
  • ค่า A/P/Q % และสี status ยังแสดงไม่ถูกต้อง (ถ้า filter ตาม date แล้วค่าต้องตรงกับที่แสดงใน line summary)
  • ให้กด icon edit ของจุดนั้นๆก่อน แล้วถึงจะย้ายจุดได้ (ตอนนี้ลากจุดใหม่ ระบบจำตำแหน่งใหม่ได้ถูกต้องแล้ว)
  • ตอนกดที่รูปเพื่อ Add new ให้แสดงสีจุดตามสเปกด้วย (ตอนนี้กดแล้วขึ้น popup เลือกเครื่อง แต่ไม่มีจุดแสดงที่บอกว่ากดตรงไหนมาจนกว่าจะ save)
  • ถ้าเลือก my factory, zone - Add new list machine ไม่ขึ้นให้เลือก (ตอนนี้ขึ้น list เมื่อเลือกระดับ parent ของ is_machine = true, parent ของ parent ไม่ขึ้น)
ที่ทดสอบผ่านแล้ว ✅
  1. Add new จุดได้ (กรณี filter group ใน zone - แสดง list machine เฉพาะที่ยังไม่มีการระบุตำแหน่งได้แล้ว)
  2. ลบจุดได้
#6

Updated by Supparoek Sariphan 13 days ago

  1. สรุปการวิเคราะห์โค้ด — Line Layout (Frontend)
  1. สถานะปัจจุบัน
    Frontend ถูก implement แล้วทั้งหมดใน `oee-web/src/routes/LineLayout/` ประกอบด้วย 8 ไฟล์:

Components:
- `LineLayout.js` — หน้าหลัก: แสดง layout image, วาง marker, filter ตาม asset, แสดง OEE data
- `MachineMarker.js` — จุด marker บนรูป รองรับ drag & drop (edit mode) และ click เพื่อดูรายละเอียด
- `MachineSelectorModal.js` — Modal สำหรับเลือก machine ที่ยังไม่ได้วางจุด (เมื่อ click บนรูป)
- `MarkerPopover.js` — Popover แสดงรายละเอียดเครื่อง: ชื่อ, สถานะ (Running/Not Running/Stand By), Availability/Performance/Quality พร้อมปุ่ม Edit/Delete/Close

Utilities & Styles:
- `lineLayoutUtils.js` — Pure functions: filterPlotPoints, getStatusColor, getStatusLabel, clickToPercent, clampPercent, formatMachineName, isAllowedImageType
- `LineLayout.less`, `MachineMarker.less`, `MarkerPopover.less` — Styling

  1. ฟีเจอร์ที่ implement แล้ว (Frontend)
    1. Upload/แสดงรูป Layout — upload image ผ่าน API, แสดง blob URL, รองรับ .jpg/.jpeg/.png/.webp
    2. วางตำแหน่ง Machine บนรูป — click บนรูป → แสดง preview dot → เปิด Modal เลือก machine → บันทึกลง ms_plot_point
    3. ดูรายละเอียด Machine — click ที่ marker → Popover แสดง ชื่อเครื่อง, สถานะ, A/P/Q metrics (ดึงจาก plant-layout OEE API)
    4. กรองจุดตาม Zone/Machine — filter ตาม currentAsset จาก sidebar (machine เดียว หรือ children ทั้ง tree)
    5. ย้ายตำแหน่ง marker — กด Edit ใน popover → เข้า edit mode → drag marker ไปตำแหน่งใหม่ (optimistic update + revert on failure)
    6. ลบ marker — กด Delete ใน popover → ลบ plot point
  1. API Endpoints ที่ Frontend เรียกใช้ (ยังไม่มี Backend)
    Backend routes สำหรับ line-layout ยังไม่ได้สร้าง ใน oee-api:
    - `GET /v1/line-layout/plot-points?map_id=` — ดึง plot points ทั้งหมด
    - `GET /v1/line-layout/available-machines?map_id=&asset_id=` — ดึง machine ที่ยังไม่ได้วางจุด
    - `GET /v1/line-layout/image/:map_id` — ดึงรูป layout (response blob)
    - `POST /v1/line-layout/upload-image` — upload รูป layout (multipart/form-data, ref_id = map_id)
    - `POST /v1/line-layout/plot-points` — สร้าง plot point ใหม่ (bucket, ref_id, map_type, map_id, top, left)
    - `PUT /v1/line-layout/plot-points/:id` — อัพเดทตำแหน่ง (top, left)
    - `DELETE /v1/line-layout/plot-points/:id` — ลบ plot point
    - `GET /v1.2/oee/plant-layout?from=&to=&onlyOnJob=` — (มีอยู่แล้ว) ดึง OEE data สำหรับแสดงสถานะเครื่อง
  1. Database Tables ที่เกี่ยวข้อง
    - `ms_plot_point` — ตาราง plot point (ต้องสร้างใหม่) เก็บ: ms_plot_point_id, bucket, ref_id, map_type, map_id, top, left
    - `ms_file` — เก็บรูป layout โดยใช้ table_name='line-layout-pic'
  1. สิ่งที่ต้องทำต่อ (Backend)
    1. สร้าง table `ms_plot_point`
    2. สร้าง route module `line-layout-v1/` พร้อม handlers ทั้ง 7 endpoints
    3. ลงทะเบียน route ใน `routes/index.js`
    4. เชื่อมต่อ MinIO สำหรับ upload/download รูป layout (ผ่าน ms_file)
#7

Updated by Supparoek Sariphan 13 days ago

  • Status changed from Feedback to Resolved
  • Assignee changed from Supparoek Sariphan to Suphawan Phiwngam
#8

Updated by Suphawan Phiwngam 6 days ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF