f063060e2d
단일 1594줄 스크롤 페이지를 상시 영역 + 4탭 서버렌더(?tab=) 구조로 재개편한다. 5인 리뷰 패널(정보구조·관제도메인·UX·구현·접근성) 종합 스펙 기반. 상시 영역(전 탭 공통): - 시스템 상태 히어로 — 누수(is_leak)·미복구 사고를 FORECAST_ENABLED 와 무관하게 반영(기존: 누수 중에도 '정상 감시 중' 표시 가능한 결함). 경보 시 센서명·위치· 현재값·경보 시작 시각·SMS 발송 결과를 한 줄로 명시. - 알림 스트립(SMS 실패/미복구 누수/수집 거부 1줄 요약 + 탭 딥링크) - 대응 필요 패널(플레이북·담당자) — 안전 알림은 탭과 무관하게 상시 노출 - 통합 KPI 스트립 6타일 — 모바일 퀵타일·듀얼 KPI·게이지 배지를 하나로 통합 - 탭바(nav+aria-current, 경보 배지) 탭: - 실시간 현황: 온습도/누수 카드(예보 여유 상시 표시), 미복구 사고, SMS 채널·오늘 요약 - 추이·통계: 온습도 추이 차트, 7일 경보 추이, 경보 종류 도넛(단위 명기), 가동률, 리더보드 - 이력 조회: 누수 사고·측정·이벤트·SMS 이력, 30일 센서별 평균 온습도, SMS 발송 통계 - 시스템 점검: 자가진단, 수집 거부 관측성, SMS 채널 점검, 플레이북 사본, 임계 설정 요약 - ?tab=all: 인쇄용 전체 렌더(details 강제 펼침, 자동 새로고침 없음) 구현: - 데이터 계층 분리(dashboard_data.php): 전역 vs 탭 전용 쿼리 — 로드당 쿼리 ~50→전역 14+탭 5~8개(약 60% 절감). ops_checks 파일 캐시(TTL 120초, 시스템 탭은 우회). - 탭 partial(tabs/*.php)은 dash_render_tab() 함수 스코프 격리(EXTR_SKIP)로 렌더. - 30초 자동 새로고침은 URL 쿼리 보존으로 탭·기간 유지. 스크롤/details 복원은 탭별 키. - 폐쇄망 유지: 외부 CDN/JS 없음(인라인 SVG). app.css 는 기존 규칙 불변, 추가만. - 보안: dashboard_data·forecast·tabs 를 .htaccess FilesMatch + tabs/.htaccess + PHP 직접접근 가드로 삼중 차단. security_hardening_test: 대시보드 표면을 분리 구조(셸+데이터+탭)에 맞춰 검사하도록 보정.
234 lines
11 KiB
PHP
234 lines
11 KiB
PHP
<?php
|
|
// tabs/history.php — [이력 조회] 탭. dashboard.php 셸에서 include 된다.
|
|
// 장애 원인 추적용: 누수 사고·측정·이벤트·SMS 이력을 한 탭에서 대조한다.
|
|
// 사용 변수: load_tab_history() 결과(extract) — $leak_incidents, $leak_photos_by_log,
|
|
// $recent_metrics, $logs, $sms_logs, $sms_stats.
|
|
if (!defined('APP_VERSION')) { exit; } // 직접 접근 차단
|
|
?>
|
|
<div class="zone" id="tab-history">
|
|
<div class="zone-label"><b>운영 이력</b> <span class="en">History</span></div>
|
|
|
|
<!-- 누수 사고 이력 + 사진 -->
|
|
<h2>누수 사고 이력 (최근 20건)</h2>
|
|
<details class="mobile-detail" id="d-incidents" data-mobile-collapsed open>
|
|
<summary>누수 사고 이력 <span>최근 20건</span></summary>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="col-hide-xs">#</th><th>센서</th><th class="col-hide-xs">위치</th>
|
|
<th>감지 시각</th><th>복구 시각</th><th>사진</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($leak_incidents as $inc):
|
|
$is_open = ($inc['recovered_at'] === null);
|
|
$lid = $inc['log_id_alert'] !== null ? (int)$inc['log_id_alert'] : 0;
|
|
$photos = $leak_photos_by_log[$lid] ?? [];
|
|
?>
|
|
<tr class="<?= $is_open ? 'alert-row' : '' ?>">
|
|
<td class="col-hide-xs"><?= (int)$inc['id'] ?></td>
|
|
<td><?= htmlspecialchars($inc['sensor_name']) ?></td>
|
|
<td class="col-hide-xs"><?= htmlspecialchars($inc['device_location']) ?></td>
|
|
<td><?= htmlspecialchars($inc['started_at']) ?></td>
|
|
<td>
|
|
<?php if ($is_open): ?>
|
|
<span class="pill leak">미복구</span>
|
|
<?php else: ?>
|
|
<?= htmlspecialchars($inc['recovered_at']) ?>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<?php if (!empty($photos)): ?>
|
|
<div class="leak-thumbs">
|
|
<?php foreach ($photos as $ph): ?>
|
|
<a href="photo.php?id=<?= (int)$ph['id'] ?>" target="_blank" rel="noopener">
|
|
<img src="photo.php?id=<?= (int)$ph['id'] ?>"
|
|
alt="누수 사진 <?= htmlspecialchars($ph['captured_at']) ?>"
|
|
loading="lazy">
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php else: ?>
|
|
<span class="caption">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($leak_incidents)): ?>
|
|
<tr><td colspan="6" class="empty-cell">아직 누수 사고 이력이 없습니다.</td></tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- 최근 온습도 측정 이력 -->
|
|
<h2 id="metrics-section">최근 온습도 측정 (30건)</h2>
|
|
<details class="mobile-detail" id="d-metrics" data-mobile-collapsed open>
|
|
<summary>최근 온습도 측정 <span>30건 기준</span></summary>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>측정시각</th><th>센서</th><th class="col-hide-xs">위치</th>
|
|
<th>온도</th><th>습도</th><th>상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($recent_metrics as $row):
|
|
$status_code = $row['metric_status'] ?? 'normal';
|
|
$is_alert = $status_code !== 'normal';
|
|
?>
|
|
<tr class="<?= $is_alert ? 'alert-row' : '' ?>">
|
|
<td><?= htmlspecialchars($row['measured_at']) ?></td>
|
|
<td><?= htmlspecialchars($row['sensor_name']) ?></td>
|
|
<td class="col-hide-xs"><?= htmlspecialchars($row['device_location']) ?></td>
|
|
<td><?= htmlspecialchars(metric_display($row['temperature_c'], '°C')) ?></td>
|
|
<td><?= htmlspecialchars(metric_display($row['humidity_percent'], '%')) ?></td>
|
|
<td><span class="pill <?= htmlspecialchars($status_code) ?>"><?= htmlspecialchars(metric_status_label($status_code)) ?></span></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($recent_metrics)): ?>
|
|
<tr><td colspan="6" class="empty-cell">아직 온습도 측정 데이터가 없습니다.</td></tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- 센서 이벤트 로그 (startup/periodic/leak_alert/leak_recovery) -->
|
|
<h2 id="logs-section">센서 이벤트 로그 (30건)</h2>
|
|
<details class="mobile-detail" id="d-logs" data-mobile-collapsed open>
|
|
<summary>센서 이벤트 로그 <span>30건 기준</span></summary>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="col-hide-xs">#</th><th>시각</th><th>센서</th>
|
|
<th class="col-hide-xs">위치</th><th>이벤트</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($logs as $row):
|
|
$event_labels = [
|
|
'startup' => '장비시작',
|
|
'periodic' => '정기보고',
|
|
'leak_alert' => '누수감지',
|
|
'leak_recovery' => '누수복구',
|
|
];
|
|
$evt = $row['event_type'];
|
|
?>
|
|
<tr class="<?= $evt === 'leak_alert' ? 'alert-row' : '' ?>">
|
|
<td class="col-hide-xs"><?= (int)$row['id'] ?></td>
|
|
<td><?= htmlspecialchars($row['sensor_time']) ?></td>
|
|
<td><?= htmlspecialchars($row['sensor_name']) ?></td>
|
|
<td class="col-hide-xs"><?= htmlspecialchars($row['device_location']) ?></td>
|
|
<td>
|
|
<?php if ($evt === 'leak_alert' || $evt === 'leak_recovery'): ?>
|
|
<span class="pill <?= htmlspecialchars($evt) ?>"><?= htmlspecialchars($event_labels[$evt]) ?></span>
|
|
<?php else: ?>
|
|
<?= htmlspecialchars($event_labels[$evt] ?? $evt) ?>
|
|
<?php endif; ?>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($logs)): ?>
|
|
<tr><td colspan="5" class="empty-cell">아직 센서 이벤트가 없습니다.</td></tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- SMS 발송 로그 -->
|
|
<h2 id="sms-section">SMS 발송 이력 (최근 20건)</h2>
|
|
<details class="mobile-detail" id="d-sms" data-mobile-collapsed open>
|
|
<summary>SMS 발송 이력 <span>최근 20건</span></summary>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr><th class="col-hide-xs">#</th><th>발송시각</th><th>센서</th><th>수신자</th><th>상태</th><th class="col-hide-xs">결과</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($sms_logs as $row): ?>
|
|
<tr>
|
|
<td class="col-hide-xs"><?= (int)$row['id'] ?></td>
|
|
<td><?= htmlspecialchars($row['sent_at']) ?></td>
|
|
<td><?= htmlspecialchars($row['sensor_name']) ?></td>
|
|
<td><?= htmlspecialchars(mask_phone($row['receivers'] ?? '')) ?></td>
|
|
<td>
|
|
<?php if ($row['status'] === 'success'): ?>
|
|
<span class="ok-color">성공</span>
|
|
<?php else: ?>
|
|
<span class="err-color">실패</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="col-hide-xs caption"><?= htmlspecialchars($row['result_message']) ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php if (empty($sms_logs)): ?>
|
|
<tr><td colspan="6" class="empty-cell">아직 SMS 발송 이력이 없습니다.</td></tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- 30일 평균 온습도 (센서별 — 전 센서 혼합 평균은 위치별 환경 차이를 뭉개므로 분리) -->
|
|
<?php if (!empty($metric_avgs)): ?>
|
|
<section class="panel">
|
|
<h2>30일 평균 온습도 <span class="h2-sub">· 센서별</span></h2>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr><th>센서</th><th class="col-hide-xs">위치</th><th>평균 온도</th><th>평균 습도</th><th class="col-hide-xs">측정 수</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($metric_avgs as $ma): ?>
|
|
<tr>
|
|
<td><?= htmlspecialchars($ma['name']) ?></td>
|
|
<td class="col-hide-xs"><?= htmlspecialchars($ma['location']) ?></td>
|
|
<td><?= $ma['avg_temp'] !== null ? htmlspecialchars(number_format((float)$ma['avg_temp'], 1)) . '°C' : '-' ?></td>
|
|
<td><?= $ma['avg_hum'] !== null ? htmlspecialchars(number_format((float)$ma['avg_hum'], 1)) . '%' : '-' ?></td>
|
|
<td class="col-hide-xs"><?= (int)$ma['n'] ?>건</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- 30일 SMS 발송 통계 (발송 건수 기준 — 측정 기준 경보 통계는 추이·통계 탭) -->
|
|
<section class="panel" id="summary-section">
|
|
<h2>30일 SMS 발송 통계</h2>
|
|
<div class="report-grid">
|
|
<div class="report-stat">
|
|
<span>총 발송</span>
|
|
<strong><?= (int)$sms_stats['total'] ?>건</strong>
|
|
</div>
|
|
<div class="report-stat">
|
|
<span>온습도 경보 SMS</span>
|
|
<strong class="<?= $sms_stats['alert_total'] > 0 ? 'warn-color' : '' ?>"><?= (int)$sms_stats['alert_total'] ?>건</strong>
|
|
</div>
|
|
<div class="report-stat">
|
|
<span>누수감지 SMS</span>
|
|
<strong class="<?= $sms_stats['leak_alert'] > 0 ? 'err-color' : '' ?>"><?= (int)$sms_stats['leak_alert'] ?>건</strong>
|
|
</div>
|
|
<div class="report-stat">
|
|
<span>복구 SMS</span>
|
|
<strong><?= (int)$sms_stats['recovery'] ?>건</strong>
|
|
</div>
|
|
<div class="report-stat">
|
|
<span>오프라인 SMS</span>
|
|
<strong><?= (int)$sms_stats['offline'] ?>건</strong>
|
|
</div>
|
|
<div class="report-stat">
|
|
<span>발송 실패</span>
|
|
<strong class="<?= $sms_stats['fail'] > 0 ? 'err-color' : '' ?>"><?= (int)$sms_stats['fail'] ?>건</strong>
|
|
</div>
|
|
</div>
|
|
<p class="panel-note">종류별 상세 집계와 월별 분석은 <a href="monthly_report.php">월간 보고</a>에서 확인하세요. 측정 기준 경보 통계(도넛·추이)는 <a href="<?= htmlspecialchars(dash_url(['tab' => 'trend'])) ?>">추이·통계 탭</a>에 있습니다.</p>
|
|
</section>
|
|
</div>
|