From c0b4517e7362144cc1683ee0bf0b7e00b67d539a Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 24 六月 2025 18:01:08 +0800
Subject: [PATCH] 提交初版实时模拟
---
src/components/menu/TimeLine.vue | 120 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 87 insertions(+), 33 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 5f6c297..07b79fe 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,20 +2,30 @@
<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 class="speed-control" v-show="speedShow">
<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>
@@ -25,19 +35,33 @@
<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>
涓撻娓叉煋:
- <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top: -3px"
- :disabled="!isPlaying || !isWaterPrimitiveCreated" />
+ <el-switch
+ v-model="isColorRenderEnabled"
+ @change="handleColorRenderChange"
+ style="margin-top: -3px"
+ :disabled="!isPlaying || !isWaterPrimitiveCreated"
+ />
<!-- active-text="寮�" inactive-text="鍏�" -->
</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="scale-markers">
<div class="scale-marker" style="left: 0%"></div>
<div class="scale-marker" style="left: 25%"></div>
@@ -46,8 +70,12 @@
<div class="scale-marker" style="left: 100%"></div>
</div>
<div class="time-markers">
- <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
- :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
+ <div
+ v-for="(time, index) in timeMarkers"
+ :key="index"
+ class="time-marker"
+ :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
+ >
<div class="date-part">{{ time.split(" ")[0] }}</div>
<div class="time-part">{{ time.split(" ")[1] }}</div>
</div>
@@ -56,27 +84,38 @@
</div>
<div>
<div style="display: flex">
- <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
- @finish-calculation="handleFinishCalculation" style="
+ <ratelevel
+ ref="ratelevelRef"
+ :playing-time="sendCurrentPlayingTime"
+ @finish-calculation="handleFinishCalculation"
+ style="
margin-top: 12px;
margin-left: 28px;
margin-right: 10px;
justify-content: flex-end;
- " />
- <crossanalysis ref="crossRef" style="
+ "
+ />
+ <crossanalysis
+ ref="crossRef"
+ style="
margin-top: 12px;
margin-left: 16px;
margin-right: 20px;
justify-content: flex-end;
- " />
+ "
+ />
</div>
- <el-button @click="handleBack" style="
+ <el-button
+ @click="handleBack"
+ style="
margin-top: 3px;
margin-left: 28px;
margin-right: 10px;
width: 75%;
height: 30%;
- ">缁撴潫妯℃嫙</el-button>
+ "
+ >缁撴潫妯℃嫙</el-button
+ >
</div>
</div>
</template>
@@ -143,13 +182,15 @@
const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
+const speedShow = ref(false);
+
const waterTimestamps = ref([]); // 瀛樺偍鏃堕棿杞存暟鎹�
const timeMarkers = ref([]);
const timelineTrack = ref(null);
const isColorRenderEnabled = ref(false); // 鍋囪杩欐槸浣犵殑棰滆壊娓叉煋寮�鍏崇姸鎬�
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
-let rainTotalInfo = ([]);
+let rainTotalInfo = [];
const isRainEnabled = ref(false);
const rainParams = reactive({
rainSize: 0.5,
@@ -259,8 +300,11 @@
currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
// 瑙﹀彂鏇存柊
- updateWaterColorByTime()
- updateWeatherByProgress();
+ if (selectedScheme.value.type !== 2) {
+ updateWaterColorByTime();
+ updateWeatherByProgress();
+ }
+
const progress = currentTime.value / duration.value;
emit("timeUpdate", progress * 100);
}, 1000 / playbackRate.value); // 鏍规嵁鎾斁閫熺巼璋冩暣闂撮殧
@@ -303,7 +347,7 @@
const rainfallList = data.rainfalls;
console.log("鏈�缁堢殑 rainfallList:", rainfallList);
- rainTotalInfo.value = rainfallList
+ rainTotalInfo.value = rainfallList;
// 鎻愬彇 intensity 鍊�
rainFallValues.value = rainfallList.map((r) => r.intensity);
@@ -373,7 +417,7 @@
}
}
// 榛樿鏃犻洦鐘舵��
-
+
return { name: "鏃犻洦", size: 0.3, speed: 10, density: 10, color: "#F0F8FF" };
}
// 鏍规嵁鎾斁杩涘害鏇存柊澶╂皵鏁堟灉锛堝凡浼樺寲锛�
@@ -393,20 +437,20 @@
const nextTotal = nextData.total;
const total = currentTotal + (nextTotal - currentTotal) * alpha;
// 鏍规嵁 total 璁剧疆棰滆壊
- let color = '#D4F2E7'; // 榛樿钃濊壊
+ let color = "#D4F2E7"; // 榛樿钃濊壊
if (total >= 150) {
- color = '#663300'; // 榛� - 澶ч洦
+ color = "#663300"; // 榛� - 澶ч洦
} else if (total >= 125) {
- color = '#B26633'; // 榛勭豢 - 涓洦
+ color = "#B26633"; // 榛勭豢 - 涓洦
} else if (total >= 100) {
- color = '#CC9966'; // 缁� - 涓洦
+ color = "#CC9966"; // 缁� - 涓洦
} else if (total >= 75) {
- color = '#CCE5FF'; // 闈掔豢 - 灏忛洦
+ color = "#CCE5FF"; // 闈掔豢 - 灏忛洦
} else if (total >= 50) {
- color = '#99CCFF'; // 澶╄摑 - 灏忛洦
+ color = "#99CCFF"; // 澶╄摑 - 灏忛洦
} else if (total >= 25) {
- color = '#66B3FF'; // 娴呰摑 - 寰噺
+ color = "#66B3FF"; // 娴呰摑 - 寰噺
}
// console.log(`褰撳墠 total: ${total.toFixed(2)}, 棰滆壊: ${color}`);
// updateWaterColor(color)
@@ -426,7 +470,11 @@
// const rainValue = currentRain + (nextRain - currentRain) * alpha;
const rainValue = currentRain + (nextRain - currentRain);
// 鎵撳嵃褰撳墠澶勭悊鐨勯洦閲忔暟鎹�
- console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
+ console.log(
+ `姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(
+ 2
+ )}, 绱㈠紩=${index}`
+ );
// 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊
if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
// console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
@@ -612,9 +660,15 @@
// 褰撳墠鏂规鐨勬墍鏈変俊鎭�
const schemeInfo = selectedScheme.value;
serviceInfo = schemeInfo.serviceName;
+ if (selectedScheme.value.type == 2) {
+ speedShow.value = false;
+ } else {
+ getRainfallData();
+ speedShow.value = true;
+ }
// console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo);
- getRainfallData();
+
// 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
const {
waterTimestamps: timestamps,
--
Gitblit v1.9.3