271 lines
11 KiB
TypeScript
271 lines
11 KiB
TypeScript
|
import { VESSEL_TYPES } from "../../entities/vessel/model/meta";
|
|||
|
|
import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
|
|||
|
|
import { haversineNm } from "../../shared/lib/geo/haversineNm";
|
|||
|
|
|
|||
|
|
type Props = {
|
|||
|
|
selectedVessel: DerivedLegacyVessel | null;
|
|||
|
|
vessels: DerivedLegacyVessel[];
|
|||
|
|
fleetVessels: DerivedLegacyVessel[];
|
|||
|
|
onSelectMmsi: (mmsi: number) => void;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function RelationsPanel({ selectedVessel, vessels, fleetVessels, onSelectMmsi }: Props) {
|
|||
|
|
if (selectedVessel) {
|
|||
|
|
const v = selectedVessel;
|
|||
|
|
const meta = VESSEL_TYPES[v.shipCode];
|
|||
|
|
const ownerLabel = v.ownerCn || v.ownerRoman || v.ownerKey || "-";
|
|||
|
|
const sameOwner = v.ownerKey ? vessels.filter((v2) => v2.ownerKey === v.ownerKey && v2.mmsi !== v.mmsi) : [];
|
|||
|
|
const pair = v.pairPermitNo ? vessels.find((v2) => v2.permitNo === v.pairPermitNo) ?? null : null;
|
|||
|
|
const fcNearby = vessels.filter((fc) => fc.shipCode === "FC" && fc.mmsi !== v.mmsi && haversineNm(fc.lat, fc.lon, v.lat, v.lon) < 5);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="rel-panel">
|
|||
|
|
<div className="rel-header">
|
|||
|
|
<span style={{ fontSize: 14 }}>{meta.icon}</span>
|
|||
|
|
<span style={{ fontSize: 11, fontWeight: 800, color: meta.color }}>{v.permitNo}</span>
|
|||
|
|
<span className="rel-badge" style={{ background: `${meta.color}22`, color: meta.color }}>
|
|||
|
|
{v.shipCode}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ fontSize: 9, color: "var(--muted)", marginBottom: 6 }}>
|
|||
|
|
소유주:{" "}
|
|||
|
|
<b
|
|||
|
|
style={{
|
|||
|
|
color: "var(--text)",
|
|||
|
|
display: "inline-block",
|
|||
|
|
maxWidth: 230,
|
|||
|
|
verticalAlign: "bottom",
|
|||
|
|
whiteSpace: "nowrap",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
textOverflow: "ellipsis",
|
|||
|
|
}}
|
|||
|
|
title={ownerLabel}
|
|||
|
|
>
|
|||
|
|
{ownerLabel}
|
|||
|
|
</b>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{pair ? (
|
|||
|
|
<>
|
|||
|
|
<div style={{ fontSize: 8, fontWeight: 700, color: "var(--muted)", margin: "6px 0 3px", letterSpacing: 1 }}>
|
|||
|
|
⛓ 쌍끌이 쌍
|
|||
|
|
</div>
|
|||
|
|
{(() => {
|
|||
|
|
const dist = haversineNm(v.lat, v.lon, pair.lat, pair.lon);
|
|||
|
|
const warn = dist > 3;
|
|||
|
|
const pairMeta = VESSEL_TYPES[pair.shipCode];
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className="rel-line">
|
|||
|
|
<div className="dot" style={{ background: meta.color }} />
|
|||
|
|
<span style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }} onClick={() => onSelectMmsi(v.mmsi)}>
|
|||
|
|
{v.permitNo}
|
|||
|
|
</span>
|
|||
|
|
<div className="rel-link">{warn ? "⚠" : "⟷"}</div>
|
|||
|
|
<div className="dot" style={{ background: pairMeta.color }} />
|
|||
|
|
<span style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }} onClick={() => onSelectMmsi(pair.mmsi)}>
|
|||
|
|
{pair.permitNo}
|
|||
|
|
</span>
|
|||
|
|
<span
|
|||
|
|
className="rel-dist"
|
|||
|
|
style={{
|
|||
|
|
background: warn ? "#F59E0B22" : "#22C55E22",
|
|||
|
|
color: warn ? "#F59E0B" : "#22C55E",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{dist.toFixed(2)}NM
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: 8, color: "var(--muted)", marginLeft: 10 }}>
|
|||
|
|
정상 범위: 0.3~1.0NM | {warn ? "⚠ 이격 경고" : "✓ 정상 동기화"}
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
})()}
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{fcNearby.length && v.shipCode !== "FC" ? (
|
|||
|
|
<>
|
|||
|
|
<div style={{ fontSize: 8, fontWeight: 700, color: "var(--muted)", margin: "6px 0 3px", letterSpacing: 1 }}>
|
|||
|
|
🚛 근접 운반선
|
|||
|
|
</div>
|
|||
|
|
{fcNearby.slice(0, 6).map((fc) => {
|
|||
|
|
const dist = haversineNm(v.lat, v.lon, fc.lat, fc.lon);
|
|||
|
|
const isSameOwner = !!v.ownerKey && v.ownerKey === fc.ownerKey;
|
|||
|
|
const warn = dist < 0.5;
|
|||
|
|
return (
|
|||
|
|
<div key={fc.mmsi} className="rel-line">
|
|||
|
|
<div className="dot" style={{ background: VESSEL_TYPES.FC.color }} />
|
|||
|
|
<span style={{ fontSize: 9, fontWeight: 600, cursor: "pointer" }} onClick={() => onSelectMmsi(fc.mmsi)}>
|
|||
|
|
{fc.permitNo}
|
|||
|
|
</span>
|
|||
|
|
<span className="rel-dist" style={{ background: "#D9770622", color: "#D97706" }}>
|
|||
|
|
{dist.toFixed(1)}NM
|
|||
|
|
</span>
|
|||
|
|
{isSameOwner ? (
|
|||
|
|
<span
|
|||
|
|
style={{
|
|||
|
|
fontSize: 7,
|
|||
|
|
background: "#F59E0B22",
|
|||
|
|
color: "#F59E0B",
|
|||
|
|
padding: "1px 3px",
|
|||
|
|
borderRadius: 2,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
동일소유주
|
|||
|
|
</span>
|
|||
|
|
) : null}
|
|||
|
|
{warn ? (
|
|||
|
|
<span
|
|||
|
|
style={{
|
|||
|
|
fontSize: 7,
|
|||
|
|
background: "#EF444422",
|
|||
|
|
color: "#EF4444",
|
|||
|
|
padding: "1px 3px",
|
|||
|
|
borderRadius: 2,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
환적의심
|
|||
|
|
</span>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{sameOwner.length ? (
|
|||
|
|
<>
|
|||
|
|
<div style={{ fontSize: 8, fontWeight: 700, color: "var(--muted)", margin: "6px 0 3px", letterSpacing: 1 }}>
|
|||
|
|
🏢 동일 소유주 선단 ({sameOwner.length + 1}척)
|
|||
|
|
</div>
|
|||
|
|
{sameOwner.slice(0, 8).map((sv) => {
|
|||
|
|
const m = VESSEL_TYPES[sv.shipCode];
|
|||
|
|
return (
|
|||
|
|
<div key={sv.mmsi} className="fleet-vessel" onClick={() => onSelectMmsi(sv.mmsi)} style={{ cursor: "pointer" }}>
|
|||
|
|
<div className="dot" style={{ background: m.color }} />
|
|||
|
|
<span style={{ color: m.color, fontWeight: 600 }}>{sv.shipCode}</span> {sv.permitNo}
|
|||
|
|
<span style={{ color: "var(--muted)" }}>
|
|||
|
|
{sv.sog ?? "?"}kt {sv.state.label}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
{sameOwner.length > 8 ? <div style={{ fontSize: 8, color: "var(--muted)" }}>... +{sameOwner.length - 8}척</div> : null}
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// No vessel selected: show top fleets
|
|||
|
|
if (fleetVessels.length === 0) {
|
|||
|
|
return <div style={{ fontSize: 11, color: "var(--muted)" }}>(현재 지도에 표시중인 대상 선박이 없습니다)</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const group = new Map<string, DerivedLegacyVessel[]>();
|
|||
|
|
for (const v of fleetVessels) {
|
|||
|
|
if (!v.ownerKey) continue;
|
|||
|
|
const list = group.get(v.ownerKey);
|
|||
|
|
if (list) list.push(v);
|
|||
|
|
else group.set(v.ownerKey, [v]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const topFleets = Array.from(group.entries())
|
|||
|
|
.map(([ownerKey, vs]) => ({ ownerKey, vs }))
|
|||
|
|
.filter((x) => x.vs.length >= 3)
|
|||
|
|
.sort((a, b) => b.vs.length - a.vs.length)
|
|||
|
|
.slice(0, 5);
|
|||
|
|
|
|||
|
|
if (topFleets.length === 0) {
|
|||
|
|
return <div style={{ fontSize: 11, color: "var(--muted)" }}>(표시 중인 선단(3척 이상) 없음)</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
{topFleets.map(({ ownerKey, vs }) => {
|
|||
|
|
const displayOwner = vs.find((v) => v.ownerCn)?.ownerCn || vs.find((v) => v.ownerRoman)?.ownerRoman || ownerKey;
|
|||
|
|
const displayTitle = ownerKey && displayOwner !== ownerKey ? `${displayOwner} (${ownerKey})` : displayOwner;
|
|||
|
|
const codes: Record<string, number> = {};
|
|||
|
|
for (const v of vs) codes[v.shipCode] = (codes[v.shipCode] ?? 0) + 1;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={ownerKey} className="fleet-card">
|
|||
|
|
<div className="fleet-owner">
|
|||
|
|
🏢{" "}
|
|||
|
|
<span
|
|||
|
|
style={{
|
|||
|
|
display: "inline-block",
|
|||
|
|
maxWidth: 240,
|
|||
|
|
verticalAlign: "bottom",
|
|||
|
|
whiteSpace: "nowrap",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
textOverflow: "ellipsis",
|
|||
|
|
}}
|
|||
|
|
title={displayTitle}
|
|||
|
|
>
|
|||
|
|
{displayOwner}
|
|||
|
|
</span>{" "}
|
|||
|
|
<span style={{ fontSize: 8, color: "var(--muted)" }}>{vs.length}척</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 3 }}>
|
|||
|
|
{Object.entries(codes).map(([c, n]) => {
|
|||
|
|
const meta = VESSEL_TYPES[c as keyof typeof VESSEL_TYPES];
|
|||
|
|
return (
|
|||
|
|
<span
|
|||
|
|
key={c}
|
|||
|
|
style={{
|
|||
|
|
fontSize: 8,
|
|||
|
|
background: `${meta.color}22`,
|
|||
|
|
color: meta.color,
|
|||
|
|
padding: "1px 4px",
|
|||
|
|
borderRadius: 2,
|
|||
|
|
fontWeight: 600,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{c}×{n}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
|
|||
|
|
{vs.slice(0, 18).map((v) => {
|
|||
|
|
const m = VESSEL_TYPES[v.shipCode];
|
|||
|
|
const text = v.shipCode === "FC" ? "F" : v.shipCode === "PT" ? "M" : v.shipCode === "PT-S" ? "S" : v.shipCode[0];
|
|||
|
|
return (
|
|||
|
|
<span key={v.mmsi} style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
|
|||
|
|
<div
|
|||
|
|
onClick={() => onSelectMmsi(v.mmsi)}
|
|||
|
|
style={{
|
|||
|
|
cursor: "pointer",
|
|||
|
|
width: 16,
|
|||
|
|
height: 16,
|
|||
|
|
borderRadius: v.shipCode === "FC" ? 2 : "50%",
|
|||
|
|
background: m.color,
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
fontSize: 6,
|
|||
|
|
color: "#fff",
|
|||
|
|
border: "1px solid rgba(255,255,255,.2)",
|
|||
|
|
}}
|
|||
|
|
title={`${v.permitNo} ${v.shipCode} ${v.sog ?? "?"}kt`}
|
|||
|
|
>
|
|||
|
|
{text}
|
|||
|
|
</div>
|
|||
|
|
{v.pairPermitNo && (v.shipCode === "PT" || v.shipCode === "PT-S") ? <span style={{ fontSize: 8, color: "var(--muted)" }}>⟷</span> : null}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
{vs.length > 18 ? <span style={{ fontSize: 8, color: "var(--muted)" }}>+{vs.length - 18}</span> : null}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|