83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<route lang="json">
|
|
{
|
|
"meta": {
|
|
"title": "Saber月周期功率波图",
|
|
"description": "Saber月周期功率波图",
|
|
"group": "Saber",
|
|
"item_name": "月周期功率波图"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<script setup lang="ts">
|
|
import { API_BASE_URL } from '~/CONSTANT'
|
|
import { refreshPath, renderPath, saberPaths } from './utils'
|
|
|
|
const lat_ranges = [
|
|
'0,10',
|
|
'10,20',
|
|
'20,30',
|
|
'30,40',
|
|
'40,50',
|
|
'50,60',
|
|
]
|
|
|
|
const selected = reactive({
|
|
path: '',
|
|
lat_range: '0,10',
|
|
})
|
|
|
|
const urll = computed(() => {
|
|
const query = new URLSearchParams()
|
|
query.set('path', selected.path)
|
|
query.set('lat_range', selected.lat_range)
|
|
return `${API_BASE_URL}/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await refreshPath()
|
|
selected.path = saberPaths.value[0]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="urll">
|
|
<div>
|
|
<div flex="~ col items-stretch gap-3" py-3>
|
|
<Label>纬度带</Label>
|
|
<Select v-model="selected.lat_range">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择纬度带" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>纬度带</SelectLabel>
|
|
<SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
|
|
{{ lat_range.replace(",", " ~ ") }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Label for="day">年月</Label>
|
|
<Select v-model="selected.path">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择日期" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>月份</SelectLabel>
|
|
<SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
|
|
{{ renderPath(path) }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|