| | |
| | | <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"> |
| | |
| | | size: 0.7, |
| | | speed: 40, |
| | | density: 35, |
| | | color: '#ADD8E6' |
| | | color: '#ADD8E6' |
| | | }, |
| | | { |
| | | name: '大雨', |
| | |
| | | size: 1.3, |
| | | speed: 90, |
| | | density: 80, |
| | | color: '#ADD8E6' |
| | | color: '#ADD8E6' |
| | | }, |
| | | { |
| | | name: '大暴雨', |
| | |
| | | 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); |
| | | |
| | | // 设置播放速率 |
| | |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | // 根据返回数据的个数去渲染时间轴 |
| | | function updateTimelineRange() { |
| | | if (waterTimestamps.value.length > 0) { |
| | | const [first, last] = [ |