119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<route lang="json">
|
||
{
|
||
"meta":{
|
||
"title":"Saber 行星波月统计",
|
||
"description":"Saber 行星波月统计",
|
||
"group":"Saber",
|
||
"item_name":"行星波统计"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<script setup lang="ts">
|
||
const selected = reactive({
|
||
year: '2018',
|
||
T: '16',
|
||
k: 0,
|
||
H: 90,
|
||
range: '60',
|
||
})
|
||
|
||
const ranges = [
|
||
'-30',
|
||
'30',
|
||
'-60',
|
||
'60',
|
||
]
|
||
|
||
const queryUrl = computed(() => {
|
||
const q = new URLSearchParams()
|
||
q.set('year', selected.year)
|
||
q.set('T', selected.T.toString())
|
||
q.set('k', selected.k.toString())
|
||
q.set('H', selected.H.toString())
|
||
q.set('lat_target', selected.range)
|
||
return `/saber/render/planet_wave/per_year/energy_plot?${q}`
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<DenseFramework :image-query="queryUrl">
|
||
<Label>年份</Label>
|
||
<Select v-model="selected.year">
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="选择年份" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectGroup>
|
||
<SelectLabel>年份</SelectLabel>
|
||
<SelectItem v-for="year in ['2018', '2015']" :key="year" :value="year">
|
||
{{ year }}
|
||
</SelectItem>
|
||
</SelectGroup>
|
||
</SelectContent>
|
||
</Select>
|
||
<Label>行星波周期</Label>
|
||
<!-- can be 5，10,16 -->
|
||
<!-- use Tabs -->
|
||
<Tabs v-model="selected.T" default-value="16">
|
||
<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>
|
||
<Label>高度（km）</Label>
|
||
<NumberField
|
||
id="start"
|
||
v-model:model-value="selected.H" :format-options="{
|
||
useGrouping: false,
|
||
}" :default-value="94"
|
||
:step="20"
|
||
:max="110"
|
||
:min="30"
|
||
>
|
||
<NumberFieldContent>
|
||
<NumberFieldDecrement />
|
||
<NumberFieldInput />
|
||
<NumberFieldIncrement />
|
||
</NumberFieldContent>
|
||
</NumberField>
|
||
<Label>纬度带（°）</Label>
|
||
<Select v-model="selected.range">
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="选择纬度带" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectGroup>
|
||
<SelectLabel>纬度带（°）</SelectLabel>
|
||
<SelectItem v-for="range in ranges" :key="range" :value="range">
|
||
{{ range }}
|
||
</SelectItem>
|
||
</SelectGroup>
|
||
</SelectContent>
|
||
</Select>
|
||
<Label>波数 k</Label>
|
||
<NumberField
|
||
v-model="selected.k"
|
||
:default-value="0"
|
||
:max="4" :min="-4" :step="1"
|
||
>
|
||
<NumberFieldContent>
|
||
<NumberFieldIncrement />
|
||
<NumberFieldInput />
|
||
<NumberFieldDecrement />
|
||
</NumberFieldContent>
|
||
</NumberField>
|
||
</DenseFramework>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|