95 lines
2.7 KiB
Vue
95 lines
2.7 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, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
|
|
|
const selected = reactive({
|
|
path: './saber/data/2012/SABER_Temp_O3_April2012_v2.0.nc',
|
|
day: '',
|
|
cycle_no: 1,
|
|
})
|
|
|
|
const urll = computed(() => {
|
|
const path = encodeURIComponent(selected.path)
|
|
const day = encodeURIComponent(selected.day)
|
|
const query = `path=${path}&day=${day}&cycle_no=${selected.cycle_no}`
|
|
return `${API_BASE_URL}/saber/render/day_fft_ifft_plot?${query}`
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await refreshPath()
|
|
selected.path = saberPaths.value[0]
|
|
})
|
|
|
|
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 for="day">年月</Label>
|
|
<Select v-model="selected.path">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择日期" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>月份</SelectLabel>
|
|
<SelectItem v-for="path in saberPaths" :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" :key="day" :value="day">
|
|
{{ day }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
<Label for="age">Cycle No.</Label>
|
|
<NumberField id="age" v-model:model-value="selected.cycle_no" :default-value="1" :min="0">
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
</div>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|