实时模拟

guonan

2025-07-03 f37845dd0a787dd42bf6c72e923433f30fcd8cc3

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -73,15 +73,21 @@
  inject,
  reactive,
  onMounted,
  onUnmounted,
} from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { useSimStore } from "@/store/simulation.js";
import { EventBus } from "@/eventBus"; // 引入事件总线
import { getDeviceInfo, getYLJData } from "@/api/hpApi";
import { getDeviceInfoSHG, getYLJData } from "@/api/hpApi";
import { getSimStart, getSimDataById, getSimresult } from "@/api/trApi";
import { ControlSchemeType } from "@/assets/js/lib-pixelstreamingfrontend.esm";

// 获取 Store 实例
const simStore = SimAPIStore();
const simAPIStore = SimAPIStore();

const simStore = useSimStore();

// 表单数据
const formData = reactive({
@@ -116,8 +122,8 @@
// 获取所有雨量计数据（来自接口）
const getRainListAll = () => {
  // 雨量计类型id
  const ids = "1874719366287368194";
  getDeviceInfo(ids, "110116110000").then((res) => {
  const ids = "1917487171642212354";
  getDeviceInfoSHG(ids).then((res) => {
    rainListNoFilter.value = res.data.pageData;
    // 根据当前选择的区域自动过滤
    updateShgListByArea();
@@ -200,12 +206,10 @@
// 保存方案
const saveSim = async () => {
  try {
    getYLJData("1101160300070101").then((res) => {
      console.log(res, "resres");
    });
    // getYLJData("1101160300070101")
    updateSelectedGauges();
    formData.geom = props.selectedArea;
    await simStore.addSimCheme(formData);
    await simAPIStore.addSimCheme(formData);
    resetForm();
    EventBus.emit("close-selectArea");
  } catch (err) {}
@@ -214,24 +218,179 @@
// 注入模拟操作方法
const { startSimulate, endSimulate } = inject("simulateActions");

// 实时模拟定时器
let pollingInterval = null;
// 用于记录上次数据条数
let lastDataLength = 0;

let pollingTimer = null; // 用于保存定时器引用

async function startPlay() {
  const selectedItems = filteredTableData.value.filter((item) => item.selected);
  if (selectedItems.length > 0) {
    console.log(
      "选中的项：",
      selectedItems.map((item) => item.name)
    );
  } else {
    console.log("未选中任何项");
  }
  console.log("当前选中的区域：", props.selectedArea);
  // 开始模拟前需要先保存方案
  updateSelectedGauges();
  formData.geom = props.selectedArea;
  await simStore.addSimCheme(formData);

  const resApi = await simAPIStore.addSimCheme(formData);
  const schemeId = resApi.data?.data?.id;

  if (!schemeId) {
    ElMessage.error("方案保存失败，未获取到有效 ID");
    return;
  }

  EventBus.emit("close-selectArea");
  initeWaterPrimitiveView();
  startSimulate();

  const loadingMessage = ElMessage({
    type: "info",
    message: "正在启动模拟...",
    duration: 0,
    offset: 80,
  });

  try {
    await getSimStart(schemeId);

    // 定义一个函数用于轮询获取数据
    const pollForResult = async () => {
      try {
        const res = await getSimresult(schemeId);
        console.log(res.data, "实时模拟 - 轮询结果");

        if (res.code === 200 && res.data.length > 0) {
          // 成功拿到数据
          loadingMessage.close();
          handleNewData(res.data, schemeId);
          startPolling(schemeId);

          // ✅ 清除定时器
          if (pollingTimer) {
            clearTimeout(pollingTimer);
            pollingTimer = null;
          }
        } else {
          // 数据无效，继续轮询
          pollingTimer = setTimeout(pollForResult, 10 * 1000);
        }
      } catch (error) {
        console.error("请求模拟结果失败", error);
        pollingTimer = setTimeout(pollForResult, 10 * 1000); // 请求出错也继续轮询
      }
    };

    // 首次延迟 2 分钟开始轮询
    pollingTimer = setTimeout(async () => {
      await pollForResult(); // 开始第一次轮询
    }, 3 * 60 * 1000); // 3分钟后第一次请求
  } catch (error) {
    loadingMessage.close();
    ElMessage.error("请求失败：" + (error.message || "未知错误"));
    console.error("调用 getSimStart 出错：", error);

    if (pollingTimer) {
      clearTimeout(pollingTimer);
      pollingTimer = null;
    }
  }
}

// 定时五分钟请求
function startPolling(schemeId) {
  stopPolling(); // 确保不会重复启动

  pollingInterval = setInterval(async () => {
    try {
      const res = await getSimresult(schemeId);

      if (res.data && res.data.length > 0) {
        if (res.data.length === lastDataLength) {
          console.log("主轮询：无新数据，切换为 10 秒高频轮询");

          clearInterval(pollingInterval);
          pollingInterval = null;

          startFastPolling(schemeId); // 启动高频轮询
        } else {
          handleNewData(res.data, schemeId);
        }
      }
    } catch (error) {
      console.error("轮询获取模拟结果失败", error);
    }
  }, 5.6 * 60 * 1000); // 每 5.5 分钟执行一次
}

let fastPollingInterval = null;
// 如果五分钟没拿到最新的数据，则开启十秒钟调用一次，拿到最新的数据就停止
function startFastPolling(schemeId) {
  fastPollingInterval = setInterval(async () => {
    try {
      const res = await getSimresult(schemeId);

      if (res.data && res.data.length > 0) {
        if (res.data.length !== lastDataLength) {
          console.log("高频轮询：检测到新数据，恢复主轮询");

          clearInterval(fastPollingInterval);
          fastPollingInterval = null;

          handleNewData(res.data, schemeId);

          startPolling(schemeId); // 重新启动主轮询
        }
      }
    } catch (error) {
      console.error("高频轮询获取模拟结果失败", error);
    }
  }, 10 * 1000); // 每 10 秒执行一次
}

// 拿取最新的layer.json存储到pinia中
async function handleNewData(dataArray, schemeId) {
  // 拿服务名称
  const res = await getSimDataById(schemeId);
  simStore.setSelectedScheme(res.data[0]); // 更新方案数据

  const latestItem = dataArray[dataArray.length - 1];
  const currentLength = dataArray.length;

  if (currentLength <= lastDataLength) {
    console.log("本轮无新数据（长度未变化）");
    return;
  }

  // 更新标识
  lastDataLength = currentLength;

  // 执行更新逻辑
  console.log("检测到新数据，更新中...");
  console.log(latestItem, "last");
  simStore.layerDate = latestItem;
  initeWaterPrimitiveView();

  try {
    startSimulate();
  } catch (error) {
    console.error("调用 startSimulate 出错：", error);
  }
}

// 停止轮询函数
function stopPolling() {
  if (pollingInterval) {
    clearInterval(pollingInterval);
    pollingInterval = null;
  }

  if (fastPollingInterval) {
    clearInterval(fastPollingInterval);
    fastPollingInterval = null;
  }

  console.log("轮询已停止");
}

EventBus.on("close-time", () => {
  stopPolling();
});

const toggleDetails = () => {
  isCollapsed.value = !isCollapsed.value;
@@ -240,6 +399,11 @@
const futurePredictions = () => {
  console.log("未来预测按钮被点击");
};

onUnmounted(() => {
  EventBus.off("close-time");
  stopPolling();
});
</script>

<style scoped>