| | |
| | | <template> |
| | | <div class="timeline-container"> |
| | | <div class="controls"> |
| | | <!-- <div @click="endSimulate">结束模拟</div> --> |
| | | <div class="control-btn" @click="skipBackward"> |
| | | <img |
| | | src="@/assets/img/timeline/left.png" |
| | |
| | | :style="{ left: progressPercentage + '%' }" |
| | | ></div> |
| | | <div class="time-markers"> |
| | | |
| | | <div |
| | | v-for="(time, index) in timeMarkers" |
| | | :key="index" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-button @click="endSimulate" style="margin-top: 26px;margin-left: 30px;margin-right: 10px;">结束模拟</el-button> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | watch, |
| | | defineProps, |
| | | onBeforeUnmount, |
| | | inject |
| | | inject, |
| | | } from "vue"; |
| | | import dayjs from "dayjs"; |
| | | import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water"; |
| | |
| | | if (!isPlaying.value && currentTime.value >= duration.value) { |
| | | currentTime.value = 0; |
| | | emit("timeUpdate", progressPercentage.value); |
| | | // earthCtrl.environment.disableEffect("rain"); |
| | | } |
| | | |
| | | isPlaying.value = !isPlaying.value; |
| | |
| | | }; |
| | | |
| | | const startPlayback = () => { |
| | | // earthCtrl.environment.showEffect("rain"); |
| | | clearInterval(playInterval); |
| | | playInterval = setInterval(() => { |
| | | currentTime.value += 600 * playbackRate.value; |
| | |
| | | }; |
| | | |
| | | const stopPlayback = () => { |
| | | // earthCtrl.environment.disableEffect("rain"); |
| | | clearInterval(playInterval); |
| | | }; |
| | | |
| | |
| | | }, delay); |
| | | }); |
| | | const { startSimulate, endSimulate } = inject("simulateActions"); |
| | | |
| | | </script> |
| | | |
| | | <style scoped> |
| | |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | z-index: 99; |
| | | width: 838px; |
| | | width: 878px; |
| | | height: 108px; |
| | | /* background-color: #1a2634; */ |
| | | background: url("@/assets/img/menubar/bar.png"); |