171 lines
5.3 KiB
HTML
171 lines
5.3 KiB
HTML
<!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> |