148 lines
4.1 KiB
Vue
148 lines
4.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 { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths } from './utils'
|
|
|
|
const selected = reactive({
|
|
path: './saber/data/2012/SABER_Temp_O3_April2012_v2.0.nc',
|
|
day: '',
|
|
cycle_no: '1',
|
|
lat_range: '0,10',
|
|
})
|
|
|
|
const lat_ranges = [
|
|
'0,10',
|
|
'10,20',
|
|
'20,30',
|
|
'30,40',
|
|
'40,50',
|
|
'50,60',
|
|
]
|
|
|
|
const lon_ranges = [
|
|
'0 ~ 24',
|
|
'24 ~ 48',
|
|
'48 ~ 72',
|
|
'72 ~ 96',
|
|
'96 ~ 120',
|
|
'120 ~ 144',
|
|
'144 ~ 168',
|
|
'168 ~ 192',
|
|
'192 ~ 216',
|
|
'216 ~ 240',
|
|
'240 ~ 264',
|
|
'264 ~ 288',
|
|
'288 ~ 312',
|
|
'312 ~ 336',
|
|
'336 ~ 360',
|
|
]
|
|
|
|
const urll = computed(() => {
|
|
// const path = encodeURIComponent(selected.path)
|
|
// const day = encodeURIComponent(selected.day)
|
|
// const query = `path=${path}&day=${day}&cycle_no=${selected.cycle_no}`
|
|
const query = new URLSearchParams()
|
|
query.set('path', selected.path)
|
|
query.set('day', selected.day)
|
|
query.set('cycle_no', selected.cycle_no.toString())
|
|
query.set('lat_range', selected.lat_range)
|
|
return `${API_BASE_URL}/saber/render/gravity_wave/per_day/fft_ifft?${query}`
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await refreshPath()
|
|
selected.path = saberPaths.value[1]
|
|
})
|
|
|
|
watch(() => selected.path, async () => {
|
|
await refreshCurrentSaberDays(selected.path)
|
|
if (selected.day === '' && currentSaberDays.value.length > 0) {
|
|
selected.day = currentSaberDays.value[1]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="urll">
|
|
<div>
|
|
<div flex="~ col items-stretch gap-3" py-3>
|
|
<slot />
|
|
<Label>纬度带</Label>
|
|
<Select v-model:model-value="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>
|
|
<Label for="day">天数</Label>
|
|
<Select id="day" v-model="selected.day">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择日期" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>Day</SelectLabel>
|
|
<SelectItem v-for="day in currentSaberDays.slice(1)" :key="day" :value="day">
|
|
{{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
}) }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Label for="age">纬度范围</Label>
|
|
<Select v-model="selected.cycle_no">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择纬度范围" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>纬度范围</SelectLabel>
|
|
<SelectItem v-for="i in 15" :key="i" :value="i.toString()">
|
|
{{ lon_ranges[i - 1] }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|