From fef12378282c0a8cf44411b079ac20ad4f397817 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期五, 23 五月 2025 16:56:48 +0800
Subject: [PATCH] 修改比较多

---
 src/components/menu/TimeLine.vue |  197 ++++++++++++++++++++++++++++++++-----------------
 1 files changed, 129 insertions(+), 68 deletions(-)

diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 0ac6d4e..51a7293 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">
         <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,18 +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" />
+        <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>
@@ -45,20 +70,36 @@
           <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>
 
@@ -71,7 +112,7 @@
   defineProps,
   onBeforeUnmount,
   inject,
-  reactive
+  reactive,
 } from "vue";
 import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
 
@@ -94,7 +135,12 @@
 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: {
@@ -127,7 +173,7 @@
   rainSize: 0.5,
   rainSpeed: 50,
   rainColor: "#99B3CC",
-  rainDensity: 30 // 闆ㄧ殑瀵嗗害
+  rainDensity: 30, // 闆ㄧ殑瀵嗗害
 });
 // 璁＄畻灞炴��
 const progressPercentage = computed(
@@ -157,7 +203,7 @@
         baseUrl: `/simu/${serviceInfo}`,
         // baseUrl: `/simu/c2h1dc`,
         interval: intervalMap[playbackRate.value],
-        colorRender: isColorRenderEnabled.value
+        colorRender: isColorRenderEnabled.value,
       });
       isWaterPrimitiveCreated.value = true;
     } else {
@@ -191,8 +237,8 @@
     return; // 闃绘鍚庣画閫昏緫鎵ц
   }
   if (isWaterPrimitiveCreated.value) {
-    console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled);
-    emit("isColorRender", enabled)
+    console.log("褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細", enabled);
+    emit("isColorRender", enabled);
     toggleWaterColorRender(enabled);
   }
 };
@@ -246,103 +292,112 @@
   // 娉ㄦ剰锛氭湁鏃� 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];
@@ -353,7 +408,7 @@
   // console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
   // 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊
   if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
-    console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
+    console.log("鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊");
     return;
   }
 
@@ -363,10 +418,10 @@
   // 鑾峰彇瀵瑰簲鐨勯洦褰㈤厤缃�
   const rainLevel = getRainLevel(rainValue);
 
-  if (rainLevel.name === '鏃犻洦') {
+  if (rainLevel.name === "鏃犻洦") {
     // 鏃犻洦鐘舵�侊細娓呴櫎闆ㄦ晥
     mapUtils.delRain();
-    console.log('鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�');
+    console.log("鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�");
     return;
   }
 
@@ -375,9 +430,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);
 }
@@ -414,7 +469,7 @@
 
 // 璁剧疆鎾斁閫熺巼
 const setPlaybackRate = (rate) => {
-  isColorRenderEnabled.value = false
+  isColorRenderEnabled.value = false;
   playbackRate.value = rate;
   showSpeedMenu.value = false;
   // 鍋滄褰撳墠鎾斁
@@ -454,7 +509,8 @@
   // 鐩存帴鎵惧埌鏈�杩戠殑 timestamp 绱㈠紩
   const closestIndex = findClosestTimestampIndex(targetTime);
   const baseTimestamp = waterTimestamps.value[0];
-  currentTime.value = (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
+  currentTime.value =
+    (waterTimestamps.value[closestIndex] - baseTimestamp) / 1000;
 
   // 鏇存柊姘翠綋妯℃嫙鏃堕棿
   setTimeForWaterSimulation(closestIndex);
@@ -486,7 +542,7 @@
   () => selectedScheme.value,
   (newVal) => {
     if (newVal) {
-      console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
+      console.log("閫変腑鏂规宸叉敼鍙�:", newVal);
     }
   }
 );
@@ -499,7 +555,9 @@
         .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);
     }
   }
@@ -534,15 +592,17 @@
     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;
       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"
       );
@@ -574,6 +634,7 @@
 const { endSimulate } = inject("simulateActions");
 function handleBack() {
   endSimulate();
+  EventBus.emit("close-selectArea");
   isWaterPrimitiveCreated.value = false;
   if (ratelevelRef.value) {
     ratelevelRef.value.endCalculation();

--
Gitblit v1.9.3