调试台风视频样式、调试台风视频下拉框筛选和新增台风视频弹窗

src/types/components.d.ts

@@ -97,7 +97,6 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
-    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
 }

src/views/globalMap/RightMenu/TyphoonVideo.vue

@@ -3,7 +3,7 @@
     <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="initData">
+        <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>
@@ -57,6 +57,11 @@
         </div>
       </div>
     </div>
+    <Dialog v-if="showDialog" v-model="showDialog" draggable type="md" title="台风视频" hide-footer>
+      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
+        <HKVideo :dot_data="videoMonitorData" />
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -73,51 +78,101 @@ const queryParams = reactive({
   typhoon_code: '',
   year_n: ''
 });
-
+let showDialog = ref(false);
+let videoMonitorData = ref({});
+const handleConnect = (index: number, item: any) => {
+  videoMonitorData.value = item; // 将当前行数据赋值给videoMonitorData
+  showDialog.value = true; // 显示弹窗
+};
 // 调用函数
 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;
-        selectedTyphoon.value = typhoons.rows[0]?.typhoon_name || '';
-        initDataByTyphoon();
-      } else {
-        console.error('Failed to fetch typhoon list:', typhoons);
+
+        // 获取该年份所有台风轨迹
+        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());
       }
     } catch (error) {
-      console.error('Error fetching typhoon list:', error);
+      console.error('Error handling year change:', error);
     }
   }
 };
 
 const handleTyphoonChange = async () => {
-  if (selectedTyphoon.value && selectedYear.value) {
-    initDataByTyphoon();
+  if (!selectedTyphoon.value) {
+    // 当清空台风名称选择时，重新加载全年数据
+    await handleYearChange();
+    return;
   }
-};
 
-const initDataByTyphoon = async () => {
+  // 原有的单个台风轨迹加载逻辑
   const typhoonCode = TyphoonList.value.find((t) => t.typhoon_name === selectedTyphoon.value)?.typhoon_code;
   if (typhoonCode) {
-    try {
-      const trajectory = await getTyphoonTrajectory({ query: { typhoon_code: typhoonCode } });
-      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);
+    const trajectory = await getTyphoonTrajectory({ query: { typhoon_code: typhoonCode } });
+    if (trajectory.code === 0) {
+      dataList.splice(0, dataList.length, ...trajectory.rows);
     }
-  } else {
-    console.error('No typhoon code found for selected typhoon name');
   }
 };
 
@@ -138,25 +193,15 @@ const initData = async () => {
   try {
     const years = await fetchData(getTyphoonYearList, {});
     yearList.value = years.map((item) => item.year_n);
-    const year = years[0]?.year_n;
-    if (year) {
-      const typhoons = await fetchData(getTyphoonList, { query: { year_n: year } });
-      TyphoonList.value = typhoons;
-      const typhoonCode = typhoons[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 year found in the list');
+
+    if (yearList.value.length > 0) {
+      selectedYear.value = yearList.value[0];
+      await handleSearch(); // 使用新的搜索处理逻辑
     }
   } catch (error) {
     console.error('Error initializing data:', error);
   }
 };
-
 const handleCancel = () => {
   queryParams.typhoon_code = '';
   queryParams.year_n = '';
@@ -271,5 +316,11 @@ const handleCancel = () => {
 
 .text {
   cursor: pointer;
+  font-size: 38px;
+  color: #00e8ff;
+  margin-right: 20px;
+  &:last-child {
+    margin-right: 0;
+  }
 }
 </style>