123

guonan

2025-07-10 e7557e07fbdaa9247024b301e1a2ba41390741ad

123

 src/components/menu/CrossSectionalAnalysis.vue

@@ -298,6 +298,7 @@
    const endPoint = `${point2.longitude},${point2.latitude}`;
    const result = await getCrossSectionInfo(startPoint, endPoint);
    simStore.crossSection = result
    EventBus.emit("redraw-dM")
    console.log(result,'这里是郭楠需要的断面数据');
    
    isUploaded.value = true;

 src/components/monifangzhen/echartInfo.vue

@@ -159,8 +159,22 @@
EventBus.on("clear-dM", () => {
  chart2Data.value.stopUpdating();
  chart2Data.value.resetLoading();
  clearInterval(intervalId2);
  intervalId2 = null;
  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();
  }
});

// 清除威胁对象中的数据
@@ -536,6 +550,7 @@
  };
};

let stopNowTimeWatch = null; // 存储 watch 的停止函数
const setEcharts2 = () => {
  const chartDom = document.getElementById("echarts2");
  const myChart2 = echarts.init(chartDom);
@@ -548,6 +563,7 @@
  let xAxisData = ref(["00:00"]);
  let updateInterval = ref(null);
  let dataIndex = ref(0);
  let lastProcessedTime = ref(0); // 记录上次处理的时间戳

  // 将各种时间格式转换为时间戳
  const parseTimeToTimestamp = (time) => {
@@ -611,33 +627,52 @@
    };
  };

  // 根据当前时间加载数据
  const loadDataByCurrentTime = () => {
  // 根据指定时间加载数据
  const loadDataByTime = (targetTime) => {
    if (!flowData.value.length) return;

    // 将nowTime.value转换为时间戳
    const currentTimestamp = parseTimeToTimestamp(nowTime.value);
    const currentTimestamp = parseTimeToTimestamp(targetTime);

    // 找到当前时间及之前的所有数据
    const pastData = flowData.value.filter(
      (item) => item.time <= currentTimestamp
      (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); // 加载深度数据
      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"）
@@ -653,13 +688,13 @@
    const crossSectionData = simStore.crossSection;
    if (crossSectionData?.length) {
      flowData.value = crossSectionData;
      loadDataByCurrentTime(); // 加载当前时间之前的数据
      loadDataByTime(nowTime.value); // 加载当前时间之前的数据
    } else {
      resetLoading();
    }
  };

  // 图表配置
  // 图表配置（保持不变）
  const updateChart = () => {
    const option = {
      animation: false,
@@ -694,7 +729,7 @@
      yAxis: [
        {
          type: "value",
          name: "流量(m³/min)",
          name: "流量(m³/s)",
          min: 0,
          ...calculateDynamicYAxis(data1.value),
          axisLabel: { color: "#fff" },
@@ -750,22 +785,23 @@
    myChart2.setOption(option, true);
  };

  // 数据更新
  // 数据更新（保持不变）
  const updateData = () => {
    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); // 更新深度数据
      data3.value.push(item.depth);
      xAxisData.value.push(formatTime(item.time));
      dataIndex.value++;
      lastProcessedTime.value = parseTimeToTimestamp(item.time);
      updateChart();
    } else {
      stopUpdating();
    }
  };

  // 控制方法
  // 控制方法（保持不变）
  const startUpdating = (interval = 1000) => {
    if (!updateInterval.value) {
      updateInterval.value = setInterval(updateData, interval);
@@ -784,13 +820,34 @@
    dataIndex.value = 0;
    data1.value = [0];
    data2.value = [0];
    data3.value = [0]; // 重置深度数据
    data3.value = [0];
    xAxisData.value = ["00:00"];
    lastProcessedTime.value = 0;
    updateChart();
  };

  // 监听时间轴跳转
  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,
@@ -798,6 +855,7 @@
    stopUpdating,
    loadJsonData,
    resetLoading,
    startNowTimeWatch,
  };
};

@@ -805,7 +863,6 @@
watch(
  () => simStore.crossSection,
  (newVal) => {
    // 确定时间轴是播放的状态
    if (newVal && !isPaused.value) {
      chart2Data.value.stopUpdating();
      chart2Data.value.startUpdating();
@@ -847,6 +904,7 @@
  EventBus.off("reset-table"); // 移除事件监听
  EventBus.off("clear-echart");
  EventBus.off("clear-dM");
  EventBus.off("redraw-dM");
  EventBus.off("time-update"); // 清理事件监听
});
</script>