From db07d86f01f19683d7adb263139159ffe1e0c9bf Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 08 五月 2025 14:49:59 +0800
Subject: [PATCH] change
---
src/components/menu/TimeLine.vue | 191 +++++++++++++++++++++++++++++------------------
1 files changed, 116 insertions(+), 75 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 84ee093..412c582 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,30 +2,20 @@
<div class="timeline-container">
<div class="controls">
<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,39 +25,21 @@
<div class="timeline">
<div class="dates">
<div class="current-date">褰撳墠鎾斁鏃堕棿锛歿{ currentPlayingTime }}</div>
- <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>
- <el-button
- @click="handleBack"
- style="margin-top: 26px; margin-left: 30px; margin-right: 10px"
- >缁撴潫妯℃嫙</el-button
- >
+ <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button>
</div>
</template>
@@ -215,54 +187,127 @@
emit("timeUpdate", progress * 100); // 鐧惧垎姣斾笂鎶�
}, 1000); // 娉ㄦ剰浣跨敤interval鑰岄潪鍥哄畾1000ms
};
-let rainFallValues = ref([]); // 鐢ㄤ簬瀛樺偍鎻愬彇鐨剉alue鏁扮粍
+// 闄嶉洦鍙樺寲閮ㄥ垎
+// 闄嶉洦鏁版嵁鐩稿叧鍙橀噺
+// 闄嶉洦鏁版嵁鐩稿叧鍙橀噺
+let rainFallValues = ref([]); // 瀛樺偍鍘熷闄嶉洦閲忔暟鎹�
let minRainValue = ref(Infinity);
let maxRainValue = ref(-Infinity);
+
+// 鑾峰彇闄嶉洦鏁版嵁
function getRainfallData() {
getRainfall().then((res) => {
- rainFallValues.value = res;
- // 鎻愬彇value鍊�
- rainFallValues.value = rainFallValues.value.data.map(item => item.value);
- // 璁＄畻min鍜宮ax闆ㄩ噺鍊�
+ rainFallValues.value = res.data.map(item => item.value); // 鎻愬彇闄嶉洦閲忓��
minRainValue.value = Math.min(...rainFallValues.value);
maxRainValue.value = Math.max(...rainFallValues.value);
console.log(minRainValue.value, maxRainValue.value, 'min and max rain values');
});
}
-// 绾挎�ф槧灏勫嚱鏁�
-function mapValue(value, fromLow, fromHigh, toLow, toHigh) {
- return (value - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
-}
-// 鏍规嵁褰撳墠鎾斁杩涘害鏇存柊澶╂皵
-// 鎴戣繖閲岃鏄帴鍏ョ湡瀹炴暟鎹悗锛屾瘡涓暟鎹�
-function updateWeatherByProgress() {
- const progress = currentTime.value / duration.value;
- // 璁＄畻褰撳墠杩涘害瀵瑰簲浜� rainFallValues 鏁扮粍涓殑浣嶇疆
- const index = Math.floor(progress * (rainFallValues.value.length - 1));
- const rainValue = rainFallValues.value[index]; // 鑾峰彇瀵瑰簲鐨勯檷闆ㄩ噺 value
- // 鏍规嵁褰撳墠闆ㄩ噺鍔ㄦ�佽皟鏁撮洦鐨勫弬鏁�
- // const rainParams = {
- // rainSize: mapValue(rainValue, minRainValue.value, maxRainValue.value, 0.5, 1.5), // 闆ㄦ淮澶у皬锛氫粠灏忓埌澶�
- // rainSpeed: mapValue(rainValue, minRainValue.value, maxRainValue.value, 30, 120), // 闆ㄩ�燂細浠庢參鍒板揩
- // rainDensity: mapValue(rainValue, minRainValue.value, maxRainValue.value, 20, 120), // 瀵嗗害锛氫粠绋�鐤忓埌瀵嗛泦
- // rainColor: "#99B3CC" // 鍙互鍦ㄦ鍩虹涓婂鍔犻鑹插彉鍖栭�昏緫锛屼緥濡傛毚闆ㄤ负娣辫摑绛�
- // };
- // 璋冪敤宸ュ叿鏂规硶鏇存柊涓嬮洦鏁堟灉
- mapUtils.toggleRain(rainParams, true);
+
+// // 绾挎�ф槧灏勫嚱鏁�
+// function mapValue(value, fromLow, fromHigh, toLow, toHigh) {
+// return (value - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
+// }
+
+// 瀹氫箟闄嶉洦绛夌骇鍙婂叾瀵瑰簲鐨勮瑙夊弬鏁�
+const rainLevels = [
+ {
+ name: '灏忛洦',
+ min: 0.1,
+ max: 9.9,
+ size: 0.5, // 闆ㄦ淮澶у皬锛氭洿灏�
+ speed: 20, // 涓嬭惤閫熷害锛氭洿鎱�
+ density: 15, // 闆ㄦ淮瀵嗗害锛氭洿绋�鐤�
+ color: '#ADD8E6' // 娴呰摑鑹诧紝璞″緛杞绘煍鐨勫皬闆�
+ },
+ {
+ name: '涓洦',
+ min: 10,
+ max: 24.9,
+ size: 0.7,
+ speed: 40,
+ density: 35,
+ color: '#ADD8E6' // 澶╄摑鑹诧紝璞″緛鎸佺画鐨勪腑闆�
+ },
+ {
+ name: '澶ч洦',
+ min: 25,
+ max: 49.9,
+ size: 1.0,
+ speed: 70,
+ density: 60,
+ color: '#ADD8E6' // 娣辫摑鑹诧紝璞″緛瀵嗛泦鐨勫ぇ闆�
+ },
+ {
+ name: '鏆撮洦',
+ min: 50,
+ max: 99.9,
+ size: 1.3,
+ speed: 90,
+ density: 80,
+ color: '#ADD8E6' // 娣辫摑榛戣壊锛岃薄寰佸己闄嶉洦
+ },
+ {
+ name: '澶ф毚闆�',
+ min: 100,
+ size: 1.6,
+ speed: 110,
+ density: 100,
+ color: '#ADD8E6' // 榛戣壊锛岃薄寰佹瀬绔毚闆�
+ }
+];
+
+// 鏍规嵁闄嶉洦閲忚繑鍥炲搴旂殑闆ㄥ舰閰嶇疆
+function getRainLevel(rainValue) {
+ for (let level of rainLevels) {
+ if (level.min <= rainValue && (level.max === undefined || rainValue <= level.max)) {
+ return level;
+ }
+ }
+ // 榛樿鏃犻洦鐘舵��
+ return { name: '鏃犻洦', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
}
+// 鏍规嵁鎾斁杩涘害鏇存柊澶╂皵鏁堟灉
+function updateWeatherByProgress() {
+ const progress = currentTime.value / duration.value;
+ const floatIndex = progress * (rainFallValues.value.length - 1);
+ const index = Math.floor(floatIndex);
+ const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1);
+ const currentRain = rainFallValues.value[index];
+ const nextRain = rainFallValues.value[nextIndex];
+ // 鎻掑�煎洜瀛� [0, 1]
+ // const alpha = floatIndex - index;
+
+ // 鎻掑�煎緱鍒板綋鍓嶉檷闆ㄩ噺
+ // const rainValue = currentRain + (nextRain - currentRain) * alpha;
+ const rainValue = currentRain + (nextRain - currentRain);
+ // 鑾峰彇瀵瑰簲鐨勯洦褰㈤厤缃�
+ const rainLevel = getRainLevel(rainValue);
+ if (rainLevel.name === '鏃犻洦') {
+ mapUtils.delRain();
+ return;
+ }
+ // 闈炴棤闆ㄧ姸鎬侊細鏋勫缓闆ㄦ淮鍙傛暟骞舵洿鏂伴洦鏁�
+ const rainParams = {
+ rainSize: rainLevel.size,
+ rainSpeed: rainLevel.speed,
+ rainDensity: rainLevel.density,
+ rainColor: rainLevel.color
+ };
+ console.log('褰撳墠闆ㄩ噺鏁版嵁锛�', rainValue);
+ console.log('褰撳墠闆ㄥ舰锛�', rainLevel);
+ // 璋冪敤宸ュ叿鏂规硶鏇存柊闆ㄦ晥
+ mapUtils.toggleRain(rainParams, true);
+}
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;
@@ -270,14 +315,13 @@
// 鍋滄褰撳墠鎾斁
stopPlayback();
setTimeout(() => {
- mapUtils.delRain();
- }, 3000);
+ mapUtils.delRain();
+ }, 3000);
// 閲嶇疆鏃堕棿杞村埌鍒濆鐘舵��
currentTime.value = 0; // 鏃堕棿褰掗浂
emit("timeUpdate", progressPercentage.value);
isPlaying.value = false;
emit("isPlaying", false);
-
// 閿�姣佺幇鏈夌殑姘翠綋妯℃嫙灞�
if (isWaterPrimitiveCreated.value) {
destoryWaterPrimitive();
@@ -298,7 +342,7 @@
message: "璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜鏃堕棿杞磋烦杞��",
type: "warning",
});
- return; // 闃绘鍚庣画閫昏緫鎵ц
+ return;
}
const rect = timelineTrack.value.getBoundingClientRect();
const percentage = (event.clientX - rect.left) / rect.width;
@@ -314,10 +358,7 @@
"Time:",
dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
);
- // 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞��
setTimeForWaterSimulation(closestIndex);
-
- // 濡傛灉褰撳墠鏄殏鍋滅姸鎬侊紝璋冪敤 pauseWaterSimulation
if (!isPlaying.value) {
pauseWaterSimulation();
}
@@ -331,7 +372,7 @@
waterTimestamps.value.forEach((timestamp, index) => {
const diff = Math.abs(
dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
- currentTimeValue
+ currentTimeValue
);
if (diff < minDiff) {
minDiff = diff;
@@ -446,7 +487,7 @@
left: 50%;
transform: translateX(-50%);
z-index: 99;
- width: 878px;
+ width: 678px;
height: 108px;
/* background-color: #1a2634; */
background: url("@/assets/img/menubar/bar.png");
--
Gitblit v1.9.3