can show is terrain wave
This commit is contained in:
parent
044a4b56e2
commit
2f77ce8500
@ -86,7 +86,9 @@ function download() {
|
|||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
<ResizableHandle id="demo-handle-1" />
|
<ResizableHandle id="demo-handle-1" />
|
||||||
<ResizablePanel id="demo-panel-2" :default-size="500">
|
<ResizablePanel id="demo-panel-2" :default-size="500">
|
||||||
<ImageContainer :image-result="imageResult" />
|
<ImageContainer v-slot="metadata" :image-result="imageResult">
|
||||||
|
<slot name="extra-meta" :metadata="metadata.metadata" />
|
||||||
|
</ImageContainer>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,6 +5,7 @@ export interface ImageResult {
|
|||||||
result: 'success' | 'error' | 'pending' | 'idle'
|
result: 'success' | 'error' | 'pending' | 'idle'
|
||||||
resourceId: string
|
resourceId: string
|
||||||
message?: string
|
message?: string
|
||||||
|
extraMetadata?: Record<string, any>
|
||||||
}
|
}
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
@ -17,6 +18,7 @@ defineProps<{
|
|||||||
<Badge variant="outline" class="absolute left-3 top-3">
|
<Badge variant="outline" class="absolute left-3 top-3">
|
||||||
图片输出
|
图片输出
|
||||||
</Badge>
|
</Badge>
|
||||||
|
<slot :metadata="imageResult.extraMetadata" />
|
||||||
<div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
|
<div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
|
||||||
<Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
|
<Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
|
||||||
<span>正在加载图片</span>
|
<span>正在加载图片</span>
|
||||||
|
|||||||
@ -48,7 +48,7 @@ const queryUrl = computed(() => {
|
|||||||
const queryDay = `${selectedDate.value.slice(0, 4)}-${selectedDate.value.slice(4, 6)}-${selectedDate.value.slice(6, 8)}`
|
const queryDay = `${selectedDate.value.slice(0, 4)}-${selectedDate.value.slice(4, 6)}-${selectedDate.value.slice(6, 8)}`
|
||||||
query.set('day', queryDay)
|
query.set('day', queryDay)
|
||||||
}
|
}
|
||||||
else if (selectedDateType.value === 'month') {
|
if (selectedDateType.value === 'month') {
|
||||||
query.set('month', selectedMonth.value)
|
query.set('month', selectedMonth.value)
|
||||||
}
|
}
|
||||||
// const query = `?station=${station}&year=${year}&model_name=${mode}&wind_type=${windType}&H=${selectedH.value}`
|
// const query = `?station=${station}&year=${year}&model_name=${mode}&wind_type=${windType}&H=${selectedH.value}`
|
||||||
@ -65,7 +65,7 @@ onMounted(async () => {
|
|||||||
const data = await resp.data.value
|
const data = await resp.data.value
|
||||||
// use regex to extract the year from the path,
|
// use regex to extract the year from the path,
|
||||||
// ./radar/data\\武汉左岭镇站\\2017\\ZLT_MET01_DLL_L21_01D_20170316.txt
|
// ./radar/data\\武汉左岭镇站\\2017\\ZLT_MET01_DLL_L21_01D_20170316.txt
|
||||||
const station_pattern = /data\/(.*?)\//
|
const station_pattern = /data\/radar\/(.*?)\//
|
||||||
const year_pattern = /(\d{4})\/ZLT_/
|
const year_pattern = /(\d{4})\/ZLT_/
|
||||||
const date_pattern = /01D_(\d{8})\.txt/
|
const date_pattern = /01D_(\d{8})\.txt/
|
||||||
const pairs = data.map((source_text: string) => {
|
const pairs = data.map((source_text: string) => {
|
||||||
|
|||||||
@ -17,7 +17,7 @@ async function refreshCurrentSaberDays(path: string) {
|
|||||||
currentSaberDays.value = data!
|
currentSaberDays.value = data!
|
||||||
}
|
}
|
||||||
function renderPath(path: string) {
|
function renderPath(path: string) {
|
||||||
const yearPattern = /\/data\/(\d{4})/
|
const yearPattern = /\/data\/saber\/(\d{4})/
|
||||||
const year = path.match(yearPattern)?.[1]
|
const year = path.match(yearPattern)?.[1]
|
||||||
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
const monthPattern = /Temp_O3_(.*)(\d{4})/
|
||||||
const month_mapping = {
|
const month_mapping = {
|
||||||
|
|||||||
@ -53,6 +53,8 @@ const queryUrl = computed(() => {
|
|||||||
return `${API_BASE_URL}/balloon/render/single?mode=${encodeURIComponent(selectedMode)}&path=${encodeURIComponent(selectedDate)}`
|
return `${API_BASE_URL}/balloon/render/single?mode=${encodeURIComponent(selectedMode)}&path=${encodeURIComponent(selectedDate)}`
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const metadata = ref({} as Record<string, string>)
|
||||||
|
|
||||||
async function customHandle(resp: Response) {
|
async function customHandle(resp: Response) {
|
||||||
if (resp.status === 204) {
|
if (resp.status === 204) {
|
||||||
const res: ImageResult = {
|
const res: ImageResult = {
|
||||||
@ -60,12 +62,15 @@ async function customHandle(resp: Response) {
|
|||||||
result: 'error',
|
result: 'error',
|
||||||
resourceId: '',
|
resourceId: '',
|
||||||
}
|
}
|
||||||
|
metadata.value = {}
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
const blob = await resp.blob()
|
const data = await resp.json()
|
||||||
|
const blob = await fetch(`data:image/png;base64,${data.image}`).then(r => r.blob())
|
||||||
const url = URL.createObjectURL(blob)
|
const url = URL.createObjectURL(blob)
|
||||||
|
metadata.value = data.metadata
|
||||||
const res: ImageResult = {
|
const res: ImageResult = {
|
||||||
message: '成功',
|
message: '成功',
|
||||||
result: 'success',
|
result: 'success',
|
||||||
@ -83,6 +88,11 @@ async function customHandle(resp: Response) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<DenseFramework :image-query="queryUrl" :extra-response-handle="customHandle">
|
<DenseFramework :image-query="queryUrl" :extra-response-handle="customHandle">
|
||||||
|
<template #extra-meta>
|
||||||
|
<div v-if="Object.keys(metadata).length === 0" class="absolute right-3 top-3 rounded-md bg-white p-3 drop-shadow">
|
||||||
|
<span v-for="(v, k) in metadata" :key="k">{{ k }}: {{ v }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<Label>选择模式</Label>
|
<Label>选择模式</Label>
|
||||||
<Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
|
<Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
|
||||||
<TabsList class="grid grid-cols-1 w-full">
|
<TabsList class="grid grid-cols-1 w-full">
|
||||||
|
|||||||
@ -29,7 +29,7 @@ const queryUrl = computed(() => {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const resp = await baseFetch(`/tidi/metadata`).json()
|
const resp = await baseFetch(`/tidi/metadata`).json()
|
||||||
allYears.value = Array.from(new Set(resp.data.value.path.map((a: string) => {
|
allYears.value = Array.from(new Set(resp.data.value.path.map((a: string) => {
|
||||||
const year_pattern = /data\/(\d{4})\//
|
const year_pattern = /data\/tidi\/(\d{4})\//
|
||||||
return a.match(year_pattern)?.[1]
|
return a.match(year_pattern)?.[1]
|
||||||
})))
|
})))
|
||||||
})
|
})
|
||||||
|
|||||||
@ -34,7 +34,7 @@ const queryUrl = computed(() => {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const metas = await baseFetch<{ path: string [] }>(`${API_BASE_URL}/tidi/metadata`).json()
|
const metas = await baseFetch<{ path: string [] }>(`${API_BASE_URL}/tidi/metadata`).json()
|
||||||
const _years = metas.data.value.path.map((a: string) => {
|
const _years = metas.data.value.path.map((a: string) => {
|
||||||
const year_pattern = /data\/(\d{4})\//
|
const year_pattern = /data\/tidi\/(\d{4})\//
|
||||||
return a.match(year_pattern)?.[1]
|
return a.match(year_pattern)?.[1]
|
||||||
})
|
})
|
||||||
_years.sort()
|
_years.sort()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user