feat: lat_range and date format
This commit is contained in:
parent
3bca8d15c5
commit
75c5d28b4f
GPG Key ID:
35AA0AA3DC402D5C
@ -11,12 +11,22 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
||||
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: '',
|
||||
day: '',
|
||||
cycle_no: 1,
|
||||
lat_range: '0,10',
|
||||
})
|
||||
|
||||
const urll = computed(() => {
|
||||
@ -24,6 +34,7 @@ const urll = computed(() => {
|
||||
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/day_cycle_power_wave_plot?${query}`
|
||||
})
|
||||
|
||||
@ -41,20 +52,26 @@ watch(() => selected.path, async () => {
|
||||
selected.day = currentSaberDays.value[0]
|
||||
}
|
||||
})
|
||||
|
||||
function renderPath(path: string) {
|
||||
const yearPattern = /\/data\/(\d{4})/
|
||||
const year = path.match(yearPattern)?.[1]
|
||||
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
||||
const month = path.match(monthPattern)?.[1]
|
||||
return `${year}年${month}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-query="urll">
|
||||
<div>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<Label>纬度带</Label>
|
||||
<Select v-model="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>
|
||||
@ -63,7 +80,7 @@ function renderPath(path: string) {
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>月份</SelectLabel>
|
||||
<SelectItem v-for="path in saberPaths" :key="path" :value="path">
|
||||
<SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
|
||||
{{ renderPath(path) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
@ -78,7 +95,11 @@ function renderPath(path: string) {
|
||||
<SelectGroup>
|
||||
<SelectLabel>Day</SelectLabel>
|
||||
<SelectItem v-for="day in currentSaberDays" :key="day" :value="day">
|
||||
{{ day }}
|
||||
{{ parseDayOfYear (day.toString()).toLocaleDateString("zh", {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
}) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
|
||||
@ -11,14 +11,24 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
||||
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 urll = computed(() => {
|
||||
// const path = encodeURIComponent(selected.path)
|
||||
// const day = encodeURIComponent(selected.day)
|
||||
@ -27,6 +37,7 @@ const urll = computed(() => {
|
||||
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/day_fft_ifft_plot?${query}`
|
||||
})
|
||||
|
||||
@ -38,20 +49,26 @@ onMounted(async () => {
|
||||
watch(() => selected.path, async () => {
|
||||
await refreshCurrentSaberDays(selected.path)
|
||||
})
|
||||
|
||||
function renderPath(path: string) {
|
||||
const yearPattern = /\/data\/(\d{4})/
|
||||
const year = path.match(yearPattern)?.[1]
|
||||
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
||||
const month = path.match(monthPattern)?.[1]
|
||||
return `${year}年${month}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-query="urll">
|
||||
<div>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<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>
|
||||
@ -60,7 +77,7 @@ function renderPath(path: string) {
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>月份</SelectLabel>
|
||||
<SelectItem v-for="path in saberPaths" :key="path" :value="path">
|
||||
<SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
|
||||
{{ renderPath(path) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
@ -75,7 +92,11 @@ function renderPath(path: string) {
|
||||
<SelectGroup>
|
||||
<SelectLabel>Day</SelectLabel>
|
||||
<SelectItem v-for="day in currentSaberDays" :key="day" :value="day">
|
||||
{{ day }}
|
||||
{{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
}) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
|
||||
@ -11,15 +11,26 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { refreshPath, saberPaths } from './utils'
|
||||
import { refreshPath, renderPath, saberPaths } from './utils'
|
||||
|
||||
const lat_ranges = [
|
||||
'0,10',
|
||||
'10,20',
|
||||
'20,30',
|
||||
'30,40',
|
||||
'40,50',
|
||||
'50,60',
|
||||
]
|
||||
|
||||
const selected = reactive({
|
||||
path: '',
|
||||
lat_range: '0,10',
|
||||
})
|
||||
|
||||
const urll = computed(() => {
|
||||
const query = new URLSearchParams()
|
||||
query.set('path', selected.path)
|
||||
query.set('lat_range', selected.lat_range)
|
||||
return `${API_BASE_URL}/saber/render/month_power_wave_plot?${query}`
|
||||
})
|
||||
|
||||
@ -27,20 +38,26 @@ onMounted(async () => {
|
||||
await refreshPath()
|
||||
selected.path = saberPaths.value[0]
|
||||
})
|
||||
|
||||
function renderPath(path: string) {
|
||||
const yearPattern = /\/data\/(\d{4})/
|
||||
const year = path.match(yearPattern)?.[1]
|
||||
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
||||
const month = path.match(monthPattern)?.[1]
|
||||
return `${year}年${month}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-query="urll">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<Label>纬度带</Label>
|
||||
<Select v-model="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>
|
||||
@ -49,7 +66,7 @@ function renderPath(path: string) {
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>月份</SelectLabel>
|
||||
<SelectItem v-for="path in saberPaths" :key="path" :value="path">
|
||||
<SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
|
||||
{{ renderPath(path) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
|
||||
@ -11,12 +11,22 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
||||
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(() => {
|
||||
@ -24,6 +34,7 @@ const urll = computed(() => {
|
||||
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}`
|
||||
})
|
||||
|
||||
@ -38,20 +49,26 @@ watch(() => selected.path, async () => {
|
||||
selected.path = saberPaths.value[0]
|
||||
}
|
||||
})
|
||||
|
||||
function renderPath(path: string) {
|
||||
const yearPattern = /\/data\/(\d{4})/
|
||||
const year = path.match(yearPattern)?.[1]
|
||||
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
||||
const month = path.match(monthPattern)?.[1]
|
||||
return `${year}年${month}`
|
||||
}
|
||||
</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>
|
||||
@ -60,7 +77,7 @@ function renderPath(path: string) {
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>月份</SelectLabel>
|
||||
<SelectItem v-for="path in saberPaths" :key="path" :value="path">
|
||||
<SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
|
||||
{{ renderPath(path) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
@ -75,7 +92,11 @@ function renderPath(path: string) {
|
||||
<SelectGroup>
|
||||
<SelectLabel>Day</SelectLabel>
|
||||
<SelectItem v-for="day in currentSaberDays" :key="day" :value="day">
|
||||
{{ day }}
|
||||
{{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
}) }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
|
||||
@ -16,5 +16,34 @@ async function refreshCurrentSaberDays(path: string) {
|
||||
const data = resp.data.value
|
||||
currentSaberDays.value = data!
|
||||
}
|
||||
function renderPath(path: string) {
|
||||
const yearPattern = /\/data\/(\d{4})/
|
||||
const year = path.match(yearPattern)?.[1]
|
||||
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
||||
const month_mapping = {
|
||||
January: '01月',
|
||||
February: '02月',
|
||||
March: '03月',
|
||||
April: '04月',
|
||||
May: '05月',
|
||||
June: '06月',
|
||||
July: '07月',
|
||||
August: '08月',
|
||||
September: '09月',
|
||||
October: '10月',
|
||||
November: '11月',
|
||||
December: '12月',
|
||||
} as const
|
||||
const month = path.match(monthPattern)?.[1] as keyof typeof month_mapping
|
||||
return `${year}年${month_mapping[month]}`
|
||||
}
|
||||
|
||||
export { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths }
|
||||
function parseDayOfYear(dateString: string): Date {
|
||||
const year = Number.parseInt(dateString.substring(0, 4))
|
||||
const dayOfYear = Number.parseInt(dateString.substring(4)) - 1 // subtract 1 because JS dates are 0-based
|
||||
const date = new Date(year, 0) // Start with January 1st of the year
|
||||
date.setDate(dayOfYear + 1) // Add the days
|
||||
return date
|
||||
}
|
||||
|
||||
export { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user