1

wangjuncheng

2025-04-29 50a7a0eda3810e97bb19f9b989b727d834bcc24c

1

 src/components/menu/TimeLine.vue

@@ -2,30 +2,20 @@
  <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">
        <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>
@@ -35,39 +25,21 @@
    <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>
      <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="time-markers">
          <div
            v-for="(time, index) in timeMarkers"
            :key="index"
            class="time-marker"
          >
          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
            {{ time }}
          </div>
        </div>
      </div>
    </div>
    <el-button
      @click="handleBack"
      style="margin-top: 26px; margin-left: 30px; margin-right: 10px"
      >结束模拟</el-button
    >
    <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">结束模拟</el-button>
  </div>
</template>

@@ -93,7 +65,7 @@
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
import { useSimStore } from '@/store/simulation'
import { storeToRefs } from 'pinia' 
import { storeToRefs } from 'pinia'
const simStore = useSimStore()
const { selectedScheme } = storeToRefs(simStore)

@@ -151,10 +123,9 @@
    startPlayback();
    if (!isWaterPrimitiveCreated.value) {
      // 第一次播放时创建水体模拟层
      console.log(selectedScheme.value,'这里是当前方案的全部信息');
      
      createWaterPrimitive({ interval: intervalMap[playbackRate.value] });
      
      console.log(selectedScheme.value, '这里是当前方案的全部信息');

      createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc",});
      isWaterPrimitiveCreated.value = true; // 标记为已创建
    } else {
      // 后续播放时调用恢复接口
@@ -275,9 +246,16 @@

  return closestIndex;
}

watch(
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
      // 你可以触发一些逻辑，比如调接口等
    }
  }
)
watch(
  () => currentTime.value,
  () => {
    if (waterTimestamps.value.length > 0) {

 src/utils/water.js

@@ -19,16 +19,16 @@
 * @param {number} options.interval - 水体模拟的时间间隔（单位：毫秒）
 */
export function createWaterPrimitive(options = {}) {
  const { interval = 1000 } = options; // 默认 interval 为 1000

  const { baseUrl = "/simu/c2h1dc", interval = 1000 } = options; // 默认 baseUrl 和 interval
  
  water = earthCtrl.simulate.createWaterSimulateLayer({
    baseUrl: "/simu/c2h1dc", // 仿真服务 URL
    interval, // 动态设置 interval
    baseUrl,     // 仿真服务 URL
    interval,    // 动态设置 interval
    color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"),
    loop: false, // 是否循环播放
    callback: timeCallback, // 回调函数
  });
  console.log(`Water simulation started with interval: ${interval}ms`);
  console.log(`Water simulation started with baseUrl: ${baseUrl}, interval: ${interval}ms`);
}

/**
@@ -103,5 +103,5 @@
 * @param {number} timeStamp - 当前时间戳
 */
function timeCallback(timeStamp) {
  console.log(`Current timestamp: ${timeStamp}`);
  // console.log(`Current timestamp: ${timeStamp}`);
}