From 9567f017a3423bafafaf5f22ec1e5541d2b0f4bd Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 28 四月 2025 16:24:15 +0800
Subject: [PATCH] change
---
src/components/menu/TimeLine.vue | 131 ++++++++++++++++++++++++++++++++++---------
1 files changed, 104 insertions(+), 27 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 438e694..53d0823 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -82,7 +82,13 @@
inject,
} from "vue";
import dayjs from "dayjs";
-import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
+import {
+ createWaterPrimitive,
+ destoryWaterPrimitive,
+ pauseWaterSimulation,
+ resumeWaterSimulation,
+ setTimeForWaterSimulation,
+} from "@/utils/water";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
@@ -105,13 +111,14 @@
const playbackFinished = ref(true);
const currentTime = ref(0);
const duration = ref(60); // 涓�澶╃殑绉掓暟
-const playbackRate = ref(8);
+const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
const waterTimestamps = ref([]); // 瀛樺偍鏃堕棿杞存暟鎹�
const timeMarkers = ref([]);
const timelineTrack = ref(null);
-
+// 鏂板鏍囪瘑鍙橀噺
+const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
// 璁＄畻灞炴��
@@ -128,35 +135,46 @@
const currentTimeFormatted = computed(() => formatTime(currentTime.value));
// 鎾斁鎺у埗
+// 鎾斁鎺у埗
const togglePlay = () => {
- // 濡傛灉褰撳墠鏄仠姝㈢姸鎬佷笖宸茬粡鎾斁瀹屾瘯锛岀偣鍑绘椂閲嶇疆鏃堕棿
if (!isPlaying.value && currentTime.value >= duration.value)
- currentTime.value = 0;
+ currentTime.value = 0; // 濡傛灉宸茬粡鎾斁瀹屾瘯锛岄噸缃椂闂�
+
isPlaying.value = !isPlaying.value;
emit("isPlaying", isPlaying.value);
+
if (isPlaying.value) {
startPlayback();
- // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
+ if (!isWaterPrimitiveCreated.value) {
+ // 绗竴娆℃挱鏀炬椂鍒涘缓姘翠綋妯℃嫙灞�
+ createWaterPrimitive({ interval: intervalMap[playbackRate.value] });
+ isWaterPrimitiveCreated.value = true; // 鏍囪涓哄凡鍒涘缓
+ } else {
+ // 鍚庣画鎾斁鏃惰皟鐢ㄦ仮澶嶆帴鍙�
+ resumeWaterSimulation();
+ }
if (currentTime.value === 0) emit("playbackFinished", false);
- } else stopPlayback();
+ } else {
+ stopPlayback();
+ pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
+ }
};
+
+
const intervalMap = {
1: 1000, // 1鍊嶉��
2: 500, // 2鍊嶉��
4: 250, // 4鍊嶉��
8: 125, // 8鍊嶉��
};
+// 鎾斁閫昏緫
const startPlayback = () => {
- // 鏍规嵁褰撳墠鍊嶉�熻幏鍙栧搴旂殑 interval
const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
- // 璋冪敤 createWaterPrimitive 骞朵紶閫� interval
- createWaterPrimitive({ interval });
- clearInterval(playInterval);
+ clearInterval(playInterval); // 纭繚娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
playInterval = setInterval(() => {
- // 璁＄畻姣忔澧炲姞鐨勬椂闂撮噺
- const timeIncrement = playbackRate.value; // 鍊嶉�熺洿鎺ヤ綔涓哄閲�
+ const timeIncrement = playbackRate.value; // 鍊嶉�熶綔涓哄閲�
currentTime.value += timeIncrement;
- // 濡傛灉瓒呰繃鎬绘椂闀匡紝鍒欏仠姝㈡挱鏀�
+
if (currentTime.value >= duration.value) {
currentTime.value = duration.value; // 鍋滃湪鏈�鍚庝竴甯�
stopPlayback();
@@ -164,39 +182,93 @@
emit("isPlaying", false);
emit("playbackFinished", true);
}
- // 瑙﹀彂鏃堕棿鏇存柊浜嬩欢
+
emit("timeUpdate", progressPercentage.value);
- }, 1000); // 姣忕鏇存柊涓�娆�
+ }, interval); // 鏍规嵁閫熺巼璋冩暣闂撮殧
};
-const stopPlayback = () => clearInterval(playInterval);
+const stopPlayback = () => {
+ clearInterval(playInterval);
+};
+
const skipForward = () =>
(currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 鍚戝墠璺宠浆1绉�
+
const skipBackward = () =>
(currentTime.value = Math.max(currentTime.value - 1, 0)); // 鍚戝悗璺宠浆1绉�
+
const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);
+
+// 璁剧疆鎾斁閫熺巼
const setPlaybackRate = (rate) => {
playbackRate.value = rate;
showSpeedMenu.value = false;
- if (isPlaying.value) stopPlayback(), startPlayback(); // 濡傛灉姝ｅ湪鎾斁锛屽垯閲嶆柊鍚姩浠ュ簲鐢ㄦ柊鐨勯�熺巼
+ // 鍋滄褰撳墠鎾斁
+ stopPlayback();
+
+ // 閲嶇疆鏃堕棿杞村埌鍒濆鐘舵��
+ currentTime.value = 0; // 鏃堕棿褰掗浂
+ emit("timeUpdate", progressPercentage.value);
+ isPlaying.value = false;
+ // 閿�姣佺幇鏈夌殑姘翠綋妯℃嫙灞�
+ if (isWaterPrimitiveCreated.value) {
+ destoryWaterPrimitive();
+ isWaterPrimitiveCreated.value = false; // 閲嶇疆鏍囧織鍙橀噺
+ }
+ isPlaying.value = false;
+ pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
};
+// 鏃堕棿杞磋烦杞�
const seekToPosition = (event) => {
+ // 妫�鏌ユ槸鍚﹀凡缁忓垱寤轰簡姘翠綋妯℃嫙灞�
+ if (!isWaterPrimitiveCreated.value) {
+ ElMessage({
+ message: "璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜鏃堕棿杞磋烦杞��",
+ type: "warning",
+ });
+ return; // 闃绘鍚庣画閫昏緫鎵ц
+ }
const rect = timelineTrack.value.getBoundingClientRect();
const percentage = (event.clientX - rect.left) / rect.width;
+ // 璁＄畻褰撳墠鐐瑰嚮浣嶇疆瀵瑰簲鐨勬椂闂村��
currentTime.value = Math.round(percentage * duration.value);
emit("timeUpdate", progressPercentage.value);
if (waterTimestamps.value.length > 0) {
- const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(
- currentTime.value,
- "second"
- );
+ // 鎵惧埌鏈�鎺ヨ繎鐨勬椂闂存埑绱㈠紩
+ const closestIndex = findClosestTimestampIndex(currentTime.value);
console.log(
- "Clicked timestamp:",
- clickedTimestamp.valueOf(),
- clickedTimestamp.format("YYYY-MM-DD HH:mm:ss")
+ "Clicked timestamp index:",
+ closestIndex,
+ "Time:",
+ dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
);
+
+ // 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞��
+ setTimeForWaterSimulation(closestIndex);
+
+ // 濡傛灉褰撳墠鏄殏鍋滅姸鎬侊紝璋冪敤 pauseWaterSimulation
+ if (!isPlaying.value) {
+ pauseWaterSimulation();
+ }
}
};
+
+// 杈呭姪鍑芥暟锛氭壘鍒版渶鎺ヨ繎鐨勬椂闂存埑绱㈠紩
+function findClosestTimestampIndex(currentTimeValue) {
+ let closestIndex = 0;
+ let minDiff = Infinity;
+
+ waterTimestamps.value.forEach((timestamp, index) => {
+ const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
+ if (diff < minDiff) {
+ minDiff = diff;
+ closestIndex = index;
+ }
+ });
+
+ return closestIndex;
+}
+
watch(
() => currentTime.value,
() => {
@@ -209,6 +281,7 @@
}
}
);
+
// 鏃堕棿鏍囪鐢熸垚
function generateTimeMarkers(timestamps) {
if (!timestamps || timestamps.length === 0) return [];
@@ -222,6 +295,7 @@
.format("mm:ss")
);
}
+
watch(
() => waterTimestamps.value,
(newTimestamps) => {
@@ -264,15 +338,18 @@
});
}
}
+
onBeforeUnmount(() => {
stopPlayback();
- // destoryWaterPrimitive();
+ destoryWaterPrimitive();
});
+
const { endSimulate } = inject("simulateActions");
function handleBack() {
ElMessage({ message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
endSimulate();
- // destoryWaterPrimitive();
+ isWaterPrimitiveCreated.value = false
+ destoryWaterPrimitive();
EventBus.emit("hide-schemeInfo");
}
</script>
--
Gitblit v1.9.3