修改图表时间以及将避险点修改为避险场所

guonan

2025-04-28 94dc999e2107401cb9e6c65dd67bc17eecc5e548

修改图表时间以及将避险点修改为避险场所

 src/api/hpApi.js

@@ -72,9 +72,8 @@
// 获取雨量数据
export async function getRainfallData(data) {
  const response = await axios.post("/hp/rainfallCountyCity/getData", {
    filterObject: {
      year: 2024, // 动态传入的年份参数
    },
    filterObject: {},
    "pageSize": 1000
  });
  console.log("getRainfallData:", response);
  return response.data;

 src/components/menu/Function.vue

@@ -29,7 +29,7 @@
        },
        {
            icon: require("@/assets/img/menu/bns.png"),
            name: "避险点",
            name: "避险场所",
            Visible: false,
        },
        {
@@ -62,7 +62,7 @@
                desc = { Simulation: true, type: "POI", tag: "POI-Sound", Visible: item.Visible }
                ps.emitMessage(desc)
                break
            case "避险点":
            case "避险场所":
                if (item.Visible) {
                    loadAreaPolygon("/json/emergency_area.geojson")
                } else {

 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>
@@ -24,24 +34,40 @@

    <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 class="current-date">当前播放时间：{{ currentPlayingTime }}</div>
        <div
          v-for="(date, index) in visibleDates"
          :key="index"
          class="date-label"
        >
          <!-- {{ formatDate(date) }} -->
        </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="time-markers">
          <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
          <div
            v-for="(time, index) in timeMarkers"
            :key="index"
            class="time-marker"
          >
            {{ time }}
          </div>
        </div>
      </div>
    </div>
    <el-button @click="handleBack" style="margin-top: 26px;margin-left: 30px;margin-right: 10px;">结束模拟</el-button>
    <el-button
      @click="handleBack"
      style="margin-top: 26px; margin-left: 30px; margin-right: 10px"
      >结束模拟</el-button
    >
  </div>
</template>

@@ -59,7 +85,7 @@
import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from 'element-plus';
import { ElMessage } from "element-plus";

const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);

@@ -91,7 +117,9 @@
// 计算属性
const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
const progressPercentage = computed(() => (currentTime.value / duration.value) * 100);
const progressPercentage = computed(
  () => (currentTime.value / duration.value) * 100
);
const visibleDates = computed(() =>
  Array.from(
    new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
@@ -102,7 +130,8 @@
// 播放控制
const togglePlay = () => {
  // 如果当前是停止状态且已经播放完毕，点击时重置时间
  if (!isPlaying.value && currentTime.value >= duration.value) currentTime.value = 0;
  if (!isPlaying.value && currentTime.value >= duration.value)
    currentTime.value = 0;
  isPlaying.value = !isPlaying.value;
  emit("isPlaying", isPlaying.value);
  if (isPlaying.value) {
@@ -113,9 +142,9 @@
};
const intervalMap = {
  1: 1000, // 1倍速
  2: 500,  // 2倍速
  4: 250,  // 4倍速
  8: 125,  // 8倍速
  2: 500, // 2倍速
  4: 250, // 4倍速
  8: 125, // 8倍速
};
const startPlayback = () => {
  // 根据当前倍速获取对应的 interval
@@ -141,8 +170,10 @@
};

const stopPlayback = () => clearInterval(playInterval);
const skipForward = () => (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒
const skipBackward = () => (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒
const skipForward = () =>
  (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 向前跳转1秒
const skipBackward = () =>
  (currentTime.value = Math.max(currentTime.value - 1, 0)); // 向后跳转1秒
const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);
const setPlaybackRate = (rate) => {
  playbackRate.value = rate;
@@ -155,27 +186,50 @@
  currentTime.value = Math.round(percentage * duration.value);
  emit("timeUpdate", progressPercentage.value);
  if (waterTimestamps.value.length > 0) {
    const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(currentTime.value, "second");
    console.log("Clicked timestamp:", clickedTimestamp.valueOf(), clickedTimestamp.format("YYYY-MM-DD HH:mm:ss"));
    const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(
      currentTime.value,
      "second"
    );
    console.log(
      "Clicked timestamp:",
      clickedTimestamp.valueOf(),
      clickedTimestamp.format("YYYY-MM-DD HH:mm:ss")
    );
  }
};
watch(() => currentTime.value, () => {
  if (waterTimestamps.value.length > 0) {
    currentPlayingTime.value = dayjs(waterTimestamps.value[0])
      .add(currentTime.value, "second")
      .format("YYYY-MM-DD mm:ss");
watch(
  () => currentTime.value,
  () => {
    if (waterTimestamps.value.length > 0) {
      currentPlayingTime.value = dayjs(waterTimestamps.value[0])
        .add(currentTime.value, "second")
        .format("YYYY-MM-DD mm:ss");

      EventBus.emit("time-update", currentPlayingTime.value);
    }
  }
});
);
// 时间标记生成
function generateTimeMarkers(timestamps) {
  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") / 7);
  return Array.from({ length: 8 }, (_, i) => dayjs(sorted[0]).add(i * interval, "second").format("mm:ss"));
  const interval = Math.floor(
    dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7
  );
  return Array.from({ length: 8 }, (_, i) =>
    dayjs(sorted[0])
      .add(i * interval, "second")
      .format("mm:ss")
  );
}
watch(() => waterTimestamps.value, (newTimestamps) => {
  if (newTimestamps.length > 0) timeMarkers.value = generateTimeMarkers(newTimestamps);
}, { immediate: true });
watch(
  () => waterTimestamps.value,
  (newTimestamps) => {
    if (newTimestamps.length > 0)
      timeMarkers.value = generateTimeMarkers(newTimestamps);
  },
  { immediate: true }
);

onMounted(async () => {
  try {
@@ -184,7 +238,9 @@
      waterTimestamps.value = timestamps;
      updateTimelineRange();
      timeMarkers.value = generateTimeMarkers(timestamps);
      currentPlayingTime.value = dayjs(timestamps[0]).format("YYYY-MM-DD HH:mm:ss");
      currentPlayingTime.value = dayjs(timestamps[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    }
  } catch (error) {
    console.error("Error loading water simulation data:", error);
@@ -193,21 +249,30 @@

function updateTimelineRange() {
  if (waterTimestamps.value.length > 0) {
    const [first, last] = [waterTimestamps.value[0], waterTimestamps.value.at(-1)];
    props.waterSimulateParams.date = [dayjs(first).toISOString(), dayjs(last).toISOString()];
    const [first, last] = [
      waterTimestamps.value[0],
      waterTimestamps.value.at(-1),
    ];
    props.waterSimulateParams.date = [
      dayjs(first).toISOString(),
      dayjs(last).toISOString(),
    ];
    duration.value = dayjs(last).diff(dayjs(first), "second");
    console.log("Updated timeline range:", { ...props.waterSimulateParams, duration: duration.value });
    console.log("Updated timeline range:", {
      ...props.waterSimulateParams,
      duration: duration.value,
    });
  }
}
onBeforeUnmount(() => {
  stopPlayback();
  destoryWaterPrimitive();
  // destoryWaterPrimitive();
});
const { endSimulate } = inject("simulateActions");
function handleBack() {
  ElMessage({ message: '模拟进程正在关闭中...', type: 'success' }); // 显示消息通知用户模拟进程正在关闭
  ElMessage({ message: "模拟进程正在关闭中...", type: "success" }); // 显示消息通知用户模拟进程正在关闭
  endSimulate();
  destoryWaterPrimitive();
  // destoryWaterPrimitive();
  EventBus.emit("hide-schemeInfo");
}
</script>

 src/components/monifangzhen/echartInfo.vue

@@ -25,21 +25,71 @@
        <p style="cursor: pointer" @click="debuffClick">威胁对象</p>
        <div class="echartBox">
          <div class="table-container" ref="tableContainer">
            <el-table :data="tableData" style="width: 100%; font-size: 10px" height="100%" @row-click="handleRowClick">
            <el-table
              :data="tableData"
              style="width: 100%; font-size: 10px"
              height="100%"
              @row-click="handleRowClick"
            >
              <el-table-column label="影响区名称" width="30" align="center">
                <template #default="scope">
                  影响区{{ scope.row.zoneId }}
                </template>
              </el-table-column>
              <el-table-column prop="time" label="影响时间" width="50" align="center"></el-table-column>
              <el-table-column prop="population" label="人员(人)" width="23" align="center"></el-table-column>
              <el-table-column prop="room" label="房屋(间)" width="23" align="center"></el-table-column>
              <el-table-column prop="households" label="户数(户)" width="23" align="center"></el-table-column>
              <el-table-column prop="property" label="财产(万元)" width="23" align="center"></el-table-column>
              <el-table-column prop="maxDepth" label="最大水深(米)" width="28" align="center"></el-table-column>
              <el-table-column prop="maxVelocity" label="最大流速(m/s)" width="35" align="center"></el-table-column>
              <el-table-column prop="raininess" label="雨强(mm/h)" width="28" align="center"></el-table-column>
              <el-table-column prop="warningLevel" label="预警等级" width="28" align="center"></el-table-column>
              <el-table-column
                prop="time"
                label="影响时间"
                width="50"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="population"
                label="人员(人)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="room"
                label="房屋(间)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="households"
                label="户数(户)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="property"
                label="财产(万元)"
                width="23"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="maxDepth"
                label="最大水深(米)"
                width="28"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="maxVelocity"
                label="最大流速(m/s)"
                width="35"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="raininess"
                label="雨强(mm/h)"
                width="28"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="warningLevel"
                label="预警等级"
                width="28"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
@@ -51,7 +101,14 @@
<script setup>
import * as echarts from "echarts";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { ref, onMounted, onBeforeUnmount, nextTick, watch, onUnmounted } from "vue";
import {
  ref,
  onMounted,
  onBeforeUnmount,
  nextTick,
  watch,
  onUnmounted,
} from "vue";
import dayjs from "dayjs";
import { getRainfall } from "@/api";

@@ -64,6 +121,8 @@
const chart2Data = ref(null);
let intervalId1 = null;
let intervalId2 = null;

const nowTime = ref(null);

const isFinished = ref(true);

@@ -188,1508 +247,6 @@
]);
const rainChangeShow = ref(false);
const tableContainer = ref(null);
const rainfallData = ref([
  {
    time: "2023-07-30 00:00:00",
    total: 0.2,
    value: 0.2,
  },
  {
    time: "2023-07-30 00:10:00",
    total: 0.5,
    value: 0.3,
  },
  {
    time: "2023-07-30 00:20:00",
    total: 0.6,
    value: 0.1,
  },
  {
    time: "2023-07-30 00:30:00",
    total: 0.7,
    value: 0.1,
  },
  {
    time: "2023-07-30 00:40:00",
    total: 0.8,
    value: 0.1,
  },
  {
    time: "2023-07-30 00:50:00",
    total: 2.2,
    value: 1.4,
  },
  {
    time: "2023-07-30 01:00:00",
    total: 9.4,
    value: 7.2,
  },
  {
    time: "2023-07-30 01:10:00",
    total: 9.5,
    value: 0.1,
  },
  {
    time: "2023-07-30 01:20:00",
    total: 9.6,
    value: 0.1,
  },
  {
    time: "2023-07-30 01:30:00",
    total: 9.7,
    value: 0.1,
  },
  {
    time: "2023-07-30 01:40:00",
    total: 9.8,
    value: 0.1,
  },
  {
    time: "2023-07-30 01:50:00",
    total: 9.9,
    value: 0.1,
  },
  {
    time: "2023-07-30 02:00:00",
    total: 19.5,
    value: 9.6,
  },
  {
    time: "2023-07-30 02:10:00",
    total: 19.7,
    value: 0.2,
  },
  {
    time: "2023-07-30 02:20:00",
    total: 20.5,
    value: 0.8,
  },
  {
    time: "2023-07-30 02:30:00",
    total: 20.9,
    value: 0.4,
  },
  {
    time: "2023-07-30 02:40:00",
    total: 21.3,
    value: 0.4,
  },
  {
    time: "2023-07-30 02:50:00",
    total: 21.8,
    value: 0.5,
  },
  {
    time: "2023-07-30 03:00:00",
    total: 21.9,
    value: 0.1,
  },
  {
    time: "2023-07-30 03:10:00",
    total: 22.1,
    value: 0.2,
  },
  {
    time: "2023-07-30 03:20:00",
    total: 22.4,
    value: 0.3,
  },
  {
    time: "2023-07-30 03:30:00",
    total: 22.5,
    value: 0.1,
  },
  {
    time: "2023-07-30 03:40:00",
    total: 23.1,
    value: 0.6,
  },
  {
    time: "2023-07-30 03:50:00",
    total: 25.1,
    value: 2.0,
  },
  {
    time: "2023-07-30 04:00:00",
    total: 27.7,
    value: 2.6,
  },
  {
    time: "2023-07-30 04:10:00",
    total: 28.1,
    value: 0.4,
  },
  {
    time: "2023-07-30 04:20:00",
    total: 29.0,
    value: 0.9,
  },
  {
    time: "2023-07-30 04:30:00",
    total: 30.5,
    value: 1.5,
  },
  {
    time: "2023-07-30 04:40:00",
    total: 31.3,
    value: 0.8,
  },
  {
    time: "2023-07-30 04:50:00",
    total: 32.1,
    value: 0.8,
  },
  {
    time: "2023-07-30 05:00:00",
    total: 33.1,
    value: 1.0,
  },
  {
    time: "2023-07-30 05:10:00",
    total: 43.5,
    value: 10.4,
  },
  {
    time: "2023-07-30 05:20:00",
    total: 45.9,
    value: 2.4,
  },
  {
    time: "2023-07-30 05:30:00",
    total: 47.3,
    value: 1.4,
  },
  {
    time: "2023-07-30 05:40:00",
    total: 48.5,
    value: 1.2,
  },
  {
    time: "2023-07-30 05:50:00",
    total: 49.3,
    value: 0.8,
  },
  {
    time: "2023-07-30 06:00:00",
    total: 50.1,
    value: 0.8,
  },
  {
    time: "2023-07-30 06:10:00",
    total: 51.1,
    value: 1.0,
  },
  {
    time: "2023-07-30 06:20:00",
    total: 52.1,
    value: 1.0,
  },
  {
    time: "2023-07-30 06:30:00",
    total: 52.7,
    value: 0.6,
  },
  {
    time: "2023-07-30 06:40:00",
    total: 52.9,
    value: 0.2,
  },
  {
    time: "2023-07-30 06:50:00",
    total: 53.3,
    value: 0.4,
  },
  {
    time: "2023-07-30 07:00:00",
    total: 53.7,
    value: 0.4,
  },
  {
    time: "2023-07-30 07:10:00",
    total: 60.3,
    value: 6.6,
  },
  {
    time: "2023-07-30 07:20:00",
    total: 60.9,
    value: 0.6,
  },
  {
    time: "2023-07-30 07:30:00",
    total: 61.5,
    value: 0.6,
  },
  {
    time: "2023-07-30 07:40:00",
    total: 62.7,
    value: 1.2,
  },
  {
    time: "2023-07-30 07:50:00",
    total: 63.3,
    value: 0.6,
  },
  {
    time: "2023-07-30 08:00:00",
    total: 63.9,
    value: 0.6,
  },
  {
    time: "2023-07-30 08:10:00",
    total: 65.3,
    value: 1.4,
  },
  {
    time: "2023-07-30 08:20:00",
    total: 67.7,
    value: 2.4,
  },
  {
    time: "2023-07-30 08:30:00",
    total: 68.9,
    value: 1.2,
  },
  {
    time: "2023-07-30 08:40:00",
    total: 70.1,
    value: 1.2,
  },
  {
    time: "2023-07-30 08:50:00",
    total: 71.7,
    value: 1.6,
  },
  {
    time: "2023-07-30 09:00:00",
    total: 75.1,
    value: 3.4,
  },
  {
    time: "2023-07-30 09:10:00",
    total: 85.9,
    value: 10.8,
  },
  {
    time: "2023-07-30 09:20:00",
    total: 87.9,
    value: 2.0,
  },
  {
    time: "2023-07-30 09:30:00",
    total: 89.3,
    value: 1.4,
  },
  {
    time: "2023-07-30 09:40:00",
    total: 90.1,
    value: 0.8,
  },
  {
    time: "2023-07-30 09:50:00",
    total: 92.7,
    value: 2.6,
  },
  {
    time: "2023-07-30 10:00:00",
    total: 95.3,
    value: 2.6,
  },
  {
    time: "2023-07-30 10:10:00",
    total: 98.1,
    value: 2.8,
  },
  {
    time: "2023-07-30 10:20:00",
    total: 100.5,
    value: 2.4,
  },
  {
    time: "2023-07-30 10:30:00",
    total: 102.9,
    value: 2.4,
  },
  {
    time: "2023-07-30 10:40:00",
    total: 106.9,
    value: 4.0,
  },
  {
    time: "2023-07-30 10:50:00",
    total: 109.5,
    value: 2.6,
  },
  {
    time: "2023-07-30 11:00:00",
    total: 110.5,
    value: 1.0,
  },
  {
    time: "2023-07-30 11:10:00",
    total: 118.9,
    value: 8.4,
  },
  {
    time: "2023-07-30 11:20:00",
    total: 121.3,
    value: 2.4,
  },
  {
    time: "2023-07-30 11:30:00",
    total: 123.5,
    value: 2.2,
  },
  {
    time: "2023-07-30 11:40:00",
    total: 126.3,
    value: 2.8,
  },
  {
    time: "2023-07-30 11:50:00",
    total: 128.7,
    value: 2.4,
  },
  {
    time: "2023-07-30 12:00:00",
    total: 129.7,
    value: 1.0,
  },
  {
    time: "2023-07-30 12:10:00",
    total: 130.5,
    value: 0.8,
  },
  {
    time: "2023-07-30 12:20:00",
    total: 131.7,
    value: 1.2,
  },
  {
    time: "2023-07-30 12:30:00",
    total: 133.3,
    value: 1.6,
  },
  {
    time: "2023-07-30 12:40:00",
    total: 136.3,
    value: 3.0,
  },
  {
    time: "2023-07-30 12:50:00",
    total: 139.5,
    value: 3.2,
  },
  {
    time: "2023-07-30 13:00:00",
    total: 141.9,
    value: 2.4,
  },
  {
    time: "2023-07-30 13:10:00",
    total: 144.5,
    value: 2.6,
  },
  {
    time: "2023-07-30 13:20:00",
    total: 154.1,
    value: 9.6,
  },
  {
    time: "2023-07-30 13:30:00",
    total: 155.9,
    value: 1.8,
  },
  {
    time: "2023-07-30 13:40:00",
    total: 157.7,
    value: 1.8,
  },
  {
    time: "2023-07-30 13:50:00",
    total: 160.1,
    value: 2.4,
  },
  {
    time: "2023-07-30 14:00:00",
    total: 163.1,
    value: 3.0,
  },
  {
    time: "2023-07-30 14:10:00",
    total: 165.1,
    value: 2.0,
  },
  {
    time: "2023-07-30 14:20:00",
    total: 167.1,
    value: 2.0,
  },
  {
    time: "2023-07-30 14:30:00",
    total: 168.9,
    value: 1.8,
  },
  {
    time: "2023-07-30 14:40:00",
    total: 170.7,
    value: 1.8,
  },
  {
    time: "2023-07-30 14:50:00",
    total: 172.1,
    value: 1.4,
  },
  {
    time: "2023-07-30 15:00:00",
    total: 173.9,
    value: 1.8,
  },
  {
    time: "2023-07-30 15:10:00",
    total: 177.9,
    value: 4.0,
  },
  {
    time: "2023-07-30 15:20:00",
    total: 179.9,
    value: 2.0,
  },
  {
    time: "2023-07-30 15:30:00",
    total: 186.1,
    value: 6.2,
  },
  {
    time: "2023-07-30 15:40:00",
    total: 188.9,
    value: 2.8,
  },
  {
    time: "2023-07-30 15:50:00",
    total: 192.1,
    value: 3.2,
  },
  {
    time: "2023-07-30 16:00:00",
    total: 194.1,
    value: 2.0,
  },
  {
    time: "2023-07-30 16:10:00",
    total: 196.9,
    value: 2.8,
  },
  {
    time: "2023-07-30 16:20:00",
    total: 208.9,
    value: 12.0,
  },
  {
    time: "2023-07-30 16:30:00",
    total: 211.9,
    value: 3.0,
  },
  {
    time: "2023-07-30 16:40:00",
    total: 216.7,
    value: 4.8,
  },
  {
    time: "2023-07-30 16:50:00",
    total: 223.5,
    value: 6.8,
  },
  {
    time: "2023-07-30 17:00:00",
    total: 228.1,
    value: 4.6,
  },
  {
    time: "2023-07-30 17:10:00",
    total: 232.3,
    value: 4.2,
  },
  {
    time: "2023-07-30 17:20:00",
    total: 234.7,
    value: 2.4,
  },
  {
    time: "2023-07-30 17:30:00",
    total: 237.7,
    value: 3.0,
  },
  {
    time: "2023-07-30 17:40:00",
    total: 241.3,
    value: 3.6,
  },
  {
    time: "2023-07-30 17:50:00",
    total: 245.1,
    value: 3.8,
  },
  {
    time: "2023-07-30 18:00:00",
    total: 250.3,
    value: 5.2,
  },
  {
    time: "2023-07-30 18:10:00",
    total: 258.1,
    value: 7.8,
  },
  {
    time: "2023-07-30 18:20:00",
    total: 265.1,
    value: 7.0,
  },
  {
    time: "2023-07-30 18:30:00",
    total: 268.3,
    value: 3.2,
  },
  {
    time: "2023-07-30 18:40:00",
    total: 271.9,
    value: 3.6,
  },
  {
    time: "2023-07-30 18:50:00",
    total: 283.7,
    value: 11.8,
  },
  {
    time: "2023-07-30 19:00:00",
    total: 287.9,
    value: 4.2,
  },
  {
    time: "2023-07-30 19:10:00",
    total: 291.3,
    value: 3.4,
  },
  {
    time: "2023-07-30 19:20:00",
    total: 295.1,
    value: 3.8,
  },
  {
    time: "2023-07-30 19:30:00",
    total: 300.7,
    value: 5.6,
  },
  {
    time: "2023-07-30 19:40:00",
    total: 306.3,
    value: 5.6,
  },
  {
    time: "2023-07-30 19:50:00",
    total: 312.1,
    value: 5.8,
  },
  {
    time: "2023-07-30 20:00:00",
    total: 317.7,
    value: 5.6,
  },
  {
    time: "2023-07-30 20:10:00",
    total: 325.9,
    value: 8.2,
  },
  {
    time: "2023-07-30 20:20:00",
    total: 343.3,
    value: 17.4,
  },
  {
    time: "2023-07-30 20:30:00",
    total: 353.7,
    value: 10.4,
  },
  {
    time: "2023-07-30 20:40:00",
    total: 361.7,
    value: 8.0,
  },
  {
    time: "2023-07-30 20:50:00",
    total: 366.7,
    value: 5.0,
  },
  {
    time: "2023-07-30 21:00:00",
    total: 369.9,
    value: 3.2,
  },
  {
    time: "2023-07-30 21:10:00",
    total: 372.9,
    value: 3.0,
  },
  {
    time: "2023-07-30 21:20:00",
    total: 374.3,
    value: 1.4,
  },
  {
    time: "2023-07-30 21:30:00",
    total: 376.7,
    value: 2.4,
  },
  {
    time: "2023-07-30 21:40:00",
    total: 379.5,
    value: 2.8,
  },
  {
    time: "2023-07-30 21:50:00",
    total: 384.5,
    value: 5.0,
  },
  {
    time: "2023-07-30 22:00:00",
    total: 387.1,
    value: 2.6,
  },
  {
    time: "2023-07-30 22:10:00",
    total: 387.5,
    value: 0.4,
  },
  {
    time: "2023-07-30 22:20:00",
    total: 388.9,
    value: 1.4,
  },
  {
    time: "2023-07-30 22:30:00",
    total: 398.5,
    value: 9.6,
  },
  {
    time: "2023-07-30 22:40:00",
    total: 400.1,
    value: 1.6,
  },
  {
    time: "2023-07-30 22:50:00",
    total: 401.7,
    value: 1.6,
  },
  {
    time: "2023-07-30 23:00:00",
    total: 403.1,
    value: 1.4,
  },
  {
    time: "2023-07-30 23:10:00",
    total: 404.7,
    value: 1.6,
  },
  {
    time: "2023-07-30 23:20:00",
    total: 406.5,
    value: 1.8,
  },
  {
    time: "2023-07-30 23:30:00",
    total: 412.3,
    value: 5.8,
  },
  {
    time: "2023-07-30 23:40:00",
    total: 417.5,
    value: 5.2,
  },
  {
    time: "2023-07-30 23:50:00",
    total: 420.1,
    value: 2.6,
  },
  {
    time: "2023-07-31 00:00:00",
    total: 422.3,
    value: 2.2,
  },
  {
    time: "2023-07-31 00:10:00",
    total: 425.5,
    value: 3.2,
  },
  {
    time: "2023-07-31 00:20:00",
    total: 426.3,
    value: 0.8,
  },
  {
    time: "2023-07-31 00:30:00",
    total: 427.7,
    value: 1.4,
  },
  {
    time: "2023-07-31 00:40:00",
    total: 428.5,
    value: 0.8,
  },
  {
    time: "2023-07-31 00:50:00",
    total: 429.3,
    value: 0.8,
  },
  {
    time: "2023-07-31 01:00:00",
    total: 434.9,
    value: 5.6,
  },
  {
    time: "2023-07-31 01:10:00",
    total: 437.5,
    value: 2.6,
  },
  {
    time: "2023-07-31 01:20:00",
    total: 438.3,
    value: 0.8,
  },
  {
    time: "2023-07-31 01:30:00",
    total: 439.9,
    value: 1.6,
  },
  {
    time: "2023-07-31 01:40:00",
    total: 442.5,
    value: 2.6,
  },
  {
    time: "2023-07-31 01:50:00",
    total: 446.9,
    value: 4.4,
  },
  {
    time: "2023-07-31 02:00:00",
    total: 449.9,
    value: 3.0,
  },
  {
    time: "2023-07-31 02:10:00",
    total: 450.9,
    value: 1.0,
  },
  {
    time: "2023-07-31 02:20:00",
    total: 451.9,
    value: 1.0,
  },
  {
    time: "2023-07-31 02:30:00",
    total: 452.7,
    value: 0.8,
  },
  {
    time: "2023-07-31 02:40:00",
    total: 453.9,
    value: 1.2,
  },
  {
    time: "2023-07-31 02:50:00",
    total: 454.3,
    value: 0.4,
  },
  {
    time: "2023-07-31 03:00:00",
    total: 455.3,
    value: 1.0,
  },
  {
    time: "2023-07-31 03:10:00",
    total: 455.9,
    value: 0.6,
  },
  {
    time: "2023-07-31 03:20:00",
    total: 458.7,
    value: 2.8,
  },
  {
    time: "2023-07-31 03:30:00",
    total: 459.4,
    value: 0.7,
  },
  {
    time: "2023-07-31 03:40:00",
    total: 461.5,
    value: 2.1,
  },
  {
    time: "2023-07-31 03:50:00",
    total: 466.9,
    value: 5.4,
  },
  {
    time: "2023-07-31 04:00:00",
    total: 467.3,
    value: 0.4,
  },
  {
    time: "2023-07-31 04:10:00",
    total: 467.9,
    value: 0.6,
  },
  {
    time: "2023-07-31 04:20:00",
    total: 469.1,
    value: 1.2,
  },
  {
    time: "2023-07-31 04:30:00",
    total: 472.5,
    value: 3.4,
  },
  {
    time: "2023-07-31 04:40:00",
    total: 473.4,
    value: 0.9,
  },
  {
    time: "2023-07-31 04:50:00",
    total: 473.8,
    value: 0.4,
  },
  {
    time: "2023-07-31 05:00:00",
    total: 474.5,
    value: 0.7,
  },
  {
    time: "2023-07-31 05:10:00",
    total: 477.3,
    value: 2.8,
  },
  {
    time: "2023-07-31 05:20:00",
    total: 489.5,
    value: 12.2,
  },
  {
    time: "2023-07-31 05:30:00",
    total: 495.9,
    value: 6.4,
  },
  {
    time: "2023-07-31 05:40:00",
    total: 503.9,
    value: 8.0,
  },
  {
    time: "2023-07-31 05:50:00",
    total: 505.5,
    value: 1.6,
  },
  {
    time: "2023-07-31 06:00:00",
    total: 506.7,
    value: 1.2,
  },
  {
    time: "2023-07-31 06:10:00",
    total: 509.7,
    value: 3.0,
  },
  {
    time: "2023-07-31 06:20:00",
    total: 513.9,
    value: 4.2,
  },
  {
    time: "2023-07-31 06:30:00",
    total: 515.3,
    value: 1.4,
  },
  {
    time: "2023-07-31 06:40:00",
    total: 517.3,
    value: 2.0,
  },
  {
    time: "2023-07-31 06:50:00",
    total: 519.3,
    value: 2.0,
  },
  {
    time: "2023-07-31 07:00:00",
    total: 523.7,
    value: 4.4,
  },
  {
    time: "2023-07-31 07:10:00",
    total: 526.3,
    value: 2.6,
  },
  {
    time: "2023-07-31 07:20:00",
    total: 528.9,
    value: 2.6,
  },
  {
    time: "2023-07-31 07:30:00",
    total: 535.5,
    value: 6.6,
  },
  {
    time: "2023-07-31 07:40:00",
    total: 541.1,
    value: 5.6,
  },
  {
    time: "2023-07-31 07:50:00",
    total: 544.3,
    value: 3.2,
  },
  {
    time: "2023-07-31 08:00:00",
    total: 550.1,
    value: 5.8,
  },
  {
    time: "2023-07-31 08:10:00",
    total: 553.9,
    value: 3.8,
  },
  {
    time: "2023-07-31 08:20:00",
    total: 559.7,
    value: 5.8,
  },
  {
    time: "2023-07-31 08:30:00",
    total: 562.9,
    value: 3.2,
  },
  {
    time: "2023-07-31 08:40:00",
    total: 572.1,
    value: 9.2,
  },
  {
    time: "2023-07-31 08:50:00",
    total: 585.3,
    value: 13.2,
  },
  {
    time: "2023-07-31 09:00:00",
    total: 596.9,
    value: 11.6,
  },
  {
    time: "2023-07-31 09:10:00",
    total: 610.1,
    value: 13.2,
  },
  {
    time: "2023-07-31 09:20:00",
    total: 621.5,
    value: 11.4,
  },
  {
    time: "2023-07-31 09:30:00",
    total: 628.1,
    value: 6.6,
  },
  {
    time: "2023-07-31 09:40:00",
    total: 633.3,
    value: 5.2,
  },
  {
    time: "2023-07-31 09:50:00",
    total: 636.5,
    value: 3.2,
  },
  {
    time: "2023-07-31 10:00:00",
    total: 642.6,
    value: 6.1,
  },
  {
    time: "2023-07-31 10:10:00",
    total: 647.9,
    value: 5.3,
  },
  {
    time: "2023-07-31 10:20:00",
    total: 655.3,
    value: 7.4,
  },
  {
    time: "2023-07-31 10:30:00",
    total: 668.5,
    value: 13.2,
  },
  {
    time: "2023-07-31 10:40:00",
    total: 675.3,
    value: 6.8,
  },
  {
    time: "2023-07-31 10:50:00",
    total: 681.1,
    value: 5.8,
  },
  {
    time: "2023-07-31 11:00:00",
    total: 682.1,
    value: 1.0,
  },
  {
    time: "2023-07-31 11:10:00",
    total: 684.1,
    value: 2.0,
  },
  {
    time: "2023-07-31 11:20:00",
    total: 688.3,
    value: 4.2,
  },
  {
    time: "2023-07-31 11:30:00",
    total: 690.7,
    value: 2.4,
  },
  {
    time: "2023-07-31 11:40:00",
    total: 694.5,
    value: 3.8,
  },
  {
    time: "2023-07-31 11:50:00",
    total: 704.1,
    value: 9.6,
  },
  {
    time: "2023-07-31 12:00:00",
    total: 711.3,
    value: 7.2,
  },
  {
    time: "2023-07-31 12:10:00",
    total: 715.9,
    value: 4.6,
  },
  {
    time: "2023-07-31 12:20:00",
    total: 717.5,
    value: 1.6,
  },
  {
    time: "2023-07-31 12:30:00",
    total: 724.3,
    value: 6.8,
  },
  {
    time: "2023-07-31 12:40:00",
    total: 724.4,
    value: 0.1,
  },
  {
    time: "2023-07-31 12:50:00",
    total: 724.7,
    value: 0.3,
  },
  {
    time: "2023-07-31 13:00:00",
    total: 725.1,
    value: 0.4,
  },
  {
    time: "2023-07-31 13:10:00",
    total: 726.7,
    value: 1.6,
  },
  {
    time: "2023-07-31 13:20:00",
    total: 726.8,
    value: 0.1,
  },
  {
    time: "2023-07-31 13:30:00",
    total: 726.9,
    value: 0.1,
  },
  {
    time: "2023-07-31 13:40:00",
    total: 726.9,
    value: 0.0,
  },
  {
    time: "2023-07-31 13:50:00",
    total: 726.9,
    value: 0.0,
  },
  {
    time: "2023-07-31 14:00:00",
    total: 726.9,
    value: 0.0,
  },
  {
    time: "2023-07-31 14:10:00",
    total: 727.0,
    value: 0.1,
  },
  {
    time: "2023-07-31 14:20:00",
    total: 727.5,
    value: 0.5,
  },
  {
    time: "2023-07-31 14:30:00",
    total: 736.3,
    value: 8.8,
  },
  {
    time: "2023-07-31 14:40:00",
    total: 737.3,
    value: 1.0,
  },
  {
    time: "2023-07-31 14:50:00",
    total: 737.9,
    value: 0.6,
  },
  {
    time: "2023-07-31 15:00:00",
    total: 738.1,
    value: 0.2,
  },
  {
    time: "2023-07-31 15:10:00",
    total: 738.9,
    value: 0.8,
  },
  {
    time: "2023-07-31 15:20:00",
    total: 741.3,
    value: 2.4,
  },
  {
    time: "2023-07-31 15:30:00",
    total: 742.5,
    value: 1.2,
  },
  {
    time: "2023-07-31 15:40:00",
    total: 743.7,
    value: 1.2,
  },
  {
    time: "2023-07-31 15:50:00",
    total: 744.9,
    value: 1.2,
  },
  {
    time: "2023-07-31 16:00:00",
    total: 746.5,
    value: 1.6,
  },
  {
    time: "2023-07-31 16:10:00",
    total: 753.5,
    value: 7.0,
  },
  {
    time: "2023-07-31 16:20:00",
    total: 753.9,
    value: 0.4,
  },
  {
    time: "2023-07-31 16:30:00",
    total: 754.3,
    value: 0.4,
  },
  {
    time: "2023-07-31 16:40:00",
    total: 763.7,
    value: 9.4,
  },
  {
    time: "2023-07-31 16:50:00",
    total: 765.7,
    value: 2.0,
  },
  {
    time: "2023-07-31 17:00:00",
    total: 766.1,
    value: 0.4,
  },
  {
    time: "2023-07-31 17:10:00",
    total: 766.2,
    value: 0.1,
  },
  {
    time: "2023-07-31 17:20:00",
    total: 766.3,
    value: 0.1,
  },
  {
    time: "2023-07-31 17:30:00",
    total: 766.4,
    value: 0.1,
  },
  {
    time: "2023-07-31 17:40:00",
    total: 766.5,
    value: 0.1,
  },
  {
    time: "2023-07-31 17:50:00",
    total: 766.6,
    value: 0.1,
  },
  {
    time: "2023-07-31 18:00:00",
    total: 767.0,
    value: 0.4,
  },
  {
    time: "2023-07-31 18:10:00",
    total: 769.2,
    value: 2.2,
  },
  {
    time: "2023-07-31 18:20:00",
    total: 771.6,
    value: 2.4,
  },
  {
    time: "2023-07-31 18:30:00",
    total: 773.2,
    value: 1.6,
  },
  {
    time: "2023-07-31 18:40:00",
    total: 782.0,
    value: 8.8,
  },
  {
    time: "2023-07-31 18:50:00",
    total: 783.2,
    value: 1.2,
  },
  {
    time: "2023-07-31 19:00:00",
    total: 783.6,
    value: 0.4,
  },
  {
    time: "2023-07-31 19:10:00",
    total: 784.2,
    value: 0.6,
  },
  {
    time: "2023-07-31 19:20:00",
    total: 784.5,
    value: 0.3,
  },
  {
    time: "2023-07-31 19:30:00",
    total: 784.6,
    value: 0.1,
  },
  {
    time: "2023-07-31 19:40:00",
    total: 785.0,
    value: 0.4,
  },
  {
    time: "2023-07-31 19:50:00",
    total: 786.0,
    value: 1.0,
  },
  {
    time: "2023-07-31 20:00:00",
    total: 790.0,
    value: 4.0,
  },
  {
    time: "2023-07-31 20:10:00",
    total: 790.4,
    value: 0.4,
  },
  {
    time: "2023-07-31 20:20:00",
    total: 790.8,
    value: 0.4,
  },
  {
    time: "2023-07-31 20:30:00",
    total: 791.4,
    value: 0.6,
  },
  {
    time: "2023-07-31 20:40:00",
    total: 806.0,
    value: 14.6,
  },
  {
    time: "2023-07-31 20:50:00",
    total: 811.6,
    value: 5.6,
  },
  {
    time: "2023-07-31 21:00:00",
    total: 816.4,
    value: 4.8,
  },
  {
    time: "2023-07-31 21:10:00",
    total: 818.6,
    value: 2.2,
  },
  {
    time: "2023-07-31 21:20:00",
    total: 824.6,
    value: 6.0,
  },
  {
    time: "2023-07-31 21:30:00",
    total: 825.4,
    value: 0.8,
  },
  {
    time: "2023-07-31 21:40:00",
    total: 827.6,
    value: 2.2,
  },
  {
    time: "2023-07-31 21:50:00",
    total: 833.2,
    value: 5.6,
  },
  {
    time: "2023-07-31 22:00:00",
    total: 836.8,
    value: 3.6,
  },
  {
    time: "2023-07-31 22:10:00",
    total: 840.4,
    value: 3.6,
  },
  {
    time: "2023-07-31 22:20:00",
    total: 843.4,
    value: 3.0,
  },
  {
    time: "2023-07-31 22:30:00",
    total: 845.2,
    value: 1.8,
  },
  {
    time: "2023-07-31 22:40:00",
    total: 850.0,
    value: 4.8,
  },
  {
    time: "2023-07-31 22:50:00",
    total: 861.6,
    value: 11.6,
  },
  {
    time: "2023-07-31 23:00:00",
    total: 864.2,
    value: 2.6,
  },
  {
    time: "2023-07-31 23:10:00",
    total: 865.8,
    value: 1.6,
  },
  {
    time: "2023-07-31 23:20:00",
    total: 868.4,
    value: 2.6,
  },
  {
    time: "2023-07-31 23:30:00",
    total: 871.2,
    value: 2.8,
  },
  {
    time: "2023-07-31 23:40:00",
    total: 878.4,
    value: 7.2,
  },
  {
    time: "2023-07-31 23:50:00",
    total: 883.0,
    value: 4.6,
  },
  {
    time: "2023-08-01 00:00:00",
    total: 883.6,
    value: 0.6,
  },
  {
    time: "2023-08-01 00:10:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 00:20:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 00:30:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 00:40:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 00:50:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 01:00:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 01:10:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 01:20:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 01:30:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 01:40:00",
    total: 883.6,
    value: 0.0,
  },
  {
    time: "2023-08-01 01:59:00",
    total: 883.6,
    value: 0.0,
  },
]);

let myChart1 = null;
let myChart2 = null;
@@ -1701,7 +258,9 @@
};
const getDangerInfo = async () => {
  try {
    const response = await fetch("/json/listMaxInfluenceArea_wgs84_output.json");
    const response = await fetch(
      "/json/listMaxInfluenceArea_wgs84_output.json"
    );
    const result = await response.json();
    console.log("Loaded JSON data:", result);
    if (result && result.data && Array.isArray(result.data.items)) {
@@ -1778,6 +337,14 @@
  charts.style.height = style.height;
};

const syncTimeWithTimeline = () => {
  // 2025-05-24 00:25
  // // 将时间字符串转换为分钟数 (格式: "YYYY-MM-DD mm:ss")
  const timeParts = nowTime.value.split(" ");
  const timeOnly = timeParts[1]; // 获取 "mm:ss" 部分
  return timeOnly;
};

const setEcharts1 = () => {
  const chartDom = document.getElementById("echarts1");
  myChart1 = echarts.init(chartDom);
@@ -1794,14 +361,16 @@
    try {
      const response = await fetch("/json/rainfall.json");
      const result = await response.json();
      console.log("Loaded JSON data:", result);
      if (result && result.data && Array.isArray(result.data)) {
        rainfallData.value = result.data;
        console.log("rainfallData is an array with length:", rainfallData.value.length);

        // 计算 value 和 total 的最大值
        const maxValue = Math.max(...rainfallData.value.map((item) => item.value));
        const maxTotal = Math.max(...rainfallData.value.map((item) => item.total));
        const maxValue = Math.max(
          ...rainfallData.value.map((item) => item.value)
        );
        const maxTotal = Math.max(
          ...rainfallData.value.map((item) => item.total)
        );

        // 初始化时间轴（从00:00开始）
        xAxisData.value = ["00:00"]; // 初始时间点
@@ -1817,28 +386,13 @@
        const yAxis2Params = calculateYAxisParams(maxTotal);
        updateChart(yAxis1Params, yAxis2Params);
      } else {
        console.error("Invalid JSON format: 'data' is missing or not an array!");
        console.error(
          "Invalid JSON format: 'data' is missing or not an array!"
        );
      }
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  // 计算下一个时间点（增加10分钟）
  const getNextTime = (currentTime) => {
    const [hours, mins] = currentTime.split(':').map(Number);
    let newHours = hours;
    let newMins = mins + 10;

    if (newMins >= 60) {
      newMins = 0;
      newHours += 1;
    }
    if (newHours >= 24) {
      newHours = 0;
    }

    return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
  };

  // 计算 y 轴参数（最多有 4 个点）
@@ -1979,9 +533,7 @@
      data1.value.push(newItem.value); // 添加降雨数据
      data2.value.push(newItem.total); // 添加累计雨量

      // 计算并添加新的时间点（前一个时间点+10分钟）
      const lastTime = xAxisData.value[xAxisData.value.length - 1] || "00:00";
      const nextTime = getNextTime(lastTime);
      const nextTime = syncTimeWithTimeline();
      xAxisData.value.push(nextTime);

      // 更新当前索引
@@ -2077,17 +629,15 @@
    try {
      const response = await fetch("/json/于家西沟断面下数据.json");
      const result = await response.json();
      console.log("Loaded JSON data:", result);
      if (result && result.data && Array.isArray(result.data)) {
        jsonData.value = result.data;
        console.log("jsonData is an array with length:", jsonData.value.length);

        // 计算 value 和 total 的最大值
        const maxValue = Math.max(...jsonData.value.map((item) => item.value));
        const maxTotal = Math.max(...jsonData.value.map((item) => item.total));

        // 初始化时间轴（从00:00开始）
        xAxisData.value = ["00:00"]; // 初始时间点
        xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 初始时间点

        // 初始化图表（仅加载第一个数据点）
        if (jsonData.value.length > 0) {
@@ -2100,29 +650,15 @@
        const yAxis2Params = calculateYAxisParams(maxTotal);
        updateChart(yAxis1Params, yAxis2Params);
      } else {
        console.error("Invalid JSON format: 'data' is missing or not an array!");
        console.error(
          "Invalid JSON format: 'data' is missing or not an array!"
        );
      }
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  // 计算下一个时间点（增加10分钟）
  const getNextTime = (currentTime) => {
    const [hours, mins] = currentTime.split(':').map(Number);
    let newHours = hours;
    let newMins = mins + 10;

    if (newMins >= 60) {
      newMins = 0;
      newHours += 1;
    }
    if (newHours >= 24) {
      newHours = 0;
    }

    return `${String(newHours).padStart(2, "0")}:${String(newMins).padStart(2, "0")}`;
  };

  // 计算 y 轴参数（最多有 4 个点）
  const calculateYAxisParams = (max) => {
@@ -2262,9 +798,7 @@
      data1.value.push(newItem.value); // 添加实时流量
      data2.value.push(newItem.total); // 添加累计流量

      // 计算并添加新的时间点（前一个时间点+10分钟）
      const lastTime = xAxisData.value[xAxisData.value.length - 1] || "00:00";
      const nextTime = getNextTime(lastTime);
      const nextTime = syncTimeWithTimeline();
      xAxisData.value.push(nextTime);

      // 更新当前索引
@@ -2352,7 +886,10 @@
};

onMounted(() => {
  getRainfallData();
  // getRainfallData();
  EventBus.on("time-update", (time) => {
    nowTime.value = time;
  });
  chart1Data.value = setEcharts1();
  chart2Data.value = setEcharts2();
  myChart1 = chart1Data.value.myChart1;
@@ -2361,6 +898,8 @@
});

onBeforeUnmount(() => {
  EventBus.off("time-update"); // 清理事件监听
  nowTime.value = null;
  if (intervalId1) clearInterval(intervalId1);
  if (intervalId2) clearInterval(intervalId2);
  if (dataIntervalId) clearInterval(dataIntervalId);

 src/components/tools/LayerTree.vue

@@ -45,7 +45,7 @@
      { label: "孙胡沟隐患点" },
      { label: "综合监测设备信息" },
      { label: "孙胡沟断面" },
      { label: "避险点" },
      { label: "避险场所" },
    ],
  },
]);
@@ -193,7 +193,7 @@
    case "泥石流隐患点面数据":
    case "综合监测设备信息":
    case "孙胡沟断面":
    case "避险点":
    case "避险场所":
      console.log(label, checked, indeterminate);
      break;
  }
@@ -297,21 +297,21 @@
}

/**
 * 添加避险点
 * 添加避险场所
 */
function addTetrahedron(visible) {
  const emergencyAreaList = [];
  // 加载避险点底层面片
  // 加载避险场所底层面片
  loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
    emergencyAreaList.push(...entities);

    // 默认隐藏避险点
    // 默认隐藏避险场所
    entities.forEach((entity) => {
      entity.show = false;
    });

    // 将避险点实体存储到 treeMap
    treeMap.set("避险点", entities);
    // 将避险场所实体存储到 treeMap
    treeMap.set("避险场所", entities);
  });
}


 src/store/simAPI.js

@@ -1,7 +1,8 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { ElMessage, ElMessageBox, formMetaProps } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { createSimData } from '@/api/trApi';
import dayjs from 'dayjs'

export const SimAPIStore = defineStore('SimAPI', () => {
    const selectTab = ref("行政区划仿真")
@@ -62,6 +63,7 @@
                type: forms.type,
                status: 0,
                data: JSON.stringify({
                    startTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                    type: forms.type,
                    total: forms.rainfall,
                    duration: forms.duration,

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -6,11 +6,16 @@
        isCollapsed ? "展开" : "收起"
      }}</span>
    </div>
    <div class="details" :class="{ hidden: isCollapsed }">
      <div class="input-item">
        <label>预测数据:</label>
    <el-form
      :class="{ hidden: isCollapsed }"
      :model="forms"
      class="details"
      label-width="auto"
      style="max-width: 600px"
    >
      <el-form-item label="预测数据:">
        <el-select
          v-model="selectedForecastData"
          v-model="forms.prediction"
          placeholder="请选择"
          popper-class="mySelectStyle"
        >
@@ -18,40 +23,48 @@
            v-for="item in ForecastData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :value="item.name"
          ></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <label>方案名称:</label>
      </el-form-item>
      <el-form-item label="降雨数据:" v-show="forms.prediction == '降雨场次'">
        <el-select
          v-model="forms.showRainFall"
          placeholder="请选择"
          popper-class="mySelectStyle"
        >
          <el-option
            v-for="item in rainFall"
            :key="item.rainfallId"
            :label="item.rainfallName"
            :value="item.rainfallName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方案名称:">
        <el-input
          v-model="schemeName"
          v-model="forms.schemeName"
          type="text"
          placeholder="请输入"
        ></el-input>
      </div>
      <div class="input-item" style="margin-bottom: 10px">
        <label>降雨雨量:</label>
      </el-form-item>
      <el-form-item label="降雨雨量:">
        <el-input v-model="forms.rainfall" type="number" placeholder="请输入">
          <template #append>mm</template></el-input
        >
      </el-form-item>
      <el-form-item label="降雨强度:">
        <el-input
          v-model="totalRainfall"
          v-model="forms.rainfallIntensity"
          type="number"
          placeholder="请输入"
        ></el-input>
        <span>mm</span>
      </div>
      <div class="input-item" style="margin-bottom: 10px">
        <label>降雨强度:</label>
        <el-input
          v-model="rainfallIntensity"
          type="number"
          placeholder="请输入"
        ></el-input>
        <span>mm/h</span>
      </div>
      <div class="input-item">
        <label>降雨模式:</label>
        >
          <template #append>mm/h</template></el-input
        >
      </el-form-item>
      <el-form-item label="降雨模式:">
        <el-select
          v-model="selectedRainfallPatterns"
          v-model="forms.mode"
          placeholder="请选择"
          popper-class="mySelectStyle"
        >
@@ -62,60 +75,31 @@
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <label>预计时长:</label>
        <el-input
          v-model="rainfallDuration"
          type="number"
          placeholder="请输入"
        ></el-input>
        <span>h</span>
      </div>
      <!-- <div>
          <label>仿真参数:</label>
          <div style="width: 100%; height: 43px; background-color: #fff;"></div>
        </div> -->
    </div>
      </el-form-item>
      <el-form-item label="预计时长:">
        <el-input v-model="forms.duration" type="number" placeholder="请输入"
          ><template #append>h</template></el-input
        >
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button type="primary" @click="openPlan">打开方案</el-button>
      <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
      <el-button type="success" @click="startPlay">开始模拟</el-button>
    </div>

    <!-- 保存方案对话框 -->
    <el-dialog
      v-model="saveDialogVisible"
      title="保存方案"
      width="50%"
      :before-close="handleClose"
      custom-class="custom-dialog"
    >
      <div class="dialog-content">
        <p><strong>方案名称：</strong>{{ schemeName }}</p>
        <p><strong>所选重点沟：</strong>{{ props.selectedArea }}</p>
        <p><strong>模拟类型：</strong>预测模拟</p>
        <p><strong>预测数据：</strong>{{ selectedForecastDataName }}</p>
        <p><strong>降雨雨量：</strong>{{ totalRainfall }} mm</p>
        <p><strong>降雨强度：</strong>{{ rainfallIntensity }} mm/h</p>
        <p><strong>降雨模式：</strong>{{ selectedRainfallPatternsName }}</p>
        <p><strong>预计时长：</strong>{{ rainfallDuration }} h</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSave">确定保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed, inject } from "vue";
import { ref, computed, inject, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { useSimStore } from "@/store/simulation.js"; // 引入 Store
import { SimAPIStore } from "@/store/simAPI";
import { getRainfallData } from "@/api/hpApi";

onMounted(() => {
  getRain();
});

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -140,12 +124,6 @@

// 数据绑定
const isCollapsed = ref(false); // 控制展开/收起状态
const totalRainfall = ref(50); // 降雨雨量
const schemeName = ref("方案名称"); // 方案名称
const rainfallIntensity = ref(70); // 降雨强度
const rainfallDuration = ref(5); // 预计时长
const selectedForecastData = ref("4"); // 默认选中“自定义参数”
const selectedRainfallPatterns = ref("1"); // 默认选中“正态分布”
const saveDialogVisible = ref(false); // 控制保存方案对话框的显示状态

// 预测数据选项
@@ -164,22 +142,25 @@
  { id: "4", name: "持续上升" },
];


// 计算属性：获取当前选中的预测数据名称
const selectedForecastDataName = computed(() => {
  const selected = ForecastData.find(
    (item) => item.id === selectedForecastData.value
  );
  return selected ? selected.name : "";
const forms = reactive({
  rainfall: 50,
  schemeName: "",
  rainfallIntensity: 70,
  duration: 5,
  prediction: "降雨场次",
  mode: "正态分布",
  showRainFall: "",
});

// 计算属性：获取当前选中的降雨模式名称
const selectedRainfallPatternsName = computed(() => {
  const selected = RainfallPatterns.find(
    (item) => item.name === selectedRainfallPatterns.value
  );
  return selected ? selected.name : "";
});
// 降雨场次选择
const rainFall = ref({});

const getRain = () => {
  getRainfallData().then((res) => {
    rainFall.value = res.data.pageData;
    console.log(res.data, "res");
  });
};

// 切换详情显示
const toggleDetails = () => {
@@ -188,40 +169,38 @@

// 打开保存方案对话框
const openSaveDialog = async () => {
  const forms = {
    name: schemeName.value,
  const params = {
    name: forms.schemeName,
    geom: props.selectedArea,
    type: 1,
    rainfall: totalRainfall.value,
    duration: rainfallDuration.value,
    intensity: rainfallIntensity.value,
    mode: selectedRainfallPatterns.value,
    prediction: selectedForecastDataName.value,
    rainfall: forms.rainfall,
    duration: forms.duration,
    intensity: forms.rainfallIntensity,
    mode: forms.mode,
    prediction: forms.prediction,
  };
  await simStore.addSimCheme(forms);
  await simStore.addSimCheme(params);
};

// 关闭保存方案对话框
const handleClose = () => {
  saveDialogVisible.value = false;
};


// 打开方案
const openPlan = () => {
  // getRain();
  console.log("打开方案按钮被点击");
};
</script>

<style scoped>
<style lang="less" scoped>
.history-simulation {
  margin-bottom: 20px;
}

.details {
  margin-top: 10px;
  transition: height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0px 10px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.hidden {
@@ -231,6 +210,7 @@

.buttons {
  margin-top: 10px;
  margin-right: 10px;
  display: flex;
  gap: 10px;
}
@@ -274,4 +254,18 @@
.custom-dialog {
  z-index: 3000 !important; /* 确保对话框覆盖其他元素 */
}
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #084b42;
  color: #fff;
}
/deep/ .el-form-item__label {
  color: #61f7d4 !important;
}
/deep/ .el-select {
  margin-bottom: 0px !important;
}
/deep/ .el-form-item {
  margin-top: 10px;
}
</style>

 src/views/mnfz.vue

@@ -132,10 +132,10 @@
  });
  dataSources.length = 0;
}
// 避险点，绿色富文本
// 避险场所，绿色富文本
function addTetrahedron(visible) {
  const emergencyAreaList = [];
  //  这里是添加避险点底层面片
  //  这里是添加避险场所底层面片
  loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
    emergencyAreaList.push(...entities);
  });
@@ -161,10 +161,10 @@
    //   altitude: 528,
    // },
  ];
  // 这里是添加避险点富文本高亮显示
  // 这里是添加避险场所富文本高亮显示
  list.forEach((item) => {
    let point = earthCtrl.factory.createRichTextPoint(
      "避险点",
      "避险场所",
      [item.longitude, item.latitude, item.altitude - 10],
      {
        distanceDisplayCondition:
@@ -177,11 +177,11 @@
    console.log("point", point);
    emergencyAreaList.push(point);
  });
  treeMap.set("避险点", emergencyAreaList);
  treeMap.set("避险场所", emergencyAreaList);
}
// 删除避险点的富文本实体
// 删除避险场所的富文本实体
function removeEmergencyPoints() {
  const emergencyAreaList = treeMap.get("避险点"); // 获取存储的避险点实体列表
  const emergencyAreaList = treeMap.get("避险场所"); // 获取存储的避险场所实体列表
  if (emergencyAreaList && emergencyAreaList.length > 0) {
    emergencyAreaList.forEach((entity) => {
      if (entity && typeof entity.deleteObject === "function") {
@@ -195,7 +195,7 @@
        earthCtrl.coreMap.entities.remove(entity);
      }
    });
    treeMap.set("避险点", []); // 清空存储的避险点列表
    treeMap.set("避险场所", []); // 清空存储的避险场所列表
  }
}

@@ -233,7 +233,7 @@
    if (showDebuffDetail.value) {
      return;
    }
    checkedKeys.value = ["避险点"];
    checkedKeys.value = ["避险场所"];
    showDebuffDetail.value = true;
    getTimeMarkers();
    addTetrahedron();