From e084592304b0499d05eaa31d59c463a8649352c2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 30 六月 2025 22:24:13 +0800
Subject: [PATCH] 1
---
src/components/menu/TimeLine.vue | 180 +++++++++++++++++++++++++----------------------------------
1 files changed, 77 insertions(+), 103 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 0f87cf9..052f870 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" 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>
@@ -35,33 +25,19 @@
<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>
@@ -70,12 +46,8 @@
<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>
@@ -84,38 +56,27 @@
</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>
@@ -202,9 +163,6 @@
});
let minFlowRate = ref();
let maxFlowRate = ref();
-// 鍏ㄥ眬鍙橀噺璁板綍鏈�澶ч樁娈靛拰閫忔槑搴�
-let maxStage = 0;
-let maxAlpha = -0.3; // 鍒濆閫忔槑搴﹀搴攕tage 0
// 璁＄畻灞炴��
const progressPercentage = computed(
() => (currentTime.value / duration.value) * 100
@@ -549,52 +507,46 @@
{ hex: "#8B5A3A", luminance: 101.0 }, // stage 4
{ hex: "#744C33", luminance: 84.5 }, // stage 5
{ hex: "#5D3D2C", luminance: 68.1 } // stage 6
-];
+ ];
const alphaStops = [
- -0.3, // stage 0
- -0.4, // stage 1
- -0.5, // stage 2
- -0.6, // stage 3
- -0.7, // stage 4
- -0.75, // stage 5
+ -0.2, // stage 0
+ -0.3, // stage 1
+ -0.4, // stage 2
+ -0.5, // stage 3
+ -0.6, // stage 4
+ -0.7, // stage 5
-0.8 // stage 6
];
- // 璁＄畻姣忎釜闃舵棣栨杈惧埌鐨勬椂闂寸偣
- const stages = [];
- const thresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
-
- // 璁＄畻姣忎釜鏃堕棿鐐圭殑寮哄害
- const timeIntensities = [];
+ // 绱闄嶉洦閲忛槇鍊硷紙mm锛�
+ const R_THRESHOLDS = [0, 200, 240, 280, 310, 350]; // 鍏�6涓樁娈靛搴�6涓槇鍊�
+
+ // 鏃堕棿鍜岄檷闆ㄩ噺淇℃伅
+ const timeTotals = [];
const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
-
for (let i = 0; i < rainTotalInfo.value.length; i++) {
const timestamp = new Date(rainTotalInfo.value[i].time).getTime();
- const D = (timestamp - initialTimestamp) / (1000 * 60 * 60) + 0.0001;
- const IR = 56.9 * Math.pow(D, -0.746);
- const intensity = rainTotalInfo.value[i].intensity;
-
- timeIntensities.push({
- time: (timestamp - initialTimestamp) / 1000,
- intensity,
- IR
+ const time = (timestamp - initialTimestamp) / 1000;
+ const total = rainTotalInfo.value[i].total; // 浣跨敤 total 鏇夸唬 intensity
+ timeTotals.push({
+ time,
+ total
});
}
// 鎵惧嚭姣忎釜闃舵棣栨杈惧埌鐨勬椂闂寸偣
- for (let stage = 1; stage < COLOR_STOPS.length; stage++) {
- const threshold = thresholds[stage - 1];
-
- for (let i = 0; i < timeIntensities.length; i++) {
- const { time, intensity, IR } = timeIntensities[i];
-
- if (intensity >= threshold * IR) {
- // 鎵惧埌璇ラ樁娈靛紑濮嬫椂闂寸偣
+ const stages = [];
+
+ for (let stage = 1; stage < R_THRESHOLDS.length + 1; stage++) {
+ const threshold = R_THRESHOLDS[stage - 1];
+ for (let i = 0; i < timeTotals.length; i++) {
+ const { time, total } = timeTotals[i];
+ if (total >= threshold) {
stages[stage] = {
startTime: time,
color: COLOR_STOPS[stage].hex,
alpha: alphaStops[stage],
- threshold: threshold
+ threshold
};
break;
}
@@ -614,7 +566,7 @@
function updateWaterColorByTime(isForceUpdate = false) {
if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;
-
+
// 棣栨璋冪敤鏃堕璁＄畻棰滆壊闃舵
if (colorState.colorStages === null) {
precomputeColorStages();
@@ -650,7 +602,7 @@
// 姝ｅ父鏃堕棿鍓嶈繘鏃讹紝淇濇寔娓愯繘鍙樺寲
const newColor = colorState.colorStages[currentStage].color;
const newAlpha = colorState.colorStages[currentStage].alpha;
-
+
// 鍙簲鐢ㄦ洿鏆楃殑棰滆壊鍜屾洿浣庣殑閫忔槑搴�
if (calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)) {
colorState.currentColor = newColor;
@@ -662,7 +614,29 @@
// 鏇存柊鏃堕棿璁板綍
colorState.lastTime = currentTime.value;
+ // ====== 鏂板锛氬湪 updateWaterColor 鍓嶆墦鍗板綋鍓嶄俊鎭� ======
+ // // 鑾峰彇褰撳墠绱闄嶉洦閲�
+ // let currentTotal = null;
+ // const baseTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
+ // const currentTimeMs = baseTimestamp + currentTime.value * 1000;
+ // // 鎵惧埌鏈�鎺ヨ繎鐨勯檷闆ㄦ暟鎹偣
+ // for (let i = rainTotalInfo.value.length - 1; i >= 0; i--) {
+ // const dataTimeMs = new Date(rainTotalInfo.value[i].time).getTime();
+ // if (dataTimeMs <= currentTimeMs) {
+ // currentTotal = rainTotalInfo.value[i].total;
+ // break;
+ // }
+ // }
+
+ // // 鎵撳嵃淇℃伅
+ // console.log("========================================");
+ // console.log(`銆愭椂闂存埑銆�: ${new Date(currentTimeMs).toLocaleString()}`);
+ // console.log(`銆愮疮璁￠檷闆ㄩ噺 R銆�: ${currentTotal !== null ? currentTotal.toFixed(2) : '鏈煡'} mm`);
+ // console.log(`銆愬綋鍓嶉樁娈点��: 绗� ${currentStage} 闃舵`);
+ // console.log(`銆愰鑹� HEX銆�: ${colorState.colorStages[currentStage]?.color || '鏈畾涔�'}`);
+ // console.log(`銆愰�忔槑搴� Alpha銆�: ${colorState.colorStages[currentStage]?.alpha || '鏈畾涔�'}`);
+ // console.log("========================================");
// 搴旂敤棰滆壊
updateWaterColor(colorState.currentColor, colorState.currentAlpha);
}
@@ -692,18 +666,18 @@
const closestIndex = findClosestTimestampIndex(targetTime);
const baseTimestamp = waterTimestamps.value[0];
const newTime = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
-
+
// 鍒ゆ柇鏄惁闇�瑕佸己鍒舵洿鏂伴鑹�
const isGoingBackward = newTime < currentTime.value;
const isBeforeMaxColor = colorState.maxColorTime !== null && newTime <= colorState.maxColorTime;
const shouldForceUpdate = isGoingBackward || isBeforeMaxColor;
-
+
currentTime.value = newTime;
setTimeForWaterSimulation(closestIndex);
-
+
// 鏍规嵁鏉′欢鏇存柊棰滆壊
updateWaterColorByTime(shouldForceUpdate);
-
+
if (!isPlaying.value) pauseWaterSimulation();
};
// ============================================================================
@@ -722,11 +696,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('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
@@ -753,7 +727,7 @@
rainDensity: rainLevel.density,
rainColor: rainLevel.color,
};
- console.log("褰撳墠闆ㄩ噺鏁版嵁锛�", rainValue, "褰撳墠闆ㄥ舰锛�", rainLevel);
+ // console.log("褰撳墠闆ㄩ噺鏁版嵁锛�", rainValue, "褰撳墠闆ㄥ舰锛�", rainLevel);
// 璋冪敤宸ュ叿鏂规硶鏇存柊闆ㄦ晥
mapUtils.toggleRain(rainParams, true);
}
--
Gitblit v1.9.3