613 lines
37 KiB
TypeScript
613 lines
37 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import {
|
|
createEmptyReport,
|
|
} from './OilSpillReportTemplate';
|
|
import { consumeReportGenCategory, consumeHnsReportPayload, type HnsReportPayload, consumeOilReportPayload, type OilReportPayload } from '@common/hooks/useSubMenu';
|
|
import { saveReport } from '../services/reportsApi';
|
|
import {
|
|
CATEGORIES,
|
|
sampleOilData,
|
|
sampleHnsData,
|
|
sampleRescueData,
|
|
type ReportCategory,
|
|
type ReportSection,
|
|
} from './reportTypes';
|
|
import { exportAsPDF } from './reportUtils';
|
|
|
|
interface ReportGeneratorProps {
|
|
onSave: () => void;
|
|
}
|
|
|
|
function ReportGenerator({ onSave }: ReportGeneratorProps) {
|
|
const [activeCat, setActiveCat] = useState<ReportCategory>(() => {
|
|
const hint = consumeReportGenCategory()
|
|
return (hint === 0 || hint === 1 || hint === 2) ? hint : 0
|
|
})
|
|
const [selectedTemplate, setSelectedTemplate] = useState(0)
|
|
const [sectionsMap, setSectionsMap] = useState<Record<number, ReportSection[]>>(() => ({
|
|
0: CATEGORIES[0].sections.map(s => ({ ...s })),
|
|
1: CATEGORIES[1].sections.map(s => ({ ...s })),
|
|
2: CATEGORIES[2].sections.map(s => ({ ...s })),
|
|
}))
|
|
|
|
// HNS 실 데이터 (없으면 sampleHnsData fallback)
|
|
const [hnsPayload, setHnsPayload] = useState<HnsReportPayload | null>(null)
|
|
// OIL 실 데이터 (없으면 sampleOilData fallback)
|
|
const [oilPayload, setOilPayload] = useState<OilReportPayload | null>(null)
|
|
|
|
// 외부에서 카테고리 힌트가 변경되면 반영
|
|
useEffect(() => {
|
|
const hint = consumeReportGenCategory()
|
|
if (hint === 0 || hint === 1 || hint === 2) {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
setActiveCat(hint)
|
|
setSelectedTemplate(0)
|
|
}
|
|
// HNS 데이터 소비
|
|
const payload = consumeHnsReportPayload()
|
|
if (payload) setHnsPayload(payload)
|
|
// OIL 예측 데이터 소비
|
|
const oilData = consumeOilReportPayload()
|
|
if (oilData) setOilPayload(oilData)
|
|
}, [])
|
|
|
|
const cat = CATEGORIES[activeCat]
|
|
const sections = sectionsMap[activeCat]
|
|
const activeSections = sections.filter(s => s.checked)
|
|
|
|
const toggleSection = (id: string) => {
|
|
setSectionsMap(prev => ({
|
|
...prev,
|
|
[activeCat]: prev[activeCat].map(s => s.id === id ? { ...s, checked: !s.checked } : s),
|
|
}))
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
const report = createEmptyReport()
|
|
report.reportType = activeCat === 0 ? '예측보고서' : activeCat === 1 ? '종합보고서' : '초기보고서'
|
|
report.analysisCategory = activeCat === 0 ? '유출유 확산예측' : activeCat === 1 ? 'HNS 대기확산' : '긴급구난'
|
|
report.title = cat.reportName
|
|
report.status = '완료'
|
|
report.author = '시스템 자동생성'
|
|
if (activeCat === 0) {
|
|
if (oilPayload) {
|
|
report.incident.name = oilPayload.incident.name;
|
|
report.incident.occurTime = oilPayload.incident.occurTime;
|
|
report.incident.location = oilPayload.incident.location;
|
|
report.incident.lat = String(oilPayload.incident.lat ?? '');
|
|
report.incident.lon = String(oilPayload.incident.lon ?? '');
|
|
report.incident.shipName = oilPayload.incident.shipName;
|
|
report.incident.pollutant = oilPayload.pollution.oilType;
|
|
report.incident.spillAmount = oilPayload.pollution.spillAmount;
|
|
} else {
|
|
report.incident.pollutant = sampleOilData.pollution.oilType;
|
|
report.incident.spillAmount = sampleOilData.pollution.spillAmount;
|
|
}
|
|
}
|
|
try {
|
|
await saveReport(report)
|
|
onSave()
|
|
} catch (err) {
|
|
console.error('[reports] 저장 오류:', err)
|
|
alert('보고서 저장 중 오류가 발생했습니다.')
|
|
}
|
|
}
|
|
|
|
const handleDownload = () => {
|
|
const secColor = cat.color === 'var(--cyan)' ? '#06b6d4' : cat.color === 'var(--orange)' ? '#f97316' : '#ef4444';
|
|
const sectionHTML = activeSections.map(sec => {
|
|
let content = `<p style="font-size:12px;color:#666;">${sec.desc}</p>`;
|
|
|
|
// OIL 섹션에 실 데이터 삽입
|
|
if (activeCat === 0 && oilPayload) {
|
|
if (sec.id === 'oil-pollution') {
|
|
const rows = [
|
|
['유출량', oilPayload.pollution.spillAmount, '풍화량', oilPayload.pollution.weathered],
|
|
['해상잔유량', oilPayload.pollution.seaRemain, '오염해역면적', oilPayload.pollution.pollutionArea],
|
|
['연안부착량', oilPayload.pollution.coastAttach, '오염해안길이', oilPayload.pollution.coastLength],
|
|
];
|
|
const simBanner = !oilPayload.hasSimulation
|
|
? '<p style="font-size:10px;color:#f97316;margin-bottom:8px;">시뮬레이션이 실행되지 않아 오염량은 입력값 기준으로 표시됩니다.</p>'
|
|
: '';
|
|
const trs = rows.map(r =>
|
|
`<tr><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">${r[0]}</td><td style="padding:6px 8px;border:1px solid #ddd;font-weight:bold;text-align:right;">${r[1]}</td><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">${r[2]}</td><td style="padding:6px 8px;border:1px solid #ddd;font-weight:bold;text-align:right;">${r[3]}</td></tr>`
|
|
).join('');
|
|
content = `${simBanner}<table style="width:100%;border-collapse:collapse;font-size:12px;">${trs}</table>`;
|
|
}
|
|
}
|
|
|
|
// HNS 섹션에 실 데이터 삽입
|
|
if (activeCat === 1 && hnsPayload) {
|
|
if (sec.id === 'hns-atm') {
|
|
const mapImg = hnsPayload.mapImageDataUrl
|
|
? `<img src="${hnsPayload.mapImageDataUrl}" style="width:100%;max-height:300px;object-fit:contain;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;" />`
|
|
: '<div style="height:100px;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;margin-bottom:12px;">[대기확산 예측 지도]</div>';
|
|
content = `${mapImg}<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>${hnsPayload.atm.model}</b><br/>${hnsPayload.atm.maxDistance}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>최대 농도</b><br/>${hnsPayload.maxConcentration}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>AEGL-1 면적</b><br/>${hnsPayload.aeglAreas.aegl1}</td></tr></table>`;
|
|
} else if (sec.id === 'hns-hazard') {
|
|
content = `<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:8px;border:1px solid #ddd;text-align:center;color:#ef4444;"><b>AEGL-3</b><br/>${hnsPayload.hazard.aegl3} (${hnsPayload.aeglAreas.aegl3})</td><td style="padding:8px;border:1px solid #ddd;text-align:center;color:#f97316;"><b>AEGL-2</b><br/>${hnsPayload.hazard.aegl2} (${hnsPayload.aeglAreas.aegl2})</td><td style="padding:8px;border:1px solid #ddd;text-align:center;color:#eab308;"><b>AEGL-1</b><br/>${hnsPayload.hazard.aegl1} (${hnsPayload.aeglAreas.aegl1})</td></tr></table>`;
|
|
} else if (sec.id === 'hns-substance') {
|
|
content = `<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">물질명</td><td style="padding:6px 8px;border:1px solid #ddd;font-weight:bold;">${hnsPayload.substance.name}</td></tr><tr><td style="padding:6px 8px;border:1px solid #ddd;color:#888;">독성기준</td><td style="padding:6px 8px;border:1px solid #ddd;color:#ef4444;font-weight:bold;">${hnsPayload.substance.toxicity}</td></tr></table>`;
|
|
} else if (sec.id === 'hns-weather') {
|
|
content = `<table style="width:100%;border-collapse:collapse;font-size:12px;"><tr><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>풍향</b><br/>${hnsPayload.weather.windDir}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>풍속</b><br/>${hnsPayload.weather.windSpeed}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>안정도</b><br/>${hnsPayload.weather.stability}</td><td style="padding:8px;border:1px solid #ddd;text-align:center;"><b>기온</b><br/>${hnsPayload.weather.temperature}</td></tr></table>`;
|
|
}
|
|
}
|
|
|
|
return `<h3 style="color:${secColor};font-size:14px;margin:20px 0 8px;">${sec.icon} ${sec.title}</h3>${content}`;
|
|
}).join('')
|
|
const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>${cat.reportName}</title><style>@page{size:A4;margin:20mm}body{font-family:'맑은 고딕',sans-serif;color:#1a1a1a;max-width:800px;margin:0 auto;padding:40px}table{margin:8px 0}</style></head><body><div style="text-align:center;margin-bottom:30px"><h1 style="font-size:20px;margin:0">해양환경 위기대응 통합지원시스템</h1><h2 style="font-size:16px;color:#0891b2;margin:8px 0">${cat.reportName}</h2></div>${sectionHTML}</body></html>`
|
|
exportAsPDF(html, cat.reportName)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full w-full">
|
|
{/* Header */}
|
|
<div className="px-6 py-4 border-b border-border bg-bg-1">
|
|
<h2 className="text-[16px] font-bold text-text-1 font-korean">보고서 생성</h2>
|
|
<p className="text-[11px] text-text-3 font-korean mt-1">보고서 유형을 선택하고 포함할 섹션을 구성하여 보고서를 생성합니다.</p>
|
|
|
|
{/* 3 카테고리 카드 */}
|
|
<div className="flex gap-3.5 mt-4">
|
|
{CATEGORIES.map((c, i) => {
|
|
const isActive = activeCat === i
|
|
return (
|
|
<button
|
|
key={i}
|
|
onClick={() => { setActiveCat(i as ReportCategory); setSelectedTemplate(0) }}
|
|
className="flex-1 px-4 py-3.5 rounded-[10px] cursor-pointer text-center transition-[0.2s]"
|
|
style={{
|
|
border: `1px solid ${isActive ? c.borderColor : 'var(--bd)'}`,
|
|
background: isActive ? c.bgActive : 'var(--bg3)',
|
|
}}
|
|
>
|
|
<div className="text-[22px] mb-1">{c.icon}</div>
|
|
<div className="text-[12px] font-bold" style={{ color: isActive ? c.color : 'var(--t3)' }}>
|
|
{c.label}
|
|
</div>
|
|
<div className="text-[9px] text-text-3 mt-0.5">
|
|
{c.desc}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* Left Sidebar - Template + Sections */}
|
|
<div className="w-[250px] min-w-[250px] border-r border-border bg-bg-1 flex flex-col overflow-y-auto shrink-0">
|
|
{/* 템플릿 선택 */}
|
|
<div className="px-4 py-3 border-b border-border">
|
|
<h3 className="text-[11px] font-bold text-text-2 font-korean flex items-center gap-2">📄 보고서 템플릿</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5 px-3 py-2 border-b border-border">
|
|
{cat.templates.map((tmpl, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setSelectedTemplate(i)}
|
|
className="flex items-center gap-2 px-3 py-2.5 rounded-lg transition-all text-left"
|
|
style={{
|
|
border: `1px solid ${selectedTemplate === i ? cat.borderColor : 'var(--bd)'}`,
|
|
background: selectedTemplate === i ? cat.bgActive : 'var(--bg2)',
|
|
}}
|
|
>
|
|
<span className="text-[14px]">{tmpl.icon}</span>
|
|
<span className="text-[11px] font-semibold" style={{ color: selectedTemplate === i ? cat.color : 'var(--t2)' }}>
|
|
{tmpl.label}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 섹션 체크 */}
|
|
<div className="px-4 py-3 border-b border-border">
|
|
<h3 className="text-[11px] font-bold text-text-2 font-korean flex items-center gap-2">📋 포함 섹션</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-1.5 p-3">
|
|
{sections.map(sec => (
|
|
<button
|
|
key={sec.id}
|
|
onClick={() => toggleSection(sec.id)}
|
|
className="flex items-start gap-2.5 p-2.5 rounded-lg border transition-all text-left"
|
|
style={{
|
|
borderColor: sec.checked ? cat.borderColor : 'var(--bd)',
|
|
background: sec.checked ? cat.bgActive : 'var(--bg2)',
|
|
opacity: sec.checked ? 1 : 0.55,
|
|
}}
|
|
>
|
|
<div
|
|
className="w-[18px] h-[18px] rounded shrink-0 mt-[1px] flex items-center justify-center text-[10px]"
|
|
style={{
|
|
background: sec.checked ? cat.color : 'var(--bg3)',
|
|
color: sec.checked ? '#fff' : 'transparent',
|
|
border: sec.checked ? 'none' : '1px solid var(--bd)',
|
|
}}
|
|
>
|
|
✓
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-[12px]">{sec.icon}</span>
|
|
<span className="text-[11px] font-bold" style={{ color: sec.checked ? 'var(--t1)' : 'var(--t3)' }}>
|
|
{sec.title}
|
|
</span>
|
|
</div>
|
|
<p className="text-[9px] text-text-3 mt-0.5">
|
|
{sec.desc}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right - Report Preview */}
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* Preview Header */}
|
|
<div className="flex items-center justify-between px-6 py-3 border-b border-border bg-bg-1">
|
|
<h3 className="text-[13px] font-bold text-text-1 font-korean flex items-center gap-2">
|
|
📄 보고서 미리보기
|
|
<span className="text-[10px] font-semibold px-2 py-0.5 rounded" style={{ background: cat.bgActive, color: cat.color }}>
|
|
{cat.templates[selectedTemplate].label}
|
|
</span>
|
|
</h3>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleDownload}
|
|
className="px-3 py-1.5 text-[11px] font-semibold rounded transition-all font-korean flex items-center gap-1.5"
|
|
style={{ background: cat.bgActive, border: `1px solid ${cat.borderColor}`, color: cat.color }}
|
|
>
|
|
📥 다운로드
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
className="px-3 py-1.5 text-[11px] font-semibold rounded border border-border bg-bg-2 text-text-1 hover:bg-bg-hover transition-all font-korean flex items-center gap-1.5"
|
|
>
|
|
💾 저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preview Content */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-5">
|
|
{/* Report Header */}
|
|
<div className="rounded-lg border border-border p-8 mb-6 bg-bg-2">
|
|
<div className="text-center">
|
|
<p className="text-[10px] text-text-3 font-korean mb-2">해양환경 위기대응 통합지원시스템</p>
|
|
<h2 className="text-[20px] font-bold text-text-1 font-korean mb-2">{cat.reportName}</h2>
|
|
<p className="text-[12px] font-korean" style={{ color: cat.color }}>{cat.templates[selectedTemplate].label}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dynamic Sections */}
|
|
{activeSections.map(sec => (
|
|
<div key={sec.id} className="rounded-lg border border-border mb-4 overflow-hidden bg-bg-2">
|
|
<div className="px-5 py-3 border-b border-border">
|
|
<h4 className="text-[13px] font-bold text-text-1 font-korean flex items-center gap-2">
|
|
{sec.icon} {sec.title}
|
|
</h4>
|
|
</div>
|
|
<div className="p-5">
|
|
{/* ── 유출유 확산예측 섹션들 ── */}
|
|
{sec.id === 'oil-spread' && (
|
|
<>
|
|
<div className="w-full h-[140px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean mb-4">
|
|
[확산예측 지도 - 범위 조절 작업]
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{[
|
|
{ label: 'KOSPS', value: oilPayload?.spread.kosps || sampleOilData.spread.kosps, color: '#06b6d4' },
|
|
{ label: 'OpenDrift', value: oilPayload?.spread.openDrift || sampleOilData.spread.openDrift, color: '#ef4444' },
|
|
{ label: 'POSEIDON', value: oilPayload?.spread.poseidon || sampleOilData.spread.poseidon, color: '#f97316' },
|
|
].map((m, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
|
|
<p className="text-[10px] text-text-3 font-korean mb-1">{m.label}</p>
|
|
<p className="text-[20px] font-bold font-mono" style={{ color: m.color }}>{m.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
{sec.id === 'oil-pollution' && (
|
|
<>
|
|
{oilPayload && !oilPayload.hasSimulation && (
|
|
<div className="mb-3 px-3 py-2 rounded text-[10px] font-korean" style={{ background: 'rgba(249,115,22,0.08)', border: '1px solid rgba(249,115,22,0.3)', color: '#f97316' }}>
|
|
시뮬레이션이 실행되지 않아 오염량은 입력값 기준으로 표시됩니다.
|
|
</div>
|
|
)}
|
|
<table className="w-full table-fixed border-collapse">
|
|
<colgroup><col style={{ width: '25%' }} /><col style={{ width: '25%' }} /><col style={{ width: '25%' }} /><col style={{ width: '25%' }} /></colgroup>
|
|
<tbody>
|
|
{[
|
|
['유출량', oilPayload?.pollution.spillAmount || sampleOilData.pollution.spillAmount, '풍화량', oilPayload?.pollution.weathered || sampleOilData.pollution.weathered],
|
|
['해상잔유량', oilPayload?.pollution.seaRemain || sampleOilData.pollution.seaRemain, '오염해역면적', oilPayload?.pollution.pollutionArea || sampleOilData.pollution.pollutionArea],
|
|
['연안부착량', oilPayload?.pollution.coastAttach || sampleOilData.pollution.coastAttach, '오염해안길이', oilPayload?.pollution.coastLength || sampleOilData.pollution.coastLength],
|
|
].map((row, i) => (
|
|
<tr key={i} className="border-b border-border">
|
|
<td className="px-4 py-3 text-[11px] text-text-3 font-korean bg-[rgba(255,255,255,0.02)]">{row[0]}</td>
|
|
<td className="px-4 py-3 text-[12px] text-text-1 font-mono font-semibold text-right">{row[1]}</td>
|
|
<td className="px-4 py-3 text-[11px] text-text-3 font-korean bg-[rgba(255,255,255,0.02)]">{row[2]}</td>
|
|
<td className="px-4 py-3 text-[12px] text-text-1 font-mono font-semibold text-right">{row[3]}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
)}
|
|
{sec.id === 'oil-sensitive' && (
|
|
<>
|
|
<p className="text-[11px] text-text-3 font-korean mb-3">반경 10 NM 기준</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{sampleOilData.sensitive.map((item, i) => (
|
|
<span key={i} className="px-3 py-1.5 text-[11px] font-semibold rounded-md bg-bg-3 border border-border text-text-2 font-korean">{item.label}</span>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
{sec.id === 'oil-coastal' && (
|
|
<p className="text-[12px] text-text-2 font-korean">
|
|
최초 부착시간: <span className="font-semibold text-text-1">{oilPayload?.coastal?.firstTime ?? sampleOilData.coastal.firstTime}</span>
|
|
{' / '}
|
|
부착 해안길이: <span className="font-semibold text-text-1">{oilPayload?.pollution.coastLength || sampleOilData.coastal.coastLength}</span>
|
|
</p>
|
|
)}
|
|
{sec.id === 'oil-defense' && (
|
|
<div className="text-[12px] text-text-3 font-korean">
|
|
<p className="mb-2">방제자원 배치 계획에 따른 전략을 수립합니다.</p>
|
|
<div className="w-full h-[100px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean">
|
|
[방제자원 배치 지도]
|
|
</div>
|
|
</div>
|
|
)}
|
|
{sec.id === 'oil-tide' && (
|
|
<>
|
|
<p className="text-[12px] text-text-2 font-korean">
|
|
고조: <span className="font-semibold text-text-1">{sampleOilData.tide.highTide1}</span>
|
|
{' / '}저조: <span className="font-semibold text-text-1">{sampleOilData.tide.lowTide}</span>
|
|
{' / '}고조: <span className="font-semibold text-text-1">{sampleOilData.tide.highTide2}</span>
|
|
</p>
|
|
{oilPayload?.weather && (
|
|
<p className="text-[11px] text-text-3 font-korean mt-2">
|
|
기상: 풍향/풍속 <span className="text-text-2 font-semibold">{oilPayload.weather.windDir}</span>
|
|
{' / '}파고 <span className="text-text-2 font-semibold">{oilPayload.weather.waveHeight}</span>
|
|
{' / '}기온 <span className="text-text-2 font-semibold">{oilPayload.weather.temp}</span>
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* ── HNS 대기확산 섹션들 ── */}
|
|
{sec.id === 'hns-atm' && (
|
|
<>
|
|
{hnsPayload?.mapImageDataUrl ? (
|
|
<img
|
|
src={hnsPayload.mapImageDataUrl}
|
|
alt="대기확산 예측 지도"
|
|
className="w-full h-auto rounded-lg border border-border mb-4"
|
|
style={{ maxHeight: '300px', objectFit: 'contain' }}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-[140px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean mb-4">
|
|
[대기확산 예측 지도]
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{[
|
|
{ label: hnsPayload?.atm.model || 'ALOHA', value: hnsPayload?.atm.maxDistance || sampleHnsData.atm.aloha, color: '#f97316', desc: '최대 확산거리' },
|
|
{ label: '최대 농도', value: hnsPayload?.maxConcentration || '—', color: '#ef4444', desc: '지상 1.5m 기준' },
|
|
{ label: 'AEGL-1 면적', value: hnsPayload?.aeglAreas.aegl1 || '—', color: '#06b6d4', desc: '확산 영향 면적' },
|
|
].map((m, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
|
|
<p className="text-[10px] text-text-3 font-korean mb-1">{m.label}</p>
|
|
<p className="text-[20px] font-bold font-mono" style={{ color: m.color }}>{m.value}</p>
|
|
<p className="text-[8px] text-text-3 font-korean mt-1">{m.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
{sec.id === 'hns-hazard' && (
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{[
|
|
{ label: 'AEGL-3 구역', value: hnsPayload?.hazard.aegl3 || sampleHnsData.hazard.erpg3, area: hnsPayload?.aeglAreas.aegl3, color: '#ef4444', desc: '생명 위협' },
|
|
{ label: 'AEGL-2 구역', value: hnsPayload?.hazard.aegl2 || sampleHnsData.hazard.erpg2, area: hnsPayload?.aeglAreas.aegl2, color: '#f97316', desc: '건강 피해' },
|
|
{ label: 'AEGL-1 구역', value: hnsPayload?.hazard.aegl1 || sampleHnsData.hazard.evacuation, area: hnsPayload?.aeglAreas.aegl1, color: '#eab308', desc: '불쾌감' },
|
|
].map((h, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
|
|
<p className="text-[9px] font-bold font-korean mb-1" style={{ color: h.color }}>{h.label}</p>
|
|
<p className="text-[18px] font-bold font-mono" style={{ color: h.color }}>{h.value}</p>
|
|
{h.area && <p className="text-[10px] text-text-3 font-mono mt-0.5">{h.area}</p>}
|
|
<p className="text-[8px] text-text-3 font-korean mt-1">{h.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'hns-substance' && (
|
|
<div className="grid grid-cols-2 gap-2 text-[11px]">
|
|
{[
|
|
{ k: '물질명', v: hnsPayload?.substance.name || sampleHnsData.substance.name },
|
|
{ k: 'UN번호', v: hnsPayload?.substance.un || sampleHnsData.substance.un },
|
|
{ k: 'CAS번호', v: hnsPayload?.substance.cas || sampleHnsData.substance.cas },
|
|
{ k: '위험등급', v: hnsPayload?.substance.class || sampleHnsData.substance.class },
|
|
].map((r, i) => (
|
|
<div key={i} className="flex justify-between px-3 py-2 bg-bg-1 rounded border border-border">
|
|
<span className="text-text-3 font-korean">{r.k}</span>
|
|
<span className="text-text-1 font-semibold font-mono">{r.v}</span>
|
|
</div>
|
|
))}
|
|
<div className="col-span-2 flex justify-between px-3 py-2 bg-bg-1 rounded border border-[rgba(239,68,68,0.3)]">
|
|
<span className="text-text-3 font-korean">독성기준</span>
|
|
<span className="text-[var(--red)] font-semibold font-mono text-[10px]">{hnsPayload?.substance.toxicity || sampleHnsData.substance.toxicity}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{sec.id === 'hns-ppe' && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{sampleHnsData.ppe.map((item, i) => (
|
|
<span key={i} className="px-3 py-1.5 text-[11px] font-semibold rounded-md border text-text-2 font-korean" style={{ background: 'rgba(249,115,22,0.06)', borderColor: 'rgba(249,115,22,0.2)' }}>
|
|
🛡 {item}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'hns-facility' && (
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{[
|
|
{ label: '인근 학교', value: `${sampleHnsData.facility.schools}개소`, icon: '🏫' },
|
|
{ label: '의료시설', value: `${sampleHnsData.facility.hospitals}개소`, icon: '🏥' },
|
|
{ label: '주변 인구', value: sampleHnsData.facility.population, icon: '👥' },
|
|
].map((f, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
|
|
<div className="text-[18px] mb-1">{f.icon}</div>
|
|
<p className="text-[14px] font-bold text-text-1 font-mono">{f.value}</p>
|
|
<p className="text-[9px] text-text-3 font-korean mt-1">{f.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'hns-3d' && (
|
|
<div className="w-full h-[160px] bg-bg-3 border border-border rounded-lg flex items-center justify-center text-text-3 text-[12px] font-korean">
|
|
[3D 농도 분포 시각화]
|
|
</div>
|
|
)}
|
|
{sec.id === 'hns-weather' && (
|
|
<div className="grid grid-cols-4 gap-3">
|
|
{[
|
|
{ label: '풍향', value: hnsPayload?.weather.windDir || 'NE 42°', icon: '🌬' },
|
|
{ label: '풍속', value: hnsPayload?.weather.windSpeed || '5.2 m/s', icon: '💨' },
|
|
{ label: '대기안정도', value: hnsPayload?.weather.stability || 'D (중립)', icon: '🌡' },
|
|
{ label: '기온', value: hnsPayload?.weather.temperature || '8.5°C', icon: '☀️' },
|
|
].map((w, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-3 text-center">
|
|
<div className="text-[16px] mb-0.5">{w.icon}</div>
|
|
<p className="text-[13px] font-bold text-text-1 font-mono">{w.value}</p>
|
|
<p className="text-[8px] text-text-3 font-korean mt-1">{w.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── 긴급구난 섹션들 ── */}
|
|
{sec.id === 'rescue-safety' && (
|
|
<div className="grid grid-cols-4 gap-3">
|
|
{[
|
|
{ label: 'GM (복원력)', value: sampleRescueData.safety.gm, color: '#f97316' },
|
|
{ label: '경사각 (Heel)', value: sampleRescueData.safety.heel, color: '#ef4444' },
|
|
{ label: '트림 (Trim)', value: sampleRescueData.safety.trim, color: '#06b6d4' },
|
|
{ label: '안전 상태', value: sampleRescueData.safety.status, color: '#f97316' },
|
|
].map((s, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-3 text-center">
|
|
<p className="text-[9px] text-text-3 font-korean mb-1">{s.label}</p>
|
|
<p className="text-[16px] font-bold font-mono" style={{ color: s.color }}>{s.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'rescue-timeline' && (
|
|
<div className="flex flex-col gap-2">
|
|
{[
|
|
{ time: '06:28', event: '충돌 발생 — ORIENTAL GLORY ↔ HAI FENG 168', color: '#ef4444' },
|
|
{ time: '06:30', event: 'No.1P 탱크 파공, 벙커C유 유출 개시', color: '#f97316' },
|
|
{ time: '06:35', event: 'VHF Ch.16 조난통신, 해경 출동 요청', color: '#eab308' },
|
|
{ time: '07:15', event: '해경 3009함 현장 도착, 방제 개시', color: '#06b6d4' },
|
|
].map((e, i) => (
|
|
<div key={i} className="flex items-center gap-3 px-3 py-2 bg-bg-1 rounded border border-border">
|
|
<span className="font-mono text-[11px] font-bold min-w-[40px]" style={{ color: e.color }}>{e.time}</span>
|
|
<span className="text-[11px] text-text-2 font-korean">{e.event}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'rescue-casualty' && (
|
|
<div className="grid grid-cols-4 gap-3">
|
|
{[
|
|
{ label: '총원', value: sampleRescueData.casualty.total },
|
|
{ label: '구조완료', value: sampleRescueData.casualty.rescued, color: '#22c55e' },
|
|
{ label: '실종', value: sampleRescueData.casualty.missing, color: '#ef4444' },
|
|
{ label: '부상', value: sampleRescueData.casualty.injured, color: '#f97316' },
|
|
].map((c, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
|
|
<p className="text-[9px] text-text-3 font-korean mb-1">{c.label}</p>
|
|
<p className="text-[24px] font-bold font-mono" style={{ color: c.color }}>{c.value}</p>
|
|
<p className="text-[8px] text-text-3 font-korean mt-0.5">명</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'rescue-resource' && (
|
|
<table className="w-full text-[11px] border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-border">
|
|
<th className="px-3 py-2 text-left text-text-3 font-korean">유형</th>
|
|
<th className="px-3 py-2 text-left text-text-3 font-korean">선박/장비명</th>
|
|
<th className="px-3 py-2 text-center text-text-3 font-korean">도착예정</th>
|
|
<th className="px-3 py-2 text-center text-text-3 font-korean">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sampleRescueData.resources.map((r, i) => (
|
|
<tr key={i} className="border-b border-border">
|
|
<td className="px-3 py-2 text-text-2 font-korean">{r.type}</td>
|
|
<td className="px-3 py-2 text-text-1 font-mono font-semibold">{r.name}</td>
|
|
<td className="px-3 py-2 text-text-2 text-center font-mono">{r.eta}</td>
|
|
<td className="px-3 py-2 text-center">
|
|
<span className="px-2 py-0.5 rounded text-[10px] font-semibold font-korean" style={{
|
|
background: r.status === '투입중' ? 'rgba(34,197,94,0.15)' : r.status === '이동중' ? 'rgba(249,115,22,0.15)' : 'rgba(138,150,168,0.15)',
|
|
color: r.status === '투입중' ? '#22c55e' : r.status === '이동중' ? '#f97316' : '#8a96a8',
|
|
}}>
|
|
{r.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
{sec.id === 'rescue-grounding' && (
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{[
|
|
{ label: '좌초 위험도', value: sampleRescueData.grounding.risk, color: '#ef4444' },
|
|
{ label: '최근 천해', value: sampleRescueData.grounding.nearestShallow, color: '#f97316' },
|
|
{ label: '현재 수심', value: sampleRescueData.grounding.depth, color: '#06b6d4' },
|
|
].map((g, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-4 text-center">
|
|
<p className="text-[9px] text-text-3 font-korean mb-1">{g.label}</p>
|
|
<p className="text-[14px] font-bold font-mono" style={{ color: g.color }}>{g.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{sec.id === 'rescue-weather' && (
|
|
<div className="grid grid-cols-4 gap-3">
|
|
{[
|
|
{ label: '파고', value: '1.5 m', icon: '🌊' },
|
|
{ label: '풍속', value: '5.2 m/s', icon: '🌬' },
|
|
{ label: '조류', value: '1.2 kts NE', icon: '🌀' },
|
|
{ label: '시정', value: '8 km', icon: '👁' },
|
|
].map((w, i) => (
|
|
<div key={i} className="bg-bg-1 border border-border rounded-lg p-3 text-center">
|
|
<div className="text-[16px] mb-0.5">{w.icon}</div>
|
|
<p className="text-[13px] font-bold text-text-1 font-mono">{w.value}</p>
|
|
<p className="text-[8px] text-text-3 font-korean mt-1">{w.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{activeSections.length === 0 && (
|
|
<div className="flex flex-col items-center justify-center py-20 text-text-3">
|
|
<div className="text-4xl mb-4">📋</div>
|
|
<p className="text-sm font-korean">왼쪽에서 보고서에 포함할 섹션을 선택하세요</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ReportGenerator;
|