From 6a49df434afa2dee8e38063ad96ac118f53429ef Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 29 四月 2025 18:05:07 +0800
Subject: [PATCH] 修改
---
src/components/menu/TimeLine.vue | 79 +++++++++++++++++++++++++++++----------
1 files changed, 59 insertions(+), 20 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index e8c4336..7c3c7c9 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>
@@ -25,21 +35,39 @@
<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>
<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>
@@ -64,10 +92,10 @@
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
-import { useSimStore } from '@/store/simulation'
-import { storeToRefs } from 'pinia'
-const simStore = useSimStore()
-const { selectedScheme } = storeToRefs(simStore)
+import { useSimStore } from "@/store/simulation";
+import { storeToRefs } from "pinia";
+const simStore = useSimStore();
+const { selectedScheme } = storeToRefs(simStore);
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
@@ -123,9 +151,12 @@
startPlayback();
if (!isWaterPrimitiveCreated.value) {
// 绗竴娆℃挱鏀炬椂鍒涘缓姘翠綋妯℃嫙灞�
- console.log(selectedScheme.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 {
// 鍚庣画鎾斁鏃惰皟鐢ㄦ仮澶嶆帴鍙�
@@ -137,7 +168,6 @@
pauseWaterSimulation(); // 璋冪敤鏆傚仠鎺ュ彛
}
};
-
const intervalMap = {
1: 1000, // 1鍊嶉��
@@ -188,13 +218,19 @@
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) => {
@@ -237,7 +273,10 @@
let minDiff = Infinity;
waterTimestamps.value.forEach((timestamp, index) => {
- const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
+ const diff = Math.abs(
+ dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
+ currentTimeValue
+ );
if (diff < minDiff) {
minDiff = diff;
closestIndex = index;
@@ -250,11 +289,11 @@
() => selectedScheme.value,
(newVal) => {
if (newVal) {
- console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
+ console.log("閫変腑鏂规宸叉敼鍙�:", newVal);
// 浣犲彲浠ヨЕ鍙戜竴浜涢�昏緫锛屾瘮濡傝皟鎺ュ彛绛�
}
}
-)
+);
watch(
() => currentTime.value,
() => {
@@ -334,7 +373,7 @@
function handleBack() {
ElMessage({ message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
endSimulate();
- isWaterPrimitiveCreated.value = false
+ isWaterPrimitiveCreated.value = false;
destoryWaterPrimitive();
EventBus.emit("hide-schemeInfo");
}
--
Gitblit v1.9.3