2

wangjuncheng

2025-06-25 fa541dda36e58de1d491b3ff4073c51b16606515

 src/components/menu/TimeLine.vue

@@ -11,7 +11,7 @@
      <div class="control-btn" @click="skipForward">
        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
      </div>
      <div class="speed-control">
      <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)"
@@ -113,7 +113,7 @@
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme, frameNum } = storeToRefs(simStore);
const { selectedScheme, frameNum, layerDate } = storeToRefs(simStore);

const emit = defineEmits([
  "timeUpdate",
@@ -143,13 +143,16 @@
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 rainTotalInfo = ([]);
let timeStepInfo = null;
let rainTotalInfo = [];
const isRainEnabled = ref(false);
const rainParams = reactive({
  rainSize: 0.5,
@@ -159,6 +162,9 @@
});
let minFlowRate = ref();
let maxFlowRate = ref();
// 全局变量记录最大阶段和透明度
let maxStage = 0;
let maxAlpha = -0.3; // 初始透明度对应stage 0
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -259,8 +265,11 @@
    currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

    // 触发更新
    updateWaterColorByTime()
    updateWeatherByProgress();
    if (selectedScheme.value.type !== 2) {
      updateWaterColorByTime();
      updateWeatherByProgress();
    }

    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100);
  }, 1000 / playbackRate.value); // 根据播放速率调整间隔
@@ -303,7 +312,10 @@

  const rainfallList = data.rainfalls;
  console.log("最终的 rainfallList:", rainfallList);
  rainTotalInfo.value = rainfallList
  rainTotalInfo.value = rainfallList;
  calculateTimeStep(rainTotalInfo.value);
  // 使用示例
  timeStepInfo = calculateTimeStep(rainTotalInfo.value);

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.intensity);
@@ -373,42 +385,194 @@
    }
  }
  // 默认无雨状态

  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;
  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'; // 浅蓝 - 微量
  // 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 };
  }
  // console.log(`当前 total: ${total.toFixed(2)}, 颜色: ${color}`);
  // updateWaterColor(color)

  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() {
@@ -425,7 +589,11 @@
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain);
  // 打印当前处理的雨量数据
  console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // console.log(
  //   `正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(
  //     2
  //   )}, 索引=${index}`
  // );
  // 如果当前索引未变化且插值差异不大，跳过重复更新
  if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
    // console.log('由于数据无显著变化，跳过本次更新');
@@ -610,16 +778,26 @@
  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);
    getRainfallData();

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