newui: saber
This commit is contained in:
parent
41a78347d1
commit
960db7dbb6
@ -19,8 +19,9 @@ defineProps<{
|
||||
</Badge>
|
||||
<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" />
|
||||
<span>正在加载图片</span>
|
||||
</div>
|
||||
<Image v-else-if="imageResult.result === 'success'" :image-url="imageResult.imageUrl" />
|
||||
<Image v-else-if="imageResult.result === 'success'" class="flex flex-1 items-center justify-center text-xl" :image-url="imageResult.imageUrl" />
|
||||
<div v-else class="flex flex-1 items-center justify-center text-xl">
|
||||
{{ imageResult.message }}
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
|
||||
const selectedMode = ref('潮汐波')
|
||||
@ -6,7 +7,12 @@ const selectedStation = ref('武汉左岭镇站')
|
||||
const selectedYear = ref('2017')
|
||||
const selectedWindType = ref('uwind')
|
||||
const selectedH = ref(90000)
|
||||
const imageUrl = ref('')
|
||||
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
imageUrl: '',
|
||||
message: '请你选择一个模式和日期',
|
||||
})
|
||||
|
||||
const modes = [
|
||||
'潮汐波',
|
||||
@ -35,7 +41,14 @@ const { onFetchResponse, isFetching } = 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 () => {
|
||||
@ -63,9 +76,9 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center">
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<div flex="~ col gap-3" py-3>
|
||||
<Select v-model="selectedMode">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
@ -107,19 +120,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>
|
||||
loading...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Denseframework>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
||||
|
||||
@ -8,7 +9,11 @@ const selected = reactive({
|
||||
cycle_no: 1,
|
||||
})
|
||||
|
||||
const imageUrl = ref('')
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
imageUrl: '',
|
||||
message: '请你选择一个模式和日期',
|
||||
})
|
||||
|
||||
const urll = computed(() => {
|
||||
const path = encodeURIComponent(selected.path)
|
||||
@ -21,10 +26,17 @@ const { onFetchResponse, isFetching } = useFetch(
|
||||
{ refetch: true },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
if (fetching) {
|
||||
imageResult.result = 'pending'
|
||||
}
|
||||
})
|
||||
|
||||
onFetchResponse(async (resp) => {
|
||||
const blob = await resp.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
imageUrl.value = url
|
||||
imageResult.result = 'success'
|
||||
imageResult.imageUrl = url
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -49,12 +61,12 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center" w-full>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
<Select v-model="selected.path">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -68,7 +80,7 @@ function renderPath(path: string) {
|
||||
</Select>
|
||||
<Label for="day">天数</Label>
|
||||
<Select id="day" v-model="selected.day">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -90,19 +102,7 @@ function renderPath(path: string) {
|
||||
</NumberField>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ selected.day }}
|
||||
{{ selected.path }}
|
||||
</div>
|
||||
<div w-full>
|
||||
<div v-if="!isFetching && imageUrl !== ''">
|
||||
<Image :image-url="imageUrl" />
|
||||
</div>
|
||||
<div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DenseFramework>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
||||
|
||||
@ -8,7 +9,11 @@ const selected = reactive({
|
||||
cycle_no: 1,
|
||||
})
|
||||
|
||||
const imageUrl = ref('')
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
imageUrl: '',
|
||||
message: '请你选择一个模式和日期',
|
||||
})
|
||||
|
||||
const urll = computed(() => {
|
||||
const path = encodeURIComponent(selected.path)
|
||||
@ -21,10 +26,17 @@ const { onFetchResponse, isFetching } = useFetch(
|
||||
{ refetch: true },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
if (fetching) {
|
||||
imageResult.result = 'pending'
|
||||
}
|
||||
})
|
||||
|
||||
onFetchResponse(async (resp) => {
|
||||
const blob = await resp.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
imageUrl.value = url
|
||||
imageResult.result = 'success'
|
||||
imageResult.imageUrl = url
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -49,12 +61,12 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center" w-full>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<div flex="~ col items-stretch gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
<Select v-model="selected.path">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -68,7 +80,7 @@ function renderPath(path: string) {
|
||||
</Select>
|
||||
<Label for="day">天数</Label>
|
||||
<Select id="day" v-model="selected.day">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -90,19 +102,7 @@ function renderPath(path: string) {
|
||||
</NumberField>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ selected.day }}
|
||||
{{ selected.path }}
|
||||
</div>
|
||||
<div w-full>
|
||||
<div v-if="!isFetching && imageUrl !== ''">
|
||||
<Image :image-url="imageUrl" />
|
||||
</div>
|
||||
<div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DenseFramework>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { refreshPath, saberPaths } from './utils'
|
||||
|
||||
@ -6,7 +7,11 @@ const selected = reactive({
|
||||
path: '',
|
||||
})
|
||||
|
||||
const imageUrl = ref('')
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
imageUrl: '',
|
||||
message: '请你选择一个模式和日期',
|
||||
})
|
||||
|
||||
const urll = computed(() => {
|
||||
const path = encodeURIComponent(selected.path)
|
||||
@ -18,10 +23,17 @@ const { onFetchResponse, isFetching } = useFetch(
|
||||
{ refetch: true },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
if (fetching) {
|
||||
imageResult.result = 'pending'
|
||||
}
|
||||
})
|
||||
|
||||
onFetchResponse(async (resp) => {
|
||||
const blob = await resp.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
imageUrl.value = url
|
||||
imageResult.result = 'success'
|
||||
imageResult.imageUrl = url
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -39,12 +51,12 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center" w-full>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
<Select v-model="selected.path">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -58,18 +70,7 @@ function renderPath(path: string) {
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ selected.path }}
|
||||
</div>
|
||||
<div w-full>
|
||||
<div v-if="!isFetching && imageUrl !== ''">
|
||||
<Image :image-url="imageUrl" />
|
||||
</div>
|
||||
<div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DenseFramework>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageResult } from '~/components/ImageContainer.vue'
|
||||
import { API_BASE_URL } from '~/CONSTANT'
|
||||
import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
|
||||
|
||||
@ -8,7 +9,11 @@ const selected = reactive({
|
||||
height_no: 1,
|
||||
})
|
||||
|
||||
const imageUrl = ref('')
|
||||
const imageResult = reactive<ImageResult>({
|
||||
result: 'idle',
|
||||
imageUrl: '',
|
||||
message: '请你选择一个模式和日期',
|
||||
})
|
||||
|
||||
const urll = computed(() => {
|
||||
const path = encodeURIComponent(selected.path)
|
||||
@ -21,10 +26,17 @@ const { onFetchResponse, isFetching } = useFetch(
|
||||
{ refetch: true },
|
||||
)
|
||||
|
||||
watch(isFetching, (fetching) => {
|
||||
if (fetching) {
|
||||
imageResult.result = 'pending'
|
||||
}
|
||||
})
|
||||
|
||||
onFetchResponse(async (resp) => {
|
||||
const blob = await resp.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
imageUrl.value = url
|
||||
imageResult.result = 'success'
|
||||
imageResult.imageUrl = url
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -49,12 +61,12 @@ function renderPath(path: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ col items-center" w-full>
|
||||
<DenseFramework :image-result="imageResult">
|
||||
<div>
|
||||
<div flex="~ row items-center gap-3" py-3>
|
||||
<div flex="~ col justify-stretch gap-3" py-3>
|
||||
<Label for="day">年月</Label>
|
||||
<Select v-model="selected.path">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -68,7 +80,7 @@ function renderPath(path: string) {
|
||||
</Select>
|
||||
<Label for="day">天数</Label>
|
||||
<Select id="day" v-model="selected.day">
|
||||
<SelectTrigger class="w-[180px]">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择日期" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -90,19 +102,7 @@ function renderPath(path: string) {
|
||||
</NumberField>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ selected.day }}
|
||||
{{ selected.path }}
|
||||
</div>
|
||||
<div w-full>
|
||||
<div v-if="!isFetching && imageUrl !== ''">
|
||||
<Image :image-url="imageUrl" />
|
||||
</div>
|
||||
<div v-else flex="~ col items-center justify-center" h-40 w-full text-xl>
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DenseFramework>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user