From de6a6ac0a5b482aa3f2d8edd621ea4667b2b5832 Mon Sep 17 00:00:00 2001
From: Dustella <fdnoaivj@outlook.com>
Date: Thu, 23 Jan 2025 22:57:15 +0800
Subject: [PATCH] feat: lat_range and date format

---
 src/pages/saber/day_cycle_power_wave_plot.vue | 43 ++++++++++++++-----
 src/pages/saber/day_fft_ifft_plot.vue         | 43 ++++++++++++++-----
 src/pages/saber/month_power_wave_plot.vue     | 37 +++++++++++-----
 src/pages/saber/plot_wave_fitting.vue         | 43 ++++++++++++++-----
 src/pages/saber/utils.ts                      | 31 ++++++++++++-
 5 files changed, 153 insertions(+), 44 deletions(-)

diff --git a/src/pages/saber/day_cycle_power_wave_plot.vue b/src/pages/saber/day_cycle_power_wave_plot.vue
index 8e5d4c1..bdca932 100644
--- a/src/pages/saber/day_cycle_power_wave_plot.vue
+++ b/src/pages/saber/day_cycle_power_wave_plot.vue
@@ -11,12 +11,22 @@
 
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'
-import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
+import { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths } from './utils'
+
+const lat_ranges = [
+  '0,10',
+  '10,20',
+  '20,30',
+  '30,40',
+  '40,50',
+  '50,60',
+]
 
 const selected = reactive({
   path: '',
   day: '',
   cycle_no: 1,
+  lat_range: '0,10',
 })
 
 const urll = computed(() => {
@@ -24,6 +34,7 @@ const urll = computed(() => {
   query.set('path', selected.path)
   query.set('day', selected.day)
   query.set('cycle_no', selected.cycle_no.toString())
+  query.set('lat_range', selected.lat_range)
   return `${API_BASE_URL}/saber/render/day_cycle_power_wave_plot?${query}`
 })
 
@@ -41,20 +52,26 @@ watch(() => selected.path, async () => {
     selected.day = currentSaberDays.value[0]
   }
 })
-
-function renderPath(path: string) {
-  const yearPattern = /\/data\/(\d{4})/
-  const year = path.match(yearPattern)?.[1]
-  const monthPattern = /Temp_O3_(.*)(\d{4})/
-  const month = path.match(monthPattern)?.[1]
-  return `${year}年${month}`
-}
 </script>
 
 <template>
   <DenseFramework :image-query="urll">
     <div>
       <div flex="~ col items-stretch gap-3" py-3>
+        <Label>纬度带</Label>
+        <Select v-model="selected.lat_range">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度带" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度带</SelectLabel>
+              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+                {{ lat_range.replace(",", " ~ ") }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
           <SelectTrigger>
@@ -63,7 +80,7 @@ function renderPath(path: string) {
           <SelectContent>
             <SelectGroup>
               <SelectLabel>月份</SelectLabel>
-              <SelectItem v-for="path in saberPaths" :key="path" :value="path">
+              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
                 {{ renderPath(path) }}
               </SelectItem>
             </SelectGroup>
@@ -78,7 +95,11 @@ function renderPath(path: string) {
             <SelectGroup>
               <SelectLabel>Day</SelectLabel>
               <SelectItem v-for="day in currentSaberDays" :key="day" :value="day">
-                {{ day }}
+                {{ parseDayOfYear (day.toString()).toLocaleDateString("zh", {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                }) }}
               </SelectItem>
             </SelectGroup>
           </SelectContent>
diff --git a/src/pages/saber/day_fft_ifft_plot.vue b/src/pages/saber/day_fft_ifft_plot.vue
index 336e4c9..18ea32f 100644
--- a/src/pages/saber/day_fft_ifft_plot.vue
+++ b/src/pages/saber/day_fft_ifft_plot.vue
@@ -11,14 +11,24 @@
 
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'
-import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
+import { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths } from './utils'
 
 const selected = reactive({
   path: './saber/data/2012/SABER_Temp_O3_April2012_v2.0.nc',
   day: '',
   cycle_no: 1,
+  lat_range: '0,10',
 })
 
+const lat_ranges = [
+  '0,10',
+  '10,20',
+  '20,30',
+  '30,40',
+  '40,50',
+  '50,60',
+]
+
 const urll = computed(() => {
   // const path = encodeURIComponent(selected.path)
   // const day = encodeURIComponent(selected.day)
@@ -27,6 +37,7 @@ const urll = computed(() => {
   query.set('path', selected.path)
   query.set('day', selected.day)
   query.set('cycle_no', selected.cycle_no.toString())
+  query.set('lat_range', selected.lat_range)
   return `${API_BASE_URL}/saber/render/day_fft_ifft_plot?${query}`
 })
 
@@ -38,20 +49,26 @@ onMounted(async () => {
 watch(() => selected.path, async () => {
   await refreshCurrentSaberDays(selected.path)
 })
-
-function renderPath(path: string) {
-  const yearPattern = /\/data\/(\d{4})/
-  const year = path.match(yearPattern)?.[1]
-  const monthPattern = /Temp_O3_(.*)(\d{4})/
-  const month = path.match(monthPattern)?.[1]
-  return `${year}年${month}`
-}
 </script>
 
 <template>
   <DenseFramework :image-query="urll">
     <div>
       <div flex="~ col items-stretch gap-3" py-3>
+        <Label>纬度带</Label>
+        <Select v-model:model-value="selected.lat_range">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度带" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度带</SelectLabel>
+              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+                {{ lat_range.replace(",", " ~ ") }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
           <SelectTrigger>
@@ -60,7 +77,7 @@ function renderPath(path: string) {
           <SelectContent>
             <SelectGroup>
               <SelectLabel>月份</SelectLabel>
-              <SelectItem v-for="path in saberPaths" :key="path" :value="path">
+              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
                 {{ renderPath(path) }}
               </SelectItem>
             </SelectGroup>
@@ -75,7 +92,11 @@ function renderPath(path: string) {
             <SelectGroup>
               <SelectLabel>Day</SelectLabel>
               <SelectItem v-for="day in currentSaberDays" :key="day" :value="day">
-                {{ day }}
+                {{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                }) }}
               </SelectItem>
             </SelectGroup>
           </SelectContent>
diff --git a/src/pages/saber/month_power_wave_plot.vue b/src/pages/saber/month_power_wave_plot.vue
index 0165a61..95af660 100644
--- a/src/pages/saber/month_power_wave_plot.vue
+++ b/src/pages/saber/month_power_wave_plot.vue
@@ -11,15 +11,26 @@
 
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'
-import { refreshPath, saberPaths } from './utils'
+import { refreshPath, renderPath, saberPaths } from './utils'
+
+const lat_ranges = [
+  '0,10',
+  '10,20',
+  '20,30',
+  '30,40',
+  '40,50',
+  '50,60',
+]
 
 const selected = reactive({
   path: '',
+  lat_range: '0,10',
 })
 
 const urll = computed(() => {
   const query = new URLSearchParams()
   query.set('path', selected.path)
+  query.set('lat_range', selected.lat_range)
   return `${API_BASE_URL}/saber/render/month_power_wave_plot?${query}`
 })
 
@@ -27,20 +38,26 @@ onMounted(async () => {
   await refreshPath()
   selected.path = saberPaths.value[0]
 })
-
-function renderPath(path: string) {
-  const yearPattern = /\/data\/(\d{4})/
-  const year = path.match(yearPattern)?.[1]
-  const monthPattern = /Temp_O3_(.*)(\d{4})/
-  const month = path.match(monthPattern)?.[1]
-  return `${year}年${month}`
-}
 </script>
 
 <template>
   <DenseFramework :image-query="urll">
     <div>
       <div flex="~ row items-center gap-3" py-3>
+        <Label>纬度带</Label>
+        <Select v-model="selected.lat_range">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度带" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度带</SelectLabel>
+              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+                {{ lat_range.replace(",", " ~ ") }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
           <SelectTrigger>
@@ -49,7 +66,7 @@ function renderPath(path: string) {
           <SelectContent>
             <SelectGroup>
               <SelectLabel>月份</SelectLabel>
-              <SelectItem v-for="path in saberPaths" :key="path" :value="path">
+              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
                 {{ renderPath(path) }}
               </SelectItem>
             </SelectGroup>
diff --git a/src/pages/saber/plot_wave_fitting.vue b/src/pages/saber/plot_wave_fitting.vue
index a3fb60e..0c0417d 100644
--- a/src/pages/saber/plot_wave_fitting.vue
+++ b/src/pages/saber/plot_wave_fitting.vue
@@ -11,12 +11,22 @@
 
 <script setup lang="ts">
 import { API_BASE_URL } from '~/CONSTANT'
-import { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths } from './utils'
+import { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths } from './utils'
+
+const lat_ranges = [
+  '0,10',
+  '10,20',
+  '20,30',
+  '30,40',
+  '40,50',
+  '50,60',
+]
 
 const selected = reactive({
   path: './saber/data\\2012\\SABER_Temp_O3_April2012_v2.0.nc',
   day: '',
   height_no: 1,
+  lat_ranges: '0,10',
 })
 
 const urll = computed(() => {
@@ -24,6 +34,7 @@ const urll = computed(() => {
   query.set('path', selected.path)
   query.set('day', selected.day)
   query.set('height_no', selected.height_no.toString())
+  query.set('lat_ranges', selected.lat_ranges)
   return `${API_BASE_URL}/saber/render/plot_wave_fitting?${query}`
 })
 
@@ -38,20 +49,26 @@ watch(() => selected.path, async () => {
     selected.path = saberPaths.value[0]
   }
 })
-
-function renderPath(path: string) {
-  const yearPattern = /\/data\/(\d{4})/
-  const year = path.match(yearPattern)?.[1]
-  const monthPattern = /Temp_O3_(.*)(\d{4})/
-  const month = path.match(monthPattern)?.[1]
-  return `${year}年${month}`
-}
 </script>
 
 <template>
   <DenseFramework :image-query="urll">
     <div>
       <div flex="~ col justify-stretch   gap-3" py-3>
+        <Label>纬度带</Label>
+        <Select v-model="selected.lat_ranges">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度带" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度带</SelectLabel>
+              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+                {{ lat_range.replace(",", " ~ ") }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
         <Label for="day">年月</Label>
         <Select v-model="selected.path">
           <SelectTrigger>
@@ -60,7 +77,7 @@ function renderPath(path: string) {
           <SelectContent>
             <SelectGroup>
               <SelectLabel>月份</SelectLabel>
-              <SelectItem v-for="path in saberPaths" :key="path" :value="path">
+              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
                 {{ renderPath(path) }}
               </SelectItem>
             </SelectGroup>
@@ -75,7 +92,11 @@ function renderPath(path: string) {
             <SelectGroup>
               <SelectLabel>Day</SelectLabel>
               <SelectItem v-for="day in currentSaberDays" :key="day" :value="day">
-                {{ day }}
+                {{ parseDayOfYear(day.toString()).toLocaleDateString("zh", {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                }) }}
               </SelectItem>
             </SelectGroup>
           </SelectContent>
diff --git a/src/pages/saber/utils.ts b/src/pages/saber/utils.ts
index 9a40997..1a80d0b 100644
--- a/src/pages/saber/utils.ts
+++ b/src/pages/saber/utils.ts
@@ -16,5 +16,34 @@ async function refreshCurrentSaberDays(path: string) {
   const data = resp.data.value
   currentSaberDays.value = data!
 }
+function renderPath(path: string) {
+  const yearPattern = /\/data\/(\d{4})/
+  const year = path.match(yearPattern)?.[1]
+  const monthPattern = /Temp_O3_(.*)(\d{4})/
+  const month_mapping = {
+    January: '01月',
+    February: '02月',
+    March: '03月',
+    April: '04月',
+    May: '05月',
+    June: '06月',
+    July: '07月',
+    August: '08月',
+    September: '09月',
+    October: '10月',
+    November: '11月',
+    December: '12月',
+  } as const
+  const month = path.match(monthPattern)?.[1] as keyof typeof month_mapping
+  return `${year}年${month_mapping[month]}`
+}
 
-export { currentSaberDays, refreshCurrentSaberDays, refreshPath, saberPaths }
+function parseDayOfYear(dateString: string): Date {
+  const year = Number.parseInt(dateString.substring(0, 4))
+  const dayOfYear = Number.parseInt(dateString.substring(4)) - 1 // subtract 1 because JS dates are 0-based
+  const date = new Date(year, 0) // Start with January 1st of the year
+  date.setDate(dayOfYear + 1) // Add the days
+  return date
+}
+
+export { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath, renderPath, saberPaths }