提交

guonan

2025-06-19 d3e7a1953618d73ffb1a480cb7c6afda42246460

 src/components/menu/TimeLine.vue

@@ -83,20 +83,37 @@
      </div>
    </div>
    <div>
      <ratelevel
        ref="ratelevelRef"
        :playing-time="sendCurrentPlayingTime"
        @finish-calculation="handleFinishCalculation"
        style="
          margin-top: 12px;
          margin-left: 28px;
          margin-right: 10px;
          justify-content: flex-end;
        "
      ></ratelevel>
      <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: 30px; margin-right: 10px"
        style="
          margin-top: 3px;
          margin-left: 28px;
          margin-right: 10px;
          width: 75%;
          height: 30%;
        "
        >结束模拟</el-button
      >
    </div>
@@ -115,6 +132,7 @@
  reactive,
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";

import dayjs from "dayjs";
import {
@@ -133,7 +151,7 @@
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
const { selectedScheme, frameNum } = storeToRefs(simStore);

const emit = defineEmits([
  "timeUpdate",
@@ -153,6 +171,7 @@
// 响应式状态
let serviceInfo = ref(null); // 当前方案的服务地址
const ratelevelRef = ref(null); // 获取子组件实例的引用
const crossRef = ref(null); // 获取子组件实例的引用
const currentPlayingTime = ref(""); // 当前播放时间
const sendCurrentPlayingTime = ref(""); // 当前播放时间
const isPlaying = ref(false);
@@ -175,6 +194,8 @@
  rainColor: "#99B3CC",
  rainDensity: 30, // 雨的密度
});
let minFlowRate = ref();
let maxFlowRate = ref();
// 计算属性
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
@@ -204,6 +225,8 @@
        // baseUrl: `/simu/c2h1dc`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value,
        minFlowRate,
        maxFlowRate,
      });
      isWaterPrimitiveCreated.value = true;
    } else {
@@ -343,8 +366,8 @@
    min: 10,
    max: 24.9,
    size: 0.7,
    speed: 40,
    density: 35,
    speed: 28,
    density: 23,
    color: "#ADD8E6",
  },
  {
@@ -352,8 +375,8 @@
    min: 25,
    max: 49.9,
    size: 1.0,
    speed: 70,
    density: 60,
    speed: 36,
    density: 31,
    color: "#ADD8E6",
  },
  {
@@ -361,16 +384,16 @@
    min: 50,
    max: 99.9,
    size: 1.3,
    speed: 90,
    density: 80,
    speed: 42,
    density: 39,
    color: "#ADD8E6",
  },
  {
    name: "大暴雨",
    min: 100,
    size: 1.6,
    speed: 110,
    density: 100,
    speed: 50,
    density: 47,
    color: "#ADD8E6",
  },
];
@@ -385,16 +408,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); // 当前索引
@@ -403,12 +424,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}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
  if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
    console.log("由于数据无显著变化，跳过本次更新");
    // console.log('由于数据无显著变化，跳过本次更新');
    return;
  }

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

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

  // 非无雨状态：构建雨滴参数并更新雨效
  const rainParams = {
@@ -591,14 +613,24 @@
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;

    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData();
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(
      serviceInfo
    const {
      waterTimestamps: timestamps,
      watersMaxHeight,
      watersMinHeight,
    } = await fetchWaterSimulationData(serviceInfo);
    console.log(
      "当前方案下的最大水位深度和最小水位深度",
      watersMaxHeight,
      watersMinHeight
    );

    // 现在是按照总共有多少个点来渲染时间轴
    if (timestamps) {
      frameNum.value = timestamps.length;
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
@@ -607,6 +639,8 @@
        "YYYY-MM-DD HH:mm:ss"
      );
    }
    minFlowRate = watersMinHeight;
    maxFlowRate = watersMaxHeight;
  } catch (error) {
    console.error("Error loading water simulation data:", error);
    ElMessage({
@@ -634,10 +668,14 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  EventBus.emit("close-selectArea");
  isWaterPrimitiveCreated.value = false;
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();
    ratelevelRef.value.stopPicking();
  }
  if (crossRef.value) {
    crossRef.value.clearPoints();
    console.log("执行删除点功能");
  }
  emit("isColorRender", false);
  setTimeout(() => {
@@ -645,6 +683,8 @@
  }, 3000);
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
  EventBus.emit("clear-water-depth");
  EventBus.emit("clear-water-velocity");
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" });
}
</script>
@@ -658,7 +698,7 @@
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 38%;
  width: 44%;
  height: 10%;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");
@@ -741,7 +781,7 @@
.timeline {
  margin-top: 10px;
  position: relative;
  flex: 1;
  flex: 0.9;
}

.dates {