修改

guonan

2025-04-29 6a49df434afa2dee8e38063ad96ac118f53429ef

修改

 src/components/menu/TimeLine.vue

@@ -2,20 +2,30 @@
  <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>
@@ -25,21 +35,39 @@
    <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>

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

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

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

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


const intervalMap = {
  1: 1000, // 1倍速
@@ -188,13 +218,19 @@
  currentTime.value = 0; // 时间归零
  emit("timeUpdate", progressPercentage.value);
  isPlaying.value = false;
  emit("isPlaying", false);

  // 销毁现有的水体模拟层
  if (isWaterPrimitiveCreated.value) {
    destoryWaterPrimitive();
    isWaterPrimitiveCreated.value = false; // 重置标志变量
  }
  isPlaying.value = false;
  emit("isPlaying", false);

  pauseWaterSimulation(); // 调用暂停接口
  EventBus.emit("clear-echart");
  EventBus.emit("reset-table");
};
// 时间轴跳转
const seekToPosition = (event) => {
@@ -237,7 +273,10 @@
  let minDiff = Infinity;

  waterTimestamps.value.forEach((timestamp, index) => {
    const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
    const diff = Math.abs(
      dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
        currentTimeValue
    );
    if (diff < minDiff) {
      minDiff = diff;
      closestIndex = index;
@@ -250,11 +289,11 @@
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
      console.log("选中方案已改变:", newVal);
      // 你可以触发一些逻辑，比如调接口等
    }
  }
)
);
watch(
  () => currentTime.value,
  () => {
@@ -334,7 +373,7 @@
function handleBack() {
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  isWaterPrimitiveCreated.value = false
  isWaterPrimitiveCreated.value = false;
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
}

 src/components/monifangzhen/echartInfo.vue

@@ -13,11 +13,6 @@
      <div class="echartCont">
        <p>断面模拟</p>
        <div class="echartBox">
          <!-- <div>
            <button id="startButton">开始加载</button>
            <button id="pauseButton">暂停加载</button>
            <button id="resetButton">重置加载</button>
          </div> -->
          <div id="echarts2" style="width: 100%; height: 100%"></div>
        </div>
      </div>
@@ -155,7 +150,11 @@
});
EventBus.on("clear-echart", () => {
  clearEchartData(); // 调用清除函数
  chart1Data.value.resetLoading();
  chart2Data.value.resetLoading();
});


// 清除 echart1/2数据的函数
const clearEchartData = () => {
  if (myChart1) {