bd23e00232
- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드) - 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계) - 클릭 가능한 워크플로우 박스와 상세 페이지 연결 - DevonThink 스타일 적용 및 반응형 디자인 - 구매/물류팀 용어 통일 및 프레젠테이션 업데이트
1167 lines
60 KiB
HTML
1167 lines
60 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 Project - 통합 프로젝트 관리 시스템</title>
|
||
<link rel="stylesheet" href="styles/main.css">
|
||
<link rel="stylesheet" href="styles/devonthink.css">
|
||
</head>
|
||
<body>
|
||
<!-- 사이드바 -->
|
||
<div class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1>TK Project</h1>
|
||
<p class="version">v1.0 Demo</p>
|
||
</div>
|
||
|
||
<nav class="sidebar-nav">
|
||
<div class="nav-section">
|
||
<h3>프로젝트 관리</h3>
|
||
<ul>
|
||
<li><a href="#" onclick="showPage('project-management')" class="nav-item active">
|
||
<span class="nav-icon">🏢</span>
|
||
프로젝트 관리
|
||
</a></li>
|
||
<li><a href="#" onclick="showPage('project-registration')" class="nav-item">
|
||
<span class="nav-icon">📋</span>
|
||
프로젝트 등록
|
||
</a></li>
|
||
<li><a href="#" onclick="showPage('production-meeting')" class="nav-item">
|
||
<span class="nav-icon">🏭</span>
|
||
생산회의록
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<h3>자재 관리</h3>
|
||
<ul>
|
||
<li><a href="#" onclick="showPage('incoming-inspection')" class="nav-item">
|
||
<span class="nav-icon">📦</span>
|
||
입고 검수
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<h3>생산 관리</h3>
|
||
<ul>
|
||
<li><a href="#" onclick="showPage('production-work')" class="nav-item">
|
||
<span class="nav-icon">🔧</span>
|
||
생산팀 작업
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<h3>워크플로우</h3>
|
||
<ul>
|
||
<li><a href="#" onclick="showPage('workflow-overview')" class="nav-item">
|
||
<span class="nav-icon">🔄</span>
|
||
전체 워크플로우
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="user-info">
|
||
<div class="user-avatar">김</div>
|
||
<div class="user-details">
|
||
<div class="user-name">김그룹장</div>
|
||
<div class="user-role">생산팀</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 메인 컨텐츠 -->
|
||
<div class="main-content">
|
||
<!-- 프로젝트 관리 페이지 -->
|
||
<div id="project-management" class="page active">
|
||
<div class="simple-project-selector">
|
||
<h1>TK Project</h1>
|
||
<p>프로젝트를 선택하여 관리를 시작하세요</p>
|
||
|
||
<div class="project-select-box">
|
||
<select id="project-select" onchange="selectProject(this.value)">
|
||
<option value="">프로젝트를 선택하세요</option>
|
||
<option value="TK-2024-015">ABC 공장 배관공사 (TK-2024-015)</option>
|
||
<option value="TK-2024-016">DEF 플랜트 배관 설치 (TK-2024-016)</option>
|
||
<option value="TK-2024-017">GHI 정유 공장 개보수 (TK-2024-017)</option>
|
||
<option value="TK-2024-012">JKL 화학 공장 신설 (TK-2024-012)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="project-actions" id="project-actions" style="display: none;">
|
||
<button class="btn btn-primary" onclick="showPage('production-meeting')">🏭 생산회의록</button>
|
||
<button class="btn btn-primary" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
|
||
<button class="btn btn-primary" onclick="showPage('production-work')">🔧 생산팀 작업</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 프로젝트 등록 페이지 -->
|
||
<div id="project-registration" class="page">
|
||
<div class="page-header">
|
||
<h2>프로젝트 등록 요청</h2>
|
||
<p class="page-description">새로운 프로젝트의 기본 정보를 입력하여 등록을 요청합니다.</p>
|
||
</div>
|
||
|
||
<div class="project-registration-container">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>프로젝트 기본 정보</h3>
|
||
<span class="status-badge status-active">신규 등록</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<form class="project-form">
|
||
<div class="form-group">
|
||
<label>프로젝트명 *</label>
|
||
<input type="text" id="project-name" placeholder="예: ABC 공장 배관공사" class="form-input" required>
|
||
</div>
|
||
|
||
<div class="customer-section">
|
||
<h4>고객사 정보</h4>
|
||
<div class="customer-grid">
|
||
<div class="form-group">
|
||
<label>엔드유저 *</label>
|
||
<input type="text" id="end-user" placeholder="예: ABC 케미칼" class="form-input" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>EPC / 실제 고객사</label>
|
||
<input type="text" id="epc-customer" placeholder="예: 대한엔지니어링 (선택사항)" class="form-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="delivery-section">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>납기일 *</label>
|
||
<input type="date" id="delivery-date" class="form-input" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>납품방식 *</label>
|
||
<select id="delivery-method" class="form-select" required>
|
||
<option value="">선택하세요</option>
|
||
<option value="현장납품">현장납품</option>
|
||
<option value="공장인도">공장인도</option>
|
||
<option value="부분납품">부분납품</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="auto-generated">
|
||
<div class="generated-preview">
|
||
<span class="label">생성될 Job No. (예시)</span>
|
||
<span class="value" id="preview-job-no">TK-2024-XXX</span>
|
||
</div>
|
||
<div class="generation-rule">
|
||
<small>* Job No.는 등록 승인 후 자동으로 부여됩니다 (TK-년도-순번)</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-secondary" onclick="clearForm()">🔄 초기화</button>
|
||
<button type="submit" class="btn btn-primary" id="submit-btn">📝 프로젝트 등록 요청</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 등록 요청 현황 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3>최근 등록 요청 현황</h3>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="request-list">
|
||
<div class="request-item status-approved">
|
||
<div class="request-info">
|
||
<div class="request-title">ABC 공장 배관공사</div>
|
||
<div class="request-details">
|
||
<span class="customer">ABC 케미칼</span>
|
||
<span class="delivery">현장납품</span>
|
||
<span class="date">납기: 2024-03-30</span>
|
||
</div>
|
||
</div>
|
||
<div class="request-status">
|
||
<span class="status-badge status-completed">승인완료</span>
|
||
<span class="job-no">TK-2024-015</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="request-item status-pending">
|
||
<div class="request-info">
|
||
<div class="request-title">DEF 플랜트 배관 설치</div>
|
||
<div class="request-details">
|
||
<span class="customer">DEF 화학</span>
|
||
<span class="delivery">공장인도</span>
|
||
<span class="date">납기: 2024-04-15</span>
|
||
</div>
|
||
</div>
|
||
<div class="request-status">
|
||
<span class="status-badge status-pending">검토중</span>
|
||
<span class="job-no">대기중</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="request-item status-review">
|
||
<div class="request-info">
|
||
<div class="request-title">GHI 정유 공장 개보수</div>
|
||
<div class="request-details">
|
||
<span class="customer">GHI 정유 / 한국엔지니어링</span>
|
||
<span class="delivery">부분납품</span>
|
||
<span class="date">납기: 2024-05-20</span>
|
||
</div>
|
||
</div>
|
||
<div class="request-status">
|
||
<span class="status-badge status-warning">추가정보 필요</span>
|
||
<span class="job-no">보류</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 생산회의록 페이지 -->
|
||
<div id="production-meeting" class="page">
|
||
<div class="page-header">
|
||
<h2>생산회의록 시스템</h2>
|
||
<p class="page-description">TK-2024-015 (ABC 공장 배관공사) 프로젝트 현황</p>
|
||
</div>
|
||
|
||
<!-- 공정표 (상단) -->
|
||
<div class="process-chart">
|
||
<h3>프로젝트 공정표</h3>
|
||
<div class="gantt-container">
|
||
<div class="process-item completed">
|
||
<div class="process-info">
|
||
<span class="process-name">설계</span>
|
||
<span class="process-responsible">박설계</span>
|
||
</div>
|
||
<div class="process-bar">
|
||
<div class="progress-fill" style="width: 100%"></div>
|
||
<span class="progress-text">100%</span>
|
||
</div>
|
||
<span class="process-date">2024-02-15</span>
|
||
</div>
|
||
|
||
<div class="process-item in-progress">
|
||
<div class="process-info">
|
||
<span class="process-name">구매</span>
|
||
<span class="process-responsible">김구매</span>
|
||
</div>
|
||
<div class="process-bar">
|
||
<div class="progress-fill" style="width: 85%"></div>
|
||
<span class="progress-text">85%</span>
|
||
</div>
|
||
<span class="process-date">2024-02-28</span>
|
||
</div>
|
||
|
||
<div class="process-item in-progress">
|
||
<div class="process-info">
|
||
<span class="process-name">제작</span>
|
||
<span class="process-responsible">이생산</span>
|
||
</div>
|
||
<div class="process-bar">
|
||
<div class="progress-fill" style="width: 60%"></div>
|
||
<span class="progress-text">60%</span>
|
||
</div>
|
||
<span class="process-date">2024-03-20</span>
|
||
</div>
|
||
|
||
<div class="process-item pending">
|
||
<div class="process-info">
|
||
<span class="process-name">검사</span>
|
||
<span class="process-responsible">최품질</span>
|
||
</div>
|
||
<div class="process-bar">
|
||
<div class="progress-fill" style="width: 0%"></div>
|
||
<span class="progress-text">대기</span>
|
||
</div>
|
||
<span class="process-date">2024-03-25</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="meeting-layout">
|
||
<!-- 캘린더 일정 (중앙 좌측) -->
|
||
<div class="schedule-section">
|
||
<h3>캘린더 일정</h3>
|
||
<div class="schedule-list">
|
||
<div class="schedule-item urgent">
|
||
<div class="schedule-date">09/20</div>
|
||
<div class="schedule-content">
|
||
<div class="schedule-title">도장 작업 출고</div>
|
||
<div class="schedule-type">외주출고</div>
|
||
<div class="schedule-memo">A구역 파이프 20본, B구역 밸브 5개</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="schedule-item normal">
|
||
<div class="schedule-date">09/22</div>
|
||
<div class="schedule-content">
|
||
<div class="schedule-title">압력시험</div>
|
||
<div class="schedule-type">검사일정</div>
|
||
<div class="schedule-memo">시험압력: 15bar, 30분간 유지</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 입고 예정 품목 (우측) -->
|
||
<div class="delivery-section">
|
||
<h3>입고 예정 품목</h3>
|
||
<div class="delivery-list">
|
||
<div class="delivery-item completed">
|
||
<span class="delivery-status">✅</span>
|
||
<div class="delivery-info">
|
||
<div class="delivery-name">파이프 4인치 x 50EA</div>
|
||
<div class="delivery-date">입고완료 - 09/10</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="delivery-item warning">
|
||
<span class="delivery-status">🟡</span>
|
||
<div class="delivery-info">
|
||
<div class="delivery-name">밸브 2인치 x 10EA</div>
|
||
<div class="delivery-date">입고예정 - 09/16</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="delivery-item delayed">
|
||
<span class="delivery-status">🔴</span>
|
||
<div class="delivery-info">
|
||
<div class="delivery-name">엘보 4인치 x 20EA</div>
|
||
<div class="delivery-date">지연 - 09/12 → 09/18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Follow-up 리스트 (하단) -->
|
||
<div class="followup-section">
|
||
<h3>Follow-up 리스트</h3>
|
||
<div class="followup-list">
|
||
<div class="followup-item priority-high">
|
||
<div class="followup-priority">🔴 긴급</div>
|
||
<div class="followup-content">
|
||
<div class="followup-title">밸브 A 납기 지연 대응</div>
|
||
<div class="followup-description">주 공급업체 생산 지연으로 대체 업체 검토 필요</div>
|
||
<div class="followup-meta">
|
||
<span class="followup-responsible">김구매</span>
|
||
<span class="followup-date">등록: 09/10 | 예상해결: 09/17</span>
|
||
</div>
|
||
</div>
|
||
<div class="followup-status">진행중</div>
|
||
</div>
|
||
|
||
<div class="followup-item priority-medium">
|
||
<div class="followup-priority">🟡 높음</div>
|
||
<div class="followup-content">
|
||
<div class="followup-title">용접 검사 일정 조정</div>
|
||
<div class="followup-description">고객사 일정 변경으로 검사일 재조정 필요</div>
|
||
<div class="followup-meta">
|
||
<span class="followup-responsible">최품질</span>
|
||
<span class="followup-date">등록: 09/12 | 예상해결: 09/20</span>
|
||
</div>
|
||
</div>
|
||
<div class="followup-status">검토중</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 입고 검수 페이지 -->
|
||
<div id="incoming-inspection" class="page">
|
||
<div class="page-header">
|
||
<h2>입고 검수 & 보관 관리</h2>
|
||
<p class="page-description">발주 정보 연동을 통한 입고 처리 및 보관 관리</p>
|
||
</div>
|
||
|
||
<!-- 발주 연동 대시보드 (상단) -->
|
||
<div class="purchase-dashboard">
|
||
<h3>발주 연동 입고 대시보드</h3>
|
||
<div class="purchase-list">
|
||
<div class="purchase-item status-pending">
|
||
<div class="purchase-info">
|
||
<div class="purchase-header">
|
||
<span class="po-number">PO-2024-0156</span>
|
||
<span class="purchase-status status-pending">입고대기</span>
|
||
</div>
|
||
<div class="purchase-details">
|
||
<div class="item-name">스테인리스 파이프 4인치 SCH40</div>
|
||
<div class="item-meta">수량: 50EA | 공급업체: 대한파이프 | 담당: 김구매</div>
|
||
<div class="item-dates">발주일: 2024-09-01 | 예정일: 2024-09-15</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-primary">검수 시작</button>
|
||
</div>
|
||
|
||
<div class="purchase-item status-inspecting">
|
||
<div class="purchase-info">
|
||
<div class="purchase-header">
|
||
<span class="po-number">PO-2024-0157</span>
|
||
<span class="purchase-status status-inspecting">검수중</span>
|
||
</div>
|
||
<div class="purchase-details">
|
||
<div class="item-name">게이트밸브 2인치 150LB</div>
|
||
<div class="item-meta">수량: 10EA | 공급업체: 코리아밸브 | 담당: 김구매</div>
|
||
<div class="item-dates">발주일: 2024-09-05 | 예정일: 2024-09-16</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-warning">검수 진행중</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="inspection-layout">
|
||
<!-- 검수 프로세스 (좌측) -->
|
||
<div class="inspection-process">
|
||
<h3>입고 검수 프로세스</h3>
|
||
|
||
<div class="process-steps">
|
||
<div class="step completed">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<h4>입고 확인</h4>
|
||
<ul class="checklist">
|
||
<li class="checked">✅ 납품서 확인</li>
|
||
<li class="checked">✅ 검사성적서 확인</li>
|
||
<li class="checked">✅ 포장 상태 체크</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step active">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<h4>검수 진행</h4>
|
||
<ul class="checklist">
|
||
<li class="checked">✅ 수량 검수 (10/10 EA)</li>
|
||
<li class="checked">✅ 외관 검사</li>
|
||
<li class="active">🔄 규격 검사 진행중</li>
|
||
<li>📷 사진 촬영 대기</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step pending">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<h4>검수 결과</h4>
|
||
<div class="result-options">
|
||
<button class="btn btn-success btn-sm">✅ 합격</button>
|
||
<button class="btn btn-danger btn-sm">❌ 불합격</button>
|
||
<button class="btn btn-warning btn-sm">📝 조건부 합격</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 보관 위치 관리 (우측) -->
|
||
<div class="storage-management">
|
||
<h3>보관 위치 관리</h3>
|
||
|
||
<div class="warehouse-zones">
|
||
<div class="zone-item">
|
||
<div class="zone-header">
|
||
<span class="zone-name">A구역 (파이프류)</span>
|
||
<span class="zone-capacity">75/100</span>
|
||
</div>
|
||
<div class="zone-shelves">
|
||
<div class="shelf available">A-1</div>
|
||
<div class="shelf occupied">A-2</div>
|
||
<div class="shelf available">A-3</div>
|
||
<div class="shelf occupied">A-4</div>
|
||
<div class="shelf available">A-5</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone-item">
|
||
<div class="zone-header">
|
||
<span class="zone-name">B구역 (밸브류)</span>
|
||
<span class="zone-capacity">45/80</span>
|
||
</div>
|
||
<div class="zone-shelves">
|
||
<div class="shelf available">B-1</div>
|
||
<div class="shelf available">B-2</div>
|
||
<div class="shelf occupied">B-3</div>
|
||
<div class="shelf available">B-4</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="storage-actions">
|
||
<div class="selected-location">
|
||
<span class="label">선택된 위치:</span>
|
||
<span class="location">B-2-중단</span>
|
||
</div>
|
||
<button class="btn btn-primary">📍 위치 지정 완료</button>
|
||
<button class="btn btn-secondary">🏷️ QR코드 라벨 출력</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 인수인계 현황 -->
|
||
<div class="handover-status">
|
||
<h3>인수인계 현황</h3>
|
||
<div class="handover-list">
|
||
<div class="handover-item">
|
||
<div class="item-info">
|
||
<span class="item-name">파이프 4인치</span>
|
||
<span class="item-location">A-3-상단</span>
|
||
</div>
|
||
<div class="quantity-info">
|
||
<span class="total">전체: 50EA</span>
|
||
<span class="handed">인수: 30EA</span>
|
||
<span class="remaining">잔량: 20EA</span>
|
||
</div>
|
||
<span class="handover-status-badge status-partial">부분인수</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 생산팀 작업 관리 페이지 -->
|
||
<div id="production-work" class="page">
|
||
<div class="page-header">
|
||
<h2>생산팀 작업 관리</h2>
|
||
<p class="page-description">김그룹장 - 용접팀 일일 작업 현황</p>
|
||
</div>
|
||
|
||
<div class="work-layout">
|
||
<!-- 일일 작업 현황 (좌측) -->
|
||
<div class="daily-work">
|
||
<h3>일일 작업 현황 입력</h3>
|
||
|
||
<div class="work-form">
|
||
<div class="form-section">
|
||
<h4>기본 정보</h4>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label>프로젝트</label>
|
||
<select class="form-select">
|
||
<option selected>TK-2024-015 (ABC 공장 배관공사)</option>
|
||
<option>TK-2024-016 (DEF 플랜트)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>작업 인원</label>
|
||
<input type="number" value="5" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>작업 내용</label>
|
||
<input type="text" value="메인 라인 파이프 용접" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>진행률</label>
|
||
<div class="progress-input">
|
||
<input type="range" min="0" max="100" value="75" class="progress-slider">
|
||
<span class="progress-value">75%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<h4>이슈 사항</h4>
|
||
<div class="issue-list">
|
||
<div class="issue-item">
|
||
<div class="issue-header">
|
||
<span class="issue-time">14:30</span>
|
||
<span class="issue-type type-material">자재부족</span>
|
||
<span class="issue-urgency urgency-high">높음</span>
|
||
</div>
|
||
<div class="issue-content">
|
||
<div class="issue-description">엘보 4인치 10EA 부족으로 작업 중단</div>
|
||
<div class="issue-solution">구매팀에 긴급 요청, 대체재 검토</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="issue-item">
|
||
<div class="issue-header">
|
||
<span class="issue-time">10:15</span>
|
||
<span class="issue-type type-quality">품질이슈</span>
|
||
<span class="issue-urgency urgency-medium">보통</span>
|
||
</div>
|
||
<div class="issue-content">
|
||
<div class="issue-description">용접부 기공 발견, 재작업 필요</div>
|
||
<div class="issue-solution">해당 부위 그라인딩 후 재용접</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-secondary">➕ 새 이슈 등록</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 자재 확인 (우측) -->
|
||
<div class="material-check">
|
||
<h3>자재 확인 기능</h3>
|
||
|
||
<div class="material-search">
|
||
<div class="search-input">
|
||
<input type="text" placeholder="Job No. 입력 (TK-2024-015)" class="form-input">
|
||
<button class="btn btn-primary">🔍 BOM 조회</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="material-list">
|
||
<div class="material-item status-available">
|
||
<div class="material-info">
|
||
<div class="material-name">파이프 4인치 SCH40</div>
|
||
<div class="material-details">필요: 50EA | 위치: A-3-상단</div>
|
||
</div>
|
||
<div class="material-status">
|
||
<span class="status-badge status-available">🟢 사용가능</span>
|
||
<span class="material-qty">45EA</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="material-item status-ordered">
|
||
<div class="material-info">
|
||
<div class="material-name">엘보 4인치 150LB</div>
|
||
<div class="material-details">필요: 20EA | 구매 진행 중</div>
|
||
</div>
|
||
<div class="material-status">
|
||
<span class="status-badge status-ordered">🟠 발주중</span>
|
||
<span class="material-date">입고예정: 09/18</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="material-item status-not-requested">
|
||
<div class="material-info">
|
||
<div class="material-name">플랜지 4인치 150LB</div>
|
||
<div class="material-details">필요: 15EA | 설계팀 구매 요청 대기</div>
|
||
</div>
|
||
<div class="material-status">
|
||
<span class="status-badge status-not-requested">⚫ 미요청</span>
|
||
<span class="material-note">사양 확정 대기</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="material-item status-ready">
|
||
<div class="material-info">
|
||
<div class="material-name">밸브 2인치 150LB</div>
|
||
<div class="material-details">필요: 5EA | 위치: B-2-중단</div>
|
||
</div>
|
||
<div class="material-status">
|
||
<span class="status-badge status-ready">🟡 입고완료</span>
|
||
<button class="btn btn-sm btn-primary">인수 처리</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="material-actions">
|
||
<div class="action-note">
|
||
<p><strong>⚠️ 중요:</strong> 생산팀은 자재 요청을 하지 않습니다.</p>
|
||
<p>부족한 자재 발견시 → 데일리 체크에 이슈 등록</p>
|
||
</div>
|
||
<button class="btn btn-warning">📝 데일리 체크에 기록</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 워크플로우 개요 페이지 -->
|
||
<div id="workflow-overview" class="page">
|
||
<div class="page-header">
|
||
<h2>🔄 TK Project 전체 워크플로우</h2>
|
||
<p class="page-description">수주부터 납품까지의 전체 프로젝트 라이프사이클 관리 시스템</p>
|
||
</div>
|
||
|
||
<div class="workflow-overview-container">
|
||
<div class="workflow-flowchart">
|
||
<!-- 첫 번째 행 -->
|
||
<div class="workflow-row">
|
||
<div class="workflow-box" onclick="showPage('workflow-stage-1')">
|
||
<div class="box-number">1</div>
|
||
<div class="box-icon">📋</div>
|
||
<div class="box-title">준비 단계</div>
|
||
<div class="box-subtitle">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow horizontal">→</div>
|
||
|
||
<div class="workflow-box" onclick="showPage('workflow-stage-2')">
|
||
<div class="box-number">2</div>
|
||
<div class="box-icon">🚀</div>
|
||
<div class="box-title">프로젝트 진행 (발주)</div>
|
||
<div class="box-subtitle">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow horizontal">→</div>
|
||
|
||
<div class="workflow-box" onclick="showPage('workflow-stage-3')">
|
||
<div class="box-number">3</div>
|
||
<div class="box-icon">🔧</div>
|
||
<div class="box-title">제작 단계</div>
|
||
<div class="box-subtitle">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 두 번째 행 -->
|
||
<div class="workflow-row">
|
||
<div class="workflow-box" onclick="showPage('workflow-stage-4')">
|
||
<div class="box-number">4</div>
|
||
<div class="box-icon">🏭</div>
|
||
<div class="box-title">생산회의</div>
|
||
<div class="box-subtitle">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow horizontal">→</div>
|
||
|
||
<div class="workflow-box" onclick="showPage('workflow-stage-5')">
|
||
<div class="box-number">5</div>
|
||
<div class="box-icon">📦</div>
|
||
<div class="box-title">납품 (출하전 보고서)</div>
|
||
<div class="box-subtitle">필수 확인점 완료 확인<br>대표 승인 → 출하 가능</div>
|
||
</div>
|
||
|
||
<div class="flow-arrow horizontal">→</div>
|
||
|
||
<div class="workflow-box special" onclick="showPage('workflow-stage-0')">
|
||
<div class="box-number">💡</div>
|
||
<div class="box-icon">⚡</div>
|
||
<div class="box-title">특이사항</div>
|
||
<div class="box-subtitle">긴급/가공건: 구두신청 → 긴급진행<br>각 팀장이 워크플로우 자유 변형 가능</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 연결선들 -->
|
||
<div class="flow-connections">
|
||
<!-- 세로 연결선 (1→4) -->
|
||
<div class="vertical-line" style="left: 16.66%; top: 45%; height: 10%;"></div>
|
||
<!-- 세로 연결선 (2→5) -->
|
||
<div class="vertical-line" style="left: 50%; top: 45%; height: 10%;"></div>
|
||
<!-- 세로 연결선 (3→특이사항) -->
|
||
<div class="vertical-line" style="left: 83.33%; top: 45%; height: 10%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="workflow-summary">
|
||
<h3>🎯 핵심 목표</h3>
|
||
<ul>
|
||
<li><strong>중앙집중식 프로젝트 관리:</strong> 모든 프로젝트 정보를 한 곳에서 통합 관리</li>
|
||
<li><strong>구매 신청 중심 자재 관리:</strong> 구매 프로세스를 중심으로 한 완전한 자재 추적</li>
|
||
<li><strong>실시간 정보 연동:</strong> 부서 간 정보 공유 및 실시간 업데이트</li>
|
||
<li><strong>사용자 경험 최적화:</strong> 직관적이고 효율적인 업무 프로세스</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 워크플로우 상세 페이지들 -->
|
||
<!-- Stage 0: 프로젝트 관리 -->
|
||
<div id="workflow-stage-0" class="page">
|
||
<div class="page-header">
|
||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||
<h2>🏢 0단계: 프로젝트 관리 (워크플로우 시작점)</h2>
|
||
<p class="page-description">전체 워크플로우의 중심이 되는 프로젝트 접근점</p>
|
||
</div>
|
||
|
||
<div class="workflow-detail-container">
|
||
<div class="detail-section">
|
||
<h3>📋 주요 기능</h3>
|
||
<ul class="feature-list">
|
||
<li>활성 프로젝트 목록 표시 (납기 미경과, 미완료 프로젝트만)</li>
|
||
<li>간단하고 직관적인 프로젝트 선택 인터페이스</li>
|
||
<li>선택된 프로젝트 컨텍스트 전역 유지</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>🔄 워크플로우 연결</h3>
|
||
<div class="workflow-connection">
|
||
<div class="connection-item">프로젝트 선택</div>
|
||
<div class="arrow">→</div>
|
||
<div class="connection-item">세션 저장</div>
|
||
<div class="arrow">→</div>
|
||
<div class="connection-item">각 기능 모듈로 분기</div>
|
||
</div>
|
||
<div class="module-list">
|
||
<div class="module-item">📋 프로젝트 등록/수정</div>
|
||
<div class="module-item">🏭 생산회의록</div>
|
||
<div class="module-item">📦 입고 검수 관리</div>
|
||
<div class="module-item">🔧 생산팀 작업 관리</div>
|
||
<div class="module-item">🔍 품질 검사 시스템</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>⚙️ 실제 구현 시 고려사항</h3>
|
||
<div class="consideration-grid">
|
||
<div class="consideration-item">
|
||
<h4>동적 필터링</h4>
|
||
<p>납기일 기준 활성 프로젝트만 표시</p>
|
||
</div>
|
||
<div class="consideration-item">
|
||
<h4>권한 기반 접근</h4>
|
||
<p>사용자 권한에 따른 프로젝트 접근 제어</p>
|
||
</div>
|
||
<div class="consideration-item">
|
||
<h4>실시간 동기화</h4>
|
||
<p>프로젝트 상태 변경 시 즉시 반영</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 1: 준비 단계 -->
|
||
<div id="workflow-stage-1" class="page">
|
||
<div class="page-header">
|
||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||
<h2>🚀 1단계: 준비 단계</h2>
|
||
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
|
||
</div>
|
||
|
||
<div class="workflow-detail-container">
|
||
<div class="detail-section">
|
||
<h3>📋 프로젝트 등록</h3>
|
||
<div class="process-flow">
|
||
<div class="process-step">
|
||
<h4>수주에 따른 Job No. 부여</h4>
|
||
<p><strong>담당자:</strong> 영업 또는 PM</p>
|
||
</div>
|
||
<div class="process-step">
|
||
<h4>업무 내용</h4>
|
||
<ul>
|
||
<li>관련 정보 업로드 (관련 자료 + 담당자 정리본)</li>
|
||
<li>일정을 고려한 외주 & 자체제작 여부 확정</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>🏗️ 업무 분기 및 일정 수립</h3>
|
||
<p>등록된 정보와 확정된 일정을 토대로 각 부서별 업무 분기:</p>
|
||
|
||
<div class="department-grid">
|
||
<div class="department-card">
|
||
<h4>🏗️ 설계팀</h4>
|
||
<ul>
|
||
<li>도면 일정 수립</li>
|
||
</ul>
|
||
</div>
|
||
<div class="department-card">
|
||
<h4>🔍 품질팀</h4>
|
||
<ul>
|
||
<li>검사 포인트 확인 및 일정 수립</li>
|
||
<li>ITP 작성</li>
|
||
</ul>
|
||
</div>
|
||
<div class="department-card">
|
||
<h4>🛒 구매/물류팀</h4>
|
||
<ul>
|
||
<li>외주 제작 일정 시작과 끝 입력</li>
|
||
<li>항목별 소요 일수 산정 (필요시 견적 진행)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="department-card">
|
||
<h4>🏭 생산팀</h4>
|
||
<ul>
|
||
<li>납기일 확인 후 제작일정 수립</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 2: 프로젝트 진행 단계 -->
|
||
<div id="workflow-stage-2" class="page">
|
||
<div class="page-header">
|
||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||
<h2>🔄 2단계: 프로젝트 진행 단계 (발주)</h2>
|
||
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
|
||
</div>
|
||
|
||
<div class="workflow-detail-container">
|
||
<div class="detail-section">
|
||
<h3>🏢 외주의 경우</h3>
|
||
<div class="process-flow">
|
||
<div class="process-step">도면 업로드</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">견적진행</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">발주</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">관리페이지 (납기, 검사포인트 등)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>🏭 자체제작의 경우</h3>
|
||
<div class="process-flow-vertical">
|
||
<div class="process-step">도면(BOM) 업로드</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">분류</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">구매신청</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">견적/발주</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">입고</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">검수 및 보관</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">검사</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="process-step">불출</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>📝 중요 사항</h3>
|
||
<div class="important-notes">
|
||
<div class="note-item">
|
||
<h4>보관 단계</h4>
|
||
<p>입고 위치 정보 입력 필수</p>
|
||
</div>
|
||
<div class="note-item">
|
||
<h4>추가분 발생시</h4>
|
||
<p>리비전 로직으로 진행</p>
|
||
</div>
|
||
<div class="note-item">
|
||
<h4>긴급/가공건</h4>
|
||
<p>구두로 신청(근거는 남겨야됨) → 긴급 진행 → 사후 처리(발주 담당자)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 3: 제작 단계 -->
|
||
<div id="workflow-stage-3" class="page">
|
||
<div class="page-header">
|
||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||
<h2>🛠️ 3단계: 제작 단계</h2>
|
||
<p class="page-description">외주 및 자체제작 생산 관리</p>
|
||
</div>
|
||
|
||
<div class="workflow-detail-container">
|
||
<div class="detail-section">
|
||
<h3>🏢 외주의 경우</h3>
|
||
<div class="responsibility-card">
|
||
<h4>담당부서: 구매/물류팀</h4>
|
||
<ul>
|
||
<li>납기, 업체 공정표의 정보 입력 페이지</li>
|
||
<li>품질팀은 해당 입력을 토대로 검사일정 수립</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="ncr-process">
|
||
<h4>📋 NCR 발생시 처리 순서</h4>
|
||
<div class="process-flow">
|
||
<div class="process-step">품질 작성</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">구매/물류팀 전달</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">업체송부</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">구매/물류팀이 업체 답변 수령</div>
|
||
<div class="arrow">→</div>
|
||
<div class="process-step">품질 전달</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>🏭 자체제작의 경우</h3>
|
||
<div class="department-responsibilities">
|
||
<div class="responsibility-card">
|
||
<h4>생산팀</h4>
|
||
<ul>
|
||
<li>공정표 이용한 공정관리</li>
|
||
<li>생산회의에 활용</li>
|
||
<li>해당 회의에서 관련 프로젝트 발주현황 확인 가능</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="responsibility-card">
|
||
<h4>구매/물류팀</h4>
|
||
<ul>
|
||
<li>생산팀 자재 인수인계 (자재 상태 변경)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>⚠️ 문제 발생시 대응</h3>
|
||
<div class="problem-handling">
|
||
<h4>작업중 미수령 자재 있을시</h4>
|
||
<p>생산팀에서 검색하기 쉽게 유도 (위치정보 등)</p>
|
||
|
||
<h4>문제 발생시 (자재문제 이외에도 설계미스, 품질미스, 생산미스 전부 포함)</h4>
|
||
<p>종류와 발생 사유등을 쉽게 입력하여 차후 프로젝트에 활용할 수 있도록 설계</p>
|
||
|
||
<h4>데일리체크 개선</h4>
|
||
<p>생산회의 제작전, 제작중 모든 고정에 대한 현황을 알 수 있도록 개선</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 4: 생산회의 -->
|
||
<div id="workflow-stage-4" class="page">
|
||
<div class="page-header">
|
||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||
<h2>🏢 4단계: 생산회의</h2>
|
||
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
|
||
</div>
|
||
|
||
<div class="workflow-detail-container">
|
||
<div class="detail-section">
|
||
<h3>📊 생산회의 주요 기능</h3>
|
||
<div class="meeting-features">
|
||
<div class="feature-card">
|
||
<h4>공정표 표시 개선</h4>
|
||
<p>제작전, 제작중 모든 공정에 대한 현황을 한눈에 확인</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>프로젝트 발주현황 확인</h4>
|
||
<p>관련 프로젝트의 발주 상태를 실시간으로 파악</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>데일리체크 통합</h4>
|
||
<p>일일 작업 현황 및 이슈사항 종합 관리</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>🎯 회의 목적</h3>
|
||
<ul class="purpose-list">
|
||
<li>전체 프로젝트 진행 상황 점검</li>
|
||
<li>부서간 협업 이슈 해결</li>
|
||
<li>일정 지연 요소 사전 파악</li>
|
||
<li>자재 수급 현황 확인</li>
|
||
<li>품질 이슈 공유 및 대응</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>📋 회의 구성 요소</h3>
|
||
<div class="meeting-components">
|
||
<div class="component-item">
|
||
<h4>📈 공정 진행률</h4>
|
||
<p>각 프로젝트별 공정 완료 현황</p>
|
||
</div>
|
||
<div class="component-item">
|
||
<h4>📦 자재 현황</h4>
|
||
<p>입고 예정, 검수 완료, 불출 대기 자재 현황</p>
|
||
</div>
|
||
<div class="component-item">
|
||
<h4>⚠️ 이슈 사항</h4>
|
||
<p>데일리체크에서 올라온 문제점 및 해결 방안</p>
|
||
</div>
|
||
<div class="component-item">
|
||
<h4>📅 일정 조정</h4>
|
||
<p>지연 요소에 따른 일정 재조정</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stage 5: 납품 -->
|
||
<div id="workflow-stage-5" class="page">
|
||
<div class="page-header">
|
||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||
<h2>📦 5단계: 납품 (출하전 보고서)</h2>
|
||
<p class="page-description">최종 품질 확인 및 출하 승인 프로세스</p>
|
||
</div>
|
||
|
||
<div class="workflow-detail-container">
|
||
<div class="detail-section">
|
||
<h3>✅ 출하전 필수 확인점</h3>
|
||
<div class="checklist-grid">
|
||
<div class="checklist-item">
|
||
<h4>🔍 품질 검사</h4>
|
||
<ul>
|
||
<li>최종 품질 검사 완료</li>
|
||
<li>모든 NCR 처리 완료</li>
|
||
<li>고객 요구사항 충족 확인</li>
|
||
</ul>
|
||
</div>
|
||
<div class="checklist-item">
|
||
<h4>📋 문서 완성</h4>
|
||
<ul>
|
||
<li>제작 완료 보고서</li>
|
||
<li>품질 검사 성적서</li>
|
||
<li>납품 관련 서류</li>
|
||
</ul>
|
||
</div>
|
||
<div class="checklist-item">
|
||
<h4>📦 포장 및 준비</h4>
|
||
<ul>
|
||
<li>적절한 포장 완료</li>
|
||
<li>운송 준비 완료</li>
|
||
<li>납품 일정 확정</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>🔄 승인 프로세스</h3>
|
||
<div class="approval-flow">
|
||
<div class="approval-step">
|
||
<h4>1단계: 필수 확인점 검토</h4>
|
||
<p>상기 공정별 필수 확인점 여부 표시</p>
|
||
</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="approval-step">
|
||
<h4>2단계: 미완료 항목 확인</h4>
|
||
<p>미완료 표시 있으면 승인요청 불가</p>
|
||
</div>
|
||
<div class="arrow-down">↓</div>
|
||
<div class="approval-step">
|
||
<h4>3단계: 대표 승인</h4>
|
||
<p>대표님 승인 후 출하 가능</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3>📊 최종 보고서 구성</h3>
|
||
<div class="report-components">
|
||
<div class="report-item">
|
||
<h4>프로젝트 개요</h4>
|
||
<p>Job No., 고객사, 납기일 등 기본 정보</p>
|
||
</div>
|
||
<div class="report-item">
|
||
<h4>제작 현황</h4>
|
||
<p>공정별 완료 현황 및 소요 시간</p>
|
||
</div>
|
||
<div class="report-item">
|
||
<h4>품질 현황</h4>
|
||
<p>검사 결과, NCR 처리 내역</p>
|
||
</div>
|
||
<div class="report-item">
|
||
<h4>특이사항</h4>
|
||
<p>프로젝트 진행 중 발생한 주요 이슈 및 해결 방안</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="scripts/main.js"></script>
|
||
</body>
|
||
</html>
|