c

wangjuncheng

2025-04-30 c49a96c05e686a1c333998b944bf69055341cdf4

c

 src/components/menu/TimeLine.vue

@@ -52,8 +52,10 @@
  defineProps,
  onBeforeUnmount,
  inject,
  reactive
} from "vue";
import dayjs from "dayjs";
import { getRainfall } from "@/api/index";
import {
  createWaterPrimitive,
  destoryWaterPrimitive,
@@ -61,6 +63,7 @@
  resumeWaterSimulation,
  setTimeForWaterSimulation,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
@@ -96,7 +99,13 @@
// 新增标识变量
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;

const isRainEnabled = ref(false);
const rainParams = reactive({
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
});
// 计算属性
const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
@@ -124,20 +133,30 @@
    if (!isWaterPrimitiveCreated.value) {
      // 第一次播放时创建水体模拟层
      console.log(selectedScheme.value, '这里是当前方案的全部信息');

      createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc",});
      createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc" });
      isWaterPrimitiveCreated.value = true; // 标记为已创建
    } else {
      // 后续播放时调用恢复接口
      resumeWaterSimulation();
    }

    if (currentTime.value === 0) emit("playbackFinished", false);

    // 恢复下雨效果
    if (isRainEnabled.value) {
      mapUtils.toggleRain(rainParams, true);
    }
  } else {
    stopPlayback();
    pauseWaterSimulation(); // 调用暂停接口

    // 停止下雨效果
    isRainEnabled.value = true; // 保存当前需要下雨的状态
    setTimeout(() => {
      mapUtils.delRain();
    }, 3000);
  }
};


const intervalMap = {
  1: 1000, // 1倍速
@@ -148,22 +167,61 @@
// 播放逻辑
const startPlayback = () => {
  const interval = intervalMap[playbackRate.value] || 1000; // 默认为1000
  clearInterval(playInterval); // 确保清除之前的定时器
  clearInterval(playInterval); // 清除之前的定时器
  playInterval = setInterval(() => {
    const timeIncrement = playbackRate.value; // 倍速作为增量
    currentTime.value += timeIncrement;

    if (currentTime.value >= duration.value) {
      currentTime.value = duration.value; // 停在最后一帧
      stopPlayback();
      isPlaying.value = false;
      emit("isPlaying", false);
      emit("playbackFinished", true);
      setTimeout(() => {
        mapUtils.delRain();
      }, 3000);
    }

    emit("timeUpdate", progressPercentage.value);
  }, 1000); // 根据速率调整间隔
    updateWeatherByProgress(); // 根据当前进度更新天气
    // 计算播放进度百分比 [0, 1]
    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100); // 百分比上报
  }, 1000); // 注意使用interval而非固定1000ms
};
let rainFallValues = ref([]); // 用于存储提取的value数组
let minRainValue = ref(Infinity);
let maxRainValue = ref(-Infinity);
function getRainfallData() {
  getRainfall().then((res) => {
    rainFallValues.value = res;
    // 提取value值
    rainFallValues.value = rainFallValues.value.data.map(item => item.value);
    // 计算min和max雨量值
    minRainValue.value = Math.min(...rainFallValues.value);
    maxRainValue.value = Math.max(...rainFallValues.value);
    console.log(minRainValue.value, maxRainValue.value, 'min and max rain values');
  });
}
// 线性映射函数
function mapValue(value, fromLow, fromHigh, toLow, toHigh) {
  return (value - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
}
// 根据当前播放进度更新天气
// 我这里要是接入真实数据后，每个数据
function updateWeatherByProgress() {
  const progress = currentTime.value / duration.value;
  // 计算当前进度对应于 rainFallValues 数组中的位置
  const index = Math.floor(progress * (rainFallValues.value.length - 1));
  const rainValue = rainFallValues.value[index]; // 获取对应的降雨量 value
  // 根据当前雨量动态调整雨的参数
  // const rainParams = {
  //   rainSize: mapValue(rainValue, minRainValue.value, maxRainValue.value, 0.5, 1.5),     // 雨滴大小：从小到大
  //   rainSpeed: mapValue(rainValue, minRainValue.value, maxRainValue.value, 30, 120),      // 雨速：从慢到快
  //   rainDensity: mapValue(rainValue, minRainValue.value, maxRainValue.value, 20, 120),    // 密度：从稀疏到密集
  //   rainColor: "#99B3CC"  // 可以在此基础上增加颜色变化逻辑，例如暴雨为深蓝等
  // };
  // 调用工具方法更新下雨效果
  mapUtils.toggleRain(rainParams, true);
}

const stopPlayback = () => {
  clearInterval(playInterval);
@@ -183,18 +241,26 @@
  showSpeedMenu.value = false;
  // 停止当前播放
  stopPlayback();

  setTimeout(() => {
        mapUtils.delRain();
      }, 3000);
  // 重置时间轴到初始状态
  currentTime.value = 0; // 时间归零
  emit("timeUpdate", progressPercentage.value);
  isPlaying.value = false;
  emit("isPlaying", false);

  // 销毁现有的水体模拟层
  if (isWaterPrimitiveCreated.value) {
    destoryWaterPrimitive();
    isWaterPrimitiveCreated.value = false; // 重置标志变量
  }
  isPlaying.value = false;
  emit("isPlaying", false);

  pauseWaterSimulation(); // 调用暂停接口
  EventBus.emit("clear-echart");
  EventBus.emit("reset-table");
};
// 时间轴跳转
const seekToPosition = (event) => {
@@ -220,7 +286,6 @@
      "Time:",
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );

    // 调用跳转接口，传递索引值
    setTimeForWaterSimulation(closestIndex);

@@ -235,7 +300,6 @@
function findClosestTimestampIndex(currentTimeValue) {
  let closestIndex = 0;
  let minDiff = Infinity;

  waterTimestamps.value.forEach((timestamp, index) => {
    const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
    if (diff < minDiff) {
@@ -251,7 +315,6 @@
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
      // 你可以触发一些逻辑，比如调接口等
    }
  }
)
@@ -262,7 +325,6 @@
      currentPlayingTime.value = dayjs(waterTimestamps.value[0])
        .add(currentTime.value, "second")
        .format("YYYY-MM-DD mm:ss");

      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
@@ -293,6 +355,7 @@

onMounted(async () => {
  try {
    getRainfallData()
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
    if (timestamps) {
      waterTimestamps.value = timestamps;
@@ -332,6 +395,9 @@

const { endSimulate } = inject("simulateActions");
function handleBack() {
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  isWaterPrimitiveCreated.value = false

 src/utils/tools.js

@@ -53,7 +53,7 @@
  },
  // 雨天模拟
  toggleRain(option, show) {
    console.log(option, "option");
    // console.log(option, "option");
    // 先销毁旧实例
    if (this.rainEffect) {
      this.rainEffect.destroy();