src/api/trApi.js

@@ -142,7 +142,7 @@

    const response = await fetch(url); // 发起请求

    console.log(url,'aaaaaaaaa')
    // console.log(url,'aaaaaaaaa')

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);

 src/components/menu/TimeLine.vue

@@ -2,30 +2,20 @@
  <div class="timeline-container">
    <div class="controls">
      <div class="control-btn" @click="skipBackward">
        <img
          src="@/assets/img/timeline/left.png"
          class="fas fa-step-backward"
        />
        <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
      </div>
      <div class="control-btn play-btn" @click="togglePlay">
        <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
        <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
      </div>
      <div class="control-btn" @click="skipForward">
        <img
          src="@/assets/img/timeline/right.png"
          class="fas fa-step-forward"
        />
        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
      </div>
      <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)"
            :class="{ active: playbackRate === rate }"
          >
          <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
            :class="{ active: playbackRate === rate }">
            {{ rate }}X
          </div>
        </div>
@@ -35,33 +25,19 @@
    <div class="timeline">
      <div class="dates">
        <div class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <div
          v-for="(date, index) in visibleDates"
          :key="index"
          class="date-label"
        >
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
          <!-- {{ formatDate(date) }} -->
        </div>
        <div>
          专题渲染:
          <el-switch
            v-model="isColorRenderEnabled"
            @change="handleColorRenderChange"
            style="margin-top: -3px"
            :disabled="!isPlaying || !isWaterPrimitiveCreated"
          />
          <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top: -3px"
            :disabled="!isPlaying || !isWaterPrimitiveCreated" />
          <!-- active-text="开" inactive-text="关" -->
        </div>
      </div>
      <div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
        <div
          class="timeline-progress"
          :style="{ width: progressPercentage + '%' }"
        ></div>
        <div
          class="timeline-cursor"
          :style="{ left: progressPercentage + '%' }"
        ></div>
        <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
        <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
        <div class="scale-markers">
          <div class="scale-marker" style="left: 0%"></div>
          <div class="scale-marker" style="left: 25%"></div>
@@ -70,12 +46,8 @@
          <div class="scale-marker" style="left: 100%"></div>
        </div>
        <div class="time-markers">
          <div
            v-for="(time, index) in timeMarkers"
            :key="index"
            class="time-marker"
            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
          >
          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
            <div class="date-part">{{ time.split(" ")[0] }}</div>
            <div class="time-part">{{ time.split(" ")[1] }}</div>
          </div>
@@ -84,38 +56,27 @@
    </div>
    <div>
      <div style="display: flex">
        <ratelevel
          ref="ratelevelRef"
          :playing-time="sendCurrentPlayingTime"
          @finish-calculation="handleFinishCalculation"
          style="
        <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
          @finish-calculation="handleFinishCalculation" style="
            margin-top: 12px;
            margin-left: 28px;
            margin-right: 10px;
            justify-content: flex-end;
          "
        />
        <crossanalysis
          ref="crossRef"
          style="
          " />
        <crossanalysis ref="crossRef" style="
            margin-top: 12px;
            margin-left: 16px;
            margin-right: 20px;
            justify-content: flex-end;
          "
        />
          " />
      </div>
      <el-button
        @click="handleBack"
        style="
      <el-button @click="handleBack" style="
          margin-top: 3px;
          margin-left: 28px;
          margin-right: 10px;
          width: 75%;
          height: 30%;
        "
        >结束模拟</el-button
      >
        ">结束模拟</el-button>
    </div>
  </div>
</template>
@@ -202,9 +163,6 @@
});
let minFlowRate = ref();
let maxFlowRate = ref();
// 全局变量记录最大阶段和透明度
let maxStage = 0;
let maxAlpha = -0.3; // 初始透明度对应stage 0
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -410,14 +368,12 @@
  } else if (data.intensityUnit !== "mm/h") {
    console.warn("未知的 intensity 单位，无法进行转换");
  }

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

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.intensity);
  minRainValue.value = Math.min(...rainFallValues.value);
@@ -527,172 +483,204 @@

  return timeStepHours;
}
// ============================================================================
// 优化方式，可以求出整个时间轴上，第一次遇到这六个阈值得时间点，然后分时间段显示，a时间内显示状态1，然后状态交界处设置颜色渐变，其余同理，这样跳转得时候能够直接跳转到当前得颜色信息阶段，直接应用，即可
// ============================================================================
// 全局状态记录
const colorState = {
  maxStage: 0, // 记录历史最高阶段
  maxAlpha: -0.3, // 记录历史最小透明度（负值）
  maxLuminance: 240.4, // 记录历史最低亮度（对应stage 0初始值）
  currentColor: "#F5F0E6", // 当前颜色
  currentAlpha: -0.3,      // 当前透明度
  colorStages: null,       // 预计算的颜色阶段时间点
  maxColorTime: null       // 记录达到最深颜色时的时间点
};

function updateWaterColorByTime() {
// 预计算颜色阶段时间点
function precomputeColorStages() {
  if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;

  // 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
    { hex: "#E6D5B8", luminance: 214.8 }, // stage 1
    { hex: "#D4B483", luminance: 184.0 }, // stage 2
    { hex: "#B78B6A", luminance: 148.4 }, // stage 3
    { hex: "#8B5A3A", luminance: 101.0 }, // stage 4
    { hex: "#744C33", luminance: 84.5 },  // stage 5
    { hex: "#5D3D2C", luminance: 68.1 }   // 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
    -0.2,   // stage 0
    -0.3,   // stage 1
    -0.4,   // stage 2
    -0.5,   // stage 3
    -0.6,   // stage 4
    -0.7,   // stage 5
    -0.8    // stage 6
  ];
  // 3. 更新阶段状态
  updateStageState(intensity, IR);

  // 4. 计算并锁定颜色（确保亮度不回升）
  updateColorState(COLOR_STOPS, intensity, IR);
  // 累计降雨量阈值（mm）
  const R_THRESHOLDS = [0, 200, 240, 280, 310, 350]; // 共6个阶段对应6个阈值

  // 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 };
  // 时间和降雨量信息
  const timeTotals = [];
  const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
  for (let i = 0; i < rainTotalInfo.value.length; i++) {
    const timestamp = new Date(rainTotalInfo.value[i].time).getTime();
    const time = (timestamp - initialTimestamp) / 1000;
    const total = rainTotalInfo.value[i].total; // 使用 total 替代 intensity
    timeTotals.push({
      time,
      total
    });
  }

  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;
  // 找出每个阶段首次达到的时间点
  const stages = [];

  for (let stage = 1; stage < R_THRESHOLDS.length + 1; stage++) {
    const threshold = R_THRESHOLDS[stage - 1];
    for (let i = 0; i < timeTotals.length; i++) {
      const { time, total } = timeTotals[i];
      if (total >= threshold) {
        stages[stage] = {
          startTime: time,
          color: COLOR_STOPS[stage].hex,
          alpha: alphaStops[stage],
          threshold
        };
        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;
    }
  // 填充阶段0
  stages[0] = {
    startTime: 0,
    color: COLOR_STOPS[0].hex,
    alpha: alphaStops[0],
    threshold: 0
  };

    // 计算当前阶段进度
    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;
  }
  colorState.colorStages = stages;
}

function updateWaterColorByTime(isForceUpdate = false) {
  if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;

  // 首次调用时预计算颜色阶段
  if (colorState.colorStages === null) {
    precomputeColorStages();
  }

  // 查找当前时间点所属的阶段
  let currentStage = 0;
  for (let i = colorState.colorStages.length - 1; i >= 0; i--) {
    if (colorState.colorStages[i] && currentTime.value >= colorState.colorStages[i].startTime) {
      currentStage = i;
      break;
    }
  }

  // 记录达到最深颜色的时间点
  if (currentStage >= colorState.colorStages.length - 1) {
    if (colorState.maxColorTime === null || currentTime.value > colorState.maxColorTime) {
      colorState.maxColorTime = currentTime.value;
    }
  }

  // 判断是否需要强制更新颜色
  const isTimeGoingBackward = currentTime.value < colorState.lastTime;
  const isBeforeMaxColorTime = colorState.maxColorTime !== null && currentTime.value <= colorState.maxColorTime;
  const shouldForceUpdate = isForceUpdate && (isTimeGoingBackward || isBeforeMaxColorTime);

  // 更新颜色逻辑
  if (shouldForceUpdate || isTimeGoingBackward) {
    // 强制更新或时间回退时，直接应用当前阶段的颜色
    colorState.currentColor = colorState.colorStages[currentStage].color;
    colorState.currentAlpha = colorState.colorStages[currentStage].alpha;
  } else {
    // 正常时间前进时，保持渐进变化
    const newColor = colorState.colorStages[currentStage].color;
    const newAlpha = colorState.colorStages[currentStage].alpha;

    // 只应用更暗的颜色和更低的透明度
    if (calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)) {
      colorState.currentColor = newColor;
    }
    if (newAlpha < colorState.currentAlpha) {
      colorState.currentAlpha = newAlpha;
    }
  }

  // 更新时间记录
  colorState.lastTime = currentTime.value;
  // ====== 新增：在 updateWaterColor 前打印当前信息 ======
  // // 获取当前累计降雨量
  // let currentTotal = null;
  // const baseTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
  // const currentTimeMs = baseTimestamp + currentTime.value * 1000;

  // // 找到最接近的降雨数据点
  // for (let i = rainTotalInfo.value.length - 1; i >= 0; i--) {
  //   const dataTimeMs = new Date(rainTotalInfo.value[i].time).getTime();
  //   if (dataTimeMs <= currentTimeMs) {
  //     currentTotal = rainTotalInfo.value[i].total;
  //     break;
  //   }
  // }

  // // 打印信息
  // console.log("========================================");
  // console.log(`【时间戳】: ${new Date(currentTimeMs).toLocaleString()}`);
  // console.log(`【累计降雨量 R】: ${currentTotal !== null ? currentTotal.toFixed(2) : '未知'} mm`);
  // console.log(`【当前阶段】: 第 ${currentStage} 阶段`);
  // console.log(`【颜色 HEX】: ${colorState.colorStages[currentStage]?.color || '未定义'}`);
  // console.log(`【透明度 Alpha】: ${colorState.colorStages[currentStage]?.alpha || '未定义'}`);
  // console.log("========================================");
  // 应用颜色
  updateWaterColor(colorState.currentColor, colorState.currentAlpha);
}

// 辅助函数保持不变
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];
}

// 时间轴跳转函数
const seekToPosition = (event) => {
  if (!isWaterPrimitiveCreated.value) {
    ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。");
    return;
  }

  const rect = timelineTrack.value.getBoundingClientRect();
  const percentage = (event.clientX - rect.left) / rect.width;
  const targetTime = Math.round(percentage * duration.value);

  const closestIndex = findClosestTimestampIndex(targetTime);
  const baseTimestamp = waterTimestamps.value[0];
  const newTime = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;

  // 判断是否需要强制更新颜色
  const isGoingBackward = newTime < currentTime.value;
  const isBeforeMaxColor = colorState.maxColorTime !== null && newTime <= colorState.maxColorTime;
  const shouldForceUpdate = isGoingBackward || isBeforeMaxColor;

  currentTime.value = newTime;
  setTimeForWaterSimulation(closestIndex);

  // 根据条件更新颜色
  updateWaterColorByTime(shouldForceUpdate);

  if (!isPlaying.value) pauseWaterSimulation();
};
// ============================================================================

function updateWeatherByProgress() {
  if (rainFallValues.value.length === 0) return;
@@ -739,7 +727,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color,
  };
  console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  // console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
@@ -802,27 +790,7 @@
  EventBus.emit("clear-echart");
  EventBus.emit("reset-table");
};
// 时间轴跳转
const seekToPosition = (event) => {
  if (!isWaterPrimitiveCreated.value) {
    ElMessage.warning("请先启动水体模拟后再进行时间轴跳转。");
    return;
  }

  const rect = timelineTrack.value.getBoundingClientRect();
  const percentage = (event.clientX - rect.left) / rect.width;
  const targetTime = Math.round(percentage * duration.value);

  // 直接找到最近的 timestamp 索引
  const closestIndex = findClosestTimestampIndex(targetTime);
  const baseTimestamp = waterTimestamps.value[0];
  currentTime.value =
    (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;

  // 更新水体模拟时间
  setTimeForWaterSimulation(closestIndex);
  if (!isPlaying.value) pauseWaterSimulation();
};
// 辅助函数：找到最接近的时间戳索引
function findClosestTimestampIndex(currentTimeValue) {
  if (waterTimestamps.value.length === 0) return 0;

 src/components/monifangzhen/schemeInfo.vue

@@ -108,24 +108,61 @@
// 处理 data 字段解析
function parseDataField(dataStr) {
  if (typeof dataStr !== "string") return [];
  // console.log(dataStr, '方案详情内的降雨数据');

  try {
    const parsed = JSON.parse(dataStr);
    const fields = {
      total: "降雨总量（mm）：",
      duration: "降雨时长（小时）：",
      intensity: "降雨强度（mm/小时）：",
      intensity: "降雨强度（mm/小时）：", // 统一为 mm/h
      prediction: "降雨场次：",
      model: "降雨模式：",
      history: "历史降雨：",
    };

    let { total, duration, intensity, intensityUnit } = parsed;

    // 根据 intensityUnit 确定转换系数
    let factor = 1;
    switch (intensityUnit) {
      case "mm/min":
        factor = 60;
        break;
      case "mm/5min":
        factor = 12;
        break;
      case "mm/h":
        factor = 1;
        break;
      default:
        factor = 1;
    }

    // 转换单位：将 intensity 和 total 统一为按小时计算的值
    intensity = intensity != null ? (intensity * factor).toFixed(2) : "无";
    total = total != null ? (total * factor).toFixed(2) : "无";

    // 控制台输出你需要的关键字段
    // console.log('转换后的降雨强度（mm/h）:', intensity);
    // console.log('转换后的降雨总量（mm）:', total);

    // 处理 duration，如果非数字则设为默认值
    duration = duration != null ? parseInt(duration) : "无";

    const result = Object.entries(parsed)
      .filter(([k]) => fields[k])
      .map(([k, v]) => ({
        name: fields[k],
        value: v || "无",
      }));
      .map(([k, v]) => {
        let displayValue = v || "无";
        if (k === "total") displayValue = total;
        if (k === "duration") displayValue = duration;
        if (k === "intensity") displayValue = intensity;

        return {
          name: fields[k],
          value: displayValue,
        };
      });

    // 处理雨量计数据
    if (parsed.type == 2 && parsed.gauges && Array.isArray(parsed.gauges)) {
@@ -140,6 +177,7 @@

    return result;
  } catch (e) {
    console.error("解析 dataStr 出错：", e);
    return [{ name: "数据：", value: dataStr || "无" }];
  }
}

 src/utils/water.js

@@ -92,7 +92,7 @@
    colorRender,
    sizeIndex: 0,
  });
  // enableWaterArrowFlow(false);
  enableWaterArrowFlow(false);
  toggleWaterShadow(false);
  // console.log(
  //   `仿真模拟参数：请求路径 ${baseUrl}, 帧间间隔 ${interval}ms, 是否开启专题渲染 ${colorRender}`