123

wangjuncheng

2025-06-16 4b7b8185bdce4272cd5f256fcc777056f54add6d

 src/components/menu/TimeLine.vue

@@ -28,25 +28,42 @@
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
          <!-- {{ formatDate(date) }} -->
        </div>
        <!-- 专题渲染:
        <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px"
          :disabled="!isPlaying || !isWaterPrimitiveCreated" /> -->
        <!-- active-text="开" inactive-text="关" -->
        <div>专题渲染:
          <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="scale-markers">
          <div class="scale-marker" style="left: 0%"></div>
          <div class="scale-marker" style="left: 25%"></div>
          <div class="scale-marker" style="left: 50%"></div>
          <div class="scale-marker" style="left: 75%"></div>
          <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">
            {{ time }}
          <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>
        </div>
      </div>
    </div>
    <div>
      <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation"
        style="margin-top: 8px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;"></ratelevel>
      <el-button @click="handleBack" style="margin-top: 3px; margin-left: 30px; margin-right: 10px">结束模拟</el-button>
      <div style="display: flex;">
        <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="margin-top: 12px; margin-left: 16px; margin-right: 20px;justify-content: flex-end;" />

      </div>
      <el-button @click="handleBack"
        style="margin-top: 3px; margin-left: 28px; margin-right: 10px;width: 75%;height: 30%;">结束模拟</el-button>
    </div>

  </div>
@@ -64,6 +81,7 @@
  reactive
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";

import dayjs from "dayjs";
import {
@@ -78,10 +96,12 @@
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
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", "isColorRender"]);
// 定义props
const props = defineProps({
@@ -93,7 +113,9 @@
  },
});
// 响应式状态
let serviceInfo = ref(null); // 当前方案的服务地址
const ratelevelRef = ref(null); // 获取子组件实例的引用
const crossRef = ref(null); // 获取子组件实例的引用
const currentPlayingTime = ref(""); // 当前播放时间
const sendCurrentPlayingTime = ref(""); // 当前播放时间
const isPlaying = ref(false);
@@ -116,6 +138,8 @@
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
});
let minFlowRate = ref()
let maxFlowRate = ref()
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -127,6 +151,7 @@
);
// 播放控制
const togglePlay = () => {
  // 这里应该再设定几个限制，如果缺少什么数据，无法进行仿真
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;

@@ -137,12 +162,15 @@
    startPlayback();

    if (!isWaterPrimitiveCreated.value) {
      console.log(selectedScheme.value, '这里是当前方案的全部信息');
      // console.log(serviceInfo, '这里是当前方案的服务信息！');
      // 这里通过water.js中去发送请求获取水面模拟
      createWaterPrimitive({
        baseUrl: "/simu/20250515111549",
        baseUrl: `/simu/${serviceInfo}`,
        // baseUrl: `/simu/c2h1dc`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value
        colorRender: isColorRenderEnabled.value,
        minFlowRate,
        maxFlowRate,
      });
      isWaterPrimitiveCreated.value = true;
    } else {
@@ -189,26 +217,33 @@
};
// 播放逻辑
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; // 停在最后一帧
    // 找到当前时间对应的索引
    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); // 注意使用interval而非固定1000ms
    emit("timeUpdate", progress * 100);
  }, 1000 / playbackRate.value); // 根据播放速率调整间隔
};
// 降雨变化部分
// 降雨数据相关变量
@@ -227,18 +262,33 @@
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data);
      console.log('解析后的 data:', data);
      console.log('解析后的降雨数据：', data);
    } catch (e) {
      console.error("data 不是有效的 JSON 字符串");
      return;
    }
  }
  // 打印降雨强度的单位
  console.log('降雨强度的单位是：', data.intensityUnit);
  // 根据 intensityUnit 调整 rainfalls 中的 intensity 值
  if (data.intensityUnit === 'mm/min') {
    data.rainfalls.forEach(r => r.intensity *= 60);
    console.log('将 mm/min 转换为 mm/h 后的 rainfalls:', data.rainfalls);
  } else if (data.intensityUnit === 'mm/5min') {
    data.rainfalls.forEach(r => r.intensity *= 12);
    console.log('将 mm/5min 转换为 mm/h 后的 rainfalls:', data.rainfalls);
  } else if (data.intensityUnit !== 'mm/h') {
    console.warn('未知的 intensity 单位，无法进行转换');
  }

  const rainfallList = data.rainfalls;
  console.log('最终的 rainfallList:', rainfallList);

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map(r => r.intensity);
  minRainValue.value = Math.min(...rainFallValues.value);
  maxRainValue.value = Math.max(...rainFallValues.value);
  console.log(minRainValue.value, maxRainValue.value, 'min and max rain values');
  console.log('当前方案下最小雨量和最大雨量：', minRainValue.value, maxRainValue.value);
}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
@@ -256,35 +306,35 @@
    min: 10,
    max: 24.9,
    size: 0.7,
    speed: 40,
    density: 35,
    color: '#ADD8E6' // 天蓝色，象征持续的中雨
    speed: 28,
    density: 23,
    color: '#ADD8E6'
  },
  {
    name: '大雨',
    min: 25,
    max: 49.9,
    size: 1.0,
    speed: 70,
    density: 60,
    color: '#ADD8E6' // 深蓝色，象征密集的大雨
    speed: 36,
    density: 31,
    color: '#ADD8E6'
  },
  {
    name: '暴雨',
    min: 50,
    max: 99.9,
    size: 1.3,
    speed: 90,
    density: 80,
    color: '#ADD8E6' // 深蓝黑色，象征强降雨
    speed: 42,
    density: 39,
    color: '#ADD8E6'
  },
  {
    name: '大暴雨',
    min: 100,
    size: 1.6,
    speed: 110,
    density: 100,
    color: '#ADD8E6' // 黑色，象征极端暴雨
    speed: 50,
    density: 47,
    color: '#ADD8E6'
  }
];
// 根据降雨量返回对应的雨形配置
@@ -295,14 +345,14 @@
    }
  }
  // 默认无雨状态
  return { name: '无雨', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
  return { name: '无雨', size: 0.3, speed: 10, density: 10, color: '#F0F8FF' };
}
// 根据播放进度更新天气效果（已优化）
let lastUsedIndex = -1; // 缓存上一次使用的索引，防止重复更新
let lastRainValue = null;
function updateWeatherByProgress() {
  if (rainFallValues.value.length === 0) return;
  console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息
  // console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息
  const progress = currentTime.value / duration.value;
  const floatIndex = progress * (rainFallValues.value.length - 1);
  const index = Math.floor(floatIndex);            // 当前索引
@@ -311,13 +361,13 @@
  const nextRain = rainFallValues.value[nextIndex];
  // 启用插值（alpha 平滑过渡）
  const alpha = floatIndex - index;
  const rainValue = currentRain + (nextRain - currentRain) * alpha;
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain)
  // 打印当前处理的雨量数据
  console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);

  // console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
  if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
    console.log('由于数据无显著变化，跳过本次更新');
    // console.log('由于数据无显著变化，跳过本次更新');
    return;
  }

@@ -327,12 +377,12 @@
  // 获取对应的雨形配置
  const rainLevel = getRainLevel(rainValue);

  if (rainLevel.name === '无雨') {
    // 无雨状态：清除雨效
    mapUtils.delRain();
    console.log('执行了无雨状态，清除了雨效');
    return;
  }
  // if (rainLevel.name === '无雨') {
  //   // 无雨状态：清除雨效
  //   mapUtils.delRain();
  //   console.log('执行了无雨状态，清除了雨效');
  //   return;
  // }

  // 非无雨状态：构建雨滴参数并更新雨效
  const rainParams = {
@@ -341,9 +391,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
  };

  console.log('当前雨量数据：', rainValue);
  console.log('当前雨形：', rainLevel);
  console.log('当前雨量数据：', rainValue, '当前雨形：', rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
@@ -351,16 +399,36 @@
  clearInterval(playInterval);
};

const skipForward = () =>
  (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒
const skipForward = () => {
  if (waterTimestamps.value.length === 0) return;
  const currentIndex = findClosestTimestampIndex(currentTime.value);
  const nextIndex = currentIndex + 1;
  if (nextIndex >= waterTimestamps.value.length) {
    return;
  }
  const baseTimestamp = waterTimestamps.value[0];
  currentTime.value = (waterTimestamps.value[nextIndex] - baseTimestamp) / 1000;
  setTimeForWaterSimulation(nextIndex);
  if (!isPlaying.value) pauseWaterSimulation();
};

const skipBackward = () =>
  (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒

const skipBackward = () => {
  if (waterTimestamps.value.length === 0) return;
  const currentIndex = findClosestTimestampIndex(currentTime.value);
  const prevIndex = currentIndex - 1;
  if (prevIndex < 0) {
    return;
  }
  const baseTimestamp = waterTimestamps.value[0];
  currentTime.value = (waterTimestamps.value[prevIndex] - baseTimestamp) / 1000;
  setTimeForWaterSimulation(prevIndex);
  if (!isPlaying.value) pauseWaterSimulation();
};
const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);

// 设置播放速率
const setPlaybackRate = (rate) => {
  isColorRenderEnabled.value = false
  playbackRate.value = rate;
  showSpeedMenu.value = false;
  // 停止当前播放
@@ -388,47 +456,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")
    );
    // 调用跳转接口，传递索引值
    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;
@@ -465,12 +524,12 @@
  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") / 5
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 4
  );
  return Array.from({ length: 6 }, (_, i) =>
  return Array.from({ length: 5 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("HH:mm:ss")
      .format("MM-DD HH:mm:ss")
  );
}

@@ -485,9 +544,17 @@

onMounted(async () => {
  try {
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;

    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
    const { waterTimestamps: timestamps, watersMaxHeight, watersMinHeight } = await fetchWaterSimulationData(serviceInfo);
    console.log('当前方案下的最大水位深度和最小水位深度',watersMaxHeight,watersMinHeight);
    
    // 现在是按照总共有多少个点来渲染时间轴
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
@@ -497,26 +564,24 @@
        "YYYY-MM-DD HH:mm:ss"
      );
    }
    minFlowRate = watersMinHeight
    maxFlowRate = watersMaxHeight
  } catch (error) {
    console.error("Error loading water simulation data:", error);
    ElMessage({
      message: "降雨数据出错，请重新新建模拟方案！",
      type: "warning",
    });
  }
});

// 根据返回数据的个数去渲染时间轴
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(),
    ];
    duration.value = dayjs(last).diff(dayjs(first), "second");
    console.log("Updated timeline range:", {
      ...props.waterSimulateParams,
      duration: duration.value,
    });
    duration.value = (last - first) / 1000; // 毫秒转秒
  }
}

@@ -527,18 +592,26 @@

const { endSimulate } = inject("simulateActions");
function handleBack() {
  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);
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  isWaterPrimitiveCreated.value = false;
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
  EventBus.emit("clear-water-depth");
  EventBus.emit("clear-water-velocity");
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" });
}
</script>
<style scoped>
@@ -551,8 +624,8 @@
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 678px;
  height: 108px;
  width: 44%;
  height: 10%;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");
  background-size: 100% 100%;
@@ -634,7 +707,7 @@
.timeline {
  margin-top: 10px;
  position: relative;
  flex: 1;
  flex: 0.9;
}

.dates {
@@ -677,25 +750,52 @@
}

.time-markers {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 15px;
  color: #fff;
  top: 20px;
  display: flex;
  justify-content: space-between;
}

.time-marker {
  margin-top: 5px;
  position: absolute;
  font-size: 12px;
  color: #fff;
  transform: translateX(-20%);
  text-align: center;
  width: 25%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .date-part {
  margin-bottom: 2px;
} */
.time-part {
  font-size: 11px;
  opacity: 0.8;
}

.current-date {
  margin-bottom: 5px;
  font-size: 15px;
  color: #fff;
  transform: translateX(-3%);
  transform: translateX(-8%);
}

.scale-markers {
  position: absolute;
  width: 100%;
  height: 10px;
  top: 10px;
}

.scale-marker {
  position: absolute;
  width: 3px;
  height: 6px;
  background-color: rgba(255, 255, 255, 1);
  transform: translateX(-50%);
}
</style>