128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
<route lang="yaml">
|
|
meta:
|
|
title: 探空气球-重力波统计
|
|
description: 探空气球-重力波统计
|
|
group: 探空气球
|
|
item_name: 重力波统计
|
|
</route>
|
|
|
|
<script setup lang="ts">
|
|
import { API_BASE_URL } from '~/CONSTANT'
|
|
|
|
const selectedMode = ref('w/f值统计结果')
|
|
|
|
const isIllegal = ref(false)
|
|
|
|
const startYear = ref(2017)
|
|
const endYear = ref(2024)
|
|
|
|
const modes = [
|
|
|
|
'w/f值统计结果',
|
|
'周期统计结果',
|
|
'垂直波长分布',
|
|
'水平波长分布',
|
|
'纬向本征相速度',
|
|
'经向本征相速度',
|
|
'垂直本征相速度',
|
|
'Zonal wind amplitude (m/s)',
|
|
'扰动振幅统计结果',
|
|
'Temperature amplitude (K)',
|
|
'纬向动量通量统计结果',
|
|
'经向动量通量统计结果',
|
|
// 'horizontal propagation',
|
|
// '每月上传/下传重力波占比',
|
|
// '动能和势能分布情况',
|
|
] as const
|
|
|
|
const mode_display_mapping = {
|
|
'w/f值统计结果': '本征频率与惯性频率的比值',
|
|
'周期统计结果': '周期统计',
|
|
'垂直波长分布': '垂直波长',
|
|
'水平波长分布': '水平波长',
|
|
'纬向本征相速度': '纬向本征相速度',
|
|
'经向本征相速度': '经向本征相速度',
|
|
'垂直本征相速度': '垂直本征相速度',
|
|
'Zonal wind amplitude (m/s)': '纬向风扰动幅度',
|
|
'扰动振幅统计结果': '经向风扰动幅度',
|
|
'Temperature amplitude (K)': '温度扰动振幅',
|
|
'纬向动量通量统计结果': '纬向动量通量统计',
|
|
'经向动量通量统计结果': '经向动量通量统计',
|
|
'horizontal propagation': 'horizontal propagation',
|
|
'每月上传/下传重力波占比': '每月上传/下传重力波占比',
|
|
'动能和势能分布情况': '动能和势能分布情况',
|
|
}
|
|
|
|
const queryUrl = computed(() => {
|
|
return `${API_BASE_URL}/balloon/render/year?mode=${encodeURIComponent(selectedMode.value)}&start_year=${startYear.value}&end_year=${endYear.value}`
|
|
})
|
|
|
|
watch([selectedMode, startYear, endYear], () => {
|
|
if (startYear.value > endYear.value) {
|
|
isIllegal.value = true
|
|
return
|
|
}
|
|
isIllegal.value = false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="queryUrl">
|
|
<div flex="col gap-5 ~ justify-center">
|
|
<div>
|
|
<Label>统计参数</Label>
|
|
<Select v-model="selectedMode">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a fruit" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>模式</SelectLabel>
|
|
<SelectItem
|
|
v-for="mode in Array.from(modes).sort(((a, b) => {
|
|
return mode_display_mapping[a].length - mode_display_mapping[b].length
|
|
}))"
|
|
:key="mode" :value="mode"
|
|
>
|
|
{{ mode_display_mapping[mode] }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<NumberField
|
|
id="start"
|
|
v-model:model-value="startYear" :format-options="{
|
|
useGrouping: false,
|
|
}" :default-value="2017" :min="2017" :max="2024"
|
|
>
|
|
<Label for="start">起始年</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
<NumberField
|
|
id="end"
|
|
v-model:model-value="endYear" :format-options="{
|
|
style: 'decimal',
|
|
notation: 'standard',
|
|
useGrouping: false,
|
|
}" :default-value="2017" :min="2017" :max="2024"
|
|
>
|
|
<Label for="end">终止年</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|