change

wangjuncheng

2025-05-08 8163711992a19be6c54fe0c11014f36904ea3669

change

 src/components/menu/TimeLine.vue

@@ -189,26 +189,37 @@
};
// 降雨变化部分
// 降雨数据相关变量
// 降雨数据相关变量
let rainFallValues = ref([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let maxRainValue = ref(-Infinity);

// 获取降雨数据
function getRainfallData() {
  getRainfall().then((res) => {
    rainFallValues.value = res.data.map(item => item.value); // 提取降雨量值
    minRainValue.value = Math.min(...rainFallValues.value);
    maxRainValue.value = Math.max(...rainFallValues.value);
    console.log(minRainValue.value, maxRainValue.value, 'min and max rain values');
  });
  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:', data);
    } catch (e) {
      console.error("data 不是有效的 JSON 字符串");
      return;
    }
  }
  const rainfallList = data.rainfalls;
  // 提取 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, 'min and max rain values');
}

// // 线性映射函数
// function mapValue(value, fromLow, fromHigh, toLow, toHigh) {
//   return (value - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
// }

// 定义降雨等级及其对应的视觉参数
const rainLevels = [
  {
@@ -256,7 +267,6 @@
    color: '#ADD8E6' // 黑色，象征极端暴雨
  }
];

// 根据降雨量返回对应的雨形配置
function getRainLevel(rainValue) {
  for (let level of rainLevels) {
@@ -267,27 +277,49 @@
  // 默认无雨状态
  return { name: '无雨', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
}
// 根据播放进度更新天气效果（已优化）
let lastUsedIndex = -1; // 缓存上一次使用的索引，防止重复更新
let lastRainValue = null;

// 根据播放进度更新天气效果
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 index = Math.floor(floatIndex);            // 当前索引
  const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1); // 下一索引

  const currentRain = rainFallValues.value[index];
  const nextRain = rainFallValues.value[nextIndex];
  // 插值因子 [0, 1]
  // const alpha = floatIndex - index;

  // 插值得到当前降雨量
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain);
  // 获取对应的雨形配置
  const rainLevel = getRainLevel(rainValue);
  if (rainLevel.name === '无雨') {
    mapUtils.delRain();
  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  const rainValue = currentRain + (nextRain - currentRain) * alpha;

  // 打印当前处理的雨量数据
  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,
@@ -295,6 +327,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
  };

  console.log('当前雨量数据：', rainValue);
  console.log('当前雨形：', rainLevel);
  // 调用工具方法更新雨效
@@ -303,11 +336,15 @@
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 toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);

// 设置播放速率
const setPlaybackRate = (rate) => {
  playbackRate.value = rate;
@@ -322,6 +359,7 @@
  emit("timeUpdate", progressPercentage.value);
  isPlaying.value = false;
  emit("isPlaying", false);

  // 销毁现有的水体模拟层
  if (isWaterPrimitiveCreated.value) {
    destoryWaterPrimitive();
@@ -342,7 +380,7 @@
      message: "请先启动水体模拟后再进行时间轴跳转。",
      type: "warning",
    });
    return;
    return; // 阻止后续逻辑执行
  }
  const rect = timelineTrack.value.getBoundingClientRect();
  const percentage = (event.clientX - rect.left) / rect.width;
@@ -358,7 +396,10 @@
      "Time:",
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );
    // 调用跳转接口，传递索引值
    setTimeForWaterSimulation(closestIndex);

    // 如果当前是暂停状态，调用 pauseWaterSimulation
    if (!isPlaying.value) {
      pauseWaterSimulation();
    }