1

wangjuncheng

2025-06-24 ab5be19d6c19a8eb83d4876ddf6a6617013bf25d

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

    <div class="timeline">
      <div class="dates">
        <div
          v-for="(date, index) in visibleDates"
          :key="index"
          class="date-label"
        >
          {{ formatDate(date) }}
        <div class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
          <!-- {{ formatDate(date) }} -->
        </div>
        <div>
          专题渲染:
          <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top: -3px"
            :disabled="!isPlaying || !isWaterPrimitiveCreated" />
          <!-- active-text="开" inactive-text="关" -->
        </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="scale-markers">
          <div class="scale-marker" style="left: 0%"></div>
          <div class="scale-marker" style="left: 25%"></div>
          <div class="scale-marker" style="left: 50%"></div>
          <div class="scale-marker" style="left: 75%"></div>
          <div class="scale-marker" style="left: 100%"></div>
        </div>
        <div class="time-markers">
          <div
            v-for="(time, index) in timeMarkers"
            :key="index"
            class="time-marker"
          >
            {{ time }}
          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
            <div class="date-part">{{ time.split(" ")[0] }}</div>
            <div class="time-part">{{ time.split(" ")[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-button @click="endSimulate" style="margin-top: 26px;margin-left: 30px;margin-right: 10px;">结束模拟</el-button>
    <div>
      <div style="display: flex">
        <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
          @finish-calculation="handleFinishCalculation" style="
            margin-top: 12px;
            margin-left: 28px;
            margin-right: 10px;
            justify-content: flex-end;
          " />
        <crossanalysis ref="crossRef" style="
            margin-top: 12px;
            margin-left: 16px;
            margin-right: 20px;
            justify-content: flex-end;
          " />
      </div>
      <el-button @click="handleBack" style="
          margin-top: 3px;
          margin-left: 28px;
          margin-right: 10px;
          width: 75%;
          height: 30%;
        ">结束模拟</el-button>
    </div>
  </div>
</template>

@@ -70,17 +85,43 @@
import {
  ref,
  computed,
  onUnmounted,
  onMounted,
  watch,
  defineProps,
  onBeforeUnmount,
  inject,
  reactive,
} from "vue";
import dayjs from "dayjs";
import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
import { getRainfall } from "@/api/index";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";

import dayjs from "dayjs";
import {
  createWaterPrimitive,
  destoryWaterPrimitive,
  pauseWaterSimulation,
  resumeWaterSimulation,
  setTimeForWaterSimulation,
  toggleWaterColorRender,
  updateWaterColor,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
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, frameNum } = storeToRefs(simStore);

const emit = defineEmits([
  "timeUpdate",
  "isPlaying",
  "playbackFinished",
  "isColorRender",
]);
// 定义props
const props = defineProps({
  waterSimulateParams: {
    type: Object,
@@ -90,219 +131,562 @@
  },
});
// 响应式状态
let serviceInfo = ref(null); // 当前方案的服务地址
const ratelevelRef = ref(null); // 获取子组件实例的引用
const crossRef = ref(null); // 获取子组件实例的引用
const currentPlayingTime = ref(""); // 当前播放时间
const sendCurrentPlayingTime = ref(""); // 当前播放时间
const isPlaying = ref(false);
const playbackFinished = ref(true);
const currentTime = ref(0);
const duration = ref(86400); // 一天的秒数
const duration = ref(60); // 一天的秒数
const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);

const timeMarkers = ref([
  "00:00",
  "03:19",
  "06:39",
  "09:59",
  "13:19",
  "16:39",
  "19:59",
  "23:19",
]);
const waterTimestamps = ref([]); // 存储时间轴数据
const timeMarkers = ref([]);
const timelineTrack = ref(null);

const startDate = computed(() => {
  return dayjs(props.waterSimulateParams.date[0]);
});
const endDate = computed(() => {
  return dayjs(props.waterSimulateParams.date[1]);
});
const isColorRenderEnabled = ref(false); // 假设这是你的颜色渲染开关状态
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;

let rainTotalInfo = ([]);
const isRainEnabled = ref(false);
const rainParams = reactive({
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30, // 雨的密度
});
let minFlowRate = ref();
let maxFlowRate = ref();
// 计算属性
const progressPercentage = computed(() => {
  return (currentTime.value / duration.value) * 100;
});

const visibleDates = computed(() => {
  // 生成时间轴上显示的日期
  const dates = [];
  const currentDateValue = dayjs(startDate.value);
  const endDateValue = dayjs(endDate.value);

  // let tempDate = currentDateValue
  // while (tempDate.isSame(endDateValue) || tempDate.isBefore(endDateValue)) {
  //   dates.push(tempDate.toDate())
  //   tempDate = tempDate.add(1, 'day')
  // }

  return [currentDateValue, endDateValue];
});

const currentTimeFormatted = computed(() => {
  return formatTime(currentTime.value);
});

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")))
  ).map((date) => dayjs(date).toDate())
);
// 播放控制
const togglePlay = () => {
  // 如果当前是停止状态且已经播放完毕，点击时重置时间
  if (!isPlaying.value && currentTime.value >= duration.value) {
  // 这里应该再设定几个限制，如果缺少什么数据，无法进行仿真
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;
    emit("timeUpdate", progressPercentage.value);
    // earthCtrl.environment.disableEffect("rain");
  }

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

  if (isPlaying.value) {
    startPlayback();
    // 如果是从头开始播放
    if (currentTime.value === 0) {
      emit("playbackFinished", false);

    if (!isWaterPrimitiveCreated.value) {
      // console.log(serviceInfo, '这里是当前方案的服务信息！');
      // 这里通过water.js中去发送请求获取水面模拟
      createWaterPrimitive({
        baseUrl: `/simu/${serviceInfo}`,
        // baseUrl: `/simu/c2h1dc`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value,
        minFlowRate,
        maxFlowRate,
      });
      isWaterPrimitiveCreated.value = true;
    } else {
      resumeWaterSimulation();
      toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染
    }

    if (currentTime.value === 0) emit("playbackFinished", false);

    if (isRainEnabled.value) {
      mapUtils.toggleRain(rainParams, true);
    }
  } else {
    stopPlayback();
    pauseWaterSimulation();

    isRainEnabled.value = true;
    setTimeout(() => {
      mapUtils.delRain();
    }, 3000);
  }
};

// 颜色渲染切换事件
const handleColorRenderChange = (enabled) => {
  if (!isPlaying.value) {
    ElMessage({
      message: "请先启动水体模拟后再进行专题效果切换。",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
  }
  if (isWaterPrimitiveCreated.value) {
    console.log("当前是否开启专题渲染：", enabled);
    emit("isColorRender", enabled);
    toggleWaterColorRender(enabled);
  }
};
const intervalMap = {
  1: 1000, // 1倍速
  2: 500, // 2倍速
  4: 250, // 4倍速
  8: 125, // 8倍速
};
// 播放逻辑
const startPlayback = () => {
  // earthCtrl.environment.showEffect("rain");
  clearInterval(playInterval);

  playInterval = setInterval(() => {
    currentTime.value += 600 * playbackRate.value;
    // emit("playbackFinished", true);
    // 找到当前时间对应的索引
    const currentIndex = findClosestTimestampIndex(currentTime.value);
    const nextIndex = currentIndex + 1;

    if (currentTime.value >= duration.value) {
      emit("playbackFinished", false);

      currentTime.value = duration.value; // 停在最后一帧
      stopPlayback(); // 停止播放
      isPlaying.value = false; // 更新播放状态
      emit("isPlaying", isPlaying.value); // 通知播放状态变化
      emit("playbackFinished", true); // 通知播放完成
      emit("timeUpdate", progressPercentage.value); // 更新进度条位置
    // 如果已经是最后一个时间点，停止播放
    if (nextIndex >= waterTimestamps.value.length) {
      currentTime.value = duration.value;
      stopPlayback();
      isPlaying.value = false;
      emit("isPlaying", false);
      emit("playbackFinished", true);
      return;
    }

    emit("timeUpdate", progressPercentage.value);
  }, 1000);
};
    // 更新时间为下一个时间点的时间差（秒）
    const nextTimestamp = waterTimestamps.value[nextIndex];
    const baseTimestamp = waterTimestamps.value[0];
    currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

    // 触发更新
    updateWaterColorByTime()
    updateWeatherByProgress();
    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100);
  }, 1000 / playbackRate.value); // 根据播放速率调整间隔
};
// 降雨变化部分
// 降雨数据相关变量
let rainFallValues = ref([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let maxRainValue = ref(-Infinity);
// 获取降雨数据
function getRainfallData() {
  if (!selectedScheme.value || !selectedScheme.value.data) {
    console.warn("selectedScheme 或 data 不存在");
    return;
  }
  // 注意：有时 data 可能是一个字符串（例如 JSON 字符串）
  let data = selectedScheme.value.data;
  // 如果是字符串，则尝试解析成对象
  if (typeof data === "string") {
    try {
      data = JSON.parse(data);
      console.log("解析后的降雨数据：", data);
    } catch (e) {
      console.error("data 不是有效的 JSON 字符串");
      return;
    }
  }
  // 打印降雨强度的单位
  console.log("降雨强度的单位是：", data.intensityUnit);
  // 根据 intensityUnit 调整 rainfalls 中的 intensity 值
  if (data.intensityUnit === "mm/min") {
    data.rainfalls.forEach((r) => (r.intensity *= 60));
    console.log("将 mm/min 转换为 mm/h 后的 rainfalls:", data.rainfalls);
  } else if (data.intensityUnit === "mm/5min") {
    data.rainfalls.forEach((r) => (r.intensity *= 12));
    console.log("将 mm/5min 转换为 mm/h 后的 rainfalls:", data.rainfalls);
  } else if (data.intensityUnit !== "mm/h") {
    console.warn("未知的 intensity 单位，无法进行转换");
  }

  const rainfallList = data.rainfalls;
  console.log("最终的 rainfallList:", rainfallList);
  rainTotalInfo.value = rainfallList

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.intensity);
  minRainValue.value = Math.min(...rainFallValues.value);
  maxRainValue.value = Math.max(...rainFallValues.value);
  console.log(
    "当前方案下最小雨量和最大雨量：",
    minRainValue.value,
    maxRainValue.value
  );
}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
  {
    name: "小雨",
    min: 0.1,
    max: 9.9,
    size: 0.5, // 雨滴大小：更小
    speed: 20, // 下落速度：更慢
    density: 15, // 雨滴密度：更稀疏
    color: "#ADD8E6", // 浅蓝色，象征轻柔的小雨
  },
  {
    name: "中雨",
    min: 10,
    max: 24.9,
    size: 0.6,
    speed: 24,
    density: 18,
    color: "#ADD8E6",
  },
  {
    name: "大雨",
    min: 25,
    max: 49.9,
    size: 0.7,
    speed: 28,
    density: 21,
    color: "#ADD8E6",
  },
  {
    name: "暴雨",
    min: 50,
    max: 99.9,
    size: 0.8,
    speed: 32,
    density: 24,
    color: "#ADD8E6",
  },
  {
    name: "大暴雨",
    min: 100,
    size: 0.9,
    speed: 36,
    density: 27,
    color: "#ADD8E6",
  },
];
// 根据降雨量返回对应的雨形配置
function getRainLevel(rainValue) {
  for (let level of rainLevels) {
    if (
      level.min <= rainValue &&
      (level.max === undefined || rainValue <= level.max)
    ) {
      return level;
    }
  }
  // 默认无雨状态
  
  return { name: "无雨", size: 0.3, speed: 10, density: 10, color: "#F0F8FF" };
}
// 根据播放进度更新天气效果（已优化）
let lastUsedIndex = -1; // 缓存上一次使用的索引，防止重复更新
let lastRainValue = null;
function updateWaterColorByTime() {
  if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;
  const progress = currentTime.value / duration.value;
  const floatIndex = progress * (rainTotalInfo.value.length - 1);
  const index = Math.floor(floatIndex);
  const nextIndex = Math.min(index + 1, rainTotalInfo.value.length - 1);
  const currentData = rainTotalInfo.value[index];
  const nextData = rainTotalInfo.value[nextIndex];
  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  const currentTotal = currentData.total;
  const nextTotal = nextData.total;
  const total = currentTotal + (nextTotal - currentTotal) * alpha;
  // 根据 total 设置颜色
  let color = '#D4F2E7'; // 默认蓝色

  if (total >= 150) {
    color = '#663300'; // 黄 - 大雨
  } else if (total >= 125) {
    color = '#B26633'; // 黄绿 - 中雨
  } else if (total >= 100) {
    color = '#CC9966'; // 绿 - 中雨
  } else if (total >= 75) {
    color = '#CCE5FF'; // 青绿 - 小雨
  } else if (total >= 50) {
    color = '#99CCFF'; // 天蓝 - 小雨
  } else if (total >= 25) {
    color = '#66B3FF'; // 浅蓝 - 微量
  }
  // console.log(`当前 total: ${total.toFixed(2)}, 颜色: ${color}`);
  // updateWaterColor(color)
}

function updateWeatherByProgress() {
  if (rainFallValues.value.length === 0) return;
  // console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息
  const progress = currentTime.value / duration.value;
  const floatIndex = progress * (rainFallValues.value.length - 1);
  const index = Math.floor(floatIndex); // 当前索引
  const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1); // 下一索引
  const currentRain = rainFallValues.value[index];
  const nextRain = rainFallValues.value[nextIndex];
  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain);
  // 打印当前处理的雨量数据
  console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
  if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
    // console.log('由于数据无显著变化，跳过本次更新');
    return;
  }

  lastUsedIndex = index;
  lastRainValue = rainValue;

  // 获取对应的雨形配置
  const rainLevel = getRainLevel(rainValue);

  // if (rainLevel.name === '无雨') {
  //   // 无雨状态：清除雨效
  //   mapUtils.delRain();
  //   console.log('执行了无雨状态，清除了雨效');
  //   return;
  // }

  // 非无雨状态：构建雨滴参数并更新雨效
  const rainParams = {
    rainSize: rainLevel.size,
    rainSpeed: rainLevel.speed,
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color,
  };
  console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
const stopPlayback = () => {
  // earthCtrl.environment.disableEffect("rain");
  clearInterval(playInterval);
};

const skipForward = () => {
  // 向前跳转10分钟
  currentTime.value = Math.min(currentTime.value + 600, duration.value);
  emit("timeUpdate", progressPercentage.value);
  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 = () => {
  // 向后跳转10分钟
  currentTime.value = Math.max(currentTime.value - 600, 0);
  emit("timeUpdate", progressPercentage.value);
  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 toggleSpeedMenu = () => {
  showSpeedMenu.value = !showSpeedMenu.value;
};

// 设置播放速率
const setPlaybackRate = (rate) => {
  isColorRenderEnabled.value = false;
  playbackRate.value = rate;
  showSpeedMenu.value = false;

  if (isPlaying.value) {
    stopPlayback();
    startPlayback();
  }
};

const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  return `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
};

const formatDate = (date) => {
  return dayjs(date).format("YYYY-MM-DD");
};

const seekToPosition = (event) => {
  const rect = timelineTrack.value.getBoundingClientRect();
  const clickPosition = event.clientX - rect.left;
  const percentage = clickPosition / rect.width;

  currentTime.value = percentage * duration.value;
  // 停止当前播放
  stopPlayback();
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);
  // 重置时间轴到初始状态
  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 rainFallData = ref([]);
function getRainfallData() {
  getRainfall().then((res) => {
    // rainFallData.value = res.data.map(item => {
    //   return dayjs(item.time).format("HH:mm")
    // })

    // const rainfallData = res.data.map(item => {
    //   return item.rainfall
    // })
    rainFallData.value = res.data;
  });
}

let mockTimer = null;
let currentRainfall = ref(0.0001);
function randomMockWater() {
  let delay = (3 / playbackRate.value) * 1000;
  if (delay < 1000) {
    delay = 1000;
// 时间轴跳转
const seekToPosition = (event) => {
  if (!isWaterPrimitiveCreated.value) {
    ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。");
    return;
  }
  if (mockTimer) {
    clearImmediate(mockTimer);
    mockTimer = null;
  }
  mockTimer = setTimeout(() => {
    const rainfall = rainFallData.value.find(
      (item) =>
        dayjs(item.time).format("HH:mm:ss") == currentTimeFormatted.value
    );
    if (rainfall && rainfall.total) {
      // console.log(rainfall.total);

      createWaterPrimitive(rainfall.total / 50000);
  const rect = timelineTrack.value.getBoundingClientRect();
  const percentage = (event.clientX - rect.left) / rect.width;
  const targetTime = Math.round(percentage * duration.value);

  // 直接找到最近的 timestamp 索引
  const closestIndex = findClosestTimestampIndex(targetTime);
  const baseTimestamp = waterTimestamps.value[0];
  currentTime.value =
    (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;

  // 更新水体模拟时间
  setTimeForWaterSimulation(closestIndex);
  if (!isPlaying.value) pauseWaterSimulation();
};
// 辅助函数：找到最接近的时间戳索引
function findClosestTimestampIndex(currentTimeValue) {
  if (waterTimestamps.value.length === 0) return 0;

  // 计算当前时间对应的毫秒时间戳
  const baseTime = waterTimestamps.value[0];
  const currentTimestamp = baseTime + currentTimeValue * 1000;

  // 找到最接近的 timestamp 索引
  let closestIndex = 0;
  let minDiff = Infinity;

  waterTimestamps.value.forEach((timestamp, index) => {
    const diff = Math.abs(timestamp - currentTimestamp);
    if (diff < minDiff) {
      minDiff = diff;
      closestIndex = index;
    }
  }, delay);
  });

  return closestIndex;
}
watch(
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log("选中方案已改变:", newVal);
    }
  }
);
watch(
  () => currentTime.value,
  () => {
    randomMockWater();
    if (waterTimestamps.value.length > 0) {
      sendCurrentPlayingTime.value = dayjs(waterTimestamps.value[0])
        .add(currentTime.value, "second")
        .valueOf(); // 使用 valueOf() 获取原始时间戳

      // 更新 currentPlayingTime 格式化后的时间字符串
      currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
);

// 定义组件事件
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
// 时间标记生成
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") / 4
  );
  return Array.from({ length: 5 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("MM-DD HH:mm:ss")
  );
}

// 初始化时触发一次时间更新，确保父组件能获取初始时间
onMounted(() => {
  getRainfallData();
  emit("timeUpdate", progressPercentage.value);
watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
    if (newTimestamps.length > 0)
      timeMarkers.value = generateTimeMarkers(newTimestamps);
  },
  { immediate: true }
);

onMounted(async () => {
  try {
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;

    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData();
    // 根据layer.json去获取时间轴信息
    const {
      waterTimestamps: timestamps,
      watersMaxHeight,
      watersMinHeight,
    } = await fetchWaterSimulationData(serviceInfo);
    console.log(
      "当前方案下的最大水位深度和最小水位深度",
      watersMaxHeight,
      watersMinHeight
    );

    // 现在是按照总共有多少个点来渲染时间轴
    if (timestamps) {
      frameNum.value = timestamps.length;
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      sendCurrentPlayingTime.value = timestamps[0];
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    }
    minFlowRate = watersMinHeight;
    maxFlowRate = watersMaxHeight;
  } catch (error) {
    console.error("Error loading water simulation data:", error);
    ElMessage({
      message: "降雨数据出错，请重新新建模拟方案！",
      type: "warning",
    });
  }
});
// 根据返回数据的个数去渲染时间轴
function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
    const [first, last] = [
      waterTimestamps.value[0],
      waterTimestamps.value.at(-1),
    ];
    duration.value = (last - first) / 1000; // 毫秒转秒
  }
}

onBeforeUnmount(() => {
  stopPlayback();
  let delay = (3 / playbackRate.value) * 1000;

  setTimeout(() => {
    destoryWaterPrimitive();
  }, delay);
  destoryWaterPrimitive();
});
const { startSimulate, endSimulate } = inject("simulateActions");
</script>

const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  isWaterPrimitiveCreated.value = false;
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();
    ratelevelRef.value.stopPicking();
  }
  if (crossRef.value) {
    crossRef.value.clearPoints();
    console.log("执行删除点功能");
  }
  emit("isColorRender", false);
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
  EventBus.emit("clear-water-depth");
  EventBus.emit("clear-water-velocity");
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" });
}
</script>
<style scoped>
.timeline-container {
  display: flex;
@@ -313,8 +697,8 @@
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 878px;
  height: 108px;
  width: 44%;
  height: 10%;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");
  background-size: 100% 100%;
@@ -383,7 +767,7 @@
}

.speed-menu div {
  padding: 5px 10px;
  /* padding: 5px 5px; */
  text-align: center;
}

@@ -394,9 +778,9 @@
}

.timeline {
  margin-top: 20px;
  margin-top: 10px;
  position: relative;
  flex: 1;
  flex: 0.9;
}

.dates {
@@ -439,17 +823,52 @@
}

.time-markers {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 15px;
  color: #fff;
  top: 20px;
  display: flex;
  justify-content: space-between;
}

.time-marker {
  position: absolute;
  font-size: 12px;
  color: #fff;
  text-align: center;
  width: 25%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .date-part {
  margin-bottom: 2px;
} */
.time-part {
  font-size: 11px;
  opacity: 0.8;
}

.current-date {
  margin-bottom: 5px;
  font-size: 15px;
  color: #fff;
  transform: translateX(-8%);
}

.scale-markers {
  position: absolute;
  width: 100%;
  height: 10px;
  top: 10px;
}

.scale-marker {
  position: absolute;
  width: 3px;
  height: 6px;
  background-color: rgba(255, 255, 255, 1);
  transform: translateX(-50%);
}
</style>