145 lines
4.2 KiB
Vue
145 lines
4.2 KiB
Vue
<route lang="json">
|
|
{
|
|
"meta": {
|
|
"title": "Saber月周期功率波图",
|
|
"description": "Saber月周期功率波图",
|
|
"group": "Saber",
|
|
"item_name": "月周期功率波图"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<script setup lang="ts">
|
|
import { refreshPath, renderPath, saberPaths } from './utils'
|
|
|
|
const currentMode = ref('月统计图')
|
|
const allYears = ref([] as string[])
|
|
const lat_ranges = [
|
|
'-60,-50',
|
|
'-50,-40',
|
|
'-40,-30',
|
|
'-30,-20',
|
|
'-20,-10',
|
|
'-10,0',
|
|
'0,10',
|
|
'10,20',
|
|
'20,30',
|
|
'30,40',
|
|
'40,50',
|
|
'50,60',
|
|
]
|
|
|
|
const selected = reactive({
|
|
path: '',
|
|
lat_range: '0,10',
|
|
year: '',
|
|
})
|
|
|
|
const urll = computed(() => {
|
|
if (currentMode.value === '月统计图') {
|
|
const query = new URLSearchParams()
|
|
query.set('path', selected.path)
|
|
query.set('lat_range', selected.lat_range)
|
|
return `/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
|
|
}
|
|
else {
|
|
const query = new URLSearchParams()
|
|
query.set('year', selected.year)
|
|
query.set('lat_range', selected.lat_range)
|
|
return `/saber/render/gravity_wave/per_year/power_wave_plot?${query}`
|
|
}
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await refreshPath()
|
|
selected.path = saberPaths.value[0]
|
|
// traverse all paths to get all years,
|
|
// in each item, str is like ../data/saber/2017/SABER_Temp_O3_June2017_v2.0.nc
|
|
const years = Array.from(new Set(saberPaths.value.map((str: string) => str.match(/(\d{4})/)?.[1])))
|
|
allYears.value = years.filter(year => year !== null).map(year => year!)
|
|
selected.year = allYears.value[0]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="urll">
|
|
<div>
|
|
<Label>模式</Label>
|
|
<Tabs v-model="currentMode">
|
|
<TabsList class="grid grid-cols-2 w-full">
|
|
<TabsTrigger value="月统计图">
|
|
月统计图
|
|
</TabsTrigger>
|
|
<TabsTrigger value="年统计图">
|
|
年统计图
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<div v-if="currentMode === '月统计图'" flex="~ col items-stretch gap-3" py-3>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<div v-else class="flex flex-col gap-3 py-2">
|
|
<Label>年份</Label>
|
|
<Select v-model="selected.year">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择年份" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>年份</SelectLabel>
|
|
<SelectItem v-for="year in allYears" :key="year" :value="year">
|
|
{{ year }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|