| | |
| | | |
| | | return timeStepHours; |
| | | } |
| | | // ============================================================================ |
| | | // 优化方式,可以求出整个时间轴上,第一次遇到这六个阈值得时间点,然后分时间段显示,a时间内显示状态1,然后状态交界处设置颜色渐变,其余同理,这样跳转得时候能够直接跳转到当前得颜色信息阶段,直接应用,即可 |
| | | // ============================================================================ |
| | | // 全局状态记录 |
| | | const colorState = { |
| | | maxStage: 0, // 记录历史最高阶段 |
| | | maxAlpha: -0.3, // 记录历史最小透明度(负值) |
| | | maxLuminance: 240.4, // 记录历史最低亮度(对应stage 0初始值) |
| | | currentColor: "#F5F0E6", // 当前颜色 |
| | | currentAlpha: -0.3, // 当前透明度 |
| | | colorStages: null, // 预计算的颜色阶段时间点 |
| | | maxColorTime: null // 记录达到最深颜色时的时间点 |
| | | }; |
| | | |
| | | function updateWaterColorByTime() { |
| | | // 预计算颜色阶段时间点 |
| | | function precomputeColorStages() { |
| | | if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return; |
| | | |
| | | // 1. 计算基础数据 |
| | | const { intensity, IR } = calculateRainData(); |
| | | |
| | | // 2. 颜色配置(亮度严格递减) |
| | | // 颜色配置(亮度递减) |
| | | const COLOR_STOPS = [ |
| | | { hex: "#F5F0E6", luminance: 240.4 }, // stage 0 |
| | | { hex: "#D4F2E7", luminance: 231.8 }, // stage 1 |
| | | { hex: "#E6D5B8", luminance: 214.8 }, // stage 2 |
| | | { hex: "#D4B483", luminance: 184.0 }, // stage 3 |
| | | { hex: "#B78B6A", luminance: 148.4 }, // stage 4 |
| | | { hex: "#8B5A3A", luminance: 101.0 }, // stage 5 |
| | | { hex: "#4A3123", luminance: 54.9 }, // stage 6 |
| | | ]; |
| | | { hex: "#E6D5B8", luminance: 214.8 }, // stage 1 |
| | | { hex: "#D4B483", luminance: 184.0 }, // stage 2 |
| | | { hex: "#B78B6A", luminance: 148.4 }, // stage 3 |
| | | { hex: "#8B5A3A", luminance: 101.0 }, // stage 4 |
| | | { hex: "#744C33", luminance: 84.5 }, // stage 5 |
| | | { hex: "#5D3D2C", luminance: 68.1 } // stage 6 |
| | | ]; |
| | | const alphaStops = [ |
| | | 1 - 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.8, // stage 6 |
| | | -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.8 // stage 6 |
| | | ]; |
| | | // 3. 更新阶段状态 |
| | | updateStageState(intensity, IR); |
| | | |
| | | // 4. 计算并锁定颜色(确保亮度不回升) |
| | | updateColorState(COLOR_STOPS, intensity, IR); |
| | | |
| | | // 5. 应用颜色 |
| | | updateWaterColor(colorState.currentColor, colorState.maxAlpha); |
| | | |
| | | // --- 辅助函数 --- |
| | | function calculateRainData() { |
| | | const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime(); |
| | | const currentTimestamp = new Date( |
| | | rainTotalInfo.value[ |
| | | Math.min( |
| | | Math.floor( |
| | | (currentTime.value / duration.value) * |
| | | (rainTotalInfo.value.length - 1) |
| | | ), |
| | | rainTotalInfo.value.length - 2 |
| | | ) |
| | | ].time |
| | | ).getTime(); |
| | | |
| | | // 降雨强度计算(带插值) |
| | | const progress = currentTime.value / duration.value; |
| | | const floatIndex = progress * (rainTotalInfo.value.length - 1); |
| | | let index = Math.floor(floatIndex); |
| | | if (index >= rainTotalInfo.value.length - 1) { |
| | | index = rainTotalInfo.value.length - 2; // 防止 index+1 越界 |
| | | } |
| | | const lerpAlpha = floatIndex - index; |
| | | const intensity = |
| | | rainTotalInfo.value[index].intensity * (1 - lerpAlpha) + |
| | | rainTotalInfo.value[index + 1].intensity * lerpAlpha; |
| | | |
| | | // 临界降雨强度计算 |
| | | const D = (currentTimestamp - initialTimestamp) / (1000 * 60 * 60) + 0.0001; |
| | | // 计算每个阶段首次达到的时间点 |
| | | const stages = []; |
| | | const thresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0]; |
| | | |
| | | // 计算每个时间点的强度 |
| | | const timeIntensities = []; |
| | | 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); |
| | | |
| | | return { intensity, IR }; |
| | | const intensity = rainTotalInfo.value[i].intensity; |
| | | |
| | | timeIntensities.push({ |
| | | time: (timestamp - initialTimestamp) / 1000, |
| | | intensity, |
| | | IR |
| | | }); |
| | | } |
| | | |
| | | function updateStageState(intensity, IR) { |
| | | // 计算理论阶段 |
| | | let stage = 0; |
| | | const thresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0]; |
| | | for (let i = thresholds.length - 1; i >= 0; i--) { |
| | | if (intensity >= thresholds[i] * IR) { |
| | | stage = i + 1; |
| | | // 找出每个阶段首次达到的时间点 |
| | | 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) { |
| | | // 找到该阶段开始时间点 |
| | | stages[stage] = { |
| | | startTime: time, |
| | | color: COLOR_STOPS[stage].hex, |
| | | alpha: alphaStops[stage], |
| | | threshold: threshold |
| | | }; |
| | | break; |
| | | } |
| | | } |
| | | |
| | | // 更新最大阶段(单向递增) |
| | | colorState.maxStage = Math.max(colorState.maxStage, stage); |
| | | } |
| | | |
| | | function updateColorState(colorStops, intensity, IR) { |
| | | // 已达最终阶段 |
| | | if (colorState.maxStage >= colorStops.length - 1) { |
| | | colorState.currentColor = colorStops[colorStops.length - 1].hex; |
| | | colorState.maxAlpha = -0.8; |
| | | colorState.maxLuminance = colorStops[colorStops.length - 1].luminance; |
| | | return; |
| | | } |
| | | // 填充阶段0 |
| | | stages[0] = { |
| | | startTime: 0, |
| | | color: COLOR_STOPS[0].hex, |
| | | alpha: alphaStops[0], |
| | | threshold: 0 |
| | | }; |
| | | |
| | | // 计算当前阶段进度 |
| | | const stageThresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0]; |
| | | const lowerThreshold = stageThresholds[colorState.maxStage - 1] * IR; |
| | | const upperThreshold = stageThresholds[colorState.maxStage] * IR; |
| | | const ratio = Math.min( |
| | | 1, |
| | | Math.max( |
| | | 0, |
| | | (intensity - lowerThreshold) / (upperThreshold - lowerThreshold) |
| | | ) |
| | | ); |
| | | |
| | | // 颜色插值 |
| | | const startColor = colorStops[colorState.maxStage]; |
| | | const endColor = colorStops[colorState.maxStage + 1]; |
| | | const newColor = lerpColor(startColor.hex, endColor.hex, ratio); |
| | | const newLuminance = calculateLuminance(newColor); |
| | | |
| | | // 只接受更暗的颜色(亮度更低) |
| | | if (newLuminance < colorState.maxLuminance) { |
| | | colorState.currentColor = newColor; |
| | | colorState.maxLuminance = newLuminance; |
| | | colorState.maxAlpha = Math.min( |
| | | colorState.maxAlpha, |
| | | lerp( |
| | | alphaStops[colorState.maxStage], |
| | | alphaStops[colorState.maxStage + 1], |
| | | ratio |
| | | ) |
| | | ); |
| | | } |
| | | |
| | | console.log( |
| | | `阶段: ${colorState.maxStage} | 亮度: ${colorState.maxLuminance.toFixed( |
| | | 1 |
| | | )} | 颜色: ${colorState.currentColor}` |
| | | ); |
| | | } |
| | | |
| | | // 颜色插值工具函数 |
| | | function lerpColor(c1, c2, t) { |
| | | const [r1, g1, b1] = hexToRgb(c1); |
| | | const [r2, g2, b2] = hexToRgb(c2); |
| | | return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t); |
| | | } |
| | | |
| | | function calculateLuminance(hex) { |
| | | const [r, g, b] = hexToRgb(hex); |
| | | return 0.299 * r + 0.587 * g + 0.114 * b; |
| | | } |
| | | |
| | | function hexToRgb(hex) { |
| | | const bigint = parseInt(hex.slice(1), 16); |
| | | return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255]; |
| | | } |
| | | |
| | | function rgbToHex(r, g, b) { |
| | | return `#${[r, g, b] |
| | | .map((x) => Math.round(x).toString(16).padStart(2, "0")) |
| | | .join("")}`; |
| | | } |
| | | |
| | | function lerp(a, b, t) { |
| | | return a + (b - a) * t; |
| | | } |
| | | colorState.colorStages = stages; |
| | | } |
| | | |
| | | function updateWaterColorByTime(isForceUpdate = false) { |
| | | if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return; |
| | | |
| | | // 首次调用时预计算颜色阶段 |
| | | if (colorState.colorStages === null) { |
| | | precomputeColorStages(); |
| | | } |
| | | |
| | | // 查找当前时间点所属的阶段 |
| | | let currentStage = 0; |
| | | for (let i = colorState.colorStages.length - 1; i >= 0; i--) { |
| | | if (colorState.colorStages[i] && currentTime.value >= colorState.colorStages[i].startTime) { |
| | | currentStage = i; |
| | | break; |
| | | } |
| | | } |
| | | |
| | | // 记录达到最深颜色的时间点 |
| | | if (currentStage >= colorState.colorStages.length - 1) { |
| | | if (colorState.maxColorTime === null || currentTime.value > colorState.maxColorTime) { |
| | | colorState.maxColorTime = currentTime.value; |
| | | } |
| | | } |
| | | |
| | | // 判断是否需要强制更新颜色 |
| | | const isTimeGoingBackward = currentTime.value < colorState.lastTime; |
| | | const isBeforeMaxColorTime = colorState.maxColorTime !== null && currentTime.value <= colorState.maxColorTime; |
| | | const shouldForceUpdate = isForceUpdate && (isTimeGoingBackward || isBeforeMaxColorTime); |
| | | |
| | | // 更新颜色逻辑 |
| | | if (shouldForceUpdate || isTimeGoingBackward) { |
| | | // 强制更新或时间回退时,直接应用当前阶段的颜色 |
| | | colorState.currentColor = colorState.colorStages[currentStage].color; |
| | | colorState.currentAlpha = colorState.colorStages[currentStage].alpha; |
| | | } else { |
| | | // 正常时间前进时,保持渐进变化 |
| | | const newColor = colorState.colorStages[currentStage].color; |
| | | const newAlpha = colorState.colorStages[currentStage].alpha; |
| | | |
| | | // 只应用更暗的颜色和更低的透明度 |
| | | if (calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)) { |
| | | colorState.currentColor = newColor; |
| | | } |
| | | if (newAlpha < colorState.currentAlpha) { |
| | | colorState.currentAlpha = newAlpha; |
| | | } |
| | | } |
| | | |
| | | // 更新时间记录 |
| | | colorState.lastTime = currentTime.value; |
| | | |
| | | // 应用颜色 |
| | | updateWaterColor(colorState.currentColor, colorState.currentAlpha); |
| | | } |
| | | |
| | | // 辅助函数保持不变 |
| | | function calculateLuminance(hex) { |
| | | const [r, g, b] = hexToRgb(hex); |
| | | return 0.299 * r + 0.587 * g + 0.114 * b; |
| | | } |
| | | |
| | | function hexToRgb(hex) { |
| | | const bigint = parseInt(hex.slice(1), 16); |
| | | return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255]; |
| | | } |
| | | |
| | | // 时间轴跳转函数 |
| | | const seekToPosition = (event) => { |
| | | if (!isWaterPrimitiveCreated.value) { |
| | | ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。"); |
| | | return; |
| | | } |
| | | |
| | | const rect = timelineTrack.value.getBoundingClientRect(); |
| | | const percentage = (event.clientX - rect.left) / rect.width; |
| | | const targetTime = Math.round(percentage * duration.value); |
| | | |
| | | 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(); |
| | | }; |
| | | // ============================================================================ |
| | | |
| | | function updateWeatherByProgress() { |
| | | if (rainFallValues.value.length === 0) return; |
| | |
| | | EventBus.emit("clear-echart"); |
| | | EventBus.emit("reset-table"); |
| | | }; |
| | | // 时间轴跳转 |
| | | const seekToPosition = (event) => { |
| | | if (!isWaterPrimitiveCreated.value) { |
| | | ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。"); |
| | | return; |
| | | } |
| | | |
| | | const rect = timelineTrack.value.getBoundingClientRect(); |
| | | const percentage = (event.clientX - rect.left) / rect.width; |
| | | const targetTime = Math.round(percentage * duration.value); |
| | | |
| | | // 直接找到最近的 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; |