修改比较多

guonan

2025-05-23 fef12378282c0a8cf44411b079ac20ad4f397817

 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 数据
@@ -226,11 +226,7 @@
  // 触发事件，将当前行的 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 +294,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 +306,14 @@

// 时间轴时间截取处理
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" 部分
    console.log(nowTime.value, "nowTime.valuenowTime.value");
    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 +339,27 @@
  // 加载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,
            }));
          }

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

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

          updateChart();
        }
      }
@@ -416,10 +373,7 @@
    const option = {
      animation: false,
      tooltip: { trigger: "axis" },
      // // 调整grid布局解决Y轴标签显示问题
      grid: {
        // left: "1%", // 左侧留更多空间
        // right: "1%", // 右侧留更多空间
        bottom: "1%",
        containLabel: false,
      },
@@ -427,7 +381,6 @@
        data: ["降雨数据", "累计雨量"],
        textStyle: { color: "#fff" },
        right: "10px",
        // 添加legend点击事件处理
        selected: {
          降雨数据: true,
          累计雨量: true,
@@ -448,7 +401,6 @@
          ...getDynamicYAxis(data1.value),
          axisLabel: { color: "#fff" },
          splitLine: { show: false },
          // 确保名称显示完整
          nameTextStyle: {
            color: "#fff",
          },
@@ -468,13 +420,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 +436,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 +450,45 @@
    }
  };

  // 控制方法
  const startUpdating = (interval = 60000) => {
    if (!updateInterval) {
      updateInterval = setInterval(updateData, interval);
    }
  // 控制方法：精确控制动画时间，最后一帧在第 90 秒
  const startUpdating = () => {
    if (updateInterval || dataIndex.value >= rainfallData.value.length) return;

    const totalDuration = 90000; // 90秒
    const totalPoints = rainfallData.value.length;
    const startTime = Date.now();

    const animate = (index = 0) => {
      if (index >= totalPoints) {
        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 + 1; // 因为是从 0 开始 push 的
        updateData();
        animate(index + 1);
      }, delay);
    };

    animate(dataIndex.value);
  };

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

  const resetLoading = () => {
    stopUpdating();
    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();
  };