断面echart清除

guonan

2025-07-10 e92dd671ed1f79243bee0083aecbc5627b5cc7f6

 src/components/monifangzhen/echartInfo.vue

@@ -107,7 +107,7 @@
import dayjs from "dayjs";
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
const { rainFalls } = simStore;
const { rainFalls, intensityUnit } = simStore;

let dataIntervalId = null; // 表格定时器 ID
const jsonData = ref([]); // JSON 数据
@@ -153,6 +153,14 @@
EventBus.on("clear-echart", () => {
  chart1Data.value.resetLoading();
  chart2Data.value.resetLoading();
});

// 清除断面
EventBus.on("clear-dM", () => {
  chart2Data.value.stopUpdating();
  chart2Data.value.resetLoading();
  clearInterval(intervalId2);
  intervalId2 = null;
});

// 清除威胁对象中的数据
@@ -220,17 +228,14 @@
  },
  { immediate: true } // 立即执行监听器
);

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

const rainChangeShow = ref(false);
const tableContainer = ref(null);

@@ -298,8 +303,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");
};

@@ -312,61 +315,13 @@

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

// 暂时先不用，主要功能为一分钟插值六十个数据
// function processData(originalData) {
//   const processedData = [];
//   let currentTotal = 0; // 动态累加的 total

//   for (let i = 0; i < originalData.length; i++) {
//     const current = originalData[i];
//     const targetIntensity = current.intensity;
//     let remainingIntensity = targetIntensity; // 剩余需要分配的 intensity

//     // 生成60个点（动态随机填充，允许出现低值和高值）
//     for (let j = 0; j < 60; j++) {
//       // 1. 动态生成 intensity（随机，但最后一点补足剩余值）
//       let intensity;
//       if (j === 59) {
//         intensity = remainingIntensity; // 最后一点强制用完剩余值
//       } else {
//         // 随机生成一个比例（0.1~0.5之间的低概率 + 偶尔高值）
//         const isLowValue = Math.random() < 0.7; // 70%概率生成低值
//         const maxAllowed = remainingIntensity / (60 - j); // 确保不超剩余值
//         intensity = isLowValue
//           ? Math.random() * maxAllowed * 0.3 // 低值范围
//           : Math.random() * maxAllowed * 1.5; // 偶尔高值
//       }
//       remainingIntensity -= intensity;

//       // 2. 实时累加 total
//       currentTotal += intensity;

//       processedData.push({
//         time: current.time,
//         intensity: intensity,
//         total: currentTotal,
//       });
//     }

//     // 验证当前段的总 intensity 是否匹配原始数据
//     console.log(
//       `Segment ${i}: Generated intensity sum = ${(
//         targetIntensity - remainingIntensity
//       ).toFixed(2)}, Original = ${targetIntensity}`
//     );
//   }

//   return processedData;
// }

// 设置降雨图表
const setEcharts1 = () => {
  const chartDom = document.getElementById("echarts1");
  const myChart1 = echarts.init(chartDom);
@@ -392,17 +347,28 @@
  // 加载JSON数据
  const loadJsonData = async () => {
    try {
      // 这个result是用的上述的插值（暂时先不用）
      // const result = processData(simStore.rainFalls);
      const result = simStore.rainFalls;
      if (result?.length) {
        rainfallData.value = result;

        // 判断 intensityUnit 是否为 mm/15min
        if (rainfallData.value.length > 0) {
          // data1.value = [rainfallData.value[0].intensity];
          // data2.value = [rainfallData.value[0].total];
          // 默认初始从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();
        }
      }
@@ -416,10 +382,7 @@
    const option = {
      animation: false,
      tooltip: { trigger: "axis" },
      // // 调整grid布局解决Y轴标签显示问题
      grid: {
        // left: "1%", // 左侧留更多空间
        // right: "1%", // 右侧留更多空间
        bottom: "1%",
        containLabel: false,
      },
@@ -427,7 +390,6 @@
        data: ["降雨数据", "累计雨量"],
        textStyle: { color: "#fff" },
        right: "10px",
        // 添加legend点击事件处理
        selected: {
          降雨数据: true,
          累计雨量: true,
@@ -448,7 +410,6 @@
          ...getDynamicYAxis(data1.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: false },
          // 确保名称显示完整
          nameTextStyle: {
            color: "#fff",
          },
@@ -468,13 +429,13 @@
      series: [
        {
          name: "降雨数据",
          type: "bar", // 明确指定类型
          type: "bar",
          data: data1.value,
          itemStyle: { color: "#3268fe" },
        },
        {
          name: "累计雨量",
          type: "line", // 明确指定类型
          type: "line",
          yAxisIndex: 1,
          data: data2.value,
          lineStyle: { color: "#ffb637" },
@@ -484,13 +445,13 @@
    myChart1.setOption(option, true);
  };

  // 数据更新
  // 数据更新 - 每次添加一条数据
  const updateData = () => {
    if (dataIndex.value < rainfallData.value.length) {
      const item = rainfallData.value[dataIndex.value];
      data1.value.push(item.intensity);
      data2.value.push(item.total);
      xAxisData.value.push(syncTimeWithTimeline());
      xAxisData.value.push(item.time); // ✅ 改用 item.time
      dataIndex.value++;
      updateChart();
    } else {
@@ -498,28 +459,69 @@
    }
  };

  // 控制方法
  const startUpdating = (interval = 60000) => {
    if (!updateInterval) {
      updateInterval = setInterval(updateData, interval);
  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 = () => {
    clearInterval(updateInterval);
    updateInterval = null;
    if (updateInterval) {
      clearTimeout(updateInterval);
      updateInterval = null;
      // 记录暂停时已经过去的时间
      elapsedBeforePause = Date.now() - startTime;
    }
  };

  const resetLoading = () => {
    stopUpdating();
    fixedFrameNum = null;
    startTime = null;
    elapsedBeforePause = 0;
    dataIndex.value = 0;
    data1.value = [];
    data2.value = [];
    xAxisData.value = ["00:00"];
    if (rainfallData.value.length) {
      data1.value = [rainfallData.value[0].intensity];
      data2.value = [rainfallData.value[0].total];
    }
    data1.value = [0];
    data2.value = [0];
    xAxisData.value = [rainfallData.value[0]?.time || "00:00"];
    updateChart();
  };

@@ -538,41 +540,126 @@
  const chartDom = document.getElementById("echarts2");
  const myChart2 = echarts.init(chartDom);

  // 图表数据（与echarts1保持相同结构）
  // 图表数据
  let flowData = ref([]); // 原始数据
  let data1 = ref([]); // 实时流量
  let data2 = ref([]); // 累计流量
  let data2 = ref([]); // 流速
  let data3 = ref([]); // 深度（新增）
  let xAxisData = ref(["00:00"]);
  let updateInterval = ref(null);
  let dataIndex = ref(0);

  // 动态计算Y轴范围
  const calculateDynamicYAxis = (dataArray) => {
    const currentMax = Math.max(...dataArray, 1);
    const step = Math.ceil(currentMax / 3);
  // 将各种时间格式转换为时间戳
  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, isDepth = false) => {
    const filteredData = dataArray.filter((val) => val != null && val > 0);

    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 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);
      data3.value = pastData.map((item) => item.depth); // 加载深度数据
      xAxisData.value = pastData.map((item) => formatTime(item.time));

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

    updateChart();
  };

  // 时间格式化函数（时间戳转"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;
      loadDataByCurrentTime(); // 加载当前时间之前的数据
    } else {
      resetLoading();
    }
  };

  // 图表配置（与echarts1保持相同结构和样式）
  // 图表配置
  const updateChart = () => {
    const option = {
      animation: false,
@@ -581,19 +668,17 @@
        axisPointer: { type: "cross" },
      },
      grid: {
        // 注释是因为 y轴上的单位被覆盖掉了
        // left: "1%",
        // right: "1%",
        bottom: "1%",
        containLabel: false,
      },
      legend: {
        data: ["实时流量", "累计流量"],
        data: ["实时流量", "流速", "深度"],
        textStyle: { color: "#fff" },
        right: "10px",
        selected: {
          实时流量: true,
          累计流量: true,
          流速: true,
          深度: true,
        },
      },
      xAxis: [
@@ -609,25 +694,32 @@
      yAxis: [
        {
          type: "value",
          name: "单位:m³/min",
          name: "流量(m³/min)",
          min: 0,
          ...calculateDynamicYAxis(data1.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: false },
          nameTextStyle: {
            color: "#fff",
          },
          nameTextStyle: { color: "#fff" },
        },
        {
          type: "value",
          name: "单位:m³",
          name: "流速(m/s)",
          min: 0,
          ...calculateDynamicYAxis(data2.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: true },
          nameTextStyle: {
            color: "#fff",
          },
          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: [
@@ -635,31 +727,37 @@
          name: "实时流量",
          type: "bar",
          data: data1.value,
          itemStyle: {
            color: "#3268fe",
          },
          itemStyle: { color: "#3268fe" },
        },
        {
          name: "累计流量",
          name: "流速",
          type: "line",
          yAxisIndex: 1,
          data: data2.value,
          lineStyle: {
            color: "#ffb637",
          },
          lineStyle: { color: "#ffb637" },
        },
        {
          name: "深度",
          type: "line",
          yAxisIndex: 2,
          data: data3.value,
          lineStyle: { color: "#00ff99" },
          symbol: "none",
          smooth: true,
        },
      ],
    };
    myChart2.setOption(option, true);
  };

  // 数据更新（与echarts1相同逻辑）
  // 数据更新
  const updateData = () => {
    if (dataIndex.value < flowData.value.length) {
      const item = flowData.value[dataIndex.value];
      data1.value.push(item.value);
      data2.value.push(item.total);
      xAxisData.value.push(syncTimeWithTimeline());
      data1.value.push(item.flowRate);
      data2.value.push(item.velocity);
      data3.value.push(item.depth); // 更新深度数据
      xAxisData.value.push(formatTime(item.time));
      dataIndex.value++;
      updateChart();
    } else {
@@ -667,30 +765,27 @@
    }
  };

  // 控制方法（与echarts1完全一致）
  // 控制方法
  const startUpdating = (interval = 1000) => {
    if (!updateInterval) {
      updateInterval = setInterval(updateData, interval);
    if (!updateInterval.value) {
      updateInterval.value = setInterval(updateData, interval);
    }
  };

  const stopUpdating = () => {
    if (updateInterval) {
      clearInterval(updateInterval);
      updateInterval = null;
    if (updateInterval.value) {
      clearInterval(updateInterval.value);
      updateInterval.value = null;
    }
  };

  const resetLoading = () => {
    stopUpdating();
    dataIndex.value = 0;
    data1.value = [];
    data2.value = [];
    data1.value = [0];
    data2.value = [0];
    data3.value = [0]; // 重置深度数据
    xAxisData.value = ["00:00"];
    if (flowData.value.length > 0) {
      data1.value = [flowData.value[0].value];
      data2.value = [flowData.value[0].total];
    }
    updateChart();
  };

@@ -701,9 +796,24 @@
    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");
@@ -736,6 +846,7 @@
onUnmounted(() => {
  EventBus.off("reset-table"); // 移除事件监听
  EventBus.off("clear-echart");
  EventBus.off("clear-dM");
  EventBus.off("time-update"); // 清理事件监听
});
</script>