断面深度

guonan

2025-07-10 746d939d885ef2239455b2278810ac4ad6d94b40

 src/components/monifangzhen/echartInfo.vue

@@ -532,10 +532,11 @@
  const chartDom = document.getElementById("echarts2");
  const myChart2 = echarts.init(chartDom);

  // 图表数据（与echarts1保持相同结构）
  // 图表数据
  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);
@@ -562,27 +563,28 @@
    return 0;
  };

  // 动态计算Y轴范围
  const calculateDynamicYAxis = (dataArray) => {
  // 动态计算Y轴范围（支持深度数据特殊处理）
  const calculateDynamicYAxis = (dataArray, isDepth = false) => {
    const filteredData = dataArray.filter((val) => val != null && val > 0);

    if (filteredData.length === 0) {
      // 没有有效数据时，默认显示一个小值范围
      return {
        min: 0,
        max: 0.001,
        interval: 0.0002,
        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 (maxValue < 0.01) {
    if (isDepth) {
      // 深度数据的特殊处理
      step = Math.ceil(maxValue / 5); // 固定分为5段
      max = step * 5;
    } else if (maxValue < 0.01) {
      // 对于小数值，使用更精细的步长
      step = base / 5;
      max = step * 5;
@@ -592,7 +594,6 @@
      max = step * Math.ceil(maxValue / step) + step;
    }

    // 自动确定小数位数
    const decimalPlaces = Math.max(0, -exponent + 1);

    return {
@@ -602,7 +603,7 @@
    };
  };

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

@@ -618,6 +619,7 @@
      // 一次性加载历史数据
      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));

      // 设置从下一个数据点开始继续更新
@@ -630,13 +632,13 @@
    updateChart();
  };

  // 时间格式化函数（时间戳转"HH:mm"）
  // 时间格式化函数（时间戳转"HH:mm:ss"）
  const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    return `${date.getHours().toString().padStart(2, "0")}:${date
      .getMinutes()
      .toString()
      .padStart(2, "0")}`;
    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 = () => {
@@ -649,7 +651,7 @@
    }
  };

  // 图表配置（与echarts1保持相同结构和样式）
  // 图表配置
  const updateChart = () => {
    const option = {
      animation: false,
@@ -658,19 +660,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,
        },
      },
      xAxis: [
@@ -686,25 +686,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: [
@@ -712,31 +719,37 @@
          name: "实时流量",
          type: "bar",
          data: data1.value,
          itemStyle: {
            color: "#3268fe",
          },
          itemStyle: { color: "#3268fe" },
        },
        {
          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.flowRate);
      data2.value.push(item.velocity);
      xAxisData.value.push(syncTimeWithTimeline());
      data3.value.push(item.depth); // 更新深度数据
      xAxisData.value.push(formatTime(item.time));
      dataIndex.value++;
      updateChart();
    } else {
@@ -744,30 +757,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();
  };