修改图表时间以及将避险点修改为避险场所

guonan

2025-04-28 94dc999e2107401cb9e6c65dd67bc17eecc5e548

 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>
@@ -24,24 +34,40 @@

    <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 class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <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>

@@ -59,7 +85,7 @@
import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from 'element-plus';
import { ElMessage } from "element-plus";

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

@@ -91,7 +117,9 @@
// 计算属性
const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
const progressPercentage = computed(() => (currentTime.value / duration.value) * 100);
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
);
const visibleDates = computed(() =>
  Array.from(
    new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
@@ -102,7 +130,8 @@
// 播放控制
const togglePlay = () => {
  // 如果当前是停止状态且已经播放完毕，点击时重置时间
  if (!isPlaying.value && currentTime.value >= duration.value) currentTime.value = 0;
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;
  isPlaying.value = !isPlaying.value;
  emit("isPlaying", isPlaying.value);
  if (isPlaying.value) {
@@ -113,9 +142,9 @@
};
const intervalMap = {
  1: 1000, // 1倍速
  2: 500,  // 2倍速
  4: 250,  // 4倍速
  8: 125,  // 8倍速
  2: 500, // 2倍速
  4: 250, // 4倍速
  8: 125, // 8倍速
};
const startPlayback = () => {
  // 根据当前倍速获取对应的 interval
@@ -141,8 +170,10 @@
};

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 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;
@@ -155,27 +186,50 @@
  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");
    console.log("Clicked timestamp:", clickedTimestamp.valueOf(), clickedTimestamp.format("YYYY-MM-DD HH:mm:ss"));
    const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(
      currentTime.value,
      "second"
    );
    console.log(
      "Clicked timestamp:",
      clickedTimestamp.valueOf(),
      clickedTimestamp.format("YYYY-MM-DD HH:mm:ss")
    );
  }
};
watch(() => currentTime.value, () => {
  if (waterTimestamps.value.length > 0) {
    currentPlayingTime.value = dayjs(waterTimestamps.value[0])
      .add(currentTime.value, "second")
      .format("YYYY-MM-DD mm:ss");
watch(
  () => currentTime.value,
  () => {
    if (waterTimestamps.value.length > 0) {
      currentPlayingTime.value = dayjs(waterTimestamps.value[0])
        .add(currentTime.value, "second")
        .format("YYYY-MM-DD mm:ss");

      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
});
);
// 时间标记生成
function generateTimeMarkers(timestamps) {
  if (!timestamps || timestamps.length === 0) return [];
  const sorted = [...timestamps].sort((a, b) => dayjs(a).diff(dayjs(b)));
  const interval = Math.floor(dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7);
  return Array.from({ length: 8 }, (_, i) => dayjs(sorted[0]).add(i * interval, "second").format("mm:ss"));
  const interval = Math.floor(
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7
  );
  return Array.from({ length: 8 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("mm:ss")
  );
}
watch(() => waterTimestamps.value, (newTimestamps) => {
  if (newTimestamps.length > 0) timeMarkers.value = generateTimeMarkers(newTimestamps);
}, { immediate: true });
watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
    if (newTimestamps.length > 0)
      timeMarkers.value = generateTimeMarkers(newTimestamps);
  },
  { immediate: true }
);

onMounted(async () => {
  try {
@@ -184,7 +238,9 @@
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      currentPlayingTime.value = dayjs(timestamps[0]).format("YYYY-MM-DD HH:mm:ss");
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    }
  } catch (error) {
    console.error("Error loading water simulation data:", error);
@@ -193,21 +249,30 @@

function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
    const [first, last] = [waterTimestamps.value[0], waterTimestamps.value.at(-1)];
    props.waterSimulateParams.date = [dayjs(first).toISOString(), dayjs(last).toISOString()];
    const [first, last] = [
      waterTimestamps.value[0],
      waterTimestamps.value.at(-1),
    ];
    props.waterSimulateParams.date = [
      dayjs(first).toISOString(),
      dayjs(last).toISOString(),
    ];
    duration.value = dayjs(last).diff(dayjs(first), "second");
    console.log("Updated timeline range:", { ...props.waterSimulateParams, duration: duration.value });
    console.log("Updated timeline range:", {
      ...props.waterSimulateParams,
      duration: duration.value,
    });
  }
}
onBeforeUnmount(() => {
  stopPlayback();
  destoryWaterPrimitive();
  // destoryWaterPrimitive();
});
const { endSimulate } = inject("simulateActions");
function handleBack() {
  ElMessage({ message: '模拟进程正在关闭中...', type: 'success' }); // 显示消息通知用户模拟进程正在关闭
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  destoryWaterPrimitive();
  // destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
}
</script>