d1aec517a6
- 대시보드 하단에 임시 이동된 설비 카드 섹션 추가 - 작업장 모달에 '이동 설비' 탭 추가 - 이 작업장으로 이동해 온 설비 표시 - 다른 곳으로 이동한 설비 표시 - 설비 마커에 이동 상태 색상 구분 (주황색 점선 + 깜빡임) - 원위치 복귀 기능 - 사이드바 기본값을 접힌 상태로 변경 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
510 lines
22 KiB
HTML
510 lines
22 KiB
HTML
<!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="preconnect" href="http://localhost:20005" crossorigin>
|
|
<link rel="preload" href="/css/design-system.css" as="style">
|
|
<link rel="preload" href="/js/api-base.js" as="script">
|
|
<link rel="preload" href="/js/app-init.js?v=2" as="script">
|
|
|
|
<!-- 모던 디자인 시스템 적용 -->
|
|
<link rel="stylesheet" href="/css/design-system.css">
|
|
<link rel="stylesheet" href="/css/modern-dashboard.css?v=2">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
|
|
<!-- 최적화된 로딩: API 설정 → 앱 초기화 (병렬 컴포넌트 로딩) -->
|
|
<script src="/js/api-base.js"></script>
|
|
<script src="/js/app-init.js?v=2" defer></script>
|
|
<script type="module" src="/js/modern-dashboard.js?v=10" defer></script>
|
|
<script type="module" src="/js/group-leader-dashboard.js?v=1" defer></script>
|
|
<script src="/js/workplace-status.js" defer></script>
|
|
<!-- instant.page: 링크 호버 시 페이지 프리로딩 -->
|
|
<script src="https://instant.page/5.2.0" type="module"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="dashboard-container">
|
|
|
|
<!-- 네비게이션 헤더 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<main class="dashboard-main">
|
|
|
|
<!-- 작업장 현황 -->
|
|
<section class="workplace-status-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="card-title">작업장 현황</h2>
|
|
<div class="flex items-center" style="gap: 12px;">
|
|
<select id="categorySelect" class="form-select" style="width: 200px;">
|
|
<option value="">공장을 선택하세요</option>
|
|
</select>
|
|
<button class="btn btn-primary btn-sm" id="refreshMapBtn">
|
|
새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- 지도 영역 -->
|
|
<div id="workplaceMapContainer" style="position: relative; min-height: 500px; display: none;">
|
|
<canvas id="workplaceMapCanvas" style="width: 100%; max-width: 100%; cursor: pointer; border: 2px solid var(--gray-300); border-radius: var(--radius-md);"></canvas>
|
|
<div id="mapLegend" style="position: absolute; top: 16px; right: 16px; background: white; padding: 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-md);">
|
|
<h4 style="font-size: var(--text-sm); font-weight: 700; margin-bottom: 12px;">범례</h4>
|
|
<div style="display: flex; flex-direction: column; gap: 8px;">
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<div style="width: 16px; height: 16px; background: rgba(59, 130, 246, 0.3); border: 2px solid rgb(59, 130, 246); border-radius: 4px;"></div>
|
|
<span style="font-size: var(--text-sm);">작업 중 (내부 작업자)</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<div style="width: 16px; height: 16px; background: rgba(168, 85, 247, 0.3); border: 2px solid rgb(168, 85, 247); border-radius: 4px;"></div>
|
|
<span style="font-size: var(--text-sm);">방문 예정 (외부 인원)</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<div style="width: 16px; height: 16px; background: rgba(34, 197, 94, 0.3); border: 2px solid rgb(34, 197, 94); border-radius: 4px;"></div>
|
|
<span style="font-size: var(--text-sm);">작업 + 방문</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 안내 메시지 -->
|
|
<div id="mapPlaceholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; color: var(--gray-500);">
|
|
<div style="font-size: 48px; margin-bottom: 16px;">🏭</div>
|
|
<h3 style="margin-bottom: 8px;">공장을 선택하세요</h3>
|
|
<p style="font-size: var(--text-sm);">위에서 공장을 선택하면 작업장 현황을 확인할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 임시 이동된 설비 현황 -->
|
|
<section class="moved-equipment-section" style="margin-top: 24px;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="card-title">🚚 임시 이동된 설비</h2>
|
|
<button class="btn btn-outline btn-sm" onclick="loadMovedEquipments()">새로고침</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="movedEquipmentList" class="moved-equipment-grid">
|
|
<!-- 동적 로드 -->
|
|
</div>
|
|
<div id="noMovedEquipment" style="display: none; text-align: center; padding: 40px; color: var(--gray-500);">
|
|
<div style="font-size: 48px; margin-bottom: 12px;">✅</div>
|
|
<p>임시 이동된 설비가 없습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- 푸터 -->
|
|
<footer class="dashboard-footer">
|
|
<div class="footer-content">
|
|
<p class="footer-text">
|
|
© 2025 (주)테크니컬코리아. 모든 권리 보유.
|
|
</p>
|
|
<div class="footer-links">
|
|
<a href="#" class="footer-link">도움말</a>
|
|
<a href="#" class="footer-link">문의하기</a>
|
|
<a href="#" class="footer-link">개인정보처리방침</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- 알림 토스트 -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<!-- 작업장 상세 정보 모달 -->
|
|
<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 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>
|
|
<button class="workplace-tab" data-tab="moved-eq" onclick="switchWorkplaceTab('moved-eq')">
|
|
<span class="tab-icon">🚚</span>
|
|
<span class="tab-text">이동 설비</span>
|
|
<span id="movedEqCountBadge" class="tab-badge" style="display:none;">0</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 id="tab-moved-eq" class="workplace-tab-content">
|
|
<div class="moved-eq-tab-content">
|
|
<!-- 이 작업장으로 이동해 온 설비 -->
|
|
<div class="workplace-section">
|
|
<h4 class="section-title">
|
|
<span class="section-icon">📥</span>
|
|
이 작업장으로 이동해 온 설비
|
|
</h4>
|
|
<div id="movedInEquipmentList" class="moved-eq-list">
|
|
<p class="empty-message">없음</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 이 작업장에서 다른 곳으로 이동한 설비 -->
|
|
<div class="workplace-section">
|
|
<h4 class="section-title">
|
|
<span class="section-icon">📤</span>
|
|
다른 곳으로 이동한 설비
|
|
</h4>
|
|
<div id="movedOutEquipmentList" class="moved-eq-list">
|
|
<p class="empty-message">없음</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
</body>
|
|
|
|
</html> |