From 7531b19bd939ca49c213667d7509a55b2be6c1ef Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 15 五月 2025 17:41:45 +0800
Subject: [PATCH] change
---
src/components/menu/TimeLine.vue | 77 +++++++++++++++++++++++++++++---------
1 files changed, 59 insertions(+), 18 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index a020297..5db41cf 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -36,16 +36,25 @@
<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="scale-markers">
+ <div class="scale-marker" style="left: 0%"></div>
+ <div class="scale-marker" style="left: 25%"></div>
+ <div class="scale-marker" style="left: 50%"></div>
+ <div class="scale-marker" style="left: 75%"></div>
+ <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">
- {{ time }}
+ <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>
</div>
</div>
</div>
<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>
+ style="margin-top: 12px; 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>
@@ -93,6 +102,7 @@
},
});
// 鍝嶅簲寮忕姸鎬�
+let serviceInfo = ref(null); // 褰撳墠鏂规鐨勬湇鍔″湴鍧�
const ratelevelRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
const currentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
const sendCurrentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
@@ -137,10 +147,10 @@
startPlayback();
if (!isWaterPrimitiveCreated.value) {
- console.log(selectedScheme.value, '杩欓噷鏄綋鍓嶆柟妗堢殑鍏ㄩ儴淇℃伅');
+ console.log(serviceInfo, '杩欓噷鏄綋鍓嶆柟妗堢殑鏈嶅姟淇℃伅锛�');
// 杩欓噷閫氳繃water.js涓幓鍙戦�佽姹傝幏鍙栨按闈㈡ā鎷�
createWaterPrimitive({
- baseUrl: "/simu/20250515111549",
+ baseUrl: `/simu/${serviceInfo}`,
interval: intervalMap[playbackRate.value],
colorRender: isColorRenderEnabled.value
});
@@ -465,12 +475,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") / 5
+ dayjs(sorted.at(-1)).diff(dayjs(sorted[0]), "second") / 4
);
- return Array.from({ length: 6 }, (_, i) =>
+ return Array.from({ length: 5 }, (_, i) =>
dayjs(sorted[0])
.add(i * interval, "second")
- .format("HH:mm:ss")
+ .format("MM-DD HH:mm:ss")
);
}
@@ -485,9 +495,13 @@
onMounted(async () => {
try {
+ // 褰撳墠鏂规鐨勬墍鏈変俊鎭�
+ const schemeInfo = selectedScheme.value;
+ serviceInfo = schemeInfo.serviceName;
+ console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo);
getRainfallData()
// 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
- const { waterTimestamps: timestamps } = await fetchWaterSimulationData();
+ const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
if (timestamps) {
waterTimestamps.value = timestamps;
updateTimelineRange();
@@ -551,8 +565,8 @@
left: 50%;
transform: translateX(-50%);
z-index: 99;
- width: 678px;
- height: 108px;
+ width: 38%;
+ height: 12%;
/* background-color: #1a2634; */
background: url("@/assets/img/menubar/bar.png");
background-size: 100% 100%;
@@ -677,25 +691,52 @@
}
.time-markers {
- display: flex;
- justify-content: space-between;
position: absolute;
width: 100%;
- top: 15px;
- color: #fff;
+ top: 20px;
+ display: flex;
+ justify-content: space-between;
}
.time-marker {
- margin-top: 5px;
+ position: absolute;
font-size: 12px;
color: #fff;
- transform: translateX(-20%);
+ text-align: center;
+ width: 25%;
+ white-space: nowrap;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.date-part {
+ /* margin-bottom: 2px; 鏃ユ湡鍜屾椂闂翠箣闂寸殑闂磋窛 */
+}
+
+.time-part {
+ font-size: 11px; /* 鏃堕棿鍙互绋嶅井灏忎竴鐐� */
+ opacity: 0.8; /* 鏃堕棿鍙互绋嶅井娣′竴鐐� */
}
.current-date {
margin-bottom: 5px;
font-size: 15px;
color: #fff;
- transform: translateX(-3%);
+ transform: translateX(-8%);
+}
+
+.scale-markers {
+ position: absolute;
+ width: 100%;
+ height: 10px;
+ top: 10px;
+}
+
+.scale-marker {
+ position: absolute;
+ width: 3px;
+ height: 6px;
+ background-color: rgba(255, 255, 255, 1);
+ transform: translateX(-50%);
}
</style>
--
Gitblit v1.9.3