change

wangjuncheng

2025-04-28 9567f017a3423bafafaf5f22ec1e5541d2b0f4bd

 src/components/menu/TimeLine.vue

@@ -82,7 +82,13 @@
  inject,
} from "vue";
import dayjs from "dayjs";
import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
import {
  createWaterPrimitive,
  destoryWaterPrimitive,
  pauseWaterSimulation,
  resumeWaterSimulation,
  setTimeForWaterSimulation,
} from "@/utils/water";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
@@ -105,13 +111,14 @@
const playbackFinished = ref(true);
const currentTime = ref(0);
const duration = ref(60); // 一天的秒数
const playbackRate = ref(8);
const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
const waterTimestamps = ref([]); // 存储时间轴数据
const timeMarkers = ref([]);
const timelineTrack = ref(null);

// 新增标识变量
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;

// 计算属性
@@ -128,35 +135,46 @@
const currentTimeFormatted = computed(() => formatTime(currentTime.value));

// 播放控制
// 播放控制
const togglePlay = () => {
  // 如果当前是停止状态且已经播放完毕，点击时重置时间
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;
    currentTime.value = 0; // 如果已经播放完毕，重置时间

  isPlaying.value = !isPlaying.value;
  emit("isPlaying", isPlaying.value);

  if (isPlaying.value) {
    startPlayback();
    // 如果是从头开始播放
    if (!isWaterPrimitiveCreated.value) {
      // 第一次播放时创建水体模拟层
      createWaterPrimitive({ interval: intervalMap[playbackRate.value] });
      isWaterPrimitiveCreated.value = true; // 标记为已创建
    } else {
      // 后续播放时调用恢复接口
      resumeWaterSimulation();
    }
    if (currentTime.value === 0) emit("playbackFinished", false);
  } else stopPlayback();
  } else {
    stopPlayback();
    pauseWaterSimulation(); // 调用暂停接口
  }
};


const intervalMap = {
  1: 1000, // 1倍速
  2: 500, // 2倍速
  4: 250, // 4倍速
  8: 125, // 8倍速
};
// 播放逻辑
const startPlayback = () => {
  // 根据当前倍速获取对应的 interval
  const interval = intervalMap[playbackRate.value] || 1000; // 默认为1000
  // 调用 createWaterPrimitive 并传递 interval
  createWaterPrimitive({ interval });
  clearInterval(playInterval);
  clearInterval(playInterval); // 确保清除之前的定时器
  playInterval = setInterval(() => {
    // 计算每次增加的时间量
    const timeIncrement = playbackRate.value; // 倍速直接作为增量
    const timeIncrement = playbackRate.value; // 倍速作为增量
    currentTime.value += timeIncrement;
    // 如果超过总时长，则停止播放

    if (currentTime.value >= duration.value) {
      currentTime.value = duration.value; // 停在最后一帧
      stopPlayback();
@@ -164,39 +182,93 @@
      emit("isPlaying", false);
      emit("playbackFinished", true);
    }
    // 触发时间更新事件

    emit("timeUpdate", progressPercentage.value);
  }, 1000); // 每秒更新一次
  }, interval); // 根据速率调整间隔
};

const stopPlayback = () => clearInterval(playInterval);
const stopPlayback = () => {
  clearInterval(playInterval);
};

const skipForward = () =>
  (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒

const skipBackward = () =>
  (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒

const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);

// 设置播放速率
const setPlaybackRate = (rate) => {
  playbackRate.value = rate;
  showSpeedMenu.value = false;
  if (isPlaying.value) stopPlayback(), startPlayback(); // 如果正在播放，则重新启动以应用新的速率
  // 停止当前播放
  stopPlayback();

  // 重置时间轴到初始状态
  currentTime.value = 0; // 时间归零
  emit("timeUpdate", progressPercentage.value);
  isPlaying.value = false;
  // 销毁现有的水体模拟层
  if (isWaterPrimitiveCreated.value) {
    destoryWaterPrimitive();
    isWaterPrimitiveCreated.value = false; // 重置标志变量
  }
  isPlaying.value = false;
  pauseWaterSimulation(); // 调用暂停接口
};
// 时间轴跳转
const seekToPosition = (event) => {
  // 检查是否已经创建了水体模拟层
  if (!isWaterPrimitiveCreated.value) {
    ElMessage({
      message: "请先启动水体模拟后再进行时间轴跳转。",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
  }
  const rect = timelineTrack.value.getBoundingClientRect();
  const percentage = (event.clientX - rect.left) / rect.width;
  // 计算当前点击位置对应的时间值
  currentTime.value = Math.round(percentage * duration.value);
  emit("timeUpdate", progressPercentage.value);
  if (waterTimestamps.value.length > 0) {
    const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(
      currentTime.value,
      "second"
    );
    // 找到最接近的时间戳索引
    const closestIndex = findClosestTimestampIndex(currentTime.value);
    console.log(
      "Clicked timestamp:",
      clickedTimestamp.valueOf(),
      clickedTimestamp.format("YYYY-MM-DD HH:mm:ss")
      "Clicked timestamp index:",
      closestIndex,
      "Time:",
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );

    // 调用跳转接口，传递索引值
    setTimeForWaterSimulation(closestIndex);

    // 如果当前是暂停状态，调用 pauseWaterSimulation
    if (!isPlaying.value) {
      pauseWaterSimulation();
    }
  }
};

// 辅助函数：找到最接近的时间戳索引
function findClosestTimestampIndex(currentTimeValue) {
  let closestIndex = 0;
  let minDiff = Infinity;

  waterTimestamps.value.forEach((timestamp, index) => {
    const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
    if (diff < minDiff) {
      minDiff = diff;
      closestIndex = index;
    }
  });

  return closestIndex;
}

watch(
  () => currentTime.value,
  () => {
@@ -209,6 +281,7 @@
    }
  }
);

// 时间标记生成
function generateTimeMarkers(timestamps) {
  if (!timestamps || timestamps.length === 0) return [];
@@ -222,6 +295,7 @@
      .format("mm:ss")
  );
}

watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
@@ -264,15 +338,18 @@
    });
  }
}

onBeforeUnmount(() => {
  stopPlayback();
  // destoryWaterPrimitive();
  destoryWaterPrimitive();
});

const { endSimulate } = inject("simulateActions");
function handleBack() {
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  // destoryWaterPrimitive();
  isWaterPrimitiveCreated.value = false
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
}
</script>