{loadErrBar}
{/* page heading */}
{/* ===================== DASHBOARD ===================== */}
{S.barDetail !== null && monthlyBars[S.barDetail] && (() => {
const b = monthlyBars[S.barDetail]; const prev = S.barDetail > 0 ? monthlyBars[S.barDetail - 1] : null;
const diff = prev ? b.rawVal - prev.rawVal : 0; const pct = Math.round(b.rawVal / 52000 * 100);
const ytd = months.slice(0, S.barDetail + 1).reduce((acc, m) => acc + m[1], 0);
return (
);
})()}
{/* ===================== GIS DASHBOARD ===================== */}
{/* ===================== NOZZLES ===================== */}
{/* ===================== REPORTS ===================== */}
{/* ===================== ALERTS ===================== */}
{head[0]}
{head[1]}
{head[2]}
{pageActions.map((a, i) => ())}
{warnIcon}
หัวจ่าย WM-NS-087 รายงานแรงดันต่ำ — รอการตรวจสอบ · หัวจ่าย WM-KL-034 กำหนดซ่อมบำรุง 17 มิ.ย. 2568
{kpis.map((k, i) => (
this.setState({ kpiModal: i })} style={s('background:' + (S.kpiModal === i ? 'var(--green-50)' : 'var(--surface-card)') + ';border:' + (S.kpiModal === i ? '2px solid ' + k.accent : '1px solid var(--border-subtle)') + ';border-radius:var(--radius-lg);box-shadow:' + (S.kpiModal === i ? '0 0 0 3px ' + k.accent + '22,var(--shadow-md)' : 'var(--shadow-sm)') + ';padding:' + (S.kpiModal === i ? '14px 15px' : '15px 16px') + ';position:relative;overflow:hidden;cursor:pointer;')}>
))}
{k.icon}
{k.label}
{k.value}
{k.unit}
{k.trend}
กระบวนการส่งน้ำ Vinasse Real-time pipeline
ระบบทำงานปกติ
{pipeline.map((p, i) => (
))}
{p.icon}
{p.arrow ? {arrowIcon} : null}
{p.name}
{p.sub}
{p.val}
ปริมาณน้ำส่งรายเดือน ลบ.ม.
ปีงบประมาณ 2568
รายละเอียด {b.label}
{[
['ปริมาณน้ำ', b.rawVal.toLocaleString() + ' ลบ.ม.', b.color],
['เทียบเดือนก่อน', (prev ? (diff >= 0 ? '+' : '') + diff.toLocaleString() : 'N/A') + ' ลบ.ม.', diff >= 0 ? 'var(--green-600)' : 'var(--red-500)'],
['% ของปีงบ', pct + '%', 'var(--text-strong)'],
['สะสม YTD', (ytd / 1000).toFixed(1) + 'k ลบ.ม.', 'var(--text-strong)'],
].map((r, ri) => (
))}
{r[0]}
{r[1]}
สถานะหัวจ่ายน้ำ {K.totalNozzles} หัว
{nozzleStatus.map((st, i) => (
{st.label}
{K.totalNozzles ? Math.round(st.v / K.totalNozzles * 100) : 0}%
{st.v}
))}
พื้นที่รับน้ำต่อกลุ่ม ไร่
{areaBars.map((a, i) => (
{a.code} · {a.th}
{a.rai}
))}
พืชที่ปลูก แปลง
{crops.map((c, i) => (
{c.th}
{c.plots}
))}
{/* KPI row */}
{/* ===================== MAP ===================== */}
{GIS_KPIS.map((k, i) => (
))}
{/* map + right column */}
{ic(k.icon, 17, k.accent)}
{k.label}
{k.value}
{k.unit}
{k.trend}
{/* map card */}
{/* right column */}
{/* bottom row */}
แผนที่แนวท่อโครงการและจุดแปลงเกษตรกร
อ.เมือง · จ.อุบลราชธานี
{/* legend overlay */}
))}
{/* basemap toggle */}
คำอธิบายสัญลักษณ์
{gisLegend.map((grp, gi) => (
{grp.title}
{grp.items.map((it, ii) => (
{it.kind === 'dot' ?
: it.kind === 'box' ?
: }
{it.label}
))}
{[['street', 'แผนที่'], ['satellite', 'ดาวเทียม'], ['hybrid', 'Hybrid']].map(([key, lbl]) => {
const on = S.gisBasemap === key;
return ;
})}
{/* area donut */}
{/* water status donut */}
{/* top-5 tambon */}
ภาพรวมพื้นที่
{GIS_AREA.map((a, i) => (
{a.label}
{a.rai}
{a.pct}
))}
สถานะการใช้น้ำ (แปลง)
{GIS_WATER.map((w, i) => (
{w.label}
{w.n}
{w.pct}
))}
5 อันดับ พื้นที่เพาะปลูกมากที่สุด
| 1 ? 'right' : 'left') + ';font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);')}>{h} | ))}|||
|---|---|---|---|
| {r[0]} | {r[1]} | {r[2]} | {r[3]} |
{/* crops summary */}
{/* monthly water bar chart */}
{/* today usage + gauge */}
สรุปตามชนิดพืช พื้นที่: ไร่
{GIS_CROPS.map((c, i) => (
))}
{ic(c.icon, 19, 'var(--green-600)')}
{c.th}
{c.rai}
{c.pct}
ปริมาณการใช้น้ำรายเดือน ล้าน ลบ.ม.
ข้อมูลการใช้น้ำวันนี้
{gisToday.map((t, i) => (
))}
{t[0]}
{t[1]} {t[2]}
ร้อยละแผน
{S.addMode ? (
{groupList.map((g, i) => (
))}
{/* ===================== FARMERS ===================== */}
{ic('plus', 16, 'var(--amber-status-600)')}
โหมดเพิ่มพื้นที่: คลิกตำแหน่งบนแผนที่เพื่อปักหมุดแปลงใหม่ แล้วกรอกข้อมูล
) : null}
{filterIcon}กรองกลุ่ม
{mapChips.map((c, i) => ())}
15.165°N, 105.035°E · อ.นาเยีย / สว่างวีระวงศ์
กลุ่มเกษตรกร {groups.length} กลุ่ม
{K.totalNozzles} หัวจ่าย · {totalRaiAll} ไร่
กลุ่ม {g.no} · {g.code} {g.th}
{g.company} · {g.nozzles} หัวจ่าย · {g.rai} ไร่
โรงงาน UBE (ต้นทางน้ำ)
สถานีสูบ / Buffer Tank
แนวท่อส่งน้ำหลัก / ท่อแยกกลุ่ม
footprint พื้นที่รายแปลง (ขนาดตามไร่)
คลิกแต่ละแปลงเพื่อดูรายละเอียด · กดปุ่ม “เพิ่มพื้นที่” แล้วคลิกแผนที่เพื่อเพิ่มแปลงใหม่
{farmerStats.map((st, i) => (
))}
{st.label}
{st.value}
ทะเบียนเกษตรกร {K.totalFarmers} ราย · แสดง {farmers.length}
{searchIcon}
this.setState({ search: e.target.value })} style={s('width:280px;padding:8px 12px 8px 32px;font-family:inherit;font-size:12.5px;color:var(--text-strong);background:var(--surface-card);border:1px solid var(--border-field);border-radius:var(--radius-md);outline:none;')} />
| {c.label} | ))}|||||||
|---|---|---|---|---|---|---|---|
| {f.no} | {f.name} | {f.group} | {f.village} | {f.nozzle} | {f.rai} | {f.crop} | {f.stLabel} |
{nozzleStatTiles.map((st, i) => (
))}
{st.label}
{st.value}
กลุ่ม:
{nozGroupChips.map((c, i) => ())}
สถานะ:
{nozStatusChips.map((c, i) => ())}
แสดง {cards.length} หัว
{cards.map((n, i) => (
this.setState({ nozzleDetail: n })} style={s('border:1px solid ' + n.border + ';background:' + n.bg + ';border-radius:var(--radius-md);padding:10px 11px;cursor:pointer;')}>
))}
{n.id}
{n.area} ไร่
{n.stLabel}
{reports.map((r, i) => (
))}
{r.icon}
{r.name}
{r.desc}
{r.format} {downloadIcon}
แผน vs จริง — พื้นที่รับน้ำรายไตรมาส ไร่
แผน
จริง
{alerts.map((a, i) => (
{/* ===================== SETTINGS ===================== */}
this.setState({ alertDetail: a })} style={s('display:flex;align-items:flex-start;gap:13px;background:var(--surface-card);border:1px solid var(--border-subtle);border-left:3px solid ' + a.accent + ';border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:13px 16px;cursor:pointer;')}>
{a.icon}
))}
{a.title}
{a.tag}
{a.body}
{a.time}
{isAdmin ? (
{/* ===================== USERS ===================== */}
{settingPanels.map((p, i) => (
))}
) : denied}
{p.icon}
{p.title}
{p.fields.map((f, j) => (
))}
{isAdmin ? (
<>
) : denied}
{DS.users.length} ผู้ใช้งาน
| {label} | ))}|||
|---|---|---|---|
|
{u.initial}
{u.name}
{u.email}
|
{u.roleLabel} | {u.status} |