113 lines
3.4 KiB
HTML
113 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>雨量计 DTU 数据</title>
|
|
<style>
|
|
.connected {
|
|
color: green;
|
|
font-weight: bold;
|
|
}
|
|
.disconnected {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>雨量计数据</h1>
|
|
|
|
<div class="conn-info">
|
|
<p>
|
|
连接状态: <span class="{{if eq .ConnStatus "已连接"}}connected{{else}}disconnected{{end}}">{{.ConnStatus}}</span> |
|
|
客户端地址: {{.ClientAddr}}
|
|
</p>
|
|
</div>
|
|
|
|
<button class="refresh-btn" onclick="refreshData()">查询最新数据</button>
|
|
|
|
{{if .Latest}}
|
|
<div>
|
|
<h2>最新数据 ({{.Latest.Timestamp.Format "2006-01-02 15:04:05"}})</h2>
|
|
<p>
|
|
<strong>温度:</strong> {{printf "%.1f" (div .Latest.Temperature 10)}}°C |
|
|
<strong>湿度:</strong> {{printf "%.1f" (div .Latest.Humidity 10)}}% |
|
|
<strong>风速:</strong> {{printf "%.2f" (div .Latest.WindSpeed 100)}}m/s |
|
|
<strong>风向:</strong> {{.Latest.WindDirection360}}° |
|
|
<strong>风力:</strong> {{.Latest.WindForce}}级
|
|
</p>
|
|
<p>
|
|
<strong>雨量:</strong> {{printf "%.1f" (div .Latest.OpticalRain 10)}}mm |
|
|
<strong>大气压:</strong> {{printf "%.1f" (div .Latest.AtmPressure 10)}}kPa |
|
|
<strong>太阳辐射:</strong> {{.Latest.SolarRadiation}}W/m²
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
<h2>历史数据</h2>
|
|
<table border="1">
|
|
<tr>
|
|
<th>时间</th>
|
|
<th>温度(°C)</th>
|
|
<th>湿度(%)</th>
|
|
<th>风速(m/s)</th>
|
|
<th>风向(°)</th>
|
|
<th>风力(级)</th>
|
|
<th>雨量(mm)</th>
|
|
<th>大气压(kPa)</th>
|
|
<th>太阳辐射(W/m²)</th>
|
|
</tr>
|
|
{{range .Records}}
|
|
<tr>
|
|
<td>{{.Timestamp.Format "2006-01-02 15:04:05"}}</td>
|
|
<td>{{printf "%.1f" (div .Temperature 10)}}</td>
|
|
<td>{{printf "%.1f" (div .Humidity 10)}}</td>
|
|
<td>{{printf "%.2f" (div .WindSpeed 100)}}</td>
|
|
<td>{{.WindDirection360}}</td>
|
|
<td>{{.WindForce}}</td>
|
|
<td>{{printf "%.1f" (div .OpticalRain 10)}}</td>
|
|
<td>{{printf "%.1f" (div .AtmPressure 10)}}</td>
|
|
<td>{{.SolarRadiation}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</table>
|
|
|
|
<div>
|
|
{{if gt .Page 1}}
|
|
<a href="/?page={{.PrevPage}}">上一页</a>
|
|
{{end}}
|
|
|
|
{{range .Pages}}
|
|
{{if eq . $.Page}}
|
|
<b>{{.}}</b>
|
|
{{else}}
|
|
<a href="/?page={{.}}">{{.}}</a>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{if lt .Page .TotalPages}}
|
|
<a href="/?page={{.NextPage}}">下一页</a>
|
|
{{end}}
|
|
</div>
|
|
|
|
<script>
|
|
function refreshData() {
|
|
fetch('/refresh-data', {
|
|
method: 'POST'
|
|
})
|
|
.then(response => {
|
|
if(response.ok) {
|
|
window.location.reload();
|
|
} else {
|
|
alert('获取数据失败，请稍后再试');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('发生错误，请稍后再试');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|