245 lines
8.2 KiB
Markdown
245 lines
8.2 KiB
Markdown
# 설비정보 화면 구현 가이드
|
|
|
|
> **화면명**: 설비정보
|
|
> **파일**: 설비정보.html
|
|
> **분류**: 설비관리
|
|
> **구현 가능**: ✅ 완전 (v2-card-display 활용)
|
|
|
|
---
|
|
|
|
## 1. 화면 개요
|
|
|
|
생산 설비의 기본정보 및 상태를 관리하는 화면입니다.
|
|
|
|
### 핵심 기능
|
|
- 설비 목록 조회 (카드 형태)
|
|
- 설비 등록/수정/삭제
|
|
- 설비 상세 정보 탭 관리
|
|
- 설비 이미지 관리
|
|
|
|
---
|
|
|
|
## 2. 화면 레이아웃
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ [설비코드] [설비명] [설비유형▼] [상태▼] [초기화][조회] │
|
|
│ [사용자옵션][업로드][다운로드]│
|
|
├───────────────────────┬─────────────────────────────────────────┤
|
|
│ 🏭 설비 목록 │ [기본정보][보전이력][점검이력][가동현황] │
|
|
│ ─────────────── │ ───────────────────────────────────── │
|
|
│ [신규등록] │ 설비코드: EQ-001 │
|
|
│ ┌──────────────────┐ │ 설비명: CNC 밀링머신 1호기 │
|
|
│ │ [이미지] EQ-001 │ │ 설비유형: 가공설비 │
|
|
│ │ CNC 밀링 [가동중] │ │ 상태: 가동중 │
|
|
│ ├──────────────────┤ │ 제조사: 현대공작기계 │
|
|
│ │ [이미지] EQ-002 │ ├─────────────────────────────────────────┤
|
|
│ │ 선반 1호 [점검중] │ │ [보전이력 테이블] │
|
|
│ ├──────────────────┤ │ │일자 |유형 |내용 |담당자│ │
|
|
│ │ [이미지] EQ-003 │ │ │2026-01|정기 |오일 교환 |김철수│ │
|
|
│ │ 프레스 [고장] │ │ │2026-01|수리 |베어링 교체 |이영희│ │
|
|
│ └──────────────────┘ │ │
|
|
└───────────────────────┴─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 3. V2 컴포넌트 매핑
|
|
|
|
| HTML 영역 | V2 컴포넌트 | 상태 |
|
|
|-----------|-------------|------|
|
|
| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
|
|
| 설비 카드 목록 | `v2-card-display` | ✅ 가능 |
|
|
| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
|
|
| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
|
|
|
|
---
|
|
|
|
## 4. 설비 카드 구조
|
|
|
|
```typescript
|
|
interface EquipmentCard {
|
|
id: string;
|
|
image: string; // 설비 이미지 URL
|
|
code: string; // 설비코드
|
|
name: string; // 설비명
|
|
type: string; // 설비유형
|
|
status: 'running' | 'idle' | 'maintenance' | 'broken';
|
|
location: string;
|
|
}
|
|
|
|
// 상태별 스타일
|
|
statusStyles: {
|
|
running: { bg: '#d1fae5', color: '#065f46', label: '가동중' },
|
|
idle: { bg: '#e5e7eb', color: '#374151', label: '대기중' },
|
|
maintenance: { bg: '#fef3c7', color: '#92400e', label: '점검중' },
|
|
broken: { bg: '#fee2e2', color: '#991b1b', label: '고장' }
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 상세 탭 구성
|
|
|
|
```typescript
|
|
tabs: [
|
|
{
|
|
id: 'basic',
|
|
label: '기본정보',
|
|
fields: [
|
|
{ id: 'eq_code', label: '설비코드' },
|
|
{ id: 'eq_name', label: '설비명' },
|
|
{ id: 'eq_type', label: '설비유형' },
|
|
{ id: 'status', label: '상태' },
|
|
{ id: 'manufacturer', label: '제조사' },
|
|
{ id: 'model', label: '모델명' },
|
|
{ id: 'serial_no', label: '시리얼번호' },
|
|
{ id: 'install_date', label: '설치일' },
|
|
{ id: 'location', label: '설치위치' },
|
|
{ id: 'manager', label: '담당자' }
|
|
]
|
|
},
|
|
{
|
|
id: 'maintenance',
|
|
label: '보전이력',
|
|
type: 'table',
|
|
entityId: 'equipment_maintenance',
|
|
columns: [
|
|
{ id: 'date', label: '일자' },
|
|
{ id: 'type', label: '유형' },
|
|
{ id: 'content', label: '내용' },
|
|
{ id: 'worker', label: '담당자' },
|
|
{ id: 'cost', label: '비용' }
|
|
]
|
|
},
|
|
{
|
|
id: 'inspection',
|
|
label: '점검이력',
|
|
type: 'table',
|
|
entityId: 'equipment_inspection'
|
|
},
|
|
{
|
|
id: 'operation',
|
|
label: '가동현황',
|
|
type: 'chart' // 향후 확장
|
|
}
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## 6. 검색 조건
|
|
|
|
| 필드명 | 컴포넌트 | 옵션 |
|
|
|--------|----------|------|
|
|
| 설비코드 | `v2-input` | placeholder: "설비코드" |
|
|
| 설비명 | `v2-input` | placeholder: "설비명" |
|
|
| 설비유형 | `v2-select` | 가공설비, 조립설비, 검사설비 등 |
|
|
| 상태 | `v2-select` | 가동중, 대기중, 점검중, 고장 |
|
|
|
|
---
|
|
|
|
## 7. 현재 구현 가능 범위
|
|
|
|
### ✅ 가능
|
|
- 검색 영역: `v2-table-search-widget`
|
|
- 설비 카드 목록: `v2-card-display` (이미지+정보 조합 지원)
|
|
- 분할 패널 레이아웃: `v2-split-panel-layout`
|
|
- 상세 탭: `v2-tabs-widget`
|
|
- 보전이력/점검이력 테이블: `v2-table-list`
|
|
|
|
### ⚠️ 부분 가능
|
|
- 가동현황 차트: 별도 차트 컴포넌트 필요
|
|
|
|
---
|
|
|
|
## 8. 테이블 대체 구현 JSON
|
|
|
|
```json
|
|
{
|
|
"screen_code": "EQUIPMENT_MAIN",
|
|
"screen_name": "설비정보",
|
|
"components": [
|
|
{
|
|
"type": "v2-table-search-widget",
|
|
"position": { "x": 0, "y": 0, "w": 12, "h": 2 },
|
|
"config": {
|
|
"searchFields": [
|
|
{ "type": "input", "id": "eq_code", "placeholder": "설비코드" },
|
|
{ "type": "input", "id": "eq_name", "placeholder": "설비명" },
|
|
{ "type": "select", "id": "eq_type", "placeholder": "설비유형" },
|
|
{ "type": "select", "id": "status", "placeholder": "상태",
|
|
"options": [
|
|
{ "value": "running", "label": "가동중" },
|
|
{ "value": "idle", "label": "대기중" },
|
|
{ "value": "maintenance", "label": "점검중" },
|
|
{ "value": "broken", "label": "고장" }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "v2-split-panel-layout",
|
|
"position": { "x": 0, "y": 2, "w": 12, "h": 10 },
|
|
"config": {
|
|
"masterPanel": {
|
|
"title": "설비 목록",
|
|
"entityId": "equipment",
|
|
"buttons": [
|
|
{ "label": "신규등록", "action": "create", "variant": "primary" }
|
|
],
|
|
"columns": [
|
|
{ "id": "eq_code", "label": "설비코드", "width": 100 },
|
|
{ "id": "eq_name", "label": "설비명", "width": 200 },
|
|
{ "id": "eq_type", "label": "설비유형", "width": 100 },
|
|
{ "id": "status", "label": "상태", "width": 80 },
|
|
{ "id": "location", "label": "설치위치", "width": 150 }
|
|
]
|
|
},
|
|
"detailPanel": {
|
|
"tabs": [
|
|
{ "id": "basic", "label": "기본정보", "type": "form" },
|
|
{ "id": "maintenance", "label": "보전이력", "type": "table", "entityId": "eq_maintenance" },
|
|
{ "id": "inspection", "label": "점검이력", "type": "table", "entityId": "eq_inspection" },
|
|
{ "id": "operation", "label": "가동현황", "type": "custom" }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 9. v2-card-display 설정 예시
|
|
|
|
`v2-card-display`는 이미 존재하는 컴포넌트입니다.
|
|
|
|
```typescript
|
|
// v2-card-display 설정
|
|
cardDisplayConfig: {
|
|
cardsPerRow: 3,
|
|
cardSpacing: 16,
|
|
cardStyle: {
|
|
showTitle: true, // eq_name 표시
|
|
showSubtitle: true, // eq_code 표시
|
|
showDescription: true,
|
|
showImage: true, // 설비 이미지 표시
|
|
showActions: true,
|
|
imagePosition: "top",
|
|
imageSize: "medium",
|
|
},
|
|
columnMapping: {
|
|
title: "eq_name",
|
|
subtitle: "eq_code",
|
|
image: "image_url",
|
|
status: "status"
|
|
},
|
|
dataSource: "table"
|
|
}
|
|
```
|
|
|
|
**현재 V2 컴포넌트로 완전 구현 가능**
|