feat(admin): 수거인력 패널 및 선박모니터링 패널 추가
This commit is contained in:
부모
a3b1a701e4
커밋
7a80eaf75e
@ -15,6 +15,8 @@ import LayerPanel from './LayerPanel';
|
|||||||
import SensitiveLayerPanel from './SensitiveLayerPanel';
|
import SensitiveLayerPanel from './SensitiveLayerPanel';
|
||||||
import DispersingZonePanel from './DispersingZonePanel';
|
import DispersingZonePanel from './DispersingZonePanel';
|
||||||
import MonitorRealtimePanel from './MonitorRealtimePanel';
|
import MonitorRealtimePanel from './MonitorRealtimePanel';
|
||||||
|
import MonitorVesselPanel from './MonitorVesselPanel';
|
||||||
|
import CollectHrPanel from './CollectHrPanel';
|
||||||
|
|
||||||
/** 기존 패널이 있는 메뉴 ID 매핑 */
|
/** 기존 패널이 있는 메뉴 ID 매핑 */
|
||||||
const PANEL_MAP: Record<string, () => JSX.Element> = {
|
const PANEL_MAP: Record<string, () => JSX.Element> = {
|
||||||
@ -34,6 +36,8 @@ const PANEL_MAP: Record<string, () => JSX.Element> = {
|
|||||||
'social-economy': () => <SensitiveLayerPanel categoryCode="LYR001002002" title="사회/경제" />,
|
'social-economy': () => <SensitiveLayerPanel categoryCode="LYR001002002" title="사회/경제" />,
|
||||||
'dispersant-zone': () => <DispersingZonePanel />,
|
'dispersant-zone': () => <DispersingZonePanel />,
|
||||||
'monitor-realtime': () => <MonitorRealtimePanel />,
|
'monitor-realtime': () => <MonitorRealtimePanel />,
|
||||||
|
'monitor-vessel': () => <MonitorVesselPanel />,
|
||||||
|
'collect-hr': () => <CollectHrPanel />,
|
||||||
};
|
};
|
||||||
|
|
||||||
export function AdminView() {
|
export function AdminView() {
|
||||||
|
|||||||
333
frontend/src/tabs/admin/components/CollectHrPanel.tsx
Normal file
333
frontend/src/tabs/admin/components/CollectHrPanel.tsx
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
// ─── 타입 ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface EtaClct {
|
||||||
|
startDate: string;
|
||||||
|
endDate: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResultClct {
|
||||||
|
resultDate: string;
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HrCollectItem {
|
||||||
|
id: string;
|
||||||
|
rootId: string;
|
||||||
|
ip: string;
|
||||||
|
depth1: string;
|
||||||
|
depth2: string;
|
||||||
|
depth3: string;
|
||||||
|
depth4: string | null;
|
||||||
|
clctName: string;
|
||||||
|
clctType: string;
|
||||||
|
clctTypeName: string;
|
||||||
|
trnsmtCycle: string | null;
|
||||||
|
receiveCycle: string | null;
|
||||||
|
targetTable: string;
|
||||||
|
seq: number;
|
||||||
|
estmtRqrd: string;
|
||||||
|
activeYn: string;
|
||||||
|
clctStartDt: string;
|
||||||
|
clctEndDt: string;
|
||||||
|
clctDate: string | null;
|
||||||
|
jobName: string;
|
||||||
|
resultClctList: ResultClct[];
|
||||||
|
etaClctList: EtaClct[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Mock 데이터 ────────────────────────────────────────────
|
||||||
|
|
||||||
|
// TODO: 실제 API 연동 시 fetch 호출로 교체
|
||||||
|
const MOCK_DATA: HrCollectItem[] = [
|
||||||
|
{
|
||||||
|
id: '100200',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '사용자부서',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 20 4 * * *',
|
||||||
|
targetTable: 'common.t_dept_info',
|
||||||
|
seq: 101,
|
||||||
|
estmtRqrd: '1',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-16',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: '2024-12-16',
|
||||||
|
jobName: 'DeptJob',
|
||||||
|
resultClctList: [],
|
||||||
|
etaClctList: [
|
||||||
|
{ startDate: '2025-09-12 04:20', endDate: '2025-09-12 04:21' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100200',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '사용자계정',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 20 4 * 1 *',
|
||||||
|
targetTable: 'common.t_usr',
|
||||||
|
seq: 102,
|
||||||
|
estmtRqrd: '5',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-17',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: null,
|
||||||
|
jobName: 'UserFlowJob',
|
||||||
|
resultClctList: [],
|
||||||
|
etaClctList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100201',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '사용자직위',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 30 4 * * *',
|
||||||
|
targetTable: 'common.t_position_info',
|
||||||
|
seq: 103,
|
||||||
|
estmtRqrd: '1',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-16',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: '2025-01-10',
|
||||||
|
jobName: 'PositionJob',
|
||||||
|
resultClctList: [{ resultDate: '2025-09-12 04:30', count: 42 }],
|
||||||
|
etaClctList: [
|
||||||
|
{ startDate: '2025-09-12 04:30', endDate: '2025-09-12 04:31' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100202',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '조직정보',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 40 4 * * *',
|
||||||
|
targetTable: 'common.t_org_info',
|
||||||
|
seq: 104,
|
||||||
|
estmtRqrd: '2',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-18',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: '2025-03-20',
|
||||||
|
jobName: 'OrgJob',
|
||||||
|
resultClctList: [{ resultDate: '2025-09-12 04:40', count: 15 }],
|
||||||
|
etaClctList: [
|
||||||
|
{ startDate: '2025-09-12 04:40', endDate: '2025-09-12 04:41' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100203',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '근무상태',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 0 5 * * *',
|
||||||
|
targetTable: 'common.t_work_status',
|
||||||
|
seq: 105,
|
||||||
|
estmtRqrd: '3',
|
||||||
|
activeYn: 'N',
|
||||||
|
clctStartDt: '2025-01-15',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: null,
|
||||||
|
jobName: 'WorkStatusJob',
|
||||||
|
resultClctList: [],
|
||||||
|
etaClctList: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function fetchHrCollectData(): Promise<HrCollectItem[]> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => resolve(MOCK_DATA), 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 상태 뱃지 ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
function getCollectStatus(item: HrCollectItem): { label: string; color: string } {
|
||||||
|
if (item.activeYn !== 'Y') {
|
||||||
|
return { label: '비활성', color: 'text-t3 bg-bg-2' };
|
||||||
|
}
|
||||||
|
if (item.etaClctList.length > 0) {
|
||||||
|
return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
|
||||||
|
}
|
||||||
|
return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
|
||||||
|
|
||||||
|
function formatCron(cron: string | null): string {
|
||||||
|
if (!cron) return '-';
|
||||||
|
const parts = cron.split(' ');
|
||||||
|
if (parts.length < 6) return cron;
|
||||||
|
const [sec, min, hour, , , ] = parts;
|
||||||
|
return `매일 ${hour}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 테이블 ─────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const HEADERS = ['번호', '수집항목', '기관', '시스템', '유형', '수집주기', '대상테이블', 'Job명', '활성', '수집시작일', '최근수집일', '상태'];
|
||||||
|
|
||||||
|
function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean }) {
|
||||||
|
return (
|
||||||
|
<div className="overflow-auto">
|
||||||
|
<table className="w-full text-xs border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||||
|
{HEADERS.map((h) => (
|
||||||
|
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading && rows.length === 0
|
||||||
|
? Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||||
|
{HEADERS.map((_, j) => (
|
||||||
|
<td key={j} className="px-3 py-2">
|
||||||
|
<div className="h-3 bg-bg-2 rounded w-14" />
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
: rows.map((row, idx) => {
|
||||||
|
const status = getCollectStatus(row);
|
||||||
|
return (
|
||||||
|
<tr key={`${row.seq}`} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||||
|
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
|
||||||
|
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.clctName}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth2}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth3}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.clctTypeName}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{formatCron(row.receiveCycle)}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 font-mono">{row.targetTable}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 font-mono">{row.jobName}</td>
|
||||||
|
<td className="px-3 py-2 text-center">
|
||||||
|
<span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${
|
||||||
|
row.activeYn === 'Y' ? 'text-emerald-400 bg-emerald-500/10' : 'text-t3 bg-bg-2'
|
||||||
|
}`}>
|
||||||
|
{row.activeYn === 'Y' ? 'Y' : 'N'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctStartDt}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctDate ?? '-'}</td>
|
||||||
|
<td className="px-3 py-2">
|
||||||
|
<span className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${status.color}`}>
|
||||||
|
{status.label}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 메인 패널 ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function CollectHrPanel() {
|
||||||
|
const [rows, setRows] = useState<HrCollectItem[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await fetchHrCollectData();
|
||||||
|
setRows(data);
|
||||||
|
setLoading(false);
|
||||||
|
setLastUpdate(new Date());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
if (rows.length === 0) {
|
||||||
|
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
|
||||||
|
}
|
||||||
|
return () => { isMounted = false; };
|
||||||
|
}, [rows.length, fetchData]);
|
||||||
|
|
||||||
|
const activeCount = rows.filter((r) => r.activeYn === 'Y').length;
|
||||||
|
const completedCount = rows.filter((r) => r.etaClctList.length > 0).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full overflow-hidden">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||||
|
<h2 className="text-sm font-semibold text-t1">인사정보 수집 현황</h2>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{lastUpdate && (
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={fetchData}
|
||||||
|
disabled={loading}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
새로고침
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 상태 표시줄 */}
|
||||||
|
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||||
|
수집 완료 {completedCount}건
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 테이블 */}
|
||||||
|
<div className="flex-1 overflow-auto p-5">
|
||||||
|
<HrTable rows={rows} loading={loading} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
Normal file
246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
// TODO: 실제 API 연동 시 fetch 호출로 교체
|
||||||
|
interface VesselMonitorRow {
|
||||||
|
institution: string;
|
||||||
|
institutionCode: string;
|
||||||
|
systemName: string;
|
||||||
|
linkInfo: string;
|
||||||
|
storagePlace: string;
|
||||||
|
linkMethod: string;
|
||||||
|
collectionCycle: string;
|
||||||
|
collectionCount: string;
|
||||||
|
isNormal: boolean;
|
||||||
|
lastMessageTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 기관코드 → 원천기관명 매핑 */
|
||||||
|
const INSTITUTION_NAMES: Record<string, string> = {
|
||||||
|
BS: '부산항',
|
||||||
|
BSN: '부산신항',
|
||||||
|
DH: '동해안',
|
||||||
|
DS: '대산항',
|
||||||
|
GI: '경인항',
|
||||||
|
GIC: '경인연안',
|
||||||
|
GS: '군산항',
|
||||||
|
IC: '인천항',
|
||||||
|
JDC: '진도연안',
|
||||||
|
JJ: '제주항',
|
||||||
|
MP: '목포항',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Mock 데이터 정의 (스크린샷 기반) */
|
||||||
|
const MOCK_DATA: Omit<VesselMonitorRow, 'institution'>[] = [
|
||||||
|
{ institutionCode: 'BS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '439 / 499', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'BS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 463', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'BSN', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '255 / 278', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'BSN', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 426', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'DH', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'DH', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'DS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:57' },
|
||||||
|
{ institutionCode: 'DS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:56' },
|
||||||
|
{ institutionCode: 'GI', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '120 / 136', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'GI', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 467', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'GIC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '180 / 216', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'GIC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'GS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'GS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'IC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '149 / 176', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'IC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 503', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JDC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '433 / 524', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JDC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '256 / 1619', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JJ', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '429 / 508', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JJ', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '160 / 1592', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'MP', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'MP', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Mock fetch — TODO: 실제 API 연동 시 fetch 호출로 교체 */
|
||||||
|
function fetchVesselMonitorData(): Promise<VesselMonitorRow[]> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const rows: VesselMonitorRow[] = MOCK_DATA.map((d) => ({
|
||||||
|
...d,
|
||||||
|
institution: INSTITUTION_NAMES[d.institutionCode] ?? d.institutionCode,
|
||||||
|
}));
|
||||||
|
resolve(rows);
|
||||||
|
}, 400);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 상태 뱃지 ── */
|
||||||
|
function StatusBadge({ loading, onCount, total }: { loading: boolean; onCount: number; total: number }) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-2 text-t2">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
||||||
|
조회 중...
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const offCount = total - onCount;
|
||||||
|
if (offCount === total) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
|
||||||
|
전체 OFF
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (offCount > 0) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
|
||||||
|
일부 OFF ({offCount}/{total})
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||||
|
전체 정상
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 연결상태 셀 ── */
|
||||||
|
function ConnectionBadge({ isNormal, lastMessageTime }: { isNormal: boolean; lastMessageTime: string }) {
|
||||||
|
if (isNormal) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-start gap-0.5">
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-blue-600 text-white">
|
||||||
|
ON
|
||||||
|
</span>
|
||||||
|
{lastMessageTime && (
|
||||||
|
<span className="text-[10px] text-t3">{lastMessageTime}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-start gap-0.5">
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-orange-500 text-white">
|
||||||
|
OFF
|
||||||
|
</span>
|
||||||
|
{lastMessageTime && (
|
||||||
|
<span className="text-[10px] text-t3">{lastMessageTime}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 테이블 ── */
|
||||||
|
const HEADERS = ['번호', '원천기관', '기관코드', '정보시스템명', '연계정보', '저장장소', '연계방식', '수집주기', '선박건수/신호건수', '연결상태'];
|
||||||
|
|
||||||
|
function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) {
|
||||||
|
return (
|
||||||
|
<div className="overflow-auto">
|
||||||
|
<table className="w-full text-xs border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||||
|
{HEADERS.map((h) => (
|
||||||
|
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading && rows.length === 0
|
||||||
|
? Array.from({ length: 8 }).map((_, i) => (
|
||||||
|
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||||
|
{HEADERS.map((_, j) => (
|
||||||
|
<td key={j} className="px-3 py-2">
|
||||||
|
<div className="h-3 bg-bg-2 rounded w-14" />
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
: rows.map((row, idx) => (
|
||||||
|
<tr key={`${row.institutionCode}-${row.systemName}`} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||||
|
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
|
||||||
|
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.institution}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.institutionCode}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.systemName}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.linkInfo}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.storagePlace}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.linkMethod}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.collectionCycle}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 text-center">{row.collectionCount}</td>
|
||||||
|
<td className="px-3 py-2">
|
||||||
|
<ConnectionBadge isNormal={row.isNormal} lastMessageTime={row.lastMessageTime} />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 메인 패널 ── */
|
||||||
|
export default function MonitorVesselPanel() {
|
||||||
|
const [rows, setRows] = useState<VesselMonitorRow[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await fetchVesselMonitorData();
|
||||||
|
setRows(data);
|
||||||
|
setLoading(false);
|
||||||
|
setLastUpdate(new Date());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
if (rows.length === 0) {
|
||||||
|
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
|
||||||
|
}
|
||||||
|
return () => { isMounted = false; };
|
||||||
|
}, [rows.length, fetchData]);
|
||||||
|
|
||||||
|
const onCount = rows.filter((r) => r.isNormal).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full overflow-hidden">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||||
|
<h2 className="text-sm font-semibold text-t1">선박위치정보 모니터링</h2>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{lastUpdate && (
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={fetchData}
|
||||||
|
disabled={loading}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
새로고침
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 상태 표시줄 */}
|
||||||
|
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||||
|
<StatusBadge loading={loading} onCount={onCount} total={rows.length} />
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 테이블 */}
|
||||||
|
<div className="flex-1 overflow-auto p-5">
|
||||||
|
<VesselTable rows={rows} loading={loading} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -74,7 +74,6 @@ export const ADMIN_MENU: AdminMenuItem[] = [
|
|||||||
{ id: 'monitor-realtime', label: '실시간 관측자료' },
|
{ id: 'monitor-realtime', label: '실시간 관측자료' },
|
||||||
{ id: 'monitor-forecast', label: '수치예측자료' },
|
{ id: 'monitor-forecast', label: '수치예측자료' },
|
||||||
{ id: 'monitor-vessel', label: '선박위치정보' },
|
{ id: 'monitor-vessel', label: '선박위치정보' },
|
||||||
{ id: 'monitor-hr', label: '인사' },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
불러오는 중...
Reference in New Issue
Block a user