change

wangjuncheng

2025-05-23 0b5231c1d5ec3af4e6f75d80da6ffe350567843d

change

 src/components/menu/Device.vue

@@ -40,12 +40,12 @@
  initeWaterPrimitiveView()
});

// onBeforeRouteUpdate((to, from, next) => {
//   if (to.path !== '/zhjc') {
//     handleCleanup();
//   }
//   next();
// });
onBeforeRouteUpdate((to, from, next) => {
  if (to.path !== '/zhjc') {
    handleCleanup();
  }
  next();
});
const route = useRoute();

onBeforeUnmount(() => {

 src/components/menu/TimeLine.vue

@@ -162,7 +162,7 @@
      isWaterPrimitiveCreated.value = true;
    } else {
      resumeWaterSimulation();
      toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染
      // toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染
    }

    if (currentTime.value === 0) emit("playbackFinished", false);
@@ -204,44 +204,33 @@
};
// 播放逻辑
const startPlayback = () => {
  clearInterval(playInterval); // 清除之前的定时器
  clearInterval(playInterval);

  // 根据 playbackRate 设置 timeIncrement
  let timeIncrement;
  switch (playbackRate.value) {
    case 1:
      timeIncrement = 900;
      break;
    case 2:
      timeIncrement = 1800;
      break;
    case 4:
      timeIncrement = 3600;
      break;
    case 8:
      timeIncrement = 5600;
      break;
    default:
      timeIncrement = 900; // 默认为1倍速
      break;
  }
  playInterval = setInterval(() => {
    currentTime.value += timeIncrement;
    if (currentTime.value >= duration.value) {
      currentTime.value = duration.value; // 停在最后一帧
    // 找到当前时间对应的索引
    const currentIndex = findClosestTimestampIndex(currentTime.value);
    const nextIndex = currentIndex + 1;

    // 如果已经是最后一个时间点，停止播放
    if (nextIndex >= waterTimestamps.value.length) {
      currentTime.value = duration.value;
      stopPlayback();
      isPlaying.value = false;
      emit("isPlaying", false);
      emit("playbackFinished", true);
      setTimeout(() => {
        mapUtils.delRain();
      }, 3000);
      return;
    }
    updateWeatherByProgress(); // 根据当前进度更新天气
    // 计算播放进度百分比 [0, 1]

    // 更新时间为下一个时间点的时间差（秒）
    const nextTimestamp = waterTimestamps.value[nextIndex];
    const baseTimestamp = waterTimestamps.value[0];
    currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

    // 触发更新
    updateWeatherByProgress();
    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100); // 百分比上报
  }, 1000); // 固定每秒执行一次，也可以使用动态间隔（可选）
    emit("timeUpdate", progress * 100);
  }, 1000 / playbackRate.value); // 根据播放速率调整间隔
};
// 降雨变化部分
// 降雨数据相关变量
@@ -433,49 +422,38 @@
};
// 时间轴跳转
const seekToPosition = (event) => {
  // 检查是否已经创建了水体模拟层
  if (!isWaterPrimitiveCreated.value) {
    ElMessage({
      message: "请先启动水体模拟后再进行时间轴跳转。",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
    ElMessage.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 closestIndex = findClosestTimestampIndex(currentTime.value);
    console.log(
      "Clicked timestamp index:",
      closestIndex,
      "Time:",
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );
    // 调用跳转接口，传递索引值
    console.log(closestIndex,'最近的索引值');
    
    setTimeForWaterSimulation(closestIndex);
  const targetTime = Math.round(percentage * duration.value);

    // 如果当前是暂停状态，调用 pauseWaterSimulation
    if (!isPlaying.value) {
      pauseWaterSimulation();
    }
  }
  // 直接找到最近的 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;

  // 计算当前时间对应的毫秒时间戳
  const baseTime = waterTimestamps.value[0];
  const currentTimestamp = baseTime + currentTimeValue * 1000;

  // 找到最接近的 timestamp 索引
  let closestIndex = 0;
  let minDiff = Infinity;

  waterTimestamps.value.forEach((timestamp, index) => {
    const diff = Math.abs(
      dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
      currentTimeValue
    );
    const diff = Math.abs(timestamp - currentTimestamp);
    if (diff < minDiff) {
      minDiff = diff;
      closestIndex = index;
@@ -539,6 +517,7 @@
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
    console.log(timestamps,timestamps.length,'ddddddddddddddddddddddddddddddddddddddddddddd');
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
@@ -563,15 +542,7 @@
      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,
    // });
    duration.value = (last - first) / 1000; // 毫秒转秒
  }
}


 src/components/tools/Legend_mnfz.vue

@@ -24,6 +24,7 @@
  { height: 4.0, color: "#feb652" },
  { height: 5.0, color: "#fd7f06" },
  { height: 10.0, color: "#fe2b07" },
  { height: 30.0, color: "#4d0a08" }
]);
onMounted(()=>{ 
})

 src/utils/water.js

@@ -21,7 +21,11 @@
 * @param {boolean} options.colorRender - 是否启用颜色渲染
 */
export function createWaterPrimitive(options = {}) {
  const { baseUrl = "/simu/c2h1dc", interval = 1000, colorRender = true } = options;
  const {
    baseUrl = "/simu/c2h1dc",
    interval = 1000,
    colorRender = true,
  } = options;

  water = earthCtrl.simulate.createWaterSimulateLayer({
    baseUrl,
@@ -39,11 +43,14 @@
      { height: 4.0, color: "#feb652" },
      { height: 5.0, color: "#fd7f06" },
      { height: 10.0, color: "#fe2b07" },
      { height: 30.0, color: "#4d0a08" },
    ],
    colorRender, // 控制是否启用颜色渲染
  });

  console.log(`仿真模拟参数： 请求路径 ${baseUrl}, 帧间间隔 ${interval}ms, 是否开启专题渲染 ${colorRender}`);
  console.log(
    `仿真模拟参数： 请求路径 ${baseUrl}, 帧间间隔 ${interval}ms, 是否开启专题渲染 ${colorRender}`
  );
}
/**
 * 初始化水体模拟视图
@@ -102,7 +109,9 @@
      return;
    }
    // const idx = Math.floor(Math.random() * imageList.length); //随机索引跳转，实际中用不到，只用作演示
    // console.log(`Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`);
    console.log(
      `Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`
    );
    water.setTime(imageList[closestIndex]);
  } else {
    console.warn("No water simulation to set time for.");
@@ -128,4 +137,4 @@
 */
function timeCallback(timeStamp) {
  // console.log(`Current timestamp: ${timeStamp}`);
}
}