/** * 안전 관리: 교대 인수인계 · 정비 억제 · 위험성평가 · 설비 성능 추이. * * XSS-safe: 모든 동적 값은 textContent. 그래프는 인라인 SVG 를 DOM API 로 조립한다 * (문자열 innerHTML 금지 — 프로젝트 규약이자, 카메라 이름 같은 값이 마크업에 섞이는 것을 막는다). */ (function () { 'use strict'; var B = window.APP_BASE || ''; var root = document.querySelector('.compliance-page'); if (!root) return; var csrf = null; var TYPE_LABELS = { fall: '넘어짐', fall_from_height: '추락', no_motion: '넘어짐 후 미동 없음', immobility: '장시간 부동', ghost: '위험 상태 소실', zone_warning: '경고구역 진입', zone_restricted: '제한구역 침입', pinch: '협착구역 침입', monitoring_degraded: '감시 성능 저하', device_fault: '장치 이상', lone_worker: '위험구역 단독 작업', overcapacity: '정원 초과', overstay: '체류 상한 초과', near_fall: '넘어질 뻔함 (니어미스)', ergo_report: '작업자세 부담 리포트', camera_moved: '카메라 화각 변경', camera_obstructed: '카메라 가림', low_light: '조도 저하', unacked_escalation: '미확인 경보 에스컬레이션', multi_down: '동시 다발 쓰러짐', ppe_missing: '보호구 미착용', proximity: '중장비 근접', fire_smoke: '화재·연기' }; 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 pad2(n) { return n < 10 ? '0' + n : String(n); } function fmtDate(ts) { var d = new Date(Number(ts) * 1000); return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()); } function fmtStamp(ts) { var d = new Date(Number(ts) * 1000); return fmtDate(ts) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes()); } function fmtLeft(seconds) { if (seconds <= 0) return '만료됨'; if (seconds < 3600) return Math.ceil(seconds / 60) + '분 남음'; return Math.floor(seconds / 3600) + '시간 ' + Math.round((seconds % 3600) / 60) + '분 남음'; } function loadCsrf() { return fetch(B + '/api/csrf', { headers: { Accept: 'application/json' } }) .then(function (r) { return r.ok ? r.json() : null; }) .then(function (d) { if (d && d.token) csrf = d.token; }) .catch(function () {}); } function post(path, body) { return fetch(B + path, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Csrf-Token': csrf || '' }, body: JSON.stringify(body || {}) }).then(function (r) { if (r.status === 401) { window.location.href = B + '/login'; return null; } return r.json().then(function (d) { return { ok: r.ok, data: d }; }); }); } function getJson(path) { return fetch(B + path, { headers: { Accept: 'application/json' } }) .then(function (r) { if (r.status === 401) { window.location.href = B + '/login'; return null; } return r.ok ? r.json() : null; }); } var ERRORS = { reason_required: '사유를 입력하세요 — 사유 없는 억제는 나중에 아무도 해석할 수 없습니다.', invalid_window: '기간은 1분 이상 8시간(480분) 이하여야 합니다.', invalid_scope_id: '대상을 선택하세요.', unknown_scope_id: '등록되지 않은 대상입니다.', invalid_rating: '강도·빈도는 1~5 사이여야 합니다.', invalid_hazard: '위험요인을 입력하세요.', invalid_control: '현재 대책을 입력하세요.', forbidden: '권한이 없습니다.', csrf: '세션이 만료되었습니다. 새로고침 후 다시 시도하세요.' }; function errText(c) { return ERRORS[c] || ('처리에 실패했습니다 (' + String(c) + ')'); } // ============================================================ 교대 인수인계 var pendingBox = document.getElementById('handover-pending'); var handoverList = document.getElementById('handover-list'); function renderHandovers(d) { var p = d.pending || {}; pendingBox.textContent = ''; var head = el('div', 'handover-head'); head.appendChild(el('strong', null, '인수 대상 구간')); head.appendChild(el('span', 'handover-range', fmtStamp(p.period_start) + ' ~ ' + fmtStamp(p.period_end))); pendingBox.appendChild(head); var stats = el('div', 'handover-stats'); var a = el('div', 'handover-stat' + (p.unacked_count > 0 ? ' is-open' : '')); a.appendChild(el('strong', null, String(p.unacked_count || 0))); a.appendChild(el('span', null, '미확인')); stats.appendChild(a); var b = el('div', 'handover-stat' + (p.severe_count > 0 ? ' is-severe' : '')); b.appendChild(el('strong', null, String(p.severe_count || 0))); b.appendChild(el('span', null, '이 중 중대')); stats.appendChild(b); pendingBox.appendChild(stats); if (p.from_user) { pendingBox.appendChild(el('p', 'handover-from', '인계자: ' + p.from_user)); } handoverList.textContent = ''; var list = d.handovers || []; if (!list.length) { handoverList.appendChild(el('p', 'admin-empty', '기록된 인수인계가 없습니다.')); return; } list.forEach(function (h) { var row = el('div', 'handover-row'); row.appendChild(el('span', 'handover-when', fmtStamp(h.created_at))); row.appendChild(el('span', 'handover-who', (h.from_user ? h.from_user + ' → ' : '') + h.to_user)); row.appendChild(el('span', 'handover-count', '미확인 ' + h.unacked_count + ' (중대 ' + h.severe_count + ')')); if (h.note) row.appendChild(el('span', 'handover-note', h.note)); handoverList.appendChild(row); }); } function loadHandovers() { getJson('/api/handovers').then(function (d) { if (d) renderHandovers(d); }) .catch(function () { pendingBox.textContent = '인수인계 정보를 불러오지 못했습니다.'; }); } var handoverForm = document.getElementById('handover-form'); if (handoverForm) { handoverForm.addEventListener('submit', function (ev) { ev.preventDefault(); var note = document.getElementById('handover-note'); post('/api/handovers', { note: note.value.trim() }).then(function (r) { if (!r) return; if (r.ok) { note.value = ''; loadHandovers(); } }); }); } // ============================================================ 억제 var supList = document.getElementById('suppress-list'); var supStatus = document.getElementById('sup-status'); var supType = document.getElementById('sup-scope-type'); var supId = document.getElementById('sup-scope-id'); var deviceRows = []; var cameraRows = []; function fillScopeOptions() { var rows = supType.value === 'device' ? deviceRows : cameraRows; supId.textContent = ''; if (!rows.length) { supId.appendChild(new Option(supType.value === 'device' ? '등록된 장치가 없습니다' : '관측된 카메라가 없습니다', '')); return; } supId.appendChild(new Option('선택하세요', '')); rows.forEach(function (r) { supId.appendChild(new Option(r.label, r.id)); }); } function renderSuppressions(d) { var now = d.now || Math.floor(Date.now() / 1000); supList.textContent = ''; var list = d.suppressions || []; if (!list.length) { supList.appendChild(el('p', 'admin-empty', '현재 억제 중인 대상이 없습니다.')); return; } list.forEach(function (s) { var row = el('div', 'suppress-row'); var main = el('div', 'suppress-main'); main.appendChild(el('span', 'suppress-scope', (s.scope_type === 'device' ? '장치' : s.scope_type === 'camera' ? '카메라' : '구역') + ' ' + s.scope_id)); main.appendChild(el('span', 'suppress-reason', s.reason)); main.appendChild(el('span', 'suppress-meta', s.created_by + ' · ' + fmtStamp(s.starts_at) + ' 시작 · ' + fmtLeft(s.ends_at - now))); row.appendChild(main); var stop = el('button', null, '해제'); stop.type = 'button'; stop.addEventListener('click', function () { post('/api/suppressions/' + s.suppression_id + '/revoke').then(function (r) { if (r && r.ok) loadSuppressions(); }); }); row.appendChild(stop); supList.appendChild(row); }); } function loadSuppressions() { getJson('/api/suppressions').then(function (d) { if (d) renderSuppressions(d); }) .catch(function () { supList.textContent = '억제 목록을 불러오지 못했습니다.'; }); } var supForm = document.getElementById('suppress-form'); if (supForm) { supType.addEventListener('change', fillScopeOptions); supForm.addEventListener('submit', function (ev) { ev.preventDefault(); supStatus.textContent = ''; post('/api/suppressions', { scope_type: supType.value, scope_id: supId.value, minutes: Number(document.getElementById('sup-minutes').value) || 0, reason: document.getElementById('sup-reason').value.trim() }).then(function (r) { if (!r) return; if (!r.ok) { supStatus.textContent = errText(r.data && r.data.error); return; } supStatus.textContent = '억제를 시작했습니다. ' + fmtStamp(r.data.ends_at) + ' 에 자동 해제됩니다.'; document.getElementById('sup-reason').value = ''; loadSuppressions(); }); }); } // ============================================================ 위험성평가 var riskList = document.getElementById('risk-list'); var riskForm = document.getElementById('risk-form'); var riskStatus = document.getElementById('risk-status'); function riskBand(score) { if (score >= 15) return { cls: 'is-high', text: '높음' }; if (score >= 8) return { cls: 'is-mid', text: '보통' }; return { cls: 'is-low', text: '낮음' }; } function renderRisks(list) { riskList.textContent = ''; if (!list.length) { riskList.appendChild(el('p', 'admin-empty', '등록된 위험요인이 없습니다. 감지 유형별로 무엇을 통제하고 있는지 기록해 두면 사고조사 패키지에 함께 실립니다.')); return; } list.forEach(function (r) { var band = riskBand(r.risk_score); var row = el('div', 'risk-row'); var score = el('div', 'risk-score ' + band.cls); score.appendChild(el('strong', null, String(r.risk_score))); score.appendChild(el('span', null, band.text)); row.appendChild(score); var body = el('div', 'risk-body'); body.appendChild(el('span', 'risk-type', TYPE_LABELS[r.event_type] || r.event_type)); body.appendChild(el('span', 'risk-hazard', r.hazard)); body.appendChild(el('span', 'risk-control', '대책: ' + r.control)); var meta = '강도 ' + r.severity_rating + ' × 빈도 ' + r.likelihood_rating; if (r.reviewed_by) meta += ' · ' + r.reviewed_by + ' ' + fmtDate(r.reviewed_at); body.appendChild(el('span', 'risk-meta', meta)); row.appendChild(body); var edit = el('button', null, '수정'); edit.type = 'button'; edit.addEventListener('click', function () { openRisk(r); }); row.appendChild(edit); riskList.appendChild(row); }); } function openRisk(r) { riskForm.hidden = false; riskStatus.textContent = ''; var sel = document.getElementById('risk-type'); if (!sel.options.length) { Object.keys(TYPE_LABELS).forEach(function (k) { sel.appendChild(new Option(TYPE_LABELS[k], k)); }); } r = r || {}; sel.value = r.event_type || 'fall'; document.getElementById('risk-hazard').value = r.hazard || ''; document.getElementById('risk-control').value = r.control || ''; document.getElementById('risk-severity').value = r.severity_rating || 3; document.getElementById('risk-likelihood').value = r.likelihood_rating || 3; document.getElementById('risk-hazard').focus(); } if (riskForm) { document.getElementById('risk-new').addEventListener('click', function () { openRisk(null); }); document.getElementById('risk-cancel').addEventListener('click', function () { riskForm.hidden = true; }); riskForm.addEventListener('submit', function (ev) { ev.preventDefault(); post('/api/risks', { event_type: document.getElementById('risk-type').value, hazard: document.getElementById('risk-hazard').value.trim(), control: document.getElementById('risk-control').value.trim(), severity_rating: Number(document.getElementById('risk-severity').value), likelihood_rating: Number(document.getElementById('risk-likelihood').value) }).then(function (r) { if (!r) return; if (!r.ok) { riskStatus.textContent = errText(r.data && r.data.error); return; } riskStatus.textContent = '저장되었습니다.'; riskForm.hidden = true; loadRisks(); }); }); } function loadRisks() { getJson('/api/risks').then(function (d) { if (d) renderRisks(d.controls || []); }) .catch(function () { riskList.textContent = '위험성평가를 불러오지 못했습니다.'; }); } // ============================================================ 성능 추이 var metricDevice = document.getElementById('metric-device'); var metricChart = document.getElementById('metric-chart'); var SVG_NS = 'http://www.w3.org/2000/svg'; function svg(tag, attrs) { var n = document.createElementNS(SVG_NS, tag); Object.keys(attrs || {}).forEach(function (k) { n.setAttribute(k, String(attrs[k])); }); return n; } /** 값이 없는 구간은 선을 잇지 않는다 — 없는 데이터를 직선으로 메우면 그래프가 거짓말을 한다. */ function polylines(points, key, x, y) { var segs = [], cur = []; points.forEach(function (p, i) { var v = p[key]; if (v === null || v === undefined) { if (cur.length > 1) segs.push(cur); cur = []; return; } cur.push(x(i) + ',' + y(v)); }); if (cur.length > 1) segs.push(cur); return segs; } function renderMetrics(d) { metricChart.textContent = ''; var pts = d.points || []; if (pts.length < 2) { metricChart.appendChild(el('p', 'admin-empty', '이 장치의 성능 기록이 아직 충분하지 않습니다. 하트비트가 쌓이면 추이가 그려집니다.')); return; } var W = 720, H = 160, PAD = 28; var fpsVals = pts.map(function (p) { return p.fps; }).filter(function (v) { return v !== null; }); var maxFps = Math.max(30, Math.ceil(Math.max.apply(null, fpsVals.length ? fpsVals : [30]))); var x = function (i) { return PAD + (i / (pts.length - 1)) * (W - PAD * 2); }; var yFps = function (v) { return H - PAD - (v / maxFps) * (H - PAD * 2); }; var chart = svg('svg', { viewBox: '0 0 ' + W + ' ' + H, class: 'metric-svg', role: 'img', 'aria-label': '프레임률 추이' }); chart.appendChild(svg('line', { x1: PAD, y1: H - PAD, x2: W - PAD, y2: H - PAD, class: 'axis' })); chart.appendChild(svg('line', { x1: PAD, y1: PAD, x2: PAD, y2: H - PAD, class: 'axis' })); polylines(pts, 'fps', x, yFps).forEach(function (seg) { chart.appendChild(svg('polyline', { points: seg.join(' '), class: 'series-fps' })); }); // 스로틀 구간은 배경 띠로 — 프레임률 하락의 원인을 같은 그림에서 읽을 수 있어야 한다. pts.forEach(function (p, i) { if (!p.throttle) return; chart.appendChild(svg('rect', { x: x(i) - 1, y: PAD, width: 3, height: H - PAD * 2, class: 'series-throttle' })); }); metricChart.appendChild(chart); var legend = el('div', 'metric-legend'); legend.appendChild(el('span', 'legend-fps', '프레임률 (최대 ' + maxFps + ')')); legend.appendChild(el('span', 'legend-throttle', '과열 스로틀 구간')); legend.appendChild(el('span', 'legend-range', fmtStamp(pts[0].ts) + ' ~ ' + fmtStamp(pts[pts.length - 1].ts) + ' · ' + pts.length + '점')); metricChart.appendChild(legend); var last = pts[pts.length - 1]; var summary = el('p', 'metric-summary'); var bits = []; if (last.fps !== null) bits.push('현재 ' + last.fps.toFixed(1) + ' fps'); if (last.temp !== null) bits.push(last.temp.toFixed(1) + '°C'); if (last.queue_pending !== null) bits.push('전송 대기 ' + last.queue_pending + '건'); if (last.cameras_erroring) bits.push('오류 카메라 ' + last.cameras_erroring + '대'); summary.textContent = bits.join(' · '); metricChart.appendChild(summary); } function loadMetrics() { var dev = metricDevice.value; if (!dev) { metricChart.textContent = '장치를 선택하세요.'; return; } metricChart.textContent = '불러오는 중…'; getJson('/api/devices/' + encodeURIComponent(dev) + '/metrics?hours=24') .then(function (d) { if (d) renderMetrics(d); }) .catch(function () { metricChart.textContent = '성능 기록을 불러오지 못했습니다.'; }); } if (metricDevice) metricDevice.addEventListener('change', loadMetrics); // ---------------------------------------------------------------- 공통 목록 function loadTargets() { return Promise.all([getJson('/api/devices'), getJson('/api/events?limit=200')]) .then(function (res) { var devs = (res[0] && res[0].devices) || []; deviceRows = devs.map(function (d) { return { id: d.device_id, label: (d.name || d.device_id) + ' · ' + d.device_id }; }); var seen = {}; cameraRows = []; ((res[1] && res[1].events) || []).forEach(function (e) { if (!e.camera_id || DeviceScope.is(e.camera_id) || seen[e.camera_id]) return; seen[e.camera_id] = true; cameraRows.push({ id: e.camera_id, label: e.camera_id }); }); cameraRows.sort(function (a, b) { return a.id < b.id ? -1 : 1; }); fillScopeOptions(); metricDevice.textContent = ''; metricDevice.appendChild(new Option(devs.length ? '장치를 선택하세요' : '등록된 장치가 없습니다', '')); deviceRows.forEach(function (d) { metricDevice.appendChild(new Option(d.label, d.id)); }); }) .catch(function () {}); } loadCsrf().then(function () { loadTargets(); loadHandovers(); loadSuppressions(); loadRisks(); }); })();