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