change

wangjuncheng

2025-05-16 b1398528bd9f5245f580285681cca6abc192c651

 src/components/menu/TimeLine.vue

@@ -28,24 +28,34 @@
        <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>
        style="margin-top: 12px; 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>

@@ -78,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({
@@ -93,6 +105,7 @@
  },
});
// 响应式状态
let serviceInfo = ref(null); // 当前方案的服务地址
const ratelevelRef = ref(null); // 获取子组件实例的引用
const currentPlayingTime = ref(""); // 当前播放时间
const sendCurrentPlayingTime = ref(""); // 当前播放时间
@@ -127,6 +140,7 @@
);
// 播放控制
const togglePlay = () => {
  // 这里应该再设定几个限制，如果缺少什么数据，无法进行仿真
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;

@@ -137,10 +151,11 @@
    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
      });
@@ -227,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 = [
@@ -258,7 +288,7 @@
    size: 0.7,
    speed: 40,
    density: 35,
    color: '#ADD8E6' // 天蓝色，象征持续的中雨
    color: '#ADD8E6' 
  },
  {
    name: '大雨',
@@ -267,7 +297,7 @@
    size: 1.0,
    speed: 70,
    density: 60,
    color: '#ADD8E6' // 深蓝色，象征密集的大雨
    color: '#ADD8E6'
  },
  {
    name: '暴雨',
@@ -276,7 +306,7 @@
    size: 1.3,
    speed: 90,
    density: 80,
    color: '#ADD8E6' // 深蓝黑色，象征强降雨
    color: '#ADD8E6' 
  },
  {
    name: '大暴雨',
@@ -284,7 +314,7 @@
    size: 1.6,
    speed: 110,
    density: 100,
    color: '#ADD8E6' // 黑色，象征极端暴雨
    color: '#ADD8E6'
  }
];
// 根据降雨量返回对应的雨形配置
@@ -313,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('由于数据无显著变化，跳过本次更新');
@@ -341,9 +370,7 @@
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color
  };

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

    // 如果当前是暂停状态，调用 pauseWaterSimulation
@@ -465,12 +494,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 +514,13 @@

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 } = await fetchWaterSimulationData(serviceInfo);
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
@@ -499,6 +532,10 @@
    }
  } catch (error) {
    console.error("Error loading water simulation data:", error);
    ElMessage({
      message: "降雨数据出错，请重新新建模拟方案！",
      type: "warning",
    });
  }
});

@@ -513,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,
    // });
  }
}

@@ -527,6 +564,8 @@

const { endSimulate } = inject("simulateActions");
function handleBack() {
  endSimulate();
  isWaterPrimitiveCreated.value = false;
  if (ratelevelRef.value) {
    ratelevelRef.value.endCalculation();
  }
@@ -534,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>
@@ -551,8 +588,8 @@
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 678px;
  height: 108px;
  width: 38%;
  height: 10%;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");
  background-size: 100% 100%;
@@ -677,25 +714,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>