feat: fix heatmap
This commit is contained in:
parent
960db7dbb6
commit
148d73b945
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -165,6 +165,10 @@ declare module 'vue' {
|
||||
SidebarTrigger: typeof import('./src/components/ui/sidebar/SidebarTrigger.vue')['default']
|
||||
Skeleton: typeof import('./src/components/ui/skeleton/Skeleton.vue')['default']
|
||||
Switch: typeof import('./src/components/ui/switch/Switch.vue')['default']
|
||||
Tabs: typeof import('./src/components/ui/tabs/Tabs.vue')['default']
|
||||
TabsContent: typeof import('./src/components/ui/tabs/TabsContent.vue')['default']
|
||||
TabsList: typeof import('./src/components/ui/tabs/TabsList.vue')['default']
|
||||
TabsTrigger: typeof import('./src/components/ui/tabs/TabsTrigger.vue')['default']
|
||||
TestHeader: typeof import('./src/components/TestHeader.vue')['default']
|
||||
Textarea: typeof import('./src/components/ui/textarea/Textarea.vue')['default']
|
||||
TheFooter: typeof import('./src/components/TheFooter.vue')['default']
|
||||
|
||||
15
src/components/ui/tabs/Tabs.vue
Normal file
15
src/components/ui/tabs/Tabs.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
|
||||
import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<TabsRootProps>()
|
||||
const emits = defineEmits<TabsRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabsRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</TabsRoot>
|
||||
</template>
|
||||
22
src/components/ui/tabs/TabsContent.vue
Normal file
22
src/components/ui/tabs/TabsContent.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { TabsContent, type TabsContentProps } from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabsContent
|
||||
:class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<slot />
|
||||
</TabsContent>
|
||||
</template>
|
||||
25
src/components/ui/tabs/TabsList.vue
Normal file
25
src/components/ui/tabs/TabsList.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { TabsList, type TabsListProps } from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabsList
|
||||
v-bind="delegatedProps"
|
||||
:class="cn(
|
||||
'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<slot />
|
||||
</TabsList>
|
||||
</template>
|
||||
29
src/components/ui/tabs/TabsTrigger.vue
Normal file
29
src/components/ui/tabs/TabsTrigger.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwardedProps = useForwardProps(delegatedProps)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabsTrigger
|
||||
v-bind="forwardedProps"
|
||||
:class="cn(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<span class="truncate">
|
||||
<slot />
|
||||
</span>
|
||||
</TabsTrigger>
|
||||
</template>
|
||||
4
src/components/ui/tabs/index.ts
Normal file
4
src/components/ui/tabs/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export { default as Tabs } from './Tabs.vue'
|
||||
export { default as TabsContent } from './TabsContent.vue'
|
||||
export { default as TabsList } from './TabsList.vue'
|
||||
export { default as TabsTrigger } from './TabsTrigger.vue'
|
||||
3
src/composables/online.ts
Normal file
3
src/composables/online.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const hasConnection = ref(false)
|
||||
|
||||
// get `https://`
|
||||
@ -1,12 +1,27 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"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 selectedMode = ref('潮汐波')
|
||||
const selectedWave = ref('潮汐波')
|
||||
const selectedDateType = ref('day')
|
||||
const selectedStation = ref('武汉左岭镇站')
|
||||
const selectedYear = ref('2017')
|
||||
const selectedWindType = ref('uwind')
|
||||
const selectedH = ref(90000)
|
||||
const selectedDate = ref('20170316')
|
||||
const selectedMonth = ref('1')
|
||||
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
@ -15,7 +30,6 @@ const imageResult = reactive<ImageResult>({
|
||||
})
|
||||
|
||||
const modes = [
|
||||
'潮汐波',
|
||||
'2日行星波',
|
||||
'5日行星波',
|
||||
'10日行星波',
|
||||
@ -25,18 +39,35 @@ const modes = [
|
||||
const paths = ref([] as string[])
|
||||
const stations = ref<Set<string>>(new Set())
|
||||
const years = ref<Set<string>>(new Set())
|
||||
const dates = ref<Set<string>>(new Set())
|
||||
|
||||
const queryUrl = computed(() => {
|
||||
const station = encodeURIComponent(selectedStation.value)
|
||||
const station = selectedStation.value
|
||||
const year = encodeURIComponent(selectedYear.value)
|
||||
const mode = encodeURIComponent(selectedMode.value)
|
||||
const windType = encodeURIComponent(selectedWindType.value)
|
||||
const query = `?station=${station}&year=${year}&model_name=${mode}&wind_type=${windType}&H=${selectedH.value}`
|
||||
const path = `${API_BASE_URL}/radar/render/v1${query}`
|
||||
const mode = selectedWave.value === '潮汐波'
|
||||
? '潮汐波'
|
||||
: selectedMode.value
|
||||
const windType = selectedWindType.value
|
||||
|
||||
const query = new URLSearchParams()
|
||||
query.set('station', station)
|
||||
query.set('year', year)
|
||||
query.set('model_name', mode)
|
||||
query.set('wind_type', windType)
|
||||
query.set('H', selectedH.value.toString())
|
||||
if (selectedDateType.value === 'day') {
|
||||
const queryDay = `${selectedDate.value.slice(0, 4)}-${selectedDate.value.slice(4, 6)}-${selectedDate.value.slice(6, 8)}`
|
||||
query.set('day', queryDay)
|
||||
}
|
||||
else if (selectedDateType.value === 'month') {
|
||||
query.set('month', selectedMonth.value)
|
||||
}
|
||||
// const query = `?station=${station}&year=${year}&model_name=${mode}&wind_type=${windType}&H=${selectedH.value}`
|
||||
const path = `${API_BASE_URL}/radar/render/heatmap?${query}`
|
||||
return path
|
||||
})
|
||||
|
||||
const { onFetchResponse, isFetching } = useFetch(queryUrl, { refetch: true })
|
||||
const { onFetchResponse, isFetching, execute } = useFetch(queryUrl, { immediate: false })
|
||||
|
||||
onFetchResponse(async (resp) => {
|
||||
const blob = await resp.blob()
|
||||
@ -58,17 +89,21 @@ onMounted(async () => {
|
||||
// ./radar/data\\武汉左岭镇站\\2017\\ZLT_MET01_DLL_L21_01D_20170316.txt
|
||||
const station_pattern = /data\\(.*?)\\/
|
||||
const year_pattern = /(\d{4})\\ZLT_/
|
||||
const date_pattern = /01D_(\d{8})\.txt/
|
||||
const pairs = data.map((source_text: string) => {
|
||||
const station = source_text.match(station_pattern)?.[1]
|
||||
const year = source_text.match(year_pattern)?.[1]
|
||||
return { station, year }
|
||||
const date = source_text.match(date_pattern)?.[1]
|
||||
return { station, year, date }
|
||||
})
|
||||
pairs.forEach(({ station, year }: {
|
||||
pairs.forEach(({ station, year, date }: {
|
||||
station: string
|
||||
year: string
|
||||
date: string
|
||||
}) => {
|
||||
stations.value.add(station)
|
||||
years.value.add(year)
|
||||
dates.value.add(date)
|
||||
})
|
||||
|
||||
paths.value = data
|
||||
@ -76,24 +111,58 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<DenseFramework :image-result="imageResult" @submit="execute">
|
||||
<div>
|
||||
<div flex="~ col gap-3" py-3>
|
||||
<Select v-model="selectedMode">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>计算模式</SelectLabel>
|
||||
<SelectItem v-for="mode in modes" :key="mode" :value="mode">
|
||||
{{ mode }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label for="waves">波类型</Label>
|
||||
<Tabs id="waves" v-model="selectedWave" default-value="潮汐波">
|
||||
<TabsList class="grid grid-cols-2 w-full">
|
||||
<TabsTrigger value="潮汐波">
|
||||
潮汐波
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="行星波">
|
||||
行星波
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<div v-if="selectedWave === '行星波'">
|
||||
<Label>行星波类型</Label>
|
||||
<Tabs v-model="selectedMode" default-value="uwind">
|
||||
<TabsList class="grid grid-cols-4 w-full">
|
||||
<TabsTrigger v-for="m in modes" :key="m" :value="m">
|
||||
{{ m.replace("行星波", "") }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
<Label for="wind_type">风类型</Label>
|
||||
<Tabs id="wind_type" v-model="selectedWindType" default-value="uwind">
|
||||
<TabsList class="grid grid-cols-2 w-full">
|
||||
<TabsTrigger value="uwind">
|
||||
U风
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="vwind">
|
||||
V风
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Label for="H">日期类型</Label>
|
||||
<Tabs id="date_type" v-model="selectedDateType" default-value="day">
|
||||
<TabsList class="grid grid-cols-3 w-full">
|
||||
<TabsTrigger value="day">
|
||||
日
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="month">
|
||||
月
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="year">
|
||||
年
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Label>观测站</Label>
|
||||
<Select v-model="selectedStation">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -105,19 +174,73 @@ onMounted(async () => {
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label>高度</Label>
|
||||
<NumberField
|
||||
id="start"
|
||||
v-model:model-value="selectedH" :format-options="{
|
||||
useGrouping: false,
|
||||
}" :default-value="90000"
|
||||
>
|
||||
<NumberFieldContent>
|
||||
<NumberFieldDecrement />
|
||||
<NumberFieldInput />
|
||||
<NumberFieldIncrement />
|
||||
</NumberFieldContent>
|
||||
</NumberField>
|
||||
<Label>年份</Label>
|
||||
<Select v-model="selectedYear">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>天</SelectLabel>
|
||||
<SelectLabel>年</SelectLabel>
|
||||
<SelectItem v-for="year in years" :key="year" :value="year">
|
||||
{{ year }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div v-if="selectedDateType === 'day'">
|
||||
<Label>日期</Label>
|
||||
<Select v-model="selectedDate">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>天</SelectLabel>
|
||||
<SelectItem
|
||||
v-for="date in Array.from(dates).filter(
|
||||
(d) => d.startsWith(selectedYear),
|
||||
)" :key="date" :value="date"
|
||||
>
|
||||
{{ date }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div v-if="selectedDateType === 'month'">
|
||||
<Label>月份</Label>
|
||||
<Select v-model="selectedMonth">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>月</SelectLabel>
|
||||
<SelectItem
|
||||
v-for="month in [
|
||||
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
|
||||
]" :key="month" :value="month.toString()"
|
||||
>
|
||||
{{ month }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Denseframework>
|
||||
|
||||
@ -1,10 +1,26 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"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 selectedMode = ref('潮汐波')
|
||||
const selectedStation = ref('武汉左岭镇站')
|
||||
const selectedYear = ref('2017')
|
||||
const imageUrl = ref('')
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
imageUrl: '',
|
||||
message: '请你选择一个模式和日期',
|
||||
})
|
||||
|
||||
const modes = [
|
||||
'潮汐波',
|
||||
@ -27,12 +43,19 @@ const queryUrl = computed(() => {
|
||||
return path
|
||||
})
|
||||
|
||||
const { onFetchResponse, isFetching } = useFetch(queryUrl, { refetch: true })
|
||||
const { onFetchResponse, isFetching, execute } = useFetch(queryUrl, { refetch: true })
|
||||
|
||||
onFetchResponse(async (resp) => {
|
||||
const blob = await resp.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
imageUrl.value = url
|
||||
imageResult.result = 'success'
|
||||
imageResult.imageUrl = url
|
||||
})
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
if (fetching) {
|
||||
imageResult.result = 'pending'
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
@ -60,11 +83,11 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center">
|
||||
<DenseFramework :image-result="imageResult" @submit="execute">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<Select v-model="selectedMode">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -77,7 +100,7 @@ onMounted(async () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select v-model="selectedStation">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -90,7 +113,7 @@ onMounted(async () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select v-model="selectedYear">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -104,22 +127,7 @@ onMounted(async () => {
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ selectedMode }}
|
||||
{{ selectedYear }}
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="!isFetching && imageUrl !== ''">
|
||||
<Image :image-url="imageUrl" />
|
||||
</div>
|
||||
<div v-else h-40 flex="~ col items-center justify-center" text-xl>
|
||||
警告：由于计算一年的数据，需要等待大约1分钟出图<br>
|
||||
请勿刷新页面或者离开当前页面、改动参数<br>
|
||||
否则需要重新等待 3 分钟
|
||||
loading...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DenseFramework>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"meta":{
|
||||
"title":"Saber日周期功率波图",
|
||||
"description":"Saber日周期功率波图",
|
||||
"group":"Saber",
|
||||
"item_name":"日周期功率波图"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
@ -21,9 +32,9 @@ const urll = computed(() => {
|
||||
const query = `path=${path}&day=${day}&cycle_no=${selected.cycle_no}`
|
||||
return `${API_BASE_URL}/saber/render/day_cycle_power_wave_plot?${query}`
|
||||
})
|
||||
const { onFetchResponse, isFetching } = useFetch(
|
||||
const { onFetchResponse, isFetching, execute } = useFetch(
|
||||
urll,
|
||||
{ refetch: true },
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
@ -61,7 +72,7 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<DenseFramework :image-result="imageResult" @submit="execute">
|
||||
<div>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"title": "Saber日周期功率波图",
|
||||
"description": "Saber日周期功率波图",
|
||||
"group": "Saber",
|
||||
"item_name": "日周期功率波图"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
@ -21,9 +32,9 @@ const urll = computed(() => {
|
||||
const query = `path=${path}&day=${day}&cycle_no=${selected.cycle_no}`
|
||||
return `${API_BASE_URL}/saber/render/day_fft_ifft_plot?${query}`
|
||||
})
|
||||
const { onFetchResponse, isFetching } = useFetch(
|
||||
const { onFetchResponse, isFetching, execute } = useFetch(
|
||||
urll,
|
||||
{ refetch: true },
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
@ -61,7 +72,7 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<DenseFramework :image-result="imageResult" @submit="execute">
|
||||
<div>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"title": "Saber月周期功率波图",
|
||||
"description": "Saber月周期功率波图",
|
||||
"group": "Saber",
|
||||
"item_name": "月周期功率波图"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
@ -18,9 +29,9 @@ const urll = computed(() => {
|
||||
const query = `path=${path}`
|
||||
return `${API_BASE_URL}/saber/render/month_power_wave_plot?${query}`
|
||||
})
|
||||
const { onFetchResponse, isFetching } = useFetch(
|
||||
const { onFetchResponse, execute, isFetching } = useFetch(
|
||||
urll,
|
||||
{ refetch: true },
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
@ -51,7 +62,7 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<DenseFramework :image-result="imageResult" @submit="execute">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"title": "Saber拟合",
|
||||
"description": "Saber拟合",
|
||||
"group": "Saber",
|
||||
"item_name": "拟合"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
@ -21,9 +32,9 @@ const urll = computed(() => {
|
||||
const query = `path=${path}&day=${day}&height=${selected.height_no}`
|
||||
return `${API_BASE_URL}/saber/render/plot_wave_fitting?${query}`
|
||||
})
|
||||
const { onFetchResponse, isFetching } = useFetch(
|
||||
const { onFetchResponse, execute, isFetching } = useFetch(
|
||||
urll,
|
||||
{ refetch: true },
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
@ -61,7 +72,7 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<DenseFramework :image-result="imageResult" @submit="execute">
|
||||
<div>
|
||||
<div flex="~ col justify-stretch gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user