hangban/index.html

83 lines
2.9 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2024-12-07 07:35:24 +08:00
<html>
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>航班</title>
<style>
table {
margin: 20px;
padding: 1rem;
background: #fafafa;
border-radius: .5rem;
border-spacing: 10px;
2024-12-07 07:45:46 +08:00
font-feature-settings: normal;
font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
font-variation-settings: normal;
2024-12-07 07:35:24 +08:00
}
</style>
</head>
<body>
<script type="module">
import Chart from 'chart.js/auto'
import { createElement, div, table, thead, tbody, tr, th, td } from '@laniakeasupercluster/widgets'
const rest = await fetch('http://localhost:2000/api').then(res => res.json())
2024-12-07 07:45:46 +08:00
const metrics = await fetch('http://localhost:2000/api/metrics').then(res => res.json())
const context = createElement({ width: '1000px', height: '300px' }, 'canvas')
document.body.appendChild(div.w(1000).childs([
2024-12-07 07:35:24 +08:00
table.childs([
thead.childs([
tr.childs([
th.text('ID'),
th.text('航班号'),
th.text('航空公司'),
th.text('起飞机场'),
th.text('到达机场'),
th.text('数据')
])
]),
tbody.childs(
rest.map(row => tr.childs([
td.text(row.flight_id),
td.text(row.flight_number),
td.text(row.airline),
td.text(row.origin),
td.text(row.destination),
td.text(row.shuju)
]))
)
2024-12-07 07:45:46 +08:00
]),
context
2024-12-07 07:35:24 +08:00
]))
2024-12-07 07:45:46 +08:00
2024-12-07 07:35:24 +08:00
new Chart(context, {
type: 'line',
data: {
labels: metrics.map(row => new Date(row.date).toLocaleDateString()), // 显示日期
datasets: [{
label: '航班数量',
data: metrics.map(row => row.count), // 使用 count 作为数据
2024-12-07 08:12:11 +08:00
backgroundColor: 'rgba(255, 99, 132, 0.2)', // 曲线下方填充颜色
2024-12-07 07:35:24 +08:00
borderColor: 'rgba(255, 99, 132, 1)', // 曲线颜色
borderWidth: 2, // 曲线宽度
lineTension: 0.3, // 平滑曲线
fill: true // 填充曲线下方区域
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
})
</script>
</body>
</html>