jeonghyo.k
88eb6b121a
[예측] - OpenDrift Python API 서버 및 스크립트 추가 (prediction/opendrift/) - 시뮬레이션 상태 폴링 훅(useSimulationStatus), 로딩 오버레이 추가 - HydrParticleOverlay: deck.gl 기반 입자 궤적 시각화 레이어 - OilSpillView/LeftPanel/RightPanel: 시뮬레이션 실행·결과 표시 UI 개편 - predictionService/predictionRouter: 시뮬레이션 CRUD 및 상태 관리 API - simulation.ts: OpenDrift 연동 엔드포인트 확장 - docs/PREDICTION-GUIDE.md: 예측 기능 개발 가이드 추가 [CCTV/항공방제] - CCTV 오일 감지 GPU 추론 연동 (OilDetectionOverlay, useOilDetection) - CCTV 안전관리 감지 기능 추가 (선박 출입, 침입 감지) - oil_inference_server.py: Python GPU 추론 서버 [관리자] - 관리자 화면 고도화 (사용자/권한/게시판/선박신호 패널) - AdminSidebar, BoardMgmtPanel, VesselSignalPanel 신규 컴포넌트 [기타] - DB: 시뮬레이션 결과, 선박보험 시드(1391건), 역할 정리 마이그레이션 - 팀 워크플로우 v1.6.1 동기화 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
428 lines
15 KiB
TypeScript
Executable File
428 lines
15 KiB
TypeScript
Executable File
import { useState } from 'react'
|
|
import type { PredictionDetail, SimulationSummary } from '../services/predictionApi'
|
|
|
|
export function RightPanel({ onOpenBacktrack, onOpenRecalc, onOpenReport, detail, summary }: { onOpenBacktrack?: () => void; onOpenRecalc?: () => void; onOpenReport?: () => void; detail?: PredictionDetail | null; summary?: SimulationSummary | null }) {
|
|
const vessel = detail?.vessels?.[0]
|
|
const vessel2 = detail?.vessels?.[1]
|
|
const spill = detail?.spill
|
|
const insurance = vessel?.insuranceData as Array<{ type: string; insurer: string; value: string; currency: string }> | null
|
|
const [shipExpanded, setShipExpanded] = useState(false)
|
|
const [insuranceExpanded, setInsuranceExpanded] = useState(false)
|
|
|
|
return (
|
|
<div className="w-[300px] min-w-[300px] bg-bg-1 border-l border-border flex flex-col">
|
|
{/* Tab Header */}
|
|
<div className="flex border-b border-border">
|
|
<button className="flex-1 py-3 text-center text-xs font-semibold text-primary-cyan border-b-2 border-primary-cyan transition-all font-korean">
|
|
분석 요약
|
|
</button>
|
|
</div>
|
|
|
|
{/* Scrollable Content */}
|
|
<div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent">
|
|
|
|
{/* 표시 정보 제어 */}
|
|
<Section title="표시 정보 제어">
|
|
<div className="grid grid-cols-2 gap-x-2.5 gap-y-1">
|
|
<CheckboxLabel checked>유향/유속</CheckboxLabel>
|
|
<CheckboxLabel checked>풍향/풍속</CheckboxLabel>
|
|
<CheckboxLabel>해안부착</CheckboxLabel>
|
|
<CheckboxLabel>민감자원</CheckboxLabel>
|
|
<CheckboxLabel>시간 표시</CheckboxLabel>
|
|
<CheckboxLabel>날짜시간</CheckboxLabel>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* 오염분석 */}
|
|
<Section title="오염분석">
|
|
<button className="w-full py-2 px-3 bg-gradient-to-r from-purple-500 to-primary-cyan text-white rounded text-[10px] font-bold font-korean">
|
|
📐 다각형 분석수행
|
|
</button>
|
|
</Section>
|
|
|
|
{/* 오염 종합 상황 */}
|
|
<Section title="오염 종합 상황" badge="위험" badgeColor="red">
|
|
<div className="grid grid-cols-2 gap-0.5 text-[9px]">
|
|
<StatBox label="유출량" value={spill?.volume != null ? spill.volume.toFixed(2) : '—'} unit={spill?.unit || 'kl'} color="var(--t1)" />
|
|
<StatBox label="풍화량" value={summary ? summary.weatheredVolume.toFixed(2) : '—'} unit="m³" color="var(--orange)" />
|
|
<StatBox label="해상잔존" value={summary ? summary.remainingVolume.toFixed(2) : '—'} unit="m³" color="var(--blue)" />
|
|
<StatBox label="연안부착" value={summary ? summary.beachedVolume.toFixed(2) : '—'} unit="m³" color="var(--red)" />
|
|
<div className="col-span-2">
|
|
<StatBox label="오염해역면적" value={summary ? summary.pollutionArea.toFixed(2) : '—'} unit="km²" color="var(--cyan)" />
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* 확산 예측 요약 */}
|
|
<Section title="확산 예측 요약 (+18h)" badge="위험" badgeColor="red">
|
|
<div className="grid grid-cols-2 gap-0.5">
|
|
<PredictionCard value="4.7 km²" label="영향 면적" color="var(--red)" />
|
|
<PredictionCard value="6.2 km" label="최대 확산 거리" color="var(--orange)" />
|
|
<PredictionCard value="NE 42°" label="주 확산 방향" color="var(--cyan)" />
|
|
<PredictionCard value="0.35 m/s" label="확산 속도" color="var(--t1)" />
|
|
</div>
|
|
</Section>
|
|
|
|
{/* 유출유 풍화 상태 */}
|
|
<Section title="유출유 풍화 상태">
|
|
<div className="flex flex-col gap-[3px] text-[8px]">
|
|
<ProgressBar label="수면잔류" value={58} color="var(--blue)" />
|
|
<ProgressBar label="증발" value={22} color="var(--cyan)" />
|
|
<ProgressBar label="분산" value={12} color="var(--green)" />
|
|
<ProgressBar label="펜스차단" value={5} color="var(--boom)" />
|
|
<ProgressBar label="해안도달" value={3} color="var(--red)" />
|
|
</div>
|
|
</Section>
|
|
|
|
{/* 사고 선박 제원 */}
|
|
<CollapsibleSection
|
|
title="🚢 사고 선박 제원"
|
|
expanded={shipExpanded}
|
|
onToggle={() => setShipExpanded(!shipExpanded)}
|
|
>
|
|
<div className="space-y-2">
|
|
{/* 선박 카드 */}
|
|
<div className="flex items-center gap-2 p-2 border border-[rgba(6,182,212,0.15)] rounded-md" style={{
|
|
background: 'linear-gradient(135deg, rgba(6,182,212,0.06), rgba(168,85,247,0.04))',
|
|
}}>
|
|
<div className="w-[30px] h-[30px] rounded-md flex items-center justify-center text-[15px]" style={{
|
|
background: 'rgba(6,182,212,0.1)',
|
|
border: '1px solid rgba(6,182,212,0.2)',
|
|
}}>🚢</div>
|
|
<div className="flex-1">
|
|
<div className="text-[11px] font-bold text-text-1 font-korean">{vessel?.vesselNm || '—'}</div>
|
|
<div className="text-[8px] text-text-3 font-mono">IMO {vessel?.imoNo || '—'} · {vessel?.vesselTp || '—'}</div>
|
|
</div>
|
|
<span className="text-[7px] px-2 py-0.5 rounded bg-[rgba(239,68,68,0.12)] text-status-red font-bold">사고</span>
|
|
</div>
|
|
|
|
{/* 제원 */}
|
|
<div className="grid grid-cols-3 gap-1">
|
|
<SpecCard value={vessel?.loaM?.toFixed(1) || '—'} label="전장 LOA(m)" color="var(--purple)" />
|
|
<SpecCard value={vessel?.breadthM?.toFixed(1) || '—'} label="형폭 B(m)" color="var(--cyan)" />
|
|
<SpecCard value={vessel?.draftM?.toFixed(1) || '—'} label="흘수 d(m)" color="var(--green)" />
|
|
</div>
|
|
|
|
<div className="space-y-0.5 text-[9px] font-korean">
|
|
<InfoRow label="총톤수(GT)" value={vessel?.gt ? `${vessel.gt.toLocaleString()}톤` : '—'} />
|
|
<InfoRow label="재화중량(DWT)" value={vessel?.dwt ? `${vessel.dwt.toLocaleString()}톤` : '—'} />
|
|
<InfoRow label="건조" value={vessel?.builtYr ? `${vessel.builtYr}` : '—'} />
|
|
<InfoRow label="주기관" value={vessel?.engineDc || '—'} mono />
|
|
<InfoRow label="선적" value={vessel?.flagCd || '—'} />
|
|
<InfoRow label="호출부호" value={vessel?.callsign || '—'} mono />
|
|
</div>
|
|
|
|
{/* 충돌 상대 */}
|
|
{vessel2 && (
|
|
<div className="p-1.5 bg-[rgba(249,115,22,0.04)] border border-[rgba(249,115,22,0.12)] rounded">
|
|
<div className="text-[8px] font-bold text-status-orange font-korean mb-1">⚠ 충돌 상대: {vessel2.vesselNm}</div>
|
|
<div className="text-[8px] text-text-3 font-korean leading-relaxed">
|
|
{vessel2.flagCd} {vessel2.vesselTp} {vessel2.gt ? `${vessel2.gt.toLocaleString()}GT` : ''}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* 선주 / 보험 */}
|
|
<CollapsibleSection
|
|
title="🏢 선주 / 보험"
|
|
expanded={insuranceExpanded}
|
|
onToggle={() => setInsuranceExpanded(!insuranceExpanded)}
|
|
>
|
|
<div className="space-y-2">
|
|
{insurance && insurance.length > 0 ? (
|
|
<>
|
|
{insurance.filter(ins => ins.type === 'P&I').map((ins, i) => (
|
|
<InsuranceCard key={`pi-${i}`} title="🚢 P&I" color="cyan" items={[
|
|
{ label: '보험사', value: ins.insurer },
|
|
{ label: '한도', value: `${ins.currency} ${ins.value}`, mono: true },
|
|
]} />
|
|
))}
|
|
{insurance.filter(ins => ins.type === 'H&M').map((ins, i) => (
|
|
<InsuranceCard key={`hm-${i}`} title="🚢 선체보험 (H&M)" color="cyan" items={[
|
|
{ label: '보험사', value: ins.insurer },
|
|
{ label: '보험가액', value: `${ins.currency} ${ins.value}`, mono: true },
|
|
]} />
|
|
))}
|
|
{insurance.filter(ins => ins.type === 'CLC').map((ins, i) => (
|
|
<InsuranceCard key={`clc-${i}`} title="🛢 유류오염배상 (CLC)" color="red" items={[
|
|
{ label: '발급기관', value: ins.insurer },
|
|
{ label: 'CLC 한도', value: `${ins.currency} ${ins.value}`, mono: true },
|
|
]} />
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="text-[9px] text-text-3 font-korean text-center py-4">보험 정보가 없습니다.</div>
|
|
)}
|
|
</div>
|
|
</CollapsibleSection>
|
|
</div>
|
|
|
|
{/* Bottom Action Buttons */}
|
|
<div className="flex gap-1.5 p-3 border-t border-border">
|
|
<button className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-boom to-[#d97706] text-black font-korean">
|
|
💾 저장
|
|
</button>
|
|
<button
|
|
onClick={onOpenRecalc}
|
|
className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-[rgba(249,115,22,0.1)] border border-[rgba(249,115,22,0.3)] text-status-orange font-korean"
|
|
>
|
|
🔄 재계산
|
|
</button>
|
|
<button
|
|
onClick={onOpenReport}
|
|
className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-primary-cyan to-primary-blue text-white font-korean"
|
|
>
|
|
📄 보고서
|
|
</button>
|
|
<button
|
|
onClick={onOpenBacktrack}
|
|
className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-[rgba(168,85,247,0.1)] border border-[rgba(168,85,247,0.3)] text-purple-500 font-korean"
|
|
>
|
|
🔍 역추적
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Helper Components
|
|
function Section({
|
|
title,
|
|
badge,
|
|
badgeColor,
|
|
children
|
|
}: {
|
|
title: string
|
|
badge?: string
|
|
badgeColor?: 'red' | 'green'
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<div className="bg-bg-3 border border-border rounded-md p-3.5 mb-2.5">
|
|
<div className="flex items-center justify-between mb-2.5">
|
|
<h4 className="text-xs font-semibold text-text-2 font-korean">{title}</h4>
|
|
{badge && (
|
|
<span
|
|
className={`text-[10px] font-semibold px-2 py-1 rounded-full ${
|
|
badgeColor === 'red'
|
|
? 'bg-[rgba(239,68,68,0.15)] text-status-red'
|
|
: 'bg-[rgba(34,197,94,0.15)] text-status-green'
|
|
}`}
|
|
>
|
|
{badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CheckboxLabel({ checked, children }: { checked?: boolean; children: string }) {
|
|
return (
|
|
<label className="flex items-center gap-1.5 text-[10px] text-text-2 font-korean cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
defaultChecked={checked}
|
|
className="w-[13px] h-[13px]"
|
|
className="accent-[var(--cyan)]"
|
|
/>
|
|
{children}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function StatBox({
|
|
label,
|
|
value,
|
|
unit,
|
|
color
|
|
}: {
|
|
label: string
|
|
value: string
|
|
unit: string
|
|
color: string
|
|
}) {
|
|
return (
|
|
<div className="flex justify-between px-2 py-1 bg-bg-0 border border-border rounded-[3px]">
|
|
<span className="text-text-3 font-korean">
|
|
{label}
|
|
</span>
|
|
<span style={{ fontWeight: 700, color, fontFamily: 'var(--fM)' }}>
|
|
{value} <small className="font-normal text-text-3">{unit}</small>
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function PredictionCard({ value, label, color }: { value: string; label: string; color: string }) {
|
|
return (
|
|
<div className="text-center py-[5px] px-1 bg-bg-0 border border-border rounded-[3px]">
|
|
<div
|
|
style={{ color }}
|
|
className="text-xs font-extrabold font-mono"
|
|
>
|
|
{value}
|
|
</div>
|
|
<div className="text-[7px] text-text-3 font-korean">
|
|
{label}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ProgressBar({ label, value, color }: { label: string; value: number; color: string }) {
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-text-3 font-korean" style={{ minWidth: '38px' }}>
|
|
{label}
|
|
</span>
|
|
<div
|
|
className="flex-1 h-[5px] overflow-hidden rounded-[3px]"
|
|
style={{ background: 'rgba(255,255,255,0.05)' }}
|
|
>
|
|
<div
|
|
style={{ height: '100%', width: `${value}%`, background: color, borderRadius: '3px' }}
|
|
/>
|
|
</div>
|
|
<span
|
|
style={{ color, minWidth: '28px' }}
|
|
className="font-semibold text-right font-mono"
|
|
>
|
|
{value}%
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CollapsibleSection({
|
|
title,
|
|
expanded,
|
|
onToggle,
|
|
children
|
|
}: {
|
|
title: string
|
|
expanded: boolean
|
|
onToggle: () => void
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<div className="bg-bg-3 border border-border rounded-md p-3.5 mb-2.5">
|
|
<div
|
|
className="flex items-center justify-between cursor-pointer mb-2"
|
|
onClick={onToggle}
|
|
>
|
|
<h4 className="text-xs font-semibold text-text-2 font-korean">{title}</h4>
|
|
<span className="text-[10px] text-text-3">{expanded ? '▾' : '▸'}</span>
|
|
</div>
|
|
{expanded && children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SpecCard({ value, label, color }: { value: string; label: string; color: string }) {
|
|
return (
|
|
<div className="text-center py-[6px] px-0.5 bg-bg-0 border border-border rounded-md">
|
|
<div
|
|
style={{ color }}
|
|
className="text-xs font-extrabold font-mono"
|
|
>
|
|
{value}
|
|
</div>
|
|
<div className="text-[7px] text-text-3 font-korean">
|
|
{label}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InfoRow({
|
|
label,
|
|
value,
|
|
mono,
|
|
valueColor
|
|
}: {
|
|
label: string
|
|
value: string
|
|
mono?: boolean
|
|
valueColor?: string
|
|
}) {
|
|
return (
|
|
<div className="flex justify-between py-[3px] px-[6px] bg-bg-0 rounded-[3px]">
|
|
<span className="text-text-3">{label}</span>
|
|
<span
|
|
style={{ color: valueColor || 'var(--t1)' }}
|
|
className={`font-semibold${mono ? ' font-mono' : ''}`}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InsuranceCard({
|
|
title,
|
|
color,
|
|
items
|
|
}: {
|
|
title: string
|
|
color: 'cyan' | 'purple' | 'red'
|
|
items: Array<{ label: string; value: string; mono?: boolean; valueColor?: string }>
|
|
}) {
|
|
const colorMap = {
|
|
cyan: {
|
|
border: 'rgba(6,182,212,0.15)',
|
|
bg: 'rgba(6,182,212,0.02)',
|
|
text: 'var(--cyan)'
|
|
},
|
|
purple: {
|
|
border: 'rgba(168,85,247,0.15)',
|
|
bg: 'rgba(168,85,247,0.02)',
|
|
text: 'var(--purple)'
|
|
},
|
|
red: {
|
|
border: 'rgba(239,68,68,0.15)',
|
|
bg: 'rgba(239,68,68,0.02)',
|
|
text: 'var(--red)'
|
|
}
|
|
}
|
|
|
|
const colors = colorMap[color]
|
|
|
|
return (
|
|
<div
|
|
className="rounded-md"
|
|
style={{
|
|
padding: '6px 8px',
|
|
border: `1px solid ${colors.border}`,
|
|
background: colors.bg
|
|
}}
|
|
>
|
|
<div
|
|
style={{ color: colors.text }}
|
|
className="text-[8px] font-bold font-korean mb-1"
|
|
>
|
|
{title}
|
|
</div>
|
|
<div className="space-y-0.5 text-[8px] font-korean">
|
|
{items.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex justify-between py-0.5 px-1"
|
|
>
|
|
<span className="text-text-3">{item.label}</span>
|
|
<span
|
|
style={{ color: item.valueColor || 'var(--t1)' }}
|
|
className={`font-semibold${item.mono ? ' font-mono' : ''}`}
|
|
>
|
|
{item.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|