3f870b247d
기존: non-admin 페이지는 무조건 표시 (publicPageKeys 개념) 변경: accessibleKeys에 포함된 페이지만 표시 (대시보드 그리드와 동일 기준) - publicPageKeys 로직 제거, accessibleKeys 단일 기준 통합 - external 링크(부적합, 휴가 신청 등)는 항상 표시 - dashboard, profile.* 페이지는 전체 공개 유지 - tkfb-core.js 캐시 버스팅 v=2026040103 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
336 lines
23 KiB
HTML
336 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>작업장 현황 - TK 공장관리</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/static/css/tkfb.css?v=2026033108">
|
|
<link rel="stylesheet" href="/css/modern-dashboard.css?v=2026031401">
|
|
<link rel="stylesheet" href="/css/mobile.css?v=2026031601">
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<header class="bg-orange-700 text-white sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-14">
|
|
<div class="flex items-center gap-3">
|
|
<button id="mobileMenuBtn" class="lg:hidden text-orange-200 hover:text-white">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
<i class="fas fa-industry text-xl text-orange-200"></i>
|
|
<h1 class="text-lg font-semibold">TK 공장관리</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span id="headerUserName" class="text-sm hidden sm:block">-</span>
|
|
<div id="headerUserAvatar" class="w-8 h-8 bg-orange-600 rounded-full flex items-center justify-center text-sm font-bold">-</div>
|
|
<button onclick="doLogout()" class="text-orange-200 hover:text-white" title="로그아웃">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mobile overlay -->
|
|
<div id="mobileOverlay" class="hidden fixed inset-0 bg-black/50 z-30 lg:hidden"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 fade-in">
|
|
<div class="flex gap-6">
|
|
<!-- Sidebar Nav -->
|
|
<nav id="sideNav" class="hidden lg:flex flex-col gap-1 w-52 flex-shrink-0 pt-2 fixed lg:static z-40 bg-white lg:bg-transparent p-4 lg:p-0 rounded-lg lg:rounded-none shadow-lg lg:shadow-none top-14 left-0 bottom-0 overflow-y-auto"></nav>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<!-- 모바일 대시보드 (작업장 리스트 뷰) -->
|
|
<section id="mobileDashboardView" class="mobile-dashboard-view" style="display:none;">
|
|
<div class="md-date-header">
|
|
<span class="md-date-label">금일 현황</span>
|
|
<time class="md-date-value" id="mDateValue"></time>
|
|
</div>
|
|
<div class="md-category-tabs" id="mCategoryTabs"></div>
|
|
<div class="md-workplace-list" id="mWorkplaceList"></div>
|
|
</section>
|
|
|
|
<!-- 작업장 현황 -->
|
|
<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 w-full sm:w-auto">
|
|
<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; display: none;">
|
|
<canvas id="workplaceMapCanvas" style="width: 100%; max-width: 100%; cursor: pointer; border: 2px solid #d1d5db; border-radius: 0.5rem;"></canvas>
|
|
<div id="mapLegend" style="position: absolute; top: 16px; right: 16px; background: white; padding: 16px; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
|
<h4 style="font-size: 0.875rem; 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: 0.875rem;">작업 중 (내부 작업자)</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: 0.875rem;">방문 예정 (외부 인원)</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: 0.875rem;">작업 + 방문</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mapPlaceholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; color: #6b7280;">
|
|
<div style="font-size: 48px; margin-bottom: 16px;">🏭</div>
|
|
<h3 style="margin-bottom: 8px;">공장을 선택하세요</h3>
|
|
<p style="font-size: 0.875rem;">위에서 공장을 선택하면 작업장 현황을 확인할 수 있습니다.</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: #6b7280;">
|
|
<div style="font-size: 48px; margin-bottom: 12px;">✅</div>
|
|
<p>임시 이동된 설비가 없습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</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;">
|
|
<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>
|
|
<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>
|
|
<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" onchange="onRepairTypeChange()"><option value="">선택하세요</option></select></div>
|
|
<div class="form-group" id="newRepairTypeGroup" style="display:none;"><label>새 유형 이름</label><input type="text" id="newRepairTypeName" class="form-control" placeholder="새로운 수리 유형 입력"></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>
|
|
|
|
<script src="/static/js/tkfb-core.js?v=2026040103"></script>
|
|
<script src="/js/api-base.js?v=2026031401"></script>
|
|
<script type="module" src="/js/modern-dashboard.js?v=2026031401"></script>
|
|
<script type="module" src="/js/group-leader-dashboard.js?v=2026031401"></script>
|
|
<script src="/js/workplace-status.js?v=2026031401"></script>
|
|
<script src="/js/mobile-dashboard.js?v=2026031401"></script>
|
|
<script>initAuth();</script>
|
|
</body>
|
|
</html>
|