1

wangjuncheng

2025-05-23 7acb3042ed738aefc5c5d23a35516c7a6c5a88e0

1

 src/components/menu/TimeLine.vue

@@ -2,30 +2,20 @@
  <div class="timeline-container">
    <div class="controls">
      <div class="control-btn" @click="skipBackward">
        <img
          src="@/assets/img/timeline/left.png"
          class="fas fa-step-backward"
        />
        <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
      </div>
      <div class="control-btn play-btn" @click="togglePlay">
        <img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
        <img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
      </div>
      <div class="control-btn" @click="skipForward">
        <img
          src="@/assets/img/timeline/right.png"
          class="fas fa-step-forward"
        />
        <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
      </div>
      <div class="speed-control">
        <div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
        <div class="speed-menu" v-show="showSpeedMenu">
          <div
            v-for="rate in playbackRates"
            :key="rate"
            @click.capture="setPlaybackRate(rate)"
            :class="{ active: playbackRate === rate }"
          >
          <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
            :class="{ active: playbackRate === rate }">
            {{ rate }}X
          </div>
        </div>
@@ -35,33 +25,18 @@
    <div class="timeline">
      <div class="dates">
        <div class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <div
          v-for="(date, index) in visibleDates"
          :key="index"
          class="date-label"
        >
        <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
          <!-- {{ formatDate(date) }} -->
        </div>
        <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="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>
@@ -70,36 +45,20 @@
          <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"
            :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
          >
            <div class="date-part">{{ time.split(" ")[0] }}</div>
            <div class="time-part">{{ time.split(" ")[1] }}</div>
          <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: 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
      >
      <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation"
        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>

  </div>
</template>

@@ -112,7 +71,7 @@
  defineProps,
  onBeforeUnmount,
  inject,
  reactive,
  reactive
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";

@@ -135,12 +94,7 @@
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);

const emit = defineEmits([
  "timeUpdate",
  "isPlaying",
  "playbackFinished",
  "isColorRender",
]);
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
// 定义props
const props = defineProps({
  waterSimulateParams: {
@@ -173,7 +127,7 @@
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30, // 雨的密度
  rainDensity: 30 // 雨的密度
});
// 计算属性
const progressPercentage = computed(
@@ -203,7 +157,7 @@
        baseUrl: `/simu/${serviceInfo}`,
        // baseUrl: `/simu/c2h1dc`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value,
        colorRender: isColorRenderEnabled.value
      });
      isWaterPrimitiveCreated.value = true;
    } else {
@@ -237,8 +191,8 @@
    return; // 阻止后续逻辑执行
  }
  if (isWaterPrimitiveCreated.value) {
    console.log("当前是否开启专题渲染：", enabled);
    emit("isColorRender", enabled);
    console.log('当前是否开启专题渲染：', enabled);
    emit("isColorRender", enabled)
    toggleWaterColorRender(enabled);
  }
};
@@ -250,10 +204,28 @@
};
// 播放逻辑
const startPlayback = () => {
  // const interval = intervalMap[playbackRate.value] || 1000; // 默认为1000
  clearInterval(playInterval); // 清除之前的定时器

  // 根据 playbackRate 设置 timeIncrement
  let timeIncrement;
  switch (playbackRate.value) {
    case 1:
      timeIncrement = 900;
      break;
    case 2:
      timeIncrement = 1800;
      break;
    case 4:
      timeIncrement = 3600;
      break;
    case 8:
      timeIncrement = 5600;
      break;
    default:
      timeIncrement = 900; // 默认为1倍速
      break;
  }
  playInterval = setInterval(() => {
    const timeIncrement = playbackRate.value; // 倍速作为增量
    currentTime.value += timeIncrement;
    if (currentTime.value >= duration.value) {
      currentTime.value = duration.value; // 停在最后一帧
@@ -269,7 +241,7 @@
    // 计算播放进度百分比 [0, 1]
    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100); // 百分比上报
  }, 1000); // 注意使用interval而非固定1000ms
  }, 1000); // 固定每秒执行一次，也可以使用动态间隔（可选）
};
// 降雨变化部分
// 降雨数据相关变量
@@ -285,112 +257,103 @@
  // 注意：有时 data 可能是一个字符串（例如 JSON 字符串）
  let data = selectedScheme.value.data;
  // 如果是字符串，则尝试解析成对象
  if (typeof data === "string") {
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data);
      console.log("解析后的降雨数据：", data);
      console.log('解析后的降雨数据：', data);
    } catch (e) {
      console.error("data 不是有效的 JSON 字符串");
      return;
    }
  }
  // 打印降雨强度的单位
  console.log("降雨强度的单位是：", data.intensityUnit);
  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 单位，无法进行转换");
  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);
  console.log('最终的 rainfallList:', rainfallList);

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.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
  );
  console.log('当前方案下最小雨量和最大雨量：', minRainValue.value, maxRainValue.value);
}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
  {
    name: "小雨",
    name: '小雨',
    min: 0.1,
    max: 9.9,
    size: 0.5, // 雨滴大小：更小
    speed: 20, // 下落速度：更慢
    density: 15, // 雨滴密度：更稀疏
    color: "#ADD8E6", // 浅蓝色，象征轻柔的小雨
    size: 0.5,     // 雨滴大小：更小
    speed: 20,     // 下落速度：更慢
    density: 15,   // 雨滴密度：更稀疏
    color: '#ADD8E6' // 浅蓝色，象征轻柔的小雨
  },
  {
    name: "中雨",
    name: '中雨',
    min: 10,
    max: 24.9,
    size: 0.7,
    speed: 40,
    density: 35,
    color: "#ADD8E6",
    color: '#ADD8E6' 
  },
  {
    name: "大雨",
    name: '大雨',
    min: 25,
    max: 49.9,
    size: 1.0,
    speed: 70,
    density: 60,
    color: "#ADD8E6",
    color: '#ADD8E6'
  },
  {
    name: "暴雨",
    name: '暴雨',
    min: 50,
    max: 99.9,
    size: 1.3,
    speed: 90,
    density: 80,
    color: "#ADD8E6",
    color: '#ADD8E6' 
  },
  {
    name: "大暴雨",
    name: '大暴雨',
    min: 100,
    size: 1.6,
    speed: 110,
    density: 100,
    color: "#ADD8E6",
  },
    color: '#ADD8E6'
  }
];
// 根据降雨量返回对应的雨形配置
function getRainLevel(rainValue) {
  for (let level of rainLevels) {
    if (
      level.min <= rainValue &&
      (level.max === undefined || rainValue <= level.max)
    ) {
    if (level.min <= rainValue && (level.max === undefined || rainValue <= level.max)) {
      return level;
    }
  }
  // 默认无雨状态
  return { name: "无雨", size: 0.5, speed: 30, density: 20, color: "#F0F8FF" };
  return { name: '无雨', size: 0.5, speed: 30, density: 20, 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); // 当前索引
  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];
@@ -401,7 +364,7 @@
  // console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
  if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
    console.log("由于数据无显著变化，跳过本次更新");
    console.log('由于数据无显著变化，跳过本次更新');
    return;
  }

@@ -411,10 +374,10 @@
  // 获取对应的雨形配置
  const rainLevel = getRainLevel(rainValue);

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

@@ -423,9 +386,9 @@
    rainSize: rainLevel.size,
    rainSpeed: rainLevel.speed,
    rainDensity: rainLevel.density,
    rainColor: rainLevel.color,
    rainColor: rainLevel.color
  };
  console.log("当前雨量数据：", rainValue, "当前雨形：", rainLevel);
  console.log('当前雨量数据：', rainValue, '当前雨形：', rainLevel);
  // 调用工具方法更新雨效
  mapUtils.toggleRain(rainParams, true);
}
@@ -493,8 +456,8 @@
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );
    // 调用跳转接口，传递索引值
    console.log(closestIndex, "最近的索引值");

    console.log(closestIndex,'最近的索引值');
    
    setTimeForWaterSimulation(closestIndex);

    // 如果当前是暂停状态，调用 pauseWaterSimulation
@@ -511,7 +474,7 @@
  waterTimestamps.value.forEach((timestamp, index) => {
    const diff = Math.abs(
      dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
        currentTimeValue
      currentTimeValue
    );
    if (diff < minDiff) {
      minDiff = diff;
@@ -525,7 +488,7 @@
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log("选中方案已改变:", newVal);
      console.log('选中方案已改变:', newVal)
    }
  }
);
@@ -538,9 +501,7 @@
        .valueOf(); // 使用 valueOf() 获取原始时间戳

      // 更新 currentPlayingTime 格式化后的时间字符串
      currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
@@ -575,17 +536,14 @@
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;
    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData();
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(
      serviceInfo
    );
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
    if (timestamps) {
      waterTimestamps.value = timestamps;
      console.log(waterTimestamps, "water");
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      sendCurrentPlayingTime.value = timestamps[0];
      sendCurrentPlayingTime.value = timestamps[0]
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );