feat: fix heatmap

components.d.ts

@@ -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']

src/components/ui/tabs/Tabs.vue

@@ -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>

src/components/ui/tabs/TabsContent.vue

@@ -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>

src/components/ui/tabs/TabsList.vue

@@ -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>

src/components/ui/tabs/TabsTrigger.vue

@@ -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>

src/components/ui/tabs/index.ts

@@ -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'

src/composables/online.ts

@@ -0,0 +1,3 @@
+export const hasConnection = ref(false)
+
+// get `https://`

src/pages/radar/v1.vue

@@ -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 mode = selectedWave.value === '潮汐波'
-  const windType = encodeURIComponent(selectedWindType.value)
+    ? '潮汐波'
-  const query = `?station=${station}&year=${year}&model_name=${mode}&wind_type=${windType}&H=${selectedH.value}`
+    : selectedMode.value
-  const path = `${API_BASE_URL}/radar/render/v1${query}`
+  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">
+        <Label for="waves">波类型</Label>
-          <SelectTrigger class="w-[180px]">
+        <Tabs id="waves" v-model="selectedWave" default-value="潮汐波">
-            <SelectValue placeholder="Select a fruit" />
+          <TabsList class="grid grid-cols-2 w-full">
-          </SelectTrigger>
+            <TabsTrigger value="潮汐波">
-          <SelectContent>
+              潮汐波
-            <SelectGroup>
+            </TabsTrigger>
-              <SelectLabel>计算模式</SelectLabel>
+            <TabsTrigger value="行星波">
-              <SelectItem v-for="mode in modes" :key="mode" :value="mode">
+              行星波
-                {{ mode }}
+            </TabsTrigger>
-              </SelectItem>
+          </TabsList>
-            </SelectGroup>
+        </Tabs>
-          </SelectContent>
+        <div v-if="selectedWave === '行星波'">
-        </Select>
+          <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>

src/pages/radar/v2.vue

@@ -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>
+  </DenseFramework>
-      {{ 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>
 </template>
 
 <style lang="scss" scoped>

src/pages/saber/day_cycle_power_wave_plot.vue

@@ -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>

src/pages/saber/day_fft_ifft_plot.vue

@@ -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>

src/pages/saber/month_power_wave_plot.vue

@@ -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>

src/pages/saber/plot_wave_fitting.vue

@@ -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>