提交

guonan

2025-06-26 1119a7837323e052d3e6256cddd3283d919bd959

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -23,15 +23,16 @@
          </el-form-item>
          <el-form-item label="雨量数据:">
            <el-select
              @change="handleChange"
              v-model="formData.selectedRainfall"
              placeholder="请选择"
              popper-class="mySelectStyle"
            >
              <el-option
                v-for="item in rainfallData"
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
@@ -39,11 +40,11 @@
            <div class="table-container">
              <div
                class="table-row"
                v-for="(item, index) in filteredTableData"
                v-for="(item, index) in shgList"
                :key="index"
              >
                <input type="checkbox" v-model="item.selected" />
                <span>{{ item.name }}</span>
                <span>{{ item.deviceName }}</span>
              </div>
            </div>
          </el-form-item>
@@ -56,7 +57,7 @@
        <div style="width: 100%; height: 60px; background-color: #fff;"></div>
      </div> -->
    <div class="buttons">
      <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
      <el-button type="primary" @click="saveSim">保存方案</el-button>
      <el-button type="success" @click="startPlay">开始模拟</el-button>
      <el-button type="success" @click="futurePredictions">未来预测</el-button>
    </div>
@@ -64,46 +65,36 @@
</template>

<script setup>
import { ref, watch, defineProps, computed, inject, reactive } from "vue";
import {
  ref,
  watch,
  defineProps,
  computed,
  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 { getDeviceInfoSHG, getYLJData } from "@/api/hpApi";
import { getSimStart, getSimDataById } from "@/api/trApi";

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

const simStore = useSimStore();

// 表单数据
const formData = reactive({
  name: "方案名称",
  selectedRainfall: "",
  type: 2,
  gauges: [
    {
      id: "xxxxxxxxxxxxxx",
      name: "雨量计1",
      x: 119.0,
      y: 28.0,
      r: 10000,
    },
    {
      id: "xxxxxxxxxxxxxx",
      name: "雨量计2",
      x: 119.0,
      y: 28.0,
      r: 10000,
    },
  ],
  gauges: [],
});

// 工具函数：深拷贝并设置默认选中状态
function deepCloneAndSetSelected(data) {
  const newData = {};
  for (const key in data) {
    newData[key] = data[key].map((item) => ({ ...item, selected: true }));
  }
  return newData;
}

// 接收父组件传递的 props
const props = defineProps({
@@ -112,113 +103,112 @@
    required: true,
  },
});
const rainfallData = ref([]);

const tableData = ref({}); // 表格数据（按雨量数据分组）
const isCollapsed = ref(false); // 控制展开/收起状态

// 模拟不同区域的数据
const areaDataMap = {
  孙胡沟: {
    rainfallData: [
      { id: "1", name: "气象实时数据 - 孙胡沟" },
      { id: "2", name: "雨量计实时数据 - 孙胡沟" },
    ],
    tableData: {
      1: [
        { id: "001", name: "孙胡沟气象站001" },
        { id: "002", name: "孙胡沟气象站002" },
      ],
      2: [
        { id: "003", name: "孙胡沟雨量计003" },
        { id: "004", name: "孙胡沟雨量计004" },
      ],
    },
  },
  鱼水洞后沟: {
    rainfallData: [
      { id: "1", name: "气象实时数据 - 鱼水洞后沟" },
      { id: "2", name: "雨量计实时数据 - 鱼水洞后沟" },
    ],
    tableData: {
      1: [
        { id: "005", name: "鱼水洞后沟气象站005" },
        { id: "006", name: "鱼水洞后沟气象站006" },
      ],
      2: [
        { id: "007", name: "鱼水洞后沟雨量计007" },
        { id: "008", name: "鱼水洞后沟雨量计008" },
      ],
    },
  },
  于家西沟: {
    rainfallData: [
      { id: "1", name: "气象实时数据 - 于家西沟" },
      { id: "2", name: "雨量计实时数据 - 于家西沟" },
    ],
    tableData: {
      1: [
        { id: "009", name: "于家西沟气象站009" },
        { id: "010", name: "于家西沟气象站010" },
      ],
      2: [
        { id: "011", name: "于家西沟雨量计011" },
        { id: "012", name: "于家西沟雨量计012" },
      ],
    },
  },
// 雨量计下拉框
const options = ref([
  { id: "1", name: "气象实时数据" },
  { id: "2", name: "雨量计实时数据" },
]);

// 雨量计列表
const shgList = ref([]);
// 所有的雨量计列表
const rainListNoFilter = ref([]);

// 获取所有雨量计数据（来自接口）
const getRainListAll = () => {
  // 雨量计类型id
  const ids = "1917487171642212354";
  getDeviceInfoSHG(ids).then((res) => {
    rainListNoFilter.value = res.data.pageData;
    // 根据当前选择的区域自动过滤
    updateShgListByArea();
  });
};

// 根据 selectedArea 更新数据
// 根据 props.selectedArea.label 过滤雨量计列表，并设置 selected: true
const updateShgListByArea = () => {
  const currentArea = props.selectedArea?.label;

  if (!currentArea) {
    shgList.value = [];
    return;
  }

  shgList.value = rainListNoFilter.value
    .filter((item) => item.deviceName?.includes(currentArea))
    .map((device) => ({
      ...device,
      selected: true, // 默认选中
    }));

  console.log(shgList.value, "shgList.valueshgList.value");
};

// 下拉框选中值的表格数据变化
const handleChange = async (item) => {
  formData.selectedRainfall = item;

  if (item === "雨量计实时数据") {
    if (!props.selectedArea) {
      ElMessage.warning("请先选择区域");
      shgList.value = [];
      return;
    }
    // 如果还没有加载过数据，则先请求接口加载
    if (rainListNoFilter.value.length === 0) {
      getRainListAll(); // 加载全部数据后会自动过滤
    } else {
      updateShgListByArea(); // 已有数据就直接过滤
    }
  } else {
    shgList.value = [];
  }
};

// 监听区域变化，重新过滤数据
watch(
  () => props.selectedArea,
  (newArea) => {
    console.log(newArea.label, "new");
    if (areaDataMap[newArea.label]) {
      rainfallData.value = areaDataMap[newArea.label].rainfallData;
      // 使用深拷贝设置默认选中状态
      tableData.value = deepCloneAndSetSelected(
        areaDataMap[newArea.label].tableData
      );
      formData.selectedRainfall = ""; // 清空选中的雨量数据
    } else {
      rainfallData.value = [];
      tableData.value = {};
      formData.selectedRainfall = "";
    if (!newArea) {
      ElMessage.warning("请选择一个区域");
      shgList.value = [];
    } else if (formData.selectedRainfall === "雨量计实时数据") {
      handleChange(formData.selectedRainfall);
    }
  }
  // { immediate: true } // 立即执行一次，确保初始数据正确
  },
  { immediate: true }
);

// 动态计算表格数据
const filteredTableData = computed(() => {
  return formData.selectedRainfall && tableData.value[formData.selectedRainfall]
    ? tableData.value[formData.selectedRainfall]
    : [];
});

// 获取当前选中的雨量数据名称
const selectedRainfallName = computed(() => {
  const selected = rainfallData.value.find(
    (item) => item.id === formData.selectedRainfall
  );
  return selected ? selected.name : "";
});

// 获取当前选中的设备信息
const selectedDevices = computed(() => {
  return filteredTableData.value.filter((item) => item.selected);
});

// 重置表单
const resetForm = () => {
  formData.name = "";
  formData.selectedRainfall = "";
  shgList.value = [];
};

// 打开保存方案对话框
const openSaveDialog = async () => {
const updateSelectedGauges = () => {
  formData.gauges = shgList.value
    .filter((item) => item.selected)
    .map((item) => ({
      id: item.deviceCode,
      name: item.deviceName,
      x: item.longitude,
      y: item.latitude,
      r: 10000,
    }));
};

// 保存方案
const saveSim = async () => {
  try {
    // getYLJData("1101160300070101")
    updateSelectedGauges();
    formData.geom = props.selectedArea;
    await simStore.addSimCheme(formData);
    await simAPIStore.addSimCheme(formData);
    resetForm();
    EventBus.emit("close-selectArea");
  } catch (err) {}
@@ -227,24 +217,101 @@
// 注入模拟操作方法
const { startSimulate, endSimulate } = inject("simulateActions");

// 实时模拟定时器
let pollingInterval = 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 {
    // 调用求解器并初始化模拟
    const resStart = await getSimStart(schemeId);

    // 请求完成后关闭加载提示
    loadingMessage.close();

    if (resStart.code === 200) {
      const res = await getSimDataById(schemeId);
      simStore.setSelectedScheme(res.data[0]);

      simStore.layerDate = resStart.data;
      initeWaterPrimitiveView();

      try {
        startSimulate(); // 这里可能会报错
      } catch (error) {
        console.error("调用 startSimulate 出错：", error);
      }

      // 开始轮询任务：每 5 分钟调用一次 getSimStart 并更新方案数据
      startPolling(schemeId);
    } else {
      ElMessage.error(resStart.message || "调用求解器失败");
    }
  } catch (error) {
    loadingMessage.close();
    ElMessage.error("请求失败：" + (error.message || "未知错误"));
    console.error("调用 getSimStart 出错：", error);
  }
}

// 启动轮询函数
function startPolling(schemeId) {
  stopPolling(); // 避免重复启动

  pollingInterval = setInterval(async () => {
    try {
      const resStart = await getSimStart(schemeId);

      if (resStart.code === 200) {
        const res = await getSimDataById(schemeId);
        simStore.setSelectedScheme(res.data[0]); // 更新方案数据
        simStore.layerDate = resStart.data; // 更新 layer 数据

        console.log("轮询获取最新数据成功");
      } else {
        console.warn("轮询请求失败：", resStart.message);
      }
    } catch (error) {
      console.error("轮询请求异常：", error);
    }
  }, 5 * 60 * 1000); // 每 5 分钟执行一次
}

// 停止轮询函数
function stopPolling() {
  if (pollingInterval) {
    clearInterval(pollingInterval);
    pollingInterval = null;
    console.log("轮询已停止");
  }
}

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

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

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

<style scoped>
@@ -309,7 +381,7 @@
.table-container {
  font-size: 12px;
  height: 120px;
  width: 90%;
  width: 96%;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;