提交

guonan

2025-05-23 986e15a067c2f11563f2f3db8b96dc334dc28842

提交

 src/components/menu/Device.vue

@@ -6,28 +6,12 @@
    <div class="left-content device-content">
      <div style="margin-left: 5px">
        <span style="color: white">重点沟：</span>
        <el-select
          @change="handleChange"
          v-model="selectValue"
          placeholder="Select"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        <el-select @change="handleChange" v-model="selectValue" placeholder="Select" size="large" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-tree
        :data="deviceTree"
        node-key="deviceId"
        :props="treeProps"
        @node-click="handleTreeNodeClick"
        class="device-tree"
      >
      <el-tree :data="deviceTree" node-key="deviceId" :props="treeProps" @node-click="handleTreeNodeClick"
        class="device-tree">
        <template #default="{ node, data }">
          <span v-if="!data.children" class="device-tree-item">
            <!-- <div class="device-item-icon"></div> -->
@@ -43,30 +27,77 @@
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ref, computed, onMounted, watch, onBeforeUnmount, } from "vue";
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { createPoint, removeEntities } from "@/utils/map";
import { deviceDictList, getDictName } from "@/constant/dict.js";
import { getDeviceInfo } from "@/api/hpApi";

// 定义一个响应式引用存储设备列表
const deviceListAll = ref([]);

// 组件挂载时获取设备信息，默认过滤“孙胡沟”
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
onMounted(() => {
  loadDeviceList("孙胡沟");
  initeWaterPrimitiveView()
});

// onBeforeRouteUpdate((to, from, next) => {
//   if (to.path !== '/zhjc') {
//     handleCleanup();
//   }
//   next();
// });
const route = useRoute();

onBeforeUnmount(() => {
  if (route.path !== '/zhjc') {
    handleCleanup();
  }
});
watch(() => simStore.DeviceShowSwitch, (newValue, oldValue) => {
  if (newValue) {
    initializeDevicePoints();
  } else {
    handleCleanup()
  }
});
const deviceListAll = ref([]);
const deviceEntities = ref([]);
const handleCleanup = () => {
  deviceListAll.value.forEach(item => {
    removeEntities(item.deviceId);
  });
}
const initializeDevicePoints = () => {
  const list = [];
  deviceListAll.value.forEach((item, index) => {
    // 根据需求可增删
    item.type = getDictName(deviceDictList, item.dictDeviceType);
    item.name = item.deviceName.split(selectValue.value)[1] || item.deviceName;
    item.id = item.deviceId;
    item.className = "device";
    item.showLabel = true;
    // 打印每个设备的名称和设备类型
    // console.log(`设备名称: ${item.id}, 设备类型: ${item.name}`);
    createPoint(item);
  });
  deviceEntities.value = list;
};
// 根据区域名称加载设备列表
const loadDeviceList = async (areaName) => {
  try {
    const res = await getDeviceInfo(); // 调整getDeviceInfo以接受动态参数，如果需要的话
    deviceListAll.value = res.data.pageData.filter((item) =>
    handleCleanup()
    const res = await getDeviceInfo();
    const allDevices = res.data.pageData;
    const devicesInArea = allDevices.filter((item) =>
      item.deviceName?.includes(areaName)
    );
    deviceListAll.value = devicesInArea;
    deviceListAll.length = 0;
    initializeDevicePoints();
  } catch (error) {
    console.error("加载设备信息失败", error);
  }
};

// 处理区域变化事件
const handleChange = (item) => {
  if (!item) {
@@ -75,7 +106,7 @@
  }
  // 根据新区域名重新加载设备列表
  loadDeviceList(item);
  console.log(deviceListAll.value);
  // console.log(deviceListAll.value);
};

const selectValue = ref("孙胡沟");
@@ -115,12 +146,10 @@
  // 先按设备类型分组
  deviceListAll.value.forEach((device) => {
    const typeName = getDictName(deviceDictList, device.dictDeviceType);

    if (!typeName) {
      console.warn("未找到设备类型:", device);
      return;
    }

    if (!typeMap[typeName]) {
      typeMap[typeName] = [];
    }
@@ -222,12 +251,14 @@
:deep(.el-select__placeholder) {
  color: white;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  color: white !important;
  background-color: rgb(38, 124, 124, 0.5);
}

:deep(.el-tree-node__content) {
  padding-left: 0px !important ;
  padding-left: 0px !important;
}
</style>

 src/components/menu/Location.vue

@@ -45,13 +45,25 @@
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { createPoint } from "@/utils/map";
import { ref, onMounted, watch, onBeforeUnmount } from "vue";
import { createPoint, removeEntities } from "@/utils/map";
import { useSimStore } from "@/store/simulation";
import { initeWaterPrimitiveView } from "@/utils/water"; //相机flyTo函数，后续options列表中有对应经纬度后弃用

import { useRoute, onBeforeRouteUpdate } from "vue-router";
const simStore = useSimStore();
// onBeforeRouteUpdate((to, from, next) => {
//   if (to.path !== "/yhgl") {
//     handleCleanup();
//   }
//   next();
// });
const route = useRoute();

onBeforeUnmount(() => {
  if (route.path !== "/yhgl") {
    handleCleanup();
  }
});
const selectValue = ref("孙胡沟");

const options = ref([
@@ -92,17 +104,43 @@
    });
  }
}

const handleCleanup = async () => {
  await Promise.all(
    districtList.value.map((item) => removeEntities(item.hdId))
  );
};
const initializeDevicePoints = async () => {
  await Promise.all(
    districtList.value.map(async (item, index) => {
      // 根据需求可增删
      item.id = item.hdId;
      item.name = item.hdName;
      item.latitude = item.lat;
      item.longitude = item.lon;
      item.showBillboard = true;
      item.type = item.disasterType;
      item.className = "district";
      await createPoint(item);
      // 打印每个设备的名称和设备类型
      // console.log(`设备名称: ${item.id}, 设备类型: ${item.name}`);
    })
  );
};
// 根据区域名称过滤数据
const filterDataByArea = (areaName) => {
const filterDataByArea = async (areaName) => {
  handleCleanup();
  if (!areaName || !simStore.DangerPoint || simStore.DangerPoint.length === 0) {
    districtList.value = [];
    return;
  }

  districtList.value = simStore.DangerPoint.filter((item) =>
  const filteredData = simStore.DangerPoint.filter((item) =>
    item.position?.includes(areaName)
  );

  if (JSON.stringify(districtList.value) !== JSON.stringify(filteredData)) {
    districtList.value = filteredData;
    await initializeDevicePoints();
  }
};

// 处理区域变化事件
@@ -112,10 +150,26 @@
    ElMessage.warning("请选择一个区域");
    return;
  }

  filterDataByArea(areaName);
};
let isInitialized = false;

watch(
  () => simStore.DangerShowSwitch,
  async (newValue, oldValue) => {
    console.log("当前状态：", newValue);

    if (newValue) {
      if (!isInitialized) {
        await initializeDevicePoints();
        isInitialized = true;
      }
    } else {
      handleCleanup();
      isInitialized = false;
    }
  }
);
// 监听 simStore.DangerPoint 变化
watch(
  () => simStore.DangerPoint,
@@ -124,14 +178,15 @@
      filterDataByArea(selectValue.value);
      loading.value = false; // 数据加载完成
    } else {
      handleCleanup();
      districtList.value = [];
      loading.value = true; // 数据未准备就绪
    }
  },
  { immediate: true }
  }
);

onMounted(() => {
  handleCleanup();
  initeWaterPrimitiveView();
  // 默认先检查一遍数据
  if (simStore.DangerPoint && simStore.DangerPoint.length > 0) {
@@ -150,7 +205,8 @@
  left: 0px;
  right: 0px;
  bottom: 10px;
  background-color: rgba(43, 43, 43, 0.5);
  background-color: rgba(236, 233, 233, 0.5);
  /* 半透明遮罩 */
  display: flex;
  align-items: center;
  justify-content: center;
@@ -171,6 +227,7 @@
    transform: rotate(360deg);
  }
}

.district {
  position: absolute;
  width: 345px;
@@ -185,10 +242,12 @@
  cursor: pointer;
  margin-top: 10px;
}

.district-content {
  padding: 10px;
  box-sizing: border-box;
}

.district-item-icon {
  background: url("@/assets/img/menu/locationicon.png") no-repeat;
  background-position: 5px 5px;
@@ -215,6 +274,7 @@
/deep/ .el-select__placeholder {
  color: white;
}

/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: white !important;

 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 @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,18 +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" />
            <!-- 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>
@@ -45,20 +70,36 @@
          <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>

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

@@ -94,7 +135,12 @@
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: {
@@ -127,7 +173,7 @@
  rainSize: 0.5,
  rainSpeed: 50,
  rainColor: "#99B3CC",
  rainDensity: 30 // 雨的密度
  rainDensity: 30, // 雨的密度
});
// 计算属性
const progressPercentage = computed(
@@ -154,10 +200,10 @@
      // console.log(serviceInfo, '这里是当前方案的服务信息！');
      // 这里通过water.js中去发送请求获取水面模拟
      createWaterPrimitive({
        // baseUrl: `/simu/${serviceInfo}`,
        baseUrl: `/simu/c2h1dc`,
        baseUrl: `/simu/${serviceInfo}`,
        // baseUrl: `/simu/c2h1dc`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value
        colorRender: isColorRenderEnabled.value,
      });
      isWaterPrimitiveCreated.value = true;
    } else {
@@ -191,8 +237,8 @@
    return; // 阻止后续逻辑执行
  }
  if (isWaterPrimitiveCreated.value) {
    console.log('当前是否开启专题渲染：', enabled);
    emit("isColorRender", enabled)
    console.log("当前是否开启专题渲染：", enabled);
    emit("isColorRender", enabled);
    toggleWaterColorRender(enabled);
  }
};
@@ -239,103 +285,112 @@
  // 注意：有时 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];
@@ -346,7 +401,7 @@
  // console.log(`正在处理的雨量数据点: 当前=${currentRain}, 下一个=${nextRain}, 插值后=${rainValue.toFixed(2)}, 索引=${index}`);
  // 如果当前索引未变化且插值差异不大，跳过重复更新
  if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
    console.log('由于数据无显著变化，跳过本次更新');
    console.log("由于数据无显著变化，跳过本次更新");
    return;
  }

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

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

@@ -368,9 +423,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);
}
@@ -438,8 +493,8 @@
      dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
    );
    // 调用跳转接口，传递索引值
    console.log(closestIndex,'最近的索引值');
    
    console.log(closestIndex, "最近的索引值");

    setTimeForWaterSimulation(closestIndex);

    // 如果当前是暂停状态，调用 pauseWaterSimulation
@@ -456,7 +511,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;
@@ -470,7 +525,7 @@
  () => selectedScheme.value,
  (newVal) => {
    if (newVal) {
      console.log('选中方案已改变:', newVal)
      console.log("选中方案已改变:", newVal);
    }
  }
);
@@ -483,7 +538,9 @@
        .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);
    }
  }
@@ -518,14 +575,17 @@
    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"
      );

 src/components/tools/Message.vue

@@ -178,7 +178,7 @@
          };

          addField("total", "降雨总量（mm）");
          addField("duration", "降雨时长（分钟）");
          addField("duration", "小时");
          addField("intensity", "降雨强度（mm/小时）");
          addField("prediction", "降雨场次");
          addField("model", "降雨模式");

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -92,6 +92,7 @@
import { useSimStore } from "@/store/simulation.js";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus";
import { getSimStart } from "@/api/trApi";

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -178,6 +179,7 @@
    // 保存方案
    const res = await simStore.addSimCheme(formData);
    const schemeId = res.data?.data?.id;
    console.log(schemeId, "schemeIdschemeIdschemeId");

    if (!schemeId) {
      ElMessage.error("方案保存失败，未获取到有效 ID");
@@ -198,9 +200,9 @@
      message: "请返回方案列表开始模拟！",
      duration: 10000, // 提示框显示时长，单位为毫秒，默认是3000毫秒
    });

  } catch (error) {
    ElMessage.error("启动模拟失败，请稍后再试");
    console.log(error, "errorerrorerror");
  }
}
</script>

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -125,6 +125,7 @@
import { SimAPIStore } from "@/store/simAPI";
import { getRainfallDataYears } from "@/api/hpApi";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { getSimStart } from "@/api/trApi";

onMounted(() => {});

@@ -284,7 +285,6 @@
      message: "请返回方案列表开始模拟！",
      duration: 10000, // 提示框显示时长，单位为毫秒，默认是3000毫秒
    });

  } catch (error) {
    ElMessage.error("启动模拟失败，请稍后再试");
  }