断面

guonan

2025-07-10 6cc17bd234d981ef06cf8e888a1d4b8a14f51f41

 src/components/monifangzhen/echartInfo.vue

@@ -220,6 +220,7 @@
  },
  { immediate: true } // 立即执行监听器
);

// 点击数据实现面片闪动的触发函数
function handleRowClick(row) {
  console.log("Row clicked:", row);
@@ -473,7 +474,6 @@
    const totalDuration = fixedFrameNum * 1000;
    const totalPoints = rainfallData.value.length;


    const animate = (index) => {
      if (index >= totalPoints) {
        console.log("Animation completed");
@@ -505,11 +505,6 @@
    }
  };

  // const stopUpdating = () => {
  //   clearTimeout(updateInterval);
  //   updateInterval = null;
  // };

  const resetLoading = () => {
    stopUpdating();
    fixedFrameNum = null;
@@ -540,34 +535,117 @@
  // 图表数据（与echarts1保持相同结构）
  let flowData = ref([]); // 原始数据
  let data1 = ref([]); // 实时流量
  let data2 = ref([]); // 累计流量
  let data2 = ref([]); // 流速
  let xAxisData = ref(["00:00"]);
  let updateInterval = ref(null);
  let dataIndex = ref(0);

  // 将各种时间格式转换为时间戳
  const parseTimeToTimestamp = (time) => {
    if (!time) return 0;

    // 如果是时间戳（毫秒）
    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;
  };

  // 动态计算Y轴范围
  const calculateDynamicYAxis = (dataArray) => {
    const currentMax = Math.max(...dataArray, 1);
    const step = Math.ceil(currentMax / 3);
    const filteredData = dataArray.filter((val) => val != null && val > 0);

    if (filteredData.length === 0) {
      // 没有有效数据时，默认显示一个小值范围
      return {
        min: 0,
        max: 0.001,
        interval: 0.0002,
      };
    }

    const maxValue = Math.max(...filteredData);

    // 计算合适的步长和最大值
    const exponent = Math.floor(Math.log10(maxValue));
    const base = Math.pow(10, exponent);
    let step, max;

    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 loadJsonData = async () => {
    try {
      const response = await fetch("/json/于家西沟断面下数据.json");
      const result = await response.json();
      if (result?.data?.length) {
        flowData.value = result.data;
        if (flowData.value.length > 0) {
          data1.value = [flowData.value[0].value];
          data2.value = [flowData.value[0].total];
          updateChart();
        }
      }
    } catch (error) {
      console.error("数据加载失败:", error);

  // 根据当前时间加载数据，如果正在播放中，但是用户划了新的断面，此函数会根据当前时间继续播放最新的同时加载之前所有的
  const loadDataByCurrentTime = () => {
    if (!flowData.value.length) return;

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

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

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

      // 设置从下一个数据点开始继续更新
      dataIndex.value = pastData.length;
    } else {
      // 没有历史数据，初始化空数据
      resetLoading();
    }

    updateChart();
  };

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

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

@@ -587,12 +665,12 @@
        containLabel: false,
      },
      legend: {
        data: ["实时流量", "累计流量"],
        data: ["实时流量", "流速"],
        textStyle: { color: "#fff" },
        right: "10px",
        selected: {
          实时流量: true,
          累计流量: true,
          流速: true,
        },
      },
      xAxis: [
@@ -639,7 +717,7 @@
          },
        },
        {
          name: "累计流量",
          name: "流速",
          type: "line",
          yAxisIndex: 1,
          data: data2.value,
@@ -656,8 +734,8 @@
  const updateData = () => {
    if (dataIndex.value < flowData.value.length) {
      const item = flowData.value[dataIndex.value];
      data1.value.push(item.value);
      data2.value.push(item.total);
      data1.value.push(item.flowRate);
      data2.value.push(item.velocity);
      xAxisData.value.push(syncTimeWithTimeline());
      dataIndex.value++;
      updateChart();
@@ -700,10 +778,25 @@
    myChart2,
    startUpdating,
    stopUpdating,
    loadJsonData,
    resetLoading,
  };
};

// 监听 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");
  const chartBox2 = document.getElementById("echarts2");