1111

wangjuncheng

2025-07-08 b769ee78055cfd89a5866925571d1c10e23882cc

 src/components/menu/TimeLine.vue

@@ -107,14 +107,14 @@
  updateWaterColor,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { fetchWaterSimulationData, stopSim } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
// 状态管理器
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme, frameNum, layerDate } = storeToRefs(simStore);
const { selectedScheme, frameNum, layerDate, schemWaterInfo } = storeToRefs(simStore);

const emit = defineEmits([
  "timeUpdate",
@@ -278,8 +278,10 @@
const startPlayback = () => {
  clearInterval(playInterval);

  if (selectedScheme.value.type === 2) {
    // 类型为 2：每 5 秒跳动一次
  // 新建方案中的实时模拟不能倍速
  if (selectedScheme.value.type === 2 && simStore.rePlayList.length == 0) {
    console.log("新建方案实时模拟五秒一跳");
    // 实时模拟：每 5 秒跳动一次
    playInterval = setInterval(() => {
      const fiveSeconds = 5;
      const totalDuration = duration.value; // 总时长（秒）
@@ -324,6 +326,7 @@
        currentTime.value = duration.value;
        stopPlayback();
        isPlaying.value = false;
        finishPlay.value = true;
        emit("isPlaying", false);
        emit("playbackFinished", true);
        return;
@@ -339,7 +342,9 @@
      }

      const progress = currentTime.value / duration.value;
      emit("timeUpdate", progress * 100);
      if (selectedScheme.value.type !== 2) {
        emit("timeUpdate", progress * 100);
      }
    }, 1000 / playbackRate.value);
  }
};
@@ -347,6 +352,7 @@
// 降雨数据相关变量
let rainFallValues = ref([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let averageRainIntensity = ref()
let maxRainValue = ref(-Infinity);
// 获取降雨数据
function getRainfallData() {
@@ -427,6 +433,16 @@

  // 提取 intensity 值
  rainFallValues.value = hourlyRainfallList.map((r) => r.intensity);
  // 计算平均雨强
  if (rainFallValues.value.length > 0) {
    const sumIntensity = rainFallValues.value.reduce((sum, val) => sum + val, 0);
    averageRainIntensity.value = sumIntensity / rainFallValues.value.length;
  } else {
    averageRainIntensity.value = 0; // 或者 null 表示无数据
  }

  console.log("平均雨强为：", averageRainIntensity.value);

  minRainValue.value = Math.min(...rainFallValues.value);
  maxRainValue.value = Math.max(...rainFallValues.value);

@@ -435,6 +451,7 @@
    minRainValue.value,
    maxRainValue.value
  );

}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
@@ -541,15 +558,14 @@
// 全局状态记录
const colorState = {
  currentColor: "#F5F0E6", // 当前颜色
  currentAlpha: -0.3,      // 当前透明度
  colorStages: null,       // 预计算的颜色阶段时间点
  maxColorTime: null       // 记录达到最深颜色时的时间点
  currentAlpha: -0.3, // 当前透明度
  colorStages: null, // 预计算的颜色阶段时间点
  maxColorTime: null, // 记录达到最深颜色时的时间点
};

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

  // 颜色配置（亮度递减）
  const COLOR_STOPS = [
    { hex: "#F5F0E6", luminance: 240.4 }, // stage 0
@@ -557,22 +573,20 @@
    { 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
    { hex: "#744C33", luminance: 84.5 }, // stage 5
    { hex: "#5D3D2C", luminance: 68.1 }, // stage 6
  ];
  const alphaStops = [
    -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
    -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
  ];

  // 累计降雨量阈值（mm）
  const R_THRESHOLDS = [0, 200, 240, 280, 310, 350]; // 共6个阶段对应6个阈值

  // 时间和降雨量信息
  const timeTotals = [];
  const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
@@ -582,13 +596,12 @@
    const total = rainTotalInfo.value[i].total; // 使用 total 替代 intensity
    timeTotals.push({
      time,
      total
      total,
    });
  }

  // 找出每个阶段首次达到的时间点
  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++) {
@@ -598,7 +611,7 @@
          startTime: time,
          color: COLOR_STOPS[stage].hex,
          alpha: alphaStops[stage],
          threshold
          threshold,
        };
        break;
      }
@@ -610,7 +623,7 @@
    startTime: 0,
    color: COLOR_STOPS[0].hex,
    alpha: alphaStops[0],
    threshold: 0
    threshold: 0,
  };

  colorState.colorStages = stages;
@@ -627,7 +640,10 @@
  // 查找当前时间点所属的阶段
  let currentStage = 0;
  for (let i = colorState.colorStages.length - 1; i >= 0; i--) {
    if (colorState.colorStages[i] && currentTime.value >= colorState.colorStages[i].startTime) {
    if (
      colorState.colorStages[i] &&
      currentTime.value >= colorState.colorStages[i].startTime
    ) {
      currentStage = i;
      break;
    }
@@ -635,15 +651,21 @@

  // 记录达到最深颜色的时间点
  if (currentStage >= colorState.colorStages.length - 1) {
    if (colorState.maxColorTime === null || currentTime.value > colorState.maxColorTime) {
    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);
  const isBeforeMaxColorTime =
    colorState.maxColorTime !== null &&
    currentTime.value <= colorState.maxColorTime;
  const shouldForceUpdate =
    isForceUpdate && (isTimeGoingBackward || isBeforeMaxColorTime);

  // 更新颜色逻辑
  if (shouldForceUpdate || isTimeGoingBackward) {
@@ -656,7 +678,9 @@
    const newAlpha = colorState.colorStages[currentStage].alpha;

    // 只应用更暗的颜色和更低的透明度
    if (calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)) {
    if (
      calculateLuminance(newColor) < calculateLuminance(colorState.currentColor)
    ) {
      colorState.currentColor = newColor;
    }
    if (newAlpha < colorState.currentAlpha) {
@@ -684,9 +708,14 @@
  // 打印信息
  // console.log("========================================");
  // console.log(`【时间戳】: ${new Date(currentTimeMs).toLocaleString()}`);
  // console.log(`【累计降雨量 R】: ${currentTotal !== null ? currentTotal.toFixed(2) : '未知'} mm`);
  console.log(
    `【累计降雨量 R】: ${currentTotal !== null ? currentTotal.toFixed(2) : "未知"
    } mm`
  );
  // console.log(`【当前阶段】: 第 ${currentStage} 阶段`);
  // console.log(`【颜色 HEX】: ${colorState.colorStages[currentStage]?.color || '未定义'}`);
  console.log(
    `【颜色 HEX】: ${colorState.colorStages[currentStage]?.color || "未定义"}`
  );
  // console.log(`【透明度 Alpha】: ${colorState.colorStages[currentStage]?.alpha || '未定义'}`);
  // console.log("========================================");
  // 应用颜色
@@ -721,7 +750,8 @@

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

  currentTime.value = newTime;
@@ -779,7 +809,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color,
  };
  // console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
@@ -914,16 +944,25 @@
);

const jsonFetch = ref(null);

const currentReplayIndex = ref(0); // 当前播放的rePlayList索引
// 提取为独立函数
async function initializeSimulationData(force = false) {
async function initializeSimulationData(replayItem = null) {
  try {
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;

    if (schemeInfo.type == 2) {
      speedShow.value = false;
      jsonFetch.value = layerDate.value;
      if (
        replayItem ||
        (simStore.rePlayList && simStore.rePlayList.length != 0)
      ) {
        jsonFetch.value =
          replayItem || simStore.rePlayList[currentReplayIndex.value];
        speedShow.value = true;
      } else {
        jsonFetch.value = layerDate.value;
        speedShow.value = false;
      }
    } else {
      getRainfallData();
      speedShow.value = true;
@@ -943,7 +982,8 @@
      watersMaxHeight,
      watersMinHeight
    );

    const waterInfoArr = [watersMaxHeight, maxRainValue.value,averageRainIntensity.value]
    schemWaterInfo.value = waterInfoArr
    // 更新时间轴相关数据
    if (timestamps) {
      frameNum.value = timestamps.length;
@@ -965,12 +1005,35 @@
    });
  }
}
// 播放完成后的回调
function handlePlayFinished() {
  if (selectedScheme.value.type !== 2) return;
  finishPlay.value = false;
  currentReplayIndex.value++;

// 挂载时调用
onMounted(async () => {
  // 因为这个函数实时模拟监听也需要使用，所以封装了一个函数
  await initializeSimulationData();
});
  if (currentReplayIndex.value < simStore.rePlayList.length) {
    // 自动播放下一个
    initializeSimulationData(simStore.rePlayList[currentReplayIndex.value]);
    togglePlay();
    shouldAutoPlay.value = false;
  } else {
    // 所有项目播放完成
    currentReplayIndex.value = 0; // 重置索引
    isPlaying.value = false; // 停止播放
    emit("timeUpdate", 100); // 在所有项目播放完毕后触发
  }
}

// 监听播放完成事件
watch(
  () => finishPlay.value,
  (newVal) => {
    if (newVal && selectedScheme.value.type === 2) {
      handlePlayFinished();
    }
  }
);

const shouldAutoPlay = ref(false);
// 监听 layerDate 变化后标记准备播放
watch(
@@ -990,6 +1053,13 @@
    shouldAutoPlay.value = false;
  }
});

// 挂载时调用
onMounted(async () => {
  // 因为这个函数实时模拟监听也需要使用，所以封装了一个函数
  await initializeSimulationData();
});

// 根据返回数据的个数去渲染时间轴
function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
@@ -1006,28 +1076,66 @@
});

const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  // 停止实时模拟定时器
  EventBus.emit("close-time");

async function handleBack() {
  // 实时模拟弹窗确认是返回方案列表还是停止模拟
  if (selectedScheme.value.type === 2) {
    try {
      await ElMessageBox.confirm("方案未停止时结束模拟后，后台将停止计算", {
        confirmButtonText: "返回列表",
        cancelButtonText: "结束模拟",
        type: "warning",
      });
      // 用户点击了确认，这里不执行任何操作，仅关闭对话框
    } catch (error) {
      stopSim(selectedScheme.value.id).then((res) => {
        if (res.code == 404) {
          ElMessage.warning("该服务已停止");
        } else {
          ElMessage.success("服务正在停止中");
        }
      });
      // return;
    }
  }
  // 不管type是不是2，最终都执行结束模拟的操作
  endSimulation();
}

async function endSimulation() {
  // 结束模拟之后清除layer列表
  simStore.rePlayList = [];
  console.log(simStore.rePlayList, "结束模拟清除rePlayListrePlayList列表");
  EventBus.emit("close-time");
  endSimulate();
  isWaterPrimitiveCreated.value = false;

  // 结束计算和停止拾取
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();
    ratelevelRef.value.stopPicking();
  }

  // 清除点
  if (crossRef.value) {
    crossRef.value.clearPoints();
    console.log("执行删除点功能");
  }

  emit("isColorRender", false);

  // 延迟删除雨量图层
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);

  destoryWaterPrimitive();

  // 发送事件隐藏相关信息
  EventBus.emit("hide-schemeInfo");
  EventBus.emit("clear-water-depth");
  EventBus.emit("clear-water-velocity");

  ElMessage({ message: "模拟进程正在关闭中...", type: "success" });
}
</script>