From fc3a075f1b5bd3735a47dd93165d33a0e526803b Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期二, 24 六月 2025 16:47:40 +0800
Subject: [PATCH] 修改水颜色
---
src/utils/water.js | 18 ++++-
src/components/menu/TimeLine.vue | 114 ++++++++++++++++++-------------------
2 files changed, 70 insertions(+), 62 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 15be01b..0805fef 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,19 @@
<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>
@@ -70,12 +46,8 @@
<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>
@@ -84,38 +56,27 @@
</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>
@@ -142,6 +103,7 @@
resumeWaterSimulation,
setTimeForWaterSimulation,
toggleWaterColorRender,
+ updateWaterColor,
} from "@/utils/water";
import mapUtils from "@/utils/tools.js";
import { fetchWaterSimulationData } from "@/api/trApi.js";
@@ -187,6 +149,7 @@
const isColorRenderEnabled = ref(false); // 鍋囪杩欐槸浣犵殑棰滆壊娓叉煋寮�鍏崇姸鎬�
const isWaterPrimitiveCreated = ref(false);
let playInterval = null;
+let rainTotalInfo = ([]);
const isRainEnabled = ref(false);
const rainParams = reactive({
rainSize: 0.5,
@@ -296,6 +259,7 @@
currentTime.value = (nextTimestamp - baseTimestamp) / 1000;
// 瑙﹀彂鏇存柊
+ updateWaterColorByTime()
updateWeatherByProgress();
const progress = currentTime.value / duration.value;
emit("timeUpdate", progress * 100);
@@ -339,6 +303,7 @@
const rainfallList = data.rainfalls;
console.log("鏈�缁堢殑 rainfallList:", rainfallList);
+ rainTotalInfo.value = rainfallList
// 鎻愬彇 intensity 鍊�
rainFallValues.value = rainfallList.map((r) => r.intensity);
@@ -413,6 +378,39 @@
// 鏍规嵁鎾斁杩涘害鏇存柊澶╂皵鏁堟灉锛堝凡浼樺寲锛�
let lastUsedIndex = -1; // 缂撳瓨涓婁竴娆′娇鐢ㄧ殑绱㈠紩锛岄槻姝㈤噸澶嶆洿鏂�
let lastRainValue = null;
+function updateWaterColorByTime() {
+ if (!rainTotalInfo.value || rainTotalInfo.value.length === 0) return;
+ const progress = currentTime.value / duration.value;
+ const floatIndex = progress * (rainTotalInfo.value.length - 1);
+ const index = Math.floor(floatIndex);
+ const nextIndex = Math.min(index + 1, rainTotalInfo.value.length - 1);
+ const currentData = rainTotalInfo.value[index];
+ const nextData = rainTotalInfo.value[nextIndex];
+ // 鍚敤鎻掑�硷紙alpha 骞虫粦杩囨浮锛�
+ const alpha = floatIndex - index;
+ const currentTotal = currentData.total;
+ const nextTotal = nextData.total;
+ const total = currentTotal + (nextTotal - currentTotal) * alpha;
+ // 鏍规嵁 total 璁剧疆棰滆壊
+ let color = '#D4F2E7'; // 榛樿钃濊壊
+
+ if (total >= 150) {
+ color = '#663300'; // 榛� - 澶ч洦
+ } else if (total >= 125) {
+ color = '#B26633'; // 榛勭豢 - 涓洦
+ } else if (total >= 100) {
+ color = '#CC9966'; // 缁� - 涓洦
+ } else if (total >= 75) {
+ color = '#CCE5FF'; // 闈掔豢 - 灏忛洦
+ } else if (total >= 50) {
+ color = '#99CCFF'; // 澶╄摑 - 灏忛洦
+ } else if (total >= 25) {
+ color = '#66B3FF'; // 娴呰摑 - 寰噺
+ }
+ // console.log(`褰撳墠 total: ${total.toFixed(2)}, 棰滆壊: ${color}`);
+ // updateWaterColor(color)
+}
+
function updateWeatherByProgress() {
if (rainFallValues.value.length === 0) return;
// console.log(`鏃堕棿杞存�绘椂闀�: ${duration.value}, 褰撳墠鏃堕棿: ${currentTime.value}`); // 鎵撳嵃鏃堕棿杞翠俊鎭�
@@ -427,7 +425,7 @@
// const rainValue = currentRain + (nextRain - currentRain) * alpha;
const rainValue = currentRain + (nextRain - currentRain);
// 鎵撳嵃褰撳墠澶勭悊鐨勯洦閲忔暟鎹�
- // console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
+ console.log(`姝ｅ湪澶勭悊鐨勯洦閲忔暟鎹偣: 褰撳墠=${currentRain}, 涓嬩竴涓�=${nextRain}, 鎻掑�煎悗=${rainValue.toFixed(2)}, 绱㈠紩=${index}`);
// 濡傛灉褰撳墠绱㈠紩鏈彉鍖栦笖鎻掑�煎樊寮備笉澶э紝璺宠繃閲嶅鏇存柊
if (index === lastUsedIndex && Math.abs(rainValue - lastRainValue) < 0.1) {
// console.log('鐢变簬鏁版嵁鏃犳樉钁楀彉鍖栵紝璺宠繃鏈鏇存柊');
diff --git a/src/utils/water.js b/src/utils/water.js
index 745eedf..dd06db4 100644
--- a/src/utils/water.js
+++ b/src/utils/water.js
@@ -1,4 +1,3 @@
-import { cartesianToXY } from "@/utils/map";
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
@@ -92,7 +91,7 @@
colorRender,
sizeIndex: 0,
});
- enableWaterArrowFlow(true);
+ enableWaterArrowFlow(false);
toggleWaterShadow(false);
console.log(
`浠跨湡妯℃嫙鍙傛暟锛氳姹傝矾寰� ${baseUrl}, 甯ч棿闂撮殧 ${interval}ms, 鏄惁寮�鍚笓棰樻覆鏌� ${colorRender}`
@@ -117,7 +116,17 @@
viewer.scene.camera.flyTo(view);
// console.log("Camera view initialized for water simulation.");
}
-
+/**
+ * 鏇存柊姘撮鑹�
+ */
+export function updateWaterColor(color) {
+ if (water) {
+ water.color = Cesium.Color.fromCssColorString(color);
+ console.log("鍒囨崲棰滆壊涓猴細",color);
+ } else {
+ console.warn("No water simulation to pause.");
+ }
+}
/**
* 鏆傚仠姘翠綋妯℃嫙
*/
@@ -184,7 +193,8 @@
*/
export function enableWaterArrowFlow(enabled) {
if (water) {
- water.arrowEnabled = enabled; // 鍋囪 SDK 鏀寔姝ゅ睘鎬�
+ // 榛樿鍏抽棴鐘舵��
+ water.flowEnabled = enabled; // 鍋囪 SDK 鏀寔姝ゅ睘鎬�
console.log(`绠ご娴佸悜鍔ㄧ敾宸�${enabled ? "寮�鍚�" : "鍏抽棴"}`);
} else {
console.warn("鏈壘鍒版按浣撴ā鎷熷浘灞傦紝璇峰厛鍚姩娲按妯℃嫙");
--
Gitblit v1.9.3