change

wangjuncheng

2025-05-16 b1398528bd9f5245f580285681cca6abc192c651

 src/components/menu/TimeLine.vue

@@ -28,10 +28,11 @@
        <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>
@@ -87,10 +88,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({
@@ -137,6 +140,7 @@
);
// 播放控制
const togglePlay = () => {
  // 这里应该再设定几个限制，如果缺少什么数据，无法进行仿真
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;

@@ -147,10 +151,11 @@
    startPlayback();

    if (!isWaterPrimitiveCreated.value) {
      console.log(serviceInfo, '这里是当前方案的服务信息！');
      // console.log(serviceInfo, '这里是当前方案的服务信息！');
      // 这里通过water.js中去发送请求获取水面模拟
      createWaterPrimitive({
        baseUrl: `/simu/${serviceInfo}`,
        // baseUrl: `/simu/${serviceInfo}`,
        baseUrl: `/simu/c2h1dc`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value
      });
@@ -237,18 +242,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 = [
@@ -268,7 +288,7 @@
    size: 0.7,
    speed: 40,
    density: 35,
    color: '#ADD8E6' // 天蓝色，象征持续的中雨
    color: '#ADD8E6' 
  },
  {
    name: '大雨',
@@ -277,7 +297,7 @@
    size: 1.0,
    speed: 70,
    density: 60,
    color: '#ADD8E6' // 深蓝色，象征密集的大雨
    color: '#ADD8E6'
  },
  {
    name: '暴雨',
@@ -286,7 +306,7 @@
    size: 1.3,
    speed: 90,
    density: 80,
    color: '#ADD8E6' // 深蓝黑色，象征强降雨
    color: '#ADD8E6' 
  },
  {
    name: '大暴雨',
@@ -294,7 +314,7 @@
    size: 1.6,
    speed: 110,
    density: 100,
    color: '#ADD8E6' // 黑色，象征极端暴雨
    color: '#ADD8E6'
  }
];
// 根据降雨量返回对应的雨形配置
@@ -323,8 +343,7 @@
  const alpha = floatIndex - index;
  const rainValue = currentRain + (nextRain - currentRain) * alpha;
  // 打印当前处理的雨量数据
  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('由于数据无显著变化，跳过本次更新');
@@ -351,9 +370,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
  };

  console.log('当前雨量数据：', rainValue);
  console.log('当前雨形：', rainLevel);
  console.log('当前雨量数据：', rainValue, '当前雨形：', rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
@@ -421,6 +438,8 @@
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );
    // 调用跳转接口，传递索引值
    console.log(closestIndex,'最近的索引值');
    
    setTimeForWaterSimulation(closestIndex);

    // 如果当前是暂停状态，调用 pauseWaterSimulation
@@ -498,7 +517,7 @@
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;
    console.log('获取到的 serviceName:', serviceInfo);
    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
@@ -513,6 +532,10 @@
    }
  } catch (error) {
    console.error("Error loading water simulation data:", error);
    ElMessage({
      message: "降雨数据出错，请重新新建模拟方案！",
      type: "warning",
    });
  }
});

@@ -527,10 +550,10 @@
      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,
    // });
  }
}

@@ -541,6 +564,8 @@

const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  isWaterPrimitiveCreated.value = false;
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();
  }
@@ -548,11 +573,9 @@
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  isWaterPrimitiveCreated.value = false;
  destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" });
}
</script>
<style scoped>
@@ -669,6 +692,7 @@
  position: relative;
  cursor: pointer;
}

.timeline-progress {
  height: 100%;
  background-color: #4a90e2;
@@ -677,6 +701,7 @@
  top: 0;
  left: 0;
}

.timeline-cursor {
  width: 12px;
  height: 12px;
@@ -687,6 +712,7 @@
  transform: translate(-50%, -50%);
  z-index: 2;
}

.time-markers {
  position: absolute;
  width: 100%;
@@ -706,6 +732,7 @@
  flex-direction: column;
  align-items: center;
}

/* .date-part {
  margin-bottom: 2px;
} */
@@ -713,6 +740,7 @@
  font-size: 11px;
  opacity: 0.8;
}

.current-date {
  margin-bottom: 5px;
  font-size: 15px;