From 4da56700113f235312e9fb64e49496c70fa12c1c Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期四, 26 六月 2025 12:34:40 +0800
Subject: [PATCH] 实时模拟
---
src/api/requestTR.js | 2
src/components/menu/TimeLine.vue | 342 ++++++++++++++++++++++++++++++++++--------
src/components/monifangzhen/schemeCard.vue | 10
src/views/left/KGSimOption/RealTimeSimulation.vue | 123 +++++++++++++--
4 files changed, 387 insertions(+), 90 deletions(-)
diff --git a/src/api/requestTR.js b/src/api/requestTR.js
index 9f6d7d0..4076645 100644
--- a/src/api/requestTR.js
+++ b/src/api/requestTR.js
@@ -14,7 +14,7 @@
// 鍒涘缓 Axios 瀹炰緥
const instance = axios.create({
baseURL: API_URL,
- timeout: 1000 * 60, // 璇锋眰瓒呮椂鏃堕棿锛堝崟浣嶏細姣锛�
+ // timeout: 1000 * 60, // 璇锋眰瓒呮椂鏃堕棿锛堝崟浣嶏細姣锛�
headers: {
"Content-Type": "application/x-www-form-urlencoded", // 榛樿璇锋眰澶�
},
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index e18acb9..0ad8855 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,20 +2,30 @@
<div class="timeline-container">
<div class="controls">
<div class="control-btn" @click="skipBackward">
- <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
+ <img
+ src="@/assets/img/timeline/left.png"
+ class="fas fa-step-backward"
+ />
</div>
<div class="control-btn play-btn" @click="togglePlay">
<img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
<img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
</div>
<div class="control-btn" @click="skipForward">
- <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
+ <img
+ src="@/assets/img/timeline/right.png"
+ class="fas fa-step-forward"
+ />
</div>
<div class="speed-control" v-show="speedShow">
<div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
<div class="speed-menu" v-show="showSpeedMenu">
- <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
- :class="{ active: playbackRate === rate }">
+ <div
+ v-for="rate in playbackRates"
+ :key="rate"
+ @click.capture="setPlaybackRate(rate)"
+ :class="{ active: playbackRate === rate }"
+ >
{{ rate }}X
</div>
</div>
@@ -25,19 +35,33 @@
<div class="timeline">
<div class="dates">
<div class="current-date">褰撳墠鎾斁鏃堕棿锛歿{ currentPlayingTime }}</div>
- <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
+ <div
+ v-for="(date, index) in visibleDates"
+ :key="index"
+ class="date-label"
+ >
<!-- {{ formatDate(date) }} -->
</div>
<div>
涓撻娓叉煋:
- <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top: -3px"
- :disabled="!isPlaying || !isWaterPrimitiveCreated" />
+ <el-switch
+ v-model="isColorRenderEnabled"
+ @change="handleColorRenderChange"
+ style="margin-top: -3px"
+ :disabled="!isPlaying || !isWaterPrimitiveCreated"
+ />
<!-- active-text="寮�" inactive-text="鍏�" -->
</div>
</div>
<div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
- <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
- <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
+ <div
+ class="timeline-progress"
+ :style="{ width: progressPercentage + '%' }"
+ ></div>
+ <div
+ class="timeline-cursor"
+ :style="{ left: progressPercentage + '%' }"
+ ></div>
<div class="scale-markers">
<div class="scale-marker" style="left: 0%"></div>
<div class="scale-marker" style="left: 25%"></div>
@@ -46,8 +70,12 @@
<div class="scale-marker" style="left: 100%"></div>
</div>
<div class="time-markers">
- <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker"
- :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }">
+ <div
+ v-for="(time, index) in timeMarkers"
+ :key="index"
+ class="time-marker"
+ :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
+ >
<div class="date-part">{{ time.split(" ")[0] }}</div>
<div class="time-part">{{ time.split(" ")[1] }}</div>
</div>
@@ -56,27 +84,38 @@
</div>
<div>
<div style="display: flex">
- <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime"
- @finish-calculation="handleFinishCalculation" style="
+ <ratelevel
+ ref="ratelevelRef"
+ :playing-time="sendCurrentPlayingTime"
+ @finish-calculation="handleFinishCalculation"
+ style="
margin-top: 12px;
margin-left: 28px;
margin-right: 10px;
justify-content: flex-end;
- " />
- <crossanalysis ref="crossRef" style="
+ "
+ />
+ <crossanalysis
+ ref="crossRef"
+ style="
margin-top: 12px;
margin-left: 16px;
margin-right: 20px;
justify-content: flex-end;
- " />
+ "
+ />
</div>
- <el-button @click="handleBack" style="
+ <el-button
+ @click="handleBack"
+ style="
margin-top: 3px;
margin-left: 28px;
margin-right: 10px;
width: 75%;
height: 30%;
- ">缁撴潫妯℃嫙</el-button>
+ "
+ >缁撴潫妯℃嫙</el-button
+ >
</div>
</div>
</template>
@@ -91,6 +130,7 @@
onBeforeUnmount,
inject,
reactive,
+ watchEffect,
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";
@@ -174,6 +214,9 @@
new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
).map((date) => dayjs(date).toDate())
);
+
+// 鎴戦渶瑕佸姞涓�涓垽鏂�
+const finishPlay = ref(false);
// 鎾斁鎺у埗
const togglePlay = () => {
// 杩欓噷搴旇鍐嶈瀹氬嚑涓檺鍒讹紝濡傛灉缂哄皯浠�涔堟暟鎹紝鏃犳硶杩涜浠跨湡
@@ -241,38 +284,96 @@
8: 125, // 8鍊嶉��
};
// 鎾斁閫昏緫
+// const startPlayback = () => {
+// clearInterval(playInterval);
+
+// playInterval = setInterval(() => {
+// // 鎵惧埌褰撳墠鏃堕棿瀵瑰簲鐨勭储寮�
+// const currentIndex = findClosestTimestampIndex(currentTime.value);
+// const nextIndex = currentIndex + 1;
+
+// // 濡傛灉宸茬粡鏄渶鍚庝竴涓椂闂寸偣锛屽仠姝㈡挱鏀�
+// if (nextIndex >= waterTimestamps.value.length) {
+// currentTime.value = duration.value;
+// stopPlayback();
+// isPlaying.value = false;
+// emit("isPlaying", false);
+// emit("playbackFinished", true);
+// return;
+// }
+
+// // 鏇存柊鏃堕棿涓轰笅涓�涓椂闂寸偣鐨勬椂闂村樊锛堢锛�
+// const nextTimestamp = waterTimestamps.value[nextIndex];
+// const baseTimestamp = waterTimestamps.value[0];
+// currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
+
+// // 瑙﹀彂鏇存柊
+// if (selectedScheme.value.type !== 2) {
+// updateWaterColorByTime();
+// updateWeatherByProgress();
+// }
+
+// const progress = currentTime.value / duration.value;
+// emit("timeUpdate", progress * 100);
+// }, 1000 / playbackRate.value); // 鏍规嵁鎾斁閫熺巼璋冩暣闂撮殧
+// };
const startPlayback = () => {
clearInterval(playInterval);
- playInterval = setInterval(() => {
- // 鎵惧埌褰撳墠鏃堕棿瀵瑰簲鐨勭储寮�
- const currentIndex = findClosestTimestampIndex(currentTime.value);
- const nextIndex = currentIndex + 1;
+ if (selectedScheme.value.type === 2) {
+ // 绫诲瀷涓� 2锛氭瘡 5 绉掕烦鍔ㄤ竴娆�
+ playInterval = setInterval(() => {
+ const fiveSeconds = 5;
+ const totalDuration = duration.value; // 鎬绘椂闀匡紙绉掞級
- // 濡傛灉宸茬粡鏄渶鍚庝竴涓椂闂寸偣锛屽仠姝㈡挱鏀�
- if (nextIndex >= waterTimestamps.value.length) {
- currentTime.value = duration.value;
- stopPlayback();
- isPlaying.value = false;
- emit("isPlaying", false);
- emit("playbackFinished", true);
- return;
- }
+ currentTime.value += fiveSeconds;
- // 鏇存柊鏃堕棿涓轰笅涓�涓椂闂寸偣鐨勬椂闂村樊锛堢锛�
- const nextTimestamp = waterTimestamps.value[nextIndex];
- const baseTimestamp = waterTimestamps.value[0];
- currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
+ if (currentTime.value >= totalDuration) {
+ currentTime.value = totalDuration;
+ stopPlayback();
+ isPlaying.value = false;
+ finishPlay.value = true;
+ emit("isPlaying", false);
+ emit("playbackFinished", true);
+ return;
+ }
- // 瑙﹀彂鏇存柊
- if (selectedScheme.value.type !== 2) {
+ // 瑙﹀彂杩涘害鏇存柊
+ const progress = currentTime.value / totalDuration;
+ emit("timeUpdate", progress * 100);
+
+ // 濡傛灉闇�瑕佽Е鍙戞煇浜涙洿鏂板嚱鏁帮紝涔熷彲浠ヤ繚鐣�
updateWaterColorByTime();
updateWeatherByProgress();
- }
+ }, 5000); // 姣� 5 绉掓墽琛屼竴娆�
+ } else {
+ // 杩欓噷闈㈣繕鏄綘鐨勬挱鏀句唬鐮侊紝涓婇潰鐨刬f涓槸浜旂閽熻烦鍔ㄤ竴娆＄殑瀹炴椂妯℃嫙
+ playInterval = setInterval(() => {
+ const currentIndex = findClosestTimestampIndex(currentTime.value);
+ const nextIndex = currentIndex + 1;
- const progress = currentTime.value / duration.value;
- emit("timeUpdate", progress * 100);
- }, 1000 / playbackRate.value); // 鏍规嵁鎾斁閫熺巼璋冩暣闂撮殧
+ if (nextIndex >= waterTimestamps.value.length) {
+ currentTime.value = duration.value;
+ stopPlayback();
+ isPlaying.value = false;
+ emit("isPlaying", false);
+ emit("playbackFinished", true);
+ return;
+ }
+
+ const nextTimestamp = waterTimestamps.value[nextIndex];
+ const baseTimestamp = waterTimestamps.value[0];
+ currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
+
+ if (selectedScheme.value.type !== 2) {
+ updateWaterColorByTime();
+ updateWeatherByProgress();
+ }
+
+ const progress = currentTime.value / duration.value;
+ emit("timeUpdate", progress * 100);
+ }, 1000 / playbackRate.value);
+ }
};
// 闄嶉洦鍙樺寲閮ㄥ垎
// 闄嶉洦鏁版嵁鐩稿叧鍙橀噺
@@ -428,10 +529,10 @@
}
// 鍏ㄥ眬鐘舵�佽褰�
const colorState = {
- maxStage: 0, // 璁板綍鍘嗗彶鏈�楂橀樁娈�
- maxAlpha: -0.3, // 璁板綍鍘嗗彶鏈�灏忛�忔槑搴︼紙璐熷�硷級
+ maxStage: 0, // 璁板綍鍘嗗彶鏈�楂橀樁娈�
+ maxAlpha: -0.3, // 璁板綍鍘嗗彶鏈�灏忛�忔槑搴︼紙璐熷�硷級
maxLuminance: 240.4, // 璁板綍鍘嗗彶鏈�浣庝寒搴︼紙瀵瑰簲stage 0鍒濆鍊硷級
- currentColor: "#F5F0E6" // 褰撳墠棰滆壊
+ currentColor: "#F5F0E6", // 褰撳墠棰滆壊
};
function updateWaterColorByTime() {
@@ -448,16 +549,16 @@
{ hex: "#D4B483", luminance: 184.0 }, // stage 3
{ hex: "#B78B6A", luminance: 148.4 }, // stage 4
{ hex: "#8B5A3A", luminance: 101.0 }, // stage 5
- { hex: "#4A3123", luminance: 54.9 } // stage 6
+ { hex: "#4A3123", luminance: 54.9 }, // stage 6
];
- const alphaStops = [1
- -0.3, // stage 0
- -0.4, // stage 1
- -0.5, // stage 2
- -0.6, // stage 3
- -0.7, // stage 4
- -0.75, // stage 5
- -0.8 // stage 6
+ const alphaStops = [
+ 1 - 0.3, // stage 0
+ -0.4, // stage 1
+ -0.5, // stage 2
+ -0.6, // stage 3
+ -0.7, // stage 4
+ -0.75, // stage 5
+ -0.8, // stage 6
];
// 3. 鏇存柊闃舵鐘舵��
updateStageState(intensity, IR);
@@ -472,10 +573,15 @@
function calculateRainData() {
const initialTimestamp = new Date(rainTotalInfo.value[0].time).getTime();
const currentTimestamp = new Date(
- rainTotalInfo.value[Math.min(
- Math.floor(currentTime.value / duration.value * (rainTotalInfo.value.length - 1)),
- rainTotalInfo.value.length - 2
- )].time
+ rainTotalInfo.value[
+ Math.min(
+ Math.floor(
+ (currentTime.value / duration.value) *
+ (rainTotalInfo.value.length - 1)
+ ),
+ rainTotalInfo.value.length - 2
+ )
+ ].time
).getTime();
// 闄嶉洦寮哄害璁＄畻锛堝甫鎻掑�硷級
@@ -486,7 +592,8 @@
index = rainTotalInfo.value.length - 2; // 闃叉 index+1 瓒婄晫
}
const lerpAlpha = floatIndex - index;
- const intensity = rainTotalInfo.value[index].intensity * (1 - lerpAlpha) +
+ const intensity =
+ rainTotalInfo.value[index].intensity * (1 - lerpAlpha) +
rainTotalInfo.value[index + 1].intensity * lerpAlpha;
// 涓寸晫闄嶉洦寮哄害璁＄畻
@@ -524,7 +631,13 @@
const stageThresholds = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
const lowerThreshold = stageThresholds[colorState.maxStage - 1] * IR;
const upperThreshold = stageThresholds[colorState.maxStage] * IR;
- const ratio = Math.min(1, Math.max(0, (intensity - lowerThreshold) / (upperThreshold - lowerThreshold)));
+ const ratio = Math.min(
+ 1,
+ Math.max(
+ 0,
+ (intensity - lowerThreshold) / (upperThreshold - lowerThreshold)
+ )
+ );
// 棰滆壊鎻掑��
const startColor = colorStops[colorState.maxStage];
@@ -538,22 +651,26 @@
colorState.maxLuminance = newLuminance;
colorState.maxAlpha = Math.min(
colorState.maxAlpha,
- lerp(alphaStops[colorState.maxStage], alphaStops[colorState.maxStage + 1], ratio)
+ lerp(
+ alphaStops[colorState.maxStage],
+ alphaStops[colorState.maxStage + 1],
+ ratio
+ )
);
}
- console.log(`闃舵: ${colorState.maxStage} | 浜害: ${colorState.maxLuminance.toFixed(1)} | 棰滆壊: ${colorState.currentColor}`);
+ console.log(
+ `闃舵: ${colorState.maxStage} | 浜害: ${colorState.maxLuminance.toFixed(
+ 1
+ )} | 棰滆壊: ${colorState.currentColor}`
+ );
}
// 棰滆壊鎻掑�煎伐鍏峰嚱鏁�
function lerpColor(c1, c2, t) {
const [r1, g1, b1] = hexToRgb(c1);
const [r2, g2, b2] = hexToRgb(c2);
- return rgbToHex(
- r1 + (r2 - r1) * t,
- g1 + (g2 - g1) * t,
- b1 + (b2 - b1) * t
- );
+ return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
}
function calculateLuminance(hex) {
@@ -567,7 +684,9 @@
}
function rgbToHex(r, g, b) {
- return `#${[r, g, b].map(x => Math.round(x).toString(16).padStart(2, '0')).join('')}`;
+ return `#${[r, g, b]
+ .map((x) => Math.round(x).toString(16).padStart(2, "0"))
+ .join("")}`;
}
function lerp(a, b, t) {
@@ -774,6 +893,91 @@
{ immediate: true }
);
+const jsonFetch = ref(null);
+
+// 鎻愬彇涓虹嫭绔嬪嚱鏁�
+async function initializeSimulationData(force = false) {
+ try {
+ const schemeInfo = selectedScheme.value;
+
+ // 濡傛灉涓嶆槸 type == 2 涓旈潪寮哄埗鎵ц锛屽垯璺宠繃
+ if (schemeInfo.type !== 2 && !force) {
+ getRainfallData();
+ speedShow.value = true;
+ jsonFetch.value = null;
+ return;
+ }
+
+ speedShow.value = false;
+ jsonFetch.value = layerDate.value;
+ serviceInfo = schemeInfo.serviceName;
+
+ // console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo);
+
+ // 鏍规嵁 layer.json 鑾峰彇鏃堕棿杞翠俊鎭�
+ const {
+ waterTimestamps: timestamps,
+ watersMaxHeight,
+ watersMinHeight,
+ } = await fetchWaterSimulationData(serviceInfo, jsonFetch.value);
+
+ console.log(
+ "褰撳墠鏂规涓嬬殑鏈�澶ф按浣嶆繁搴﹀拰鏈�灏忔按浣嶆繁搴�",
+ watersMaxHeight,
+ watersMinHeight
+ );
+
+ // 鏇存柊鏃堕棿杞寸浉鍏虫暟鎹�
+ if (timestamps) {
+ frameNum.value = timestamps.length;
+ waterTimestamps.value = timestamps;
+ updateTimelineRange();
+ timeMarkers.value = generateTimeMarkers(timestamps);
+ sendCurrentPlayingTime.value = timestamps[0];
+ currentPlayingTime.value = dayjs(timestamps[0]).format(
+ "YYYY-MM-DD HH:mm:ss"
+ );
+ }
+
+ minFlowRate = watersMinHeight;
+ maxFlowRate = watersMaxHeight;
+ } catch (error) {
+ console.error("Error loading water simulation data:", error);
+ ElMessage({
+ message: "闄嶉洦鏁版嵁鍑洪敊锛岃閲嶆柊鏂板缓妯℃嫙鏂规锛�",
+ type: "warning",
+ });
+ }
+}
+
+// 鎸傝浇鏃惰皟鐢�
+onMounted(async () => {
+ // 鍥犱负杩欎釜鍑芥暟瀹炴椂妯℃嫙鐩戝惉涔熼渶瑕佷娇鐢紝鎵�浠ュ皝瑁呬簡涓�涓嚱鏁�
+ await initializeSimulationData();
+});
+
+const shouldAutoPlay = ref(false);
+
+// 鐩戝惉 layerDate 鍙樺寲鍚庢爣璁板噯澶囨挱鏀�
+watch(
+ () => layerDate.value,
+ async (newVal) => {
+ if (selectedScheme.value.type === 2 && newVal) {
+ shouldAutoPlay.value = true;
+ }
+ },
+ { deep: true }
+);
+
+// 绛夊緟 finishPlay 鎴愬姛鍚庡啀鎾斁
+watchEffect(() => {
+ if (shouldAutoPlay.value && finishPlay.value && !isPlaying.value) {
+ initializeSimulationData();
+ togglePlay();
+ shouldAutoPlay.value = false;
+ }
+});
+
onMounted(async () => {
try {
// 褰撳墠鏂规鐨勬墍鏈変俊鎭�
@@ -825,6 +1029,7 @@
});
}
});
+
// 鏍规嵁杩斿洖鏁版嵁鐨勪釜鏁板幓娓叉煋鏃堕棿杞�
function updateTimelineRange() {
if (waterTimestamps.value.length > 0) {
@@ -844,6 +1049,9 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
endSimulate();
+ // 鍋滄瀹炴椂妯℃嫙瀹氭椂鍣�
+ EventBus.emit("close-time");
+
isWaterPrimitiveCreated.value = false;
if (ratelevelRef.value) {
ratelevelRef.value.endCalculation();
diff --git a/src/components/monifangzhen/schemeCard.vue b/src/components/monifangzhen/schemeCard.vue
index 92c915a..32073b0 100644
--- a/src/components/monifangzhen/schemeCard.vue
+++ b/src/components/monifangzhen/schemeCard.vue
@@ -23,7 +23,12 @@
<el-button size="small" @click="setSchemClick(item)"
>鏂规璇︽儏</el-button
>
- <el-button size="small" @click="startPlay(item)">杩涘叆妯℃嫙</el-button>
+ <el-button
+ size="small"
+ v-show="item.type !== 2"
+ @click="startPlay(item)"
+ >杩涘叆妯℃嫙</el-button
+ >
<!-- :disabled="item.status !== 2" -->
</div>
</div>
@@ -97,6 +102,7 @@
const realTimeSimInterval = ref(null);
async function startPlay(item) {
+ console.log(item, "item");
if (item.status === 2) {
ElMessage.warning("褰撳墠鏂规姝ｅ湪鍒嗘瀽涓�,鏃犳硶杩涘叆妯℃嫙锛�");
return;
@@ -172,7 +178,6 @@
try {
const ress = await getSimStart(item.id);
- console.log(ress, "resssssssss");
const res = await getSimDataById(item.id);
item.serviceName = res.data[0]?.serviceName || null;
@@ -181,7 +186,6 @@
if (ress.code === 200) {
simStore.layerDate = ress.data;
- console.log(simStore.layerDate,'aaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb')
initeWaterPrimitiveView();
emit("start");
}
diff --git a/src/views/left/KGSimOption/RealTimeSimulation.vue b/src/views/left/KGSimOption/RealTimeSimulation.vue
index 3ca2832..2f0277f 100644
--- a/src/views/left/KGSimOption/RealTimeSimulation.vue
+++ b/src/views/left/KGSimOption/RealTimeSimulation.vue
@@ -73,15 +73,20 @@
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({
@@ -200,12 +205,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 +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);
- EventBus.emit("close-selectArea");
- initeWaterPrimitiveView();
- startSimulate();
+
+ // 淇濆瓨鏂规
+ const resApi = await simAPIStore.addSimCheme(formData);
+ const schemeId = resApi.data?.data?.id;
+
+ if (!schemeId) {
+ ElMessage.error("鏂规淇濆瓨澶辫触锛屾湭鑾峰彇鍒版湁鏁� ID");
+ return;
+ }
+
+ // 鏄剧ず鍔犺浇涓彁绀�
+ 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);
+ }
+
+ // EventBus.emit("close-selectArea");
}
+
+// 鍚姩杞鍑芥暟
+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;
@@ -240,6 +320,11 @@
const futurePredictions = () => {
console.log("鏈潵棰勬祴鎸夐挳琚偣鍑�");
};
+
+onUnmounted(() => {
+ EventBus.off("close-time");
+ stopPolling();
+});
</script>
<style scoped>
--
Gitblit v1.9.3