change

wangjuncheng

2025-05-15 7531b19bd939ca49c213667d7509a55b2be6c1ef

change

 src/api/trApi.js

@@ -92,9 +92,10 @@
}

// 通过接口去请求json，将请求的json解析获取泥石流参数
export async function fetchWaterSimulationData() {
export async function fetchWaterSimulationData(serviceInfo) {
  try {
    const response = await fetch("/simu/20250515111549/layer.json"); // 发起请求
    const response = await fetch(`/simu/${serviceInfo}/layer.json`); // 发起请求
    // const response = await fetch(`/simu/c2h1dc/layer.json`); // 发起请求
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

 src/components/menu/TimeLine.vue

@@ -36,16 +36,25 @@
      <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="scale-markers">
          <div class="scale-marker" style="left: 0%"></div>
          <div class="scale-marker" style="left: 25%"></div>
          <div class="scale-marker" style="left: 50%"></div>
          <div class="scale-marker" style="left: 75%"></div>
          <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">
            {{ time }}
          <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: 8px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;"></ratelevel>
        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>

@@ -93,6 +102,7 @@
  },
});
// 响应式状态
let serviceInfo = ref(null); // 当前方案的服务地址
const ratelevelRef = ref(null); // 获取子组件实例的引用
const currentPlayingTime = ref(""); // 当前播放时间
const sendCurrentPlayingTime = ref(""); // 当前播放时间
@@ -137,10 +147,10 @@
    startPlayback();

    if (!isWaterPrimitiveCreated.value) {
      console.log(selectedScheme.value, '这里是当前方案的全部信息');
      console.log(serviceInfo, '这里是当前方案的服务信息！');
      // 这里通过water.js中去发送请求获取水面模拟
      createWaterPrimitive({
        baseUrl: "/simu/20250515111549",
        baseUrl: `/simu/${serviceInfo}`,
        interval: intervalMap[playbackRate.value],
        colorRender: isColorRenderEnabled.value
      });
@@ -465,12 +475,12 @@
  if (!timestamps || timestamps.length === 0) return [];
  const sorted = [...timestamps].sort((a, b) => dayjs(a).diff(dayjs(b)));
  const interval = Math.floor(
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 5
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 4
  );
  return Array.from({ length: 6 }, (_, i) =>
  return Array.from({ length: 5 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("HH:mm:ss")
      .format("MM-DD HH:mm:ss")
  );
}

@@ -485,9 +495,13 @@

onMounted(async () => {
  try {
    // 当前方案的所有信息
    const schemeInfo = selectedScheme.value;
    serviceInfo = schemeInfo.serviceName;
    console.log('获取到的 serviceName:', serviceInfo);
    getRainfallData()
    // 根据layer.json去获取时间轴信息
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
    const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
    if (timestamps) {
      waterTimestamps.value = timestamps;
      updateTimelineRange();
@@ -551,8 +565,8 @@
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 678px;
  height: 108px;
  width: 38%;
  height: 12%;
  /* background-color: #1a2634; */
  background: url("@/assets/img/menubar/bar.png");
  background-size: 100% 100%;
@@ -677,25 +691,52 @@
}

.time-markers {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 15px;
  color: #fff;
  top: 20px;
  display: flex;
  justify-content: space-between;
}

.time-marker {
  margin-top: 5px;
  position: absolute;
  font-size: 12px;
  color: #fff;
  transform: translateX(-20%);
  text-align: center;
  width: 25%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.date-part {
  /* margin-bottom: 2px; 日期和时间之间的间距 */
}

.time-part {
  font-size: 11px; /* 时间可以稍微小一点 */
  opacity: 0.8; /* 时间可以稍微淡一点 */
}

.current-date {
  margin-bottom: 5px;
  font-size: 15px;
  color: #fff;
  transform: translateX(-3%);
  transform: translateX(-8%);
}

.scale-markers {
  position: absolute;
  width: 100%;
  height: 10px;
  top: 10px;
}

.scale-marker {
  position: absolute;
  width: 3px;
  height: 6px;
  background-color: rgba(255, 255, 255, 1);
  transform: translateX(-50%);
}
</style>

 src/components/monifangzhen/schemeCard.vue

@@ -89,6 +89,14 @@
  //   alert("当前方案尚未完成，无法进入模拟！");
  //   return;
  // }
  if (!item.serviceName) {
    ElMessage({
      message: "serviceName 不存在，无法继续！",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
  }
  // console.log(item,'iteeeeeeeem');
  simStore.setSelectedScheme(item);

  currentScheme.value = item;