zephyr-frontend/src/pages/radar/v2.vue

<!-- <route lang="json">
{
  "meta": {
    "title": "流星雷达-潮汐波时空变化",
    "description": "流星雷达-潮汐波时空变化",
    "group": "流星雷达",
    "item_name": "潮汐波时空变化"
  }
}
</route> -->

<script setup lang="ts">
import { API_BASE_URL } from '~/CONSTANT'

const selectedMode = ref('2日行星波')
const selectedWave = ref('潮汐波')
const selectedStation = ref('武汉左岭镇站')
const selectedYear = ref('2017')
const selectedMonthRange = reactive({ start: '1', end: '12' })

const modes = [
  '2日行星波',
  '5日行星波',
  '10日行星波',
  '16日行星波',
]

const paths = ref([] as string[])
const stations = ref<Set<string>>(new Set())
const years = ref<Set<string>>(new Set())

const queryUrl = computed(() => {
  // const query = `?station=${station}&year=${year}&model_name=${mode}`
  const query = new URLSearchParams()
  query.set('station', selectedStation.value)
  query.set('year', selectedYear.value)
  query.set('model_name', selectedWave.value === '潮汐波' ? '潮汐波' : selectedMode.value)
  query.set('start_month', selectedMonthRange.start)
  query.set('end_month', selectedMonthRange.end)
  const path = `${API_BASE_URL}/radar/render/changes?${query}`
  return path
})

onMounted(async () => {
  const resp = await baseFetch(`${API_BASE_URL}/radar/metadata`).json()
  const data = await resp.data.value!
  // use regex to extract the year from the path,
  // ./radar/data\\武汉左岭镇站\\2017\\ZLT_MET01_DLL_L21_01D_20170316.txt
  const station_pattern = /data\/(.*?)\//
  const year_pattern = /(\d{4})\/ZLT_/
  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 }
  })
  pairs.forEach(({ station, year }: {
    station: string
    year: string
  }) => {
    stations.value.add(station)
    years.value.add(year)
  })

  paths.value = data
})
</script>

<template>
  <DenseFramework :image-query="queryUrl">
    <div>
      <div flex="~ col items-stretch gap-3" py-3>
        <Label>计算模式</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>观测站</Label>
        <Select v-model="selectedStation">
          <SelectTrigger>
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>观测站</SelectLabel>
              <SelectItem v-for="station in stations" :key="station" :value="station">
                {{ station }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label>年份</Label>
        <Select v-model="selectedYear">
          <SelectTrigger>
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>年</SelectLabel>
              <SelectItem v-for="year in years" :key="year" :value="year">
                {{ year }}
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Label>起始月份</Label>
        <Select v-model="selectedMonthRange.start">
          <SelectTrigger>
            <SelectValue placeholder="选择起始月" />
          </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>
        <Label>终止月份</Label>
        <Select v-model="selectedMonthRange.end">
          <SelectTrigger>
            <SelectValue placeholder="选择终止月" />
          </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>
  </DenseFramework>
</template>

<style lang="scss" scoped>

</style>