143 lines
4.0 KiB
Vue
143 lines
4.0 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 lat_ranges = [
|
|
'0,10',
|
|
'10,20',
|
|
'20,30',
|
|
'30,40',
|
|
'40,50',
|
|
'50,60',
|
|
]
|
|
|
|
const selected = reactive({
|
|
path: './saber/data\\2012\\SABER_Temp_O3_April2012_v2.0.nc',
|
|
day: '',
|
|
height_no: '1',
|
|
lat_ranges: '0,10',
|
|
})
|
|
|
|
const urll = computed(() => {
|
|
const query = new URLSearchParams()
|
|
query.set('path', selected.path)
|
|
query.set('day', selected.day)
|
|
query.set('height_no', selected.height_no.toString())
|
|
query.set('lat_ranges', selected.lat_ranges)
|
|
return `${API_BASE_URL}/saber/render/plot_wave_fitting?${query}`
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await refreshPath()
|
|
selected.path = saberPaths.value[1]
|
|
})
|
|
|
|
watch(() => selected.path, async () => {
|
|
await refreshCurrentSaberDays(selected.path)
|
|
if (saberPaths.value.length > 0) {
|
|
selected.path = saberPaths.value[1]
|
|
}
|
|
})
|
|
|
|
function mapHeightValue(input: number) {
|
|
// Input range: 1 to 157
|
|
// Output range: 30 to 90
|
|
const inputMin = 1
|
|
const inputMax = 157
|
|
const outputMin = 30
|
|
const outputMax = 90
|
|
|
|
// Calculate slope
|
|
const m = (outputMax - outputMin) / (inputMax - inputMin)
|
|
// Calculate y-intercept
|
|
const b = outputMin - m * inputMin
|
|
|
|
// Apply linear mapping
|
|
return m * input + b
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="urll">
|
|
<div>
|
|
<div flex="~ col justify-stretch gap-3" py-3>
|
|
<Label>纬度带</Label>
|
|
<Select v-model="selected.lat_ranges">
|
|
<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.height_no">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择高度" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>高度</SelectLabel>
|
|
<SelectItem v-for="height_no in 157" :key="height_no" :value="height_no.toString()">
|
|
{{ mapHeightValue(height_no).toFixed(2) }} km
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|