泥位计

guonan

2025-07-08 b040d81c856a77f280b38037e78a8b6a8bdb31ab

 src/components/menu/TimeLine.vue

@@ -2,20 +2,30 @@
  <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" v-show="speedShow">
        <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>
@@ -25,19 +35,33 @@
    <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" />
          <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>
@@ -46,8 +70,12 @@
          <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
            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>
@@ -56,27 +84,38 @@
    </div>
    <div>
      <div style="display: flex">
        <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
          @finish-calculation="handleFinishCalculation" style="
        <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="
          "
        />
        <crossanalysis
          ref="crossRef"
          style="
            margin-top: 12px;
            margin-left: 16px;
            margin-right: 20px;
            justify-content: flex-end;
          " />
          "
        />
      </div>
      <el-button @click="handleBack" style="
      <el-button
        @click="handleBack"
        style="
          margin-top: 3px;
          margin-left: 28px;
          margin-right: 10px;
          width: 75%;
          height: 30%;
        ">结束模拟</el-button>
        "
        >结束模拟</el-button
      >
    </div>
  </div>
</template>
@@ -114,7 +153,9 @@
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme, frameNum, layerDate, schemWaterInfo } = storeToRefs(simStore);
const { selectedScheme, frameNum, layerDate, schemWaterInfo } =
  storeToRefs(simStore);
import { clearAllPoints } from "@/utils/map";

const emit = defineEmits([
  "timeUpdate",
@@ -352,7 +393,7 @@
// 降雨数据相关变量
let rainFallValues = ref([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let averageRainIntensity = ref()
let averageRainIntensity = ref();
let maxRainValue = ref(-Infinity);
// 获取降雨数据
function getRainfallData() {
@@ -435,7 +476,10 @@
  rainFallValues.value = hourlyRainfallList.map((r) => r.intensity);
  // 计算平均雨强
  if (rainFallValues.value.length > 0) {
    const sumIntensity = rainFallValues.value.reduce((sum, val) => sum + val, 0);
    const sumIntensity = rainFallValues.value.reduce(
      (sum, val) => sum + val,
      0
    );
    averageRainIntensity.value = sumIntensity / rainFallValues.value.length;
  } else {
    averageRainIntensity.value = 0; // 或者 null 表示无数据
@@ -451,7 +495,6 @@
    minRainValue.value,
    maxRainValue.value
  );

}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
@@ -709,7 +752,8 @@
  // console.log("========================================");
  // console.log(`【时间戳】: ${new Date(currentTimeMs).toLocaleString()}`);
  console.log(
    `【累计降雨量 R】: ${currentTotal !== null ? currentTotal.toFixed(2) : "未知"
    `【累计降雨量 R】: ${
      currentTotal !== null ? currentTotal.toFixed(2) : "未知"
    } mm`
  );
  // console.log(`【当前阶段】: 第 ${currentStage} 阶段`);
@@ -982,8 +1026,12 @@
      watersMaxHeight,
      watersMinHeight
    );
    const waterInfoArr = [watersMaxHeight, maxRainValue.value,averageRainIntensity.value]
    schemWaterInfo.value = waterInfoArr
    const waterInfoArr = [
      watersMaxHeight,
      maxRainValue.value,
      averageRainIntensity.value,
    ];
    schemWaterInfo.value = waterInfoArr;
    // 更新时间轴相关数据
    if (timestamps) {
      frameNum.value = timestamps.length;
@@ -1103,6 +1151,8 @@
}

async function endSimulation() {
  clearAllPoints();
  simStore.openDia = true;
  // 结束模拟之后清除layer列表
  simStore.rePlayList = [];
  console.log(simStore.rePlayList, "结束模拟清除rePlayListrePlayList列表");