修改x按钮

guonan

6 天以前 a57caa72a54efe9de3fe26a6c36d3e8038267377

 src/components/menu/TimeLine.vue

@@ -146,14 +146,16 @@
  updateWaterColor,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { fetchWaterSimulationData, stopSim } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
// 状态管理器
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme, frameNum, layerDate } = storeToRefs(simStore);
const { selectedScheme, frameNum, layerDate, schemWaterInfo } =
  storeToRefs(simStore);
import { clearAllPoints } from "@/utils/map";

const emit = defineEmits([
  "timeUpdate",
@@ -202,9 +204,6 @@
});
let minFlowRate = ref();
let maxFlowRate = ref();
// 全局变量记录最大阶段和透明度
let maxStage = 0;
let maxAlpha = -0.3; // 初始透明度对应stage 0
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -320,8 +319,10 @@
const startPlayback = () => {
  clearInterval(playInterval);

  if (selectedScheme.value.type === 2) {
    // 类型为 2：每 5 秒跳动一次
  // 新建方案中的实时模拟不能倍速
  if (selectedScheme.value.type === 2 && simStore.rePlayList.length == 0) {
    console.log("新建方案实时模拟五秒一跳");
    // 实时模拟：每 5 秒跳动一次
    playInterval = setInterval(() => {
      const fiveSeconds = 5;
      const totalDuration = duration.value; // 总时长（秒）
@@ -339,12 +340,23 @@
      }

      // 触发进度更新
      const progress = currentTime.value / totalDuration;
      emit("timeUpdate", progress * 100);
      // const progress = currentTime.value / totalDuration;
      // 实时模拟应该不用显示弹窗吧
      // emit("timeUpdate", progress * 100);

      // 如果需要触发某些更新函数，也可以保留
      updateWaterColorByTime();
      updateWeatherByProgress();
      // updateWeatherByProgress();
      // 修改为固定阶段，缓慢下雨的状态
      const rainParams = {
        rainSize: 0.5,
        rainSpeed: 20,
        rainDensity: 15,
        rainColor: "#ADD8E6",
      };
      console.log("实时模拟开始下雨");
      // 调用工具方法更新雨效
      mapUtils.toggleRain(rainParams, true);
    }, 5000); // 每 5 秒执行一次
  } else {
    // 这里面还是你的播放代码，上面的if中是五秒钟跳动一次的实时模拟
@@ -356,6 +368,7 @@
        currentTime.value = duration.value;
        stopPlayback();
        isPlaying.value = false;
        finishPlay.value = true;
        emit("isPlaying", false);
        emit("playbackFinished", true);
        return;
@@ -371,7 +384,9 @@
      }

      const progress = currentTime.value / duration.value;
      emit("timeUpdate", progress * 100);
      if (selectedScheme.value.type !== 2) {
        emit("timeUpdate", progress * 100);
      }
    }, 1000 / playbackRate.value);
  }
};
@@ -379,6 +394,7 @@
// 降雨数据相关变量
let rainFallValues = ref([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let averageRainIntensity = ref();
let maxRainValue = ref(-Infinity);
// 获取降雨数据
function getRainfallData() {
@@ -386,9 +402,10 @@
    console.warn("selectedScheme 或 data 不存在");
    return;
  }
  // 注意：有时 data 可能是一个字符串（例如 JSON 字符串）

  let data = selectedScheme.value.data;
  // 如果是字符串，则尝试解析成对象

  // 如果是字符串，则尝试解析为对象
  if (typeof data === "string") {
    try {
      data = JSON.parse(data);
@@ -398,30 +415,82 @@
      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 单位，无法进行转换");

  // 判断 rainfalls 是否为对象，如果是则转成数组
  let rainfalls = data.rainfalls;
  if (typeof rainfalls === "object" && !Array.isArray(rainfalls)) {
    rainfalls = Object.values(rainfalls);
    console.warn("⚠️ rainfalls 是对象，已转换为数组");
  }

  const rainfallList = data.rainfalls;
  console.log("最终的 rainfallList:", rainfallList);
  rainTotalInfo.value = rainfallList;
  calculateTimeStep(rainTotalInfo.value);
  // 使用示例
  // 按小时聚合降雨数据
  const hourlyRainfallMap = {};

  rainfalls.forEach((record) => {
    const originalTime = new Date(record.time);
    if (isNaN(originalTime.getTime())) {
      console.warn("无效的时间格式：", record.time);
      return;
    }

    // 构造“小时”级别的时间键，比如：2024-08-25 20:00:00
    const hourKey = new Date(
      originalTime.getFullYear(),
      originalTime.getMonth(),
      originalTime.getDate(),
      originalTime.getHours()
    );

    const hourStr = hourKey.toISOString().slice(0, 16).replace("T", " ");

    if (!hourlyRainfallMap[hourStr]) {
      hourlyRainfallMap[hourStr] = {
        intensity: 0,
        time: hourStr,
        total: record.total, // 默认用第一个记录的 total
      };
    }

    hourlyRainfallMap[hourStr].intensity += record.intensity;
    // 取最大的 total（因为是累积值）
    if (record.total > hourlyRainfallMap[hourStr].total) {
      hourlyRainfallMap[hourStr].total = record.total;
    }
  });

  // 转换 map 成数组并排序
  const hourlyRainfallList = Object.values(hourlyRainfallMap).sort((a, b) =>
    a.time.localeCompare(b.time)
  );

  console.log("✅ 按小时聚合后的降雨数据：", hourlyRainfallList);

  // 设置全局变量
  rainTotalInfo.value = hourlyRainfallList;

  // 计算时间步长
  timeStepInfo = calculateTimeStep(rainTotalInfo.value);

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.intensity);
  rainFallValues.value = hourlyRainfallList.map((r) => r.intensity);
  // 计算平均雨强
  if (rainFallValues.value.length > 0) {
    const sumIntensity = rainFallValues.value.reduce(
      (sum, val) => sum + val,
      0
    );
    averageRainIntensity.value = sumIntensity / rainFallValues.value.length;
  } else {
    averageRainIntensity.value = 0; // 或者 null 表示无数据
  }

  console.log("平均雨强为：", averageRainIntensity.value);

  minRainValue.value = Math.min(...rainFallValues.value);
  maxRainValue.value = Math.max(...rainFallValues.value);

  console.log(
    "当前方案下最小雨量和最大雨量：",
    minRainValue.value,
@@ -527,172 +596,218 @@

  return timeStepHours;
}
// ============================================================================
// 优化方式，可以求出整个时间轴上，第一次遇到这六个阈值得时间点，然后分时间段显示，a时间内显示状态1，然后状态交界处设置颜色渐变，其余同理，这样跳转得时候能够直接跳转到当前得颜色信息阶段，直接应用，即可
// ============================================================================
// 全局状态记录
const colorState = {
  maxStage: 0, // 记录历史最高阶段
  maxAlpha: -0.3, // 记录历史最小透明度（负值）
  maxLuminance: 240.4, // 记录历史最低亮度（对应stage 0初始值）
  currentColor: "#F5F0E6", // 当前颜色
  currentAlpha: -0.3, // 当前透明度
  colorStages: null, // 预计算的颜色阶段时间点
  maxColorTime: null, // 记录达到最深颜色时的时间点
};

function updateWaterColorByTime() {
// 预计算颜色阶段时间点
function precomputeColorStages() {
  if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;

  // 1. 计算基础数据
  const { intensity, IR } = calculateRainData();

  // 2. 颜色配置（亮度严格递减）
  // 颜色配置（亮度递减）
  const COLOR_STOPS = [
    { hex: "#F5F0E6", luminance: 240.4 }, // stage 0
    { hex: "#D4F2E7", luminance: 231.8 }, // stage 1
    { hex: "#E6D5B8", luminance: 214.8 }, // stage 2
    { hex: "#D4B483", luminance: 184.0 }, // stage 3
    { hex: "#B78B6A", luminance: 148.4 }, // stage 4
    { hex: "#8B5A3A", luminance: 101.0 }, // stage 5
    { hex: "#4A3123", luminance: 54.9 }, // stage 6
    { hex: "#E6D5B8", luminance: 214.8 }, // stage 1
    { hex: "#D4B483", luminance: 184.0 }, // stage 2
    { hex: "#B78B6A", luminance: 148.4 }, // stage 3
    { hex: "#8B5A3A", luminance: 101.0 }, // stage 4
    { hex: "#744C33", luminance: 84.5 }, // stage 5
    { hex: "#5D3D2C", luminance: 68.1 }, // stage 6
  ];
  const alphaStops = [
    1 - 0.3, // stage 0
    -0.4, // stage 1
    -0.5, // stage 2
    -0.6, // stage 3
    -0.7, // stage 4
    -0.75, // stage 5
    -0.2, // stage 0
    -0.3, // stage 1
    -0.4, // stage 2
    -0.5, // stage 3
    -0.6, // stage 4
    -0.7, // stage 5
    -0.8, // stage 6
  ];
  // 3. 更新阶段状态
  updateStageState(intensity, IR);

  // 4. 计算并锁定颜色（确保亮度不回升）
  updateColorState(COLOR_STOPS, intensity, IR);

  // 5. 应用颜色
  updateWaterColor(colorState.currentColor, colorState.maxAlpha);

  // --- 辅助函数 ---
  function calculateRainData() {
    const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
    const currentTimestamp = new Date(
      rainTotalInfo.value[
        Math.min(
          Math.floor(
            (currentTime.value / duration.value) *
              (rainTotalInfo.value.length - 1)
          ),
          rainTotalInfo.value.length - 2
        )
      ].time
    ).getTime();

    // 降雨强度计算（带插值）
    const progress = currentTime.value / duration.value;
    const floatIndex = progress * (rainTotalInfo.value.length - 1);
    let index = Math.floor(floatIndex);
    if (index >= rainTotalInfo.value.length - 1) {
      index = rainTotalInfo.value.length - 2; // 防止 index+1 越界
    }
    const lerpAlpha = floatIndex - index;
    const intensity =
      rainTotalInfo.value[index].intensity * (1 - lerpAlpha) +
      rainTotalInfo.value[index + 1].intensity * lerpAlpha;

    // 临界降雨强度计算
    const D = (currentTimestamp - initialTimestamp) / (1000 * 60 * 60) + 0.0001;
    const IR = 56.9 * Math.pow(D, -0.746);

    return { intensity, IR };
  // 累计降雨量阈值（mm）
  const R_THRESHOLDS = [0, 200, 240, 280, 310, 350]; // 共6个阶段对应6个阈值
  // 时间和降雨量信息
  const timeTotals = [];
  const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
  for (let i = 0; i < rainTotalInfo.value.length; i++) {
    const timestamp = new Date(rainTotalInfo.value[i].time).getTime();
    const time = (timestamp - initialTimestamp) / 1000;
    const total = rainTotalInfo.value[i].total; // 使用 total 替代 intensity
    timeTotals.push({
      time,
      total,
    });
  }

  function updateStageState(intensity, IR) {
    // 计算理论阶段
    let stage = 0;
    const thresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
    for (let i = thresholds.length - 1; i >= 0; i--) {
      if (intensity >= thresholds[i] * IR) {
        stage = i + 1;
  // 找出每个阶段首次达到的时间点
  const stages = [];
  for (let stage = 1; stage < R_THRESHOLDS.length + 1; stage++) {
    const threshold = R_THRESHOLDS[stage - 1];
    for (let i = 0; i < timeTotals.length; i++) {
      const { time, total } = timeTotals[i];
      if (total >= threshold) {
        stages[stage] = {
          startTime: time,
          color: COLOR_STOPS[stage].hex,
          alpha: alphaStops[stage],
          threshold,
        };
        break;
      }
    }

    // 更新最大阶段（单向递增）
    colorState.maxStage = Math.max(colorState.maxStage, stage);
  }

  function updateColorState(colorStops, intensity, IR) {
    // 已达最终阶段
    if (colorState.maxStage >= colorStops.length - 1) {
      colorState.currentColor = colorStops[colorStops.length - 1].hex;
      colorState.maxAlpha = -0.8;
      colorState.maxLuminance = colorStops[colorStops.length - 1].luminance;
      return;
    }
  // 填充阶段0
  stages[0] = {
    startTime: 0,
    color: COLOR_STOPS[0].hex,
    alpha: alphaStops[0],
    threshold: 0,
  };

    // 计算当前阶段进度
    const stageThresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
    const lowerThreshold = stageThresholds[colorState.maxStage - 1] * IR;
    const upperThreshold = stageThresholds[colorState.maxStage] * IR;
    const ratio = Math.min(
      1,
      Math.max(
        0,
        (intensity - lowerThreshold) / (upperThreshold - lowerThreshold)
      )
    );

    // 颜色插值
    const startColor = colorStops[colorState.maxStage];
    const endColor = colorStops[colorState.maxStage + 1];
    const newColor = lerpColor(startColor.hex, endColor.hex, ratio);
    const newLuminance = calculateLuminance(newColor);

    // 只接受更暗的颜色（亮度更低）
    if (newLuminance < colorState.maxLuminance) {
      colorState.currentColor = newColor;
      colorState.maxLuminance = newLuminance;
      colorState.maxAlpha = Math.min(
        colorState.maxAlpha,
        lerp(
          alphaStops[colorState.maxStage],
          alphaStops[colorState.maxStage + 1],
          ratio
        )
      );
    }

    console.log(
      `阶段: ${colorState.maxStage} | 亮度: ${colorState.maxLuminance.toFixed(
        1
      )} | 颜色: ${colorState.currentColor}`
    );
  }

  // 颜色插值工具函数
  function lerpColor(c1, c2, t) {
    const [r1, g1, b1] = hexToRgb(c1);
    const [r2, g2, b2] = hexToRgb(c2);
    return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
  }

  function calculateLuminance(hex) {
    const [r, g, b] = hexToRgb(hex);
    return 0.299 * r + 0.587 * g + 0.114 * b;
  }

  function hexToRgb(hex) {
    const bigint = parseInt(hex.slice(1), 16);
    return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
  }

  function rgbToHex(r, g, b) {
    return `#${[r, g, b]
      .map((x) => Math.round(x).toString(16).padStart(2, "0"))
      .join("")}`;
  }

  function lerp(a, b, t) {
    return a + (b - a) * t;
  }
  colorState.colorStages = stages;
}

function updateWaterColorByTime(isForceUpdate = false) {
  if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;

  // 首次调用时预计算颜色阶段
  if (colorState.colorStages === null) {
    precomputeColorStages();
  }

  // 查找当前时间点所属的阶段
  let currentStage = 0;
  for (let i = colorState.colorStages.length - 1; i >= 0; i--) {
    if (
      colorState.colorStages[i] &&
      currentTime.value >= colorState.colorStages[i].startTime
    ) {
      currentStage = i;
      break;
    }
  }

  // 记录达到最深颜色的时间点
  if (currentStage >= colorState.colorStages.length - 1) {
    if (
      colorState.maxColorTime === null ||
      currentTime.value > colorState.maxColorTime
    ) {
      colorState.maxColorTime = currentTime.value;
    }
  }

  // 判断是否需要强制更新颜色
  const isTimeGoingBackward = currentTime.value < colorState.lastTime;
  const isBeforeMaxColorTime =
    colorState.maxColorTime !== null &&
    currentTime.value <= colorState.maxColorTime;
  const shouldForceUpdate =
    isForceUpdate && (isTimeGoingBackward || isBeforeMaxColorTime);

  // 更新颜色逻辑
  if (shouldForceUpdate || isTimeGoingBackward) {
    // 强制更新或时间回退时，直接应用当前阶段的颜色
    colorState.currentColor = colorState.colorStages[currentStage].color;
    colorState.currentAlpha = colorState.colorStages[currentStage].alpha;
  } else {
    // 正常时间前进时，保持渐进变化
    const newColor = colorState.colorStages[currentStage].color;
    const newAlpha = colorState.colorStages[currentStage].alpha;

    // 只应用更暗的颜色和更低的透明度
    if (
      calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)
    ) {
      colorState.currentColor = newColor;
    }
    if (newAlpha < colorState.currentAlpha) {
      colorState.currentAlpha = newAlpha;
    }
  }

  // 更新时间记录
  colorState.lastTime = currentTime.value;
  // ====== 新增：在 updateWaterColor 前打印当前信息 ======
  // // 获取当前累计降雨量
  let currentTotal = null;
  const baseTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
  const currentTimeMs = baseTimestamp + currentTime.value * 1000;

  // 找到最接近的降雨数据点
  for (let i = rainTotalInfo.value.length - 1; i >= 0; i--) {
    const dataTimeMs = new Date(rainTotalInfo.value[i].time).getTime();
    if (dataTimeMs <= currentTimeMs) {
      currentTotal = rainTotalInfo.value[i].total;
      break;
    }
  }

  // 打印信息
  // console.log("========================================");
  // console.log(`【时间戳】: ${new Date(currentTimeMs).toLocaleString()}`);
  console.log(
    `【累计降雨量 R】: ${
      currentTotal !== null ? currentTotal.toFixed(2) : "未知"
    } mm`
  );
  // console.log(`【当前阶段】: 第 ${currentStage} 阶段`);
  console.log(
    `【颜色 HEX】: ${colorState.colorStages[currentStage]?.color || "未定义"}`
  );
  // console.log(`【透明度 Alpha】: ${colorState.colorStages[currentStage]?.alpha || '未定义'}`);
  // console.log("========================================");
  // 应用颜色
  updateWaterColor(colorState.currentColor, colorState.currentAlpha);
}

// 辅助函数保持不变
function calculateLuminance(hex) {
  const [r, g, b] = hexToRgb(hex);
  return 0.299 * r + 0.587 * g + 0.114 * b;
}

function hexToRgb(hex) {
  const bigint = parseInt(hex.slice(1), 16);
  return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}

// 时间轴跳转函数
const seekToPosition = (event) => {
  if (!isWaterPrimitiveCreated.value) {
    ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。");
    return;
  }

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

  const closestIndex = findClosestTimestampIndex(targetTime);
  const baseTimestamp = waterTimestamps.value[0];
  const newTime = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;

  // 判断是否需要强制更新颜色
  const isGoingBackward = newTime < currentTime.value;
  const isBeforeMaxColor =
    colorState.maxColorTime !== null && newTime <= colorState.maxColorTime;
  const shouldForceUpdate = isGoingBackward || isBeforeMaxColor;

  currentTime.value = newTime;
  setTimeForWaterSimulation(closestIndex);

  // 根据条件更新颜色
  updateWaterColorByTime(shouldForceUpdate);

  if (!isPlaying.value) pauseWaterSimulation();
};
// ============================================================================

function updateWeatherByProgress() {
  if (rainFallValues.value.length === 0) return;
@@ -802,27 +917,7 @@
  EventBus.emit("clear-echart");
  EventBus.emit("reset-table");
};
// 时间轴跳转
const seekToPosition = (event) => {
  if (!isWaterPrimitiveCreated.value) {
    ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。");
    return;
  }

  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;
@@ -894,26 +989,32 @@
);

const jsonFetch = ref(null);

const currentReplayIndex = ref(0); // 当前播放的rePlayList索引
// 提取为独立函数
async function initializeSimulationData(force = false) {
async function initializeSimulationData(replayItem = null) {
  try {
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;

    // 如果不是 type == 2 且非强制执行，则跳过
    if (schemeInfo.type !== 2 && !force) {
    if (schemeInfo.type == 2) {
      if (
        replayItem ||
        (simStore.rePlayList && simStore.rePlayList.length != 0)
      ) {
        jsonFetch.value =
          replayItem || simStore.rePlayList[currentReplayIndex.value];
        speedShow.value = true;
      } else {
        jsonFetch.value = layerDate.value;
        speedShow.value = false;
      }
    } else {
      getRainfallData();
      speedShow.value = true;
      jsonFetch.value = null;
      return;
    }

    speedShow.value = false;
    jsonFetch.value = layerDate.value;
    serviceInfo = schemeInfo.serviceName;

    // console.log('获取到的 serviceName:', serviceInfo);

    // 根据 layer.json 获取时间轴信息
    const {
      waterTimestamps: timestamps,
@@ -926,7 +1027,12 @@
      watersMaxHeight,
      watersMinHeight
    );

    const waterInfoArr = [
      watersMaxHeight,
      maxRainValue.value,
      averageRainIntensity.value,
    ];
    schemWaterInfo.value = waterInfoArr;
    // 更新时间轴相关数据
    if (timestamps) {
      frameNum.value = timestamps.length;
@@ -938,7 +1044,6 @@
        "YYYY-MM-DD HH:mm:ss"
      );
    }

    minFlowRate = watersMinHeight;
    maxFlowRate = watersMaxHeight;
  } catch (error) {
@@ -949,15 +1054,40 @@
    });
  }
}
// 播放完成后的回调
function handlePlayFinished() {
  if (selectedScheme.value.type !== 2) return;
  finishPlay.value = false;
  currentReplayIndex.value++;

// 挂载时调用
onMounted(async () => {
  // 因为这个函数实时模拟监听也需要使用，所以封装了一个函数
  await initializeSimulationData();
});
  if (currentReplayIndex.value < simStore.rePlayList.length) {
    // 自动播放下一个
    initializeSimulationData(simStore.rePlayList[currentReplayIndex.value]);
    togglePlay();
    shouldAutoPlay.value = false;
  } else {
    // 所有项目播放完成
    currentReplayIndex.value = 0; // 重置索引
    isPlaying.value = false; // 停止播放
    emit("timeUpdate", 100); // 在所有项目播放完毕后触发
  }
}

// 监听播放完成事件
watch(
  () => finishPlay.value,
  (newVal) => {
    if (
      newVal &&
      selectedScheme.value.type === 2 &&
      simStore.rePlayList.length > 0
    ) {
      handlePlayFinished();
    }
  }
);

const shouldAutoPlay = ref(false);

// 监听 layerDate 变化后标记准备播放
watch(
  () => layerDate.value,
@@ -968,7 +1098,6 @@
  },
  { deep: true }
);

// 等待 finishPlay 成功后再播放
watchEffect(() => {
  if (shouldAutoPlay.value && finishPlay.value && !isPlaying.value) {
@@ -978,56 +1107,10 @@
  }
});

// 挂载时调用
onMounted(async () => {
  try {
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    const jsonFetch = ref(null);
    serviceInfo = schemeInfo.serviceName;
    if (selectedScheme.value.type == 2) {
      speedShow.value = false;
      jsonFetch.value = layerDate.value;
      // serviceInfo = layerDate.value;
    } else {
      getRainfallData();
      speedShow.value = true;
      jsonFetch.value = null;
    }

    // console.log('获取到的 serviceName:', serviceInfo);

    // 根据layer.json去获取时间轴信息
    const {
      waterTimestamps: timestamps,
      watersMaxHeight,
      watersMinHeight,
    } = await fetchWaterSimulationData(serviceInfo, jsonFetch.value);
    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",
    });
  }
  // 因为这个函数实时模拟监听也需要使用，所以封装了一个函数
  await initializeSimulationData();
});

// 根据返回数据的个数去渲染时间轴
@@ -1040,35 +1123,75 @@
    duration.value = (last - first) / 1000; // 毫秒转秒
  }
}

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

const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  // 停止实时模拟定时器
  EventBus.emit("close-time");

async function handleBack() {
  // 实时模拟弹窗确认是返回方案列表还是停止模拟
  if (selectedScheme.value.type === 2) {
    try {
      await ElMessageBox.confirm("方案未停止时结束模拟后，后台将停止计算", {
        confirmButtonText: "结束模拟",
        cancelButtonText: "返回列表",
        type: "warning",
      });

      const res = await stopSim(selectedScheme.value.id);
      if (res.code == 404) {
        ElMessage.warning("该服务已停止");
      } else {
        ElMessage.success("服务正在停止中");
      }
    } catch (error) {
      // 用户点击了【返回列表】或者出现错误
      return;
    }
  }

  // 不管 type 是不是 2，最终都执行结束模拟操作
  endSimulation();
}

async function endSimulation() {
  clearAllPoints();
  simStore.openDia = true;
  simStore.crossSection = [];
  // 结束模拟之后清除layer列表
  simStore.rePlayList = [];
  EventBus.emit("close-time");
  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>