🎨 시연회용 데모 페이지 완성 - DevonThink UI 스타일
핵심 구현사항: ✅ 4개 핵심 기능 페이지 완성 - 📋 프로젝트 정보 등록 (2단계 시스템) - 🏭 생산회의록 시스템 (4구역 레이아웃) - 📦 입고 검수 & 보관 관리 - 🔧 생산팀 작업 관리 (그룹장용) 🎨 DevonThink 스타일 디자인 - 회색(#F8F9FA~#202124) + 하늘색(#4A90E2) 컬러 팔레트 - 미니멀하고 전문적인 UI/UX - 반응형 디자인 (데스크톱/태블릿/모바일) - CSS Grid + Flexbox 레이아웃 ⚡ 인터랙티브 기능 - 페이지 전환 애니메이션 (fade-in, slide-in) - 버튼 클릭 상태 변경 및 알림 시스템 - 진행률 슬라이더, 창고 선반 선택 - 키보드 단축키 (Ctrl+1~4) 📁 파일 구조 - demo/index.html (메인 HTML) - demo/styles/devonthink.css (DevonThink 스타일) - demo/styles/main.css (기본 CSS + 유틸리티) - demo/scripts/main.js (JavaScript 기능) - demo/README.md (사용법 및 시연 시나리오) 💾 하드코딩 데이터 - TK-2024-015 프로젝트 (ABC 공장 배관공사) - 공정표, 일정, 자재 현황, 이슈 사항 - 실제 업무 시나리오 반영 🎯 시연 준비 완료 - 브라우저에서 index.html 실행 가능 - 4개 페이지 완전 구현 - 실무진 시연용 데모 완성
This commit is contained in:
Hyungi Ahn
630
demo/index.html
Normal file
630
demo/index.html
Normal file
@@ -0,0 +1,630 @@
|
||||
<!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-registration')" class="nav-item active">
|
||||
<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>
|
||||
</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-registration" class="page active">
|
||||
<div class="page-header">
|
||||
<h2>프로젝트 정보 등록</h2>
|
||||
<p class="page-description">새로운 프로젝트를 등록하고 기본 정보를 입력합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="content-grid">
|
||||
<!-- 1단계: 기본 정보 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>1단계: 프로젝트 생성</h3>
|
||||
<span class="status-badge status-active">진행중</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<form class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>프로젝트명 *</label>
|
||||
<input type="text" value="ABC 공장 배관공사" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>고객사 *</label>
|
||||
<input type="text" value="ABC 케미칼" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>계약금액</label>
|
||||
<input type="text" value="150,000,000원" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>납기일 *</label>
|
||||
<input type="date" value="2024-03-30" class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>납품방식</label>
|
||||
<select class="form-select">
|
||||
<option value="현장납품" selected>현장납품</option>
|
||||
<option value="공장인도">공장인도</option>
|
||||
<option value="부분납품">부분납품</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>제작방식</label>
|
||||
<select class="form-select">
|
||||
<option value="자체제작" selected>자체제작</option>
|
||||
<option value="외주제작">외주제작</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="auto-generated">
|
||||
<div class="generated-item">
|
||||
<span class="label">자동 생성된 Job No.</span>
|
||||
<span class="value">TK-2024-015</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary">✅ 프로젝트 승인 완료</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2단계: 세부 사양 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>2단계: 세부 사양 입력</h3>
|
||||
<span class="status-badge status-optional">선택적</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-section">
|
||||
<h4>킥오프 미팅 결과</h4>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">미팅 일자</span>
|
||||
<span class="info-value">2024-01-20</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">참석자</span>
|
||||
<span class="info-value">김영업, 이PM, 박설계, 최고객</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="decisions">
|
||||
<h5>주요 결정사항</h5>
|
||||
<ul>
|
||||
<li>압력등급 150LB로 확정</li>
|
||||
<li>재질 SS316L로 변경</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h4>기술 사양서</h4>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">설계기준</span>
|
||||
<span class="spec-value">ASME B31.3</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">사용압력</span>
|
||||
<span class="spec-value">10 bar</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">사용온도</span>
|
||||
<span class="spec-value">80°C</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">유체</span>
|
||||
<span class="spec-value">화학용매</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-secondary">📝 세부사양 업데이트</button>
|
||||
</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>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user