1111

wangjuncheng

2025-07-08 b769ee78055cfd89a5866925571d1c10e23882cc

1111

 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" 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>
@@ -35,33 +25,19 @@
    <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>
@@ -70,12 +46,8 @@
          <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>
@@ -84,38 +56,27 @@
    </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>
@@ -153,7 +114,7 @@
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);

const emit = defineEmits([
  "timeUpdate",
@@ -391,6 +352,7 @@
// 降雨数据相关变量
let rainFallValues = ref([]); // 存储原始降雨量数据
let minRainValue = ref(Infinity);
let averageRainIntensity = ref()
let maxRainValue = ref(-Infinity);
// 获取降雨数据
function getRainfallData() {
@@ -471,6 +433,16 @@

  // 提取 intensity 值
  rainFallValues.value = hourlyRainfallList.map((r) => r.intensity);
  // 计算平均雨强
  if (rainFallValues.value.length > 0) {
    const sumIntensity = rainFallValues.value.reduce((sum, val) => sum + val, 0);
    averageRainIntensity.value = sumIntensity / rainFallValues.value.length;
  } else {
    averageRainIntensity.value = 0; // 或者 null 表示无数据
  }

  console.log("平均雨强为：", averageRainIntensity.value);

  minRainValue.value = Math.min(...rainFallValues.value);
  maxRainValue.value = Math.max(...rainFallValues.value);

@@ -479,6 +451,7 @@
    minRainValue.value,
    maxRainValue.value
  );

}
// 定义降雨等级及其对应的视觉参数
const rainLevels = [
@@ -736,8 +709,7 @@
  // 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} 阶段`);
@@ -1010,7 +982,7 @@
      watersMaxHeight,
      watersMinHeight
    );
    const waterInfoArr = [watersMaxHeight]
    const waterInfoArr = [watersMaxHeight, maxRainValue.value,averageRainIntensity.value]
    schemWaterInfo.value = waterInfoArr
    // 更新时间轴相关数据
    if (timestamps) {

 src/components/tools/DebuffDetail.vue

@@ -113,27 +113,26 @@
  }

  if (selectedScheme.value.type !== 2) {
    console.log(schemWaterInfo.value[0],'这里是所有的方案数据');
    // console.log(schemWaterInfo.value,'这里是所有的方案数据');
    
    const rainfallList = data.rainfalls;

    // const rainfallList = data.rainfalls;
    // 提取 intensity 值
    const rainValues = rainfallList.map((r) => r.intensity);
    const minRain = Math.min(...rainValues);
    const maxRain = Math.max(...rainValues);
    const avgRain =
      rainValues.reduce((sum, val) => sum + val, 0) / rainValues.length;
    // const rainValues = rainfallList.map((r) => r.intensity);
    // const minRain = Math.min(...rainValues);
    // const maxRain = Math.max(...rainValues);
    // const avgRain =
    //   rainValues.reduce((sum, val) => sum + val, 0) / rainValues.length;

    // 更新 detailList 中的“最大雨强”和“平均雨强”
    detailList.value[0].value = maxRain.toFixed(2) + " mm/h"; // 最大雨强
    detailList.value[1].value = avgRain.toFixed(2) + " mm/h"; // 平均雨强
    detailList.value[0].value = schemWaterInfo.value[1].toFixed(2) + " mm/h"; // 最大雨强
    detailList.value[1].value = schemWaterInfo.value[2].toFixed(2) + " mm/h"; // 平均雨强
    detailList.value[2].value = schemWaterInfo.value[0].toFixed(2) + " m"; // 最大水深

    console.log(
      "当前方案下最大水深、最大雨量、平均雨量：",
      schemWaterInfo.value[0].toFixed(2),
      maxRain.toFixed(2),
      avgRain.toFixed(2)
      schemWaterInfo.value[1].toFixed(2),
      schemWaterInfo.value[2].toFixed(2)
    );
  }
};