กลับหน้าแอป
คู่มือการใช้งานระบบฉบับสมบูรณ์ (Official User Manual)

ระบบติดตามสถานการณ์ รพ.

Dynamic Incident Reporting & Hospital 1-Page A4 Monitoring Engine

ระบบคลาวด์ Cloudflare Pages & D1 Database • โรงพยาบาลหนองจิก

เวอร์ชัน 2.5 (A4 One-Page Ready)

อัปเดตล่าสุด: ตุลาคม 2568

สารบัญเนื้อหา (Table of Contents)

1 บทนำและภาพรวมของระบบ 2 แถบเมนูด้านบนและปุ่มการทำงานหลัก 3 การกรอกข้อมูลและจัดวางภาพ (5 ส่วนงาน) 4 เทคนิคการจัดการภาพถ่าย 7 ช่อง และแบนเนอร์ 5 ระบบพรีวิววันเพจและการสั่งพิมพ์ A4 / PDF 6 ระบบฐานข้อมูล Cloudflare D1 & คลาวด์ซิงค์ 7 การส่งออกรายงานสรุปสำหรับ LINE (ภาพ & ข้อความ) 8 ทริกและเทคนิคระดับมือโปร (Tips & Tricks)

1. บทนำและภาพรวมของระบบ (Introduction & Overview)

ระบบติดตามสถานการณ์ รพ. ถูกพัฒนาขึ้นเพื่อสนับสนุนงานศูนย์ปฏิบัติการภาวะฉุกเฉิน (EOC) ของโรงพยาบาลและทีมปฏิบัติการภาคสนาม เช่น เหตุการณ์อุทกภัย วาตภัย โรคระบาด หรือภัยพิบัติฉุกเฉิน โดยทำหน้าที่เป็นเครื่องมือรวบรวมข้อมูลแบบ Real-time และแปลงผลการดำเนินงานให้ออกมาเป็น Infographic รายงานสถานการณ์ 1 หน้ากระดาษ A4 (A4 One-Page Report) ที่สวยงาม พร้อมนำไปเผยแพร่ พิมพ์รายงาน หรือส่งต่อในกลุ่ม LINE ผู้บริหารและหน่วยงานเครือข่ายได้ทันที

1P

One-Page A4 Precision

คำนวณและฟิกพื้นที่ให้อยู่ในหน้า A4 แผ่นเดียว 100% ไม่มีปัญหาข้อความตกหล่นหรือล้นหน้ากระดาษ

Cloudflare D1 Database

เชื่อมต่อฐานข้อมูล Serverless SQL บน Cloudflare บันทึกข้อมูลขึ้นคลาวด์อัตโนมัติ ร่วมกันได้หลายเครื่อง

LINE Ready Workflows

คลิกเดียวเพื่อคัดลอกข้อความสรุปพร้อมแชร์ หรือดาวน์โหลดรูปภาพความคมชัดสูงสำหรับส่ง LINE ทันที

2. แถบเมนูด้านบนและปุ่มการทำงานหลัก (Navigation Bar)

แถบควบคุมด้านบน (Navbar) ออกแบบให้เข้าถึงเครื่องมือสำคัญได้ในคลิกเดียว:

แบ่ง 2 จอ
โหมดมุมมอง (View Switcher): เลือกสลับระหว่าง "แบ่ง 2 จอ" (จอซ้ายพิมพ์ข้อมูล จอขวาดูผลลัพธ์สด), "ฟอร์ม & เช็กลิสต์" (โฟกัสเฉพาะการพิมพ์ข้อมูลบนจอขนาดเล็ก), หรือ "พรีวิวโปสเตอร์" (ดูโปสเตอร์แบบเต็มจอ)
🟢 Cloudflare D1
ไฟสถานะคลาวด์ (Cloud Sync Status): แสดงสถานะการเชื่อมต่อกับฐานข้อมูลคลาวด์ หากแสดงสีเขียวแปลว่าข้อมูลทุกการพิมพ์ถูกจัดเก็บขึ้น Cloudflare D1 เรียบร้อย หากไม่มีเน็ตจะสลับเป็น Local Storage ในเครื่องอัตโนมัติ
สรุป LINE
คัดลอกสรุป LINE (One-click Summary): คัดลอกข้อความสรุปสถานการณ์ ยอดผู้ป่วย และสรุป MCATT พร้อมไอคอนและจัดหน้าสวยงาม นำไปกด Paste (Ctrl+V) ส่งในกลุ่ม LINE ได้ทันที
แชร์ภาพ LINE
แชร์ภาพ LINE (PNG Image): แปลงแผ่นโปสเตอร์ A4 ทั้งแผ่นให้เป็นไฟล์ภาพ PNG ความคมชัดสูง (2x High Definition) โดยตัดปุ่มเครื่องมือแก้ไขออก พร้อมให้ดาวน์โหลดส่งต่อ
พรีวิววันเพจ
พรีวิวภาพวันเพจ (One-Page Preview Modal): เปิดหน้าต่างพรีวิวเสมือนจริงขนาดเต็มแผ่นแบบไร้ปุ่มรบกวนตา มีแถบซูมปรับขนาด 50% - 150% หรือ Auto-fit เพื่อตรวจสอบความสมบูรณ์ขั้นสุดท้ายก่อนพิมพ์
สั่งพิมพ์ A4
สั่งพิมพ์ A4 / เซฟ PDF (Print Engine): ส่งหน้าโปสเตอร์เข้าสู่ตัวจัดการพิมพ์ของเบราว์เซอร์ พร้อมระบบควบคุม CSS Print ไม่ให้มีส่วนเกินของเว็บไซต์ติดไป และฟิกขนาดพอดีหน้า A4 เสมอ
ประวัติรายงานและสำรองข้อมูล (History & Backup): บันทึกรายงานประจำวันย้อนหลัง (Snapshot), โหลดรายงานเก่ากลับมาดู, นำเข้า/ส่งออกไฟล์ JSON สำรองข้อมูล

3. การกรอกข้อมูลและการจัดวาง (5 ส่วนงานหลัก)

หน้าจอฝั่งซ้ายแบ่งเป็น Accordion 5 กลุ่มงานที่สอดคล้องกับโครงสร้างของศูนย์ EOC:

1 ข้อมูลเหตุการณ์ & สรุปสถานการณ์ (Incident Header)

  • ชื่อเหตุการณ์ / โรงพยาบาล: ค่าเริ่มต้นคือ "โรงพยาบาลหนองจิก" สามารถปรับขนาดตัวอักษรได้ตั้งแต่ 20px - 48px ด้วยปุ่ม - / +
  • วันที่รายงาน: เลือกวันที่จากปฏิทิน และระบบจะแปลงเป็นรูปแบบภาษาไทยให้อัตโนมัติ (เช่น 25 พฤศจิกายน 2568)
  • ผู้อำนวยการ / ผู้บัญชาการเหตุการณ์: ระบุชื่อและตำแหน่งเพื่อแสดงในส่วนหัว
  • ข้อความสรุปรายงานสถานการณ์: กรอกข้อความบรรยายการปฏิบัติงาน ระบบรองรับการขึ้นบรรทัดใหม่ และมีเครื่องมือปรับขนาดตัวหนังสือ (11px - 18px) รวมถึงปุ่มสลับ "ย่อหน้าบรรทัดแรก (Indent)" ให้เป็นทางการตามแบบราชการ

2 จัดการภาพกิจกรรม (7 Slots) & ตราสัญลักษณ์ & แบนเนอร์

ประกอบด้วยการเปลี่ยนตราสัญลักษณ์ รพ. (วงกลมบนขวา), แบนเนอร์เวกเตอร์การแพทย์ (กว้างเต็มพื้นที่), และภาพถ่ายภาคสนาม 7 ช่อง (Slot 1 ถึง 7) สามารถคลิกเปลี่ยนรูปหรือลากไฟล์ภาพมาวางได้ทันที

3 สถิติบริการทางการแพทย์ (กล่องสีฟ้า Sky Blue)

  • ชื่อหน่วยบริการ: เช่น จัดตั้งโรงพยาบาลหนองจิก (ภาคสนาม)
  • ผู้ป่วยนอกทั่วไป (OPD): ระบุยอดรวมผู้รับบริการ
  • อุบัติเหตุฉุกเฉิน (ER): ระบุยอดผู้รับบริการฉุกเฉิน
  • ส่งต่อรักษา (Refer): ระบุยอดส่งต่อ และชื่อโรงพยาบาลปลายทาง (เช่น โรงพยาบาลปัตตานี)
  • จ่ายยาน้ำท่วมในชุมชน: ยอดชุดยาและเวชภัณฑ์ที่ส่งมอบให้ประชาชน

4 ข้อมูลคัดกรองสุขภาพจิต MCATT (กล่องสีส้ม Golden Orange)

  • ยอดรวมผู้รับการคัดกรอง & ผู้มีภาวะเสี่ยง: ระบบจะคำนวณอัตราความเสี่ยง (%) ให้อัตโนมัติ
  • รายละเอียดการคัดกรองแต่ละจุด (Bullet points): กรอกข้อมูลจุดคัดกรองบรรทัดละ 1 ข้อความ (ระบบจะสร้างจุด Bullet จุดสีส้มเข้มและจัดเรียงให้อัตโนมัติในโปสเตอร์)
  • การช่วยเหลือด้านจิตใจ (PFA): สรุปการปฐมพยาบาลจิตใจเบื้องต้นและการให้คำปรึกษา

5 มอนิเตอร์เช็กลิสต์การส่งข้อมูล (Compliance Tracker)

ระบบตรวจสอบการส่งข้อมูล 4 หมวดงานสำคัญ (สรุปสถานการณ์, ภาพถ่าย 7 ช่อง, สถิติบริการ, ทีม MCATT) เมื่อส่งครบ 100% แถบแสดงความสำเร็จสีเขียวจะปรากฏขึ้น และระบบจะช่วยเปิดหน้าต่างพรีวิววันเพจให้โดยอัตโนมัติ

4. เทคนิคการจัดการภาพถ่าย 7 ช่อง และแบนเนอร์ (Image Manipulation)

ระบบมีเครื่องมือตกแต่งภาพระดับสูงในตัว ช่วยให้ผู้ใช้ปรับแต่งรูปภาพทุกช่องได้อย่างอิสระโดยไม่ต้องใช้ Photoshop หรือ Canva:

เครื่องมือควบคุมภาพในแต่ละช่อง (Toolbar Controls)

• ย่อ/ขยายภาพ (Zoom): ปรับได้ตั้งแต่ 50% ถึง 250% ซูมเน้นเฉพาะจุดสำคัญในภาพได้คมชัด
• เลื่อนตำแหน่ง (Pan X/Y): เลื่อนภาพขึ้น/ลง หรือซ้าย/ขวา เพื่อให้เห็นใบหน้าเจ้าหน้าที่หรือจุดกิจกรรมชัดเจน
• โหมดจัดวาง (Fit Mode):
- Cover: ขยายรูปให้เต็มกรอบพอดี (แนะนำสำหรับภาพถ่ายกิจกรรม)
- Fill: ยืดให้ยาวเต็มพื้นที่ (แนะนำสำหรับแบนเนอร์แนวยาว)
- Contain: แสดงภาพครบทั้งแผ่นแบบมีขอบ
• ลากวางภาพ (Drag & Drop): ลากไฟล์ภาพจากโฟลเดอร์ในคอมพิวเตอร์มาวางทับช่องภาพบนโปสเตอร์ได้ทันที

📐 สัดส่วนภาพที่แนะนำในการใช้งาน

ตำแหน่งภาพ อัตราส่วนที่เหมาะสม ขนาดพิกเซลที่แนะนำ (300 DPI) คำแนะนำ
แบนเนอร์เวกเตอร์ (ขวาบน) 3.5 : 1 (แนวนอนยาว) 1,500 × 420 px ปรับความสูงได้ 80px - 240px ในระบบ
ตราสัญลักษณ์ รพ. (Logo) 1 : 1 (จัตุรัส / วงกลม) 500 × 500 px ขอบเขตความสูงจะปรับตามบรรทัดข้อความสรุป
Slot 1, 2, 3 (คอลัมน์ซ้าย) 1 : 1 หรือ 4 : 5 900 × 1,000 px ภาพกิจกรรมเด่น หรือภาพแนวตั้ง
Slot 4, 5, 6, 7 (กริดขวา 2x2) 3 : 4 (แนวตั้งมาตรฐาน) 960 × 1,240 px ภาพเจ้าหน้าที่ปฏิบัติงานในชุมชน

5. ระบบพรีวิววันเพจและการสั่งพิมพ์ A4 (One-Page Preview & Print)

ระบบมีระบบช่วยพิมพ์และแสดงผลที่ออกแบบตามมาตรฐานกระดาษ A4 สากล (210 มม. × 297 มม.) อย่างเคร่งครัด

การตั้งค่าการพิมพ์ใน Google Chrome / Microsoft Edge เพื่อให้ได้ 1 แผ่นพอดี

  1. กดปุ่ม "สั่งพิมพ์ A4" บนแถบเมนู (หรือกดคีย์ลัด Ctrl + P)
  2. ปลายทาง (Destination): เลือกเครื่องพิมพ์ หรือ "บันทึกเป็น PDF (Save as PDF)"
  3. ขนาดกระดาษ (Paper size): เลือก A4
  4. การวางแนว (Layout): เลือก แนวตั้ง (Portrait)
  5. ระยะขอบ (Margins): เลือกเป็น ไม่มี (None) *สำคัญมาก เพื่อไม่ให้มีแถบขาวส่วนเกิน
  6. ตัวเลือกกราฟิกพื้นหลัง (Background graphics): ต้อง ติ๊กถูก (Checked) เสมอ เพื่อให้สีพื้นหลังและกรอบตารางพิมพ์ออกมาครบถ้วนสวยงาม
  7. ส่วนหัวและส่วนท้าย (Headers and footers): ไม่ต้องติ๊ก (Uncheck) เพื่อตัดวันที่และ URL เว็บที่หัวกระดาษออก

6. ระบบฐานข้อมูล Cloudflare D1 & คลาวด์ซิงค์ (Cloud Database)

ระบบได้รับการติดตั้งขึ้นบน Cloudflare Hosting (Cloudflare Pages) และขับเคลื่อนด้วยฐานข้อมูล Cloudflare D1 (Serverless Relational SQL) มีข้อดีต่อทีมงานดังนี้:

Real-time Cloud Sync

ทุกการแก้ไข ตัวเลขสถิติ หรือข้อความ จะถูกบันทึกขึ้นฐานข้อมูลคลาวด์ D1 อัตโนมัติ โดยไม่ต้องกดปุ่ม Save เมื่อเปิดหน้าเว็บจากอุปกรณ์อื่น ข้อมูลล่าสุดจะซิงค์ให้อัตโนมัติ

Offline-First Resilient

แม้สัญญาณอินเทอร์เน็ตในพื้นที่ประสบภัยจะขาดหาย ระบบก็ยังทำงานได้ 100% ผ่าน LocalStorage ในเครื่อง และจะส่งข้อมูลขึ้นคลาวด์ทันทีที่กลับมาต่อเน็ต

Database Snapshot History

เมื่อกด "บันทึกประวัติรายงานวันนี้" ในกล่องประวัติ ข้อมูล Snapshot จะถูกบันทึกลงในตาราง history_snapshots บน D1 ย้อนดูประวัติการปฏิบัติงานแต่ละวันได้ตลอดเวลา

JSON Backup & Restore

สามารถคลิก "ดาวน์โหลดไฟล์สำรอง (JSON)" เพื่อเก็บไว้ในฮาร์ดดิสก์ส่วนตัว และนำไฟล์นี้มากด "นำเข้าไฟล์สำรอง" เพื่อกู้คืนข้อมูลได้ในคลิกเดียว

7. การส่งออกรายงานสรุปสำหรับ LINE (LINE Workflows)

เพื่อให้การส่งต่อข้อมูลสถานการณ์ในกลุ่ม LINE ทำงานได้รวดเร็วที่สุด ระบบเตรียมไว้ 2 รูปแบบ:

รูปแบบที่ 1: ส่งเป็นรูปภาพโปสเตอร์ (แชร์ภาพ LINE PNG)

กดปุ่ม "แชร์ภาพ LINE (PNG)" ระบบจะเรนเดอร์ภาพโปสเตอร์ A4 ทั้งแผ่นออกมาเป็นไฟล์รูปภาพความละเอียดสูง สามารถส่งเข้ากลุ่มไลน์ผู้บริหารหรือโพสต์เฟซบุ๊กได้ทันที

รูปแบบที่ 2: ส่งเป็นข้อความสรุปด่วน (คัดลอกสรุป LINE)

กดปุ่ม "สรุป LINE" ข้อความสรุปจะถูกก๊อปปี้เข้า Clipboard โดยอัตโนมัติ ตัวอย่างข้อความที่จะได้:

🚨 สรุปรายงานสถานการณ์ฉุกเฉิน
โรงพยาบาลหนองจิก
ประจำวันที่ 25 พฤศจิกายน 2568
ผู้อำนวยการ/ผู้บัญชาการเหตุการณ์: นายแพทย์ อนุชิต วังทอง
----------------------------------------
📌 ผลการดำเนินงาน: จัดตั้งโรงพยาบาลหนองจิก (ภาคสนาม)
- ผู้ป่วยนอก (OPD): 22 ราย
- อุบัติเหตุฉุกเฉิน (ER): 10 ราย
- ส่งต่อรักษา (Refer): 2 ราย (ส่งต่อ โรงพยาบาลปัตตานี)
- จ่ายยาอุทกภัยในชุมชน: 200 ราย
----------------------------------------
🧠 คัดกรองสุขภาพจิต (MCATT)
- คัดกรองรวม: 291 ราย
- พบภาวะเสี่ยง: 3 ราย (1.0%)
- การดำเนินการ: เบื้องต้น ได้ทำการปฐมพยาบาลด้านจิตใจเบื้องต้น (PFA) และสุขภาพจิตศึกษา
----------------------------------------
สร้างจาก: ระบบติดตามสถานการณ์ รพ. (Cloudflare Pages)

8. ทริกและเทคนิคระดับมือโปร (Pro Tips & Tricks)

★ เทคนิค Drag & Drop ภาพจากมือถือ

เมื่อทีมภาคสนามส่งรูปเข้ามาใน LINE สามารถกด Save ภาพลงคอมพิวเตอร์ แล้วลากไฟล์ภาพนั้นมาวางทับลงบนช่อง Slot ที่ต้องการบนหน้าจอได้ทันที ระบบจะบีบอัดภาพให้อัตโนมัติในเสี้ยววินาที

★ ปุ่มเดียวจัดรูปสวย "เต็มกรอบทั้ง 7 ช่อง"

เมื่อใส่รูปครบ 7 ช่องแล้ว ให้กดปุ่ม เต็มกรอบทั้ง 7 ช่อง ที่หัวข้อจัดการภาพ ระบบจะจัดภาพทุกช่องให้เป็นโหมด Cover อัตโนมัติ ไม่ต้องคอยกดทีละรูป

★ คีย์ลัดปิด-เปิดพรีวิวรวดเร็ว

กดปุ่ม พรีวิววันเพจ เพื่อดูภาพรวมก่อนพิมพ์ และสามารถกดปุ่ม ESC บนแป้นพิมพ์เพื่อปิดหน้าต่างพรีวิวกลับมาแก้ไขต่อได้ทันที

★ การเคลียร์ค่าเริ่มต้นใหม่ในเหตุการณ์ถัดไป

เมื่อสิ้นสุดเหตุการณ์หรือต้องการเริ่มเหตุการณ์ใหม่ สามารถกดปุ่ม "รีเซ็ตข้อมูลตัวอย่าง" ที่มุมล่างสุดของฟอร์ม ระบบจะคืนค่าเริ่มต้นของโรงพยาบาลหนองจิกให้ทันที

จัดทำโดย: ทีมพัฒนาระบบเทคโนโลยีสารสนเทศ โรงพยาบาลหนองจิก ร่วมกับ Cloudflare Pages & D1

URL ใช้งานระบบ: https://nongchik-incident.pages.dev