Imdroid/weather-station
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add index.html

Browse Source
This commit is contained in:
yarnom 2025-07-24 17:05:33 +08:00
parent 0342df581b
commit 2ff7310a66
1 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
templates/index.html Normal file
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英卓气象站</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
}
.header {
padding: 18px 0 12px 0;
text-align: center;
font-size: 2.2rem;
font-weight: bold;
color: #007bff;
background: #fff;
border-bottom: 1px solid #ddd;
letter-spacing: 2px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px 10px;
display: flex;
flex-direction: column;
gap: 24px;
}
.stations {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.station-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
padding: 20px 18px 16px 18px;
min-width: 260px;
max-width: 320px;
flex: 1 1 260px;
display: flex;
flex-direction: column;
gap: 10px;
}
.station-title {
font-size: 1.2rem;
font-weight: bold;
color: #333;
margin-bottom: 6px;
}
.station-meta {
font-size: 0.95rem;
color: #888;
margin-bottom: 8px;
}
.station-data {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.data-label {
color: #555;
font-size: 0.95rem;
}
.data-value {
font-size: 1.1rem;
color: #007bff;
font-weight: bold;
}
.chart-area {
margin-top: 10px;
background: #f8f9fa;
border-radius: 6px;
padding: 10px 0 0 0;
}
@media (max-width: 900px) {
.stations { flex-direction: column; }
.station-card { max-width: 100%; }
}
</style>
</head>
<body>
<div class="header">英卓气象站</div>
<div class="container">
<div class="stations" id="stations-list">
<!-- 站点卡片由JS动态渲染 -->
</div>
</div>
<script>
// 示例数据，后端可替换为接口数据
const stations = [
{
id: '001',
name: '站点A',
location: '北京',
temp: 23.5,
humidity: 56,
rain: 0.2,
wind: 3.1,
time: '2024-07-21 15:30',
chart: [1,2,3,2,1,0,0.2]
},
{
id: '002',
name: '站点B',
location: '上海',
temp: 28.1,
humidity: 62,
rain: 0.0,
wind: 2.5,
time: '2024-07-21 15:30',
chart: [0,0,0,0,0,0,0]
}
];
function renderStations() {
const list = document.getElementById('stations-list');
list.innerHTML = '';
stations.forEach((s, idx) => {
const card = document.createElement('div');
card.className = 'station-card';
card.innerHTML = `
<div class="station-title">${s.name} <span style="font-size:0.9rem;color:#888;">(${s.id})</span></div>
<div class="station-meta">${s.location} | 更新时间: ${s.time}</div>
<div class="station-data">
<div><span class="data-label">温度</span>: <span class="data-value">${s.temp}°C</span></div>
<div><span class="data-label">湿度</span>: <span class="data-value">${s.humidity}%</span></div>
<div><span class="data-label">降雨</span>: <span class="data-value">${s.rain}mm</span></div>
<div><span class="data-label">风速</span>: <span class="data-value">${s.wind}m/s</span></div>
</div>
<div class="chart-area">
<canvas id="chart${idx}" height="60"></canvas>
</div>
`;
list.appendChild(card);
setTimeout(() => renderChart(`chart${idx}`, s.chart), 0);
});
}
function renderChart(id, data) {
new Chart(document.getElementById(id).getContext('2d'), {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: '降雨量',
data: data,
borderColor: '#007bff',
backgroundColor: 'rgba(0,123,255,0.08)',
fill: true,
tension: 0.3,
pointRadius: 2
}]
},
options: {
plugins: { legend: { display: false } },
scales: { x: { display: false }, y: { display: false } },
responsive: true,
maintainAspectRatio: false
}
});
}
renderStations();
</script>
</body>
</html>