调用求解器

guonan

2025-05-20 f1fbe8049ba01186f033037e6ae36d51915c7418

调用求解器

 src/api/trApi.js

@@ -32,6 +32,17 @@
  }
}

// 根据方案id获取方案列表
export async function getSimDataById(id) {
  try {
    const res = await instance.get(`/simu/selectPage?id=${id}`);
    return res.data; // 返回实际数据（通常 res.data 才是接口返回的内容）
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error; // 抛出错误，让调用方可以捕获
  }
}

// 新建仿真方案
export async function createSimData(simData) {
  try {
@@ -57,45 +68,56 @@
    throw error;
  }
}

// 开始模拟
export async function getSimStart(ids) {
  try {
    const res = await instance.get(`/simu/start?id=${ids}`);
    return res.data;
  } catch (error) {
    console.error("Error deleting simulation data:", error);
    throw error;
  }
}
// **************************************************************************************************************
// 解析json获取泥石流参数
export function parseWaterSimulationData(jsonData) {
  try {
      const startTime = jsonData.duration.start; // 直接使用原始时间
      const endTime = jsonData.duration.end; // 直接使用原始时间
      const extension = jsonData.extension;
      const terrainSizes = jsonData.terrain.size; // 分辨率
      const waterTimestamps = jsonData.waters.data.map((timestamp) => {
          return timestamp; // 不进行时间格式化
      });
      return {
          startTime: startTime, // 原始时间
          endTime: endTime, // 原始时间
          extension: {
              maxHeight: extension.maxHeight,
              minHeight: extension.minHeight,
              maxX: extension.maxx,
              maxY: extension.maxy,
              minX: extension.minx,
              minY: extension.miny,
          },
          terrainSizes: terrainSizes,
          flowUrl: jsonData.flowUrl,
          waterUrl: jsonData.waterUrl,
          version: jsonData.version,
          waterTimestamps: waterTimestamps, // 原始时间数组
      };
    const startTime = jsonData.duration.start; // 直接使用原始时间
    const endTime = jsonData.duration.end; // 直接使用原始时间
    const extension = jsonData.extension;
    const terrainSizes = jsonData.terrain.size; // 分辨率
    const waterTimestamps = jsonData.waters.data.map((timestamp) => {
      return timestamp; // 不进行时间格式化
    });
    return {
      startTime: startTime, // 原始时间
      endTime: endTime, // 原始时间
      extension: {
        maxHeight: extension.maxHeight,
        minHeight: extension.minHeight,
        maxX: extension.maxx,
        maxY: extension.maxy,
        minX: extension.minx,
        minY: extension.miny,
      },
      terrainSizes: terrainSizes,
      flowUrl: jsonData.flowUrl,
      waterUrl: jsonData.waterUrl,
      version: jsonData.version,
      waterTimestamps: waterTimestamps, // 原始时间数组
    };
  } catch (error) {
      console.error("解析水模拟数据时出错:", error);
      return null;
    console.error("解析水模拟数据时出错:", error);
    return null;
  }
}

// 通过接口去请求json，将请求的json解析获取泥石流参数
export async function fetchWaterSimulationData(serviceInfo) {
  try {
    // const response = await fetch(`/simu/${serviceInfo}/layer.json`); // 发起请求
    const response = await fetch(`/simu/c2h1dc/layer.json`); // 发起请求
    const response = await fetch(`/simu/${serviceInfo}/layer.json`); // 发起请求
    // const response = await fetch(`/simu/c2h1dc/layer.json`); // 发起请求
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

 src/components/monifangzhen/schemeCard.vue

@@ -13,9 +13,10 @@
        <p>创建时间 : {{ formatTime(item.createTime) }}</p>
        <p>
          方案状态 :
          <span style="color: aquamarine">{{
          <span style="color: aquamarine">{{ item.result || "创建仿真" }}</span>
          <!-- <span style="color: aquamarine">{{
            statusText[item.status] || "未知"
          }}</span>
          }}</span> -->
        </p>
      </div>
      <div class="cardMenu">
@@ -24,7 +25,7 @@
            >方案详情</el-button
          >
          <el-button size="small" @click="startPlay(item)">进入模拟</el-button>
          <!--  :disabled="item.taskStatus !== 2" -->
          <!--  :disabled="item.status !== 2" -->
        </div>
      </div>
    </el-card>
@@ -52,6 +53,7 @@
import schemeInfo from "@/components/monifangzhen/schemeInfo.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits(["start", "end", "reset", "closeBtn"]);
import { getSimStart, getSimDataById } from "@/api/trApi";

const simStore = useSimStore();
// 选中的方案 ID
@@ -85,25 +87,41 @@
}

function startPlay(item) {
  // if (item.taskStatus !== 2) {
  //   alert("当前方案尚未完成，无法进入模拟！");
  //   return;
  // }
  // if (!item.serviceName) {
  //   ElMessage({
  //     message: "serviceName 不存在，无法继续！",
  //     type: "warning",
  //   });
  //   return; // 阻止后续逻辑执行
  // }
  console.log(item,'iteeeeeeeem');
  simStore.setSelectedScheme(item);
  // 分析中
  if (item.status == 2) {
    ElMessage.warning("当前方案正在分析中,无法进入模拟！");
    return;
  }
  // 出错
  if (item.status == 20) {
    ElMessage.error("当前方案分析出错,请重新新建方案！");
    return;
  }
  // 调用求解器并拿到最新生成的serviceName
  // 新创建的方案没有状态以及serviceName则执行调用求解器
  if (!item.status && !item.serviceName) {
    getSimStart(item.id).then((res) => {
      getSimDataById(item.id).then((res) => {
        item.serviceName = res.data[0].serviceName;
        simStore.setSelectedScheme(item);
        console.log(item, "无服务名称");
        ElMessage.warning("当前方案正在分析中,请稍后再模拟");
        getScheme();
      });
    });
  } else {
    simStore.setSelectedScheme(item);
    console.log("有服务名称");
  }

  currentScheme.value = item;
  schemeInfoShow.value = true;
  emit("closeBtn", false);
  initeWaterPrimitiveView();
  emit("start");
  // 求解器求解完成之后才可以显示时间轴
  if (item.status == 10) {
    initeWaterPrimitiveView();
    currentScheme.value = item;
    schemeInfoShow.value = true;
    emit("closeBtn", false);
    emit("start");
  }
}
function endPlay() {
  emit("end");
@@ -125,7 +143,15 @@
import { getRegionData, getSimData, deleteSimData } from "@/api/trApi.js";

onMounted(() => {
  getScheme();
  getScheme(); // 页面加载时立即获取数据
  intervalId = setInterval(getScheme, 60 * 1000); // 每隔一分钟执行一次
});

onUnmounted(() => {
  if (intervalId !== null) {
    clearInterval(intervalId); // 清除定时器
    intervalId = null; // 重置 intervalId
  }
});

const props = defineProps({
@@ -133,8 +159,9 @@
  showAddIns: Boolean,
});

// 获取仿真列表
const schemeList = ref([]);
let intervalId = null; // 用于存储 setInterval 的返回值
// 获取方案列表
async function getScheme() {
  try {
    const res = await getSimData();

 src/components/monifangzhen/schemeInfo.vue

@@ -1,13 +1,18 @@
<template>
  <div class="listCard">
    <div class="top"><span>方案详情</span>
    </div>
    <div class="top"><span>方案详情</span></div>
    <div class="details">
      <div v-if="formattedData.length" class="input-group">
        <div v-for="(item, index) in formattedData" :key="index" class="input-item">
        <div
          v-for="(item, index) in formattedData"
          :key="index"
          class="input-item"
        >
          <label>{{ item.name }}</label>
          <span :class="{ 'clickable': item.isClickable }"
            @click="item.isClickable ? openGaugeDialog(item.gauges) : null">
          <span
            :class="{ clickable: item.isClickable }"
            @click="item.isClickable ? openGaugeDialog(item.gauges) : null"
          >
            {{ item.value }}
          </span>
        </div>
@@ -16,14 +21,22 @@
        <p style="text-align: center">暂无方案信息</p>
      </div>
    </div>
    <div>

    </div>
    <div></div>
  </div>
  <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
  <Message
    @close="close"
    class="mess"
    v-show="messageShow"
    :mesData="mesData"
  />
  <!-- 添加雨量计弹窗 -->
  <div class="dialoog">
    <el-dialog v-model="dialogVisible" title="雨量计详情" width="50%" :before-close="handleClose">
    <el-dialog
      v-model="dialogVisible"
      title="雨量计详情"
      width="50%"
      :before-close="handleClose"
    >
      <div class="table-container">
        <el-table :data="gaugesData" border stripe height="100%">
          <el-table-column prop="name" label="名称"></el-table-column>
@@ -39,12 +52,17 @@
      </template> -->
    </el-dialog>
  </div>

</template>

<script setup>
import { defineProps, defineEmits, inject, ref, watch } from "vue";
import { ElDialog, ElTable, ElTableColumn, ElButton ,ElMessage} from "element-plus";
import {
  ElDialog,
  ElTable,
  ElTableColumn,
  ElButton,
  ElMessage,
} from "element-plus";
import dayjs from "dayjs";
// 公共依赖
const props = defineProps({ selectedScheme: { type: Object, default: null } });
@@ -54,13 +72,12 @@
// 状态管理
const formattedData = ref([]);


// 映射表
const areaTypeMap = {
  0: "自定义区域仿真",
  1: "行政区划仿真",
  2: "重点区域仿真",
  3: "重点沟仿真"
  3: "重点沟仿真",
};

const statusMap = {
@@ -68,17 +85,25 @@
  1: "预处理",
  2: "分析中",
  10: "完成",
  20: "出错"
  20: "出错",
};

const typeMap = {
  1: "预测模拟",
  2: "实时模拟",
  3: "历史模拟"
  3: "历史模拟",
};

// 跳过字段列表
const skipKeys = ["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"];
const skipKeys = [
  "geom",
  "id",
  "serviceName",
  "updateTime",
  "updateUser",
  "createUser",
  "bak",
];

// 处理 data 字段解析
function parseDataField(dataStr) {
@@ -92,24 +117,24 @@
      intensity: "降雨强度（mm/小时）：",
      prediction: "降雨场次：",
      model: "降雨模式：",
      history: "历史降雨："
      history: "历史降雨：",
    };

    const result = Object.entries(parsed)
      .filter(([k]) => fields[k])
      .map(([k, v]) => ({
        name: fields[k],
        value: v || "无"
        value: v || "无",
      }));

    // 处理雨量计数据
    if (parsed.gauges && Array.isArray(parsed.gauges)) {
      const gaugeNames = parsed.gauges.map(g => g.name).join(", ") || "无";
    if (parsed.type == 2 && parsed.gauges && Array.isArray(parsed.gauges)) {
      const gaugeNames = parsed.gauges.map((g) => g.name).join(", ") || "无";
      result.push({
        name: "雨量计列表：",
        value: '查看雨量计列表',
        value: "查看雨量计列表",
        isClickable: true,
        gauges: parsed.gauges
        gauges: parsed.gauges,
      });
    }

@@ -136,7 +161,7 @@
    const entries = Object.entries(newScheme);
    const areaType = newScheme.areaType;

    console.log(newScheme, 'news');
    // console.log(newScheme, "news");

    const result = entries.reduce((acc, [key, value]) => {
      if (skipKeys.includes(key)) return acc;
@@ -185,11 +210,11 @@
// 打开雨量计弹窗
function openGaugeDialog(gauges) {
  if (Array.isArray(gauges) && gauges.length > 0) {
    gaugesData.value = gauges.map(g => ({
    gaugesData.value = gauges.map((g) => ({
      name: g.name || "未知",
      x: g.x != null ? g.x.toFixed(2) : "-",
      y: g.y != null ? g.y.toFixed(2) : "-",
      r: g.r || "-"
      r: g.r || "-",
    }));
    dialogVisible.value = true;
  } else {

 src/components/tools/Message.vue

@@ -5,17 +5,27 @@
    <div class="message-context">
      <div v-for="(item, key) in messageList" :key="key" class="message-item">
        <div class="message-name">{{ item.name }}</div>
        <div class="message-value" v-if="!(item.name.includes('雨量计列表'))">
        <div class="message-value" v-if="!item.name.includes('雨量计列表')">
          {{ item.value }}
        </div>
        <div v-if="item.name.includes('雨量计列表')" @click="openDialog" 
          style="color: #5bc0de; cursor: pointer;">
        <div
          v-if="item.name.includes('雨量计列表')"
          @click="openDialog"
          style="color: #5bc0de; cursor: pointer"
        >
          查看雨量计列表
        </div>
      </div>
    </div>
    <el-dialog title="雨量计详情" v-model="dialogVisible" :width="'60%'" :before-close="handleClose"
      style="background-color: rgb(5,75,69);">

    <!-- 雨量计弹窗 -->
    <el-dialog
      title="雨量计详情"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
      style="background-color: rgb(5, 75, 69)"
    >
      <div class="table-container">
        <el-table :data="gaugesData" border stripe height="100%">
          <el-table-column prop="name" label="名称"></el-table-column>
@@ -24,11 +34,6 @@
          <el-table-column prop="r" label="半径(r)"></el-table-column>
        </el-table>
      </div>
      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>
@@ -54,12 +59,11 @@
function openDialog() {
  if (gaugesData.value.length > 0) {
    dialogVisible.value = true;
  }else {
  } else {
    ElMessage({
      message: "未找到雨量计数据！",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
  }
}

@@ -79,10 +83,25 @@
    }

    const formattedData = [];
    const areaType = newMesData.areaType !== undefined ? newMesData.areaType : null;
    const areaType =
      newMesData.areaType !== undefined ? newMesData.areaType : null;

    // 获取当前的 type 值
    const currentType = newMesData.type;

    for (const [key, value] of Object.entries(newMesData)) {
      if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue;
      if (
        [
          "geom",
          "id",
          "serviceName",
          "updateTime",
          "updateUser",
          "createUser",
          "bak",
        ].includes(key)
      )
        continue;

      if (key === "createTime" && typeof value === "number") {
        formattedData.push({ name: "创建时间：", value: formatDate(value) });
@@ -96,7 +115,10 @@
          2: "重点区域仿真",
          3: "重点沟仿真",
        };
        formattedData.push({ name: "区域类别：", value: areaTypeMap[value] || "未知" });
        formattedData.push({
          name: "区域类别：",
          value: areaTypeMap[value] || "未知",
        });
        continue;
      }

@@ -108,14 +130,20 @@
          10: "完成",
          20: "出错",
        };
        formattedData.push({ name: "仿真状态：", value: statusMap[value] || "未知" });
        formattedData.push({
          name: "仿真状态：",
          value: statusMap[value] || "未知",
        });
        continue;
      }

      if (key === "type") {
        if (![1, 2].includes(areaType)) {
          const typeMap = { 1: "预测模拟", 2: "实时模拟", 3: "历史模拟" };
          formattedData.push({ name: "模拟类别：", value: typeMap[value] || "未知" });
          formattedData.push({
            name: "模拟类别：",
            value: typeMap[value] || "未知",
          });
        }
        continue;
      }
@@ -138,11 +166,14 @@
      if (key === "data" && typeof value === "string") {
        try {
          const parsedData = JSON.parse(value);
          console.log('Parsed Data:', parsedData);

          // 处理 data 中的各个字段
          const addField = (fieldKey, label) => {
            if (parsedData[fieldKey] !== undefined) {
              formattedData.push({ name: `${label}：`, value: parsedData[fieldKey] || "无" });
              formattedData.push({
                name: `${label}：`,
                value: parsedData[fieldKey] || "无",
              });
            }
          };

@@ -153,8 +184,12 @@
          addField("model", "降雨模式");
          addField("history", "历史降雨");

          // 处理雨量计数据
          if (parsedData.gauges && Array.isArray(parsedData.gauges)) {
          // 判断 type 是否为 2，决定是否添加雨量计信息
          if (
            currentType == 2 &&
            parsedData.gauges &&
            Array.isArray(parsedData.gauges)
          ) {
            gaugesData.value = parsedData.gauges.map((gauge) => ({
              name: gauge.name || "未知",
              x: gauge.x != null ? gauge.x.toFixed(2) : "-",
@@ -162,8 +197,11 @@
              r: gauge.r || "-",
            }));

            const gaugeNames = gaugesData.value.map(g => g.name).join(", ");
            formattedData.push({ name: "雨量计列表：", value: gaugeNames || "无" });
            const gaugeNames = gaugesData.value.map((g) => g.name).join(", ");
            formattedData.push({
              name: "雨量计列表：",
              value: gaugeNames || "无",
            });
          }
        } catch (e) {
          formattedData.push({ name: "数据：", value: value || "无" });
@@ -175,8 +213,6 @@
    }

    messageList.value = formattedData;
    console.log(messageList.value, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwww');

  },
  { immediate: true }
);
@@ -264,8 +300,8 @@
  max-width: 200px;
}
.table-container {
  max-height: 500px;  // 控制最大高度，超过则出现滚动条
  overflow-y: auto;   // 垂直滚动
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 4px;
}
@@ -274,7 +310,7 @@
  padding-top: 10px;
  padding-bottom: 10px;
}
/deep/.el-dialog__title{
/deep/.el-dialog__title {
  color: #fff !important;
}
.table-container .el-table {
@@ -282,4 +318,4 @@
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
</style>

 src/views/Home.vue

@@ -59,7 +59,6 @@
// import DangerAssess from "@/components/monifangzhen/DangerAssess.vue";
import { showDeviceDetail } from "@/store";
import { setupTokenRefresh, getDangerPoint } from "@/api/hpApi.js";
import { getSimData, fetchWaterSimulationData } from "@/api/trApi.js";
import { convertToWKT } from "@/utils/wktUtils";

const route = useRoute();
@@ -103,7 +102,7 @@

onMounted(async () => {
  setupTokenRefresh(); // 获取宏图token
  getSimData(); //测试tr后端
  // getSimData(); //测试tr后端
  // 获取隐患点列表（因为中科软后端接口获取加载时间较长）
  getDangerPoint().then((res) => {
    simStore.DangerPoint = res.data.pageData;

 src/views/left/CitySim.vue

@@ -145,7 +145,7 @@
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="addSimCheme">保存方案</el-button>
        <el-button type="success" @click="startPlay">开始模拟</el-button>
        <el-button type="success" @click="startPlay">保存并开始模拟</el-button>
      </div>
    </div>
  </div>
@@ -158,7 +158,8 @@
import { ElMessage, ElMessageBox } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { getRegionData } from "@/api/trApi";
import { getRegionData, getSimStart, getSimDataById } from "@/api/trApi";

import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import { EventBus } from "@/eventBus"; // 引入事件总线
@@ -472,11 +473,34 @@

// 开始模拟
async function startPlay() {
  // 开始模拟前需要先保存方案
  await simStore.addSimCheme(forms);
  EventBus.emit("close-selectArea");
  initeWaterPrimitiveView();
  startSimulate();
  try {
    // 保存方案
    const res = await simStore.addSimCheme(forms);
    const schemeId = res.data?.data?.id;

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

    // 调用求解器
    const simStartRes = await getSimStart(schemeId);
    console.log(simStartRes, "getSimStart 返回结果");

    // 关闭选择区域窗口、初始化视图并开始模拟
    EventBus.emit("close-selectArea");
    // 暂时不在此处开始模拟，模拟都在方案列表中进行模拟
    // initeWaterPrimitiveView();
    // startSimulate();

    ElMessage.warning({
      message: "请返回方案列表开始模拟！",
      duration: 10000, // 提示框显示时长，单位为毫秒，默认是3000毫秒
    });
  } catch (error) {
    console.error("启动模拟过程中发生错误：", error);
    ElMessage.error("启动模拟失败，请稍后再试");
  }
}
</script>


 src/views/left/KGSimOption/HistorySimulation.vue

@@ -175,13 +175,32 @@
async function startPlay() {
  try {
    formData.geom = props.selectedArea;
    await simStore.addSimCheme(formData);
    // 保存方案
    const res = await simStore.addSimCheme(formData);
    const schemeId = res.data?.data?.id;

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

    // 调用求解器
    const simStartRes = await getSimStart(schemeId);
    console.log(simStartRes, "getSimStart 返回结果");

    // 关闭选择区域窗口、初始化视图并开始模拟
    EventBus.emit("close-selectArea");
    initeWaterPrimitiveView();
    startSimulate();
    ElMessage.success("模拟开始");
    // 暂时不在此处开始模拟，模拟都在方案列表中进行模拟
    // initeWaterPrimitiveView();
    // startSimulate();

    ElMessage.warning({
      message: "请返回方案列表开始模拟！",
      duration: 10000, // 提示框显示时长，单位为毫秒，默认是3000毫秒
    });

  } catch (error) {
    ElMessage.error("模拟启动失败");
    ElMessage.error("启动模拟失败，请稍后再试");
  }
}
</script>

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -259,11 +259,35 @@

// 开始模拟
async function startPlay() {
  forms.geom = props.selectedArea;
  await simStore.addSimCheme(forms);
  EventBus.emit("close-selectArea");
  initeWaterPrimitiveView();
  startSimulate();
  try {
    formData.geom = props.selectedArea;
    // 保存方案
    const res = await simStore.addSimCheme(forms);
    const schemeId = res.data?.data?.id;

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

    // 调用求解器
    const simStartRes = await getSimStart(schemeId);
    console.log(simStartRes, "getSimStart 返回结果");

    // 关闭选择区域窗口、初始化视图并开始模拟
    EventBus.emit("close-selectArea");
    // 暂时不在此处开始模拟，模拟都在方案列表中进行模拟
    // initeWaterPrimitiveView();
    // startSimulate();

    ElMessage.warning({
      message: "请返回方案列表开始模拟！",
      duration: 10000, // 提示框显示时长，单位为毫秒，默认是3000毫秒
    });

  } catch (error) {
    ElMessage.error("启动模拟失败，请稍后再试");
  }
}

// 打开方案

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -188,7 +188,7 @@
    .filter((item) => item.selected)
    .map((item) => ({
      id: item.deviceCode,
      deviceName: item.deviceName,
      name: item.deviceName,
      x: item.longitude,
      y: item.latitude,
      r: 10000,

 src/views/left/Left.vue

@@ -401,31 +401,6 @@
}
const schemeCardRef = ref(null);

// function deleteSelectedScheme() {
//   const selectedId = schemeCardRef.value.getSelectedId();
//   const selectedScheme = simStore.schemCard.find(
//     (item) => item.id === selectedId
//   );
//   if (!selectedId) {
//     ElMessage.warning("请先选择一个方案！");
//     return;
//   }
//   ElMessageBox.confirm(
//     `确定要删除  "${selectedScheme.name}" 方案吗？`,
//     "删除确认",
//     {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning",
//     }
//   )
//     .then(() => {
//       simStore.removeSchemCardItem(selectedId);
//       ElMessage.success(`方案 "${selectedScheme.name}" 删除成功！`);
//     })
//     .catch(() => { });
// }

function start(form) {
  emits("start", form);
}