1183 lines
62 KiB
HTML
1183 lines
62 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>신고 상세</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<style>
|
|
/* 출장비 요약 카드 */
|
|
.cost-summary {
|
|
border-radius: 10px;
|
|
padding: 18px 20px;
|
|
margin-bottom: 16px;
|
|
position: relative;
|
|
}
|
|
.cost-summary.s-pending { background: #FFF8E6; border: 2px solid #FFD600; }
|
|
.cost-summary.s-billed { background: #E3EDFF; border: 2px solid var(--blue); }
|
|
.cost-summary.s-waived { background: #F0F0F0; border: 2px solid #aaa; }
|
|
.cost-summary.s-settled { background: #E8F8F2; border: 2px solid var(--green); }
|
|
|
|
.cost-summary-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
}
|
|
.cost-summary-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--navy);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.cost-status-badge {
|
|
display: inline-block;
|
|
padding: 3px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.csb-pending { background: #FFF3CD; color: #856404; }
|
|
.csb-billed { background: #DBEAFE; color: #1565C0; }
|
|
.csb-waived { background: #F0F0F0; color: #555; }
|
|
.csb-settled { background: #D1FAE5; color: #065F46; }
|
|
|
|
.cost-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.cost-summary-item label {
|
|
font-size: 10px;
|
|
letter-spacing: 1px;
|
|
color: var(--gray4);
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
}
|
|
.cost-summary-item span {
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
}
|
|
.cost-summary-item span.amount {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: var(--orange);
|
|
}
|
|
.cost-summary-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(0,0,0,.08);
|
|
margin: 12px 0;
|
|
}
|
|
.cost-note-box {
|
|
background: rgba(0,0,0,.04);
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
color: var(--text2);
|
|
line-height: 1.7;
|
|
}
|
|
.edit-toggle-btn {
|
|
font-size: 12px;
|
|
color: var(--blue);
|
|
background: none;
|
|
border: 1px solid var(--blue);
|
|
border-radius: 6px;
|
|
padding: 4px 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.edit-toggle-btn:hover { background: #E3EDFF; }
|
|
|
|
/* 수정 폼 슬라이드 */
|
|
.cost-edit-wrap {
|
|
overflow: hidden;
|
|
transition: max-height .3s ease;
|
|
}
|
|
.cost-edit-wrap.collapsed { max-height: 0 !important; }
|
|
.cost-edit-inner {
|
|
border-top: 1px dashed var(--gray3);
|
|
padding-top: 16px;
|
|
margin-top: 4px;
|
|
}
|
|
/* 신고 인라인 편집 */
|
|
.report-view { display:block; }
|
|
.report-edit { display:none; }
|
|
.report-edit.active { display:block; }
|
|
.report-view.hidden { display:none; }
|
|
.issue-chk-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
|
|
.issue-chk-item { display:flex; align-items:center; gap:6px; font-size:13px; }
|
|
.issue-chk-item input { width:15px; height:15px; }
|
|
/* 충전기 검색 드롭다운 */
|
|
.ec-opt { padding:9px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid #F1F5F9; }
|
|
.ec-opt:hover { background:var(--gray1); }
|
|
.ec-opt:last-child { border-bottom:none; }
|
|
@media(max-width:768px) {
|
|
.cost-summary-grid { grid-template-columns:1fr !important; }
|
|
.issue-chk-grid { grid-template-columns:1fr !important; }
|
|
.no-hover td:first-child { white-space:nowrap; }
|
|
.no-hover td { word-break:break-word; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="nav">
|
|
<div style="display:flex;align-items:center;gap:2px;">
|
|
<button class="nav-hamburger" onclick="toggleSidebar()">☰</button>
|
|
<span class="nav-brand">⚡ EV AS 관리 — 관리자</span>
|
|
</div>
|
|
<div id="navUser"></div>
|
|
</nav>
|
|
<div class="mobile-nav-overlay" id="navOverlay" onclick="toggleSidebar()"></div>
|
|
<div class="layout">
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-section">AS 관리</div>
|
|
<a href="/pages/admin/dashboard.html">📊 대시보드</a>
|
|
<a href="/pages/admin/reports.html" class="active">📋 신고 목록</a>
|
|
<a href="/pages/admin/costs.html">💰 출장비 관리</a>
|
|
<div class="sidebar-section">시스템</div>
|
|
<a href="/pages/admin/improvements.html">🔧 개선항목</a>
|
|
<a href="/pages/admin/chargers.html">⚡ 충전기 관리</a>
|
|
<a href="/pages/admin/charger-types.html">🏷 충전기 종류</a>
|
|
<a href="/pages/admin/issue-types.html">📝 유형관리</a>
|
|
<a href="/pages/admin/qr.html">📷 QR 생성</a>
|
|
<a href="/pages/admin/accounts.html">👥 계정 관리</a>
|
|
<a href="/pages/admin/export.html">📥 데이터 내보내기</a>
|
|
<a href="/pages/admin/settings.html">⚙️ 설정</a>
|
|
</div>
|
|
<div class="main">
|
|
<div style="margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
|
|
<a href="/pages/admin/reports.html" class="btn btn-outline btn-sm" style="flex-shrink:0">← 목록</a>
|
|
<h2 id="pageTitle" style="font-size:17px;font-weight:700;color:var(--navy);min-width:0;word-break:break-word;">신고 상세</h2>
|
|
</div>
|
|
<div id="content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/auth.js"></script>
|
|
<script src="/js/imageCompress.js?v=20260603"></script>
|
|
<script>
|
|
Auth.require(['admin']);
|
|
Auth.renderNav(document.getElementById('navUser'));
|
|
|
|
function toggleSidebar() {
|
|
const s = document.getElementById('sidebar');
|
|
const o = document.getElementById('navOverlay');
|
|
if (s) s.classList.toggle('mobile-open');
|
|
if (o) o.classList.toggle('show');
|
|
}
|
|
|
|
const params = new URLSearchParams(location.search);
|
|
const reportId = params.get('id');
|
|
|
|
const PARTY_LABEL = {
|
|
cpo: 'CPO (운영사)',
|
|
manufacturer: '업체',
|
|
self: '자체 부담',
|
|
user: '사용자 과실',
|
|
other: '기타',
|
|
};
|
|
const COST_STATUS_LABEL = {
|
|
pending: '미처리',
|
|
billed: '청구 완료',
|
|
waived: '면제',
|
|
settled: '정산 완료',
|
|
};
|
|
const COST_STATUS_ICON = {
|
|
pending: '🕐',
|
|
billed: '📨',
|
|
waived: '🔖',
|
|
settled: '✅',
|
|
};
|
|
|
|
function toggleCostEdit(repairId) {
|
|
const wrap = document.getElementById('costEditWrap_' + repairId);
|
|
const btn = document.getElementById('editToggleBtn_' + repairId);
|
|
if (!wrap) return;
|
|
const isOpen = wrap.style.display !== 'none';
|
|
if (isOpen) {
|
|
wrap.style.display = 'none';
|
|
if (btn) btn.innerHTML = '✏️ 수정하기';
|
|
} else {
|
|
wrap.style.display = 'block';
|
|
if (btn) btn.innerHTML = '▲ 접기';
|
|
}
|
|
}
|
|
|
|
function togglePartySelect(repairId) {
|
|
const v = document.getElementById('partyType_' + repairId)?.value;
|
|
const mfr = document.getElementById('mfrWrap_' + repairId);
|
|
const cus = document.getElementById('customWrap_' + repairId);
|
|
if (mfr) mfr.style.display = v === 'manufacturer' ? 'block' : 'none';
|
|
if (cus) cus.style.display = v === 'other' ? 'block' : 'none';
|
|
}
|
|
|
|
function toggleRecvPartySelect(repairId) {
|
|
const v = document.getElementById('recvPartyType_' + repairId)?.value;
|
|
const mfr = document.getElementById('recvMfrWrap_' + repairId);
|
|
const cus = document.getElementById('recvCustomWrap_' + repairId);
|
|
if (mfr) mfr.style.display = v === 'manufacturer' ? 'block' : 'none';
|
|
if (cus) cus.style.display = v === 'other' ? 'block' : 'none';
|
|
}
|
|
|
|
const IMP_CAT_LABEL = {
|
|
hardware:'하드웨어', software:'소프트웨어', firmware:'펌웨어',
|
|
installation:'설치환경', other:'기타'
|
|
};
|
|
|
|
async function load() {
|
|
const [r, issueTypes, manufacturers, improvements] = await Promise.all([
|
|
API.get('/reports/' + reportId),
|
|
API.get('/settings/issue-types'),
|
|
API.get('/manufacturers/public'),
|
|
API.get('/improvements'),
|
|
]);
|
|
const repair = r.repair;
|
|
const cost = repair?.cost;
|
|
const prevRepairs = r.prev_repairs || [];
|
|
window._reportData = r; // saveReport 경고용
|
|
|
|
document.getElementById('pageTitle').textContent = `신고 #${r.seq} 상세`;
|
|
|
|
// ── 조치별 출장비 HTML 생성 함수 ──
|
|
function buildCostHtml(rep, mfrs) {
|
|
const c = rep.cost;
|
|
const rid = rep.id;
|
|
const hasCost = c && c.cost_party_type;
|
|
const costStatus = c?.cost_status || 'pending';
|
|
const statusLabel = COST_STATUS_LABEL[costStatus] || costStatus;
|
|
const statusIcon = COST_STATUS_ICON[costStatus] || '🕐';
|
|
|
|
let partyText = '-';
|
|
if (c?.cost_party_type) {
|
|
partyText = PARTY_LABEL[c.cost_party_type] || c.cost_party_type;
|
|
if (c.cost_party_type === 'manufacturer' && c.cost_manufacturer_name) partyText += ` (${c.cost_manufacturer_name})`;
|
|
if (c.cost_party_type === 'other' && c.cost_party_custom) partyText += ` — ${c.cost_party_custom}`;
|
|
}
|
|
|
|
let recvText = '-';
|
|
if (c?.recv_party_type) {
|
|
recvText = PARTY_LABEL[c.recv_party_type] || c.recv_party_type;
|
|
if (c.recv_party_type === 'manufacturer' && c.recv_manufacturer_name) recvText += ` (${c.recv_manufacturer_name})`;
|
|
if (c.recv_party_type === 'other' && c.recv_party_custom) recvText += ` — ${c.recv_party_custom}`;
|
|
}
|
|
|
|
const summaryHtml = hasCost ? `
|
|
<div class="cost-summary s-${costStatus}" style="margin-bottom:10px;">
|
|
<div class="cost-summary-header">
|
|
<div class="cost-summary-title">${statusIcon} 출장비 처리 내역</div>
|
|
<div style="display:flex;align-items:center;gap:8px;">
|
|
<span class="cost-status-badge csb-${costStatus}">${statusLabel}</span>
|
|
<button class="edit-toggle-btn" id="editToggleBtn_${rid}" onclick="toggleCostEdit(${rid})">✏️ 수정하기</button>
|
|
</div>
|
|
</div>
|
|
<div class="cost-summary-grid">
|
|
<div class="cost-summary-item"><label>부담 주체</label><span>${partyText}</span></div>
|
|
<div class="cost-summary-item"><label>수급 주체</label><span>${recvText}</span></div>
|
|
<div class="cost-summary-item"><label>금액</label><span class="amount">${(c.cost_amount||0).toLocaleString()}원</span></div>
|
|
<div class="cost-summary-item"><label>담당자</label><span>${c.reviewed_by_name||'-'}</span></div>
|
|
<div class="cost-summary-item"><label>처리일시</label><span>${Auth.fmtDt(c.reviewed_at)}</span></div>
|
|
</div>
|
|
${(c.root_cause||c.admin_note) ? `<hr class="cost-summary-divider">
|
|
${c.root_cause ? `<div style="margin-bottom:6px;"><div style="font-size:10px;color:var(--gray4);margin-bottom:3px;">문제 원인</div><div class="cost-note-box">${c.root_cause}</div></div>` : ''}
|
|
${c.admin_note ? `<div><div style="font-size:10px;color:var(--gray4);margin-bottom:3px;">비고</div><div class="cost-note-box">${c.admin_note}</div></div>` : ''}` : ''}
|
|
</div>` : `<div style="font-size:12px;color:var(--gray4);margin-bottom:8px;">💰 출장비 미입력</div>`;
|
|
|
|
const formDisplay = hasCost ? 'none' : 'block';
|
|
return `
|
|
<div style="border-top:1px dashed var(--gray3);margin-top:14px;padding-top:14px;">
|
|
<div style="font-size:13px;font-weight:700;color:var(--navy);margin-bottom:10px;">💰 출장비 정산</div>
|
|
${summaryHtml}
|
|
<div id="costEditWrap_${rid}" style="display:${formDisplay}">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>문제 원인 <span class="req">*</span></label>
|
|
<textarea id="rootCause_${rid}" rows="3" placeholder="조치 내용 검토 후 원인 기재">${c?.root_cause||''}</textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>비고</label>
|
|
<textarea id="adminNote_${rid}" rows="3" placeholder="특이사항">${c?.admin_note||''}</textarea>
|
|
</div>
|
|
</div>
|
|
<div style="font-size:12px;font-weight:700;color:var(--navy2);margin-bottom:6px;">부담 주체 (비용 부담)</div>
|
|
<div class="form-row-3">
|
|
<div class="form-group">
|
|
<label>유형 <span class="req">*</span></label>
|
|
<select id="partyType_${rid}" onchange="togglePartySelect(${rid})">
|
|
<option value="">선택</option>
|
|
<option value="cpo" ${c?.cost_party_type==='cpo' ?'selected':''}>CPO (운영사)</option>
|
|
<option value="manufacturer" ${c?.cost_party_type==='manufacturer' ?'selected':''}>업체</option>
|
|
<option value="self" ${c?.cost_party_type==='self' ?'selected':''}>자체 부담</option>
|
|
<option value="user" ${c?.cost_party_type==='user' ?'selected':''}>사용자 과실</option>
|
|
<option value="other" ${c?.cost_party_type==='other' ?'selected':''}>기타</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="mfrWrap_${rid}" style="display:${c?.cost_party_type==='manufacturer'?'block':'none'}">
|
|
<label>업체</label>
|
|
<select id="partyMfr_${rid}">
|
|
<option value="">선택</option>
|
|
${mfrs.map(m=>`<option value="${m.id}" ${c?.cost_party_manufacturer_id==m.id?'selected':''}>${m.name}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="customWrap_${rid}" style="display:${c?.cost_party_type==='other'?'block':'none'}">
|
|
<label>기타</label>
|
|
<input type="text" id="partyCustom_${rid}" value="${c?.cost_party_custom||''}">
|
|
</div>
|
|
</div>
|
|
<div style="font-size:12px;font-weight:700;color:var(--navy2);margin-bottom:6px;margin-top:10px;">수급 주체 (비용 수령)</div>
|
|
<div class="form-row-3">
|
|
<div class="form-group">
|
|
<label>유형</label>
|
|
<select id="recvPartyType_${rid}" onchange="toggleRecvPartySelect(${rid})">
|
|
<option value="">선택</option>
|
|
<option value="cpo" ${c?.recv_party_type==='cpo' ?'selected':''}>CPO (운영사)</option>
|
|
<option value="manufacturer" ${c?.recv_party_type==='manufacturer' ?'selected':''}>업체</option>
|
|
<option value="self" ${c?.recv_party_type==='self' ?'selected':''}>자체 부담</option>
|
|
<option value="user" ${c?.recv_party_type==='user' ?'selected':''}>사용자 과실</option>
|
|
<option value="other" ${c?.recv_party_type==='other' ?'selected':''}>기타</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="recvMfrWrap_${rid}" style="display:${c?.recv_party_type==='manufacturer'?'block':'none'}">
|
|
<label>업체</label>
|
|
<select id="recvPartyMfr_${rid}">
|
|
<option value="">선택</option>
|
|
${mfrs.map(m=>`<option value="${m.id}" ${c?.recv_party_manufacturer_id==m.id?'selected':''}>${m.name}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="recvCustomWrap_${rid}" style="display:${c?.recv_party_type==='other'?'block':'none'}">
|
|
<label>기타</label>
|
|
<input type="text" id="recvPartyCustom_${rid}" value="${c?.recv_party_custom||''}">
|
|
</div>
|
|
</div>
|
|
<div class="form-row" style="margin-top:10px;">
|
|
<div class="form-group">
|
|
<label>금액 (원)</label>
|
|
<input type="number" id="costAmount_${rid}" value="${c?.cost_amount||0}" min="0" step="1000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>처리 상태</label>
|
|
<select id="costStatus_${rid}">
|
|
<option value="pending" ${(!c||c.cost_status==='pending') ?'selected':''}>미처리</option>
|
|
<option value="billed" ${c?.cost_status==='billed' ?'selected':''}>청구완료</option>
|
|
<option value="waived" ${c?.cost_status==='waived' ?'selected':''}>면제</option>
|
|
<option value="settled" ${c?.cost_status==='settled' ?'selected':''}>정산완료</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="costErr_${rid}" class="alert alert-danger" style="display:none"></div>
|
|
<button class="btn btn-primary" onclick="saveCost(${rid})">💾 출장비 저장</button>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
document.getElementById('content').innerHTML = `
|
|
<div class="detail-grid">
|
|
|
|
<!-- 신고 정보 -->
|
|
<div class="card">
|
|
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
|
|
<span>📋 신고 정보</span>
|
|
<button class="edit-toggle-btn" id="reportEditBtn" onclick="toggleReportEdit()">✏️ 내용 수정</button>
|
|
</div>
|
|
|
|
<!-- 보기 모드 -->
|
|
<div class="report-view" id="reportView">
|
|
${r.report_scope === 'station' ? `
|
|
<div style="background:#F5F3FF;border:1px solid #DDD6FE;border-radius:8px;padding:9px 14px;margin-bottom:10px;font-size:13px;color:#5B21B6;font-weight:600;">
|
|
🏢 충전소 전체 신고 · <strong>${r.scope_charger_count}대</strong> 대상
|
|
</div>` : r.report_scope === 'type' ? `
|
|
<div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:9px 14px;margin-bottom:10px;font-size:13px;color:#1D4ED8;font-weight:600;">
|
|
🔧 동일 모델 전체 신고 · <strong>${r.scope_charger_count}대</strong> 대상
|
|
</div>` : r.report_scope === 'multi' ? `
|
|
<div style="background:#FEF3C7;border:1px solid #FDE68A;border-radius:8px;padding:9px 14px;margin-bottom:10px;font-size:13px;color:#92400E;font-weight:600;">
|
|
📋 충전기 ${r.scope_charger_count}대 선택 신고
|
|
${(r.charger_ids||[]).length > 1 ? `<div style="margin-top:6px;font-size:12px;font-weight:400;display:flex;flex-wrap:wrap;gap:4px">${(r.charger_ids||[]).map(cid=>`<span style="background:#FDE68A;padding:2px 8px;border-radius:10px">${cid}</span>`).join('')}</div>` : ''}
|
|
</div>` : ''}
|
|
<table class="no-hover" style="font-size:13px;">
|
|
<tr><td style="color:var(--gray4);width:100px">충전기 ID</td><td><strong>${r.charger_id}</strong>${r.report_scope !== 'single' ? ` <span style="font-size:11px;color:var(--gray4)">(대표 충전기)</span>` : ''}</td></tr>
|
|
<tr><td style="color:var(--gray4)">충전기명</td><td>${r.charger_name || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">충전소</td><td>${r.station_name || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">CPO</td><td>${r.cpo_name || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">종류</td><td>${r.charger_type || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">설치일</td><td>${r.installed_at || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">문제유형</td><td>${(r.issue_types || []).join(', ')}</td></tr>
|
|
<tr><td style="color:var(--gray4)">에러코드</td><td>${r.error_code || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">상세설명</td><td>${r.issue_detail || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">연락처</td><td>${r.contact || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">발생시각</td><td>${Auth.fmtDt(r.occurred_at)}</td></tr>
|
|
<tr><td style="color:var(--gray4)">신고일시</td><td>${Auth.fmtDt(r.reported_at)}</td></tr>
|
|
<tr><td style="color:var(--gray4)">상태</td><td>${Auth.statusBadge(r.status)}</td></tr>
|
|
<tr><td style="color:var(--gray4)">신고 출처</td><td>${r.source === 'dashboard'
|
|
? `<span style="background:#F5F3FF;color:#7C3AED;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:700">🖥 대시보드 접수${r.reported_by_name ? ' — ' + r.reported_by_name : ''}</span>`
|
|
: r.source === 'admin'
|
|
? `<span style="background:#EFF6FF;color:#1565C0;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:700">⚙️ 관리자 접수${r.reported_by_name ? ' — ' + r.reported_by_name : ''}</span>`
|
|
: `<span style="background:#F0FDF4;color:#166534;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:700">📱 QR 스캔</span>`
|
|
}</td></tr>
|
|
</table>
|
|
${r.ocpp_log ? `
|
|
<div style="margin-top:12px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">📡 OCPP 로그</label>
|
|
<pre style="margin-top:6px;background:var(--gray1);border:1px solid var(--gray3);border-radius:6px;padding:10px;font-size:11px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;">${escHtmlDetail(r.ocpp_log)}</pre>
|
|
</div>` : ''}
|
|
${r.status === 'pending_approval' ? `
|
|
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap">
|
|
<button class="btn btn-success btn-sm"
|
|
onclick="approveReport(${r.id})">✅ 신고 승인 (정비사 공개)</button>
|
|
<button class="btn btn-sm" style="background:#64748B;color:white;border:none"
|
|
onclick="toggleClosePanel()">🔚 상황종료</button>
|
|
</div>
|
|
<div id="closurePanel" style="display:none;margin-top:12px;background:#F8FAFC;border:1px solid var(--gray3);border-radius:8px;padding:14px">
|
|
<div style="font-size:13px;font-weight:700;color:var(--navy);margin-bottom:10px">🔚 상황종료 사유 선택</div>
|
|
<div style="display:flex;flex-direction:column;gap:7px;margin-bottom:10px">
|
|
${[
|
|
['natural','증상자연소거'],
|
|
['remote_reset','원격리셋후증상소거'],
|
|
['false_alarm','인지오류'],
|
|
['other','기타']
|
|
].map(([v,l]) => `
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
|
|
<input type="radio" name="closureType" value="${v}" style="width:auto;accent-color:var(--accent)"
|
|
onchange="document.getElementById('closureNoteWrap').style.display=this.value==='other'?'block':'none'">
|
|
${l}
|
|
</label>`).join('')}
|
|
</div>
|
|
<div id="closureNoteWrap" style="display:none;margin-bottom:10px">
|
|
<input type="text" id="closureNote" placeholder="기타 사유를 입력하세요"
|
|
style="width:100%;padding:8px 10px;border:1px solid var(--gray3);border-radius:6px;font-size:13px">
|
|
</div>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn btn-sm" style="background:#64748B;color:white;border:none"
|
|
onclick="submitClose(${r.id})">확인</button>
|
|
<button class="btn btn-outline btn-sm" onclick="toggleClosePanel()">취소</button>
|
|
</div>
|
|
</div>` : ''}
|
|
${r.status === 'closed' ? `
|
|
<div style="margin-top:12px;padding:10px 14px;background:#F1F5F9;border-radius:8px;border-left:4px solid #64748B">
|
|
<div style="font-size:12px;font-weight:700;color:#475569;margin-bottom:4px">🔚 상황종료 처리됨</div>
|
|
<div style="font-size:13px;color:var(--text)">사유: <strong>${{'natural':'증상자연소거','remote_reset':'원격리셋후증상소거','false_alarm':'인지오류','other':'기타'}[r.closure_type]||r.closure_type||'-'}</strong>${r.closure_note ? ' — ' + escHtmlDetail(r.closure_note) : ''}</div>
|
|
<div style="font-size:11px;color:var(--gray4);margin-top:3px">${r.closed_by_name||''} · ${r.closed_at ? new Date(r.closed_at).toLocaleString('ko-KR') : ''}</div>
|
|
</div>` : ''}
|
|
</div>
|
|
|
|
<!-- 편집 모드 -->
|
|
<div class="report-edit" id="reportEdit">
|
|
<!-- 충전기 변경 -->
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">충전기</label>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--gray1);border-radius:6px;font-size:13px;margin-bottom:6px">
|
|
<span id="rEditChargerCurrent"><strong>${r.charger_id}</strong>${r.station_name ? ` · ${r.station_name}` : ''}</span>
|
|
<button type="button" onclick="toggleChargerSearch()" class="edit-toggle-btn" style="flex-shrink:0">변경</button>
|
|
</div>
|
|
<div id="rEditChargerSearch" style="display:none">
|
|
<div style="position:relative">
|
|
<input type="text" id="rEditChargerInput" autocomplete="off"
|
|
placeholder="충전소명 또는 충전기 ID 검색..."
|
|
oninput="filterEditChargers(this.value)" onfocus="filterEditChargers(this.value)"
|
|
style="width:100%;padding:8px 10px;border:1px solid var(--gray3);border-radius:6px;font-size:13px;box-sizing:border-box;outline:none">
|
|
<div id="rEditChargerDropdown"
|
|
style="display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;
|
|
background:white;border:1px solid var(--gray3);border-radius:7px;
|
|
max-height:200px;overflow-y:auto;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.12)"></div>
|
|
</div>
|
|
<div id="rEditChargerSelected"
|
|
style="display:none;margin-top:6px;padding:6px 10px;background:#EFF6FF;
|
|
border:1px solid #BFDBFE;border-radius:6px;font-size:12px;color:var(--navy2);">
|
|
<span id="rEditChargerSelectedText"></span>
|
|
<button type="button" onclick="clearEditCharger()" style="float:right;background:none;border:none;cursor:pointer;color:var(--gray4);font-size:13px;padding:0 2px;margin-left:8px">✕</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 신고 범위 -->
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">신고 범위</label>
|
|
<div style="display:flex;flex-direction:column;gap:7px;margin-top:5px">
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
|
|
<input type="radio" name="rEditScope" value="single" style="width:auto;accent-color:var(--accent)"
|
|
${!r.report_scope || r.report_scope === 'single' ? 'checked' : ''}>
|
|
<span><strong>이 충전기만</strong></span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
|
|
<input type="radio" name="rEditScope" value="station" style="width:auto;accent-color:var(--accent)"
|
|
${r.report_scope === 'station' ? 'checked' : ''}>
|
|
<span><strong>충전소 전체</strong> <span style="font-size:11px;color:var(--gray4)">— 같은 충전소의 모든 충전기 대상</span></span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
|
|
<input type="radio" name="rEditScope" value="type" style="width:auto;accent-color:var(--accent)"
|
|
${r.report_scope === 'type' ? 'checked' : ''}>
|
|
<span><strong>동일 모델 전체</strong> <span style="font-size:11px;color:var(--gray4)">— 같은 충전기 종류 전체 대상</span></span>
|
|
</label>
|
|
${r.report_scope === 'multi' ? `
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer">
|
|
<input type="radio" name="rEditScope" value="multi" style="width:auto;accent-color:var(--accent)" checked>
|
|
<span><strong>선택 충전기 ${r.scope_charger_count}대</strong> <span style="font-size:11px;color:var(--gray4)">— 접수 시 선택한 충전기들</span></span>
|
|
</label>` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">문제 유형 <span class="req">*</span></label>
|
|
<div class="issue-chk-grid">
|
|
${issueTypes.map(i => `
|
|
<label class="issue-chk-item">
|
|
<input type="checkbox" class="r-issue-chk" value="${i.key}"
|
|
${(r.issue_types||[]).includes(i.key) ? 'checked' : ''}>
|
|
${i.label}
|
|
</label>`).join('')}
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">에러 코드</label>
|
|
<input type="text" id="rEditErrorCode" value="${r.error_code||''}" placeholder="에러 코드">
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">상세 설명</label>
|
|
<textarea id="rEditDetail" rows="3" placeholder="문제 상황 설명">${r.issue_detail||''}</textarea>
|
|
</div>
|
|
<div class="form-row" style="margin-bottom:10px">
|
|
<div class="form-group">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">연락처</label>
|
|
<input type="text" id="rEditContact" value="${r.contact||''}" placeholder="연락처">
|
|
</div>
|
|
<div class="form-group">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">발생 시각</label>
|
|
<input type="datetime-local" id="rEditOccurred"
|
|
value="${r.occurred_at ? r.occurred_at.slice(0,16) : ''}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:14px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">신고 상태</label>
|
|
<select id="rEditStatus">
|
|
<option value="pending_approval" ${r.status==='pending_approval'?'selected':''}>승인대기</option>
|
|
<option value="pending" ${r.status==='pending' ?'selected':''}>접수</option>
|
|
<option value="in_progress" ${r.status==='in_progress' ?'selected':''}>처리중</option>
|
|
<option value="done" ${r.status==='done' ?'selected':''}>완료</option>
|
|
<option value="waiting" ${r.status==='waiting' ?'selected':''}>부품대기</option>
|
|
<option value="revisit" ${r.status==='revisit' ?'selected':''}>재방문</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:14px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">📡 OCPP 로그 <span style="font-weight:400;color:var(--gray4)">(선택)</span></label>
|
|
<textarea id="rEditOcppLog" rows="5"
|
|
style="width:100%;padding:8px 10px;border:1px solid var(--gray3);border-radius:6px;font-size:12px;font-family:monospace;resize:vertical;box-sizing:border-box;"
|
|
placeholder="OCPP 통신 로그 붙여넣기...">${r.ocpp_log || ''}</textarea>
|
|
<label style="display:flex;align-items:center;gap:8px;margin-top:5px;cursor:pointer;font-size:12px;color:var(--blue);">
|
|
<input type="file" id="rEditOcppFile" accept=".txt,.csv,.log" style="display:none" onchange="readOcppFileEdit(this)">
|
|
📄 파일 선택 (.txt/.csv/.log)
|
|
<span id="rEditOcppFileName" style="color:var(--gray4);font-weight:400"></span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:14px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">사진 관리</label>
|
|
${(r.photos||[]).length ? `
|
|
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
|
|
${(r.photos||[]).map(p => `
|
|
<div style="position:relative;">
|
|
<img src="${p.path}" style="width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--gray3);display:block;">
|
|
<button onclick="deleteReportPhoto(${r.id},${p.id})"
|
|
style="position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#e53e3e;color:white;border:none;font-size:11px;cursor:pointer;line-height:1;padding:0;">✕</button>
|
|
</div>`).join('')}
|
|
</div>` : ''}
|
|
<label class="upload-area" for="rEditPhoto" style="padding:10px;font-size:12px;">📷 사진 추가 (선택 · 여러 장)</label>
|
|
<input type="file" id="rEditPhoto" accept="image/*" multiple style="display:none">
|
|
<div class="photo-preview" id="rEditPhotoPreview"></div>
|
|
<div class="photo-info" id="rEditPhotoInfo" style="color:var(--gray4)"></div>
|
|
</div>
|
|
<div id="rEditErr" class="alert alert-danger" style="display:none"></div>
|
|
<div style="display:flex;gap:8px;">
|
|
<button class="btn btn-primary btn-sm" onclick="saveReport(${r.id})">💾 저장</button>
|
|
<button class="btn btn-outline btn-sm" onclick="toggleReportEdit()">취소</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:12px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">신고 사진</label>
|
|
<div class="photo-preview">
|
|
${(r.photos || []).map(p =>
|
|
`<img src="${p.path}" onclick="window.open('${p.path}')" style="cursor:zoom-in">`
|
|
).join('') || '<span style="font-size:12px;color:var(--gray4)">첨부 없음</span>'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 조치 정보 — 이전 조치(순번카드) + 최신 조치 순서로 표시 -->
|
|
${prevRepairs.length ? (() => {
|
|
// prev_repairs는 최신순(내림차순)이므로 뒤집어서 오래된 것부터 번호 부여
|
|
const orderedPrev = prevRepairs.slice().reverse();
|
|
return orderedPrev.map((pr, idx) => `
|
|
<div class="card" style="border-left:4px solid #F59E0B;">
|
|
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
|
|
<span>🔧 조치 #${idx + 1}${orderedPrev.length + 1 > 2 ? '' : ' (최초)'}</span>
|
|
<span style="font-size:12px;background:#FEF3C7;color:#92400E;padding:3px 12px;border-radius:10px;font-weight:700;">🔁 재조치 요청됨 · ${Auth.fmtDt(pr.re_dispatch_requested_at)}</span>
|
|
</div>
|
|
<table class="no-hover" style="font-size:13px;">
|
|
<tr><td style="color:var(--gray4);width:100px">정비사</td><td>${pr.mechanic_name||'-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">조치유형</td><td>${(pr.repair_types||[]).join(', ')||'-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">조치내용</td><td>${pr.description||'-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">완료시각</td><td>${Auth.fmtDt(pr.completed_at)}</td></tr>
|
|
</table>
|
|
${(pr.photos_before||[]).length || (pr.photos_after||[]).length ? `
|
|
<div style="margin-top:10px;">
|
|
${(pr.photos_before||[]).length ? `<label style="font-size:12px;font-weight:700;color:var(--navy2)">조치 전 사진</label>
|
|
<div class="photo-preview">${(pr.photos_before||[]).map(p=>`<img src="${p}" onclick="window.open('${p}')" style="cursor:zoom-in">`).join('')}</div>` : ''}
|
|
${(pr.photos_after||[]).length ? `<label style="font-size:12px;font-weight:700;color:var(--navy2);margin-top:8px;display:block">조치 후 사진</label>
|
|
<div class="photo-preview">${(pr.photos_after||[]).map(p=>`<img src="${p}" onclick="window.open('${p}')" style="cursor:zoom-in">`).join('')}</div>` : ''}
|
|
</div>` : ''}
|
|
${buildCostHtml(pr, manufacturers)}
|
|
</div>`).join('');
|
|
})() : ''}
|
|
|
|
<div class="card" style="${prevRepairs.length ? 'border-left:4px solid var(--accent);' : ''}">
|
|
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
|
|
<span>🔧 조치 ${prevRepairs.length ? '#' + (prevRepairs.length + 1) + ' (최신)' : '정보'}</span>
|
|
${repair ? `
|
|
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
|
|
${repair.approved_at
|
|
? `<span style="font-size:12px;background:#D1FAE5;color:#065F46;padding:3px 12px;border-radius:10px;font-weight:700;">✅ 승인완료 · ${repair.approved_by_name||''}</span>`
|
|
: repair.re_dispatch_requested
|
|
? `<span style="font-size:12px;background:#FEF3C7;color:#92400E;padding:3px 12px;border-radius:10px;font-weight:700;">🔁 재조치 요청됨 · ${Auth.fmtDt(repair.re_dispatch_requested_at)}</span>`
|
|
: `<button onclick="toggleApprovePanel()" id="approvePanelBtn" style="padding:5px 14px;border:none;border-radius:7px;background:var(--green);color:white;font-size:12px;font-weight:700;cursor:pointer;">✅ 조치 승인</button>`
|
|
}
|
|
${!repair.approved_at && !repair.re_dispatch_requested
|
|
? `<button onclick="requestRedispatch(${repair.id})" style="padding:5px 14px;border:none;border-radius:7px;background:#F59E0B;color:white;font-size:12px;font-weight:700;cursor:pointer;">🔁 재조치 요청</button>`
|
|
: ''}
|
|
<button onclick="cancelRepair(${repair.id}, ${!!repair.approved_at})" style="padding:5px 14px;border:none;border-radius:7px;background:#FEE2E2;color:#991B1B;font-size:12px;font-weight:700;cursor:pointer;">🔄 조치취소</button>
|
|
</div>` : ''}
|
|
</div>
|
|
${repair ? `
|
|
<table class="no-hover" style="font-size:13px;">
|
|
<tr><td style="color:var(--gray4);width:100px">정비사</td><td>${repair.mechanic_name || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">소속</td><td>${repair.mechanic_company || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">조치유형</td><td>${(repair.repair_types || []).join(', ')}</td></tr>
|
|
<tr><td style="color:var(--gray4)">조치내용</td><td>${repair.description || '-'}</td></tr>
|
|
<tr><td style="color:var(--gray4)">시작시각</td><td>${Auth.fmtDt(repair.started_at)}</td></tr>
|
|
<tr><td style="color:var(--gray4)">완료시각</td><td>${Auth.fmtDt(repair.completed_at)}</td></tr>
|
|
<tr><td style="color:var(--gray4)">처리결과</td><td>${Auth.statusBadge(repair.result_status)}</td></tr>
|
|
${repair.re_dispatch_requested ? `
|
|
<tr><td style="color:var(--gray4)">재조치요청</td><td style="color:#92400E;font-weight:700;">🔁 재조치 요청됨 (${Auth.fmtDt(repair.re_dispatch_requested_at)})</td></tr>` : ''}
|
|
</table>
|
|
<div style="margin-top:12px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">조치 전 사진</label>
|
|
<div class="photo-preview">
|
|
${(repair.photos_before || []).map(p =>
|
|
`<img src="${p}" onclick="window.open('${p}')" style="cursor:zoom-in">`
|
|
).join('') || '<span style="font-size:12px;color:var(--gray4)">없음</span>'}
|
|
</div>
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2);margin-top:10px;display:block">조치 후 사진</label>
|
|
<div class="photo-preview">
|
|
${(repair.photos_after || []).map(p =>
|
|
`<img src="${p}" onclick="window.open('${p}')" style="cursor:zoom-in">`
|
|
).join('') || '<span style="font-size:12px;color:var(--gray4)">없음</span>'}
|
|
</div>
|
|
</div>
|
|
${renderLocationMap(repair)}
|
|
${buildCostHtml(repair, manufacturers)}
|
|
|
|
${/* ── 연결된 개선항목 표시 (승인 완료 후) ── */
|
|
repair.linked_improvements && repair.linked_improvements.length ? `
|
|
<div style="margin-top:14px;padding:12px 14px;background:#EDE9FE;border-radius:8px;">
|
|
<div style="font-size:12px;font-weight:700;color:#5B21B6;margin-bottom:8px;">🔧 연결된 개선항목</div>
|
|
${repair.linked_improvements.map(i => `
|
|
<a href="/pages/admin/improvement-detail.html?id=${i.id}"
|
|
style="display:flex;align-items:center;gap:8px;font-size:13px;color:#5B21B6;text-decoration:none;padding:4px 0;">
|
|
<span style="background:#DDD6FE;border-radius:4px;padding:1px 7px;font-size:11px;">${IMP_CAT_LABEL[i.category]||i.category}</span>
|
|
<strong>#${i.id}</strong> ${i.title}
|
|
</a>`).join('')}
|
|
</div>` : ''}
|
|
|
|
${/* ── 승인 패널 (미승인 시) ── */
|
|
!repair.approved_at ? `
|
|
<div id="approvePanel" style="display:none;border-top:1px dashed var(--gray3);margin-top:16px;padding-top:16px;">
|
|
<div style="font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;">✅ 조치 승인 — 개선항목 연결</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:8px;margin-bottom:14px;">
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;">
|
|
<input type="radio" name="impAction" value="none" checked onchange="updateImpSection()">
|
|
<span>개선항목 연결 안 함</span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;">
|
|
<input type="radio" name="impAction" value="link" onchange="updateImpSection()">
|
|
<span>기존 개선항목에 연결 — <span style="color:var(--gray4);font-size:12px;">이전에 등록된 항목 선택</span></span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;">
|
|
<input type="radio" name="impAction" value="create" onchange="updateImpSection()">
|
|
<span>신규 개선항목 생성 — <span style="color:var(--gray4);font-size:12px;">이번 조치 기반으로 새 항목 등록</span></span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 기존 항목 연결 -->
|
|
<div id="impLinkSection" style="display:none;margin-bottom:14px;">
|
|
<div style="font-size:12px;font-weight:700;color:var(--navy2);margin-bottom:6px;">개선항목 검색</div>
|
|
<input type="text" id="impSearch" placeholder="제목으로 검색..."
|
|
style="width:100%;padding:7px 10px;border:1px solid var(--gray3);border-radius:6px;font-size:13px;margin-bottom:6px;"
|
|
oninput="filterImpOptions()">
|
|
<select id="impSelect" size="5"
|
|
style="width:100%;border:1px solid var(--gray3);border-radius:6px;font-size:13px;padding:4px;">
|
|
${improvements.length
|
|
? improvements.map(i =>
|
|
`<option value="${i.id}">[${IMP_CAT_LABEL[i.category]||i.category}] #${i.id} ${i.title}</option>`
|
|
).join('')
|
|
: '<option disabled>등록된 개선항목이 없습니다</option>'}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 신규 항목 생성 -->
|
|
<div id="impCreateSection" style="display:none;margin-bottom:14px;padding:14px;background:var(--gray1);border-radius:8px;">
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">제목 <span class="req">*</span></label>
|
|
<input type="text" id="impTitle" placeholder="개선항목 제목">
|
|
</div>
|
|
<div class="form-row" style="margin-bottom:10px">
|
|
<div class="form-group">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">분류 <span class="req">*</span></label>
|
|
<select id="impCategory">
|
|
<option value="">선택</option>
|
|
<option value="hardware">하드웨어</option>
|
|
<option value="software">소프트웨어</option>
|
|
<option value="firmware">펌웨어</option>
|
|
<option value="installation">설치환경</option>
|
|
<option value="other">기타</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">우선순위</label>
|
|
<select id="impPriority">
|
|
<option value="low">낮음</option>
|
|
<option value="normal" selected>보통</option>
|
|
<option value="high">높음</option>
|
|
<option value="critical">긴급</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:10px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">내용 <span class="req">*</span></label>
|
|
<textarea id="impDesc" rows="3" placeholder="개선이 필요한 내용을 구체적으로 기술해 주세요."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2)">담당 제조사</label>
|
|
<select id="impMfr">
|
|
<option value="">미지정 (나중에 설정)</option>
|
|
${manufacturers.map(m =>
|
|
`<option value="${m.id}">${m.name}</option>`
|
|
).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="approveErr" class="alert alert-danger" style="display:none;margin-bottom:10px;"></div>
|
|
<div style="display:flex;gap:8px;">
|
|
<button class="btn btn-success btn-sm" onclick="doApproveRepair(${repair.id})">✅ 승인 완료</button>
|
|
<button class="btn btn-outline btn-sm" onclick="toggleApprovePanel()">취소</button>
|
|
</div>
|
|
</div>` : ''}
|
|
` : '<div class="alert alert-info">아직 정비사가 조치를 입력하지 않았습니다.</div>'}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
`;
|
|
|
|
// 신고 편집 폼 사진 압축 설정
|
|
if (document.getElementById('rEditPhoto')) {
|
|
ImageCompressor.setupPreview('rEditPhoto', 'rEditPhotoPreview', 'rEditPhotoInfo');
|
|
}
|
|
|
|
// 지도 초기화 (수리 정보가 있을 때만)
|
|
if (repair) initRepairMap(repair);
|
|
}
|
|
|
|
/* ── 방문 위치 지도 ── */
|
|
function renderLocationMap(repair) {
|
|
const mLat = repair.mechanic_lat, mLng = repair.mechanic_lng;
|
|
const cLat = repair.charger_lat, cLng = repair.charger_lng;
|
|
if (!mLat && !cLat) return '';
|
|
|
|
let distHtml = '';
|
|
if (mLat && cLat) {
|
|
const d = haversineM(mLat, mLng, cLat, cLng);
|
|
const within = d <= 200;
|
|
distHtml = `
|
|
<div style="display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:8px;">
|
|
<span style="padding:3px 10px;border-radius:12px;font-weight:700;
|
|
background:${within ? '#D1FAE5' : '#FEE2E2'};color:${within ? '#065F46' : '#991B1B'}">
|
|
${within ? '✅ 현장 방문 확인' : '⚠️ 현장 거리 초과'}
|
|
</span>
|
|
<span style="color:var(--gray4)">충전기와의 거리: <strong>${d < 1000 ? Math.round(d)+'m' : (d/1000).toFixed(1)+'km'}</strong></span>
|
|
</div>`;
|
|
}
|
|
|
|
return `
|
|
<div style="margin-top:16px">
|
|
<label style="font-size:12px;font-weight:700;color:var(--navy2);display:block;margin-bottom:6px">📍 조치 위치</label>
|
|
${distHtml}
|
|
<div id="repairMap" style="height:220px;border-radius:8px;border:1px solid var(--gray3);overflow:hidden"></div>
|
|
<div style="display:flex;gap:16px;font-size:11px;color:var(--gray4);margin-top:5px;">
|
|
${mLat ? '<span>🔵 정비사 위치</span>' : ''}
|
|
${cLat ? '<span>🔴 충전기 등록 위치</span>' : ''}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
function initRepairMap(repair) {
|
|
const mLat = repair.mechanic_lat, mLng = repair.mechanic_lng;
|
|
const cLat = repair.charger_lat, cLng = repair.charger_lng;
|
|
if (!document.getElementById('repairMap')) return;
|
|
|
|
const center = mLat ? [mLat, mLng] : [cLat, cLng];
|
|
const map = L.map('repairMap', { zoomControl: true, scrollWheelZoom: false })
|
|
.setView(center, 16);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap',
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
|
|
const bounds = [];
|
|
|
|
if (mLat) {
|
|
const icon = L.divIcon({
|
|
html: '<div style="width:14px;height:14px;border-radius:50%;background:#2563EB;border:2px solid white;box-shadow:0 0 4px rgba(0,0,0,.4)"></div>',
|
|
iconSize: [14, 14], iconAnchor: [7, 7], className: ''
|
|
});
|
|
L.marker([mLat, mLng], { icon })
|
|
.addTo(map)
|
|
.bindPopup('<b>정비사 위치</b><br>조치 제출 시점 기록')
|
|
.openPopup();
|
|
bounds.push([mLat, mLng]);
|
|
}
|
|
|
|
if (cLat) {
|
|
const icon = L.divIcon({
|
|
html: '<div style="width:14px;height:14px;border-radius:50%;background:#DC2626;border:2px solid white;box-shadow:0 0 4px rgba(0,0,0,.4)"></div>',
|
|
iconSize: [14, 14], iconAnchor: [7, 7], className: ''
|
|
});
|
|
L.marker([cLat, cLng], { icon })
|
|
.addTo(map)
|
|
.bindPopup('<b>충전기 등록 위치</b>');
|
|
bounds.push([cLat, cLng]);
|
|
}
|
|
|
|
if (mLat && cLat) {
|
|
L.polyline([[mLat, mLng], [cLat, cLng]], {
|
|
color: '#6366F1', weight: 2, dashArray: '5 5', opacity: 0.7
|
|
}).addTo(map);
|
|
map.fitBounds(bounds, { padding: [30, 30] });
|
|
}
|
|
}
|
|
|
|
function haversineM(lat1, lng1, lat2, lng2) {
|
|
const R = 6371000;
|
|
const dLat = (lat2 - lat1) * Math.PI / 180;
|
|
const dLng = (lng2 - lng1) * Math.PI / 180;
|
|
const a = Math.sin(dLat/2)**2 +
|
|
Math.cos(lat1*Math.PI/180) * Math.cos(lat2*Math.PI/180) * Math.sin(dLng/2)**2;
|
|
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
|
}
|
|
|
|
function escHtmlDetail(s) {
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
}
|
|
|
|
function readOcppFileEdit(input) {
|
|
const file = input.files[0];
|
|
if (!file) return;
|
|
document.getElementById('rEditOcppFileName').textContent = file.name;
|
|
const reader = new FileReader();
|
|
reader.onload = e => { document.getElementById('rEditOcppLog').value = e.target.result; };
|
|
reader.readAsText(file, 'UTF-8');
|
|
}
|
|
|
|
async function deleteReportPhoto(reportId, photoId) {
|
|
if (!confirm('이 사진을 삭제하시겠습니까?')) return;
|
|
try {
|
|
await API.delete(`/reports/${reportId}/photos/${photoId}`);
|
|
load();
|
|
} catch(e) { alert(e.message); }
|
|
}
|
|
|
|
function toggleReportEdit() {
|
|
const view = document.getElementById('reportView');
|
|
const edit = document.getElementById('reportEdit');
|
|
const btn = document.getElementById('reportEditBtn');
|
|
const isEditing = edit.classList.contains('active');
|
|
if (isEditing) {
|
|
edit.classList.remove('active');
|
|
view.classList.remove('hidden');
|
|
btn.innerHTML = '✏️ 내용 수정';
|
|
clearEditCharger();
|
|
} else {
|
|
view.classList.add('hidden');
|
|
edit.classList.add('active');
|
|
btn.innerHTML = '✕ 취소';
|
|
}
|
|
}
|
|
|
|
/* ── 충전기 변경 (수정 폼) ── */
|
|
let editChargerList = [];
|
|
let editChargerFiltered = [];
|
|
let editNewChargerId = null;
|
|
|
|
function _ecEsc(s) {
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
function toggleChargerSearch() {
|
|
const wrap = document.getElementById('rEditChargerSearch');
|
|
if (!wrap) return;
|
|
const opening = wrap.style.display === 'none';
|
|
wrap.style.display = opening ? 'block' : 'none';
|
|
if (opening) {
|
|
if (!editChargerList.length) {
|
|
API.get('/chargers').then(cs => { editChargerList = cs; filterEditChargers(''); });
|
|
} else {
|
|
filterEditChargers('');
|
|
}
|
|
setTimeout(() => document.getElementById('rEditChargerInput')?.focus(), 50);
|
|
}
|
|
}
|
|
|
|
function filterEditChargers(q) {
|
|
const dd = document.getElementById('rEditChargerDropdown');
|
|
if (!dd) return;
|
|
q = (q || '').trim().toLowerCase();
|
|
editChargerFiltered = (q
|
|
? editChargerList.filter(c =>
|
|
c.station_name.toLowerCase().includes(q) ||
|
|
c.name.toLowerCase().includes(q) ||
|
|
c.id.toLowerCase().includes(q))
|
|
: editChargerList).slice(0, 50);
|
|
dd.style.display = editChargerFiltered.length ? 'block' : 'none';
|
|
dd.innerHTML = editChargerFiltered.map((c, i) => `
|
|
<div class="ec-opt" onclick="selectEditCharger(${i})">
|
|
<div style="font-weight:600;color:var(--navy)">${_ecEsc(c.station_name)} · ${_ecEsc(c.name)}</div>
|
|
<div style="font-size:11px;color:var(--gray4);margin-top:2px">${_ecEsc(c.id)}</div>
|
|
</div>`).join('');
|
|
}
|
|
|
|
function selectEditCharger(idx) {
|
|
const c = editChargerFiltered[idx];
|
|
if (!c) return;
|
|
editNewChargerId = c.id;
|
|
document.getElementById('rEditChargerDropdown').style.display = 'none';
|
|
document.getElementById('rEditChargerInput').value = '';
|
|
document.getElementById('rEditChargerSelectedText').textContent =
|
|
`${c.station_name} · ${c.name} (${c.id})`;
|
|
document.getElementById('rEditChargerSelected').style.display = 'block';
|
|
}
|
|
|
|
function clearEditCharger() {
|
|
editNewChargerId = null;
|
|
const sel = document.getElementById('rEditChargerSelected');
|
|
if (sel) sel.style.display = 'none';
|
|
const inp = document.getElementById('rEditChargerInput');
|
|
if (inp) inp.value = '';
|
|
const dd = document.getElementById('rEditChargerDropdown');
|
|
if (dd) dd.style.display = 'none';
|
|
const wrap = document.getElementById('rEditChargerSearch');
|
|
if (wrap) wrap.style.display = 'none';
|
|
}
|
|
|
|
document.addEventListener('click', e => {
|
|
const inp = document.getElementById('rEditChargerInput');
|
|
const dd = document.getElementById('rEditChargerDropdown');
|
|
if (inp && dd && !inp.contains(e.target) && !dd.contains(e.target)) {
|
|
dd.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
async function saveReport(reportId) {
|
|
const issues = [...document.querySelectorAll('.r-issue-chk:checked')].map(c => c.value);
|
|
if (!issues.length) {
|
|
const err = document.getElementById('rEditErr');
|
|
err.textContent = '문제 유형을 1개 이상 선택해 주세요.';
|
|
err.style.display = 'block';
|
|
return;
|
|
}
|
|
// 재조치 대기 중인데 상태를 pending 이외로 바꾸면 정비사 목록에서 사라짐 → 경고
|
|
const selStatus = document.getElementById('rEditStatus').value;
|
|
if (selStatus !== 'pending') {
|
|
const latestRepair = (window._reportData && window._reportData.repair);
|
|
if (latestRepair && latestRepair.re_dispatch_requested && !latestRepair.approved_at) {
|
|
if (!confirm('⚠️ 현재 재조치 대기 중인 건입니다.\n상태를 "접수(pending)" 이외로 변경하면 정비사 AS 목록에서 사라집니다.\n\n계속 저장하시겠습니까?')) return;
|
|
}
|
|
}
|
|
document.getElementById('rEditErr').style.display = 'none';
|
|
const fd = new FormData();
|
|
fd.append('issue_types', JSON.stringify(issues));
|
|
fd.append('issue_detail', document.getElementById('rEditDetail').value);
|
|
fd.append('error_code', document.getElementById('rEditErrorCode').value);
|
|
fd.append('contact', document.getElementById('rEditContact').value);
|
|
fd.append('occurred_at', document.getElementById('rEditOccurred').value);
|
|
fd.append('status', selStatus);
|
|
fd.append('ocpp_log', document.getElementById('rEditOcppLog').value);
|
|
if (editNewChargerId) fd.append('charger_id', editNewChargerId);
|
|
const newScope = document.querySelector('input[name="rEditScope"]:checked')?.value;
|
|
if (newScope) fd.append('scope', newScope);
|
|
const newPhotos = document.getElementById('rEditPhoto')?.files || [];
|
|
Array.from(newPhotos).forEach(f => fd.append('photos', f));
|
|
try {
|
|
await API.patch(`/reports/${reportId}`, fd);
|
|
load();
|
|
} catch(e) {
|
|
const err = document.getElementById('rEditErr');
|
|
err.textContent = e.message;
|
|
err.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function toggleParty() {} // 레거시 — togglePartySelect(repairId) 사용
|
|
|
|
function toggleApprovePanel() {
|
|
const panel = document.getElementById('approvePanel');
|
|
const btn = document.getElementById('approvePanelBtn');
|
|
if (!panel) return;
|
|
const opening = panel.style.display === 'none';
|
|
panel.style.display = opening ? 'block' : 'none';
|
|
if (btn) btn.textContent = opening ? '✕ 취소' : '✅ 조치 승인';
|
|
}
|
|
|
|
function updateImpSection() {
|
|
const action = document.querySelector('input[name="impAction"]:checked')?.value;
|
|
document.getElementById('impLinkSection').style.display = action === 'link' ? 'block' : 'none';
|
|
document.getElementById('impCreateSection').style.display = action === 'create' ? 'block' : 'none';
|
|
}
|
|
|
|
function filterImpOptions() {
|
|
const q = document.getElementById('impSearch').value.toLowerCase();
|
|
[...document.getElementById('impSelect').options].forEach(opt => {
|
|
opt.hidden = q && !opt.text.toLowerCase().includes(q);
|
|
});
|
|
}
|
|
|
|
async function doApproveRepair(repairId) {
|
|
const action = document.querySelector('input[name="impAction"]:checked')?.value || 'none';
|
|
|
|
const fd = new FormData();
|
|
fd.append('improvement_action', action);
|
|
|
|
if (action === 'link') {
|
|
const sel = document.getElementById('impSelect');
|
|
const impId = sel?.value;
|
|
if (!impId) { showApproveErr('연결할 개선항목을 선택해 주세요.'); return; }
|
|
fd.append('improvement_id', impId);
|
|
} else if (action === 'create') {
|
|
const title = document.getElementById('impTitle').value.trim();
|
|
const cat = document.getElementById('impCategory').value;
|
|
const desc = document.getElementById('impDesc').value.trim();
|
|
if (!title || !cat || !desc) { showApproveErr('제목, 분류, 내용을 모두 입력해 주세요.'); return; }
|
|
fd.append('imp_title', title);
|
|
fd.append('imp_category', cat);
|
|
fd.append('imp_description', desc);
|
|
fd.append('imp_priority', document.getElementById('impPriority').value);
|
|
const mfr = document.getElementById('impMfr').value;
|
|
if (mfr) fd.append('imp_manufacturer_id', mfr);
|
|
}
|
|
|
|
if (!confirm('이 조치 내역을 승인하시겠습니까?\n승인 후에는 정비사가 수정할 수 없습니다.')) return;
|
|
|
|
try {
|
|
const res = await API.post(`/repairs/${repairId}/approve`, fd);
|
|
let msg = '✅ 조치가 승인되었습니다.';
|
|
if (res.improvement_id) {
|
|
msg += `\n개선항목 #${res.improvement_id}에 연결되었습니다.`;
|
|
}
|
|
alert(msg);
|
|
load();
|
|
} catch(e) { showApproveErr(e.message); }
|
|
}
|
|
|
|
function showApproveErr(msg) {
|
|
const el = document.getElementById('approveErr');
|
|
if (!el) return;
|
|
el.textContent = msg;
|
|
el.style.display = 'block';
|
|
}
|
|
|
|
async function cancelRepair(repairId, isApproved) {
|
|
const msg = isApproved
|
|
? '⚠️ 승인된 조치를 취소합니다.\n\n연결된 신고가 접수(pending) 상태로 되돌아가며\n정비사가 다시 조치해야 합니다.\n\n계속하시겠습니까?'
|
|
: '조치를 취소합니다.\n\n연결된 신고가 접수(pending) 상태로 되돌아가며\n정비사가 다시 조치해야 합니다.\n\n계속하시겠습니까?';
|
|
if (!confirm(msg)) return;
|
|
try {
|
|
await API.delete('/repairs/' + repairId);
|
|
load();
|
|
} catch(e) { alert('조치취소 오류: ' + e.message); }
|
|
}
|
|
|
|
async function requestRedispatch(repairId) {
|
|
if (!confirm('재조치를 요청합니다.\n\n기존 조치 기록은 유지되며,\n연결된 신고가 정비사 목록에 다시 표시됩니다.\n\n계속하시겠습니까?')) return;
|
|
try {
|
|
await API.post('/repairs/' + repairId + '/re-dispatch', new FormData());
|
|
load();
|
|
} catch(e) { alert('재조치 요청 오류: ' + e.message); }
|
|
}
|
|
|
|
async function approveReport(id) {
|
|
if (!confirm('신고를 승인하여 정비사에게 공개하시겠습니까?')) return;
|
|
await API.patch(`/reports/${id}/approve`);
|
|
alert('승인되었습니다.');
|
|
load();
|
|
}
|
|
|
|
function toggleClosePanel() {
|
|
const panel = document.getElementById('closurePanel');
|
|
if (!panel) return;
|
|
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
|
|
async function submitClose(id) {
|
|
const selected = document.querySelector('input[name="closureType"]:checked');
|
|
if (!selected) { alert('상황종료 사유를 선택해 주세요.'); return; }
|
|
const note = document.getElementById('closureNote')?.value || '';
|
|
if (selected.value === 'other' && !note.trim()) { alert('기타 사유를 입력해 주세요.'); return; }
|
|
if (!confirm('상황종료 처리하시겠습니까?\n정비사 조치 없이 신고를 종결합니다.')) return;
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append('closure_type', selected.value);
|
|
fd.append('closure_note', note);
|
|
await API.patch(`/reports/${id}/close`, fd);
|
|
load();
|
|
} catch(e) { alert('오류: ' + e.message); }
|
|
}
|
|
|
|
async function saveCost(repairId) {
|
|
const partyType = document.getElementById('partyType_' + repairId)?.value;
|
|
if (!partyType) {
|
|
const err = document.getElementById('costErr_' + repairId);
|
|
if (err) { err.textContent = '출장비 부담 주체를 선택해 주세요.'; err.style.display = 'block'; }
|
|
return;
|
|
}
|
|
const fd = new FormData();
|
|
fd.append('root_cause', document.getElementById('rootCause_' + repairId)?.value || '');
|
|
fd.append('admin_note', document.getElementById('adminNote_' + repairId)?.value || '');
|
|
fd.append('cost_party_type', partyType);
|
|
fd.append('cost_party_manufacturer_id', document.getElementById('partyMfr_' + repairId)?.value || '');
|
|
fd.append('cost_party_custom', document.getElementById('partyCustom_' + repairId)?.value || '');
|
|
fd.append('recv_party_type', document.getElementById('recvPartyType_' + repairId)?.value || '');
|
|
fd.append('recv_party_manufacturer_id', document.getElementById('recvPartyMfr_' + repairId)?.value || '');
|
|
fd.append('recv_party_custom', document.getElementById('recvPartyCustom_'+ repairId)?.value || '');
|
|
fd.append('cost_amount', document.getElementById('costAmount_' + repairId)?.value || 0);
|
|
fd.append('cost_status', document.getElementById('costStatus_' + repairId)?.value || 'pending');
|
|
try {
|
|
await API.post(`/costs/repair/${repairId}`, fd);
|
|
alert('✅ 출장비 처리가 저장되었습니다.');
|
|
load();
|
|
} catch(e) {
|
|
const err = document.getElementById('costErr_' + repairId);
|
|
if (err) { err.textContent = e.message; err.style.display = 'block'; }
|
|
}
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|