重新调整台风视频样式

src/views/globalMap/RightMenu/TyphoonVideo.vue

@@ -2,14 +2,6 @@
   <div class="menu-content">
     <div class="container">
       <div class="gradient-text title">台风视频</div>
-      <div class="box-left">
-        <el-input v-model="queryParams.typhoon_code" class="custom-input" placeholder="搜索" @input="handleSearch">
-          <template #prefix>
-            <el-icon class="el-input__icon"><search /></el-icon>
-          </template>
-        </el-input>
-        <div class="btn" @click="handleCancel">取消</div>
-      </div>
     </div>
     <!--    <div class="section-box">-->
     <div class="title2">路径列表</div>
@@ -88,94 +80,52 @@ const handleConnect = (index: number, item: any) => {
 onMounted(() => {
   initData();
 });
-const handleSearch = async () => {
-  // 清空当前数据列表
-  dataList.splice(0, dataList.length);
-
-  if (selectedYear.value) {
-    // 如果选择了年份，则根据年份和台风名称查询
-    const typhoons = await getTyphoonList({ query: { year_n: selectedYear.value, typhoon_name_like: queryParams.typhoon_code } });
-    if (typhoons.code === 0 && Array.isArray(typhoons.rows)) {
-      TyphoonList.value = typhoons.rows;
-
-      // 获取匹配的台风轨迹
-      const matchedTrajectories = await Promise.all(
-        typhoons.rows.map(async (t) => {
-          const res = await getTyphoonTrajectory({ query: { typhoon_code: t.typhoon_code } });
-          return res.code === 0 ? res.rows : [];
-        })
-      );
-
-      dataList.push(...matchedTrajectories.flat());
-    }
-  } else {
-    // 如果没有选择年份，则只根据台风名称查询所有年份的数据
-    const allYears = await getTyphoonYearList({});
-    if (allYears.code === 0 && Array.isArray(allYears.rows)) {
-      const allTyphoons = await Promise.all(
-        allYears.rows.map(async (year) => {
-          const typhoons = await getTyphoonList({ query: { year_n: year.year_n, typhoon_name_like: queryParams.typhoon_code } });
-          return typhoons.code === 0 ? typhoons.rows : [];
-        })
-      );
 
-      const flattenedTyphoons = allTyphoons.flat();
-      const uniqueTyphoons = [...new Set(flattenedTyphoons.map(t => t.typhoon_code))].map(tc => flattenedTyphoons.find(t => t.typhoon_code === tc));
-
-      // 获取所有匹配的台风轨迹
-      const allTrajectories = await Promise.all(
-        uniqueTyphoons.map(async (t) => {
-          const res = await getTyphoonTrajectory({ query: { typhoon_code: t.typhoon_code } });
-          return res.code === 0 ? res.rows : [];
-        })
-      );
-
-      dataList.push(...allTrajectories.flat());
-    }
-  }
-};
 const handleYearChange = async () => {
   if (selectedYear.value) {
     try {
-      selectedTyphoon.value = ''; // 清空台风名称选择
       const typhoons = await getTyphoonList({ query: { year_n: selectedYear.value } });
-
       if (typhoons.code === 0) {
         TyphoonList.value = typhoons.rows;
-
-        // 获取该年份所有台风轨迹
-        const allTrajectory = await Promise.all(
-          typhoons.rows.map(async (t) => {
-            const res = await getTyphoonTrajectory({ query: { typhoon_code: t.typhoon_code } });
-            return res.code === 0 ? res.rows : [];
-          })
-        );
-
-        dataList.splice(0, dataList.length, ...allTrajectory.flat());
+        if (TyphoonList.value.length > 0) {
+          selectedTyphoon.value = TyphoonList.value[0].typhoon_name; // 默认选择第一个台风
+          initDataByTyphoon();
+        } else {
+          console.error('No typhoons found for the selected year');
+        }
+      } else {
+        console.error('Failed to fetch typhoon list:', typhoons);
       }
     } catch (error) {
-      console.error('Error handling year change:', error);
+      console.error('Error fetching typhoon list:', error);
     }
   }
 };
-
 const handleTyphoonChange = async () => {
-  if (!selectedTyphoon.value) {
-    // 当清空台风名称选择时，重新加载全年数据
-    await handleYearChange();
-    return;
+  if (selectedTyphoon.value && selectedYear.value) {
+    initDataByTyphoon();
   }
-
-  // 原有的单个台风轨迹加载逻辑
-  const typhoonCode = TyphoonList.value.find((t) => t.typhoon_name === selectedTyphoon.value)?.typhoon_code;
-  if (typhoonCode) {
-    const trajectory = await getTyphoonTrajectory({ query: { typhoon_code: typhoonCode } });
-    if (trajectory.code === 0) {
-      dataList.splice(0, dataList.length, ...trajectory.rows);
+};
+const initDataByTyphoon = async () => {
+  const typhoon = TyphoonList.value.find((t) => t.typhoon_name === selectedTyphoon.value);
+  if (typhoon && typhoon.typhoon_code) {
+    try {
+      const trajectory = await getTyphoonTrajectory({ query: { typhoon_code: typhoon.typhoon_code } });
+      if (trajectory.code === 0 && Array.isArray(trajectory.rows)) {
+        dataList.splice(0, dataList.length, ...trajectory.rows);
+      } else {
+        console.error('Invalid response from server:', trajectory);
+        dataList.splice(0, dataList.length); // 清空数据列表
+      }
+    } catch (error) {
+      console.error('Error fetching typhoon trajectory:', error);
     }
+  } else {
+    console.error('No typhoon code found for selected typhoon name');
   }
 };
 
+
 const fetchData = async (apiFunction, params) => {
   try {
     const response = await apiFunction(params);
@@ -192,22 +142,33 @@ const fetchData = async (apiFunction, params) => {
 const initData = async () => {
   try {
     const years = await fetchData(getTyphoonYearList, {});
-    yearList.value = years.map((item) => item.year_n);
-
-    if (yearList.value.length > 0) {
-      selectedYear.value = yearList.value[0];
-      await handleSearch(); // 使用新的搜索处理逻辑
+    // 对获取到的年份进行降序排序，并选取第一个（即最新年份）
+    yearList.value = years.map((item) => item.year_n).sort((a, b) => b - a);
+    const latestYear = yearList.value[0]; // 获取最新年份
+    if (latestYear) {
+      selectedYear.value = latestYear; // 设置最新年份为默认选中值
+      const typhoons = await fetchData(getTyphoonList, { query: { year_n: latestYear } });
+      TyphoonList.value = typhoons;
+      if (TyphoonList.value.length > 0) {
+        selectedTyphoon.value = TyphoonList.value[0].typhoon_name; // 默认选择第一个台风
+        const typhoonCode = TyphoonList.value[0].typhoon_code;
+        if (typhoonCode) {
+          const trajectory = await fetchData(getTyphoonTrajectory, { query: { typhoon_code: typhoonCode } });
+          dataList.splice(0, dataList.length, ...trajectory);
+        } else {
+          console.error('No typhoon code found in the list');
+        }
+      } else {
+        console.error('No typhoons found for the selected year');
+      }
+    } else {
+      console.error('No year found in the list');
     }
   } catch (error) {
     console.error('Error initializing data:', error);
   }
 };
-const handleCancel = () => {
-  queryParams.typhoon_code = '';
-  selectedTyphoon.value = '';
-  selectedYear.value = '';
-  initData();
-};
+
 </script>
 
 <style lang="scss" scoped>