123

guonan

2025-07-10 e7557e07fbdaa9247024b301e1a2ba41390741ad

 src/components/monifangzhen/echartInfo.vue

@@ -13,11 +13,6 @@
      <div class="echartCont">
        <p>断面模拟</p>
        <div class="echartBox">
          <!-- <div>
            <button id="startButton">开始加载</button>
            <button id="pauseButton">暂停加载</button>
            <button id="resetButton">重置加载</button>
          </div> -->
          <div id="echarts2" style="width: 100%; height: 100%"></div>
        </div>
      </div>
@@ -29,6 +24,7 @@
              :data="tableData"
              style="width: 100%; font-size: 10px"
              height="100%"
              @row-click="handleRowClick"
            >
              <el-table-column label="影响区名称" width="30" align="center">
                <template #default="scope">
@@ -99,21 +95,32 @@

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
import { EventBus } from "@/eventBus"; // 引入事件总线
import {
  ref,
  onMounted,
  onBeforeUnmount,
  nextTick,
  watch,
  onUnmounted,
} from "vue";
import dayjs from "dayjs";
import { getRainfall } from "@/api";
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
const { rainFalls, intensityUnit } = simStore;

let dataIntervalId = null; // 定时器 ID
let dataIntervalId = null; // 表格定时器 ID
const jsonData = ref([]); // JSON 数据
const tableData = ref([]); // 表格数据
const currentIndex = ref(0); // 当前加载索引
const isPaused = ref(false); // 是否暂停标志
const chart1Data = ref(null);
const chart2Data = ref(null);
let intervalId1 = null;
let intervalId2 = null;
const chart1Data = ref(null); //降雨数据
const chart2Data = ref(null); //断面数据
let intervalId1 = null; //降雨数据定时器
let intervalId2 = null; //断面数据定时器

const isFinished = ref(true);
// 根据时间轴匹配的x轴的时间显示
const nowTime = ref(null);

const props = defineProps({
  isDynamicMode: {
@@ -127,7 +134,6 @@
watch(
  () => props.isFinish,
  (newVal) => {
    isFinished.value = newVal;
    if (!newVal) {
      resetTable();
      chart1Data.value.resetLoading();
@@ -137,21 +143,72 @@
    }
  }
);
// 清除函数=====================================================================
// 监听事件总线的自定义事件
EventBus.on("reset-table", () => {
  resetTable(); // 调用重置表格的函数
});

// 重置威胁对象中的数据
// 清除echarts图表
EventBus.on("clear-echart", () => {
  chart1Data.value.resetLoading();
  chart2Data.value.resetLoading();
});

// 清除断面
EventBus.on("clear-dM", () => {
  chart2Data.value.stopUpdating();
  chart2Data.value.resetLoading();
  if (intervalId2) {
    clearInterval(intervalId2);
    intervalId2 = null;
  }
  if (stopNowTimeWatch) {
    stopNowTimeWatch(); // 停止 nowTime 的监听
    stopNowTimeWatch = null;
  }
});

// 重新绘制断面时，重新启动 nowTime 监听
EventBus.on("redraw-dM", () => {
  if (chart2Data.value) {
    chart2Data.value.startNowTimeWatch();
    chart2Data.value.loadJsonData();
  }
});

// 清除威胁对象中的数据
const resetTable = () => {
  // 1. 重置表格数据
  currentIndex.value = 0;
  tableData.value = [];

  // 2. 停止并重新开始数据加载
  if (dataIntervalId) {
    clearInterval(dataIntervalId);
  }
  startAddingData();
};

// 监听父组件传递的数据变化
// 暂停时停止所有的更新
const handleHideSchemeInfo = () => {
  // 停止所有动态更新
  if (intervalId1) {
    clearInterval(intervalId1);
    chart1Data.value.stopUpdating(); // 每隔 1 秒更新一次
    intervalId1 = null;
  }
  if (intervalId2) {
    clearInterval(intervalId2);
    chart2Data.value.stopUpdating(); // 每隔 1 秒更新一次
    intervalId2 = null;
  }
  if (dataIntervalId) {
    clearInterval(dataIntervalId);
    dataIntervalId = null;
  }
};

// 监听时间轴结束模拟
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);

// 监听父组件传递的数据变化
watch(
  () => props.isDynamicMode,
@@ -180,1548 +237,31 @@
        }, 10);
      }
    } else {
      // 停止所有动态更新
      if (intervalId1) {
        clearInterval(intervalId1);
        chart1Data.value.stopUpdating(); // 每隔 1 秒更新一次

        intervalId1 = null;
      }
      if (intervalId2) {
        console.log(intervalId2, "暂停");
        clearInterval(intervalId2);
        chart2Data.value.stopUpdating(); // 每隔 1 秒更新一次
        intervalId2 = null;
      }
      if (dataIntervalId) {
        clearInterval(dataIntervalId);
        dataIntervalId = null;
      }
      handleHideSchemeInfo();
    }
  },
  { immediate: true } // 立即执行监听器
);
const listData = cityData.listData;
const data = ref([
  8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53,
  9.17, 0, 0.09, 0.86, 8.15, 44.8, 21.86, 6.2, 4.98, 2.82, 2.36, 3.1, 1.06,
]);

// 点击数据实现面片闪动的触发函数
function handleRowClick(row) {
  console.log("Row clicked:", row);
  // 触发事件，将当前行的 ID 发送到地图组件
  EventBus.emit("row-clicked", row.id);
}

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;

const getRandomInt = (min = 0, max = 100) => {
  const minCeiled = Math.ceil(min);
  const maxFloored = Math.floor(max);
  return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
};
// 威胁对象数据
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)) {
@@ -1739,8 +279,6 @@
};

const startAddingData = () => {
  console.log("Starting timer with jsonData length:", jsonData.value.length);

  // 如果定时器已存在，先清除
  if (dataIntervalId) {
    clearInterval(dataIntervalId);
@@ -1772,15 +310,6 @@
  });
};

const getRainfallData = async () => {
  try {
    const res = await getRainfall();
    rainfallData.value = res.data;
  } catch (error) {
    console.error("Error fetching rainfall data:", error);
  }
};

const rainClick = () => {
  rainChangeShow.value = !rainChangeShow.value;
  let desc = { func_name: "RainChange", visibility: rainChangeShow.value };
@@ -1788,8 +317,6 @@
};

const debuffClick = () => {
  // Assuming you have access to parent components in a different way in Vue 3
  // You might need to use provide/inject or props/emits instead
  console.log("Debuff click");
};

@@ -1800,115 +327,93 @@
  charts.style.height = style.height;
};

// 时间轴时间截取处理
const syncTimeWithTimeline = () => {
  if (nowTime.value) {
    const timeParts = nowTime.value.split(" ");
    const timeOnly = timeParts[1]; // 获取 "mm:ss" 部分
    return timeOnly;
  }
};

const setEcharts1 = () => {
  const chartDom = document.getElementById("echarts1");
  myChart1 = echarts.init(chartDom);
  const myChart1 = echarts.init(chartDom);

  let rainfallData = ref([]); // 存储从 JSON 文件中加载的数据
  let data1 = ref([]); // 降雨数据数据
  let data2 = ref([]); // 累计雨量数据
  let xAxisData = ref([]); // 动态时间轴
  let updateInterval = null; // 定时器变量
  let dataIndex = ref(0); // 当前数据索引，用于按顺序更新
  // 图表数据
  let rainfallData = ref([]);
  let data1 = ref([]);
  let data2 = ref([]);
  let xAxisData = ref(["00:00"]);
  let updateInterval = null;
  let dataIndex = ref(0);

  // 加载 JSON 数据
  const loadJsonData = async () => {
    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));

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

        // 初始化图表（仅加载第一个数据点）
        if (rainfallData.value.length > 0) {
          data1.value.push(rainfallData.value[0].value); // 降雨数据
          data2.value.push(rainfallData.value[0].total); // 累计雨量
        }

        // 根据最大值设置 y 轴参数并初始化图表
        const yAxis1Params = calculateYAxisParams(maxValue);
        const yAxis2Params = calculateYAxisParams(maxTotal);
        updateChart(yAxis1Params, yAxis2Params);
      } else {
        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) => {
    const step = Math.ceil(max / 3); // 最多有 4 个点（包括 0），所以分成 3 份
  // 动态计算Y轴范围
  const getDynamicYAxis = (dataArray) => {
    const currentMax = Math.max(...dataArray, 1);
    const step = Math.ceil(currentMax / 3);
    return {
      max: step * 3, // 确保最大值是步长的整数倍
      max: step * 3,
      interval: step,
    };
  };

  // 加载JSON数据
  const loadJsonData = async () => {
    try {
      const result = simStore.rainFalls;
      if (result?.length) {
        rainfallData.value = result;

        // 判断 intensityUnit 是否为 mm/15min
        if (rainfallData.value.length > 0) {
          // 如果是 mm/15min，则将所有 intensity * 60
          if (intensityUnit === "mm/15min") {
            rainfallData.value = rainfallData.value.map((item) => ({
              ...item,
              intensity: item.intensity * 60,
              total: item.total * 60,
            }));
          }

          // 初始化 data1 和 data2（从 0 开始）
          data1.value = [0];
          data2.value = [0];

          // 使用第一个数据项的 time 作为初始值
          xAxisData.value = [rainfallData.value[0]?.time || "00:00"];

          updateChart();
        }
      }
    } catch (error) {
      console.error("数据加载失败:", error);
    }
  };

  // 更新图表配置
  const updateChart = (yAxis1Params, yAxis2Params) => {
  const updateChart = () => {
    const option = {
      animation: false, // 禁用动画
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#fff",
          },
        },
      },
      animation: false,
      tooltip: { trigger: "axis" },
      grid: {
        left: "1%",
        right: "1%",
        bottom: "1%",
        containLabel: true,
        containLabel: false,
      },
      legend: {
        data: ["降雨数据", "累计雨量"],
        textStyle: {
          color: "#fff",
        textStyle: { color: "#fff" },
        right: "10px",
        selected: {
          降雨数据: true,
          累计雨量: true,
        },
        right: "10px", // 将图例靠右贴边
      },
      xAxis: [
        {
          type: "category",
          data: xAxisData.value, // 使用动态时间轴
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            color: "#fff",
            rotate: 0, // 将旋转角度设置为0，取消倾斜
          },
          data: xAxisData.value,
          axisLabel: { color: "#fff", rotate: 0 },
        },
      ],
      yAxis: [
@@ -1916,38 +421,22 @@
          type: "value",
          name: "单位:mm",
          min: 0,
          max: yAxis1Params.max,
          interval: yAxis1Params.interval,
          axisLabel: {
            formatter: "{value}",
            color: "#fff",
            align: "right", // 将标签右对齐
          },
          ...getDynamicYAxis(data1.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: false },
          nameTextStyle: {
            padding: [0, 0, 0, 30], // 在右侧添加一些内边距
            color: "#fff",
          },
          splitLine: {
            show: false, // 关闭左侧 y 轴的横线
          },
        },
        {
          type: "value",
          name: "单位:mm",
          min: 0,
          max: yAxis2Params.max,
          interval: yAxis2Params.interval,
          axisLabel: {
            formatter: "{value}",
            color: "#fff",
            align: "left", // 将标签右对齐
          },
          ...getDynamicYAxis(data2.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: true },
          nameTextStyle: {
            padding: [0, 10, 0, 0], // 在右侧添加一些内边距
            color: "#fff",
          },
          splitLine: {
            show: true, // 保留右侧 y 轴的横线
          },
        },
      ],
@@ -1955,124 +444,102 @@
        {
          name: "降雨数据",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + " mm/min";
            },
          },
          data: data1.value,
          itemStyle: {
            color: "#3268fe",
          },
          label: {
            show: false,
            color: "#fff",
          },
          itemStyle: { color: "#3268fe" },
        },
        {
          name: "累计雨量",
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + " mm";
            },
          },
          data: data2.value,
          lineStyle: {
            color: "#ffb637", 
          },
          label: {
            show: false, // 确保标签不显示
            color: "#fff",
          },
          lineStyle: { color: "#ffb637" },
        },
      ],
    };

    myChart1.setOption(option);
    myChart1.setOption(option, true);
  };

  // 定义按顺序更新数据的方法
  // 数据更新 - 每次添加一条数据
  const updateData = () => {
    if (dataIndex.value < rainfallData.value.length) {
      // 获取当前索引的数据项
      const newItem = rainfallData.value[dataIndex.value];
      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);
      xAxisData.value.push(nextTime);

      // 更新当前索引
      const item = rainfallData.value[dataIndex.value];
      data1.value.push(item.intensity);
      data2.value.push(item.total);
      xAxisData.value.push(item.time); // ✅ 改用 item.time
      dataIndex.value++;

      // 更新图表
      updateChart(
        {
          max: myChart1.getOption().yAxis[0].max,
          interval: myChart1.getOption().yAxis[0].interval,
        }, // 左侧 y 轴保持不变
        {
          max: myChart1.getOption().yAxis[1].max,
          interval: myChart1.getOption().yAxis[1].interval,
        } // 右侧 y 轴保持不变
      );
      updateChart();
    } else {
      console.log("All data has been displayed.");
      stopUpdating(); // 停止定时更新
      stopUpdating();
    }
  };

  // 启动定时更新
  const startUpdating = (interval = 1000) => {
    if (!updateInterval) {
      updateInterval = setInterval(updateData, interval); // 每隔 interval 毫秒更新一次数据
      console.log("Started updating...");
  let fixedFrameNum = null;
  let startTime = null; // 将startTime移到外层
  let elapsedBeforePause = 0; // 记录暂停前已经过去的时间

  const startUpdating = () => {
    if (updateInterval || dataIndex.value >= rainfallData.value.length) {
      // console.log("Animation already running or completed");
      return;
    }

    // 如果是首次启动或重新开始
    if (fixedFrameNum === null) {
      fixedFrameNum = simStore.frameNum;
      elapsedBeforePause = 0;
      startTime = Date.now();
    } else {
      // 如果是暂停后继续，调整startTime以反映已经过去的时间
      startTime = Date.now() - elapsedBeforePause;
    }

    const totalDuration = fixedFrameNum * 1000;
    const totalPoints = rainfallData.value.length;

    const animate = (index) => {
      if (index >= totalPoints) {
        console.log("Animation completed");
        stopUpdating();
        return;
      }

      const now = Date.now();
      const expectedTime = (index / (totalPoints - 1)) * totalDuration;
      const delay = Math.max(0, startTime + expectedTime - now);

      updateInterval = setTimeout(() => {
        dataIndex.value = index;
        updateData();
        animate(index + 1);
      }, delay);
    };

    animate(dataIndex.value);
  };

  // 停止定时更新
  // 暂停函数需要记录已经过去的时间
  const stopUpdating = () => {
    if (updateInterval) {
      clearInterval(updateInterval);
      clearTimeout(updateInterval);
      updateInterval = null;
      console.log("Stopped updating...");
      // 记录暂停时已经过去的时间
      elapsedBeforePause = Date.now() - startTime;
    }
  };

  // 重置加载
  const resetLoading = () => {
    stopUpdating(); // 停止定时器
    dataIndex.value = 0; // 重置数据索引
    data1.value = []; // 清空降雨数据数据
    data2.value = []; // 清空累计雨量数据
    xAxisData.value = ["00:00"]; // 重置时间轴

    // 重新加载第一个数据点
    if (rainfallData.value.length > 0) {
      data1.value.push(rainfallData.value[0].value); // 降雨数据
      data2.value.push(rainfallData.value[0].total); // 累计雨量
    }

    // 重新绘制图表
    updateChart(
      {
        max: myChart1.getOption().yAxis[0].max,
        interval: myChart1.getOption().yAxis[0].interval,
      }, // 左侧 y 轴保持不变
      {
        max: myChart1.getOption().yAxis[1].max,
        interval: myChart1.getOption().yAxis[1].interval,
      } // 右侧 y 轴保持不变
    );

    console.log("Reset loading...");
    stopUpdating();
    fixedFrameNum = null;
    startTime = null;
    elapsedBeforePause = 0;
    dataIndex.value = 0;
    data1.value = [0];
    data2.value = [0];
    xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
    updateChart();
  };

  // 初始化加载 JSON 数据
  // 初始化
  loadJsonData();

  return {
@@ -2083,288 +550,327 @@
  };
};

let stopNowTimeWatch = null; // 存储 watch 的停止函数
const setEcharts2 = () => {
  const chartDom = document.getElementById("echarts2");
  myChart2 = echarts.init(chartDom);
  const myChart2 = echarts.init(chartDom);

  let jsonData = ref([]); // 存储从 JSON 文件中加载的数据
  let data1 = ref([]); // 实时流量数据
  let data2 = ref([]); // 累计流量数据
  let xAxisData = ref([]); // 动态时间轴
  let updateInterval = null; // 定时器变量
  let dataIndex = ref(0); // 当前数据索引，用于按顺序更新
  // 图表数据
  let flowData = ref([]); // 原始数据
  let data1 = ref([]); // 实时流量
  let data2 = ref([]); // 流速
  let data3 = ref([]); // 深度（新增）
  let xAxisData = ref(["00:00"]);
  let updateInterval = ref(null);
  let dataIndex = ref(0);
  let lastProcessedTime = ref(0); // 记录上次处理的时间戳

  // 加载 JSON 数据
  const loadJsonData = async () => {
    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);
  // 将各种时间格式转换为时间戳
  const parseTimeToTimestamp = (time) => {
    if (!time) return 0;

        // 计算 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"]; // 初始时间点

        // 初始化图表（仅加载第一个数据点）
        if (jsonData.value.length > 0) {
          data1.value.push(jsonData.value[0].value); // 实时流量
          data2.value.push(jsonData.value[0].total); // 累计流量
        }

        // 根据最大值设置 y 轴参数并初始化图表
        const yAxis1Params = calculateYAxisParams(maxValue);
        const yAxis2Params = calculateYAxisParams(maxTotal);
        updateChart(yAxis1Params, yAxis2Params);
      } else {
        console.error("Invalid JSON format: 'data' is missing or not an array!");
      }
    } catch (error) {
      console.error("Error fetching data:", error);
    // 如果是时间戳（毫秒）
    if (typeof time === "number" && time > 1000000000000) {
      return time;
    }

    // 如果是Date对象
    if (time instanceof Date) {
      return time.getTime();
    }

    // 如果是时间字符串（如"2023-01-01 12:00:00"）
    if (typeof time === "string") {
      return new Date(time).getTime() || 0;
    }

    return 0;
  };

  // 计算下一个时间点（增加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轴范围（支持深度数据特殊处理）
  const calculateDynamicYAxis = (dataArray, isDepth = false) => {
    const filteredData = dataArray.filter((val) => val != null && val > 0);

  // 计算 y 轴参数（最多有 4 个点）
  const calculateYAxisParams = (max) => {
    const step = Math.ceil(max / 3); // 最多有 4 个点（包括 0），所以分成 3 份
    if (filteredData.length === 0) {
      return {
        min: 0,
        max: isDepth ? 10 : 0.001, // 深度默认范围更大
        interval: isDepth ? 2 : 0.0002,
      };
    }

    const maxValue = Math.max(...filteredData);
    const exponent = Math.floor(Math.log10(maxValue));
    const base = Math.pow(10, exponent);
    let step, max;

    if (isDepth) {
      // 深度数据的特殊处理
      step = Math.ceil(maxValue / 5); // 固定分为5段
      max = step * 5;
    } else if (maxValue < 0.01) {
      // 对于小数值，使用更精细的步长
      step = base / 5;
      max = step * 5;
    } else {
      // 常规处理
      step = base / 2;
      max = step * Math.ceil(maxValue / step) + step;
    }

    const decimalPlaces = Math.max(0, -exponent + 1);

    return {
      max: step * 3, // 确保最大值是步长的整数倍
      interval: step,
      min: 0,
      max: parseFloat(max.toFixed(decimalPlaces)),
      interval: parseFloat(step.toFixed(decimalPlaces)),
    };
  };

  // 更新图表配置
  const updateChart = (yAxis1Params, yAxis2Params) => {
  // 根据指定时间加载数据
  const loadDataByTime = (targetTime) => {
    if (!flowData.value.length) return;

    const currentTimestamp = parseTimeToTimestamp(targetTime);

    // 找到当前时间及之前的所有数据
    const pastData = flowData.value.filter(
      (item) => parseTimeToTimestamp(item.time) <= currentTimestamp
    );

    if (pastData.length) {
      // 一次性加载历史数据
      data1.value = pastData.map((item) => item.flowRate);
      data2.value = pastData.map((item) => item.velocity);
      data3.value = pastData.map((item) => item.depth);
      xAxisData.value = pastData.map((item) => formatTime(item.time));

      // 设置从下一个数据点开始继续更新
      dataIndex.value = pastData.length;

      // 更新最后处理的时间
      lastProcessedTime.value = currentTimestamp;
    } else {
      // 没有历史数据，初始化空数据
      resetLoading();
    }

    updateChart();
  };

  // 处理时间跳变
  const handleTimeJump = (newTime) => {
    const newTimestamp = parseTimeToTimestamp(newTime);
    const timeDiff = Math.abs(newTimestamp - lastProcessedTime.value);

    // 如果时间变化超过5秒，认为是大幅跳变
    if (timeDiff > 5000) {
      stopUpdating();
      loadDataByTime(newTime);

      // 如果不是暂停状态，继续更新
      if (!isPaused.value) {
        startUpdating();
      }
    }
  };

  // 时间格式化函数（时间戳转"HH:mm:ss"）
  const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");
    const seconds = date.getSeconds().toString().padStart(2, "0");
    return `${hours}:${minutes}:${seconds}`;
  };

  const loadJsonData = () => {
    const crossSectionData = simStore.crossSection;
    if (crossSectionData?.length) {
      flowData.value = crossSectionData;
      loadDataByTime(nowTime.value); // 加载当前时间之前的数据
    } else {
      resetLoading();
    }
  };

  // 图表配置（保持不变）
  const updateChart = () => {
    const option = {
      animation: false, // 禁用动画
      animation: false,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#fff",
          },
        },
        axisPointer: { type: "cross" },
      },
      grid: {
        left: "1%",
        right: "1%",
        bottom: "1%",
        containLabel: true,
        containLabel: false,
      },
      legend: {
        data: ["实时流量", "累计流量"],
        textStyle: {
          color: "#fff",
        data: ["实时流量", "流速", "深度"],
        textStyle: { color: "#fff" },
        right: "10px",
        selected: {
          实时流量: true,
          流速: true,
          深度: true,
        },
        right: "10px", // 将图例靠右贴边
      },
      xAxis: [
        {
          type: "category",
          data: xAxisData.value, // 使用动态时间轴
          axisPointer: {
            type: "shadow",
          },
          data: xAxisData.value,
          axisLabel: {
            color: "#fff",
            rotate: 0, // 将旋转角度设置为0，取消倾斜
            rotate: 0,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "单位:m³/min",
          name: "流量(m³/s)",
          min: 0,
          max: yAxis1Params.max,
          interval: yAxis1Params.interval,
          axisLabel: {
            formatter: "{value}",
            color: "#fff",
            align: "right", // 将标签右对齐
          },
          nameTextStyle: {
            padding: [0, 0, 0, 20], // 在右侧添加一些内边距
            color: "#fff",
          },
          splitLine: {
            show: false, // 关闭左侧 y 轴的横线
          },
          ...calculateDynamicYAxis(data1.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: false },
          nameTextStyle: { color: "#fff" },
        },
        {
          type: "value",
          name: "单位:m³",
          name: "流速(m/s)",
          min: 0,
          max: yAxis2Params.max,
          interval: yAxis2Params.interval,
          axisLabel: {
            formatter: "{value}",
            color: "#fff",
            align: "left", // 将标签右对齐
          },
          nameTextStyle: {
            padding: [0, 10, 0, 0], // 在右侧添加一些内边距
            color: "#fff",
          },
          splitLine: {
            show: true, // 保留右侧 y 轴的横线
          },
          ...calculateDynamicYAxis(data2.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: true },
          nameTextStyle: { color: "#fff" },
        },
        {
          type: "value",
          name: "深度(m)",
          min: 0,
          ...calculateDynamicYAxis(data3.value, true),
          axisLabel: { color: "#fff" },
          splitLine: { show: false },
          nameTextStyle: { color: "#fff" },
          position: "right",
          offset: 80,
        },
      ],
      series: [
        {
          name: "实时流量",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + " m³/min";
            },
          },
          data: data1.value,
          itemStyle: {
            color: "blue", // 设置柱状图颜色为蓝色
          },
          label: {
            show: false,
            color: "#fff",
          },
          itemStyle: { color: "#3268fe" },
        },
        {
          name: "累计流量",
          name: "流速",
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + " m³";
            },
          },
          data: data2.value,
          lineStyle: {
            color: "#ffb637", // 设置折线图线条颜色为黄色
          },
          label: {
            show: false, // 确保标签不显示
            color: "#fff",
          },
          lineStyle: { color: "#ffb637" },
        },
        {
          name: "深度",
          type: "line",
          yAxisIndex: 2,
          data: data3.value,
          lineStyle: { color: "#00ff99" },
          symbol: "none",
          smooth: true,
        },
      ],
    };

    myChart2.setOption(option);
    myChart2.setOption(option, true);
  };

  // 定义按顺序更新数据的方法
  // 数据更新（保持不变）
  const updateData = () => {
    if (dataIndex.value < jsonData.value.length) {
      // 获取当前索引的数据项
      const newItem = jsonData.value[dataIndex.value];
      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);
      xAxisData.value.push(nextTime);

      // 更新当前索引
      dataIndex.value+= 2;

      // 更新图表
      updateChart(
        {
          max: myChart2.getOption().yAxis[0].max,
          interval: myChart2.getOption().yAxis[0].interval,
        }, // 左侧 y 轴保持不变
        {
          max: myChart2.getOption().yAxis[1].max,
          interval: myChart2.getOption().yAxis[1].interval,
        } // 右侧 y 轴保持不变
      );
    if (dataIndex.value < flowData.value.length) {
      const item = flowData.value[dataIndex.value];
      data1.value.push(item.flowRate);
      data2.value.push(item.velocity);
      data3.value.push(item.depth);
      xAxisData.value.push(formatTime(item.time));
      dataIndex.value++;
      lastProcessedTime.value = parseTimeToTimestamp(item.time);
      updateChart();
    } else {
      console.log("All data has been displayed.");
      stopUpdating(); // 停止定时更新
      stopUpdating();
    }
  };

  // 启动定时更新
  // 控制方法（保持不变）
  const startUpdating = (interval = 1000) => {
    if (!updateInterval) {
      updateInterval = setInterval(updateData, interval); // 每隔 interval 毫秒更新一次数据
      console.log("Started updating...");
    if (!updateInterval.value) {
      updateInterval.value = setInterval(updateData, interval);
    }
  };

  // 停止定时更新
  const stopUpdating = () => {
    if (updateInterval) {
      clearInterval(updateInterval);
      updateInterval = null;
      console.log("Stopped updating...");
    if (updateInterval.value) {
      clearInterval(updateInterval.value);
      updateInterval.value = null;
    }
  };

  // 重置加载
  const resetLoading = () => {
    stopUpdating(); // 停止定时器
    dataIndex.value = 0; // 重置数据索引
    data1.value = []; // 清空实时流量数据
    data2.value = []; // 清空累计流量数据
    xAxisData.value = ["00:00"]; // 重置时间轴

    // 重新加载第一个数据点
    if (jsonData.value.length > 0) {
      data1.value.push(jsonData.value[0].value); // 实时流量
      data2.value.push(jsonData.value[0].total); // 累计流量
    }

    // 重新绘制图表
    updateChart(
      {
        max: myChart2.getOption().yAxis[0].max,
        interval: myChart2.getOption().yAxis[0].interval,
      }, // 左侧 y 轴保持不变
      {
        max: myChart2.getOption().yAxis[1].max,
        interval: myChart2.getOption().yAxis[1].interval,
      } // 右侧 y 轴保持不变
    );

    console.log("Reset loading...");
    stopUpdating();
    dataIndex.value = 0;
    data1.value = [0];
    data2.value = [0];
    data3.value = [0];
    xAxisData.value = ["00:00"];
    lastProcessedTime.value = 0;
    updateChart();
  };

  // 初始化加载 JSON 数据
  // 监听时间轴跳转
  const startNowTimeWatch = () => {
    if (stopNowTimeWatch) stopNowTimeWatch(); // 先停止旧的监听
    stopNowTimeWatch = watch(nowTime, (newTime) => {
      if (!isPaused.value) {
        handleTimeJump(newTime);
      }
    });
  };

  startNowTimeWatch();
  // 初始化
  loadJsonData();

  // 监听全局暂停状态
  watch(isPaused, (newVal) => {
    if (newVal) {
      stopUpdating();
    } else {
      startUpdating();
    }
  });

  return {
    myChart2,
    startUpdating,
    stopUpdating,
    loadJsonData,
    resetLoading,
    startNowTimeWatch,
  };
};

// 监听 simStore.crossSection 的变化
watch(
  () => simStore.crossSection,
  (newVal) => {
    if (newVal && !isPaused.value) {
      chart2Data.value.stopUpdating();
      chart2Data.value.startUpdating();
    }
    chart2Data.value.loadJsonData();
  },
  { deep: true }
);

const handleResize = () => {
  const chartBox1 = document.getElementById("echarts1");
@@ -2374,7 +880,10 @@
};

onMounted(() => {
  getRainfallData();
  // 时间轴时间的变化
  EventBus.on("time-update", (time) => {
    nowTime.value = time;
  });
  chart1Data.value = setEcharts1();
  chart2Data.value = setEcharts2();
  myChart1 = chart1Data.value.myChart1;
@@ -2383,6 +892,7 @@
});

onBeforeUnmount(() => {
  nowTime.value = null;
  if (intervalId1) clearInterval(intervalId1);
  if (intervalId2) clearInterval(intervalId2);
  if (dataIntervalId) clearInterval(dataIntervalId);
@@ -2390,6 +900,13 @@
  if (myChart2) myChart2.dispose();
  window.removeEventListener("resize", handleResize);
});
onUnmounted(() => {
  EventBus.off("reset-table"); // 移除事件监听
  EventBus.off("clear-echart");
  EventBus.off("clear-dM");
  EventBus.off("redraw-dM");
  EventBus.off("time-update"); // 清理事件监听
});
</script>

<style lang="less" scoped>