docs: 이벤트 히스토리 기획서 및 MiniMax 진단 보고서 추가
This commit is contained in:
windpacer
644
plans/이벤트-히스토리-테이블-UI플랜.md
Normal file
644
plans/이벤트-히스토리-테이블-UI플랜.md
Normal file
@@ -0,0 +1,644 @@
|
||||
# 이벤트 히스토리 UI 신설 — 상세 코딩 플랜
|
||||
|
||||
## 진단 보고서 (2026-05-11)
|
||||
|
||||
diagnosis-checklist.md 8단계 순서대로 진단한 결과 **실행 가능한 플랜**임. 중대한 오진은 없음. 아래는 단계별 확인 사항과 발견된 소규모 이슈.
|
||||
|
||||
### STEP 1 — 맥락 파악
|
||||
|
||||
- **역할**: 백엔드 API 3개는 구현·동작 중인데 UI 전무 → 접근 불가 문제 해결
|
||||
- **레이어**: 순수 프론트엔드 (HTML/JS/CSS) — 백엔드 수정 없음
|
||||
- **관련 문서**: AGENTS.md (camelCase 규칙), CODING_CONVENTIONS.md
|
||||
|
||||
### STEP 2 — 구조 탐색
|
||||
|
||||
| 항목 | 실제 값 | 플랜 가정 | 일치 |
|
||||
|------|---------|-----------|------|
|
||||
| `style.css` 총 줄수 | 1489 | 1489 | ✅ |
|
||||
| `index.html` 총 줄수 | 1205 | — | — |
|
||||
| `index.html` `</main>` 위치 | 1119 | 파일 말미 | ⚠️ |
|
||||
| `app.js` 총 줄수 | 3075 | — | — |
|
||||
| `histReset()` 위치 | 1158~1169 | ~1175 | ⚠️ |
|
||||
| `data-tab="pid"` 위치 | 75-78 | 75-78 | ✅ |
|
||||
|
||||
### STEP 3 — 코드 읽기 (핵심 검증)
|
||||
|
||||
| 검증 대상 | 실제 상태 | 플랜 가정 | 일치 |
|
||||
|-----------|-----------|-----------|------|
|
||||
| `api()` 함수 존재 | `app.js:40` | 존재 | ✅ |
|
||||
| `esc()` 함수 존재 | `app.js:22` | 존재 | ✅ |
|
||||
| `dtOpen(target)` 패턴 | `hf-${target}`, `dtp-${target}-display` 참조 | 동일 | ✅ |
|
||||
| `dtClearField(target)` 패턴 | 동일 패턴 | 동일 | ✅ |
|
||||
| 탭 핸들러 자동 호출 없음 | `app.js:5-18` — evt 케이스 없음 | 불필요 | ✅ |
|
||||
| CSS 변수 (`--s2`, `--bd`, `--r`, `--fm`, `--t0`, `--t2`) | 모두 정의됨 | 사용 | ✅ |
|
||||
| `.hidden` 클래스 | `style.css:1274` | 재사용 | ✅ |
|
||||
| `.nm-cls` 클래스 | `style.css:469` | 재사용 | ✅ |
|
||||
| `.hist-status` 클래스 | `style.css:1216` | 재사용 | ✅ |
|
||||
| `.nm-result-info` 클래스 | `style.css:454` | 재사용 | ✅ |
|
||||
| 백엔드 camelCase 응답 | `ExperionControllers.cs:1192-1207` | 일치 | ✅ |
|
||||
| 백엔드 digital-tags 응답 | `{ tagName: "..." }` | 일치 | ✅ |
|
||||
|
||||
### STEP 4 — 호출 계층 지도
|
||||
|
||||
```
|
||||
사용자 클릭 (이벤트 조회)
|
||||
→ evtQuery()
|
||||
→ api('GET', '/api/event-history?params')
|
||||
→ EventHistoryController.Query()
|
||||
→ _db.QueryEventHistoryAsync()
|
||||
→ DB (external I/O)
|
||||
→ _evtBuildTable(d.data) ← 순수 함수, side effect 없음
|
||||
→ DOM innerHTML 업데이트
|
||||
```
|
||||
|
||||
에러 처리: Controller 레벨 try-catch 전체 포착 → `{ success: false, error: "..." }` 반환. JS 측 `if (!d.success) throw`로 캐치. **계층 적절**.
|
||||
|
||||
### STEP 5 — 패턴 매칭 결과
|
||||
|
||||
| 체크 | 항목 | 결과 |
|
||||
|------|------|------|
|
||||
| 미정의 변수 참조 | `api`, `esc`, `dtClearField` 모두 정의됨 | ✅ |
|
||||
| XSS (내부 HTML) | `esc()`로 모든 서버 응답 문자열 이스케이프 | ✅ |
|
||||
| `.innerHTML` + 서버 데이터 | `_evtBuildTable`에서 `esc()` 적용済み | ✅ |
|
||||
| 날짜 변환 | `new Date(fromRaw).toISOString()` — 기존 hist 탭과 동일 패턴 | ✅ |
|
||||
|
||||
### STEP 6 — 교차 검증
|
||||
|
||||
| 의심 항목 | Q1-Q4 결과 | 결론 |
|
||||
|-----------|-----------|------|
|
||||
| `histReset()` 줄번호 불일치 (1175 vs 1169) | Q3: 의도적 아님, 단순 추정치 차이 | LOW, 수정 제안만 |
|
||||
| `</main>`가 "파일 말미"가 아님 (1119/1205) | Q3: 설명상 불명확하나 삽입 로직은 정확 | LOW, 명시화 제안 |
|
||||
|
||||
### 발견 사항
|
||||
|
||||
### 1. `histReset()` 종료 줄번호 불일치 (LOW)
|
||||
|
||||
**문제**: 플랜 439줄 "histReset() 함수 끝 (현재 ~1175줄) 뒤"라고 했으나 실제 `histReset()`은 `app.js:1158-1169`에서 종료됨. 1171줄부터 "07-2 하이퍼테이블 관리" 섹션 시작.
|
||||
**근거**: `app.js:1158-1173`
|
||||
**영향**: 동작에는 영향 없음. 삽입 위치를 "histReset() 뒤"로 이해하면 정확함. 줄번호만 불일치.
|
||||
**수정**: "~1175줄" → "1169줄"로 정정
|
||||
|
||||
### 2. `</main>`가 파일 말미가 아님 (LOW)
|
||||
|
||||
**문제**: 플랜 181줄 "#pane-pid 섹션 (현재 파일 말미) 바로 뒤, </main> 닫는 태그 앞"이라고 했으나 `</main>`는 `index.html:1119`에 위치하고 파일은 1205줄. 1119~1205줄 사이에 fastRecord 모달, dt-popup 등 외부 요소가 있음.
|
||||
**근거**: `index.html:1117-1205`
|
||||
**영향**: 삽입 위치 자체는 정확함 (`</main>` 앞). "파일 말미"라는 표현이 혼동을 줄 수 있음.
|
||||
**수정**: "파일 말미" → "1117줄 (#pane-pid 종료)"로 정정
|
||||
|
||||
---
|
||||
|
||||
**종합**: 플랜 실행 가능. CSS 변수, 헬퍼 함수, 클래스, 백엔드 응답 형식 등 모든 전제가 검증됨. 발견된 2개 이슈 모두 LOW (표현 명확화 수준).
|
||||
|
||||
---
|
||||
|
||||
## 0. 현황 진단
|
||||
|
||||
### UI 반영 여부
|
||||
| 항목 | 상태 |
|
||||
|------|------|
|
||||
| 사이드바 탭 (`data-tab="evt"`) | ❌ 없음 |
|
||||
| `#pane-evt` 섹션 | ❌ 없음 |
|
||||
| JS 함수 (`evtQuery` 등) | ❌ 없음 |
|
||||
| CSS 이벤트 배지 스타일 | ❌ 없음 |
|
||||
|
||||
**결론**: 백엔드 API 3개(`GET /api/event-history`, `/summary`, `/digital-tags`)는 완전 구현·동작 중이나 **UI가 전무**하여 접근 불가.
|
||||
|
||||
### 기존 API 엔드포인트 (구현 완료)
|
||||
| 엔드포인트 | 설명 | 주요 파라미터 |
|
||||
|-----------|------|--------------|
|
||||
| `GET /api/event-history` | 이벤트 조회 | tagName, area, section, eventType, from, to, limit |
|
||||
| `GET /api/event-history/summary` | 구간별 집계 | area, section, from, to |
|
||||
| `GET /api/event-history/digital-tags` | 디지털 태그 목록 | — |
|
||||
|
||||
### 응답 형식
|
||||
```json
|
||||
// GET /api/event-history
|
||||
{
|
||||
"success": true,
|
||||
"count": 42,
|
||||
"data": [
|
||||
{
|
||||
"id": 1,
|
||||
"tagName": "P6-FIC101.instate0",
|
||||
"nodeId": "...",
|
||||
"prevValue": "RUN",
|
||||
"currValue": "L-STOP",
|
||||
"eventType": "TRIP",
|
||||
"eventTime": "2026-05-11T03:00:00Z",
|
||||
"area": "P6",
|
||||
"section": "1-2차",
|
||||
"durationSeconds": 3600,
|
||||
"metadata": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// GET /api/event-history/summary
|
||||
{
|
||||
"success": true,
|
||||
"count": 3,
|
||||
"data": [
|
||||
{
|
||||
"section": "1-2차",
|
||||
"totalEvents": 10,
|
||||
"tripCount": 3,
|
||||
"runCount": 3,
|
||||
"alarmCount": 2,
|
||||
"changeCount": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. 구현 대상 파일
|
||||
|
||||
| 파일 | 수정 내용 |
|
||||
|------|----------|
|
||||
| `src/Web/wwwroot/index.html` | 탭 항목(12번) + `#pane-evt` 섹션 추가 |
|
||||
| `src/Web/wwwroot/js/app.js` | `evtLoadTags`, `evtQuery`, `evtSummary`, `evtBuildTable`, `evtBuildSummary`, `evtReset` 함수 추가 |
|
||||
| `src/Web/wwwroot/css/style.css` | `.evt-badge`, `.evt-summary-*` 스타일 추가 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 구현 순서 (Dependency Graph)
|
||||
|
||||
```
|
||||
Step 1: CSS — .evt-badge, .evt-summary-grid, .evt-summary-item
|
||||
↓
|
||||
Step 2: HTML — 사이드바 탭 항목(12번) 추가
|
||||
↓
|
||||
Step 3: HTML — #pane-evt 섹션 전체 구조
|
||||
↓
|
||||
Step 4: JS — evtLoadTags(), evtQuery(), evtSummary()
|
||||
↓
|
||||
Step 5: JS — evtBuildTable(), evtBuildSummary(), evtReset()
|
||||
↓
|
||||
Step 6: 검증
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Step-by-Step 코딩 계획
|
||||
|
||||
### Step 1: CSS 추가
|
||||
|
||||
**파일**: `src/Web/wwwroot/css/style.css`
|
||||
**위치**: 파일 말미 (현재 1489줄 끝)
|
||||
|
||||
```css
|
||||
/* ── Event History ─────────────────────────────────────────── */
|
||||
.evt-badge {
|
||||
display: inline-block;
|
||||
font-family: var(--fm); font-size: 10px; font-weight: 700;
|
||||
letter-spacing: .06em; padding: 2px 8px; border-radius: 3px;
|
||||
text-transform: uppercase; white-space: nowrap;
|
||||
}
|
||||
.evt-badge.trip { background: rgba(239,68,68,.18); color: #f87171; }
|
||||
.evt-badge.run { background: rgba(16,185,129,.18); color: #34d399; }
|
||||
.evt-badge.alarm { background: rgba(245,158,11,.18); color: #fbbf24; }
|
||||
.evt-badge.normal { background: rgba(148,163,184,.18); color: #94a3b8; }
|
||||
.evt-badge.change { background: rgba(96,165,250,.18); color: #60a5fa; }
|
||||
|
||||
.evt-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.evt-summary-item {
|
||||
background: var(--s2);
|
||||
border: 1px solid var(--bd);
|
||||
border-radius: var(--r);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.evt-summary-section {
|
||||
font-family: var(--fm); font-size: 13px; font-weight: 700;
|
||||
color: var(--t0); margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.evt-summary-counts {
|
||||
display: flex; gap: 10px; flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.evt-count {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-family: var(--fm); font-size: 11px; color: var(--t2);
|
||||
}
|
||||
|
||||
.evt-count strong { font-size: 14px; color: var(--t0); }
|
||||
|
||||
.evt-total {
|
||||
font-family: var(--fm); font-size: 11px; color: var(--t2);
|
||||
margin-top: 8px; padding-top: 8px;
|
||||
border-top: 1px solid var(--bd);
|
||||
}
|
||||
|
||||
.evt-total strong { color: var(--t0); }
|
||||
```
|
||||
|
||||
**검증**:
|
||||
- [ ] `.evt-badge.trip` 의 색상이 `#f87171` (red-400) 계열인지 확인
|
||||
- [ ] `.evt-summary-grid`가 반응형으로 동작하는지 확인 (`auto-fill, minmax`)
|
||||
|
||||
---
|
||||
|
||||
### Step 2: HTML — 사이드바 탭 항목 추가
|
||||
|
||||
**파일**: `src/Web/wwwroot/index.html`
|
||||
**위치**: `<li class="nav-item" data-tab="pid">` 블록 (현재 75-78줄) **뒤**
|
||||
|
||||
```html
|
||||
<li class="nav-item" data-tab="evt">
|
||||
<span class="ni">12</span>
|
||||
<span class="nl">이벤트 히스토리</span>
|
||||
</li>
|
||||
```
|
||||
|
||||
**검증**:
|
||||
- [ ] 탭 번호가 기존 11번(P&ID 추출) 다음인지 확인
|
||||
- [ ] `data-tab="evt"`가 `#pane-evt`와 매핑되는지 확인 (탭 클릭 핸들러가 `pane-${tab}` 패턴 사용)
|
||||
|
||||
---
|
||||
|
||||
### Step 3: HTML — #pane-evt 섹션 추가
|
||||
|
||||
**파일**: `src/Web/wwwroot/index.html`
|
||||
**위치**: `#pane-pid` 섹션 (현재 파일 말미) 바로 뒤, `</main>` 닫는 태그 앞
|
||||
|
||||
```html
|
||||
<!-- ══════════════════════════════════════════════════════
|
||||
12 이벤트 히스토리
|
||||
═══════════════════════════════════════════════════════ -->
|
||||
<section class="pane" id="pane-evt">
|
||||
<header class="pane-hdr">
|
||||
<div>
|
||||
<h1>이벤트 히스토리</h1>
|
||||
<p>디지털 포인트 상태 변경 이벤트를 조회합니다. (event_history_table)</p>
|
||||
</div>
|
||||
<div class="pane-tag">EVENT / DIGITAL</div>
|
||||
</header>
|
||||
|
||||
<!-- 조회 조건 카드 -->
|
||||
<div class="card">
|
||||
<div class="card-cap">조회 조건</div>
|
||||
|
||||
<!-- 태그 필터 -->
|
||||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px">
|
||||
<span>태그 필터</span>
|
||||
<button class="btn-b btn-sm" onclick="evtLoadTags()">▼ 태그 목록 불러오기</button>
|
||||
<span id="evt-tag-status" class="hist-status"></span>
|
||||
</div>
|
||||
<div class="fg">
|
||||
<select id="ef-tag" class="inp">
|
||||
<option value="">— 전체 태그 —</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 필터 4열 -->
|
||||
<div class="cols-4">
|
||||
<div class="fg">
|
||||
<label>이벤트 타입</label>
|
||||
<select id="ef-event-type" class="inp">
|
||||
<option value="">전체</option>
|
||||
<option value="TRIP">TRIP</option>
|
||||
<option value="RUN">RUN</option>
|
||||
<option value="ALARM">ALARM</option>
|
||||
<option value="NORMAL">NORMAL</option>
|
||||
<option value="CHANGE">CHANGE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="fg">
|
||||
<label>Area <em>(예: P6)</em></label>
|
||||
<input id="ef-area" class="inp" type="text" placeholder="비워두면 전체"/>
|
||||
</div>
|
||||
<div class="fg">
|
||||
<label>Section <em>(예: 1-2차)</em></label>
|
||||
<input id="ef-section" class="inp" type="text" placeholder="비워두면 전체"/>
|
||||
</div>
|
||||
<div class="fg">
|
||||
<label>최대 행 수</label>
|
||||
<input id="ef-limit" class="inp" type="number" value="500" min="10" max="5000"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 시간 범위 -->
|
||||
<div class="cols-2">
|
||||
<div class="fg">
|
||||
<label>시작 시간</label>
|
||||
<input type="hidden" id="hf-evt-from"/>
|
||||
<div class="dt-display inp" id="dtp-evt-from-display" onclick="dtOpen('evt-from')">— 선택 안 함 —</div>
|
||||
</div>
|
||||
<div class="fg">
|
||||
<label>종료 시간</label>
|
||||
<input type="hidden" id="hf-evt-to"/>
|
||||
<div class="dt-display inp" id="dtp-evt-to-display" onclick="dtOpen('evt-to')">— 선택 안 함 —</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-row">
|
||||
<button class="btn-a" onclick="evtQuery()">🔍 이벤트 조회</button>
|
||||
<button class="btn-b" onclick="evtSummary()">📊 구간 요약</button>
|
||||
<button class="btn-b" onclick="evtReset()">초기화</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 요약 결과 카드 (처음에는 숨김) -->
|
||||
<div id="evt-summary-card" class="card hidden">
|
||||
<div class="card-cap">구간별 이벤트 요약</div>
|
||||
<div id="evt-summary-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- 조회 결과 -->
|
||||
<div id="evt-result-info" class="nm-result-info hidden" style="margin:8px 0"></div>
|
||||
<div id="evt-table" class="tbl-wrap hidden"></div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**설계 결정**:
|
||||
- 날짜 피커: 기존 `dtOpen(target)` 재사용. target이 `'evt-from'`이면 `hf-evt-from`, `dtp-evt-from-display` ID를 자동으로 참조 — **기존 코드 수정 없음**
|
||||
- `hist-status` 클래스 재사용 (기존 스타일 이미 존재)
|
||||
- `.hidden` 클래스 재사용 (기존 스타일 이미 존재)
|
||||
- `nm-result-info` 클래스 재사용 (조회 결과 건수 표시용)
|
||||
|
||||
**검증**:
|
||||
- [ ] `dtOpen('evt-from')` 호출 시 `hf-evt-from`, `dtp-evt-from-display` 를 정확히 참조하는지 확인
|
||||
- [ ] `class="pane"` (active 없음) — 탭 클릭 시 JS가 active 추가하므로 정상
|
||||
- [ ] `</main>` 닫는 태그 앞에 삽입했는지 확인
|
||||
|
||||
---
|
||||
|
||||
### Step 4+5: JS 함수 추가
|
||||
|
||||
**파일**: `src/Web/wwwroot/js/app.js`
|
||||
**위치**: `histReset()` 함수 (현재 1158줄) 블록 **뒤**에 추가
|
||||
|
||||
```javascript
|
||||
// ── Event History ─────────────────────────────────────────────────────────────
|
||||
|
||||
async function evtLoadTags() {
|
||||
const statusEl = document.getElementById('evt-tag-status');
|
||||
statusEl.textContent = '⏳ 조회 중...';
|
||||
try {
|
||||
const d = await api('GET', '/api/event-history/digital-tags');
|
||||
const tags = d.data || [];
|
||||
const sel = document.getElementById('ef-tag');
|
||||
sel.innerHTML = '<option value="">— 전체 태그 —</option>' +
|
||||
tags.map(t => `<option value="${esc(t.tagName)}">${esc(t.tagName)}</option>`).join('');
|
||||
statusEl.textContent = `✅ ${tags.length}개`;
|
||||
} catch (e) {
|
||||
statusEl.textContent = `❌ ${e.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function evtQuery() {
|
||||
const tag = document.getElementById('ef-tag').value;
|
||||
const eventType = document.getElementById('ef-event-type').value;
|
||||
const area = document.getElementById('ef-area').value.trim();
|
||||
const section = document.getElementById('ef-section').value.trim();
|
||||
const limit = document.getElementById('ef-limit').value || 500;
|
||||
const fromRaw = document.getElementById('hf-evt-from').value;
|
||||
const toRaw = document.getElementById('hf-evt-to').value;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (tag) params.set('tagName', tag);
|
||||
if (eventType) params.set('eventType', eventType);
|
||||
if (area) params.set('area', area);
|
||||
if (section) params.set('section', section);
|
||||
params.set('limit', limit);
|
||||
if (fromRaw) params.set('from', new Date(fromRaw).toISOString());
|
||||
if (toRaw) params.set('to', new Date(toRaw).toISOString());
|
||||
|
||||
const infoEl = document.getElementById('evt-result-info');
|
||||
const tableEl = document.getElementById('evt-table');
|
||||
infoEl.textContent = '⏳ 조회 중...';
|
||||
infoEl.classList.remove('hidden');
|
||||
tableEl.classList.add('hidden');
|
||||
|
||||
try {
|
||||
const d = await api('GET', `/api/event-history?${params}`);
|
||||
if (!d.success) throw new Error(d.error || '조회 실패');
|
||||
infoEl.textContent = `총 ${d.count}건`;
|
||||
tableEl.innerHTML = _evtBuildTable(d.data);
|
||||
tableEl.classList.remove('hidden');
|
||||
} catch (e) {
|
||||
infoEl.textContent = `❌ ${e.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function evtSummary() {
|
||||
const area = document.getElementById('ef-area').value.trim();
|
||||
const section = document.getElementById('ef-section').value.trim();
|
||||
const fromRaw = document.getElementById('hf-evt-from').value;
|
||||
const toRaw = document.getElementById('hf-evt-to').value;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (area) params.set('area', area);
|
||||
if (section) params.set('section', section);
|
||||
if (fromRaw) params.set('from', new Date(fromRaw).toISOString());
|
||||
if (toRaw) params.set('to', new Date(toRaw).toISOString());
|
||||
|
||||
const card = document.getElementById('evt-summary-card');
|
||||
const content = document.getElementById('evt-summary-content');
|
||||
content.textContent = '⏳ 집계 중...';
|
||||
card.classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const d = await api('GET', `/api/event-history/summary?${params}`);
|
||||
if (!d.success) throw new Error(d.error || '조회 실패');
|
||||
content.innerHTML = _evtBuildSummary(d.data);
|
||||
} catch (e) {
|
||||
content.textContent = `❌ ${e.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
function _evtBadge(t) {
|
||||
const cls = { TRIP:'trip', RUN:'run', ALARM:'alarm', NORMAL:'normal', CHANGE:'change' }[t] || 'change';
|
||||
return `<span class="evt-badge ${cls}">${esc(t)}</span>`;
|
||||
}
|
||||
|
||||
function _evtFmtTime(dt) {
|
||||
if (!dt) return '—';
|
||||
return new Date(dt).toLocaleString('ko-KR', {
|
||||
year:'numeric', month:'2-digit', day:'2-digit',
|
||||
hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false
|
||||
});
|
||||
}
|
||||
|
||||
function _evtBuildTable(rows) {
|
||||
if (!rows || !rows.length)
|
||||
return '<div style="padding:24px;text-align:center;color:var(--t2)">데이터 없음</div>';
|
||||
const html = rows.map(r => `
|
||||
<tr>
|
||||
<td style="white-space:nowrap;color:var(--t2);font-family:var(--fm);font-size:11px">${_evtFmtTime(r.eventTime)}</td>
|
||||
<td><code style="font-size:11px;color:var(--blu)">${esc(r.tagName)}</code></td>
|
||||
<td>${_evtBadge(r.eventType)}</td>
|
||||
<td style="color:var(--t2)">${esc(r.prevValue ?? '—')}</td>
|
||||
<td style="color:var(--t0);font-weight:600">${esc(r.currValue)}</td>
|
||||
<td>${r.area ? `<span class="nm-cls">${esc(r.area)}</span>` : '—'}</td>
|
||||
<td>${r.section ? `<span class="nm-cls">${esc(r.section)}</span>` : '—'}</td>
|
||||
<td style="font-family:var(--fm);font-size:11px;color:var(--t2)">${r.durationSeconds != null ? r.durationSeconds + 's' : '—'}</td>
|
||||
</tr>`).join('');
|
||||
return `
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>시간</th>
|
||||
<th>태그명</th>
|
||||
<th>이벤트</th>
|
||||
<th>이전값</th>
|
||||
<th>현재값</th>
|
||||
<th>Area</th>
|
||||
<th>Section</th>
|
||||
<th>지속(초)</th>
|
||||
</tr></thead>
|
||||
<tbody>${html}</tbody>
|
||||
</table>`;
|
||||
}
|
||||
|
||||
function _evtBuildSummary(data) {
|
||||
if (!data || !data.length)
|
||||
return '<div style="padding:12px;color:var(--t2)">데이터 없음</div>';
|
||||
return `<div class="evt-summary-grid">${data.map(s => `
|
||||
<div class="evt-summary-item">
|
||||
<div class="evt-summary-section">${esc(s.section)}</div>
|
||||
<div class="evt-summary-counts">
|
||||
<div class="evt-count">${_evtBadge('TRIP')} <strong>${s.tripCount}</strong></div>
|
||||
<div class="evt-count">${_evtBadge('RUN')} <strong>${s.runCount}</strong></div>
|
||||
<div class="evt-count">${_evtBadge('ALARM')} <strong>${s.alarmCount}</strong></div>
|
||||
<div class="evt-count">${_evtBadge('CHANGE')} <strong>${s.changeCount}</strong></div>
|
||||
</div>
|
||||
<div class="evt-total">합계 <strong>${s.totalEvents}</strong>건</div>
|
||||
</div>`).join('')}</div>`;
|
||||
}
|
||||
|
||||
function evtReset() {
|
||||
document.getElementById('ef-tag').value = '';
|
||||
document.getElementById('ef-event-type').value = '';
|
||||
document.getElementById('ef-area').value = '';
|
||||
document.getElementById('ef-section').value = '';
|
||||
document.getElementById('ef-limit').value = '500';
|
||||
dtClearField('evt-from');
|
||||
dtClearField('evt-to');
|
||||
document.getElementById('evt-result-info').classList.add('hidden');
|
||||
document.getElementById('evt-table').classList.add('hidden');
|
||||
document.getElementById('evt-summary-card').classList.add('hidden');
|
||||
document.getElementById('evt-tag-status').textContent = '';
|
||||
}
|
||||
```
|
||||
|
||||
**설계 결정**:
|
||||
- `_evtBuildTable`, `_evtBuildSummary`, `_evtBadge`, `_evtFmtTime`에 `_` 접두사 → 내부 헬퍼임을 명시
|
||||
- `dtClearField('evt-from')` 재사용 — 기존 함수가 `hf-${target}`, `dtp-${target}-display` 패턴으로 동작하므로 수정 없음
|
||||
- 탭 진입 시 자동 API 호출 없음 (탭 핸들러에 `if (tab === 'evt')` 추가 불필요)
|
||||
- `api()` 헬퍼 함수 재사용 (기존 코드에 이미 정의됨)
|
||||
|
||||
**검증**:
|
||||
- [ ] `api('GET', '/api/event-history/digital-tags')` 응답의 `d.data` 배열 안에 `{ tagName: "..." }` 형태인지 확인
|
||||
- [ ] `new Date(fromRaw).toISOString()` — `fromRaw`는 `"2026-05-11T03:00"` 형태 → ISO 8601 UTC로 변환됨 (기존 hist 탭과 동일 패턴)
|
||||
- [ ] `_evtBuildTable(d.data)` — `d.data`가 빈 배열이면 "데이터 없음" 메시지 표시
|
||||
- [ ] `evtReset()`이 summary 카드도 숨기는지 확인
|
||||
|
||||
---
|
||||
|
||||
## 4. 파일별 추가 위치 요약
|
||||
|
||||
### `style.css`
|
||||
```
|
||||
파일 말미 (1489줄 끝) → .evt-badge ~ .evt-total 블록 추가
|
||||
```
|
||||
|
||||
### `index.html`
|
||||
```
|
||||
[위치 1] 75-78줄 <li data-tab="pid"> 블록 뒤:
|
||||
→ <li data-tab="evt"> 탭 항목 추가
|
||||
|
||||
[위치 2] </main> 닫는 태그 앞 (현재 파일 말미):
|
||||
→ #pane-evt 섹션 전체 추가
|
||||
```
|
||||
|
||||
### `app.js`
|
||||
```
|
||||
histReset() 함수 끝 (현재 ~1175줄) 뒤:
|
||||
→ evtLoadTags ~ evtReset 전체 블록 추가
|
||||
```
|
||||
|
||||
**탭 핸들러 수정 없음**: `evt` 탭은 진입 시 API 자동 호출 없음 (사용자가 버튼 클릭 시에만 실행).
|
||||
|
||||
---
|
||||
|
||||
## 5. 검증 절차
|
||||
|
||||
### Stage A — 빌드/렌더링
|
||||
- [ ] 브라우저에서 사이드바에 "12 이벤트 히스토리" 탭이 보이는지 확인
|
||||
- [ ] 탭 클릭 시 `#pane-evt`가 활성화되는지 확인
|
||||
|
||||
### Stage B — 태그 목록 로드
|
||||
```
|
||||
▼ 태그 목록 불러오기 버튼 클릭
|
||||
→ GET /api/event-history/digital-tags
|
||||
→ ef-tag 드롭다운에 디지털 태그 목록 채워짐
|
||||
→ 태그 상태에 "✅ N개" 표시
|
||||
```
|
||||
|
||||
### Stage C — 이벤트 조회
|
||||
```
|
||||
시작/종료 시간 선택 → 🔍 이벤트 조회 버튼
|
||||
→ GET /api/event-history?from=...&to=...&limit=500
|
||||
→ 결과 테이블 렌더링 (시간, 태그, 배지, 이전값/현재값, Area, Section, 지속시간)
|
||||
→ 이벤트 타입별 배지 색상 확인 (TRIP:red, RUN:green, ALARM:amber)
|
||||
```
|
||||
|
||||
### Stage D — 구간 요약
|
||||
```
|
||||
📊 구간 요약 버튼
|
||||
→ GET /api/event-history/summary?from=...&to=...
|
||||
→ evt-summary-card 표시
|
||||
→ Section별 카드 그리드 렌더링 (TRIP/RUN/ALARM/CHANGE 각 건수)
|
||||
```
|
||||
|
||||
### Stage E — 필터 조합
|
||||
```
|
||||
- eventType=TRIP 선택 후 조회 → TRIP 이벤트만 표시
|
||||
- area=P6 입력 후 조회 → P6 area만 표시
|
||||
- tagName 선택 후 조회 → 해당 태그만 표시
|
||||
```
|
||||
|
||||
### Stage F — 초기화
|
||||
```
|
||||
초기화 버튼 → 모든 필터 리셋, 결과 테이블 숨김, 요약 카드 숨김
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 주의사항
|
||||
|
||||
1. **날짜 피커 재사용**: `dtOpen('evt-from')` 호출 시 `hf-evt-from`(hidden input), `dtp-evt-from-display`(표시 div) ID를 자동 참조. **기존 dt-picker 코드 수정 불필요**.
|
||||
|
||||
2. **탭 진입 시 API 없음**: 탭 핸들러 (`app.js` 7-18줄)에 `evt` 케이스 추가 불필요. 사이드 이펙트 없음.
|
||||
|
||||
3. **from/to 기본값**: from/to 미입력 시 백엔드에서 자동으로 최근 1일 (`DateTime.UtcNow.AddDays(-1)` ~ `DateTime.UtcNow`) 적용. 빈 파라미터 전송 시에도 정상 동작.
|
||||
|
||||
4. **`esc()` 필수**: XSS 방지를 위해 서버 응답의 모든 문자열 필드에 `esc()` 적용. 특히 tagName, currValue, prevValue.
|
||||
|
||||
5. **`nm-cls` 재사용**: Area/Section 표시에 기존 `.nm-cls` 배지 스타일 재사용 (별도 CSS 불필요).
|
||||
|
||||
6. **`hist-status` 재사용**: 태그 로드 상태 표시에 기존 `.hist-status` 클래스 재사용.
|
||||
|
||||
---
|
||||
|
||||
## 7. Todo List
|
||||
|
||||
| # | 작업 | 파일 | 상태 | 검증 방법 |
|
||||
|---|------|------|------|-----------|
|
||||
| 1 | `.evt-badge` ~ `.evt-total` CSS 추가 | `style.css` | ⬜ | 브라우저 개발자도구 CSS 확인 |
|
||||
| 2 | `<li data-tab="evt">` 탭 항목 추가 | `index.html` | ⬜ | 사이드바 탭 노출 확인 |
|
||||
| 3 | `#pane-evt` 섹션 전체 추가 | `index.html` | ⬜ | 탭 클릭 시 pane 활성화 확인 |
|
||||
| 4 | `evtLoadTags()` ~ `evtReset()` 함수 추가 | `app.js` | ⬜ | 버튼 클릭 → API 호출 확인 |
|
||||
| 5 | 태그 목록 로드 테스트 | — | ⬜ | 드롭다운에 디지털 태그 표시 |
|
||||
| 6 | 이벤트 조회 테스트 | — | ⬜ | 결과 테이블 + 배지 렌더링 확인 |
|
||||
| 7 | 구간 요약 테스트 | — | ⬜ | 요약 카드 그리드 렌더링 확인 |
|
||||
| 8 | 필터 조합 테스트 | — | ⬜ | TRIP 전용, Area 전용 등 확인 |
|
||||
| 9 | 초기화 테스트 | — | ⬜ | 모든 필드 리셋 확인 |
|
||||
1095
plans/이벤트-히스토리-테이블-코딩플랜.md
Normal file
1095
plans/이벤트-히스토리-테이블-코딩플랜.md
Normal file
File diff suppressed because it is too large
Load Diff
603
plans/이벤트-히스토리-테이블-플랜.md
Normal file
603
plans/이벤트-히스토리-테이블-플랜.md
Normal file
@@ -0,0 +1,603 @@
|
||||
# 이벤트 기반 디지털 포인트 히스토리 테이블 플랜
|
||||
|
||||
## 1. 개요
|
||||
|
||||
### 목적
|
||||
- 기존 periodic snapshot (60초마다)에서 **event-driven** 방식으로 변경
|
||||
- 디지털 포인트의 상태 변경 時만 기록하여 스토리지 절약
|
||||
|
||||
### 현재 상태
|
||||
- `ExperionHistoryService`가 60초마다 `realtime_table` 전체를 `history_table`에 스냅샷
|
||||
- 디지털/아날로그 구분 없이 모든 포인트가 Periodic으로 기록
|
||||
|
||||
---
|
||||
|
||||
## 2. Phase 1: 기존 히스토리 루틴에서 디지털 포인트 제외
|
||||
|
||||
### 구현 위치
|
||||
`src/Infrastructure/Database/ExperionDbContext.cs:730` - `SnapshotToHistoryAsync()`
|
||||
|
||||
### 변경 내용
|
||||
1. 디지털 태그 식별 기준 정의
|
||||
2. 기존 SnapshotToHistoryAsync 메서드에 Where 조건 추가
|
||||
|
||||
### 예상 코드 변경
|
||||
|
||||
```csharp
|
||||
// 메서드 시그니처에 디지털 필터 옵션 추가
|
||||
public async Task<int> SnapshotToHistoryAsync(bool includeDigital = false)
|
||||
{
|
||||
var now = DateTime.UtcNow;
|
||||
var query = _ctx.RealtimePoints.AsQueryable();
|
||||
|
||||
// 디지털 제외 (기본값)
|
||||
if (!includeDigital)
|
||||
{
|
||||
var digitalTagNames = await GetDigitalTagNamesAsync();
|
||||
query = query.Where(p => !digitalTagNames.Contains(p.TagName));
|
||||
}
|
||||
|
||||
var points = await query.ToListAsync();
|
||||
if (points.Count == 0) return 0;
|
||||
|
||||
var rows = points.Select(p => new HistoryRecord
|
||||
{
|
||||
TagName = p.TagName,
|
||||
NodeId = p.NodeId,
|
||||
Value = p.LiveValue,
|
||||
RecordedAt = now
|
||||
}).ToList();
|
||||
|
||||
await _ctx.HistoryRecords.AddRangeAsync(rows);
|
||||
var saved = await _ctx.SaveChangesAsync();
|
||||
_logger.LogDebug("[ExperionDb] history 스냅샷: {Count}건 @ {Time:HH:mm:ss}", saved, now);
|
||||
return saved;
|
||||
}
|
||||
|
||||
// 디지털 태그 목록 조회 (캐싱 고려)
|
||||
private async Task<HashSet<string>> GetDigitalTagNamesAsync()
|
||||
{
|
||||
// node_map_master에서 data_type = i=7594 인 태그 조회
|
||||
// 또는 tag_metadata에서 value 패턴이 {X | STATE | } 형태인 태그
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Phase 2: 이벤트 히스토리 테이블 설계
|
||||
|
||||
### 테이블: event_history_table
|
||||
|
||||
```sql
|
||||
-- 이벤트 히스토리 테이블 생성
|
||||
CREATE TABLE event_history_table (
|
||||
id BIGSERIAL PRIMARY KEY,
|
||||
tagname TEXT NOT NULL,
|
||||
node_id TEXT NOT NULL,
|
||||
prev_value TEXT, -- 이전 상태 (예: "{0 | L-STOP | }")
|
||||
curr_value TEXT, -- 현재 상태 (예: "{0 | RUN | }")
|
||||
event_type TEXT NOT NULL, -- CHANGE, TRIP, RUN, ALARM, NORMAL, INTERLOCK
|
||||
event_time TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
area TEXT, -- P1, P6, P8 등 (tag_metadata에서 조회)
|
||||
section TEXT, -- 6-1차, 6-2차 (태그 번호 기반: 61xx=6-1차, 62xx=6-2차)
|
||||
duration_seconds INT, -- 이전 상태 지속 시간 (초)
|
||||
metadata JSONB, -- 추가 정보 (선택): {"alarm_priority": 3, "interlock_tag": "lica-6113-trip"}
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- 인덱스 (쿼리 성능 최적화)
|
||||
CREATE INDEX idx_event_history_tagname_time ON event_history_table(tagname, event_time DESC);
|
||||
CREATE INDEX idx_event_history_area_time ON event_history_table(area, event_time DESC);
|
||||
CREATE INDEX idx_event_history_section_time ON event_history_table(section, event_time DESC);
|
||||
CREATE INDEX idx_event_history_event_type ON event_history_table(event_type, event_time DESC);
|
||||
CREATE INDEX idx_event_history_tagname_event_type ON event_history_table(tagname, event_type, event_time DESC);
|
||||
|
||||
-- 테이블 설명 주석
|
||||
COMMENT ON TABLE event_history_table IS '디지털 포인트 상태 변경 이벤트 히스토리';
|
||||
COMMENT ON COLUMN event_history_table.event_type IS 'CHANGE: 일반 변경, TRIP: 정지, RUN: 가동, ALARM: 알람, NORMAL: 정상복귀, INTERLOCK: 인터록';
|
||||
```
|
||||
|
||||
### event_type 정의
|
||||
|
||||
| event_type | 설명 | 트리거 조건 |
|
||||
|------------|------|-------------|
|
||||
| `CHANGE` | 일반 상태 변경 | prev_value != curr_value |
|
||||
| `TRIP` | 장치 정지 | curr_value에 "L-STOP", "STOP", "TRIP" 포함 |
|
||||
| `RUN` | 장치 가동 | curr_value에 "RUN", "START" 포함 |
|
||||
| `ALARM` | 알람 발생 | alarm 상태 감지 |
|
||||
| `NORMAL` | 정상 복귀 | alarm clear |
|
||||
| `INTERLOCK` | 인터록 발생 | 인터록 관련 태그 (-il-rst, -trip) |
|
||||
| `SHUTDOWN` | 계획정지 | 명시적 shutdown 신호 |
|
||||
| `STARTUP` | 계획가동 | 명시적 startup 신호 |
|
||||
|
||||
---
|
||||
|
||||
## 4. Phase 3: 디지털 포인트 상태변화 감지 및 기록
|
||||
|
||||
### 4.1 새 서비스: DigitalEventDetectorService
|
||||
|
||||
**파일**: `src/Infrastructure/OpcUa/DigitalEventDetectorService.cs`
|
||||
|
||||
```csharp
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Hosting;
|
||||
using Microsoft.Extensions.Logging;
|
||||
using System.Collections.Concurrent;
|
||||
using System.Text.RegularExpressions;
|
||||
|
||||
namespace ExperionCrawler.Infrastructure.OpcUa;
|
||||
|
||||
/// <summary>
|
||||
/// 디지털 포인트의 상태 변경을 감지하여 event_history_table에 기록하는 BackgroundService.
|
||||
/// 1초 간격으로 realtime_table을 검사하여 변경 사항을 기록.
|
||||
/// </summary>
|
||||
public class DigitalEventDetectorService : BackgroundService
|
||||
{
|
||||
private readonly IServiceScopeFactory _scopeFactory;
|
||||
private readonly ILogger<DigitalEventDetectorService> _logger;
|
||||
private readonly Dictionary<string, DigitalPointState> _previousStates = new();
|
||||
private readonly HashSet<string> _digitalTagNames = new();
|
||||
private readonly ConcurrentDictionary<string, string> _areaCache = new();
|
||||
private readonly int _checkIntervalMs = 1000;
|
||||
private readonly int _debounceSeconds = 5; // 동일 상태 반복 방지
|
||||
|
||||
private record DigitalPointState(string Value, DateTime Timestamp, string? EventType);
|
||||
|
||||
public DigitalEventDetectorService(
|
||||
IServiceScopeFactory scopeFactory,
|
||||
ILogger<DigitalEventDetectorService> logger)
|
||||
{
|
||||
_scopeFactory = scopeFactory;
|
||||
_logger = logger;
|
||||
}
|
||||
|
||||
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
|
||||
{
|
||||
_logger.LogInformation("[DigitalEventDetector] 시작 — 감지 간격: {Interval}ms", _checkIntervalMs);
|
||||
|
||||
// 초기 디지털 태그 목록 로드
|
||||
await LoadDigitalTagNamesAsync();
|
||||
// 현재 상태 로드 (서비스 재시작 시 상태 손실 방지)
|
||||
await LoadCurrentStatesAsync();
|
||||
|
||||
while (!stoppingToken.IsCancellationRequested)
|
||||
{
|
||||
try
|
||||
{
|
||||
await Task.Delay(_checkIntervalMs, stoppingToken);
|
||||
await DetectAndRecordChangesAsync();
|
||||
}
|
||||
catch (OperationCanceledException) { break; }
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogError(ex, "[DigitalEventDetector] 감지 오류");
|
||||
}
|
||||
}
|
||||
|
||||
_logger.LogInformation("[DigitalEventDetector] 종료");
|
||||
}
|
||||
|
||||
private async Task LoadDigitalTagNamesAsync()
|
||||
{
|
||||
using var scope = _scopeFactory.CreateScope();
|
||||
var db = scope.ServiceProvider.GetRequiredService<IExperionDbService>();
|
||||
|
||||
var digitalTags = await db.GetDigitalTagNamesAsync();
|
||||
_digitalTagNames.UnionWith(digitalTags);
|
||||
_logger.LogInformation("[DigitalEventDetector] 디지털 태그 {Count}개 로드됨", _digitalTagNames.Count);
|
||||
}
|
||||
|
||||
private async Task LoadCurrentStatesAsync()
|
||||
{
|
||||
using var scope = _scopeFactory.CreateScope();
|
||||
var db = scope.ServiceProvider.GetRequiredService<IExperionDbService>();
|
||||
var points = await db.GetDigitalPointsAsync();
|
||||
foreach (var p in points)
|
||||
_previousStates[p.TagName] = new DigitalPointState(p.LiveValue, DateTime.UtcNow, null);
|
||||
_logger.LogInformation("[DigitalEventDetector] 현재 상태 {Count}개 로드", _previousStates.Count);
|
||||
}
|
||||
|
||||
private async Task DetectAndRecordChangesAsync()
|
||||
{
|
||||
using var scope = _scopeFactory.CreateScope();
|
||||
var db = scope.ServiceProvider.GetRequiredService<IExperionDbService>();
|
||||
|
||||
// 디지털 포인트만 조회
|
||||
var currentPoints = await db.GetDigitalPointsAsync();
|
||||
|
||||
foreach (var point in currentPoints)
|
||||
{
|
||||
var tagName = point.TagName;
|
||||
var currValue = point.LiveValue;
|
||||
|
||||
// 첫 등장 시 이전 값 초기화 (이벤트 기록 안 함)
|
||||
if (!_previousStates.TryGetValue(tagName, out var prevState))
|
||||
{
|
||||
_previousStates[tagName] = new DigitalPointState(currValue, DateTime.UtcNow, null);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 값 변경 감지
|
||||
if (prevState.Value != currValue)
|
||||
{
|
||||
var eventType = DetermineEventType(prevState.Value, currValue);
|
||||
|
||||
// Debounce: 동일 상태로의 반복만 방지, 상태 전환(TRIP→RUN 등)은 항상 기록
|
||||
if (prevState.EventType == eventType && prevState.Value == currValue &&
|
||||
(DateTime.UtcNow - prevState.Timestamp).TotalSeconds < _debounceSeconds)
|
||||
{
|
||||
_previousStates[tagName] = new DigitalPointState(currValue, DateTime.UtcNow, eventType);
|
||||
continue;
|
||||
}
|
||||
|
||||
// 이벤트 기록
|
||||
var duration = (int)(DateTime.UtcNow - prevState.Timestamp).TotalSeconds;
|
||||
await db.RecordDigitalEventAsync(new DigitalEventRecord
|
||||
{
|
||||
TagName = tagName,
|
||||
NodeId = point.NodeId,
|
||||
PrevValue = prevState.Value,
|
||||
CurrValue = currValue,
|
||||
EventType = eventType,
|
||||
EventTime = DateTime.UtcNow,
|
||||
DurationSeconds = duration,
|
||||
Area = ExtractArea(tagName),
|
||||
Section = ExtractSection(tagName),
|
||||
Metadata = BuildMetadata(tagName, eventType, currValue)
|
||||
});
|
||||
|
||||
_logger.LogDebug("[DigitalEventDetector] {Tag}: {Event} ({Prev} → {Curr})",
|
||||
tagName, eventType, prevState.Value, currValue);
|
||||
|
||||
_previousStates[tagName] = new DigitalPointState(currValue, DateTime.UtcNow, eventType);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private string DetermineEventType(string? prevValue, string currValue)
|
||||
{
|
||||
if (currValue.Contains("L-STOP") || currValue.Contains("STOP") || currValue.Contains("TRIP"))
|
||||
return "TRIP";
|
||||
if (currValue.Contains("RUN") || currValue.Contains("START"))
|
||||
return "RUN";
|
||||
if (currValue.Contains("ALARM"))
|
||||
return "ALARM";
|
||||
if (prevValue?.Contains("ALARM") == true && !currValue.Contains("ALARM"))
|
||||
return "NORMAL";
|
||||
return "CHANGE";
|
||||
}
|
||||
|
||||
private string? ExtractArea(string tagName)
|
||||
{
|
||||
if (_areaCache.TryGetValue(tagName, out var area)) return area;
|
||||
|
||||
using var scope = _scopeFactory.CreateScope();
|
||||
var db = scope.ServiceProvider.GetRequiredService<IExperionDbService>();
|
||||
area = db.GetAreaByTagNameAsync(tagName).GetAwaiter().GetResult();
|
||||
|
||||
if (area != null)
|
||||
_areaCache[tagName] = area;
|
||||
return area;
|
||||
}
|
||||
|
||||
private string? ExtractSection(string tagName)
|
||||
{
|
||||
// 태그 번호로 구간 추출: ficq-6101 → 6-1차, p-6202 → 6-2차
|
||||
// 첫 번째 숫자-두 번째 숫자 패턴 (일반화)
|
||||
var match = Regex.Match(tagName, @"-(\d)(\d)\d{2}");
|
||||
if (match.Success) return $"{match.Groups[1]}-{match.Groups[2]}차";
|
||||
return "기타";
|
||||
}
|
||||
|
||||
private string? BuildMetadata(string tagName, string eventType, string currValue)
|
||||
{
|
||||
// 인터록 태그인 경우 메타데이터 추가
|
||||
if (tagName.Contains("-il-") || tagName.Contains("-trip"))
|
||||
{
|
||||
return System.Text.Json.JsonSerializer.Serialize(new
|
||||
{
|
||||
interlock_tag = tagName,
|
||||
event_type = eventType,
|
||||
raw_value = currValue
|
||||
});
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 IExperionServices 인터페이스 확장
|
||||
|
||||
**참고**: `DigitalEventRecord`는 서비스 계층 DTO, `EventHistoryRecord`는 EF Core Entity 클래스로 별도 정의 필요
|
||||
|
||||
```csharp
|
||||
// src/Core/Application/Interfaces/IExperionServices.cs에 추가
|
||||
public interface IExperionDbService
|
||||
{
|
||||
// ... 기존 메서드 ...
|
||||
|
||||
/// <summary>디지털 태그 이름 목록 조회</summary>
|
||||
Task<IEnumerable<string>> GetDigitalTagNamesAsync();
|
||||
|
||||
/// <summary>디지털 포인트 현재 값 조회</summary>
|
||||
Task<IEnumerable<RealtimePoint>> GetDigitalPointsAsync();
|
||||
|
||||
/// <summary>디지털 이벤트 기록</summary>
|
||||
Task<int> RecordDigitalEventAsync(DigitalEventRecord record);
|
||||
|
||||
/// <summary>태그명으로 area 조회 (tag_metadata 기반)</summary>
|
||||
Task<string?> GetAreaByTagNameAsync(string tagName);
|
||||
}
|
||||
|
||||
// 새로운 모델 클래스 (서비스 계층 DTO)
|
||||
public class DigitalEventRecord
|
||||
{
|
||||
public string TagName { get; set; } = "";
|
||||
public string NodeId { get; set; } = "";
|
||||
public string? PrevValue { get; set; }
|
||||
public string CurrValue { get; set; } = "";
|
||||
public string EventType { get; set; } = "";
|
||||
public DateTime EventTime { get; set; }
|
||||
public int? DurationSeconds { get; set; }
|
||||
public string? Area { get; set; }
|
||||
public string? Section { get; set; }
|
||||
public string? Metadata { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2.1 EventHistoryRecord Entity 클래스 정의
|
||||
|
||||
```csharp
|
||||
// src/Core/Domain/Entities/ExperionEntities.cs에 추가
|
||||
/// <summary>event_history_table — 디지털 포인트 상태 변경 이벤트</summary>
|
||||
[Table("event_history_table")]
|
||||
public class EventHistoryRecord
|
||||
{
|
||||
[Column("id")] public int Id { get; set; }
|
||||
[Column("tagname")] public string TagName { get; set; } = string.Empty;
|
||||
[Column("node_id")] public string NodeId { get; set; } = string.Empty;
|
||||
[Column("prev_value")] public string? PrevValue { get; set; }
|
||||
[Column("curr_value")] public string CurrValue { get; set; } = string.Empty;
|
||||
[Column("event_type")] public string EventType { get; set; } = string.Empty;
|
||||
[Column("event_time")] public DateTime EventTime { get; set; } = DateTime.UtcNow;
|
||||
[Column("area")] public string? Area { get; set; }
|
||||
[Column("section")] public string? Section { get; set; }
|
||||
[Column("duration_seconds")] public int? DurationSeconds { get; set; }
|
||||
[Column("metadata")] public string? Metadata { get; set; }
|
||||
[Column("created_at")] public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 ExperionDbContext 구현 추가
|
||||
|
||||
```csharp
|
||||
// src/Infrastructure/Database/ExperionDbContext.cs에 추가
|
||||
|
||||
public async Task<IEnumerable<string>> GetDigitalTagNamesAsync()
|
||||
{
|
||||
// node_map_master에서 data_type = 'i=7594' 인 태그 조회
|
||||
// 또는 정규식으로 value 패턴이 {X | STATE | } 형태인 태그
|
||||
return await _ctx.RealtimePoints
|
||||
.Where(p => p.LiveValue != null && p.LiveValue.StartsWith("{"))
|
||||
.Select(p => p.TagName)
|
||||
.ToListAsync();
|
||||
}
|
||||
|
||||
public async Task<IEnumerable<RealtimePoint>> GetDigitalPointsAsync()
|
||||
{
|
||||
return await _ctx.RealtimePoints
|
||||
.Where(p => p.LiveValue != null && p.LiveValue.StartsWith("{"))
|
||||
.ToListAsync();
|
||||
}
|
||||
|
||||
public async Task<string?> GetAreaByTagNameAsync(string tagName)
|
||||
{
|
||||
// tag_metadata에서 base_tag=tagName, attribute='area' 조회
|
||||
// value = "{12 | P6 | }" → "P6" 파싱
|
||||
var meta = await _ctx.TagMetadata
|
||||
.Where(m => m.BaseTag == tagName && m.Attribute == "area")
|
||||
.Select(m => m.Value)
|
||||
.FirstOrDefaultAsync();
|
||||
|
||||
if (string.IsNullOrEmpty(meta)) return null;
|
||||
|
||||
// "{12 | P6 | }" 패턴에서 area 코드 추출
|
||||
var match = System.Text.RegularExpressions.Regex.Match(meta, @"{\s*\d+\s*\|\s*(\w+)\s*\|");
|
||||
return match.Success ? match.Groups[1].Value : null;
|
||||
}
|
||||
|
||||
public async Task<int> RecordDigitalEventAsync(DigitalEventRecord record)
|
||||
{
|
||||
var row = new EventHistoryRecord
|
||||
{
|
||||
TagName = record.TagName,
|
||||
NodeId = record.NodeId,
|
||||
PrevValue = record.PrevValue,
|
||||
CurrValue = record.CurrValue,
|
||||
EventType = record.EventType,
|
||||
EventTime = record.EventTime,
|
||||
DurationSeconds = record.DurationSeconds,
|
||||
Area = record.Area,
|
||||
Section = record.Section,
|
||||
Metadata = record.Metadata
|
||||
};
|
||||
|
||||
await _ctx.EventHistoryRecords.AddAsync(row);
|
||||
return await _ctx.SaveChangesAsync();
|
||||
}
|
||||
|
||||
// DbSet 추가
|
||||
public DbSet<EventHistoryRecord> EventHistoryRecords => Set<EventHistoryRecord>();
|
||||
```
|
||||
|
||||
### 4.4 Program.cs 등록
|
||||
|
||||
```csharp
|
||||
// src/Web/Program.cs에 추가
|
||||
builder.Services.AddHostedService<DigitalEventDetectorService>();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Phase 4: 보고서 기능 설계
|
||||
|
||||
### 5.1 요구사항 분석
|
||||
|
||||
**입력 예시**: "지난밤 6차 플랜트의 현황 보고"
|
||||
|
||||
**출력 형식**:
|
||||
```
|
||||
[제목] 2026-05-10 6차 플랜트 현황 보고
|
||||
[시간] 2026-05-09 00:00:00 ~ 2026-05-10 00:00:00
|
||||
|
||||
[6-1차 (태그명: %-61%)]
|
||||
- 00:00:00 p-6102 Trip 정지 → 00:05:30 가동 (정지 시간: 5분 30초)
|
||||
- 알람 발생: 3회
|
||||
- ficq-6101.qv.value (투입량): 12,500 kg
|
||||
- ficq-6118.qv.value (생산량): 11,200 kg
|
||||
|
||||
[6-2차 (태그명: %-62%)]
|
||||
- 02:30:00 p-6201 Trip 정지 → 02:45:00 가동 (정지 시간: 15분)
|
||||
- 알람 발생: 1회
|
||||
```
|
||||
|
||||
### 5.2 필요한 데이터
|
||||
|
||||
| 데이터 | 출처 | 설명 |
|
||||
|--------|------|------|
|
||||
| 구간별 이벤트 | event_history_table | 6-1차 (61xx), 6-2차 (62xx) |
|
||||
| Trip/Run 쌍 | event_history_table | 정지~가동 시간 계산 |
|
||||
| 알람 횟수 | event_history_table | event_type = 'ALARM' count |
|
||||
| 투입량 | history_table 또는 별도 테이블 | ficq-6101, ficq-6201 |
|
||||
| 생산량 | history_table 또는 별도 테이블 | ficq-6118, ficq-6218 |
|
||||
|
||||
### 5.3 구간(세션) 구분 로직
|
||||
|
||||
**참고**: Phase 3의 `ExtractSection`과 동일한 로직으로 통일 (진단 HIGH #1 반영)
|
||||
|
||||
```csharp
|
||||
private string? ExtractSection(string tagName)
|
||||
{
|
||||
// 태그 번호로 구간 추출: ficq-6101 → 6-1차, p-6202 → 6-2차
|
||||
// 첫 번째 숫자-두 번째 숫자 패턴 (일반화)
|
||||
var match = Regex.Match(tagName, @"-(\d)(\d)\d{2}");
|
||||
if (match.Success) return $"{match.Groups[1]}-{match.Groups[2]}차";
|
||||
return "기타";
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 적산값 처리
|
||||
|
||||
**문제**: history_table의 periodic snapshot에서 차이를 계산하면 노이즈가 많음
|
||||
|
||||
**해결방안**: event_history_table에 적산 정보 기록
|
||||
|
||||
```csharp
|
||||
// DigitalEventDetectorService에 추가
|
||||
// TRIP 발생 시 현재 적산값 저장
|
||||
// RUN 발생 시 (TRIP 시점 적산값 - 현재 적산값) = 정지 시간 동안의 미투입량
|
||||
|
||||
// 또는 별도 테이블
|
||||
CREATE TABLE accumulated_events (
|
||||
id BIGSERIAL PRIMARY KEY,
|
||||
tagname TEXT NOT NULL,
|
||||
event_type TEXT NOT NULL, -- TRIP_START, RUN_START
|
||||
value_at_event DOUBLE,
|
||||
event_time TIMESTAMPTZ NOT NULL
|
||||
);
|
||||
```
|
||||
|
||||
### 5.5 보고서 쿼리 예시
|
||||
|
||||
```sql
|
||||
-- 6차 플랜트 6-1차 구간 이벤트 요약
|
||||
SELECT
|
||||
section,
|
||||
event_type,
|
||||
COUNT(*) as count,
|
||||
MIN(event_time) as first_occurrence,
|
||||
MAX(event_time) as last_occurrence
|
||||
FROM event_history_table
|
||||
WHERE area = 'P6'
|
||||
AND section = '6-1차'
|
||||
AND event_time BETWEEN '2026-05-09 00:00:00' AND '2026-05-10 00:00:00'
|
||||
GROUP BY section, event_type
|
||||
ORDER BY event_type;
|
||||
|
||||
-- Trip별 정지 시간 계산 (TRIP → RUN 쌍 찾기)
|
||||
WITH trip_events AS (
|
||||
SELECT
|
||||
tagname,
|
||||
event_time as trip_time,
|
||||
LEAD(event_time) OVER (PARTITION BY tagname ORDER BY event_time) as run_time,
|
||||
LEAD(event_type) OVER (PARTITION BY tagname ORDER BY event_time) as next_event_type
|
||||
FROM event_history_table
|
||||
WHERE event_type = 'TRIP' AND area = 'P6'
|
||||
)
|
||||
SELECT
|
||||
tagname,
|
||||
trip_time,
|
||||
run_time,
|
||||
EXTRACT(EPOCH FROM (run_time - trip_time)) / 60 as duration_minutes
|
||||
FROM trip_events
|
||||
WHERE next_event_type = 'RUN';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 구현 로드맵
|
||||
|
||||
| Phase | 작업 | 우선순위 | 예상 시간 |
|
||||
|-------|------|----------|-----------|
|
||||
| 1 | 디지털 태그 식별 로직 추가 | 높음 | 1일 |
|
||||
| 1 | SnapshotToHistoryAsync 수정 | 높음 | 0.5일 |
|
||||
| 2 | event_history_table 생성 | 높음 | 0.5일 |
|
||||
| 3 | DigitalEventDetectorService 구현 | 높음 | 2일 |
|
||||
| 3 | IExperionServices 확장 | 높음 | 1일 |
|
||||
| 4 | 보고서 쿼리 작성 | 중간 | 2일 |
|
||||
| 4 | API 엔드포인트 추가 | 중간 | 1일 |
|
||||
|
||||
---
|
||||
|
||||
## 7. 고려사항
|
||||
|
||||
### 7.1 중복 이벤트 방지
|
||||
- Debounce 로직 적용 (기본 5초)
|
||||
- 동일 상태로의 반복 발생 시 무시
|
||||
|
||||
### 7.2 마이그레이션
|
||||
- 기존 history_table의 디지털 데이터 보존 또는 별도 아카이브
|
||||
- 새로운 event_history_table로의 데이터 이전 (선택)
|
||||
|
||||
### 7.3 성능
|
||||
- 디지털 태그 수: ~500개
|
||||
- 감지 주기: 1초
|
||||
- 예상 INSERT: 초당 수십 건 (변경 시)
|
||||
|
||||
### 7.4 확장성
|
||||
- 알람 우선순위 정보 메타데이터에 추가
|
||||
- 인터록 체인 추적 (상위/interlock 원인 태그 기록)
|
||||
|
||||
---
|
||||
|
||||
## 8. 부록: 테스트 계획
|
||||
|
||||
### 8.1 단위 테스트
|
||||
- DetermineEventType 메서드 테스트
|
||||
- ExtractSection 메서드 테스트
|
||||
|
||||
### 8.2 통합 테스트
|
||||
- 실제 OPC UA 연결 없이 모의 데이터로 동작 확인
|
||||
- event_history_table에 올바른 기록 확인
|
||||
|
||||
### 8.3 성능 테스트
|
||||
- 500개 디지털 태그 처리 시 CPU/메모리 사용량
|
||||
- DB INSERT 성능
|
||||
|
||||
---
|
||||
|
||||
## 9. 참고 자료
|
||||
|
||||
- OPC UA LocalizedText (i=7594): 로컬라이즈된 텍스트 타입, `{locale | text | }` 형태
|
||||
- Experion 태그 명명 규칙: {type}-{unit}{number}.{attribute}
|
||||
- P6 플랜트 구조: 61xx = 6-1차, 62xx = 6-2차
|
||||
Reference in New Issue
Block a user