历史沿革视频切换

src/views/history/index.vue

@@ -54,6 +54,8 @@
 <script setup>
 import { ref, computed } from "vue"
 
+const emit = defineEmits(["changeVideo"])
+
 const events = ref([
   {
     year: "1954",
@@ -105,6 +107,19 @@ const currentEvent = computed(() => events.value[selectedIndex.value])
 
 function selectEvent(index) {
   selectedIndex.value = index
+  if (index === 1) {
+    emit("changeVideo", "auto")
+  } else if (index === 2) {
+    emit("changeVideo", "water")
+  } else if (index === 3) {
+    emit("changeVideo", "3d")
+  } else if (index === 4) {
+    emit("changeVideo", "smart")
+  } else if (index === 5) {
+    emit("changeVideo", "wisdom")
+  } else {
+    emit("changeVideo", "manual")
+  }
 }
 </script>
 

src/views/map/index.vue

@@ -6,7 +6,10 @@
       <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
     </div>
     <div class="history-bg" v-show="state.activeIndex === '4'">
-      <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
+      <video v-if="!state.showHistoryImage" ref="historyVideoRef" class="history-bg-video" loop autoplay muted>
+        <source :src="state.historyVideoSrc" type="video/mp4">
+      </video>
+      <img v-else class="history-bg-image" :src="state.historyImageSrc" alt="历史背景" />
     </div>
     <!-- 视频背景 -->
     <div class="video-background" v-if="state.showVideoPlayer">
@@ -113,7 +116,7 @@
       <WaterStationContent v-if="state.activeIndex === '3'" />
 
       <!-- 历史沿革内容 -->
-      <HistoryContent v-if="state.activeIndex === '4'" />
+      <HistoryContent v-if="state.activeIndex === '4'" @changeVideo="handleVideoChange" />
       <!-- 左右装饰线 -->
       <div class="large-screen-left-zsline"></div>
       <div class="large-screen-right-zsline"></div>
@@ -165,6 +168,7 @@ import autofit from "autofit.js"
 
 const assets = shallowRef(null)
 const mapSceneRef = ref(null)
+const historyVideoRef = ref(null)
 
 // 提供资源给子组件
 provide("assets", assets)
@@ -176,6 +180,12 @@ const state = reactive({
   activeIndex: "1",
   // 是否显示视频播放器
   showVideoPlayer: false,
+  // 历史沿革视频源
+  historyVideoSrc: new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href,
+  // 历史沿革图片源
+  historyImageSrc: new URL("@/assets/video/昆山水务水文水质监测.png", import.meta.url).href,
+  // 是否显示历史沿革图片
+  showHistoryImage: false,
   // 卡片统计数据
   totalView: [
     {
@@ -324,6 +334,32 @@ function handleMenuSelect(index) {
     }
   })
 }
+
+function handleVideoChange(videoType) {
+  if (videoType === "water") {
+    state.showHistoryImage = true
+    state.historyImageSrc = new URL("@/assets/video/昆山水务水文水质监测.png", import.meta.url).href
+  } else {
+    state.showHistoryImage = false
+    if (videoType === "auto") {
+      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文自动化起步.mp4", import.meta.url).href
+    } else if (videoType === "3d") {
+      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文三维孪生半自动.mp4", import.meta.url).href
+    } else if (videoType === "smart") {
+      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文三维孪生智能.mp4", import.meta.url).href
+    } else if (videoType === "wisdom") {
+      state.historyVideoSrc = new URL("@/assets/video/智慧水务.mp4", import.meta.url).href
+    } else {
+      state.historyVideoSrc = new URL("@/assets/video/昆山水务水文人工.mp4", import.meta.url).href
+    }
+    nextTick(() => {
+      if (historyVideoRef.value) {
+        historyVideoRef.value.load()
+        historyVideoRef.value.play()
+      }
+    })
+  }
+}
 // 地图开始动画播放完成
 function handleMapPlayComplete() {
   let tl = gsap.timeline({ paused: false })
@@ -490,7 +526,7 @@ function handleMapPlayComplete() {
   right: 0;
   bottom: 0;
   background-color: #000;
-  img {
+  img, video {
     width: 100%;
     height: 100%;
     object-fit: cover;