From 4a0b0a87f183abae6aff6174436be2ccbc507be2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 28 五月 2025 14:40:13 +0800
Subject: [PATCH] change

---
 src/components/menu/TimeLine.vue |  211 ++++++++++++++++++++--------------------------------
 1 files changed, 80 insertions(+), 131 deletions(-)

diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 51a7293..b12cbee 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"
-          />
+        <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,24 @@
           <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
-      >
+      <div style="display: flex;">
+        <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="margin-top: 12px; margin-left: 16px; margin-right: 20px;justify-content: flex-end;" /> -->
+      </div>
+      <el-button @click="handleBack" style="margin-top: 3px; margin-left: 28px; margin-right: 10px;width: 75%;height: 30%;">缁撴潫妯℃嫙</el-button>
     </div>
+
   </div>
 </template>
 
@@ -112,9 +75,10 @@
   defineProps,
   onBeforeUnmount,
   inject,
-  reactive,
+  reactive
 } from "vue";
 import ratelevel from "@/components/menu/flowRate_waterLevel.vue";
+import crossanalysis from "@/components/menu/CrossSectionalAnalysis.vue";
 
 import dayjs from "dayjs";
 import {
@@ -135,12 +99,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: {
@@ -153,6 +112,7 @@
 // 鍝嶅簲寮忕姸鎬�
 let serviceInfo = ref(null); // 褰撳墠鏂规鐨勬湇鍔″湴鍧�
 const ratelevelRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
+const crossRef = ref(null); // 鑾峰彇瀛愮粍浠跺疄渚嬬殑寮曠敤
 const currentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
 const sendCurrentPlayingTime = ref(""); // 褰撳墠鎾斁鏃堕棿
 const isPlaying = ref(false);
@@ -173,7 +133,7 @@
   rainSize: 0.5,
   rainSpeed: 50,
   rainColor: "#99B3CC",
-  rainDensity: 30, // 闆ㄧ殑瀵嗗害
+  rainDensity: 30 // 闆ㄧ殑瀵嗗害
 });
 // 璁＄畻灞炴��
 const progressPercentage = computed(
@@ -203,7 +163,7 @@
         baseUrl: `/simu/${serviceInfo}`,
         // baseUrl: `/simu/c2h1dc`,
         interval: intervalMap[playbackRate.value],
-        colorRender: isColorRenderEnabled.value,
+        colorRender: isColorRenderEnabled.value
       });
       isWaterPrimitiveCreated.value = true;
     } else {
@@ -237,8 +197,8 @@
     return; // 闃绘鍚庣画閫昏緫鎵ц
   }
   if (isWaterPrimitiveCreated.value) {
-    console.log("褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細", enabled);
-    emit("isColorRender", enabled);
+    console.log('褰撳墠鏄惁寮�鍚笓棰樻覆鏌擄細', enabled);
+    emit("isColorRender", enabled)
     toggleWaterColorRender(enabled);
   }
 };
@@ -292,112 +252,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];
@@ -408,7 +359,7 @@
   // console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
   // 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊
   if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
-    console.log("鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊");
+    // console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
     return;
   }
 
@@ -418,10 +369,10 @@
   // 鑾峰彇瀵瑰簲鐨勯洦褰㈤厤缃�
   const rainLevel = getRainLevel(rainValue);
 
-  if (rainLevel.name === "鏃犻洦") {
+  if (rainLevel.name === '鏃犻洦') {
     // 鏃犻洦鐘舵�侊細娓呴櫎闆ㄦ晥
     mapUtils.delRain();
-    console.log("鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�");
+    console.log('鎵ц浜嗘棤闆ㄧ姸鎬侊紝娓呴櫎浜嗛洦鏁�');
     return;
   }
 
@@ -430,9 +381,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);
 }
@@ -469,7 +420,7 @@
 
 // 璁剧疆鎾斁閫熺巼
 const setPlaybackRate = (rate) => {
-  isColorRenderEnabled.value = false;
+  isColorRenderEnabled.value = false
   playbackRate.value = rate;
   showSpeedMenu.value = false;
   // 鍋滄褰撳墠鎾斁
@@ -509,8 +460,7 @@
   // 鐩存帴鎵惧埌鏈�杩戠殑 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);
@@ -542,7 +492,7 @@
   () => selectedScheme.value,
   (newVal) => {
     if (newVal) {
-      console.log("閫変腑鏂规宸叉敼鍙�:", newVal);
+      console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
     }
   }
 );
@@ -555,9 +505,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);
     }
   }
@@ -592,17 +540,15 @@
     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"
       );
@@ -634,10 +580,13 @@
 const { endSimulate } = inject("simulateActions");
 function handleBack() {
   endSimulate();
-  EventBus.emit("close-selectArea");
   isWaterPrimitiveCreated.value = false;
   if (ratelevelRef.value) {
     ratelevelRef.value.endCalculation();
+    ratelevelRef.value.stopPicking();
+  }
+  if (crossRef.value) {
+    crossRef.value.clearPoints();
   }
   emit("isColorRender", false);
   setTimeout(() => {
@@ -658,7 +607,7 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 99;
-  width: 38%;
+  width: 44%;
   height: 10%;
   /* background-color: #1a2634; */
   background: url("@/assets/img/menubar/bar.png");
@@ -741,7 +690,7 @@
 .timeline {
   margin-top: 10px;
   position: relative;
-  flex: 1;
+  flex: 0.9;
 }
 
 .dates {

--
Gitblit v1.9.3