提交

guonan

2025-06-26 1119a7837323e052d3e6256cddd3283d919bd959

 src/components/menu/TimeLine.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1205 @@
<template>
  <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"
        />
      </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"
        />
      </div>
      <div class="speed-control" v-show="speedShow">
        <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 }"
          >
            {{ rate }}X
          </div>
        </div>
      </div>
    </div>

    <div class="timeline">
      <div class="dates">
        <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="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"
            :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>
    <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>

<script setup>
import {
  ref,
  computed,
  onMounted,
  watch,
  defineProps,
  onBeforeUnmount,
  inject,
  reactive,
  watchEffect,
} from "vue";
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, layerDate } = storeToRefs(simStore);

const emit = defineEmits([
  "timeUpdate",
  "isPlaying",
  "playbackFinished",
  "isColorRender",
]);
// å®šä¹‰props
const props = defineProps({
  waterSimulateParams: {
    type: Object,
    default: () => ({
      date: ["2025-02-14T16:00:00.000Z", "2025-02-15T16:00:00.000Z"],
    }),
  },
});
// å“åº”式状态
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(60); // ä¸€å¤©çš„秒数
const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
const speedShow = ref(false);

const waterTimestamps = ref([]); // å­˜å‚¨æ—¶é—´è½´æ•°æ®
const timeMarkers = ref([]);
const timelineTrack = ref(null);
const isColorRenderEnabled = ref(false); // å‡è®¾è¿™æ˜¯ä½ çš„颜色渲染开关状态
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
let timeStepInfo = 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();
// å…¨å±€å˜é‡è®°å½•æœ€å¤§é˜¶æ®µå’Œé€æ˜Žåº¦
let maxStage = 0;
let maxAlpha = -0.3; // åˆå§‹é€æ˜Žåº¦å¯¹åº”stage 0
// è®¡ç®—属性
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 finishPlay = ref(false);
// æ’­æ”¾æŽ§åˆ¶
const togglePlay = () => {
  // è¿™é‡Œåº”该再设定几个限制，如果缺少什么数据，无法进行仿真
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;

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

  if (isPlaying.value) {
    startPlayback();

    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 = () => {
//   clearInterval(playInterval);

//   playInterval = setInterval(() => {
//     // æ‰¾åˆ°å½“前时间对应的索引
//     const currentIndex = findClosestTimestampIndex(currentTime.value);
//     const nextIndex = currentIndex + 1;

//     // å¦‚果已经是最后一个时间点，停止播放
//     if (nextIndex >= waterTimestamps.value.length) {
//       currentTime.value = duration.value;
//       stopPlayback();
//       isPlaying.value = false;
//       emit("isPlaying", false);
//       emit("playbackFinished", true);
//       return;
//     }

//     // æ›´æ–°æ—¶é—´ä¸ºä¸‹ä¸€ä¸ªæ—¶é—´ç‚¹çš„时间差（秒）
//     const nextTimestamp = waterTimestamps.value[nextIndex];
//     const baseTimestamp = waterTimestamps.value[0];
//     currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

//     // è§¦å‘æ›´æ–°
//     if (selectedScheme.value.type !== 2) {
//       updateWaterColorByTime();
//       updateWeatherByProgress();
//     }

//     const progress = currentTime.value / duration.value;
//     emit("timeUpdate", progress * 100);
//   }, 1000 / playbackRate.value); // æ ¹æ®æ’­æ”¾é€ŸçŽ‡è°ƒæ•´é—´éš”
// };
const startPlayback = () => {
  clearInterval(playInterval);

  if (selectedScheme.value.type === 2) {
    // ç±»åž‹ä¸º 2：每 5 ç§’跳动一次
    playInterval = setInterval(() => {
      const fiveSeconds = 5;
      const totalDuration = duration.value; // æ€»æ—¶é•¿ï¼ˆç§’）

      currentTime.value += fiveSeconds;

      if (currentTime.value >= totalDuration) {
        currentTime.value = totalDuration;
        stopPlayback();
        isPlaying.value = false;
        finishPlay.value = true;
        emit("isPlaying", false);
        emit("playbackFinished", true);
        return;
      }

      // è§¦å‘进度更新
      const progress = currentTime.value / totalDuration;
      emit("timeUpdate", progress * 100);

      // å¦‚果需要触发某些更新函数，也可以保留
      updateWaterColorByTime();
      updateWeatherByProgress();
    }, 5000); // æ¯ 5 ç§’执行一次
  } else {
    // è¿™é‡Œé¢è¿˜æ˜¯ä½ çš„播放代码，上面的if中是五秒钟跳动一次的实时模拟
    playInterval = setInterval(() => {
      const currentIndex = findClosestTimestampIndex(currentTime.value);
      const nextIndex = currentIndex + 1;

      if (nextIndex >= waterTimestamps.value.length) {
        currentTime.value = duration.value;
        stopPlayback();
        isPlaying.value = false;
        emit("isPlaying", false);
        emit("playbackFinished", true);
        return;
      }

      const nextTimestamp = waterTimestamps.value[nextIndex];
      const baseTimestamp = waterTimestamps.value[0];
      currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

      if (selectedScheme.value.type !== 2) {
        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;
  calculateTimeStep(rainTotalInfo.value);
  // ä½¿ç”¨ç¤ºä¾‹
  timeStepInfo = calculateTimeStep(rainTotalInfo.value);

  // æå– 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 calculateTimeStep(dataArray) {
  if (!dataArray || dataArray.length < 2) {
    console.warn("数据不足，无法计算时间步长");
    return null;
  }

  // è§£æžæ—¶é—´å­—符串为 Date å¯¹è±¡
  function parseTime(timeStr) {
    return new Date(timeStr.replace(" ", "T")); // å…¼å®¹ ISO æ ¼å¼
  }

  const firstTime = parseTime(dataArray[0].time);
  const secondTime = parseTime(dataArray[1].time);

  // è®¡ç®—时间差（毫秒）
  const diffMs = Math.abs(secondTime - firstTime);

  // è½¬æ¢ä¸ºå°æ—¶æ•°ï¼ˆä¿ç•™å°æ•°ï¼‰
  let timeStepHours = diffMs / (1000 * 60 * 60); // æ¯«ç§’ -> å°æ—¶

  // å¯é€‰ï¼šéåŽ†æ‰€æœ‰ç›¸é‚»é¡¹æ£€æŸ¥æ˜¯å¦ä¸€è‡´
  for (let i = 1; i < dataArray.length - 1; i++) {
    const current = parseTime(dataArray[i].time);
    const next = parseTime(dataArray[i + 1].time);
    const step = Math.abs(next - current) / (1000 * 60 * 60); // æ¯«ç§’ -> å°æ—¶
    if (Math.abs(step - timeStepHours) > 0.01) {
      console.warn(
        `在索引 ${i} å¤„发现了不同的时间步长: ${step.toFixed(2)} å°æ—¶`
      );
    }
  }

  return timeStepHours;
}
// å…¨å±€çŠ¶æ€è®°å½•
const colorState = {
  maxStage: 0, // è®°å½•åŽ†å²æœ€é«˜é˜¶æ®µ
  maxAlpha: -0.3, // è®°å½•åŽ†å²æœ€å°é€æ˜Žåº¦ï¼ˆè´Ÿå€¼ï¼‰
  maxLuminance: 240.4, // è®°å½•åŽ†å²æœ€ä½Žäº®åº¦ï¼ˆå¯¹åº”stage 0初始值）
  currentColor: "#F5F0E6", // å½“前颜色
};

function updateWaterColorByTime() {
  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
  ];
  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.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 };
  }

  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;
        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;
    }

    // è®¡ç®—当前阶段进度
    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;
  }
}

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 = () => {
  clearInterval(playInterval);
};

const skipForward = () => {
  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 = () => {
  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 setPlaybackRate = (rate) => {
  isColorRenderEnabled.value = false;
  playbackRate.value = rate;
  showSpeedMenu.value = false;
  // åœæ­¢å½“前播放
  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 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;

  // è®¡ç®—当前时间对应的毫秒时间戳
  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;
    }
  });

  return closestIndex;
}
watch(
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log("选中方案已改变:", newVal);
    }
  }
);
watch(
  () => currentTime.value,
  () => {
    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);
    }
  }
);

// æ—¶é—´æ ‡è®°ç”Ÿæˆ
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")
  );
}

watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
    if (newTimestamps.length > 0)
      timeMarkers.value = generateTimeMarkers(newTimestamps);
  },
  { immediate: true }
);

const jsonFetch = ref(null);

// æå–为独立函数
async function initializeSimulationData(force = false) {
  try {
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;

    if (schemeInfo.type == 2) {
      speedShow.value = false;
      jsonFetch.value = 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",
    });
  }
}

// æŒ‚载时调用
onMounted(async () => {
  // å› ä¸ºè¿™ä¸ªå‡½æ•°å®žæ—¶æ¨¡æ‹Ÿç›‘听也需要使用，所以封装了一个函数
  await initializeSimulationData();
});

const shouldAutoPlay = ref(false);

// ç›‘听 layerDate å˜åŒ–后标记准备播放
watch(
  () => layerDate.value,
  async (newVal) => {
    if (selectedScheme.value.type === 2 && newVal) {
      shouldAutoPlay.value = true;
    }
  },
  { deep: true }
);

// ç­‰å¾… finishPlay æˆåŠŸåŽå†æ’­æ”¾
watchEffect(() => {
  if (shouldAutoPlay.value && finishPlay.value && !isPlaying.value) {
    initializeSimulationData();
    togglePlay();
    shouldAutoPlay.value = false;
  }
});

// æ ¹æ®è¿”回数据的个数去渲染时间轴
function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
    const [first, last] = [
      waterTimestamps.value[0],
      waterTimestamps.value.at(-1),
    ];
    duration.value = (last - first) / 1000; // æ¯«ç§’转秒
  }
}

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

const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  // åœæ­¢å®žæ—¶æ¨¡æ‹Ÿå®šæ—¶å™¨
  EventBus.emit("close-time");

  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;
  /* align-items: center; */
  justify-content: space-between;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 44%;
  height: 10%;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");
  background-size: 100% 100%;
  color: white;
  /* border-radius: 8px; */
  font-family: Arial, sans-serif;
  padding: 0 25px;
}

.controls {
  display: flex;
  /* align-items: center; */
  margin: 25px 25px 10px 0;
}

.control-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  img {
    width: 100%;
    height: 100%;
  }
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.play-btn {
  background-color: #4a90e2;
  width: 36px;
  height: 36px;
}

.speed-control {
  position: relative;
  cursor: pointer;
  /* padding: 5px 10px; */
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}

.speed-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2a3a4a;
  border-radius: 4px;
  z-index: 10;
  width: 60px;
}

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

.speed-menu div:hover,
.speed-menu div.active {
  /* background-color: #4a90e2; */
  background-color: rgba(127, 255, 212, 0.5);
}

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

.dates {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.date-label {
  font-size: 14px;
  color: #fff;
}

.timeline-track {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.timeline-progress {
  height: 100%;
  background-color: #4a90e2;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

.timeline-cursor {
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.time-markers {
  position: absolute;
  width: 100%;
  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>