优化定时加载

guonan

2025-05-29 6641cefa084db2636a997de00fde5be167788e1e

优化定时加载

 src/api/trApi.js

@@ -24,8 +24,10 @@
// èŽ·å–方案列表
export async function getSimData() {
  try {
    const res = await instance.get("/simu/selectPage");
    return res.data; // è¿”回实际数据（通常 res.data æ‰æ˜¯æŽ¥å£è¿”回的内容）
    const res = await instance.get("/simu/selectPage", {
      params: { pageSize: 100 },
    });
    return res.data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error; // æŠ›å‡ºé”™è¯¯ï¼Œè®©è°ƒç”¨æ–¹å¯ä»¥æ•èŽ·
@@ -36,7 +38,7 @@
export async function getSimDataById(id) {
  try {
    const res = await instance.get(`/simu/selectPage?id=${id}`);
    return res.data; // è¿”回实际数据（通常 res.data æ‰æ˜¯æŽ¥å£è¿”回的内容）
    return res.data; 
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error; // æŠ›å‡ºé”™è¯¯ï¼Œè®©è°ƒç”¨æ–¹å¯ä»¥æ•èŽ·
@@ -132,7 +134,7 @@
// èŽ·å–水位水深
export async function getFlowRate(data) {
  // console.log(data,'发送的数据！');
  

  try {
    const res = await instance.get("/simu/position", {
      params: data

 src/components/monifangzhen/schemeCard.vue

@@ -13,7 +13,10 @@
        <p>创建时间 : {{ formatTime(item.createTime) }}</p>
        <p>
          æ–¹æ¡ˆçŠ¶æ€ :
          <span style="color: aquamarine">{{ item.result || "创建仿真" }}</span>
          <span style="color: aquamarine">
            {{ item.result === -1 ? "出错" : item.result || "创建仿真" }}
          </span>
          <!-- <span style="color: aquamarine">{{ item.result || "创建仿真" }}</span> -->
          <!-- <span style="color: aquamarine">{{
            statusText[item.status] || "未知"
          }}</span> -->
@@ -50,12 +53,20 @@
import { initeWaterPrimitiveView } from "@/utils/water";
import Message from "@/components/tools/Message.vue";
import { useSimStore } from "@/store/simulation.js";
import { SimAPIStore } from "@/store/simAPI";
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";
import {
  getRegionData,
  getSimData,
  deleteSimData,
  getSimStart,
  getSimDataById,
} from "@/api/trApi.js";

const simStore = useSimStore();
const simAPIStore = SimAPIStore();
// é€‰ä¸­çš„方案 ID
const selectedId = ref(null);
// å½“前选中的方案信息
@@ -72,16 +83,22 @@
  10: "完成",
  20: "出错",
};

function formatTime(time) {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
}

const messageShow = ref(false);

const schemeInfoShow = ref(false);

const mesData = ref(null);

function setSchemClick(item) {
  mesData.value = item;
  messageShow.value = true;
}

function close() {
  messageShow.value = false;
}
@@ -113,8 +130,11 @@
    simStore.setSelectedScheme(item);
    console.log("有服务名称");
  }

  const flyHeight = ref(100000);

  const shouldShowFill = false;

  // æ±‚解器求解完成之后才可以显示时间轴
  if (item.status == 10) {
    // åªæœ‰è¡Œæ”¿åŒºåˆ’执行
@@ -135,14 +155,17 @@
    emit("start");
  }
}

function endPlay() {
  emit("end");
}

function handleBack(value) {
  if (value === false) {
    schemeInfoShow.value = false;
  }
}

const handleHideSchemeInfo = () => {
  schemeInfoShow.value = false;
  emit("closeBtn", true);
@@ -151,26 +174,6 @@
// æ³¨å†Œäº‹ä»¶ç›‘听器
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);

/////////////////////// è°ƒç”¨æŽ¥å£ï¼ˆä½¿ç”¨æ—¶æ‰“开） ///////////////////////
import { getRegionData, getSimData, deleteSimData } from "@/api/trApi.js";

onMounted(() => {
  getScheme(); // é¡µé¢åŠ è½½æ—¶ç«‹å³èŽ·å–数据
  intervalId = setInterval(getScheme, 60 * 1000); // æ¯éš”一分钟执行一次
});

onUnmounted(() => {
  if (intervalId !== null) {
    clearInterval(intervalId); // æ¸…除定时器
    intervalId = null; // é‡ç½® intervalId
  }
});

const props = defineProps({
  deleteSim: Boolean, // æŽ¥æ”¶çˆ¶ç»„件传递的函数
  showAddIns: Boolean,
});

const schemeList = ref([]);
let intervalId = null; // ç”¨äºŽå­˜å‚¨ setInterval çš„返回值
// èŽ·å–方案列表
@@ -178,10 +181,49 @@
  try {
    const res = await getSimData();
    schemeList.value = res.data;

    const shouldStop = schemeList.value.every(
      (item) =>
        item.result == "创建仿真" ||
        item.result == "完成" ||
        item.result == "-1"
    );
    simAPIStore.shouldPoll = !shouldStop; // ä¿®æ”¹ Pinia çŠ¶æ€
    // 3. å¦‚果需要停止
    if (shouldStop) {
      if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
        console.log("停止轮询");
      }
      return;
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

// ç›‘听 shouldPoll çŠ¶æ€å˜åŒ–
watch(
  () => simAPIStore.shouldPoll,
  (isStarted) => {
    console.log(isStarted, "定时器");
    if (isStarted) {
      getScheme(); // é¦–次立即获取一次
      intervalId = setInterval(getScheme, 60 * 1000); // æ¯éš”一分钟执行
    }
    // else if (intervalId !== null) {
    //   clearInterval(intervalId);
    //   intervalId = null;
    // }
  },
  { immediate: true }
);

const props = defineProps({
  deleteSim: Boolean, // æŽ¥æ”¶çˆ¶ç»„件传递的函数
  showAddIns: Boolean,
});

// æ–°å»ºæ–¹æ¡ˆå®Œæˆä¹‹åŽæ–¹æ¡ˆåˆ—表需实时刷新
watch(
@@ -231,9 +273,18 @@
    })
    .catch(() => {});
};
/////////////////////// è°ƒç”¨æŽ¥å£ç»“束 ///////////////////////

onMounted(() => {
  getScheme(); // é¡µé¢åŠ è½½æ—¶ç«‹å³èŽ·å–数据
});

onUnmounted(() => {
  EventBus.off("hide-schemeInfo", handleHideSchemeInfo);

  if (intervalId !== null) {
    clearInterval(intervalId); // æ¸…除定时器
    intervalId = null; // é‡ç½® intervalId
  }
});
</script>


 src/store/simAPI.js

@@ -5,6 +5,10 @@
import dayjs from 'dayjs'

export const SimAPIStore = defineStore('SimAPI', () => {

    // å®šæ—¶å™¨
    const shouldPoll = ref(false)

    const selectTab = ref("行政区划仿真")

    const isLoading = ref(false)
@@ -133,6 +137,7 @@
    return {
        selectTab,
        isLoading,
        shouldPoll,
        handleClickTab,
        addSimCheme,
        saveScheme,

 src/store/simulation.js

@@ -1,7 +1,6 @@
// stores/ui.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { createSimData } from '@/api/trApi'

export const useSimStore = defineStore('simulation', () => {
    // éšæ‚£ç‚¹åˆ—表
@@ -30,7 +29,9 @@
    const schemCard = ref([])
    const backToHome = ref(false)
    const selectedScheme = ref(null)
    // é™é›¨æ•°æ®åˆ—表
    const rainFalls = ref()
    // é™é›¨å•ä½
    const intensityUnit = ref()
    const setSelectedScheme = (scheme) => {
        selectedScheme.value = scheme

 src/views/left/CitySim.vue

@@ -512,10 +512,11 @@

    // è°ƒç”¨æ±‚解器
    const simStartRes = await getSimStart(schemeId);
    console.log(simStartRes, "getSimStart è¿”回结果");

    // å…³é—­é€‰æ‹©åŒºåŸŸçª—口、初始化视图并开始模拟
    EventBus.emit("close-selectArea");
    simStore.shouldPoll = true;
    
    // æš‚时不在此处开始模拟，模拟都在方案列表中进行模拟
    // initeWaterPrimitiveView();
    // startSimulate();

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -88,7 +88,7 @@
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间:">
      <el-form-item label="选择时间:" v-show="forms.prediction != '降雨场次'">
        <el-date-picker
          v-model="forms.hours"
          type="datetimerange"
@@ -98,6 +98,13 @@
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
          @change="change"
        />
      </el-form-item>
      <el-form-item label="选择时间:" v-show="forms.prediction == '降雨场次'">
        <el-date-picker
          v-model="forms.hours"
          type="datetime"
          placeholder="请选择开始时间"
        />
      </el-form-item>
      <el-form-item label="预计时长:">
@@ -113,7 +120,7 @@
    <div class="buttons">
      <el-button type="primary" @click="openPlan">打开方案</el-button>
      <el-button type="primary" @click="openSaveDialog">保存方案</el-button>
      <el-button type="success" @click="startPlay">开始模拟</el-button>
      <el-button type="success" @click="startPlay">保存并开始模拟</el-button>
    </div>
  </div>
</template>
@@ -209,7 +216,7 @@
};
// é™é›¨åœºæ¬¡é€‰æ‹©
const rainFallChange = (val) => {
  // console.log(val, "val");
  console.log(val, "val");
  const decimalHours = (val.rainfallDuration.match(/(\d+)时(\d+)分/) || [])
    .slice(1)
    .reduce((acc, curr, i) => acc + parseInt(curr, 10) / (i === 0 ? 1 : 60), 0)
@@ -261,7 +268,7 @@
// å¼€å§‹æ¨¡æ‹Ÿ
async function startPlay() {
  try {
    formData.geom = props.selectedArea;
    forms.geom = props.selectedArea;
    // ä¿å­˜æ–¹æ¡ˆ
    const res = await simStore.addSimCheme(forms);
    const schemeId = res.data?.data?.id;
@@ -277,6 +284,8 @@

    // å…³é—­é€‰æ‹©åŒºåŸŸçª—口、初始化视图并开始模拟
    EventBus.emit("close-selectArea");

    simStore.shouldPoll = true;
    // æš‚时不在此处开始模拟，模拟都在方案列表中进行模拟
    // initeWaterPrimitiveView();
    // startSimulate();
@@ -287,6 +296,7 @@
    });
  } catch (error) {
    ElMessage.error("启动模拟失败，请稍后再试");
    console.log(error);
  }
}


 src/views/left/KGSimOption/RealTimeSimulation copy.vue

ÎļþÒÑɾ³ý