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)', // 曲线下方填充颜色
|
|
borderColor: 'rgba(255, 99, 132, 1)', // 曲线颜色
|
|
borderWidth: 2, // 曲线宽度
|
|
lineTension: 0.3, // 平滑曲线
|
|
fill: true // 填充曲线下方区域
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |