change

wangjuncheng

2025-05-08 db07d86f01f19683d7adb263139159ffe1e0c9bf

 src/components/menu/TimeLine.vue

@@ -24,9 +24,7 @@

    <div class="timeline">
      <div class="dates">
        <div class="current-date">
          当前播放时间：{{ currentPlayingTime }}
        </div>
        <div class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
          <!-- {{ formatDate(date) }} -->
        </div>
@@ -41,7 +39,7 @@
        </div>
      </div>
    </div>
    <el-button @click="handleBack" style="margin-top: 26px;margin-left: 30px;margin-right: 10px;">结束模拟</el-button>
    <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">结束模拟</el-button>
  </div>
</template>

@@ -54,12 +52,25 @@
  defineProps,
  onBeforeUnmount,
  inject,
  reactive
} from "vue";
import dayjs from "dayjs";
import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
import { getRainfall } from "@/api/index";
import {
  createWaterPrimitive,
  destoryWaterPrimitive,
  pauseWaterSimulation,
  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';
import { ElMessage } from "element-plus";
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);

const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);

@@ -79,19 +90,28 @@
const playbackFinished = ref(true);
const currentTime = ref(0);
const duration = ref(60); // 一天的秒数
const playbackRate = ref(8);
const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
const waterTimestamps = ref([]); // 存储时间轴数据
const timeMarkers = ref([]);
const timelineTrack = ref(null);

// 新增标识变量
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]));
const progressPercentage = computed(() => (currentTime.value / duration.value) * 100);
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
);
const visibleDates = computed(() =>
  Array.from(
    new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
@@ -100,91 +120,322 @@
const currentTimeFormatted = computed(() => formatTime(currentTime.value));

// 播放控制
// 播放控制
const togglePlay = () => {
  // 如果当前是停止状态且已经播放完毕，点击时重置时间
  if (!isPlaying.value && currentTime.value >= duration.value) currentTime.value = 0;
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0; // 如果已经播放完毕，重置时间

  isPlaying.value = !isPlaying.value;
  emit("isPlaying", isPlaying.value);

  if (isPlaying.value) {
    startPlayback();
    // 如果是从头开始播放
    if (!isWaterPrimitiveCreated.value) {
      // 第一次播放时创建水体模拟层
      console.log(selectedScheme.value, '这里是当前方案的全部信息');
      createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc" });
      isWaterPrimitiveCreated.value = true; // 标记为已创建
    } else {
      // 后续播放时调用恢复接口
      resumeWaterSimulation();
    }

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

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

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

const intervalMap = {
  1: 1000, // 1倍速
  2: 500,  // 2倍速
  4: 250,  // 4倍速
  8: 125,  // 8倍速
  2: 500, // 2倍速
  4: 250, // 4倍速
  8: 125, // 8倍速
};
// 播放逻辑
const startPlayback = () => {
  // 根据当前倍速获取对应的 interval
  const interval = intervalMap[playbackRate.value] || 1000; // 默认为1000
  // 调用 createWaterPrimitive 并传递 interval
  createWaterPrimitive({ interval });
  clearInterval(playInterval);
  clearInterval(playInterval); // 清除之前的定时器
  playInterval = setInterval(() => {
    // 计算每次增加的时间量
    const timeIncrement = playbackRate.value; // 倍速直接作为增量
    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([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let maxRainValue = ref(-Infinity);

const stopPlayback = () => clearInterval(playInterval);
const skipForward = () => (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒
const skipBackward = () => (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒
// 获取降雨数据
function getRainfallData() {
  getRainfall().then((res) => {
    rainFallValues.value = res.data.map(item => item.value); // 提取降雨量值
    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;
// }

// 定义降雨等级及其对应的视觉参数
const rainLevels = [
  {
    name: '小雨',
    min: 0.1,
    max: 9.9,
    size: 0.5,     // 雨滴大小：更小
    speed: 20,     // 下落速度：更慢
    density: 15,   // 雨滴密度：更稀疏
    color: '#ADD8E6' // 浅蓝色，象征轻柔的小雨
  },
  {
    name: '中雨',
    min: 10,
    max: 24.9,
    size: 0.7,
    speed: 40,
    density: 35,
    color: '#ADD8E6' // 天蓝色，象征持续的中雨
  },
  {
    name: '大雨',
    min: 25,
    max: 49.9,
    size: 1.0,
    speed: 70,
    density: 60,
    color: '#ADD8E6' // 深蓝色，象征密集的大雨
  },
  {
    name: '暴雨',
    min: 50,
    max: 99.9,
    size: 1.3,
    speed: 90,
    density: 80,
    color: '#ADD8E6' // 深蓝黑色，象征强降雨
  },
  {
    name: '大暴雨',
    min: 100,
    size: 1.6,
    speed: 110,
    density: 100,
    color: '#ADD8E6' // 黑色，象征极端暴雨
  }
];

// 根据降雨量返回对应的雨形配置
function getRainLevel(rainValue) {
  for (let level of rainLevels) {
    if (level.min <= rainValue && (level.max === undefined || rainValue <= level.max)) {
      return level;
    }
  }
  // 默认无雨状态
  return { name: '无雨', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
}

// 根据播放进度更新天气效果
function updateWeatherByProgress() {
  const progress = currentTime.value / duration.value;
  const floatIndex = progress * (rainFallValues.value.length - 1);
  const index = Math.floor(floatIndex);
  const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1);
  const currentRain = rainFallValues.value[index];
  const nextRain = rainFallValues.value[nextIndex];
  // 插值因子 [0, 1]
  // const alpha = floatIndex - index;

  // 插值得到当前降雨量
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain);
  // 获取对应的雨形配置
  const rainLevel = getRainLevel(rainValue);
  if (rainLevel.name === '无雨') {
    mapUtils.delRain();
    return;
  }
  // 非无雨状态：构建雨滴参数并更新雨效
  const rainParams = {
    rainSize: rainLevel.size,
    rainSpeed: rainLevel.speed,
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
  };
  console.log('当前雨量数据：', rainValue);
  console.log('当前雨形：', rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
const stopPlayback = () => {
  clearInterval(playInterval);
};
const skipForward = () =>
  (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒
const skipBackward = () =>
  (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒
const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);
// 设置播放速率
const setPlaybackRate = (rate) => {
  playbackRate.value = rate;
  showSpeedMenu.value = false;
  if (isPlaying.value) stopPlayback(), startPlayback(); // 如果正在播放，则重新启动以应用新的速率
  // 停止当前播放
  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) => {
  // 检查是否已经创建了水体模拟层
  if (!isWaterPrimitiveCreated.value) {
    ElMessage({
      message: "请先启动水体模拟后再进行时间轴跳转。",
      type: "warning",
    });
    return;
  }
  const rect = timelineTrack.value.getBoundingClientRect();
  const percentage = (event.clientX - rect.left) / rect.width;
  // 计算当前点击位置对应的时间值
  currentTime.value = Math.round(percentage * duration.value);
  emit("timeUpdate", progressPercentage.value);
  if (waterTimestamps.value.length > 0) {
    const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(currentTime.value, "second");
    console.log("Clicked timestamp:", clickedTimestamp.valueOf(), clickedTimestamp.format("YYYY-MM-DD HH:mm:ss"));
    // 找到最接近的时间戳索引
    const closestIndex = findClosestTimestampIndex(currentTime.value);
    console.log(
      "Clicked timestamp index:",
      closestIndex,
      "Time:",
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );
    setTimeForWaterSimulation(closestIndex);
    if (!isPlaying.value) {
      pauseWaterSimulation();
    }
  }
};
watch(() => currentTime.value, () => {
  if (waterTimestamps.value.length > 0) {
    currentPlayingTime.value = dayjs(waterTimestamps.value[0])
      .add(currentTime.value, "second")
      .format("YYYY-MM-DD mm:ss");

// 辅助函数：找到最接近的时间戳索引
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) {
      minDiff = diff;
      closestIndex = index;
    }
  });

  return closestIndex;
}
watch(
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
    }
  }
});
);
watch(
  () => currentTime.value,
  () => {
    if (waterTimestamps.value.length > 0) {
      currentPlayingTime.value = dayjs(waterTimestamps.value[0])
        .add(currentTime.value, "second")
        .format("YYYY-MM-DD mm:ss");
      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
);

// 时间标记生成
function generateTimeMarkers(timestamps) {
  if (!timestamps || timestamps.length === 0) return [];
  const sorted = [...timestamps].sort((a, b) => dayjs(a).diff(dayjs(b)));
  const interval = Math.floor(dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7);
  return Array.from({ length: 8 }, (_, i) => dayjs(sorted[0]).add(i * interval, "second").format("mm:ss"));
  const interval = Math.floor(
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7
  );
  return Array.from({ length: 8 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("mm:ss")
  );
}
watch(() => waterTimestamps.value, (newTimestamps) => {
  if (newTimestamps.length > 0) timeMarkers.value = generateTimeMarkers(newTimestamps);
}, { immediate: true });

watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
    if (newTimestamps.length > 0)
      timeMarkers.value = generateTimeMarkers(newTimestamps);
  },
  { immediate: true }
);

onMounted(async () => {
  try {
    getRainfallData()
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      currentPlayingTime.value = dayjs(timestamps[0]).format("YYYY-MM-DD HH:mm:ss");
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    }
  } catch (error) {
    console.error("Error loading water simulation data:", error);
@@ -193,20 +444,35 @@

function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
    const [first, last] = [waterTimestamps.value[0], waterTimestamps.value.at(-1)];
    props.waterSimulateParams.date = [dayjs(first).toISOString(), dayjs(last).toISOString()];
    const [first, last] = [
      waterTimestamps.value[0],
      waterTimestamps.value.at(-1),
    ];
    props.waterSimulateParams.date = [
      dayjs(first).toISOString(),
      dayjs(last).toISOString(),
    ];
    duration.value = dayjs(last).diff(dayjs(first), "second");
    console.log("Updated timeline range:", { ...props.waterSimulateParams, duration: duration.value });
    console.log("Updated timeline range:", {
      ...props.waterSimulateParams,
      duration: duration.value,
    });
  }
}

onBeforeUnmount(() => {
  stopPlayback();
  destoryWaterPrimitive();
});

const { endSimulate } = inject("simulateActions");
function handleBack() {
  ElMessage({ message: '模拟进程正在关闭中...', type: 'success' }); // 显示消息通知用户模拟进程正在关闭
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  isWaterPrimitiveCreated.value = false;
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
}
@@ -221,7 +487,7 @@
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 878px;
  width: 678px;
  height: 108px;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");