2102f4a398
- 자료실 하위 3개 메뉴: 자료보관함, 매뉴얼, 공지사항 - 자료보관함: 폴더 트리 + 파일 업로드/다운로드/삭제 - 매뉴얼/공지사항: 게시판형 CRUD + 첨부파일 - 안전관리: 안전보건교육, TBM현황, 위험성평가, 재해예방조치 - 품질관리: 시정조치 UI 페이지 - 대시보드: 슈퍼관리자 전용 레거시 사이트 참고 카드 - 작업일보/출면일보 오류 수정 및 기능 개선 - 설비 사진 업로드, 근로계약서 종료일 수정
231 lines
15 KiB
PHP
231 lines
15 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '재해예방조치 - 건설PMIS')
|
|
|
|
@section('content')
|
|
<div id="root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />
|
|
@include('partials.react-cdn')
|
|
<script type="text/babel">
|
|
@verbatim
|
|
const { useState, useMemo } = React;
|
|
|
|
/* ═══════ 사이드바 ═══════ */
|
|
const PMIS_MENUS=[
|
|
{icon:'ri-building-2-line',label:'BIM 관리',id:'bim',children:[{label:'BIM 뷰어',id:'bim-viewer',url:'/juil/construction-pmis/bim-viewer'}]},
|
|
{icon:'ri-line-chart-line',label:'시공관리',id:'construction',children:[
|
|
{label:'인원관리',id:'workforce',url:'/juil/construction-pmis/workforce'},
|
|
{label:'장비관리',id:'equipment',url:'/juil/construction-pmis/equipment'},
|
|
{label:'자재관리',id:'materials',url:'/juil/construction-pmis/materials'},
|
|
{label:'공사량관리',id:'work-volume',url:'/juil/construction-pmis/work-volume'},
|
|
{label:'출면일보',id:'daily-attendance',url:'/juil/construction-pmis/daily-attendance'},
|
|
{label:'작업일보',id:'daily-report',url:'/juil/construction-pmis/daily-report'},
|
|
]},
|
|
{icon:'ri-file-list-3-line',label:'품질관리',id:'quality',children:[
|
|
{label:'시정조치',id:'corrective-action',url:'/juil/construction-pmis/corrective-action'},
|
|
]},
|
|
{icon:'ri-shield-check-line',label:'안전관리',id:'safety',children:[
|
|
{label:'안전보건교육',id:'safety-education',url:'/juil/construction-pmis/safety-education'},
|
|
{label:'TBM현장',id:'tbm',url:'/juil/construction-pmis/tbm'},
|
|
{label:'위험성 평가',id:'risk-assessment',url:'/juil/construction-pmis/risk-assessment'},
|
|
{label:'재해예방조치',id:'disaster-prevention',url:'/juil/construction-pmis/disaster-prevention'},
|
|
]},
|
|
{icon:'ri-folder-line',label:'자료실',id:'archive',children:[
|
|
{label:'자료보관함',id:'archive-files',url:'/juil/construction-pmis/archive-files'},
|
|
{label:'매뉴얼',id:'archive-manual',url:'/juil/construction-pmis/archive-manual'},
|
|
{label:'공지사항',id:'archive-notice',url:'/juil/construction-pmis/archive-notice'},
|
|
]},
|
|
];
|
|
|
|
function PmisSidebar({activePage}){
|
|
const[profile,setProfile]=useState(null);
|
|
const[expanded,setExpanded]=useState(()=>{for(const m of PMIS_MENUS){if(m.children?.some(c=>c.id===activePage))return m.id}return null});
|
|
React.useEffect(()=>{fetch('/juil/construction-pmis/profile',{headers:{Accept:'application/json'}}).then(r=>r.json()).then(d=>setProfile(d.worker)).catch(()=>{})},[]);
|
|
return(
|
|
<div className="bg-white border-r border-gray-200 shadow-sm flex flex-col shrink-0" style={{width:200}}>
|
|
<a href="/juil/construction-pmis" className="flex items-center gap-2 px-4 py-3 text-sm text-blue-600 hover:bg-blue-50 border-b border-gray-100 transition"><i className="ri-arrow-left-s-line text-lg"></i> PMIS 대시보드</a>
|
|
<div className="p-3 border-b border-gray-100 text-center">
|
|
<div className="w-12 h-12 mx-auto mb-1 rounded-full bg-gray-100 border-2 border-gray-200 flex items-center justify-center">
|
|
{profile?.profile_photo_path?<img src={profile.profile_photo_path} className="w-full h-full rounded-full object-cover"/>:<i className="ri-user-3-line text-xl text-gray-300"></i>}
|
|
</div>
|
|
<div className="text-sm font-bold text-gray-800">{profile?.name||'...'}</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">{profile?.department||''}</div>
|
|
</div>
|
|
<div className="flex-1 overflow-auto py-1">
|
|
{PMIS_MENUS.map(m=>(
|
|
<div key={m.id}>
|
|
<div onClick={()=>setExpanded(expanded===m.id?null:m.id)} className={`flex items-center gap-2 px-4 py-2.5 text-sm cursor-pointer transition ${expanded===m.id?'bg-blue-50 text-blue-700 font-semibold':'text-gray-600 hover:bg-gray-50'}`}>
|
|
<i className={`${m.icon} text-base`}></i>{m.label}
|
|
{m.children&&<i className={`ml-auto ${expanded===m.id?'ri-arrow-down-s-line':'ri-arrow-right-s-line'} text-gray-400 text-xs`}></i>}
|
|
</div>
|
|
{expanded===m.id&&m.children?.map(c=>(<a key={c.id} href={c.url} className={`block pl-10 pr-4 py-2 text-sm transition ${c.id===activePage?'bg-blue-100 text-blue-800 font-semibold border-l-2 border-blue-600':'text-gray-500 hover:text-blue-600 hover:bg-gray-50'}`}>{c.label}</a>))}
|
|
</div>))}
|
|
</div>
|
|
</div>);
|
|
}
|
|
|
|
/* ═══════ 날짜 기준 옵션 ═══════ */
|
|
const DATE_TYPE_OPTIONS = ['최초요청일','조치일','요청일'];
|
|
|
|
/* ═══════ 메인 ═══════ */
|
|
function App(){
|
|
const now = new Date();
|
|
const pad = (n) => String(n).padStart(2,'0');
|
|
const todayStr = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}`;
|
|
const monthAgo = new Date(now); monthAgo.setMonth(monthAgo.getMonth()-1);
|
|
const monthAgoStr = `${monthAgo.getFullYear()}-${pad(monthAgo.getMonth()+1)}-${pad(monthAgo.getDate())}`;
|
|
|
|
const [delayOnly, setDelayOnly] = useState(false);
|
|
const [dateType, setDateType] = useState('최초요청일');
|
|
const [dateFrom, setDateFrom] = useState(monthAgoStr);
|
|
const [dateTo, setDateTo] = useState(todayStr);
|
|
const [searchText, setSearchText] = useState('');
|
|
const [checked, setChecked] = useState({});
|
|
const [page, setPage] = useState(0);
|
|
const [pageSize, setPageSize] = useState(20);
|
|
|
|
/* 샘플 데이터 (빈 상태 — API 연동 후 채워짐) */
|
|
const data = [];
|
|
|
|
const totalPages = Math.max(1, Math.ceil(data.length / pageSize));
|
|
const paged = data.slice(page * pageSize, (page + 1) * pageSize);
|
|
const allChecked = paged.length > 0 && paged.every(d => checked[d.id]);
|
|
|
|
const thCls = 'px-3 py-2.5 text-center font-semibold text-gray-600 text-sm whitespace-nowrap';
|
|
|
|
return(
|
|
<div className="flex bg-gray-100" style={{height:'calc(100vh - 56px)'}}>
|
|
<PmisSidebar activePage="disaster-prevention"/>
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
{/* 헤더 */}
|
|
<div className="bg-white border-b border-gray-200 px-6 py-4">
|
|
<div className="flex items-center gap-2 text-xs text-gray-400 mb-2">
|
|
<i className="ri-home-4-line"></i><span>Home</span> > <span>안전관리</span> > <span className="text-gray-600">재해예방조치</span>
|
|
</div>
|
|
<h1 className="text-lg font-bold text-gray-800">재해예방조치</h1>
|
|
</div>
|
|
|
|
{/* 필터 영역 */}
|
|
<div className="bg-white border-b border-gray-200 px-6 py-3 space-y-3">
|
|
{/* 상단: 지연여부 + 일괄다운로드 */}
|
|
<div className="flex items-center justify-between">
|
|
<label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
|
|
<input type="checkbox" checked={delayOnly} onChange={e => setDelayOnly(e.target.checked)} />
|
|
지연여부
|
|
</label>
|
|
<button className="border border-gray-300 px-4 py-1.5 rounded text-sm hover:bg-gray-50">일괄다운로드</button>
|
|
</div>
|
|
{/* 필터 바 */}
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<select value={dateType} onChange={e => setDateType(e.target.value)}
|
|
className="border border-gray-300 rounded px-3 py-1.5 text-sm bg-white">
|
|
{DATE_TYPE_OPTIONS.map(o => <option key={o} value={o}>{o}</option>)}
|
|
</select>
|
|
<input type="date" value={dateFrom} onChange={e => setDateFrom(e.target.value)}
|
|
className="border border-gray-300 rounded px-2 py-1.5 text-sm" />
|
|
<span className="text-gray-400">~</span>
|
|
<input type="date" value={dateTo} onChange={e => setDateTo(e.target.value)}
|
|
className="border border-gray-300 rounded px-2 py-1.5 text-sm" />
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<input type="text" value={searchText} onChange={e => setSearchText(e.target.value)}
|
|
placeholder="Search..." className="border border-gray-300 rounded px-3 py-1.5 text-sm" style={{width:180}} />
|
|
<button className="bg-blue-700 text-white px-5 py-1.5 rounded text-sm font-semibold hover:bg-blue-800">검색</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 */}
|
|
<div className="flex-1 overflow-auto p-6">
|
|
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className={thCls} style={{width:35}}>
|
|
<input type="checkbox" checked={allChecked} onChange={() => {
|
|
const c = {}; if (!allChecked) paged.forEach(d => c[d.id] = true);
|
|
setChecked(c);
|
|
}} />
|
|
</th>
|
|
<th className={thCls} style={{width:50}}>No</th>
|
|
<th className={thCls} style={{width:90}}>요청사진</th>
|
|
<th className={thCls}>요청내용</th>
|
|
<th className={thCls} style={{width:80}}>요청자</th>
|
|
<th className={thCls} style={{width:85}}>처리상태</th>
|
|
<th className={thCls} style={{width:100}}>요청일</th>
|
|
<th className={thCls} style={{width:100}}>조치일</th>
|
|
<th className={thCls} style={{width:70}}>D-day</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{paged.length > 0 ? paged.map((d, i) => {
|
|
const dday = d.dueDate ? Math.ceil((new Date(d.dueDate) - now) / 86400000) : null;
|
|
return (
|
|
<tr key={d.id} className="border-b border-gray-100 hover:bg-blue-50/30 transition">
|
|
<td className="px-3 py-2.5 text-center">
|
|
<input type="checkbox" checked={!!checked[d.id]} onChange={() => setChecked(p => ({...p, [d.id]: !p[d.id]}))} />
|
|
</td>
|
|
<td className="px-3 py-2.5 text-center text-gray-500">{page * pageSize + i + 1}</td>
|
|
<td className="px-3 py-2.5 text-center">
|
|
{d.photo
|
|
? <img src={d.photo} className="w-12 h-12 object-cover rounded border border-gray-200 mx-auto" />
|
|
: <div className="w-12 h-12 mx-auto bg-gray-100 rounded border border-gray-200 flex items-center justify-center"><i className="ri-image-line text-gray-300"></i></div>
|
|
}
|
|
</td>
|
|
<td className="px-3 py-2.5 text-gray-700">{d.content}</td>
|
|
<td className="px-3 py-2.5 text-center text-gray-700">{d.requester}</td>
|
|
<td className="px-3 py-2.5 text-center">
|
|
<span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
d.status === '조치완료' ? 'bg-green-100 text-green-700' :
|
|
d.status === '미조치' ? 'bg-red-100 text-red-700' :
|
|
'bg-yellow-100 text-yellow-700'
|
|
}`}>{d.status}</span>
|
|
</td>
|
|
<td className="px-3 py-2.5 text-center text-gray-600">{d.requestDate}</td>
|
|
<td className="px-3 py-2.5 text-center text-gray-600">{d.actionDate || '-'}</td>
|
|
<td className="px-3 py-2.5 text-center font-medium" style={{color: dday !== null && dday < 0 ? '#dc2626' : dday === 0 ? '#d97706' : '#6b7280'}}>
|
|
{dday !== null ? (dday > 0 ? `D-${dday}` : dday === 0 ? 'D-Day' : `D+${Math.abs(dday)}`) : '-'}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}) : (
|
|
<tr>
|
|
<td colSpan={9} className="text-center py-16 text-gray-400">조회된 데이터가 없습니다.</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/* 페이지네이션 */}
|
|
<div className="flex items-center gap-2 px-4 py-3 border-t border-gray-200 bg-gray-50">
|
|
<button onClick={() => setPage(0)} disabled={page === 0}
|
|
className="px-2 py-1 text-sm text-gray-500 hover:text-gray-700 disabled:opacity-30"><i className="ri-skip-back-mini-line"></i></button>
|
|
<button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0}
|
|
className="px-2 py-1 text-sm text-gray-500 hover:text-gray-700 disabled:opacity-30"><i className="ri-arrow-left-s-line"></i></button>
|
|
<span className="px-3 py-1 text-sm text-gray-700 border border-gray-300 rounded bg-white min-w-[32px] text-center">{page}</span>
|
|
<button onClick={() => setPage(Math.min(totalPages - 1, page + 1))} disabled={page >= totalPages - 1}
|
|
className="px-2 py-1 text-sm text-gray-500 hover:text-gray-700 disabled:opacity-30"><i className="ri-arrow-right-s-line"></i></button>
|
|
<button onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1}
|
|
className="px-2 py-1 text-sm text-gray-500 hover:text-gray-700 disabled:opacity-30"><i className="ri-skip-forward-mini-line"></i></button>
|
|
<select value={pageSize} onChange={e => { setPageSize(Number(e.target.value)); setPage(0); }}
|
|
className="border border-gray-300 rounded px-2 py-1 text-sm bg-white ml-2">
|
|
<option value={20}>20</option>
|
|
<option value={50}>50</option>
|
|
<option value={100}>100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
}
|
|
|
|
ReactDOM.render(<App/>, document.getElementById('root'));
|
|
@endverbatim
|
|
</script>
|
|
@endpush
|