127 lines
4.4 KiB
HTML
127 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>小时雨量统计</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
h1 { color: #333; }
|
|
.container { max-width: 1000px; margin: 0 auto; }
|
|
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
|
|
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
|
|
th { background-color: #4CAF50; color: white; }
|
|
tr:hover { background-color: #f5f5f5; }
|
|
.rainfall-bar {
|
|
height: 20px;
|
|
background-color: #2196F3;
|
|
display: inline-block;
|
|
min-width: 3px;
|
|
}
|
|
.summary {
|
|
background-color: #e8f5e9;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.no-data { color: #999; }
|
|
.hours-selector { margin: 20px 0; }
|
|
.hours-selector a {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
padding: 5px 10px;
|
|
text-decoration: none;
|
|
background-color: #e0e0e0;
|
|
color: #333;
|
|
border-radius: 3px;
|
|
}
|
|
.hours-selector a.active {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
.nav-links {
|
|
margin: 20px 0;
|
|
}
|
|
.nav-links a {
|
|
margin-right: 15px;
|
|
text-decoration: none;
|
|
color: #2196F3;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>小时雨量统计</h1>
|
|
|
|
<div class="nav-links">
|
|
<a href="/">返回首页</a>
|
|
</div>
|
|
|
|
<div class="hours-selector">
|
|
显示范围：
|
|
<a href="/hourly-rainfall?hours=24" class="{{if eq .Hours 24}}active{{end}}">24小时</a>
|
|
<a href="/hourly-rainfall?hours=48" class="{{if eq .Hours 48}}active{{end}}">48小时</a>
|
|
<a href="/hourly-rainfall?hours=72" class="{{if eq .Hours 72}}active{{end}}">3天</a>
|
|
<a href="/hourly-rainfall?hours=168" class="{{if eq .Hours 168}}active{{end}}">7天</a>
|
|
<a href="/hourly-rainfall?hours=720" class="{{if eq .Hours 720}}active{{end}}">30天</a>
|
|
</div>
|
|
|
|
<div class="summary">
|
|
<h2>统计摘要</h2>
|
|
{{if .HourlyData}}
|
|
{{$sum := 0.0}}
|
|
{{$max := 0.0}}
|
|
{{$maxTime := ""}}
|
|
{{range .HourlyData}}
|
|
{{$rainfall := divInt64 .Rainfall 10}}
|
|
{{$sum = add $sum $rainfall}}
|
|
{{if gt $rainfall $max}}
|
|
{{$max = $rainfall}}
|
|
{{$maxTime = formatTime .HourStart}}
|
|
{{end}}
|
|
{{end}}
|
|
<p>
|
|
<strong>总降雨量:</strong> {{printf "%.1f" $sum}} mm<br>
|
|
<strong>最大小时降雨量:</strong> {{printf "%.1f" $max}} mm ({{$maxTime}})<br>
|
|
<strong>统计时段:</strong> {{len .HourlyData}} 小时
|
|
</p>
|
|
{{else}}
|
|
<p class="no-data">暂无降雨数据</p>
|
|
{{end}}
|
|
</div>
|
|
|
|
<h2>小时降雨详情</h2>
|
|
{{if .HourlyData}}
|
|
<table>
|
|
<tr>
|
|
<th>时间</th>
|
|
<th>降雨量(mm)</th>
|
|
<th>数据采样数</th>
|
|
<th>雨量图示</th>
|
|
</tr>
|
|
{{range .HourlyData}}
|
|
<tr>
|
|
<td>{{formatTime .HourStart}}</td>
|
|
<td>{{printf "%.1f" (divInt64 .Rainfall 10)}}</td>
|
|
<td>{{.Samples}}</td>
|
|
<td>
|
|
<div class="rainfall-bar" style="width: {{mul (divInt64 .Rainfall 10) 5}}px"
|
|
title="{{printf "%.1f" (divInt64 .Rainfall 10)}} mm"></div>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</table>
|
|
{{else}}
|
|
<p class="no-data">所选时间段内暂无降雨记录。</p>
|
|
{{end}}
|
|
</div>
|
|
|
|
<script>
|
|
// 添加页面自动刷新功能
|
|
setTimeout(function() {
|
|
window.location.reload();
|
|
}, 5 * 60 * 1000); // 每5分钟刷新一次
|
|
</script>
|
|
</body>
|
|
</html>
|