112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<route lang="yaml">
|
|
meta:
|
|
title: 探空气球-重力波单次
|
|
description: 探空气球-重力波单次
|
|
group: 探空气球
|
|
item_name: 重力波单次
|
|
</route>
|
|
|
|
<script setup lang="ts">
|
|
import type { ImageResult } from '~/components/ImageContainer.vue'
|
|
import { API_BASE_URL } from '~/CONSTANT'
|
|
|
|
const modes = [
|
|
'观测的二阶多项式拟合',
|
|
'扰动分量的正弦波拟合',
|
|
'径向风-纬向风矢量图',
|
|
'温度-水平风矢量图',
|
|
] as const
|
|
|
|
const allPaths = ref([] as string[])
|
|
const selected = reactive({
|
|
selectedMode: '观测的二阶多项式拟合',
|
|
selectedPath: '',
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await baseFetch<string []>(`${API_BASE_URL}/balloon/metadata`).json().then(({ data }) => {
|
|
const das = data.value!
|
|
allPaths.value = das
|
|
})
|
|
})
|
|
|
|
function renderDate(str: string) {
|
|
const datePattern = /_\d{8}T\d{6}_/
|
|
const date = str.match(datePattern)![0]
|
|
const utcstr = date.replaceAll('_', '')
|
|
const realTime = new Date(utcstr.replace(/(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/, '$1-$2-$3T$4:$5:$6'))
|
|
return realTime.toLocaleString('zh', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: 'numeric',
|
|
second: 'numeric',
|
|
})
|
|
}
|
|
|
|
const queryUrl = computed(() => {
|
|
const selectedMode = selected.selectedMode
|
|
const selectedDate = selected.selectedPath
|
|
return `${API_BASE_URL}/balloon/render/single?mode=${encodeURIComponent(selectedMode)}&path=${encodeURIComponent(selectedDate)}`
|
|
})
|
|
|
|
async function customHandle(resp: Response) {
|
|
if (resp.status === 204) {
|
|
const res: ImageResult = {
|
|
message: '这一天没有数据',
|
|
result: 'error',
|
|
resourceId: '',
|
|
}
|
|
return res
|
|
}
|
|
|
|
if (resp.status === 200) {
|
|
const blob = await resp.blob()
|
|
const url = URL.createObjectURL(blob)
|
|
const res: ImageResult = {
|
|
message: '成功',
|
|
result: 'success',
|
|
resourceId: url,
|
|
}
|
|
return res
|
|
}
|
|
return {
|
|
message: '未知错误',
|
|
result: 'error',
|
|
resourceId: '',
|
|
} as ImageResult
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DenseFramework :image-query="queryUrl" :extra-response-handle="customHandle">
|
|
<Label>选择模式</Label>
|
|
<Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
|
|
<TabsList class="grid grid-cols-1 w-full">
|
|
<TabsTrigger v-for="m in modes" :key="m" :value="m">
|
|
{{ m }}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<Label>选择日期</Label>
|
|
<Select v-model="selected.selectedPath">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="选择日期" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>日期</SelectLabel>
|
|
<SelectItem v-for="path in allPaths" :key="path" :value="path">
|
|
{{ renderDate(path) }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</DenseFramework>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|