83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<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;
|
||
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;
|
||
}
|
||
</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())
|
||
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([
|
||
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)
|
||
]))
|
||
)
|
||
]),
|
||
context
|
||
]))
|
||
|
||
|
||
|
||
new Chart(context, {
|
||
type: 'line',
|
||
data: {
|
||
labels: metrics.map(row => new Date(row.date).toLocaleDateString()), // 显示日期
|
||
datasets: [{
|
||
label: '航班数量',
|
||
data: metrics.map(row => row.count), // 使用 count 作为数据
|
||
backgroundColor: 'rgba(255, 99, 132, 0.2)', // 曲线下方填充颜色（透明度0.2）
|
||
borderColor: 'rgba(255, 99, 132, 1)', // 曲线颜色
|
||
borderWidth: 2, // 曲线宽度
|
||
lineTension: 0.3, // 平滑曲线
|
||
fill: true // 填充曲线下方区域
|
||
}]
|
||
},
|
||
options: {
|
||
scales: {
|
||
y: { beginAtZero: true }
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |