From b1398528bd9f5245f580285681cca6abc192c651 Mon Sep 17 00:00:00 2001 From: wangjuncheng <1> Date: 星期五, 16 五月 2025 16:00:43 +0800 Subject: [PATCH] change --- src/components/menu/TimeLine.vue | 78 ++++++++++++++++++++++++++------------ 1 files changed, 53 insertions(+), 25 deletions(-) diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue index c2fad40..8856a3d 100644 --- a/src/components/menu/TimeLine.vue +++ b/src/components/menu/TimeLine.vue @@ -28,10 +28,11 @@ <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>涓撻娓叉煋: + <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> @@ -87,10 +88,12 @@ 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); + const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished", "isColorRender"]); // 瀹氫箟props const props = defineProps({ @@ -137,6 +140,7 @@ ); // 鎾斁鎺у埗 const togglePlay = () => { + // 杩欓噷搴旇鍐嶈瀹氬嚑涓檺鍒讹紝濡傛灉缂哄皯浠�涔堟暟鎹紝鏃犳硶杩涜浠跨湡 if (!isPlaying.value && currentTime.value >= duration.value) currentTime.value = 0; @@ -147,10 +151,11 @@ startPlayback(); if (!isWaterPrimitiveCreated.value) { - console.log(serviceInfo, '杩欓噷鏄綋鍓嶆柟妗堢殑鏈嶅姟淇℃伅锛�'); + // console.log(serviceInfo, '杩欓噷鏄綋鍓嶆柟妗堢殑鏈嶅姟淇℃伅锛�'); // 杩欓噷閫氳繃water.js涓幓鍙戦�佽姹傝幏鍙栨按闈㈡ā鎷� createWaterPrimitive({ - baseUrl: `/simu/${serviceInfo}`, + // baseUrl: `/simu/${serviceInfo}`, + baseUrl: `/simu/c2h1dc`, interval: intervalMap[playbackRate.value], colorRender: isColorRenderEnabled.value }); @@ -237,18 +242,33 @@ if (typeof data === 'string') { try { data = JSON.parse(data); - console.log('瑙f瀽鍚庣殑 data:', data); + console.log('瑙f瀽鍚庣殑闄嶉洦鏁版嵁锛�', data); } catch (e) { console.error("data 涓嶆槸鏈夋晥鐨� JSON 瀛楃涓�"); return; } } + // 鎵撳嵃闄嶉洦寮哄害鐨勫崟浣� + 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 鍗曚綅锛屾棤娉曡繘琛岃浆鎹�'); + } + const rainfallList = data.rainfalls; + console.log('鏈�缁堢殑 rainfallList:', rainfallList); + // 鎻愬彇 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, 'min and max rain values'); + console.log('褰撳墠鏂规涓嬫渶灏忛洦閲忓拰鏈�澶ч洦閲忥細', minRainValue.value, maxRainValue.value); } // 瀹氫箟闄嶉洦绛夌骇鍙婂叾瀵瑰簲鐨勮瑙夊弬鏁� const rainLevels = [ @@ -268,7 +288,7 @@ size: 0.7, speed: 40, density: 35, - color: '#ADD8E6' // 澶╄摑鑹诧紝璞″緛鎸佺画鐨勪腑闆� + color: '#ADD8E6' }, { name: '澶ч洦', @@ -277,7 +297,7 @@ size: 1.0, speed: 70, density: 60, - color: '#ADD8E6' // 娣辫摑鑹诧紝璞″緛瀵嗛泦鐨勫ぇ闆� + color: '#ADD8E6' }, { name: '鏆撮洦', @@ -286,7 +306,7 @@ size: 1.3, speed: 90, density: 80, - color: '#ADD8E6' // 娣辫摑榛戣壊锛岃薄寰佸己闄嶉洦 + color: '#ADD8E6' }, { name: '澶ф毚闆�', @@ -294,7 +314,7 @@ size: 1.6, speed: 110, density: 100, - color: '#ADD8E6' // 榛戣壊锛岃薄寰佹瀬绔毚闆� + color: '#ADD8E6' } ]; // 鏍规嵁闄嶉洦閲忚繑鍥炲搴旂殑闆ㄥ舰閰嶇疆 @@ -323,8 +343,7 @@ const alpha = floatIndex - index; const rainValue = currentRain + (nextRain - currentRain) * alpha; // 鎵撳嵃褰撳墠澶勭悊鐨勯洦閲忔暟鎹� - console.log(`姝e湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`); - + // console.log(`姝e湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`); // 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊 if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) { console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊'); @@ -351,9 +370,7 @@ rainDensity: rainLevel.density, rainColor: rainLevel.color }; - - console.log('褰撳墠闆ㄩ噺鏁版嵁锛�', rainValue); - console.log('褰撳墠闆ㄥ舰锛�', rainLevel); + console.log('褰撳墠闆ㄩ噺鏁版嵁锛�', rainValue, '褰撳墠闆ㄥ舰锛�', rainLevel); // 璋冪敤宸ュ叿鏂规硶鏇存柊闆ㄦ晥 mapUtils.toggleRain(rainParams, true); } @@ -421,6 +438,8 @@ dayjs(waterTimestamps.value[closestIndex]).format("YYYY-MM-DD HH:mm:ss") ); // 璋冪敤璺宠浆鎺ュ彛锛屼紶閫掔储寮曞�� + console.log(closestIndex,'鏈�杩戠殑绱㈠紩鍊�'); + setTimeForWaterSimulation(closestIndex); // 濡傛灉褰撳墠鏄殏鍋滅姸鎬侊紝璋冪敤 pauseWaterSimulation @@ -498,7 +517,7 @@ // 褰撳墠鏂规鐨勬墍鏈変俊鎭� const schemeInfo = selectedScheme.value; serviceInfo = schemeInfo.serviceName; - console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo); + // console.log('鑾峰彇鍒扮殑 serviceName:', serviceInfo); getRainfallData() // 鏍规嵁layer.json鍘昏幏鍙栨椂闂磋酱淇℃伅 const { waterTimestamps: timestamps } = await fetchWaterSimulationData(serviceInfo); @@ -513,6 +532,10 @@ } } catch (error) { console.error("Error loading water simulation data:", error); + ElMessage({ + message: "闄嶉洦鏁版嵁鍑洪敊锛岃閲嶆柊鏂板缓妯℃嫙鏂规锛�", + type: "warning", + }); } }); @@ -527,10 +550,10 @@ 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, + // }); } } @@ -541,6 +564,8 @@ const { endSimulate } = inject("simulateActions"); function handleBack() { + endSimulate(); + isWaterPrimitiveCreated.value = false; if (ratelevelRef.value) { ratelevelRef.value.endCalculation(); } @@ -548,11 +573,9 @@ setTimeout(() => { mapUtils.delRain(); }, 3000); - ElMessage({ message: "妯℃嫙杩涚▼姝e湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝e湪鍏抽棴 - endSimulate(); - isWaterPrimitiveCreated.value = false; destoryWaterPrimitive(); EventBus.emit("hide-schemeInfo"); + ElMessage({ message: "妯℃嫙杩涚▼姝e湪鍏抽棴涓�...", type: "success" }); } </script> <style scoped> @@ -669,6 +692,7 @@ position: relative; cursor: pointer; } + .timeline-progress { height: 100%; background-color: #4a90e2; @@ -677,6 +701,7 @@ top: 0; left: 0; } + .timeline-cursor { width: 12px; height: 12px; @@ -687,6 +712,7 @@ transform: translate(-50%, -50%); z-index: 2; } + .time-markers { position: absolute; width: 100%; @@ -706,6 +732,7 @@ flex-direction: column; align-items: center; } + /* .date-part { margin-bottom: 2px; } */ @@ -713,6 +740,7 @@ font-size: 11px; opacity: 0.8; } + .current-date { margin-bottom: 5px; font-size: 15px; -- Gitblit v1.9.3