提交初版实时模拟

guonan

2025-06-24 c0b4517e7362144cc1683ee0bf0b7e00b67d539a

提交初版实时模拟

 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">
      <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>
@@ -143,13 +182,15 @@
const playbackRate = ref(1);
const playbackRates = ref([1, 2, 4, 8]);
const showSpeedMenu = ref(false);
const speedShow = ref(false);

const waterTimestamps = ref([]); // 存储时间轴数据
const timeMarkers = ref([]);
const timelineTrack = ref(null);
const isColorRenderEnabled = ref(false); // 假设这是你的颜色渲染开关状态
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
let rainTotalInfo = ([]);
let rainTotalInfo = [];
const isRainEnabled = ref(false);
const rainParams = reactive({
  rainSize: 0.5,
@@ -259,8 +300,11 @@
    currentTime.value = (nextTimestamp - baseTimestamp) / 1000;

    // 触发更新
    updateWaterColorByTime()
    if (selectedScheme.value.type !== 2) {
      updateWaterColorByTime();
    updateWeatherByProgress();
    }

    const progress = currentTime.value / duration.value;
    emit("timeUpdate", progress * 100);
  }, 1000 / playbackRate.value); // 根据播放速率调整间隔
@@ -303,7 +347,7 @@

  const rainfallList = data.rainfalls;
  console.log("最终的 rainfallList:", rainfallList);
  rainTotalInfo.value = rainfallList
  rainTotalInfo.value = rainfallList;

  // 提取 intensity 值
  rainFallValues.value = rainfallList.map((r) => r.intensity);
@@ -393,20 +437,20 @@
  const nextTotal = nextData.total;
  const total = currentTotal + (nextTotal - currentTotal) * alpha;
  // 根据 total 设置颜色
  let color = '#D4F2E7'; // 默认蓝色
  let color = "#D4F2E7"; // 默认蓝色

  if (total >= 150) {
    color = '#663300'; // 黄 - 大雨
    color = "#663300"; // 黄 - 大雨
  } else if (total >= 125) {
    color = '#B26633'; // 黄绿 - 中雨
    color = "#B26633"; // 黄绿 - 中雨
  } else if (total >= 100) {
    color = '#CC9966'; // 绿 - 中雨
    color = "#CC9966"; // 绿 - 中雨
  } else if (total >= 75) {
    color = '#CCE5FF'; // 青绿 - 小雨
    color = "#CCE5FF"; // 青绿 - 小雨
  } else if (total >= 50) {
    color = '#99CCFF'; // 天蓝 - 小雨
    color = "#99CCFF"; // 天蓝 - 小雨
  } else if (total >= 25) {
    color = '#66B3FF'; // 浅蓝 - 微量
    color = "#66B3FF"; // 浅蓝 - 微量
  }
  // console.log(`当前 total: ${total.toFixed(2)}, 颜色: ${color}`);
  // updateWaterColor(color)
@@ -426,7 +470,11 @@
  // const rainValue = currentRain + (nextRain - currentRain) * alpha;
  const rainValue = currentRain + (nextRain - currentRain);
  // 打印当前处理的雨量数据
  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('由于数据无显著变化，跳过本次更新');
@@ -612,9 +660,15 @@
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;
    if (selectedScheme.value.type == 2) {
      speedShow.value = false;
    } else {
      getRainfallData();
      speedShow.value = true;
    }

    // console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData();

    // 根据layer.json去获取时间轴信息
    const {
      waterTimestamps: timestamps,

 src/components/monifangzhen/schemeCard.vue

@@ -16,10 +16,6 @@
          <span style="color: aquamarine">
            {{ item.result === "-1" ? "出错" : item.result || "创建仿真" }}
          </span>
          <!-- <span style="color: aquamarine">{{ item.result || "创建仿真" }}</span> -->
          <!-- <span style="color: aquamarine">{{
            statusText[item.status] || "未知"
          }}</span> -->
        </p>
      </div>
      <div class="cardMenu">
@@ -37,10 +33,7 @@
      :selectedScheme="currentScheme"
      @back="handleBack"
    />
    <flowRateTab
    v-if="schemeInfoShow">
      123
    </flowRateTab>
    <flowRateTab v-if="schemeInfoShow"> 123 </flowRateTab>
  </div>
  <Message
    @close="close"
@@ -81,13 +74,6 @@
  selectedId.value = id;
}

const statusText = {
  0: "创建仿真",
  1: "预处理",
  2: "分析中",
  10: "完成",
  20: "出错",
};

function formatTime(time) {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
@@ -108,62 +94,80 @@
  messageShow.value = false;
}

function startPlay(item) {
  // 分析中
  if (item.status == 2) {
async function startPlay(item) {
  if (item.status === 2) {
    ElMessage.warning("当前方案正在分析中,无法进入模拟！");
    return;
  }
  // 出错
  if (item.status == 20) {

  if (item.status === 20) {
    ElMessage.error("当前方案分析出错,请重新新建方案！");
    return;
  }
  // 调用求解器并拿到最新生成的serviceName
  // 新创建的方案没有状态以及serviceName则执行调用求解器
  if (!item.status && !item.serviceName) {
    getSimStart(item.id).then((res) => {
      getSimDataById(item.id).then((res) => {
        item.serviceName = res.data[0].serviceName;

  // 如果是已完成的方案（status == 10）
  if (item.status === 10) {
    const flyHeight = item.areaType === 1 ? 100000 : 50000;
        simStore.setSelectedScheme(item);
        console.log(item, "无服务名称");
        ElMessage.warning("当前方案正在分析中,请稍后再模拟");
        getScheme();
      });
    });
  } else {
    simStore.setSelectedScheme(item);
    console.log("有服务名称");
  }

  const flyHeight = ref(100000);

  const shouldShowFill = false;

  // 求解器求解完成之后才可以显示时间轴
  if (item.status == 10) {
    // 只有行政区划执行
    if (item.areaType == 1) {
      flyHeight.value = 100000;
    if (item.areaType === 1) {
      EventBus.emit("select-geom", {
        geom: item.geom,
        flyHeight: flyHeight.value,
        shouldShowFill: shouldShowFill,
        flyHeight,
        shouldShowFill: false,
      });
    } else {
      // 孙胡沟区域跳转视角
      initeWaterPrimitiveView();
    }

    currentScheme.value = item;
    schemeInfoShow.value = true;
    emit("closeBtn", false);
    emit("start");
  }
    return;
}

function endPlay() {
  emit("end");
  // 调用求解器（不在实时模拟的情况下）
  if (!item.status && !item.serviceName && item.type !== 2) {
    try {
      await getSimStart(item.id);
      const res = await getSimDataById(item.id);

      item.serviceName = res.data[0]?.serviceName || null;
      simStore.setSelectedScheme(item);
      ElMessage.warning("当前方案正在分析中,请稍后再模拟");
      getScheme();
    } catch (e) {
      console.error("获取模拟数据失败：", e);
}
    return;
  }

  // 实时模拟
  if (item.type === 2) {
    try {
      // 实时模拟调用求解器会直接在接口中返回结果
      const ress = await getSimStart(item.id);
      const res = await getSimDataById(item.id);
      item.serviceName = res.data[0]?.serviceName || null;
      simStore.setSelectedScheme(item);
      getScheme();

      if (ress.code === 200) {
        initeWaterPrimitiveView();
        emit("start");
      }
    } catch (e) {
      console.error("实时模拟获取模拟数据失败：", e);
    }
    return;
  }

  // 默认情况：有服务名称
  simStore.setSelectedScheme(item);
}



function handleBack(value) {
  if (value === false) {

 src/components/tools/DebuffDetail.vue

@@ -61,7 +61,7 @@
                    value: "4872 万元",
                },
            ],
        }
    };
    },
    mounted() {
        this.getRainfallData(); // 组件挂载后执行获取雨量数据
@@ -74,7 +74,7 @@
            }
            let data = selectedScheme.value.data;
            // 如果是字符串，则尝试解析成对象
            if (typeof data === 'string') {
      if (typeof data === "string") {
                try {
                    data = JSON.parse(data);
                } catch (e) {
@@ -82,32 +82,37 @@
                    return;
                }
            }

      if (selectedScheme.value.type !== 2) {
            const rainfallList = data.rainfalls;

            // 提取 intensity 值
            const rainValues = rainfallList.map(r => r.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 avgRain =
          rainValues.reduce((sum, val) => sum + val, 0) / rainValues.length;

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

            console.log('当前方案下最小雨量、最大雨量、平均雨量：', 
        console.log(
          "当前方案下最小雨量、最大雨量、平均雨量：",
                minRain.toFixed(2), 
                maxRain.toFixed(2), 
                avgRain.toFixed(2)
            );
      }
        },
        closeMsg() {
            this.$emit("close")
      this.$emit("close");
        },
        showMsg() {
            this.$emit("open")
      this.$emit("open");
        },
    },
}
};
</script>
<style lang="less" scoped>
.detail {