wangjuncheng
2025-05-15 f16045cde17854377084335c478e3cae0d08d6b8
src/components/menu/TimeLine.vue
@@ -28,6 +28,10 @@
        <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>
      <div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
        <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
@@ -39,7 +43,12 @@
        </div>
      </div>
    </div>
    <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">结束模拟</el-button>
    <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>
  </div>
</template>
@@ -54,14 +63,16 @@
  inject,
  reactive
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import dayjs from "dayjs";
import { getRainfall } from "@/api/index";
import {
  createWaterPrimitive,
  destoryWaterPrimitive,
  pauseWaterSimulation,
  resumeWaterSimulation,
  setTimeForWaterSimulation,
  toggleWaterColorRender,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
@@ -71,9 +82,7 @@
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
// 定义props
const props = defineProps({
  waterSimulateParams: {
@@ -83,9 +92,10 @@
    }),
  },
});
// 响应式状态
const ratelevelRef = ref(null); // 获取子组件实例的引用
const currentPlayingTime = ref(""); // 当前播放时间
const sendCurrentPlayingTime = ref(""); // 当前播放时间
const isPlaying = ref(false);
const playbackFinished = ref(true);
const currentTime = ref(0);
@@ -96,7 +106,7 @@
const waterTimestamps = ref([]); // 存储时间轴数据
const timeMarkers = ref([]);
const timelineTrack = ref(null);
// 新增标识变量
const isColorRenderEnabled = ref(false); // 假设这是你的颜色渲染开关状态
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
const isRainEnabled = ref(false);
@@ -107,8 +117,6 @@
  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
);
@@ -117,47 +125,62 @@
    new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
  ).map((date) => dayjs(date).toDate())
);
const currentTimeFormatted = computed(() => formatTime(currentTime.value));
// 播放控制
// 播放控制
const togglePlay = () => {
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0; // 如果已经播放完毕,重置时间
    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; // 标记为已创建
      // 这里通过water.js中去发送请求获取水面模拟
      createWaterPrimitive({
        baseUrl: "/simu/20250515111549",
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value
      });
      isWaterPrimitiveCreated.value = true;
    } else {
      // 后续播放时调用恢复接口
      resumeWaterSimulation();
      toggleWaterColorRender(isColorRenderEnabled.value); // 更新颜色渲染
    }
    if (currentTime.value === 0) emit("playbackFinished", false);
    // 恢复下雨效果
    if (isRainEnabled.value) {
      mapUtils.toggleRain(rainParams, true);
    }
  } else {
    stopPlayback();
    pauseWaterSimulation(); // 调用暂停接口
    pauseWaterSimulation();
    // 停止下雨效果
    isRainEnabled.value = true; // 保存当前需要下雨的状态
    isRainEnabled.value = true;
    setTimeout(() => {
      mapUtils.delRain();
    }, 3000);
  }
};
// 颜色渲染切换事件
const handleColorRenderChange = (enabled) => {
  if (!isPlaying.value) {
    ElMessage({
      message: "请先启动水体模拟后再进行专题效果切换。",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
  }
  if (isWaterPrimitiveCreated.value) {
    console.log('当前是否开启专题渲染:', enabled);
    emit("isColorRender", enabled)
    toggleWaterColorRender(enabled);
  }
};
const intervalMap = {
  1: 1000, // 1倍速
  2: 500, // 2倍速
@@ -166,7 +189,7 @@
};
// 播放逻辑
const startPlayback = () => {
  const interval = intervalMap[playbackRate.value] || 1000; // 默认为1000
  // const interval = intervalMap[playbackRate.value] || 1000; // 默认为1000
  clearInterval(playInterval); // 清除之前的定时器
  playInterval = setInterval(() => {
    const timeIncrement = playbackRate.value; // 倍速作为增量
@@ -198,10 +221,8 @@
    console.warn("selectedScheme 或 data 不存在");
    return;
  }
  // 注意:有时 data 可能是一个字符串(例如 JSON 字符串)
  let data = selectedScheme.value.data;
  // 如果是字符串,则尝试解析成对象
  if (typeof data === 'string') {
    try {
@@ -217,7 +238,6 @@
  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');
}
// 定义降雨等级及其对应的视觉参数
@@ -280,24 +300,18 @@
// 根据播放进度更新天气效果(已优化)
let lastUsedIndex = -1; // 缓存上一次使用的索引,防止重复更新
let lastRainValue = null;
function updateWeatherByProgress() {
  if (rainFallValues.value.length === 0) return;
  console.log(`时间轴总时长: ${duration.value}, 当前时间: ${currentTime.value}`); // 打印时间轴信息
  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];
  // 启用插值(alpha 平滑过渡)
  const alpha = floatIndex - index;
  const rainValue = currentRain + (nextRain - currentRain) * alpha;
  // 打印当前处理的雨量数据
  console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
@@ -435,9 +449,12 @@
  () => currentTime.value,
  () => {
    if (waterTimestamps.value.length > 0) {
      currentPlayingTime.value = dayjs(waterTimestamps.value[0])
      sendCurrentPlayingTime.value = dayjs(waterTimestamps.value[0])
        .add(currentTime.value, "second")
        .format("YYYY-MM-DD mm:ss");
        .valueOf(); // 使用 valueOf() 获取原始时间戳
      // 更新 currentPlayingTime 格式化后的时间字符串
      currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
@@ -448,12 +465,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") / 7
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 5
  );
  return Array.from({ length: 8 }, (_, i) =>
  return Array.from({ length: 6 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("mm:ss")
      .format("HH:mm:ss")
  );
}
@@ -469,11 +486,13 @@
onMounted(async () => {
  try {
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      sendCurrentPlayingTime.value = timestamps[0]
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
@@ -508,6 +527,10 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();
  }
  emit("isColorRender", false);
  setTimeout(() => {
    mapUtils.delRain();
  }, 3000);