From a57caa72a54efe9de3fe26a6c36d3e8038267377 Mon Sep 17 00:00:00 2001 From: guonan <guonan201020@163.com> Date: 星期四, 17 七月 2025 09:09:49 +0800 Subject: [PATCH] 修改x按钮 --- src/components/menu/TimeLine.vue | 138 ++++++++++++++++++++++++++++++++------------- 1 files changed, 97 insertions(+), 41 deletions(-) diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue index 0337415..6951358 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" v-show="speedShow"> <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,19 +35,33 @@ <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" /> + <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> @@ -46,8 +70,12 @@ <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 + 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> @@ -56,27 +84,38 @@ </div> <div> <div style="display: flex"> - <ratelevel ref="ratelevelRef" :playing-time="sendCurrentPlayingTime" - @finish-calculation="handleFinishCalculation" style=" + <ratelevel + ref="ratelevelRef" + :playing-time="sendCurrentPlayingTime" + @finish-calculation="handleFinishCalculation" + style=" margin-top: 12px; margin-left: 28px; margin-right: 10px; justify-content: flex-end; - " /> - <crossanalysis ref="crossRef" style=" + " + /> + <crossanalysis + ref="crossRef" + style=" margin-top: 12px; margin-left: 16px; margin-right: 20px; justify-content: flex-end; - " /> + " + /> </div> - <el-button @click="handleBack" style=" + <el-button + @click="handleBack" + style=" margin-top: 3px; margin-left: 28px; margin-right: 10px; width: 75%; height: 30%; - ">缁撴潫妯℃嫙</el-button> + " + >缁撴潫妯℃嫙</el-button + > </div> </div> </template> @@ -114,7 +153,9 @@ import { useSimStore } from "@/store/simulation"; import { storeToRefs } from "pinia"; const simStore = useSimStore(); -const { selectedScheme, frameNum, layerDate, schemWaterInfo } = storeToRefs(simStore); +const { selectedScheme, frameNum, layerDate, schemWaterInfo } = + storeToRefs(simStore); +import { clearAllPoints } from "@/utils/map"; const emit = defineEmits([ "timeUpdate", @@ -299,8 +340,9 @@ } // 瑙﹀彂杩涘害鏇存柊 - const progress = currentTime.value / totalDuration; - emit("timeUpdate", progress * 100); + // const progress = currentTime.value / totalDuration; + // 瀹炴椂妯℃嫙搴旇涓嶇敤鏄剧ず寮圭獥鍚� + // emit("timeUpdate", progress * 100); // 濡傛灉闇�瑕佽Е鍙戞煇浜涙洿鏂板嚱鏁帮紝涔熷彲浠ヤ繚鐣� updateWaterColorByTime(); @@ -352,7 +394,7 @@ // 闄嶉洦鏁版嵁鐩稿叧鍙橀噺 let rainFallValues = ref([]); // 瀛樺偍鍘熷闄嶉洦閲忔暟鎹� let minRainValue = ref(Infinity); -let averageRainIntensity = ref() +let averageRainIntensity = ref(); let maxRainValue = ref(-Infinity); // 鑾峰彇闄嶉洦鏁版嵁 function getRainfallData() { @@ -435,7 +477,10 @@ rainFallValues.value = hourlyRainfallList.map((r) => r.intensity); // 璁$畻骞冲潎闆ㄥ己 if (rainFallValues.value.length > 0) { - const sumIntensity = rainFallValues.value.reduce((sum, val) => sum + val, 0); + const sumIntensity = rainFallValues.value.reduce( + (sum, val) => sum + val, + 0 + ); averageRainIntensity.value = sumIntensity / rainFallValues.value.length; } else { averageRainIntensity.value = 0; // 鎴栬�� null 琛ㄧず鏃犳暟鎹� @@ -451,7 +496,6 @@ minRainValue.value, maxRainValue.value ); - } // 瀹氫箟闄嶉洦绛夌骇鍙婂叾瀵瑰簲鐨勮瑙夊弬鏁� const rainLevels = [ @@ -709,7 +753,8 @@ // console.log("========================================"); // console.log(`銆愭椂闂存埑銆�: ${new Date(currentTimeMs).toLocaleString()}`); console.log( - `銆愮疮璁¢檷闆ㄩ噺 R銆�: ${currentTotal !== null ? currentTotal.toFixed(2) : "鏈煡" + `銆愮疮璁¢檷闆ㄩ噺 R銆�: ${ + currentTotal !== null ? currentTotal.toFixed(2) : "鏈煡" } mm` ); // console.log(`銆愬綋鍓嶉樁娈点��: 绗� ${currentStage} 闃舵`); @@ -982,8 +1027,12 @@ watersMaxHeight, watersMinHeight ); - const waterInfoArr = [watersMaxHeight, maxRainValue.value,averageRainIntensity.value] - schemWaterInfo.value = waterInfoArr + const waterInfoArr = [ + watersMaxHeight, + maxRainValue.value, + averageRainIntensity.value, + ]; + schemWaterInfo.value = waterInfoArr; // 鏇存柊鏃堕棿杞寸浉鍏虫暟鎹� if (timestamps) { frameNum.value = timestamps.length; @@ -1028,7 +1077,11 @@ watch( () => finishPlay.value, (newVal) => { - if (newVal && selectedScheme.value.type === 2) { + if ( + newVal && + selectedScheme.value.type === 2 && + simStore.rePlayList.length > 0 + ) { handlePlayFinished(); } } @@ -1082,30 +1135,33 @@ if (selectedScheme.value.type === 2) { try { await ElMessageBox.confirm("鏂规鏈仠姝㈡椂缁撴潫妯℃嫙鍚庯紝鍚庡彴灏嗗仠姝㈣绠�", { - confirmButtonText: "杩斿洖鍒楄〃", - cancelButtonText: "缁撴潫妯℃嫙", + confirmButtonText: "缁撴潫妯℃嫙", + cancelButtonText: "杩斿洖鍒楄〃", type: "warning", }); - // 鐢ㄦ埛鐐瑰嚮浜嗙‘璁わ紝杩欓噷涓嶆墽琛屼换浣曟搷浣滐紝浠呭叧闂璇濇 + + const res = await stopSim(selectedScheme.value.id); + if (res.code == 404) { + ElMessage.warning("璇ユ湇鍔″凡鍋滄"); + } else { + ElMessage.success("鏈嶅姟姝e湪鍋滄涓�"); + } } catch (error) { - stopSim(selectedScheme.value.id).then((res) => { - if (res.code == 404) { - ElMessage.warning("璇ユ湇鍔″凡鍋滄"); - } else { - ElMessage.success("鏈嶅姟姝e湪鍋滄涓�"); - } - }); - // return; + // 鐢ㄦ埛鐐瑰嚮浜嗐�愯繑鍥炲垪琛ㄣ�戞垨鑰呭嚭鐜伴敊璇� + return; } } - // 涓嶇type鏄笉鏄�2锛屾渶缁堥兘鎵ц缁撴潫妯℃嫙鐨勬搷浣� + + // 涓嶇 type 鏄笉鏄� 2锛屾渶缁堥兘鎵ц缁撴潫妯℃嫙鎿嶄綔 endSimulation(); } async function endSimulation() { + clearAllPoints(); + simStore.openDia = true; + simStore.crossSection = []; // 缁撴潫妯℃嫙涔嬪悗娓呴櫎layer鍒楄〃 simStore.rePlayList = []; - console.log(simStore.rePlayList, "缁撴潫妯℃嫙娓呴櫎rePlayListrePlayList鍒楄〃"); EventBus.emit("close-time"); endSimulate(); isWaterPrimitiveCreated.value = false; -- Gitblit v1.9.3