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/Device.vue | 12 ++--
src/utils/water.js | 17 ++++-
src/components/tools/Legend_mnfz.vue | 1
src/components/menu/TimeLine.vue | 115 ++++++++++++++------------------------
4 files changed, 63 insertions(+), 82 deletions(-)
diff --git a/src/components/menu/Device.vue b/src/components/menu/Device.vue
index b909ffc..bd23511 100644
--- a/src/components/menu/Device.vue
+++ b/src/components/menu/Device.vue
@@ -40,12 +40,12 @@
initeWaterPrimitiveView()
});
-// onBeforeRouteUpdate((to, from, next) => {
-// if (to.path !== '/zhjc') {
-// handleCleanup();
-// }
-// next();
-// });
+onBeforeRouteUpdate((to, from, next) => {
+ if (to.path !== '/zhjc') {
+ handleCleanup();
+ }
+ next();
+});
const route = useRoute();
onBeforeUnmount(() => {
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; // 姣杞
}
}
diff --git a/src/components/tools/Legend_mnfz.vue b/src/components/tools/Legend_mnfz.vue
index 6f0c41c..830cc25 100644
--- a/src/components/tools/Legend_mnfz.vue
+++ b/src/components/tools/Legend_mnfz.vue
@@ -24,6 +24,7 @@
{ height: 4.0, color: "#feb652" },
{ height: 5.0, color: "#fd7f06" },
{ height: 10.0, color: "#fe2b07" },
+ { height: 30.0, color: "#4d0a08" }
]);
onMounted(()=>{
})
diff --git a/src/utils/water.js b/src/utils/water.js
index fc1c05d..f288fc1 100644
--- a/src/utils/water.js
+++ b/src/utils/water.js
@@ -21,7 +21,11 @@
* @param {boolean} options.colorRender - 鏄惁鍚敤棰滆壊娓叉煋
*/
export function createWaterPrimitive(options = {}) {
- const { baseUrl = "/simu/c2h1dc", interval = 1000, colorRender = true } = options;
+ const {
+ baseUrl = "/simu/c2h1dc",
+ interval = 1000,
+ colorRender = true,
+ } = options;
water = earthCtrl.simulate.createWaterSimulateLayer({
baseUrl,
@@ -39,11 +43,14 @@
{ height: 4.0, color: "#feb652" },
{ height: 5.0, color: "#fd7f06" },
{ height: 10.0, color: "#fe2b07" },
+ { height: 30.0, color: "#4d0a08" },
],
colorRender, // 鎺у埗鏄惁鍚敤棰滆壊娓叉煋
});
- console.log(`浠跨湡妯℃嫙鍙傛暟锛� 璇锋眰璺緞 ${baseUrl}, 甯ч棿闂撮殧 ${interval}ms, 鏄惁寮�鍚笓棰樻覆鏌� ${colorRender}`);
+ console.log(
+ `浠跨湡妯℃嫙鍙傛暟锛� 璇锋眰璺緞 ${baseUrl}, 甯ч棿闂撮殧 ${interval}ms, 鏄惁寮�鍚笓棰樻覆鏌� ${colorRender}`
+ );
}
/**
* 鍒濆鍖栨按浣撴ā鎷熻鍥�
@@ -102,7 +109,9 @@
return;
}
// const idx = Math.floor(Math.random() * imageList.length); //闅忔満绱㈠紩璺宠浆锛屽疄闄呬腑鐢ㄤ笉鍒帮紝鍙敤浣滄紨绀�
- // console.log(`Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`);
+ console.log(
+ `Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`
+ );
water.setTime(imageList[closestIndex]);
} else {
console.warn("No water simulation to set time for.");
@@ -128,4 +137,4 @@
*/
function timeCallback(timeStamp) {
// console.log(`Current timestamp: ${timeStamp}`);
-}
\ No newline at end of file
+}
--
Gitblit v1.9.3