a67e0dc019
- index: 왜 키오스크인가, DNSYS 파트너/스펙, SAM 연동 구조, 가격/도입조건, 영업포인트 추가 - showroom: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가 - factory: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가
189 lines
10 KiB
PHP
189 lines
10 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '공장 키오스크')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.fc { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
|
|
.fc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
|
.fc-header h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
|
|
.fc-header .back-link { display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
|
|
.fc-header .back-link:hover { color: #16a34a; }
|
|
|
|
/* 시나리오 흐름 */
|
|
.fc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
|
|
.fc-flow-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; }
|
|
.fc-flow-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
|
|
.fc-flow-card h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
|
|
.fc-flow-card p { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
|
|
.fc-flow-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem; font-weight: 700; z-index: 1; }
|
|
|
|
/* SAM 자산 바 */
|
|
.fc-assets { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 20px; margin-bottom: 32px; }
|
|
.fc-assets-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
|
|
.fc-assets-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.fc-asset-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: #fff; border: 1px solid #bbf7d0; }
|
|
.fc-asset-tag.blue { color: #1d4ed8; }
|
|
.fc-asset-tag.green { color: #15803d; }
|
|
.fc-asset-tag.orange { color: #d97706; }
|
|
|
|
/* 기능 섹션 */
|
|
.fc-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
|
|
.fc-section-title .bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
|
|
.fc-section-title h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
|
|
.fc-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
|
.fc-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
|
|
.fc-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
|
|
.fc-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.fc-sec-icon svg { width: 15px; height: 15px; }
|
|
.fc-sec h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
|
|
.fc-sec > p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }
|
|
.fc-sec-detail { background: #f8fafc; border-radius: 8px; padding: 14px 16px; }
|
|
.fc-sec-detail li { font-size: 0.8rem; color: #334155; padding: 4px 0; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
|
|
.fc-sec-detail li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
|
|
.fc-sec.production li::before { background: #16a34a; }
|
|
.fc-sec.work-order li::before { background: #2563eb; }
|
|
.fc-sec.stats li::before { background: #d97706; }
|
|
.fc-sec.notices li::before { background: #dc2626; }
|
|
.fc-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 0.82rem; margin-top: 12px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.fc-flow { grid-template-columns: repeat(2, 1fr); }
|
|
.fc-flow-arrow { display: none; }
|
|
.fc-sections { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="fc">
|
|
<div class="fc-header">
|
|
<h1>공장 키오스크</h1>
|
|
<a href="{{ route('additional.kiosk.index') }}" class="back-link">
|
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
|
키오스크 메인으로
|
|
</a>
|
|
</div>
|
|
|
|
{{-- 활용 시나리오 흐름 --}}
|
|
<div class="fc-flow">
|
|
<div class="fc-flow-card">
|
|
<div class="fc-flow-num" style="background:#2563eb;">1</div>
|
|
<h3>작업 지시 조회</h3>
|
|
<p>오늘의 작업 목록 공정별/라인별 지시서</p>
|
|
<span class="fc-flow-arrow">›</span>
|
|
</div>
|
|
<div class="fc-flow-card">
|
|
<div class="fc-flow-num" style="background:#16a34a;">2</div>
|
|
<h3>생산 현황</h3>
|
|
<p>실시간 진행률 목표 대비 실적 확인</p>
|
|
<span class="fc-flow-arrow">›</span>
|
|
</div>
|
|
<div class="fc-flow-card">
|
|
<div class="fc-flow-num" style="background:#d97706;">3</div>
|
|
<h3>실적 입력</h3>
|
|
<p>완료 수량 터치 입력 불량/비고 기록</p>
|
|
<span class="fc-flow-arrow">›</span>
|
|
</div>
|
|
<div class="fc-flow-card">
|
|
<div class="fc-flow-num" style="background:#7c3aed;">4</div>
|
|
<h3>통계 조회</h3>
|
|
<p>일별/주별 실적 라인별 생산성 비교</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SAM 기존 자산 활용 --}}
|
|
<div class="fc-assets">
|
|
<div class="fc-assets-title">SAM 기존 자산 활용</div>
|
|
<div class="fc-assets-tags">
|
|
<span class="fc-asset-tag blue">Worker Screen (/production/worker-screen)</span>
|
|
<span class="fc-asset-tag green">생산 통계 테이블</span>
|
|
<span class="fc-asset-tag orange">작업 지시 데이터</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 기능 섹션 --}}
|
|
<div class="fc-section-title">
|
|
<div class="bar" style="background:#16a34a;"></div>
|
|
<h2>기능 구성</h2>
|
|
</div>
|
|
<div class="fc-sections">
|
|
<div class="fc-sec production">
|
|
<div class="fc-sec-head">
|
|
<div class="fc-sec-icon" style="background:#dcfce7; color:#16a34a;">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
|
|
</div>
|
|
<h3>생산 현황</h3>
|
|
</div>
|
|
<p>오늘의 생산 진행 상황을 실시간으로 확인합니다</p>
|
|
<div class="fc-sec-detail">
|
|
<ul>
|
|
<li>오늘 생산 목표 대비 실적 진행률</li>
|
|
<li>라인별/공정별 현황 대시보드</li>
|
|
<li>자동 새로고침 (실시간 갱신)</li>
|
|
<li>이상 발생 시 경고 표시</li>
|
|
</ul>
|
|
</div>
|
|
<div class="fc-placeholder">생산 현황 영역 · Worker Screen, 통계 테이블 연동 예정</div>
|
|
</div>
|
|
|
|
<div class="fc-sec work-order">
|
|
<div class="fc-sec-head">
|
|
<div class="fc-sec-icon" style="background:#dbeafe; color:#2563eb;">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
|
|
</div>
|
|
<h3>작업 지시</h3>
|
|
</div>
|
|
<p>현재 진행 중인 작업 지시서를 조회합니다</p>
|
|
<div class="fc-sec-detail">
|
|
<ul>
|
|
<li>오늘 배정된 작업 지시 목록</li>
|
|
<li>공정 순서 및 우선순위 표시</li>
|
|
<li>제품 사양/수량/납기 정보</li>
|
|
<li>종이 지시서 없이 터치로 확인</li>
|
|
</ul>
|
|
</div>
|
|
<div class="fc-placeholder">작업 지시 영역 · 작업 지시서 목록 표시 예정</div>
|
|
</div>
|
|
|
|
<div class="fc-sec stats">
|
|
<div class="fc-sec-head">
|
|
<div class="fc-sec-icon" style="background:#fef3c7; color:#d97706;">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /></svg>
|
|
</div>
|
|
<h3>생산 통계</h3>
|
|
</div>
|
|
<p>일별, 주별 생산 실적과 목표 달성률을 확인합니다</p>
|
|
<div class="fc-sec-detail">
|
|
<ul>
|
|
<li>일별/주별/월별 생산 실적 차트</li>
|
|
<li>라인별 생산성 비교 그래프</li>
|
|
<li>목표 달성률 및 추이</li>
|
|
<li>불량률 통계 및 분석</li>
|
|
</ul>
|
|
</div>
|
|
<div class="fc-placeholder">생산 통계 영역 · 생산 실적 차트 표시 예정</div>
|
|
</div>
|
|
|
|
<div class="fc-sec notices">
|
|
<div class="fc-sec-head">
|
|
<div class="fc-sec-icon" style="background:#fee2e2; color:#dc2626;">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
|
|
</div>
|
|
<h3>공지사항</h3>
|
|
</div>
|
|
<p>공장 내 공지사항과 안전 수칙을 확인합니다</p>
|
|
<div class="fc-sec-detail">
|
|
<ul>
|
|
<li>공장 전체 공지사항 게시</li>
|
|
<li>안전 수칙 및 주의사항</li>
|
|
<li>설비 점검/정비 일정</li>
|
|
<li>긴급 공지 상단 고정 표시</li>
|
|
</ul>
|
|
</div>
|
|
<div class="fc-placeholder">공지사항 영역 · 공장 공지사항 표시 예정</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|