From 94dc999e2107401cb9e6c65dd67bc17eecc5e548 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期一, 28 四月 2025 11:40:02 +0800
Subject: [PATCH] 修改图表时间以及将避险点修改为避险场所
---
src/components/menu/TimeLine.vue | 145 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 105 insertions(+), 40 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index dd4acc6..438e694 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">
<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>
@@ -24,24 +34,40 @@
<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 class="current-date">褰撳墠鎾斁鏃堕棿锛歿{ currentPlayingTime }}</div>
+ <div
+ v-for="(date, index) in visibleDates"
+ :key="index"
+ class="date-label"
+ >
<!-- {{ formatDate(date) }} -->
</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="time-markers">
- <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
+ <div
+ v-for="(time, index) in timeMarkers"
+ :key="index"
+ class="time-marker"
+ >
{{ time }}
</div>
</div>
</div>
</div>
- <el-button @click="handleBack" style="margin-top: 26px;margin-left: 30px;margin-right: 10px;">缁撴潫妯℃嫙</el-button>
+ <el-button
+ @click="handleBack"
+ style="margin-top: 26px; margin-left: 30px; margin-right: 10px"
+ >缁撴潫妯℃嫙</el-button
+ >
</div>
</template>
@@ -59,7 +85,7 @@
import { createWaterPrimitive, destoryWaterPrimitive } from "@/utils/water";
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
-import { ElMessage } from 'element-plus';
+import { ElMessage } from "element-plus";
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
@@ -91,7 +117,9 @@
// 璁＄畻灞炴��
const startDate = computed(() => dayjs(props.waterSimulateParams.date[0]));
const endDate = computed(() => dayjs(props.waterSimulateParams.date[1]));
-const progressPercentage = computed(() => (currentTime.value / duration.value) * 100);
+const progressPercentage = computed(
+ () => (currentTime.value / duration.value) * 100
+);
const visibleDates = computed(() =>
Array.from(
new Set(waterTimestamps.value.map((ts) => dayjs(ts).format("YYYY-MM-DD")))
@@ -102,7 +130,8 @@
// 鎾斁鎺у埗
const togglePlay = () => {
// 濡傛灉褰撳墠鏄仠姝㈢姸鎬佷笖宸茬粡鎾斁瀹屾瘯锛岀偣鍑绘椂閲嶇疆鏃堕棿
- if (!isPlaying.value && currentTime.value >= duration.value) currentTime.value = 0;
+ if (!isPlaying.value && currentTime.value >= duration.value)
+ currentTime.value = 0;
isPlaying.value = !isPlaying.value;
emit("isPlaying", isPlaying.value);
if (isPlaying.value) {
@@ -113,9 +142,9 @@
};
const intervalMap = {
1: 1000, // 1鍊嶉��
- 2: 500, // 2鍊嶉��
- 4: 250, // 4鍊嶉��
- 8: 125, // 8鍊嶉��
+ 2: 500, // 2鍊嶉��
+ 4: 250, // 4鍊嶉��
+ 8: 125, // 8鍊嶉��
};
const startPlayback = () => {
// 鏍规嵁褰撳墠鍊嶉�熻幏鍙栧搴旂殑 interval
@@ -141,8 +170,10 @@
};
const stopPlayback = () => clearInterval(playInterval);
-const skipForward = () => (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 鍚戝墠璺宠浆1绉�
-const skipBackward = () => (currentTime.value = Math.max(currentTime.value - 1, 0)); // 鍚戝悗璺宠浆1绉�
+const skipForward = () =>
+ (currentTime.value = Math.min(currentTime.value + 1, duration.value)); // 鍚戝墠璺宠浆1绉�
+const skipBackward = () =>
+ (currentTime.value = Math.max(currentTime.value - 1, 0)); // 鍚戝悗璺宠浆1绉�
const toggleSpeedMenu = () => (showSpeedMenu.value = !showSpeedMenu.value);
const setPlaybackRate = (rate) => {
playbackRate.value = rate;
@@ -155,27 +186,50 @@
currentTime.value = Math.round(percentage * duration.value);
emit("timeUpdate", progressPercentage.value);
if (waterTimestamps.value.length > 0) {
- const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(currentTime.value, "second");
- console.log("Clicked timestamp:", clickedTimestamp.valueOf(), clickedTimestamp.format("YYYY-MM-DD HH:mm:ss"));
+ const clickedTimestamp = dayjs(waterTimestamps.value[0]).add(
+ currentTime.value,
+ "second"
+ );
+ console.log(
+ "Clicked timestamp:",
+ clickedTimestamp.valueOf(),
+ clickedTimestamp.format("YYYY-MM-DD HH:mm:ss")
+ );
}
};
-watch(() => currentTime.value, () => {
- if (waterTimestamps.value.length > 0) {
- currentPlayingTime.value = dayjs(waterTimestamps.value[0])
- .add(currentTime.value, "second")
- .format("YYYY-MM-DD mm:ss");
+watch(
+ () => currentTime.value,
+ () => {
+ if (waterTimestamps.value.length > 0) {
+ currentPlayingTime.value = dayjs(waterTimestamps.value[0])
+ .add(currentTime.value, "second")
+ .format("YYYY-MM-DD mm:ss");
+
+ EventBus.emit("time-update", currentPlayingTime.value);
+ }
}
-});
+);
// 鏃堕棿鏍囪鐢熸垚
function generateTimeMarkers(timestamps) {
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);
- return Array.from({ length: 8 }, (_, i) => dayjs(sorted[0]).add(i * interval, "second").format("mm:ss"));
+ const interval = Math.floor(
+ dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 7
+ );
+ return Array.from({ length: 8 }, (_, i) =>
+ dayjs(sorted[0])
+ .add(i * interval, "second")
+ .format("mm:ss")
+ );
}
-watch(() => waterTimestamps.value, (newTimestamps) => {
- if (newTimestamps.length > 0) timeMarkers.value = generateTimeMarkers(newTimestamps);
-}, { immediate: true });
+watch(
+ () => waterTimestamps.value,
+ (newTimestamps) => {
+ if (newTimestamps.length > 0)
+ timeMarkers.value = generateTimeMarkers(newTimestamps);
+ },
+ { immediate: true }
+);
onMounted(async () => {
try {
@@ -184,7 +238,9 @@
waterTimestamps.value = timestamps;
updateTimelineRange();
timeMarkers.value = generateTimeMarkers(timestamps);
- currentPlayingTime.value = dayjs(timestamps[0]).format("YYYY-MM-DD HH:mm:ss");
+ currentPlayingTime.value = dayjs(timestamps[0]).format(
+ "YYYY-MM-DD HH:mm:ss"
+ );
}
} catch (error) {
console.error("Error loading water simulation data:", error);
@@ -193,21 +249,30 @@
function updateTimelineRange() {
if (waterTimestamps.value.length > 0) {
- const [first, last] = [waterTimestamps.value[0], waterTimestamps.value.at(-1)];
- props.waterSimulateParams.date = [dayjs(first).toISOString(), dayjs(last).toISOString()];
+ const [first, last] = [
+ waterTimestamps.value[0],
+ waterTimestamps.value.at(-1),
+ ];
+ props.waterSimulateParams.date = [
+ dayjs(first).toISOString(),
+ dayjs(last).toISOString(),
+ ];
duration.value = dayjs(last).diff(dayjs(first), "second");
- console.log("Updated timeline range:", { ...props.waterSimulateParams, duration: duration.value });
+ console.log("Updated timeline range:", {
+ ...props.waterSimulateParams,
+ duration: duration.value,
+ });
}
}
onBeforeUnmount(() => {
stopPlayback();
- destoryWaterPrimitive();
+ // destoryWaterPrimitive();
});
const { endSimulate } = inject("simulateActions");
function handleBack() {
- ElMessage({ message: '妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...', type: 'success' }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
+ ElMessage({ message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
endSimulate();
- destoryWaterPrimitive();
+ // destoryWaterPrimitive();
EventBus.emit("hide-schemeInfo");
}
</script>
--
Gitblit v1.9.3