738 lines
46 KiB
HTML
738 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flask App</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<h1>위성,드론 활용 농업재해 모니터링 시스템</h1>
|
|
</header>
|
|
|
|
<main class="main-container">
|
|
<aside class="sidebar">
|
|
<nav class="sidebar-nav">
|
|
<ul class="menu-list">
|
|
<li><a href="#" class="menu-item active" data-page="intro">Intro</a></li>
|
|
<li><a href="#" class="menu-item" data-page="waterbody">Water Body 추출</a></li>
|
|
<li class="has-submenu">
|
|
<a href="#" class="menu-item" data-page="flood-monitoring">침수</a>
|
|
<ul class="submenu">
|
|
<li><a href="#" class="submenu-item" data-page="flood-monitoring">침수 모니터링</a></li>
|
|
<li><a href="#" class="submenu-item" data-page="flood-simulation">3D 시뮬레이션</a></li>
|
|
<li><a href="#" class="submenu-item" data-page="flood-waterlevel">수위 곡선</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="has-submenu">
|
|
<a href="#" class="menu-item" data-page="drought-monitoring">가뭄</a>
|
|
<ul class="submenu">
|
|
<li><a href="#" class="submenu-item" data-page="drought-monitoring">가뭄 모니터링</a></li>
|
|
<li><a href="#" class="submenu-item" data-page="drought-simulation">3D 시뮬레이션</a></li>
|
|
<li><a href="#" class="submenu-item" data-page="drought-waterlevel">시계열 변화 그래프</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#" class="menu-item" data-page="kma-test">고흥 단기예보</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
<section class="content">
|
|
<!-- Intro -->
|
|
<div class="page-content active" id="intro">
|
|
<div class="intro-dashboard">
|
|
<!-- 상단: 지도 + 현재 상태 -->
|
|
<div class="intro-top">
|
|
<!-- 왼쪽: 지도 -->
|
|
<div class="intro-map-section">
|
|
<div class="intro-map-header">
|
|
<h3>고흥군 모니터링</h3>
|
|
<span class="live-badge">LIVE</span>
|
|
</div>
|
|
<div id="map-intro" class="intro-map"></div>
|
|
</div>
|
|
<!-- 오른쪽: 현재 상태 요약 -->
|
|
<div class="intro-status-section">
|
|
<div class="current-status-card">
|
|
<div class="status-header">
|
|
<span class="status-location">고흥군</span>
|
|
<span class="status-date" id="current-datetime">2026.01.28 (화)</span>
|
|
</div>
|
|
<div class="status-main">
|
|
<div class="status-icon safe">
|
|
<span class="icon-circle"></span>
|
|
</div>
|
|
<div class="status-text">
|
|
<span class="status-label">현재 상태</span>
|
|
<span class="status-value">정상</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-details">
|
|
<div class="detail-item">
|
|
<span class="detail-label">저수율</span>
|
|
<span class="detail-value">67%</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">토양수분</span>
|
|
<span class="detail-value">45%</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">누적강수</span>
|
|
<span class="detail-value">12.5mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 날짜 선택 -->
|
|
<div class="date-selector">
|
|
<select class="date-select" id="select-year">
|
|
<option value="2026">2026년</option>
|
|
<option value="2025">2025년</option>
|
|
<option value="2024">2024년</option>
|
|
</select>
|
|
<select class="date-select" id="select-month">
|
|
<option value="1">1월</option>
|
|
<option value="2">2월</option>
|
|
<option value="3">3월</option>
|
|
<option value="4">4월</option>
|
|
<option value="5">5월</option>
|
|
<option value="6">6월</option>
|
|
<option value="7">7월</option>
|
|
<option value="8">8월</option>
|
|
<option value="9">9월</option>
|
|
<option value="10">10월</option>
|
|
<option value="11">11월</option>
|
|
<option value="12">12월</option>
|
|
</select>
|
|
<select class="date-select" id="select-day">
|
|
<option value="1">1일</option>
|
|
</select>
|
|
<button class="btn-search" id="btn-date-search">조회</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 하단: 예측 모니터링 카드 -->
|
|
<div class="intro-monitoring">
|
|
<!-- 침수 예측 카드 -->
|
|
<div class="monitoring-card flood">
|
|
<div class="card-header">
|
|
<div class="card-icon flood-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z"/></svg>
|
|
</div>
|
|
<h4>침수 예측</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="probability-display">
|
|
<span class="prob-value" id="flood-prob">23</span>
|
|
<span class="prob-unit">%</span>
|
|
</div>
|
|
<div class="prob-bar">
|
|
<div class="prob-fill flood-fill" style="width: 23%"></div>
|
|
</div>
|
|
<span class="prob-status safe">낮음</span>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="forecast-mini">
|
|
<div class="forecast-item">
|
|
<span class="fc-day">내일</span>
|
|
<span class="fc-value">25%</span>
|
|
</div>
|
|
<div class="forecast-item">
|
|
<span class="fc-day">모레</span>
|
|
<span class="fc-value">30%</span>
|
|
</div>
|
|
<div class="forecast-item">
|
|
<span class="fc-day">3일후</span>
|
|
<span class="fc-value">28%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 가뭄 예측 카드 -->
|
|
<div class="monitoring-card drought">
|
|
<div class="card-header">
|
|
<div class="card-icon drought-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z"/></svg>
|
|
</div>
|
|
<h4>가뭄 예측</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="probability-display">
|
|
<span class="prob-value" id="drought-prob">58</span>
|
|
<span class="prob-unit">%</span>
|
|
</div>
|
|
<div class="prob-bar">
|
|
<div class="prob-fill drought-fill" style="width: 58%"></div>
|
|
</div>
|
|
<span class="prob-status warning">주의</span>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="forecast-mini">
|
|
<div class="forecast-item">
|
|
<span class="fc-day">내일</span>
|
|
<span class="fc-value">60%</span>
|
|
</div>
|
|
<div class="forecast-item">
|
|
<span class="fc-day">모레</span>
|
|
<span class="fc-value">65%</span>
|
|
</div>
|
|
<div class="forecast-item">
|
|
<span class="fc-day">3일후</span>
|
|
<span class="fc-value">62%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 종합 위험도 카드 -->
|
|
<div class="monitoring-card overall">
|
|
<div class="card-header">
|
|
<div class="card-icon overall-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"/></svg>
|
|
</div>
|
|
<h4>종합 위험도</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="risk-gauge">
|
|
<div class="gauge-circle">
|
|
<svg viewBox="0 0 36 36" class="gauge-svg">
|
|
<path class="gauge-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
|
|
<path class="gauge-fill warning" stroke-dasharray="45, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
|
|
</svg>
|
|
<div class="gauge-text">
|
|
<span class="gauge-value">45</span>
|
|
<span class="gauge-label">보통</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="risk-legend">
|
|
<span class="legend-dot safe"></span> 안전
|
|
<span class="legend-dot warning"></span> 주의
|
|
<span class="legend-dot danger"></span> 위험
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Water Body 추출 -->
|
|
<div class="page-content" id="waterbody">
|
|
<div class="waterbody-page">
|
|
<div class="waterbody-header">
|
|
<h2>Water Body 추출</h2>
|
|
<p class="waterbody-desc">위성/드론 이미지에서 수체(Water Body)를 자동으로 검출합니다.</p>
|
|
</div>
|
|
<!-- 이미지 비교 영역 -->
|
|
<div class="waterbody-comparison">
|
|
<!-- 왼쪽: 입력 이미지 (Drag & Drop) -->
|
|
<div class="comparison-panel input-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">INPUT</span>
|
|
<span class="panel-subtitle">원본 이미지</span>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="dropzone" id="wb-dropzone">
|
|
<input type="file" id="wb-file-input" accept="image/*" hidden>
|
|
<div class="dropzone-content" id="wb-dropzone-content">
|
|
<div class="dropzone-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48">
|
|
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
|
|
</svg>
|
|
</div>
|
|
<p class="dropzone-text">이미지를 드래그하여 놓거나</p>
|
|
<button class="btn-browse" id="btn-wb-browse">파일 선택</button>
|
|
<p class="dropzone-hint">JPG, PNG 형식 지원</p>
|
|
</div>
|
|
<div class="dropzone-preview" id="wb-preview" style="display: none;">
|
|
<img id="wb-input-image" class="preview-image" src="" alt="입력 이미지">
|
|
<button class="btn-remove-image" id="btn-wb-remove">X</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 중앙: 추출 버튼 -->
|
|
<div class="comparison-center">
|
|
<button class="btn-extract" id="btn-waterbody-extract" disabled>
|
|
<span class="btn-extract-text">추출</span>
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
|
|
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="extract-loading" id="wb-extract-loading" style="display: none;">
|
|
<div class="loading-spinner"></div>
|
|
<span>분석 중...</span>
|
|
</div>
|
|
</div>
|
|
<!-- 오른쪽: 결과 이미지 -->
|
|
<div class="comparison-panel output-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">OUTPUT</span>
|
|
<span class="panel-subtitle">Water Body 검출 결과</span>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="result-container" id="wb-result-container">
|
|
<div class="result-placeholder" id="wb-result-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48">
|
|
<path d="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z"/>
|
|
</svg>
|
|
<p>이미지를 업로드하고<br>추출 버튼을 클릭하세요</p>
|
|
</div>
|
|
<img id="wb-output-image" class="result-image" src="" alt="추출 결과" style="display: none;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 결과 정보 -->
|
|
<div class="waterbody-info" id="wb-result-info" style="display: none;">
|
|
<div class="info-card">
|
|
<span class="info-label">Water Body 면적</span>
|
|
<span class="info-value" id="wb-area">-</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">전체 대비 비율</span>
|
|
<span class="info-value highlight" id="wb-ratio">-</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">검출 수역 수</span>
|
|
<span class="info-value" id="wb-count">-</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">신뢰도</span>
|
|
<span class="info-value" id="wb-confidence">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 침수 예측 - 3D 시뮬레이션 -->
|
|
<div class="page-content" id="flood-simulation">
|
|
<div class="empty-page-placeholder" style="display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-size:1.2rem;">
|
|
<p>준비 중입니다.</p>
|
|
</div>
|
|
</div>
|
|
<!-- 침수 예측 - 수위 곡선 -->
|
|
<div class="page-content" id="flood-waterlevel">
|
|
<div class="waterlevel-page">
|
|
<div class="waterlevel-header">
|
|
<h2>침수 예측 - 수위 곡선</h2>
|
|
<div class="waterlevel-controls">
|
|
<div class="control-item">
|
|
<label>그래프 유형</label>
|
|
<select class="waterlevel-select" id="flood-graph-type">
|
|
<option value="hourly">시간별 수위</option>
|
|
<option value="reservoir">저수율 변화</option>
|
|
<option value="river">하천 수위</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-item">
|
|
<label>조회 기간</label>
|
|
<select class="waterlevel-select" id="flood-graph-period">
|
|
<option value="day">최근 24시간</option>
|
|
<option value="week">최근 7일</option>
|
|
<option value="month">최근 30일</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn-graph-load" id="btn-flood-graph-load">조회</button>
|
|
</div>
|
|
</div>
|
|
<div class="waterlevel-content">
|
|
<div class="graph-container">
|
|
<div class="graph-loading" id="flood-graph-loading" style="display: none;">
|
|
<span>그래프 로딩 중...</span>
|
|
</div>
|
|
<img class="graph-image" id="flood-graph-image" src="" alt="수위 곡선 그래프">
|
|
<div class="graph-placeholder" id="flood-graph-placeholder">
|
|
<span>조회 버튼을 클릭하여 그래프를 확인하세요</span>
|
|
</div>
|
|
</div>
|
|
<div class="graph-info">
|
|
<div class="info-card">
|
|
<span class="info-label">현재 수위</span>
|
|
<span class="info-value" id="flood-current-level">2.4m</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">평균 수위</span>
|
|
<span class="info-value" id="flood-avg-level">1.8m</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">최고 수위</span>
|
|
<span class="info-value warning" id="flood-max-level">3.2m</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">경고 수위</span>
|
|
<span class="info-value danger" id="flood-warning-level">4.0m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 침수 예측 - 모니터링 -->
|
|
<div class="page-content" id="flood-monitoring">
|
|
<div class="flood-monitor-dashboard">
|
|
<!-- 메인 영역 (왼쪽) -->
|
|
<div class="flood-monitor-main">
|
|
<!-- 상단 필터 바 -->
|
|
<div class="flood-filter-bar">
|
|
<div class="flood-filter-group">
|
|
<label>침수지도</label>
|
|
<select class="flood-filter-select" id="flood-map-type">
|
|
<option value="all">전체</option>
|
|
<option value="river">하천</option>
|
|
<option value="urban">도심</option>
|
|
</select>
|
|
</div>
|
|
<div class="flood-filter-group">
|
|
<label>조회기간</label>
|
|
<select class="flood-filter-select" id="flood-period">
|
|
<option value="week">지난 일주일</option>
|
|
<option value="month">지난 한달</option>
|
|
<option value="quarter">지난 3개월</option>
|
|
</select>
|
|
</div>
|
|
<div class="flood-filter-group">
|
|
<label>지도유형</label>
|
|
<select class="flood-filter-select" id="flood-view-type">
|
|
<option value="normal">일반지도</option>
|
|
<option value="satellite">위성지도</option>
|
|
<option value="terrain">지형지도</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- 히트맵 지도 영역 -->
|
|
<div class="flood-heatmap-container">
|
|
<div id="flood-heatmap" class="flood-heatmap"></div>
|
|
<!-- 히트맵 이미지 오버레이 -->
|
|
<img id="flood-heatmap-overlay" class="flood-heatmap-image" src="" alt="침수 히트맵">
|
|
<!-- 위험도 오버레이 -->
|
|
<div class="flood-risk-overlay">
|
|
<div class="risk-info-box">
|
|
<span class="risk-info-label">Risk Level</span>
|
|
<span class="risk-info-value safe">낮음</span>
|
|
</div>
|
|
<div class="risk-info-box">
|
|
<span class="risk-info-label">Risk Score</span>
|
|
<span class="risk-info-score flood-score" id="flood-risk-score">23</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 하단 차트 영역 -->
|
|
<div class="flood-charts-row">
|
|
<div class="flood-chart-box">
|
|
<h4>월별 강수량</h4>
|
|
<div class="flood-chart-content">
|
|
<img id="flood-monthly-chart" class="flood-chart-image" src="" alt="월별 강수량">
|
|
</div>
|
|
<div class="flood-chart-legend">
|
|
<span class="legend-line flood-line">─ 2025</span>
|
|
<span class="legend-line secondary">─ 2024</span>
|
|
</div>
|
|
</div>
|
|
<div class="flood-chart-box">
|
|
<h4>수위 현황</h4>
|
|
<div class="flood-waterlevel-content">
|
|
<div class="waterlevel-bars">
|
|
<div class="waterlevel-item">
|
|
<span class="waterlevel-label">현재수위</span>
|
|
<div class="waterlevel-bar-container">
|
|
<div class="waterlevel-bar blue" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="waterlevel-item">
|
|
<span class="waterlevel-label">경고수위</span>
|
|
<div class="waterlevel-bar-container">
|
|
<div class="waterlevel-bar yellow" style="width: 70%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="waterlevel-item">
|
|
<span class="waterlevel-label">위험수위</span>
|
|
<div class="waterlevel-bar-container">
|
|
<div class="waterlevel-bar red" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flood-risk-legend">
|
|
<span class="risk-legend-item"><span class="dot blue"></span> 침수위험 <span class="risk-text low">Low</span></span>
|
|
<span class="risk-legend-item"><span class="dot yellow"></span> 하천수위 <span class="risk-text moderate">Moderate</span></span>
|
|
<span class="risk-legend-item"><span class="dot green"></span> 배수상태 <span class="risk-text low">Low</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 사이드바 (오른쪽) -->
|
|
<div class="flood-monitor-sidebar">
|
|
<h3>침수 예측 요약 View</h3>
|
|
<!-- 미니맵 -->
|
|
<div class="flood-summary-map">
|
|
<div id="flood-mini-map" class="flood-mini-map"></div>
|
|
<img id="flood-mini-heatmap" class="flood-mini-heatmap" src="" alt="미니 히트맵">
|
|
<div class="flood-mini-label">
|
|
<span class="location-name">고흥천 유역</span>
|
|
<span class="risk-badge safe">Risk Level 낮음</span>
|
|
</div>
|
|
</div>
|
|
<!-- 위험 지표 -->
|
|
<div class="flood-indicators">
|
|
<div class="flood-indicator-item">
|
|
<span class="indicator-name">침수위험</span>
|
|
<div class="indicator-data">
|
|
<span class="indicator-value">23</span>
|
|
<span class="indicator-risk low">Risk Low</span>
|
|
</div>
|
|
</div>
|
|
<div class="flood-indicator-item">
|
|
<span class="indicator-name">하천수위</span>
|
|
<div class="indicator-data">
|
|
<span class="indicator-value">45</span>
|
|
<span class="indicator-risk moderate">Risk Moderate</span>
|
|
</div>
|
|
</div>
|
|
<div class="flood-indicator-item">
|
|
<span class="indicator-name">배수상태</span>
|
|
<div class="indicator-data">
|
|
<span class="indicator-value">82</span>
|
|
<span class="indicator-risk low">Risk Low</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 버튼 -->
|
|
<div class="flood-summary-buttons">
|
|
<button class="btn-detail" id="btn-flood-detail">상세보기</button>
|
|
<button class="btn-report" id="btn-flood-report">보고서 출력</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 가뭄 예측 - 모니터링 -->
|
|
<div class="page-content" id="drought-monitoring">
|
|
<div class="drought-monitor-dashboard">
|
|
<!-- 메인 영역 (왼쪽) -->
|
|
<div class="drought-monitor-main">
|
|
<!-- 상단 필터 바 -->
|
|
<div class="drought-filter-bar">
|
|
<div class="drought-filter-group">
|
|
<label>조회기간</label>
|
|
<select class="drought-filter-select" id="drought-period">
|
|
<option value="week">지난 일주일</option>
|
|
<option value="month">지난 한달</option>
|
|
<option value="quarter">지난 3개월</option>
|
|
</select>
|
|
</div>
|
|
<div class="drought-filter-group">
|
|
<label>격자 단위(m)</label>
|
|
<div class="drought-grid-buttons">
|
|
<button class="grid-btn" data-grid="100">100</button>
|
|
<button class="grid-btn" data-grid="250">250</button>
|
|
<button class="grid-btn active" data-grid="500">500</button>
|
|
<button class="grid-btn" data-grid="1000">1000</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 히트맵 지도 영역 -->
|
|
<div class="drought-heatmap-container">
|
|
<div id="drought-heatmap" class="drought-heatmap"></div>
|
|
</div>
|
|
<!-- 하단 차트 영역 -->
|
|
<div class="drought-charts-row">
|
|
<div class="drought-chart-box">
|
|
<h4>월별 가뭄 지수</h4>
|
|
<div class="drought-chart-content">
|
|
<img id="drought-monthly-chart" class="drought-chart-image" src="" alt="월별 가뭄 지수">
|
|
</div>
|
|
<div class="drought-chart-legend">
|
|
<span class="legend-line">─ 2025</span>
|
|
<span class="legend-line secondary">─ 2024</span>
|
|
</div>
|
|
</div>
|
|
<div class="drought-chart-box">
|
|
<h4>강우량</h4>
|
|
<div class="drought-rainfall-content">
|
|
<div class="rainfall-bars">
|
|
<div class="rainfall-item">
|
|
<span class="rainfall-label">누적강우</span>
|
|
<div class="rainfall-bar-container">
|
|
<div class="rainfall-bar blue" style="width: 65%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rainfall-item">
|
|
<span class="rainfall-label">평년누적</span>
|
|
<div class="rainfall-bar-container">
|
|
<div class="rainfall-bar green" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rainfall-item">
|
|
<span class="rainfall-label">평년대비</span>
|
|
<div class="rainfall-bar-container">
|
|
<div class="rainfall-bar orange" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="drought-risk-legend">
|
|
<span class="risk-legend-item"><span class="dot green"></span> 가뭄 <span class="risk-text high">High</span></span>
|
|
<span class="risk-legend-item"><span class="dot yellow"></span> 토양수분 <span class="risk-text moderate">Moderate</span></span>
|
|
<span class="risk-legend-item"><span class="dot blue"></span> 저수율 <span class="risk-text low">Low</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 사이드바 (오른쪽) -->
|
|
<div class="drought-monitor-sidebar">
|
|
<h3>가뭄 예측 요약 View</h3>
|
|
<!-- 미니맵 -->
|
|
<div class="drought-summary-map">
|
|
<div id="drought-mini-map" class="drought-mini-map"></div>
|
|
<img id="drought-mini-heatmap" class="drought-mini-heatmap" src="" alt="미니 히트맵">
|
|
<div class="drought-mini-label">
|
|
<span class="location-name">AAA 공원</span>
|
|
<span class="risk-badge danger">Risk Level 심각</span>
|
|
</div>
|
|
</div>
|
|
<!-- 위험 지표 -->
|
|
<div class="drought-indicators">
|
|
<div class="drought-indicator-item">
|
|
<span class="indicator-name">가뭄</span>
|
|
<div class="indicator-data">
|
|
<span class="indicator-value">72</span>
|
|
<span class="indicator-risk high">Risk High</span>
|
|
</div>
|
|
</div>
|
|
<div class="drought-indicator-item">
|
|
<span class="indicator-name">토양수분</span>
|
|
<div class="indicator-data">
|
|
<span class="indicator-value">45</span>
|
|
<span class="indicator-risk moderate">Risk Moderate</span>
|
|
</div>
|
|
</div>
|
|
<div class="drought-indicator-item">
|
|
<span class="indicator-name">저수율</span>
|
|
<div class="indicator-data">
|
|
<span class="indicator-value">27</span>
|
|
<span class="indicator-risk low">Risk Low</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 버튼 -->
|
|
<div class="drought-summary-buttons">
|
|
<button class="btn-detail" id="btn-drought-detail">상세보기</button>
|
|
<button class="btn-report" id="btn-drought-report">보고서 출력</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 가뭄 예측 - 3D 시뮬레이션 -->
|
|
<div class="page-content" id="drought-simulation">
|
|
<div class="empty-page-placeholder" style="display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-size:1.2rem;">
|
|
<p>준비 중입니다.</p>
|
|
</div>
|
|
</div>
|
|
<!-- 가뭄 예측 - 시계열 변화 그래프 -->
|
|
<div class="page-content" id="drought-waterlevel">
|
|
<div class="waterlevel-page drought-timeseries">
|
|
<div class="waterlevel-header">
|
|
<h2>가뭄 예측 - 시계열 변화 그래프</h2>
|
|
<div class="waterlevel-controls">
|
|
<div class="control-item">
|
|
<label>가뭄 지표</label>
|
|
<select class="waterlevel-select" id="drought-graph-type">
|
|
<option value="spi">SPI (표준강수지수)</option>
|
|
<option value="vhi">VHI (식생건강지수)</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-item">
|
|
<label>조회 기간</label>
|
|
<select class="waterlevel-select" id="drought-graph-period">
|
|
<option value="month">최근 1개월</option>
|
|
<option value="quarter">최근 3개월</option>
|
|
<option value="year">최근 1년</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn-graph-load drought-btn" id="btn-drought-graph-load">조회</button>
|
|
</div>
|
|
</div>
|
|
<div class="waterlevel-content">
|
|
<div class="graph-container">
|
|
<div class="graph-loading" id="drought-graph-loading" style="display: none;">
|
|
<span>그래프 로딩 중...</span>
|
|
</div>
|
|
<img class="graph-image" id="drought-graph-image" src="" alt="가뭄 지표 그래프">
|
|
<div class="graph-placeholder" id="drought-graph-placeholder">
|
|
<span>조회 버튼을 클릭하여 그래프를 확인하세요</span>
|
|
</div>
|
|
</div>
|
|
<div class="graph-info drought-info">
|
|
<div class="info-card">
|
|
<span class="info-label">현재 지표값</span>
|
|
<span class="info-value" id="drought-current-value">-0.8</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">평균 지표값</span>
|
|
<span class="info-value" id="drought-avg-value">-0.3</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">최저값</span>
|
|
<span class="info-value warning" id="drought-min-value">-1.5</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">가뭄 등급</span>
|
|
<span class="info-value drought-level" id="drought-grade">약한 가뭄</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 고흥 단기예보 -->
|
|
<div class="page-content" id="kma-test">
|
|
<div class="waterlevel-page">
|
|
<!-- 육상예보 -->
|
|
<div class="waterlevel-header">
|
|
<h2>단기예보 (전라남도 고흥)</h2>
|
|
<div class="waterlevel-controls">
|
|
<button class="btn-graph-load" id="btn-kma-fetch">새로고침</button>
|
|
</div>
|
|
</div>
|
|
<div class="waterlevel-content">
|
|
<div class="kma-result-area">
|
|
<div class="kma-summary" id="kma-summary" style="display:none;">
|
|
<div class="info-card">
|
|
<span class="info-label">발표시간</span>
|
|
<span class="info-value" id="kma-announce-time">-</span>
|
|
</div>
|
|
<div class="info-card">
|
|
<span class="info-label">조회 건수</span>
|
|
<span class="info-value" id="kma-count">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="graph-placeholder" id="kma-placeholder">
|
|
<span>데이터를 불러오는 중...</span>
|
|
</div>
|
|
<div class="kma-loading" id="kma-loading" style="display:none;">
|
|
<div class="loading-spinner"></div>
|
|
<span>데이터 조회 중...</span>
|
|
</div>
|
|
<div class="kma-data-container" id="kma-data-container" style="display:none;">
|
|
<div style="overflow-x:auto;">
|
|
<table class="kma-table" id="kma-table">
|
|
<thead id="kma-table-head"></thead>
|
|
<tbody id="kma-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>© 2026 All Rights Reserved</p>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/terrain3d.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html>
|