实时模拟

guonan

2025-06-26 4da56700113f235312e9fb64e49496c70fa12c1c

 src/components/menu/TimeLine.vue

@@ -130,6 +130,7 @@
  onBeforeUnmount,
  inject,
  reactive,
  watchEffect,
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";
@@ -201,7 +202,9 @@
});
let minFlowRate = ref();
let maxFlowRate = ref();
let maxStage = null;
// 全局变量记录最大阶段和透明度
let maxStage = 0;
let maxAlpha = -0.3; // 初始透明度对应stage 0
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -211,6 +214,9 @@
    new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
  ).map((date) => dayjs(date).toDate())
);

// 我需要加一个判断
const finishPlay = ref(false);
// 播放控制
const togglePlay = () => {
  // 这里应该再设定几个限制，如果缺少什么数据，无法进行仿真
@@ -278,38 +284,96 @@
  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);

  playInterval = setInterval(() => {
    // 找到当前时间对应的索引
    const currentIndex = findClosestTimestampIndex(currentTime.value);
    const nextIndex = currentIndex + 1;
  if (selectedScheme.value.type === 2) {
    // 类型为 2：每 5 秒跳动一次
    playInterval = setInterval(() => {
      const fiveSeconds = 5;
      const totalDuration = duration.value; // 总时长（秒）

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

    // 更新时间为下一个时间点的时间差（秒）
    const nextTimestamp = waterTimestamps.value[nextIndex];
    const baseTimestamp = waterTimestamps.value[0];
    currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
      if (currentTime.value >= totalDuration) {
        currentTime.value = totalDuration;
        stopPlayback();
        isPlaying.value = false;
        finishPlay.value = true;
        emit("isPlaying", false);
        emit("playbackFinished", true);
        return;
      }

    // 触发更新
    if (selectedScheme.value.type !== 2) {
      // 触发进度更新
      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;

    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100);
  }, 1000 / playbackRate.value); // 根据播放速率调整间隔
      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);
  }
};
// 降雨变化部分
// 降雨数据相关变量
@@ -463,99 +527,171 @@

  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;

  // 辅助函数：将 "YYYY-MM-DD HH:mm:ss" 转换为 JavaScript Date 对象
  const timeToTimestamp = (timeStr) => new Date(timeStr).getTime();
  // 1. 计算基础数据
  const { intensity, IR } = calculateRainData();

  // 获取初始时间戳（第一个数据点的时间）
  const initialTimestamp = timeToTimestamp(rainTotalInfo.value[0].time);
  // 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);

  // 计算当前进度
  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];
  const currentTimestamp = timeToTimestamp(currentData.time);
  // 4. 计算并锁定颜色（确保亮度不回升）
  updateColorState(COLOR_STOPS, intensity, IR);

  // 已过去的时间（小时）
  const elapsedTimeInHours = parseFloat(
    (currentTimestamp - initialTimestamp) / (1000 * 60 * 60)
  );
  // 5. 应用颜色
  updateWaterColor(colorState.currentColor, colorState.maxAlpha);

  console.log(`持续了 ${elapsedTimeInHours} 小时`);
  // --- 辅助函数 ---
  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();

  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  const currentIntensity = currentData.intensity;
  const nextIntensity = nextData.intensity;
  const intensity = currentIntensity + (nextIntensity - currentIntensity);
  // 计算 IR(t)
  const D = elapsedTimeInHours + 0.0001; // 加一个极小量防止除零
  const IR = 56.9 * Math.pow(D, -0.746); // 单位 mm/h
    // 降雨强度计算（带插值）
    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;

  // 判断当前阶段
  let stage = 0;
  if (intensity >= 1.0 * IR) {
    stage = 6;
  } else if (intensity >= 0.8 * IR) {
    stage = 5;
  } else if (intensity >= 0.6 * IR) {
    stage = 4;
  } else if (intensity >= 0.4 * IR) {
    stage = 3;
  } else if (intensity >= 0.2 * IR) {
    stage = 2;
  } else if (intensity > 0) {
    stage = 1;
    // 临界降雨强度计算
    const D = (currentTimestamp - initialTimestamp) / (1000 * 60 * 60) + 0.0001;
    const IR = 56.9 * Math.pow(D, -0.746);

    return { intensity, IR };
  }

  // 更新全局最大阶段（不会回退）
  if (!maxStage) maxStage = 0;
  maxStage = Math.max(maxStage, stage);
  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;
      }
    }

  // 输出关键信息
  console.table({
    当前时间: currentData.time,
    "累计时长 D(t) (h)": D.toFixed(2),
    "雨强阈值 IR(t) (mm/h)": IR.toFixed(2),
    "当前降雨强度 I(t) (mm/h)": intensity.toFixed(2),
    当前阶段编号: stage,
    最大阶段编号: maxStage,
    是否触发泥石流: stage >= 5 ? "是" : "否",
  });

  // 根据最大阶段设置颜色
  let color = "#D4F2E7";
  switch (maxStage) {
    case 0:
      color = "#D4F2E7";
      break;
    case 1:
      color = "#66B3FF";
      break;
    case 2:
      color = "#99CCFF";
      break;
    case 3:
      color = "#CCE5FF";
      break;
    case 4:
      color = "#CC9966";
      break;
    case 5:
      color = "#B26633";
      break;
    case 6:
      color = "#663300";
      break;
    // 更新最大阶段（单向递增）
    colorState.maxStage = Math.max(colorState.maxStage, stage);
  }

  updateWaterColor(color);
  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() {
@@ -757,6 +893,91 @@
  { immediate: true }
);

const jsonFetch = ref(null);

// 提取为独立函数
async function initializeSimulationData(force = false) {
  try {
    const schemeInfo = selectedScheme.value;

    // 如果不是 type == 2 且非强制执行，则跳过
    if (schemeInfo.type !== 2 && !force) {
      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,
      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;
  }
});

onMounted(async () => {
  try {
    // 当前方案的所有信息
@@ -808,6 +1029,7 @@
    });
  }
});

// 根据返回数据的个数去渲染时间轴
function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
@@ -827,6 +1049,9 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  // 停止实时模拟定时器
  EventBus.emit("close-time");

  isWaterPrimitiveCreated.value = false;
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();