提交初版实时模拟

guonan

2025-06-24 c0b4517e7362144cc1683ee0bf0b7e00b67d539a

 src/components/menu/TimeLine.vue

@@ -17,7 +17,7 @@
          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
@@ -142,6 +142,7 @@
  resumeWaterSimulation,
  setTimeForWaterSimulation,
  toggleWaterColorRender,
  updateWaterColor,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
@@ -181,12 +182,15 @@
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 = [];
const isRainEnabled = ref(false);
const rainParams = reactive({
  rainSize: 0.5,
@@ -296,7 +300,11 @@
    currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

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

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

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

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.intensity);
@@ -408,11 +417,45 @@
    }
  }
  // 默认无雨状态

  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}`); // 打印时间轴信息
@@ -427,7 +470,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('由于数据无显著变化，跳过本次更新');
@@ -613,9 +660,15 @@
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;
    if (selectedScheme.value.type == 2) {
      speedShow.value = false;
    } else {
      getRainfallData();
      speedShow.value = true;
    }

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

    // 根据layer.json去获取时间轴信息
    const {
      waterTimestamps: timestamps,