| | |
| | | <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 = null; |
| | | // 全局变量记录最大阶段和透明度 |
| | | let maxStage = 0; |
| | | let maxAlpha = -0.3; // 初始透明度对应stage 0 |
| | | // 计算属性 |
| | | const progressPercentage = computed( |
| | | () => (currentTime.value / duration.value) * 100 |
| | |
| | | |
| | | return timeStepHours; |
| | | } |
| | | // 全局状态记录 |
| | | const colorState = { |
| | | maxStage: 0, // 记录历史最高阶段 |
| | | maxAlpha: -0.3, // 记录历史最小透明度(负值) |
| | | maxLuminance: 240.4, // 记录历史最低亮度(对应stage 0初始值) |
| | | currentColor: "#F5F0E6" // 当前颜色 |
| | | }; |
| | | |
| | | function updateWaterColorByTime() { |
| | | if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return; |
| | | |
| | | // 辅助函数:将 "YYYY-MM-DD HH:mm:ss" 转换为 JavaScript Date 对象 |
| | | const timeToTimestamp = (timeStr) => new Date(timeStr).getTime(); |
| | | // 1. 计算基础数据 |
| | | const { intensity, IR } = calculateRainData(); |
| | | |
| | | // 获取初始时间戳(第一个数据点的时间) |
| | | const initialTimestamp = timeToTimestamp(rainTotalInfo.value[0].time); |
| | | // 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 |
| | | ]; |
| | | 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 |
| | | ]; |
| | | // 3. 更新阶段状态 |
| | | updateStageState(intensity, IR); |
| | | |
| | | // 计算当前进度 |
| | | const progress = currentTime.value / duration.value; |
| | | const floatIndex = progress * (rainTotalInfo.value.length - 1); |
| | | const index = Math.floor(floatIndex); |
| | | const nextIndex = Math.min(index + 1, rainTotalInfo.value.length - 1); |
| | | const currentData = rainTotalInfo.value[index]; |
| | | const nextData = rainTotalInfo.value[nextIndex]; |
| | | const currentTimestamp = timeToTimestamp(currentData.time); |
| | | // 4. 计算并锁定颜色(确保亮度不回升) |
| | | updateColorState(COLOR_STOPS, intensity, IR); |
| | | |
| | | // 已过去的时间(小时) |
| | | const elapsedTimeInHours = parseFloat( |
| | | (currentTimestamp - initialTimestamp) / (1000 * 60 * 60) |
| | | ); |
| | | // 5. 应用颜色 |
| | | updateWaterColor(colorState.currentColor, colorState.maxAlpha); |
| | | |
| | | console.log(`持续了 ${elapsedTimeInHours} 小时`); |
| | | // --- 辅助函数 --- |
| | | 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(); |
| | | |
| | | // 启用插值(alpha 平滑过渡) |
| | | const alpha = floatIndex - index; |
| | | const currentIntensity = currentData.intensity; |
| | | const nextIntensity = nextData.intensity; |
| | | const intensity = currentIntensity + (nextIntensity - currentIntensity); |
| | | // 计算 IR(t) |
| | | const D = elapsedTimeInHours + 0.0001; // 加一个极小量防止除零 |
| | | const IR = 56.9 * Math.pow(D, -0.746); // 单位 mm/h |
| | | // 降雨强度计算(带插值) |
| | | 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; |
| | | |
| | | // 判断当前阶段 |
| | | let stage = 0; |
| | | if (intensity >= 1.0 * IR) { |
| | | stage = 6; |
| | | } else if (intensity >= 0.8 * IR) { |
| | | stage = 5; |
| | | } else if (intensity >= 0.6 * IR) { |
| | | stage = 4; |
| | | } else if (intensity >= 0.4 * IR) { |
| | | stage = 3; |
| | | } else if (intensity >= 0.2 * IR) { |
| | | stage = 2; |
| | | } else if (intensity > 0) { |
| | | stage = 1; |
| | | // 临界降雨强度计算 |
| | | const D = (currentTimestamp - initialTimestamp) / (1000 * 60 * 60) + 0.0001; |
| | | const IR = 56.9 * Math.pow(D, -0.746); |
| | | |
| | | return { intensity, IR }; |
| | | } |
| | | |
| | | // 更新全局最大阶段(不会回退) |
| | | if (!maxStage) maxStage = 0; |
| | | maxStage = Math.max(maxStage, stage); |
| | | 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; |
| | | break; |
| | | } |
| | | } |
| | | |
| | | // 输出关键信息 |
| | | console.table({ |
| | | 当前时间: currentData.time, |
| | | "累计时长 D(t) (h)": D.toFixed(2), |
| | | "雨强阈值 IR(t) (mm/h)": IR.toFixed(2), |
| | | "当前降雨强度 I(t) (mm/h)": intensity.toFixed(2), |
| | | 当前阶段编号: stage, |
| | | 最大阶段编号: maxStage, |
| | | 是否触发泥石流: stage >= 5 ? "是" : "否", |
| | | }); |
| | | |
| | | // 根据最大阶段设置颜色 |
| | | let color = "#D4F2E7"; |
| | | switch (maxStage) { |
| | | case 0: |
| | | color = "#D4F2E7"; |
| | | break; |
| | | case 1: |
| | | color = "#66B3FF"; |
| | | break; |
| | | case 2: |
| | | color = "#99CCFF"; |
| | | break; |
| | | case 3: |
| | | color = "#CCE5FF"; |
| | | break; |
| | | case 4: |
| | | color = "#CC9966"; |
| | | break; |
| | | case 5: |
| | | color = "#B26633"; |
| | | break; |
| | | case 6: |
| | | color = "#663300"; |
| | | break; |
| | | // 更新最大阶段(单向递增) |
| | | colorState.maxStage = Math.max(colorState.maxStage, stage); |
| | | } |
| | | |
| | | updateWaterColor(color); |
| | | 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; |
| | | } |
| | | |
| | | // 计算当前阶段进度 |
| | | 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; |
| | | } |
| | | } |
| | | |
| | | function updateWeatherByProgress() { |