feat:添加视频播放

src/views/warningHome/components/trackDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="showVideoDialog">
         <el-dialog v-model="centerDialogVisible" width="800" align-center modal-class="track-dialog">
             <template #header>
                 <div class="track-title">
@@ -12,6 +12,19 @@
             </div>
         </el-dialog>
     </div>
+    <div v-else>
+        <el-dialog v-model="centerDialogVisible" width="800" align-center modal-class="track-dialog">
+            <template #header>
+                <div class="track-title">
+                    <!-- <img class="track-icon" src="@/assets/images/warningHome/chat/track.png" alt="" /> -->
+                    视频
+                </div>
+            </template>
+            <div class="track">
+                <video class="track-img" src="https://birdseye-img-ali-cdn.sysuimars.com/bbs_post/video/1768189223030.mp4" controls></video>
+            </div>
+        </el-dialog>
+    </div>
 </template>
 
 <script setup>
@@ -36,14 +49,20 @@ const centerDialogVisible = ref(false);
 onMounted(() => {
     // ai与地图交互
     eventBus.on("chat:showTrackDialog", showTrackDialog)
+    eventBus.on("chat:showVideoDialog", showVideoDialogFn)
 })
 
+const showVideoDialog = ref(false)
 const urlIndex = ref(1)
 const showTrackDialog = (url) => {
-    console.log('url', url)
+    showVideoDialog.value = false
     urlIndex.value = url
     centerDialogVisible.value = true
 }
+
+const showVideoDialogFn = (url) => {
+    showVideoDialog.value = true
+}
 </script>
 
 <style lang="scss" scoped>

src/views/warningHome/index.vue

@@ -18,6 +18,7 @@
             <!-- 地图图例 -->
             <!-- <map-legend></map-legend> -->
             <land-use-legend @change="handleLegendChange"></land-use-legend>
+            <div class="show-point yes-events" v-show="showPoint" @click="handleShowPointClick"></div>
         </div>
     </div>
     <div ref="mapRef" class="bottom-map"></div>
@@ -70,12 +71,15 @@ const baseTabs = ["物候期分布", "长势等级", "水利", "灌渠与泵站"
 const activeBaseTab = ref("物候期分布");
 
 const warningLayers = ref({});
-
+const showPoint = ref(false)
 const handleBaseTabClick = (tab) => {
     activeBaseTab.value = tab;
+    showPoint.value = false
     staticMapPointLayers.hidePoint()
     if (tab === "资源") {
         staticMapPointLayers.showPoint()
+    }else if (tab === "灌渠与泵站") {
+        showPoint.value = true
     }
 };
 
@@ -83,6 +87,10 @@ const handleSmartFarmClick = () => {
     window.open("https://feiniao-pc-gly.feiniaotech.com/#/login");
 };
 
+const handleShowPointClick = () => {
+    eventBus.emit("chat:showTrackDialog")
+}
+
 onMounted(async () => {
     // 使用 nextTick 确保 DOM 已经渲染完成，地图容器有正确的尺寸
     await nextTick();
@@ -445,6 +453,16 @@ const handleLegendChange = (data) => {
         box-sizing: border-box;
         position: relative;
 
+        .show-point{
+            position: absolute;
+            top: calc(50% - 250px);
+            left: calc(50% - 250px);
+            width: 500px;
+            height: 500px;
+            // background: red;
+            z-index: 2;
+        }
+
         .left,
         .right {
             width: calc(376px + 54px);