From 293cc038aef227332161532621b97c987d1b1661 Mon Sep 17 00:00:00 2001
From: wangyawei <1796609990@qq.com>
Date: 星期五, 18 四月 2025 14:19:53 +0800
Subject: [PATCH] 接入视频流

---
 src/components/menu/TimeLine.vue |  137 +++++++++++++++++++++++++++++++--------------
 1 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index c18c8b1..4d0fb73 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -1,32 +1,21 @@
 <template>
   <div class="timeline-container">
     <div class="controls">
-    <!-- <div @click="endSimulate">缁撴潫妯℃嫙</div> -->
+      <!-- <div @click="endSimulate">缁撴潫妯℃嫙</div> -->
       <div class="control-btn" @click="skipBackward">
-        <img
-          src="@/assets/img/timeline/left.png"
-          class="fas fa-step-backward"
-        />
+        <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
       </div>
       <div class="control-btn play-btn" @click="togglePlay">
         <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
         <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
       </div>
       <div class="control-btn" @click="skipForward">
-        <img
-          src="@/assets/img/timeline/right.png"
-          class="fas fa-step-forward"
-        />
+        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
       </div>
       <div class="speed-control">
         <div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
         <div class="speed-menu" v-show="showSpeedMenu">
-          <div
-            v-for="rate in playbackRates"
-            :key="rate"
-            @click.capture="setPlaybackRate(rate)"
-            :class="{ active: playbackRate === rate }"
-          >
+          <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)" :class="{ active: playbackRate === rate }">
             {{ rate }}X
           </div>
         </div>
@@ -35,35 +24,24 @@
 
     <div class="timeline">
       <div class="dates">
-        <div
-          v-for="(date, index) in visibleDates"
-          :key="index"
-          class="date-label"
-        >
+        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
           {{ formatDate(date) }}
         </div>
       </div>
       <div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
-        <div
-          class="timeline-progress"
-          :style="{ width: progressPercentage + '%' }"
-        ></div>
-        <div
-          class="timeline-cursor"
-          :style="{ left: progressPercentage + '%' }"
-        ></div>
+        <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
+        <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
         <div class="time-markers">
 
-          <div
-            v-for="(time, index) in timeMarkers"
-            :key="index"
-            class="time-marker"
-          >
+          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
             {{ time }}
           </div>
         </div>
       </div>
     </div>
+    <video id="video" width="200px" height="200px" controls loop autoplay style="display: none;" crossorigin="anonymous">
+      <source src="/video/waters-1024.webm" type="video/webm" />
+    </video>
   </div>
 </template>
 
@@ -71,6 +49,7 @@
 import {
   ref,
   computed,
+  nextTick,
   onUnmounted,
   onMounted,
   watch,
@@ -118,6 +97,7 @@
   return dayjs(props.waterSimulateParams.date[1]);
 });
 let playInterval = null;
+let hlsEntity = null;
 
 // 璁$畻灞炴��
 const progressPercentage = computed(() => {
@@ -142,7 +122,37 @@
 const currentTimeFormatted = computed(() => {
   return formatTime(currentTime.value);
 });
+// 浣跨敤瑙嗛鍒涘缓Cesium瀹炰綋
+const createVideoEntity = () => {
+  // 鑾峰彇瑙嗛鍏冪礌
+  const videoElement = document.getElementById('video');
+  if (!videoElement) {
+    console.error("鏈壘鍒拌棰戝厓绱�");
+    return;
+  }
 
+  // 绉婚櫎鍙兘瀛樺湪鐨勬棫瀹炰綋
+  const existingEntity = window.earthCtrl.viewer.entities.getById('hls');
+  if (existingEntity) {
+    window.earthCtrl.viewer.entities.remove(existingEntity);
+  }
+
+  // 纭繚瑙嗛鍙
+  videoElement.style.display = 'block';
+
+  // 鍒涘缓鏂扮殑瑙嗛瀹炰綋
+  hlsEntity = window.earthCtrl.viewer.entities.add({
+    id: 'hls',
+    rectangle: {
+      coordinates: window.SmartEarth.Cesium.Rectangle.fromDegrees(
+        116.546665, 40.507452, 116.7757891, 40.6834562
+      ),
+      material: videoElement,
+      outline: true,
+      outlineColor: window.SmartEarth.Cesium.Color.BLACK,
+    },
+  });
+};
 const togglePlay = () => {
   // 濡傛灉褰撳墠鏄仠姝㈢姸鎬佷笖宸茬粡鎾斁瀹屾瘯锛岀偣鍑绘椂閲嶇疆鏃堕棿
   if (!isPlaying.value && currentTime.value >= duration.value) {
@@ -153,15 +163,43 @@
   isPlaying.value = !isPlaying.value;
   emit("isPlaying", isPlaying.value);
 
-  if (isPlaying.value) {
-    startPlayback();
-    // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
-    if (currentTime.value === 0) {
-      emit("playbackFinished", false);
+  // if (isPlaying.value) {
+  //   startPlayback();
+  //   // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
+  //   if (currentTime.value === 0) {
+  //     emit("playbackFinished", false);
+  //   }
+  // } else {
+  //   stopPlayback();
+  // }
+  // 鏂板浠g爜:鍔犺棰戞祦
+  nextTick(() => {
+    // 澶勭悊瑙嗛鎾斁
+    const videoElement = document.getElementById('video');
+    if (videoElement) {
+      if (isPlaying.value) {
+        // 纭繚宸插垱寤鸿棰戝疄浣�
+        createVideoEntity();
+        // 鎾斁瑙嗛
+        videoElement.play().catch(e => {
+          console.error("瑙嗛鎾斁澶辫触:", e);
+        });
+      } else {
+        // 鏆傚仠瑙嗛
+        videoElement.pause();
+      }
     }
-  } else {
-    stopPlayback();
-  }
+
+    if (isPlaying.value) {
+      startPlayback();
+      // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
+      if (currentTime.value === 0) {
+        emit("playbackFinished", false);
+      }
+    } else {
+      stopPlayback();
+    }
+  });
 };
 
 const startPlayback = () => {
@@ -179,7 +217,13 @@
       emit("isPlaying", isPlaying.value); // 閫氱煡鎾斁鐘舵�佸彉鍖�
       emit("playbackFinished", true); // 閫氱煡鎾斁瀹屾垚
       emit("timeUpdate", progressPercentage.value); // 鏇存柊杩涘害鏉′綅缃�
+      // 鎾斁缁撴潫鏃舵殏鍋滆棰�
+      const videoElement = document.getElementById('video');
+      if (videoElement) {
+        videoElement.pause();
+      }
     }
+    // 鏆傚仠瑙嗛
 
     emit("timeUpdate", progressPercentage.value);
   }, 1000);
@@ -209,6 +253,11 @@
   playbackRate.value = rate;
   showSpeedMenu.value = false;
 
+  // 鍚屾瑙嗛鎾斁閫熺巼
+  const videoElement = document.getElementById('video');
+  if (videoElement) {
+    videoElement.playbackRate = rate;
+  }
   if (isPlaying.value) {
     stopPlayback();
     startPlayback();
@@ -239,7 +288,7 @@
 };
 
 const rainFallData = ref([]);
-function getRainfallData() {
+function getRainfallData () {
   getRainfall().then((res) => {
     // rainFallData.value = res.data.map(item => {
     //   return dayjs(item.time).format("HH:mm")
@@ -254,7 +303,7 @@
 
 let mockTimer = null;
 let currentRainfall = ref(0.0001);
-function randomMockWater() {
+function randomMockWater () {
   let delay = (3 / playbackRate.value) * 1000;
   if (delay < 1000) {
     delay = 1000;
@@ -271,7 +320,7 @@
     if (rainfall && rainfall.total) {
       // console.log(rainfall.total);
 
-      createWaterPrimitive(rainfall.total / 50000);
+      //  createWaterPrimitive(rainfall.total / 50000);
     }
   }, delay);
 }

--
Gitblit v1.9.3