台风视频 周边视频

src/components/NearbyVideos/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show type="md" title="附近视频" draggable hide-footer @close="handleClose">
+  <Dialog custom-show type="md" :title="!!title ? title : '附近视频'" draggable hide-footer @close="handleClose">
     <div class="flex-box">
       <div>附近距离</div>
       <el-select v-model="queryParams.radius" class="custom-select" popper-class="custom-popper" :teleported="false" @change="initData">
@@ -31,6 +31,7 @@ interface Props {
   modelValue: boolean;
   location?: string | number[];
   getDataMethod?: Function;
+  title?: string;
 }
 const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['update:modelValue']);

src/types/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
@@ -37,22 +38,34 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -63,6 +76,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -102,4 +116,7 @@ declare module 'vue' {
     YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/globalMap/RightMenu/TyphoonVideo.vue

@@ -39,28 +39,23 @@
         <div class="td">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ parseTime(item.record_time) }}</div>
           <div class="td">{{ item.longitude }},{{ item.latitude }}</div>
           <div class="td">{{ item.record_address }}</div>
           <div class="td">
-            <div class="text" @click="handleConnect(index, item)">周边视频</div>
+            <div class="text" @click="handleConnect(item)">周边视频</div>
           </div>
         </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>
+    <NearbyVideos v-if="showDialog" v-model="showDialog" :location="location" title="周边视频" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import { getTyphoonList, getTyphoonTrajectory, getTyphoonYearList } from '@/api/globalMap/TyphoonVideo';
-
 const selectedYear = ref(''); // selectedYear 用于存储用户选择的年份
 const yearList = ref([]); // yearList 用于存储从 getTyphoonYearList 获取的年份列表
 const TyphoonList = ref([]);
@@ -71,10 +66,10 @@ const queryParams = reactive({
   year_n: ''
 });
 let showDialog = ref(false);
-let videoMonitorData = ref({});
-const handleConnect = (index: number, item: any) => {
-  videoMonitorData.value = item; // 将当前行数据赋值给videoMonitorData
-  showDialog.value = true; // 显示弹窗
+let location = ref([]);
+const handleConnect = (item: any) => {
+  location.value = [item.longitude, item.latitude];
+  showDialog.value = true;
 };
 // 调用函数
 onMounted(() => {
@@ -83,21 +78,11 @@ onMounted(() => {
 
 const handleYearChange = async () => {
   if (selectedYear.value) {
-    try {
-      const typhoons = await getTyphoonList({ query: { year_n: selectedYear.value } });
-      if (typhoons.code === 0) {
-        TyphoonList.value = typhoons.rows;
-        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 fetching typhoon list:', error);
+    const typhoons = await getTyphoonList({ query: { year_n: selectedYear.value } });
+    TyphoonList.value = typhoons.rows;
+    if (TyphoonList.value.length > 0) {
+      selectedTyphoon.value = TyphoonList.value[0].typhoon_name; // 默认选择第一个台风
+      initDataByTyphoon();
     }
   }
 };