From c49a96c05e686a1c333998b944bf69055341cdf4 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 30 四月 2025 17:03:42 +0800
Subject: [PATCH] c
---
src/components/menu/TimeLine.vue | 94 ++++++++++++++++++++++++++++++++++++++++-------
src/utils/tools.js | 2
2 files changed, 81 insertions(+), 15 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index e8c4336..8496f8e 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -52,8 +52,10 @@
defineProps,
onBeforeUnmount,
inject,
+ reactive
} from "vue";
import dayjs from "dayjs";
+import { getRainfall } from "@/api/index";
import {
createWaterPrimitive,
destoryWaterPrimitive,
@@ -61,6 +63,7 @@
resumeWaterSimulation,
setTimeForWaterSimulation,
} from "@/utils/water";
+import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
@@ -96,7 +99,13 @@
// 鏂板鏍囪瘑鍙橀噺
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
-
+const isRainEnabled = ref(false);
+const rainParams = reactive({
+ rainSize: 0.5,
+ rainSpeed: 50,
+ rainColor: "#99B3CC",
+ rainDensity: 30 // 闆ㄧ殑瀵嗗害
+});
// 璁＄畻灞炴��
const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
@@ -124,20 +133,30 @@
if (!isWaterPrimitiveCreated.value) {
// 绗竴娆℃挱鏀炬椂鍒涘缓姘翠綋妯℃嫙灞�
console.log(selectedScheme.value, '杩欓噷鏄綋鍓嶆柟妗堢殑鍏ㄩ儴淇℃伅');
-
- createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc",});
+ createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc" });
isWaterPrimitiveCreated.value = true; // 鏍囪涓哄凡鍒涘缓
} else {
// 鍚庣画鎾斁鏃惰皟鐢ㄦ仮澶嶆帴鍙�
resumeWaterSimulation();
}
+
if (currentTime.value === 0) emit("playbackFinished", false);
+
+ // 鎭㈠涓嬮洦鏁堟灉
+ if (isRainEnabled.value) {
+ mapUtils.toggleRain(rainParams, true);
+ }
} else {
stopPlayback();
pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
+
+ // 鍋滄涓嬮洦鏁堟灉
+ isRainEnabled.value = true; // 淇濆瓨褰撳墠闇�瑕佷笅闆ㄧ殑鐘舵��
+ setTimeout(() => {
+ mapUtils.delRain();
+ }, 3000);
}
};
-
const intervalMap = {
1: 1000, // 1鍊嶉��
@@ -148,22 +167,61 @@
// 鎾斁閫昏緫
const startPlayback = () => {
const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
- clearInterval(playInterval); // 纭繚娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
+ clearInterval(playInterval); // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
playInterval = setInterval(() => {
const timeIncrement = playbackRate.value; // 鍊嶉�熶綔涓哄閲�
currentTime.value += timeIncrement;
-
if (currentTime.value >= duration.value) {
currentTime.value = duration.value; // 鍋滃湪鏈�鍚庝竴甯�
stopPlayback();
isPlaying.value = false;
emit("isPlaying", false);
emit("playbackFinished", true);
+ setTimeout(() => {
+ mapUtils.delRain();
+ }, 3000);
}
-
- emit("timeUpdate", progressPercentage.value);
- }, 1000); // 鏍规嵁閫熺巼璋冩暣闂撮殧
+ updateWeatherByProgress(); // 鏍规嵁褰撳墠杩涘害鏇存柊澶╂皵
+ // 璁＄畻鎾斁杩涘害鐧惧垎姣� [0, 1]
+ const progress = currentTime.value / duration.value;
+ emit("timeUpdate", progress * 100); // 鐧惧垎姣斾笂鎶�
+ }, 1000); // 娉ㄦ剰浣跨敤interval鑰岄潪鍥哄畾1000ms
};
+let rainFallValues = ref([]); // 鐢ㄤ簬瀛樺偍鎻愬彇鐨剉alue鏁扮粍
+let minRainValue = ref(Infinity);
+let maxRainValue = ref(-Infinity);
+function getRainfallData() {
+ getRainfall().then((res) => {
+ rainFallValues.value = res;
+ // 鎻愬彇value鍊�
+ rainFallValues.value = rainFallValues.value.data.map(item => item.value);
+ // 璁＄畻min鍜宮ax闆ㄩ噺鍊�
+ minRainValue.value = Math.min(...rainFallValues.value);
+ maxRainValue.value = Math.max(...rainFallValues.value);
+ console.log(minRainValue.value, maxRainValue.value, 'min and max rain values');
+ });
+}
+// 绾挎�ф槧灏勫嚱鏁�
+function mapValue(value, fromLow, fromHigh, toLow, toHigh) {
+ return (value - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
+}
+// 鏍规嵁褰撳墠鎾斁杩涘害鏇存柊澶╂皵
+// 鎴戣繖閲岃鏄帴鍏ョ湡瀹炴暟鎹悗锛屾瘡涓暟鎹�
+function updateWeatherByProgress() {
+ const progress = currentTime.value / duration.value;
+ // 璁＄畻褰撳墠杩涘害瀵瑰簲浜� rainFallValues 鏁扮粍涓殑浣嶇疆
+ const index = Math.floor(progress * (rainFallValues.value.length - 1));
+ const rainValue = rainFallValues.value[index]; // 鑾峰彇瀵瑰簲鐨勯檷闆ㄩ噺 value
+ // 鏍规嵁褰撳墠闆ㄩ噺鍔ㄦ�佽皟鏁撮洦鐨勫弬鏁�
+ // const rainParams = {
+ // rainSize: mapValue(rainValue, minRainValue.value, maxRainValue.value, 0.5, 1.5), // 闆ㄦ淮澶у皬锛氫粠灏忓埌澶�
+ // rainSpeed: mapValue(rainValue, minRainValue.value, maxRainValue.value, 30, 120), // 闆ㄩ�燂細浠庢參鍒板揩
+ // rainDensity: mapValue(rainValue, minRainValue.value, maxRainValue.value, 20, 120), // 瀵嗗害锛氫粠绋�鐤忓埌瀵嗛泦
+ // rainColor: "#99B3CC" // 鍙互鍦ㄦ鍩虹涓婂鍔犻鑹插彉鍖栭�昏緫锛屼緥濡傛毚闆ㄤ负娣辫摑绛�
+ // };
+ // 璋冪敤宸ュ叿鏂规硶鏇存柊涓嬮洦鏁堟灉
+ mapUtils.toggleRain(rainParams, true);
+}
const stopPlayback = () => {
clearInterval(playInterval);
@@ -183,18 +241,26 @@
showSpeedMenu.value = false;
// 鍋滄褰撳墠鎾斁
stopPlayback();
-
+ setTimeout(() => {
+ mapUtils.delRain();
+ }, 3000);
// 閲嶇疆鏃堕棿杞村埌鍒濆鐘舵��
currentTime.value = 0; // 鏃堕棿褰掗浂
emit("timeUpdate", progressPercentage.value);
isPlaying.value = false;
+ emit("isPlaying", false);
+
// 閿�姣佺幇鏈夌殑姘翠綋妯℃嫙灞�
if (isWaterPrimitiveCreated.value) {
destoryWaterPrimitive();
isWaterPrimitiveCreated.value = false; // 閲嶇疆鏍囧織鍙橀噺
}
isPlaying.value = false;
+ emit("isPlaying", false);
+
pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
+ EventBus.emit("clear-echart");
+ EventBus.emit("reset-table");
};
// 鏃堕棿杞磋烦杞�
const seekToPosition = (event) => {
@@ -220,7 +286,6 @@
"Time:",
dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
);
-
// 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞��
setTimeForWaterSimulation(closestIndex);
@@ -235,7 +300,6 @@
function findClosestTimestampIndex(currentTimeValue) {
let closestIndex = 0;
let minDiff = Infinity;
-
waterTimestamps.value.forEach((timestamp, index) => {
const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
if (diff < minDiff) {
@@ -251,7 +315,6 @@
(newVal) => {
if (newVal) {
console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
- // 浣犲彲浠ヨЕ鍙戜竴浜涢�昏緫锛屾瘮濡傝皟鎺ュ彛绛�
}
}
)
@@ -262,7 +325,6 @@
currentPlayingTime.value = dayjs(waterTimestamps.value[0])
.add(currentTime.value, "second")
.format("YYYY-MM-DD mm:ss");
-
EventBus.emit("time-update", currentPlayingTime.value);
}
}
@@ -293,6 +355,7 @@
onMounted(async () => {
try {
+ getRainfallData()
const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
if (timestamps) {
waterTimestamps.value = timestamps;
@@ -332,6 +395,9 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
+ setTimeout(() => {
+ mapUtils.delRain();
+ }, 3000);
ElMessage({ message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
endSimulate();
isWaterPrimitiveCreated.value = false
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 57e120f..488ee6c 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -53,7 +53,7 @@
},
// 闆ㄥぉ妯℃嫙
toggleRain(option, show) {
- console.log(option, "option");
+ // console.log(option, "option");
// 鍏堥攢姣佹棫瀹炰緥
if (this.rainEffect) {
this.rainEffect.destroy();
--
Gitblit v1.9.3