106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<route lang="json">
|
|
{
|
|
"meta":{
|
|
"title":"TIDI 行星波月统计",
|
|
"icon":"mdi:telescope",
|
|
"group":"TIDI",
|
|
"item_name":"行星波月统计"
|
|
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<script setup lang="ts">
|
|
import { API_BASE_URL } from '~/CONSTANT'
|
|
|
|
const selectedMode = ref('V_Meridional')
|
|
|
|
const years = ref([] as string[])
|
|
const selectedYear = ref('2017')
|
|
|
|
// const k = [ -4,-3,-2,-1,0,1,2,3,4]
|
|
const selectedK = ref(0)
|
|
const selectedT = ref('5')
|
|
|
|
const queryUrl = computed(() => {
|
|
const query = new URLSearchParams()
|
|
query.set('mode', selectedMode.value)
|
|
query.set('year', selectedYear.value)
|
|
query.set('k', selectedK.value.toString())
|
|
query.set('T', selectedT.value.toString())
|
|
return `${API_BASE_URL}/tidi/render/wave?${query}`
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const metas = await baseFetch<{ path: string [] }>(`${API_BASE_URL}/tidi/metadata`).json()
|
|
const _years = metas.data.value.path.map((a: string) => {
|
|
const year_pattern = /data\/(\d{4})\//
|
|
return a.match(year_pattern)?.[1]
|
|
})
|
|
_years.sort()
|
|
years.value = Array.from(new Set(_years))
|
|
selectedYear.value = years.value[0]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="queryUrl">
|
|
<div flex="col gap-3 ~ justify-stretch">
|
|
<Label>计算模式</Label>
|
|
<Tabs id="modes" v-model="selectedMode" default-value="V_Meridional">
|
|
<TabsList class="grid grid-cols-2 w-full">
|
|
<TabsTrigger value="V_Meridional">
|
|
纬向风
|
|
</TabsTrigger>
|
|
<TabsTrigger value="V_Zonal">
|
|
经向风
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<Label>年份</Label>
|
|
<Select v-model="selectedYear">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择年份" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>年份</SelectLabel>
|
|
<SelectItem v-for="year in years" :key="year" :value="year">
|
|
{{ year }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Label>波数 k</Label>
|
|
<NumberField
|
|
v-model="selectedK"
|
|
:max="4" :min="-4" :step="1"
|
|
>
|
|
<NumberFieldContent>
|
|
<NumberFieldIncrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldDecrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
<Label>滑动窗口 T</Label>
|
|
<Tabs v-model:model-value="selectedT" default-value="15">
|
|
<TabsList class="grid grid-cols-3 w-full">
|
|
<TabsTrigger value="5">
|
|
5
|
|
</TabsTrigger>
|
|
<TabsTrigger value="10">
|
|
10
|
|
</TabsTrigger>
|
|
<TabsTrigger value="16">
|
|
16
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|