From 0b5231c1d5ec3af4e6f75d80da6ffe350567843d Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期五, 23 五月 2025 13:53:38 +0800
Subject: [PATCH] change
---
src/components/menu/TimeLine.vue | 115 +++++++++++++++++++++------------------------------------
1 files changed, 43 insertions(+), 72 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index ca0c122..72ad070 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -162,7 +162,7 @@
isWaterPrimitiveCreated.value = true;
} else {
resumeWaterSimulation();
- toggleWaterColorRender(isColorRenderEnabled.value); // 鏇存柊棰滆壊娓叉煋
+ // toggleWaterColorRender(isColorRenderEnabled.value); // 鏇存柊棰滆壊娓叉煋
}
if (currentTime.value === 0) emit("playbackFinished", false);
@@ -204,44 +204,33 @@
};
// 鎾斁閫昏緫
const startPlayback = () => {
- clearInterval(playInterval); // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
+ clearInterval(playInterval);
- // 鏍规嵁 playbackRate 璁剧疆 timeIncrement
- let timeIncrement;
- switch (playbackRate.value) {
- case 1:
- timeIncrement = 900;
- break;
- case 2:
- timeIncrement = 1800;
- break;
- case 4:
- timeIncrement = 3600;
- break;
- case 8:
- timeIncrement = 5600;
- break;
- default:
- timeIncrement = 900; // 榛樿涓�1鍊嶉��
- break;
- }
playInterval = setInterval(() => {
- currentTime.value += timeIncrement;
- if (currentTime.value >= duration.value) {
- currentTime.value = duration.value; // 鍋滃湪鏈�鍚庝竴甯�
+ // 鎵惧埌褰撳墠鏃堕棿瀵瑰簲鐨勭储寮�
+ const currentIndex = findClosestTimestampIndex(currentTime.value);
+ const nextIndex = currentIndex + 1;
+
+ // 濡傛灉宸茬粡鏄渶鍚庝竴涓椂闂寸偣锛屽仠姝㈡挱鏀�
+ if (nextIndex >= waterTimestamps.value.length) {
+ currentTime.value = duration.value;
stopPlayback();
isPlaying.value = false;
emit("isPlaying", false);
emit("playbackFinished", true);
- setTimeout(() => {
- mapUtils.delRain();
- }, 3000);
+ return;
}
- updateWeatherByProgress(); // 鏍规嵁褰撳墠杩涘害鏇存柊澶╂皵
- // 璁＄畻鎾斁杩涘害鐧惧垎姣� [0, 1]
+
+ // 鏇存柊鏃堕棿涓轰笅涓�涓椂闂寸偣鐨勬椂闂村樊锛堢锛�
+ const nextTimestamp = waterTimestamps.value[nextIndex];
+ const baseTimestamp = waterTimestamps.value[0];
+ currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
+
+ // 瑙﹀彂鏇存柊
+ updateWeatherByProgress();
const progress = currentTime.value / duration.value;
- emit("timeUpdate", progress * 100); // 鐧惧垎姣斾笂鎶�
- }, 1000); // 鍥哄畾姣忕鎵ц涓�娆★紝涔熷彲浠ヤ娇鐢ㄥ姩鎬侀棿闅旓紙鍙�夛級
+ emit("timeUpdate", progress * 100);
+ }, 1000 / playbackRate.value); // 鏍规嵁鎾斁閫熺巼璋冩暣闂撮殧
};
// 闄嶉洦鍙樺寲閮ㄥ垎
// 闄嶉洦鏁版嵁鐩稿叧鍙橀噺
@@ -433,49 +422,38 @@
};
// 鏃堕棿杞磋烦杞�
const seekToPosition = (event) => {
- // 妫�鏌ユ槸鍚﹀凡缁忓垱寤轰簡姘翠綋妯℃嫙灞�
if (!isWaterPrimitiveCreated.value) {
- ElMessage({
- message: "璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜鏃堕棿杞磋烦杞��",
- type: "warning",
- });
- return; // 闃绘鍚庣画閫昏緫鎵ц
+ ElMessage.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 closestIndex = findClosestTimestampIndex(currentTime.value);
- console.log(
- "Clicked timestamp index:",
- closestIndex,
- "Time:",
- dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
- );
- // 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞��
- console.log(closestIndex,'鏈�杩戠殑绱㈠紩鍊�');
-
- setTimeForWaterSimulation(closestIndex);
+ const targetTime = Math.round(percentage * duration.value);
- // 濡傛灉褰撳墠鏄殏鍋滅姸鎬侊紝璋冪敤 pauseWaterSimulation
- if (!isPlaying.value) {
- pauseWaterSimulation();
- }
- }
+ // 鐩存帴鎵惧埌鏈�杩戠殑 timestamp 绱㈠紩
+ const closestIndex = findClosestTimestampIndex(targetTime);
+ const baseTimestamp = waterTimestamps.value[0];
+ currentTime.value = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
+
+ // 鏇存柊姘翠綋妯℃嫙鏃堕棿
+ setTimeForWaterSimulation(closestIndex);
+ if (!isPlaying.value) pauseWaterSimulation();
};
-
// 杈呭姪鍑芥暟锛氭壘鍒版渶鎺ヨ繎鐨勬椂闂存埑绱㈠紩
function findClosestTimestampIndex(currentTimeValue) {
+ if (waterTimestamps.value.length === 0) return 0;
+
+ // 璁＄畻褰撳墠鏃堕棿瀵瑰簲鐨勬绉掓椂闂存埑
+ const baseTime = waterTimestamps.value[0];
+ const currentTimestamp = baseTime + currentTimeValue * 1000;
+
+ // 鎵惧埌鏈�鎺ヨ繎鐨� timestamp 绱㈠紩
let closestIndex = 0;
let minDiff = Infinity;
+
waterTimestamps.value.forEach((timestamp, index) => {
- const diff = Math.abs(
- dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
- currentTimeValue
- );
+ const diff = Math.abs(timestamp - currentTimestamp);
if (diff < minDiff) {
minDiff = diff;
closestIndex = index;
@@ -539,6 +517,7 @@
getRainfallData()
// 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
+ console.log(timestamps,timestamps.length,'ddddddddddddddddddddddddddddddddddddddddddddd');
if (timestamps) {
waterTimestamps.value = timestamps;
updateTimelineRange();
@@ -563,15 +542,7 @@
waterTimestamps.value[0],
waterTimestamps.value.at(-1),
];
- props.waterSimulateParams.date = [
- dayjs(first).toISOString(),
- dayjs(last).toISOString(),
- ];
- duration.value = dayjs(last).diff(dayjs(first), "second");
- // console.log("Updated timeline range:", {
- // ...props.waterSimulateParams,
- // duration: duration.value,
- // });
+ duration.value = (last - first) / 1000; // 姣杞
}
}
--
Gitblit v1.9.3