feat: 설비 상세 패널 및 임시 이동 기능 구현
- 설비 마커 클릭 시 슬라이드 패널로 상세 정보 표시 - 설비 사진 업로드/삭제 기능 - 설비 임시 이동 기능 (3단계 지도 기반 선택) - Step 1: 공장 선택 - Step 2: 레이아웃 지도에서 작업장 선택 - Step 3: 상세 지도에서 위치 선택 - 설비 외부 반출/반입 기능 - 설비 수리 신청 기능 (기존 신고 시스템 연동) - DB 마이그레이션 추가 (사진, 임시이동, 외부반출 테이블) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
509
web-ui/css/equipment-detail.css
Normal file
509
web-ui/css/equipment-detail.css
Normal file
@@ -0,0 +1,509 @@
|
||||
/* equipment-detail.css - 설비 상세 페이지 스타일 */
|
||||
|
||||
/* 헤더 */
|
||||
.eq-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.eq-detail-header .page-title-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.eq-header-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-header-meta {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.eq-status-badge {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-status-badge.active { background: #d1fae5; color: #065f46; }
|
||||
.eq-status-badge.maintenance { background: #fef3c7; color: #92400e; }
|
||||
.eq-status-badge.repair_needed { background: #fee2e2; color: #991b1b; }
|
||||
.eq-status-badge.inactive { background: #e5e7eb; color: #374151; }
|
||||
.eq-status-badge.external { background: #dbeafe; color: #1e40af; }
|
||||
.eq-status-badge.repair_external { background: #ede9fe; color: #5b21b6; }
|
||||
|
||||
/* 기본 정보 카드 */
|
||||
.eq-info-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.eq-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.eq-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-info-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-info-value {
|
||||
font-size: 0.9375rem;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* 섹션 */
|
||||
.eq-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.eq-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.eq-section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 사진 그리드 */
|
||||
.eq-photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.eq-photo-item {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eq-photo-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.eq-photo-item:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.eq-photo-delete {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.eq-photo-item:hover .eq-photo-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.eq-photo-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* 위치 정보 */
|
||||
.eq-location-card {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eq-location-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-location-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-location-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.eq-location-value {
|
||||
font-size: 0.875rem;
|
||||
color: #111827;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-location-value.eq-moved {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.eq-map-preview {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eq-map-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.eq-map-marker {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #dc2626;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 액션 버튼 */
|
||||
.eq-action-buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-action .btn-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-move {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
.btn-move:hover { background: #bfdbfe; }
|
||||
|
||||
.btn-repair {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.btn-repair:hover { background: #fde68a; }
|
||||
|
||||
.btn-export {
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
.btn-export:hover { background: #ddd6fe; }
|
||||
|
||||
/* 이력 리스트 */
|
||||
.eq-history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.eq-history-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.875rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eq-history-date {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.eq-history-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.eq-history-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-history-detail {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.eq-history-status {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-history-status.pending { background: #fef3c7; color: #92400e; }
|
||||
.eq-history-status.in_progress { background: #dbeafe; color: #1e40af; }
|
||||
.eq-history-status.completed { background: #d1fae5; color: #065f46; }
|
||||
.eq-history-status.exported { background: #ede9fe; color: #5b21b6; }
|
||||
.eq-history-status.returned { background: #d1fae5; color: #065f46; }
|
||||
|
||||
.eq-history-empty {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.eq-history-action {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eq-history-action:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
/* 모달 스타일 추가 */
|
||||
.photo-preview-container {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photo-preview {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.move-step {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.move-instruction {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.move-map-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.move-map-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.move-marker {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #dc2626;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.repair-photo-previews {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.repair-photo-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 사진 확대 보기 */
|
||||
.photo-view-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photo-view-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photo-view-image {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 버튼 스타일 */
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid #d1d5db;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.eq-detail-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eq-location-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eq-map-preview {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.eq-action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.eq-info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
790
web-ui/js/equipment-detail.js
Normal file
790
web-ui/js/equipment-detail.js
Normal file
@@ -0,0 +1,790 @@
|
||||
/**
|
||||
* equipment-detail.js - 설비 상세 페이지 스크립트
|
||||
*/
|
||||
|
||||
// 전역 변수
|
||||
let currentEquipment = null;
|
||||
let equipmentId = null;
|
||||
let workplaces = [];
|
||||
let factories = [];
|
||||
let selectedMovePosition = null;
|
||||
let repairPhotoBases = [];
|
||||
|
||||
// 상태 라벨
|
||||
const STATUS_LABELS = {
|
||||
active: '정상 가동',
|
||||
maintenance: '점검 중',
|
||||
repair_needed: '수리 필요',
|
||||
inactive: '비활성',
|
||||
external: '외부 반출',
|
||||
repair_external: '수리 외주'
|
||||
};
|
||||
|
||||
// 페이지 초기화
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// URL에서 equipment_id 추출
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
equipmentId = urlParams.get('id');
|
||||
|
||||
if (!equipmentId) {
|
||||
alert('설비 ID가 필요합니다.');
|
||||
goBack();
|
||||
return;
|
||||
}
|
||||
|
||||
// API 설정 후 데이터 로드
|
||||
waitForApiConfig().then(() => {
|
||||
loadEquipmentData();
|
||||
loadFactories();
|
||||
loadRepairCategories();
|
||||
});
|
||||
});
|
||||
|
||||
// API 설정 대기
|
||||
function waitForApiConfig() {
|
||||
return new Promise(resolve => {
|
||||
const check = setInterval(() => {
|
||||
if (window.API_BASE_URL) {
|
||||
clearInterval(check);
|
||||
resolve();
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
|
||||
// 뒤로가기
|
||||
function goBack() {
|
||||
if (document.referrer && document.referrer.includes(window.location.host)) {
|
||||
history.back();
|
||||
} else {
|
||||
window.location.href = '/pages/admin/equipments.html';
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 설비 데이터 로드
|
||||
// ==========================================
|
||||
|
||||
async function loadEquipmentData() {
|
||||
try {
|
||||
const response = await axios.get(`/equipments/${equipmentId}`);
|
||||
if (response.data.success) {
|
||||
currentEquipment = response.data.data;
|
||||
renderEquipmentInfo();
|
||||
loadPhotos();
|
||||
loadRepairHistory();
|
||||
loadExternalLogs();
|
||||
loadMoveLogs();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('설비 정보 로드 실패:', error);
|
||||
alert('설비 정보를 불러오는데 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
function renderEquipmentInfo() {
|
||||
const eq = currentEquipment;
|
||||
|
||||
// 헤더
|
||||
document.getElementById('equipmentTitle').textContent = `[${eq.equipment_code}] ${eq.equipment_name}`;
|
||||
document.getElementById('equipmentMeta').textContent = `${eq.model_name || '-'} | ${eq.manufacturer || '-'}`;
|
||||
|
||||
// 상태 배지
|
||||
const statusBadge = document.getElementById('equipmentStatus');
|
||||
statusBadge.textContent = STATUS_LABELS[eq.status] || eq.status;
|
||||
statusBadge.className = `eq-status-badge ${eq.status}`;
|
||||
|
||||
// 기본 정보 카드
|
||||
document.getElementById('equipmentInfoCard').innerHTML = `
|
||||
<div class="eq-info-grid">
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">관리번호</span>
|
||||
<span class="eq-info-value">${eq.equipment_code}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">설비명</span>
|
||||
<span class="eq-info-value">${eq.equipment_name}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">모델명</span>
|
||||
<span class="eq-info-value">${eq.model_name || '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">규격</span>
|
||||
<span class="eq-info-value">${eq.specifications || '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">제조사</span>
|
||||
<span class="eq-info-value">${eq.manufacturer || '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">구입처</span>
|
||||
<span class="eq-info-value">${eq.supplier || '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">구입일</span>
|
||||
<span class="eq-info-value">${eq.installation_date ? formatDate(eq.installation_date) : '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">구입가격</span>
|
||||
<span class="eq-info-value">${eq.purchase_price ? Number(eq.purchase_price).toLocaleString() + '원' : '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">시리얼번호</span>
|
||||
<span class="eq-info-value">${eq.serial_number || '-'}</span>
|
||||
</div>
|
||||
<div class="eq-info-item">
|
||||
<span class="eq-info-label">설비유형</span>
|
||||
<span class="eq-info-value">${eq.equipment_type || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 위치 정보
|
||||
const originalLocation = eq.workplace_name
|
||||
? `${eq.category_name || ''} > ${eq.workplace_name}`
|
||||
: '미배정';
|
||||
document.getElementById('originalLocation').textContent = originalLocation;
|
||||
|
||||
if (eq.is_temporarily_moved && eq.current_workplace_id) {
|
||||
document.getElementById('currentLocationRow').style.display = 'flex';
|
||||
// 현재 위치 작업장 이름 로드 필요
|
||||
loadCurrentWorkplaceName(eq.current_workplace_id);
|
||||
}
|
||||
|
||||
// 지도 미리보기 (작업장 지도 표시)
|
||||
renderMapPreview();
|
||||
}
|
||||
|
||||
async function loadCurrentWorkplaceName(workplaceId) {
|
||||
try {
|
||||
const response = await axios.get(`/workplaces/${workplaceId}`);
|
||||
if (response.data.success) {
|
||||
const wp = response.data.data;
|
||||
document.getElementById('currentLocation').textContent = `${wp.category_name || ''} > ${wp.workplace_name}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('현재 위치 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderMapPreview() {
|
||||
const eq = currentEquipment;
|
||||
const mapPreview = document.getElementById('mapPreview');
|
||||
|
||||
if (!eq.workplace_id) {
|
||||
mapPreview.innerHTML = '<div style="padding: 1rem; text-align: center; color: #9ca3af;">위치 미배정</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 작업장 지도 정보 로드
|
||||
axios.get(`/workplaces/${eq.workplace_id}`).then(response => {
|
||||
if (response.data.success && response.data.data.map_image_url) {
|
||||
const wp = response.data.data;
|
||||
const xPercent = eq.is_temporarily_moved ? eq.current_map_x_percent : eq.map_x_percent;
|
||||
const yPercent = eq.is_temporarily_moved ? eq.current_map_y_percent : eq.map_y_percent;
|
||||
|
||||
mapPreview.innerHTML = `
|
||||
<img src="${window.API_BASE_URL}${wp.map_image_url}" alt="작업장 지도">
|
||||
<div class="eq-map-marker" style="left: ${xPercent}%; top: ${yPercent}%;"></div>
|
||||
`;
|
||||
} else {
|
||||
mapPreview.innerHTML = '<div style="padding: 1rem; text-align: center; color: #9ca3af;">지도 없음</div>';
|
||||
}
|
||||
}).catch(() => {
|
||||
mapPreview.innerHTML = '<div style="padding: 1rem; text-align: center; color: #9ca3af;">지도 로드 실패</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 사진 관리
|
||||
// ==========================================
|
||||
|
||||
async function loadPhotos() {
|
||||
try {
|
||||
const response = await axios.get(`/equipments/${equipmentId}/photos`);
|
||||
if (response.data.success) {
|
||||
renderPhotos(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('사진 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPhotos(photos) {
|
||||
const grid = document.getElementById('photoGrid');
|
||||
|
||||
if (!photos || photos.length === 0) {
|
||||
grid.innerHTML = '<div class="eq-photo-empty">등록된 사진이 없습니다</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = photos.map(photo => `
|
||||
<div class="eq-photo-item" onclick="viewPhoto('${window.API_BASE_URL}${photo.photo_path}')">
|
||||
<img src="${window.API_BASE_URL}${photo.photo_path}" alt="${photo.description || '설비 사진'}">
|
||||
<button class="eq-photo-delete" onclick="event.stopPropagation(); deletePhoto(${photo.photo_id})">×</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function openPhotoModal() {
|
||||
document.getElementById('photoInput').value = '';
|
||||
document.getElementById('photoDescription').value = '';
|
||||
document.getElementById('photoPreviewContainer').style.display = 'none';
|
||||
document.getElementById('photoModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closePhotoModal() {
|
||||
document.getElementById('photoModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function previewPhoto(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
document.getElementById('photoPreview').src = e.target.result;
|
||||
document.getElementById('photoPreviewContainer').style.display = 'block';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadPhoto() {
|
||||
const fileInput = document.getElementById('photoInput');
|
||||
const description = document.getElementById('photoDescription').value;
|
||||
|
||||
if (!fileInput.files[0]) {
|
||||
alert('사진을 선택하세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async e => {
|
||||
try {
|
||||
const response = await axios.post(`/equipments/${equipmentId}/photos`, {
|
||||
photo_base64: e.target.result,
|
||||
description: description
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
closePhotoModal();
|
||||
loadPhotos();
|
||||
alert('사진이 추가되었습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('사진 업로드 실패:', error);
|
||||
alert('사진 업로드에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(fileInput.files[0]);
|
||||
}
|
||||
|
||||
async function deletePhoto(photoId) {
|
||||
if (!confirm('이 사진을 삭제하시겠습니까?')) return;
|
||||
|
||||
try {
|
||||
const response = await axios.delete(`/equipments/photos/${photoId}`);
|
||||
if (response.data.success) {
|
||||
loadPhotos();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('사진 삭제 실패:', error);
|
||||
alert('사진 삭제에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
function viewPhoto(url) {
|
||||
document.getElementById('photoViewImage').src = url;
|
||||
document.getElementById('photoViewModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closePhotoView() {
|
||||
document.getElementById('photoViewModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 임시 이동
|
||||
// ==========================================
|
||||
|
||||
async function loadFactories() {
|
||||
try {
|
||||
const response = await axios.get('/workplace-categories');
|
||||
if (response.data.success) {
|
||||
factories = response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('공장 목록 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function openMoveModal() {
|
||||
// 공장 선택 초기화
|
||||
const factorySelect = document.getElementById('moveFactorySelect');
|
||||
factorySelect.innerHTML = '<option value="">공장을 선택하세요</option>';
|
||||
factories.forEach(f => {
|
||||
factorySelect.innerHTML += `<option value="${f.category_id}">${f.category_name}</option>`;
|
||||
});
|
||||
|
||||
document.getElementById('moveWorkplaceSelect').innerHTML = '<option value="">작업장을 선택하세요</option>';
|
||||
document.getElementById('moveStep2').style.display = 'none';
|
||||
document.getElementById('moveStep1').style.display = 'block';
|
||||
document.getElementById('moveConfirmBtn').disabled = true;
|
||||
document.getElementById('moveReason').value = '';
|
||||
selectedMovePosition = null;
|
||||
|
||||
document.getElementById('moveModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeMoveModal() {
|
||||
document.getElementById('moveModal').style.display = 'none';
|
||||
}
|
||||
|
||||
async function loadMoveWorkplaces() {
|
||||
const categoryId = document.getElementById('moveFactorySelect').value;
|
||||
const workplaceSelect = document.getElementById('moveWorkplaceSelect');
|
||||
|
||||
workplaceSelect.innerHTML = '<option value="">작업장을 선택하세요</option>';
|
||||
|
||||
if (!categoryId) return;
|
||||
|
||||
try {
|
||||
const response = await axios.get(`/workplaces?category_id=${categoryId}`);
|
||||
if (response.data.success) {
|
||||
workplaces = response.data.data;
|
||||
workplaces.forEach(wp => {
|
||||
if (wp.map_image_url) {
|
||||
workplaceSelect.innerHTML += `<option value="${wp.workplace_id}">${wp.workplace_name}</option>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('작업장 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function loadMoveMap() {
|
||||
const workplaceId = document.getElementById('moveWorkplaceSelect').value;
|
||||
|
||||
if (!workplaceId) {
|
||||
document.getElementById('moveStep2').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const workplace = workplaces.find(wp => wp.workplace_id == workplaceId);
|
||||
if (!workplace || !workplace.map_image_url) {
|
||||
alert('선택한 작업장에 지도가 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
const container = document.getElementById('moveMapContainer');
|
||||
container.innerHTML = `<img src="${window.API_BASE_URL}${workplace.map_image_url}" id="moveMapImage" onclick="onMoveMapClick(event)">`;
|
||||
|
||||
document.getElementById('moveStep2').style.display = 'block';
|
||||
}
|
||||
|
||||
function onMoveMapClick(event) {
|
||||
const img = event.target;
|
||||
const rect = img.getBoundingClientRect();
|
||||
const x = ((event.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((event.clientY - rect.top) / rect.height) * 100;
|
||||
|
||||
selectedMovePosition = { x, y };
|
||||
|
||||
// 기존 마커 제거
|
||||
const container = document.getElementById('moveMapContainer');
|
||||
const existingMarker = container.querySelector('.move-marker');
|
||||
if (existingMarker) existingMarker.remove();
|
||||
|
||||
// 새 마커 추가
|
||||
const marker = document.createElement('div');
|
||||
marker.className = 'move-marker';
|
||||
marker.style.left = x + '%';
|
||||
marker.style.top = y + '%';
|
||||
container.appendChild(marker);
|
||||
|
||||
document.getElementById('moveConfirmBtn').disabled = false;
|
||||
}
|
||||
|
||||
async function confirmMove() {
|
||||
const targetWorkplaceId = document.getElementById('moveWorkplaceSelect').value;
|
||||
const reason = document.getElementById('moveReason').value;
|
||||
|
||||
if (!targetWorkplaceId || !selectedMovePosition) {
|
||||
alert('이동할 위치를 선택하세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`/equipments/${equipmentId}/move`, {
|
||||
target_workplace_id: targetWorkplaceId,
|
||||
target_x_percent: selectedMovePosition.x.toFixed(2),
|
||||
target_y_percent: selectedMovePosition.y.toFixed(2),
|
||||
from_workplace_id: currentEquipment.workplace_id,
|
||||
from_x_percent: currentEquipment.map_x_percent,
|
||||
from_y_percent: currentEquipment.map_y_percent,
|
||||
reason: reason
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
closeMoveModal();
|
||||
loadEquipmentData();
|
||||
loadMoveLogs();
|
||||
alert('설비가 임시 이동되었습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('이동 실패:', error);
|
||||
alert('설비 이동에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
async function returnToOriginal() {
|
||||
if (!confirm('설비를 원래 위치로 복귀시키겠습니까?')) return;
|
||||
|
||||
try {
|
||||
const response = await axios.post(`/equipments/${equipmentId}/return`);
|
||||
if (response.data.success) {
|
||||
loadEquipmentData();
|
||||
loadMoveLogs();
|
||||
alert('설비가 원위치로 복귀되었습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('복귀 실패:', error);
|
||||
alert('설비 복귀에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 수리 신청
|
||||
// ==========================================
|
||||
|
||||
let repairCategories = [];
|
||||
|
||||
async function loadRepairCategories() {
|
||||
try {
|
||||
const response = await axios.get('/equipments/repair-categories');
|
||||
if (response.data.success) {
|
||||
repairCategories = response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('수리 항목 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function openRepairModal() {
|
||||
const select = document.getElementById('repairItemSelect');
|
||||
select.innerHTML = '<option value="">선택하세요</option>';
|
||||
repairCategories.forEach(item => {
|
||||
select.innerHTML += `<option value="${item.item_id}">${item.item_name}</option>`;
|
||||
});
|
||||
|
||||
document.getElementById('repairDescription').value = '';
|
||||
document.getElementById('repairPhotoInput').value = '';
|
||||
document.getElementById('repairPhotoPreviews').innerHTML = '';
|
||||
repairPhotoBases = [];
|
||||
|
||||
document.getElementById('repairModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeRepairModal() {
|
||||
document.getElementById('repairModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function previewRepairPhotos(event) {
|
||||
const files = event.target.files;
|
||||
const previewContainer = document.getElementById('repairPhotoPreviews');
|
||||
previewContainer.innerHTML = '';
|
||||
repairPhotoBases = [];
|
||||
|
||||
Array.from(files).forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
repairPhotoBases.push(e.target.result);
|
||||
const img = document.createElement('img');
|
||||
img.src = e.target.result;
|
||||
img.className = 'repair-photo-preview';
|
||||
previewContainer.appendChild(img);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
async function submitRepairRequest() {
|
||||
const itemId = document.getElementById('repairItemSelect').value;
|
||||
const description = document.getElementById('repairDescription').value;
|
||||
|
||||
if (!description) {
|
||||
alert('수리 내용을 입력하세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`/equipments/${equipmentId}/repair-request`, {
|
||||
item_id: itemId || null,
|
||||
description: description,
|
||||
photo_base64_list: repairPhotoBases,
|
||||
workplace_id: currentEquipment.workplace_id
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
closeRepairModal();
|
||||
loadEquipmentData();
|
||||
loadRepairHistory();
|
||||
alert('수리 신청이 접수되었습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('수리 신청 실패:', error);
|
||||
alert('수리 신청에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRepairHistory() {
|
||||
try {
|
||||
const response = await axios.get(`/equipments/${equipmentId}/repair-history`);
|
||||
if (response.data.success) {
|
||||
renderRepairHistory(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('수리 이력 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderRepairHistory(history) {
|
||||
const container = document.getElementById('repairHistory');
|
||||
|
||||
if (!history || history.length === 0) {
|
||||
container.innerHTML = '<div class="eq-history-empty">수리 이력이 없습니다</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = history.map(h => `
|
||||
<div class="eq-history-item">
|
||||
<span class="eq-history-date">${formatDate(h.created_at)}</span>
|
||||
<div class="eq-history-content">
|
||||
<div class="eq-history-title">${h.item_name || '수리 요청'}</div>
|
||||
<div class="eq-history-detail">${h.description || '-'}</div>
|
||||
</div>
|
||||
<span class="eq-history-status ${h.status}">${getRepairStatusLabel(h.status)}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function getRepairStatusLabel(status) {
|
||||
const labels = {
|
||||
pending: '대기중',
|
||||
in_progress: '처리중',
|
||||
completed: '완료',
|
||||
closed: '종료'
|
||||
};
|
||||
return labels[status] || status;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 외부 반출
|
||||
// ==========================================
|
||||
|
||||
function openExportModal() {
|
||||
document.getElementById('exportDate').value = new Date().toISOString().slice(0, 10);
|
||||
document.getElementById('expectedReturnDate').value = '';
|
||||
document.getElementById('exportDestination').value = '';
|
||||
document.getElementById('exportReason').value = '';
|
||||
document.getElementById('exportNotes').value = '';
|
||||
document.getElementById('isRepairExport').checked = false;
|
||||
|
||||
document.getElementById('exportModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeExportModal() {
|
||||
document.getElementById('exportModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function toggleRepairFields() {
|
||||
// 현재는 특별한 필드 차이 없음
|
||||
}
|
||||
|
||||
async function submitExport() {
|
||||
const exportDate = document.getElementById('exportDate').value;
|
||||
const expectedReturnDate = document.getElementById('expectedReturnDate').value;
|
||||
const destination = document.getElementById('exportDestination').value;
|
||||
const reason = document.getElementById('exportReason').value;
|
||||
const notes = document.getElementById('exportNotes').value;
|
||||
const isRepair = document.getElementById('isRepairExport').checked;
|
||||
|
||||
if (!exportDate) {
|
||||
alert('반출일을 입력하세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`/equipments/${equipmentId}/export`, {
|
||||
export_date: exportDate,
|
||||
expected_return_date: expectedReturnDate || null,
|
||||
destination: destination,
|
||||
reason: reason,
|
||||
notes: notes,
|
||||
is_repair: isRepair
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
closeExportModal();
|
||||
loadEquipmentData();
|
||||
loadExternalLogs();
|
||||
alert('외부 반출이 등록되었습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('반출 등록 실패:', error);
|
||||
alert('반출 등록에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExternalLogs() {
|
||||
try {
|
||||
const response = await axios.get(`/equipments/${equipmentId}/external-logs`);
|
||||
if (response.data.success) {
|
||||
renderExternalLogs(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('외부반출 이력 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderExternalLogs(logs) {
|
||||
const container = document.getElementById('externalHistory');
|
||||
|
||||
if (!logs || logs.length === 0) {
|
||||
container.innerHTML = '<div class="eq-history-empty">외부반출 이력이 없습니다</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = logs.map(log => {
|
||||
const dateRange = log.actual_return_date
|
||||
? `${formatDate(log.export_date)} ~ ${formatDate(log.actual_return_date)}`
|
||||
: `${formatDate(log.export_date)} ~ (미반입)`;
|
||||
|
||||
const isReturned = !!log.actual_return_date;
|
||||
const statusClass = isReturned ? 'returned' : 'exported';
|
||||
const statusLabel = isReturned ? '반입완료' : '반출중';
|
||||
|
||||
return `
|
||||
<div class="eq-history-item">
|
||||
<span class="eq-history-date">${dateRange}</span>
|
||||
<div class="eq-history-content">
|
||||
<div class="eq-history-title">${log.destination || '외부'}</div>
|
||||
<div class="eq-history-detail">${log.reason || '-'}</div>
|
||||
</div>
|
||||
<span class="eq-history-status ${statusClass}">${statusLabel}</span>
|
||||
${!isReturned ? `<button class="eq-history-action" onclick="openReturnModal(${log.log_id})">반입처리</button>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function openReturnModal(logId) {
|
||||
document.getElementById('returnLogId').value = logId;
|
||||
document.getElementById('returnDate').value = new Date().toISOString().slice(0, 10);
|
||||
document.getElementById('returnStatus').value = 'active';
|
||||
document.getElementById('returnNotes').value = '';
|
||||
|
||||
document.getElementById('returnModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeReturnModal() {
|
||||
document.getElementById('returnModal').style.display = 'none';
|
||||
}
|
||||
|
||||
async function submitReturn() {
|
||||
const logId = document.getElementById('returnLogId').value;
|
||||
const returnDate = document.getElementById('returnDate').value;
|
||||
const newStatus = document.getElementById('returnStatus').value;
|
||||
const notes = document.getElementById('returnNotes').value;
|
||||
|
||||
if (!returnDate) {
|
||||
alert('반입일을 입력하세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(`/equipments/external-logs/${logId}/return`, {
|
||||
return_date: returnDate,
|
||||
new_status: newStatus,
|
||||
notes: notes
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
closeReturnModal();
|
||||
loadEquipmentData();
|
||||
loadExternalLogs();
|
||||
alert('반입 처리가 완료되었습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('반입 처리 실패:', error);
|
||||
alert('반입 처리에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 이동 이력
|
||||
// ==========================================
|
||||
|
||||
async function loadMoveLogs() {
|
||||
try {
|
||||
const response = await axios.get(`/equipments/${equipmentId}/move-logs`);
|
||||
if (response.data.success) {
|
||||
renderMoveLogs(response.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('이동 이력 로드 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderMoveLogs(logs) {
|
||||
const container = document.getElementById('moveHistory');
|
||||
|
||||
if (!logs || logs.length === 0) {
|
||||
container.innerHTML = '<div class="eq-history-empty">이동 이력이 없습니다</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = logs.map(log => {
|
||||
const typeLabel = log.move_type === 'temporary' ? '임시이동' : '복귀';
|
||||
const location = log.move_type === 'temporary'
|
||||
? `${log.to_workplace_name || '-'}`
|
||||
: `원위치 복귀`;
|
||||
|
||||
return `
|
||||
<div class="eq-history-item">
|
||||
<span class="eq-history-date">${formatDateTime(log.moved_at)}</span>
|
||||
<div class="eq-history-content">
|
||||
<div class="eq-history-title">${typeLabel}: ${location}</div>
|
||||
<div class="eq-history-detail">${log.reason || '-'} (${log.moved_by_name || '시스템'})</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 유틸리티
|
||||
// ==========================================
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}).replace(/\. /g, '-').replace('.', '');
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
344
web-ui/pages/admin/equipment-detail.html
Normal file
344
web-ui/pages/admin/equipment-detail.html
Normal file
@@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>설비 상세 | (주)테크니컬코리아</title>
|
||||
<link rel="stylesheet" href="/css/design-system.css">
|
||||
<link rel="stylesheet" href="/css/admin-pages.css?v=8">
|
||||
<link rel="stylesheet" href="/css/equipment-detail.css?v=1">
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<script src="/js/api-base.js"></script>
|
||||
<script src="/js/app-init.js?v=2" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 네비게이션 바 -->
|
||||
<div id="navbar-container"></div>
|
||||
|
||||
<!-- 메인 레이아웃 -->
|
||||
<div class="page-container">
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="main-content">
|
||||
<div class="dashboard-main">
|
||||
<!-- 뒤로가기 & 제목 -->
|
||||
<div class="page-header eq-detail-header">
|
||||
<div class="page-title-section">
|
||||
<button class="btn-back" onclick="goBack()">
|
||||
<span class="back-arrow">←</span>
|
||||
<span>뒤로</span>
|
||||
</button>
|
||||
<div class="eq-header-info">
|
||||
<h1 class="page-title" id="equipmentTitle">설비 상세</h1>
|
||||
<div class="eq-header-meta" id="equipmentMeta"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eq-status-badge" id="equipmentStatus"></div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 기본 정보 카드 -->
|
||||
<div class="eq-info-card" id="equipmentInfoCard">
|
||||
<!-- JS에서 동적으로 렌더링 -->
|
||||
</div>
|
||||
|
||||
<!-- 사진 섹션 -->
|
||||
<div class="eq-section">
|
||||
<div class="eq-section-header">
|
||||
<h2 class="eq-section-title">설비 사진</h2>
|
||||
<button class="btn btn-sm btn-outline" onclick="openPhotoModal()">+ 사진 추가</button>
|
||||
</div>
|
||||
<div class="eq-photo-grid" id="photoGrid">
|
||||
<div class="eq-photo-empty">등록된 사진이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 위치 정보 섹션 -->
|
||||
<div class="eq-section">
|
||||
<div class="eq-section-header">
|
||||
<h2 class="eq-section-title">위치 정보</h2>
|
||||
</div>
|
||||
<div class="eq-location-card" id="locationCard">
|
||||
<div class="eq-location-info">
|
||||
<div class="eq-location-row">
|
||||
<span class="eq-location-label">원래 위치:</span>
|
||||
<span class="eq-location-value" id="originalLocation">-</span>
|
||||
</div>
|
||||
<div class="eq-location-row" id="currentLocationRow" style="display: none;">
|
||||
<span class="eq-location-label">현재 위치:</span>
|
||||
<span class="eq-location-value eq-moved" id="currentLocation">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eq-map-preview" id="mapPreview">
|
||||
<!-- 지도 미리보기 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 액션 버튼들 -->
|
||||
<div class="eq-action-buttons">
|
||||
<button class="btn btn-action btn-move" onclick="openMoveModal()">
|
||||
<span class="btn-icon">⇄</span>
|
||||
<span>임시이동</span>
|
||||
</button>
|
||||
<button class="btn btn-action btn-repair" onclick="openRepairModal()">
|
||||
<span class="btn-icon">🔧</span>
|
||||
<span>수리신청</span>
|
||||
</button>
|
||||
<button class="btn btn-action btn-export" onclick="openExportModal()">
|
||||
<span class="btn-icon">🚚</span>
|
||||
<span>외부반출</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 수리 이력 섹션 -->
|
||||
<div class="eq-section">
|
||||
<div class="eq-section-header">
|
||||
<h2 class="eq-section-title">수리 이력</h2>
|
||||
</div>
|
||||
<div class="eq-history-list" id="repairHistory">
|
||||
<div class="eq-history-empty">수리 이력이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 외부반출 이력 섹션 -->
|
||||
<div class="eq-section">
|
||||
<div class="eq-section-header">
|
||||
<h2 class="eq-section-title">외부반출 이력</h2>
|
||||
</div>
|
||||
<div class="eq-history-list" id="externalHistory">
|
||||
<div class="eq-history-empty">외부반출 이력이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 이동 이력 섹션 -->
|
||||
<div class="eq-section">
|
||||
<div class="eq-section-header">
|
||||
<h2 class="eq-section-title">이동 이력</h2>
|
||||
</div>
|
||||
<div class="eq-history-list" id="moveHistory">
|
||||
<div class="eq-history-empty">이동 이력이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 사진 추가 모달 -->
|
||||
<div id="photoModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-container" style="max-width: 500px;">
|
||||
<div class="modal-header">
|
||||
<h2>사진 추가</h2>
|
||||
<button class="btn-close" onclick="closePhotoModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>사진 선택</label>
|
||||
<input type="file" id="photoInput" accept="image/*" onchange="previewPhoto(event)">
|
||||
</div>
|
||||
<div class="photo-preview-container" id="photoPreviewContainer" style="display: none;">
|
||||
<img id="photoPreview" class="photo-preview">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>설명 (선택)</label>
|
||||
<input type="text" id="photoDescription" class="form-control" placeholder="사진 설명을 입력하세요">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closePhotoModal()">취소</button>
|
||||
<button type="button" class="btn btn-primary" onclick="uploadPhoto()">업로드</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 임시이동 모달 -->
|
||||
<div id="moveModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-container" style="max-width: 600px;">
|
||||
<div class="modal-header">
|
||||
<h2>설비 임시 이동</h2>
|
||||
<button class="btn-close" onclick="closeMoveModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="move-step" id="moveStep1">
|
||||
<div class="form-group">
|
||||
<label>이동할 공장 선택</label>
|
||||
<select id="moveFactorySelect" class="form-control" onchange="loadMoveWorkplaces()">
|
||||
<option value="">공장을 선택하세요</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>이동할 작업장 선택</label>
|
||||
<select id="moveWorkplaceSelect" class="form-control" onchange="loadMoveMap()">
|
||||
<option value="">작업장을 선택하세요</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="move-step" id="moveStep2" style="display: none;">
|
||||
<p class="move-instruction">지도에서 이동할 위치를 클릭하세요</p>
|
||||
<div class="move-map-container" id="moveMapContainer">
|
||||
<!-- 지도가 여기에 표시됨 -->
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>이동 사유 (선택)</label>
|
||||
<input type="text" id="moveReason" class="form-control" placeholder="이동 사유를 입력하세요">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeMoveModal()">취소</button>
|
||||
<button type="button" class="btn btn-primary" id="moveConfirmBtn" onclick="confirmMove()" disabled>이동 확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 수리신청 모달 -->
|
||||
<div id="repairModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-container" style="max-width: 500px;">
|
||||
<div class="modal-header">
|
||||
<h2>수리 신청</h2>
|
||||
<button class="btn-close" onclick="closeRepairModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>수리 유형</label>
|
||||
<select id="repairItemSelect" class="form-control">
|
||||
<option value="">선택하세요</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>상세 내용</label>
|
||||
<textarea id="repairDescription" class="form-control" rows="3" placeholder="수리가 필요한 내용을 상세히 적어주세요"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>사진 첨부 (선택)</label>
|
||||
<input type="file" id="repairPhotoInput" accept="image/*" multiple onchange="previewRepairPhotos(event)">
|
||||
<div class="repair-photo-previews" id="repairPhotoPreviews"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeRepairModal()">취소</button>
|
||||
<button type="button" class="btn btn-primary" onclick="submitRepairRequest()">신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 외부반출 모달 -->
|
||||
<div id="exportModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-container" style="max-width: 500px;">
|
||||
<div class="modal-header">
|
||||
<h2>외부 반출</h2>
|
||||
<button class="btn-close" onclick="closeExportModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="isRepairExport" onchange="toggleRepairFields()">
|
||||
<span>수리 외주 (외부 수리)</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반출일</label>
|
||||
<input type="date" id="exportDate" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반입 예정일</label>
|
||||
<input type="date" id="expectedReturnDate" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반출처 (업체명)</label>
|
||||
<input type="text" id="exportDestination" class="form-control" placeholder="예: 삼성정비">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반출 사유</label>
|
||||
<textarea id="exportReason" class="form-control" rows="2" placeholder="반출 사유를 입력하세요"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>비고</label>
|
||||
<textarea id="exportNotes" class="form-control" rows="2" placeholder="기타 메모사항"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeExportModal()">취소</button>
|
||||
<button type="button" class="btn btn-primary" onclick="submitExport()">반출 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 반입 모달 -->
|
||||
<div id="returnModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-container" style="max-width: 400px;">
|
||||
<div class="modal-header">
|
||||
<h2>설비 반입</h2>
|
||||
<button class="btn-close" onclick="closeReturnModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="returnLogId">
|
||||
<div class="form-group">
|
||||
<label>반입일</label>
|
||||
<input type="date" id="returnDate" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반입 후 상태</label>
|
||||
<select id="returnStatus" class="form-control">
|
||||
<option value="active">정상 가동</option>
|
||||
<option value="maintenance">점검 필요</option>
|
||||
<option value="repair_needed">추가 수리 필요</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>비고</label>
|
||||
<textarea id="returnNotes" class="form-control" rows="2" placeholder="반입 관련 메모"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeReturnModal()">취소</button>
|
||||
<button type="button" class="btn btn-primary" onclick="submitReturn()">반입 처리</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 사진 확대 모달 -->
|
||||
<div id="photoViewModal" class="modal-overlay" style="display: none;">
|
||||
<div class="photo-view-container" onclick="closePhotoView()">
|
||||
<button class="photo-view-close">×</button>
|
||||
<img id="photoViewImage" class="photo-view-image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script type="module">
|
||||
import '/js/api-config.js?v=3';
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const checkApiConfig = setInterval(() => {
|
||||
if (window.API_BASE_URL) {
|
||||
clearInterval(checkApiConfig);
|
||||
axios.defaults.baseURL = window.API_BASE_URL;
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) config.headers.Authorization = `Bearer ${token}`;
|
||||
return config;
|
||||
},
|
||||
error => Promise.reject(error)
|
||||
);
|
||||
axios.interceptors.response.use(
|
||||
response => response,
|
||||
error => {
|
||||
if (error.response?.status === 401) {
|
||||
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
|
||||
window.location.href = '/pages/login.html';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}, 50);
|
||||
})();
|
||||
</script>
|
||||
<script src="/js/equipment-detail.js?v=1"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -109,23 +109,346 @@
|
||||
<div class="toast-container" id="toastContainer"></div>
|
||||
|
||||
<!-- 작업장 상세 정보 모달 -->
|
||||
<div id="workplaceDetailModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center;">
|
||||
<div style="background: white; border-radius: var(--radius-lg); padding: 32px; max-width: 800px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-2xl);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
||||
<h2 id="modalWorkplaceName" style="margin: 0; font-size: var(--text-2xl); font-weight: 700;"></h2>
|
||||
<button class="btn btn-secondary btn-sm" onclick="closeWorkplaceModal()">닫기</button>
|
||||
<div id="workplaceDetailModal" class="workplace-modal-overlay">
|
||||
<div class="workplace-modal-container">
|
||||
<!-- 모달 헤더 -->
|
||||
<div class="workplace-modal-header">
|
||||
<div class="workplace-modal-title-section">
|
||||
<h2 id="modalWorkplaceName" class="workplace-modal-title"></h2>
|
||||
<p id="modalWorkplaceDesc" class="workplace-modal-subtitle"></p>
|
||||
</div>
|
||||
<button class="workplace-modal-close" onclick="closeWorkplaceModal()">×</button>
|
||||
</div>
|
||||
|
||||
<!-- 내부 작업자 -->
|
||||
<div id="internalWorkersSection" style="margin-bottom: 24px;">
|
||||
<h3 style="font-size: var(--text-lg); font-weight: 600; margin-bottom: 16px; color: var(--primary-600);">👷 내부 작업자</h3>
|
||||
<div id="internalWorkersList"></div>
|
||||
<!-- 모달 바디 -->
|
||||
<div class="workplace-modal-body">
|
||||
<!-- 탭 네비게이션 -->
|
||||
<div class="workplace-modal-tabs">
|
||||
<button class="workplace-tab active" data-tab="overview" onclick="switchWorkplaceTab('overview')">
|
||||
<span class="tab-icon">📊</span>
|
||||
<span class="tab-text">현황 개요</span>
|
||||
</button>
|
||||
<button class="workplace-tab" data-tab="workers" onclick="switchWorkplaceTab('workers')">
|
||||
<span class="tab-icon">👷</span>
|
||||
<span class="tab-text">작업자</span>
|
||||
<span id="workerCountBadge" class="tab-badge">0</span>
|
||||
</button>
|
||||
<button class="workplace-tab" data-tab="visitors" onclick="switchWorkplaceTab('visitors')">
|
||||
<span class="tab-icon">🚪</span>
|
||||
<span class="tab-text">방문자</span>
|
||||
<span id="visitorCountBadge" class="tab-badge">0</span>
|
||||
</button>
|
||||
<button class="workplace-tab" data-tab="detail-map" onclick="switchWorkplaceTab('detail-map')">
|
||||
<span class="tab-icon">🗺️</span>
|
||||
<span class="tab-text">상세 지도</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 탭 콘텐츠 -->
|
||||
<div class="workplace-tab-contents">
|
||||
<!-- 현황 개요 탭 -->
|
||||
<div id="tab-overview" class="workplace-tab-content active">
|
||||
<!-- 요약 카드 -->
|
||||
<div class="workplace-summary-cards">
|
||||
<div class="summary-card workers">
|
||||
<div class="summary-icon">👷</div>
|
||||
<div class="summary-info">
|
||||
<span class="summary-value" id="summaryWorkerCount">0</span>
|
||||
<span class="summary-label">작업자</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card visitors">
|
||||
<div class="summary-icon">🚪</div>
|
||||
<div class="summary-info">
|
||||
<span class="summary-value" id="summaryVisitorCount">0</span>
|
||||
<span class="summary-label">방문자</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card tasks">
|
||||
<div class="summary-icon">📋</div>
|
||||
<div class="summary-info">
|
||||
<span class="summary-value" id="summaryTaskCount">0</span>
|
||||
<span class="summary-label">작업 수</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 현재 작업 목록 -->
|
||||
<div class="workplace-section">
|
||||
<h4 class="section-title">
|
||||
<span class="section-icon">🔧</span>
|
||||
진행 중인 작업
|
||||
</h4>
|
||||
<div id="currentTasksList" class="current-tasks-list">
|
||||
<p class="empty-message">진행 중인 작업이 없습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 현황 (간략) -->
|
||||
<div class="workplace-section">
|
||||
<h4 class="section-title">
|
||||
<span class="section-icon">⚙️</span>
|
||||
설비 현황
|
||||
</h4>
|
||||
<div id="equipmentSummary" class="equipment-summary">
|
||||
<p class="empty-message">설비 정보를 불러오는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 작업자 탭 -->
|
||||
<div id="tab-workers" class="workplace-tab-content">
|
||||
<div id="internalWorkersList" class="workers-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- 방문자 탭 -->
|
||||
<div id="tab-visitors" class="workplace-tab-content">
|
||||
<div id="externalVisitorsList" class="visitors-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 지도 탭 -->
|
||||
<div id="tab-detail-map" class="workplace-tab-content">
|
||||
<div id="detailMapContainer" class="detail-map-container">
|
||||
<div class="detail-map-placeholder">
|
||||
<span class="placeholder-icon">🗺️</span>
|
||||
<p>상세 지도를 불러오는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="detailMapLegend" class="detail-map-legend"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 외부 방문자 -->
|
||||
<div id="externalVisitorsSection">
|
||||
<h3 style="font-size: var(--text-lg); font-weight: 600; margin-bottom: 16px; color: var(--purple-600);">🚪 외부 방문자</h3>
|
||||
<div id="externalVisitorsList"></div>
|
||||
<!-- 모달 푸터 -->
|
||||
<div class="workplace-modal-footer">
|
||||
<button class="btn btn-outline" onclick="openPatrolPage()">
|
||||
<span>🔍</span> 순회점검
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="closeWorkplaceModal()">닫기</button>
|
||||
</div>
|
||||
|
||||
<!-- 설비 상세 슬라이드 패널 -->
|
||||
<div id="equipmentSlidePanel" class="equipment-slide-panel">
|
||||
<div class="slide-panel-header">
|
||||
<button class="slide-panel-back" onclick="closeEquipmentPanel()">←</button>
|
||||
<div class="slide-panel-title-section">
|
||||
<h3 id="panelEquipmentTitle" class="slide-panel-title"></h3>
|
||||
<span id="panelEquipmentStatus" class="slide-panel-status"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide-panel-body">
|
||||
<!-- 기본 정보 -->
|
||||
<div class="panel-section">
|
||||
<div class="panel-info-grid" id="panelEquipmentInfo"></div>
|
||||
</div>
|
||||
|
||||
<!-- 사진 -->
|
||||
<div class="panel-section">
|
||||
<div class="panel-section-header">
|
||||
<h4>설비 사진</h4>
|
||||
<button class="btn-icon-sm" onclick="openPanelPhotoUpload()">+</button>
|
||||
</div>
|
||||
<div class="panel-photo-grid" id="panelPhotoGrid">
|
||||
<div class="panel-empty">등록된 사진이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 액션 버튼 -->
|
||||
<div class="panel-actions">
|
||||
<button class="panel-action-btn move" onclick="openPanelMoveModal()">
|
||||
<span>↔</span> 임시이동
|
||||
</button>
|
||||
<button class="panel-action-btn repair" onclick="openPanelRepairModal()">
|
||||
<span>🔧</span> 수리신청
|
||||
</button>
|
||||
<button class="panel-action-btn export" onclick="openPanelExportModal()">
|
||||
<span>🚚</span> 외부반출
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 수리 이력 -->
|
||||
<div class="panel-section">
|
||||
<h4 class="panel-section-title">수리 이력</h4>
|
||||
<div id="panelRepairHistory" class="panel-history-list">
|
||||
<div class="panel-empty">수리 이력이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 외부반출 이력 -->
|
||||
<div class="panel-section">
|
||||
<h4 class="panel-section-title">외부반출 이력</h4>
|
||||
<div id="panelExternalHistory" class="panel-history-list">
|
||||
<div class="panel-empty">외부반출 이력이 없습니다</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 사진 업로드 모달 -->
|
||||
<div id="panelPhotoModal" class="mini-modal-overlay" style="display:none;">
|
||||
<div class="mini-modal">
|
||||
<div class="mini-modal-header">
|
||||
<h4>사진 추가</h4>
|
||||
<button onclick="closePanelPhotoModal()">×</button>
|
||||
</div>
|
||||
<div class="mini-modal-body">
|
||||
<input type="file" id="panelPhotoInput" accept="image/*" onchange="previewPanelPhoto(event)">
|
||||
<div id="panelPhotoPreview" class="mini-photo-preview"></div>
|
||||
<input type="text" id="panelPhotoDesc" class="form-control" placeholder="설명 (선택)">
|
||||
</div>
|
||||
<div class="mini-modal-footer">
|
||||
<button class="btn btn-secondary btn-sm" onclick="closePanelPhotoModal()">취소</button>
|
||||
<button class="btn btn-primary btn-sm" onclick="uploadPanelPhoto()">업로드</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 임시이동 모달 -->
|
||||
<div id="panelMoveModal" class="mini-modal-overlay" style="display:none;">
|
||||
<div class="mini-modal" style="max-width:700px;">
|
||||
<div class="mini-modal-header">
|
||||
<h4 id="panelMoveTitle">설비 임시 이동</h4>
|
||||
<button onclick="closePanelMoveModal()">×</button>
|
||||
</div>
|
||||
<div class="mini-modal-body" style="padding:0;">
|
||||
<!-- Step 1: 공장 선택 (대분류 지도) -->
|
||||
<div id="moveStep1" class="move-step-content">
|
||||
<div class="move-step-header">
|
||||
<span class="step-badge">1</span>
|
||||
<span>공장 선택</span>
|
||||
</div>
|
||||
<div class="move-factory-grid" id="moveFactoryGrid">
|
||||
<!-- 공장 카드들 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: 작업장 선택 (공장 레이아웃 지도) -->
|
||||
<div id="moveStep2" class="move-step-content" style="display:none;">
|
||||
<div class="move-step-header">
|
||||
<button class="btn-step-back" onclick="moveBackToStep1()">←</button>
|
||||
<span class="step-badge">2</span>
|
||||
<span id="moveStep2Title">작업장 선택</span>
|
||||
</div>
|
||||
<p class="move-help-text">지도에서 이동할 작업장을 클릭하세요</p>
|
||||
<div class="move-layout-map" id="moveLayoutMapContainer"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: 위치 선택 (상세 지도) -->
|
||||
<div id="moveStep3" class="move-step-content" style="display:none;">
|
||||
<div class="move-step-header">
|
||||
<button class="btn-step-back" onclick="moveBackToStep2()">←</button>
|
||||
<span class="step-badge">3</span>
|
||||
<span id="moveStep3Title">위치 선택</span>
|
||||
</div>
|
||||
<p class="move-help-text">지도에서 설비를 배치할 위치를 클릭하세요</p>
|
||||
<div class="move-detail-map" id="moveDetailMapContainer"></div>
|
||||
<div class="form-group" style="padding:12px;">
|
||||
<input type="text" id="panelMoveReason" class="form-control" placeholder="이동 사유 (선택)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-modal-footer">
|
||||
<button class="btn btn-secondary btn-sm" onclick="closePanelMoveModal()">취소</button>
|
||||
<button class="btn btn-primary btn-sm" id="panelMoveConfirmBtn" onclick="confirmPanelMove()" disabled>이동 확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 수리신청 모달 -->
|
||||
<div id="panelRepairModal" class="mini-modal-overlay" style="display:none;">
|
||||
<div class="mini-modal">
|
||||
<div class="mini-modal-header">
|
||||
<h4>수리 신청</h4>
|
||||
<button onclick="closePanelRepairModal()">×</button>
|
||||
</div>
|
||||
<div class="mini-modal-body">
|
||||
<div class="form-group">
|
||||
<label>수리 유형</label>
|
||||
<select id="panelRepairItem" class="form-control">
|
||||
<option value="">선택하세요</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>상세 내용</label>
|
||||
<textarea id="panelRepairDesc" class="form-control" rows="3" placeholder="수리 필요 내용"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>사진 첨부</label>
|
||||
<input type="file" id="panelRepairPhotoInput" accept="image/*" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-modal-footer">
|
||||
<button class="btn btn-secondary btn-sm" onclick="closePanelRepairModal()">취소</button>
|
||||
<button class="btn btn-primary btn-sm" onclick="submitPanelRepair()">신청</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 외부반출 모달 -->
|
||||
<div id="panelExportModal" class="mini-modal-overlay" style="display:none;">
|
||||
<div class="mini-modal">
|
||||
<div class="mini-modal-header">
|
||||
<h4>외부 반출</h4>
|
||||
<button onclick="closePanelExportModal()">×</button>
|
||||
</div>
|
||||
<div class="mini-modal-body">
|
||||
<div class="form-group">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="panelIsRepairExport"> 수리 외주
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반출일</label>
|
||||
<input type="date" id="panelExportDate" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반입 예정일</label>
|
||||
<input type="date" id="panelExpectedReturn" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반출처</label>
|
||||
<input type="text" id="panelExportDest" class="form-control" placeholder="업체명">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반출 사유</label>
|
||||
<textarea id="panelExportReason" class="form-control" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-modal-footer">
|
||||
<button class="btn btn-secondary btn-sm" onclick="closePanelExportModal()">취소</button>
|
||||
<button class="btn btn-primary btn-sm" onclick="submitPanelExport()">반출</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설비 반입 모달 -->
|
||||
<div id="panelReturnModal" class="mini-modal-overlay" style="display:none;">
|
||||
<div class="mini-modal" style="max-width:350px;">
|
||||
<div class="mini-modal-header">
|
||||
<h4>설비 반입</h4>
|
||||
<button onclick="closePanelReturnModal()">×</button>
|
||||
</div>
|
||||
<div class="mini-modal-body">
|
||||
<input type="hidden" id="panelReturnLogId">
|
||||
<div class="form-group">
|
||||
<label>반입일</label>
|
||||
<input type="date" id="panelReturnDate" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>반입 후 상태</label>
|
||||
<select id="panelReturnStatus" class="form-control">
|
||||
<option value="active">정상 가동</option>
|
||||
<option value="maintenance">점검 필요</option>
|
||||
<option value="repair_needed">추가 수리 필요</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-modal-footer">
|
||||
<button class="btn btn-secondary btn-sm" onclick="closePanelReturnModal()">취소</button>
|
||||
<button class="btn btn-primary btn-sm" onclick="submitPanelReturn()">반입</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user