From 7acb3042ed738aefc5c5d23a35516c7a6c5a88e0 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期五, 23 五月 2025 10:46:07 +0800
Subject: [PATCH] 1
---
src/components/menu/TimeLine.vue | 224 ++++++++++++++++++++++---------------------------------
1 files changed, 91 insertions(+), 133 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 8e9a676..ca0c122 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,30 +2,20 @@
<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>
@@ -35,33 +25,18 @@
<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>
- 涓撻娓叉煋:
- <el-switch
- v-model="isColorRenderEnabled"
- @change="handleColorRenderChange"
- style="margin-top: -3px"
- :disabled="!isPlaying || !isWaterPrimitiveCreated"
- />
- <!-- active-text="寮�" inactive-text="鍏�" -->
+ <div>涓撻娓叉煋:
+ <el-switch v-model="isColorRenderEnabled" @change="handleColorRenderChange" style="margin-top:-3px"
+ :disabled="!isPlaying || !isWaterPrimitiveCreated" />
+ <!-- active-text="寮�" inactive-text="鍏�" -->
</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="scale-markers">
<div class="scale-marker" style="left: 0%"></div>
<div class="scale-marker" style="left: 25%"></div>
@@ -70,36 +45,20 @@
<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"
- :style="{ left: `${index * 25}%`, transform: 'translateX(-50%)' }"
- >
- <div class="date-part">{{ time.split(" ")[0] }}</div>
- <div class="time-part">{{ time.split(" ")[1] }}</div>
+ <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: 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
- >
+ <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" @finish-calculation="handleFinishCalculation"
+ 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>
+
</div>
</template>
@@ -112,7 +71,7 @@
defineProps,
onBeforeUnmount,
inject,
- reactive,
+ reactive
} from "vue";
import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
@@ -135,12 +94,7 @@
const simStore = useSimStore();
const { selectedScheme } = storeToRefs(simStore);
-const emit = defineEmits([
- "timeUpdate",
- "isPlaying",
- "playbackFinished",
- "isColorRender",
-]);
+const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]);
// 瀹氫箟props
const props = defineProps({
waterSimulateParams: {
@@ -173,7 +127,7 @@
rainSize: 0.5,
rainSpeed: 50,
rainColor: "#99B3CC",
- rainDensity: 30, // 闆ㄧ殑瀵嗗害
+ rainDensity: 30 // 闆ㄧ殑瀵嗗害
});
// 璁＄畻灞炴��
const progressPercentage = computed(
@@ -203,7 +157,7 @@
baseUrl: `/simu/${serviceInfo}`,
// baseUrl: `/simu/c2h1dc`,
interval: intervalMap[playbackRate.value],
- colorRender: isColorRenderEnabled.value,
+ colorRender: isColorRenderEnabled.value
});
isWaterPrimitiveCreated.value = true;
} else {
@@ -237,8 +191,8 @@
return; // 闃绘鍚庣画閫昏緫鎵ц
}
if (isWaterPrimitiveCreated.value) {
- console.log("褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細", enabled);
- emit("isColorRender", enabled);
+ console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled);
+ emit("isColorRender", enabled)
toggleWaterColorRender(enabled);
}
};
@@ -250,10 +204,28 @@
};
// 鎾斁閫昏緫
const startPlayback = () => {
- // const interval = intervalMap[playbackRate.value] || 1000; // 榛樿涓�1000
clearInterval(playInterval); // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
+
+ // 鏍规嵁 playbackRate 璁剧疆 timeIncrement
+ let timeIncrement;
+ switch (playbackRate.value) {
+ case 1:
+ timeIncrement = 900;
+ break;
+ case 2:
+ timeIncrement = 1800;
+ break;
+ case 4:
+ timeIncrement = 3600;
+ break;
+ case 8:
+ timeIncrement = 5600;
+ break;
+ default:
+ timeIncrement = 900; // 榛樿涓�1鍊嶉��
+ break;
+ }
playInterval = setInterval(() => {
- const timeIncrement = playbackRate.value; // 鍊嶉�熶綔涓哄閲�
currentTime.value += timeIncrement;
if (currentTime.value >= duration.value) {
currentTime.value = duration.value; // 鍋滃湪鏈�鍚庝竴甯�
@@ -269,7 +241,7 @@
// 璁＄畻鎾斁杩涘害鐧惧垎姣� [0, 1]
const progress = currentTime.value / duration.value;
emit("timeUpdate", progress * 100); // 鐧惧垎姣斾笂鎶�
- }, 1000); // 娉ㄦ剰浣跨敤interval鑰岄潪鍥哄畾1000ms
+ }, 1000); // 鍥哄畾姣忕鎵ц涓�娆★紝涔熷彲浠ヤ娇鐢ㄥ姩鎬侀棿闅旓紙鍙�夛級
};
// 闄嶉洦鍙樺寲閮ㄥ垎
// 闄嶉洦鏁版嵁鐩稿叧鍙橀噺
@@ -285,112 +257,103 @@
// 娉ㄦ剰锛氭湁鏃� data 鍙兘鏄竴涓瓧绗︿覆锛堜緥濡� JSON 瀛楃涓诧級
let data = selectedScheme.value.data;
// 濡傛灉鏄瓧绗︿覆锛屽垯灏濊瘯瑙ｆ瀽鎴愬璞�
- if (typeof data === "string") {
+ if (typeof data === 'string') {
try {
data = JSON.parse(data);
- console.log("瑙ｆ瀽鍚庣殑闄嶉洦鏁版嵁锛�", data);
+ console.log('瑙ｆ瀽鍚庣殑闄嶉洦鏁版嵁锛�', data);
} catch (e) {
console.error("data 涓嶆槸鏈夋晥鐨� JSON 瀛楃涓�");
return;
}
}
// 鎵撳嵃闄嶉洦寮哄害鐨勫崟浣�
- console.log("闄嶉洦寮哄害鐨勫崟浣嶆槸锛�", data.intensityUnit);
+ console.log('闄嶉洦寮哄害鐨勫崟浣嶆槸锛�', data.intensityUnit);
// 鏍规嵁 intensityUnit 璋冩暣 rainfalls 涓殑 intensity 鍊�
- if (data.intensityUnit === "mm/min") {
- data.rainfalls.forEach((r) => (r.intensity *= 60));
- console.log("灏� mm/min 杞崲涓� mm/h 鍚庣殑 rainfalls:", data.rainfalls);
- } else if (data.intensityUnit === "mm/5min") {
- data.rainfalls.forEach((r) => (r.intensity *= 12));
- console.log("灏� mm/5min 杞崲涓� mm/h 鍚庣殑 rainfalls:", data.rainfalls);
- } else if (data.intensityUnit !== "mm/h") {
- console.warn("鏈煡鐨� intensity 鍗曚綅锛屾棤娉曡繘琛岃浆鎹�");
+ if (data.intensityUnit === 'mm/min') {
+ data.rainfalls.forEach(r => r.intensity *= 60);
+ console.log('灏� mm/min 杞崲涓� mm/h 鍚庣殑 rainfalls:', data.rainfalls);
+ } else if (data.intensityUnit === 'mm/5min') {
+ data.rainfalls.forEach(r => r.intensity *= 12);
+ console.log('灏� mm/5min 杞崲涓� mm/h 鍚庣殑 rainfalls:', data.rainfalls);
+ } else if (data.intensityUnit !== 'mm/h') {
+ console.warn('鏈煡鐨� intensity 鍗曚綅锛屾棤娉曡繘琛岃浆鎹�');
}
const rainfallList = data.rainfalls;
- console.log("鏈�缁堢殑 rainfallList:", rainfallList);
+ console.log('鏈�缁堢殑 rainfallList:', rainfallList);
// 鎻愬彇 intensity 鍊�
- rainFallValues.value = rainfallList.map((r) => r.intensity);
+ rainFallValues.value = rainfallList.map(r => r.intensity);
minRainValue.value = Math.min(...rainFallValues.value);
maxRainValue.value = Math.max(...rainFallValues.value);
- console.log(
- "褰撳墠鏂规涓嬫渶灏忛洦閲忓拰鏈�澶ч洦閲忥細",
- minRainValue.value,
- maxRainValue.value
- );
+ console.log('褰撳墠鏂规涓嬫渶灏忛洦閲忓拰鏈�澶ч洦閲忥細', minRainValue.value, maxRainValue.value);
}
// 瀹氫箟闄嶉洦绛夌骇鍙婂叾瀵瑰簲鐨勮瑙夊弬鏁�
const rainLevels = [
{
- name: "灏忛洦",
+ name: '灏忛洦',
min: 0.1,
max: 9.9,
- size: 0.5, // 闆ㄦ淮澶у皬锛氭洿灏�
- speed: 20, // 涓嬭惤閫熷害锛氭洿鎱�
- density: 15, // 闆ㄦ淮瀵嗗害锛氭洿绋�鐤�
- color: "#ADD8E6", // 娴呰摑鑹诧紝璞″緛杞绘煍鐨勫皬闆�
+ size: 0.5, // 闆ㄦ淮澶у皬锛氭洿灏�
+ speed: 20, // 涓嬭惤閫熷害锛氭洿鎱�
+ density: 15, // 闆ㄦ淮瀵嗗害锛氭洿绋�鐤�
+ color: '#ADD8E6' // 娴呰摑鑹诧紝璞″緛杞绘煍鐨勫皬闆�
},
{
- name: "涓洦",
+ name: '涓洦',
min: 10,
max: 24.9,
size: 0.7,
speed: 40,
density: 35,
- color: "#ADD8E6",
+ color: '#ADD8E6'
},
{
- name: "澶ч洦",
+ name: '澶ч洦',
min: 25,
max: 49.9,
size: 1.0,
speed: 70,
density: 60,
- color: "#ADD8E6",
+ color: '#ADD8E6'
},
{
- name: "鏆撮洦",
+ name: '鏆撮洦',
min: 50,
max: 99.9,
size: 1.3,
speed: 90,
density: 80,
- color: "#ADD8E6",
+ color: '#ADD8E6'
},
{
- name: "澶ф毚闆�",
+ name: '澶ф毚闆�',
min: 100,
size: 1.6,
speed: 110,
density: 100,
- color: "#ADD8E6",
- },
+ color: '#ADD8E6'
+ }
];
// 鏍规嵁闄嶉洦閲忚繑鍥炲搴旂殑闆ㄥ舰閰嶇疆
function getRainLevel(rainValue) {
for (let level of rainLevels) {
- if (
- level.min <= rainValue &&
- (level.max === undefined || rainValue <= level.max)
- ) {
+ if (level.min <= rainValue && (level.max === undefined || rainValue <= level.max)) {
return level;
}
}
// 榛樿鏃犻洦鐘舵��
- return { name: "鏃犻洦", size: 0.5, speed: 30, density: 20, color: "#F0F8FF" };
+ return { name: '鏃犻洦', size: 0.5, speed: 30, density: 20, color: '#F0F8FF' };
}
// 鏍规嵁鎾斁杩涘害鏇存柊澶╂皵鏁堟灉锛堝凡浼樺寲锛�
let lastUsedIndex = -1; // 缂撳瓨涓婁竴娆′娇鐢ㄧ殑绱㈠紩锛岄槻姝㈤噸澶嶆洿鏂�
let lastRainValue = null;
function updateWeatherByProgress() {
if (rainFallValues.value.length === 0) return;
- console.log(
- `鏃堕棿杞存�绘椂闀�: ${duration.value}, 褰撳墠鏃堕棿: ${currentTime.value}`
- ); // 鎵撳嵃鏃堕棿杞翠俊鎭�
+ console.log(`鏃堕棿杞存�绘椂闀�: ${duration.value}, 褰撳墠鏃堕棿: ${currentTime.value}`); // 鎵撳嵃鏃堕棿杞翠俊鎭�
const progress = currentTime.value / duration.value;
const floatIndex = progress * (rainFallValues.value.length - 1);
- const index = Math.floor(floatIndex); // 褰撳墠绱㈠紩
+ const index = Math.floor(floatIndex); // 褰撳墠绱㈠紩
const nextIndex = Math.min(index + 1, rainFallValues.value.length - 1); // 涓嬩竴绱㈠紩
const currentRain = rainFallValues.value[index];
const nextRain = rainFallValues.value[nextIndex];
@@ -401,7 +364,7 @@
// console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
// 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊
if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
- console.log("鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊");
+ console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
return;
}
@@ -411,10 +374,10 @@
// 鑾峰彇瀵瑰簲鐨勯洦褰㈤厤缃�
const rainLevel = getRainLevel(rainValue);
- if (rainLevel.name === "鏃犻洦") {
+ if (rainLevel.name === '鏃犻洦') {
// 鏃犻洦鐘舵�侊細娓呴櫎闆ㄦ晥
mapUtils.delRain();
- console.log("鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�");
+ console.log('鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�');
return;
}
@@ -423,9 +386,9 @@
rainSize: rainLevel.size,
rainSpeed: rainLevel.speed,
rainDensity: rainLevel.density,
- rainColor: rainLevel.color,
+ rainColor: rainLevel.color
};
- console.log("褰撳墠闆ㄩ噺鏁版嵁锛�", rainValue, "褰撳墠闆ㄥ舰锛�", rainLevel);
+ console.log('褰撳墠闆ㄩ噺鏁版嵁锛�', rainValue, '褰撳墠闆ㄥ舰锛�', rainLevel);
// 璋冪敤宸ュ叿鏂规硶鏇存柊闆ㄦ晥
mapUtils.toggleRain(rainParams, true);
}
@@ -493,8 +456,8 @@
dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss")
);
// 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞��
- console.log(closestIndex, "鏈�杩戠殑绱㈠紩鍊�");
-
+ console.log(closestIndex,'鏈�杩戠殑绱㈠紩鍊�');
+
setTimeForWaterSimulation(closestIndex);
// 濡傛灉褰撳墠鏄殏鍋滅姸鎬侊紝璋冪敤 pauseWaterSimulation
@@ -511,7 +474,7 @@
waterTimestamps.value.forEach((timestamp, index) => {
const diff = Math.abs(
dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
- currentTimeValue
+ currentTimeValue
);
if (diff < minDiff) {
minDiff = diff;
@@ -525,7 +488,7 @@
() => selectedScheme.value,
(newVal) => {
if (newVal) {
- console.log("閫変腑鏂规宸叉敼鍙�:", newVal);
+ console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
}
}
);
@@ -538,9 +501,7 @@
.valueOf(); // 浣跨敤 valueOf() 鑾峰彇鍘熷鏃堕棿鎴�
// 鏇存柊 currentPlayingTime 鏍煎紡鍖栧悗鐨勬椂闂村瓧绗︿覆
- currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format(
- "YYYY-MM-DD HH:mm:ss"
- );
+ currentPlayingTime.value = dayjs(sendCurrentPlayingTime.value).format("YYYY-MM-DD HH:mm:ss");
EventBus.emit("time-update", currentPlayingTime.value);
}
}
@@ -575,17 +536,14 @@
const schemeInfo = selectedScheme.value;
serviceInfo = schemeInfo.serviceName;
// console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo);
- getRainfallData();
+ getRainfallData()
// 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅
- const { waterTimestamps: timestamps } = await fetchWaterSimulationData(
- serviceInfo
- );
+ const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo);
if (timestamps) {
waterTimestamps.value = timestamps;
- console.log(waterTimestamps, "water");
updateTimelineRange();
timeMarkers.value = generateTimeMarkers(timestamps);
- sendCurrentPlayingTime.value = timestamps[0];
+ sendCurrentPlayingTime.value = timestamps[0]
currentPlayingTime.value = dayjs(timestamps[0]).format(
"YYYY-MM-DD HH:mm:ss"
);
--
Gitblit v1.9.3