1

wangjuncheng

2025-04-29 50a7a0eda3810e97bb19f9b989b727d834bcc24c

 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>

@@ -82,10 +54,20 @@
  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";
import { useSimStore } from '@/store/simulation'
import { storeToRefs } from 'pinia'
const simStore = useSimStore()
const { selectedScheme } = storeToRefs(simStore)

const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);

@@ -105,13 +87,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 +111,48 @@
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) {
      // 第一次播放时创建水体模拟层
      console.log(selectedScheme.value, '这里是当前方案的全部信息');

      createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc",});
      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 +160,101 @@
      emit("isPlaying", false);
      emit("playbackFinished", true);
    }
    // 触发时间更新事件

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

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(
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
      // 你可以触发一些逻辑，比如调接口等
    }
  }
)
watch(
  () => currentTime.value,
  () => {
@@ -209,6 +267,7 @@
    }
  }
);

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

watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
@@ -264,15 +324,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>