Files
TK-FB-Project/web-ui/pages/work/daily-patrol.html
Hyungi Ahn 90d3e32992 feat: 일일순회점검 시스템 구축 및 관리 기능 개선
- 일일순회점검 시스템 신규 구현
  - DB 테이블: patrol_checklist_items, daily_patrol_sessions, patrol_check_records, workplace_items, item_types
  - API: /api/patrol/* 엔드포인트
  - 프론트엔드: 지도 기반 작업장 점검 UI

- 설비 관리 기능 개선
  - 구매 관련 필드 추가 (구매일, 가격, 공급업체 등)
  - 설비 코드 자동 생성 (TKP-XXX 형식)

- 작업장 관리 개선
  - 레이아웃 이미지 업로드 기능
  - 마커 위치 저장 기능

- 부서 관리 기능 추가
- 사이드바 네비게이션 카테고리 재구성
- 이미지 401 오류 수정 (정적 파일 경로 처리)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 11:41:41 +09:00

211 lines
8.7 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="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/admin-pages.css?v=8">
<link rel="stylesheet" href="/css/daily-patrol.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">
<div class="page-title-section">
<h1 class="page-title">일일순회점검</h1>
<p class="page-description">작업장을 순회하며 안전 및 정리정돈 상태를 점검합니다</p>
</div>
</div>
<!-- 점검 세션 선택 영역 -->
<div class="patrol-session-selector">
<div class="patrol-date-time">
<div class="form-group">
<label for="patrolDate">점검 일자</label>
<input type="date" id="patrolDate" class="form-control">
</div>
<div class="form-group">
<label>점검 시간대</label>
<div class="patrol-time-buttons">
<button type="button" class="patrol-time-btn active" data-time="morning">오전</button>
<button type="button" class="patrol-time-btn" data-time="afternoon">오후</button>
</div>
</div>
<div class="form-group">
<label for="categorySelect">공장 선택</label>
<select id="categorySelect" class="form-control">
<option value="">공장 선택...</option>
</select>
</div>
<button type="button" class="btn btn-primary" id="startPatrolBtn" onclick="startPatrol()">
순회점검 시작
</button>
</div>
<!-- 오늘 점검 현황 요약 -->
<div id="todayStatusSummary" class="today-status-summary">
<!-- JS에서 렌더링 -->
</div>
</div>
<!-- 점검 진행 영역 (세션 시작 후 표시) -->
<div id="patrolArea" class="patrol-area" style="display: none;">
<!-- 세션 정보 -->
<div id="sessionInfo" class="session-info-bar">
<!-- JS에서 렌더링 -->
</div>
<!-- 지도 및 체크리스트 영역 -->
<div class="patrol-content">
<!-- 작업장 지도 (좌측) -->
<div class="patrol-map-section">
<div class="map-header">
<h3>작업장 지도</h3>
<div class="map-legend">
<span class="legend-item completed"><span class="dot"></span> 점검완료</span>
<span class="legend-item in-progress"><span class="dot"></span> 점검중</span>
<span class="legend-item pending"><span class="dot"></span> 미점검</span>
</div>
</div>
<div id="patrolMapContainer" class="patrol-map-container">
<!-- 지도 이미지 및 작업장 마커 -->
</div>
<!-- 작업장 목록 (지도 대신 사용 가능) -->
<div id="workplaceListContainer" class="workplace-list-container">
<!-- 작업장 목록 -->
</div>
</div>
<!-- 체크리스트 영역 (우측) -->
<div class="patrol-checklist-section">
<div id="checklistHeader" class="checklist-header">
<h3>체크리스트</h3>
<p class="checklist-subtitle">작업장을 선택하면 체크리스트가 표시됩니다</p>
</div>
<div id="checklistContent" class="checklist-content">
<!-- 체크리스트 항목들 -->
<div class="checklist-placeholder">
<p>좌측 지도에서 점검할 작업장을 선택해주세요</p>
</div>
</div>
<div id="checklistActions" class="checklist-actions" style="display: none;">
<button type="button" class="btn btn-secondary" onclick="saveChecklistDraft()">임시저장</button>
<button type="button" class="btn btn-primary" onclick="saveChecklist()">저장 후 다음</button>
</div>
</div>
</div>
<!-- 물품 현황 영역 -->
<div id="itemsSection" class="items-section" style="display: none;">
<div class="items-header">
<h3><span id="selectedWorkplaceName">작업장</span> 물품 현황</h3>
<button type="button" class="btn btn-sm btn-outline" onclick="toggleItemEditMode()">
<span id="itemEditModeText">편집모드</span>
</button>
</div>
<div id="itemsMapContainer" class="items-map-container">
<!-- 작업장 상세 지도 및 물품 마커 -->
</div>
<div id="itemsLegend" class="items-legend">
<!-- 물품 유형 범례 -->
</div>
</div>
<!-- 순회점검 완료 버튼 -->
<div class="patrol-complete-section">
<div class="form-group">
<label for="patrolNotes">특이사항</label>
<textarea id="patrolNotes" class="form-control" rows="2" placeholder="순회 중 발견한 특이사항을 기록하세요..."></textarea>
</div>
<button type="button" class="btn btn-success btn-lg" onclick="completePatrol()">
순회점검 완료
</button>
</div>
</div>
</div>
</main>
</div>
<!-- 물품 추가/수정 모달 -->
<div id="itemModal" class="modal-overlay" style="display: none;">
<div class="modal-container" style="max-width: 500px;">
<div class="modal-header">
<h2 id="itemModalTitle">물품 추가</h2>
<button class="btn-close" onclick="closeItemModal()">&times;</button>
</div>
<div class="modal-body">
<form id="itemForm">
<input type="hidden" id="itemId">
<div class="form-group">
<label for="itemType">물품 유형 *</label>
<select id="itemType" class="form-control" required>
<!-- JS에서 옵션 추가 -->
</select>
</div>
<div class="form-group">
<label for="itemName">물품명/설명</label>
<input type="text" id="itemName" class="form-control" placeholder="예: A사 용기 10개">
</div>
<div class="form-group">
<label for="itemQuantity">수량</label>
<input type="number" id="itemQuantity" class="form-control" value="1" min="1">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeItemModal()">취소</button>
<button type="button" class="btn btn-danger" id="deleteItemBtn" onclick="deleteItem()" style="display: none;">삭제</button>
<button type="button" class="btn btn-primary" onclick="saveItem()">저장</button>
</div>
</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/daily-patrol.js?v=1"></script>
</body>
</html>