From f16045cde17854377084335c478e3cae0d08d6b8 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 15 五月 2025 14:18:38 +0800
Subject: [PATCH] change
---
src/components/menu/TimeLine.vue | 89 ++++++++++++++++++++++++++++++++------------
1 files changed, 64 insertions(+), 25 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index ed7aebc..a020297 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -28,6 +28,10 @@
<div v-for="(date, index) in visibleDates" :key="index" class="date-label">
<!-- {{ formatDate(date) }} -->
</div>
+ <!-- 涓撻娓叉煋:
+ <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px"
+ :disabled="!isPlaying || !isWaterPrimitiveCreated" /> -->
+ <!-- active-text="寮�" inactive-text="鍏�" -->
</div>
<div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
<div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
@@ -39,7 +43,12 @@
</div>
</div>
</div>
- <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button>
+ <div>
+ <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation"
+ style="margin-top: 8px; margin-left: 28px; margin-right: 10px;justify-content: flex-end;"></ratelevel>
+ <el-button @click="handleBack" style="margin-top: 3px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button>
+ </div>
+
</div>
</template>
@@ -54,14 +63,16 @@
inject,
reactive
} from "vue";
+import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
+
import dayjs from "dayjs";
-import { getRainfall } from "@/api/index";
import {
createWaterPrimitive,
destoryWaterPrimitive,
pauseWaterSimulation,
resumeWaterSimulation,
setTimeForWaterSimulation,
+ toggleWaterColorRender,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
@@ -71,9 +82,7 @@
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
-
-const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
-
+const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
// 瀹氫箟props
const props = defineProps({
waterSimulateParams: {
@@ -83,9 +92,10 @@
}),
},
});
-
// 鍝嶅簲寮忕姸鎬�
+const ratelevelRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
const currentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
+const sendCurrentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
const isPlaying = ref(false);
const playbackFinished = ref(true);
const currentTime = ref(0);
@@ -96,7 +106,7 @@
const waterTimestamps = ref([]); // 瀛樺偍鏃堕棿杞存暟鎹�
const timeMarkers = ref([]);
const timelineTrack = ref(null);
-// 鏂板鏍囪瘑鍙橀噺
+const isColorRenderEnabled = ref(false); // 鍋囪杩欐槸浣犵殑棰滆壊娓叉煋寮�鍏崇姸鎬�
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
const isRainEnabled = ref(false);
@@ -107,8 +117,6 @@
rainDensity: 30 // 闆ㄧ殑瀵嗗害
});
// 璁＄畻灞炴��
-const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
-const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
const progressPercentage = computed(
() => (currentTime.value / duration.value) * 100
);
@@ -117,40 +125,62 @@
new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
).map((date) => dayjs(date).toDate())
);
-const currentTimeFormatted = computed(() => formatTime(currentTime.value));
// 鎾斁鎺у埗
const togglePlay = () => {
if (!isPlaying.value && currentTime.value >= duration.value)
- currentTime.value = 0; // 濡傛灉宸茬粡鎾斁瀹屾瘯锛岄噸缃椂闂�
+ currentTime.value = 0;
+
isPlaying.value = !isPlaying.value;
emit("isPlaying", isPlaying.value);
+
if (isPlaying.value) {
startPlayback();
+
if (!isWaterPrimitiveCreated.value) {
- // 绗竴娆℃挱鏀炬椂鍒涘缓姘翠綋妯℃嫙灞�
console.log(selectedScheme.value, '杩欓噷鏄綋鍓嶆柟妗堢殑鍏ㄩ儴淇℃伅');
- createWaterPrimitive({ interval: intervalMap[playbackRate.value], baseUrl: "/simu/c2h1dc" });
- isWaterPrimitiveCreated.value = true; // 鏍囪涓哄凡鍒涘缓
+ // 杩欓噷閫氳繃water.js涓幓鍙戦�佽姹傝幏鍙栨按闈㈡ā鎷�
+ createWaterPrimitive({
+ baseUrl: "/simu/20250515111549",
+ interval: intervalMap[playbackRate.value],
+ colorRender: isColorRenderEnabled.value
+ });
+ isWaterPrimitiveCreated.value = true;
} else {
- // 鍚庣画鎾斁鏃惰皟鐢ㄦ仮澶嶆帴鍙�
resumeWaterSimulation();
+ toggleWaterColorRender(isColorRenderEnabled.value); // 鏇存柊棰滆壊娓叉煋
}
+
if (currentTime.value === 0) emit("playbackFinished", false);
- // 鎭㈠涓嬮洦鏁堟灉
+
if (isRainEnabled.value) {
mapUtils.toggleRain(rainParams, true);
}
} else {
stopPlayback();
- pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
- // 鍋滄涓嬮洦鏁堟灉
- isRainEnabled.value = true; // 淇濆瓨褰撳墠闇�瑕佷笅闆ㄧ殑鐘舵��
+ pauseWaterSimulation();
+
+ isRainEnabled.value = true;
setTimeout(() => {
mapUtils.delRain();
}, 3000);
}
};
+// 棰滆壊娓叉煋鍒囨崲浜嬩欢
+const handleColorRenderChange = (enabled) => {
+ if (!isPlaying.value) {
+ ElMessage({
+ message: "璇峰厛鍚姩姘翠綋妯℃嫙鍚庡啀杩涜涓撻鏁堟灉鍒囨崲銆�",
+ type: "warning",
+ });
+ return; // 闃绘鍚庣画閫昏緫鎵ц
+ }
+ if (isWaterPrimitiveCreated.value) {
+ console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled);
+ emit("isColorRender", enabled)
+ toggleWaterColorRender(enabled);
+ }
+};
const intervalMap = {
1: 1000, // 1鍊嶉��
2: 500, // 2鍊嶉��
@@ -159,7 +189,7 @@
};
// 鎾斁閫昏緫
const startPlayback = () => {
- const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
+ // const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
clearInterval(playInterval); // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
playInterval = setInterval(() => {
const timeIncrement = playbackRate.value; // 鍊嶉�熶綔涓哄閲�
@@ -419,9 +449,12 @@
() => currentTime.value,
() => {
if (waterTimestamps.value.length > 0) {
- currentPlayingTime.value = dayjs(waterTimestamps.value[0])
+ sendCurrentPlayingTime.value = dayjs(waterTimestamps.value[0])
.add(currentTime.value, "second")
- .format("YYYY-MM-DD mm:ss");
+ .valueOf(); // 浣跨敤 valueOf() 鑾峰彇鍘熷鏃堕棿鎴�
+
+ // 鏇存柊 currentPlayingTime 鏍煎紡鍖栧悗鐨勬椂闂村瓧绗︿覆
+ currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
EventBus.emit("time-update", currentPlayingTime.value);
}
}
@@ -432,12 +465,12 @@
if (!timestamps || timestamps.length === 0) return [];
const sorted = [...timestamps].sort((a, b) => dayjs(a).diff(dayjs(b)));
const interval = Math.floor(
- dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7
+ dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 5
);
- return Array.from({ length: 8 }, (_, i) =>
+ return Array.from({ length: 6 }, (_, i) =>
dayjs(sorted[0])
.add(i * interval, "second")
- .format("mm:ss")
+ .format("HH:mm:ss")
);
}
@@ -453,11 +486,13 @@
onMounted(async () => {
try {
getRainfallData()
+ // 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
if (timestamps) {
waterTimestamps.value = timestamps;
updateTimelineRange();
timeMarkers.value = generateTimeMarkers(timestamps);
+ sendCurrentPlayingTime.value = timestamps[0]
currentPlayingTime.value = dayjs(timestamps[0]).format(
"YYYY-MM-DD HH:mm:ss"
);
@@ -492,6 +527,10 @@
const { endSimulate } = inject("simulateActions");
function handleBack() {
+ if (ratelevelRef.value) {
+ ratelevelRef.value.endCalculation();
+ }
+ emit("isColorRender", false);
setTimeout(() => {
mapUtils.delRain();
}, 3000);
--
Gitblit v1.9.3