wangjuncheng
2025-06-25 1190b6e0bea6f91b85b8e1b574300b18aac3e562
src/components/menu/TimeLine.vue
@@ -201,6 +201,7 @@
});
let minFlowRate = ref();
let maxFlowRate = ref();
let maxStage = null;
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -463,36 +464,94 @@
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();
  // 获取初始时间戳(第一个数据点的时间)
  const initialTimestamp = timeToTimestamp(rainTotalInfo.value[0].time);
  // 计算当前进度
  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);
  // 已过去的时间(小时)
  const elapsedTimeInHours = parseFloat((currentTimestamp - initialTimestamp) / (1000 * 60 * 60));
  console.log(`持续了 ${elapsedTimeInHours} 小时`);
  // 启用插值(alpha 平滑过渡)
  const alpha = floatIndex - index;
  const currentTotal = currentData.total;
  const nextTotal = nextData.total;
  const total = currentTotal + (nextTotal - currentTotal) * alpha;
  console.log(`计算得到的时间步长为: ${timeStepInfo} 小时`);
  // 根据 total 设置颜色
  let color = "#D4F2E7"; // 默认蓝色
  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
  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';
  // 判断当前阶段
  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;
  }
  // console.log(`当前 total: ${total.toFixed(2)}, 颜色: ${color}`);
  // updateWaterColor(color)
  // 更新全局最大阶段(不会回退)
  if (!maxStage) maxStage = 0;
  maxStage = Math.max(maxStage, stage);
  // 输出关键信息
  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;
  }
  updateWaterColor(color);
}
function updateWeatherByProgress() {
@@ -509,11 +568,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('由于数据无显著变化,跳过本次更新');