365 lines
21 KiB
HTML
365 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Project Master Overseas 관리자</title>
|
|
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
|
<link rel="stylesheet" href="style/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="topbar">
|
|
<div class="topbar-header">
|
|
<h2>Project Master Overseas</h2>
|
|
</div>
|
|
<ul class="nav-list">
|
|
<li class="nav-item active">대시보드</li>
|
|
<li class="nav-item">문의사항 <span class="badge" style="background:#FFFFFF;color:var(--primary-color); border-radius:10px; font-weight: bold; padding: 2px 5px;">12</span></li>
|
|
<li class="nav-item">로그관리</li>
|
|
<li class="nav-item">파일관리</li>
|
|
<li class="nav-item">인원관리</li>
|
|
<li class="nav-item">공지사항</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
<header>
|
|
<div style="display:flex; align-items:center;">
|
|
<h1>대시보드 현황</h1>
|
|
</div>
|
|
<div style="display:flex; align-items:center;">
|
|
<button id="syncBtn" class="sync-btn" onclick="syncData()">
|
|
<span class="spinner"></span>
|
|
데이터 동기화 (크롤링)
|
|
</button>
|
|
<div class="admin-info">접속자: <strong>이태훈[전체관리자]</strong></div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 실시간 로그 콘솔 추가 -->
|
|
<div id="logConsole" style="display:none; background:#000; color:#0f0; font-family:monospace; padding:15px; margin-bottom:20px; border-radius:4px; max-height:200px; overflow-y:auto; font-size:12px; line-height:1.5;">
|
|
<div style="color:#fff; border-bottom:1px solid #333; margin-bottom:10px; padding-bottom:5px; font-weight:bold;">실시간 수집 로그 [PM Overseas]</div>
|
|
<div id="logBody"></div>
|
|
</div>
|
|
|
|
<div id="projectAccordion">
|
|
<!-- Multi-level Accordion items will be generated here -->
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const rawData = [
|
|
["라오스 ITTC 관개 교육센터 PMC", "수자원1부", "방노성", "2026.01.29, 폴더 삭제", 16],
|
|
["라오스 비엔티안 메콩강 관리 2차 DD", "수자원1부", "방노성", "2025.12.07, 파일업로드", 260],
|
|
["미얀마 만달레이 철도 개량 감리 CS", "철도사업부", "김태헌", "2025.11.17, 폴더이름변경", 298],
|
|
["베트남 푸옥호아 양수 발전 FS", "수력부", "이철호", "2026.02.23, 폴더이름변경", 139],
|
|
["사우디아라비아 아시르 지잔 고속도로 FS", "도로부", "공태원", "2026.02.09, 파일다운로드", 73],
|
|
["우즈베키스탄 타슈켄트 철도 FS", "철도사업부", "김태헌", "2026.02.05, 파일업로드", 51],
|
|
["우즈베키스탄 지방 도로 복원 MP", "도로부", "장진영", "X", 0],
|
|
["이라크 Habbaniyah Shuaiba AirBase PD", "도로부", "강동구", "X", 0],
|
|
["캄보디아 반테 민체이 관개 홍수저감 MP", "수자원1부", "이대주", "2025.12.07, 파일업로드", 44],
|
|
["캄보디아 시엠립 하수처리 개선 DD", "물환경사업1부", "변역근", "2026.02.06, AI 요약", 221],
|
|
["메콩유역 수자원 관리 기후적응 MP", "수자원1부", "정귀한", "X", 0],
|
|
["키르기스스탄 잘랄아바드 상수도 계획 MP", "물환경사업1부", "변기상", "2026.02.12, 파일업로드", 60],
|
|
["파키스탄 CAREC 도로 감리 DD", "도로부", "황효섭", "X", 0],
|
|
["파키스탄 펀잡 홍수 방재 PMC", "수자원1부", "방노성", "2025.12.08, 폴더삭제", 0],
|
|
["파키스탄 KP 아보타바드 상수도 PMC", "물환경사업2부", "변기상", "2026.02.12, 파일업로드", 234],
|
|
["필리핀 홍수 관리 Package5B MP", "수자원1부", "이희철", "2025.12.02, 폴더이름변경", 14],
|
|
["필리핀 PGN 해상교량 BID2 IDC", "구조부", "이상희", "2026.02.11, 파일다운로드", 631],
|
|
["필리핀 홍수 복원 InFRA2 DD", "수자원1부", "이대주", "2025.12.01, 폴더삭제", 6],
|
|
["가나 테치만 상수도 확장 DS", "물환경사업2부", "-", "X", 0],
|
|
["기니 벼 재배단지 PMC", "수자원1부", "이대주", "2025.12.08, 파일업로드", 43],
|
|
["우간다 벼 재배단지 PMC", "수자원1부", "방노성", "2025.12.08, 파일업로드", 52],
|
|
["우간다 부수쿠마 분뇨 자원화 2단계 PMC", "물환경사업2부", "변기상", "2026.02.05, 파일업로드", 9],
|
|
["에티오피아 지하수 관개 환경설계 DD", "물환경사업2부", "변기상", "X", 0],
|
|
["에티오피아 도도타군 관개 PMC", "수자원1부", "방노성", "2025.12.01, 폴더이름변경", 144],
|
|
["에티오피아 Adeaa-Becho 지하수 관개 MP", "수자원1부", "방노성", "2025.11.21, 파일업로드", 146],
|
|
["탄자니아 Iringa 상하수도 개선 CS", "물환경사업1부", "백운영", "2026.02.03, 폴더 생성", 0],
|
|
["탄자니아 Dodoma 하수 설계감리 DD", "물환경사업2부", "변기상", "2026.02.04, 폴더삭제", 32],
|
|
["탄자니아 잔지바르 쌀 생산 PMC", "수자원1부", "방노성", "2025.12.08, 파일 업로드", 23],
|
|
["탄자니아 도도마 유수율 상수도개선 PMC", "물환경사업1부", "박순석", "2026.02.12, 부관리자권한추가", 35],
|
|
["아르헨티나 SALDEORO 수력발전 28MW DD", "플랜트1부", "양정모", "X", 0],
|
|
["온두라스 LaPaz Danli 상수도 CS", "물환경사업2부", "-", "2026.01.29, 파일 삭제", 60],
|
|
["볼리비아 에스꼬마 차라짜니 도로 CS", "도로부", "전홍찬", "2026.02.06, 파일업로드", 1],
|
|
["볼리비아 마모레 교량도로 FS", "도로부", "황효섭", "2026.02.06, 파일업로드", 120],
|
|
["볼리비아 Bombeo-Colomi 도로설계 DD", "도로부", "황효섭", "2025.12.05, 파일삭제", 48],
|
|
["콜롬비아 AI 폐기물 FS", "플랜트1부", "서재희", "X", 0],
|
|
["파라과이 도로 통행료 현대화 MP", "교통계획부", "오제훈", "X", 0],
|
|
["페루 Barranca 상하수도 확장 DD", "물환경사업2부", "변기상", "2025.11.14, 파일업로드", 44],
|
|
["엘살바도르 태평양 철도 FS", "철도사업부", "김태헌", "2026.02.04, 파일이름변경", 102],
|
|
["필리핀 사무소", "해외사업부", "한형남", "2026.02.23, 파일업로드", 813]
|
|
];
|
|
|
|
const continentMap = {
|
|
"라오스": "아시아", "미얀마": "아시아", "베트남": "아시아", "사우디아라비아": "아시아",
|
|
"우즈베키스탄": "아시아", "이라크": "아시아", "캄보디아": "아시아",
|
|
"키르기스스탄": "아시아", "파키스탄": "아시아", "필리핀": "아시아",
|
|
"아르헨티나": "아메리카", "온두라스": "아메리카", "볼리비아": "아메리카", "콜롬비아": "아메리카",
|
|
"파라과이": "아메리카", "페루": "아메리카", "엘살바도르": "아메리카",
|
|
"가나": "아프리카", "기니": "아프리카", "우간다": "아프리카", "에티오피아": "아프리카", "탄자니아": "아프리카"
|
|
};
|
|
|
|
const continentOrder = {
|
|
"아시아": 1,
|
|
"아프리카": 2,
|
|
"아메리카": 3,
|
|
"지사": 4
|
|
};
|
|
|
|
function init() {
|
|
const container = document.getElementById('projectAccordion');
|
|
const groupedData = {};
|
|
|
|
// 1. 데이터 파싱 및 그룹화
|
|
rawData.forEach((item, index) => {
|
|
const projectName = item[0];
|
|
let continent = "";
|
|
let country = "";
|
|
|
|
if (projectName.endsWith("사무소")) {
|
|
continent = "지사";
|
|
country = projectName.split(" ")[0];
|
|
} else if (projectName.startsWith("메콩유역")) {
|
|
country = "캄보디아";
|
|
continent = "아시아";
|
|
} else {
|
|
country = projectName.split(" ")[0];
|
|
continent = continentMap[country] || "기타";
|
|
}
|
|
|
|
if (!groupedData[continent]) groupedData[continent] = {};
|
|
if (!groupedData[continent][country]) groupedData[continent][country] = [];
|
|
|
|
groupedData[continent][country].push({ item, index });
|
|
});
|
|
|
|
// 2. 대륙 정렬 (아시아 - 아프리카 - 아메리카 - 지사)
|
|
const sortedContinents = Object.keys(groupedData).sort((a, b) => (continentOrder[a] || 99) - (continentOrder[b] || 99));
|
|
|
|
// 3. HTML 생성
|
|
sortedContinents.forEach(continent => {
|
|
const continentGroup = document.createElement('div');
|
|
continentGroup.className = 'continent-group';
|
|
|
|
let continentHtml = `
|
|
<div class="continent-header" onclick="toggleGroup(this)">
|
|
<span>${continent}</span>
|
|
<span class="toggle-icon">▼</span>
|
|
</div>
|
|
<div class="continent-body">
|
|
`;
|
|
|
|
const sortedCountries = Object.keys(groupedData[continent]).sort((a, b) => a.localeCompare(b));
|
|
|
|
sortedCountries.forEach(country => {
|
|
continentHtml += `
|
|
<div class="country-group">
|
|
<div class="country-header" onclick="toggleGroup(this)">
|
|
<span>${country}</span>
|
|
<span class="toggle-icon">▼</span>
|
|
</div>
|
|
<div class="country-body">
|
|
<div class="accordion-container">
|
|
`;
|
|
|
|
const sortedProjects = groupedData[continent][country].sort((a, b) => a.item[0].localeCompare(b.item[0]));
|
|
|
|
sortedProjects.forEach(({item, index}) => {
|
|
const projectName = item[0];
|
|
const dept = item[1];
|
|
const admin = item[2];
|
|
const recentLogRaw = item[3];
|
|
const fileCount = item[4];
|
|
const personnelCount = Math.floor(Math.random()*15)+3; // 인원은 시트에 없으므로 임의 할당 유지
|
|
|
|
const recentLog = recentLogRaw === "X" ? "기록 없음" : recentLogRaw;
|
|
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
|
|
|
|
continentHtml += `
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<div>
|
|
<span class="header-label">프로젝트 명</span>
|
|
<span class="header-value" title="${projectName}">${projectName}</span>
|
|
</div>
|
|
<div>
|
|
<span class="header-label">담당부서</span>
|
|
<span class="header-value">${dept}</span>
|
|
</div>
|
|
<div>
|
|
<span class="header-label">관리자</span>
|
|
<span class="header-value">${admin}</span>
|
|
</div>
|
|
<div>
|
|
<span class="header-label">파일 수</span>
|
|
<span class="header-value">${fileCount}</span>
|
|
</div>
|
|
<div>
|
|
<span class="header-label">인원</span>
|
|
<span class="header-value">${personnelCount}명</span>
|
|
</div>
|
|
<div>
|
|
<span class="header-label">최근 로그</span>
|
|
<span class="header-value" style="color:var(--text-sub); font-size:11px;" title="${recentLog}">${recentLog}</span>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<div class="detail-grid">
|
|
<div class="detail-section">
|
|
<h4>참여 인원 상세</h4>
|
|
<table class="data-table">
|
|
<thead><tr><th>이름</th><th>소속</th><th>사용자권한</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr>
|
|
<tr><td>김철수</td><td>${dept}</td><td>부관리자</td></tr>
|
|
<tr><td>박지민</td><td>${dept}</td><td>일반참여자</td></tr>
|
|
<tr><td>최유리</td><td>${dept}</td><td>참관자</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>최근 문의사항 및 파일 변경 로그</h4>
|
|
<table class="data-table">
|
|
<thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><span class="badge">로그</span></td><td>데이터 동기화 완료</td><td>${logTime}</td></tr>
|
|
<tr><td><span class="badge" style="background:var(--hover-bg); border: 1px solid var(--border-color); color:var(--primary-color);">문의</span></td><td>프로젝트 접근 권한 요청</td><td>2026-02-23</td></tr>
|
|
<tr><td><span class="badge" style="background:var(--primary-color); color:white;">파일</span></td><td>설계도면 v2.pdf 업로드</td><td>2026-02-22</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
continentHtml += `
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
continentHtml += `
|
|
</div>
|
|
`;
|
|
|
|
continentGroup.innerHTML = continentHtml;
|
|
container.appendChild(continentGroup);
|
|
});
|
|
|
|
const allContinents = container.querySelectorAll('.continent-group');
|
|
allContinents.forEach(continent => {
|
|
continent.classList.add('active');
|
|
continent.querySelector('.continent-header .toggle-icon').textContent = '▲';
|
|
});
|
|
|
|
const allCountries = container.querySelectorAll('.country-group');
|
|
allCountries.forEach(country => {
|
|
country.classList.add('active');
|
|
country.querySelector('.country-header .toggle-icon').textContent = '▲';
|
|
});
|
|
}
|
|
|
|
function toggleGroup(header) {
|
|
const group = header.parentElement;
|
|
const icon = header.querySelector('.toggle-icon');
|
|
group.classList.toggle('active');
|
|
if (group.classList.contains('active')) {
|
|
icon.textContent = '▲';
|
|
} else {
|
|
icon.textContent = '▼';
|
|
}
|
|
}
|
|
|
|
function toggleAccordion(header) {
|
|
const item = header.parentElement;
|
|
const container = item.parentElement;
|
|
|
|
const allItems = container.querySelectorAll('.accordion-item');
|
|
allItems.forEach(el => {
|
|
if(el !== item) el.classList.remove('active');
|
|
});
|
|
|
|
item.classList.toggle('active');
|
|
}
|
|
|
|
async function syncData() {
|
|
const btn = document.getElementById('syncBtn');
|
|
const logConsole = document.getElementById('logConsole');
|
|
const logBody = document.getElementById('logBody');
|
|
|
|
btn.classList.add('loading');
|
|
btn.innerHTML = `<span class="spinner"></span> 동기화 중 (진행 상황 확인 중...)`;
|
|
btn.disabled = true;
|
|
|
|
logConsole.style.display = 'block';
|
|
logBody.innerHTML = ''; // 이전 로그 삭제
|
|
|
|
function addLog(msg) {
|
|
const logItem = document.createElement('div');
|
|
logItem.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
|
|
logBody.appendChild(logItem);
|
|
logConsole.scrollTop = logConsole.scrollHeight; // 자동 스크롤
|
|
}
|
|
|
|
try {
|
|
const apiHost = window.location.hostname;
|
|
const response = await fetch(`http://${apiHost}:8001/sync`);
|
|
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
const chunk = decoder.decode(value);
|
|
const lines = chunk.split('\n');
|
|
|
|
for (const line of lines) {
|
|
if (line.startsWith('data: ')) {
|
|
const payload = JSON.parse(line.substring(6));
|
|
|
|
if (payload.type === 'log') {
|
|
addLog(payload.message);
|
|
} else if (payload.type === 'done') {
|
|
const newData = payload.data;
|
|
newData.forEach(scrapedItem => {
|
|
const target = rawData.find(item =>
|
|
item[0].replace(/\s/g,'').includes(scrapedItem.projectName.replace(/\s/g,'')) ||
|
|
scrapedItem.projectName.replace(/\s/g,'').includes(item[0].replace(/\s/g,''))
|
|
);
|
|
|
|
if (target) {
|
|
target[3] = scrapedItem.recentLog;
|
|
target[4] = scrapedItem.fileCount;
|
|
}
|
|
});
|
|
|
|
document.getElementById('projectAccordion').innerHTML = '';
|
|
init();
|
|
addLog(">>> 모든 동기화 작업이 완료되었습니다!");
|
|
alert(`총 ${newData.length}개 프로젝트 동기화 완료!`);
|
|
logConsole.style.display = 'none'; // 성공 시 콘솔 숨김
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
addLog(`오류 발생: ${e.message}`);
|
|
alert("서버 연결 실패. 백엔드 서버가 실행 중인지 확인하세요.");
|
|
console.error(e);
|
|
} finally {
|
|
btn.classList.remove('loading');
|
|
btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`;
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html> |