修改跳转

wangjuncheng

2025-05-23 043c56f2e3a3507bdc439b7df7c116ce2eeea173

 src/components/menu/TimeLine.vue

@@ -31,7 +31,7 @@
        <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">
@@ -162,7 +162,7 @@
      isWaterPrimitiveCreated.value = true;
    } else {
      resumeWaterSimulation();
      // toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染
      toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染
    }

    if (currentTime.value === 0) emit("playbackFinished", false);
@@ -295,7 +295,7 @@
    size: 0.7,
    speed: 40,
    density: 35,
    color: '#ADD8E6' 
    color: '#ADD8E6'
  },
  {
    name: '大雨',
@@ -313,7 +313,7 @@
    size: 1.3,
    speed: 90,
    density: 80,
    color: '#ADD8E6' 
    color: '#ADD8E6'
  },
  {
    name: '大暴雨',
@@ -385,16 +385,36 @@
  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;
  // 停止当前播放
@@ -517,7 +537,7 @@
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
    console.log(timestamps,timestamps.length,'ddddddddddddddddddddddddddddddddddddddddddddd');
    // 现在是按照总共有多少个点来渲染时间轴
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
@@ -535,7 +555,7 @@
    });
  }
});

// 根据返回数据的个数去渲染时间轴
function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
    const [first, last] = [