move_detect/server/public/assets/report.js
유창욱 d8cef54fe4 feat(report): safety operations report page + event-type filter
The benefit made visible: /report folds everything the system collects into
the one printable page a 안전관리자 takes into the weekly safety meeting.

- GET /api/report?days=N (7/30/90): severity totals, per-type counts,
  worst-camera ranking, response time (TTA - acknowledged critical/high only,
  FP-tagged rows excluded: dismissing a false alarm is not an emergency
  response; clock-skew guarded), the near-miss pyramid (near_fall vs
  fall/no_motion - the Heinrich argument in one ratio), FP rate, summed
  posture-load exposure, occupancy-rule violation counts. ergo_report rows
  feed the sums but are excluded from "감지 N건" (bookkeeping, not detection).
  Fail-closed site scoping throughout.
- /report view: KPI band (중대 이벤트 / 평균 대응 / 니어미스:사고 / 오탐율,
  each with its one-line reading), bar lists for types and cameras (critical
  presence highlighted), ergo bands as share-of-observed-time, rule tiles.
  Print CSS strips the app chrome - the 인쇄 button produces the meeting
  handout. New 리포트 nav tab.
- Events console: event-type filter beside severity - the INFO-volume types
  (near_fall, ergo_report) can now be folded out of the live stream, or a
  single type isolated for investigation.

Verified: PHPUnit 138 pass (3 new: aggregation math incl. TTA/FP-exclusion/
ergo sums, site scope, auth) + Chrome real-render of the full report (KPIs,
bar lists, rule tiles, footer) and the type filter isolating one type.
2026-08-07 07:17:48 +09:00

166 lines
7.5 KiB
JavaScript

/**
* Safety operations report: fetches GET /api/report?days=N and renders the management
* indicators a 안전관리자 takes into the weekly safety meeting. Read-only; the 인쇄 button
* prints the page (print CSS strips the app chrome).
*
* XSS-safe: every dynamic value goes through textContent; the only inline style is a
* numeric bar width.
*/
(function () {
'use strict';
var B = window.APP_BASE || '';
var TYPE_LABELS = {
fall: '넘어짐', no_motion: '넘어짐 후 미동 없음', immobility: '장시간 부동',
ghost: '위험 상태 소실', zone_warning: '경고구역 진입', zone_restricted: '제한구역 침입',
pinch: '협착구역 침입', monitoring_degraded: '감시 성능 저하', device_fault: '장치 이상',
lone_worker: '위험구역 단독 작업', overcapacity: '정원 초과', overstay: '체류 상한 초과',
near_fall: '넘어질 뻔함 (니어미스)', ergo_report: '작업자세 부담 리포트'
};
var root = document.getElementById('report-kpis');
if (!root) return;
var daysSel = document.getElementById('report-days');
var printBtn = document.getElementById('report-print');
var rangeEl = document.getElementById('report-range');
var typesEl = document.getElementById('report-types');
var camerasEl = document.getElementById('report-cameras');
var ergoEl = document.getElementById('report-ergo');
var rulesEl = document.getElementById('report-rules');
var footEl = document.getElementById('report-foot');
function el(tag, cls, text) {
var n = document.createElement(tag);
if (cls) n.className = cls;
if (text !== undefined && text !== null) n.textContent = text;
return n;
}
function fmtDuration(s) {
if (s === null || s === undefined) return '—';
if (s < 60) return Math.round(s) + '초';
if (s < 3600) return Math.floor(s / 60) + '분 ' + Math.round(s % 60) + '초';
return Math.floor(s / 3600) + '시간 ' + Math.floor((s % 3600) / 60) + '분';
}
function fmtHours(s) {
if (!s) return '0분';
if (s < 3600) return Math.round(s / 60) + '분';
return (s / 3600).toFixed(1) + '시간';
}
// KPI tile: the headline number plus the one-line reading of what it means.
function kpi(label, value, note, cls) {
var t = el('div', 'kpi' + (cls ? ' ' + cls : ''));
t.appendChild(el('span', 'kpi-label', label));
t.appendChild(el('strong', 'kpi-value', value));
if (note) t.appendChild(el('span', 'kpi-note', note));
return t;
}
function barRow(label, value, max, text, hot) {
var row = el('div', 'bar-row');
var head = el('div', 'bar-head');
head.appendChild(el('span', 'bar-label', label));
head.appendChild(el('span', 'bar-value' + (hot ? ' is-hot' : ''), text));
row.appendChild(head);
var track = el('div', 'bar-track');
var fill = el('div', 'bar-fill' + (hot ? ' is-hot' : ''));
fill.style.width = (max > 0 ? Math.max(2, Math.round(value / max * 100)) : 0) + '%';
track.appendChild(fill);
row.appendChild(track);
return row;
}
function render(r) {
var t = r.totals;
var severe = t.critical + t.high;
rangeEl.textContent = '최근 ' + r.days + '일 · '
+ new Date((r.generated_at - r.days * 86400) * 1000).toLocaleDateString('ko-KR')
+ ' ~ ' + new Date(r.generated_at * 1000).toLocaleDateString('ko-KR');
root.textContent = '';
root.appendChild(kpi('중대 이벤트', String(severe),
'위급 ' + t.critical + ' · 높음 ' + t.high, severe > 0 ? 'is-severe' : ''));
root.appendChild(kpi('평균 대응 시간', fmtDuration(r.tta.avg_s),
r.tta.acked > 0 ? '중대 ' + r.tta.acked + '건 확인 · 최장 ' + fmtDuration(r.tta.max_s) : '확인된 중대 이벤트 없음'));
// 하인리히 지표: 니어미스가 사고보다 얼마나 앞서 잡히고 있나 — 예방이 작동한다는 증거.
var nm = r.near_miss;
root.appendChild(kpi('니어미스 : 사고', nm.near_fall + ' : ' + nm.incidents,
nm.near_fall > 0 ? '사고 전 신호가 먼저 잡히고 있습니다' : '기록된 니어미스 없음'));
var fpPct = r.fp.total > 0 ? Math.round(r.fp.tagged / r.fp.total * 100) : 0;
root.appendChild(kpi('오탐율', fpPct + '%',
'전체 ' + r.fp.total + '건 중 오탐 태그 ' + r.fp.tagged + '건', fpPct >= 30 ? 'is-warn' : ''));
typesEl.textContent = '';
var typeKeys = Object.keys(r.by_type);
if (typeKeys.length === 0) typesEl.appendChild(el('p', 'report-empty', '기간 내 감지가 없습니다.'));
var maxType = typeKeys.reduce(function (m, k) { return Math.max(m, r.by_type[k]); }, 0);
typeKeys.forEach(function (k) {
typesEl.appendChild(barRow(TYPE_LABELS[k] || k, r.by_type[k], maxType, r.by_type[k] + '건'));
});
camerasEl.textContent = '';
if (r.by_camera.length === 0) camerasEl.appendChild(el('p', 'report-empty', '기간 내 감지가 없습니다.'));
var maxCam = r.by_camera.reduce(function (m, c) { return Math.max(m, c.count); }, 0);
r.by_camera.forEach(function (c) {
camerasEl.appendChild(barRow(c.camera_id, c.count, maxCam,
c.count + '건 · 중대 ' + c.critical_high, c.critical_high > 0));
});
// 인체공학: 관측 시간 대비 각 밴드 노출 — 절대시간과 비율을 함께.
ergoEl.textContent = '';
var eg = r.ergo;
if (!eg.observed_s) {
ergoEl.appendChild(el('p', 'report-empty', '기간 내 자세 관측 데이터가 없습니다.'));
} else {
[['trunk_high_s', '허리 고위험 (60°+)', true],
['trunk_mod_s', '허리 중위험 (20~60°)', false],
['arm_high_s', '팔 거상 (90°+)', false],
['squat_s', '깊은 웅크림', false]].forEach(function (row) {
var v = eg[row[0]] || 0;
var pct = Math.round(v / eg.observed_s * 100);
ergoEl.appendChild(barRow(row[1], v, eg.observed_s,
fmtHours(v) + ' (' + pct + '%)', row[2] && pct >= 20));
});
ergoEl.appendChild(el('p', 'report-empty', '총 관측 ' + fmtHours(eg.observed_s)
+ ' — 비율은 관측 시간 대비입니다.'));
}
rulesEl.textContent = '';
var oc = r.occupancy;
var rules = el('div', 'rule-stats');
[['단독 작업', oc.lone_worker], ['정원 초과', oc.overcapacity], ['체류 상한 초과', oc.overstay],
['미확인 잔여', t.unacked]].forEach(function (pair) {
var box = el('div', 'rule-stat' + (pair[1] > 0 ? ' is-nonzero' : ''));
box.appendChild(el('strong', null, String(pair[1])));
box.appendChild(el('span', null, pair[0]));
rules.appendChild(box);
});
rulesEl.appendChild(rules);
footEl.textContent = '생성 ' + new Date(r.generated_at * 1000).toLocaleString('ko-KR')
+ ' · 본 리포트는 AI 감지 기반 보조 지표이며 공식 재해 통계를 대체하지 않습니다.';
}
function load() {
var days = daysSel ? daysSel.value : '7';
fetch(B + '/api/report?days=' + encodeURIComponent(days), { headers: { Accept: 'application/json' } })
.then(function (res) {
if (res.status === 401) { window.location.href = B + '/login'; return null; }
if (!res.ok) throw new Error('report_failed:' + res.status);
return res.json();
})
.then(function (data) { if (data) render(data); })
.catch(function () {
rangeEl.textContent = '리포트를 불러오지 못했습니다. 새로고침해 주세요.';
});
}
if (daysSel) daysSel.addEventListener('change', load);
if (printBtn) printBtn.addEventListener('click', function () { window.print(); });
load();
})();