| | |
| | | <div>专题渲染: |
| | | <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px" |
| | | :disabled="!isPlaying || !isWaterPrimitiveCreated" /> |
| | | <!-- active-text="开" inactive-text="关" --> |
| | | <!-- active-text="开" inactive-text="关" --> |
| | | </div> |
| | | </div> |
| | | <div class="timeline-track" ref="timelineTrack" @click="seekToPosition"> |
| | |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation" |
| | | style="margin-top: 12px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;"></ratelevel> |
| | | <el-button @click="handleBack" style="margin-top: 3px; margin-left: 30px; margin-right: 10px">结束模拟</el-button> |
| | | <div style="display: flex;"> |
| | | <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="margin-top: 12px; margin-left: 16px; margin-right: 20px;justify-content: flex-end;" /> |
| | | |
| | | </div> |
| | | <el-button @click="handleBack" |
| | | style="margin-top: 3px; margin-left: 28px; margin-right: 10px;width: 75%;height: 30%;">结束模拟</el-button> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | reactive |
| | | } from "vue"; |
| | | import ratelevel from "@/components/menu/flowRate_waterLevel.vue"; |
| | | import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue"; |
| | | |
| | | import dayjs from "dayjs"; |
| | | import { |
| | |
| | | // 响应式状态 |
| | | let serviceInfo = ref(null); // 当前方案的服务地址 |
| | | const ratelevelRef = ref(null); // 获取子组件实例的引用 |
| | | const crossRef = ref(null); // 获取子组件实例的引用 |
| | | const currentPlayingTime = ref(""); // 当前播放时间 |
| | | const sendCurrentPlayingTime = ref(""); // 当前播放时间 |
| | | const isPlaying = ref(false); |
| | |
| | | rainColor: "#99B3CC", |
| | | rainDensity: 30 // 雨的密度 |
| | | }); |
| | | let minFlowRate = ref() |
| | | let maxFlowRate = ref() |
| | | // 计算属性 |
| | | const progressPercentage = computed( |
| | | () => (currentTime.value / duration.value) * 100 |
| | |
| | | baseUrl: `/simu/${serviceInfo}`, |
| | | // baseUrl: `/simu/c2h1dc`, |
| | | interval: intervalMap[playbackRate.value], |
| | | colorRender: isColorRenderEnabled.value |
| | | colorRender: isColorRenderEnabled.value, |
| | | minFlowRate, |
| | | maxFlowRate, |
| | | }); |
| | | isWaterPrimitiveCreated.value = true; |
| | | } else { |
| | | resumeWaterSimulation(); |
| | | // toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染 |
| | | toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染 |
| | | } |
| | | |
| | | if (currentTime.value === 0) emit("playbackFinished", false); |
| | |
| | | min: 10, |
| | | max: 24.9, |
| | | size: 0.7, |
| | | speed: 40, |
| | | density: 35, |
| | | color: '#ADD8E6' |
| | | speed: 28, |
| | | density: 23, |
| | | color: '#ADD8E6' |
| | | }, |
| | | { |
| | | name: '大雨', |
| | | min: 25, |
| | | max: 49.9, |
| | | size: 1.0, |
| | | speed: 70, |
| | | density: 60, |
| | | speed: 36, |
| | | density: 31, |
| | | color: '#ADD8E6' |
| | | }, |
| | | { |
| | |
| | | min: 50, |
| | | max: 99.9, |
| | | size: 1.3, |
| | | speed: 90, |
| | | density: 80, |
| | | color: '#ADD8E6' |
| | | speed: 42, |
| | | density: 39, |
| | | color: '#ADD8E6' |
| | | }, |
| | | { |
| | | name: '大暴雨', |
| | | min: 100, |
| | | size: 1.6, |
| | | speed: 110, |
| | | density: 100, |
| | | speed: 50, |
| | | density: 47, |
| | | color: '#ADD8E6' |
| | | } |
| | | ]; |
| | |
| | | } |
| | | } |
| | | // 默认无雨状态 |
| | | return { name: '无雨', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' }; |
| | | return { name: '无雨', size: 0.3, speed: 10, density: 10, color: '#F0F8FF' }; |
| | | } |
| | | // 根据播放进度更新天气效果(已优化) |
| | | let lastUsedIndex = -1; // 缓存上一次使用的索引,防止重复更新 |
| | | let lastRainValue = null; |
| | | function updateWeatherByProgress() { |
| | | if (rainFallValues.value.length === 0) return; |
| | | console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息 |
| | | // console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息 |
| | | const progress = currentTime.value / duration.value; |
| | | const floatIndex = progress * (rainFallValues.value.length - 1); |
| | | const index = Math.floor(floatIndex); // 当前索引 |
| | |
| | | const nextRain = rainFallValues.value[nextIndex]; |
| | | // 启用插值(alpha 平滑过渡) |
| | | const alpha = floatIndex - index; |
| | | const rainValue = currentRain + (nextRain - currentRain) * alpha; |
| | | // const rainValue = currentRain + (nextRain - currentRain) * alpha; |
| | | const rainValue = currentRain + (nextRain - currentRain) |
| | | // 打印当前处理的雨量数据 |
| | | // console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`); |
| | | // 如果当前索引未变化且插值差异不大,跳过重复更新 |
| | | if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) { |
| | | console.log('由于数据无显著变化,跳过本次更新'); |
| | | // console.log('由于数据无显著变化,跳过本次更新'); |
| | | return; |
| | | } |
| | | |
| | |
| | | // 获取对应的雨形配置 |
| | | const rainLevel = getRainLevel(rainValue); |
| | | |
| | | if (rainLevel.name === '无雨') { |
| | | // 无雨状态:清除雨效 |
| | | mapUtils.delRain(); |
| | | console.log('执行了无雨状态,清除了雨效'); |
| | | return; |
| | | } |
| | | // if (rainLevel.name === '无雨') { |
| | | // // 无雨状态:清除雨效 |
| | | // mapUtils.delRain(); |
| | | // console.log('执行了无雨状态,清除了雨效'); |
| | | // return; |
| | | // } |
| | | |
| | | // 非无雨状态:构建雨滴参数并更新雨效 |
| | | const rainParams = { |
| | |
| | | clearInterval(playInterval); |
| | | }; |
| | | |
| | | const skipForward = () => |
| | | (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒 |
| | | const skipForward = () => { |
| | | if (waterTimestamps.value.length === 0) return; |
| | | const currentIndex = findClosestTimestampIndex(currentTime.value); |
| | | const nextIndex = currentIndex + 1; |
| | | if (nextIndex >= waterTimestamps.value.length) { |
| | | return; |
| | | } |
| | | const baseTimestamp = waterTimestamps.value[0]; |
| | | currentTime.value = (waterTimestamps.value[nextIndex] - baseTimestamp) / 1000; |
| | | setTimeForWaterSimulation(nextIndex); |
| | | if (!isPlaying.value) pauseWaterSimulation(); |
| | | }; |
| | | |
| | | const skipBackward = () => |
| | | (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒 |
| | | |
| | | const skipBackward = () => { |
| | | if (waterTimestamps.value.length === 0) return; |
| | | const currentIndex = findClosestTimestampIndex(currentTime.value); |
| | | const prevIndex = currentIndex - 1; |
| | | if (prevIndex < 0) { |
| | | return; |
| | | } |
| | | const baseTimestamp = waterTimestamps.value[0]; |
| | | currentTime.value = (waterTimestamps.value[prevIndex] - baseTimestamp) / 1000; |
| | | setTimeForWaterSimulation(prevIndex); |
| | | if (!isPlaying.value) pauseWaterSimulation(); |
| | | }; |
| | | const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value); |
| | | |
| | | // 设置播放速率 |
| | | const setPlaybackRate = (rate) => { |
| | | isColorRenderEnabled.value = false |
| | | playbackRate.value = rate; |
| | | showSpeedMenu.value = false; |
| | | // 停止当前播放 |
| | |
| | | // 当前方案的所有信息 |
| | | const schemeInfo = selectedScheme.value; |
| | | serviceInfo = schemeInfo.serviceName; |
| | | |
| | | // console.log('获取到的 serviceName:', serviceInfo); |
| | | getRainfallData() |
| | | // 根据layer.json去获取时间轴信息 |
| | | const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo); |
| | | console.log(timestamps,timestamps.length,'ddddddddddddddddddddddddddddddddddddddddddddd'); |
| | | const { waterTimestamps: timestamps, watersMaxHeight, watersMinHeight } = await fetchWaterSimulationData(serviceInfo); |
| | | console.log('当前方案下的最大水位深度和最小水位深度',watersMaxHeight,watersMinHeight); |
| | | |
| | | // 现在是按照总共有多少个点来渲染时间轴 |
| | | if (timestamps) { |
| | | waterTimestamps.value = timestamps; |
| | | updateTimelineRange(); |
| | |
| | | "YYYY-MM-DD HH:mm:ss" |
| | | ); |
| | | } |
| | | minFlowRate = watersMinHeight |
| | | maxFlowRate = watersMaxHeight |
| | | } catch (error) { |
| | | console.error("Error loading water simulation data:", error); |
| | | ElMessage({ |
| | |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | // 根据返回数据的个数去渲染时间轴 |
| | | function updateTimelineRange() { |
| | | if (waterTimestamps.value.length > 0) { |
| | | const [first, last] = [ |
| | |
| | | isWaterPrimitiveCreated.value = false; |
| | | if (ratelevelRef.value) { |
| | | ratelevelRef.value.endCalculation(); |
| | | ratelevelRef.value.stopPicking(); |
| | | } |
| | | if (crossRef.value) { |
| | | crossRef.value.clearPoints(); |
| | | console.log('执行删除点功能'); |
| | | |
| | | } |
| | | emit("isColorRender", false); |
| | | setTimeout(() => { |
| | |
| | | }, 3000); |
| | | destoryWaterPrimitive(); |
| | | EventBus.emit("hide-schemeInfo"); |
| | | EventBus.emit("clear-water-depth"); |
| | | EventBus.emit("clear-water-velocity"); |
| | | ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); |
| | | } |
| | | </script> |
| | |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | z-index: 99; |
| | | width: 38%; |
| | | width: 44%; |
| | | height: 10%; |
| | | /* background-color: #1a2634; */ |
| | | background: url("@/assets/img/menubar/bar.png"); |
| | |
| | | .timeline { |
| | | margin-top: 10px; |
| | | position: relative; |
| | | flex: 1; |
| | | flex: 0.9; |
| | | } |
| | | |
| | | .dates { |