| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | }); |
| | | let minFlowRate = ref(); |
| | | let maxFlowRate = ref(); |
| | | // 全局变量记录最大阶段和透明度 |
| | | let maxStage = 0; |
| | | let maxAlpha = -0.3; // 初始透明度对应stage 0 |
| | | // 计算属性 |
| | | const progressPercentage = computed( |
| | | () => (currentTime.value / duration.value) * 100 |
| | |
| | | { 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; |
| | | } |
| | |
| | | |
| | | function updateWaterColorByTime(isForceUpdate = false) { |
| | | if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return; |
| | | |
| | | |
| | | // 首次调用时预计算颜色阶段 |
| | | if (colorState.colorStages === null) { |
| | | precomputeColorStages(); |
| | |
| | | // 正常时间前进时,保持渐进变化 |
| | | const newColor = colorState.colorStages[currentStage].color; |
| | | const newAlpha = colorState.colorStages[currentStage].alpha; |
| | | |
| | | |
| | | // 只应用更暗的颜色和更低的透明度 |
| | | if (calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)) { |
| | | colorState.currentColor = newColor; |
| | |
| | | |
| | | // 更新时间记录 |
| | | 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); |
| | | } |
| | |
| | | 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(); |
| | | }; |
| | | // ============================================================================ |
| | |
| | | // 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('由于数据无显著变化,跳过本次更新'); |
| | |
| | | rainDensity: rainLevel.density, |
| | | rainColor: rainLevel.color, |
| | | }; |
| | | console.log("当前雨量数据:", rainValue, "当前雨形:", rainLevel); |
| | | // console.log("当前雨量数据:", rainValue, "当前雨形:", rainLevel); |
| | | // 调用工具方法更新雨效 |
| | | mapUtils.toggleRain(rainParams, true); |
| | | } |