ระบบติดตามและควบคุมการใช้น้ำ

เจ้าของผลงานเล่าไว้แบบนี้

https://mrbeer19.github.io/water-control-dashboard/ # ระบบมอนิเตอร์และควบคุมการใช้น้ำในโรงงาน แดชบอร์ดสำหรับดูระดับน้ำ ปั๊ม มิเตอร์รายโซน และการใช้น้ำแบบเรียลไทม์ เป็นงาน **AIoT capstone** — ส่วนนี้คือ **frontend อย่างเดียว** ข้อมูลทั้งหมดยังเป็น mock > **ระบบนี้ต้องรันบน VM ในโรงงานที่ไม่มีอินเทอร์เน็ต** > ฟอนต์ ไอคอน รูปภาพ และไลบรารีทุกตัวจึงถูก bundle มากับ build ทั้งหมด > ห้ามเพิ่มอะไรที่ต้องเรียก CDN, Google Fonts, map tile หรือ API ภายนอกตอนรัน --- ## เริ่มใช้งาน ```bash npm install git config core.hooksPath .githooks # เปิด hook กัน push ตรงเข้า main npm run dev # เปิด http://localhost:3000 ``` เข้าสู่ระบบด้วย **`admin` / `admin1234`** > หน้า login เป็น UI สาธิตเท่านั้น **ไม่ใช่ระบบยืนยันตัวตนจริง** > ของจริงต้องกั้นที่เซิร์ฟเวอร์ด้วย middleware ที่ตรวจ cookie ก่อนส่ง HTML ## คำสั่งที่ใช้บ่อย | คำสั่ง | ทำอะไร | |---|---| | `npm run dev` | รันโหมดพัฒนา | | `npm run build` | build สำหรับขึ้นเครื่องจริง | | `npm run lint` | ตรวจ ESLint | | `npx tsc --noEmit` | ตรวจชนิดข้อมูล | | `npm run check:colors` | ตรวจว่าสีทุกจุดมาจากบันไดสี CI (8 ข้อ) | | `npm run check:buckets` | ตรวจการตัดช่วงเวลาตามเขตเวลาไทย (8 ข้อ) | | `npm run check:series` | ตรวจว่าผลรวมรายชั่วโมง = รายวัน = รายเดือน (10 ข้อ) | **ก่อน push ทุกครั้ง** ต้องผ่านครบ: `tsc` → `lint` → `check:*` → `build` --- ## หน้าจอในระบบ | เส้นทาง | หน้า | |---|---| | `/` | ภาพรวม — ถัง ปั๊ม มิเตอร์หลัก มิเตอร์รายโซน ค่าน้ำ การแจ้งเตือนล่าสุด สภาพแวดล้อม | | `/overview` | แผนผังการไหลของน้ำทั้งระบบ | | `/ai` | ผลจากทีม AI — ความผิดปกต

โดย Mrbeer19 · ดูโพสต์ต้นทาง